Using WPF to Visualize a Graph with Circular Dependencies

Introduction

This article presents a WPF application that renders an object graph which the user can rearrange via drag-and-drop. The graph highlights all circular dependencies between its nodes. The application was built in Visual Studio 2008, and compiled against the .NET Framework v3.5 with Service Pack 1.

Background

Recently at work, I wrote some code that analyzed an object graph in order to determine the order in which its objects should be initialized. The requirement was to initialize the objects on which an object depends before initializing that object. In a scenario like that, the object graph cannot contain any circular dependencies (i.e., where an object indirectly depends on itself, such as object A depends on object B, and object B depends on object A).
After implementing that logic, I thought it would be interesting to create a user interface that showed an object graph and highlighted any circular dependencies it contained. This weekend, I had some free time, so I wrote the application described in this article which does exactly that.

What the program does

The simplest example of what this application does is shown in the following screenshot:

The object graph seen above has only four nodes and no circular dependencies. Each node in a graph can be moved by the user so that he or she can arrange the objects into whatever layout makes the most sense. After rearranging the graph seen previously, it can look like this:

Now, let’s take a look at a graph that contains a circular dependency:

The nodes and node connectors that are part of the circular dependency are highlighted in red. Notice how this graph has a button in the top right corner. Clicking on that button causes the graph to perform a 3D flip, and shows a detailed listing of all circular dependencies in the graph, as seen below:

There is a more complicated graph in the application that contains three circular dependencies:

Notice how the mouse cursor over the node connector on the left side has brought up a tooltip that explains which nodes are associated with that connector. In this example, the node connector links two nodes that both depend on each other. If we were to flip this graph over, the details view would list all three circular dependencies in the graph, like this:

Now that we’ve seen what this application does, let’s take a look at how it works.

Building a graph

The data shown by a graph could come from anywhere. In this application, the data for each graph comes from an XML file included in the source code. The following XML describes the simplest graph in the application (the first graph seen in the previous section of this article):



See full details: http://www.codeproject.com/KB/WPF/WpfGraphVisualization.aspx