Metric Attribute list side bar

[Richargh]

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:

• [x] Is on the right side
• [x] opens if a user has selected a building (orangy), closes if she deselects a buildings or if he presses the close symbol
• [x] will only show metrics for the selected building
• [x] it can be scrolled, just like before, to check out all the other metrics.
• [x] the name and basic metrics are "frozen", so we don't lose this information while looking at other metrics
• [x] 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~
• [x] Show the URL in a tooltip when hovering the nodeLink icon
• [x] Hide AttributeSideBar onFileSelectionStateChanged and onBlacklistChanged
• [x] 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.
• [x] Fix scrolling behaviour when fixed header is getting longer due to long strings visible over multiple lines.
• [x] Move the viewCube component when the sideBar is opened to be on the left of it (see comment below)
• [x] Move the legendPanel when the sideBar is opened to be on the left of it (see comment below)
• [x] For the above metrics table: Show two metrics in a row (see comment below)
• [x] Move the link icon next to the selected nodename
• [x] Move the close icon to the top right corner

• [x] 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.

[alschmut]

@Richargh this looks awesome! A lot better than a simple key-value table.

• If I get it right, it's worth to mention that the AttributesSideBar will only show metrics for the selected building, which I think is a really nice solution, as we always show the 3 hovered metric values next to the metric-chooser.
• I am not yet convinced to "duplicate" the treeView though.

[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

[alschmut]

@Richargh I couldn't wait to start implementing this issue 😄

Here is a current state of an AttributeSideBar:

• Having the primary metrics (inside the upper box) side by side, doesn't work well for long metric names and when showing the delta values. Thats why they are below each other.
• The path is not implemented as requested yet.
• The secondary metrics (the below box) is scrollable
• The left upper cross closes the panel and the right upper external link icon opens the file using the provided weblink

Ideas

• The legendPanel is (again) distracting at its current position...
• How do we wanna display long file names?

In single mode:

In delta mode:

[Richargh]

@alschmut what happened to #693 and #529 ? Don't you work on these issues as well?

[Richargh]

as for the layout: I like the visuals. It's nicely split up between top and bottom.

Having the primary metrics (inside the upper box) side by side

Hmm. What about placing the symbols with their values side by side but the potentially long metric names under their symbols?

(symbolArea) (valueArea) (deltaArea) (nameOfArea)	(symbolHeight) (valueHeight) (deltaHeight) (nameOfHeight)

becomes

(symbolArea) (valueArea) (deltaArea)	(symbolHeight) (valueHeight) (deltaHeight)
(nameOfArea)	(nameOfHeight)

The left upper cross closes the panel and the right upper external link icon opens the file using the provided weblink

I'm not sure if it's clear it's a link. Does the hover show the url?

The legendPanel is (again) distracting at its current position...

Yes. Can you change the z-Order and place it below the side bar, so we can only see it when the sidebar is closed?

How do we wanna display long file names?

Hadn't thought of that. Is there anything in Angular that helps us here? Changing the font size to fit maybe? Or only show beginning and end of the word?

I have another problem I did not consider before: what about the viewcube? :) It's useful to have even when the sidebar is open and now it's covered.

[alexhunziker]

The legendPanel is (again) distracting at its current position...

How about we just move the viewCube and the legend Panel to the left when the side bar is opened, so that they are not covered. something like that:

[alschmut]

Current status with new screenshots

It might not look like a lot has changed, but it actually did (see above commits).

• Especially cool is that the blue box can be shorter and longer depending on its content and the yellow box, which is scrollable until the bottom of the window, always adjusts its height automatically (without any maths! only a few CSS properties)
• Also the sidebar opens/closes more precise when the building selection changes
• The legendPanel now doesn't move in anymore, but just plop in at the correct place (visibility true/false).

Ideas

• Showing the path by default only for one line and when clicking on the path it toggles the rest
• I felt like having the path in between the two metric boxes was kind of weird and misplaced (see earlier screenshot above).
• Rearranging and adding content inside the blue box is super easy

[alschmut]

@Richargh What do you think about this draft?

[alschmut]

Thanks a lot for your feedback @Richargh:

I like the 4 quadrants for our four metrics. Nice choice. Can you switch around the grey boxes for the metrics? Suppose the map that is „current“ is codecharta-master. What if we surround that label with a grey box? Then we can surround the metrics for that map also with grey boxes and link the concepts. So instead of the grey box around the deltas we have them around the current values.

I am slightly confused about this. So I guess you want the up-to-date values to be in that grey box and the delta values next by, correct? The label you mention, is actually the source-origin, which gets generated, when using multiple/delta mode (the "cc.json" string is missing at the end). And I would rather not want to set background colors for the filename. Another idea is also to copy or implement a similar solution to what we plan with #696. Using the same light colors grey and red/green as in the map.

Have the details plop in place seems like the right move to me. Otherwise it‘s probably annoying if you click on different buildings a lot.

Sorry, I was writing the wrong word. I actually meant the legendPanel doesn't move in anymore... I quite like the sidebar to move in from the right. Of course the sidebar stays, where it is, when you select another building.

Can you add a label to the link in the top right corner? Something simple like „Link“. Or make it more visible in some other way. Currently it‘s very easy to overlook.

There is a nice tooltip with the exact link showing up when you hover the link icon.

• We could either add a "Link" label next to the icon
• or put the icon to the end of the selected filename, which suggests a closer relationship to the selected file (I think I would prefer this)

[alschmut]

New current status:

• The link icon and the close icon are moved
• The metric values have a grey/green/red background

[fatihi]

I would actually prefer if the sidebar closed when a building is not selected. I moved up the bug that keeps the selection when settings are changed and would prefer if both this bug and the other one are released together.

[alschmut]

@fatihi

@NearW and me just fixed the bug on a separate branch. After some new tests are added and a review both are ready to merge.

[fatihi]

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