From 3a7d07916ad8e8c90760241bfc026acbbb45289d Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 9 Jan 2024 10:09:35 -0300
Subject: [PATCH] chore(package.json): add "@preact/signals-react" dependency
 to package.json

feat(EditNodeModal): use signals-react library for state management and add support for dynamic updates of myData value
---
 package-lock.json                             |  34 +++
 package.json                                  |   1 +
 .../src/modals/EditNodeModal/index.tsx        | 246 ++++++++++--------
 3 files changed, 174 insertions(+), 107 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8c3f329a0..d626b1ad1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@preact/signals-react": "^2.0.0",
         "@radix-ui/react-popover": "^1.0.7",
         "cmdk": "^0.2.0"
       }
@@ -54,6 +55,31 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "node_modules/@preact/signals-core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.5.1.tgz",
+      "integrity": "sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/@preact/signals-react": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.0.tgz",
+      "integrity": "sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==",
+      "dependencies": {
+        "@preact/signals-core": "^1.5.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x"
+      }
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -927,6 +953,14 @@
           "optional": true
         }
       }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 33d31f0d1..004dbb908 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@preact/signals-react": "^2.0.0",
     "@radix-ui/react-popover": "^1.0.7",
     "cmdk": "^0.2.0"
   }
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 93e90a6d3..e809cdf7b 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -1,3 +1,4 @@
+import { useSignal, useSignalEffect } from "@preact/signals-react";
 import { cloneDeep } from "lodash";
 import { forwardRef, useEffect, useState } from "react";
 import ShadTooltip from "../../components/ShadTooltipComponent";
