Clean up and requested changes

apps/cde-ui/src/app/models/create-visualization-page-types.ts

@@ -1,3 +1,5 @@
+import { CellTypeTableData } from '../services/cell-type-data-service';
+
 export type ColorMap = Record<string, [number, number, number]>;
 
 export interface VisualizationSettings {
@@ -7,14 +9,6 @@ export interface VisualizationSettings {
   colorMap: ColorMap;
 }
 
-export interface CellTypeTableData {
-  x: number;
-  y: number;
-  cellType: string;
-  z?: number;
-  ontologyId?: string;
-}
-
 export interface MetaData {
   title?: string;
   sex: string;

apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html

@@ -3,10 +3,10 @@ <h1 class="title">Create a Cell Distance Visualization</h1>
 
   <mat-card class="creation-step data">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">1</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">1</span>
         Format and Upload Data
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <div class="left-side">
@@ -63,10 +63,10 @@ <h3 class="subtitle">Cell Type Table Template</h3>
 
   <mat-card class="creation-step anchor">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">2</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">2</span>
         Optional: Select Anchor Cell Type
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <mat-form-field class="anchor-select">
@@ -81,10 +81,10 @@ <h3 class="subtitle">Cell Type Table Template</h3>
 
   <mat-card class="creation-step metadata" formGroupName="metadata">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">3</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">3</span>
         Add Metadata
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <div class="row-1">
@@ -153,10 +153,10 @@ <h3 class="subtitle">Cell Type Table Template</h3>
 
   <mat-card class="creation-step colors">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">4</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">4</span>
         Optional: Configure Color Map
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <mat-button-toggle-group aria-label="Font Style" formControlName="colorMapOption">
@@ -212,10 +212,10 @@ <h3 class="subtitle">Color Map Template</h3>
 
   <mat-card class="creation-step visualize">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">5</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">5</span>
         Visualize Cell Distance Data
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <button type="submit" mat-button (click)="onSubmit()">Visualize</button>

apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss

@@ -1,7 +1,4 @@
 :host {
-  --mat-card-title-text-font: 'Metropolis';
-  --mat-card-title-text-size: 42px;
-  --mat-card-title-text-line-height: 52.5px;
   --mdc-elevated-card-container-shape: 1rem;
   --mdc-elevated-card-container-elevation: 0px 5px 16px 0px #201e3d3d;
 
@@ -70,28 +67,28 @@
       margin: 0;
     }
 
+    .step-title {
+      display: flex;
+
+      .step-number {
+        width: 56px;
+        height: 56px;
+        background: #464954;
+        text-align: center;
+        padding: 1rem;
+        line-height: 28px;
+        margin-right: 1.5rem;
+        border-radius: 50%;
+        font-size: 24px;
+        color: white;
+      }
+    }
+
     mat-card {
       padding: 3.5rem 4rem;
 
       mat-card-header {
         padding: 0 0 3rem;
-
-        mat-card-title {
-          display: flex;
-
-          .step-number {
-            width: 56px;
-            height: 56px;
-            background: #464954;
-            text-align: center;
-            padding: 1rem;
-            line-height: 28px;
-            margin-right: 1.5rem;
-            border-radius: 50%;
-            font-size: 24px;
-            color: white;
-          }
-        }
       }
 
       mat-card-actions {

apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts

@@ -9,9 +9,9 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { produce } from 'immer';
+import { parse } from 'papaparse';
 
 import {
-  CellTypeTableData,
   ColorMap,
   CsvType,
   DEFAULT_COLOR_MAP,
@@ -20,8 +20,12 @@ import {
   MetadataSelectOption,
   VisualizationSettings,
 } from '../../models/create-visualization-page-types';
-import { CellTypeDataService } from '../../services/cell-type-data-service';
-import { MockCellTypeDataService } from '../../services/service.mock';
+import {
+  CellTypeData,
+  CellTypeDataService,
+  CellTypeTableData,
+  ColorMapData,
+} from '../../services/cell-type-data-service';
 
 @Component({
   selector: 'cde-create-visualization-page',
@@ -38,12 +42,7 @@ import { MockCellTypeDataService } from '../../services/service.mock';
     ReactiveFormsModule,
     MatIconModule,
   ],
-  providers: [
-    {
-      provide: CellTypeDataService,
-      useExisting: MockCellTypeDataService,
-    },
-  ],
+  providers: [CellTypeDataService],
   templateUrl: './create-visualization-page.component.html',
   styleUrl: './create-visualization-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -129,12 +128,15 @@ export class CreateVisualizationPageComponent {
     }
 
     const file = inputTarget.files[0];
-    const fileReader = new FileReader();
-
-    fileReader.onload = () => {
-      if (type === 'data') {
-        this.cellTypeDataService.getCellTypeData().then((result) => {
-          this.cellTypes = result.map((result) => {
+    parse(file, {
+      header: true,
+      skipEmptyLines: true,
+      dynamicTyping: true,
+      complete: (r) => {
+        if (type === 'data') {
+          const data = r.data as CellTypeData;
+          const results = this.cellTypeDataService.getCellTypeData(data);
+          this.cellTypes = results.map((result) => {
             return {
               value: result.cellType,
               viewValue: result.cellType
@@ -144,14 +146,13 @@ export class CreateVisualizationPageComponent {
             };
           });
           this.setDefaultCellType();
-          this.uploadedData = result;
-        });
-      } else {
-        this.cellTypeDataService.getColorMap().then((result) => {
-          this.colorMap = result;
-        });
-      }
-    };
+          this.uploadedData = results;
+        } else {
+          const data = r.data as ColorMapData;
+          this.colorMap = this.cellTypeDataService.getColorMap(data);
+        }
+      },
+    });
 
     if (type === 'data') {
       this.dataUploaded = true;
@@ -160,7 +161,6 @@ export class CreateVisualizationPageComponent {
       this.colorMapUploaded = true;
       this.uploadedColorMapFile = file.name;
     }
-    fileReader.readAsText(file);
   }
 
   removeFile(type: CsvType) {

apps/cde-ui/src/app/services/cell-type-data-service.ts

@@ -1,9 +1,60 @@
 import { Injectable } from '@angular/core';
-import { CellTypeTableData, ColorMap } from '../models/create-visualization-page-types';
+import { z } from 'zod';
 
-@Injectable()
-export abstract class CellTypeDataService {
-  abstract getCellTypeData(): Promise<CellTypeTableData[]>;
+import { ColorMap } from '../models/create-visualization-page-types';
 
-  abstract getColorMap(): Promise<ColorMap>;
+export interface CellTypeTableData {
+  x: number;
+  y: number;
+  cellType: string;
+  z?: number;
+  ontologyId?: string;
+}
+
+const CELL_TYPE_DATA = z
+  .object({
+    x: z.number(),
+    y: z.number(),
+    z: z.number().optional(),
+    Cell_Type: z.string(),
+    Ontology_ID: z.string().optional(),
+  })
+  .array();
+
+export type CellTypeData = z.infer<typeof CELL_TYPE_DATA>;
+
+const COLOR_MAP_DATA = z
+  .object({
+    cell: z.string(),
+    R: z.number(),
+    G: z.number(),
+    B: z.number(),
+  })
+  .array();
+
+export type ColorMapData = z.infer<typeof COLOR_MAP_DATA>;
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CellTypeDataService {
+  getCellTypeData(cellTypeData: CellTypeData): CellTypeTableData[] {
+    return cellTypeData.map((row) => {
+      return {
+        x: row.x,
+        y: row.y,
+        z: row.z,
+        cellType: row.Cell_Type,
+        ontologyId: row.Ontology_ID,
+      };
+    });
+  }
+
+  getColorMap(colorMapData: ColorMapData): ColorMap {
+    const result: ColorMap = {};
+    colorMapData.forEach((row) => {
+      result[row.cell] = [row.R, row.G, row.B];
+    });
+    return result;
+  }
 }