SEAB-6341: Add Metrics type icons in versions tab #2048

hyunnaye · 2024-12-05T15:37:05Z

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

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=versions

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!

codecov · 2024-12-05T15:59:59Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 41.83%. Comparing base (3396570) to head (bc2ceaa).
Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #2048   +/-   ##
========================================
  Coverage    41.82%   41.83%           
========================================
  Files          395      395           
  Lines        12370    12372    +2     
  Branches      2969     2969           
========================================
+ Hits          5174     5176    +2     
  Misses        4870     4870           
  Partials      2326     2326

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

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

src/app/workflow/versions/versions.component.html

src/app/workflow/workflow.component.html

src/app/workflow/versions/versions.component.ts

coverbeck · 2024-12-05T19:42:16Z

src/app/workflow/versions/versions.component.html

@@ -217,7 +217,18 @@
        >
      </th>
      <td mat-cell *matCellDef="let version">
-        <mat-icon data-cy="metrics" *ngIf="version.metricsByPlatform && (version.metricsByPlatform | json) !== '{}'">check</mat-icon>
+        <img
+          *ngIf="hasExecutionMetrics"


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 · 2024-12-06T01:17:55Z

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 · 2024-12-06T14:15:00Z

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 · 2024-12-06T15:13:28Z

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

hyunnaye · 2024-12-12T21:25:05Z

Updated screenshots to show the new execution metrics icon and removed the icons on the recent versions sidebar. Need to wait until dockstore/dockstore#6055 merge

kathy-t · 2024-12-12T22:12:54Z

Updated screenshots to show the new execution metrics icon and removed the icons on the recent versions sidebar. Need to wait until dockstore/dockstore#6055 merge

FYI, you can update the webservice version in the package.json so it builds against your webservice branch if you want to see if the UI builds pass before the webservice PR is merged.

You would modify it like https://github.com/dockstore/dockstore-ui2/pull/2046/files, except your webservice_version_prefix would be 1.17.0-feature-seab-6341

src/app/workflow/versions/versions.component.html

src/app/workflow/versions/versions.component.ts

denis-yuen

Ok with current set of icons, after addressing feedback from others

kathy-t

Design looks good. Would second Charles' feedback about the pipe

kathy-t · 2025-01-10T20:50:48Z

src/app/workflow/versions/versions.component.ts

+  showExecutionMetricsIcon(version: WorkflowVersion) {
+    if (version.metricsByPlatform !== null) {
+      const metrics = version.metricsByPlatform[PartnerEnum.ALL];
+      return metrics?.executionStatusCount != null;


!= -> !==

kathy-t · 2025-01-10T20:51:01Z

src/app/workflow/versions/versions.component.ts

+  showValidationMetricsIcon(version: WorkflowVersion) {
+    if (version.metricsByPlatform !== null) {
+      const metrics = version.metricsByPlatform[PartnerEnum.ALL];
+      return metrics?.validationStatus != null;


sonarqubecloud · 2025-01-13T19:49:41Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

initial push

5e72a7b

hyunnaye self-assigned this Dec 5, 2024

merge

20a1411

hyunnaye added 2 commits December 5, 2024 13:05

test

e5ca52c

test

c6e3516

hyunnaye requested review from coverbeck, denis-yuen, kathy-t and svonworl December 5, 2024 18:34

denis-yuen reviewed Dec 5, 2024

View reviewed changes

coverbeck reviewed Dec 5, 2024

View reviewed changes

svonworl approved these changes Dec 6, 2024

View reviewed changes

kathy-t reviewed Dec 6, 2024

View reviewed changes

hyunnaye added 2 commits December 12, 2024 15:30

review feedback

91a9e18

review feedback

3abbb6c

hyunnaye added 3 commits December 12, 2024 17:20

review feedback

3df9e11

review feedback

3a72977

review feedback

1340bb8

denis-yuen changed the title ~~SEAB-6341: Add Metrics type icons in versions tab and Rescent Versions sidebar~~ SEAB-6341: Add Metrics type icons in versions tab and Recent Versions sidebar Dec 12, 2024

hyunnaye changed the title ~~SEAB-6341: Add Metrics type icons in versions tab and Recent Versions sidebar~~ SEAB-6341: Add Metrics type icons in versions tab Dec 12, 2024

hyunnaye added 4 commits January 7, 2025 10:05

review feedback

d653a03

review feedback

e525358

review feedback

4d81c3d

merge

8e7abc1

hyunnaye added 4 commits January 8, 2025 12:14

review feedback

eca88d4

review feedback

289233e

review feedback

1703b28

review feedback

993fe2c

hyunnaye requested review from kathy-t, denis-yuen and coverbeck January 9, 2025 22:15

coverbeck approved these changes Jan 10, 2025

View reviewed changes

denis-yuen approved these changes Jan 10, 2025

View reviewed changes

kathy-t approved these changes Jan 10, 2025

View reviewed changes

review feedback

bc2ceaa

hyunnaye requested a review from kathy-t January 13, 2025 20:46

kathy-t approved these changes Jan 13, 2025

View reviewed changes

hyunnaye merged commit 9792e69 into develop Jan 13, 2025
18 of 20 checks passed

hyunnaye deleted the feature/SEAB-6341 branch January 13, 2025 21:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SEAB-6341: Add Metrics type icons in versions tab #2048

SEAB-6341: Add Metrics type icons in versions tab #2048

hyunnaye commented Dec 5, 2024 •

edited

Loading

codecov bot commented Dec 5, 2024 •

edited

Loading

denis-yuen left a comment

coverbeck Dec 5, 2024

svonworl commented Dec 6, 2024 •

edited

Loading

svonworl left a comment

kathy-t commented Dec 6, 2024

kathy-t left a comment

denis-yuen commented Dec 6, 2024

hyunnaye commented Dec 12, 2024 •

edited

Loading

kathy-t commented Dec 12, 2024

denis-yuen left a comment

kathy-t left a comment

kathy-t Jan 10, 2025

kathy-t Jan 10, 2025

sonarqubecloud bot commented Jan 13, 2025

SEAB-6341: Add Metrics type icons in versions tab #2048

SEAB-6341: Add Metrics type icons in versions tab #2048

Conversation

hyunnaye commented Dec 5, 2024 • edited Loading

codecov bot commented Dec 5, 2024 • edited Loading

Codecov Report

denis-yuen left a comment

Choose a reason for hiding this comment

coverbeck Dec 5, 2024

Choose a reason for hiding this comment

svonworl commented Dec 6, 2024 • edited Loading

svonworl left a comment

Choose a reason for hiding this comment

kathy-t commented Dec 6, 2024

kathy-t left a comment

Choose a reason for hiding this comment

denis-yuen commented Dec 6, 2024

hyunnaye commented Dec 12, 2024 • edited Loading

kathy-t commented Dec 12, 2024

denis-yuen left a comment

Choose a reason for hiding this comment

kathy-t left a comment

Choose a reason for hiding this comment

kathy-t Jan 10, 2025

Choose a reason for hiding this comment

kathy-t Jan 10, 2025

Choose a reason for hiding this comment

sonarqubecloud bot commented Jan 13, 2025

Quality Gate passed

hyunnaye commented Dec 5, 2024 •

edited

Loading

codecov bot commented Dec 5, 2024 •

edited

Loading

svonworl commented Dec 6, 2024 •

edited

Loading

hyunnaye commented Dec 12, 2024 •

edited

Loading