explicitly define xychart margin

VEuPathDB · Sep 14, 2023 · 0bcd91d · 0bcd91d
1 parent b423a5b
commit 0bcd91d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/libs/components/src/plots/VolcanoPlot.tsx b/packages/libs/components/src/plots/VolcanoPlot.tsx
@@ -87,6 +87,8 @@ const EmptyVolcanoPlotData: VolcanoPlotData = [
   { log2foldChange: '0', pValue: '1' },
 ];
 
+const MARGIN_DEFAULT = 50;
+
 interface TruncationRectangleProps {
   x1: number;
   x2: number;
@@ -168,6 +170,9 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
       : dependentAxisRange.max
     : 0;
 
+  // Do we need to show the special annotation for the case when the y axis is maxxed out?
+  const showCappedDataAnnotation = yAxisMax === -Math.log10(minPValueCap);
+
   // Truncation indicators
   // If we have truncation indicators, we'll need to expand the plot range just a tad to
   // ensure the truncation bars appear. The folowing showTruncationBar variables will
@@ -253,6 +258,12 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
             zero: false,
           }}
           findNearestDatumOverride={findNearestDatumXY}
+          margin={{
+            top: MARGIN_DEFAULT,
+            right: showCappedDataAnnotation ? 150 : MARGIN_DEFAULT,
+            left: MARGIN_DEFAULT,
+            bottom: MARGIN_DEFAULT,
+          }}
         >
           {/* Set up the axes and grid lines. XYChart magically lays them out correctly */}
           <Grid numTicks={6} lineStyle={gridStyles} />
@@ -336,7 +347,7 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
           )}
 
           {/* infinity y data annotation line */}
-          {yAxisMax === -Math.log10(minPValueCap) && (
+          {showCappedDataAnnotation && (
             <Annotation
               datum={{
                 x: xAxisMax,

diff --git a/packages/libs/components/src/stories/plots/VolcanoPlot.stories.tsx b/packages/libs/components/src/stories/plots/VolcanoPlot.stories.tsx
@@ -215,6 +215,10 @@ ManyPoints.args = {
   significanceThreshold: 0.01,
   independentAxisRange: { min: -9, max: 9 },
   dependentAxisRange: { min: 0, max: 9 },
+  comparisonLabels: [
+    'up in super long group name',
+    'up in other long group name',
+  ],
 };
 
 // Test truncation indicators