fix: correct metric summary display

ChristopherPHolder · Mar 29, 2024 · 6a1cc09 · 6a1cc09
1 parent 9d2f195
commit 6a1cc09
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 88 deletions.
diff --git a/libs/feature/audit-viewer/src/viewer-container/viewer-file-strip.component.ts b/libs/feature/audit-viewer/src/viewer-container/viewer-file-strip.component.ts
@@ -3,24 +3,20 @@ import { Component, input } from '@angular/core';
 @Component({
   selector: 'lib-viewer-file-strip',
   template: `
-    <div class='film-strip'>
-      @for (item of filmStrip(); track item) {
-        <img [src]='item.data' height='100px' alt='' style='padding: 0 10px;'>
-      }
-    </div>
+    @for (item of filmStrip(); track item) {
+      <img [src]='item.data' height='100px' alt='' style='padding: 0 10px;'>
+    }
   `,
   standalone: true,
   styles: [`
-    .film-strip {
+    :host {
         display: flex;
         overflow: auto;
-    }
-    .film-strip {
         -ms-overflow-style: none;  /* Internet Explorer 10+ */
         scrollbar-width: none;  /* Firefox */
-    }
-    .film-strip::-webkit-scrollbar {
-        display: none;  /* Safari and Chrome */
+        ::-webkit-scrollbar {
+            display: none;  /* Safari and Chrome */
+        }
     }
   `]
 })

diff --git a/libs/feature/audit-viewer/src/viewer-container/viewer-step-details.component.ts b/libs/feature/audit-viewer/src/viewer-container/viewer-step-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { MatTable } from '@angular/material/table';
 import type { FlowResult, Result } from 'lighthouse';
 import {
@@ -56,6 +56,15 @@ import { DIAGNOSTIC_ITEM_STATUS } from './viewer-diagnostic-status-badge.compone
     ViewerFileStripComponent,
     ViewerDiagnosticComponent,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: `
+      :host {
+          display: block;
+          max-width: 960px;
+          margin: auto;
+          --mdc-elevated-card-container-shape: 0;
+      }
+  `
 })
 export class ViewerStepDetailComponent {
   stepDetails = input.required<FlowResult.Step>();

diff --git a/libs/feature/audit-viewer/src/viewer-container/viewer-step-metric-summary.component.ts b/libs/feature/audit-viewer/src/viewer-container/viewer-step-metric-summary.component.ts
@@ -1,7 +1,5 @@
-import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { MatTable } from '@angular/material/table';
-import { MatDivider } from '@angular/material/divider';
 import { MatIcon } from '@angular/material/icon';
 
 export const COLOR_CODE = {
@@ -31,95 +29,76 @@ export type MetricSummary = {
 @Component({
   selector: 'lib-viewer-step-metric-summary',
   template: `
-    <div class='metrics-menu'>
+    <div class='header'>
       <span>METRICS</span>
-      <div (click)='toddleDescriptionVisibility()'>Expand view</div>
+      <div (click)='toddleDescriptionVisibility()'>{{toggleBtnText()}} view</div>
     </div>
-    <div class='metrics-wrapper'>
+    <div class='content'>
       @for (metric of metricSummary(); track metric.name) {
-        <div class='metric-wrapper'>
-          <mat-divider />
-          <div style='margin: 12px'>
-            <div class='metric-container'>
-              <div class='metric-item' style='margin: 8px;'>
-                <!--  @TODO move to separate component -->
-                @switch (metric.colorCode) {
-                  @case ('green') {
-                    <mat-icon style="color:green;">circle</mat-icon>
-                  }
-                  @case ('orange') {
-                    <mat-icon style="color:orange;">square</mat-icon>
-                  }
-                  @case ('red') {
-                    <mat-icon style="color:red;">warning</mat-icon>
-                  }
-                }
-              </div>
-              <div class='metric-item' style='font-size: medium;'>{{ metric.name }}</div>
-              <div class='metric-item' style='font-size: large; font-weight: 500;' [style.color]='metric.colorCode'>
-                {{ metric.value }}
-              </div>
-    
-            </div>
-            @if (displayDescription()) {
-              <div style='margin: 8px;'>
-                {{ metric.description }}
-                <a [href]='metric.reference?.link'>{{ metric.reference?.text }}</a>
-              </div>
+        <div class='item'>
+          <div class='item-header'>
+            <!--  @TODO move to separate component -->
+            @switch (metric.colorCode) {
+              @case ('green') {
+                <mat-icon style='color:green;'>circle</mat-icon>
+              }
+              @case ('orange') {
+                <mat-icon style='color:orange;'>square</mat-icon>
+              }
+              @case ('red') {
+                <mat-icon style='color:red;'>warning</mat-icon>
+              }
             }
+            <div style='font-size: medium;'>{{ metric.name }}</div>
+            <div style='font-size: large; font-weight: 500;' [style.color]='metric.colorCode'>{{ metric.value }}</div>
           </div>
+          @if (descriptionVisible()) {
+            <div style='margin: 16px 0;'>
+              {{ metric.description }}
+              <a [href]='metric.reference?.link'>{{ metric.reference?.text }}</a>
+            </div>
+          }
         </div>
       }
     </div>
   `,
   standalone: true,
-  imports: [
-    JsonPipe,
-    MatTable,
-    MatDivider,
-    MatIcon,
-  ],
+  imports: [JsonPipe, MatIcon],
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [`
-    :host {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        max-width: 900px;
-        margin: auto;
-    }
-    .metrics-menu {
-        display: flex;
-        justify-content: space-between;
-        padding: 8px 32px;
-        width: 100%;
-    }
-    .metrics-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-    .metric-wrapper {
-        min-width: 300px;
-        max-width: 500px;
-        width: 100%;
-        margin: 0 16px;
-    }
-    .metric-container {
-        display: flex;
-        width: 100%;
-        align-items: center;
-    }
-    .metric-item:last-of-type {
-        margin-left: auto;
-    }
+      .header {
+          display: flex;
+          justify-content: space-between;
+          margin: 8px 0;
+      }
+
+      .content {
+          display: grid;
+          grid-template-columns: 1fr;
+          @media (min-width: 768px) {
+              grid-template-columns: 1fr 1fr;
+              gap: 0 32px;
+          }
+      }
+
+      .item {
+          border-top: 1px solid #ccc;
+          margin: 0 0 16px 0;
+          padding: 8px;
+      }
+      
+      .item-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+      }
   `]
 })
 export class ViewerStepMetricSummaryComponent {
   metricSummary = input.required<MetricSummary[]>();
-  readonly displayDescription = signal(false);
+  readonly descriptionVisible = signal(false);
+  readonly toggleBtnText = computed(() => this.descriptionVisible() ?  'Collapse' : 'Expand' );
   toddleDescriptionVisibility(): void {
-    this.displayDescription.update((value) => !value);
+    this.descriptionVisible.update((value) => !value);
   }
 }