Merge pull request #83 from daisybio/more_spongeffects_plots

added table with prediction results
daisybio · Jan 29, 2025 · 084288e · 084288e
2 parents c0f16ce + 70a45f4
commit 084288e
Show file tree

Hide file tree

Showing 13 changed files with 231 additions and 144 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar>
   <a mat-button routerLink="">SPONGE</a>
-  <mat-button-toggle-group [(ngModel)]="version">
+  <mat-button-toggle-group [(ngModel)]="version"  [disabled]="disableVersionToggle">
     <mat-button-toggle [value]="1">v1</mat-button-toggle>
     <mat-button-toggle [value]="2">v2</mat-button-toggle>
   </mat-button-toggle-group>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import {Component, computed, inject} from '@angular/core';
 import {MatAnchor} from "@angular/material/button";
 import {MatToolbar} from "@angular/material/toolbar";
-import {RouterLink, RouterOutlet} from "@angular/router";
+import {RouterLink, RouterOutlet, Router, ActivatedRoute} from "@angular/router";
 import {MatButtonToggleModule} from "@angular/material/button-toggle";
 import {FormsModule} from "@angular/forms";
 import {VersionsService} from "./services/versions.service";
@@ -10,12 +10,24 @@ import {VersionsService} from "./services/versions.service";
   selector: 'app-root',
   imports: [MatToolbar, RouterLink, RouterOutlet, MatAnchor, MatButtonToggleModule, FormsModule],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   versionsService = inject(VersionsService);
   title = 'SPONGE-web-frontend';
   version = this.versionsService.version$;
