SEAB-6341: Add Metrics type icons in versions tab and Rescent Versions sidebar

[hyunnaye]

Description
This PR adds metrics type icons to indicate which type of metrics a version has.

Has both execution and validation metrics )see the version tab and the "Recent Versions" sidebar:

Only one metrics type:

No Metrics:

Review Instructions
Go to various workflows and test that the icons are shown correctly and the tooltips are clear.

Workflow with only validation metrics: https://qa.dockstore.org/workflows/github.com/ICGC-TCGA-PanCancer/wdl-pcawg-sanger-cgp-workflow:master?tab=metrics

Issue
https://ucsc-cgl.atlassian.net/browse/SEAB-6341

Security
If there are any concerns that require extra attention from the security team, highlight them here.

Please make sure that you've checked the following before submitting your pull request. Thanks!

• Check that your code compiles by running npm run build
• Ensure that the PR targets the correct branch. Check the milestone or fix version of the ticket.
• If this is the first time you're submitting a PR or even if you just need a refresher, consider reviewing our style guide
• Do not bypass Angular sanitization (bypassSecurityTrustHtml, etc.), or justify why you need to do so
• If displaying markdown, use the markdown-wrapper component, which does extra sanitization
• Do not use cookies, although this may change in the future
• Run npm audit and ensure you are not introducing new vulnerabilities
• Do due diligence on new 3rd party libraries, checking for CVEs
• Don't allow user-uploaded images to be served from the Dockstore domain
• If this PR is for a user-facing feature, create and link a documentation ticket for this feature (usually in the same milestone as the linked issue). Style points if you create a documentation PR directly and link that instead.
• Check whether this PR disables tests. If it legitimately needs to disable a test, create a new ticket to re-enable it in a specific milestone.

[codecov]

Codecov Report

Attention: Patch coverage is 9.09091% with 10 lines in your changes missing coverage. Please review.

Project coverage is 41.82%. Comparing base (8f05b79) to head (c6e3516).

Files with missing lines	Patch %	Lines
...pp/workflow/executions/executions-tab.component.ts	0.00%	7 Missing ⚠️
src/app/workflow/workflow.component.ts	0.00%	2 Missing ⚠️
src/app/workflow/versions/versions.component.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #2048   +/-   ##
========================================
  Coverage    41.82%   41.82%           
========================================
  Files          395      395           
  Lines        12370    12379    +9     
  Branches      2969     2970    +1     
========================================
+ Hits          5174     5178    +4     
- Misses        4870     4875    +5     
  Partials      2326     2326           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarcloud]

Quality Gate failed

Failed conditions
6.7% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[denis-yuen]

This is annoying feedback since I see this was the case back in the storytime mock-up, while I get "validation" from the validation icon, I'm not really getting a sense of "statistics" from the execution metrics icon.

I don't feel strongly about it but am curious how others feel and/or what the alternatives are in terms of icons

[coverbeck]

Instead of relying on event emitter, can't you just tell by looking a version.metricsByPlatform where there are execution and validation metrics or not? I may be missing something, and you may need a pipe to figure it out, but it seems more straightforward than having an event emitter from the executions-tab-component.

[svonworl]

This is annoying feedback since I see this was the case back in the storytime mock-up, while I get "validation" from the validation icon, I'm not really getting a sense of "statistics" from the execution metrics icon.

Some kind of graph [bar graph?] might be good as the "executions metrics" icon, the gears typically indicate "settings"/"configuration"/etc in most UIs. Also, both current icons have a strong diagonal visual weight, which looks kinda funny, especially when they're displayed together, so one being less diagonal would be an improvement.

[svonworl]

Don't really care for the metrics icons in the "Recent Versions" box, it's added visual clutter and feels tangential to the box's purpose. But if that's what was in the spec and the team decided was best, no need to change it.

[kathy-t]

This is annoying feedback since I see this was the case back in the storytime mock-up, while I get "validation" from the validation icon, I'm not really getting a sense of "statistics" from the execution metrics icon.

I don't feel strongly about it but am curious how others feel and/or what the alternatives are in terms of icons

We could re-purpose the verified icon which is just a checkmark? But then it would need to be in a bubble and might look confusing in the versions table which already has a bunch of checkmarks

[kathy-t]

Was here, following discussion.

The Recent Versions box does look busy when both icons are there and the box is kind of small. Maybe it's not worth it to have it there, or we just display a generic metrics icon, but then there would be 3 metrics icons and that might be too much

[denis-yuen]

Don't really care for the metrics icons in the "Recent Versions" box, it's added visual clutter and feels tangential to the box's purpose. But if that's what was in the spec and the team decided was best, no need to change it.

On the fence on this one, I agree that the icons in the more detailed versions tab is more intuitive