Collapsible Hierarchy

A collapsible hierarchy is a tree in which you can dynamically expand/collapse the descendants of any given node. With JsPlumb's Hierarchy layout this is easily achieved, by passing in a custom child resolver function, and tracking the collapsed/expanded state of each node.

The dataset is the Italic language family, for which we got the data from here.

• Use the chevrons on nodes that have them to collapse/expand
• Click the label for a node to load up a related Wikipedia article
• Click the 'Zoom to dataset' button to zoom out so the entire current dataset is visible
• Click the 'Pan to current node' button to bring the current node into the center of the view.

This demo works in a similar way to the popups in the Neighbourhood views demonstration that we released recently: we create a Selection that has a generator method, and we supply that selection to the surface we create. The surface will render the contents of the selection rather than of the underlying Toolkit.

When you toggle the expand/collapse button on a node, we update the `collapsed` property of that node in the Toolkit, and then we instruct the selection to reload. The selection traverses down through the Toolkit's dataset from the root node, stopping at nodes that have `collapsed` set to true. Finally, the surface re-renders the dataset in the selection.

Our dataset contains a `link` data property for each language. We bind a click listener to each node's label, and then set the URL for that language on the iframe on the right hand side.

Read more about JsPlumb's Hierarchy layout on this page: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-hierarchy