feat(GenericNode): add debounced validation of node on change to improve performance and user experience

feat(utils.ts): add debounce function to debounce function calls

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -14,6 +14,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import NodeModal from "../../modals/NodeModal";
 import { useCallback } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
+import { debounce } from "../../utils";
 export default function GenericNode({
   data,
   selected,
@@ -29,7 +30,7 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] = useState("idle");
   // State for outline color
   const [isValid, setIsValid] = useState(false);
-  const {save} = useContext(TabsContext)
+  const { save } = useContext(TabsContext);
   const { reactFlowInstance } = useContext(typesContext);
   const [params, setParams] = useState([]);
 
@@ -41,15 +42,17 @@ export default function GenericNode({
     }
   }, [save]);
 
-	useEffect(() => {
+  const validateNode = useCallback(
+    debounce(async () => {
       try {
-			fetch(`/validate/node/${data.id}`, {
+        const response = await fetch(`/validate/node/${data.id}`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
           body: JSON.stringify(reactFlowInstance.toObject()),
-			}).then((response) => {
+        });
+
         console.log(response.status, response.body);
 
         if (response.status === 200) {
@@ -57,12 +60,18 @@ export default function GenericNode({
         } else if (response.status === 500) {
           setValidationStatus("error");
         }
-			});
       } catch (error) {
         console.error("Error validating node:", error);
         setValidationStatus("error");
       }
-	}, [params]);
+    }, 1000), // Adjust the debounce delay (500ms) as needed
+    [reactFlowInstance, data.id]
+  );
+  useEffect(() => {
+    if (params.length > 0) {
+      validateNode();
+    }
+  }, [params, validateNode]);
 
   useEffect(() => {
     if (validationStatus === "success") {
@@ -123,7 +132,8 @@ export default function GenericNode({
             <Cog6ToothIcon
               className={classNames(
                 Object.keys(data.node.template).some(
-									(t) => data.node.template[t].advanced && data.node.template[t].show
+                  (t) =>
+                    data.node.template[t].advanced && data.node.template[t].show
                 )
                   ? ""
                   : "hidden",
@@ -170,7 +180,8 @@ export default function GenericNode({
 								) : (
 									<></>
 								)} */}
-								{data.node.template[t].show && !data.node.template[t].advanced  ? (
+                {data.node.template[t].show &&
+                !data.node.template[t].advanced ? (
                   <ParameterComponent
                     data={data}
                     color={

src/frontend/src/utils.ts

@@ -399,8 +399,11 @@ export function removeApiKeys(flow: FlowType): FlowType {
   return cleanFLow;
 }
 
-export function updateObject<T extends Record<string, any>>(reference: T, objectToUpdate: T): T {
+export function updateObject<T extends Record<string, any>>(
-  let clonedObject = _.cloneDeep(objectToUpdate)
+  reference: T,
+  objectToUpdate: T
+): T {
+  let clonedObject = _.cloneDeep(objectToUpdate);
   // Loop through each key in the object to update
   for (const key in clonedObject) {
     // If the key is not in the reference object, delete it
@@ -417,3 +420,12 @@ export function updateObject<T extends Record<string, any>>(reference: T, object
   }
   return clonedObject;
 }
+
+export function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}