+  disableVersionToggle = true;
+
+  constructor(private router: Router, private route: ActivatedRoute) {
+    this.router.events.subscribe(() => {
+      this.checkRoute();
+    });
+  }
+
+  checkRoute() {
+    const currentRoute = this.router.url;
+    this.disableVersionToggle = currentRoute.includes('spongeffects');
+  }
 
   subpages$ = computed(() => {
     if (this.version() < 2) {

diff --git a/src/app/constants.ts b/src/app/constants.ts
@@ -1,6 +1,8 @@
 export const SUBTYPE_DEFAULT = 'Unspecific';
 
 export const API_BASE = 'https://exbio.wzw.tum.de/sponge-api';
+// export const API_BASE = 'http://127.0.0.1:5555/sponge-api';
+
 
 export const AS_DESCRIPTIONS: { [key: string]: string } = {
   SE: 'Skipping Exon',
@@ -15,6 +17,8 @@ export const AS_DESCRIPTIONS: { [key: string]: string } = {
 export const SPONGE_EXAMPLE_URL =
   'https://exbio.wzw.tum.de/sponge-files/GSE123845_exp_tpm_matrix_processed.csv';
 
+export const EXAMPLE_PREDICTION_URL =
+  'https://exbio.wzw.tum.de/sponge-files/example_prediction.json';
 export const IGV_REFGENOME = {
   id: 'hg38',
   name: 'Human (GRCh38/hg38)',

diff --git a/...app/routes/spongeffects/predict/form/example-file-modal/example-file-modal.component.html b/...app/routes/spongeffects/predict/form/example-file-modal/example-file-modal.component.html
@@ -1,21 +1,27 @@
-<div>
+<div style="margin: 10px;">
     @if (dataSourceResource.isLoading()) {
-        <mat-spinner mode="indeterminate"></mat-spinner>
+    <div style="width: 100%; height: 260px; display: flex; justify-content: center; align-items: center;">
+            <mat-spinner mode="indeterminate"></mat-spinner>
+        </div>
     } @else {
         @if (!dataSourceResource.value()) {
             <p>No data available</p>
         }
     }
-    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-        <ng-container *ngFor="let key of columns" [matColumnDef]="key">
-            <th mat-header-cell *matHeaderCellDef> {{ key }} </th>
-            <td mat-cell *matCellDef="let element"> {{ element[key] }} </td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="columns"></tr>
-        <tr mat-row *matRowDef="let row; columns: columns;"></tr>
-    </table>
-    <mat-paginator [pageSizeOptions]="[5, 10, 20]"
-        showFirstLastButtons
-        aria-label="Select page">
-    </mat-paginator>
+    <div class="table-container" style="overflow: auto; max-height: 320px;">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+            <ng-container *ngFor="let key of columns; let i = index" [matColumnDef]="key" [sticky]="i === 0">
+                <th mat-header-cell *matHeaderCellDef> {{ key }} </th>
+                <td mat-cell *matCellDef="let element"> {{ element[key] }} </td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+            <tr mat-row *matRowDef="let row; columns: columns;"></tr>
+        </table>
+    </div>
+    <div style="align-self: bottom; padding-left: 8px; padding-right: 8px;">
+        <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+            showFirstLastButtons
+            aria-label="Select page">
+        </mat-paginator>
+    </div>
 </div>
diff --git a/src/app/routes/spongeffects/predict/form/example-file-modal/example-file-modal.component.ts b/src/app/routes/spongeffects/predict/form/example-file-modal/example-file-modal.component.ts
@@ -3,8 +3,6 @@ import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
 import {MatTableDataSource, MatTableModule} from '@angular/material/table';
 import Papa from 'papaparse';
-import { config } from 'rxjs';
-import { ExampleExpression } from '../../../../../interfaces';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
@@ -57,9 +55,7 @@ export class ExampleFileModalComponent implements OnInit {
 
   ngOnInit() {
     this.content.then((res) => {
-      // this.dataSource = signal(new MatTableDataSource(res.data));
       this.columns = res.meta.fields!;
-      // this.dataSource.value().paginator = this.paginator;
       this.isLoading = false;
     });
   }

diff --git a/src/app/routes/spongeffects/predict/form/predict-form.component.html b/src/app/routes/spongeffects/predict/form/predict-form.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="formGroup">
+<form [formGroup]="formGroup" style="margin: 5px">
   <mat-accordion>
     <mat-expansion-panel [expanded]="true">
       <mat-expansion-panel-header>
@@ -15,7 +15,7 @@
       </div>
 
       @if (!useExampleExpression$()) {
-        <mat-form-field appearance="outline" class="full-width" style="margin: 10px">
+        <mat-form-field appearance="outline" class="full-width">
           <mat-label>Select or drop a file</mat-label>
           <ngx-mat-dropzone>
             <input type="file" fileInput mode="replace" [formControl]="fileCtrl" accept="text/csv"/>
@@ -35,22 +35,24 @@
       <mat-expansion-panel-header>
         <mat-panel-title>Filtering thresholds</mat-panel-title>
       </mat-expansion-panel-header>
-      <mat-form-field appearance="outline" class="full-width">
+      <mat-form-field appearance="outline" class="full-width" >
         <mat-label>mSCor</mat-label>
-        <input formControlName="mscor" matInput type="number">
-        <mat-error>Please provide a number between 0 and 10</mat-error>
+        <input formControlName="mscor" matInput type="number" min="0" max="1" step="0.10">
+        <mat-error *ngIf="formGroup.get('mscor')?.hasError('min')">Please provide a number > {{ formGroup.get('mscor')?.errors?.['min']?.min }}</mat-error>
+        <mat-error *ngIf="formGroup.get('mscor')?.hasError('max')">Please provide a number < {{ formGroup.get('mscor')?.errors?.['max']?.max }}</mat-error>
       </mat-form-field>
 
       <mat-form-field appearance="outline" class="full-width">
         <mat-label>False discovery rate (FDR)</mat-label>
-        <input formControlName="fdr" matInput type="number">
-        <mat-error>Please provide a number between 0 and 0.5</mat-error>
+        <input formControlName="fdr" matInput type="number" min="0" max="1" step="0.10">
+        <mat-error> *ngIf="formGroup.get('fdr')?.hasError('min')">Please provide a number > {{ formGroup.get('fdr')?.errors?.['min']?.min }}</mat-error>
+        <mat-error> *ngIf="formGroup.get('fdr')?.hasError('max')">Please provide a number < {{ formGroup.get('fdr')?.errors?.['max']?.max }}</mat-error>
       </mat-form-field>
 
-      <mat-form-field appearance="outline" class="full-width">
+      <mat-form-field appearance="outline" class="full-width" min="0" step="1">
         <mat-label>Minimal expression value</mat-label>
         <input formControlName="minExpr" matInput type="number">
-        <mat-error>Please provide a number between 0 and 1.000</mat-error>
+        <mat-error *ngIf="formGroup.get('minExpr')?.hasError('min')">Please provide a number > {{ formGroup.get('minExpr')?.errors?.['min']?.min }}</mat-error>
       </mat-form-field>
     </mat-expansion-panel>
     <mat-expansion-panel>
@@ -66,21 +68,21 @@
 
       <mat-form-field appearance="outline" class="full-width">
         <mat-label>Minimum module size</mat-label>
-        <input formControlName="minSize" matInput type="number">
-        <mat-error>Please provide a number between 0 and 5.000</mat-error>
+        <input formControlName="minSize" matInput type="number" min="0" step="1">
+        <mat-error *ngIf="formGroup.get('minSize')?.hasError('min')">Please provide a number > {{ formGroup.get('minSize')?.errors?.['min']?.min }}</mat-error>
       </mat-form-field>
 
       <mat-form-field appearance="outline" class="full-width">
         <mat-label>Maximum module size</mat-label>
-        <input formControlName="minSize" matInput type="number">
-        <mat-error>Please provide a number between 0 and 5.000</mat-error>
+        <input formControlName="maxSize" matInput type="number" min="0" step="1">
+        <mat-error *ngIf="formGroup.get('maxSize')?.hasError('min')">Please provide a number > {{ formGroup.get('maxSize')?.errors?.['min']?.min }}</mat-error>
       </mat-form-field>
 
-      <mat-checkbox class="check-box" color="primary">
+      <mat-checkbox class="check-box" color="primary" formControlName="logScaling">
         Apply log2 scaling factor to uploaded expression
       </mat-checkbox>
 
-      <mat-checkbox class="check-box" color="primary">
+      <mat-checkbox class="check-box" color="primary" formControlName="predictSubtypes">
         Predict on subtype level (can lead to longer run times)
       </mat-checkbox>
     </mat-expansion-panel>

diff --git a/src/app/routes/spongeffects/predict/form/predict-form.component.scss b/src/app/routes/spongeffects/predict/form/predict-form.component.scss
@@ -1,6 +1,6 @@
 .file-name {
     display: inline-block;
-    max-width: 235px; /* Adjust the width as needed */
+    max-width: 225px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/app/routes/spongeffects/predict/form/predict-form.component.ts b/src/app/routes/spongeffects/predict/form/predict-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, computed, inject } from '@angular/core';
+import { Component, computed, effect, inject, signal } from '@angular/core';
 import {
   FormControl,
   FormGroup,
@@ -57,7 +57,7 @@ import { VersionsService } from '../../../../services/versions.service';
 export class PredictFormComponent {
   methods = ['gsva', 'ssgsea', 'OE'];
   formGroup = new FormGroup({
-    useExampleExpression: new FormControl<boolean>(false),
+    useExampleExpression: new FormControl<boolean>(false, {nonNullable: true}),
     mscor: new FormControl<number>(0.1, {
       nonNullable: true,
       validators: [Validators.min(0), Validators.max(1)],
@@ -93,6 +93,15 @@ export class PredictFormComponent {
     () => this.query$()?.useExampleExpression || false,
   );
 
+  subtype_effect = effect(() => {
+    console.log('subtype effect form');
+    if (this.query$()?.predictSubtypes) {
+      this.predictService._subtypes$.set(true)
+    } else {
+      this.predictService._subtypes$.set(false)
+    }
+  });
+
   versionService = inject(VersionsService);
 
   exampleDataFile = (async () => {
@@ -121,7 +130,7 @@ export class PredictFormComponent {
   async showExpressionFile(file: File) {
     this.dialog.open(ExampleFileModalComponent, {
       data: file,
-      height: '400px',
+      height: '410px',
       width: '600px',
     });
   }

diff --git a/src/app/routes/spongeffects/predict/predict.component.html b/src/app/routes/spongeffects/predict/predict.component.html
@@ -1,3 +1,5 @@
 <div class="predict-results">
   <app-prediction-results>[refreshSignal$]="refreshSignal()"</app-prediction-results>
+  <app-prediction-table>[refreshSignal$]="refreshSignal()"</app-prediction-table>
+
 </div>
diff --git a/src/app/routes/spongeffects/predict/predict.component.ts b/src/app/routes/spongeffects/predict/predict.component.ts
@@ -2,13 +2,14 @@ import { Component, signal } from '@angular/core';
 import { ExampleExpression } from '../../../interfaces';
 import { fromEvent } from 'rxjs';
 import { PredictionResultsComponent } from './prediction-results/prediction-results.component';
+import { PredictionTableComponent } from "./prediction-results/prediction-table/prediction-table.component";
 
 declare var Plotly: any;
 
 
 @Component({
   selector: 'app-predict',
-  imports: [PredictionResultsComponent],
+  imports: [PredictionResultsComponent, PredictionTableComponent],
   templateUrl: './predict.component.html',
   styleUrl: './predict.component.scss',
 })

diff --git a/src/app/routes/spongeffects/predict/prediction-results/prediction-results.component.html b/src/app/routes/spongeffects/predict/prediction-results/prediction-results.component.html
@@ -5,8 +5,20 @@
 } @else {
   @if (!plotTypePredictPieResource.value()) {
     <p>Run a prediction on your custom expression data or on our example to see the results here. Start the prediction on the left.</p>
+  }@else {
+    <div #typePredictPiePlot class="type-prediction" style="width: 100%; height: auto"></div>
   }
 }
+@if (predictService.example_used()) {
+  <app-info type="panel">
+      <p>This plot shows the cancer type predictions of SpongEffects for an 
+        <a href="https://exbio.wzw.tum.de/sponge-files/GSE123845_exp_tpm_matrix_processed.csv" download='GSE123845_exp_tpm_matrix_processed.csv'>example dataset</a>
+        (<a href="https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE123845">GSE123845</a>).
+        You can upload your own expression data on the left.
+      </p>
+  </app-info>
+}
+<!-- @if (!predictionResource.isLoading()) { -->
   <div class="predict-results-plots">
     <div class="type-prediction-div">
       <div #typePredictPiePlot class="type-prediction" style="width: 100%; height: auto"></div>
@@ -31,5 +43,4 @@
     <!-- <div class="type-prediction-text">
       Predicted type over all samples: {{ predictedType$() }}
     </div> -->
-
-
+<!-- } -->