cbioportal-frontend
cbioportal-frontend copied to clipboard
Add truncation of timeline label
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
Demo of tooltip. Notes, I could not find other example so I "forced" ellipse by limiting timeline left bar size.
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...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
@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
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.