refactor(builder): Fix linting warning and errors (Significant-Gravit…

…as#8021) * Fix lint errors * Fix dependency loop
itsbrex · Sep 9, 2024 · 2618d1d · 2618d1d
1 parent e17ea22
commit 2618d1d
Show file tree

Hide file tree

Showing 11 changed files with 436 additions and 411 deletions.
diff --git a/rnd/autogpt_builder/src/app/error.tsx b/rnd/autogpt_builder/src/app/error.tsx
@@ -26,8 +26,8 @@ export default function Error({
           Oops, something went wrong!
         </h1>
         <p className="mt-4 text-muted-foreground">
-          We're sorry, but an unexpected error has occurred. Please try again
-          later or contact support if the issue persists.
+          We&apos;re sorry, but an unexpected error has occurred. Please try
+          again later or contact support if the issue persists.
         </p>
         <div className="mt-6 flex flex-row justify-center gap-4">
           <Button onClick={reset} variant="outline">

diff --git a/rnd/autogpt_builder/src/app/page.tsx b/rnd/autogpt_builder/src/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import AutoGPTServerAPI, {
   GraphMeta,
@@ -22,54 +22,57 @@ const Monitor = () => {
   const [selectedFlow, setSelectedFlow] = useState<GraphMeta | null>(null);
   const [selectedRun, setSelectedRun] = useState<FlowRun | null>(null);
 
-  const api = new AutoGPTServerAPI();
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
 
-  useEffect(() => fetchFlowsAndRuns(), []);
-  useEffect(() => {
-    const intervalId = setInterval(
-      () => flows.map((f) => refreshFlowRuns(f.id)),
-      5000,
-    );
-    return () => clearInterval(intervalId);
-  }, []);
+  const refreshFlowRuns = useCallback(
+    (flowID: string) => {
+      // Fetch flow run IDs
+      api.listGraphRunIDs(flowID).then((runIDs) =>
+        runIDs.map((runID) => {
+          let run;
+          if (
+            (run = flowRuns.find((fr) => fr.id == runID)) &&
+            !["waiting", "running"].includes(run.status)
+          ) {
+            return;
+          }
+
+          // Fetch flow run
+          api.getGraphExecutionInfo(flowID, runID).then((execInfo) =>
+            setFlowRuns((flowRuns) => {
+              if (execInfo.length == 0) return flowRuns;
+
+              const flowRunIndex = flowRuns.findIndex((fr) => fr.id == runID);
+              const flowRun = flowRunFromNodeExecutionResults(execInfo);
+              if (flowRunIndex > -1) {
+                flowRuns.splice(flowRunIndex, 1, flowRun);
+              } else {
+                flowRuns.push(flowRun);
+              }
+              return [...flowRuns];
+            }),
+          );
+        }),
+      );
+    },
+    [api, flowRuns],
+  );
 
-  function fetchFlowsAndRuns() {
+  const fetchFlowsAndRuns = useCallback(() => {
     api.listGraphs().then((flows) => {
       setFlows(flows);
       flows.map((flow) => refreshFlowRuns(flow.id));
     });
-  }
-
-  function refreshFlowRuns(flowID: string) {
-    // Fetch flow run IDs
-    api.listGraphRunIDs(flowID).then((runIDs) =>
-      runIDs.map((runID) => {
-        let run;
-        if (
-          (run = flowRuns.find((fr) => fr.id == runID)) &&
-          !["waiting", "running"].includes(run.status)
-        ) {
-          return;
-        }
-
-        // Fetch flow run
-        api.getGraphExecutionInfo(flowID, runID).then((execInfo) =>
-          setFlowRuns((flowRuns) => {
-            if (execInfo.length == 0) return flowRuns;
+  }, [api, refreshFlowRuns]);
 
-            const flowRunIndex = flowRuns.findIndex((fr) => fr.id == runID);
-            const flowRun = flowRunFromNodeExecutionResults(execInfo);
-            if (flowRunIndex > -1) {
-              flowRuns.splice(flowRunIndex, 1, flowRun);
-            } else {
-              flowRuns.push(flowRun);
-            }
-            return [...flowRuns];
-          }),
-        );
-      }),
+  useEffect(() => fetchFlowsAndRuns(), [fetchFlowsAndRuns]);
+  useEffect(() => {
+    const intervalId = setInterval(
+      () => flows.map((f) => refreshFlowRuns(f.id)),
+      5000,
     );
-  }
+    return () => clearInterval(intervalId);
+  }, [flows, refreshFlowRuns]);
 
   const column1 = "md:col-span-2 xl:col-span-3 xxl:col-span-2";
   const column2 = "md:col-span-3 lg:col-span-2 xl:col-span-3 space-y-4";

diff --git a/rnd/autogpt_builder/src/components/CustomEdge.tsx b/rnd/autogpt_builder/src/components/CustomEdge.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -65,24 +65,27 @@ export function CustomEdge({
   const beadDiameter = 12;
   const deltaTime = 16;
 
-  function setTargetPositions(beads: Bead[]) {
-    const distanceBetween = Math.min(
-      (length - beadDiameter) / (beads.length + 1),
-      beadDiameter,
-    );
-
-    return beads.map((bead, index) => {
-      const distanceFromEnd = beadDiameter * 1.35;
-      const targetPosition = distanceBetween * index + distanceFromEnd;
-      const t = getTForDistance(-targetPosition);
-
-      return {
-        ...bead,
-        t: visualizeBeads === "animate" ? bead.t : t,
-        targetT: t,
-      } as Bead;
-    });
-  }
+  const setTargetPositions = useCallback(
+    (beads: Bead[]) => {
+      const distanceBetween = Math.min(
+        (length - beadDiameter) / (beads.length + 1),
+        beadDiameter,
+      );
+
+      return beads.map((bead, index) => {
+        const distanceFromEnd = beadDiameter * 1.35;
+        const targetPosition = distanceBetween * index + distanceFromEnd;
+        const t = getTForDistance(-targetPosition);
+
+        return {
+          ...bead,
+          t: visualizeBeads === "animate" ? bead.t : t,
+          targetT: t,
+        } as Bead;
+      });
+    },
+    [getTForDistance, length, visualizeBeads],
+  );
 
   useEffect(() => {
     if (data?.beadUp === 0 && data?.beadDown === 0) {
@@ -170,7 +173,7 @@ export function CustomEdge({
     }, deltaTime);
 
     return () => clearInterval(interval);
-  }, [data]);
+  }, [data, setTargetPositions, visualizeBeads]);
 
   const middle = getPointForT(0.5);
 

diff --git a/rnd/autogpt_builder/src/components/CustomNode.tsx b/rnd/autogpt_builder/src/components/CustomNode.tsx
@@ -96,7 +96,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
 
   useEffect(() => {
     setIsAnyModalOpen?.(isModalOpen || isOutputModalOpen);
-  }, [isModalOpen, isOutputModalOpen, data]);
+  }, [isModalOpen, isOutputModalOpen, data, setIsAnyModalOpen]);
 
   useEffect(() => {
     isInitialSetup.current = false;

diff --git a/rnd/autogpt_builder/src/components/Flow.tsx b/rnd/autogpt_builder/src/components/Flow.tsx
@@ -121,7 +121,7 @@ const FlowEditor: React.FC<{
         localStorage.setItem("shepherd-tour", "yes");
       }
     }
-  }, [availableNodes, tutorialStarted]);
+  }, [availableNodes, tutorialStarted, router, pathname]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -256,7 +256,7 @@ const FlowEditor: React.FC<{
       }
 
       const edgeColor = getTypeColor(
-        getOutputType(connection.source!, connection.sourceHandle!),
+        getOutputType(nodes, connection.source!, connection.sourceHandle!),
       );
       const sourceNode = getNode(connection.source!);
       const newEdge: CustomEdge = {
@@ -295,6 +295,7 @@ const FlowEditor: React.FC<{
       addEdges,
       deleteElements,
       clearNodesStatusAndOutput,
+      nodes,
       edges,
       formatEdgeID,
       getOutputType,
@@ -377,7 +378,7 @@ const FlowEditor: React.FC<{
         clearNodesStatusAndOutput();
       }
     },
-    [setNodes, clearNodesStatusAndOutput],
+    [setNodes, clearNodesStatusAndOutput, setEdges],
   );
 
   const getNextNodeId = useCallback(() => {
@@ -434,7 +435,6 @@ const FlowEditor: React.FC<{
       nodeId,
       availableNodes,
       addNodes,
-      setNodes,
       deleteElements,
       clearNodesStatusAndOutput,
       x,

diff --git a/rnd/autogpt_builder/src/components/monitor/AgentFlowList.tsx b/rnd/autogpt_builder/src/components/monitor/AgentFlowList.tsx
@@ -1,5 +1,5 @@
 import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
@@ -45,10 +45,10 @@ export const AgentFlowList = ({
   className?: string;
 }) => {
   const [templates, setTemplates] = useState<GraphMeta[]>([]);
-  const api = new AutoGPTServerAPI();
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
   useEffect(() => {
     api.listTemplates().then((templates) => setTemplates(templates));
-  }, []);
+  }, [api]);
 
   return (
     <Card className={className}>

diff --git a/rnd/autogpt_builder/src/components/monitor/FlowInfo.tsx b/rnd/autogpt_builder/src/components/monitor/FlowInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import AutoGPTServerAPI, {
   Graph,
   GraphMeta,
@@ -28,7 +28,7 @@ export const FlowInfo: React.FC<
     flowVersion?: number | "all";
   }
 > = ({ flow, flowRuns, flowVersion, ...props }) => {
-  const api = new AutoGPTServerAPI();
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
 
   const [flowVersions, setFlowVersions] = useState<Graph[] | null>(null);
   const [selectedVersion, setSelectedFlowVersion] = useState(
@@ -41,7 +41,7 @@ export const FlowInfo: React.FC<
 
   useEffect(() => {
     api.getGraphAllVersions(flow.id).then((result) => setFlowVersions(result));
-  }, [flow.id]);
+  }, [flow.id, api]);
 
   return (
     <Card {...props}>

diff --git a/rnd/autogpt_builder/src/components/node-input-components.tsx b/rnd/autogpt_builder/src/components/node-input-components.tsx
@@ -10,7 +10,7 @@ import {
   BlockIONumberSubSchema,
   BlockIOBooleanSubSchema,
 } from "@/lib/autogpt-server-api/types";
-import { FC, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { Switch } from "./ui/switch";
 import {
@@ -296,7 +296,7 @@ const NodeKeyValueInput: FC<{
   className,
   displayName,
 }) => {
-  const getPairValues = () => {
+  const getPairValues = useCallback(() => {
     let defaultEntries = new Map<string, any>();
 
     connections
@@ -311,15 +311,15 @@ const NodeKeyValueInput: FC<{
     });
 
     return Array.from(defaultEntries, ([key, value]) => ({ key, value }));
-  };
+  }, [connections, entries, schema.default, selfKey]);
 
   const [keyValuePairs, setKeyValuePairs] = useState<
     { key: string; value: string | number | null }[]
   >([]);
 
   useEffect(
     () => setKeyValuePairs(getPairValues()),
-    [connections, entries, schema.default],
+    [connections, entries, schema.default, getPairValues],
   );
 
   function updateKeyValuePairs(newPairs: typeof keyValuePairs) {

diff --git a/rnd/autogpt_builder/src/components/ui/input.tsx b/rnd/autogpt_builder/src/components/ui/input.tsx
@@ -19,7 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       ) {
         ref.current.value = value;
       }
-    }, [value, type]);
+    }, [value, type, ref]);
     return (
       <input
         type={type}