feat(visualization): add workflow run animation logic

2026-04-21 05:14:45 +08:00 · 2025-04-29 16:46:50 +08:00
parent 2a02f01580
commit eabf1f2080
2 changed files with 408 additions and 161 deletions
--- a/web/src/app/_components/multi-agent-visualization.tsx
+++ b/web/src/app/_components/multi-agent-visualization.tsx
@@ -9,20 +9,202 @@ import {
  useEdgesState,
  Handle,
  Position,
+  type Node,
+  type Edge,
 } from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
 import {
  Brain,
  FilePen,
  MessageSquareQuote,
  Microscope,
+  RotateCcw,
  SquareTerminal,
  UserCheck,
  Users,
  type LucideIcon,
 } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import "@xyflow/react/dist/style.css";

 import { ShineBorder } from "~/components/magicui/shine-border";
+import { Button } from "~/components/ui/button";
+import { useIntersectionObserver } from "~/hooks/use-intersection-observer";
+import { cn } from "~/lib/utils";
+
+const ROW_HEIGHT = 75;
+const ROW_1 = 0;
+const ROW_2 = ROW_HEIGHT;
+const ROW_3 = ROW_HEIGHT * 2;
+const ROW_4 = ROW_HEIGHT * 2;
+const ROW_5 = ROW_HEIGHT * 3;
+const ROW_6 = ROW_HEIGHT * 4;
+
+export type WorkflowNode = Node<{
+  label: string;
+  icon?: LucideIcon;
+  active?: boolean;
+}>;
+
+const initialNodes: WorkflowNode[] = [
+  {
+    id: "Start",
+    type: "circle",
+    data: { label: "Start" },
+    position: { x: 25, y: ROW_1 },
+  },
+  {
+    id: "Coordinator",
+    data: { icon: MessageSquareQuote, label: "Coordinator" },
+    position: { x: 150, y: ROW_1 },
+  },
+  {
+    id: "Planner",
+    data: { icon: Brain, label: "Planner" },
+    position: { x: 150, y: ROW_2 },
+  },
+  {
+    id: "Reporter",
+    data: { icon: FilePen, label: "Reporter" },
+    position: { x: 275, y: ROW_3 },
+  },
+  {
+    id: "HumanFeedback",
+    data: { icon: UserCheck, label: "Human Feedback" },
+    position: { x: 25, y: ROW_4 },
+  },
+  {
+    id: "ResearchTeam",
+    data: { icon: Users, label: "Research Team" },
+    position: { x: 25, y: ROW_5 },
+  },
+  {
+    id: "Researcher",
+    data: { icon: Microscope, label: "Researcher" },
+    position: { x: -75, y: ROW_6 },
+  },
+  {
+    id: "Coder",
+    data: { icon: SquareTerminal, label: "Coder" },
+    position: { x: 125, y: ROW_6 },
+  },
+  {
+    id: "End",
+    type: "circle",
+    data: { label: "End" },
+    position: { x: 330, y: ROW_6 },
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: "Start->Coordinator",
+    source: "Start",
+    target: "Coordinator",
+    sourceHandle: "right",
+    targetHandle: "left",
+    animated: false,
+  },
+  {
+    id: "Coordinator->Planner",
+    source: "Coordinator",
+    target: "Planner",
+    sourceHandle: "bottom",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "Planner->Reporter",
+    source: "Planner",
+    target: "Reporter",
+    sourceHandle: "right",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "Planner->HumanFeedback",
+    source: "Planner",
+    target: "HumanFeedback",
+    sourceHandle: "left",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "HumanFeedback->Planner",
+    source: "HumanFeedback",
+    target: "Planner",
+    sourceHandle: "right",
+    targetHandle: "bottom",
+    animated: false,
+  },
+  {
+    id: "HumanFeedback->ResearchTeam",
+    source: "HumanFeedback",
+    target: "ResearchTeam",
+    sourceHandle: "bottom",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "Reporter->End",
+    source: "Reporter",
+    target: "End",
+    sourceHandle: "bottom",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "ResearchTeam->Researcher",
+    source: "ResearchTeam",
+    target: "Researcher",
+    sourceHandle: "left",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "ResearchTeam->Coder",
+    source: "ResearchTeam",
+    target: "Coder",
+    sourceHandle: "bottom",
+    targetHandle: "left",
+    animated: false,
+  },
+  {
+    id: "ResearchTeam->Planner",
+    source: "ResearchTeam",
+    target: "Planner",
+    sourceHandle: "right",
+    targetHandle: "bottom",
+    animated: false,
+  },
+  {
+    id: "Researcher->ResearchTeam",
+    source: "Researcher",
+    target: "ResearchTeam",
+    sourceHandle: "right",
+    targetHandle: "bottom",
+    animated: false,
+  },
+  {
+    id: "Coder->ResearchTeam",
+    source: "Coder",
+    target: "ResearchTeam",
+    sourceHandle: "top",
+    targetHandle: "right",
+    animated: false,
+  },
+];
+
+const nodeTypes = {
+  circle: CircleNode,
+  agent: AgentNode,
+  default: AgentNode,
+};

 const WORKFLOW_STEPS = [
  {
@@ -84,172 +266,80 @@ const WORKFLOW_STEPS = [
  },
 ];

-const ROW_HEIGHT = 75;
-const ROW_1 = 0;
-const ROW_2 = ROW_HEIGHT;
-const ROW_3 = ROW_HEIGHT * 2;
-const ROW_4 = ROW_HEIGHT * 2;
-const ROW_5 = ROW_HEIGHT * 3;
-const ROW_6 = ROW_HEIGHT * 4;
-const initialNodes = [
-  {
-    id: "Start",
-    type: "circle",
-    data: { label: "Start" },
-    position: { x: 25, y: ROW_1 },
-  },
-  {
-    id: "Coordinator",
-    data: { icon: MessageSquareQuote, label: "Coordinator" },
-    position: { x: 150, y: ROW_1 },
-  },
-  {
-    id: "Planner",
-    data: { icon: Brain, label: "Planner" },
-    position: { x: 150, y: ROW_2 },
-  },
-  {
-    id: "Reporter",
-    data: { icon: FilePen, label: "Reporter" },
-    position: { x: 275, y: ROW_3 },
-  },
-  {
-    id: "HumanFeedback",
-    data: { icon: UserCheck, label: "Human Feedback" },
-    position: { x: 25, y: ROW_4 },
-  },
-  {
-    id: "ResearchTeam",
-    data: { icon: Users, label: "Research Team" },
-    position: { x: 25, y: ROW_5 },
-  },
-  {
-    id: "Researcher",
-    data: { icon: Microscope, label: "Researcher" },
-    position: { x: -75, y: ROW_6 },
-  },
-  {
-    id: "Coder",
-    data: { icon: SquareTerminal, label: "Coder" },
-    position: { x: 125, y: ROW_6 },
-  },
-  {
-    id: "End",
-    type: "circle",
-    data: { label: "End" },
-    position: { x: 330, y: ROW_6 },
-  },
-];
+function useWorkflowRun(
+  setNodes: Dispatch<SetStateAction<WorkflowNode[]>>,
+  setEdges: Dispatch<SetStateAction<Edge[]>>,
+) {
+  const [isRunning, setIsRunning] = useState(false);

-const initialEdges = [
-  {
-    id: "Start->Coordinator",
-    source: "Start",
-    target: "Coordinator",
-    sourceHandle: "right",
-    targetHandle: "left",
-    animated: true,
-  },
-  {
-    id: "Coordinator->Planner",
-    source: "Coordinator",
-    target: "Planner",
-    sourceHandle: "bottom",
-    targetHandle: "top",
-    animated: true,
-  },
-  {
-    id: "Planner->Reporter",
-    source: "Planner",
-    target: "Reporter",
-    sourceHandle: "right",
-    targetHandle: "top",
-    animated: true,
-  },
-  {
-    id: "Planner->HumanFeedback",
-    source: "Planner",
-    target: "HumanFeedback",
-    sourceHandle: "left",
-    targetHandle: "top",
-    animated: true,
-  },
-  {
-    id: "HumanFeedback->Planner",
-    source: "HumanFeedback",
-    target: "Planner",
-    sourceHandle: "right",
-    targetHandle: "bottom",
-    animated: true,
-  },
-  {
-    id: "HumanFeedback->ResearchTeam",
-    source: "HumanFeedback",
-    target: "ResearchTeam",
-    sourceHandle: "bottom",
-    targetHandle: "top",
-    animated: true,
-  },
-  {
-    id: "Reporter->End",
-    source: "Reporter",
-    target: "End",
-    sourceHandle: "bottom",
-    targetHandle: "top",
-    animated: true,
-  },
-  {
-    id: "ResearchTeam->Researcher",
-    source: "ResearchTeam",
-    target: "Researcher",
-    sourceHandle: "left",
-    targetHandle: "top",
-    animated: true,
-  },
-  {
-    id: "ResearchTeam->Coder",
-    source: "ResearchTeam",
-    target: "Coder",
-    sourceHandle: "bottom",
-    targetHandle: "left",
-    animated: true,
-  },
-  {
-    id: "ResearchTeam->Planner",
-    source: "ResearchTeam",
-    target: "Planner",
-    sourceHandle: "right",
-    targetHandle: "bottom",
-    animated: true,
-  },
-  {
-    id: "Researcher->ResearchTeam",
-    source: "Researcher",
-    target: "ResearchTeam",
-    sourceHandle: "right",
-    targetHandle: "bottom",
-    animated: true,
-  },
-  {
-    id: "Coder->ResearchTeam",
-    source: "Coder",
-    target: "ResearchTeam",
-    sourceHandle: "top",
-    targetHandle: "right",
-    animated: true,
-  },
-];
+  const clearAnimation = useCallback(() => {
+    setEdges((edges) => {
+      return edges.map((edge) => ({
+        ...edge,
+        animated: false,
+      }));
+    });

-const nodeTypes = {
-  circle: CircleNode,
-  agent: AgentNode,
-  default: AgentNode,
-};
+    setNodes((nodes) => {
+      return nodes.map((node) => ({
+        ...node,
+        data: { ...node.data, active: false },
+      }));
+    });
+  }, [setEdges, setNodes]);
+
+  const run = useCallback(async () => {
+    setIsRunning(true);
+    clearAnimation();
+    for (const step of WORKFLOW_STEPS) {
+      setNodes((nodes) => {
+        return nodes.map((node) => ({
+          ...node,
+          data: {
+            ...node.data,
+            active: step.activeNodes.includes(node.id),
+          },
+        }));
+      });
+
+      setEdges((edges) => {
+        return edges.map((edge) => ({
+          ...edge,
+          animated: step.activeEdges.includes(edge.id),
+        }));
+      });
+
+      await sleep(1000);
+    }
+    clearAnimation();
+    setIsRunning(false);
+  }, [setNodes, setEdges, clearAnimation]);
+
+  return { run, isRunning };
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

 export function MultiAgentVisualization() {
  const [nodes, setNodes] = useNodesState(initialNodes);
  const [edges, setEdges] = useEdgesState(initialEdges);

+  const { run, isRunning } = useWorkflowRun(setNodes, setEdges);
+  const [hasAutoRunned, setHasAutoRunned] = useState(false);
+
+  const { ref } = useIntersectionObserver({
+    rootMargin: "0%",
+    threshold: 0,
+    onChange: (isIntersecting) => {
+      if (isIntersecting && !hasAutoRunned) {
+        setHasAutoRunned(true);
+        void run();
+      }
+    },
+  });
+
  return (
    <ReactFlow
      style={{
@@ -259,7 +349,7 @@ export function MultiAgentVisualization() {
      edges={edges}
      nodeTypes={nodeTypes}
      fitView
-      attributionPosition="top-right"
+      proOptions={{ hideAttribution: true }}
      colorMode="dark"
      panOnScroll={false}
      zoomOnScroll={false}
@@ -270,6 +360,26 @@ export function MultiAgentVisualization() {
        className="[mask-image:radial-gradient(800px_circle_at_center,white,transparent)]"
        bgColor="var(--background)"
      />
+      <Button
+        variant="ghost"
+        size="icon"
+        className="absolute top-0 left-0 z-10"
+        disabled={isRunning}
+        onClick={() => {
+          void run();
+        }}
+      >
+        <RotateCcw
+          className={cn({
+            "animate-spin": isRunning,
+          })}
+        />
+      </Button>
+      <div
+        id="auto-run-animation-trigger"
+        ref={ref}
+        className="absolute bottom-0 left-[50%] h-px w-px"
+      />
    </ReactFlow>
  );
 }