Add Stacked Bar Chart and sorting to Plots Tab #4960

SURAJ-SHARMA27 · 2024-08-06T17:23:48Z

Describe changes proposed in this pull request:
Addition of Sort By MinorCategory Options:

Implemented a new feature allowing users to sort by minorCategory.
Added a dropdown menu with minorCategory options for sorting.

Sorted Stacks by Selected MinorCategory:

For the selected option from the dropdown, entities will appear at the beginning of each stack in a sorted order with respect to the count of chosen minorCategory.

Any screenshots or GIFs?

screen-capture.9.webm

Notify reviewers

@alisman
@sowmiyaa-kumar
@zeynepkaragoz
@TJMKuijpers
@inodb

netlify · 2024-08-06T17:24:04Z

✅ Deploy Preview for cbioportalfrontend ready!

Name	Link
🔨 Latest commit	`3342256`
🔍 Latest deploy log	https://app.netlify.com/sites/cbioportalfrontend/deploys/6793f28ecf9c3b0008578345
😎 Deploy Preview	https://deploy-preview-4960.preview.cbioportal.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

inodb · 2024-08-07T14:25:24Z

@SURAJ-SHARMA27 this looks awesome - thank you!

For the sorting, can we also sort by "# samples"? The value of the Y-axis basically

This would be similar to e.g. how it works here for treatment response:

This is slightly separate, but maybe for treatment response, the sorting should be using your new "Sort By" component too

schultzn · 2024-08-07T14:48:54Z

Looks great. It would be nice to also be able to sort by the overall number of samples (I see that comment above) and also to change the sort order back to alphabetical.

jjgao · 2024-08-07T15:23:46Z

Good work @SURAJ-SHARMA27 !

Somehow x-axis labels does not change - always alphabetically, but the bars are changing

When switch Plot Type, should we change the sort value, ie. sort by number of samples if it's "Stacked bar chart" and by % samples if it's "100% stacked bar chart"?
Should the 'Sort By' menu be included in the 'Vertical Axis' section since it's using the values from vertical axis.
It would be nice to add the sort by parameter to the url.

SURAJ-SHARMA27 · 2024-08-07T15:51:09Z

Good work @SURAJ-SHARMA27 !

Somehow x-axis labels does not change - always alphabetically, but the bars are changing

When switch Plot Type, should we change the sort value, ie. sort by number of samples if it's "Stacked bar chart" and by % samples if it's "100% stacked bar chart"?

Should the 'Sort By' menu be included in the 'Vertical Axis' section since it's using the values from vertical axis.

It would be nice to add the sort by parameter to the url.

Actually, I implemented that earlier, as you can see in the video I attached at the time of the PR. The labels were changing, but I forgot to include the logic when pushing it. Thank you for pointing that out. I have now made the changes and pushed it.

SURAJ-SHARMA27 · 2024-08-07T18:53:23Z

I think I have implemented most of the suggestions and added two more options for sorting: sort by the number of samples and alphabetically. If you could review it. @inodb

screen-capture.14.webm

inodb · 2024-08-08T12:56:08Z

Amazing - nice work @SURAJ-SHARMA27 !

Should the 'Sort By' menu be included in the 'Vertical Axis' section since it's using the values from vertical axis.

@jjgao Good question - I kinda like it separate from x/y axis selection since we might also want to allow sorting by multiple values in the future (which could be like a multi-select dropdown element)

Few more thoughts:

Should we rename # samples to Number of Samples? I like the consistency with the current y-axis and we use # in several places, but it's maybe not as obvious in the sort selection what # means?
Can we make Alphabetical show up as the default in the sort by? It currently shows an empty selection on first load:

gblaih · 2024-08-08T17:15:23Z

src/pages/groupComparison/MultipleCategoryBarPlot.tsx

