Compress axis

cBioPortal · Nov 19, 2019 · cb2725c · cb2725c
1 parent ff7bf0a
commit cb2725c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/pages/resultsView/enrichments/ExpressionEnrichmentsContainer.tsx b/src/pages/resultsView/enrichments/ExpressionEnrichmentsContainer.tsx
@@ -378,6 +378,7 @@ export default class ExpressionEnrichmentContainer extends React.Component<IExpr
                     useLogSpaceTicks={true}
                     legendData={[]}
                     containerRef={(ref) => this.svgContainer = ref}
+                    compressAxisX
                 />
             </div>
         }

diff --git a/src/shared/components/plots/BoxScatterPlot.tsx b/src/shared/components/plots/BoxScatterPlot.tsx
@@ -13,7 +13,7 @@ import {getDeterministicRandomNumber, separateScatterDataByAppearance} from "./P
 import {logicalAnd} from "../../lib/LogicUtils";
 import {tickFormatNumeral, wrapTick} from "./TickUtils";
 import {makeScatterPlotSizeFunction} from "./PlotUtils";
-import {getTextWidth} from "../../../public-lib/lib/TextTruncationUtils";
+import {getTextWidth, truncateWithEllipsis} from "../../../public-lib/lib/TextTruncationUtils";
 import autobind from "autobind-decorator";
 import { dataPointIsLimited } from 'shared/components/plots/PlotUtils';
 import _ from "lodash";
@@ -63,6 +63,7 @@ export interface IBoxScatterPlotProps<D extends IBaseBoxScatterPlotPoint> {
     legendLocationWidthThreshold?:number; // chart width after which we start putting the legend at the bottom of the plot
     boxCalculationFilter?:(d:D)=>boolean; // determines which points are used for calculating the box
     containerRef?:(svgContainer:SVGElement|null)=>void;
+    compressAxisX?:boolean
 }
 
 type BoxModel = {
@@ -419,7 +420,12 @@ export default class BoxScatterPlot<D extends IBaseBoxScatterPlotPoint> extends
     }
 
     @computed get labels() {
-        return this.props.data.map(d=>d.label);
+        return this.props.data.map(d => {
+            if (!!this.props.compressAxisX) {
+                return truncateWithEllipsis(d.label, 50, axisTickLabelStyles.fontFamily, axisTickLabelStyles.fontSize + 'px');
+            }
+            return d.label;
+        });
     }
 
     @bind
@@ -434,7 +440,7 @@ export default class BoxScatterPlot<D extends IBaseBoxScatterPlotPoint> extends
     }
 
     @computed get xAxisLabelVertOffset(): number {
-        if (!this.props.horizontal) {
+        if (!(this.props.horizontal || this.props.compressAxisX)) {
             let offset = this.biggestCategoryLabelSize;
             offset += (this.props.axisLabelX || '').split('\n').length > 1 ? 14 : 24;
             return offset
@@ -458,9 +464,9 @@ export default class BoxScatterPlot<D extends IBaseBoxScatterPlotPoint> extends
                 tickValues={this.props.horizontal ? undefined: this.categoryTickValues}
                 tickCount={this.props.horizontal ? NUM_AXIS_TICKS: undefined }
                 tickFormat={this.props.horizontal ? this.formatNumericalTick : this.formatCategoryTick}
-                tickLabelComponent={<VictoryLabel angle={this.props.horizontal ? undefined : CATEGORY_LABEL_HORZ_ANGLE}
-                                                  verticalAnchor={this.props.horizontal ? undefined : "start"}
-                                                  textAnchor={this.props.horizontal ? undefined : "start"}
+                tickLabelComponent={<VictoryLabel angle={!!this.props.compressAxisX || this.props.horizontal ? undefined : CATEGORY_LABEL_HORZ_ANGLE}
+                                                  verticalAnchor={!!this.props.compressAxisX || this.props.horizontal ? undefined : "start"}
+                                                  textAnchor={!!this.props.compressAxisX ||this.props.horizontal ? undefined : "start"}
                                   />}
                 axisLabelComponent={<VictoryLabel dy={this.xAxisLabelVertOffset}/>}
             />
@@ -556,8 +562,8 @@ export default class BoxScatterPlot<D extends IBaseBoxScatterPlotPoint> extends
         let paddingForLegend = 0;
 
         if (!this.props.horizontal) {
-            // more padding if vertical, because category labels extend to bottom
-            paddingForLabels = this.biggestCategoryLabelSize;
+            // more padding if axis is not compressed
+            paddingForLabels = !!this.props.compressAxisX ? 20 : this.biggestCategoryLabelSize;
         }
         if (this.legendLocation === "bottom") {
             // more padding if legend location is "bottom", to make room for legend
@@ -571,7 +577,7 @@ export default class BoxScatterPlot<D extends IBaseBoxScatterPlotPoint> extends
         const maxSize = Math.max(
             ...this.labels.map(x=>getTextWidth(x, axisTickLabelStyles.fontFamily, axisTickLabelStyles.fontSize+"px"))
         );
-        if (this.props.horizontal) {
+        if (!!this.props.compressAxisX || this.props.horizontal) {
             // if horizontal mode, its label width
             return maxSize;
         } else {