feat(frontend): add static style and beads in custom edge (#11364)

<!-- Clearly explain the need for these changes: -->
This PR enhances the visual feedback in the flow editor by adding
animated "beads" that travel along edges during execution. This provides
users with clear, real-time visualization of data flow and execution
progress through the graph, making it easier to understand which
connections are active and track execution state.


https://github.com/user-attachments/assets/df4a4650-8192-403f-a200-15f6af95e384

### Changes 🏗️

<!-- Concisely describe all of the changes made in this pull request:
-->
- **Added new edge data types and structure:**
- Added `CustomEdgeData` type with `isStatic`, `beadUp`, `beadDown`, and
`beadData` properties
  - Created `CustomEdge` type extending XYEdge with custom data
  
- **Implemented bead animation components:**
- Added `JSBeads.tsx` - JavaScript-based animation component with
real-time updates
- Added `SVGBeads.tsx` - SVG-based animation component (for future
consideration)
  - Added helper functions for path calculations and bead positioning
  
- **Updated edge rendering:**
  - Modified `CustomEdge` component to display beads during execution
  - Added static edge styling with dashed lines (`stroke-dasharray: 6`)
- Improved visual hierarchy with different stroke styles for
selected/unselected states
  
- **Refactored edge management:**
- Converted `edgeStore` from using `Connection` type to `CustomEdge`
type
- Added `updateEdgeBeads` and `resetEdgeBeads` methods for bead state
management
  - Updated `copyPasteStore` to work with new edge structure
  
- **Added support for static outputs:**
  - Added `staticOutput` property to `CustomNodeData`
- Static edges show continuous bead animation while regular edges show
one-time animation

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Create a flow with multiple blocks and verify beads animate along
edges during execution
- [x] Test that beads increment when execution starts (`beadUp`) and
decrement when completed (`beadDown`)
- [x] Verify static edges display with dashed lines and continuous
animation
  - [x] Confirm copy/paste operations preserve edge data and bead states
  - [x] Test edge animations performance with complex graphs (10+ nodes)
  - [x] Verify bead animations complete properly before disappearing
- [x] Test that multiple beads can animate on the same edge for
concurrent executions
- [x] Verify edge selection/deletion still works with new visualization
- [x] Test that bead state resets properly when starting new executions

Author: Abhi1992002

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx

@@ -20,6 +20,7 @@ export const Flow = () => {
     useShallow((state) => state.onNodesChange),
   );
   const nodeTypes = useMemo(() => ({ custom: CustomNode }), []);
+  const edgeTypes = useMemo(() => ({ custom: CustomEdge }), []);
   const { edges, onConnect, onEdgesChange } = useCustomEdge();
 
   // We use this hook to load the graph and convert them into custom nodes and edges.
@@ -51,10 +52,10 @@ export const Flow = () => {
           nodes={nodes}
           onNodesChange={onNodesChange}
           nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
           edges={edges}
           onConnect={onConnect}
           onEdgesChange={onEdgesChange}
-          edgeTypes={{ custom: CustomEdge }}
           maxZoom={2}
           minZoom={0.1}
           onDragOver={onDragOver}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts

@@ -32,6 +32,9 @@ export const useFlow = () => {
   const setGraphSchemas = useGraphStore(
     useShallow((state) => state.setGraphSchemas),
   );
+  const updateEdgeBeads = useEdgeStore(
+    useShallow((state) => state.updateEdgeBeads),
+  );
   const { screenToFlowPosition } = useReactFlow();
   const addBlock = useNodeStore(useShallow((state) => state.addBlock));
   const setBlockMenuOpen = useControlPanelStore(
@@ -109,7 +112,7 @@ export const useFlow = () => {
 
     // adding links
     if (graph?.links) {
-      useEdgeStore.getState().setConnections([]);
+      useEdgeStore.getState().setEdges([]);
       addLinks(graph.links);
     }
 
@@ -130,23 +133,25 @@ export const useFlow = () => {
       });
     }
 
-    // update node execution results in nodes
+    // update node execution results in nodes, also update edge beads
     if (
       executionDetails &&
       "node_executions" in executionDetails &&
       executionDetails.node_executions
     ) {
       executionDetails.node_executions.forEach((nodeExecution) => {
         updateNodeExecutionResult(nodeExecution.node_id, nodeExecution);
+        updateEdgeBeads(nodeExecution.node_id, nodeExecution);
       });
     }
   }, [customNodes, addNodes, graph?.links, executionDetails, updateNodeStatus]);
 
   useEffect(() => {
     return () => {
       useNodeStore.getState().setNodes([]);
-      useEdgeStore.getState().setConnections([]);
+      useEdgeStore.getState().setEdges([]);
       useGraphStore.getState().reset();
+      useEdgeStore.getState().resetEdgeBeads();
       setIsGraphRunning(false);
     };
   }, []);

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlowRealtime.ts

@@ -9,6 +9,7 @@ import { useShallow } from "zustand/react/shallow";
 import { NodeExecutionResult } from "@/app/api/__generated__/models/nodeExecutionResult";
 import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
 import { useGraphStore } from "../../../stores/graphStore";
+import { useEdgeStore } from "../../../stores/edgeStore";
 
 export const useFlowRealtime = () => {
   const api = useBackendAPI();
@@ -21,6 +22,12 @@ export const useFlowRealtime = () => {
   const setIsGraphRunning = useGraphStore(
     useShallow((state) => state.setIsGraphRunning),
   );
+  const updateEdgeBeads = useEdgeStore(
+    useShallow((state) => state.updateEdgeBeads),
+  );
+  const resetEdgeBeads = useEdgeStore(
+    useShallow((state) => state.resetEdgeBeads),
+  );
 
   const [{ flowExecutionID, flowID }] = useQueryStates({
     flowExecutionID: parseAsString,
@@ -34,12 +41,12 @@ export const useFlowRealtime = () => {
         if (data.graph_exec_id != flowExecutionID) {
           return;
         }
-        // TODO: Update the states of nodes
         updateNodeExecutionResult(
           data.node_id,
           data as unknown as NodeExecutionResult,
         );
         updateStatus(data.node_id, data.status);
+        updateEdgeBeads(data.node_id, data as unknown as NodeExecutionResult);
       },
     );
 
@@ -82,8 +89,9 @@ export const useFlowRealtime = () => {
       deregisterNodeExecutionEvent();
       deregisterGraphExecutionSubscription();
       deregisterGraphExecutionStatusEvent();
+      resetEdgeBeads();
     };
-  }, [api, flowExecutionID]);
+  }, [api, flowExecutionID, resetEdgeBeads]);
 
   return {};
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx

