See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/366287455

Annotation Visualizer Plugin: An IDE-Integrated Tool for Code Annotations

Visualization

Article · December 2022

CITATION READS

1 89

5 authors, including:

Phyllipe Lima Everaldo Gomes

Universidade Federal de Itajubá (UNIFEI) University of São Paulo
23 PUBLICATIONS 53 CITATIONS 6 PUBLICATIONS 11 CITATIONS

SEE PROFILE SEE PROFILE

Eduardo Guerra Paulo Roberto Miranda Meirelles

Free University of Bozen-Bolzano University of São Paulo
120 PUBLICATIONS 438 CITATIONS 68 PUBLICATIONS 754 CITATIONS

SEE PROFILE SEE PROFILE

All content following this page was uploaded by Phyllipe Lima on 15 December 2022.

The user has requested enhancement of the downloaded file.

 Revista de Sistemas de Informação da FSMA
n. 30 (2022) pp. 28-37 http://www.fsma.edu.br/si/sistemas.html

Annotation Visualizer Plugin: An IDE-Integrated

Tool for Code Annotations Visualization
Sergio Abilio, Federal University of ABC, São Paulo, Brazil
Phyllipe Lima, Federal University of Itajubá, Brazil
Everaldo Gomes, Federal University of ABC, São Paulo, Brazil
Eduardo Guerra, Free University of Bolzano, Italy
Paulo Meirelles, Federal University of ABC, São Paulo, Brazil

Abstract—Code annotations are used mainly in modern Java with the ASniffer and draws the CADV for a target project
software, and their primary purpose is to configure metadata under analysis.
into programmable elements such as methods and classes. The During the evaluations conducted in [3], developers
Annotation Sniffer is a stable tool that analyses Java source code
and generates a JSON report with code annotations metrics were interested in using the AVisualizer and thought the
values. In other words, it measures metadata configuration in visualization approach could be helpful in the software
the Java source file. The Annotation Visualizer is a tool built as comprehension process. However, they were not interested
a web application to render the visualization using this report in leaving their development environment (usually an
as input. In this work, we developed a tool that integrates IDE) and switching to a browser to analyze the system.
the Annotation Visualizer as a plugin for the IntelliJ IDEA, a
popular Java IDE. This integration allows developers to visualize Furthermore, in the current solution, the developers must
their current project opened in the IDE without switching manually run the ASniffer to collect the metrics values and
to an external environment. With an IDE plugin, developers serve the AVisualizer.
can potentially benefit from the visualization and the metrics This paper presents the AVisualizer Plugin1 , an open-
values it can display. Furthermore, IDEs have a marketplace source plugin for IntelliJ IDEA IDE, which integrates the
that eases obtaining the tool and increases the probability that
the developers might use it.
ASniffer and AVisualizer in a single tool to overcome that
constraint. It runs integrated into IntelliJ, a popular de-
Index Terms—Annotation Code, Annotation Metrics, Soft- velopment environment for Java programmers. The plugin
ware Visualization, Visualization Tool
uses, as a dependency, the ASniffer to collect the project
metrics in the current working directory. Afterward, it
I. Introduction sends the extracted data to a service integrated with a web
application to store reports. Finally, it renders the CADV
ODE annotations were introduced in version 5 of
C the Java programming language. It is extensively
used in many Java enterprise software systems through
via the AVisualizer running in an embedded browser pro-
vided by IntelliJ. The plugin can be obtained directly
from the official Jetbrains Marketplace and installed on
frameworks and APIs such as Spring Boot, EJB, JPA, the latest version of the IntelliJ IDEA2 .
and JUnit. They add custom metadata into programmable The Jetbrains Marketplace provides some insights about
elements such as methods, fields, and classes. the usage of the available plugins. The AVisualizer plu-
Our previous work [1] proposed and validated a suite gin already had hundreds of downloads and was visited
containing seven source code metrics dedicated to code by users in several countries. Moreover, we conducted a
annotations to improve and further enable the study and preliminary validation and invited developers from the
analysis of code annotations. By mining open-source soft- study in [3] to use the plugin and answer some code
ware hosted on GitHub, we identified that, on average, comprehension tasks. Two participants used the plugin
76% of their classes have at least one annotation. We and gave feedback that it was easy to install, and they
developed the ASniffer (Annotation Sniffer) tool to extract were more inclined to use it embedded in the IDE rather
these metrics values [2]. than switching to another environment.
Combining software metrics with software visualization, The remainder of this paper is organized as follows:
we proposed, in another previous work [3], the CADV Section II describes the software development engineering
(Code Annotations Distribution Visualization), a circle methodologies used in this work and how we structured
packing approach to visualize code annotations distribu- the development cycles. Section III contains an analysis of
tion in software systems. As a reference implementation, 1 https://github.com/metaisbeta/intelliJ-avisualizer-plugin
we developed the AVisualizer (Annotation Visualizer), a 2 https://plugins.jetbrains.com/plugin/
web application that reads the metrics values extracted 18237-annotation-visualizer

