Code Gestalt is an software visualization tool that lets programmers illustrate themes and concepts based on the vocabulary used by the source code.

We implemented Code Gestalt as plug-in for Eclipse and built upon the JDT and Cultivate (2). The user interface is inspired by Relo (1), but focuses more on developer communication and semantics. The user can create diagrams with a simple drag-and-drop interface and edit it using contextual UI elements. The process of building class diagram can be completed without touching a tool-bar or menu. Of course, the interface provides default context, menu and keyboard commands, if the user prefers this.


Unlike traditional class diagrams Code Gestalt visualizes a lot of extra information, like the presence of warnings and errors. Double-clicking any Java-related entity of the diagram will open the corresponding source code in a text editor.

But the great strength of Code Gestalt lies in its ability to automatically extracts tags from the source code and displays them within the type boxes. These tags help the user to understand the role and emphasis of the individual types. An additional layer can be toggled, that overlays the complete diagram with the most commonly used tags. In this overlay view users can find implicit relations between types by exploring which types use the same language.

When a user identifies a key term, that term can be pinned to the diagram to highlight an area of interest. These landmarks can be customized by the user to help her and others to build a "map" of the software project. The thesis will explore if this work flow can help users to build mental models, orientate in, and communicate about source code.

In November 2010 the software prototype was advanced enough to start testing it. The design was evaluated with user tests performed both at RWTH Aachen University and the University of Bonn. We are now in the process of analyzing the results.

At CHI 2011 you can get a hands-on look at Code Gestalt, where it is a contestant in the Student Research Competition.

Download and installation

Disclaimer: This is an early version and it has known issues. This comes with no guarantees whatsoever.

1. Download and install JDK
2. Download and install Eclipse Classic
3. Download and install SWI Prolog
4. Install Graphical Editing Framework (Eclipse -> Help -> Install New Software.. -> Work with: "Helios")
5. Follow the instructions for installing JTransformer. Make sure, the Prolog binaries directory is known in PATH system variable
6. Copy this unreleased development build of Cultivate to your eclipse dropins folder (Code Gestalt will not work with the official Cultivate build 1.0.0! New versions of Cultivate will be released here)
7. Copy this build of Code Gestalt to your eclipse plugin folder

This setup has been tested with Windows 32-bit (XP, Vista, and 7). If you find you need to add/alter steps for other OSes, please let me know.

First Steps

To start working with Code Gestalt, you need to hook-up your Java-Project with JTransformer and Cultivate first:

1. Right-click a Java-Project
2. Select "Configure" -> "Assign JTransformer Factbase"
3. Accept all defaults
4. Right-click the project again
5. Select "Configure" -> "Convert to Cultivate Project"
6. Now you are ready to start using Code Gestalt (didn't promise it would be easy)

Start a diagram

You have several options:

• Click the Code Gestalt icon in the toolbar
• Right-click a package in the package explorer and select "New->Other->Code Gestalt Diagram"
• Right-click a project, package, type, or method and select "Create New Diagram From Selection"

Add types to diagram

Simply drag and drop types from any other Eclipse view to a free spot in the diagram canvas

Add methods/fields to diagram

Choose one of the following:

• Drag and drop members from any Eclipse view to the diagram canvas (you need to drop them on the corresponding type if it already exists)
• Select a type and click the double-plus icon to show all members
• Right-click a type box in the diagram and select "Expand"

Add structural relations (inheritance/calls)

Whenever you select a type or method in the diagram editor that has a relation to other types/methods in the diagram, you will see grey previews of these relations. The system will remove them, when you change the selection, to not clutter the diagram. If you wantto keep the relation arrows, simply click them, or for multiple relations, click one of the icons at the anchor points.

Use the Tag Overlay

Click "Tag Overlay" in the toolbar. You can select tags to highlight related types, or you can select types to highlight corresponding tags.

Add Thematic Relations

Select a tag in the tag overlay and click the pin icon. Exit the tag overlay and you will see the thematic relation in the diagram. You can customize the color and font of the relation using the corresponding icons next to a selected tag.

Known bugs

• The system will fail, if a diagram is open, when you start-up Eclipse. Simply close any open Code Gestalt tabs, until JTransformer has done all its start-up backgroud work.
• If you unpin thematic relations while the tag overlay is open, the customization icons will stick. Save, close, and reopen the diagram to fix this.

Publications:

2011

• Christopher Kurtz. Code Gestalt: From UML Class Diagrams to Software Landscapes. Diploma Thesis, RWTH Aachen University, Aachen, April 2011.
  
• Christopher Kurtz. Code Gestalt: A Software Visualization Tool for Human Beings.  In CHI EA 2011: CHI '11 Extended Abstracts on Human Factors in Computing Systems, pages 929–934, ACM Press, New York, NY, USA, 2011.
  

References

1. Sinha, V., Karger, D. and Miller, R. Relo: Helping users manage context during interactive exploratory visualization of large code bases. In Proc. VL/HCC 2006, 187-194.
2. Speicher, D. and Nonnen, J. Consistent Consideration of Naming Consistency. In Proc. WSR 2010. 51-52.