From 89f710488f2aaf0a88ce1e2ad23b4bb357c06079 Mon Sep 17 00:00:00 2001
From: mackaman29-6008 <mackaman29-6008@users.noreply.github.com>
Date: Tue, 3 Feb 2026 05:50:55 +0000
Subject: [PATCH 1/2] Highlight connected traces on hover

---
 lib/components/SchematicViewer.tsx            |  17 +++
 .../useHighlightConnectedTracesOnHover.ts     | 129 ++++++++++++++++++
 2 files changed, 146 insertions(+)
 create mode 100644 lib/hooks/useHighlightConnectedTracesOnHover.ts

diff --git a/lib/components/SchematicViewer.tsx b/lib/components/SchematicViewer.tsx
index 94cc6d0..ed13d8b 100644
--- a/lib/components/SchematicViewer.tsx
+++ b/lib/components/SchematicViewer.tsx
@@ -5,6 +5,7 @@ import {
 import { su } from "@tscircuit/soup-util"
 import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
 import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
+import { useHighlightConnectedTracesOnHover } from "lib/hooks/useHighlightConnectedTracesOnHover"
 import { useSchematicGroupsOverlay } from "lib/hooks/useSchematicGroupsOverlay"
 import { enableDebug } from "lib/utils/debug"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -337,6 +338,11 @@ export const SchematicViewer = ({
     editEvents: editEventsWithUnappliedEditEvents,
   })
 
+  useHighlightConnectedTracesOnHover({
+    svgDivRef,
+    circuitJson,
+  })
+
   // Add group overlays when enabled
   useSchematicGroupsOverlay({
     svgDivRef,
@@ -388,6 +394,17 @@ export const SchematicViewer = ({
 
   return (
     <MouseTracker>
+      <style>
+        {`
+          .trace.trace-hovered {
+            filter: invert(1);
+          }
+
+          .trace.trace-hovered .trace-crossing-outline {
+            opacity: 0;
+          }
+        `}
+      </style>
       {onSchematicComponentClicked && (
         <style>
           {`.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }`}
diff --git a/lib/hooks/useHighlightConnectedTracesOnHover.ts b/lib/hooks/useHighlightConnectedTracesOnHover.ts
new file mode 100644
index 0000000..87716b4
--- /dev/null
+++ b/lib/hooks/useHighlightConnectedTracesOnHover.ts
@@ -0,0 +1,129 @@
+import { su } from "@tscircuit/soup-util"
+import type { CircuitJson } from "circuit-json"
+import { useEffect, useMemo, useRef } from "react"
+
+const TRACE_HOVER_CLASS = "trace-hovered"
+
+export const useHighlightConnectedTracesOnHover = ({
+  svgDivRef,
+  circuitJson,
+}: {
+  svgDivRef: React.RefObject<HTMLDivElement | null>
+  circuitJson: CircuitJson
+}) => {
+  const { sourceTraceToSchematicTraceIds, schematicTraceToSourceTraceId } =
+    useMemo(() => {
+      const sourceTraceToSchematicTraceIds = new Map<string, string[]>()
+      const schematicTraceToSourceTraceId = new Map<string, string>()
+
+      try {
+        const schematicTraces = su(circuitJson).schematic_trace.list() ?? []
+        for (const trace of schematicTraces) {
+          if (!trace.schematic_trace_id || !trace.source_trace_id) continue
+          const schematicTraceId = trace.schematic_trace_id as string
+          const sourceTraceId = trace.source_trace_id as string
+
+          schematicTraceToSourceTraceId.set(schematicTraceId, sourceTraceId)
+          const existing = sourceTraceToSchematicTraceIds.get(sourceTraceId) ?? []
+          existing.push(schematicTraceId)
+          sourceTraceToSchematicTraceIds.set(sourceTraceId, existing)
+        }
+      } catch (err) {
+        console.error("Failed to map schematic traces", err)
+      }
+
+      return { sourceTraceToSchematicTraceIds, schematicTraceToSourceTraceId }
+    }, [circuitJson])
+
+  const activeSourceTraceIdRef = useRef<string | null>(null)
+  const highlightedTraceIdsRef = useRef<string[]>([])
+
+  useEffect(() => {
+    const svgDiv = svgDivRef.current
+    if (!svgDiv) return
+
+    const clearHighlight = () => {
+      if (!svgDivRef.current) return
+      for (const traceId of highlightedTraceIdsRef.current) {
+        const traceElements = svgDivRef.current.querySelectorAll(
+          `[data-schematic-trace-id="${traceId}"]`,
+        )
+        for (const traceElement of Array.from(traceElements)) {
+          traceElement.classList.remove(TRACE_HOVER_CLASS)
+        }
+      }
+      highlightedTraceIdsRef.current = []
+      activeSourceTraceIdRef.current = null
+    }
+
+    const applyHighlight = (sourceTraceId: string) => {
+      if (!svgDivRef.current) return
+      const traceIds = sourceTraceToSchematicTraceIds.get(sourceTraceId) ?? []
+      if (traceIds.length === 0) {
+        clearHighlight()
+        return
+      }
+
+      highlightedTraceIdsRef.current = traceIds
+      activeSourceTraceIdRef.current = sourceTraceId
+
+      for (const traceId of traceIds) {
+        const traceElements = svgDivRef.current.querySelectorAll(
+          `[data-schematic-trace-id="${traceId}"]`,
+        )
+        for (const traceElement of Array.from(traceElements)) {
+          traceElement.classList.add(TRACE_HOVER_CLASS)
+        }
+      }
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const target = event.target as Element | null
+      if (!target) {
+        clearHighlight()
+        return
+      }
+
+      const traceGroup = target.closest(
+        '[data-circuit-json-type="schematic_trace"]',
+      )
+      if (!traceGroup) {
+        clearHighlight()
+        return
+      }
+
+      const schematicTraceId = traceGroup.getAttribute(
+        "data-schematic-trace-id",
+      )
+      if (!schematicTraceId) {
+        clearHighlight()
+        return
+      }
+
+      const sourceTraceId =
+        schematicTraceToSourceTraceId.get(schematicTraceId) ?? null
+      if (!sourceTraceId) {
+        clearHighlight()
+        return
+      }
+
+      if (sourceTraceId === activeSourceTraceIdRef.current) return
+
+      clearHighlight()
+      applyHighlight(sourceTraceId)
+    }
+
+    const handlePointerLeave = () => {
+      clearHighlight()
+    }
+
+    svgDiv.addEventListener("pointermove", handlePointerMove)
+    svgDiv.addEventListener("pointerleave", handlePointerLeave)
+
+    return () => {
+      svgDiv.removeEventListener("pointermove", handlePointerMove)
+      svgDiv.removeEventListener("pointerleave", handlePointerLeave)
+      clearHighlight()
+    }
+  }, [svgDivRef, sourceTraceToSchematicTraceIds, schematicTraceToSourceTraceId])
+}

From 29d70876916ece884c2d84a942b5c86a8fcb1309 Mon Sep 17 00:00:00 2001
From: mackaman29-6008 <mackaman29-6008@users.noreply.github.com>
Date: Tue, 3 Feb 2026 06:57:01 +0000
Subject: [PATCH 2/2] fix: format

---
 lib/hooks/useHighlightConnectedTracesOnHover.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/hooks/useHighlightConnectedTracesOnHover.ts b/lib/hooks/useHighlightConnectedTracesOnHover.ts
index 87716b4..63e317a 100644
--- a/lib/hooks/useHighlightConnectedTracesOnHover.ts
+++ b/lib/hooks/useHighlightConnectedTracesOnHover.ts
@@ -24,7 +24,8 @@ export const useHighlightConnectedTracesOnHover = ({
           const sourceTraceId = trace.source_trace_id as string
 
           schematicTraceToSourceTraceId.set(schematicTraceId, sourceTraceId)
-          const existing = sourceTraceToSchematicTraceIds.get(sourceTraceId) ?? []
+          const existing =
+            sourceTraceToSchematicTraceIds.get(sourceTraceId) ?? []
           existing.push(schematicTraceId)
           sourceTraceToSchematicTraceIds.set(sourceTraceId, existing)
         }