Overhaul the Suspicious Metrics menu with Angular-17

ViktoriaGordeevaVG commented 1 month ago

Overhaul the Suspicious Metrics menu

Closes: #3493

Description

The 'Suspicious Metrics' tab has been streamlined and is now more user-friendly. Key improvements include:

Information about suspicious metrics is neatly concealed within an info box, accessible via click or hover for easy visibility.
Untracked metrics in the code are now neatly tucked away in a toggle feature, which can be expanded with a click, similar to the functionality of our file explorer.

Definition of Done

A PR is only ready for merge once all the following acceptance criteria are fulfilled:

[X] Changes have been manually tested
[X] All TODOs related to this PR have been closed
[X] There are automated tests for newly written code and bug fixes
[X] All bugs discovered while working on this PR have been submitted as issues (if not already an open issue)
[X] Documentation (GH-pages, analysis/visualization READMEs, parser READMEs, --help, etc.) has been updated (almost always necessary except for bug fixes)
[X] CHANGELOG.md has been updated

ChristianHuehn commented 1 month ago

We should probably improve a couple of things:

[x] Make Suspicious Metrics at the top a bit bigger so that it's a heading for the whole Metrics part
[x] reduce space between "Suspicious Metrics" and "Suspicious Metrics in ts code"
[ ] if easily achievable, animate the arrow from accordions
[x] reduce space between accordions to their content like "Unsuspcious metrics in ts code"
[x] remove one level of idention of unsuspicious and untracked metricks so it feels like the following example:

Suspicious Metrics (h1) Suspicious Metrics in ts code (h2 - identation 0) Unsuspicious metrics in ts code (h2 - identation from 1 to 0) Untracked metrics in ts code (h2 - identation from 1 to 0)

h1 and h2 are just examples. Use an appropriate level so that h1 feels like a header and h2 like headers for categories inside. 👍