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/configuration.properties).

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
---

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/configuration.properties).

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
---

Skupina DSS v projektu NTIS

Výzkumná skupina DSS je nositelem části výzkumného programu Pokročilé počítačové a informační systémy v rámci evropského centra excelence FAV budovaného v projektu NTIS. Oblast, kterou se budeme zabývat společně s výzkumnou skupinou vestavěných systémů, staví na našich zkušenostech v modelování a verifikaci softwarových komponent. Výtah příslušné části popisu projektu je uveden dále.


P2-b: METODY A PROSTŘEDKY PRO NÁVRH BEZPEČNÝCH, SPOLEHLIVÝCH A ROBUSTNÍCH POČÍTAČOVÝCH SYSTÉMŮ

Moderní informační a komunikační technologie (ICT) jsou charakteristické svými nároky na bezpečnost, privátnost využití a spolehlivost (SPD vlastnost – Security, Privacy, Dependability). Je to přímým důsledkem narůstající složitosti počítačových systémů (spojení mnoha komponent s různou úrovní SPD) a následné zranitelnosti, resp. rizik vyplývajících z jejich použití. Dosavadní postupy a návrhové metody nejsou postačující s ohledem na komplexnost problému a neustálý rychlý vývoj v oblasti ICT.

Cílem řešení projektu bude výzkum a vývoj efektivních metod a prostředků pro návrh počítačových systémů určených zejména pro vestavěné (embedded) aplikace, u kterých se vyžaduje zvýšená úroveň bezpečnosti, utajení, spolehlivosti a robustnosti. V rámci řešení projektu bude hlavní důraz kladen na rozvoj a využití metod modelově orientovaného přístupu (MDA – model driven architecture) a souběžný návrh SW a HW komponent systému (SW & HW codesign), který je typický pro vestavěné systémy. Modelově orientovaný přístup spočívá ve využití hierarchie abstraktních modelů a prostředků pro jejich popis (DSL – Domain Specific Language) v jednotlivých úrovních hierarchie k postupnému zjemňování funkční a strukturní specifikace navrhovaného systému.

Vymezený cíl projektu lze rozdělit na několik dílčích cílů, které jsou podrobněji popsány v následujících odstavcích. Jedná se zejména o výzkum a vývoj metod exaktního popisu specifikované funkce a struktury systému s využitím současných a nových abstraktních modelů včetně modelů pro odhad výkonnostních a spolehlivostních parametrů systému. Tento dílčí cíl zahrnuje též výzkum metamodelů a hierarchií (posloupností) modelů použitelných v procesu návrhu systému. S tím souvisí výzkum a vývoj metod, které umoţní transformovat (zjemňovat) vyšší abstrakční úrovně modelového popisu do nižších (přesnějších) úrovní se zachováním vlastností dokázaných při analýze (verifikaci) vyšší úrovně modelu. Jako nejnižší úroveň popisu se předpokládá cílový programový kód nebo popis (např. VHDL) cílové HW struktury. Předkládaný projekt dále předpokládá rozvoj metod, které umožní ověřit (verifikovat) specifikované vlastnosti pro jednotlivé úrovně modelového popisu systému.

Základním uvažovaným prvkem strukturního popisu navrhovaného systému je softwarová nebo hardwarová komponenta. Proto budou součástí výzkumu v souladu s dosavadní zkušeností pracoviště také prostředky popisu komponent a komponentových struktur zejména s ohledem na jejich zaměnitelnost, teoretické aspekty verifikace návrhu komponenty, verifikace vlastností pro hotové (pre-existing) komponenty, porovnání takových metod a zkoumání problému „vzdálenosti“ modelu a reálného systému.

Kromě základního výzkumu v dané oblasti jsou dále také uvažovány aplikace vyvinutých metod a postupů a spolupráce s dalšími výzkumnými programy centra a výzkumnými institucemi a firmami, které jsou či mohou být v dané oblasti zainteresovány. Jedná se zejména o spolupráci při vývoji podpůrných SW nástrojů a prostředků pro realizaci metod a postupů vyvinutých v rámci modelového přístupu k návrhu spolehlivých a robustních aplikací, případové studie a analýzy současných technologií a vývoj prototypových aplikací.

---

Methods of development and verification of component-based applications using natural language specifications

Overview

  • Czech title: Metody pro tvorbu a ověřování komponentových systémů ze specifikací v přirozeném jazyce
  • Granting agency: Czech Science Foundation (GA ČR)
  • Project number:103/11/1489
  • Duration: 2011-2013
  • Partners: Charles University, Department of Dependable and Distributed Systems (leader), University of West Bohemia, Department of Computer Science and Engineering DSS group
  • Total grant support: CZK 6.2 million (EUR ~0.2 million)
  • Staff at UWB: 2 senior researchers, 2 junior researchers, 1-3 PhD students
  • Contact: Premek Brada

Project synopsis

The component based programming approach was proven to greatly simplify the development process, especially in the context of enterprise and evolving systems. Despite successes in the field and increasing industrial adoption of component based programming techniques, fundamental issues of many stages of the development process are not well understood and have not been explored yet.

This project focuses on research of these areas – the key challenges to address are mainly related to enhancing the quality of component based applications with respect to user requirements:

  • devising a process of automated deriving components’ functional design and extra-functional features from natural language descriptions (e.g. UML use cases),
  • maintaining consistency of applications in context of dynamic systems with frequent component updates by combination of static verification methods and component based simulation,
  • develop universal methods for easing of coding phases of component software development based on feature-oriented programming (FOP) techniques.

---

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

Resources

ComAV – Component Application Visualizer
Introduction in evaluation of information visualization

---

Previous