Use signals for file upload service

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

@@ -1,4 +1,4 @@
-import { CellTypeTableData } from '../services/cell-type-data-service';
+import { CellTypeTableData } from '../services/file-upload-service';
 
 export type ColorMap = Record<string, [number, number, number]>;
 
@@ -19,19 +19,4 @@ export interface MetaData {
   organ?: string;
 }
 
-export interface MetadataSelectOption {
-  value: string;
-  viewValue: string;
-}
-
 export type CsvType = 'data' | 'colormap';
-
-export const DEFAULT_COLOR_MAP: ColorMap = { default: [1, 2, 3] };
-
-export const DEFAULT_SETTINGS: VisualizationSettings = {
-  data: [],
-  metadata: {
-    sex: 'female',
-  },
-  colorMap: DEFAULT_COLOR_MAP,
-};

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

@@ -52,7 +52,7 @@ <h4 class="column-info-header">File loaded:</h4>
       <div class="right-side">
         <div class="column-content">
           <h3 class="subtitle">Cell Type Table Template</h3>
-          <button mat-fab extended class="use-template button">
+          <button mat-fab extended class="cta-button">
             Use Template
             <mat-icon class="material-symbols-rounded">arrow_right_alt</mat-icon>
           </button>
@@ -70,8 +70,11 @@ <h2 mat-card-title class="step-title">
     </mat-card-header>
     <mat-card-actions>
       <mat-form-field class="anchor-select">
-        <mat-select formControlName="anchorCellType">
-          @for (cell of cellTypes; track cell) {
+        <mat-select
+          formControlName="anchorCellType"
+          [value]="anchorCellTypes[0] ? anchorCellTypes[0].value : undefined"
+        >
+          @for (cell of anchorCellTypes; track cell) {
             <mat-option [value]="cell.value">{{ cell.viewValue }}</mat-option>
           }
         </mat-select>
@@ -199,7 +202,7 @@ <h3 class="subtitle">Action Required: Upload Color Map</h3>
           <div class="right-side">
             <div class="column-content">
               <h3 class="subtitle">Color Map Template</h3>
-              <button mat-fab extended class="use-template button">
+              <button mat-fab extended class="cta-button">
                 Use Template
                 <mat-icon class="material-symbols-rounded">arrow_right_alt</mat-icon>
               </button>
@@ -218,7 +221,10 @@ <h2 mat-card-title class="step-title">
       </h2>
     </mat-card-header>
     <mat-card-actions>
-      <button type="submit" mat-button (click)="onSubmit()">Visualize</button>
+      <button type="submit" mat-fab extended class="cta-button visualize-button" (click)="onSubmit()">
+        Visualize
+        <mat-icon class="material-symbols-rounded">arrow_right_alt</mat-icon>
+      </button>
     </mat-card-actions>
   </mat-card>
 </form>

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

@@ -94,6 +94,7 @@
       mat-card-actions {
         padding: 0;
         align-items: flex-start;
+        min-height: 40px;
       }
     }
 
@@ -229,17 +230,25 @@
       padding: 0 24px;
     }
 
-    .use-template {
+    .cta-button {
       display: flex;
       flex-direction: row-reverse;
-      padding: 0;
+      padding-left: 0;
       background: transparent;
       color: #b20a2f;
 
       mat-icon {
-        margin-right: calc(12px - 20px);
         margin-left: 12px;
       }
     }
+
+    .visualize {
+      .cta-button {
+        height: 40px;
+        padding: 8px 4px 8px 24px;
+        background: #e00d3a;
+        color: white;
+      }
+    }
   }
 }

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

