cbioportal-frontend icon indicating copy to clipboard operation
cbioportal-frontend copied to clipboard

Add truncation of timeline label

Open jCHENEBY opened this issue 1 year ago • 3 comments

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

jCHENEBY avatar Sep 03 '24 13:09 jCHENEBY

Deploy Preview for cbioportalfrontend ready!

Name Link
Latest commit 3fbb48593ed9c97f9a5e8cbc9c57c97e6b4bcf65
Latest deploy log https://app.netlify.com/sites/cbioportalfrontend/deploys/6787ea6950a8a40008c450d1
Deploy Preview https://deploy-preview-4990.preview.cbioportal.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.

netlify[bot] avatar Sep 03 '24 13:09 netlify[bot]

@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

alisman avatar Sep 24 '24 20:09 alisman

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.

jCHENEBY avatar Oct 17 '24 16:10 jCHENEBY