From 736bbf93f2b5ff94da6dd714928289d32448471e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 4 Aug 2023 14:33:42 -0300
Subject: [PATCH] fix(GenericNode/index.tsx): fix indentation in map function
 for validationStatus.params fix(GenericNode/index.tsx): fix indentation in
 map function for ParameterComponent key fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent name
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent info fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent color fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent key
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent data fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent setData fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent key
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent data fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent setData fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent color
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent key fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent data fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent setData
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent color fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent key fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent data
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent setData fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent color fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent key
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent data fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent setData fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent color
 fix(GenericNode/index.tsx): fix indentation in map function for
 ParameterComponent key fix(GenericNode/index.tsx): fix indentation in map
 function for ParameterComponent data fix(GenericNode/index.tsx): fix
 indentation in map function for ParameterComponent setData
 fix(GenericNode/index.tsx): fix indentation in map function for

---
 .../src/CustomNodes/GenericNode/index.tsx     | 20 ++++++++++---------
 .../components/PageComponent/index.tsx        |  9 ++++++---
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 4e17ce4c7..b476f7458 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -165,14 +165,12 @@ export default function GenericNode({
                   {data.node.template[t].show &&
                   !data.node.template[t].advanced ? (
                     <ParameterComponent
-                      key={
-                        (data.node.template[t].input_types?.join(";") ??
-                          data.node.template[t].type) +
-                        "|" +
-                        t +
-                        "|" +
-                        data.id
-                      }
+                      key={JSON.stringify({
+                        inputTypes: data.node.template[t].input_types,
+                        type: data.node.template[t].type,
+                        id: data.id,
+                        fieldName: t,
+                      })}
                       data={data}
                       setData={setData}
                       color={
@@ -218,7 +216,11 @@ export default function GenericNode({
               {" "}
             </div>
             <ParameterComponent
-              key={[data.type, data.id, ...data.node.base_classes].join("|")}
+              key={JSON.stringify({
+                baseClasses: data.node.base_classes,
+                id: data.id,
+                dataType: data.type,
+              })}
               data={data}
               setData={setData}
               color={nodeColors[types[data.type]] ?? nodeColors.unknown}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index ac9aa1d01..f2dde4e4b 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -25,7 +25,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
-import { FlowType, NodeType } from "../../../../types/flow";
+import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
 import { isValidConnection } from "../../../../utils/reactflowUtils";
 import { isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
@@ -185,10 +185,13 @@ export default function Page({ flow }: { flow: FlowType }) {
             ...params,
             style: { stroke: "#555" },
             className:
-              (params.targetHandle.split("|")[0] === "Text"
+              ((JSON.parse(params.targetHandle) as targetHandleType).type ===
+              "Text"
                 ? "stroke-foreground "
                 : "stroke-foreground ") + " stroke-connection",
-            animated: params.targetHandle.split("|")[0] === "Text",
+            animated:
+              (JSON.parse(params.targetHandle) as targetHandleType).type ===
+              "Text",
           },
           eds
         )