Chapter 5. Graph Hierarchies

Table of Contents

Working with Graph Hierarchies
Folding Characteristics
Folding-related State Across Views
Managing Graph Hierarchies
Grouping Support in DefaultGraph
Class GroupedGraph
Look-up Modifications
Interface IHierarchy
Class FoldingManager
Look-up Modifications
Interface IFoldedGraph
Converters and Callbacks
Visual Representation of Graph Elements
View Implementations
User Interaction
Class GraphEditorInputMode
Folding Support
Class NavigationInputMode
Class GraphCommands

This chapter describes the yFiles for Silverlight Viewer library component's support for the concept of graph hierarchies. Graph hierarchies, which are also referred to as grouped graphs, can be used to naturally organize large data sets or inherently hierarchically structured data.


A graph hierarchy is an augmentation to the graph concept where proper graph structures are allowed to be grouped within nodes to arbitrary depth, forming a hierarchically organized inclusion tree of graph structures.


The yFiles for Silverlight Viewer library component supports graph hierarchies by means of "grouping," which means that arbitrary graph structures, i.e., nodes together with their connecting edges, can be "put into" other nodes. The nodes that are embedded this way are then called "grouped" nodes, and the containing node is referred to as a "group node."

The visual representation of a group node and its grouped nodes is such that the group node by default always entirely encloses all its grouped nodes. Also, the grouped nodes contained in a group node are visible within the graph containing the group node itself. As a result of the former, when a group node is moved, all its grouped nodes move correspondingly. Vice versa, when a grouped node is moved, the bounds of all its enclosing group nodes automatically adjust.

Figure 5.1, “Grouping in a graph” shows a graph with group nodes. The contents of the group nodes can be seen both in the canvas and also listed in the tree-like view on the left side of the application's window. Note that besides the ability to contain proper graph structures, group nodes still behave as nodes in the normal sense. In particular, this means that they can be connected by edges like any other node.

Figure 5.1. Grouping in a graph

Grouping in a graph.

From a conceptual point of view, grouped nodes that are contained in a group node can be thought of as being hierarchically one level below the graph where the group node resides in. This notion is also expressed by calling the group node the "parent" of its contained nodes. Technically, however, the grouped nodes belong to the same graph as their group node.


"Folding" is an extension of the grouping concept which provides additional functionality on top of it. Basically, folding provides support for collapsing group nodes and for the reverse operation, expanding previously collapsed group nodes. Collapsing a group node means hiding away all of its contents, expanding a previously collapsed group node results in the contents being visible again.

Figure 5.2, “Folding in a graph” shows the same graph as above, however with one group node collapsed. As a result, there are less nodes and edges in the canvas, since the graph structure contained within the original group node disappeared. Also, the edge that connected "March" to "April" is redirected and now connects the collapsed group node to "April."

Figure 5.2. Folding in a graph

Folding in a graph.

Note how the tree-like view to the left reflects the new graph structure and label text.

In tutorial demo application GraphEditorWindow both grouping and folding can be observed in an application context.