IDE-assisted visualization of indebted OO variability

implementations
Johann Mortara, Philippe Collet, Anne-Marie Dery-Pinna

To cite this version:

Johann Mortara, Philippe Collet, Anne-Marie Dery-Pinna. IDE-assisted visualization of indebted OO
variability implementations. 26th ACM International Systems and Software Product Line Conference
- Volume B (SPLC ’22), Sep 2022, Graz, Austria. �10.1145/3503229.3547066�. �hal-03717874�

HAL Id: hal-03717874

https://hal.science/hal-03717874
Submitted on 8 Jul 2022

HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est

archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents
entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non,
lished or not. The documents may come from émanant des établissements d’enseignement et de
teaching and research institutions in France or recherche français ou étrangers, des laboratoires
abroad, or from public or private research centers. publics ou privés.
 IDE-assisted visualization of indebted OO variability
implementations
Johann Mortara Philippe Collet Anne-Marie Pinna-Dery
Université Côte d’Azur, CNRS, I3S Université Côte d’Azur, CNRS, I3S Université Côte d’Azur, CNRS, I3S
Sophia Antipolis, France Sophia Antipolis, France Sophia Antipolis, France
johann.mortara@univ-cotedazur.fr philippe.collet@univ-cotedazur.fr anne-marie.pinna@univ-cotedazur.fr

ABSTRACT (OO) systems implement their variability in a single codebase, us-

Object-Oriented (OO) variability-rich software systems often imple- ing the traditional OO mechanisms (i.e., inheritance, overloading
ment their variability in a single codebase, using the mechanisms of methods and constructors, design patterns) [1]. The variability
provided by the host language (i.e., inheritance, overloading, design is then intertwined with the structure and implementation of the
patterns). This variability is not documented and buried deep down business code, and without traceability to the domain knowledge,
in the code, thus impeding its identification and making it espe- the identification and understanding of these variability implemen-
cially prone to variability debt at the code level. While this kind of tations are hindered [13, 14]. Moreover, as the OO mechanisms may
variability implementation can now be detected, visualization sup- cause technical debt, variability debt [18] is likely to be introduced
port such as VariCity helps architects and developers understand at the code level.
the implemented variability using a city metaphor. In this paper, Some recent approaches such as symfinder and its extensions [8,
we demonstrate VariMetrics-IDE, an extension of VariCity that al- 9, 13] detect potential variation points (vp-s) with variants in the
lows to visualize multiple quality metrics (e.g., code complexity, targeted systems. Dense zones of detected symmetries have also be
test coverage) together with the variability implementations, while shown to represent interesting locations in terms of variability im-
supporting navigation between the source code and the visualiza- plementations. As identification is quite cumbersome on large sys-
tion in an IDE. This extension thus facilitates the identification of tems [9] the VariCity visualization, based on the city metaphor, was
zones of variability implementations with variability debt. proposed and validated on large Java variability-rich systems [6].
While this helps architects and developers understand the imple-
CCS CONCEPTS mented variability, no support was given to ease the browsing
between the code and this visualization. This is quite a strong lim-
• Software and its engineering → Software product lines;
itation as developers use Integrated Development Environments
Software reverse engineering; Object oriented architectures; •
(IDEs) as tools support to assist development and program compre-
Human-centered computing → Visualization systems and tools.
hension activities [5]. Moreover, with some better knowledge of the
variability implementations, the need for determining their techni-
KEYWORDS
cal debt naturally arises. In a companion paper [7], the authors have
software variability, technical debt, software visualization, quality proposed VariMetrics, an extension of VariCity to display zones of
metrics, object-oriented systems, reverse-engineering OO variability implementations with technical debt. It provides
ACM Reference Format: additional visual properties on the buildings representing classes
Johann Mortara, Philippe Collet, and Anne-Marie Pinna-Dery. 2022. IDE- to display some quality metrics, such as code duplication, code
assisted visualization of indebted OO variability implementations. In 26th complexity, and test coverage. VariMetrics was successfully applied
ACM International Systems and Software Product Line Conference - Volume B to several large open-source projects.
(SPLC ’22), September 12–16, 2022, Graz, Austria. ACM, New York, NY, USA,
In this tool demonstration paper1 we present VariMetrics-IDE, an
4 pages. https://doi.org/10.1145/3503229.3547066
IDE integration for VariMetrics that embeds the visualization in the
JetBrains IntelliJ IDE, enables its configuration through the IDE’s
1 INTRODUCTION menus. The developers can then use all the capabilities of Vari-
When they reach a larger scale, sofware systems mainly become Metrics, including the display of OO quality metrics, as any other
variability-rich [3] and use various mechanisms to implement their IntelliJ plugin without getting out of the development environment.
variability. Introducing additional complexity, these variability im- Both configuration of the view and bi-directional navigation be-
plementations are difficult to understand, maintain and test, which tween the code and the buildings in the visualization are supported.
leads to technical debt [4]. The debt caused by variability imple- We expect this extension to facilitate the identification of zones of
mentations has been defined as variability debt, while its different variability implementations with variability debt.
forms are still to be determined Wolfart et al. [18]. Not following
the Software Product Line (SPL) paradigm, many object-oriented
SPLC ’22, September 12–16, 2022, Graz, Austria
© 2022 Copyright held by the owner/author(s). Publication rights licensed to ACM.
This is the author’s version of the work. It is posted here for your personal use.
Not for redistribution. The definitive Version of Record was published in 26th ACM
1 External information about VariMetrics-IDE consists in a video available at https:
International Systems and Software Product Line Conference - Volume B (SPLC ’22),
September 12–16, 2022, Graz, Austria, https://doi.org/10.1145/3503229.3547066. //youtu.be/lRPK8nS5JMc and the experimental results from [7] available at
https://deathstar3.github.io/varimetrics-demo/.
SPLC ’22, September 12–16, 2022, Graz, Austria Johann Mortara, Philippe Collet, and Anne-Marie Pinna-Dery

