From 0c191509fcdd1dc27263d31325e604602ae80136 Mon Sep 17 00:00:00 2001 From: sagely1 <114952739+sagely1@users.noreply.github.com> Date: Mon, 5 Feb 2024 10:41:38 -0800 Subject: [PATCH] AG-1344 scaling bug fix and refactor of gene evidence box plots --- .../box-plot-chart.component.ts | 5 +- .../gene-evidence-proteomics.component.html | 12 +-- .../gene-evidence-proteomics.component.ts | 77 ++++++------------- src/app/models/ChartRange.ts | 9 +++ 4 files changed, 42 insertions(+), 61 deletions(-) create mode 100644 src/app/models/ChartRange.ts 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 index 9912f532..144d44b6 100644 --- 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/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html b/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html index 71cc575c..3947e851 100644 --- a/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html +++ b/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html @@ -48,8 +48,8 @@

@@ -115,8 +115,8 @@

@@ -155,8 +155,8 @@

diff --git a/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts b/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts index b4e08f3b..44d84661 100644 --- a/src/app/features/genes/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts +++ b/src/app/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,18 +120,12 @@ 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; }); } @@ -146,12 +133,10 @@ export class GeneEvidenceProteomicsComponent { 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,18 +145,12 @@ 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; }); } @@ -179,12 +158,10 @@ export class GeneEvidenceProteomicsComponent { 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 new file mode 100644 index 00000000..48dd19b1 --- /dev/null +++ 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; + } +} \ No newline at end of file