28
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

how annotations are measured and visualized, introducing release. If the maintainer requested changes, they would
the related works used to serve as a basis for our work. In be implemented and verified in another demo ceremony.
Section IV, we discuss how the technological system works We created a fork to contribute to another previously
and which improvements were implemented in the first developed tool from the Annotation Sniffer ecosystem.
version of both ASniffer and AVisualizer. In Section V, we Forking is a git clone operation executed on a server copy
present a validation on the plugin with users familiar with of a project’s repository. This method is commonly used
the ASniffer and AVisualizer. Finally, Section VI presents in public FLOSS projects. During the forking workflow,
our final thoughts and points to be discussed in future a project version is created on the contributor’s behalf
works. (fork), and the changes are carried out in this copy. When
the work is done, a pull request can be made to the origin
II. Development approach repository. The maintainers can review it, and the fork
feature can be added to the source code if approved.
UR development approach was based on the collab-
O oration flow for Free/Libre/Open Source Software
(FLOSS) projects and the principles applied in the Ag-
Once the code is reviewed and the pull request is
approved, the automatic tests arranged by the GitHub
ile Software Development Manifesto, in particular from platform’s Continuous Integration (CI) server are exe-
XP (Extreme Programming) methodology [4]. XP is an cuted. These tests automatically validate that the software
agile software development framework aiming to produce operation is not compromised. After validation, the code
high-quality software and higher quality of life for the is placed in the main branch and deployed to the specified
development team. We based on the principles of iteration cloud provider.
planning, acceptance of testing, listening to feedback, and Finally, to verify how developers perceived the devel-
constant small releases. oped solution, we invited professional developers with
In our approach, the team responsible for this project previous experience using the AVisualizer web applications
meets biweekly to carry out the software development to participate in a survey.
ceremonies. Each meeting was interpreted as a sprint, a
fixed-length event that enables predictability by ensuring III. Measuring and Visualizing Code
inspection and adaptation of progress toward a Product Annotations
Goal at least every calendar month. At the end of each
UR research group proposed a novel suite of metrics
sprint, each member reviews the work done in the period
and shares thoughts involving the development of the An- O for code annotations [1] and developed the ASniffer
tool [2] to extract these metrics values. Moreover, we
notation Sniffer ecosystem. Each meeting had a Planning
proposed a software visualization approach named CADV
and a Demo lasting for approximately one hour.
and the AVisualizer reference implementation, developed
The “Planning” is a ceremony that kicks off the sprint.
as a web application, to visualize code annotations [3].
Sprint planning aims to define what can be delivered
Considering the need to evolve this ecosystem into an
during the sprint and how it can be achieved. The team
embedded solution for an IDE, we developed the AVi-
prioritized the features and decided which would be de-
sualizer plugin. In the following subsections, we discuss
livered in each sprint to reach the first version of our
how we measure annotations and how we visualize these
Minimum Valuable Product (MVP). After delivering the
measurements.
MVP, the order of priority changed to improve the user
experience based on the team’s feedback and insights
generated during product development. The “Demo” event A. Visualizing Software Through Metrics
demonstrated the work carried out in the last sprint. As
Software systems are getting more complex with time. It
for the development of this work, the developed features
can become enormous. For instance, the well-known Hiber-
were shown in each demo. This way, everyone on the team
nate4 , a metadata-based framework for object-relational
could share feedback and help define the next steps.
mapping, has more than 40 thousand classes and more
During the software development cycle, we used the
than 550 thousand lines of code. This vast system is
GitFlow Workflow3 to deliver our features to the code
an example of an amount of information challenging to
repository. We created a feature branch to implement
manage and comprehend.
each feature selected during the sprint planning ceremony.
Software comprehension is essential to keep software en-
These branches carry a source code version containing the
gineers productive [5]. Understanding and maintaining the
implementation of the new feature. This code version was
software enables the team to share knowledge internally
demonstrated at the Demo ceremony. If the maintainers
and empowers newcomers to follow up more quickly on
approved the change, pull requests were opened to merge
the current tasks and team objectives. Software compre-
these branches into the main one, and the maintainers had
hension is also related to software evolution, recognized as
another opportunity to review the code. If the maintainers
the most costly and challenging activity in the software
approved, these branches were merged, producing a new
development life cycle. For software systems to maintain
3 https://www.atlassian.com/git/tutorials/comparing-workflows/
gitflow-workflow 4 https://github.com/hibernate/hibernate-orm

