🔧 fix(parameterComponent): remove unused longString variable to improve code readability and reduce unnecessary code

🔧 fix(parameterComponent): move DictComponent and KeypairListComponent rendering logic to the correct position to fix rendering issues
🔧 fix(keypairListComponent): remove unused imports and fix formatting to improve code readability
🔧 fix(keypairListComponent): fix handleChangeKey function name to improve code clarity
🔧 fix(keypairListComponent): fix className prop in Input component to improve code readability
🔧 fix(keypairListComponent): remove unused GenericModal component and fix formatting to improve code readability
🔧 fix(reactflowUtils.ts): fix formatting and remove unnecessary whitespace to improve code readability
🔧 fix(reactflowUtils.ts): fix function names and formatting to improve code readability
🔧 fix(reactflowUtils.ts): fix formatting and remove unnecessary whitespace to improve code readability
🔧 fix(reactflowUtils.ts): fix formatting and remove unnecessary whitespace to improve code readability

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

@@ -103,8 +103,6 @@ export default function ParameterComponent({
   const [obj, setObj] = useState({
     arr: ["test", 123456, false, null],
     boolean: false,
-    longString:
-      "long string long string long string long string long string long string",
     number: 123456,
     try: {
       k1: 123,
@@ -239,34 +237,6 @@ export default function ParameterComponent({
           type === "int") &&
         !optionalHandle ? (
           <></>
-        ) : left === true && type === "NestedDict" ? (
-          <div className="mt-2 w-full">
-            <DictComponent
-              disabled={disabled}
-              editNode={false}
-              value={obj}
-              onChange={(newValue) => {
-                setObj(newValue);
-              }}
-            />
-          </div>
-        ) : left === true && type === "dict" ? (
-          <div className="mt-2 w-full">
-            <KeypairListComponent
-              disabled={disabled}
-              editNode={false}
-              value={dictArr}
-              duplicateKey={errorDuplicateKey}
-              onChange={(newValue: string[]) => {
-                setErrorDuplicateKey(hasDuplicateKeys(newValue));
-                if (hasDuplicateKeys(newValue)) {
-                  setDictArr(newValue);
-                } else {
-                  setDict(convertArrayToObj(newValue));
-                }
-              }}
-            />
-          </div>
         ) : (
           <ShadTooltip
             styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
@@ -400,6 +370,37 @@ export default function ParameterComponent({
               onChange={handleOnNewValue}
             />
           </div>
+        ) : left === true && type === "NestedDict" ? (
+          <div className="mt-2 w-full">
+            <DictComponent
+              disabled={disabled}
+              editNode={false}
+              value={obj}
+              onChange={(newValue) => {
+                setObj(newValue);
+                data.node!.template[name].value = newValue;
+                console.log(data);
+              }}
+            />
+          </div>
+        ) : left === true && type === "dict" ? (
+          <div className="mt-2 w-full">
+            <KeypairListComponent
+              disabled={disabled}
+              editNode={false}
+              value={dictArr}
+              duplicateKey={errorDuplicateKey}
+              onChange={(newValue: string[]) => {
+                setErrorDuplicateKey(hasDuplicateKeys(newValue));
+                if (hasDuplicateKeys(newValue)) {
+                  setDictArr(newValue);
+                } else {
+                  setDict(convertArrayToObj(newValue));
+                  data.node!.template[name].value = convertArrayToObj(newValue);
+                }
+              }}
+            />
+          </div>
         ) : (
           <></>
         )}

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

@@ -2,8 +2,6 @@ import { useEffect } from "react";
 import { KeyPairListComponentType } from "../../types/components";
 
 import _ from "lodash";
-import { TypeModal } from "../../constants/enums";
-import GenericModal from "../../modals/genericModal";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
@@ -13,7 +11,7 @@ export default function KeypairListComponent({
   onChange,
   disabled,
   editNode = false,
-  duplicateKey
+  duplicateKey,
 }: KeyPairListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -56,9 +54,8 @@ export default function KeypairListComponent({
   //     />
   //   </div>
   // )
-  
 
- const handleChangeKey = (event, idx) => {
+  const handleChangeKey = (event, idx) => {
     const newInputList = _.cloneDeep(value);
     const oldKey = Object.keys(newInputList[idx])[0];
     const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
@@ -89,10 +86,8 @@ export default function KeypairListComponent({
                 type="text"
                 value={key}
                 className={classNames(
-                  editNode
-                    ? "input-edit-node"
-                    : "",
-                    duplicateKey ? "input-invalid" : ""
+                  editNode ? "input-edit-node" : "",
+                  duplicateKey ? "input-invalid" : ""
                 )}
                 placeholder="Type key..."
                 onChange={(event) => handleChangeKey(event, index)}
@@ -103,23 +98,17 @@ export default function KeypairListComponent({
                   }
                 }}
               />
-              <GenericModal
-                type={TypeModal.TEXT}
+
+              <Input
+                disabled={false}
+                type="text"
                 value={obj[key]}
-                buttonText="Save"
-                modalTitle="Edit Value"
-                setValue={(value: string) => {
-                  handleChangeValue(value, index);
-                }}
-              >
-                <Input
-                  disabled={true}
-                  type="text"
-                  value={obj[key]}
-                  className={editNode ? "input-edit-node cursor-pointer" : "cursor-pointer"}
-                  placeholder="Click to input a value..."
-                />
-              </GenericModal>
+                className={editNode ? "input-edit-node" : ""}
+                placeholder="Click to input a value..."
+                onChange={(event) =>
+                  handleChangeValue(event.target.value, index)
+                }
+              />
 
               {index === value.length - 1 ? (
                 <button

src/frontend/src/utils/reactflowUtils.ts

@@ -220,10 +220,9 @@ export function validateNode(
                 edge.targetHandle.split("|")[2] === node.id
             )
           ? [
-              `${type} is missing ${
-                template.display_name || toNormalCase(template[t].name)
-              }.`,
-            ]
+            `${type} is missing ${template.display_name || toNormalCase(template[t].name)
+            }.`,
+          ]
           : []
       ),
     [] as string[]
@@ -290,7 +289,7 @@ export function getConnectedNodes(
   return nodes.filter((node) => node.id === targetId || node.id === sourceId);
 }
 
-export function convertObjToArray(singleObject){
+export function convertObjToArray(singleObject) {
   let arrConverted: any = [];
   for (const key in singleObject) {
     if (singleObject.hasOwnProperty(key)) {
@@ -303,7 +302,7 @@ export function convertObjToArray(singleObject){
   return arrConverted;
 }
 
-export function convertArrayToObj(newValue){
+export function convertArrayToObj(newValue) {
   const flattenedObject = {};
   for (const obj of newValue) {
     for (const key in obj) {
@@ -319,12 +318,12 @@ export function convertArrayToObj(newValue){
 export function hasDuplicateKeys(array) {
   const keys = {};
   for (const obj of array) {
-      for (const key in obj) {
-          if (keys[key]) {
-              return true; 
-          }
-          keys[key] = true;
+    for (const key in obj) {
+      if (keys[key]) {
+        return true;
       }
+      keys[key] = true;
+    }
   }
-  return false; 
+  return false;
 }