Draw A DAG

Introduction

The problem that we were confronted with was the rendering of a dependency diagram to represent the workflow of a software delivery process. To show the progress of a commit made into a source control repository through the build and deployment cycles.

The data that we had was in the form of a Directed Acyclic Graph.

We had to decide on a technology to show this effectively on our Web Application. We have a tech stack of Java on the backend, Rails for the front end bridged with JRuby.

One immediate thought was to use a javascript library such as d3.js to render this. But this meant identifying a suitable graph style and reverse engineering it to suit our requirements. It seemed almost as much effort as writing it from scratch. We did our bit of research on displaying DAGs.

This presentation would explain the challenges and techniques for Graph Rendering.

Problem

Functional criteria

The structure of graph should remain same over repeated queries (rules out randomized algorithms)
It should be made of web-elements that user can interact with
Each edge needs to be separately visible since we need some interaction on them
Should be easily customizable since we need to show a lot of information to user
Should be efficient even for dense graphs

Problem

Aesthetic criteria

Show hierarchical structure of DAG. (either left-right / top-down)
Avoid edge crossings and sharp bends
Keep edges short
Favor symmetry and balance

Solution

If we consider the whole layout as a grid of n x n matrix
Each node needs to be assigned a layer (column) and depth (row) in the grid
Each edge needs to know what cells in the grid it need to move through

Building Graph

Adjacency List representation
Every node knows about its parents & children
List of nodes with zero parents (roots) and with zero children (leaves) so that you can traverse left-to-right / right-to-left with ease

Cycle Detection

DFS traversal
Remember the nodes in current path
When we encounter a new node we check if we have seen this node in current path before
If we have then there is a cycle!
If we haven't we add it to current path and continue
We pop the node from current path just before popping out from recursion

Cycle removal

Heuristics Based on Vertex Orderings
Berger-Shor Algorithm
Greedy Cycle Removal
Heuristics Based on Cycle Breaking
Minimum FAS in a Weighted Digraph

Sugiyama Algorithm

Layering
Dummy node creation
Edge cross minimization
Optimization

Layering

The Longest-Path Algorithm
The Coffman-Graham Algorithm
Network-simplex Layering Algorithm [graphviz]
Healy-Nikolov's branch-and-cut algorithm

The Longest-Path Algorithm

sort the nodes in topological order
initialize layer of all nodes to 1
for each node v in sorted list

for each immediate neighbor u

assign layer max{layer(u), layer(v)+1}

[optional optimization] move root nodes closer to neighbors.
Ex: if the minimum layer of all immediate neighbor is 3 then set current root node layer to 2

Dummy Node Creation

DFS traversal
Starting from root nodes we traverse left-right
For each node we see if there is any child which is more than one layer away
For each such child we create as many dummy nodes between parent and child as required
Ex: If a parent node is at level 1 and child node is at level 4 then we create 2 dummy nodes at level 2 & 3 each

Initialize depths of nodes

initialize depths of all root nodes to 1
DFS traversal
traverse left to right
keep track of maximum depth assigned in each layer X
if the node is not assigned depth yet then assign depth as X+1 and increment X

Counting edge crossings

At this point all the edges are of length 1
between 2 consecutive pair of layers
for all the combinations of edges going from layer to layer+1 say A and B

depth of A in layer 1 (a1)
depth of A in layer 2 (a2)
depth of B in layer 1 (b1)
depth of B in layer 2 (b2)
following 4 cases exist

Edge cross minimization

Barycenter Heuristic
Median Heuristic [graphviz]
Greedy Switch Heuristic

Barycenter Heuristic

traverse left-right and right-left alternatively until edge-crossings reduce or max 24 iterations
for each node in level x
set depth = average depth of neighbors (total depths of all neighbors / number of neighbors)
when traversing left-right neighbors are children (layer+1) and during right-left traversal neighbors are parents (layer-1)

Optimization

Layering cont...

The Coffman-Graham Algorithm

Network-simplex Layering Algorithm [graphviz]

Healy-Nikolov's branch-and-cut algorithm

Edge cross minimization cont...

Median Heuristic [graphviz]

Greedy Switch Heuristic

Performance analysis

Genetic Algorithms

Gotchas

There is cycle waiting to send you into a loop!
Do not traverse a Graph without a visited set!
Always run your algorithms against huge graphs (mesh) even if you do not expect them in real life scenarios.
The simplest algorithm might do the trick.

Takeaways

Implementation of Graph layout algorithms in Java
How does graphviz draw graphs
Graphs is not a research topic. Its everywhere!
Getting back to basics with recollection of all basic Graph algorithms (traversal, topological sort, cycle detection etc.)

Bibliography

http://www.cs.nyu.edu/courses/summer04/G22.1170-001/6a-Graphs-More.pdf (cycle detection)
http://cs.brown.edu/~rt/gdhandbook/ (chapter 13)
http://www.graphviz.org/Documentation/TSE93.pdf (graphviz)
http://emis.library.cornell.edu/journals/JGAA/accepted/2005/EiglspergerSiebenhallerKaufmann2005.9.3.pdf
http://sydney.edu.au/engineering/it/~shhong/fab.pdf
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.35.8744&rep=rep1&type=ps (evolutionary algorithm)
http://www.youtube.com/watch?v=n3tG0AKwiRE, http://www.niftytools.de/?p=41, http://www.niftytools.de/?p=57, http://www.niftytools.de/?p=70 (sugiyama in action)
http://books.google.co.in/books?id=H06j5GJKITIC&pg=PA64&lpg=PA64&dq=longest+path+layering&source=bl&ots=Q-GUciM5ET&sig=j3IDU93go4mKYeeVHDfWS15A9hs&hl=en&sa=X&ei=aXewUZHgAs_PrQe5ooGYCg&ved=0CFwQ6AEwBg#v=onepage&q=longest%20path%20layering&f=false