ICSD: Interactive Visual Support for Understanding Code Control Structure

Code comprehension is a mental process in any maintenance activity. It becomes decisive in large methods. Such methods are burdened with programming constructs as lines of code (LOC) correlate with McCabe's cyclomatic complexity (MCC). This makes it hard to capture their code, as they span many pages even in large screens, and as a result hinders grasping their structural properties that might be key for maintenance. Visualization can assist in comprehending complex systems. It has been shown that control structure diagrams (CSDs) could be useful to better understand and discover structural properties, such as code regularity, of such large methods. IDEs and development tools have been moving from desktops to the Web so as to benefit from this ubiquitous environment that provides instant collaboration and easier integration.This paper presents ICSD, an interactive Web-based tool that implements CSD for Java methods. In particular it visualizes their control structure and nesting. The interactivity of the tool enables the developer to examine the underlying code of specific parts in the diagram. Using ICSD the developer can compare between different regions in the diagram that seem to have any kind of commonality or other interesting relation. ICSD easily conveys structural characteristics of the code, especially very large code, to the programmer and helps him to better understand and refactor.To demonstrate the usage and usefulness of ICSD, very large functions from real softwares are presented and the different features of ICSD are shown.