Example with discreteMapper

I'd like to use the discreteMapper of CytoscapeWeb 2.0 (that is, the jQuery-based CytoscapeWeb) but need some example code showing what exactly I have to do.

I already tried with some code taken from the Flash-based CytoscapeWeb and tried

var entityColorMapper = {
    attrName: "etype",
    entries: [ { attrValue: "protein", value: "#ff0000" },
               { attrValue: "compound", value: "#00ff00" },
               { attrValue: "group", value: "#0000ff" } 
             ]
};

and then in the "style" structure I have

    "node.E": {
        fillColor: {
            discreteMapper: entityColorMapper
        }
    }

but this does not seem to work.

Solution

It's different in Cytoscape Web 2: https://github.com/cytoscape/cytoscapeweb/wiki/StyleObject

  // example discrete mapper
  fillColor: {
    defaultValue: "grey",
    discreteMapper: {
      attr: "type", // field in ele.data() to map to
      mapped: {
        "foo": "red", // field value : visual property value
        "bar": "blue"
      }
    }
  }

You don't really need to use a discrete mapper, since you could be using selectors in your style:

"node[type='foo']": { fillColor: "red", borderColor: "pink" },
"node[type='bar']": { fillColor: "blue" }

It's better to use the second approach, since you can separate the style for [type='blah'] for several visual properties at once (e.g. borderColor), much like CSS.

Remember: Make sure to always work with the latest prerelease version while Cytoscape Web 2 until the first official release is made. https://github.com/cytoscape/cytoscapeweb/downloads