29
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

relevance, they might require constant changes, and soft-

ware engineers should understand how this software works
before changing it and adding new features [6].
Modern IDEs use graphical Interfaces to communicate
with the user and share information about the code and
its development pipeline. IntelliJ IDEA, for example, has
a visual system to manage branches and version control
in git5 . This visualization feature makes code versioning
easier for new developers. It aids in understanding the
merging of branches and how they should keep up with
the git-flow standards.
Even though some tools help the developer with graph-
ical interfaces, the software is complicated to visualize
because it is not inherently embedded in space, which
means it has no ready geometric representation [7]. There-
fore even though most information is perceived visually,
software systems have no natural shape, complicating its
visualization. For this reason, researchers keep investigat-
ing how software can be displayed so that humans can
visualize and understand the underlying structure.
The visualization approach that this work is based on
is the CADV (Code Annotations Distribution Visualiza-
Fig. 1. Basic Circle Packing
tion) [3]. The CADV is based on the circle packing and,
therefore, displays everything as a circle. In other words,
packages are circles, and classes are circles. Code elements counts how many annotations are configuring a given code
and code annotations are also circles. Different colors, element, including nested annotations.
outlines, and some elements are only visible in specific LOC in Annotation Declaration (LOCAD): LOC (Line
views to differentiate them. The area of each leaf circle of Code) is a well-known metric that counts the number of
in a circle-packing diagram is proportional to a given code lines. The LOCAD is proposed as a variant of LOC,
number. For CADV, this is a code annotation metrics but it counts the number of lines used in an annotation
value, depending on what the users wish to see. Figure declaration.
1 presents a basic circle packing [8].
C. Annotation Sniffer
B. Code Annotation Metrics The ASniffer’s primary goal is to extract the code an-
The visualization approach, CADV, requires five code notation metrics values from Java source code. It receives
annotations metrics from Lima et al. [1], briefly described a Java source code as input, i.e., a “.java” file, extracts the
in the following list. metrics values, and outputs a JSON report.
Annotations in Class (AC): This metric counts the It is a standalone tool executed through a command line.
number of annotations declared on all code elements in It also has an Application Programming Interface (API)
a class, including nested annotations. hosted at Maven Central6 , which makes it easy to use the
Annotations Schemas in Class (ASC): An annotation ASniffer as a library in any Java software. Therefore, the
schema represents a set of related annotations provided by ASniffer can be used as a standalone tool or a dependency.
a framework or tool. This metric measures how coupled The plugin developed for this work used the ASniffer as a
a class is to a specific framework or if it is coupled to dependency.
several different frameworks. The ASniffer measures this Potential ASniffer users are software engineers or re-
value by tracking the imports used for the annotations, searchers interested in static code analysis and mining
and the higher the number of imports, the more schemas software repositories. Additionally, since it is an extensible
are required by the class. tool, other developers can implement their metrics and
Attributes in Annotations (AA): Annotations may con- integrate them into the extraction process.
tain attributes. They can be a string, integer, or even The Annotation Sniffer tool uses the Java Parser API7
another annotation. The AA metric counts the number of to build the Abstract Syntax Tree (AST) from a text file
attributes contained in the annotation. Each annotation containing the source code. The ASniffer then traverses
in the class generates an AA value. this AST, visiting the nodes of interest and gathering
Annotations in Element Declaration (AED): Code ele- information about the code elements, specifically code
ments may contain several annotations. The AED metric annotations usage and the elements they are configuring.
5 https://www.jetbrains.com/help/idea/settings-version-control. 6 https://mvnrepository.com/

html 7 https://javaparser.org

