optionally set y-limits based on meaningful expression threshold line…

…, default to false to match current chart behavior
Sage-Bionetworks · Jul 10, 2023 · e52af66 · e52af66
1 parent bb5a078
commit e52af66
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/src/app/features/charts/components/median-barchart/median-barchart.component.ts b/src/app/features/charts/components/median-barchart/median-barchart.component.ts
@@ -48,6 +48,7 @@ export class MedianBarChartComponent implements OnChanges, AfterViewInit, OnDest
   private chartXAxisLabel!: d3.Selection<SVGTextElement, unknown, null, undefined>;
   private chartBars!: d3.Selection<SVGRectElement, MedianExpression, any, unknown>;
   private chartScoreLabels!: d3.Selection<SVGTextElement, MedianExpression, any, unknown>;
+  private showChartThresholdLine = false;
   private chartThresholdLine!: d3.Selection<SVGLineElement, unknown, null, undefined>;
 
   private resizeTimer: ReturnType<typeof setTimeout> | number = 0;
@@ -59,13 +60,18 @@ export class MedianBarChartComponent implements OnChanges, AfterViewInit, OnDest
     this._data = data
       .filter((el) => el.medianlogcpm && el.medianlogcpm > 0)
       .sort((a, b) => a.tissue.localeCompare(b.tissue));
-    this.maxValueY = Math.max(
-      this.MEANINGFUL_EXPRESSION_THRESHOLD,
-      d3.max(this._data, (d) => d.medianlogcpm) || 0
-    );
+    this.maxValueY = d3.max(this._data, (d) => d.medianlogcpm) || 0;
+    if (this.shouldAlwayShowThreshold) {
+      this.maxValueY = Math.max(
+        this.MEANINGFUL_EXPRESSION_THRESHOLD,
+        this.maxValueY
+      );
+    }
+    this.showChartThresholdLine = this.maxValueY >= this.MEANINGFUL_EXPRESSION_THRESHOLD;
   }
 
   @Input() shouldResize = true;
+  @Input() shouldAlwayShowThreshold = false;
   @Input() xAxisLabel = '';
   @Input() yAxisLabel = 'LOG2 CPM';
 
@@ -261,14 +267,16 @@ export class MedianBarChartComponent implements OnChanges, AfterViewInit, OnDest
         .text(this.yAxisLabel);
 
       // THRESHOLD LINE
-      this.chartThresholdLine = this.chart
-        .append('line')
-        .attr('class', 'meaningful-expression-threshold-line')
-        .attr('x1', 0)
-        .attr('x2', innerWidth)
-        .attr('y1', yScale(this.MEANINGFUL_EXPRESSION_THRESHOLD))
-        .attr('y2', yScale(this.MEANINGFUL_EXPRESSION_THRESHOLD))
-        .attr('stroke', 'red');
+      if (this.showChartThresholdLine) {
+        this.chartThresholdLine = this.chart
+          .append('line')
+          .attr('class', 'meaningful-expression-threshold-line')
+          .attr('x1', 0)
+          .attr('x2', innerWidth)
+          .attr('y1', yScale(this.MEANINGFUL_EXPRESSION_THRESHOLD))
+          .attr('y2', yScale(this.MEANINGFUL_EXPRESSION_THRESHOLD))
+          .attr('stroke', 'red');
+      }
 
       this.chartInitialized = true;
     }
@@ -308,8 +316,10 @@ export class MedianBarChartComponent implements OnChanges, AfterViewInit, OnDest
       .attr('x', innerWidth / 2);
 
     // update threshold line
-    this.chartThresholdLine
-      .transition()
-      .attr('x2', innerWidth);
+    if (this.showChartThresholdLine) {
+      this.chartThresholdLine
+        .transition()
+        .attr('x2', innerWidth);
+    }
   };
 }