implement highlight for connected trace when hovering over trace with mouse

[JrmyDev]

This PR implements the trace hover highlighting feature that allows users to visualize electrical connectivity in schematic diagrams. When hovering over any trace, all electrically connected traces in the same net are highlighted, making it easier to understand circuit topology and debug routing issues.

✨ Features Implemented

Core Functionality
✅ Hover Detection: Automatically detects when user hovers over schematic traces
✅ Connectivity Analysis: Uses circuit JSON metadata to find electrically connected traces
✅ Visual Highlighting: Applies CSS-based highlighting with filter: invert(1) to match existing hover behavior
✅ Performance Optimized: CSS-only approach with no SVG manipulation
✅ Clean Integration: Minimal changes to existing codebase

Technical Highlights
✅ MutationObserver: Reliable detection of SVG loading for proper timing
✅ Electrical Accuracy: Uses subcircuit_connectivity_map_key for precise connectivity detection
✅ Graceful Fallbacks: Handles edge cases and ID mismatches robustly
✅ Memory Management: Proper cleanup of event listeners and timeouts

New Files Created:

• useSubTraceHover.ts Main React hook for trace hover functionality
• trace-connectivity.ts Electrical connectivity detection logic
• trace-highlighting-styles.ts CSS injection for highlighting styles
• example13-trace-hover-highlighting-demo.fixture.tsx Demo circuit showcasing the feature

Files Modified
Minimal Changes Made:
SchematicViewer.tsx Added 2 lines:

• Import: import { useSubTraceHover } from "lib/hooks/useSubTraceHover"
• Hook call: [useSubTraceHover({ svgDivRef, circuitJson, enabled: true })]

🏗️ Architecture
Clean Separation of Concerns:

Key Design Decisions:

• CSS-only highlighting - No SVG DOM manipulation for performance
• Circuit JSON metadata - Uses existing connectivity data from circuit-to-svg
• Event delegation - Efficient event handling with MutationObserver
• Minimal footprint - Only 2 lines added to main component

/claim #117

Enregistrement.de.l.ecran.2025-09-03.a.14.58.13.mov

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
schematic-viewer	Ready	Preview	Comment	Sep 3, 2025 8:14pm

[seveibar]

Suggested change

	export const useSubTraceHover = ({
	export const useConnectedTracesHoverHighlighting = ({

[seveibar]

Good, only minor comments

[JrmyDev]

Good, only minor comments

Thanks ! Modifications done

[seveibar]

@JrmyDev seems now there's a formatting issue (should be caught in CI, but that's a different issue)

[JrmyDev]

Hmm seems my vscode auto applied on save... will rollback and apply modification only

[ShiboSoftwareDev]

@seveibar this implementation doesn't work, I'm diving into the connectivity issue which has to be fixed first

[seveibar]

@ShiboSoftwareDev it seems he's just using subcircuit_connectivity_key to determine if traces are connected. AFAIK that is a stable approach, even as we fix other bugs. It could even help fix other bugs

[ShiboSoftwareDev]

@seveibar check the deployment

[seveibar]

Kapture.2025-09-03.at.13.08.29.mp4

ahh yea you're right, this doesn't work, must be a flaw in the logic

[seveibar]

some kind of flaw in the logic, see video in comment

[JrmyDev]

ahh yea you're right, this doesn't work, must be a flaw in the logic

correct, might be an hovering issue... will dive

[techmannih]

its completed in circuit-to-svg