Project Network Diagrams From Tables

Introduction

This application is based on Stefan Althoefer's Holiday Calendar Blog, which first showed how to generate diagrams from TWiki tables. In that respect, this blog is a sequel. Where Stefan's application requires the EasyTimelinePlugin, this one requires the DirectedGraphPlugin. In both cases, the script that generates the graph can be tedious to work with, and so tables enhance the usability.

I prefer this application's diagrams to MS Project's because they are easier to configure, maintain, and read. It is also much easier collaborate on these diagrams with TWiki than to use MS Project's collaboration environment.

Here's an example of a finished precedence diagram, based on a familiar process. (Of course everyone puts their pants on one leg at a time, but here's proof! With shading applied to completed nodes, you can see that our subject has been caught with his left leg unpanted).

Figure 1: Sample Precedence Diagram - "How To Get Dressed"

the diagram in this topic is not dynamically updated because DirectedGraphPlugin and FilterPlugin are not installed at twiki.org.

How it Works

Step 1: Maintain Tables

1. The (mandatory) set of nodes (tasks or milestones) with the following fields/columns:
   • Node (row number): is the used by the predecessor field. To maintain the referential integrity nodes should not be renumbered, e.g., by deleting rows or sorting table. %EDITTABLE{changerows="add"}% was used to prevent rows from being deleted.
   • Label: text that appears in diagram. Use \n to force a line break (e.g. to change the appearance of a node symbol.
   • Predecessors: a text field of comma-separated values. It would have been nice to use a multiple select here instead, but neither EditTablePlugin nor EditRowPlugin support multiple selects at this time. Large projects could use a separate topic for each node, and a predecessor field in a TWikiForm (since those do support multiple selects). But to avoid "topic proliferation" I would rather have the content in one place if possible.
   • Milestone flag: an indicator to overload node the default node shape
   • Completed flag: an indicator to overload node the default node shading
   • Cluster name: a named group items (see below)
   • Notes: long text that describes the task or milestone.
2. The (optional) set of "clusters" or groups of nodes. These might be used to show sub-projects, or a set of tasks assigned to particular resource.

This application has "database-like" behaviour, in that the clusters defined in one table are used when maintaining the other, as shown below:

Figure 2: Table of Nodes in Edit Mode

Step 2: Extract Tabular Data to Create "DOT" Code

earlier blog

FilterPlugin

Show the table extractions  Hide 

<dot>
digraph Title {
   graph [rankdir=LR, ranksep=0.0, bgcolor="#eeeeff"];
   node [shape=box style=filled fillcolor=white fontsize=10]; /* Default node style */

/* Labels for all nodes (tasks+milestones) */
%SEARCH{
   "^\| [0-9]* "
   topic="%TOPIC%"
   multiple="on"
   nonoise="on"
   type="regex"
   format="  $pattern(^\| ([0-9]*) \|.*) [label=\"$pattern(^\| ([0-9]*) \|.*). $pattern(^\| [0-9]* \| (.*?) \|.*)\"]"
}%

/* Milestones (overload shape) */
%SEARCH{
   "^\| .*\|.*\|.*\|.*Milestone.*"
   topic="%TOPIC%"
   multiple="on"
   nonoise="on"
   type="regex"
   format="  $pattern(^\| ([0-9]*) \|.*) [shape=diamond]"
}%

/* Completed nodes (overload fillcolor) */
%SEARCH{
   "^\| .*\|.*\|.*\|.*Completed.*"
   topic="%TOPIC%"
   multiple="on"
   nonoise="on"
   type="regex"
   format="  $pattern(^\| ([0-9]*) \|.*) [fillcolor=grey]"
}%

/* Clusters */
%EXTRACT{topic="%TOPIC%" expand="off" skip="1"
   pattern="^ \| ([^\|]*) \| ([^\|]*) \| ([^\|]*) \|"
   format="subgraph cluster$1 {label=\"$2\" bgcolor=\"$3\" $percntSEARCH{\"\| $1 \|\" topic=\"%TOPIC%\" multiple=\"on\" nonoise=\"on\" type=\"regex\" format=\"$pattern(^\| ([0-9]*) .*)\"}$percnt}"
}%

/* Precedence */
%EXTRACT{topic="%TOPIC%" expand="off"
   pattern="^\| ([0-9]*) \| ([^\|]*) \| ([^\|]*) \| ([^\|]*) ?\| ([^\|]*) ?\| ([^\|]*) ?\|"
   format="  $percntCALC{$SUBSTITUTE($TRANSLATE($3,$comma,;),;, -> $1; )}$percnt -> $1 $n"
}%
}
</dot>

Step 3: Generate the DOT Code

DirectedGraphPlugin

Show the DOT code  Hide 

digraph Title {
   graph [rankdir=LR, ranksep=0.0, bgcolor="#eeeeff"];
   node [shape=box style=filled fillcolor=white fontsize=10]; /* Default node style */

/* Labels for all nodes (tasks+milestones) */
  1 [label="1. START\n(naked)"]
  2 [label="2. Ready for work"]
  3 [label="3. Ready for winter"]
  4 [label="4. Ready for a fire alarm"]
  5 [label="5. Pants (left leg)"]
  6 [label="6. Pants (right leg)"]
  7 [label="7. Shirt"]
  8 [label="8. Jacket"]
  9 [label="9. Underwear"]
  10 [label="10. Shoes"]
  11 [label="11. Sweater"]
  12 [label="12. Hat"]
  13 [label="13. Socks"]
  14 [label="14. Gloves"]

/* Milestones (overload shape) */
  1 [shape=diamond]
  2 [shape=diamond]
  3 [shape=diamond]
  4 [shape=diamond]

/* Completed nodes (overload fillcolor) */
  1 [fillcolor=grey]
  4 [fillcolor=grey]
  6 [fillcolor=grey]
  7 [fillcolor=grey]
  9 [fillcolor=grey]
  13 [fillcolor=grey]

/* Clusters */
subgraph clusterOneLegAtATime {label="Everyone Does It..." bgcolor="#f1fff1"
  5
  6
}
subgraph clusterWinter {label="Brrrrr" bgcolor="#ccccff"
  3
  8
  11
  12
  14
}

/* Precedence */
  7-> 2; 10 -> 2 
  2-> 3; 12-> 3; 14 -> 3 
  9 -> 4 
  9 -> 5 
  9 -> 6 
  1 -> 7 
  11 -> 8 
  1 -> 9 
  5-> 10; 6-> 10; 13 -> 10 
  7 -> 11 
  11 -> 12 
  1 -> 13 
  8-> 14; 10 -> 14 
}

The original code for the cluster/subgraph section was a bit ugly because I couldn't get a newline to appear in the output of %EXTRACT%. For legibility of this article, I manually cleaned up the white space a bit (I cheated ).

Step 4: Generate the Diagram

Graphviz

Some Implementation Details

• A space was inserted before each line in the cluster table, to differentiate the tables during data extraction (a different regular expression works too).
• SEARCH strings like "\| ([0-9]*) are used to find all lines in the topic that have table data except for the table header, which does not a number in the first cell.
• The predecessor extract skips nodes without predecessors by virtue of those cells containing only one space.
• The node numbers were prefixed to the node labels (e.g., "1. START") as an aid when maintaining the predecessor lists.
• Precedence (this was the trickiest bit): after the FilterPlugin EXTRACTs the row number and predecessor list, the SpreadSheetPlugin is used to split the comma-separated predecessors into separate entries. But since its SUBSTITUTE can't handle commas, they first had to be TRANSLATEd into semi-colons. But in the end:
  • this: "| Node_x | Predecessor_1,Predecessor_2 |..."
  • becomes: "Predecessor_1 -> Node_x; Predecessor_2 -> Node_x"

Next Steps

• Use the Graphviz imagemap feature to create links from nodes to the appropriate table row, for ease of maintenance. That would provide behaviour similar to clicking on a node in MS Project.
• Fields for start dates, durations, resources... Gantt charts, and all the other stuff that MS Project has.
• Edge labels: Graphviz has the ability to add labels to the lines (or 'edges'). Besides providing additional annotation, this could be used by those who prefer 'activity-on-the-line' diagrams to this 'activity-on-the-node' diagram.

Related Resources

• Stefan Althoefer's Holiday Calendar Blog
• DirectedGraphPlugin: when installed, the plugin also has a useful subtopic, HowtoDirectedGraphs.
• FilterPlugin
• Graphviz:
  • General documentation
  • Node, Edge and Graph Attributes.
  • CPM/PERT charts with Graphviz (WikiMedia)

Comments

-- Michael Daum - 27 Oct 2008