diff --git a/end-to-end-tests/screenshots/reference/no_session_plots_tab_element_chrome_1600x1000.png b/end-to-end-tests/screenshots/reference/no_session_plots_tab_element_chrome_1600x1000.png index 1dba0fd25cb..5698b94b59f 100644 Binary files a/end-to-end-tests/screenshots/reference/no_session_plots_tab_element_chrome_1600x1000.png and b/end-to-end-tests/screenshots/reference/no_session_plots_tab_element_chrome_1600x1000.png differ diff --git a/end-to-end-tests/screenshots/reference/plots_tab_clinical_vs_molecular_boxplot_element_chrome_1600x1000.png b/end-to-end-tests/screenshots/reference/plots_tab_clinical_vs_molecular_boxplot_element_chrome_1600x1000.png index d160c847945..c263b93240e 100644 Binary files a/end-to-end-tests/screenshots/reference/plots_tab_clinical_vs_molecular_boxplot_element_chrome_1600x1000.png and b/end-to-end-tests/screenshots/reference/plots_tab_clinical_vs_molecular_boxplot_element_chrome_1600x1000.png differ diff --git a/end-to-end-tests/screenshots/reference/plots_tab_mutation_type_view_element_chrome_1600x1000.png b/end-to-end-tests/screenshots/reference/plots_tab_mutation_type_view_element_chrome_1600x1000.png index e8a7cf873a8..aa14c323d39 100644 Binary files a/end-to-end-tests/screenshots/reference/plots_tab_mutation_type_view_element_chrome_1600x1000.png and b/end-to-end-tests/screenshots/reference/plots_tab_mutation_type_view_element_chrome_1600x1000.png differ diff --git a/end-to-end-tests/screenshots/reference/session_plots_tab_element_chrome_1600x1000.png b/end-to-end-tests/screenshots/reference/session_plots_tab_element_chrome_1600x1000.png index 1dba0fd25cb..5698b94b59f 100644 Binary files a/end-to-end-tests/screenshots/reference/session_plots_tab_element_chrome_1600x1000.png and b/end-to-end-tests/screenshots/reference/session_plots_tab_element_chrome_1600x1000.png differ diff --git a/src/shared/components/plots/BoxScatterPlot.tsx b/src/shared/components/plots/BoxScatterPlot.tsx index a516d35e020..0afc8877c18 100644 --- a/src/shared/components/plots/BoxScatterPlot.tsx +++ b/src/shared/components/plots/BoxScatterPlot.tsx @@ -69,6 +69,7 @@ const CATEGORY_LABEL_HORZ_ANGLE = -30; const DEFAULT_LEFT_PADDING = 25; const DEFAULT_BOTTOM_PADDING = 10; const MAXIMUM_CATEGORY_LABEL_SIZE = 120; +const LEGEND_ITEMS_PER_ROW = 5; const BOX_STYLES = { @@ -182,16 +183,30 @@ export default class BoxScatterPlot extends return this.chartWidth - 20; } + @computed get horizontalLegendHeight() { + //height of legend in case its horizontal + if (!this.props.legendData) { + return 0; + } else { + const numRows = Math.ceil(this.props.legendData.length / LEGEND_ITEMS_PER_ROW); + return 23.7*numRows; + } + } + private get legend() { const x = this.legendX; if (this.props.legendData && this.props.legendData.length) { + // all the props conditional on this.props.horizontal are because + // we want to put the legend on top of the plot, since the plot + // could be arbitrarily wide with a lot of boxes return ( ); } else { @@ -239,7 +254,7 @@ export default class BoxScatterPlot extends } @computed get svgHeight() { - return this.chartHeight + this.bottomPadding; + return this.topPadding + this.chartHeight + this.bottomPadding; } @computed get boxSeparation() { @@ -377,6 +392,15 @@ export default class BoxScatterPlot extends } } + @computed get topPadding() { + // more top padding if vertical, to make room for legend + if (this.props.horizontal) { + return 0; + } else { + return this.horizontalLegendHeight; + } + } + @computed get bottomPadding() { if (this.props.horizontal) { return DEFAULT_BOTTOM_PADDING; @@ -473,7 +497,7 @@ export default class BoxScatterPlot extends viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`} > extends placement={this.props.horizontal ? "bottom" : "right"} container={this.container} targetHovered={this.pointHovered} - targetCoords={{x: this.tooltipModel.x + this.leftPadding, y: this.tooltipModel.y}} + targetCoords={{x: this.tooltipModel.x + this.leftPadding, y: this.tooltipModel.y + this.topPadding}} overlay={this.props.tooltip(this.tooltipModel.datum)} /> )}