Week 5(June 26 — July 2): Heatmap overlay

Prakarsh Gupta
2 min readJul 7, 2023

Before starting with what I did, let me just explain what heatmap in our project means.


Heatmap in DSOMM

In DSOMM, there are many tasks that a company should do in order to improve cyber security in their projects. These tasks are divided into Dimensions and Sub-dimensions. Previously, I worked on adding filters in the matrix view of these tasks.

When a section from this heatmap is selected, tasks in that sub-dimension pop up on the right side of the screen. Currently, when the user clicks on the task, a new screen is opened which displays the details of that task. What I need to do is, instead of opening a new screen, the details can be displayed in an overlay right above the heatmap layer.

Here is a visual representation of the overlay’s appearance.


  • Generated YAML file using docker. Separate files with task details were already present. Docker helped me run a file that will combine the data from this file and create a “generated.yaml” file based on a pre-defined YAML structure.
  • Successfully created an overlay that displays details of the selected task. PR is yet to be accepted, there are minor changes before it gets merged.

Tasks for next week

  • Team-based assessment in DSOMM: Tasks for every team, and in the heatmap page, a filter needs to be added that will show the progress for the respective team.
  • Create an updated YAML structure that can incorporate the data from Team based assessment.

Connect with me :)

dotCard | Twitter | LinkedIn | GitHub



Prakarsh Gupta

#buildinpublic GSoC'23 @OWASP || SDE 1 @ Expedia Group || NIT Kurukshetra