FE-570: Replace SVG simulation timeline with uPlot

[kube]

🌟 What is the purpose of this PR?

Replaces the custom SVG simulation timeline chart with uPlot for better performance and rendering quality. Adds hover tooltip, Logic Pro-style ruler with playhead, ruler scrubbing, and full-bleed layout.

🔗 Related links

• FE-570 (internal)

🔍 What does this change?

• Replace SVG chart with uPlot — 2px antialiased lines, HiDPI-aware, streaming data pushed in O(k) directly into columnar arrays
• Hover tooltip — imperative DOM in u.over (zero React renders per mousemove). Run mode uses nearest-series focus; stacked mode walks cumulative bands. Edge-clamps inside the chart area
• Logic Pro-style ruler — top x-axis with separator line. Playhead is a rounded "pin" with triangular tip and white border, dpr-correct. Ruler supports click/drag scrubbing via pointer capture
• Full-bleed layout — SubView.noPadding flag; BottomPanel padding moved from outer container into header/content variants
• Stacked bands — proper bands config so fills don't overlap/darken
• Derived state architecture — useElementSize hook, useStableCallback for stable onScrub, useLatest for fresh store ref in tooltip closures. Chart creation effect only fires on structural changes
• Color-safe fills — color-mix(in srgb) instead of hex-appending 88
• Safe y-scale — Math.max(1, max * 1.05) prevents [0,0] range

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• does not modify any publishable blocks or libraries, or modifications do not need publishing
• modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

❓ How to test this?

1. Checkout the branch
2. Run a simulation (e.g. SIR model or Satellites)
3. Verify the timeline renders with correct data lines
4. Hover — tooltip should show place name, value, time, frame
5. Switch to Stacked mode — bands should have clean non-overlapping colors
6. Click/drag on the plot area and ruler to scrub through frames
7. Verify the playhead pin is correctly sized on HiDPI screens
8. Toggle series visibility via the legend
9. Verify other BottomPanel subviews (Diagnostics, Settings) still have correct padding

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Apr 15, 2026 6:14pm
petrinaut	Ready	Preview, Comment	Apr 15, 2026 6:14pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Apr 15, 2026 6:14pm
hashdotdesign-tokens	Ignored	Preview	Apr 15, 2026 6:14pm

[cursor]

PR Summary

Medium Risk
Replaces core timeline rendering and interaction logic with a new charting library and imperative DOM/canvas hooks, which may affect performance, resizing, and scrubbing/tooltip behavior across simulation restarts.

Overview
Replaces the Simulation Timeline chart implementation from a custom SVG/D3 approach to uPlot, including a new streaming columnar data store to append frames incrementally and update the chart via setData without full recomputation.

Adds a new useElementSize hook and ref-driven tooltip/playhead/scrubbing logic (imperative tooltip in u.over, ruler pointer-capture scrubbing, custom playhead drawing) and simplifies the legend to just series visibility toggles.

Updates BottomPanel/tab layout to support full-bleed tab content via a new SubView.noPadding flag and conditional padding in HorizontalTabsContent, and tweaks BottomPanel header/panel padding. Swaps dependencies from d3-scale to uplot (lockfile updated).

^{Reviewed by Cursor Bugbot for commit 3a23cdd. Bugbot is set up for automated code reviews on this repo. Configure here.}

[augmentcode]

🤖 Augment PR Summary

Summary: Migrates the Simulation Timeline BottomPanel subview from a custom SVG/D3 renderer to uPlot to improve rendering quality (HiDPI/antialiasing) and enable efficient streaming updates.

Changes:

• Adds the uplot dependency and imports its bundled CSS.
• Replaces SVG path generation with an imperative uPlot instance fed by columnar (aligned) arrays built incrementally from simulation frames.
• Implements an imperative hover tooltip mounted into u.over to avoid React re-renders on mousemove.
• Adds a top “ruler” axis with a separator line and a device-pixel playhead “pin”, plus click/drag scrubbing on both plot and ruler areas.
• Introduces SubView.noPadding and adjusts BottomPanel/horizontal tab padding so the timeline can render full-bleed while other subviews keep their inset.

Technical Notes: Legend-driven series visibility is preserved; stacked mode uses cumulative-band hit testing while run mode uses uPlot’s nearest-series focus for tooltip selection.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 4 suggestions posted.

Comment augment review to trigger a new review at any time.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Chart destroyed and recreated on every streaming update
  • I moved total frame clamping to a ref read inside onScrub so its callback identity stays stable and the chart creation effect no longer re-runs on each streaming frame increase.

Or push these changes by commenting:

@cursor push fa7f82c7d6

Preview (fa7f82c7d6)

diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
@@ -679,12 +679,16 @@
   const chartRef = useRef<uPlot | null>(null);
   const playheadFrameRef = useRef(currentFrameIndex);
   playheadFrameRef.current = currentFrameIndex;
+  const totalFramesRef = useRef(totalFrames);
+  totalFramesRef.current = totalFrames;
 
   const onScrub = useCallback(
     (idx: number) => {
-      setCurrentViewedFrame(Math.max(0, Math.min(idx, totalFrames - 1)));
+      setCurrentViewedFrame(
+        Math.max(0, Math.min(idx, totalFramesRef.current - 1)),
+      );
     },
-    [setCurrentViewedFrame, totalFrames],
+    [setCurrentViewedFrame],
   );
 
   // Build data from store

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[kube]

• FE-591: Add Metrics: timeline picker, compiler, and drawer #8633
• FE-588: Add basic Scenario support #8609
• FE-570: Replace SVG simulation timeline with uPlot #8627 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 4b6d979. Configure here.}