feat: highlight traces and same-net traces on hover

[aifunmobi]

Summary

• Adds hover highlighting for schematic traces: when hovering over a trace, it and all traces on the same net change color (#60a5fa)
• Precomputes net groups from circuit-json relationships (source_trace → connected_source_port_ids) for efficient pointermove handling
• New useTraceHoverHighlight hook follows the same pattern as existing useChangeSchematicTracesForMovedComponents

Closes tscircuit/tscircuit#1130

/claim #1130

How it works

1. On mount, builds lookup maps from circuitJson: schematic traces → source traces → connected ports
2. Groups traces into nets using BFS over shared port connections
3. On pointermove, detects which trace group the pointer is over via Element.closest("[data-schematic-trace-id]")
4. Highlights all traces in that net by swapping their stroke color; restores originals on pointer leave

Test plan

• Hover over a trace → it turns blue (#60a5fa)
• Other traces on the same net also highlight
• Moving pointer off the trace restores original colors
• Moving between traces on the same net doesn't flicker
• No interference with existing component drag dash animation

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
schematic-viewer	Ready	Preview, Comment	Feb 8, 2026 1:36pm

[aifunmobi]

Demo — Trace Hover Highlighting (example9)

Preview: https://schematic-viewer-git-fork-aifunmobi-fix-trace-0f983c-tscircuit.vercel.app/?fixtureId=%7B%22path%22%3A%22examples%2Fexample9-spice-rc-charging-voltage-divider.fixture.tsx%22%7D

How to test

1. Open the preview link above
2. Hover over any trace in the schematic
3. The hovered trace and all same-net traces change color to blue (#60a5fa)
4. Moving off the trace restores original colors

Same-net grouping verification

In example9, traces are grouped by net using the data-subcircuit-connectivity-map-key SVG attribute:

• schematic_trace_0 (R1→junction) + schematic_trace_1 (junction→R2) share net2 → both highlight together
• schematic_trace_2 is on net3 → highlights independently
• schematic_trace_3 has no net key → highlights as a single trace

Verified via browser console:

// Hovering trace_0 → both net2 traces turn blue
trace_0: stroke="#60a5fa"  // ✅ highlighted
trace_1: stroke="#60a5fa"  // ✅ same-net highlighted
trace_2: stroke="rgb(0, 150, 0)"  // unchanged (different net)
trace_3: stroke="rgb(0, 150, 0)"  // unchanged (no net)

This is the exact issue that caused PRs #142, #149, and #157 to be rejected — incomplete net grouping where only the directly hovered trace highlighted but not all same-net traces.

[aifunmobi]

Demo Video

Example 9 (RC charging voltage divider): Hovering over a trace highlights it and all same-net traces in blue (#60a5fa). Moving off restores original colors. Traces on different nets are unaffected.

Preview: https://schematic-viewer-git-fork-aifunmobi-fix-trace-0f983c-tscircuit.vercel.app/?fixtureId=%7B%22path%22%3A%22examples%2Fexample9-spice-rc-charging-voltage-divider.fixture.tsx%22%7D

[rushabhcodes]

Use the repro give https://tscircuit.com/MrPicklePinosaur/tscircuit_demo#schematic to demonstrate your fix

[aifunmobi]

Demo on MrPicklePinosaur/tscircuit_demo

Added a new fixture (example19-tscircuit-demo) that loads the full MrPicklePinosaur/tscircuit_demo circuit (FT232H USB board — 49 schematic traces, 37 components) directly from the tscircuit registry.

Preview: https://schematic-viewer-git-fork-aifunmobi-fix-trace-0f983c-tscircuit.vercel.app/?fixtureId=%7B%22path%22%3A%22examples%2Fexample19-tscircuit-demo.fixture.tsx%22%7D

How to test

1. Open the preview link above (circuit loads from tscircuit registry API)
2. Hover over any trace in the schematic
3. The hovered trace and all same-net traces highlight in blue (#60a5fa)
4. Moving off restores original colors

This is the exact repro from https://tscircuit.com/MrPicklePinosaur/tscircuit_demo#schematic rendered with our PR's hover highlight hook.

[aifunmobi]

@rushabhcodes Here's the interactive demo using the exact repro you requested:

Preview (MrPicklePinosaur/tscircuit_demo circuit):
https://schematic-viewer-git-fork-aifunmobi-fix-trace-0f983c-tscircuit.vercel.app/?fixtureId=%7B%22path%22%3A%22examples%2Fexample19-tscircuit-demo.fixture.tsx%22%7D

The fixture loads circuit JSON directly from the tscircuit registry API (snippet_id=1bb7c947-85fc-4cbb-bbbe-d326676f4042) — the same data that powers https://tscircuit.com/MrPicklePinosaur/tscircuit_demo#schematic.

Verification (98 traces, 11 nets)

You can verify same-net highlighting in the browser console:

// After hovering over any net1 trace:
document.querySelector('[data-schematic-trace-id="schematic_trace_0"] path:not(.trace-invisible-hover-outline)').getAttribute('stroke')
// → "#60a5fa" (highlighted)

document.querySelector('[data-schematic-trace-id="schematic_trace_1"] path:not(.trace-invisible-hover-outline)').getAttribute('stroke')
// → "#60a5fa" (same net — also highlighted)

document.querySelector('[data-schematic-trace-id="schematic_trace_3"] path:not(.trace-invisible-hover-outline)').getAttribute('stroke')
// → "rgb(0, 150, 0)" (different net — unchanged)

How to test

1. Open the preview link above → click example19-tscircuit-demo in the fixture list
2. Hover over any trace → it and all same-net traces turn blue (#60a5fa)
3. Move off → original colors restore
4. Hover a trace on a different net → only that net highlights

The net grouping uses the data-subcircuit-connectivity-map-key SVG attribute — traces sharing the same key (e.g. unnamedsubcircuit534_connectivity_net1) all highlight together. This is the same approach described in the PR description.

[aifunmobi]

@rushabhcodes Hey! Just checking in — I posted the demo using the MrPicklePinosaur/tscircuit_demo repro circuit 9 days ago. Does that address your feedback? Happy to make any other changes if needed. Thanks!