Merge branch 'cde-mvp2' into cell-type-module-mvp2

hubmapconsortium · Oct 15, 2024 · 12914da · 12914da
2 parents 49e7c43 + ec8d5f9
commit 12914da
Show file tree

Hide file tree

Showing 65 changed files with 9,400 additions and 4,080 deletions.
diff --git a/apps/cde-ui/example-data/nodes.csv b/apps/cde-ui/example-data/nodes.csv
diff --git a/apps/cde-ui/src/app/app.config.ts b/apps/cde-ui/src/app/app.config.ts
@@ -5,6 +5,7 @@ import { provideRouter, withComponentInputBinding, withInMemoryScrolling, withVi
 import { provideIcons } from '@hra-ui/cdk/icons';
 import { provideNothrowPlatformLocation } from '@hra-ui/cdk/platform-location';
 import { ROUTES } from './app.routes';
+import { provideDesignSystem } from '@hra-ui/design-system';
 
 /**
  * Set of config options available during the application bootstrap operation.
@@ -28,5 +29,6 @@ export const appConfig: ApplicationConfig = {
         defaultClasses: ['material-symbols-rounded'],
       },
     }),
+    provideDesignSystem(),
   ],
 };
diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.html b/apps/cde-ui/src/app/components/file-upload/file-upload.component.html
@@ -7,25 +7,23 @@ <h3 class="action-required">
 
 @if (!file && errorMessage()) {
   <div class="error">
-    <span class="message">{{ errorMessage() }}</span>
-    <span class="action">{{ errorActionMessage() }}</span>
+    <mat-icon class="material-symbols-rounded alert">error</mat-icon>
+    <div class="error-messages">
+      <span class="message">{{ errorMessage() }}</span>
+      <span class="action">{{ errorActionMessage() }}</span>
+    </div>
   </div>
 }
 
 @if (file && !errorMessage()) {
   <div class="upload-success">
     <div class="filename">
-      <span class="loaded-label">File loaded:</span>
       <span class="column-info-list mat-body-2 file-name">{{ file ? file.name : '' }}</span>
     </div>
-    <button mat-flat-button class="remove-file" type="button" color="primary" (click)="cancelLoad()">
-      <mat-icon class="material-symbols-rounded">cancel</mat-icon>
-      Remove CSV
-    </button>
+    <mat-icon class="material-symbols-rounded remove-file" (click)="cancelLoad()">delete</mat-icon>
   </div>
 } @else {
-  <button mat-flat-button class="upload" type="button" color="primary" (click)="fileInput.click()">
-    <mat-icon class="material-symbols-rounded">upload</mat-icon>
+  <button mat-flat-button class="upload" (click)="fileInput.click()" hraPrimaryButton hraButtonSize="large">
     Upload CSV
   </button>
   <input
@@ -38,15 +36,3 @@ <h3 class="action-required">
     #fileInput
   />
 }
-<a
-  mat-button
-  class="use-template"
-  [class.loaded]="file"
-  color="primary"
-  [href]="templateUrl()"
-  target="_blank"
-  rel="noopener noreferrer"
->
-  Use Template
-  <mat-icon iconPositionEnd>arrow_right_alt</mat-icon>
-</a>
diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss b/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
@@ -1,65 +1,41 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../styles/constants/palettes' as palettes;
-
-$blue: mat.m2-define-palette(map.get(palettes.$palettes, 'blue'), 600, 800, 900);
-$blue-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $blue,
-      accent: $blue,
-    ),
-  )
-);
-
 :host {
-  --mdc-filled-button-label-text-size: 1rem;
-  --mat-filled-button-horizontal-padding: 0.5rem;
-  --mdc-filled-button-label-text-tracking: 0.02em;
-  --mat-filled-button-icon-spacing: 0.25rem;
-  @include mat.button-color($blue-theme);
-
-  mat-icon {
-    --mat-filled-button-icon-offset: 0;
-    font-size: 1.5rem;
-    height: 1.5rem;
-    width: 1.5rem;
-  }
-
   .upload-success {
+    height: 2.5rem;
     display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    background: var(--sys-surface-container);
+    gap: 0.5rem;
+    border-radius: 1rem;
+    font: var(--sys-label-large);
 
     .filename {
       display: flex;
-      flex-direction: column;
-      width: 15.25rem;
-      margin-right: 5rem;
-    }
-
-    .loaded-label {
-      color: mat.get-theme-color($blue-theme, primary, 900);
     }
 
     .file-name {
-      color: mat.get-theme-color($blue-theme, primary, 800);
+      color: var(--sys-primary);
     }
 
     .remove-file {
-      --mdc-filled-button-label-text-color: #{mat.get-theme-color($blue-theme, primary, 900)};
-      padding: 0.25rem 0.5rem;
-      width: fit-content;
-      margin-right: 5rem;
+      color: var(--sys-secondary);
+      cursor: pointer;
     }
   }
 
-  .upload {
-    margin-right: 5rem;
-  }
-
   .error {
     display: flex;
-    flex-direction: column;
+    gap: 0.5rem;
     margin-bottom: 2rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    font: var(--sys-label-large);
+    width: fit-content;
+
+    .error-messages {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   .action-required {
@@ -76,15 +52,4 @@ $blue-theme: mat.m2-define-light-theme(
       font-size: 2rem;
     }
   }
-
-  .use-template {
-    --mdc-text-button-label-text-size: 1rem;
-    --mat-text-button-with-icon-horizontal-padding: 0rem;
-    --mdc-text-button-label-text-tracking: 0.02em;
-    --mat-text-button-icon-spacing: 0.25rem;
-
-    &.loaded {
-      margin-top: 1.5rem;
-    }
-  }
 }
diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.ts b/apps/cde-ui/src/app/components/file-upload/file-upload.component.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, Injector, input, output, Type } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { FileLoader, FileLoaderEvent } from '@hra-ui/cde-visualization';
+import { ButtonModule } from '@hra-ui/design-system/button';
 import { reduce, Subscription } from 'rxjs';
 
 /**
@@ -34,7 +34,7 @@ export type FileLoadError = FileTypeError | FileParseError;
 @Component({
   selector: 'cde-file-upload',
   standalone: true,
-  imports: [CommonModule, MatIconModule, MatButtonModule],
+  imports: [CommonModule, MatIconModule, ButtonModule],
   templateUrl: './file-upload.component.html',
   styleUrl: './file-upload.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -43,9 +43,6 @@ export class FileUploadComponent<T, OptionsT> {
   /** Notification for action required */
   readonly actionNotification = input<string>();
 
-  /** Url for template data */
-  readonly templateUrl = input<string>();
-
   /** Upload error message */
   readonly errorMessage = input<string>();
   /** Upload error action message */

diff --git a/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss b/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/cta' as cta;
+// @use '../../../styles/cta' as cta;
 
 :host {
   display: flex;
@@ -24,9 +24,9 @@
       box-shadow: 0px 5px 1rem 5px rgba(32, 30, 61, 0.24);
     }
 
-    &:focus-visible .label {
-      @include cta.flatFocus();
-    }
+    // &:focus-visible .label {
+    //   @include cta.flatFocus();
+    // }
 
     img {
       width: 100%;