Merge pull request #126 from daisybio/125-visualize-sample-count-for-diseases-and-subptypes-in-browse-form

Add disease/subset sample count

Author: nictru

src/app/components/disease-selector/disease-selector.component.html

@@ -1,9 +1,10 @@
 <mat-form-field appearance="outline" class="full-width" style="margin-top: 10px">
   <mat-label>Disease</mat-label>
   @let diseaseNames = diseaseNames$();
+  @let diseaseSampleCounts = diseaseSampleCounts$();
   <mat-select [(value)]="activeDisease$" [disabled]="diseaseNames.length < 2">
     @for (disease of diseaseNames; track disease) {
-      <mat-option [value]="disease">{{ capitalize(disease) }}</mat-option>
+    <mat-option [value]="disease">{{ capitalize(disease) }} ({{ diseaseSampleCounts.get(disease) }})</mat-option>
     }
   </mat-select>
 </mat-form-field>
@@ -12,7 +13,9 @@
   @let possibleSubtypes = possibleSubtypes$();
   <mat-select [(value)]="activeSubtype" [disabled]="possibleSubtypes.length < 2">
     @for (dataset of possibleSubtypes; track dataset.dataset_ID) {
-      <mat-option [value]="dataset">{{ capitalize(dataset.disease_subtype || SUBTYPE_DEFAULT) }}</mat-option>
+    <mat-option [value]="dataset">{{ capitalize(dataset.disease_subtype || SUBTYPE_DEFAULT) }} ({{ dataset.sample_count
+      }})</mat-option>
     }
   </mat-select>
 </mat-form-field>
+<div class="note">Numbers in parentheses indicate the number of samples available for each disease/subtype.</div>

src/app/components/disease-selector/disease-selector.component.scss

@@ -0,0 +1,11 @@
+.note {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-top: -8px;
+  margin-bottom: 10px;
+  font-style: italic;
+}
+
+.full-width {
+  width: 100%;
+}

src/app/components/disease-selector/disease-selector.component.ts

@@ -51,6 +51,20 @@ export class DiseaseSelectorComponent implements OnDestroy {
   readonly possibleSubtypes$ = computed(
     () => this._diseaseSubtypeMap$().get(this.activeDisease$()) ?? []
   );
+
+  // Calculate sample counts for each disease by summing up all subtypes
+  readonly diseaseSampleCounts$ = computed(() => {
+    const counts = new Map<string, number>();
+    this._diseaseSubtypeMap$().forEach((subtypes, diseaseName) => {
+      const totalCount = subtypes.reduce(
+        (sum, dataset) => sum + dataset.sample_count,
+        0
+      );
+      counts.set(diseaseName, totalCount);
+    });
+    return counts;
+  });
+
   private readonly _updateOutput = effect(() =>
     this.selected.emit(this.activeSubtype())
   );

src/app/constants.ts

@@ -3,7 +3,6 @@ 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',
   A5: "Alternative 5' Splice Site",

src/app/interfaces.ts

@@ -6,6 +6,7 @@ export interface Dataset {
   disease_type: string;
   download_url: string;
   sponge_db_version: number;
+  sample_count: number;
 }
 
 export interface SpongeRun {
@@ -327,7 +328,7 @@ export interface SpongEffectsGeneModuleMembers {
     ensg_number: string;
     gene_symbol: string;
   };
-  spongEffects_gene_module_ID: number
+  spongEffects_gene_module_ID: number;
   spongEffects_gene_module_members_ID: number;
 }
 
@@ -345,7 +346,7 @@ export interface SpongEffectsTranscriptModuleMembers {
   transcript: {
     enst_number: string;
   };
-  spongEffects_gene_module_ID: number
+  spongEffects_gene_module_ID: number;
   spongEffects_gene_module_members_ID: number;
 }
 
@@ -364,7 +365,6 @@ export interface ModuleMember {
   spongEffects_run_ID: number;
 }
 
-
 export interface PredictCancerType {
   meta: {
     runtime: number;