From 44c7d855bb8c0374ab3fe05dad96f5fa96a3318b Mon Sep 17 00:00:00 2001
From: fabicholas <xxd21135@gmail.com>
Date: Wed, 20 May 2026 00:14:02 -0300
Subject: [PATCH] feat: highlight same-net traces on hover

---
 lib/components/SchematicViewer.tsx  | 10 +++++
 lib/hooks/useSchematicTraceHover.ts | 70 +++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 lib/hooks/useSchematicTraceHover.ts

diff --git a/lib/components/SchematicViewer.tsx b/lib/components/SchematicViewer.tsx
index ab4fd20..e4a9688 100644
--- a/lib/components/SchematicViewer.tsx
+++ b/lib/components/SchematicViewer.tsx
@@ -31,6 +31,7 @@ import { getStoredBoolean, setStoredBoolean } from "lib/hooks/useLocalStorage"
 import { MouseTracker } from "./MouseTracker"
 import { SchematicComponentMouseTarget } from "./SchematicComponentMouseTarget"
 import { SchematicPortMouseTarget } from "./SchematicPortMouseTarget"
+import { useSchematicTraceHover, HIGHLIGHT_COLOR } from "../hooks/useSchematicTraceHover"
 
 interface Props {
   circuitJson: CircuitJson
@@ -166,6 +167,7 @@ export const SchematicViewer = ({
 
   const svgDivRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
+  useSchematicTraceHover({ svgDivRef })
 
   const schematicComponentIds = useMemo(() => {
     try {
@@ -401,6 +403,14 @@ export const SchematicViewer = ({
           {`.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }`}
         </style>
       )}
+      <style>{`
+        .trace-net-highlighted path:not(.trace-invisible-hover-outline) {
+          stroke: ${HIGHLIGHT_COLOR} !important;
+        }
+        .trace-net-highlighted circle.trace-junction {
+          fill: ${HIGHLIGHT_COLOR} !important;
+        }
+      `}</style>
       {onSchematicPortClicked && (
         <style>
           {`[data-schematic-port-id]:hover { cursor: pointer !important; }`}
diff --git a/lib/hooks/useSchematicTraceHover.ts b/lib/hooks/useSchematicTraceHover.ts
new file mode 100644
index 0000000..7a23fa9
--- /dev/null
+++ b/lib/hooks/useSchematicTraceHover.ts
@@ -0,0 +1,70 @@
+import { useEffect } from "react"
+
+const HIGHLIGHT_COLOR = "#e8a020"
+
+export const useSchematicTraceHover = ({
+  svgDivRef,
+  enabled = true,
+}: {
+  svgDivRef: React.RefObject<HTMLDivElement | null>
+  enabled?: boolean
+}) => {
+  useEffect(() => {
+    if (!enabled) return
+    const svgDiv = svgDivRef.current
+    if (!svgDiv) return
+
+    const clearHighlights = () => {
+      svgDiv
+        .querySelectorAll<SVGElement>(".trace-net-highlighted")
+        .forEach((el) => el.classList.remove("trace-net-highlighted"))
+    }
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as SVGElement
+      const traceGroup = target.closest<SVGElement>("[data-schematic-trace-id]")
+      if (!traceGroup) {
+        clearHighlights()
+        return
+      }
+
+      clearHighlights()
+
+      const netKey = traceGroup.getAttribute(
+        "data-subcircuit-connectivity-map-key",
+      )
+
+      if (netKey) {
+        svgDiv
+          .querySelectorAll<SVGElement>(
+            `[data-subcircuit-connectivity-map-key="${CSS.escape(netKey)}"]`,
+          )
+          .forEach((el) => el.classList.add("trace-net-highlighted"))
+      } else {
+        // No net key ΓÇö highlight just this trace
+        traceGroup.classList.add("trace-net-highlighted")
+        // Also highlight its overlay counterpart (same trace-id, different layer)
+        const traceId = traceGroup.getAttribute("data-schematic-trace-id")
+        if (traceId) {
+          svgDiv
+            .querySelectorAll<SVGElement>(
+              `[data-schematic-trace-id="${CSS.escape(traceId)}"]`,
+            )
+            .forEach((el) => el.classList.add("trace-net-highlighted"))
+        }
+      }
+    }
+
+    const handleMouseLeave = () => clearHighlights()
+
+    svgDiv.addEventListener("mouseover", handleMouseOver)
+    svgDiv.addEventListener("mouseleave", handleMouseLeave)
+
+    return () => {
+      svgDiv.removeEventListener("mouseover", handleMouseOver)
+      svgDiv.removeEventListener("mouseleave", handleMouseLeave)
+    }
+  }, [svgDivRef, enabled])
+}
+
+export { HIGHLIGHT_COLOR }