Feat(Builder): Clear Status and Output upon graph edit (#7656)

* Feat(Builder): Clear Status and Output upon graph edit

* close output dropdown on graph edit

* make deleting edge clear block outputs

* make it so deleting nodes clears block output

rnd/autogpt_builder/src/components/CustomEdge.tsx

@@ -4,8 +4,8 @@ import './customedge.css';
 import { X } from 'lucide-react';
 
 export type CustomEdgeData = {
-  edgeColor: string
-  sourcePos: XYPosition
+  edgeColor: string;
+  sourcePos?: XYPosition;
 }
 
 const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({ id, data, selected, source, sourcePosition, sourceX, sourceY, target, targetPosition, targetX, targetY, markerEnd }) => {
@@ -14,6 +14,7 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({ id, data, selected, sourc
 
   const onEdgeClick = () => {
     setEdges((edges) => edges.filter((edge) => edge.id !== id));
+    data.clearNodesStatusAndOutput();
   }
 
   const [path, labelX, labelY] = getBezierPath({
@@ -26,7 +27,7 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({ id, data, selected, sourc
   });
 
   // Calculate y difference between source and source node, to adjust self-loop edge
-  const yDifference = useMemo(() => sourceY - data!.sourcePos.y, [data!.sourcePos.y]);
+  const yDifference = useMemo(() => sourceY - (data?.sourcePos?.y || 0), [data?.sourcePos?.y]);
 
   // Define special edge path for self-loop
   const edgePath = source === target ?
@@ -77,4 +78,4 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({ id, data, selected, sourc
   )
 };
 
-export const CustomEdge = memo(CustomEdgeFC);
+export const CustomEdge = memo(CustomEdgeFC);

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -48,6 +48,10 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
     }
   }, [data.output_data, data.status]);
 
+  useEffect(() => {
+    setIsOutputOpen(data.isOutputOpen);
+  }, [data.isOutputOpen]);
+
   useEffect(() => {
     data.setIsAnyModalOpen?.(isModalOpen || isOutputModalOpen);
   }, [isModalOpen, isOutputModalOpen, data]);

rnd/autogpt_builder/src/components/Flow.tsx

@@ -128,6 +128,21 @@ const FlowEditor: React.FC<{
     return node.position;
   }
 
+  // Function to clear status, output, and close the output info dropdown of all nodes
+  const clearNodesStatusAndOutput = useCallback(() => {
+    setNodes((nds) =>
+      nds.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          status: undefined,
+          output_data: undefined,
+          isOutputOpen: false, // Close the output info dropdown
+        },
+      }))
+    );
+  }, [setNodes]);
+
   const onConnect: OnConnect = (connection: Connection) => {
     const edgeColor = getTypeColor(getOutputType(connection.source!, connection.sourceHandle!));
     const sourcePos = getNodePos(connection.source!)
@@ -160,6 +175,7 @@ const FlowEditor: React.FC<{
         return node;
       })
     );
+    clearNodesStatusAndOutput(); // Clear status and output on connection change
   }
 
   const onEdgesDelete = useCallback(
@@ -182,8 +198,9 @@ const FlowEditor: React.FC<{
           },
         }))
       );
+      clearNodesStatusAndOutput(); // Clear status and output on edge deletion
     },
-    [setNodes]
+    [setNodes, clearNodesStatusAndOutput]
   );
 
   const addNode = (blockId: string, nodeType: string) => {
@@ -226,6 +243,7 @@ const FlowEditor: React.FC<{
 
     setNodes((nds) => [...nds, newNode]);
     setNodeId((prevId) => prevId + 1);
+    clearNodesStatusAndOutput(); // Clear status and output when a new node is added
   };
 
   function loadGraph(graph: Graph) {
@@ -574,6 +592,10 @@ const FlowEditor: React.FC<{
     };
   }, [handleKeyDown]);
 
+  const onNodesDelete = useCallback(() => {
+    clearNodesStatusAndOutput();
+  }, [clearNodesStatusAndOutput]);
+
   return (
     <div className={className}>
       <Button
@@ -593,13 +615,14 @@ const FlowEditor: React.FC<{
       <Sidebar isOpen={isSidebarOpen} availableNodes={availableNodes} addNode={addNode} />
       <ReactFlow
         nodes={nodes.map(node => ({ ...node, data: { ...node.data, setIsAnyModalOpen } }))}
-        edges={edges}
+        edges={edges.map(edge => ({...edge, data: { ...edge.data, clearNodesStatusAndOutput } }))}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         connectionLineComponent={ConnectionLine}
+        onNodesDelete={onNodesDelete}
         onEdgesDelete={onEdgesDelete}
         deleteKeyCode={["Backspace", "Delete"]}
       >