Add Stacked Bar Chart and sorting to Plots Tab (#4960)

Feature: Add Stacked Bar Chart and sorting to Plots Tab --------- Co-authored-by: alisman <[email protected]> Co-authored-by: Bryan Lai <[email protected]>
cBioPortal · Jan 27, 2025 · 33d43be · 33d43be
1 parent a66842a
commit 33d43be
Show file tree

Hide file tree

Showing 40 changed files with 376 additions and 68 deletions.
diff --git a/...creenshots/reference/show_binary_vs_os_status_plot_element_chrome_1600x1000.png b/...creenshots/reference/show_binary_vs_os_status_plot_element_chrome_1600x1000.png
diff --git a/...eenshots/reference/show_category_vs_os_status_plot_element_chrome_1600x1000.png b/...eenshots/reference/show_category_vs_os_status_plot_element_chrome_1600x1000.png
diff --git a/...b_clinical_vs_clinical_horizontal_grouped_bar_plot_element_chrome_1600x1000.png b/...b_clinical_vs_clinical_horizontal_grouped_bar_plot_element_chrome_1600x1000.png
diff --git a/...nical_horizontal_grouped_bar_plot_sort_by_category_element_chrome_1600x1000.png b/...nical_horizontal_grouped_bar_plot_sort_by_category_element_chrome_1600x1000.png
diff --git a/...izontal_grouped_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png b/...izontal_grouped_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png
diff --git a/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...ontal_percentage_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png b/...ontal_percentage_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png
diff --git a/...centage_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png b/...centage_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png
diff --git a/...b_clinical_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png b/...b_clinical_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...nical_horizontal_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png b/...nical_horizontal_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png
diff --git a/...izontal_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png b/...izontal_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png
diff --git a/...b_clinical_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...b_clinical_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...nical_percentage_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png b/...nical_percentage_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png
diff --git a/...centage_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png b/...centage_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png
diff --git a/...ce/plots_tab_clinical_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png b/...ce/plots_tab_clinical_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...ical_vs_clinical_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png b/...ical_vs_clinical_stacked_bar_plot_sort_by_category_element_chrome_1600x1000.png
diff --git a/...linical_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png b/...linical_stacked_bar_plot_sort_by_number_of_samples_element_chrome_1600x1000.png
diff --git a/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...opy_number_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png b/...opy_number_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...opy_number_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...opy_number_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...plots_tab_copy_number_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png b/...plots_tab_copy_number_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/..._tab_multiple_studies_with_data_availability_alert_element_chrome_1600x1000.png b/..._tab_multiple_studies_with_data_availability_alert_element_chrome_1600x1000.png
diff --git a/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/..._mutations_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png b/..._mutations_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/..._mutations_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/..._mutations_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...e/plots_tab_mutations_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png b/...e/plots_tab_mutations_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...vs_clinical_horizontal_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...dtype_mode_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png b/...dtype_mode_vs_clinical_horizontal_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...dtype_mode_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png b/...dtype_mode_vs_clinical_percentage_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/...tations_wildtype_mode_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png b/...tations_wildtype_mode_vs_clinical_stacked_bar_plot_element_chrome_1600x1000.png
diff --git a/end-to-end-test/remote/specs/core/plots.screenshot.spec.js b/end-to-end-test/remote/specs/core/plots.screenshot.spec.js
@@ -189,19 +189,51 @@ describe('plots tab screenshot tests', function() {
         });
         await waitForAndCheckPlotsTab();
     });
