Cde create visualization page

apps/cde-ui/project.json

@@ -17,7 +17,10 @@
         "tsConfig": "apps/cde-ui/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": ["apps/cde-ui/src/favicon.ico", "apps/cde-ui/src/assets"],
-        "styles": ["apps/cde-ui/src/styles.scss"],
+        "styles": ["apps/cde-ui/src/styles.scss", "apps/cde-ui/src/assets/fonts/fonts.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": ["node_modules/", "libs/shared/theming/src/lib/styles"]
+        },
         "scripts": []
       },
       "configurations": {
@@ -80,5 +83,6 @@
         "staticFilePath": "dist/apps/cde-ui/browser"
       }
     }
-  }
+  },
+  "implicitDependencies": ["shared-theming"]
 }

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

@@ -1 +1 @@
-<cde-nx-welcome></cde-nx-welcome>
+<cde-create-visualization-page></cde-create-visualization-page>

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

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { CreateVisualizationPageComponent } from './pages/create-visualization-page/create-visualization-page.component';
 
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent],
+  imports: [CreateVisualizationPageComponent],
   selector: 'cde-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

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

@@ -1,5 +1,6 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [],
+  providers: [provideAnimations()],
 };

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

@@ -0,0 +1,120 @@
+<img class="img-bg" src="assets/background.png" />
+
+<div class="content">
+  <span class="title">Create a Cell Distance Visualization</span>
+
+  <mat-card class="creation-step">
+    <mat-card-header>
+      <mat-card-title>Format and Upload Data</mat-card-title>
+    </mat-card-header>
+    <mat-card-content> </mat-card-content>
+    <mat-card-actions>
+      <button mat-button *ngIf="!dataUploaded" (click)="upload()">Upload CSV</button>
+      <button mat-button *ngIf="dataUploaded" (click)="removeCSV()">Upload CSV</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card class="creation-step">
+    <mat-card-header>
+      <mat-card-title>Optional: Select Anchor Cell type</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <mat-form-field>
+        <mat-select [(value)]="cellTypes[0].value" (selectionChange)="updateAnchorCellType($event.value)">
+          @for (cell of cellTypes; track cell) {
+            <mat-option [value]="cell.value">{{ cell.viewValue }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="creation-step metadata">
+    <mat-card-header>
+      <mat-card-title>Add Metadata</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="row-1">
+        <div>
+          <span>Visualization Title</span>
+          <mat-form-field>
+            <input matInput placeholder="Title" value="" />
+          </mat-form-field>
+        </div>
+        <div>
+          <span>Imaging Technology</span>
+          <mat-form-field>
+            <input matInput placeholder="Title" value="" />
+          </mat-form-field>
+        </div>
+        <div>
+          <span>Organ</span>
+          <mat-form-field>
+            <mat-select [(value)]="cellTypes[0].value" (selectionChange)="updateAnchorCellType($event.value)">
+              @for (cell of cellTypes; track cell) {
+                <mat-option [value]="cell.value">{{ cell.viewValue }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div class="row-2">
+        <div>
+          <span>Sex</span>
+          <mat-form-field>
+            <mat-select [(value)]="cellTypes[0].value" (selectionChange)="updateAnchorCellType($event.value)">
+              @for (cell of cellTypes; track cell) {
+                <mat-option [value]="cell.value">{{ cell.viewValue }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div>
+          <span>Age</span>
+          <mat-form-field>
+            <input matInput placeholder="Age" value="" />
+          </mat-form-field>
+        </div>
+        <div></div>
+      </div>
+
+      <div class="row-3">
+        <div>
+          <span>Thickness (um)</span>
+          <mat-form-field>
+            <input matInput placeholder="Thickness" value="" />
+          </mat-form-field>
+        </div>
+        <div>
+          <span>Pixel size (um/pixel)</span>
+          <mat-form-field>
+            <input matInput placeholder="Pixel size" value="" />
+          </mat-form-field>
+        </div>
+        <div></div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="creation-step">
+    <mat-card-header>
+      <mat-card-title>Optional: Configure Color Map</mat-card-title>
+    </mat-card-header>
+    <mat-card-actions>
+      <mat-button-toggle-group aria-label="Font Style">
+        <mat-button-toggle value="default">Use Default Colors</mat-button-toggle>
+        <mat-button-toggle value="custom">Upload Custom Color Map</mat-button-toggle>
+      </mat-button-toggle-group>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card class="creation-step">
+    <mat-card-header>
+      <mat-card-title>Visualize Cell Distance Data</mat-card-title>
+    </mat-card-header>
+    <mat-card-actions>
+      <button mat-button (click)="visualize.emit(settings)">Visualize</button>
+    </mat-card-actions>
+  </mat-card>
+</div>

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

@@ -0,0 +1,72 @@
+:host {
+  --mat-card-title-text-font: 'Metropolis';
+  --mat-card-title-text-size: 42px;
+  --mat-card-title-text-line-height: 52.5px;
+  --mat-form-field-container-text-font: 'Metropolis';
+  --mat-select-trigger-text-font: 'Metropolis';
+  --mat-option-label-text-font: 'Metropolis';
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5rem;
+  height: 100%;
+
+  .img-bg {
+    opacity: 0.45;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+    max-width: 72rem;
+
+    .title {
+      font-size: 72px;
+      font-weight: 500;
+      letter-spacing: -0.05em;
+    }
+
+    mat-card {
+      padding: 56px 64px;
+
+      mat-card-header {
+        padding: 0 0 3rem;
+      }
+
+      mat-card-content {
+        display: flex;
+        padding: 0;
+      }
+
+      mat-card-actions {
+        padding: 0;
+      }
+    }
+
+    .metadata {
+      mat-card-content {
+        flex-direction: column;
+        gap: 3rem;
+
+        .row-1,
+        .row-2,
+        .row-3 {
+          display: flex;
+          justify-content: space-between;
+
+          div {
+            display: flex;
+            flex-direction: column;
+            width: 288px;
+          }
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,105 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+
+export interface VisualizationSettings {
+  data: CellTypeTableData;
+  anchorCellType?: string;
+  metadata: MetaData;
+  colorMap: Color[];
+}
+
+export interface CellTypeTableData {
+  x: number;
+  y: number;
+  cellType: string;
+  z?: number;
+  ontologyId?: string;
+}
+
+export interface MetaData {
+  title?: string;
+  sex?: string;
+  thickness?: number;
+  technology?: string;
+  age?: number;
+  pixelSize?: number;
+  organ?: string;
+}
+
+export interface Color {
+  cellType: number[];
+}
+
+export interface CellTypeOption {
+  value: string;
+  default?: boolean;
+  viewValue: string;
+}
+
+const defaultSettings: VisualizationSettings = {
+  data: {
+    x: 0,
+    y: 0,
+    cellType: '',
+  },
+  metadata: {},
+  colorMap: [],
+};
+
+@Component({
+  selector: 'cde-create-visualization-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonToggleModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    FormsModule,
+  ],
+  templateUrl: './create-visualization-page.component.html',
+  styleUrl: './create-visualization-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateVisualizationPageComponent {
+  settings: VisualizationSettings = defaultSettings;
+
+  dataUploaded = false;
+
+  @Output() readonly visualize = new EventEmitter<VisualizationSettings>();
+
+  selectedValue: string = 'a';
+
+  cellTypes: CellTypeOption[] = [
+    { value: 'a', viewValue: 'Endothelial', default: true },
+    { value: 'b', viewValue: 'B' },
+    { value: 'c', viewValue: 'C' },
+  ];
+
+  upload() {
+    this.dataUploaded = true;
+    //load the data
+  }
+
+  removeCSV() {
+    this.dataUploaded = false;
+    this.settings.data = {
+      x: 0,
+      y: 0,
+      cellType: '',
+    };
+  }
+
+  updateAnchorCellType(value: string) {
+    this.settings = { ...this.settings, anchorCellType: value };
+  }
+}

apps/cde-ui/src/assets/fonts/fonts.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'Metropolis';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./metropolis.regular.otf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: bold;
+  font-weight: 500;
+  src: url('./metropolis.medium.otf') format('truetype');
+}

apps/cde-ui/src/index.html

@@ -6,6 +6,8 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
   <body>
     <cde-root></cde-root>