Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Zest/DOT"

m (Added to Category:GEF)
(Changed this to be a redirect to GEF/GEF4/DOT)
 
(60 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is the wiki page for a Google Summer of Code 2009 [http://socghop.appspot.com/student_project/show/google/gsoc2009/eclipse/t124022230869 project]. 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).
+
#REDIRECT [[GEF/GEF4/DOT]]
 
+
==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 [http://abstratt.com/textuml/ TextUML] or [http://eclipsegraphviz.wiki.sourceforge.net/ EclipseGraphviz], and possibly others, for instance in the [http://tasktop.com/blog/eclipse/rich-editing-for-tasks-via-mylyn-wikitext 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).
+
 
+
==Implementation==
+
 
+
I plan to implement the desired functionality based on [http://www.eclipse.org/modeling/ Eclipse Modeling] technologies, in particular [http://wiki.eclipse.org/Xtext Xtext] (part of [http://www.eclipse.org/modeling/tmf TMF]) and [http://wiki.eclipse.org/Xpand Xpand] (part of [http://www.eclipse.org/modeling/m2t M2T]) for the input part (parse DOT, generate Zest) and [http://wiki.eclipse.org/M2T-JET 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).
+
 
+
[[Image:DotZestOverview.png|thumb|275px|right|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 [http://code.google.com/p/emfmodelvisualizer/ 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 [http://wiki.eclipse.org/M2T-JET 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 [http://wiki.eclipse.org/Modeling_Workflow_Engine_(MWE) 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).
+
 
+
==Timeline==
+
 
+
Based on the ideas described above, I propose the following timeline. It consists of 6 core and 2 optional milestones. This should ensure providing the core functionality described above even if things take longer than expected, and very flexible, integrated and complete (realizing and using all the connections in the figure above) support for existing Eclipse visualization technology if all works out as planned.
+
 
+
<table border="0" cellspacing="3" cellpadding="2">
+
<tr align="center" bgcolor="#595791">
+
<td><font color="#FFFFFF"><b>Milestone</b></font></td>
+
<td><font color="#FFFFFF"><b>Weeks</b></font></td>
+
<td><font color="#FFFFFF"><b>Date</b></font></td>
+
<td><font color="#FFFFFF"><b>What</b></font></td>
+
<td><font color="#FFFFFF"><b>How</b></font></td>
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
<td>M1</td>
+
<td>1</td>
+
<td>2009-05-31</td>
+
<td>Core Graphviz import to create standalone Zest</td>
+
<td>Generate basic Zest code from a DOT meta model instance
+
(using Xpand)</td>
+
</tr>
+
<tr align="center" bgcolor="#e0d0e6">
+
<td>M2</td>
+
<td>2</td>
+
<td>2009-06-14</td>
+
<td>Core Graphviz export for standalone Zest</td>
+
<td>Generate DOT output from a Zest graph instance (using JET)</td>
+
 
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
<td>M3</td>
+
<td>1</td>
+
<td>2009-06-21</td>
+
<td>UI for initial Graphviz to Zest import</td>
+
<td>Wizard for a new Zest Graph with DOT export based on a DOT
+
file or direct input (based on M1 and M2)</td>
+
 
+
</tr>
+
<tr align="center" bgcolor="#e0d0e6">
+
<td>M4</td>
+
<td>1</td>
+
<td>2009-06-28</td>
+
<td>UI for maintaining Graphviz representations of Zest
+
visualizations</td>
+
<td>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)</td>
+
 
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
<td>M5</td>
+
<td>2</td>
+
<td>2009-07-12</td>
+
<td>Basic form of a Graphviz-compatible animation DSL for
+
Zest</td>
+
<td>Animation support for the DOT to Zest transformations,
+
representing animation steps as subgraphs (based on M1)</td>
+
</tr>
+
<tr align="center" bgcolor="#e0d0e6">
+
<td>(Mid-term)</td>
+
<td>-</td>
+
<td>2009-07-13</td>
+
<td>-</td>
+
<td>-</td>
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
<td>M6</td>
+
<td>1</td>
+
<td>2009-07-19</td>
+
<td>Support for the Zest-based EMF model visualizer view</td>
+
<td>Transformation from DOT meta model instances to the EMF model
+
visualizer language (using Xpand)</td>
+
</tr>
+
<tr align="center" bgcolor="#e0d0e6">
+
<td>M7 (optional)</td>
+
<td>1.5</td>
+
<td>2009-07-30</td>
+
<td><i>optional:</i> Standalone Zest and DOT export for the EMF model visualizer language</td>
+
<td>Transformation from EMF model visualizer language meta model instances
+
to the DOT language (using Xpand)</td>
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
<td>M8 (optional)</td>
+
<td>1.5</td>
+
<td>2009-08-09</td>
+
<td><i>optional:</i> Support for exporting Zest graphs to image files directly</td>
+
<td>Use the existing Xpand transformation from oAW which creates a
+
command-line script that calls a local Graphviz installation</td>
+
</tr>
+
<tr align="center" bgcolor="#e0d0e6">
+
<td>RC</td>
+
<td>1</td>
+
<td>2009-08-16</td>
+
<td>Wrap up</td>
+
<td>Complete and polish documentation, samples, tests and packaging</td>
+
</tr>
+
<tr align="center" bgcolor="#faf7fb">
+
<td>(Pencils down)</td>
+
<td>-</td>
+
<td>2009-08-17</td>
+
<td>-</td>
+
<td>-</td>
+
</tr>
+
</table>
+
 
+
==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===
+
 
+
[[Image:DotZestSimpleGraphviz.png|right|65px|"digraph simple { 1 -> 2 }"]]
+
 
+
As a first example, consider the following minimal DOT graph and how it renders with Graphviz:
+
 
+
<pre>
+
digraph simple { 1 -> 2 }
+
</pre>
+
 
+
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.
+
+
[[Image:DotZestSimple.png|right|150px]]
+
 
+
<pre>
+
/** 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(); }
+
        }
+
    }
+
}
+
</pre>
+
 
+
===Animation===
+
 
+
[[Image:DotZestAnimationGraphviz.png|right|150px]]
+
 
+
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:
+
 
+
<pre>
+
digraph simple_animation {
+
    subgraph cluster_0{ 1 -> 2 }
+
    subgraph cluster_1{ 1 -> 3 }
+
}
+
</pre>
+
 
+
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.
+
 
+
[[Image:DotZestAnimation1.png|right|200px]]
+
[[Image:DotZestAnimation2.png|right|200px]]
+
 
+
<pre>
+
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(); }
+
        }
+
    }
+
}
+
</pre>
+
 
+
Required imports for these examples (omitted above for better readability):
+
 
+
<pre>
+
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;
+
</pre>
+
 
+
==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 [http://eclipsesource.com/blogs/2009/03/20/just-in-time-for-eclipsecon-custom-figures-in-zest/ 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.:
+
<pre>
+
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
+
</pre>
+
 
+
[[Category:SOC]]
+
[[Category:GEF]]
+

Latest revision as of 18:19, 25 March 2014

Redirect to:

Back to the top