+    it('plots tab clinical vs clinical stacked bar plot sort by number of samples', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'SortByTotalSum',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
+    it('plots tab clinical vs clinical stacked bar plot sort by category', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'Stage I',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
     //commenting this for now because of https://github.com/zinserjan/wdio-screenshot/issues/87
     /* it("plots tab clinical vs clinical grouped bar plot", () => {
         await browser.execute(() => { resultsViewPlotsTab.onDiscreteVsDiscretePlotTypeSelect({ value: "Bar" }); });
         await waitForAndCheckPlotsTab();
     }); */
-    it('plots tab clinical vs clinical percentage stacked bar plot', async () => {
+    it('plots tab clinical vs clinical percentage stacked bar plot sort by category', async () => {
         await browser.execute(() => {
             resultsViewPlotsTab.onDiscreteVsDiscretePlotTypeSelect({
                 value: 'PercentageStackedBar',
             });
         });
         await waitForAndCheckPlotsTab();
     });
+    it('plots tab clinical vs clinical percentage stacked bar plot sort by number of samples', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'SortByTotalSum',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
+    it('plots tab clinical vs clinical percentage stacked bar plot', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'alphabetically',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
     it('plots tab clinical vs clinical horizontal stacked bar plot', async () => {
         await browser.execute(() => {
             resultsViewPlotsTab.onDiscreteVsDiscretePlotTypeSelect({
@@ -214,14 +246,46 @@ describe('plots tab screenshot tests', function() {
         await clickElement('input[data-test="horizontalBars"]');
         await waitForAndCheckPlotsTab();
     });
-    it('plots tab clinical vs clinical horizontal grouped bar plot', async () => {
+    it('plots tab clinical vs clinical horizontal stacked bar plot sort by number of samples', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'SortByTotalSum',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
+    it('plots tab clinical vs clinical horizontal stacked bar plot sort by category', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'T2',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
+    it('plots tab clinical vs clinical horizontal grouped bar plot sort by category', async () => {
         await browser.execute(() => {
             resultsViewPlotsTab.onDiscreteVsDiscretePlotTypeSelect({
                 value: 'Bar',
             });
         });
         await waitForAndCheckPlotsTab();
     });
+    it('plots tab clinical vs clinical horizontal grouped bar plot sort by number of samples', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'SortByTotalSum',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
+    it('plots tab clinical vs clinical horizontal grouped bar plot', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'alphabetically',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
     it('plots tab clinical vs clinical horizontal percentage stacked bar plot', async () => {
         await browser.execute(() => {
             resultsViewPlotsTab.onDiscreteVsDiscretePlotTypeSelect({
@@ -230,6 +294,22 @@ describe('plots tab screenshot tests', function() {
         });
         await waitForAndCheckPlotsTab();
     });
+    it('plots tab clinical vs clinical horizontal percentage stacked bar plot sort by number of samples', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'SortByTotalSum',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
+    it('plots tab clinical vs clinical horizontal percentage stacked bar plot sort by category', async () => {
+        await browser.execute(() => {
+            resultsViewPlotsTab.handleSortByChange({
+                value: 'T2',
+            });
+        });
+        await waitForAndCheckPlotsTab();
+    });
     it('plots tab clinical vs clinical table plot', async () => {
         await (
             await getElement('input[data-test="horizontalBars"]')

diff --git a/src/pages/groupComparison/CategoryPlot.tsx b/src/pages/groupComparison/CategoryPlot.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { computed, makeObservable } from 'mobx';
 import MultipleCategoryBarPlot, {
     IMultipleCategoryBarPlotProps,
-} from 'pages/groupComparison/MultipleCategoryBarPlot';
+} from 'shared/components/plots/MultipleCategoryBarPlot';
 import MultipleCategoryHeatmap from 'shared/components/plots/MultipleCategoryHeatmap';
 import autobind from 'autobind-decorator';
 import { OncoprintJS } from 'oncoprintjs';
@@ -80,6 +80,9 @@ export default class CategoryPlot extends React.Component<
                 stacked={this.props.stacked}
                 pValue={this.props.pValue}
                 qValue={this.props.qValue}
+                key={`categoryPlot-${
+                    this.props.horizontalBars ? 'horizontal' : 'vertical'
+                }`}
             />
         );
     }

diff --git a/src/pages/resultsView/enrichments/EnrichmentsUtil.tsx b/src/pages/resultsView/enrichments/EnrichmentsUtil.tsx
@@ -25,7 +25,7 @@ import {
 } from './AlterationEnrichmentsTable';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
-import { IMultipleCategoryBarPlotData } from 'pages/groupComparison/MultipleCategoryBarPlot';
+import { IMultipleCategoryBarPlotData } from 'shared/components/plots/MultipleCategoryBarPlot';
 import { getTextColor } from '../../groupComparison/OverlapUtils';
 import { DefaultTooltip, TruncatedText } from 'cbioportal-frontend-commons';
 import {

diff --git a/src/pages/resultsView/enrichments/GeneBarPlot.tsx b/src/pages/resultsView/enrichments/GeneBarPlot.tsx
@@ -7,7 +7,7 @@ import {
     DownloadControlOption,
 } from 'cbioportal-frontend-commons';
 import autobind from 'autobind-decorator';
-import MultipleCategoryBarPlot from 'pages/groupComparison/MultipleCategoryBarPlot';
+import MultipleCategoryBarPlot from 'shared/components/plots/MultipleCategoryBarPlot';
 import ReactSelect from 'react-select';
 import OQLTextArea, {
     GeneBoxType,

diff --git a/src/pages/resultsView/enrichments/GenericAssayBarPlot.tsx b/src/pages/resultsView/enrichments/GenericAssayBarPlot.tsx
@@ -7,7 +7,7 @@ import {
     DownloadControlOption,
 } from 'cbioportal-frontend-commons';
 import autobind from 'autobind-decorator';
-import MultipleCategoryBarPlot from 'pages/groupComparison/MultipleCategoryBarPlot';
+import MultipleCategoryBarPlot from 'shared/components/plots/MultipleCategoryBarPlot';
 import ReactSelect from 'react-select';
 import _ from 'lodash';
 import {

diff --git a/src/shared/components/plots/BoxScatterPlot.tsx b/src/shared/components/plots/BoxScatterPlot.tsx
@@ -43,7 +43,7 @@ import classnames from 'classnames';
 import WindowStore from '../window/WindowStore';
 import LegendDataComponent from './LegendDataComponent';
 import LegendLabelComponent from './LegendLabelComponent';
-import { PQValueLabel } from 'pages/groupComparison/MultipleCategoryBarPlot';
+import { PQValueLabel } from 'shared/components/plots/MultipleCategoryBarPlot';
 
 export interface IBaseBoxScatterPlotPoint {
     value: number;

diff --git a/...oupComparison/MultipleCategoryBarPlot.tsx → ...ponents/plots/MultipleCategoryBarPlot.tsx b/...oupComparison/MultipleCategoryBarPlot.tsx → ...ponents/plots/MultipleCategoryBarPlot.tsx
@@ -21,19 +21,20 @@ import {
     VictoryGroup,
 } from 'victory';
 import { tickFormatNumeral } from 'cbioportal-frontend-commons';
-import { makeUniqueColorGetter } from '../../shared/components/plots/PlotUtils';
+import { makeUniqueColorGetter } from './PlotUtils';
 import {
     makePlotData,
     makeBarSpecs,
     sortDataByCategory,
-} from '../../shared/components/plots/MultipleCategoryBarPlotUtils';
+    getSortedMajorCategories,
+} from './MultipleCategoryBarPlotUtils';
 import * as ReactDOM from 'react-dom';
 import { Popover } from 'react-bootstrap';
 import classnames from 'classnames';
 import { toConditionalPrecisionWithMinimum } from 'shared/lib/FormatUtils';
 import { IStringAxisData } from 'shared/components/plots/PlotsTabUtils';
 import WindowStore from 'shared/components/window/WindowStore';
-
+import { SortByOptions } from 'shared/components/plots/PlotsTab';
 export interface IMultipleCategoryBarPlotProps {
     svgId?: string;
     domainPadding?: number;
@@ -58,6 +59,11 @@ export interface IMultipleCategoryBarPlotProps {
     svgRef?: (svgContainer: SVGElement | null) => void;
     pValue: number | null;
     qValue: number | null;
+    sortByDropDownOptions?: { value: string; label: string }[];
+    updateDropDownOptions?: (
+        option: { value: string; label: string }[]
+    ) => void;
+    sortByOption?: string;
 }
 
 export interface IMultipleCategoryBarPlotData {
@@ -425,6 +431,18 @@ export default class MultipleCategoryBarPlot extends React.Component<
 
     @computed get labels() {
         if (this.data.length > 0) {
+            if (
+                this.props.sortByOption === SortByOptions.SortByTotalSum ||
+                (this.props.sortByOption &&
+                    this.props.sortByOption !== '' &&
+                    this.props.sortByOption !== SortByOptions.Alphabetically)
+            ) {
+                return getSortedMajorCategories(
+                    this.data,
+                    this.props.sortByOption,
+                    !!this.props.percentage
+                );
+            }
             return sortDataByCategory(
                 this.data[0].counts.map(c => c.majorCategory),
                 x => x,
@@ -435,6 +453,18 @@ export default class MultipleCategoryBarPlot extends React.Component<
         }
     }
 
+    private setInitialSelectedOption = () => {
+        if (this.props.updateDropDownOptions) {
+            const minorCategoriesArray = this.data.map(item => ({
+                value: item.minorCategory,
+                label: item.minorCategory,
+            }));
+            this.props.updateDropDownOptions(minorCategoriesArray);
+        }
+    };
+    componentDidMount() {
+        this.setInitialSelectedOption();
+    }
     @bind
     private formatCategoryTick(t: number, index: number) {
         //return wrapTick(this.labels[index], MAXIMUM_CATEGORY_LABEL_SIZE);
@@ -739,7 +769,8 @@ export default class MultipleCategoryBarPlot extends React.Component<
             this.categoryCoord,
             !!this.props.horizontalBars,
             !!this.props.stacked,
-            !!this.props.percentage
+            !!this.props.percentage,
+            this.props.sortByOption
         );
         return barSpecs.map(spec => (
             <VictoryBar