@@ -9,23 +9,17 @@ 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 {
-  ColorMap,
-  CsvType,
-  DEFAULT_COLOR_MAP,
-  DEFAULT_SETTINGS,
-  MetaData,
-  MetadataSelectOption,
-  VisualizationSettings,
-} from '../../models/create-visualization-page-types';
-import {
-  CellTypeData,
-  CellTypeDataService,
-  CellTypeTableData,
-  ColorMapData,
-} from '../../services/cell-type-data-service';
+
+import { ColorMap, CsvType, MetaData, VisualizationSettings } from '../../models/create-visualization-page-types';
+import { FileUploadService, MetadataSelectOption } from '../../services/file-upload-service';
+
+const DEFAULT_SETTINGS: VisualizationSettings = {
+  data: [],
+  metadata: {
+    sex: 'female',
+  },
+  colorMap: {},
+};
 
 @Component({
   selector: 'cde-create-visualization-page',
@@ -42,13 +36,13 @@ import {
     ReactiveFormsModule,
     MatIconModule,
   ],
-  providers: [CellTypeDataService],
+  providers: [FileUploadService],
   templateUrl: './create-visualization-page.component.html',
   styleUrl: './create-visualization-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateVisualizationPageComponent {
-  private readonly cellTypeDataService = inject(CellTypeDataService);
+  readonly fileUploadService = inject(FileUploadService);
 
   @Output() readonly visualize = new EventEmitter<VisualizationSettings>();
 
@@ -60,10 +54,6 @@ export class CreateVisualizationPageComponent {
 
   settings: VisualizationSettings = DEFAULT_SETTINGS;
 
-  uploadedData: CellTypeTableData[] = [];
-
-  colorMap: ColorMap = DEFAULT_SETTINGS.colorMap;
-
   visualizationForm = new FormGroup({
     anchorCellType: new FormControl<string>(this.defaultCellType),
     metadata: new FormGroup({
@@ -86,7 +76,13 @@ export class CreateVisualizationPageComponent {
 
   uploadedColorMapFile = '';
 
-  cellTypes: MetadataSelectOption[] = [];
+  get anchorCellTypes(): MetadataSelectOption[] {
+    return this.fileUploadService.anchorTypes();
+  }
+
+  get colorMap(): ColorMap {
+    return this.fileUploadService.colorMap();
+  }
 
   organs: MetadataSelectOption[] = [];
 
@@ -95,86 +91,45 @@ export class CreateVisualizationPageComponent {
     { value: 'female', viewValue: 'Female' },
   ];
 
-  setDefaultCellType(): void {
-    const defaultCellTypeOption = this.cellTypes.find((celltype) => celltype.value === this.defaultCellType);
-    if (defaultCellTypeOption) {
-      this.cellTypes = this.cellTypes.map((option) =>
-        option.value === this.defaultCellType
-          ? { ...option, viewValue: `Default: ${defaultCellTypeOption.viewValue}` }
-          : option,
-      );
-      this.visualizationForm.patchValue({
-        anchorCellType: defaultCellTypeOption.value,
-      });
-    } else {
-      this.visualizationForm.patchValue({
-        anchorCellType: '',
-      });
-    }
-    this.defaultCellType = this.cellTypes[0].value ?? '';
-    this.visualizationForm.value.anchorCellType = this.cellTypes[0].value;
-  }
-
   upload(type: CsvType): void {
     const inputRef = type === 'data' ? this.fileInput : this.colorMapInput;
     const fileInputElement: HTMLElement = inputRef.nativeElement;
     fileInputElement.click();
   }
 
-  handleFile(event: Event, type: CsvType) {
+  async handleFile(event: Event, type: CsvType) {
     const inputTarget = event.target as HTMLInputElement;
     if (!inputTarget.files) {
       return;
     }
 
     const file = inputTarget.files[0];
-    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
-                .split(' ')
-                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                .join(' '),
-            };
-          });
-          this.setDefaultCellType();
-          this.uploadedData = results;
-        } else {
-          const data = r.data as ColorMapData;
-          this.colorMap = this.cellTypeDataService.getColorMap(data);
-        }
-      },
+    await this.fileUploadService.load(file, type, this.defaultCellType).then(() => {
+      if (type === 'data') {
+        this.dataUploaded = true;
+        this.uploadedFile = file.name;
+      } else {
+        this.colorMapUploaded = true;
+        this.uploadedColorMapFile = file.name;
+      }
     });
-
-    if (type === 'data') {
-      this.dataUploaded = true;
-      this.uploadedFile = file.name;
-    } else {
-      this.colorMapUploaded = true;
-      this.uploadedColorMapFile = file.name;
-    }
   }
 
   removeFile(type: CsvType) {
+    this.fileUploadService.remove(type);
+
     if (type === 'data') {
       this.dataUploaded = false;
-      this.visualizationForm.value.anchorCellType = undefined;
-      this.cellTypes = [];
-      this.uploadedData = [];
     } else {
       this.colorMapUploaded = false;
-      this.colorMap = {};
+      this.toggleDefaultColorMap();
     }
   }
 
+  toggleDefaultColorMap(): void {
+    this.fileUploadService.useDefaultColors();
+  }
+
   getInput(event: Event): string | number {
     const target = event.target as HTMLInputElement;
     return target.value;
@@ -183,17 +138,13 @@ export class CreateVisualizationPageComponent {
   onSubmit() {
     if (this.dataUploaded) {
       this.settings = produce(this.settings, (draft) => {
-        draft.data = this.uploadedData;
+        draft.data = this.fileUploadService.data();
         draft.metadata = this.visualizationForm.value.metadata as MetaData;
         draft.anchorCellType = this.visualizationForm.value.anchorCellType || undefined;
-        draft.colorMap = this.colorMap;
+        draft.colorMap = this.fileUploadService.colorMap();
       });
       console.log(this.settings);
       this.visualize.emit(this.settings);
     }
   }
-
-  toggleDefaultColorMap(): void {
-    this.colorMap = DEFAULT_COLOR_MAP;
-  }
 }