Cde create visualization page

apps/cde-ui/src/_redirects

@@ -1 +1 @@
-/*  /index.html 200
+/* /index.html 200

apps/cde-ui/src/app/app.component.html

@@ -1,3 +1 @@
-<cde-header></cde-header>
 <router-outlet></router-outlet>
-<cde-footer></cde-footer>

apps/cde-ui/src/app/app.config.ts

@@ -1,5 +1,7 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import { Routes, provideRouter } from '@angular/router';
+import { CreateVisualizationPageComponent } from './pages/create-visualization-page/create-visualization-page.component';
 import { LandingPageComponent } from './pages/landing-page/landing-page.component';
 import { provideIcons } from './services/icon-registry/icon-registry.service';
 import { provideHttpClient } from '@angular/common/http';
@@ -12,6 +14,10 @@ const routes: Routes = [
     path: 'home',
     loadComponent: () => LandingPageComponent,
   },
+  {
+    path: 'create',
+    loadComponent: () => CreateVisualizationPageComponent,
+  },
   {
     path: '**',
     redirectTo: 'home',
@@ -24,6 +30,7 @@ const routes: Routes = [
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
+    provideAnimations(),
     provideHttpClient(),
     provideIcons([
       {

apps/cde-ui/src/app/components/empty-form-control/empty-form-control.directive.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectorRef, Directive, OnInit, inject } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[cdeMarkEmptyFormControl]',
+  standalone: true,
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  host: {
+    '[class.empty]': 'empty',
+  },
+})
+export class MarkEmptyFormControlDirective implements OnInit {
+  empty = true;
+
+  private readonly control = inject(NgControl, { self: true });
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  ngOnInit(): void {
+    this.control.valueChanges?.subscribe((value) => {
+      this.empty = !value;
+      this.cdr.markForCheck();
+    });
+  }
+}

apps/cde-ui/src/app/components/file-upload/file-upload.component.html

@@ -0,0 +1,34 @@
+<div class="column-content">
+  @if (!file && fileTitle(); as title) {
+    <h3 class="subtitle">{{ fileTitle() }}</h3>
+  }
+  @if (file) {
+    <div class="upload-success">
+      <div class="filename">
+        @if (fileTitle(); as title) {
+          <h3 class="subtitle">File Loaded:</h3>
+        } @else {
+          <span class="loaded-label">File loaded:</span>
+        }
+        <span class="column-info-list mat-body-2 file-name">{{ file.name }}</span>
+      </div>
+      <button class="remove-file" mat-flat-button (click)="cancelLoad()" type="button" color="primary">
+        <mat-icon class="material-symbols-rounded">cancel</mat-icon>
+        Remove CSV
+      </button>
+    </div>
+  } @else {
+    <button class="upload" mat-flat-button (click)="fileInput.click()" type="button" color="primary">
+      <mat-icon class="material-symbols-rounded">upload</mat-icon>
+      Upload CSV
+    </button>
+    <input
+      #fileInput
+      (change)="load(fileInput)"
+      type="file"
+      [attr.accept]="accept()"
+      name="fileInput"
+      style="display: none"
+    />
+  }
+</div>

apps/cde-ui/src/app/components/file-upload/file-upload.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+
+  .upload-success {
+    display: flex;
+    justify-content: space-between;
+
+    .filename span {
+      display: block;
+    }
+
+    .file-name {
+      font-weight: 300;
+    }
+
+    .remove-file {
+      align-self: flex-end;
+    }
+  }
+
+  .upload-colormap .loaded-label {
+    font-weight: 500;
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+}

apps/cde-ui/src/app/components/file-upload/file-upload.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FileUploadComponent } from './file-upload.component';
+
+describe('FileUploadComponent', () => {
+  let component: FileUploadComponent;
+  let fixture: ComponentFixture<FileUploadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileUploadComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/cde-ui/src/app/components/file-upload/file-upload.component.ts

@@ -0,0 +1,99 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Injector, Signal, effect, inject, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface FileLoaderOptions {
+  signal: AbortSignal;
+}
+
+export interface FileLoaderResult<T> {
+  progress: Signal<number>;
+  result: Promise<T>;
+}
+
+export type FileLoader<T> = (file: File, options: FileLoaderOptions) => FileLoaderResult<T>;
+
+type CleanupFn = () => void;
+
+@Component({
+  selector: 'cde-file-upload',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatButtonModule],
+  templateUrl: './file-upload.component.html',
+  styleUrl: './file-upload.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileUploadComponent<T> {
+  readonly fileTitle = input<string>();
+  readonly accept = input.required<string>();
+  readonly loader = input.required<FileLoader<T>>();
+
+  readonly progress = output<number>();
+  readonly loadStarted = output<File>();
+  readonly loadCancelled = output<void>();
+  readonly loadErrored = output<unknown>();
+  readonly loadCompleted = output<T>();
+
+  private readonly injector = inject(Injector);
+
+  file?: File;
+  private cleanup: CleanupFn[] = [];
+
+  load(el: HTMLInputElement): void {
+    if (el.files === null) {
+      return;
+    }
+
+    const { loader, injector, progress, loadStarted } = this;
+    const file = (this.file = el.files[0]);
+    const cleanup: CleanupFn[] = (this.cleanup = []);
+    const abortController = new AbortController();
+    const options: FileLoaderOptions = {
+      signal: abortController.signal,
+    };
+    const result = loader()(file, options);
+    let done = false;
+
+    el.files = null;
+    loadStarted.emit(file);
+    const progressRef = effect(() => progress.emit(result.progress()), { injector, manualCleanup: true });
+    this.handleResult(result.result, cleanup, () => done);
+
+    cleanup.push(
+      () => (done = true),
+      () => progressRef.destroy(),
+      () => abortController.abort(),
+    );
+  }
+
+  cancelLoad(): void {
+    this.runCleanup(this.cleanup);
+    this.file = undefined;
+    this.loadCancelled.emit();
+  }
+
+  private runCleanup(fns: CleanupFn[]): void {
+    for (const fn of fns) {
+      fn();
+    }
+  }
+
+  private async handleResult(result: Promise<T>, cleanup: CleanupFn[], isDone: () => boolean): Promise<void> {
+    const { progress, loadErrored, loadCompleted } = this;
+    try {
+      const data = await result;
+      if (!isDone()) {
+        progress.emit(1);
+        loadCompleted.emit(data);
+      }
+    } catch (reason) {
+      if (!isDone()) {
+        this.file = undefined;
+        loadErrored.emit(reason);
+      }
+    } finally {
+      this.runCleanup(cleanup);
+    }
+  }
+}

apps/cde-ui/src/app/components/footer/footer.component.scss

@@ -5,7 +5,7 @@
 
   .footer-wrapper {
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: minmax(30.8125rem, auto) 2fr;
   }
 
   .footer-left {
@@ -35,8 +35,9 @@
 
     .social-funded {
       display: flex;
-      margin: 8.5rem 24.375rem 0 6.5rem;
-      gap: 13.875rem;
+      flex-wrap: wrap;
+      margin: 8.5rem 6.5rem 0 6.5rem;
+      column-gap: 13.875rem;
 
       .social-media {
         display: flex;
@@ -108,7 +109,7 @@
     }
 
     .disclaimer {
-      margin: 5rem 6.5rem 8.5rem;
+      margin: 5rem 6.5rem 8.5rem 6.5rem;
       color: hsla(240, 11%, 33%, 1);
       span {
         display: block;

apps/cde-ui/src/app/components/header/header.component.scss

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  margin: 3rem 5rem;
+  padding: 3rem 5rem;
 
   a {
     text-decoration: none;

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

@@ -0,0 +1,28 @@
+import { CellTypeTableData } from '../services/file-upload-service';
+
+export interface ColorMapItem {
+  cell_id: number;
+  cell_type: string;
+  cell_color: [number, number, number];
+}
+
+export type ColorMap = ColorMapItem[];
+
+export interface VisualizationSettings {
+  data: CellTypeTableData[];
+  anchorCellType?: string;
+  metadata: MetaData;
+  colorMap?: ColorMap;
+}
+
+export interface MetaData {
+  title?: string;
+  sex: string;
+  thickness?: number;
+  technology?: string;
+  age?: number;
+  pixelSize?: number;
+  organ?: string;
+}
+
+export type CsvType = 'data' | 'colormap';