@@ -54,32 +55,33 @@ const EditNodeModal = forwardRef(
     },
     ref
   ) => {
-    const [myData, setMyData] = useState(data);
-
-    const setPending = useFlowStore((state) => state.setPending);
     const edges = useFlowStore((state) => state.edges);
     const setNode = useFlowStore((state) => state.setNode);
 
+    const myData = useSignal(data);
+    const [render, setRender] = useState(false);
+    useSignalEffect(() => {
+      console.log(myData.value);
+
+      setRender(!render);
+    });
+
     function changeAdvanced(n) {
-      setMyData((old) => {
-        let newData = cloneDeep(old);
-        newData.node!.template[n].advanced =
-          !newData.node!.template[n].advanced;
-        return newData;
-      });
+      const newValue = cloneDeep(myData.value);
+      newValue.node!.template[n].advanced =
+        !newValue.node!.template[n].advanced;
+      myData.value = newValue;
     }
 
     const handleOnNewValue = (newValue: any, name) => {
-      setMyData((old) => {
-        let newData = cloneDeep(old);
-        newData.node!.template[name].value = newValue;
-        return newData;
-      });
+      const newSignalValue = cloneDeep(myData.value);
+      newSignalValue.node!.template[name].value = newValue;
+      myData.value = newSignalValue;
     };
 
     useEffect(() => {
       if (open) {
-        setMyData(data); // reset data to what it is on node when opening modal
+        myData.value = cloneDeep(data); // clone data to avoid changing data on node when opening modal
       }
     }, [open]);
 
@@ -92,15 +94,15 @@ const EditNodeModal = forwardRef(
         open={open}
         setOpen={setOpen}
         onChangeOpenModal={(open) => {
-          setMyData(data);
+          myData.value = cloneDeep(data);
         }}
       >
         <BaseModal.Trigger>
           <></>
         </BaseModal.Trigger>
-        <BaseModal.Header description={myData.node?.description!}>
-          <span className="pr-2">{myData.type}</span>
-          <Badge variant="secondary">ID: {myData.id}</Badge>
+        <BaseModal.Header description={myData.value.node?.description!}>
+          <span className="pr-2">{myData.value.type}</span>
+          <Badge variant="secondary">ID: {myData.value.id}</Badge>
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex pb-2">
@@ -133,21 +135,23 @@ const EditNodeModal = forwardRef(
                       </TableRow>
                     </TableHeader>
                     <TableBody className="p-0">
-                      {Object.keys(myData.node!.template)
+                      {Object.keys(myData.value.node!.template)
                         .filter(
                           (templateParam) =>
                             templateParam.charAt(0) !== "_" &&
-                            myData.node?.template[templateParam].show &&
+                            myData.value.node?.template[templateParam].show &&
                             LANGFLOW_SUPPORTED_TYPES.has(
-                              myData.node.template[templateParam].type
+                              myData.value?.node?.template[templateParam].type
                             )
                         )
                         .map((templateParam, index) => {
                           let id = {
                             inputTypes:
-                              myData.node!.template[templateParam].input_types,
-                            type: myData.node!.template[templateParam].type,
-                            id: myData.id,
+                              myData.value.node!.template[templateParam]
+                                .input_types,
+                            type: myData.value.node!.template[templateParam]
+                              .type,
+                            id: myData.value.id,
                             fieldName: templateParam,
                           };
                           let disabled =
@@ -155,12 +159,14 @@ const EditNodeModal = forwardRef(
                               (edge) =>
                                 edge.targetHandle ===
                                 scapedJSONStringfy(
-                                  myData.node!.template[templateParam].proxy
+                                  myData.value.node!.template[templateParam]
+                                    .proxy
                                     ? {
                                         ...id,
                                         proxy:
-                                          myData.node?.template[templateParam]
-                                            .proxy,
+                                          myData.value.node?.template[
+                                            templateParam
+                                          ].proxy,
                                       }
                                     : id
                                 )
@@ -170,39 +176,46 @@ const EditNodeModal = forwardRef(
                               <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
                                 <ShadTooltip
                                   content={
-                                    myData.node?.template[templateParam].proxy
-                                      ? myData.node?.template[templateParam]
-                                          .proxy?.id
+                                    myData.value.node?.template[templateParam]
+                                      .proxy
+                                      ? myData.value.node?.template[
+                                          templateParam
+                                        ].proxy?.id
                                       : null
                                   }
                                 >
                                   <span>
-                                    {myData.node?.template[templateParam]
+                                    {myData.value.node?.template[templateParam]
                                       .display_name
-                                      ? myData.node.template[templateParam]
-                                          .display_name
-                                      : myData.node?.template[templateParam]
-                                          .name}
+                                      ? myData.value?.node?.template[
+                                          templateParam
+                                        ].display_name
+                                      : myData.value.node?.template[
+                                          templateParam
+                                        ].name}
                                   </span>
                                 </ShadTooltip>
                               </TableCell>
                               <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
-                                {myData.node?.template[templateParam].type ===
-                                  "str" &&
-                                !myData.node.template[templateParam].options ? (
+                                {myData.value.node?.template[templateParam]
+                                  .type === "str" &&
+                                !myData.value?.node?.template[templateParam]
+                                  .options ? (
                                   <div className="mx-auto">
-                                    {myData.node.template[templateParam]
+                                    {myData.value?.node?.template[templateParam]
                                       .list ? (
                                       <InputListComponent
                                         editNode={true}
                                         disabled={disabled}
                                         value={
-                                          !myData.node.template[templateParam]
-                                            .value ||
-                                          myData.node.template[templateParam]
-                                            .value === ""
+                                          !myData.value?.node?.template[
+                                            templateParam
+                                          ].value ||
+                                          myData.value?.node?.template[
+                                            templateParam
+                                          ].value === ""
                                             ? [""]
-                                            : myData.node.template[
+                                            : myData.value?.node?.template[
                                                 templateParam
                                               ].value
                                         }
@@ -213,16 +226,18 @@ const EditNodeModal = forwardRef(
                                           );
                                         }}
                                       />
-                                    ) : myData.node.template[templateParam]
-                                        .multiline ? (
+                                    ) : myData.value?.node?.template[
+                                        templateParam
+                                      ].multiline ? (
                                       <TextAreaComponent
                                         id={"textarea-edit-" + index}
                                         data-testid={"textarea-edit-" + index}
                                         disabled={disabled}
                                         editNode={true}
                                         value={
-                                          myData.node.template[templateParam]
-                                            .value ?? ""
+                                          myData.value?.node?.template[
+                                            templateParam
+                                          ].value ?? ""
                                         }
                                         onChange={(
                                           value: string | string[]
@@ -239,12 +254,14 @@ const EditNodeModal = forwardRef(
                                         editNode={true}
                                         disabled={disabled}
                                         password={
-                                          myData.node.template[templateParam]
-                                            .password ?? false
+                                          myData.value?.node?.template[
+                                            templateParam
+                                          ].password ?? false
                                         }
                                         value={
-                                          myData.node.template[templateParam]
-                                            .value ?? ""
+                                          myData.value?.node?.template[
+                                            templateParam
+                                          ].value ?? ""
                                         }
                                         onChange={(value) => {
                                           handleOnNewValue(
@@ -255,24 +272,25 @@ const EditNodeModal = forwardRef(
                                       />
                                     )}
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "NestedDict" ? (
                                   <div className="  w-full">
                                     <DictComponent
                                       disabled={disabled}
                                       editNode={true}
                                       value={
-                                        myData.node!.template[
+                                        myData.value.node!.template[
                                           templateParam
                                         ]?.value?.toString() === "{}"
                                           ? {
                                               yourkey: "value",
                                             }
-                                          : myData.node!.template[templateParam]
-                                              .value
+                                          : myData.value.node!.template[
+                                              templateParam
+                                            ].value
                                       }
                                       onChange={(newValue) => {
-                                        myData.node!.template[
+                                        myData.value.node!.template[
                                           templateParam
                                         ].value = newValue;
                                         handleOnNewValue(
@@ -283,13 +301,13 @@ const EditNodeModal = forwardRef(
                                       id="editnode-div-dict-input"
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "dict" ? (
                                   <div
                                     className={classNames(
                                       "max-h-48 w-full overflow-auto custom-scroll",
-                                      myData.node!.template[templateParam].value
-                                        ?.length > 1
+                                      myData.value.node!.template[templateParam]
+                                        .value?.length > 1
                                         ? "my-3"
                                         : ""
                                     )}
@@ -298,13 +316,15 @@ const EditNodeModal = forwardRef(
                                       disabled={disabled}
                                       editNode={true}
                                       value={
-                                        myData.node!.template[templateParam]
-                                          .value?.length === 0 ||
-                                        !myData.node!.template[templateParam]
-                                          .value
+                                        myData.value.node!.template[
+                                          templateParam
+                                        ].value?.length === 0 ||
+                                        !myData.value.node!.template[
+                                          templateParam
+                                        ].value
                                           ? [{ "": "" }]
                                           : convertObjToArray(
-                                              myData.node!.template[
+                                              myData.value.node!.template[
                                                 templateParam
                                               ].value
                                             )
@@ -313,7 +333,7 @@ const EditNodeModal = forwardRef(
                                       onChange={(newValue) => {
                                         const valueToNumbers =
                                           convertValuesToNumbers(newValue);
-                                        myData.node!.template[
+                                        myData.value.node!.template[
                                           templateParam
                                         ].value = valueToNumbers;
                                         setErrorDuplicateKey(
@@ -326,7 +346,7 @@ const EditNodeModal = forwardRef(
                                       }}
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "bool" ? (
                                   <div className="ml-auto">
                                     {" "}
@@ -334,8 +354,9 @@ const EditNodeModal = forwardRef(
                                       id={"toggle-edit-" + index}
                                       disabled={disabled}
                                       enabled={
-                                        myData.node.template[templateParam]
-                                          .value
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value
                                       }
                                       setEnabled={(isEnabled) => {
                                         handleOnNewValue(
@@ -346,48 +367,52 @@ const EditNodeModal = forwardRef(
                                       size="small"
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "float" ? (
                                   <div className="mx-auto">
                                     <FloatComponent
                                       disabled={disabled}
                                       editNode={true}
                                       rangeSpec={
-                                        myData.node!.template[templateParam]
-                                          .rangeSpec
+                                        myData.value.node!.template[
+                                          templateParam
+                                        ].rangeSpec
                                       }
                                       value={
-                                        myData.node.template[templateParam]
-                                          .value ?? ""
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value ?? ""
                                       }
                                       onChange={(value) => {
                                         handleOnNewValue(value, templateParam);
                                       }}
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "str" &&
-                                  myData.node.template[templateParam]
+                                  myData.value?.node?.template[templateParam]
                                     .options ? (
                                   <div className="mx-auto">
                                     <Dropdown
                                       numberOfOptions={nodeLength}
                                       editNode={true}
                                       options={
-                                        myData.node.template[templateParam]
-                                          .options
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].options
                                       }
                                       onSelect={(value) =>
                                         handleOnNewValue(value, templateParam)
                                       }
                                       value={
-                                        myData.node.template[templateParam]
-                                          .value ?? "Choose an option"
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value ?? "Choose an option"
                                       }
                                       id={"dropdown-edit-" + index}
                                     ></Dropdown>
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "int" ? (
                                   <div className="mx-auto">
                                     <IntComponent
@@ -395,30 +420,33 @@ const EditNodeModal = forwardRef(
                                       disabled={disabled}
                                       editNode={true}
                                       value={
-                                        myData.node.template[templateParam]
-                                          .value ?? ""
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value ?? ""
                                       }
                                       onChange={(value) => {
                                         handleOnNewValue(value, templateParam);
                                       }}
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "file" ? (
                                   <div className="mx-auto">
                                     <InputFileComponent
                                       editNode={true}
                                       disabled={disabled}
                                       value={
-                                        myData.node.template[templateParam]
-                                          .value ?? ""
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value ?? ""
                                       }
                                       onChange={(value: string | string[]) => {
                                         handleOnNewValue(value, templateParam);
                                       }}
                                       fileTypes={
-                                        myData.node.template[templateParam]
-                                          .fileTypes
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].fileTypes
                                       }
                                       onFileChange={(filePath: string) => {
                                         data.node!.template[
@@ -427,23 +455,24 @@ const EditNodeModal = forwardRef(
                                       }}
                                     ></InputFileComponent>
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "prompt" ? (
                                   <div className="mx-auto">
                                     <PromptAreaComponent
                                       readonly={
-                                        myData.node?.flow ? true : false
+                                        myData.value.node?.flow ? true : false
                                       }
                                       field_name={templateParam}
                                       editNode={true}
                                       disabled={disabled}
-                                      nodeClass={myData.node}
+                                      nodeClass={myData.value.node}
                                       setNodeClass={(nodeClass) => {
-                                        myData.node = nodeClass;
+                                        myData.value.node = nodeClass;
                                       }}
                                       value={
-                                        myData.node.template[templateParam]
-                                          .value ?? ""
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value ?? ""
                                       }
                                       onChange={(value: string | string[]) => {
                                         handleOnNewValue(value, templateParam);
@@ -454,14 +483,15 @@ const EditNodeModal = forwardRef(
                                       }
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "code" ? (
                                   <div className="mx-auto">
                                     <CodeAreaComponent
                                       readonly={
-                                        myData.node?.flow &&
-                                        myData.node.template[templateParam]
-                                          .dynamic
+                                        myData.value.node?.flow &&
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].dynamic
                                           ? true
                                           : false
                                       }
@@ -476,8 +506,9 @@ const EditNodeModal = forwardRef(
                                       disabled={disabled}
                                       editNode={true}
                                       value={
-                                        myData.node.template[templateParam]
-                                          .value ?? ""
+                                        myData.value?.node?.template[
+                                          templateParam
+                                        ].value ?? ""
                                       }
                                       onChange={(value: string | string[]) => {
                                         handleOnNewValue(value, templateParam);
@@ -485,7 +516,7 @@ const EditNodeModal = forwardRef(
                                       id={"code-area-edit" + index}
                                     />
                                   </div>
-                                ) : myData.node?.template[templateParam]
+                                ) : myData.value.node?.template[templateParam]
                                     .type === "Any" ? (
                                   "-"
                                 ) : (
@@ -497,11 +528,13 @@ const EditNodeModal = forwardRef(
                                   <ToggleShadComponent
                                     id={
                                       "show" +
-                                      myData.node?.template[templateParam].name
+                                      myData.value.node?.template[templateParam]
+                                        .name
                                     }
                                     enabled={
-                                      !myData.node?.template[templateParam]
-                                        .advanced
+                                      !myData.value.node?.template[
+                                        templateParam
+                                      ].advanced
                                     }
                                     setEnabled={(e) => {
                                       changeAdvanced(templateParam);
@@ -531,10 +564,9 @@ const EditNodeModal = forwardRef(
                 ...old,
                 data: {
                   ...old.data,
-                  node: myData.node,
+                  node: myData.value.node,
                 },
               }));
-              setPending(true);
               setOpen(false);
             }}
             type="submit"