Uploaded image for project: 'Minimal Marketable Features'
  1. Minimal Marketable Features
  2. MMF-721

"Projects" page provides visualizations to better understand distribution of projects versus metrics


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



      As a user with interest in multiple projects, I'd like to be able to make relative comparisons of those projects. I can manually compare the numbers with a small set, but with much over a handful it gets difficult. Besides that, facts that would be difficult to tease out of raw numbers are often readily apparent with the right kind of graph. Therefore the Projects page should offer visualizations of key/interesting data sets across projects on both the "All" and the "Favorites" tabs.


      It will be possible to flip from the list to the visualizations, retaining the filters on the left because seeing how the graphs change as you change filters can be a key part of the experience.


      It is already the case that filter criteria are added to the URL. The same should be true for graph selection, so that it's easy to send a visualization link to a colleague and be sure she's looking at the same thing you are.


      Visualizations should show all projects matching the currently selected filters, without regard to the 50-per-page limit applied to the list of projects. However, there are practical usability limitations to displaying all projects in a 1000-project instance in any single chart. When a project set includes more than 500(?) projects, the displayed set should be limited to the top 500 based on the current sort, and a warning message added to the interface: Displayed project set limited to the top 500 projects based on current sort: [sort criterion here]

      Usability with large sets may vary by graph type, so the limit may need to change from type to type.

      For each filter a basic visualization already exists: the distribution bar chart. Beyond that, we should add:

      Bubble charts

      Each bubble is a project in the selected set, and has

      • mouseover: project details
      • clickthrough: project page
      • Quality Model bubble chart:
        The goal of this chart is to quickly find projects in trouble based on the Quality Model.
        • x: Coverage %, with an inverted scale - 100% at origin
        • y: Remediation effort
        • size: LoC
        • color: the Worse of Reliability and Security ratings
      • Bugs
        • x: LoC
        • y: Reliability Remediation Effort
        • size: #bugs
        • color: Reliability rating
      • Vulnerabilities
        • x: LoC
        • y: Security Remediation Effort
        • size: #vulnerabilities
        • color: Security rating
      • Code Smells
        • x: LoC
        • y: Technical Debt
        • size: #code smells
        • color: Maintainability rating
      • Uncovered Lines
        • x: complexity
        • y: coverage (100% should be at Origin so that the files that need the most work are farthest away)
        • size: uncovered lines
      • Duplicated Blocks
        • x: LoC
        • y: Duplicated Lines
        • size: #duplicated blocks

      Current design proposition

      On the projects page, we have a panel with several display options. One of them allows the user to choose between "list view" or "visualization view" (see MMF-389). When "Visualization view" is on, projects are shown as graphs. Default one is Quality Model Bubble Chart:

      Users can choose their visualization content by using the dropdown on top of the chart

      For instance they have access to multiple bubble charts that look like this:


        1. Projects_Page_01.png
          114 kB
        2. Projects_Page_02.png
          130 kB
        3. Projects_Page_03_dropdown.png
          9 kB
        4. Projects_Page_04_charts_V2.png
          53 kB
        5. Projects_Page_04_charts.png
          52 kB
        6. projects-page_Visualizations_01.png
          44 kB
        7. projects-page_Visualizations_02.png
          52 kB
        8. Screen Shot 2017-03-17 at 16.55.28.png
          Screen Shot 2017-03-17 at 16.55.28.png
          20 kB
        9. Selection_242.png
          126 kB

          Issue Links



              • Assignee:
                ann.campbell.2 Ann Campbell
                fabrice.bellingard Fabrice Bellingard
              • Votes:
                1 Vote for this issue
                6 Start watching this issue


                • Created: