GSoC wrap up: Static Code Visualization in KDevelop

Planet KDE • Aug 21, 2009

Ok, it's time for a concluding post about three exciting months working in KDevelop project, devoted to the implementation of software visualization features that leverage program comprehension and software artifacts navigability. It's an amazing subject field in which several different visual approaches have been proposed not merely as pretty pictures but mainly as a powerful mechanism for developer interaction with and understanding of software aspects related to static structure, run-time behaviour, and evolution of software systems.

It was a quite fruitful time for meeting people, enhancing hacking skills, and narrowing commitment to KDE and KDevelop communities. Me and other guys involved in KDE community in Brazil (Helio, Mauricio, Artur, Tomaz, Boaglio and others) are doing our best to enlarge the KDE presence in events such as FISL (International Forum on Free Software) and Latinoware (Latin-American Conference on Free Software) - by the way, we are drawing up a really amazing KDE program for Latinoware 2009.

But ... going back to GSoC :), KDevelop is now endowed with a (to some extent) functional plugin for control flow graph generation, providing a set of configurable parameters for control flow granularity, clustered layouts, source code navigation, and graph exporting.

Let's have a full list of implemented features:

Control flow visualization between methods, classes, and namespaces.
Navigation Control Flow Graph <-> Code Editor for nodes representing methods, classes, and namespaces (with graph locking option).
Integration Class Browser -> Control Flow Graph.
Clustering by class and/or namespace and/or project.
Support of multiple control flow graphs (toolviews) with optimized management.
Optional adjustment of maximum graph depth.
Drawing of incoming arcs (uses of a given method/class/namespace).
Use of folder names for classes aren't declared under any namespace (as an alternative to "Global Namespace").
Visualization of uses that make an edge, including navigation to Code Editor.
Optional use of short (unqualified) names for clustered graphs.
Menu extensions in Code Editor, Class Browser, and Project Manager.
Graph exporting for a given method, class or whole project (supported formats: png, jpg, gif, svg, dia, fig, pdf, and dot).
Graph zooming in/out and bird's eye.
This is the general view of KDevelop's Control Flow Graph plugin:

![kdevelop-plugin](http://liveblue.files.wordpress.com/2009/08/kdevelop-plugin.png)

Overview of control flow graph plugin

Now, I'll provide you some detailed information about such functionalities.

Control Flow Visualization between Methods, Classes, and Namespaces

Depending on user's (developer) interests different control flow levels can be used to drive the graph generation. Commonly, an initial view of high level control flow depicts modules relationship and architectural structures, followed by a detailed visualization of interactions between classes and methods.

In the implemented plugin, the control flow mode buttons allow the user to choose the current control flow granularity (between methods, classes, or namespaces).

![between-methods](http://liveblue.files.wordpress.com/2009/08/between-methods.png)

Control flow between methods

![between-classes](http://liveblue.files.wordpress.com/2009/08/between-classes.png)

Control flow between classes

![between-namespaces](http://liveblue.files.wordpress.com/2009/08/between-namespaces.png)

Control flow between modules

Navigation Control Flow Graph <-> Code Editor

The control flow graph plugin is intended to be used as an alternative tool for source code navigation and for this it should be sufficiently integrated to other KDevelop tools.

By clicking on a graph node the code editor is automatically updated to the corresponding definition or declaration (if definition isn't available). This works for nodes representing methods, classes, and namespaces and a new graph exhibiting the control flow initiated at this new definition is automatically created.

Sometimes, it's interesting to visualize the same graph while navigating to definitions related to graph nodes. This can be accomplished by locking the current graph.

Integration Class Browser -> Control Flow Graph

One major feature in KDevelop is the full integration between tools and keep this running for control flow graphs was one of the expected deliverables. By using KDevelop's Class Browser to navigate to a given method both code editor and control flow graph are updated.

![kdevelop-classbrowser](http://liveblue.files.wordpress.com/2009/08/kdevelop-classbrowser.png)

KDevelop's Class Browser

Clustering by Class and/or Namespace and/or Project

The implemented clustering features allow the user to group graph nodes by class, namespace, and project - with any of possible combinations. This makes the plugin suitable to discover project boundaries and find class and modules relationships.

![clustering-class](http://liveblue.files.wordpress.com/2009/08/clustering-class.png)

Clustering by class

![clustering-class-namespace](http://liveblue.files.wordpress.com/2009/08/clustering-class-namespace.png)

Clustering by class and namespace

![clustering-class-namespace-project](http://liveblue.files.wordpress.com/2009/08/clustering-class-namespace-project.png)

Clustering by class, namespace, and project

Support of Multiple Control Flow Graphs

By using multiple control flow graphs the user can keep different views of current project and switch them as needed, for example to have a toolview showing control flow between classes and another one for control flow between namespaces.

![multipletoolviews](http://liveblue.files.wordpress.com/2009/08/multipletoolviews.png)

Multiple control flow graph views

Implementation was carefully done to support multiple toolviews while yet preserving acceptable response time.

Optional Adjustment of Maximum Graph Depth

For larger projects generating such control flow graphs can be time-consuming and wouldn't provide any useful information to developer. In the implemented plugin, one should select the desired depth of control flow graph (or even choose don't adjust any threshold). By setting a default value of 2, the user initially visualize a more constrained method/class/namespace neighborhood and afterwards can request a broader visualization (while aware of a slower graph generation).

![two-levels](http://liveblue.files.wordpress.com/2009/08/two-levels.png)

A two levels graph

![three-levels](http://liveblue.files.wordpress.com/2009/08/three-levels.png)

A three levels graph

![four-levels](http://liveblue.files.wordpress.com/2009/08/four-levels.png)

A four levels graph

![five-levels](http://liveblue.files.wordpress.com/2009/08/five-levels.png)

A five levels graph

Drawing of Incoming Arcs

Another quite important feature for program comprehension is find the uses for a given method/class/namespace. In control flow graph plugin, user can optionally make the graph display the current uses of the method/class/namespace that initiates the graph.

![incoming-arcs](http://liveblue.files.wordpress.com/2009/08/incoming-arcs.png)

Showing the uses of Professor::collectExam()

Use of Folder Names

Usually source code is organized in a way where folder names represent modules, libraries and others software artifacts. By taking into account this structure when generating control flow graphs, some important source code information can be extracted, like the dependencies to Qt modules:

![folder-names](http://liveblue.files.wordpress.com/2009/08/folder-names.png)

Graph showing dependencies to QtGui and QtSql modules

Visualization of Uses that Make an Edge

For clustered graphs edges usually represent many control flow between methods inside a class or classes inside a namespace. By right-clicking a given arc, the plugin exhibits the uses that make the arc and allow for the navigation to the specific use in Code Editor.

![edge-uses](http://liveblue.files.wordpress.com/2009/08/edge-uses.png)

Graph showing the uses of a given arc

Optional Use of Short Names for Clustered Graphs

When using clustered graphs, containers inherently indicate scope and then node names can be reduced to the unqualified method/class names.

![short-names](http://liveblue.files.wordpress.com/2009/08/short-names.png)

Graph with short (unqualified) names

![long-names](http://liveblue.files.wordpress.com/2009/08/long-names.png)

Graph with long (qualified) names

Menu Extensions in Code Editor, Class Browser, and Project Manager

In order to provide a posteriori analysis of static software structure control flow graphs can be exported by acessing context menu options in Code Editor, Class Browser, and Project Manager.

![class-browser-menu](http://liveblue.files.wordpress.com/2009/08/class-browser-menu.png)

Class Browser extension menu with "Export Class Control Flow Graph" option

![project-manager-menu](http://liveblue.files.wordpress.com/2009/08/project-manager-menu.png)

Project Manager extension menu with "Export Project Control Flow Graph" option

Graph Exporting

Thanks to excellent Graphviz features all graphs can be exported in png, jpg, gif, svg, dia, fig, pdf, and dot formats. The current graph displayed in toolview can be exported by clicking on the export button or one could select a method, class, or project in Project Manager and Class Browser and then choose "Export (class/project) control flow graph".

By deciding to export a control flow graph for a class or the whole project, the resulting graph is the union of graphs generated for each (method/class) contained in the given (class/project).

One really enjoyable part of this cool GSoC project was the hacking of KFileDialog to provide some exporting features:

![controlflowgraphfiledialog](http://liveblue.files.wordpress.com/2009/08/controlflowgraphfiledialog.png)

ControlFlowGraphFileDialog

I really hope KDE 4.4 provides some more developer-friendly way for accomplish this than:

(dynamic_cast<QBoxLayout *>(mainWidget()->layout()))->insertWidget(1, widget);

Graph Zooming In/Out and Bird's Eye

Thanks to useful features present in KGraphviewer kpart, graphs can be zoomed in/out and a bird's eye can optionally be enabled to provide a wider visualization while keeping the focus in a specific part of the control flow graph.

So, that's all, there is much to improve and more interesting features and visualization paradigms to implement. Certainly this is just the beginning :)

Many thanks to Aleix Pol, David Nolden, Gaël, and Tomaz Canabrava for the valuable support during this great GSoC time.

See you,