Skip to main content
< Back to demo list

Active Filtering

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.

Active Filtering
What is active filtering?

Active filtering provides a way to filter connection targets when a drag begins. Try dragging a connection from one node to another - when you start to drag, the available targets are filtered.

How is it configured?

Active filtering is configured via a plugin for the Surface renderer in the Toolkit. When an activeFiltering plugin is set on a Surface and a beforeConnect function is supplied to the Toolkit's constructor, that function is called before a new connection is dragged, for every possible target for the current source. Whenever the beforeConnect method returns false, the corresponding target object (a node, group or port) is disabled, and the user will not be able to drop the connection onto it.

In this demonstration, each node contains a set of entries which each contain the name of two types of animal. Entries are deemed connectable if one or more animals from the source entry are matched in a given target. Disabled vertices have a data-jtk-enabledattribute written onto them with a value of false, allowing you to easily control their appearance via CSS.

What layout is used in this demo?

We use the Toolkit's ForceDirected layout in this demonstration. A Force directed layout is a layout in which the edges between vertices are thought of as springs, where the existence of an edge between two vertices has the effect of drawing them closer together.

When the user clicks 'Add a node', a new vertex is added and the layout is re-run. Note though that the position of vertices that have already been processed by the layout is unchanged. You can instruct the force directed layout to recompute every position but from a UX standpoint it's generally a better experience to only run the layout in an incremental fashion, so that is what the Toolkit does by default.

Further reading

Read more about active filtering in the docs on this page:

Read more about the Toolkit's ForceDirected layout on this page:

Fork me on Github
Get a head start with one of our pre-built applications:
Flowchart Builder
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/3, React and Svelte versions available.
Database Schema Builder
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2/3 and React versions available.
Chatbot Builder
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices.
Mindmap Builder
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Path Tracing
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
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
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.