Metric Attribute list side bar

Feature request

Let’s incrementally change our UI. Next stop, move the metric attribute list to the right side.

Currently the metric attribute list can be opened by clicking on the file path indicator. In the settings this is called the detail panel. This issue replaces this detail panel and it can be removed.

Description

The new metric side bar is useful when users want to check out other metrics beside the three selected ones for size, height and color: “this building has high complexity, bad line coverage but how often is it actually changed?”. The features are:

• Is on the right side
• opens if a user has selected a building (orangy), closes if she deselects a buildings or if he presses the close symbol
• will only show metrics for the selected building
• it can be scrolled, just like before, to check out all the other metrics.
• the name and basic metrics are “frozen”, so we don’t lose this information while looking at other metrics
• the window should be horizontally very slim
• ~If the user clicks on the file path it opens vertically, like a tree view. Unlike a tree view it can only be expanded fully and minimized fully. And unlike our regular tree view on the upper left side it does not~
• Show the URL in a tooltip when hovering the nodeLink icon
• Hide AttributeSideBar onFileSelectionStateChanged and onBlacklistChanged
• the full path requires a lot of horizontal space. So we won’t show the complete file path and instead only the fitting parts. The path is now word-wrap and shown over multiple lines.
• Fix scrolling behaviour when fixed header is getting longer due to long strings visible over multiple lines.
• Move the viewCube component when the sideBar is opened to be on the left of it (see comment below)
• Move the legendPanel when the sideBar is opened to be on the left of it (see comment below)
• For the above metrics table: Show two metrics in a row (see comment below)
• Move the link icon next to the selected nodename
• Move the close icon to the top right corner
• Color the delta value background box according to the node.deltas["theMetric"] and settings.appSettings.invertColors in light green or red. This would currently mean 4 times duplicated code inside the html file.

show the complete structure, but only the path to this specific file.

The result looks something like this:

While I do like the radial buttons proposed in the screen shot I think we should implement these buttons with a later story.

Inspiration

I was inspired by this UI mockup:

[Richargh]

I updated the description 😃

• only show metrics for the selected building

–> yes

• I am not yet convinced to “duplicate” the treeView though.

Wasn’t the intention. I only wanted to show the path to the selected file using the vertical space instead of the horizontal space. Instead of showing the path like this:

/root/de/maibornwolff/codecharta/visualization/app/settings/services/foo/service.spec.ts

we can show it like this:

root
  de.maibornwolff.codecharta.visualization --> compatacted because the folders are empty
   app
      settings
         services
           foo
             service.spec.ts

[fatihi]

Oh that’s nice! In that case could you link them together?