Draw A DAG

Sara & Srinivas
(work in progress)

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

    1. Layering
    2. Dummy node creation
    3. Edge cross minimization
    4. Optimization

    Layering

    1. The Longest-Path Algorithm
    2. The Coffman-Graham Algorithm
    3. Network-simplex Layering Algorithm [graphviz]
    4. 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

    1. Barycenter Heuristic
    2. Median Heuristic [graphviz]
    3. 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

    Copy of Draw A DAG

    By Vijay Krishnavanshi

    Source: srinivasupadhya

    Copy of Draw A DAG

    • 930

    More from Vijay Krishnavanshi