fix comment

Author: theocrsb

front/ui/ui-charts/src/spaceTimeChart/components/TrainInfoBar.tsx

@@ -12,10 +12,23 @@ import { useIntervalPositions } from './useIntervalPositions';
 const BAR_FILL = chroma(BROWN_10).alpha(0.3).css();
 const BAR_STROKE = chroma(BROWN_70).alpha(0.3).css();
 const BAR_HEIGHT = 24;
-const BAR_PADDING_H = 8;
+const BAR_PADDING_LEFT = 8;
+const BAR_PADDING_RIGHT = 4;
 const BAR_BOTTOM_OFFSET = 17;
 const BAR_RADIUS = 3;
-const BAR_TEXT_GAP = 4; // gap between flex spans
+const ELLIPSIS = '...';
+
+const truncateText = (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => {
+  if (ctx.measureText(text).width <= maxWidth) return text;
+
+  const ellipsisWidth = ctx.measureText(ELLIPSIS).width;
+  let truncatedText = '';
+  for (const character of text) {
+    if (ctx.measureText(truncatedText + character).width + ellipsisWidth > maxWidth) break;
+    truncatedText += character;
+  }
+  return `${truncatedText}${ELLIPSIS}`;
+};
 
 export type TrainInfoBarProps = {
   /** Length (in ms) of the train's time window. */
@@ -57,15 +70,18 @@ export const TrainInfoBar = ({ duration, origin = 0, name, intervalLabel }: Trai
         // Clip to bar interior to replicate overflow: hidden.
         ctx.save();
         ctx.beginPath();
-        ctx.rect(left + BAR_PADDING_H, yTop, width - BAR_PADDING_H * 2, BAR_HEIGHT);
+        ctx.rect(
+          left + BAR_PADDING_LEFT,
+          yTop,
+          width - BAR_PADDING_LEFT - BAR_PADDING_RIGHT,
+          BAR_HEIGHT
+        );
         ctx.clip();
         ctx.fillStyle = '#000000';
         ctx.textAlign = 'left';
-        let textX = left + BAR_PADDING_H;
-        for (const part of [name, '|', intervalLabel]) {
-          ctx.fillText(part, textX, textY);
-          textX += ctx.measureText(part).width + BAR_TEXT_GAP;
-        }
+        const text = `${name} | ${intervalLabel}`;
+        const textWidth = width - BAR_PADDING_LEFT - BAR_PADDING_RIGHT;
+        ctx.fillText(truncateText(ctx, text, textWidth), left + BAR_PADDING_LEFT, textY);
         ctx.restore();
       }
     },