Crown =
level variability metrics (method variants for the height and con-
design pattern Entry point structor variants for the width), exhibiting variability concentration
classes
at method level inside a class. As for design patterns, they usually
involve several classes, but only the identified vp is highlighted in
the visualization through a specific crown on the building.
Hotspot and
VP / variant
The streets in the city shape it according to the usage relation-
Hotspot ships, starting from entry point classes, representing interesting
Methods points to explore the systems. These classes are positioned on a red
overloads
street and other streets represent usage relationships. Buildings are
Root street
placed by decreasing order of width on both sides of the street to
Constructors
exhibit density between classes. Additional usage relationships are
Usage link
overloads represented as underground streets, and inheritance relationships
as aerial links, both displayed when hovering a building. To make
the hotspot zones of variability detected by symfinder (see previous
section) noticeable, they are displayed in color (vp-s in yellow and
variants in blue).
The visualization is itself configurable through several parame-
Figure 1: Main visual properties of VariCity, taken from [6]. ters, the first one being the entry point classes, more entry points
tends to generate a larger city to explore. The classes displayed
are also dependent on the usage orientation (IN to include only
2 IDENTIFYING OO VARIABILITY classes using the entry points, OUT for the reverse usage, IN/OUT
IMPLEMENTATIONS for both ways) and the usage level (the number of hops from the
In variability-rich OO systems, the mechanisms used to implement entry points over the usage links).
variability in a single code base , namely inheritance, overloading,
and design patterns, do not align well with domain features, making 3.2 Limitations
their identification difficult. When these mechanisms are used to The visualization provided by VariCity shows multiple improve-
implement some variability, they also exhibit a property of symme- ments compared to the graph visualization of symfinder-2. Using a
try [2, 15] since the commonality and variability addressed by the navigable 3D representation of a city where the buildings exhibit
mechanism also represent the unchangeable and changeable parts the different variability metrics and are grouped by usage allows to
in code assets. For example, inheritance allows us to factorize com- better grasp the organization of the classes [6]. Inheritance and ad-
mon parts (unchangeable) of multiple subclasses (the changeable ditional usage relationships are displayed on hover not to overload
parts) into a superclass. the visualization. However, it still exhibits limitations to be used in
As the unchanged and changed parts can be abstracted in terms practice on very large systems.
of variation points (vp-s) with variants [12], a symmetry-based Firstly, variability implementations hamper the quality of a sys-
identification approach has been previously proposed [15] and tem and potentially create variability debt [18], especially since
tooled with the the symfinder toolchain [8]. The approach also OO variability implementations have no dedicated mechanism and
relies on the notion of density of symmetries in the code to reveal are therefore hidden in the codebase. With VariCity, understand-
the variability organization (i.e., vp-s with an important number of ing this debt would require to use additional tools extracting and
variants at class or method level) [13] and display it in the shape visualizing quality metrics (such as SonarQube2 that embeds the
of a graph. To fix the lack of precision of this first approach in CodeCity [17] and Evo-Streets [11] visualizations) on the side and
symfinder [13], the usage relationships (type used as an attribute or manually map those two sources of information. As these cities are
method parameter) has been taken into account with the definition shaped differently (the classic ones being shaped through package
of a parameterized density measure that enables to automatically decomposition), the simultaneous usage of VariCity and one of
reveal fewer but more relevant hotspot zones concentrating variabil- these visualizations would be cumbersome, especially when experi-
ity implementations [9]. However, the resulting symfinder’s graph menting with multiple metrics.
visualization is then harder to interpret on large systems with two Secondly, VariCity is configured relying on knowledge from the
types of relationships being displayed at the same time. codebase (e.g., names of the entrypoint classes). Developers usu-
ally rely on an Integrated Development Environment (IDE) as tool
3 A CITY-BASED VISUALIZATION support for assisting development and program comprehension
activities [5]. Therefore, a user would need to manually input infor-
3.1 VariCity
mation from their IDE in VariCity and then go back to it to explore
The city metaphor [16] has been applied to multiple types of met- the classes exhibited by the visualization, implying important con-
rics on software systems. In particular, CodeCity [17] and Evo- text switching. According to these limitations, we advocate that
Streets [11] rely on the city metaphor to represent quality metrics VariCity’s usability would be improved by (i) displaying quality
on classes of an OO system. VariCity adapts the city metaphor to metrics and (ii) being embedded into an IDE.
exhibit density of variability implementations [6] (cf. fig. 1). Classes
are buildings whose dimensions evolve according to their method 2 https://www.sonarqube.org/
IDE-assisted visualization of indebted OO variability implementations SPLC ’22, September 12–16, 2022, Graz, Austria

