Merge pull request #135 from daisybio/topceRNA_fix

Topce rna fix

Author: strasserle

angular.json

@@ -43,7 +43,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kB",
-                  "maximumError": "2MB"
+                  "maximumError": "3MB"
                 },
                 {
                   "type": "anyComponentStyle",

package-lock.json

@@ -28,7 +28,7 @@
     "@sigma/export-image": "^3.0.0",
     "@sigma/node-square": "^3.0.0",
     "@visa-ge/ng-igv": "^0.0.11",
-    "file-saver": "^2.0.5",
+    "file-saver-es": "^2.0.5",
     "graphology": "^0.25.4",
     "graphology-layout-force": "^0.2.4",
     "katex": "^0.16.21",
@@ -46,6 +46,7 @@
     "@angular/cli": "^19.2.7",
     "@angular/compiler-cli": "^19.2.6",
     "@types/file-saver": "^2.0.7",
+    "@types/file-saver-es": "^2.0.3",
     "@types/jasmine": "~5.1.0",
     "@types/katex": "^0.16.7",
     "@types/lodash": "^4.17.16",

package.json

@@ -15,7 +15,7 @@
   </mat-tab>
   }
   <mat-tab label="Expression heatmap">
-    <app-heatmap [browseService]="browseService()" [refreshSignal]="refresh$()"></app-heatmap>
+    <app-gene-expression-heatmap [browseService]="browseService()" [refreshSignal]="refresh$()"></app-gene-expression-heatmap>
   </mat-tab>
   <mat-tab [label]="(capitalize(level() || '') || 'Gene') + 's'">
     <app-nodes [browseService]="browseService()"></app-nodes>

src/app/components/browse-views/browse-views.component.html

@@ -5,7 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { InteractionsComponent } from '../../components/browse-views/interactions/interactions.component';
 import { NetworkComponent } from '../../components/browse-views/network/network.component';
-import { HeatmapComponent } from '../../components/browse-views/heatmap/heatmap.component';
+import { GeneExpressionHeatmapComponent } from '../../components/browse-views/heatmap/heatmap.component';
 import { BrowseService } from '../../services/browse.service';
 import { SurvivalAnalysisComponent } from '../../components/browse-views/survival-analysis/survival-analysis.component';
 import { ActiveEntitiesComponent } from '../../components/browse-views/active-entities/active-entities.component';
@@ -27,7 +27,7 @@ import { capitalize } from 'lodash';
     MatExpansionModule,
     InteractionsComponent,
     NetworkComponent,
-    HeatmapComponent,
+    GeneExpressionHeatmapComponent,
     SurvivalAnalysisComponent,
     ActiveEntitiesComponent,
     MatProgressSpinnerModule,

src/app/components/browse-views/browse-views.component.ts

@@ -58,11 +58,15 @@ export class GseaBarplotComponent implements OnDestroy {
       yaxis: {
         title: 'Gene Set',
         automargin: true,
+        tickmode: 'linear',
+        dtick: 1, // This ensures that each term is displayed in any zoom level 
       },
       height: Math.max(400, terms.length * 20), // Adjust height based on number of terms
       margin: {
         l: 200, // Increase left margin for term labels
       },
+      paper_bgcolor: 'rgba(0,0,0,0)',
+      plot_bgcolor: 'rgba(0,0,0,0)',
     };
 
     Plotly.newPlot(plotElement.nativeElement, data, layout);

src/app/components/browse-views/gsea/gsea-barplot/gsea-barplot.component.ts

@@ -91,7 +91,8 @@ export class GseaVolcanoplotComponent implements OnDestroy {
         },
       ],
       showlegend: false,
-    };
+      paper_bgcolor: 'rgba(0,0,0,0)',
+      plot_bgcolor: 'rgba(0,0,0,0)',    };
 
     Plotly.newPlot(plotElement.nativeElement, data, layout);
   });

src/app/components/browse-views/gsea/gsea-volcanoplot/gsea-volcanoplot.component.ts

