Add truncation of timeline label (#4990)

* Add ellipse for long label in Timeline chart with a tooltip when too truncated. Also add padding between end of label and arrow. * fix: limit width of left bar
cBioPortal · Jan 16, 2025 · b1d675f · b1d675f
1 parent 6908c32
commit b1d675f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/cbioportal-clinical-timeline/src/TrackHeader.tsx b/packages/cbioportal-clinical-timeline/src/TrackHeader.tsx
@@ -4,12 +4,9 @@ import { TICK_AXIS_HEIGHT } from './TickAxis';
 import { CustomTrackSpecification } from './CustomTrack';
 import { TimelineStore } from './TimelineStore';
 import { useObserver } from 'mobx-react-lite';
-import { TruncatedText } from 'cbioportal-frontend-commons';
+import { EllipsisTextTooltip } from 'cbioportal-frontend-commons';
 import { isTrackVisible } from './lib/helpers';
-import LineChartAxis, {
-    LINE_CHART_AXIS_SVG_WIDTH,
-    LINE_CHART_AXIS_TICK_WIDTH,
-} from './LineChartAxis';
+import LineChartAxis, { LINE_CHART_AXIS_SVG_WIDTH } from './LineChartAxis';
 import ReactDOM from 'react-dom';
 
 interface ITrackHeaderProps {
@@ -50,7 +47,7 @@ const TrackHeader: React.FunctionComponent<ITrackHeaderProps> = function({
                 onMouseLeave={handleTrackHover}
             >
                 <span>
-                    <TruncatedText text={getTrackLabel(track)} maxLength={20} />
+                    <EllipsisTextTooltip text={getTrackLabel(track)} />
                 </span>
                 {isLineChartTrack && (
                     <div

diff --git a/packages/cbioportal-clinical-timeline/src/timeline.scss b/packages/cbioportal-clinical-timeline/src/timeline.scss
@@ -79,16 +79,20 @@ $tl-fontsize: 12px;
 }
 
 .tl-timeline-leftbar {
+    max-width: 150px;
     .tl-timeline-tracklabels {
         overflow: hidden;
         display: flex;
         flex-direction: column;
-        font-size: $tl-fontsize;
+        font-size: 12.5px; // The first tooltip does not show up if the font-size is too small (<12px)
         > div {
             white-space: nowrap;
             border-bottom: 1px dashed #eee;
-            padding-right: 10px;
+            padding-right: 15px;
             padding-top: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            //max-width: 100%;
         }
     }
 }