fix(agora): reset boxplot before updating data (AG-1673) (#3003)

libs/agora/api-client-angular/src/lib/model/proteomicsDistribution.ts

@@ -11,9 +11,16 @@
  */
 
 /**
- * Distributions
+ * ProteomicsDistribution
  */
 export interface ProteomicsDistribution {
+  _id: string;
+  tissue: string;
+  min: number;
+  max: number;
+  median: number;
+  first_quartile: number;
+  third_quartile: number;
   /**
    * Type of proteomics distribution (e.g., LFQ, SRM, TMT)
    */

libs/agora/api-description/build/openapi.yaml

@@ -1179,12 +1179,33 @@ components:
         - third_quartile
     ProteomicsDistribution:
       type: object
-      description: Distributions
+      description: ProteomicsDistribution
       properties:
+        _id:
+          type: string
+        tissue:
+          type: string
+        min:
+          type: number
+        max:
+          type: number
+        median:
+          type: number
+        first_quartile:
+          type: number
+        third_quartile:
+          type: number
         type:
           type: string
           description: Type of proteomics distribution (e.g., LFQ, SRM, TMT)
       required:
+        - _id
+        - tissue
+        - min
+        - max
+        - median
+        - first_quartile
+        - third_quartile
         - type
     OverallScoresDistribution:
       type: object

libs/agora/api-description/src/components/schemas/ProteomicsDistribution.yaml

@@ -1,8 +1,29 @@
 type: object
-description: Distributions
+description: ProteomicsDistribution
 properties:
+  _id:
+    type: string
+  tissue:
+    type: string
+  min:
+    type: number
+  max:
+    type: number
+  median:
+    type: number
+  first_quartile:
+    type: number
+  third_quartile:
+    type: number
   type:
     type: string
     description: Type of proteomics distribution (e.g., LFQ, SRM, TMT)
 required:
+  - _id
+  - tissue
+  - min
+  - max
+  - median
+  - first_quartile
+  - third_quartile
   - type

libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.ts

@@ -45,7 +45,17 @@ export class BoxPlotComponent {
   @Input() yAxisMin: number | undefined;
   @Input() yAxisMax: number | undefined;
 
+  reset() {
+    this.points = [];
+    this.summaries = [];
+    this.xAxisCategoryToTooltipText = {};
+    this.isInitialized = false;
+    this.pointTooltipFormatter = undefined;
+  }
+
   init() {
+    this.reset();
+
     if (!this._data?.length) {
       return;
     }

libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts

@@ -1,12 +1,17 @@
 import { Component, inject, Input } from '@angular/core';
 
-import { DistributionService, Gene } from '@sagebionetworks/agora/api-client-angular';
-import { ChartRange } from '@sagebionetworks/agora/models';
-import { HelperService } from '@sagebionetworks/agora/services';
-import { GeneProteinSelectorComponent } from '../gene-protein-selector/gene-protein-selector.component';
+import {
+  DistributionService,
+  Gene,
+  ProteinDifferentialExpression,
+  ProteomicsDistribution,
+} from '@sagebionetworks/agora/api-client-angular';
 import { BoxPlotComponent } from '@sagebionetworks/agora/charts';
-import { DownloadDomImageComponent } from '../download-dom-image/download-dom-image.component';
+import { boxPlotChartItem, ChartRange } from '@sagebionetworks/agora/models';
+import { HelperService } from '@sagebionetworks/agora/services';
 import { ModalLinkComponent } from '@sagebionetworks/agora/shared';
+import { DownloadDomImageComponent } from '../download-dom-image/download-dom-image.component';
+import { GeneProteinSelectorComponent } from '../gene-protein-selector/gene-protein-selector.component';
 
 @Component({
   selector: 'agora-gene-evidence-proteomics',
@@ -36,26 +41,36 @@ export class GeneEvidenceProteomicsComponent {
   uniProtIds: string[] = [];
   selectedUniProtId = '';
 
-  LFQData: any = undefined;
+  LFQData: boxPlotChartItem[] = [];
   LFQRange: ChartRange | undefined;
 
-  SRMData: any = undefined;
+  SRMData: boxPlotChartItem[] = [];
   SRMRange: ChartRange | undefined;
 
-  TMTData: any = undefined;
+  TMTData: boxPlotChartItem[] = [];
   TMTRange: ChartRange | undefined;
 
   reset() {
     this.uniProtIds = [];
     this.selectedUniProtId = '';
 
-    this.SRMData = undefined;
+    this.resetSRM();
+    this.resetLFQ();
+    this.resetTMT();
+  }
+
+  resetSRM() {
+    this.SRMData = [];
     this.SRMRange = undefined;
+  }
 
-    this.LFQData = undefined;
+  resetLFQ() {
+    this.LFQData = [];
     this.LFQRange = undefined;
+  }
 
-    this.TMTData = undefined;
+  resetTMT() {
+    this.TMTData = [];
     this.TMTRange = undefined;
   }
 
@@ -64,13 +79,13 @@ export class GeneEvidenceProteomicsComponent {
 
     this.uniProtIds = [];
 
-    this._gene?.proteomics_LFQ?.forEach((item: any) => {
+    this._gene?.proteomics_LFQ?.forEach((item: ProteinDifferentialExpression) => {
       if (!this.uniProtIds.includes(item.uniprotid)) {
         this.uniProtIds.push(item.uniprotid);
       }
     });
 
-    this._gene?.proteomics_TMT?.forEach((item: any) => {
+    this._gene?.proteomics_TMT?.forEach((item: ProteinDifferentialExpression) => {
       if (!this.uniProtIds.includes(item.uniprotid)) {
         this.uniProtIds.push(item.uniprotid);
       }
@@ -86,7 +101,12 @@ export class GeneEvidenceProteomicsComponent {
     this.initTMT();
   }
 
-  processDifferentialExpressionData(item: any, data: any, range: ChartRange, proteomicData: any) {
+  processDifferentialExpressionData(
+    item: ProteinDifferentialExpression,
+    data: ProteomicsDistribution,
+    range: ChartRange,
+    proteomicData: boxPlotChartItem[],
+  ) {
     const yAxisMin = item.log2_fc < data.min ? item.log2_fc : data.min;
     const yAxisMax = item.log2_fc > data.max ? item.log2_fc : data.max;
 
@@ -113,13 +133,14 @@ export class GeneEvidenceProteomicsComponent {
   }
 
   initSRM() {
-    this.distributionService.getDistribution().subscribe((data: any) => {
+    this.resetSRM();
+    this.distributionService.getDistribution().subscribe((data) => {
       const distribution = data.proteomics_SRM;
       const differentialExpression = this._gene?.proteomics_SRM || [];
-      const proteomicData: any = [];
+      const proteomicData: boxPlotChartItem[] = [];
 
-      differentialExpression.forEach((item: any) => {
-        const data: any = distribution.find((d: any) => {
+      differentialExpression.forEach((item) => {
+        const data = distribution.find((d) => {
           return d.tissue === item.tissue;
         });
 
@@ -134,16 +155,17 @@ export class GeneEvidenceProteomicsComponent {
   }
 
   initLFQ() {
-    this.distributionService.getDistribution().subscribe((data: any) => {
+    this.resetLFQ();
+    this.distributionService.getDistribution().subscribe((data) => {
       const distribution = data.proteomics_LFQ;
       const differentialExpression =
-        this._gene?.proteomics_LFQ?.filter((item: any) => {
+        this._gene?.proteomics_LFQ?.filter((item) => {
           return item.uniprotid === this.selectedUniProtId;
         }) || [];
-      const proteomicData: any = [];
+      const proteomicData: boxPlotChartItem[] = [];
 
-      differentialExpression.forEach((item: any) => {
-        const data: any = distribution.find((d: any) => {
+      differentialExpression.forEach((item) => {
+        const data = distribution.find((d) => {
           return d.tissue === item.tissue;
         });
 
@@ -158,16 +180,17 @@ export class GeneEvidenceProteomicsComponent {
   }
 
   initTMT() {
-    this.distributionService.getDistribution().subscribe((data: any) => {
+    this.resetTMT();
+    this.distributionService.getDistribution().subscribe((data) => {
       const distribution = data.proteomics_TMT;
       const differentialExpression =
-        this._gene?.proteomics_TMT?.filter((item: any) => {
+        this._gene?.proteomics_TMT?.filter((item) => {
           return item.uniprotid === this.selectedUniProtId;
         }) || [];
-      const proteomicData: any = [];
+      const proteomicData: boxPlotChartItem[] = [];
 
-      differentialExpression.forEach((item: any) => {
-        const data: any = distribution.find((d: any) => {
+      differentialExpression.forEach((item) => {
+        const data = distribution.find((d) => {
           return d.tissue === item.tissue;
         });
 
@@ -190,7 +213,7 @@ export class GeneEvidenceProteomicsComponent {
     this.initTMT();
   }
 
-  getTooltipText(item: any) {
+  getTooltipText(item: ProteinDifferentialExpression) {
     const tooltipText = `${item.hgnc_symbol || item.ensembl_gene_id} is${item.cor_pval <= 0.05 ? '' : ' not'} significantly differentially expressed in ${item.tissue} with a log fold change value of ${this.helperService.getSignificantFigures(item.log2_fc, 3)} and an adjusted p-value of ${this.helperService.getSignificantFigures(item.cor_pval, 3)}.`;
     return tooltipText;
   }

libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.ts

@@ -1,23 +1,24 @@
 import { AfterViewChecked, Component, inject, Input, ViewChild } from '@angular/core';
 
-import { HelperService } from '@sagebionetworks/agora/services';
-import {
-  BoxPlotComponent,
-  CandlestickChartComponent,
-  MedianBarChartComponent,
-  RowChartComponent,
-} from '@sagebionetworks/agora/charts';
-import { GeneNetworkComponent } from '../gene-network/gene-network.component';
-import { GeneModelSelectorComponent } from '../gene-model-selector/gene-model-selector.component';
 import {
   DistributionService,
   Gene,
   MedianExpression,
   RnaDifferentialExpression,
 } from '@sagebionetworks/agora/api-client-angular';
+import {
+  BoxPlotComponent,
+  CandlestickChartComponent,
+  MedianBarChartComponent,
+  RowChartComponent,
+} from '@sagebionetworks/agora/charts';
+import { boxPlotChartItem, rowChartItem } from '@sagebionetworks/agora/models';
+import { HelperService } from '@sagebionetworks/agora/services';
+import { ModalLinkComponent } from '@sagebionetworks/agora/shared';
 import { getStatisticalModels } from '../../helpers';
 import { DownloadDomImageComponent } from '../download-dom-image/download-dom-image.component';
-import { ModalLinkComponent } from '@sagebionetworks/agora/shared';
+import { GeneModelSelectorComponent } from '../gene-model-selector/gene-model-selector.component';
+import { GeneNetworkComponent } from '../gene-network/gene-network.component';
 
 @Component({
   selector: 'agora-gene-evidence-rna',
@@ -54,11 +55,11 @@ export class GeneEvidenceRnaComponent implements AfterViewChecked {
   medianExpression: MedianExpression[] = [];
   differentialExpression: RnaDifferentialExpression[] = [];
 
-  differentialExpressionChartData: any | undefined;
+  differentialExpressionChartData: boxPlotChartItem[] = [];
   differentialExpressionYAxisMin: number | undefined;
   differentialExpressionYAxisMax: number | undefined;
 
-  consistencyOfChangeChartData: any | undefined;
+  consistencyOfChangeChartData: rowChartItem[] = [];
 
   @ViewChild(BoxPlotComponent) boxPlotComponent: BoxPlotComponent | null = null;
   hasScrolled = false;
@@ -68,17 +69,21 @@ export class GeneEvidenceRnaComponent implements AfterViewChecked {
     this.selectedStatisticalModel = '';
 
     this.medianExpression = [];
-    this.differentialExpression = [];
 
-    this.differentialExpressionChartData = undefined;
-    this.differentialExpressionYAxisMin = undefined;
-    this.differentialExpressionYAxisMax = undefined;
+    this.resetDifferentialExpression();
 
-    this.consistencyOfChangeChartData = undefined;
+    this.consistencyOfChangeChartData = [];
 
     this.hasScrolled = false;
   }
 
+  resetDifferentialExpression() {
+    this.differentialExpression = [];
+    this.differentialExpressionChartData = [];
+    this.differentialExpressionYAxisMin = undefined;
+    this.differentialExpressionYAxisMax = undefined;
+  }
+
   init() {
     this.reset();
 
@@ -124,24 +129,26 @@ export class GeneEvidenceRnaComponent implements AfterViewChecked {
   }
 
   initDifferentialExpression() {
+    this.resetDifferentialExpression();
+
     if (!this._gene?.rna_differential_expression?.length) {
       this.differentialExpression = [];
       return;
     }
 
-    this.differentialExpression = this._gene.rna_differential_expression.filter((g: any) => {
+    this.differentialExpression = this._gene.rna_differential_expression.filter((g) => {
       return g.model === this.selectedStatisticalModel;
     });
 
-    this.distributionService.getDistribution().subscribe((data: any) => {
-      const distribution = data.rna_differential_expression.filter((data: any) => {
+    this.distributionService.getDistribution().subscribe((data) => {
+      const distribution = data.rna_differential_expression.filter((data) => {
         return data.model === this.selectedStatisticalModel;
       });
 
-      const differentialExpressionChartData: any = [];
+      const differentialExpressionChartData: boxPlotChartItem[] = [];
 
-      this.differentialExpression.forEach((item: any) => {
-        const data: any = distribution.find((d: any) => {
+      this.differentialExpression.forEach((item) => {
+        const data = distribution.find((d) => {
           return d.tissue === item.tissue;
         });
 
@@ -201,7 +208,7 @@ export class GeneEvidenceRnaComponent implements AfterViewChecked {
   }
 
   initConsistencyOfChange() {
-    this.consistencyOfChangeChartData = this.differentialExpression.map((item: any) => {
+    this.consistencyOfChangeChartData = this.differentialExpression.map((item) => {
       return {
         key: [item.tissue, item.ensembl_gene_id, item.model],
         value: {