Improve progress bar

hubmapconsortium · Oct 23, 2024 · 15276b2 · 15276b2
1 parent 4d1c9f4
commit 15276b2
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html
@@ -16,7 +16,7 @@
     <h1 class="title">Create a Cell Distance Visualization</h1>
   </div>
 
-  <hra-workflow-card class="card data-upload" [loadProgress]="nodeProgress">
+  <hra-workflow-card class="card data-upload" [allowUpload]="true" [loadProgress]="nodeProgress">
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="1"></hra-step-indicator>
       <span class="card-title">Upload Data</span>
@@ -83,7 +83,7 @@ <h2 class="header">
       (loadStarted)="clearNodes()"
       (loadCompleted)="setNodes($event[0])"
       (loadCancelled)="clearNodes()"
-      (loadErrored)="nodesLoadError = $event"
+      (loadErrored)="nodesLoadError = $event; nodeProgress = 0"
       [errorMessage]="nodesErrorMessage"
       [errorActionMessage]="nodesErrorActionMessage"
       (progress)="nodeProgress = $event"
@@ -350,7 +350,12 @@ <h2 class="header">
     </div>
   </hra-workflow-card>
 
-  <hra-workflow-card class="color-config card" [class.custom]="useCustomColorMap" [loadProgress]="colorProgress">
+  <hra-workflow-card
+    class="color-config card"
+    [class.custom]="useCustomColorMap"
+    [allowUpload]="true"
+    [loadProgress]="colorProgress"
+  >
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="5"></hra-step-indicator>
       <div class="card-title">Optional: Configure Colors</div>
@@ -422,7 +427,7 @@ <h2 class="header">
         [options]="colorMapLoaderOptions"
         (loadCompleted)="setCustomColorMap($event[0])"
         (loadCancelled)="clearCustomColorMap()"
-        (loadErrored)="customColorMapLoadError = $event"
+        (loadErrored)="customColorMapLoadError = $event; colorProgress = 0"
         [errorMessage]="colorErrorMessage"
         [errorActionMessage]="colorErrorActionMessage"
         (progress)="colorProgress = $event"

diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
@@ -359,6 +359,7 @@ export class CreateVisualizationPageComponent {
    * Clears all nodes and node load errors
    */
   clearNodes(): void {
+    this.nodeProgress = 0;
     this.nodes = undefined;
     this.nodesLoadError = undefined;
     this.setHeaders([]);
@@ -416,6 +417,7 @@ export class CreateVisualizationPageComponent {
    * Clears custom color map
    */
   clearCustomColorMap(): void {
+    this.colorProgress = 0;
     this.customColorMap = undefined;
     this.customColorMapLoadError = undefined;
   }

diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.html b/libs/design-system/workflow-card/src/lib/workflow-card.component.html
@@ -1,6 +1,11 @@
-<div class="content" [class.show-progress]="loadProgress() !== 0">
+<div class="content" [class.allow-upload]="allowUpload()">
   <ng-content></ng-content>
 </div>
-@if (loadProgress() !== 0) {
-  <mat-progress-bar mode="determinate" [value]="loadProgress() * 100"></mat-progress-bar>
+@if (allowUpload()) {
+  <mat-progress-bar
+    mode="determinate"
+    [class.ready]="loadProgress() === 0"
+    [class.fully-loaded]="loadProgress() === 1"
+    [value]="loadProgress() * 100"
+  ></mat-progress-bar>
 }
diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.scss b/libs/design-system/workflow-card/src/lib/workflow-card.component.scss
@@ -4,20 +4,33 @@
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0rem 0.3125rem 1rem 0rem rgb(from var(--sys-shadow) r g b / 0.24);
+  background-color: white;
 
   .content {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     padding: 2rem;
 
-    &.show-progress {
+    &.allow-upload {
       padding-bottom: 1.5rem;
     }
   }
 
   mat-progress-bar {
     --mdc-linear-progress-track-height: 0.5rem;
     --mdc-linear-progress-active-indicator-height: 0.5rem;
+    --mdc-linear-progress-active-indicator-color: var(--sys-inverse-surface);
+    --mdc-linear-progress-track-color: var(--sys-surface-container-high);
+
+    &.ready {
+      --mdc-linear-progress-track-color: transparent;
+      --mdc-linear-progress-active-indicator-color: transparent;
+    }
+
+    &.fully-loaded {
+      opacity: 0;
+      transition-delay: 0.5s;
+    }
   }
 }
diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.ts b/libs/design-system/workflow-card/src/lib/workflow-card.component.ts
@@ -16,4 +16,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 export class WorkflowCardComponent {
   /** Current data load progress */
   loadProgress = input<number>(0);
+
+  /** Whether the card allows uploading of files */
+  allowUpload = input<boolean>(false);
 }