fix: highlight all same-net traces on hover

.gitignore

@@ -17,3 +17,4 @@ cosmos-export
 .env
 lib/workers/spice-simulation.worker.blob.js
 .cursor
+package-lock.json

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 { useTraceHoverHighlighting } from "lib/hooks/useTraceHoverHighlighting"
 
 interface Props {
   circuitJson: CircuitJson
@@ -345,6 +346,13 @@ export const SchematicViewer = ({
     editEvents: editEventsWithUnappliedEditEvents,
   })
 
+  useTraceHoverHighlighting({
+    svgDivRef,
+    circuitJson,
+    circuitJsonKey,
+    enabled: !editModeEnabled,
+  })
+
   // Add group overlays when enabled
   useSchematicGroupsOverlay({
     svgDivRef,

lib/hooks/useTraceHoverHighlighting.ts

@@ -0,0 +1,78 @@
+import { useEffect, useMemo } from "react"
+import type { CircuitJson } from "circuit-json"
+import { getSchematicTraceNetKeyMap } from "lib/utils/get-schematic-trace-net-keys"
+
+const HOVER_FILTER =
+  "brightness(1.3) drop-shadow(0 0 3px rgba(255, 107, 53, 0.5))"
+
+export const useTraceHoverHighlighting = ({
+  svgDivRef,
+  circuitJson,
+  circuitJsonKey,
+  enabled,
+}: {
+  svgDivRef: React.RefObject<HTMLDivElement | null>
+  circuitJson: CircuitJson
+  circuitJsonKey: string
+  enabled: boolean
+}) => {
+  const schematicTraceNetKeyMap = useMemo(
+    () => getSchematicTraceNetKeyMap(circuitJson),
+    [circuitJsonKey, circuitJson],
+  )
+
+  useEffect(() => {
+    const svgRoot = svgDivRef.current
+    if (!svgRoot) return
+
+    const traceGroups = Array.from(
+      svgRoot.querySelectorAll<SVGGElement>(
+        '[data-circuit-json-type="schematic_trace"][data-schematic-trace-id]',
+      ),
+    )
+
+    const netKeyToElements = new Map<string, SVGGElement[]>()
+
+    for (const el of traceGroups) {
+      const id = el.dataset.schematicTraceId
+      if (!id) continue
+      const netKey = schematicTraceNetKeyMap.get(id)
+      const key = netKey ?? `single:${id}`
+      if (!netKeyToElements.has(key)) {
+        netKeyToElements.set(key, [])
+      }
+      netKeyToElements.get(key)!.push(el)
+    }
+
+    const cleanupCallbacks: Array<() => void> = []
+
+    for (const sameNetElements of netKeyToElements.values()) {
+      const applyHover = () => {
+        if (!enabled) return
+        for (const el of sameNetElements) {
+          el.style.filter = HOVER_FILTER
+        }
+      }
+
+      const removeHover = () => {
+        for (const el of sameNetElements) {
+          el.style.filter = ""
+        }
+      }
+
+      for (const el of sameNetElements) {
+        el.addEventListener("mouseenter", applyHover)
+        el.addEventListener("mouseleave", removeHover)
+        cleanupCallbacks.push(() => {
+          el.removeEventListener("mouseenter", applyHover)
+          el.removeEventListener("mouseleave", removeHover)
+          el.style.filter = ""
+        })
+      }
+    }
+
+    return () => {
+      for (const cleanup of cleanupCallbacks) cleanup()
+    }
+  }, [circuitJsonKey, svgDivRef, schematicTraceNetKeyMap, enabled])
+}

lib/utils/get-schematic-trace-net-keys.test.ts

@@ -0,0 +1,145 @@
+import { expect, test } from "bun:test"
+import {
+  getSchematicTraceNetKeyMap,
+  getSourceTraceNetKeyMap,
+  getSameNetSchematicTraceIdsMap,
+} from "./get-schematic-trace-net-keys"
+
+test("groups source traces by shared source ports transitively", () => {
+  const sourceTraceNetKeyMap = getSourceTraceNetKeyMap([
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_1",
+      connected_source_port_ids: ["source_port_1", "source_port_2"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_2",
+      connected_source_port_ids: ["source_port_2", "source_port_3"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_3",
+      connected_source_port_ids: ["source_port_4", "source_port_5"],
+      connected_source_net_ids: [],
+    },
+  ] as any)
+
+  expect(sourceTraceNetKeyMap.get("source_trace_1")!).toBe(
+    sourceTraceNetKeyMap.get("source_trace_2")!,
+  )
+  expect(sourceTraceNetKeyMap.get("source_trace_1")!).not.toBe(
+    sourceTraceNetKeyMap.get("source_trace_3")!,
+  )
+})
+
+test("maps schematic trace ids to their source trace net groups", () => {
+  const schematicTraceNetKeyMap = getSchematicTraceNetKeyMap([
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_1",
+      connected_source_port_ids: ["source_port_1", "source_port_2"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_2",
+      connected_source_port_ids: ["source_port_2", "source_port_3"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "schematic_trace",
+      schematic_trace_id: "schematic_trace_1",
+      source_trace_id: "source_trace_1",
+    },
+    {
+      type: "schematic_trace",
+      schematic_trace_id: "schematic_trace_2",
+      source_trace_id: "source_trace_2",
+    },
+  ] as any)
+
+  expect(schematicTraceNetKeyMap.get("schematic_trace_1")!).toBe(
+    schematicTraceNetKeyMap.get("schematic_trace_2")!,
+  )
+})
+
+test("groups source traces by shared nets", () => {
+  const sourceTraceNetKeyMap = getSourceTraceNetKeyMap([
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_1",
+      connected_source_port_ids: [],
+      connected_source_net_ids: ["net_1"],
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_2",
+      connected_source_port_ids: [],
+      connected_source_net_ids: ["net_1"],
+    },
+  ] as any)
+
+  expect(sourceTraceNetKeyMap.get("source_trace_1")!).toBe(
+    sourceTraceNetKeyMap.get("source_trace_2")!,
+  )
+})
+
+test("groups source traces by subcircuit_connectivity_map_key", () => {
+  const sourceTraceNetKeyMap = getSourceTraceNetKeyMap([
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_1",
+      connected_source_port_ids: [],
+      connected_source_net_ids: [],
+      subcircuit_connectivity_map_key: "sub_1",
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_2",
+      connected_source_port_ids: [],
+      connected_source_net_ids: [],
+      subcircuit_connectivity_map_key: "sub_1",
+    },
+  ] as any)
+
+  expect(sourceTraceNetKeyMap.get("source_trace_1")!).toBe(
+    sourceTraceNetKeyMap.get("source_trace_2")!,
+  )
+})
+
+test("getSameNetSchematicTraceIdsMap returns same Set for same-net traces", () => {
+  const sameNetMap = getSameNetSchematicTraceIdsMap([
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_1",
+      connected_source_port_ids: ["source_port_1"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_2",
+      connected_source_port_ids: ["source_port_1"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "schematic_trace",
+      schematic_trace_id: "schematic_trace_1",
+      source_trace_id: "source_trace_1",
+    },
+    {
+      type: "schematic_trace",
+      schematic_trace_id: "schematic_trace_2",
+      source_trace_id: "source_trace_2",
+    },
+  ] as any)
+
+  const set1 = sameNetMap.get("schematic_trace_1")!
+  const set2 = sameNetMap.get("schematic_trace_2")!
+  expect(set1).toBe(set2)
+  expect(set1.has("schematic_trace_1")).toBe(true)
+  expect(set1.has("schematic_trace_2")).toBe(true)
+  expect(set1.size).toBe(2)
+})

lib/utils/get-schematic-trace-net-keys.ts

@@ -0,0 +1,114 @@
+import type { CircuitJson } from "circuit-json"
+
+class DisjointSet {
+  private parent = new Map<string, string>()
+
+  add(id: string) {
+    if (!this.parent.has(id)) this.parent.set(id, id)
+  }
+
+  find(id: string): string {
+    this.add(id)
+    const parent = this.parent.get(id)!
+    if (parent === id) return id
+    const root = this.find(parent)
+    this.parent.set(id, root)
+    return root
+  }
+
+  union(a: string, b: string) {
+    const rootA = this.find(a)
+    const rootB = this.find(b)
+    if (rootA !== rootB) this.parent.set(rootB, rootA)
+  }
+}
+
+const getStringArray = (value: unknown): string[] =>
+  Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : []
+
+export const getSourceTraceNetKeyMap = (circuitJson: CircuitJson) => {
+  const disjointSet = new DisjointSet()
+  const sourceTraceIds: string[] = []
+
+  for (const element of circuitJson as Array<Record<string, unknown>>) {
+    if (element.type !== "source_trace") continue
+
+    const sourceTraceId = element.source_trace_id
+    if (typeof sourceTraceId !== "string") continue
+
+    sourceTraceIds.push(sourceTraceId)
+    disjointSet.add(sourceTraceId)
+
+    const connectedIds = [
+      ...getStringArray(element.connected_source_port_ids),
+      ...getStringArray(element.connected_source_net_ids),
+    ]
+
+    const subcircuitConnectivityMapKey =
+      typeof element.subcircuit_connectivity_map_key === "string"
+        ? element.subcircuit_connectivity_map_key
+        : null
+
+    if (subcircuitConnectivityMapKey) {
+      connectedIds.push(`subcircuit:${subcircuitConnectivityMapKey}`)
+    }
+
+    for (const connectedId of connectedIds) {
+      disjointSet.union(sourceTraceId, connectedId)
+    }
+  }
+
+  return new Map(
+    sourceTraceIds.map((sourceTraceId) => [
+      sourceTraceId,
+      disjointSet.find(sourceTraceId),
+    ]),
+  )
+}
+
+export const getSchematicTraceNetKeyMap = (circuitJson: CircuitJson) => {
+  const sourceTraceNetKeyMap = getSourceTraceNetKeyMap(circuitJson)
+  const schematicTraceNetKeyMap = new Map<string, string>()
+
+  for (const element of circuitJson as Array<Record<string, unknown>>) {
+    if (element.type !== "schematic_trace") continue
+
+    const schematicTraceId = element.schematic_trace_id
+    const sourceTraceId = element.source_trace_id
+    if (
+      typeof schematicTraceId !== "string" ||
+      typeof sourceTraceId !== "string"
+    ) {
+      continue
+    }
+
+    const netKey = sourceTraceNetKeyMap.get(sourceTraceId)
+    if (netKey) schematicTraceNetKeyMap.set(schematicTraceId, netKey)
+  }
+
+  return schematicTraceNetKeyMap
+}
+
+export const getSameNetSchematicTraceIdsMap = (circuitJson: CircuitJson) => {
+  const schematicTraceNetKeyMap = getSchematicTraceNetKeyMap(circuitJson)
+  const netKeyToTraceIds = new Map<string, Set<string>>()
+
+  for (const [traceId, netKey] of schematicTraceNetKeyMap) {
+    let traceIds = netKeyToTraceIds.get(netKey)
+    if (!traceIds) {
+      traceIds = new Set()
+      netKeyToTraceIds.set(netKey, traceIds)
+    }
+    traceIds.add(traceId)
+  }
+
+  const sameNetTraceIdsByTraceId = new Map<string, Set<string>>()
+  for (const [traceId, netKey] of schematicTraceNetKeyMap) {
+    const sameNet = netKeyToTraceIds.get(netKey)!
+    sameNetTraceIdsByTraceId.set(traceId, sameNet)
+  }
+
+  return sameNetTraceIdsByTraceId
+}