Figure 2: VariMetrics-IDE visualization of JFreeChart. The white and violet boxes have been manually added on the figure.

4 VISUALIZING QUALITY METRICS IN refactoring of the indebted zones detected by VariMetrics. An exam-
VARIMETRICS-IDE ple of exhibited classes is visible on fig. 2, where the two classes in
the white dotted box, CategoryPlot and XYPlot, exhibit multiple
As OO quality metrics are usually individual measures on the
method overloads (due to their height) and little test coverage (due
classes, we have to determine how to improve the VariCity vi-
to their cracks). Refactoring those classes led to an improvement of
sualization. VariCity displays in yellow vp-s being hotspots, in blue
those classes and the project’s overall quality [7]. More details on
variants being hotspots, and in grey classes not being hotspots
this evaluation are available on VariMetrics webpage3 .
(fig. 1). However classic quality-centric cities, such as CodeCity and
Evo-Streets, simply color the buildings to expose properties inher-
ent to the classes [10, 17]. In VariMetrics, three display strategies are
5 SEAMLESS NAVIGATION WITH THE CODE
thus introduced to handle quality metrics. First, buildings can be Although VariMetrics-IDE can be used as a standalone application
colored following a red-to-green sequence (fade). Second, a satura- in a web browser, an integration is provided for the popular IDE
tion can be applied for keeping the original colors of the buildings JetBrains IntelliJ IDEA4 . As the goal of this integration is to min-
and lightening or darkening them (intensity). Finally, a crackled imize the interactions out of the development environment, the
texture (cracks) can be applied over the building with different levels integration embeds all the interactions needed to configure and use
of cracks, allowing to combine metrics on a single view. VariMetrics-IDE. As shown on fig. 2, the visualization is embedded
Since there is no single definition of quality and each user might in a panel in the IDE window and provides controls over symfinder
be interested in different metrics, VariMetrics-IDE allows to con- and VariMetrics-IDE (see violet boxes in fig. 2). It also allows the
figure the view. The user can select and combine the desired qual- execution of the whole toolchain as detailed in section 4 from the
ity metrics on the different visual axes to visualize them simul- editor’s window.
taneously. Combining adequate metrics allows to exhibit critical Additionally, bidirectional navigation between the visualization
classes concentrating variability implementations. Relying on work and the code is provided to ease transitioning between the code
from Wolfart et al. [18], it results that OO systems implementing and its visual representation. On one side, it is possible to select
their variability in a single codebase are prone to exhibit variabil- multiple buildings in the visualization and to open their sources
ity debt as code duplication, lack of tests, and increased cognitive as tabs in the IDE. On the other side, IntelliJ’s context menu has
complexity. been enriched, and right-clicking on a class in the Project sidebar
The VariMetrics visualization has been quantitatively evaluated or on the name of the class in the editor panel proposes a Focus
on seven industrial open-source projects from several thousands to on This Class button, zooming the visualization on the desired
2.4MLoC. Using these metrics, the exhibited classes were both criti- class, and another entry to add or remove a class from the entry
cal and concentrating variability implementations [7]. A qualitative 3 https://deathstar3.github.io/varimetrics-demo/
evaluation was also conducted on the JFreeChart project, with the 4 https://www.jetbrains.com/idea/
SPLC ’22, September 12–16, 2022, Graz, Austria Johann Mortara, Philippe Collet, and Anne-Marie Pinna-Dery