@@ -1,17 +1,30 @@
 import { Button } from "@/components/atoms/Button/Button";
 import {
   BaseEdge,
+  Edge as XYEdge,
   EdgeLabelRenderer,
   EdgeProps,
   getBezierPath,
 } from "@xyflow/react";
-
 import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
 import { XIcon } from "@phosphor-icons/react";
+import { cn } from "@/lib/utils";
+import { NodeExecutionResult } from "@/lib/autogpt-server-api";
+import { JSBeads } from "./components/JSBeads";
+
+export type CustomEdgeData = {
+  isStatic?: boolean;
+  beadUp?: number;
+  beadDown?: number;
+  beadData?: Map<string, NodeExecutionResult["status"]>;
+};
+
+export type CustomEdge = XYEdge<CustomEdgeData, "custom">;
 import { memo } from "react";
 
 const CustomEdge = ({
   id,
+  data,
   sourceX,
   sourceY,
   targetX,
@@ -20,8 +33,8 @@ const CustomEdge = ({
   targetPosition,
   markerEnd,
   selected,
-}: EdgeProps) => {
-  const removeConnection = useEdgeStore((state) => state.removeConnection);
+}: EdgeProps<CustomEdge>) => {
+  const removeConnection = useEdgeStore((state) => state.removeEdge);
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -31,14 +44,27 @@ const CustomEdge = ({
     targetPosition,
   });
 
+  const isStatic = data?.isStatic ?? false;
+  const beadUp = data?.beadUp ?? 0;
+  const beadDown = data?.beadDown ?? 0;
+
   return (
     <>
       <BaseEdge
         path={edgePath}
         markerEnd={markerEnd}
-        className={
-          selected ? "[stroke:#555]" : "[stroke:#555]80 hover:[stroke:#555]"
-        }
+        className={cn(
+          isStatic && "!stroke-[1.5px] [stroke-dasharray:6]",
+          selected
+            ? "stroke-zinc-800"
+            : "stroke-zinc-500/50 hover:stroke-zinc-500",
+        )}
+      />
+      <JSBeads
+        beadUp={beadUp}
+        beadDown={beadDown}
+        edgePath={edgePath}
+        beadsKey={`beads-${id}-${sourceX}-${sourceY}-${targetX}-${targetY}`}
       />
       <EdgeLabelRenderer>
         <Button

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/components/JSBeads.tsx

@@ -0,0 +1,167 @@
+// This component uses JS animation [It's replica of legacy builder]
+// Problem - It lags at real time updates, because of state change
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  getLengthOfPathInPixels,
+  getPointAtT,
+  getTForDistance,
+  setTargetPositions,
+} from "../helpers";
+
+const BEAD_DIAMETER = 10;
+const ANIMATION_DURATION = 500;
+
+interface Bead {
+  t: number;
+  targetT: number;
+  startTime: number;
+}
+
+interface BeadsProps {
+  beadUp: number;
+  beadDown: number;
+  edgePath: string;
+  beadsKey: string;
+  isStatic?: boolean;
+}
+
+export const JSBeads = ({
+  beadUp,
+  beadDown,
+  edgePath,
+  beadsKey,
+}: BeadsProps) => {
+  const [beads, setBeads] = useState<{
+    beads: Bead[];
+    created: number;
+    destroyed: number;
+  }>({ beads: [], created: 0, destroyed: 0 });
+
+  const beadsRef = useRef(beads);
+  const totalLength = getLengthOfPathInPixels(edgePath);
+  const animationFrameRef = useRef<number | null>(null);
+  const lastFrameTimeRef = useRef<number>(0);
+
+  const pathRef = useRef<SVGPathElement | null>(null);
+
+  const getPointAtTWrapper = (t: number) => {
+    return getPointAtT(t, edgePath, pathRef);
+  };
+
+  const getTForDistanceWrapper = (distanceFromEnd: number) => {
+    return getTForDistance(distanceFromEnd, totalLength);
+  };
+
+  const setTargetPositionsWrapper = useCallback(
+    (beads: Bead[]) => {
+      return setTargetPositions(beads, BEAD_DIAMETER, getTForDistanceWrapper);
+    },
+    [getTForDistanceWrapper],
+  );
+
+  beadsRef.current = beads;
+
+  useEffect(() => {
+    pathRef.current = null;
+  }, [edgePath]);
+
+  useEffect(() => {
+    if (
+      beadUp === 0 &&
+      beadDown === 0 &&
+      (beads.created > 0 || beads.destroyed > 0)
+    ) {
+      setBeads({ beads: [], created: 0, destroyed: 0 });
+      return;
+    }
+
+    // Adding beads
+    if (beadUp > beads.created) {
+      setBeads(({ beads, created, destroyed }) => {
+        const newBeads = [];
+        for (let i = 0; i < beadUp - created; i++) {
+          newBeads.push({ t: 0, targetT: 0, startTime: Date.now() });
+        }
+
+        const b = setTargetPositionsWrapper([...beads, ...newBeads]);
+        return { beads: b, created: beadUp, destroyed };
+      });
+    }
+
+    const animate = (currentTime: number) => {
+      const beads = beadsRef.current;
+
+      if (
+        (beadUp === beads.created && beads.created === beads.destroyed) ||
+        beads.beads.every((bead) => bead.t >= bead.targetT)
+      ) {
+        animationFrameRef.current = null;
+        return;
+      }
+
+      const deltaTime = lastFrameTimeRef.current
+        ? currentTime - lastFrameTimeRef.current
+        : 16;
+      lastFrameTimeRef.current = currentTime;
+
+      setBeads(({ beads, created, destroyed }) => {
+        let destroyedCount = 0;
+
+        const newBeads = beads
+          .map((bead) => {
+            const progressIncrement = deltaTime / ANIMATION_DURATION;
+            const t = Math.min(
+              bead.t + bead.targetT * progressIncrement,
+              bead.targetT,
+            );
+
+            return { ...bead, t };
+          })
+          .filter((bead, index) => {
+            const removeCount = beadDown - destroyed;
+            if (bead.t >= bead.targetT && index < removeCount) {
+              destroyedCount++;
+              return false;
+            }
+            return true;
+          });
+
+        return {
+          beads: setTargetPositionsWrapper(newBeads),
+          created,
+          destroyed: destroyed + destroyedCount,
+        };
+      });
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    lastFrameTimeRef.current = 0;
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [beadUp, beadDown, setTargetPositionsWrapper]);
+
+  return (
+    <>
+      {beads.beads.map((bead, index) => {
+        const pos = getPointAtTWrapper(bead.t);
+        return (
+          <circle
+            key={`${beadsKey}-${index}`}
+            cx={pos.x}
+            cy={pos.y}
+            r={BEAD_DIAMETER / 2}
+            fill="#8d8d95"
+          />
+        );
+      })}
+    </>
+  );
+};