Jump to: navigation, search

Difference between revisions of "Zest/DOT"

m (Fixed errors in table)
m (Developer Documentation: Cleanup)
Line 124: Line 124:
 
== Developer Documentation ==
 
== Developer Documentation ==
  
This feature started as a [[Google Summer of Code 2009]] project:
+
The goal of this feature is to implement the [http://www.graphviz.org/ Graphviz] [http://www.graphviz.org/doc/info/lang.html DOT language] as a domain-specific language (DSL) for [http://www.eclipse.org/gef/zest/ Zest: The Eclipse Visualization Toolkit], both as an input and output format. In other words, the goal is to transform both DOT graphs to Zest visualizations (to be used in Java SWT applications), and Zest visualizations to DOT graphs (to be rendered as image files with Graphviz).
  
<table border="0" cellspacing="3" cellpadding="2" width="100%">
+
This feature started as a [http://socghop.appspot.com/student_project/show/google/gsoc2009/eclipse/t124022230869 project] in the [[Google Summer of Code 2009]] by [[User:Steeg.netcologne.de|Fabian Steeg]], mentored by Ian Bull, for [[GEF Zest Visualization|Zest]].
<tr align="center" bgcolor="#595791">
+
                <td><font color="#FFFFFF"><b> Title </b></font></td>
+
<td><font color="#FFFFFF"><b> Student </b></font></td>
+
<td><font color="#FFFFFF"><b> Mentor </b></font></td>
+
<td><font color="#FFFFFF"><b> Eclipse Project</b></font></td>
+
<td><font color="#FFFFFF"><b> Google Page</b></font></td>
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
                <td>Graphviz DOT as a DSL for Zest</td>
+
<td>[[User:Steeg.netcologne.de|Fabian Steeg]] (IRC: fsteeg)</td>
+
<td>Ian Bull</td>
+
<td>[[GEF]] (component: [[GEF Zest Visualization|Zest]])</td>
+
                <td>[http://socghop.appspot.com/student_project/show/google/gsoc2009/eclipse/t124022230869 Student Project]</td>
+
</tr>
+
</table>
+
 
+
The goal of this project is to implement the [http://www.graphviz.org/ Graphviz] [http://www.graphviz.org/doc/info/lang.html DOT language] as a domain-specific language (DSL) for [http://www.eclipse.org/gef/zest/ Zest: The Eclipse Visualization Toolkit], both as an input and output format. In other words, the goal is to transform both DOT graphs to Zest visualizations (to be used in Java SWT applications), and Zest visualizations to DOT graphs (to be rendered as image files with Graphviz).  
+
  
 
=== Resources  ===
 
=== Resources  ===

Revision as of 14:28, 13 March 2010

Graphviz DOT as a DSL for Zest

This Eclipse feature provides support for the Graphviz DOT language in Zest: The Eclipse Visualization Toolkit, both as an input and output format. It provides API und UI elements to transform both DOT graphs to Zest visualizations (to be used in Java SWT applications), and Zest visualizations to DOT graphs (to be rendered as image files with Graphviz).

User Documentation

Installation

In Eclipse 3.5, add the update site at http://quui.de/updates (Help -> Install New Software... -> Add...) and install the dot4zest feature (from the Zest category).

GUI

In the UI, this feature adds two wizards ('New Zest Graph' and 'New Zest Project') under a category labeled 'Visualization':

DotZestWizards.png

And a 'Zest Graph' view:

DotZestViewSelection.png

New Zest Project

This wizard sets up a Zest project. The project created by the wizard contains a 'templates' folder containing sample DOT files. The DOT files in the 'templates' folder are compiled to Zest graph subclasses automatically, and can be launched as Java applications to view the Zest Graph:

DotZestProjectWizard.png

This implements a basic Zest authoring environment using DOT as a DSL, as upon saving the DOT file, the same Zest application can be relaunched, showing the Zest graph created from the changed DOT file. See the section on the graph view below for a way to visualize the DOT without running the generated class.

New Zest Graph

This wizard creates a new Zest graph subclass. In the first page the container and a graph template are selected, the resulting Zest graph for the template is previewed:

DotZestGraphWizardPage.png

In the second page the DOT representation of the selected template can be customized. After the wizard finishes, it runs the generated Zest Graph to display the result (here customized in the second page):

DotZestGraphWizardResult.png

The generated Zest file will be in the org.eclipse.zest.dot package. To get a compiling result without setting up anything, select the org.eclipse.zest.dot package in the src-gen folder of a Zest project as the container in the wizard (or select it before starting the wizard).

Zest Graph View

The Zest Graph view listens to changes made to *.dot files in the workspace. The view draws the DOT graphs using Zest and allows for image export of the current Zest graph. When a *.dot file is added to the workspace or altered in an editor, the Zest graph view is updated with the graph created from the *.dot file. For instance, consider a file with the .dot extension, containing the following DOT graph definition:

digraph s{ 
 n1[label="Node 1"]; n2[label="Node 2"]; 
 n1 -> n2[style=dotted label="A dotted edge"]
}
 

The view will display:

DotZestM8Screenshot2.png

The view contains buttons to load a specific *.dot file, to export the current Zest graph as an image file by calling the dot executable, to layout the current graph, and to re-select the directory containing the dot executable (from left to right). When the image export button is selected, a PDF for the current graph is saved in the directory containing the input *.dot file. In this example, the export looks like this:

DotZestM2Rendered.png

This completes the Zest-based DOT authoring environment: if the *.dot file is inside the templates/ folder of a Zest project, the file will both be visualized in the Zest Graph view (e.g. during editing) and compiled to a Zest graph subclass (e.g. to be used in a different application), and can be exported as a PDF with Graphviz.

At the same time the view provides a simple way to visualize *.dot file output of any kind of program, e.g. to visualize and debug internal data structures, results, etc: if a program running in Eclipse outputs any *.dot file in the workspace, the view will be updated with the corresponding Zest graph.

API

Via the API, DOT can be imported to Zest graph subclasses (*.java files) or Zest graph instances, and Zest graph instances can be exported to DOT or image files.

DOT Import

To import DOT to Zest, the DotImport class is used:

/* The DOT input, can be given as a String, File or IFile: */
DotImport importer = new DotImport("digraph Simple { 1;2; 1->2 }");
/* Compile the DOT input to a Zest graph subclass: */
File file = importer.newGraphSubclass();
/* Or create a Zest graph instance in a parent, with a style: */
Graph graph = importer.newGraphInstance(shell, SWT.NONE);

DOT Export

To export a Zest graph to DOT, the DotExport class is used:

/* For some Zest graph, we create the exporter: */
DotExport exporter = new DotExport(graph);
/* Export the Zest graph to DOT: */
String dot = exporter.toDotString();
/* Or to an image file, via a given Graphviz installation: */
File image = exporter.toImage("/opt/local/bin", "pdf");

The complete sample usage is available in the repository, as well as working DOT input samples.

Animation

The DOT import implementation contains experimental animation support, representing animation steps as subgraphs in the DOT input (which if rendered with Graphviz results in a static description of the animation).

For instance, for the input below a Zest animation is created in which the single steps can be executed by clicking the button below the graph:

digraph SampleAnimation {
 /* We can specify a Zest layout for the animation here: */
 layout=tree // = TreeLayoutAlgorithm
 /* Global attributes can be defined for edges and nodes: */
 node[label="Node"]
 edge[label="Edge" style=dotted]
 1;2;3;4;5
 /* The single animation steps are marked by numbers: */
 subgraph cluster_0{ 1 -> 2 [label="Dashed" style=dashed]}
 subgraph cluster_1{ 1 -> 3 }
 /* The final animation step needs to be marked with "end": */
 subgraph cluster_2_end{ 3 -> 4; 3 -> 5}
}

After the first step:

DotZestM5Screenshot1.png

And the final state of the graph:

DotZestM5Screenshot2.png

The same input file, exported with Graphviz, shows the animation steps as subgraphs:

DotZestAnimatedExport.png

A possible use case for defining such animations with DOT is to easily create animated course material, e.g. to explain data structures. The same file defining the animation can be used to export a PDF illustrating the steps in a static way.

Developer Documentation

The goal of this feature is to implement the Graphviz DOT language as a domain-specific language (DSL) for Zest: The Eclipse Visualization Toolkit, both as an input and output format. In other words, the goal is to transform both DOT graphs to Zest visualizations (to be used in Java SWT applications), and Zest visualizations to DOT graphs (to be rendered as image files with Graphviz).

This feature started as a project in the Google Summer of Code 2009 by Fabian Steeg, mentored by Ian Bull, for Zest.

Resources

Bundles and dependencies

The main bug for this project is bug 277380. View a complete list of related bugs. If you have suggestions for this project you can file a new bug. The CVS repository for this project is located at cvs.dot4zest.berlios.de:/cvsroot/dot4zest; access info. You can also download nightly CVS snapshots.

To run the current work in progress code, check out the bundles from the CVS repository above in Eclipse 3.5 (Galileo) and install the Zest, JET, Xpand, Xtext and MWE 0.7.x features (which are available from the Galileo update site; you have to uncheck 'group items by category' to see the Zest features). The code now uses the TMF components from Galileo, so if you have oAW 4.3 installed, it should probably be uninstalled first.

You should also install the optional Xtext Antlr feature 0.7.x from the Itemis update site at http://download.itemis.com/updates/ (see the Xtext documentation for details on this). Finally, you need to check out the org.openarchitectureware.vis.graphviz bundle from the SVN at http://emfmodelvisualizer.googlecode.com/svn/galileo/. After the checkout, run (Run As -> MWE workflow) the GenerateDot.mwe in the src/ folder of that bundle.

Run the *Suite.java test suites of the individual bundles (in src-test/) as JUnit tests to get an impression of the current implementation state. To test the UI components, run an Eclipse application configured with org.eclipse.zest.dot.ui and required plugins. See details on usage in the milestone sections below.

Motivation

I believe both Graphviz input and output for Zest would make a lot of sense: Graphviz is a very popular tool and its DOT language is widely used. Support for it could make using Zest very easy for many people who are familiar with DOT.

It would also be useful for existing Eclipse tools that are based on Graphviz, like TextUML or EclipseGraphviz, and possibly others, for instance in the Mylyn rich task editor (for embedding DOT graphs in the wiki text markup, visualized with Zest).

On the output side, Zest could benefit from Graphviz output as it provides a way to produce high-quality export into different file formats, e.g. for printing Zest visualizations, or using them in digital publications.

As Graphviz supports many different node shapes, edge styles, layouts etc. the goal of this project is not to provide support for all Graphviz features (or even as many as possible), but to set up initial basic support (directed and undirected graphs, edge and node labels, edge styles, basic layout support) and focus on the infrastructure to make these transformations usable instead (see user interface section below), which will hopefully create a solid foundation for future expansion (see section on future ideas below).

Progress

Milestones

These milestones correspond to the Google Summer of Code 2009 milestones from the timeline below.

Milestone 8

Zest graph view
Exported PDF

Milestone 8 adds support for exporting Zest graphs to image files directly by calling the dot executable of a local Graphviz installation. To make this functionality usable from the UI, milestone 8 also adds a view that listens to changes made to *.dot files in the workspace. The view draws the DOT graphs using Zest (see Milestone 7) and allows for image export of the current Zest graph.

When a *.dot file is added to the workspace or altered in an editor, the Zest graph view will be updated with the graph created from the *.dot file, e.g. see the screenshot on the right for a file with the .dot extension, containing the following DOT graph definition:

digraph s{ 
	n1[label="Node 1"]; n2[label="Node 2"]; 
	n1 -> n2[style=dotted label="A dotted edge"] 
}

The view contains buttons to load a specific *.dot file, to export the current Zest graph as an image file by calling dot, to layout the current graph, and to re-select the directory containing the dot executable (from left to right). When the image export button is selected, a PDF for the current graph is saved in the directory containing the input *.dot file (see image on the right).

Full API sample usage can be found in the TestImageExport tests from the org.eclipse.zest.dot.export bundle.

Milestone 7

DotZestSimple.png

Milestone 7 adds support for dynamic drawing of DOT graphs with Zest by interpreting the parsed EMF object tree and creating a Zest graph instance (see screenshot). This is now used in the graph wizard (see Milestone 3) to allow dynamic preview of the Zest graph when the DOT template is changed inside the wizard. The DOT input can be given as a String, File or IFile. A Zest graph instance can then be created in a parent, with a style:

DotImport dotImport = new DotImport("digraph Simple { 1;2; 1->2 }");
Graph graph = dotImport.newGraphInstance(shell, SWT.NONE);

Full sample usage can be found in the TestGraphInstanceDotImport tests from the org.eclipse.zest.dot.import bundle.

Milestone 6

Milestone 6 (altering the original timeline, see below) replaces the oAW dependency with the Galileo TMF components (Xtext, Xpand and MWE). This also changes the dependency on the original org.openarchitectureware.graphviz bundle from oAW to the newer org.openarchitectureware.vis.graphviz bundle from the EMF model visualizer project. See also bug 277397. Instructions on running the CVS code can be found in the Resources section above. As the DOT grammer has changed a little, I slightly altered the way the Zest layout is specified in the DOT input (graph[layout=spring] replaces layout=spring). The included samples and the files generated by the project wizard have been updated to reflect this.

Milestone 5

Milestone 5 adds a basic Graphviz-compatible animation DSL for Zest (bug 277402) by adding animation support to the DOT-to-Zest transformations, representing animation steps as subgraphs in the DOT input (which if rendered with Graphviz results in a static description of the animation).

DotZestM5Screenshot1.png
DotZestM5Screenshot2.png

For instance, for the input below a Zest animation is created in which the single steps can be executed by clicking the button below the graph (see screenshots on the right for the first step and the final state of the graph):

digraph SampleAnimation {
	/* We can specify a Zest layout for the animation here: */
	layout=tree // = TreeLayoutAlgorithm
	/* Global attributes can be defined for edges and nodes: */
   	node[label="Node"]
   	edge[label="Edge" style=dotted]
	1;2;3;4;5
	/* The single animation steps are marked by numbers: */
	subgraph cluster_0{ 1 -> 2 [label="Dashed" style=dashed]}
	subgraph cluster_1{ 1 -> 3 }
	/* The final animation step needs to be marked with "end": */
	subgraph cluster_2_end{ 3 -> 4; 3 -> 5}
}

See the included test files and the graph wizard for further samples. The example above is automatically created when a Zest project is created with the wizard (see milesotne 4 below).

Milestone 4

Milestone 4 adds a Zest project type with Graphviz support (bug 277400) by implementing a Zest project nature, builder, and wizard. The project created by the wizard has a 'templates' folder containing a sample DOT file. The DOT files in the 'templates' folder are compiled to Zest graph subclasses by the builder. These can be launched as Java applications to view the Zest Graph:

DotZestM4Screenshot.png

Effectively this implements a basic Zest authoring environment using DOT as a DSL, as upon saving the DOT file, the same Zest application can be relaunched, showing the updated Zest graph created from the changed DOT file.

Milestone 3

Milestone 3 adds a Zest wizard for Graphviz import (bug 277399) that generates a new Zest graph implementation class (which supports DOT export), based on customizable DOT templates or direct input in the wizard.

DotZestM3Screenshot.png

For detailed usage instructions see the included documentation (org.eclipse.zest.dot.ui/documentation.html).

Milestone 2

Milestone 2 adds basic Graphviz export for Zest (bug 277398) by generating a DOT file or string from a Zest graph instance:

DotZestM2.png

For instance, the input and the result can look as follows:

Graphviz-rendered export
/* Set up a directed Zest graph with a single connection: */
Graph graph = new Graph(shell, SWT.NONE);
graph.setConnectionStyle(ZestStyles.CONNECTIONS_DIRECTED);
GraphConnection edge = new GraphConnection(graph, SWT.NONE, 
        new GraphNode(graph, SWT.NONE, "Node 1"), 
        new GraphNode(graph, SWT.NONE, "Node 2"));
edge.setText("A dotted edge");
edge.setLineStyle(SWT.LINE_DOT);
/* Export the Zest graph to a DOT string or a DOT file: */
System.out.println(DotExport.exportZestGraph(graph));
DotExport.exportZestGraph(graph, new File("src-gen/DirectSample.dot"));

See the included sample (from above), test files, and documentation for further information.


Milestone 1

Milestone 1 implements basic Graphviz import for Zest (bug 277397) by generating a Zest Graph subclass from a DOT description:

DotZestM1.png

For instance, the input and output can look as follows:

DotZestM1Screenshot.png
digraph SampleGraph{
	/* Specify the Zest layout algorithm to use: */
	layout=grid
	/* Global attributes can be defined for edges and nodes: */
	edge[label="Edge" style=dashed]
	node[label="Node"]
	1; 2
	/* Override node attributes from above: */
	3[label="Leaf1"] 
	4[label="Leaf2"]
	1->2
	2->3
	/* Override edge attributes from above: */
	2->4[label="Dotted" style=dotted]
}

See the included test files and documentation for further samples.

Timeline

Glass.gif Pending Progress.gif Active Ok green.gif Done

The intended timeline consists of 6 core and 2 optional milestones. This should ensure providing the core functionality described below even if things take longer than expected, and very flexible, integrated and complete (realizing and using all the connections in the figure below) support for existing Eclipse visualization technology if all works out as planned.

Milestone Weeks Date What How Planned Bundle Bugs Status
M1 1 2009-05-31 Core Graphviz import to create standalone Zest Generate basic Zest code from a DOT meta model instance (using Xpand) org.eclipse.zest.dot.import (dep.: org.openarchitectureware.vis.graphviz and Zest) bug 277397 Ok green.gif
M2 2 2009-06-14 Core Graphviz export for standalone Zest Generate DOT output from a Zest graph instance (using JET) org.eclipse.zest.dot.export (dep.: Zest only) bug 277398 Ok green.gif
M3 1 2009-06-21 UI for initial Graphviz to Zest import Wizard for a new Zest Graph with DOT export based on a DOT file or direct input (based on M1 and M2) org.eclipse.zest.dot.ui (dep.: org.eclipse.zest.dot.import, org.eclipse.ui) bug 277399 Ok green.gif
M4 1 2009-06-28 UI for maintaining Graphviz representations of Zest visualizations Project builder, wizard and nature for Zest projects that create Zest graphs from Graphviz DOT files placed in a dedicated folder (based on M1 and M2) org.eclipse.zest.dot.ui (see above) bug 277400 Ok green.gif
M5 2 2009-07-12 Basic form of a Graphviz-compatible animation DSL for Zest Animation support for the DOT to Zest transformations, representing animation steps as subgraphs (based on M1) org.eclipse.zest.dot.import (see above) bug 277402 Ok green.gif
(Mid-term) - 2009-07-13 - - - - -
M6 (new) 1 2009-07-19 Replace oAW dependency with Galileo TMF components Switch to Galileo TMF components and updated EMF model visualizer Graphviz bundle org.eclipse.zest.dot.import (see above) related: bug 277397 Ok green.gif
M7 (new) 1.5 2009-07-30 Support dynamic drawing of Zest graphs created from DOT Compile generated Zest graph class or interpret parsed EMF object tree to return Zest Graph instance via import API org.eclipse.zest.dot.import (see above) related: bug 277397 Ok green.gif
M8 (optional) 1.5 2009-08-09 optional: Support for exporting Zest graphs to image files directly Call a local Graphviz installation (directly or using an existing Xpand template which creates a command-line script) org.eclipse.zest.dot.export (see above) related: bug 277398 Ok green.gif
RC 1 2009-08-16 Wrap up Complete and polish documentation, samples, tests and packaging (update site) all bug 277380 Ok green.gif
(Pencils down) - 2009-08-17 - - - - -
M6 (original) - postponed by new M6 Support for the Zest-based EMF model visualizer view Transformation from DOT meta model instances to the EMF model visualizer language (using Xpand) - - -
M7 (original, optional) - postponed by new M7 optional: Standalone Zest and DOT export for the EMF model visualizer language Transformation from EMF model visualizer language meta model instances to the DOT language (using Xpand) - - -

Implementation

I plan to implement the desired functionality based on Eclipse Modeling technologies, in particular Xtext (part of TMF) and Xpand (part of M2T) for the input part (parse DOT, generate Zest) and JET for the output (see details below). The sketched approach (see figure on the right) depends on Eclipse components only (Xtext, Xpand, JET, and oAW).

Implementing Graphviz DOT input and output for Zest using Eclipse modeling technology (solid arrows represent existing components)

DOT to Zest

An Xtext grammar, parser and Xpand generators for Graphviz DOT already exist in openArchitectureWare (oAW) 4.3 (the relevant bundles org.openarchitectureware.graphviz.*, are now part of the EMF model visualizer project).

Based on this, my plan is to implement an Xpand generator that transforms Graphviz DOT descriptions into Java code that creates an equivalent Zest visualization (see figure on the right and M1 in the timeline below). I also want to provide a way to define Zest animations using the DOT language (by representing animation steps as subgraphs in DOT, see M5 in the timeline).

Zest to DOT

To transform Zest graph instances to the Graphviz DOT language I intend to use JET (see figure on the right and M2 in the timeline).

There are two reasons I plan to use JET instead of Xpand here. First, I'd like to be able to transform any Zest graph instance to DOT directly (not only those for which we have a DOT meta model instance that could act as the input to Xpand). Second, even if we had a DOT meta model instance (which we could create from the Zest graph), using Xpand would introduce a runtime dependency on the Modeling Workflow Engine, whereas with JET we only introduce a dependency on a single class (the generator class JET created from the template).

User Interface

To make these transformations available to the user, my general plan is to make the DOT to Zest transformations (which depend on Eclipse modeling technology at runtime) available as part of the workbench, while the generated Zest graph classes and the DOT output can be used directly and without (or with very little, see above) additional runtime dependencies, e.g. in pure Zest SWT applications.

To generate Zest from DOT, I intend to implement a wizard that creates a Zest graph subclass and basic sample usage code (see examples below) from a Graphviz DOT file or from direct DOT input inside the wizard (see M3 in the timeline). I imagine offering different DOT templates to the user (e.g. simple directed graph, simple animation), which can be edited in the wizard, with a live preview of what the Zest graph is going to look like next to it.

Extending this kind of functionality, I'd like to implement a Zest project type where the DOT files are placed in a special folder (and can be edited conveniently using the DOT editor from oAW). Using a project builder, the corresponding Zest Graph implementation classes will be generated, which can be used from other parts of the project's code, similar to JET templates and generators (see M4 in the timeline).

To provide visualization of DOT graphs using Zest in a workbench, I want to create Xpand generators which provide compatibility with the EMF model visualizer language and its Zest-based visualization view (see dotted arrows in the figure above and M6 in the timeline).

Examples

Below are two examples to concretize what the input could look like and what I in principle plan to generate from that input.

Minimal

"digraph simple { 1 -> 2 }"

As a first example, consider the following minimal DOT graph and how it renders with Graphviz:

digraph simple { 1 -> 2 }

From this, roughly the code below should be generated (comments to be generated omitted here). It's a Zest Graph subclass which is populated with the specified objects on construction, and includes export to DOT via a generator class generated by JET (commented out here to make the example compile). It also contains some sample usage code in a main method to make it runnable as a plain Java SWT application, which renders as shown in the image on the right.

DotZestSimple.png
/** Zest Graph to be generated from "digraph simple { 1 -> 2 }" */
public class SimpleDirectedGraph extends Graph {
    public SimpleDirectedGraph(Composite parent, int style) {
        super(parent, style);
        setConnectionStyle(ZestStyles.CONNECTIONS_DIRECTED);
        GraphNode n1 = new GraphNode(this, SWT.NONE, "1");
        GraphNode n2 = new GraphNode(this, SWT.NONE, "2");
        new GraphConnection(this, SWT.NONE, n1, n2);
        setLayoutAlgorithm(new TreeLayoutAlgorithm(
                LayoutStyles.NO_LAYOUT_NODE_RESIZING), true);
    }
    public String toString() { 
        return super.toString(); // new GraphTemplate().generate(this);
    }
    public static void main(String[] args) {
        Display d = new Display();
        Shell shell = new Shell(d);
        shell.setText(SimpleDirectedGraph.class.getSimpleName());
        shell.setLayout(new FillLayout());
        shell.setSize(100, 150);
        new SimpleDirectedGraph(shell, SWT.NONE);
        shell.open();
        while (!shell.isDisposed()) {
            while (!d.readAndDispatch()) { d.sleep(); }
        }
    }
}

Animation

DotZestAnimationGraphviz.png

In contrast to Graphviz, which only provides static graph visualization, Zest supports animations. By combining the Graphviz DOT language with Zest in a similar manner as described above, creating simple animations with Zest could become very easy.

For instance, defining an animation could be done by specifying the individual animation steps as subgraphs (with every subgraph defining how the current graph should be altered in the animation). Subgraphs render in individual boxes with Graphviz:

digraph simple_animation { 
    subgraph cluster_0{ 1 -> 2 } 
    subgraph cluster_1{ 1 -> 3 } 
}

When converted to Zest, such an input could result in generated code as below (comments to be generated again omitted here). When executed, this application renders as on the first image on the right. After clicking the button it changes to the second image.

DotZestAnimation1.png
DotZestAnimation2.png
public class SimpleAnimationGraph extends Graph {
    public SimpleAnimationGraph(Composite parent, int style) {
        super(parent, style);
        setConnectionStyle(ZestStyles.CONNECTIONS_DIRECTED);
        setLayoutAlgorithm(new TreeLayoutAlgorithm(LayoutStyles.NO_LAYOUT_NODE_RESIZING), true);
        final GraphNode n1 = new GraphNode(this, SWT.NONE, "1");
        final GraphNode n2 = new GraphNode(this, SWT.NONE, "2");
        new GraphConnection(this, SWT.NONE, n1, n2);
    }
    public String toString() {
        return super.toString(); // new GraphTemplate().generate(this);
    }
    static class AnimationRunner implements Runnable {
        private Graph g;
        public AnimationRunner(Graph g) { this.g = g; }
        public void run() {
            Animation.markBegin();
            new GraphConnection(g, SWT.NONE, (GraphNode) g.getNodes().get(0),
                    new GraphNode(g, SWT.NONE, "3"));
            g.applyLayout();
            Animation.run(1000);
        }
    }
    public static void main(String[] args) {
        Display d = new Display();
        final Shell shell = new Shell(d);
        shell.setText(SimpleAnimationGraph.class.getSimpleName());
        shell.setLayout(new GridLayout(1,false));
        shell.setSize(200, 200);
        Button b1 = new Button(shell, SWT.PUSH);
        b1.setText("Go");
        final Graph g = new SimpleAnimationGraph(shell, SWT.NONE);
        g.setLayoutData(new GridData(GridData.FILL_BOTH));
        b1.addSelectionListener(new SelectionListener() {
            public void widgetDefaultSelected(SelectionEvent e) {}
            public void widgetSelected(SelectionEvent e) { new AnimationRunner(g).run(); }
        });
        shell.open();
        while (!shell.isDisposed()) {
            while (!d.readAndDispatch()) { d.sleep(); }
        }
    }
}

Required imports for these examples (omitted above for better readability):

import org.eclipse.draw2d.Animation;
import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.events.SelectionListener;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.zest.core.widgets.Graph;
import org.eclipse.zest.core.widgets.GraphConnection;
import org.eclipse.zest.core.widgets.GraphNode;
import org.eclipse.zest.core.widgets.ZestStyles;
import org.eclipse.zest.layouts.LayoutStyles;
import org.eclipse.zest.layouts.algorithms.TreeLayoutAlgorithm;

Future Plans

Possible extensions of this project which are probably out of scope for the SOC period include:

  • Add support for different Graphviz shapes through Zest custom figures, e.g. for UML class diagrams
  • Add support to visualize Graphviz subgraphs as separate Zest graphs that can be accessed from the main graph
  • Look into possible ways of supporting Graphviz edge decorators (open or closed arrows, diamonds, etc.)
  • Evaluate possible integration as an actual part of the Zest API, e.g.:
graph.add("1->2"); // use DOT snippets to build the Zest graph
graph.load("graph.dot"); // load an entire DOT graph into an existing Zest graph