30
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

Fig. 2. Annotation Sniffer Diagram.

After completing the process, it generates a JSON report the package inspected in Figure 3 is the
as an output. Figure 2 presents an overview diagram of org.springframework.retry, which is the root
the ASniffer tool [2]. package of the Spring Retry library.
The ASniffer has become a basis tool for our research The View is the area that displays the actual visualiza-
on code annotations. For this reason, it is constantly tion. There are three different views: The System View,
improved and updated to meet the demands we require. The Package View, and the Class View. For instance,
Furthermore, being FLOSS and its source code available Figure 3 is displaying the System View for the Spring
on Github8 , the software engineering community can con- Retry. The View is constantly changing and modifying to
tribute to the evolution of the tool. display one of the proposed views. Only one of the three is
visible at a time. The Header also changes to inform what
D. Annotation Visualizer current view is displayed, and the Schema Table is mostly
The AVisualizer is a web application that displays code fixed. These last two are available for all three different
annotations using the Code Annotations Distribution Vi- views all the time.
sualization (CADV) approach. As mentioned, the CADV The System View is the default view displayed to
uses a circle packing structure, which helps display the the user. It presents the whole project in a single view,
hierarchical structure of the analyzed source code. allowing users to quickly grasp the project under analysis.
When executed, the AVisualizer presents the user with The System View displays only packages and annotation
three areas, as shown in Figure 3. These three areas are schemas rendered as circles. The following list presents the
The Header, The View, and The Schema Table. Following, characteristics of these circles [3]:
we detail each of these areas. • Packages: Every circle representing a package has a

The Header contains four parts, described below [3]: dashed outline. The outermost dashed circle repre-
sents the root package of the project. In the source
• Project Under Analysis: It displays the name of
code, this package contains every other package. We
the analyzed software. For our studies, we used the
present this hierarchical information by displaying
Spring-retry software.
packages inside packages as “dashed outline circles
• Visualization: Since the CADV is composed of three
contained in other dashed outline circles”. The circle’s
views, the user must know which one is currently ren-
size depends on the number of code annotations used
dered. System View, Package View, and Class View
inside the package, regardless of the number of classes.
are the three possible options. Figure 3 is displaying
Therefore, we are counting code annotations in all
the System View.
classes, but we are not counting the classes. The
• Annotation: We need to inform the user what metric
background used in these circles is gray.
is being used to generate the size of the leaf circles.
• Annotation Schemas: These are colored filled circles
These are the colored ones and may represent indi-
rendered inside “dashed outline circles”. They repre-
vidual code annotations or annotation schemas. As
sent annotation schemas being used inside a specific
an example, the System View uses the metric Number
package. Each annotation schema has its unique col-
of Annotations, which means the colored circle size is
ors, which are reflected in the filled circles. The size
calculated based on the number of code annotations
of these circles is proportional to the number of code
that belong to a particular annotation schema. Fur-
annotations of a particular schema. The colors white
ther, every annotation schema has a different color.
and gray are not used to represent schemas since they
• Package: Informs the user what package or
already have other meanings in the CADV approach.
class it is currently inspecting. For instance,
The Package View can display classes and individual
8 https://github.com/metaisbeta/asniffer code annotations inside a given observed package. Dif-

31
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

Fig. 3. Annotation Visualizer interface.

ferently from the System View designed to visualize the following rules [3].
whole system, in the Package View, we are interested • Classes: Just as in the Package View, they are ren-
in a specific package. The circles are rendered with the dered as a white circle. Since we are analyzing a
following characteristics [3]: specific class, there will be only one white circle.
• Package: The same characteristics from the System • Annotations: Colored circles representing individual
View, i.e., a circle with a dashed line and gray-colored annotations. The color is related to their schema
background. Usually, in the Package View, this circle present on the Schema Table. The size of the circle
is the outermost one, working as a frame for the View is obtained by some code annotation metrics such as
area. Every other inner circle represents elements AA, ANL, or LOCAD. The default metric is the AA
inside this package. - Arguments in Annotations.
• Classes: Rendered as white-filled circles. Their size • Gray-Circles: This color is also used to represent
depends on the number of code annotations used packages, but in the Class View they represent code
inside the class and the metric used to draw them. elements, such as method and class members. The
The default metric used is the LOCAD. If a white code annotations (colored circles) are rendered on top
circle appears larger than others, it represents a class of these gray circles. Colored circles rendered directly
with more code annotations. on top of a white circle represent code annotations
• Code Annotations: These are colored (any color be- configuring the class itself. The number of colored
sides white and gray) filled circles rendered on top of circles rendered on top of the same gray circle is
white circles. They represent code annotations used the number of code annotations configuring that code
inside a specific class. Their color matches the color element.
of their schema, present on the Schema Table. The In our previous work [3], we conducted two studies to in-
size of these circles is proportional to their LOCAD vestigate how the CADV, implemented as the AVisualizer
value,i.e., the default metric used. web application, can aid in software comprehension. One
The Class View can display classes and individual code study was conducted as an interview with six developers of
annotations inside the observed class. It allows users to SpaceWeatherTSI, a web application developed for INPE9
visualize how code annotations are configuring a specific (National Institute for Space Research) as part of the
programming element, such as a method, class member, or
the class itself. The circles are rendered according to the 9 https://www.gov.br/inpe/pt-br

32
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

EMBRACE (“Brazilian Studies and Monitoring of Space the ASniffer. An issue12 was opened on GitHub, discussed
Weather”) program. During the interview, the partici- at our weekly meetings, and the project maintainer helped
pants used the AVisualizer to visualize the SpaceWeath- us with a solution.
erTSI software system and answer questions related to We also created the Annotation Sniffer Web Applica-
code comprehension. Overall, the interview was carried tion. It is very usual for the team to share tool views
out informally, and the participants were free to explore in software development, such as monitoring logs and
the AVisualizer tool as much as possible. Based on the dashboards. During the development of our solution, we
feedback from the interviews, we proposed to develop a came across the need to have reports generated by ASniffer
new solution that will integrate the AVisualizer into a saved and accessed by the AVisualizer. We decided to
popular Java IDE. This resulted in the development of develop a web API with a web REST API and a MongoDB
the AVisualizer Plugin for the IntelliJ IDE. According to database. Its primary function is to save, update and
StackOverflow 2019 annual survey 10 , the IntelliJ is the consult projects generated by ASniffer.
most popular Java IDE in the community. We developed it in Java 11 with the Spring Boot frame-
work and Spring Boot Web to handle HTTPS requests.
IV. Annotation Visualizer Plugin Spring Boot is one of the most popular frameworks for
He AVisualizer Plugin is an evolution of the AVi- Java, extensively used in the industry. We used tools
T sualizer web application. It uses the ASniffer and
runs integrated as a plugin for IntelliJ IDE. It also stores
from the Spring ecosystem to develop this application:
Spring Data is used for managing the connection with
the collected metrics from ASniffer in a cloud database the MongoDB database. This application is responsible
for more accessible retrieval. In short, we aimed to run, for saving and consulting reports generated by ASniffer in
visualize, and share analyses through an IntelliJ IDE a database and returning its result in an HTTPS request.
plugin. Generating the metrics to serve the visualization Each project has an ID that identifies and is unique across
is transparent to the user. all saved documents.
The AVisualizer plugin allows us to visualize the system The data is stored in MongoDB, a non-relational
currently opened in the IntelliJ IDE without switching database. The decision to use a non-relational database
to another environment. The visualization is rendered in comes from the need to store the documents generated
the embedded browser available in IntelliJ, which eases by ASniffer, generated in JavaScript Object Notation
compatibility and lowers the development efforts to main- (JSON). MongoDB is a document-based database and
tain both the AVisualizer plugin and the AVisualizer web uses a Binary Javascript Object Notation (BSON) schema,
application. From a user perspective, it runs as a native which is a textual object notation widely used to transmit
plugin for IntelliJ. As mentioned, in the plugin’s back end, and store data across web-based applications. JSON is eas-
we have the ASniffer generating the metrics to serve the ier to understand as it is human-readable, but compared to
visualization. This report can also be stored in a cloud BSON, it supports fewer data types. BSON encodes type
database. The AVisualizer plugin integrates these solutions and length information, making it easier for machines to
and makes the functionality transparent for the final user. parse13 . Since this project is cloud-based, we choose Mongo
Atlas as our host for the MongoDB database. Mongo
A. Evolution of Annotation Sniffer Atlas is a multi-cloud database service built by the same
During the development of the proposed plugin, several corporation that developed MongoDB.
improvements were made to the ASniffer. One improve-
ment was having the ASniffer run on the Windows operat- B. Evolution of Annotation Visualizer
ing system correctly since it was previously only executed
in UNIX-like environments. It had a bug in which the file The Annotation Visualizer is also a project of the
path separator to save the JSON report was hard-coded plugin proposed in this work. We added the possibility
in the project. It was using the reverse backlash as a path of recognizing a query parameter in the project URL to
composer, which works for UNIX systems, but it did not achieve our goal. The query parameter of this project
work as intended in Windows. We fixed this issue with must be the same ID generated by the Annotation Sniffer
the java.nio.File.Paths API that identifies the operating Web APP. Using this information, the AVisualizer makes
system and composes the file path accordingly. This fix a REST request to get the ASniffer reports corresponding
was made by opening an issue in GitHub and contributing to this ID in Annotation Sniffer Web APP and renders
a pull request to the project repository via Git Forking the project on the screen. This enables a dynamic visu-
Flow. New unit tests were added to ensure that this change alization integrated with our ecosystem. An example can
would not break the code11 . Another improvement was be found in Figure 4 using the ID spring-retry-16. During
the availability of ASniffer with the IntelliJ JDK. During the plugin’s development, the AVisualzier web application
our testing, we noticed that these technologies had some switched from Angular to React, so we had to modify our
incompatibilities. A wrong ClassPath use drove the bug in features to this new technology.

10 https://insights.stackoverflow.com/survey/2019/ 12 https://github.com/metaisbeta/asniffer/issues/5
11 https://github.com/metaisbeta/asniffer/pull/4 13 https://www.mongodb.com/basics/bson

33
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

Fig. 4. Query parameter in Annotation Visualizer indicating the project

The interaction with the plugin can occur in two differ- between decoupled services and is common in modern
ent ways. The first is a button on the toolbar to start the applications. An event is a state change or an update,
user’s current project analysis. The second is a modified like a button click. Every user action generates an event
browser integrated with the plugin. that the JetBrains Runtime computes. The button and
The browser integrated into this plugin is an adaptation the sidebar generate events that the plugin interprets and
of the GIdea Browser14 , which is a FLOSS implementation execute corresponding actions. The button triggers the
of a Chromium-based browser for IntelliJ. The browser en- event to start the Annotation Sniffer analysis. The sidebar
gine used by this project is the Java Chromium Embedded button triggers the event to open the embedded browser.
Framework (JCEF), an implementation of Chromium in The communication between the Jetbrains Runtime and
the Java language. The plugin is responsible for loading the embedded browser is event-based. When the user clicks
custom URLs via events. In this way, we show the user the button, the Runtime generates an event for the browser
the final analysis of the project. The Plugin overview can to load the landing page. If everything runs correclty —
be found in Figure 5. the event to load the project triggers. Otherwise, the error
page event is triggered.
C. System Architecture and Integration To understand our system solution, we provide Figures 6
and 7 as references. In step 1 from Figure 6, the user
For developing this system, we used the MVC (Model- interacts with the plugin button and requests the analysis
View-Controller) architectural pattern composed of three of the project. In step 2, the ASniffer is activated and
layers. The model is the application object, the view is its analyzes the project locally. Step 3 sends the files gener-
screen presentation, and the controller defines how the user ated by the analysis to the Annotation Sniffer Web APP.
interface reacts to user input. Thus, MVC decouples them Step 4 is to receive the project ID within the Annotation
to increase flexibility and reuse. The AVisualizer presents Sniffer APP. Step 5 consists of modifying the browser’s
the view, and the controller and model are represented URL to receive the ID collected by the previous step as
in the Annotation Sniffer Web APP. Since both projects a parameter. Step 6 symbolizes the project AVisualizer
are constantly developing, this pattern was chosen because sending the page HTML to be displayed by the browser.
we want to decouple the plugin from both ASniffer and Step 7 is the page displayed by the embedded browser,
the AVisualizer. MVC also enables an expansion of this closing our software loop.
software by using the Annotation Sniffer Web APP to Annotation Sniffer Plugin option is shown in the navi-
render projects in other views. gation bar and sidebar, as shown in Figure 5. By clicking
A plugin for IntelliJ IDEA is an application that runs on the button on the navigation bar, the Plugin shows
on the JetBrains Runtime. This software was built using two options. The first is “Run Annotation Analysis”, and
IntelliJ SDK, which contains the IntelliJ OpenAPI package the second is “Run Annotation Analysis (Not Persist)”, as
that integrates the IDE. The language used for developing seen in Figure 8. The main difference is that the second
the plugin is Kotlin with the Gradle framework for depen- does not persist the data in the database. After the button
dency management and building. The main dependency of clicks, the IntelliJ Runtime executes an event that triggers
this project is ASniffer, hosted at Maven Central. the analysis.
The plugin for IntelliJ is event-oriented. An event-
driven architecture uses events to trigger and communicate
14 https://github.com/Jonatha1983/GIdeaBrowser

