collapsing/expanding compound node in cytoscape

Question

Does cytoscape.js support collapsing/expanding compound node ?

Eg. before collapsing

node1 (-)
--node1.1
--node1.2
------node1.2.1

After collapsing

node1 (+)

A (+) or (-) sign to expand/collapse would be great.

Looking for options to Group a set of nodes using Compound node and collapse/expand via user-interaction. If cytoscape.js doesn't support this by-default, any alternatives/workarounds to reach the goal ?

Answer 1

It's relatively straightforward using the API.

Collapse: node1.descendants().addClass('collapsed-child')

Expand: node1.descendants().removeClass('collapsed-child')

... where .collapsed-child { opacity: 0; }

You may also want to change the positions of the descendants so the parent node is smaller. Alternatively, you could use display: none for .collapsed-child if you don't care about seeing edges of collapsed children.

Answer 2

For others in search of a solution to the issue of removing a node and it's children in Cytoscape.js, I tried and failed with the (admittedly dated) solution in the accepted answer: .descendants().

While awaiting a response on GitHub,

https://github.com/cytoscape/cytoscape.js/issues/2877

I devised the following solution. Briefly, I :

• use .successors() rather than .dependents() (suggested above)
• save the data in a variable; then, restore those data
• obviate the need for .addClass()

var myNode = cy.elements('node[name="Technology"]');

// cy.collection() : return a new, empty collection
// https://js.cytoscape.org/#cy.collection
var myCollection = cy.collection();

setTimeout(function(){
  console.log('Deleting "Technology" node + descendants ...')
  // Save data for later recall:
  // https://js.cytoscape.org/#cy.remove
  myCollection = myCollection.union(myNode.successors().targets().remove());
  myNode.successors().targets().remove();
  // nested setTimeout():
  setTimeout(function(){
    console.log('Restoring "Technology" node + descendants ...')
    myCollection.restore();
    console.log('Done!')
  }, 2000);
}, 2000);