Hierarchical Grid Components Demo

This demo shows how grid components in the hierarchical layout can result in much more compact arrangements.

So-called grid components are related to edge grouping. A grid component consists of a root node and bus nodes that are directly connected to the root node. All edges connecting bus nodes of the same grid component have the same edge direction.

Demo Presets

The demo offers different configuration presets alongside an option to customize it arbitrarily.

Balanced

Each grid component is assigned a default GridComponentDescriptor with no further configuration.

Leaves

Each grid component uses a GridComponentDescriptor where only one node is allowed before and after the common bus segment by setting maximumNodesAfterBus and maximumNodesBeforeBus to one.

Squares

The GridComponentDescriptor for each grid component is configured separately such that its elements will be arranged in a square.

Left Aligned

Setting the maximumNodesBeforeBus to zero and allowing arbitrarily many nodes after the common bus segment, results in a left alignment.

Right Aligned

Setting the maximumNodesAfterBus to zero and allowing arbitrarily many nodes before the common bus segment, results in a right alignment.

Custom

In this mode, you can play around with the sliders that control the maximumNodesAfterBus and maximumNodesBeforeBus setting to see its effect.

Things to Try

• Click Toggle Grid Components to see the difference between the layout without grid components and the current grid component preset.
• Try the different grid component presets in the dropdown menu.
• Choose the Custom preset of the dropdown and try different settings for maximumNodesAfterBus and maximumNodesBeforeBus with the sliders.
• Edit the graph and click the play_arrow button to re-run the layout with the current settings.