feat: ant path rendering on cahnges

frontend/src/components/base/AnimatedEdge.tsx

@@ -9,9 +9,11 @@ import { getConnectionLabelForTarget } from '../../lib/nodeRegistry'
 
 const EDGE_STROKE_WIDTH = 2
 const DOT_MARKER_R = 1.5
+const EMPTY_PATH_NODE_IDS = new Set<string>()
 
 export function AnimatedEdge({
   id,
+  source,
   sourceX,
   sourceY,
   targetX,
@@ -25,6 +27,7 @@ export function AnimatedEdge({
 }: EdgeProps) {
   const ctx = useContext(FlowContext)
   const nodes = ctx?.nodes ?? []
+  const pathNodeIds = ctx?.connectionPathNodeIds ?? EMPTY_PATH_NODE_IDS
   const targetNode = useMemo(() => nodes.find((n: any) => n.id === target), [nodes, target])
   const derivedLabel = useMemo(
     () => (targetNode?.type != null ? getConnectionLabelForTarget(targetNode.type) : undefined),
@@ -32,6 +35,8 @@ export function AnimatedEdge({
   )
   const label = labelProp ?? derivedLabel
 
+  const isOnUpdatingPath = pathNodeIds.has(source) && pathNodeIds.has(target)
+
   const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -88,7 +93,7 @@ export function AnimatedEdge({
           strokeWidth: EDGE_STROKE_WIDTH,
           ...style,
         }}
-        className="animated-edge-path"
+        className={`animated-edge-path${isOnUpdatingPath ? ' animated-edge-path--updating' : ''}`}
         interactionWidth={interactionWidth}
       />
       {label != null && (