Bugfix - Deep-cloning the nodes when duplicate (#547)

src/frontend/package-lock.json

@@ -1212,15 +1212,15 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/@mui/system": {
-      "version": "5.13.5",
+      "version": "5.13.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz",
-      "integrity": "sha512-n0gzUxoZ2ZHZgnExkh2Htvo9uW2oakofgPRQrDoa/GQOWyRD0NH9MDszBwOb6AAoXZb+OV5TE7I4LeZ/dzgHYA==",
+      "integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
         "@mui/private-theming": "^5.13.1",
         "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.1",
+        "@mui/utils": "^5.13.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1280,11 +1280,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.13.1",
+      "version": "5.13.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz",
-      "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
+      "integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^18.2.0",
         "prop-types": "^15.8.1",
@@ -3444,7 +3444,7 @@
       "version": "16.18.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
       "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3714,9 +3714,9 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.2.1",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
@@ -5010,9 +5010,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.438",
+      "version": "1.4.440",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.438.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
-      "integrity": "sha512-x94U0FhphEsHsOloCvlsujHCvoir0ZQ73ZAs/QN4PLx98uNvyEU79F75rq1db75Bx/atvuh7KPeuxelh+xfYJw=="
+      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -5504,6 +5504,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6745,9 +6746,9 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.7",
+      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
-      "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"

src/frontend/src/components/dropdownComponent/index.tsx

@@ -1,9 +1,11 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
 import { ChevronsUpDown, Check } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function Dropdown({
   value,
@@ -12,12 +14,15 @@ export default function Dropdown({
   editNode = false,
   numberOfOptions = 0,
 }: DropDownComponentType) {
+  const { closePopUp } = useContext(PopUpContext);
+
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
   );
+
   useEffect(() => {
     setInternalValue(value === "" || !value ? "Choose an option" : value);
-  }, [value]);
+  }, [closePopUp]);
 
   return (
     <>

src/frontend/src/components/floatComponent/index.tsx

@@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../constants";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function FloatComponent({
   value,
@@ -12,6 +13,7 @@ export default function FloatComponent({
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const { closePopUp } = useContext(PopUpContext);
 
   const step = 0.1;
   const min = 0;
@@ -26,7 +28,7 @@ export default function FloatComponent({
 
   useEffect(() => {
     setMyValue(value);
-  }, [value]);
+  }, [closePopUp]);
 
   return (
     <div

src/frontend/src/components/inputListComponent/index.tsx

@@ -5,6 +5,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import _ from "lodash";
 import { INPUT_STYLE } from "../../constants";
 import { X, Plus } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputListComponent({
   value,
@@ -13,12 +14,19 @@ export default function InputListComponent({
   editNode = false,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
+  const { closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (disabled) {
       setInputList([""]);
       onChange([""]);
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setInputList(value);
+  }, [closePopUp]);
+
   return (
     <div
       className={
@@ -44,9 +52,9 @@ export default function InputListComponent({
               setInputList((old) => {
                 let newInputList = _.cloneDeep(old);
                 newInputList[idx] = e.target.value;
+                onChange(newInputList);
                 return newInputList;
               });
-              onChange(inputList);
             }}
           />
           {idx === inputList.length - 1 ? (

src/frontend/src/components/intComponent/index.tsx

@@ -3,6 +3,7 @@ import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { classNames } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function IntComponent({
   value,
@@ -14,6 +15,7 @@ export default function IntComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
   const min = 0;
+  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (disabled) {
@@ -24,7 +26,7 @@ export default function IntComponent({
 
   useEffect(() => {
     setMyValue(value);
-  }, [value]);
+  }, [closePopUp]);
 
   return (
     <div

src/frontend/src/contexts/tabsContext.tsx

@@ -414,7 +414,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           y: insidePosition.y + n.position.y - minimumY,
         },
         data: {
-          ...n.data,
+          ..._.cloneDeep(n.data),
           id: newId,
         },
       };

src/frontend/src/modals/ApiModal/index.tsx

@@ -103,7 +103,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <div className="flex items-center justify-between px-2">
             <TabsList>
               {tabs.map((tab, index) => (
-                <TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
+                <TabsTrigger key={index} value={index.toString()}>
+                  {tab.name}
+                </TabsTrigger>
               ))}
             </TabsList>
             <div className="float-right">

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen} >
+    <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
       <DialogContent className="lg:max-w-[700px] ">
         <DialogHeader>

src/frontend/src/utils.ts

@@ -978,5 +978,5 @@ export function getRandomKeyByssmm(): string {
   const now = new Date();
   const seconds = String(now.getSeconds()).padStart(2, "0");
   const milliseconds = String(now.getMilliseconds()).padStart(3, "0");
-  return seconds + milliseconds;
+  return seconds + milliseconds + Math.abs(Math.floor(Math.random() * 10001));
 }