34
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

Fig. 5. IntelliJ IDEA with the Plugin

Fig. 6. Architecture of the plugin

35
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

Fig. 7. Sequence diagram for requesting and showing the visualization

V. Evaluation database after the first consult. This second option enables
15
E used Spring Retry to evaluate and verify the the user to use this tool without having this analysis saved
W developed plugin. Spring Retry is a popular spring
boot library that provides declarative retry support for
in our database.
After the button is clicked, the event starts, and the pro-
Spring applications. It is used in Spring Batch, Spring cessing analysis runs asynchronously. This job should run
Integration, and other software from the Spring family. asynchronously to avoid blocking the main thread from
Jetbrains Runtime. During this job execution, a loading
screen in the embedded browser gives some feedback to
the user on what is going on.
Moreover, we evaluated the plugin with two users famil-
iar with the ASniffer and AVisualizer. They participated
in a previous interview study with AVisualizer [3]. Partic-
ipants must install and use the plugin and answer some
questions. The questions were divided into two parts: (a)
answers about the information shown in the plugin that
has a correct answer, and (b) answers about the user’s
opinion regarding the plugin’s usability.
The first set of questions was all answered correctly. The
Fig. 8. Menu Button Options overall answers about usability were positive. Participants
agree that this plugin is easy to use and has a clean user
The first step in the evaluation procedure was download- interface. They also considered the documentation good.
ing IntelliJ IDEA. Then the plugin, properly speaking, is One of the users needed some help installing the plugin,
found in the IntelliJ Marketplace in the “Settings” options which was related to a need for more experience installing
browsing the “Plugins” sidebar. After downloading and plugins in IntelliJ IDEA since it may not be apparent
installing the plugin, two new changes occur in the IDE UI. to users where the option can be found. Also, the usage
There is a button in the header, as seen in Figure 8, and a of the embedded browser received an “average grade” in
button in the right sidebar, which opens the embedded feedback. Having a browser and an IDE in the same space
browser. The default project is SpaceWeatherTSI, and can be tight and ineffective for smaller monitors. Also, we
it is just a placeholder. In the Menu button, there are received user feedback that when drilling down on classes,
two options to choose from. The first Run Annotation the table of annotations should be updated by applying the
Analysis runs the Annotation Sniffer analysis, send it to selected class or package filter. It would be interesting to
the Annotation Sniffer Web App, and stores this project choose the metric the user wants to visualize if there are
in the database. There is a second option Run Annotation other visualization possibilities for the chosen selection.
Analysis (Not Persist) which will delete the data from our Currently, the AVisualizer does not have this capability.
The user should click on the package to see it.
15 https://github.com/spring-projects/spring-retry In summary, both users answered all questions accu-

36
 Abilio, S., Lima, P., Gomes, E. et al. / Revista de Sistemas de Informação da FSMA n. 30 (2022) pp. 28-37

