Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix surivival chart for large cohort label overlap (number at risk) #4833

Merged

Conversation

TJMKuijpers
Copy link
Contributor

This PR updates the number at risk table behavior in the survival chart for large cohorts (>10.000 samples). The current number-at-risk table plots the number at risk for every time point (under the x-axis, see Figure 1). However, when groups contain many samples, the labels overlap and become unreadable.

We have added a function that calculates whether the labels will overlap. If labels overlap, the number at risk table is updated to remove the overlapping labels (Figure 2). If no labels overlap, we default to the default behavior of the number of risk tables.
Figure 1: old number at risk table for large cohorts when labels overlap
old number at risk table
Figure 2: new number at risk table for large cohorts when labels overlap
New number at risk table

Copy link

netlify bot commented Jan 22, 2024

Deploy Preview for cbioportalfrontend ready!

Name Link
🔨 Latest commit 46ce32e
🔍 Latest deploy log https://app.netlify.com/sites/cbioportalfrontend/deploys/65e9cde06f1e80000955c493
😎 Deploy Preview https://deploy-preview-4833--cbioportalfrontend.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@TJMKuijpers TJMKuijpers marked this pull request as ready for review February 19, 2024 15:27
@TJMKuijpers TJMKuijpers self-assigned this Feb 19, 2024
@TJMKuijpers
Copy link
Contributor Author

@onursumer would be nice if you can provide some code feedback. I will work on updating the tests.

Copy link
Member

@onursumer onursumer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this!

(Requesting changes for some minor issues)

Comment on lines 332 to 343
@observable visible = false;

// determine whether visibility is controlled
// by a store component or by local state
@computed get visibilityState() {
return this.visible;
}
@action setVisibilityState(visible: boolean | undefined) {
if (visible !== undefined) {
this.visible = !!visible;
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see a reference to any of these variables (visible, visibilityState, setVisibilityState). Do we actually use them somewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed this part since it became obsolete.

Comment on lines 888 to 889
@action.bound
calculateLabelWidth(text: number, fontFamily: string, fontSize: number) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not mark this function as an action, because it does not modify any observable values. Also, we can probably use the getTextWidth function instead of writing a new one.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved calculateLabelWidth to the SurvivalUtils so it becomes a function.. I checked and there is a difference in the width if we calculate it for a label or just the plain text. I believe the getTextWidth function would still allow for overlap in the survival chart.


return valueAtAxis;
const addLabelsForTimePoint = (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if we can add a comment somewhere in this function to describe how we decide which labels to hide.

Also, we had a similar issue with the lollipop plot labels. I was wondering if we could generalize that logic and use it here as well. It would probably require some refactoring though. So maybe okay to have two separate implementations for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the explanation on when labels are shown/hidden. Will have to compare to logic of caculateTicks

Copy link
Member

@onursumer onursumer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Almost there! Added a couple more cleanup requests.

src/pages/resultsView/survival/SurvivalUtil.tsx Outdated Show resolved Hide resolved
src/pages/resultsView/survival/SurvivalChart.tsx Outdated Show resolved Hide resolved
src/pages/resultsView/survival/SurvivalUtil.tsx Outdated Show resolved Hide resolved
@TJMKuijpers TJMKuijpers force-pushed the custom-interval-number-at-risk branch 3 times, most recently from ff2ce7b to fd3da6d Compare March 7, 2024 12:57
Logic: when labels overlap, draw label at index 0 and skip all labels at uneven index

Updated PR after code review

Updated util function

Remove commented code which is obsolete

code cleanup

Code cleanup of SurvivalUtil

updated survival chart

resolved rebase conflict

update screenshots
@TJMKuijpers TJMKuijpers force-pushed the custom-interval-number-at-risk branch from 4988f46 to 46ce32e Compare March 7, 2024 14:23
@inodb inodb merged commit 80440f5 into cBioPortal:master Mar 7, 2024
14 of 15 checks passed
@dippindots dippindots changed the title Updated Surivival Chart for large cohort label overlap (number at risk) Fix surivival chart for large cohort label overlap (number at risk) Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants