The source code for this application - and several others - is available on Github here. If you haven't got a license for the Toolkit, we offer 30 day evaluations.
This demonstration shows how you can use the Toolkit's dynamic selection rendering to create a hierarchy that can collapse and expand. The dataset is the Italic language family, for which we got the data from here.
How to use the demo?
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.
How does the expand/collapse work?
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.
How does the Wiki link work?
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.
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.
Schema Builder
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.
Chatbot Builder
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.
Org chart
The Toolkit makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.
Mindmap Builder
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Nested Groups
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
Path Tracing
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
Hello World
This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.
Image Processor
Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.
Neighbourhood Views
Use popups and the Toolkit's ability to dynamically render selections to provide neighbourhood contextual information for some selected element
Active Filtering
Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.
Segmented Connectors
An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines
Hierarchy Layout
The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options
Layouts
A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.
Collapsible Hierarchy
Use the Toolkit's ability to render a dynamically collapsible and expandable hierarchy.
Nested instances
Use the Toolkit's ability to nest instances to implement a simple desktop
