Search:       RSS, Atom

Site navigation:

Visualization of component-based applications

UML component diagram is mostly concerned with associations made between components and offers limited capability for describing of components itself, which means that some important information about components can be lost to application architect / designer. Some sort of solution can be seen in UML profiles, but this requires to create a separate UML profile for every component model and we still have only static representation of component-based application with no possibility to filter provided information.

This is the reason why we are researching a dynamic visualization method for complex, component-based software. It is based on a meta-model called ENT which provides rich classification system for groups of component interface elements, based on eight different characteristics. It enables the description of a wide spectrum of component models and can be understood as basic data structure for later representation of component-based application using a concrete component model.

Various concrete component models can be captured in ENT and represented in the form of a faceted view on the component interface. Here are a few examples of dynamic representations of the same OSGi bundle:

ENT component representation - ENT view ENT component representation - ITC view

Component Application Visualizer – ComAV

The purpose of ComAV is to create a generic workspace for visualization and management of component-based applications. ComAV can reverse-engineer a component application written in any component model, but it doesn’t support any component model directly. Instead, it uses a uniform data structure as an exchange format, that is able to hold all the information about both the component model and the application. This exchange format is produced by reverse-engineering plug-ins as an output, which is saved by ComAV and which visualization plug-ins can later use it as an input. ComAV user interface provides a project view where analyzed applications are made available; a console, to keep the track of what ComAV is doing; an editor view, where visualization plug-ins provide its visual output; and a menu, where reverse-engineering plug-ins can add new component models.

A structure of the ComAV application

The exchange data structure must be, in the first place, component model independent and have the ability to describe component in desired detail. We chose the ENT meta-model for this purpose, which is a generic meta-model developed directly for the description of component-based applications. Its most important features are: faceted classification used to characterize component’s elements; ability to describe any component with required details; and coverage of both component model and component-based application structures. The advantage of faceted classification is that visualization can make use of these characteristics to improve layout or representation of components.

Currently ComAV supports reverse-engineering of OSGi, EJB or SOFA 2 component models. XML is used to store the data. The workspace is an RCP (Rich Client Platform) application based on the Eclipse IDE, thus it is written in Java and it’s architecture is plug-in based. Development of new plug-ins that would introduce support for any other component model is therefore very simple. It is important to note that these new plug-ins can be made without changing anything in the existing implementation.

Advanced Interactive Visualization Approach – AIVA

AIVA uses oriented graph to visualize components and their relations. Its notation is similar to the UML component diagram, but unlike complete UML it is focused only on component-based software to provide more precise information. Moreover, it adopts interactive techniques to improve the process of software comprehension.

Its easy to understand visual notation is unified for all component models — any component will look the same, it will only vary in the inner elements of the component. The differences and similarities can be observed by comparing OSGi and EJB components in figure below. To simplify the visual representation it uses a lot of information hiding and details-on-demand features. For example, additional information about component elements is provided as tooltips (EJB) or all relations between two components are represented as only one line and additional details are provided on demand (OSGi).

Detailed representation of components in OSGi and EJB

Grouping and filtering of elements of the component is possible thanks to the ENT meta-model, which has a feature called CategorySet based on ENT’s faceted classification used on elements. CategorySet can define several categories as sets of rules that have to be satisfied in order to include an element in the given category. Figure below shows a CategorySet editor which is used for designing new sets of conditions. The bodies of components are filtered using the selected CategorySet. For example, compare the panel in the bottom-left corner of figure above — OSGi part where a different CategorySet was applied.

Conditional formatting is yet another powerful feature possible due the ENT meta-model. AIVA is able to create conditional formatting based on the name of component or its elements, but what is more important, it can work with any other detail about component or its elements hold by the ENT meta-model like full name, version, required environment, etc. For example: In OSGi all event handling must go through provided service called org.osgi.service.event.EventHandler, events are then routed by setting the event topic inside the service filter. AIVA can take in count the value of this filter and visually highlight only those elements or whole components that listen on certain topic.

Navigation/explore interactive techniques are represented by scrolling, zooming, panning, outline view and quick search (move the view on component in diagram, when selected in project overview). These techniques should provide quick navigation through the diagram for either looking up some component or plain browsing of relations. The zoom function has a special meaning in AIVA, because it does not provide the simple zoom in and out but also hides all details about the component itself, to provide cleaner overview of the whole structure. These details are shown again when one zooms in on 100%.

Selecting is more important in AIVA, because it helps reveal and eye track more information. By selecting a component, element or connection line one can get more information about it. Selection stays active even after reconfiguration (e.g layout changes). Selected connection line also highlights connected components even in diagram outline, so it is easier to find them and their related components.

Reconfiguration — change of representation of components, connection lines or layout of a diagram is useful when a different point of view on a complex software sytem is needed. AIVA supports several layouts which can be switched on the fly — a standard feature displayed on the right side of figure with CategorySets. However it is also able to change the representation of the components — while someone might find useful our presented tree representation of elements, others might prefer classic UML representation. AIVA offers three completely different representations of components right now.

What is even more important, AIVA is able to change the proposed collapsed representation of connection lines to a more service-oriented representation, known from the UML — component has a lollipop symbol attached to the outer edge, representing one provided element (interface, package or anything else, the representation is still the same) and other components connect directly to it. In contrast with UML, AIVA is able to track and highlight all the connection lines and connected components, by clicking on the lollipop symbol. This provides an immediate overview of connected components and the location where to find them in the diagram.

Research results

  • Šnajberk, J., Ježek, K. and Brada, P., An Advanced Interactive Visualization Approach with Extra Functional Properties, in proceedings of IEEE Symposium on Visual Languages and Human-Centric Computing, Innsbruck, Austria, 2012
  • 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
  • Šnajberk, J., Holý, L. and Brada, P., AIVA vs UML: Comparison of Component Application Visualizations in a Case-Study, in proceedings of International Conference on Information Visualization, Montpellier, France, 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
  • Šnajberk, J. and Brada, P., Interactive Component Visualization, in proceedings of International Conference on Evaluation of Novel Approaches to Software Engineering, Beijing, China, 2011
  • Šnajberk, J. and Brada, P., ENT: A Generic Meta-Model for the Description of Component-Based Applications, Electronic Notes in Theoretical Computer Science, 279(2):59-73, Elsevier Science Publishers, 2011
  • Šnajberk, J. and Brada, P.: Implementation of a Data Layer for the Visualization of Component-Based Applications, in Proceedings of ITAT, Smrekovica, Slovakia, 2010


ComAV – Component Application Visualizer
Introduction in evaluation of information visualization