From f8d9f47b7e40f3d317b2f980e6ebbcbdb1cd025a Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 3 Jul 2023 18:53:02 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20fix?=
 =?UTF-8?q?=20classNames=20order=20in=20ParameterComponent=20to=20ensure?=
 =?UTF-8?q?=20correct=20styling=20=F0=9F=90=9B=20fix(utils):=20fix=20logic?=
 =?UTF-8?q?=20in=20isValidConnection=20to=20correctly=20check=20for=20vali?=
 =?UTF-8?q?d=20connections=20=E2=9C=A8=20feat(parameterComponent):=20add?=
 =?UTF-8?q?=20support=20for=20left=20alignment=20of=20parameter=20title=20?=
 =?UTF-8?q?in=20ParameterComponent=20=E2=9C=A8=20feat(utils):=20add=20supp?=
 =?UTF-8?q?ort=20for=20filtering=20grouped=20data=20by=20parentOutput=20in?=
 =?UTF-8?q?=20groupByFamily=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   | 16 +++++------
 src/frontend/src/utils.ts                     | 28 +++++++++++++------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 6612f722a..dda444d05 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -83,13 +83,13 @@ export default function ParameterComponent({
   };
 
   useEffect(() => {
-    const groupedObj = groupByFamily(myData, tooltipTitle);
+    const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
 
     refHtml.current = groupedObj.map((item, i) => (
       <span
         key={getRandomKeyByssmm() + item.family + i}
         className={classNames(
-          i > 0 ? "items-center flex mt-3" : "items-center flex"
+          i > 0 ? "mt-3 flex items-center" : "flex items-center"
         )}
       >
         <div
@@ -126,22 +126,22 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+      className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2 dark:bg-gray-800 dark:text-white"
     >
       <>
-        <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
+        <div className={"w-full truncate text-sm " + (left ? "" : "text-end")}>
           {title}
           <span className="text-red-600">{required ? " *" : ""}</span>
         </div>
         {left &&
-        ((type === "str" ||
+        (type === "str" ||
           type === "bool" ||
           type === "float" ||
           type === "code" ||
           type === "prompt" ||
           type === "file" ||
-          type === "int") && !optionalHandle
-          ) ? (
+          type === "int") &&
+        !optionalHandle ? (
           <></>
         ) : (
           <ShadTooltip
@@ -159,7 +159,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                "h-3 w-3 rounded-full border-2 bg-white dark:bg-gray-800"
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 797f3d93e..f2d5eca43 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -632,11 +632,19 @@ export function isValidConnection(
   reactFlowInstance: ReactFlowInstance
 ) {
   if (
-    targetHandle.split("|")[0].split(";").some((n) => n === sourceHandle.split("|")[0]) ||
+    targetHandle
+      .split("|")[0]
+      .split(";")
+      .some((n) => n === sourceHandle.split("|")[0]) ||
     sourceHandle
       .split("|")
       .slice(2)
-      .some((t) => targetHandle.split("|")[0].split(";").some((n) => n === t)) ||
+      .some((t) =>
+        targetHandle
+          .split("|")[0]
+          .split(";")
+          .some((n) => n === t)
+      ) ||
     targetHandle.split("|")[0] === "str"
   ) {
     let targetNode = reactFlowInstance.getNode(target).data.node;
@@ -830,10 +838,10 @@ export function updateIds(newFlow, getNodeId) {
   });
 }
 
-export function groupByFamily(data, baseClasses) {
+export function groupByFamily(data, baseClasses, left, type) {
+  let parentOutput: string;
   let arrOfParent: string[] = [];
   let arrOfType: { family: string; type: string }[] = [];
-
   Object.keys(data).map((d) => {
     Object.keys(data[d]).map((n) => {
       try {
@@ -844,16 +852,15 @@ export function groupByFamily(data, baseClasses) {
         ) {
           arrOfParent.push(d);
         }
+        if (n === type) {
+          parentOutput = d;
+        }
       } catch (e) {
         console.log(e);
       }
     });
   });
 
-  let uniq = arrOfParent.filter(
-    (item, index) => arrOfParent.indexOf(item) === index
-  );
-
   Object.keys(data).map((d) => {
     Object.keys(data[d]).map((n) => {
       try {
@@ -889,6 +896,11 @@ export function groupByFamily(data, baseClasses) {
       result.push({ family: item.family, type: item.type });
     }
 
+    if (left == false) {
+      let resFil = result.filter((group) => group.family === parentOutput);
+      result = resFil;
+    }
+
     return result;
   }, []);
 }