AG-1344 scaling bug fix and refactor of gene evidence box plots

Sage-Bionetworks · Feb 5, 2024 · 0c19150 · 0c19150
1 parent f00c8be
commit 0c19150
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 61 deletions.
diff --git a/src/app/features/charts/components/box-plot-chart/box-plot-chart.component.ts b/src/app/features/charts/components/box-plot-chart/box-plot-chart.component.ts
@@ -34,6 +34,7 @@ export class BoxPlotComponent extends BaseChartComponent {
   @Input() yAxisLabel = 'LOG 2 FOLD CHANGE';
   @Input() yAxisMin: number | undefined;
   @Input() yAxisMax: number | undefined;
+  @Input() yAxisPadding = 0.2;
   @Input() rcRadius = 9;
   @Input() rcColor = this.helperService.getColor('secondary');
 
@@ -85,8 +86,8 @@ export class BoxPlotComponent extends BaseChartComponent {
     const self = this;
 
     this.chart = agoraBoxPlot(this.chartContainer.nativeElement, null, {
-      yAxisMin: this.yAxisMin,
-      yAxisMax: this.yAxisMax,
+      yAxisMin: this.yAxisMin ? this.yAxisMin - this.yAxisPadding : undefined,
+      yAxisMax: this.yAxisMax ? this.yAxisMax + this.yAxisPadding : undefined,
     });
 
     this.chart.group(this.group).dimension(this.dimension);

diff --git a/...eatures/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html b/...eatures/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html
@@ -48,8 +48,8 @@ <h3>
         <div #srmChart>
           <box-plot-chart
             xAxisLabel="Brain tissue"
-            [yAxisMin]="SRMYAxisMin"
-            [yAxisMax]="SRMYAxisMax"
+            [yAxisMin]="SRMRange?.Min"
+            [yAxisMax]="SRMRange?.Max"
             [data]="SRMData"
           ></box-plot-chart>
         </div>
@@ -115,8 +115,8 @@ <h3>
         <div #tmtChart>
           <box-plot-chart
             xAxisLabel="Brain tissue"
-            [yAxisMin]="TMTYAxisMin"
-            [yAxisMax]="TMTYAxisMax"
+            [yAxisMin]="TMTRange?.Min"
+            [yAxisMax]="TMTRange?.Max"
             [data]="TMTData"
           ></box-plot-chart>
         </div>
@@ -155,8 +155,8 @@ <h3>
         <div #lfqChart>
           <box-plot-chart
             xAxisLabel="Brain tissue"
-            [yAxisMin]="LFQYAxisMin"
-            [yAxisMax]="LFQYAxisMax"
+            [yAxisMin]="LFQRange?.Min"
+            [yAxisMax]="LFQRange?.Max"
             [data]="LFQData"
           ></box-plot-chart>
         </div>

diff --git a/.../features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts b/.../features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts
@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Gene } from '../../../../models';
 import { GeneService } from '../../services';
 import { HelperService } from '../../../../core/services';
+import { ChartRange } from '../../../../models/ChartRange';
 
 @Component({
   selector: 'gene-evidence-proteomics',
@@ -23,16 +24,13 @@ export class GeneEvidenceProteomicsComponent {
   selectedUniProtId = '';
 
   LFQData: any = undefined;
-  LFQYAxisMin: number | undefined;
-  LFQYAxisMax: number | undefined;
+  LFQRange: ChartRange | undefined;
 
   SRMData: any = undefined;
-  SRMYAxisMin: number | undefined;
-  SRMYAxisMax: number | undefined;
+  SRMRange: ChartRange | undefined;
 
   TMTData: any = undefined;
-  TMTYAxisMin: number | undefined;
-  TMTYAxisMax: number | undefined;
+  TMTRange: ChartRange | undefined;
 
   constructor(
     private helperService: HelperService,
@@ -43,13 +41,14 @@ export class GeneEvidenceProteomicsComponent {
     this.uniProtIds = [];
     this.selectedUniProtId = '';
 
+    this.SRMData = undefined;
+    this.SRMRange = undefined;
+
     this.LFQData = undefined;
-    this.LFQYAxisMin = undefined;
-    this.LFQYAxisMax = undefined;
+    this.LFQRange = undefined;
 
     this.TMTData = undefined;
-    this.TMTYAxisMin = undefined;
-    this.TMTYAxisMax = undefined;
+    this.TMTRange = undefined;
   }
 
   init() {
@@ -79,21 +78,20 @@ export class GeneEvidenceProteomicsComponent {
     }
 
     this.initSRM();
-
     this.initLFQ();
     this.initTMT();
   }
 
-  processDifferentialExpressionData(item: any, data: any, dataYAxisMin: number | undefined, dataYAxisMax: number | undefined, proteomicData: any) {
+  processDifferentialExpressionData(item: any, data: any, range: ChartRange, proteomicData: any) {
     const yAxisMin = item.log2_fc < data.min ? item.log2_fc : data.min;
     const yAxisMax = item.log2_fc > data.max ? item.log2_fc : data.max;
 
-    if (dataYAxisMin === undefined || yAxisMin < dataYAxisMin) {
-      dataYAxisMin = yAxisMin;
+    if (yAxisMin < range.Min) {
+      range.Min = yAxisMin;
     }
 
-    if (dataYAxisMax == undefined || yAxisMax > dataYAxisMax) {
-      dataYAxisMax = yAxisMax;
+    if (yAxisMax > range.Max) {
+      range.Max = yAxisMax;
     }
 
     proteomicData.push({
@@ -113,12 +111,7 @@ export class GeneEvidenceProteomicsComponent {
   initSRM() {
     this.geneService.getDistribution().subscribe((data: any) => {
       const distribution = data.proteomics_SRM;
-
-      const differentialExpression =
-        this._gene?.proteomics_SRM?.filter((item: any) => {
-          return item.uniprotid === this.selectedUniProtId;
-        }) || [];
-
+      const differentialExpression = this._gene?.proteomics_SRM || [];
       const proteomicData: any = [];
 
       differentialExpression.forEach((item: any) => {
@@ -127,31 +120,23 @@ export class GeneEvidenceProteomicsComponent {
         });
 
         if (data) {
-          this.processDifferentialExpressionData(item, data, this.SRMYAxisMin, this.SRMYAxisMax, proteomicData);
+          if (!this.SRMRange)
+            this.SRMRange = new ChartRange(data.min, data.max);
+          this.processDifferentialExpressionData(item, data, this.SRMRange, proteomicData);
         }
       });
 
-      if (this.SRMYAxisMin) {
-        this.SRMYAxisMin -= 0.2;
-      }
-
-      if (this.SRMYAxisMax) {
-        this.SRMYAxisMax += 0.2;
-      }
-
       this.SRMData = proteomicData;
     });
   }
 
   initLFQ() {
     this.geneService.getDistribution().subscribe((data: any) => {
       const distribution = data.proteomics_LFQ;
-
       const differentialExpression =
         this._gene?.proteomics_LFQ?.filter((item: any) => {
           return item.uniprotid === this.selectedUniProtId;
         }) || [];
-
       const proteomicData: any = [];
 
       differentialExpression.forEach((item: any) => {
@@ -160,31 +145,23 @@ export class GeneEvidenceProteomicsComponent {
         });
 
         if (data) {
-          this.processDifferentialExpressionData(item, data, this.LFQYAxisMin, this.LFQYAxisMax, proteomicData);
+          if (!this.LFQRange)
+            this.LFQRange = new ChartRange(data.min, data.max);
+          this.processDifferentialExpressionData(item, data, this.LFQRange, proteomicData);
         }
       });
 
-      if (this.LFQYAxisMin) {
-        this.LFQYAxisMin -= 0.2;
-      }
-
-      if (this.LFQYAxisMax) {
-        this.LFQYAxisMax += 0.2;
-      }
-
       this.LFQData = proteomicData;
     });
   }
 
   initTMT() {
     this.geneService.getDistribution().subscribe((data: any) => {
       const distribution = data.proteomics_TMT;
-
       const differentialExpression =
         this._gene?.proteomics_TMT?.filter((item: any) => {
           return item.uniprotid === this.selectedUniProtId;
         }) || [];
-
       const proteomicData: any = [];
 
       differentialExpression.forEach((item: any) => {
@@ -193,18 +170,12 @@ export class GeneEvidenceProteomicsComponent {
         });
 
         if (data) {
-          this.processDifferentialExpressionData(item, data, this.TMTYAxisMin, this.TMTYAxisMax, proteomicData);
+          if (!this.TMTRange)
+            this.TMTRange = new ChartRange(data.min, data.max);
+          this.processDifferentialExpressionData(item, data, this.TMTRange, proteomicData);
         }
       });
 
-      if (this.TMTYAxisMin) {
-        this.TMTYAxisMin -= 0.2;
-      }
-
-      if (this.TMTYAxisMax) {
-        this.TMTYAxisMax += 0.2;
-      }
-
       this.TMTData = proteomicData;
     });
   }

diff --git a/src/app/models/ChartRange.ts b/src/app/models/ChartRange.ts
@@ -0,0 +1,9 @@
+export class ChartRange {
+  Min: number;
+  Max: number;
+
+  constructor(min: number, max: number) {
+    this.Min = min;
+    this.Max = max;
+  }
+}