Collapsing Groups in Diagrams

The drill-down approach helps the viewer concentrate only on a specific group structure of a diagram. However, some guidelines have to be followed to avoid disturbing the user’s mental map when group elements expand or collapse. More precisely, these operations should only affect the particular area of the diagram to which the expanded or collapsed groups belong. The remaining diagram should be modified as little as possible. In the expand case, the layout algorithm that determines the positions of the graph elements should ensure that it only provides the required space. In the collapse case, it should eliminate the free space caused by a collapse operation without altering the positions of the remaining elements.

However, designing algorithms for the drill-down approach is not trivial. Complete diagram solutions can help with that. yFiles is a commercial diagramming library that provides all the necessary tools to develop applications that can create, visualize, and automatically arrange the elements of a diagram. It has built-in support for grouping and merging of elements, and it fully supports collapsing and expanding of graph elements. In particular, for grouped graph structures, it provides automatic layout algorithms for arranging the graph elements while it also allows the insertion of new elements into an existing diagram without re-arranging the remaining parts of the diagram.

The video below demonstrates how one of yFiles’s layout algorithm arranges the newly expanded groups to fit in an existing diagram. Note that the arrangement is stable after the subsequent opening and closing of the groups. Finally, the groups are expanded and collapsed in a way that the expand button stays under the cursor.

In yFiles, a layout algorithm that inserts new elements into an existing diagram without re-arranging its existing elements is called incremental.

yFiles comes with a Hierarchic Grouping Sample Application. This example shows the interactive collapsing and expanding of groups of a graph. A collapsed group hides its contents and will most likely be smaller. An expanded group shows its content. Clicking on the +/- button of a group expands it or collapses it again.

The source code of the Hierarchic Grouping Sample Application is part of all yFiles packages and available on the yWorks GitHub repository:

Test the yFiles diagramming library with a fully-functional trial package. To add interactive collapsing and expanding of groups to your application, start with the Hierarchic Grouping Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your project.