Incremental Layout
Compared to a “normal” layout, which computes a completely new graph layout each time it is invoked, an incremental layout rearranges distinct parts of a graph while the remainder is not changed, or only slightly changed. This technique makes it possible to maintain the user’s mental map over a course of subsequent layouts of a changing graph, for example, in interactive use cases where a user modifies the graph.
The term mental map expresses a user’s experience of a graph, which is most notably influenced by a consistent and largely invariable placement of the graph elements in a sequence of layout algorithm invocations. “Normal” layout calculation does not consider the mental map in any way. In fact, a graph layout may change substantially even for modifications as small as adding a single edge!
For incremental layouts, the sketch, that is, the coordinates of the input graph, are considered for the non-incremental (also called fixed) elements. Thus, only inputs with coordinates that are already well-defined make sense when configuring an incremental layout.
yFiles for HTML provides unequaled support for incremental graph layout that seamlessly integrates with the “normal,” non-incremental major layout style. The following layout and edge routing styles provide support for incremental layout:
- Hierarchical Layout
- When enabling the dedicated from-sketch mode, the given coordinates are considered and user-specified incremental (new) items are inserted into the hierarchical layout.
- Organic Layout
- Incremental layout support is provided by means of the Scope feature.
- Tree Layouts
- TreeLayout supports incremental layout by means of property fromSketchMode. For more please see this section. RadialTreeLayout offers child ordering policy FROM_SKETCH which preserves the initial order of child nodes.
- Edge Routing
- Incremental routing support is provided by means of the Scope feature that allows you to define only a subset of edges that are changed while all other items remain as they are. To learn more about the feature in EdgeRouter, see the dedicated section Incremental Layout.
Use Cases
Incremental layout is useful in two main scenarios, both of which involve a given sketch:
- Interactively creating a graph structure, where the layout is dynamically calculated each time a new graph element is inserted.
- Improving specific parts of an existing graph layout, while keeping the rest of the layout largely unchanged.
Demo Applications
The following demo applications demonstrate how incremental layout can be configured and used:
- Incremental Hierarchical Layout
- Hierarchical Nesting (Incremental)
- Incremental Organic Layout
- Incremental Edge Router
Related Concept
Partial Layout is a related concept that also allows you to lay out distinct parts of a diagram. It allows you to use completely different layout styles for specific parts of a diagram and add the results to the original, unaltered remainder of the layout. However, layout algorithms that provide support for incremental layout will often yield a more cohesive and truly integrated overall layout of a diagram.