I have a cytoscape.js graph, I have 2 node types. I want to style the nodes based on the class.
I have this so far:
cy = cytoscape({
container: document.getElementById("cy"),
style: [
{
selector: 'node',
style: {
'background-color': 'green',
'label': 'data(_label)',
'shape': 'hexagon',
}
},
{
selector: '.server',
style: {
'background-color': 'red',
'shape': 'square'
}
},
{
selector: '.db',
style: {
'background-color': 'blue',
'shape': 'triangle'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#fff',
'target-arrow-color': '#fff',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
}
}
],
elements: {
nodes: [
{ data: { id: 'a', _label: 'zzz', type: 'node'}, classes: 'db'},
{ data: { id: 'b', _label: 'b', type: 'node'}, classes: 'server'},
{ data: { id: 'c', _label: 'c', type: 'node'}, classes: 'server'},
{ data: { id: 'd', _label: 'd', type: 'node'}, classes: 'server'},
{ data: { id: 'e', _label: 'e', type: 'node'}, classes: 'server'},
{ data: { id: 'k', _label: 'k', type: 'node'}, classes: 'server'}],
edges: [
{ data: { id: 'ab', source: 'a', target: 'b', type: 'edge'}},
{ data: { id: 'bc', source: 'b', target: 'c', type: 'edge'}},
{ data: { id: 'bd', source: 'b', target: 'd', type: 'edge'}},
{ data: { id: 'ae', source: 'a', target: 'e', type: 'edge'}},
{ data: { id: 'ek', source: 'e', target: 'k', type: 'edge'}}]
}});
When the graph loads it all works fine. I see 2 blue triangles and the rest are red squares, as expected.
I have some code that shows a dialog when the user selects change type from a context menu, I've elided that code, but the handler looks like this:
var foo = cy.$("#"+selectedNode.id);
foo.removeClass(foo.classes()[0]);
foo.addClass(newType); // wher newType here is either 'server' or 'db'
This works the first time I try to change something. i.e. I can change a server to a db, and it switches from a red square to a blue triangle, or vice versa. However it only works once. If I try to change a second time (either same node or different node), then I just get a green hexagon all the time.
Why does it only work once ?
I assume I'm somehow corrupting the graph, no errors are logged to the console.