GraphvizWpf: control to render Dot graphs. Allows adding mouse click event, tooltips and more

Dev
1

I have created GraphvizWpf.
The control renders the graph specified in the Dot language and provides the ability to handle mouse-click events on any of the graph’s elements and add tooltips to the vertexes.

2

Neat. I think making it easier to do mouse-click events in Graphviz would be nice, particularly in e.g. SVG output.

Did you have an easy enough time doing this? Do you have feedback about how to make it easier? Was it hard to, for example, match up node positions to their IDs so you can handle mouse-click events?

3

Hello Mark,

What my library does is the following:

  1. Use Graphviz Dlls to convert Dot graph description into Json
  2. Iterate through Nodes, Edges, and Clusters and execute their drawing commands
  3. All drawing commands are implemented using the standard WPF Shape classes.
  4. Each Shape class has a special property Tag that can be used to assign any arbitrary data to the shape.
  5. I use this property to assign what Graphviz object this particular shape represents (node, edge, or cluster, including the name of this object)
  6. After the graph is drawn, handling the mouse event is very easy because the mouse click event contains the Shape that is clicked, and its Tag property can be used to see what Graphviz object it is and what its name is.

The hardest part was to figure out how to do it. I also wasn’t sure that it was even possible. Gladly, it was simpler than I expected, given that Graphviz supports JSON output and drawing commands that can easily be implemented on the Cancas of a particular GUI library.

4

Great, glad to hear the JSON output gave you what you need.