@@ -1,6 +1,12 @@
-@if (plotData.isLoading()) {
+<!-- @if (plotData.isLoading()) {
   <div class="card-container">
     <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
   </div>
 }
-<div #heatmap style="height: 800px; width: 100%"></div>
+<div #heatmap style="height: 800px; width: 100%"></div> -->
+
+<app-heatmap-plot
+  [dataSource]="heatmapDataSource"
+  [params]="heatmapParams()"
+  [refreshSignal]="refreshSignal">
+</app-heatmap-plot>

src/app/components/browse-views/heatmap/heatmap.component.html

@@ -12,117 +12,89 @@ import {
 import { BrowseService } from '../../../services/browse.service';
 import { BackendService } from '../../../services/backend.service';
 import { VersionsService } from '../../../services/versions.service';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { capitalize } from 'lodash';
+import { ReusableHeatmapComponent, HeatmapDataSource } from '../../../components/heatmap-plot/heatmap-plot.component';
+import { CommonModule } from '@angular/common';
 
 declare const Plotly: any;
 
+
 @Component({
-  selector: 'app-heatmap',
-  imports: [MatProgressSpinner],
+  selector: 'app-gene-expression-heatmap',
   templateUrl: './heatmap.component.html',
   styleUrl: './heatmap.component.scss',
+  imports: [CommonModule, ReusableHeatmapComponent]
 })
-export class HeatmapComponent implements OnDestroy {
+export class GeneExpressionHeatmapComponent {
   browseService = input.required<BrowseService>();
   backend = inject(BackendService);
   versions = inject(VersionsService);
 
-  level$ = computed(() => this.browseService().level$());
+  // Inputs
   refreshSignal = input.required<any>();
-  heatmap = viewChild.required<ElementRef<HTMLDivElement>>('heatmap');
 
-  plotData = resource({
-    request: computed(() => {
-      return {
-        nodes: this.browseService().nodes$(),
-        disease: this.browseService().disease$(),
-        level: this.browseService().level$(),
-        version: this.versions.versionReadOnly()(),
-      };
-    }),
-    loader: async (param) => {
-      const nodes = param.request.nodes;
-      const disease = param.request.disease;
-      const version = param.request.version;
-      const level = param.request.level;
-      if (nodes === undefined || disease === undefined || level === undefined)
-        return;
+  // State
+  level$ = computed(() => this.browseService().level$());
+  
+  // Parameters derived from services
+  heatmapParams = computed(() => ({
+    nodes: this.browseService().nodes$(),
+    disease: this.browseService().disease$(),
+    level: this.browseService().level$(),
+    version: this.versions.versionReadOnly()(),
+  }));
 
-      const identifiers = nodes.map((node) => BrowseService.getNodeID(node));
+  // Create data source for the heatmap
+  heatmapDataSource: HeatmapDataSource = {
+    getData: async (params) => {
+      const { nodes, disease, version, level } = params;
+      
+      if (!nodes || !disease || !level) {
+        return [];
+      }
 
-      const expression = await this.backend.getExpression(
-        version,
-        identifiers,
-        disease,
-        level
-      );
+      const identifiers = nodes.map((node: any) => BrowseService.getNodeID(node));
 
-      const expressionMap = new Map<string, Map<string, number>>();
-      const samples = new Set<string>();
-      for (const expr of expression) {
-        const identifier =
-          'gene' in expr
-            ? expr.gene.gene_symbol || expr.gene.ensg_number
-            : expr.transcript.enst_number;
-        if (!expressionMap.has(identifier)) {
-          expressionMap.set(identifier, new Map<string, number>());
-        }
-        samples.add(expr.sample_ID);
-        expressionMap.get(identifier)!.set(expr.sample_ID, expr.expr_value);
+      // Fetch expression data with pagination
+      const expressionData = await this.backend.fetchExpressionData(version, identifiers, disease.dataset_ID, disease.disease_name, level);
+      
+      // Handle disease subtypes
+      if (disease.disease_name === 'pancancer') {
+        await this.handlePancancerSubtypes(expressionData);
+      } else {
+        await ReusableHeatmapComponent.handleDiseaseSubtypes(expressionData, disease.disease_name, this.backend);
       }
 
-      const geneSymbols = Array.from(expressionMap.keys());
-      const sampleIDs = Array.from(samples);
-      const values = geneSymbols.map((gene) =>
-        sampleIDs.map((sample) => expressionMap.get(gene)!.get(sample))
-      );
-
-      return {
-        x: sampleIDs,
-        y: geneSymbols,
-        z: values,
-        type: 'heatmap',
-      };
+      return expressionData;
     },
-  });
-
-  refreshEffect = effect(() => {
-    this.refreshSignal();
-    this.refresh();
-  });
-
-  plotUpdateEffect = effect(() => {
-    const data = this.plotData.value();
-    if (!data) return;
-
-    const heatmap = this.heatmap().nativeElement;
-
-    Plotly.newPlot(heatmap, [data], {
-      title: `${capitalize(this.level$())} Expression Heatmap - ${capitalize(
-        this.browseService().disease$()?.disease_name
-      )}`,
-      xaxis: {
-        title: 'Sample ID',
-        automargin: true,
-      },
-      yaxis: {
-        title: capitalize(this.level$()),
-        automargin: true,
-      },
-    });
-  });
+    
+    getTitle: (params) => {
+      return `${capitalize(params.level)} Expression Heatmap - ${capitalize(params.disease?.disease_name || 'Unknown')}`;
+    },
+    
+    getYAxisTitle: () => {
+      return capitalize(this.level$());
+    },
+    
+    getZAxisTitle: () => {
+      return 'Normalized<br>expression';
+    },
+    
+    getZMid: () => 0,
+    
+    getColorScale: () => 'RdBu'
+  };
 
-  refresh() {
-    const heatmap = this.heatmap().nativeElement;
-    if (heatmap.checkVisibility()) {
-      Plotly.Plots.resize(heatmap);
+  private async handlePancancerSubtypes(expressionData: any[]): Promise<void> {
+    // Fetch the mapping from TSS codes to disease names
+    const mapping = await this.backend.getDiseaseFromSample();
+    
+    // Add the disease name to the expression data
+    for (const e of expressionData) {
+      const sampleId = e.sample_ID;
+      // mapSampleToDisease from ReusableHeatmapComponent
+      const diseaseName = await ReusableHeatmapComponent.mapSampleToDisease(sampleId, mapping);
+      e.disease_subtype = diseaseName;
     }
   }
-
-  ngOnDestroy(): void {
-    Plotly.purge(this.heatmap().nativeElement);
-    this.refreshEffect.destroy();
-    this.plotUpdateEffect.destroy();
-  }
-}
+}

src/app/components/browse-views/heatmap/heatmap.component.ts

@@ -0,0 +1,10 @@
+@if (heatmapResource.isLoading()) {
+  <div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </div>
+} @else {
+  @if (!heatmapResource.value()) {
+    <p>No data available</p>
+  }
+}
+<div #heatmap class="heatmap-container" [style.width]="width()" [style.height]="height()"></div>