How to autoselect DAG node ancestors in Cytoscape.js

Question

When selecting (ie clicking on) a node in a DAG rendered with Cytoscape.js, I would like all "ancestor" nodes to be selected automatically.

I have adapted this algorithm to set a property, "visited", to 1 for all nodes that are ancestors (or perhaps more accurately, predecessors - see Directed graph page on Wikipedia) of the selected node.

However, subsequently calling node.select() on all nodes with node.data('visited') == 1 does not cause the style defined with the :selected selector to apply to those nodes unless you hold down shift. Even then, only the ancestors are highlighted, the clicked on node is not styled.

http://jsbin.com/piguxuna/1/edit?js,console,output

Side note: the example shows how to do a GraphViz dot/Sugiyama layout in Cytoscape.js using dagre.

Answer 1

(1) If you use old browsers, you'll probably run into bugs. Only modern, autoupdated browsers are supported. If you can't update your browser on your phone, update your OS to the latest version.

(2) Your approach for selection is problematic. On tap, you should build a collection of the desired elements (see cy.add() and cy.collection() ). Then, you can do toSelectEles.select() and cy.elements().not( toSelectEles ).unselect() .