Leveraging SVG in the Rigi Reverse Engineering Tool

Extended Abstract

Holger M. Kienle, Anke Weber, and Hausi A. Müller
Computer Science Department
University of Victoria
Canada
{kienle,anke,hausi}@csr.uvic.ca

Keywords: software reverse engineering, graph visualization, documentation, experience report, Scalable Vector Graphics, ECMAScript

Introduction

Reverse engineering of legacy software systems is a research area that heavily relies on visualization techniques to facilitate program understanding (e.g., for software maintenance activities), and to communicate software architecture and design (e.g., with graphs and diagrams). These visualizations constitute important system information, which becomes part of the system documentation. Scalable Vector Graphics (SVG) is well suited for reverse engineering visualizations of 2-dimensional graphics. This paper explains our approach to leverage SVG for reverse engineering and system documentation tasks.

Reverse Engineering

Chikofsky and Cross define reverse engineering as follows [1]: "Reverse engineering is the process of analyzing a subject system to (1) identify the system's components and their interrelationships and (2) create representations of the system in another form or at a higher level of abstractions." The second part of the process often involves visualization to communicate complex information about the software system more effectively. There are many different ways to visualize a subject system. However, a graph model offers the most intuitive way. Components of the system are represented as nodes, whereas interrelationships between components are represented as (directed) arcs. A simple example is a call graph for a program. Procedures in the program constitute the nodes of the call graph. Calls between procedures are represented with arcs. In a sense, software structure graphs, such as call graphs, are aerial maps for software engineers.

Rigi

Rigi is a reverse engineering tool developed over more than ten years at the University of Victoria [6]. It uses the graph model described above. The core of Rigi is a graph editor/drawing tool enhanced with additional functionality for reverse engineering tasks.

Figure 1: Software Structure Graph in Rigi

Figure 1 depicts a graph that visualizes parts of IBM's SQL/DS system, which is over one million lines of PL/AS code [2]. Red nodes are variables, yellow nodes are modules, and purple nodes are types. All arcs have been filtered out except for the yellow ones, which represent calls between modules (i.e., Figure 1 shows the call graph).

The graph visualization and manipulation is implemented with Tcl/Tk. This implementation exhibits several drawbacks. The rendering speed is rather slow and does not scale well for larger graphs. Furthermore, the GUI's look and feel is perceived as rather crude compared to the state of the art. Lastly, images cannot be exported (except for taking screenshots). The last point is a severe drawback, because Rigi graphs are the main result of the reverse engineering activity, which become essential system documentation [7]. Even if Rigi screenshots are cumbersomely integrated into the system documentation, they are mere static bitmaps that allow no interactive exploration.

SVG for Reverse Engineering

Intuitively, SVG seems a good candidate for reverse engineering visualizations. However, a more formal approach to confirm this hypothesis is needed. This section discusses in more detail how SVG meets the requirements of reverse engineering tools.

R1: Address the practical issues underlying reverse engineering tool adoption.
R2: Provide interactive, consistent, and integrated views, with the user in control.
R3: Provide consistent, continually updated, hypermedia software documentation.
R4: Integrate graphical and textual software views, where effective and appropriate.
R5: Use a simple, human-readable, lightweight format.
R6: Support introspection of schemas
R7: Support multiple, composable, modular, dynamically extensible schemas.

Figure 2: Reverse Engineering Requirements (R1-R7)

Kenny Wong identified reverse engineering tool requirements in his Ph.D. thesis [5]. Figure 2 lists the relevant requirements in the context of this paper. Rigi falls short in several of these requirements. Leveraging SVG within Rigi helps to alleviate several of Rigi's shortcomings.

The following list discusses the features of SVG that facilitate reverse engineering. We also identify the requirements (R1-R7) that are addressed by SVG. (The full version of the paper will contain more detailed explanations on how these requirements are met by SVG.)

XML-based (R5,R6,R7): Since SVG's encoding is XML-based, we can leverage XML technology for storage, parsing, and document transformation and querying.
W3C Recommendation (R1): A mature, open standard such as SVG is the foundation for tool support from several vendors in various products, open-source implementations, and cross-platform availability.
Interactivity (R3): SVG documents can be made interactive with embedded scripting (e.g., ECMAScript). Thus, documents are no longer necessarily static. Instead, they become live documents. For example, graph manipulations (such as filtering and layouting) can be performed interactively (e.g., during a PowerPoint presentation) to facilitate comprehension of complex reverse engineering information.
Portable (R4): The same SVG document can be visualized in diverse host environments. SVG allows reverse engineering results, such as Rigi graphs, to be accessible over the Web [3], to be used in PowerPoint presentations for project meetings, and to be incorporated into high-quality printed documentation.
Multimedia/HTML integration (R3,R4): SVG is among the media formats that the SMIL 2.0 multimedia standard integrates [4].

