fix horizontal bars issues and add tests

cBioPortal · Jan 21, 2025 · a9f5d3d · a9f5d3d
1 parent 3441ed0
commit a9f5d3d
Show file tree

Hide file tree

Showing 13 changed files with 91 additions and 3 deletions.
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/...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/...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/...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/...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/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/shared/components/plots/MultipleCategoryBarPlot.tsx b/src/shared/components/plots/MultipleCategoryBarPlot.tsx
@@ -944,8 +944,12 @@ export default class MultipleCategoryBarPlot extends React.Component<
         }
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: IMultipleCategoryBarPlotProps) {
         this.updateLegendWidth();
+
+        if (this.props.horizontalBars !== prevProps.horizontalBars) {
+            this.setInitialSelectedOption();
+        }
     }
 
     render() {

diff --git a/src/shared/components/plots/PlotsTab.tsx b/src/shared/components/plots/PlotsTab.tsx
@@ -1782,6 +1782,10 @@ export default class PlotsTab extends React.Component<IPlotsTabProps, {}> {
                 break;
             case EventKey.utilities_horizontalBars:
                 this.horizontalBars = !this.horizontalBars;
+                this.handleSortByChange({
+                    value: SortByOptions.Alphabetically,
+                    label: 'Alphabetically',
+                });
                 break;
             case EventKey.utilities_viewLimitValues:
                 this.viewLimitValues = !this.viewLimitValues;