Feature/1066/metric descriptors in ribbon bar

[phanlezz]

Attribute Descriptors / Metric Descriptors for the Ribbon Bar (Metric Choosers) & Metric Links in Sidebar

Closes #1066

Description

This adds a tooltip (in form of a html title tag) to the metric choosers in the ribbon bar.
Metric Chooser entries will get a clear name display in form of a subtitle.
Metric names in the sidebar will be changed to external links that refer to the documentation if such an field exists in the attributeDescriptors.

Screenshots

[phanlezz]

I fixed a bug where the max metric values would be displayed for the selected metrics.
Do we want to display them in the metric choosers?

[shaman-apprentice]

Hey @shaman-apprentice, while the rerendering worked for the metricChooser tests, I can't it to work for the other choosers (namely area-, height-, color-, edgeMetricChooser). Any idea how to fix the tests?

When I check getLastAction for the store it returns the correct result (set..Metric), but the metric inside the store doesn't seem to get updated, as it always stays at the value set while configuring.

I was so free to push the needed adjustment for the area metric chooser with this commit.

The mocked store is really stupid (which is nice, as it separates concerns and is performant). It is just a mocked value and a stream of dispatched actions. For UI changes we need to update the mocked value manually. Or use the real store instead of the mocked store. Also see there official testing guide https://v8.ngrx.io/guide/store/testing ;)

I guess it previously worked as the selected value was just the displayed value.

[phanlezz]

@shaman-apprentice I noticed the e2e-tests do not perform very well when run in parallel (compared to main). They are unstable and take forever.
Any idea how this can be improved?

[ce-bo]

Could you please adjust the following things?

• Remove the textual Metric Link from the html title tag in the sidebar (secondary and primary metrics) as the user wouldn't be able to click on it within the tooltip when it pops up. It is sufficient that the metrics are linked and the user can click on them.
• Please add the hint and low values to the metric tooltips in the legend
• Please add the link to the metric documentation for metrics in the legend as an external link icon like it is done in the sidebar.

Besides that I would like to discuss with you, if it wouldn't make more sense to show the short description of a metric instead of the metric title within the metric choosers. In the following screenshot you will notice that the metric name and the description below is more or less the same:

I found one issue when a metric is selected. The metric name is duplicated by showing the metric key and title.

[phanlezz]

* Remove the textual Metric Link from the html title tag in the sidebar (secondary and primary metrics) as the user wouldn't be able to click on it within the tooltip when it pops up. It is sufficient that the metrics are linked and the user can click on them.

I included the link to the tooltip, because usually it is very important for an user to see where a hyperlink leads to (as we do when a selected node has a link in the sidebar header).
I will remove it again, and the browser bottom left hyperlink preview will give this information.
Remove in the sidebar and legend and keep it in metric choosers ? I need to adjust or add a second pipe in that case, because at the moment the implementation for all tooltips is the same.

* Please add the hint and low values to the metric tooltips in the legend

They are already included. Only the fallback titles do not have a tooltip, because all information is already displayed.
Please make sure to do a fresh build, this might be a bug otherwise.

Fallback (default, no tooltip):

If descriptors are available.

* Please add the link to the metric documentation for metrics in the legend as an external link icon like it is done in the sidebar.

👍

Besides that I would like to discuss with you, if it wouldn't make more sense to show the short description of a metric instead of the metric title within the metric choosers. In the following screenshot you will notice that the metric name and the description below is more or less the same:

Here is a preview of what it would look like. (UWQHD)

And a comparison with sub 1080p

I found one issue when a metric is selected. The metric name is duplicated by showing the metric key and title.

Can you give me some more details, because this might be a bug. I removed the (maximum value) from the metric choosers and in the same action the subtitle. Make sure to run npm ci and maybe delete any cache/build folders. As you can see in the screenshots I provided, that there is no additional text in the metric choosers. The tests for the metric choosers expect, that there is no additional number/text, so if this is a bug, the tests need to be reworked too.

[ce-bo]

Remove in the sidebar and legend and keep it in metric choosers ? I need to adjust or add a second pipe in that case, because at the moment the implementation for all tooltips is the same.

That's fine

Please make sure to do a fresh build, this might be a bug otherwise.

I checked out the branch this morning and did an npm i and npm run dev. I used the map you have provided to me a few weeks ago. I am wondering why the hints are shown in the sidebar but not in the legend for the same metric.

Here is a preview of what it would look like. (UWQHD)

Thank you! Let's discuss this in person.

Can you give me some more details, because this might be a bug. I removed the (maximum value) from the metric choosers and in the same action the subtitle. Make sure to run npm ci and maybe delete any cache/build folders. As you can see in the screenshots I provided, that there is no additional text in the metric choosers. The tests for the metric choosers expect, that there is no additional number/text, so if this is a bug, the tests need to be reworked too.

When I load the map you have provided to me, the text in the metric choosers is looking like this. We can have a look together but it might be a bug.

[ce-bo]

My bad. The bugs are gone after rebuilding/pulling the current state. Sorry.

[phanlezz]

[...] I am wondering why the hints are shown in the sidebar but not in the legend for the same metric.

(AD = attributeDescriptor)
Well my thought process was like this:
In the sidebar it is the key that is displayed and all AD or the fallback title as tooltip.
In the legend it is always metric: title (key) that is displayed (if fallback available) and all AD displayed as tooltip if present.

So in the legend all information is already displayed, and there is nothing more that could be a tooltip, which is different from the sidebar, because we only show the metric key there and can add the title to the tooltip.

[shaman-apprentice]

Early approve: I only read the code and did no testing. Cool feature and nice work! 👍

[shaman-apprentice]

@shaman-apprentice I noticed the e2e-tests do not perform very well when run in parallel (compared to main). They are unstable and take forever. Any idea how this can be improved?

When a test fails, there will be a lot of timeout hits before failing. That is why they take forever if failing.

When they are stable if executed in serial I wouldn't spent too much time into it, but invest the time into the ongoing migration to Playwright (JFI: @Hall-Ma @ce-bo )

[sonarcloud]

[CodeCharta Analysis] Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[sonarcloud]

[CodeCharta Visualization] Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

94.2% Coverage
0.0% Duplication