refactoring

2026-03-12 17:14:33 +01:00
parent e29c5d643c
commit f5b12949d3
6 changed files with 430 additions and 302 deletions
--- a/frontend/src/app/canvas/useCanvasConnectionPath.ts
+++ b/frontend/src/app/canvas/useCanvasConnectionPath.ts
@@ -0,0 +1,174 @@
+/**
+ * Hook that holds all connection-path state and callbacks for the canvas.
+ * Used to show the "ant trail" along the path of an update (e.g. config → agent → render).
+ * Extracted from CanvasPage to keep the page focused on composition.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { getPathNodeIds, getPausedSegmentNodeIds } from '@/lib/graph/graphPath'
+
+export type EdgeLike = { source: string; target: string }
+
+/** Minimum time (ms) the connection ant trail runs when a path update is in progress. */
+const CONNECTION_PATH_UPDATE_MIN_MS = 1500
+
+export type UseCanvasConnectionPathResult = {
+  connectionPathUpdatingNodeIds: string[]
+  connectionPathTriggerNodeIds: string[]
+  connectionPathPausedNodeIds: string[]
+  connectionPathErrorNodeIds: string[]
+  connectionPathNodeIds: Set<string>
+  connectionPathPausedSegmentNodeIds: Set<string>
+  connectionPathActiveSegmentNodeIds: Set<string>
+  startConnectionPathUpdate: (nodeId: string) => void
+  endConnectionPathUpdate: (nodeId: string) => void
+  addConnectionPathTrigger: (nodeId: string) => void
+  addConnectionPathPausedNode: (nodeId: string) => void
+  removeConnectionPathPausedNode: (nodeId: string) => void
+  addConnectionPathError: (nodeId: string) => void
+  removeConnectionPathError: (nodeId: string) => void
+}
+
+export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionPathResult {
+  const [connectionPathUpdatingNodeIds, setConnectionPathUpdatingNodeIds] = useState<string[]>([])
+  const [connectionPathTriggerNodeIds, setConnectionPathTriggerNodeIds] = useState<string[]>([])
+  const [connectionPathPausedNodeIds, setConnectionPathPausedNodeIds] = useState<string[]>([])
+  const [connectionPathErrorNodeIds, setConnectionPathErrorNodeIds] = useState<string[]>([])
+
+  const pathUpdateNodeIdsRef = useRef<Set<string>>(new Set())
+  const pathUpdateStartTimeRef = useRef<number | null>(null)
+  const pathUpdateEndTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const connectionPathPausedNodeIdsRef = useRef<string[]>([])
+  connectionPathPausedNodeIdsRef.current = connectionPathPausedNodeIds
+
+  const pathTriggerBatchRef = useRef<Set<string>>(new Set())
+  const pathTriggerScheduledRef = useRef(false)
+
+  const clearPathUpdateSession = useCallback(() => {
+    setConnectionPathUpdatingNodeIds([])
+    if (connectionPathPausedNodeIdsRef.current.length === 0) {
+      setConnectionPathTriggerNodeIds([])
+      setConnectionPathPausedNodeIds([])
+    }
+  }, [])
+
+  const startConnectionPathUpdate = useCallback((nodeId: string) => {
+    const ref = pathUpdateNodeIdsRef.current
+    ref.add(nodeId)
+    if (ref.size === 1) {
+      pathUpdateStartTimeRef.current = Date.now()
+      if (pathUpdateEndTimeoutRef.current != null) {
+        clearTimeout(pathUpdateEndTimeoutRef.current)
+        pathUpdateEndTimeoutRef.current = null
+      }
+    }
+    setConnectionPathUpdatingNodeIds(Array.from(ref))
+  }, [])
+
+  const endConnectionPathUpdate = useCallback((nodeId: string) => {
+    const ref = pathUpdateNodeIdsRef.current
+    ref.delete(nodeId)
+    if (ref.size > 0) {
+      setConnectionPathUpdatingNodeIds(Array.from(ref))
+      return
+    }
+    const startedAt = pathUpdateStartTimeRef.current ?? 0
+    const elapsed = Date.now() - startedAt
+    const remaining = Math.max(0, CONNECTION_PATH_UPDATE_MIN_MS - elapsed)
+    if (remaining === 0) {
+      clearPathUpdateSession()
+    } else {
+      pathUpdateEndTimeoutRef.current = setTimeout(() => {
+        pathUpdateEndTimeoutRef.current = null
+        clearPathUpdateSession()
+      }, remaining)
+    }
+  }, [clearPathUpdateSession])
+
+  const addConnectionPathTrigger = useCallback((nodeId: string) => {
+    pathTriggerBatchRef.current.add(nodeId)
+    if (pathTriggerScheduledRef.current) return
+    pathTriggerScheduledRef.current = true
+    requestAnimationFrame(() => {
+      pathTriggerScheduledRef.current = false
+      const batch = new Set(pathTriggerBatchRef.current)
+      pathTriggerBatchRef.current = new Set()
+      if (batch.size === 0) return
+      setConnectionPathTriggerNodeIds((prev) => {
+        const next = new Set(prev)
+        batch.forEach((id) => next.add(id))
+        return next.size === prev.length && prev.every((id) => next.has(id)) ? prev : Array.from(next)
+      })
+    })
+  }, [])
+
+  useEffect(
+    () => () => {
+      if (pathUpdateEndTimeoutRef.current != null) {
+        clearTimeout(pathUpdateEndTimeoutRef.current)
+      }
+    },
+    []
+  )
+
+  const connectionPathNodeIds = useMemo(
+    () =>
+      getPathNodeIds(
+        edges,
+        connectionPathUpdatingNodeIds,
+        connectionPathTriggerNodeIds,
+        connectionPathPausedNodeIds
+      ),
+    [edges, connectionPathUpdatingNodeIds, connectionPathTriggerNodeIds, connectionPathPausedNodeIds]
+  )
+
+  const connectionPathPausedSegmentNodeIds = useMemo(
+    () =>
+      getPausedSegmentNodeIds(
+        edges,
+        connectionPathNodeIds,
+        connectionPathTriggerNodeIds,
+        connectionPathPausedNodeIds
+      ),
+    [edges, connectionPathNodeIds, connectionPathTriggerNodeIds, connectionPathPausedNodeIds]
+  )
+
+  const connectionPathActiveSegmentNodeIds = useMemo(() => {
+    const active = new Set(connectionPathNodeIds)
+    connectionPathPausedSegmentNodeIds.forEach((id) => active.delete(id))
+    return active
+  }, [connectionPathNodeIds, connectionPathPausedSegmentNodeIds])
+
+  const addConnectionPathPausedNode = useCallback((nodeId: string) => {
+    setConnectionPathPausedNodeIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]))
+  }, [])
+
+  const removeConnectionPathPausedNode = useCallback((nodeId: string) => {
+    setConnectionPathPausedNodeIds((prev) => prev.filter((id) => id !== nodeId))
+  }, [])
+
+  const addConnectionPathError = useCallback((nodeId: string) => {
+    setConnectionPathErrorNodeIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]))
+  }, [])
+
+  const removeConnectionPathError = useCallback((nodeId: string) => {
+    setConnectionPathErrorNodeIds((prev) => prev.filter((id) => id !== nodeId))
+  }, [])
+
+  return {
+    connectionPathUpdatingNodeIds,
+    connectionPathTriggerNodeIds,
+    connectionPathPausedNodeIds,
+    connectionPathErrorNodeIds,
+    connectionPathNodeIds,
+    connectionPathPausedSegmentNodeIds,
+    connectionPathActiveSegmentNodeIds,
+    startConnectionPathUpdate,
+    endConnectionPathUpdate,
+    addConnectionPathTrigger,
+    addConnectionPathPausedNode,
+    removeConnectionPathPausedNode,
+    addConnectionPathError,
+    removeConnectionPathError,
+  }
+}