Uploaded image for project: 'Product Roadmaps'
  1. Product Roadmaps
  2. MMF-871

Make domain visualization at project level more discoverable and usable



    • Type: MMF
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Labels:



      In the Projects page, we've added visualizations to offer different perspectives on the set of projects that are currently viewed. These visualizations are centered on our main domains.

      At project level, we have a similar concept, except that:

      • It's not easy to discover the charts because it's not obvious that one can click on the "domain" titles on the home page
      • Once you end up on a domain page in the Measures page, the bubble chart is located at the bottom of the page so it can be hidden - for instance on the Coverage domain that has many metrics


      As a user, I want to:

      • easily discover (from the project home page) that SonarQube gives me different perspectives on the main domains of my project
      • allow me to hunt / drilldown on metrics of those domains to understand where the problems are ("audit" mode)
      • all this while keeping on having a very fast and easy access to the hotspots of the main metrics - most notably on the leak ("dev / fix the leak" mode)
        • For instance, clicking on coverage on new code must still bring me directly to the list of the least covered files

      Possible solution

      To discover more easily those charts, a "Bubble" icon could be displayed close to the titles (for instance) to highlight the fact that one can have this visualization on all the files of the project.

      Once on the domain page in the "Measures" space, the page could be split in 2 columns:

      • A small one on the left side, containing the list of metrics and their values
        • The first entry of that list could be "Overall" and point to the Bubble chart of the domain
      • A bigger one on the right side, containing the detail of the selected metric

      Current design proposition


      The new Measures space uses the sidebar layout pattern to display its different pages. Instead of using the tabs on top of the page, the user now navigates directly through the different measures using the sidebar.

      When accessing the Measures space by clicking on the Measures tab in the project’s navbar, the user lands on an “Overview” page which displays a Risk chart, similar to the one we can find on Projects page.

      Each measure domain has a first “Overview” item that leads to the bubble chart that is currently displayed under each tab.

      When the user drills down on a measure, he can see the breadcrumb updating on a top bar. This brings consistency with the new Issues page. This top bar is sticky, so it’s always visible and actionable as the user scrolls.


      To make the Measures of specific domains more discoverable, we reuse the pattern introduced in SONAR-8611 . When hovering on the whole block, a button appears next to each domain name. It leads to the domain’s corresponding “Overview” page with the bubble chart.

      Visualisations modes

      A user can choose the visualisation mode he prefers using the dropdown on top of the screen.

      When changing visualisation mode, the user is supposed to stay on the particular folder he was browsing. Currently, changing from Tree to Treemap for example makes the user restart the drill down from the root of the project.

      Treemaps now have a color legend. They also display a real link icon (and not broken link - see SONAR-8591 ). They display the qualifier icons to make it clear what the user is clicking on (a submodule, a folder, a file..).

      When clicking on a file from a treemap, we no longer open the split-screen panel. It opens the code-viewer in a dedicated page, just like the other types of visualisation (tree and list) do.

      Tooltips display a better formatting to make the informations readable at a glance (see SONAR-9379 )

      Tooltips are always displayed on the side of the element they’re related to. This will prevent hidden tooltips outside the viewport (see SONAR-8588 )

      Bubble charts are enhanced with a zooming feature (see SONAR-9416 )

      It is possible to navigate through the List and Tree with the keyboard. In the same fashion than on the Issues page, up and down keys are used to select a file in the list, while right and left are used to open a file/folder or go back to the list.

      When browsing a file through the code viewer, up and down keys lead to the next file we keep the same mouse clickable button as in the old measures page.

      When drilldowning from any visualisation, the browser’s back button should redirect to the previous screen and not to the root page as it is currently being done.

      Inline documentation

      Some measures are very specific to the SonarQube ecosystem and need definitions to be well understood by users. We use little helpers to display those definitions wherever it’s needed. On hover, the ? Icon will display a tooltip with the matching definition. Definitions can be found below.

      Explanations on how to use the bubble charts are also displayed in such hoverable helpers. This will be done later on all charts of SonarQube, and not only in Measures to not have inconsistencies in the interface: https://jira.sonarsource.com/browse/SONAR-9678


      Reliability: Issues in this domain mark code where you will get behavior other than what was expected.

      Maintainability: Issues in this domain mark code that will be more difficult to update competently than it should.

      Security: Issues in this domain mark potential weaknesses to hackers.

      Complexity: How simple or complicated the control flow of the application is. Cyclomatic Complexity measures the minimum number of test cases requiref for full test coverage. Cognitive Complexity is a measure of how difficult the application is to Understand


          Issue Links



              ann.campbell.2 Ann Campbell
              fabrice.bellingard Fabrice Bellingard
              0 Vote for this issue
              5 Start watching this issue