A Domain-Customizable SVG-Based Graph Editor for ... - IEEE Xplore

A Domain-Customizable SVG-Based Graph Editor for Software Visualizations Tony Lin, Feng Zou, Holger M. Kienle and Hausi A. M¨uller University of Victoria, Canada {gaoyun,fzou,kienle,hausi}@cs.uvic.ca

Abstract

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

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/

978-1-4244-2614-0/08/$25.00 © 2008 IEEE

466

ICSM 2008

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 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.

Figure 1. SVG editor (embedded into Mozilla) rendering a C software system view

References

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

[1] G. Gui, H. M. Kienle, and H. A. M¨uller. 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¨uller. 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¨uller. 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¨uller, and M. D. Storey. Structural redocumentation: A case study. IEEE Software, 12(1):46–54, Jan. 1995.

467