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

Add truncation of timeline label #4990

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

jCHENEBY
Copy link

@jCHENEBY jCHENEBY commented Sep 3, 2024

Fix cBioPortal/cbioportal#10448. Add truncation to timeline labels. Also add padding between end of label and arrow.

Describe changes proposed in this pull request:

  • Change type of balise for TrackHeader label that display Timeline let bar and modify css accordingly
  • Add some padding to end of label
  • Remove unused import

With added padding
timeline-leftbar-padding

Demo of tooltip. Notes, I could not find other example so I "forced" ellipse by limiting timeline left bar size.
timeline-leftbar-tootips

…truncated. Also add padding between end of label and arrow.
Copy link

netlify bot commented Sep 3, 2024

Deploy Preview for cbioportalfrontend ready!

Name Link
🔨 Latest commit b9fc743
🔍 Latest deploy log https://app.netlify.com/sites/cbioportalfrontend/deploys/6711387d25fc050008b37a77
😎 Deploy Preview https://deploy-preview-4990.cancerrevue.org
📱 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.

@inodb inodb requested a review from alisman September 24, 2024 13:03
@inodb inodb changed the title Fixing #10448 Timeline truncated label Add truncation of timeline label Sep 24, 2024
@alisman
Copy link
Collaborator

alisman commented Sep 24, 2024

@jCHENEBY not sure i'm doing something wrong but in testing it seems like it doesn't ever truncate.
https://genie.cbioportal.org/patient?studyId=crc_public_genie_bpc&caseId=GENIE-DFCI-001292

@jCHENEBY
Copy link
Author

jCHENEBY commented Oct 17, 2024

I had some time to look at it and the issue was that the left bar increased width to fit the label instead of truncated. I have set a fix max width to solve the issue.

I do not have access to the Genie database, but it seemed to work for this patient: https://www.cbioportal.org/patient/genomicEvolution?studyId=brca_hta9_htan_2022&caseId=HTA9_1&genomicEvolutionSettings=%7B%22showTimeline%22%3A%22true%22%2C%22showOnlySelectedMutationsInTable%22%3A%22false%22%7D

I also noticed that when the font-size it set to 12px and lower, the tooltip was not displayed for the first truncated label only. I did a quick and dirty fix and set the font-size for the left-bar at 12.5px. Please let me know if you have a more elegant solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Patientview timeline track labels need truncation and tooltips
3 participants