add sort by options for all bar charts and sort by counts for non per…

…centage bar charts
cBioPortal · Jan 16, 2025 · 302c00b · 302c00b
1 parent abfd806
commit 302c00b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 36 deletions.
diff --git a/src/shared/components/plots/MultipleCategoryBarPlot.tsx b/src/shared/components/plots/MultipleCategoryBarPlot.tsx
@@ -439,7 +439,8 @@ export default class MultipleCategoryBarPlot extends React.Component<
             ) {
                 return getSortedMajorCategories(
                     this.data,
-                    this.props.sortByOption
+                    this.props.sortByOption,
+                    !!this.props.percentage
                 );
             }
             return sortDataByCategory(

diff --git a/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts b/src/shared/components/plots/MultipleCategoryBarPlotUtils.ts
@@ -105,7 +105,8 @@ export function sortDataByCategory<D>(
 }
 export function getSortedMajorCategories(
     data: IMultipleCategoryBarPlotData[],
-    sortByOption: string
+    sortByOption: string,
+    sortByPercentage: boolean
 ): string[] {
     if (sortByOption === 'SortByTotalSum') {
         const majorCategoryCounts: { [key: string]: number } = {};
@@ -130,8 +131,13 @@ export function getSortedMajorCategories(
             item => item.minorCategory === sortByOption
         );
         if (sortedEntityData) {
-            sortedEntityData.counts.sort((a, b) => b.percentage - a.percentage);
-
+            if (sortByPercentage) {
+                sortedEntityData.counts.sort(
+                    (a, b) => b.percentage - a.percentage
+                );
+            } else {
+                sortedEntityData.counts.sort((a, b) => b.count - a.count);
+            }
             return sortedEntityData.counts.map(item => item.majorCategory);
         }
     }
@@ -140,9 +146,14 @@ export function getSortedMajorCategories(
 }
 export function sortDataByOption(
     data: IMultipleCategoryBarPlotData[],
-    sortByOption: string
+    sortByOption: string,
+    sortByPercentage: boolean
 ): IMultipleCategoryBarPlotData[] {
-    const sortedMajorCategories = getSortedMajorCategories(data, sortByOption);
+    const sortedMajorCategories = getSortedMajorCategories(
+        data,
+        sortByOption,
+        sortByPercentage
+    );
 
     if (sortByOption === 'SortByTotalSum' || sortedMajorCategories.length > 0) {
         const reorderCounts = (counts: CountItem[]): CountItem[] => {
@@ -202,7 +213,7 @@ export function makeBarSpecs(
         sortByOption !== '' &&
         sortByOption !== SortByOptions.Alphabetically
     ) {
-        data = sortDataByOption(data, sortByOption);
+        data = sortDataByOption(data, sortByOption, percentage);
     } else {
         // one bar spec per minor category, in correct order - either specified, or alphabetical
         data = sortDataByCategory(

diff --git a/src/shared/components/plots/PlotsTab.tsx b/src/shared/components/plots/PlotsTab.tsx
@@ -4601,36 +4601,38 @@ export default class PlotsTab extends React.Component<IPlotsTabProps, {}> {
                             </div>
                         </div>
                     )}
-                    {this.discreteVsDiscretePlotType == 'StackedBar' && (
-                        <div className="form-group">
-                            <label>Sort By</label>
-                            <div style={{ display: 'flex' }}>
-                                <ReactSelect
-                                    name="Sort By"
-                                    value={this.sortByOption}
-                                    onChange={this.handleSortByChange}
-                                    options={this.sortByDropDownOptions}
-                                    clearable={false}
-                                    searchable={true}
-                                    placeholder="Sort by..."
-                                />
-                            </div>
-                        </div>
-                    )}
                     {showStackedBarHorizontalOption && (
-                        <div className="checkbox">
-                            <label>
-                                <input
-                                    data-test="horizontalBars"
-                                    type="checkbox"
-                                    name="utilities_horizontalBars"
-                                    value={EventKey.utilities_horizontalBars}
-                                    checked={this.horizontalBars}
-                                    onClick={this.onInputClick}
-                                />{' '}
-                                Horizontal Bars
-                            </label>
-                        </div>
+                        <>
+                            <div className="form-group">
+                                <label>Sort By</label>
+                                <div style={{ display: 'flex' }}>
+                                    <ReactSelect
+                                        name="Sort By"
+                                        value={this.sortByOption}
+                                        onChange={this.handleSortByChange}
+                                        options={this.sortByDropDownOptions}
+                                        clearable={false}
+                                        searchable={true}
+                                        placeholder="Sort by..."
+                                    />
+                                </div>
+                            </div>
+                            <div className="checkbox">
+                                <label>
+                                    <input
+                                        data-test="horizontalBars"
+                                        type="checkbox"
+                                        name="utilities_horizontalBars"
+                                        value={
+                                            EventKey.utilities_horizontalBars
+                                        }
+                                        checked={this.horizontalBars}
+                                        onClick={this.onInputClick}
+                                    />{' '}
+                                    Horizontal Bars
+                                </label>
+                            </div>
+                        </>
                     )}
                     {showRegression && (
                         <div className="checkbox" style={{ marginTop: 14 }}>