Skip to content

collapsing/expanding compound node in cytoscape

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

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.