@workflow/web-shared 5.0.0-beta.27 → 5.0.0-beta.29

package/src/components/new-trace-viewer/components/split-pane.tsx

@@ -3,14 +3,13 @@
 import {
   Children,
   type ReactNode,
-  type PointerEvent as ReactPointerEvent,
   type RefObject,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from 'react';
 import { cn } from '../../../lib/cn';
+import { DraggableBorder } from './draggable-border';
 import {
   DEFAULT_START_PX,
   GUTTER_PX,
@@ -19,12 +18,12 @@ import {
 } from './pane-constants';
 import { useElementWidth } from './use-element-width';
 
+const SPLIT_PANE_START_ID = 'trace-split-start';
+
 export interface SplitPaneProps {
   children: ReactNode;
   className?: string;
-  /** Fixed (non-scrolling) header rendered above the start pane. */
   startHeader?: ReactNode;
-  /** Fixed (non-scrolling) header rendered above the end pane. */
   endHeader?: ReactNode;
   scrollContainerRef?: RefObject<HTMLDivElement | null>;
 }
@@ -42,25 +41,11 @@ export function SplitPane({
   }
   const [start, end] = parts;
 
-  // `startPx` is the user's preferred width; the rendered width is derived by
-  // clamping against the live container width (same model as the detail
-  // panel), so shrinking the container compresses the pane without destroying
-  // the preference, and re-growing restores it.
   const [startPx, setStartPx] = useState(DEFAULT_START_PX);
-  const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const gutterRef = useRef<HTMLDivElement>(null);
-  const rafRef = useRef<number | null>(null);
-  const pendingPx = useRef(DEFAULT_START_PX);
-  const pointerIdRef = useRef<number | null>(null);
+  const startRef = useRef<HTMLDivElement>(null);
   const containerWidth = useElementWidth(containerRef);
 
-  useEffect(() => {
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    };
-  }, []);
-
   const setContainerRef = useCallback(
     (node: HTMLDivElement | null) => {
       containerRef.current = node;
@@ -78,65 +63,15 @@ export function SplitPane({
     return Math.min(maxPx, Math.max(MIN_PX, px));
   }, []);
 
-  useEffect(() => {
-    if (!isDragging) return;
-
-    const onPointerMove = (e: globalThis.PointerEvent) => {
-      if (e.pointerId !== pointerIdRef.current) return;
-      const container = containerRef.current;
-      if (!container) return;
-      const rect = container.getBoundingClientRect();
-      pendingPx.current = clampPx(e.clientX - rect.left);
-      if (!rafRef.current) {
-        rafRef.current = requestAnimationFrame(() => {
-          rafRef.current = null;
-          setStartPx(pendingPx.current);
-        });
-      }
-    };
-
-    const onPointerUp = (e: globalThis.PointerEvent) => {
-      if (e.pointerId !== pointerIdRef.current) return;
-      const gutter = gutterRef.current;
-      if (gutter?.hasPointerCapture(e.pointerId)) {
-        gutter.releasePointerCapture(e.pointerId);
-      }
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      pointerIdRef.current = null;
-      setIsDragging(false);
-    };
-
-    document.addEventListener('pointermove', onPointerMove);
-    document.addEventListener('pointerup', onPointerUp);
-    document.addEventListener('pointercancel', onPointerUp);
-
-    return () => {
-      document.removeEventListener('pointermove', onPointerMove);
-      document.removeEventListener('pointerup', onPointerUp);
-      document.removeEventListener('pointercancel', onPointerUp);
-    };
-  }, [isDragging, clampPx]);
-
-  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
-    e.currentTarget.setPointerCapture(e.pointerId);
-    pointerIdRef.current = e.pointerId;
-    setIsDragging(true);
-  };
-
-  const handleLostPointerCapture = () => {
-    pointerIdRef.current = null;
-    setIsDragging(false);
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
-  };
+  const handleWidthChange = useCallback(
+    (next: number) => setStartPx(clampPx(next)),
+    [clampPx]
+  );
+  const handleReset = useCallback(
+    () => setStartPx(clampPx(DEFAULT_START_PX)),
+    [clampPx]
+  );
 
-  // Floor applied last so the start column can never collapse below MIN_PX
-  // (which would produce an invalid negative grid track on tiny containers).
   const effectiveStartPx =
     containerWidth > 0
       ? Math.max(MIN_PX, Math.min(containerWidth - MIN_PX - GUTTER_PX, startPx))
@@ -144,18 +79,9 @@ export function SplitPane({
 
   const colTemplate = paneColTemplate(effectiveStartPx);
 
-  const gutter = (
-    <div
-      ref={gutterRef}
-      className="relative z-20 isolate flex shrink-0 cursor-col-resize justify-center"
-      onPointerDown={handlePointerDown}
-      onLostPointerCapture={handleLostPointerCapture}
-    >
-      <span
-        className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
-        aria-hidden
-      />
-    </div>
+  const maxStartPx = Math.max(
+    MIN_PX,
+    containerWidth > 0 ? containerWidth - MIN_PX - GUTTER_PX : startPx
   );
 
   return (
@@ -172,14 +98,32 @@ export function SplitPane({
       </div>
       <div
         ref={setContainerRef}
-        className={cn(
-          'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
-          isDragging && 'select-none'
-        )}
+        className="grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto"
         style={{ gridTemplateColumns: colTemplate }}
       >
-        {start}
-        {gutter}
+        <div ref={startRef} id={SPLIT_PANE_START_ID} className="min-w-0">
+          {start}
+        </div>
+        <div className="relative z-20 isolate flex shrink-0 justify-center">
+          <span
+            className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
+            aria-hidden
+          />
+          <DraggableBorder
+            element={startRef}
+            position="right"
+            onWidthChange={handleWidthChange}
+            onReset={handleReset}
+            aria-label="Resize event list"
+            aria-controls={SPLIT_PANE_START_ID}
+            aria-valuemin={MIN_PX}
+            aria-valuemax={maxStartPx}
+            aria-valuenow={Math.min(
+              Math.max(Math.round(effectiveStartPx), MIN_PX),
+              maxStartPx
+            )}
+          />
+        </div>
         {end}
       </div>
     </div>

package/src/components/new-trace-viewer/components/timeline.tsx

@@ -13,7 +13,6 @@ import {
 } from 'react';
 import { cn } from '../../../lib/cn';
 import {
-  formatDuration,
   formatDurationPrecise,
   getHighResInMs,
 } from '../../trace-viewer/util/timing';
@@ -32,6 +31,7 @@ import {
   computeSpanSegments,
   getResourceColor,
   getSpanDurationMs,
+  isSpanErrored,
 } from '../utils';
 import {
   cullCollidingMarkers,
@@ -451,9 +451,7 @@ const TimelineBar = memo(function TimelineBar({
   const hasMarkers =
     markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
 
-  const workflowStatus = (span.attributes.data as Record<string, unknown>)
-    ?.status as string | undefined;
-  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
+  const isErrored = isSpanErrored(span);
   const colors = getResourceColor(span.resource);
   const fallbackBg = isErrored
     ? (colors.errorBg ?? 'var(--ds-red-200)')
@@ -733,7 +731,7 @@ export function Timeline({
               key={gap.rowIndex}
               leftFrac={gap.leftFrac}
               rightFrac={gap.rightFrac}
-              label={formatDuration(gap.gapMs, true)}
+              label={formatDurationPrecise(gap.gapMs)}
               rowIndex={gap.rowIndex}
             />
           ))}

package/src/components/new-trace-viewer/components/trace-viewer-skeleton.tsx

@@ -33,6 +33,23 @@ export function TraceViewerSkeleton() {
     >
       <span className="sr-only">Loading trace…</span>
 
+      {/* Minimap strip: thin density lines tracing the same shape as the bars */}
+      <div className="relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400">
+        <div className="absolute inset-x-4 top-[6px]">
+          {ROWS.map((row, index) => (
+            <Skeleton
+              key={row.id}
+              className="absolute h-[3px] rounded-full"
+              style={{
+                left: `${row.off}%`,
+                width: `${row.bar}%`,
+                top: index * 3.5,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
       {/* Header row: search header | divider | timeline header */}
       <div
         className="shrink-0 grid"

package/src/components/new-trace-viewer/trace-viewer.tsx

@@ -12,13 +12,17 @@ import {
 } from 'react';
 import { useLoadMoreOnScroll } from '../../hooks/use-load-more-on-scroll';
 import { useReducedMotion } from '../../hooks/use-reduced-motion';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import {
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
 import { Kbd } from '../ui/kbd';
 import { Spinner } from '../ui/spinner';
 import { TooltipProvider } from '../ui/tooltip';
 import { TraceDetailPanel } from './components/detail-panel';
 import EventList from './components/event-list';
+import { Minimap } from './components/minimap';
 import { SplitPane } from './components/split-pane';
 import {
   TIMELINE_PADDING_PX,
@@ -30,7 +34,14 @@ import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { searchSpans } from './search';
 import type { TraceWithMeta } from './types';
-import { computeRootBounds, computeTimeMarkers } from './utils';
+import {
+  clampViewportToRoot,
+  computeRootBounds,
+  computeTimeMarkers,
+  type ViewportRange,
+  wheelDeltaToPixels,
+  wheelZoomScaleFactor,
+} from './utils';
 
 interface NewTraceViewerProps {
   trace: TraceWithMeta;
@@ -43,17 +54,12 @@ const MIN_VIEWPORT_MS = 0.001;
 
 const ZOOM_DEBOUNCE_MS = 150;
 
-interface Viewport {
-  start: number;
-  end: number;
-}
-
-function useAnimatedViewport(initial: Viewport) {
-  const [viewport, setViewportState] = useState<Viewport>(initial);
+function useAnimatedViewport(initial: ViewportRange) {
+  const [viewport, setViewportState] = useState<ViewportRange>(initial);
   const animRef = useRef<{
     raf: number;
-    from: Viewport;
-    to: Viewport;
+    from: ViewportRange;
+    to: ViewportRange;
     start: number;
   } | null>(null);
   const currentRef = useRef(initial);
@@ -68,7 +74,7 @@ function useAnimatedViewport(initial: Viewport) {
   }, []);
 
   const animateTo = useCallback(
-    (target: Viewport) => {
+    (target: ViewportRange) => {
       cancel();
 
       if (reducedMotion) {
@@ -81,8 +87,8 @@ function useAnimatedViewport(initial: Viewport) {
       const anim = { raf: 0, from, to: target, start: performance.now() };
 
       const tick = () => {
-        const t = Math.min((performance.now() - anim.start) / 150, 1);
-        const e = 1 - (1 - t) * (1 - t);
+        const t = Math.min((performance.now() - anim.start) / 240, 1);
+        const e = t < 0.5 ? 8 * t * t * t * t : 1 - (-2 * t + 2) ** 4 / 2;
         setViewportState({
           start: anim.from.start + (anim.to.start - anim.from.start) * e,
           end: anim.from.end + (anim.to.end - anim.from.end) * e,
@@ -98,7 +104,7 @@ function useAnimatedViewport(initial: Viewport) {
   );
 
   const setViewport = useCallback(
-    (update: Viewport | ((prev: Viewport) => Viewport)) => {
+    (update: ViewportRange | ((prev: ViewportRange) => ViewportRange)) => {
       cancel();
       if (typeof update === 'function') {
         setViewportState((prev) => {
@@ -180,7 +186,7 @@ function NewTraceViewerContent({
     end: root.startTime + root.duration,
   });
 
-  const prevRootRef = useRef<Viewport>({
+  const prevRootRef = useRef<ViewportRange>({
     start: root.startTime,
     end: root.startTime + root.duration,
   });
@@ -221,60 +227,45 @@ function NewTraceViewerContent({
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  const clampToRoot = useCallback(
+    (next: ViewportRange): ViewportRange =>
+      clampViewportToRoot(next, root.startTime, root.endTime, MIN_VIEWPORT_MS),
+    [root.startTime, root.endTime]
+  );
+
   // Pan (keeping the current zoom) so `timeMs` is centered in view — used by the
   // off-screen marker indicators to scroll their marker into view.
   const handleRevealTime = useCallback(
     (timeMs: number) => {
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
       const { start, end } = viewportRef.current;
       const duration = end - start;
-      let newStart = timeMs - duration / 2;
-      let newEnd = timeMs + duration / 2;
-      if (newStart < rootS) {
-        newStart = rootS;
-        newEnd = rootS + duration;
-      }
-      if (newEnd > rootE) {
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - duration);
-      }
-      animateTo({ start: newStart, end: newEnd });
+      animateTo(
+        clampToRoot({
+          start: timeMs - duration / 2,
+          end: timeMs + duration / 2,
+        })
+      );
     },
-    [animateTo, root.startTime, root.duration]
+    [animateTo, clampToRoot]
   );
 
   const ZOOM_FACTOR = 0.5;
 
   const zoomBy = useCallback(
     (factor: number) => {
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
-      const rootD = root.duration;
-
       setViewport((prev) => {
-        const prevDuration = prev.end - prev.start;
         const center = (prev.start + prev.end) / 2;
         const newDuration = Math.max(
           MIN_VIEWPORT_MS,
-          Math.min(rootD, prevDuration * factor)
+          (prev.end - prev.start) * factor
         );
-        let newStart = center - newDuration / 2;
-        let newEnd = center + newDuration / 2;
-
-        if (newStart < rootS) {
-          newStart = rootS;
-          newEnd = rootS + newDuration;
-        }
-        if (newEnd > rootE) {
-          newEnd = rootE;
-          newStart = Math.max(rootS, rootE - newDuration);
-        }
-
-        return { start: newStart, end: newEnd };
+        return clampToRoot({
+          start: center - newDuration / 2,
+          end: center + newDuration / 2,
+        });
       });
     },
-    [setViewport, root.startTime, root.duration]
+    [setViewport, clampToRoot]
   );
 
   const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
@@ -291,12 +282,8 @@ function NewTraceViewerContent({
       const spanEnd = getHighResInMs(span.endTime);
       const spanDuration = spanEnd - spanStart;
 
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
-      const rootD = root.duration;
-
-      if (spanDuration > rootD * 0.8) {
-        animateTo({ start: rootS, end: rootE });
+      if (spanDuration > root.duration * 0.8) {
+        animateTo({ start: root.startTime, end: root.endTime });
         return;
       }
 
@@ -310,20 +297,16 @@ function NewTraceViewerContent({
         newEnd = center + MIN_VIEWPORT_MS / 2;
       }
 
-      if (newStart < rootS) {
-        const duration = newEnd - newStart;
-        newStart = rootS;
-        newEnd = Math.min(rootE, rootS + duration);
-      }
-      if (newEnd > rootE) {
-        const duration = newEnd - newStart;
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - duration);
-      }
-
-      animateTo({ start: newStart, end: newEnd });
+      animateTo(clampToRoot({ start: newStart, end: newEnd }));
     },
-    [animateTo, trace.spans, root.startTime, root.duration]
+    [
+      animateTo,
+      trace.spans,
+      root.startTime,
+      root.endTime,
+      root.duration,
+      clampToRoot,
+    ]
   );
 
   // Bring a row into view when keyboard/button navigation lands on a span that
@@ -423,7 +406,7 @@ function NewTraceViewerContent({
     if (hoverFraction == null) return null;
     const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
-    return { fraction: hoverFraction, label: formatDuration(offset, true) };
+    return { fraction: hoverFraction, label: formatDurationPrecise(offset) };
   }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
 
   const handleTimelineMouseMove = useCallback(
@@ -451,12 +434,7 @@ function NewTraceViewerContent({
 
   useEffect(() => {
     const el = timelineRef.current;
-    if (!el) return;
-
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
-    const rootD = root.duration;
-    if (rootD <= 0) return;
+    if (!el || root.duration <= 0) return;
 
     const onWheel = (e: WheelEvent): void => {
       const isZoomGesture = e.ctrlKey || e.metaKey;
@@ -470,9 +448,6 @@ function NewTraceViewerContent({
       if (contentWidth <= 0) return;
 
       if (isZoomGesture) {
-        let dy = e.deltaY;
-        if (e.deltaMode === 1) dy *= 16;
-
         const cursorFraction = Math.max(
           0,
           Math.min(
@@ -480,59 +455,37 @@ function NewTraceViewerContent({
             (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
           )
         );
-        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
-        const scaleFactor = 2 ** (dy / (isMouseWheel ? 200 : 60));
+        const scaleFactor = wheelZoomScaleFactor(e);
 
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
+          // Clamp the duration before anchoring so the cursor keeps its
+          // fraction even when the zoom hits the min/max bounds.
           const newDuration = Math.max(
             MIN_VIEWPORT_MS,
-            Math.min(rootD, prevDuration * scaleFactor)
+            Math.min(root.duration, prevDuration * scaleFactor)
           );
-
-          let newStart = cursorTime - cursorFraction * newDuration;
-          let newEnd = newStart + newDuration;
-
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + newDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - newDuration);
-          }
-
-          return { start: newStart, end: newEnd };
+          return clampToRoot({
+            start: cursorTime - cursorFraction * newDuration,
+            end: cursorTime + (1 - cursorFraction) * newDuration,
+          });
         });
       } else {
-        let dx = e.deltaX;
-        if (e.deltaMode === 1) dx *= 16;
-
+        const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode);
         setViewport((prev) => {
-          const prevDuration = prev.end - prev.start;
-          const panAmount = (dx / contentWidth) * prevDuration;
-
-          let newStart = prev.start + panAmount;
-          let newEnd = prev.end + panAmount;
-
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + prevDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - prevDuration);
-          }
-
-          return { start: newStart, end: newEnd };
+          const panAmount = (dx / contentWidth) * (prev.end - prev.start);
+          return clampToRoot({
+            start: prev.start + panAmount,
+            end: prev.end + panAmount,
+          });
         });
       }
     };
 
     el.addEventListener('wheel', onWheel, { passive: false });
     return () => el.removeEventListener('wheel', onWheel);
-  }, [root.startTime, root.duration, setViewport]);
+  }, [root.duration, setViewport, clampToRoot]);
 
   return (
     <div
@@ -542,8 +495,16 @@ function NewTraceViewerContent({
     >
       <div
         id="trace-parent"
-        className="flex-1 min-w-0 grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+        className="flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
+        <Minimap
+          spans={trace.spans}
+          root={root}
+          viewport={viewport}
+          minViewportMs={MIN_VIEWPORT_MS}
+          onViewportChange={setViewport}
+          onAnimateTo={animateTo}
+        />
         <SplitPane
           scrollContainerRef={scrollContainerRef}
           startHeader={
@@ -603,6 +564,7 @@ function NewTraceViewerContent({
           {/* biome-ignore lint/a11y/noStaticElementInteractions: timeline hover and wheel gestures are pointer-only annotations */}
           <div
             ref={timelineRef}
+            id="trace-timeline"
             className="block min-h-0 overflow-visible relative"
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}

package/src/components/new-trace-viewer/utils.test.ts

@@ -1,9 +1,11 @@
 import { describe, expect, it } from 'vitest';
 import type { Span, SpanEvent } from './types';
 import {
+  clampViewportToRoot,
   computeOffscreenMarkers,
   computeSpanMarkers,
   computeSpanSegments,
+  computeTimeMarkers,
 } from './utils';
 
 /** Build a high-res timestamp tuple ([seconds, nanoseconds]) for a given ms. */
@@ -180,3 +182,66 @@ describe('computeOffscreenMarkers', () => {
     });
   });
 });
+
+describe('clampViewportToRoot', () => {
+  const clamp = (next: { start: number; end: number }) =>
+    clampViewportToRoot(next, 100, 1100, 10);
+
+  it('passes through a window already inside the root', () => {
+    expect(clamp({ start: 200, end: 400 })).toEqual({ start: 200, end: 400 });
+  });
+
+  it('shifts a window past the left edge without changing its duration', () => {
+    expect(clamp({ start: 50, end: 250 })).toEqual({ start: 100, end: 300 });
+  });
+
+  it('shifts a window past the right edge without changing its duration', () => {
+    expect(clamp({ start: 1000, end: 1200 })).toEqual({
+      start: 900,
+      end: 1100,
+    });
+  });
+
+  it('clamps a window wider than the root to the full extent', () => {
+    expect(clamp({ start: 0, end: 5000 })).toEqual({ start: 100, end: 1100 });
+  });
+
+  it('enforces the minimum duration', () => {
+    expect(clamp({ start: 500, end: 502 })).toEqual({ start: 500, end: 510 });
+  });
+
+  it('keeps a minimum-duration window inside the root near the right edge', () => {
+    expect(clamp({ start: 1098, end: 1099 })).toEqual({
+      start: 1090,
+      end: 1100,
+    });
+  });
+});
+
+describe('computeTimeMarkers', () => {
+  it('emits distinct, precise labels across a sub-second-step window', () => {
+    // A ~3s window drops the tick step to 500ms. Before the fix this rendered
+    // duplicate "2s, 2s, 3s, 3s" labels; now each tick is distinct.
+    const labels = computeTimeMarkers(3000, 0).map((m) => m.label);
+    expect(labels).toEqual(['0s', '500ms', '1s', '1.5s', '2s', '2.5s', '3s']);
+    expect(new Set(labels).size).toBe(labels.length);
+  });
+
+  it('keeps clean whole-second labels when the step is >=1s', () => {
+    const labels = computeTimeMarkers(10_000, 0).map((m) => m.label);
+    expect(labels).toEqual(['0s', '2s', '4s', '6s', '8s', '10s']);
+  });
+
+  it('still reads in ms when super zoomed in', () => {
+    const labels = computeTimeMarkers(120, 0).map((m) => m.label);
+    expect(labels).toEqual([
+      '0s',
+      '20ms',
+      '40ms',
+      '60ms',
+      '80ms',
+      '100ms',
+      '120ms',
+    ]);
+  });
+});