SVG Integration in Rigi

Because of SVG's benefits outlined above, we decided to leverage it in our Rigi tool to overcome Rigi's current limitations in visualization and document generation. Figure 1 is a typical reverse engineering result in Rigi. This graph is a document that we would like to easily incorporate into other host environments for presentation and documentation purposes (e.g., PowerPoint presentation, PDF document, and Excel spreadsheet).

Figure 3: Exported Rigi Graph in PowerPoint (top right) and Internet Explorer (bottom right)

This is accomplished by exporting a Rigi graph as an SVG document. The user can either write the SVG document into a file or automatically launch a Web browser to display the corresponding graph. Figure 3 shows the Rigi environment on the left side (workbench and sample graph) and the exported SVG document in PowerPoint (top right) and Internet Explorer (bottom right).

Export of the SVG graph is accomplished with Rigi's built-in Tcl scripting capabilities. The contents of the SVG document is straightforward. Rigi nodes are translated to SVG <circle> elements, arcs are translated to <line> elements. Every element has a unique id and contains several non-standard SVG attributes (e.g., every arc knows its source and destination node). These are used by the embedded ECMAScript code that implements the interactive behavior.

Figure 4: Rigi Graph in SVG

Figure 4 is an embedded SVG document (923 nodes and 4200 arcs) that can be used to explore, for example, the following interactive feature: Nodes and arcs can be filtered by clicking on the legend. For example, to filter out red "data" and purple "struct" arcs in the SVG graph, both labels (located in the upper right corner) can be clicked.

SVG Experiences

While developing the SVG Rigi graphs, we made, for example, the following observations:

The size of the SVG document for the graph in Figure 1 is about 700 KB. In contrast, a high-resolution screen shot of this image takes more than 9 MB.
Loading and rendering of SVG documents in Internet Explorer and PowerPoint scales well compared to Rigi. However, the browser freezes up for several seconds while loading the SVG document in Figure 3.
SVG file compression with gzip yields good results for our documents. For example, the size of the compressed SVG document for the graph in Figure 1 is about 100 KB.
As mentioned before, Rigi's rendering of graphs is not visually appealing. SVG on the other hand has powerful and versatile rendering features that allow sophisticated visual effects (e.g., nodes with opaque colors and arc arrows with <marker> elements).

Summary

Our experiences with SVG have been largely positive. We plan to further enhance the SVG Rigi graphs. Especially, we want to make the documents more interactive by incorporating additional graph manipulation functionality (e.g., moving and deletion of nodes).

References

1. Elliot J. Chikofsky and James H. Cross, "Reverse Engineering and Design Recovery: A Taxonomy", IEEE Software, pages 13-17, January 1990.

2. Kenny Wong et al., "Structural Redocumentation: A Case Study", IEEE Software, pages 46-54, January 1995.

3. Christian Nentwich, Wolfgang Emmerich, Anthony Finkelstein, and Andrea Zisman, "BOX: Browsing objects in XML", Software--Practice and Experience, 30(15):1661-1676, December 2000.

4. Lloyd Rutledge, "Multimedia standards: Building blocks of the web", IEEE MultiMedia, 8(3):13-15, July-September 2001.

5. Kenny Wong, "The Reverse Engineering Notebook", Ph.D. Thesis, Department of Computer Science, University of Victoria, 1999.

6. Hausi Müller and Karl Klashinsky, "Rigi: A System for Programming-in-the-large", 10th International Conference on Software Engineering (ICSE '88)}, pages 80-86, 1988.

7. Scott R. Tilley, Hausi A. Müller, and Orgun A. Mehmet, "Documenting Software Systems with Views", In Proceedings of the 10th International Conference on Systems Documentation (SIGDOC '92), Ottawa, Ontario, October 13-16, pages 211-219, 1992.

$Id: extended_abstract.html,v 1.3 2002/01/15 19:25:16 kienle Exp $