@@ -58,6 +58,11 @@ export interface IMultipleCategoryBarPlotProps {
    svgRef?: (svgContainer: SVGElement | null) => void;
    pValue: number | null;
    qValue: number | null;
+    SortByDropDownOptions?: { value: string; label: string }[];


sortByDropDownOptions

gblaih · 2024-08-08T17:15:28Z

src/pages/groupComparison/MultipleCategoryBarPlot.tsx

@@ -425,6 +430,43 @@ export default class MultipleCategoryBarPlot extends React.Component<

    @computed get labels() {
        if (this.data.length > 0) {
+            if (this.props.sortByOption == 'SortByTotalSum') {


gblaih · 2024-08-08T17:15:37Z

src/pages/groupComparison/MultipleCategoryBarPlot.tsx

+                );
+                return sortedMajorCategories;
+            } else if (
+                this.props.sortByOption != '' &&


lets use === and !== throughout the code

gblaih · 2024-08-08T17:15:48Z

src/shared/components/plots/PlotsTab.tsx

+                                        this?.SortByDropDownOptions
+                                    }
+                                    updateDropDownOptions={
+                                        this?.updateDropDownOptions
+                                    }
+                                    sortByOption={this?.sortByOption}


is this?. necessary? i'd think this. is fine

gblaih · 2024-08-08T17:18:50Z

src/pages/groupComparison/MultipleCategoryBarPlot.tsx

+            if (this.props.sortByOption == 'SortByTotalSum') {
+                const majorCategoryCounts: any = {};
+
+                this.data.forEach(item => {


this code looks pretty similar to the the function sortDataByOption you made below. it would be nice to extract this into a function that can be reused

gblaih · 2024-08-08T17:21:45Z

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts

+            (a, b) => majorCategoryCounts[b] - majorCategoryCounts[a]
+        );
+
+        const reorderCounts = (counts: any) => {


instead of making this function inside, lets extract this into a new function outside for clarity and reuse

SURAJ-SHARMA27 · 2024-08-09T05:30:30Z

I have implemented all the changes as suggested. You can review them. I am also attaching a video for reference.
@inodb @gblaih

screen-capture.15.webm

inodb · 2024-08-13T14:30:47Z

@SURAJ-SHARMA27 Thanks for the fixes! I noticed the "Sort by" option is currently missing here, do you see that?

alisman · 2024-08-13T14:49:22Z

src/pages/groupComparison/MultipleCategoryBarPlot.tsx

@@ -435,6 +451,18 @@ export default class MultipleCategoryBarPlot extends React.Component<
        }
    }

+    private setInitialSelectedOption = () => {


this is a bit of an anti-pattern. calling from the child component to update the state of parent component on render. it should be possible to do this in parent component prior to mount?

In the parent component, it doesn't contain data in the form of IMultipleCategoryBarPlotData, from which I have to extract all the unique major categories for dropdown options. Therefore, to avoid extra calculations, I passed the prop from the parent and updated it when it became available in the child.

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts

alisman · 2024-08-13T14:50:32Z

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts

+    sortByOption: string | undefined
+): string[] {
+    if (sortByOption === 'SortByTotalSum') {
+        const majorCategoryCounts: any = {};


avoid 'any'. lets type this.

Yes, I have defined the types across all the changes.

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts

alisman · 2024-08-13T14:53:57Z

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts

+        return Object.keys(majorCategoryCounts).sort(
+            (a, b) => majorCategoryCounts[b] - majorCategoryCounts[a]
+        );
+    } else if (sortByOption !== '' && sortByOption !== 'alphabetically') {


use constant for 'alphabetically' or see if it's available on an enum

I have defined an enumeration and used it

alisman · 2024-08-13T14:54:54Z

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts

+    const sortedMajorCategories = getSortedMajorCategories(data, sortByOption);
+
+    if (sortByOption === 'SortByTotalSum' || sortedMajorCategories.length > 0) {
+        const reorderCounts = (counts: any) => {


avoid 'any'

Yes, I have defined the types across all the changes.

alisman · 2025-01-10T20:20:42Z

Hi @SURAJ-SHARMA27,
There is a regression error caused by this PR. I realize GSOC is long over. Do you have a few minutes to look at the issue?

If you visit this link with the PR active, you'll see the following problem:

If you are busy with school or work, we understand and will find someone else to look into it.

dippindots · 2025-01-14T06:32:50Z

Related ticket: cBioPortal/cbioportal#10722

alisman · 2025-01-14T21:30:26Z

@SURAJ-SHARMA27 just FYI, we have a dev @gblaih who is taking care of the last fixes.

…centage bar charts

alisman · 2025-01-24T16:51:47Z

src/shared/components/plots/MultipleCategoryBarPlot.tsx

        this.updateLegendWidth();
+
+        if (this.props.horizontalBars !== prevProps.horizontalBars) {


@gblaih should be better to use the horizontalBars value in the component "key" attribute. This will force it to re-mount when that value changes and so you can avoid dirtiness like the above. You might lose other state, but it's a cleaner approach. Give it a try.

and apologies if this was not your change

inodb

This looks great!

There's one minor issue where occasionally when you mess around with swapping axes you see stuff like this:

But haven't be able to figure out the steps to reproduce it reliably so I think ok to merge it and see if someone else comes up with a good way to reproduce it post merge

inodb requested review from gblaih and alisman August 7, 2024 13:34

inodb added the gsoc label Aug 7, 2024

inodb changed the title ~~sorting-functionality-added@stackedBarChart at plot tab~~ Add Stacked Bar Chart and sorting functionality Aug 7, 2024

inodb added the feature label Aug 7, 2024

inodb changed the title ~~Add Stacked Bar Chart and sorting functionality~~ Add Stacked Bar Chart and sorting to Plots Tab Aug 7, 2024

gblaih reviewed Aug 8, 2024

View reviewed changes

SURAJ-SHARMA27 requested a review from gblaih August 12, 2024 13:46

alisman reviewed Aug 13, 2024

View reviewed changes

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts Show resolved Hide resolved

alisman reviewed Aug 13, 2024

View reviewed changes

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts Show resolved Hide resolved

alisman reviewed Aug 13, 2024

View reviewed changes

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts Show resolved Hide resolved

alisman reviewed Aug 13, 2024

View reviewed changes

src/shared/components/plots/MultipleCategoryBarPlotUtils.ts Show resolved Hide resolved

alisman reviewed Aug 13, 2024

View reviewed changes

alisman force-pushed the sorting-functionality@stackedBarChart branch from bbafcbf to 903134d Compare December 20, 2024 17:14

inodb mentioned this pull request Dec 30, 2024

Housekeeping cBioPortal/roadmap#15

Open

3 tasks

alisman force-pushed the sorting-functionality@stackedBarChart branch 3 times, most recently from f7f261a to 6abbaf5 Compare January 10, 2025 16:27

SURAJ-SHARMA27 and others added 13 commits January 21, 2025 17:02

sorting-functionality-added@stacked

ec0d224

x-axis-label-syncup

e8d653d

logging-removed

d5795e1

sort-by-#sample_&_aphabetically-added

22b1f47

made-seperate-export-function

63286a7

rendering-condition-fixed

7e55864

changes-made-a/c-review

df657d9

logs-removed

88b5117

Move MultipleCategoryBarPlot component into shared folder

a992583

fix charts getting cut off

04d325d

fix counts not being sorted on default view

1a9ae5c

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

3441ed0

…centage bar charts

fix horizontal bars issues and add tests

a9f5d3d

gblaih force-pushed the sorting-functionality@stackedBarChart branch from 302c00b to a9f5d3d Compare January 21, 2025 22:02

update screenshots

7db2e6d

dippindots assigned dippindots and gblaih and unassigned dippindots Jan 22, 2025

dippindots added the ready to review label Jan 23, 2025

alisman reviewed Jan 24, 2025

View reviewed changes

add key attribute with horizontal value for sort by options update

3342256

inodb approved these changes Jan 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Stacked Bar Chart and sorting to Plots Tab #4960

Add Stacked Bar Chart and sorting to Plots Tab #4960

SURAJ-SHARMA27 commented Aug 6, 2024 •

edited

Loading

netlify bot commented Aug 6, 2024 •

edited

Loading

inodb commented Aug 7, 2024

schultzn commented Aug 7, 2024

jjgao commented Aug 7, 2024 •

edited

Loading

SURAJ-SHARMA27 commented Aug 7, 2024

SURAJ-SHARMA27 commented Aug 7, 2024

inodb commented Aug 8, 2024 •

edited

Loading

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

SURAJ-SHARMA27 commented Aug 9, 2024

inodb commented Aug 13, 2024 •

edited

Loading

alisman Aug 13, 2024

SURAJ-SHARMA27 Aug 13, 2024

alisman Aug 13, 2024

SURAJ-SHARMA27 Aug 13, 2024

alisman Aug 13, 2024

SURAJ-SHARMA27 Aug 13, 2024

alisman Aug 13, 2024

SURAJ-SHARMA27 Aug 13, 2024

alisman commented Jan 10, 2025

dippindots commented Jan 14, 2025

alisman commented Jan 14, 2025

alisman Jan 24, 2025

alisman Jan 24, 2025

inodb left a comment

		this.updateLegendWidth();

		if (this.props.horizontalBars !== prevProps.horizontalBars) {

Add Stacked Bar Chart and sorting to Plots Tab #4960

Are you sure you want to change the base?

Add Stacked Bar Chart and sorting to Plots Tab #4960

Conversation

SURAJ-SHARMA27 commented Aug 6, 2024 • edited Loading

Any screenshots or GIFs?

Notify reviewers

netlify bot commented Aug 6, 2024 • edited Loading

✅ Deploy Preview for cbioportalfrontend ready!

inodb commented Aug 7, 2024

schultzn commented Aug 7, 2024

jjgao commented Aug 7, 2024 • edited Loading

SURAJ-SHARMA27 commented Aug 7, 2024

SURAJ-SHARMA27 commented Aug 7, 2024

inodb commented Aug 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SURAJ-SHARMA27 commented Aug 9, 2024

inodb commented Aug 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alisman commented Jan 10, 2025

dippindots commented Jan 14, 2025

alisman commented Jan 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

inodb left a comment

Choose a reason for hiding this comment

SURAJ-SHARMA27 commented Aug 6, 2024 •

edited

Loading

netlify bot commented Aug 6, 2024 •

edited

Loading

jjgao commented Aug 7, 2024 •

edited

Loading

inodb commented Aug 8, 2024 •

edited

Loading

inodb commented Aug 13, 2024 •

edited

Loading