Skip to content

Repository files navigation

DENIM Visualizing

pipeline status

📣 Description

This application enables to visualize a microservices architecture from a data perspective.

📝 How to cite?

%%% Cite the papers
@inproceedings{andre2025b,
title = {Understanding Data Access in Microservices Applications Using Interactive Treemaps},
author = {Andr{\'e}, Maxime and Raglianti, Marco and Cleve, Anthony and Lanza, Michele},
booktitle = {Proceedings of the 33rd International Conference on Program Comprehension (ICPC 2025): ERA Track},
year = {2025},
organization = {IEEE Computer Society Press / ACM Press},
doi = {https://doi.org/10.1109/icpc66645.2025.00030}
}
@inproceedings{andre2025d,
title = {Visualizing and Exploring Data Access in Microservices Using Interactive Treemaps},
author = {Andr{\'e}, Maxime and Raglianti, Marco and Cleve, Anthony and Lanza, Michele},
booktitle = {Proceedings of the 13th Working Conference on Software Visualization (VISSOFT 2025): Research Track},
year = {2025},
organization = {IEEE Computer Society Press},
doi = {https://doi.org/10.1109/vissoft67405.2025.00012}
}
@inproceedings{deRycke2025a,
title = {Visualizing Data Access Traces in Microservices Using Animated Heat Treemaps},
author = {De Rycke, Maxime and Andr{\'e}, Maxime and Raglianti, Marco and Cleve, Anthony and Lanza, Michele},
booktitle = {Proceedings of the 13th Working Conference on Software Visualization (VISSOFT 2025): NIER Track},
year = {2025},
organization = {IEEE Computer Society Press},
doi = {https://doi.org/10.1109/vissoft67405.2025.00017}
}

⭐ Features

Here is a summary of the features currently supported.

Treemap

Description

It transforms a static analysis report logic object into a treemap view object.

Implementation status

TransformationImplementation status
Treemap🌕

How to?

INPUT

Invoke the transformation by using the POST /treemap route with a static analysis report in JSON (obtained from DENIM Reverse Engineering) inside the request.

OUTPUT

Consult the response view object in JSON:

{
"type": "treemap",
"data": {
// ...
},
"childrenNumber": <children number>,"descendantsNumber": <descendants number>,"width": <width>,"height": <height>,"x": <position on X axis>,"y": <position on Y axis>,"children": [
{
"type": "repository",
"data": {
"location": "https://github.com/<user>/<repository>"
},
"childrenNumber": <children number>,"descendantsNumber": <descendants number>,"width": <width>,"height": <height>,"x": <position on X axis>,"y": <position on Y axis>,"children": [
{
"type": "directory",
"data": {
"location": "https://github.com/<user>/<repository>/"
},
"childrenNumber": <children number>,"descendantsNumber": <descendants number>,"width": <width>,"height": <height>,"x": <position on X axis>,"y": <position on Y axis>,"children": [
{
"type": "file",
"data": {
"location": "https://github.com/<user>/<repository>/.../<file path>.js"
},
"width": <width>,"height": <height>,"x": <position on X axis>,"y": <position on Y axis>,"children": [
{
"type": "codeFragment",
"data": {
// See CodeFragment class in the static analysis report model
},
"childrenNumber": 0,
"descendantsNumber": 0,
"width": 20,
"height": 20,
"x": 7.5,
"y": 7.5,
"children": [],
"color": "<color>",
"opacity": "<opacity>"
}
],
"color": "<color>",
"opacity": "<opacity>"
}
],
"color": "<color>",
"opacity": "<opacity>"
}
],
"color": "<color>",
"opacity": "<opacity>"
}
],
"color": "#000000",
"opacity": "0.05"
}

Frames

Description

It transforms a dynamic analysis report logic object into a animated treemap frames view object.

Implementation status

TransformationImplementation status
Frames🌕

How to?

INPUT

Invoke the transformation by using the POST /frames route with a dynamic analysis report in JSON (obtained from DENIM Reverse Engineering Dynamic Analysis) inside the request.

OUTPUT

Consult the response view object in JSON:

[
{
"location": "https://github.com/<user>/<repository>/.../<file path>.js#Ly1Cx1Ly2Cx2",
"timestamp": <timestamp>,"technology": {
"id": "<technology>"
},
"operation": {
"name": "<operation>"
},
"argumentValues": ["<key>", "<value>"],
"heuristics": "<heuristics>"
},
// ...
]

Min Max

Description

It transforms a dynamic analysis report logic object into an object indicating the minimum and maximum number of calls across all code fragments.

Implementation status

TransformationImplementation status
Min Max🌕

How to?

INPUT

Invoke the transformation by using the POST /minmax route with a dynamic analysis report in JSON (obtained from DENIM Reverse Engineering Dynamic Analysis) inside the request.

OUTPUT

Consult the response view object in JSON:

{
"min": <min>,"max": <max>
}

👩‍💻 Development details

Setup

See INSTALL file.

Test the app (manually)

Manual test suites are set up thanks through the Postman tool.

The tests are specified in the /test/manual directory.

Test the app (unit testing)

Unit test suites are set up thanks to the Jest framework.

The tests are specified in the /test/unit directory and are named following the *.test.js pattern.

The configuration of Jest is stated in the /package.json file.

The tests running computes the code coverage.

Launching the tests

  • Launch the unit tests.

    npm run test_unit

Test the app (integration testing)

Integration test suites are set up thanks to the SuperTest framework.

The tests are specified in the /test/integration directory and are named following the *.test.js pattern.

The configuration of Jest is stated in the /package.json file.

Preparing the environment with Docker

Launching the tests

  • Launching integration tests.

    npm run test_integration

Documentation

An autogenerated documentation is available thanks to SwaggerUI at http://localhost:3000/docs.

  • Generate the documentation.

    npm run swagger

CI/CD

A CI/CD process is set up thanks to GitLab CI/CD. Learn more about GitLab CI/CD via this page.

This one is described in the .gitlab-ci.yml. ⚠️ Right privileges must be granted to Docker on the session on which the CI is executed.

Linting

  • Lint the application.

    npm run lint

Formatting

  • Formatting the application.

    npm run format

🪛 Technical details

Technologies

  • JavaScript
  • Docker

Libraries

Layout

  • bin-pack is used for the implementation of the bin packing algorithm.

Project configuration

  • expressjs is a backend NodeJS framework.
  • body-parser is used for parsing REST API request body.
  • cors is used for managing CORS.

Tests

  • Jest is used for unit testing.
  • SuperTest is used for integration testing.

Format

  • eslint is used for linting the code.
  • prettier is used for formatting the code.

Documentation

Tools

  • npm is the package manager used.
  • GitLab CI/CD is the CI/CD continuous tool used.
  • Docker Desktop is the containerization technology used.
  • Postman is the tool for testing manually the API.

🧪 Design details

Treemap

The treemap follows that model:

Model

Animated Heat Treemap

The animated heat treemap follows that model:

Model

Timeline

The timeline follows that model:

Model

🤝 Contributing

If you want to contribute to the project, please consider the following instructions:

  • Any helping method or class must be named clearly (no abbreviations), especially integrating the type of detection, technology, and type of code fragment.
  • More generally, any contribution must follow the conventions and keep the shape of previous contributions.
  • Any contribution must be tested (unit and integration tests).
  • All the tests and the CI/CD pipeline must pass before definitively integrating the contribution.
  • Any contribution must be documented, especially by updating the README.md and the INSTALL.md file.
  • Any contribution must be approved via the pull request mechanism.
  • More generally, any contribution must follow the conventions and keep the shape of previous contributions.

📊 Evaluation

The complete data of our evaluation is detailed in the /evaluation folder. The subfolders /treemap, /animated-heat-treemap, and /timeline contains input and output files of our approach alongside additional files detailing the systems and the versions targeted.

About

This application enables to generate visualizations for microservices architectures from a data perspective.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages