🐛 fix(parameterComponent): fix classNames order in ParameterComponent to ensure correct styling

🐛 fix(utils): fix logic in isValidConnection to correctly check for valid connections
✨ feat(parameterComponent): add support for left alignment of parameter title in ParameterComponent
✨ feat(utils): add support for filtering grouped data by parentOutput in groupByFamily function

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,

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;
   }, []);
 }