fix: prompt template not being saved on advanced modal (#2488)

* Fixed dbvalue on table node cell renderer * Added Change Advanced hook * Added Handle New Value hook * Added Handle Node Class hook * Added Node Class handler to TableNodeCellRender * Removed internal state of EditNode, added internal state for NodeClass and made the rows and columns be updated when NodeClass changes * Added NodeClass as dependencies on useMemo to update columns when NodeClass changes * Fixed advanced not changing the node * feat: updating tests without save btn * Added Close button on editNode --------- Co-authored-by: cristhianzl <[email protected]> Co-authored-by: anovazzi1 <[email protected]>
langflow-ai · Jul 3, 2024 · fe21f90 · fe21f90
1 parent 74845ff
commit fe21f90
Show file tree

Hide file tree

Showing 20 changed files with 259 additions and 85 deletions.
diff --git a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
@@ -2,6 +2,7 @@ import { CustomCellRendererProps } from "ag-grid-react";
 import { cloneDeep } from "lodash";
 import { useState } from "react";
 import useFlowStore from "../../../../stores/flowStore";
+import { APIClassType } from "../../../../types/api";
 import {
   convertObjToArray,
   convertValuesToNumbers,
@@ -24,24 +25,31 @@ import ToggleShadComponent from "../../../toggleShadComponent";
 
 export default function TableNodeCellRender({
   node: { data },
-  value: { value, nodeClass, handleOnNewValue: handleOnNewValueNode },
+  value: {
+    value,
+    nodeClass,
+    handleOnNewValue: handleOnNewValueNode,
+    handleNodeClass,
+  },
 }: CustomCellRendererProps) {
   const handleOnNewValue = (newValue: any, name: string, dbValue?: boolean) => {
     handleOnNewValueNode(newValue, name, dbValue);
     setTemplateData((old) => {
       let newData = cloneDeep(old);
       newData.value = newValue;
-      if (dbValue) {
+      if (dbValue !== undefined) {
         newData.load_from_db = newValue;
       }
       return newData;
     });
     setTemplateValue(newValue);
   };
+  const setNodeClass = (value: APIClassType, code?: string, type?: string) => {
+    handleNodeClass(value, templateData.key, code, type);
+  };
 
   const [templateValue, setTemplateValue] = useState(value);
   const [templateData, setTemplateData] = useState(data);
-
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
   const edges = useFlowStore((state) => state.edges);
 
@@ -220,9 +228,7 @@ export default function TableNodeCellRender({
             editNode={true}
             disabled={disabled}
             nodeClass={nodeClass}
-            setNodeClass={(value) => {
-              nodeClass = value;
-            }}
+            setNodeClass={setNodeClass}
             value={templateValue ?? ""}
             onChange={(value: string | string[]) => {
               handleOnNewValue(value, templateData.key);
@@ -237,9 +243,7 @@ export default function TableNodeCellRender({
           <CodeAreaComponent
             readonly={nodeClass.flow && templateData.dynamic ? true : false}
             dynamic={templateData.dynamic ?? false}
-            setNodeClass={(value) => {
-              nodeClass = value;
-            }}
+            setNodeClass={setNodeClass}
             nodeClass={nodeClass}
             disabled={disabled}
             editNode={true}

diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
@@ -1,12 +1,19 @@
 import { ColDef, ValueGetterParams } from "ag-grid-community";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
+import { APIClassType } from "../../../types/api";
 import { NodeDataType } from "../../../types/flow";
 
 const useColumnDefs = (
-  myData: NodeDataType,
+  nodeClass: APIClassType,
   handleOnNewValue: (newValue: any, name: string, setDb?: boolean) => void,
+  handleNodeClass: (
+    newNodeClass: APIClassType,
+    name: string,
+    code: string,
+    type?: string,
+  ) => void,
   changeAdvanced: (n: string) => void,
   open: boolean,
 ) => {
@@ -46,8 +53,9 @@ const useColumnDefs = (
         valueGetter: (params: ValueGetterParams) => {
           return {
             value: params.data.value,
-            nodeClass: myData.node,
+            nodeClass: nodeClass,
             handleOnNewValue: handleOnNewValue,
+            handleNodeClass: handleNodeClass,
           };
         },
         minWidth: 340,
@@ -75,7 +83,7 @@ const useColumnDefs = (
         cellClass: "no-border",
       },
     ],
-    [open, myData],
+    [open, nodeClass],
   );
 
   return columnDefs;

diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-handle-change-advanced.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-handle-change-advanced.tsx
@@ -0,0 +1,29 @@
+import { cloneDeep } from "lodash";
+import { NodeDataType } from "../../../types/flow";
+
+const useHandleChangeAdvanced = (
+  data: NodeDataType,
+  takeSnapshot: () => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  updateNodeInternals: (id: string) => void,
+) => {
+  const handleChangeAdvanced = (name) => {
+    if (!data.node) return;
+    takeSnapshot();
+
+    setNode(data.id, (oldNode) => {
+      let newNode = cloneDeep(oldNode);
+
+      newNode.data.node.template[name].advanced =
+        !newNode.data.node.template[name].advanced;
+
+      return newNode;
+    });
+
+    updateNodeInternals(data.id);
+  };
+
+  return { handleChangeAdvanced };
+};
+
+export default useHandleChangeAdvanced;
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-handle-new-value.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-handle-new-value.tsx
@@ -0,0 +1,84 @@
+import { cloneDeep } from "lodash";
+import {
+  ERROR_UPDATING_COMPONENT,
+  TITLE_ERROR_UPDATING_COMPONENT,
+} from "../../../constants/constants";
+import useAlertStore from "../../../stores/alertStore";
+import { ResponseErrorTypeAPI } from "../../../types/api";
+import { NodeDataType } from "../../../types/flow";
+
+const useHandleOnNewValue = (
+  data: NodeDataType,
+  takeSnapshot: () => void,
+  handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
+  debouncedHandleUpdateValues: any,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+) => {
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+
+  const handleOnNewValue = async (
+    newValue,
+    name,
+    dbValue,
+    skipSnapshot = false,
+  ) => {
+    const nodeTemplate = data.node!.template[name];
+    const currentValue = nodeTemplate.value;
+
+    if (currentValue !== newValue && !skipSnapshot) {
+      takeSnapshot();
+    }
+
+    const shouldUpdate =
+      data.node?.template[name].real_time_refresh &&
+      !data.node?.template[name].refresh_button &&
+      currentValue !== newValue;
+
+    const typeToDebounce = nodeTemplate.type;
+
+    nodeTemplate.value = newValue;
+
+    let newTemplate;
+    if (shouldUpdate) {
+      try {
+        if (["int"].includes(typeToDebounce)) {
+          newTemplate = await handleUpdateValues(name, data);
+        } else {
+          newTemplate = await debouncedHandleUpdateValues(name, data);
+        }
+      } catch (error) {
+        let responseError = error as ResponseErrorTypeAPI;
+        setErrorData({
+          title: TITLE_ERROR_UPDATING_COMPONENT,
+          list: [
+            responseError?.response?.data?.detail.error ??
+              ERROR_UPDATING_COMPONENT,
+          ],
+        });
+      }
+    }
+
+    setNode(data.id, (oldNode) => {
+      const newNode = cloneDeep(oldNode);
+      newNode.data = {
+        ...newNode.data,
+      };
+
+      if (dbValue !== undefined) {
+        newNode.data.node.template[name].load_from_db = dbValue;
+      }
+
+      if (data.node?.template[name].real_time_refresh && newTemplate) {
+        newNode.data.node.template = newTemplate;
+      } else {
+        newNode.data.node.template[name].value = newValue;
+      }
+
+      return newNode;
+    });
+  };
+
+  return { handleOnNewValue };
+};
+
+export default useHandleOnNewValue;
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-handle-node-class.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-handle-node-class.tsx
@@ -0,0 +1,39 @@
+import { cloneDeep } from "lodash";
+import { NodeDataType } from "../../../types/flow";
+
+const useHandleNodeClass = (
+  data: NodeDataType,
+  takeSnapshot: () => void,
+  setNode: (id: string, callback: (oldNode: any) => any) => void,
+  updateNodeInternals: (id: string) => void,
+) => {
+  const handleNodeClass = (newNodeClass, name, code, type?: string) => {
+    if (!data.node) return;
+    if (data.node!.template[name].value !== code) {
+      takeSnapshot();
+    }
+
+    setNode(data.id, (oldNode) => {
+      let newNode = cloneDeep(oldNode);
+
+      newNode.data = {
+        ...newNode.data,
+        node: newNodeClass,
+        description: newNodeClass.description ?? data.node!.description,
+        display_name: newNodeClass.display_name ?? data.node!.display_name,
+      };
+      if (type) {
+        newNode.data.node.template[name].type = type;
+      }
+      newNode.data.node.template[name].value = code;
+
+      return newNode;
+    });
+
+    updateNodeInternals(data.id);
+  };
+
+  return { handleNodeClass };
+};
+
+export default useHandleNodeClass;
diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx
@@ -1,8 +1,13 @@
 import { useMemo } from "react";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
+import { APIClassType } from "../../../types/api";
 import { NodeDataType } from "../../../types/flow";
 
-const useRowData = (myData: NodeDataType, open: boolean) => {
+const useRowData = (
+  myData: NodeDataType,
+  nodeClass: APIClassType,
+  open: boolean,
+) => {
   const rowData = useMemo(() => {
     return Object.keys(myData.node!.template)
       .filter((key: string) => {
@@ -25,7 +30,7 @@ const useRowData = (myData: NodeDataType, open: boolean) => {
           id: key,
         };
       });
-  }, [open, myData]);
+  }, [open, nodeClass]);
 
   return rowData;
 };