cbioportal-frontend Add Stacked Bar Chart and sorting to Plots Tab

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

Aug 06 '24 17:08 SURAJ-SHARMA27

Deploy Preview for cbioportalfrontend ready!

Name	Link
Latest commit	33422567bb881422004a0779fddae27d076eb1de
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.

Aug 06 '24 17:08 netlify[bot]

@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

Aug 07 '24 14:08 inodb

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.

Aug 07 '24 14:08 schultzn

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.

Aug 07 '24 15:08 jjgao

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.

Aug 07 '24 15:08 SURAJ-SHARMA27

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

Aug 07 '24 18:08 SURAJ-SHARMA27

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:

Aug 08 '24 12:08 inodb

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

Aug 09 '24 05:08 SURAJ-SHARMA27

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

Aug 13 '24 14:08 inodb

@SURAJ-SHARMA27 Just discussed this during the community call, people liked it! Some more feedback from the group:

When switching to percentage, the bars should sort by the percentage value (rather than absolute value)
On the Table: maybe disable the sort here? Or if it is easy to enable sorting there too, enable it.
Remove "Sort By" on charts where it is not functional (e.g. continuous vs continuous). Currently, the "Sort by" seems to show old values from a previous selection

Aug 13 '24 16:08 inodb

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

yes i fixed it

Aug 13 '24 16:08 SURAJ-SHARMA27

@SURAJ-SHARMA27 Just discussed this during the community call, people liked it! Some more feedback from the group:

When switching to percentage, the bars should sort by the percentage value (rather than absolute value)

On the Table: maybe disable the sort here? Or if it is easy to enable sorting there too, enable it.

Remove "Sort By" on charts where it is not functional (e.g. continuous vs continuous). Currently, the "Sort by" seems to show old values from a previous selection

Thank you @inodb sir, just few more doubts i) This means that when the number of samples is selected from the dropdown, the data should be sorted by the percentage value. ii) Sorting will be shown only for the stacked bar chart; I have fixed that.

Aug 13 '24 17:08 SURAJ-SHARMA27

i) This means that when the number of samples is selected from the dropdown, the data should be sorted by the percentage value.

@SURAJ-SHARMA27 correct

ii) Sorting will be shown only for the stacked bar chart; I have fixed that.

Thanks so much for fixing!

Aug 21 '24 14:08 inodb

i) This means that when the number of samples is selected from the dropdown, the data should be sorted by the percentage value.

@SURAJ-SHARMA27 correct

ii) Sorting will be shown only for the stacked bar chart; I have fixed that.

Thanks so much for fixing!

okay sir, I think I did it correctly. You can review it (pushed already). The bars will be sorted according to the percentages of the selected minor category. If the number of samples is selected from the dropdown, the bars are sorted by the total absolute count for each stack. For alphabetical sorting, the bars will be sorted as usual.

screen-capture (33).webm

Aug 21 '24 16:08 SURAJ-SHARMA27

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: