A Domain-Customizable SVG-Based Graph Editor for Software Visualizations Tony Lin, Feng Zou, Holger M. Kienle and Hausi A. Müller University of Victoria, Canada {gaoyun,fzou,kienle,hausi}@cs.uvic.ca Abstract We have developed a fully-featured graph editor based on Scalable Vector Graphics (SVG) that can be customized for different application domains. Our SVG editor is an interactive SVG document (implemented in JavaScript) that can be embedded into other applications such as web browsers and office suites. As a result, maintenance documents now can be interactively explored, more easily integrated, and automatically kept in sync with the underlying data source. 1. Motivation The SVG editor that we have developed is a reaction to the observation that many software engineering tools developed by academia do not address the document-centric nature of development and maintenance processes. Specifically, the results obtained with maintenance tools (e.g., dependence graphs or interaction couplings) are difficult to integrate with other documents (e.g., architectural descriptions and bug reports) and once this is achieved it becomes difficult to update them to keep them in sync with other documents. For example, in the Rigi reverse engineering tool (www.rigi.csc.uvic.ca), the software graphs that a maintainer produces can be often only preserved and integrated into maintenance documents via taking static screenshots. In contrast, an instance of our SVG editor can be seen as a document that is both embeddable and interactive. When implementing our SVG editor, we have used the Rigi graph editor as a reference tool, striving to realize a close superset of Rigi s functionality. The Rigi tool developed and maintained for over a decade, and used on several industrial projects [5] has proven its usefulness for software maintenance and program comprehension. A tool that implements similar functionality can be expected to be equally useful than Rigi. 2. Features of the SVG Editor The SVG editor leverages W3C s Scalable Vector Graphics (SVG) Recommendation (www.w3.org/ Graphics/SVG) to render Rigi-like graphs. Similar to Dynamic HTML, SVG documents can be made interactive by embedding JavaScript code into them. There are several renderers for SVG (e.g., Adobe Viewer, Batik and Opera). The SVG editor is currently targeted at the Adobe Viewer, which is distributed as a plug-in. Once the Adobe Viewer has been installed, our SVG editor can be embedded into applications such as web browsers (e.g., Firefox and Internet Explorer), office suites (e.g., OpenOffice and Microsoft Office), Adobe PDF Reader, and RealPlayer. An earlier version of our SVG editor was primarily static and did allow only limited interactions (e.g., filtering of nodes and arcs, and hiding of node names) [2]. The current version is fully interactive and has all the features expected of sophisticated graph editors [3]. The SVG editor has been implemented completely with JavaScript in about 8,000 lines of code. While the editor functionalities are similar for both Rigi and the SVG editor, the latter exhibits a number of interesting features that distinguish it from stand-alone graph editors. Editor functionality and visualization information can be packaged into a single SVG file. As a result, there is no need for an extra installation procedure for our SVG editor. The SVG editor can be easily embedded into HTML documents and to a limited degree into PDFs. This allows, for example, to enhance design and maintenance documentation with sophisticated graphical views. Furthermore, readers of documentation can interactively manipulated these views. For example, an HTML or PDF version of a design document might show a graph of the high-level architecture of a software system. Maintainers can then interactively filter, expand, and zoom into the graph as needed to accomplish a maintenance task. Since an SVG graph file contains executable code, it is possible to realize live documents [4]. A live document can obtain information about its current state and environment. If necessary, the live document can then react accordingly. For example, the graph could be presented differently depending on the constrains of different viewers. In a network-enabled environment, a live document could 1
contact a document server to find out if a more recent version (of the document s graph data or editor functionality) is available and update itself accordingly. Furthermore, annotations and specific views created by the users of the document could be preserved. rendering them within other applications. 3. Sample Applications of the SVG Editor The data model (or schema) of our SVG editor is customizable by specifying dedicated node and arc types. This makes it possible to use the editor in a wide variety of application domains. Generally, the editor is useful for all kinds of information that can be suitable represented and manipulated as a graph. So far we have used the SVG editor to represent information about software systems and to visually render model instances of the Eclipse Modeling Framework (EMF) [3]. In the following we briefly describe two sample applications of the SVG editor to visualize software structures for program comprehension. Figure 1. SVG editor (embedded into Mozilla) rendering a C software system view Figure 1 shows a screenshot of the SVG editor. The editor is embedded into the Mozilla and shows dependencies of a software system written in C. The same SVG editor could be embedded also into PowerPoint for interactive exploration of the graph in front of an audience. In order to compare the capabilities of our editor with Rigi, we have written a converter that allows us to import existing Rigi graphs into the SVG editor. The Rigi graphs range from small graphs (dozens of nodes) to larger graphs (a few hundreds of nodes) [5]. Our experiences indicate that the SVG editor can be a suitable replacement for Rigi. It is fast enough to allow interactive exploration of larger graphs while being more versatile than Rigi with respect to exporting of graph views and Figure 2. SVG editor (embedded into Internet Explorer) rendering a web site view We have also used the SVG editor to visualize different views for web site reverse engineering in REGoLive [1]. REGoLive extends the Adobe GoLive web development tool with functionality for web site comprehension. Since it is not possible to directly show graphs in GoLive, we use the SVG editor instead. Control integration between REGoLive and the SVG graph editor is achieved via web services, which allow us to send messages between the two components. For example, selecting a graph node in SVG sends a message to GoLive to select the corresponding entities in the views. Figure 2 shows a screenshot of a web site developed in GoLive in the background and a corresponding graphical view in the foreground. Nodes in the graph represent files (such as web pages, CSS files, and JSPs) as well as GoLive-specific development objects (such as templates and smart objects). To summarize, we have presented an interactive graph editor based on SVG and implemented in JavaScript that has several desirable properties it is interactive, scriptable, domain-customizable, and embeddable. References [1] G. Gui, H. M. Kienle, and H. A. Müller. REGoLive: Web site comprehension with viewpoints. 13th IEEE International Workshop on Program Comprehension (IWPC 05), pages 161 164, May 2005. [2] H. M. Kienle, A. Weber, and H. A. Müller. Leveraging SVG in the Rigi reverse engineering tool. SVG Open / Carto.net Developers Conference, July 2002. [3] Y. T. Lin. A customizable SVG graph visualization engine. Master s thesis, University of Victoria, Apr. 2008. [4] A. Weber, H. M. Kienle, and H. A. Müller. Live documents with contextual, data-driven information components. 20th ACM International Conference on Documentation (SIGDOC 02), pages 236 247, Oct. 2002. [5] K. Wong, S. R. Tilley, H. A. Müller, and M. D. Storey. Structural redocumentation: A case study. IEEE Software, 12(1):46 54, Jan. 1995. 2
Appendix for Tool Demonstration A Domain-Customizable SVG-Based Graph Editor for Software Visualizations Tony Lin, Feng Zou, Holger M. Kienle and Hausi A. Muller University of Victoria, Canada {gaoyun,fzou,kienle,hausi}@cs.uvic.ca I. Tool Maturity For an academic research prototype, the SVG editor is a mature and stable tool. It has been initially developed in 2003 an has been significantly enhanced in the following years by several members of the University of Victoria's Rigi group. Two papers that describe the technical details of the SVG editor have been accepted at the international SVG Open conference series in 2003 (http://www.svgopen.org/papers/2002/kienle_weber_mueller rigi_reverse_engineering/) and 2007 (http://www.svgopen.org/2007/papers/customizablesvggraphvisualizationengine/). II. Tool Availability The tool is available upon request and we cannot guarantee that we will react quickly to bug reports and requests for enhancements. (In practice, however, it is straightforward to reverse engineer and change the working of the editor because it is implemented in JavaScript, which can be directly read. We purposely do not attempt to obfuscate the JavaScript code.) In the future we plan to make the sources public with an open source license. III. Conducting the Tool Demo In the demo we want to show the audience: The interactive features of the editor Different embeddings of the editor Sample instantiations/customizations of the editor for different domains We elaborate on these points in the following subsections. III.1 Interactive Features When we start up the graph editor we see something like this:
Since the editor is implemented completely in JavaScript based on Scalable Vector Graphics, the audience is often sceptical whether such an editor is truly interactive, fully-featured and sufficiently fast. Thus, we begin the demo with a brief walk-through of the features that one can expect from an interactive graph editor: Scrolling and zooming (without loss of resolution) Filtering of nodes and arcs (based on node and arc types) Changing of node shapes and color Searching for node and arc tags Selecting of (multiple) nodes etc. Furthermore, there is a context menu for nodes that allows additional operations:
More advanced features of the editor are: A history panel on the left, which provides a mechanism for saving different states in a sequence of graph manipulations. Theses saved states can easily be returned to by leftclicking on the snapshot of the state in the history view. A hierarchical panel on the right that allows to navigate hierarchical graphs. Such a graph contains super-nodes that can be expanded into subgraphs. III.2 Different embeddings of the editor A major benefit of using SVG for rendering the graphs is that the editor is just a SVG file that can be embedded into various host applications. For the demo we want to show the following embeddings: Web browsers: Embedding the SVG into a web browser such as Firefox or Internet Explorer is the most common scenario. In the demo we can show, for example, how this approach allows to create interactive HTML-based design documents that visualize software structures. PowerPoint: Embedding the same SVG into PowerPoint allows interactive exploration of the graph in front of an audience (e.g., in an architectural review meeting). For this feature, PowerPoint has to be run in presentation mode. PDF: High-quality documentation can be made interactive by embedding the SVG into PDF. This is useful in cases where rendering of HTML in a web browser is deemed not appropriate. Batik: The SVG file can be also displayed directly in a SVG viewer such as Batik. This makes it possible to export SVG into other (static) formats.
Note that all of the above embeddings are realized with the same SVG file. Furthermore, embedding SVG into a web browser makes the graph editor accessible to applications that themselves are embedding a web browser. For example, since Eclipse embeds IE we can render SVG within Eclipse via IE. III.3 Sample Instantiations A very important feature of the graph editor is its domain-customizability. This makes it possible to use the editor in different context to render different kinds of graph data. In the demo we want to show a number of sample instantiations of the editor for different domain to give the audience an idea of the editor's versatility: Properties of software systems: The domain that is probably of the most interest to the attendees of this conference is the visualization of software structures. In this domain graph nodes denote entities such a variables, functions/procedures and subsystems, and arcs represent dependencies between the nodes. The following picture shows an example of a smaller software system. (The editor is embedded in Mozilla.) EMF model instances: The Eclipse Modeling Framework (EMF) is a modeling framework and code generator for building tools and applications according to a user-defined data model description. We have written an Eclipse plug-in that automatically derives an instantiation of the SVG editor for visualizing a particular EMF model. In the demo we start with a simple EMF model defined in Eclipse and show how to run our
plug-in to generate the corresponding editor. A wizard that creates the editor is run on an Eclipse project that contains an EMF model: The SVG editor is then generated and rendered within Eclipse. We render the SVG file in an Eclipse view that embeds Internet Explorer: Structure of web sites: Similar to software structures, this domain visualizes dependencies between entities of a web site or page. Such visualizations can be used for understanding and reverse engineering of web sites. The following pictures show the structure of a web page that has been created by a JSP. (The editor, which is embedded into IE, has been invoked by Adobe GoLive.)
If there is interest from the audience, we can look under the hood and show how a domain is encoded and the editor customized.