environment. Bidirectional browsing between the visualization and

IntelliJ IDEA classes in the code is supported.
As future work, we aim to conduct an empirical evaluation of
code ↔ variability navigation fetching quality metrics VariMetrics-IDE with real architects and developers to validate our
approach and tooling, but also to better understand the industry
needs and expectations for such tools.
Single Java codebase VariMetrics-IDE
ACKNOWLEDGMENTS
parsing & identifying
variability implementations We thank Patrick Anagonou, João Brilhante, Charly Ducrocq, Lu-
Local server dovic Marti, Guillaume Savornin and Anton van der Tuijn for their
contribution in the development of VariMetrics-IDE.
gathering variability metrics
Online API
REFERENCES
[1] Rafael Capilla, Jan Bosch, Kyo-Chul Kang, et al. 2013. Systems and software
symfinder Quality metrics source variability management. Concepts Tools and Experiences (2013).
[2] James O. Coplien and Liping Zhao. 2000. Symmetry Breaking in Software Pat-
terns. In International Symposium on Generative and Component-Based Software
Figure 3: Description of VariMetrics-IDE. Engineering (GCSE 2000). Springer, Springer, 37–54.
[3] Matthias Galster. 2019. Variability-Intensive Software Systems: Product Lines and
points list. Finally, the plugin settings window allows to configure Beyond. In Proceedings of the 13th International Workshop on Variability Modelling
the usage level and usage orientation, and to browse the classes of Software-Intensive Systems (VaMoS ’19). ACM, 1–1.
of the project to add them as entry points. It also embeds all the [4] Zengyang Li, Paris Avgeriou, and Peng Liang. 2015. A systematic mapping study
on technical debt and its management. Journal of Systems and Software 101 (2015),
configuration capabilities of VariMetrics. 193–220.
Although we did not conduct an experiment with real users to as- [5] Roberto Minelli, Andrea Mocci, and Michele Lanza. 2015. I Know What You Did
Last Summer - An Investigation of How Developers Spend Their Time. In 2015
sert the quality of the integration, interactions have been designed IEEE 23rd International Conference on Program Comprehension. IEEE, 25–35.
following the IntelliJ Platform UI Guidelines5 to ensure visual ho- [6] Johann Mortara, Philippe Collet, and Anne-Marie Dery-Pinna. 2021. Visualization
mogeneity in the editor, thus giving us confidence in its usability. of Object-Oriented Variability Implementations as Cities. In 2021 Working Con-
ference on Software Visualization (VISSOFT). Luxembourg (virtual), Luxembourg,
In our own experience with the IDE integration, all exploration 76–87.
tasks conducted in the validation of the metrics part described in [7] Johann Mortara, Philippe Collet, and Anne-Marie Dery-Pinna. 2022. Customiz-
the previous section were heavily facilitated. able Visualization of Quality Metrics for Object-Oriented Variability Implemen-
tations. In Proceedings of the 26th International Systems and Software Product Line
Conference (SPLC ’22), Vol. Volume A. ACM, Graz, Austria, 1–12.
6 IMPLEMENTATION [8] Johann Mortara, Xhevahire Tërnava, and Philippe Collet. 2019. symfinder: A
Toolchain for the Identification and Visualization of Object-Oriented Variability
Figure 3 describes the integration of VariMetrics in the analysis Implementations. In the 23rd International Systems and Software Product Line
toolchain based on symfinder. First, symfinder [8, 9] parses the Conference, Vol. B. ACM Press, Paris, France, 5–8.
[9] Johann Mortara, Xhevahire Tërnava, Philippe Collet, and Anne-Marie Dery-
codebase to automatically identify the symmetries and, relying on Pinna. 2021. Extending the Identification of Object-Oriented Variability Imple-
them, the vp-s and variants. Then, quality metrics are extracted mentations using Usage Relationships. In SPLC 2021 - 25th ACM International
either from the SonarCloud6 profile page of the project if available, Systems and Software Product Line Conference, Vol. Volume B. ACM, Leicester,
United Kingdom, 1–8. https://doi.org/10.1145/3461002.3473943
or else from a local SonarQube server that is run locally. Vari- [10] Frank Steinbrückner and Claus Lewerentz. 2010. Representing development
Metrics then combines the variability and quality information to history in software cities. In Proceedings of the 5th international symposium on
Software visualization. 193–202.
render the visualization using the Babylon.js 3D library. Outside [11] Frank Steinbrückner and Claus Lewerentz. 2013. Understanding software evolu-
an IDE, the resulting view is deployed with Webpack and requires tion with software cities. Information Visualization 12, 2 (2013), 200–216.
only a web browser to be viewed. All the toolchain components [12] Mikael Svahnberg, Jilles Van Gurp, and Jan Bosch. 2005. A taxonomy of variability
realization techniques. Software: Practice and experience 35, 8 (2005), 705–754.
(symfinder, metrics fetching and VariMetrics) are packed in several [13] Xhevahire Tërnava, Johann Mortara, Philippe Collet, and Daniel Le Berre. 2022.
Docker images to ease reuse of all or parts of the toolchain. The Identification and visualization of variability implementations in object-oriented
IDE integration is developed using the IntelliJ Platform SDK7 and variability-rich systems: a symmetry-based approach. Journal of Automated
Software Engineering (Feb. 2022), 1–52.
is installed as any other plugin for the IDE. [14] Xhevahire Tërnava and Philippe Collet. 2017. Tracing Imperfectly Modular
Variability in Software Product Line Implementation. In International Conference
on Software Reuse (ICSR ’17). Springer, 112–120.
7 CONCLUSION [15] Xhevahire Tërnava, Johann Mortara, and Philippe Collet. 2019. Identifying and
VariMetrics-IDE enhances the VariCity visualization by allowing to visualizing variability in object-oriented variability-rich systems. In the 23rd
International Systems and Software Product Line Conference. ACM Press, Paris,
exhibit quality metrics as additional and configurable visual prop- France, 231–243. https://doi.org/10.1145/3336294.3336311
erties on the buildings. Displaying in a single representation vari- [16] Richard Wettel and Michele Lanza. 2007. Visualizing software systems as cities.
ability and quality information allows to spot zones concentrating In 2007 4th IEEE International Workshop on Visualizing Software for Understanding
and Analysis. IEEE, 92–99.
variability implementations and being less reliable. The visualiza- [17] Richard Wettel and Michele Lanza. 2008. CodeCity: 3D visualization of large-
tion and its configuration are embedded in the JetBrains IntelliJ scale software. In Companion of the 30th international conference on Software
engineering. 921–922.
IDEA IDE to limit the interactions outside the developers working [18] Daniele Wolfart, Wesley Klewerton Guez Assunção, and Jabier Martinez. 2021.
Variability Debt: Characterization, Causes and Consequences. In XX Brazilian
5 https://jetbrains.github.io/ui/
Symposium on Software Quality. 1–10.
6 https://sonarcloud.io/
7 https://plugins.jetbrains.com/docs/intellij/welcome.html