🔧 fix(parameterComponent): remove unused imports and variables to improve code cleanliness and readability

🔧 fix(parameterComponent): update useState initial value for dictArr to be an array of objects instead of an empty array
🔧 fix(parameterComponent): update value prop in ParameterInputListComponent to handle cases where data.node!.template[name].value is null or an empty array
🔧 fix(parameterComponent): update onChange prop in ParameterInputListComponent to handle any type of newValue instead of just string[]
🔧 fix(keypairListComponent): update className condition to check if value is null or undefined before checking its length
🔧 fix(editNodeModal): remove unused imports and variables to improve code cleanliness and readability
🔧 fix(editNodeModal): update useState initial value for dictArr to be an array of objects instead of an empty array
🔧 fix(editNodeModal): update value prop in KeypairListComponent to handle cases where myData.node.template[templateParam].value is null or an empty array
🔧 fix(editNodeModal): update onChange prop in KeypairListComponent to handle any type of newValue instead of just string[]
🔧 fix(types): update onChange type in KeyPairListComponentType to accept an array of objects instead of an array of strings
🔧 fix(reactflowUtils): remove unused convertArrayToObj function

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

@@ -27,8 +27,6 @@ import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
 import { TabsState } from "../../../../types/tabs";
 import {
-  convertArrayToObj,
-  convertObjToArray,
   hasDuplicateKeys,
   isValidConnection,
 } from "../../../../utils/reactflowUtils";
@@ -113,10 +111,9 @@ export default function ParameterComponent({
   });
 
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
-  const [dict, setDict] = useState({
+  const [dictArr, setDictArr] = useState([
-    yourKey: "yourValue",
+    { yourKey: "yourValue" },
-  } as {});
+  ] as Object[]);
-  const [dictArr, setDictArr] = useState([] as string[]);
 
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
@@ -384,18 +381,21 @@ export default function ParameterComponent({
               disabled={disabled}
               editNode={false}
               value={
-                convertObjToArray(data.node!.template[name].value).length === 0
+                data.node!.template[name].value?.length === 0 ||
-                  ? convertObjToArray(dict)
+                !data.node!.template[name].value
-                  : convertObjToArray(data.node!.template[name].value)
+                  ? dictArr
+                  : data.node!.template[name].value
               }
               duplicateKey={errorDuplicateKey}
-              onChange={(newValue: string[]) => {
+              onChange={(newValue) => {
                 setErrorDuplicateKey(hasDuplicateKeys(newValue));
                 if (hasDuplicateKeys(newValue)) {
                   setDictArr(newValue);
                 } else {
-                  setDict(convertArrayToObj(newValue));
+                  setDictArr(newValue);
-                  data.node!.template[name].value = convertArrayToObj(newValue);
+                  console.log(newValue);
+
+                  data.node!.template[name].value = newValue;
                 }
               }}
             />

src/frontend/src/components/keypairListComponent/index.tsx

@@ -37,11 +37,11 @@ export default function KeypairListComponent({
   return (
     <div
       className={classNames(
-        value.length > 1 && editNode ? "my-1" : "",
+        value?.length > 1 && editNode ? "my-1" : "",
         "flex flex-col gap-3"
       )}
     >
-      {value.map((obj, index) => {
+      {value?.map((obj, index) => {
         return Object.keys(obj).map((key, idx) => {
           return (
             <div key={idx} className="flex w-full gap-3">

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

@@ -28,11 +28,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { TabsState } from "../../types/tabs";
-import {
+import { hasDuplicateKeys } from "../../utils/reactflowUtils";
-  convertArrayToObj,
-  convertObjToArray,
-  hasDuplicateKeys,
-} from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
@@ -100,14 +96,9 @@ const EditNodeModal = forwardRef(
     });
 
     const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
-    const [dict, setDict] = useState({
+    const [dictArr, setDictArr] = useState([
-      yourKey: "yourValue",
+      { yourKey: "yourValue" },
-    } as {});
+    ] as Object[]);
-    const [dictArr, setDictArr] = useState([] as string[]);
-
-    useEffect(() => {
-      setDictArr(convertObjToArray(dict));
-    }, [dict]);
 
     return (
       <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
@@ -214,19 +205,29 @@ const EditNodeModal = forwardRef(
                                     <div className="mt-2 w-full">
                                       <KeypairListComponent
                                         disabled={disabled}
-                                        editNode={true}
+                                        editNode={false}
-                                        value={dictArr}
+                                        value={
+                                          myData.node.template[templateParam]
+                                            .value?.length === 0 ||
+                                          !myData.node.template[templateParam]
+                                            .value
+                                            ? dictArr
+                                            : myData.node.template[
+                                                templateParam
+                                              ].value
+                                        }
                                         duplicateKey={errorDuplicateKey}
-                                        onChange={(newValue: string[]) => {
+                                        onChange={(newValue) => {
                                           setErrorDuplicateKey(
                                             hasDuplicateKeys(newValue)
                                           );
                                           if (hasDuplicateKeys(newValue)) {
                                             setDictArr(newValue);
                                           } else {
-                                            setDict(
+                                            setDictArr(newValue);
-                                              convertArrayToObj(newValue)
+                                            myData.node!.template[
-                                            );
+                                              templateParam
+                                            ].value = newValue;
                                           }
                                         }}
                                       />

src/frontend/src/types/components/index.ts

@@ -56,7 +56,7 @@ export type InputListComponentType = {
 
 export type KeyPairListComponentType = {
   value: any;
-  onChange: (value: string[]) => void;
+  onChange: (value: Object[]) => void;
   disabled: boolean;
   editNode?: boolean;
   duplicateKey?: boolean;

src/frontend/src/utils/reactflowUtils.ts

@@ -298,23 +298,9 @@ export function convertObjToArray(singleObject) {
       arrConverted.push(newObj);
     }
   }
-
   return arrConverted;
 }
 
-export function convertArrayToObj(newValue) {
-  const flattenedObject = {};
-  for (const obj of newValue) {
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        flattenedObject[key] = obj[key]; //added space to dont order when add new keys to object
-      }
-    }
-  }
-  let newData = _.cloneDeep(flattenedObject);
-  return newData;
-}
-
 export function hasDuplicateKeys(array) {
   const keys = {};
   for (const obj of array) {