rately from the correctness part. This result is expected [4] K. Beck and C. Andres, Extreme Programming Ex-
since they used AVisualizer in another context. The usage plained: Embrace Change (2nd Edition). Addison-
feedback was good. We found room for improvement in Wesley Professional, 2004, isbn: 0321278658.
the plugin UI and that the plugin fulfilled its role. [5] W. Hasselbring, A. Krause, and C. Zirkelbach, “Ex-
plorviz: Research on software visualization, compre-
VI. Conclusion hension and collaboration,” Software Impacts, vol. 6,
HE AVisualizer plugin enabled better integration p. 100 034, 2020, issn: 2665-9638. doi: 10 . 1016 / j .
T between ASniffer and AVisualizer tools. Having the
plugin embedded in the IDE empowers the developer to
simpa.2020.100034.
[6] V. Rajlich, “Software evolution and maintenance,”
access the data during the development and could help in Future of Software Engineering Proceedings,
newcomers to a project gain better insight into how the ser. FOSE 2014, Hyderabad, India: Association for
annotations are used. This plugin lowers the barrier of Computing Machinery, 2014, pp. 133–144, isbn:
entry to the Annotation Visualizer ecosystem because it 9781450328654. doi: 10.1145/2593882.2593893.
is easy to use, intuitive, and embedded in an IDE. From [7] F. P. Brooks, “No silver bullet essence and accidents
the Jetbrains Marketplace, we identified that people from of software engineering,” Computer, vol. 20, no. 4,
other countries unrelated to our project used the plugin pp. 10–19, 1987. doi: 10.1109/MC.1987.1663532.
and could have already benefited from the Annotation [8] K. Stephenson, J. Cannon, W. Floyd, and W. Parry,
Visualizer. “Introduction to circle packing: The theory of dis-
The ASniffer and AVisualizer integration can be ex- crete analytic functions,” The Mathematical Intelli-
tended to other development processes. The technology gencer, vol. 29, pp. 63–66, Jan. 2007. doi: 10.1007/
developed in this work can run the ASniffer analysis and BF02985693.
display the AVisualizer visualization during the Continu-
ous Integration (CI) process. One possible application for
this connection is to develop a CI workflow that analyzes Sergio Abilio Graduated in Computer Science from the Federal
University of ABC (UFABC). His interests are distributed software
the source code committed by the developer and displays architecture and cloud computing.
a URL for the AVisualizer visualization of the project. E-mail: [email protected]
This approach can be implemented via GitHub Actions,
for example.
Finally, another improvement is to enable connecting Phyllipe Lima is an adjunct professor of computer science and re-
directly to AVisualizer using the files generated by the searcher at the Federal University of Itajubá (UNIFEI). His research
ASniffer, stored in the local (.idea) root project directory. interests include static source code analysis, mining software repos-
itories, software visualization, game design and development. He
Moreover, performance improvements and new features received his Ph.D. in Applied Computing by the National Institute
based on user feedback will be beneficial recommendations for Space Research (INPE). E-mail: [email protected]
to maintain the project’s purpose.

Acknowledgments Everaldo Gomes is a scholarship student at the Federal University

of ABC region (UFABC). His research interests include distributed
We thank all the respondents who participated in our systems, fault tolerance, model checking, and source code metrics.
evaluation. This work is partially supported by FAPESP Gomes received a master’s degree in Computer Engineering from the
(grant #2019/12743-4). Federal University of Rio Grande, Brazil.
E-mail: [email protected]

References
[1] P. Lima, E. Guerra, P. Meirelles, L. Kanashiro, H. Eduardo Guerra is currently a researcher at the Free University of
Silva, and F. F. Silveira, “A metrics suite for code Bozen-Bolzano, worked in Brazil as a researcher in the National
annotation assessment,” Journal of Systems and Soft- Institute for Space Research in Brazil and as a teacher at Aeronautics
Institute of Technology. His research interests include agile meth-
ware, vol. 137, 2018, issn: 0164-1212. doi: 10.1016/j. ods, software patterns, framework development, software analytics,
jss.2017.11.024. and dynamic architectures. Guerra received a Ph.D. in computer
[2] P. Lima, E. Guerra, and P. Meirelles, “Annotation engineering from the Aeronautics Institute of Technology and has
practical experience in architecture and framework design.
sniffer: A tool to extract code annotations metrics,” E-mail: [email protected]
Journal of Open Source Software, vol. 5, no. 47,
p. 1960, 2020. doi: 10.21105/joss.01960.
[3] P. Lima, J. Melegati, E. Gomes, N. S. Pereira, E. Paulo Meirelles is an adjunct professor of computer science at the
Guerra, and P. Meirelles, “Cadv: A software vi- Federal University of ABC region (UFABC) and a researcher at
sualization approach for code annotations distribu- the Free/Libre/Open Source Software Competence Center at the
University of São Paulo (USP). His research interests include free
tion,” Information and Software Technology, vol. 154, software development, agile methodologies, DevOps, and source code
p. 107 089, 2023, issn: 0950-5849. doi: doi . org / 10 . metrics. Meirelles received a PhD in computer science from the
1016/j.infsof.2022.107089. University of São Paulo.
E-mail: [email protected]

37
View publication stats