Search:       RSS, Atom

Site navigation:

Large diagrams visualization

Visualizing complex applications

This part of the project focuses on effective visualization of large system component models. New methods of the visualization should bring clarity of represented data, which should be achieved by automatic simplification of the model representation based on component clustering. Various metrics should be also involved in parametrizing the visualization. These methods should support user interaction with the model for better customization according to user needs.

CoCa-Ex application

The proposed technique reduces the visual clutter by removing the components with a large number of connections from the main diagram into a so called separated components
area (abbreviated to SeCo) placed on the border of a window (right sidebar in Figure CoCA-Ex tool). When a user moves components from the main diagram to this area, the lines between these components and remaining components are elided. SeCo consists of a list of items. Each item consists of clustered interfaces (indicated with mark (T) in Figure 1), components (U) and one corresponding symbol (S). Interfaces are clustered into two sets (T): all provided interfaces (displayed as “lollipops”) and all required interfaces (displayed as “sockets”). Numbers inside the clustered interfaces represent the number of elements clustered in the given symbol. The purpose of symbols is to create clear and easily recognizable key which uniquely identifies one item within SeCo. These symbols can be then used in the diagram area to represent connection between a given component and the corresponding item placed in SeCo. They are shown as small rectangles neighbouring the displayed components (K) and containing the symbol which corresponds to the connected item (S). It is possible that a particular functionality of the system is implemented by several components. When this functionality is used by a large number of other components in the system, it is benefitial to represent them as a group in SeCo (M).

We implemented the above mentioned technique as a web application, which we call CoCA-Ex (Complex Component Applications Explorer). CoCA-Ex works on the ComAV platform (Component Application Visualizer). As backend technology in CoCA-Ex we use servlets from JEE technology, mainly because of Java implementation of ComAV tool. For frontend we use HTML5, JavaScript, jQuery framework and CSS3. We use canvas and SVG elements from HTML5 to represent the nodes of the diagram. Although HTML5 technology is still not fully supported by all main browsers, its current state is sufficient for CoCA-Ex purposes. Also desired features such as SVG support or Canvas are likely to be stable in the future.
The user starts the visualization process by picking desired components from the local machine and uploading them to the server. The Comav tool creates the model of the application and CoCA-Ex tool shows the application diagram in the webpage. Demonstration of the tool is shown in Figure CoCA-Ex application.

It provides standard features such as panning and zooming. There are two modes of manipulating the components with appropriate icons in the toolbar. First is moving components (A), where the user manually adjusts the layout of the diagram. Second mode (B) serves for removing components to the SeCo area, simply by clicking on the desired components. Last two icons in the toolbar serve for the automatic removal of a configured amount of components from the diagram to the SeCo area. The icon © is used for removing desired components and adding them to SeCo area as individual items. The next icon (D) creates one group for all of them. The tool is currently configured to remove 15% of most connected components. We can also see orange components (E) which are highlighted as a result of search function. We show a search for a word “relations”, which was found seven times in the diagram as indicated by number seven (F). There are also highlighted components by green color e.g. (G) which require any interface from Nuxeo Common component (Y) which the user selected in the SeCo area. Similarly, there are components highlighted by yellow color e.g. (H), which provide interfaces to the Nuxeo ECM Web Platform UI component. Thus its required interfaces are yellow as well (Y). For several components from the SeCo area (those with symbols’ background highlighted by different colors (S)) there are delegates shown in the diagram area, e.g. (K). Also shown is a group consisting of three components (M). For inspecting interfaces, the tool offers highlighting of a connection by a red color and showing the interfaces involved in the connection (P), as shown in the green tooltip. Each individual component shown in SeCo has its own button (R ) to remove it back to its original position in the diagram area.

List selected functions

Highlighting connected components

Highlighting components connected to the selected component. Highlighting color is different for components that provide their functions and components that require functions of other components. Components highlighted red provide functions to the selected component and components highlighted blue require functions of the selected component.

Two object were then added that represent the number of components connected to the selected component. The symbol of a “bowl” represents the number of components that provide functions to the selected component and the smybol of a circle represents the number of components that require functions of the selected component. These can be clicked to highlight either only provided and required components.

Removing whole group

Previously, the user had to individually remove components in the group in order to remove the whole group. Instead of this a single button, that does the same thing, was added.

Unconnected component handling

Storage space for unconnected components was added. An unconnected components is a component that doesn’t provide or require any function from other components. This function is not yet complete and so far it only stores the unconnected components and if the user wants moves them to the main display panel. There is however no way to move them back yet.

Nuxeo system diagram - original Nuxeo system diagram - reduced

Preliminary results of clutter reduction show that significant clutter reduction can be achieved. An example of clutter reduction by removing components is in figure above, where removal of 7 components from 202 components from Nuxeo diagram lead to 70% lines reduction.

Resources, Deployment and Demos

The CoCA-Ex application is available online for testing. Please note that due to new technologies, only Firefox 21 is officially supported.

Demonstration of the tool is shown in the screencast .

For the demonstration purposes, we provide a corpus of test data files to be uploaded to the CoCA-Ex server. The corpus needs to be extracted and components (.jar files) uploaded.

The tool can be also downloaded as a Java EE WAR file and deployed to a Java EE server (e.g. Apache Tomcat). In a case of own installation, it is necessary to configure the storageLocation attribute for uploaded files in a configuration file (cocaex.war/WEB-INF/

Research results

  • Holý, L., Šnajberk, J. and Brada, P., Visual Clutter Reduction for UML Component Diagrams: A Tool Presentation, in proceedings of IEEE Symposium on Visual Languages and Human-Centric Computing, Innsbruck, Austria, 2012
  • Holý, L., Šnajberk, J. and Brada, P., Lowering Visual Clutter in Large Component Diagrams, in proceedings of International Conference on Information Visualization, Montpellier, France, 2012
  • Šnajberk, J. and Brada, P., ComAV – A Component Application Visualization Tool, in proceedings of International Conference on Information Visualization Theory and Application, Rome, Italy, 2012
  • Holý, L., Šnajberk, J. and Brada, P., Evaluating Component Architecture Visualization Tools, in proceedings of International Conference on Information Visualization Theory and Application, Rome, Italy, 2012