🐛 fix(parameterComponent): fix linting issues and add missing import

✨ feat(parameterComponent): add support for custom components in groupByFamily function
✨ feat(utils): add groupByFamilyCustom function to handle custom components in groupByFamily function

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

@@ -27,6 +27,7 @@ import {
   classNames,
   getRandomKeyByssmm,
   groupByFamily,
+  groupByFamilyCustom,
 } from "../../../../utils/utils";
 
 export default function ParameterComponent({
@@ -99,46 +100,48 @@ export default function ParameterComponent({
     );
   }, [info]);
 
+
+
   useEffect(() => {
+    let groupedObj = groupByFamily(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes);
+    
+    if(groupedObj?.length === 0){
+      groupedObj = groupByFamilyCustom(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes)
+    } 
 
 
-    console.log("mydata", myData);
+    if(groupedObj){
-    console.log("tooltipTitle", tooltipTitle);
+      refNumberComponents.current = groupedObj[0]?.type?.length;
-    console.log("left", left);
+
-    console.log("data.type", data.type);
+      refHtml.current = groupedObj.map((item, i) => {
-    console.log("flows", flows);
 
         
-    const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
 
-    refNumberComponents.current = groupedObj[0]?.type?.length;
+        const Icon: any = nodeIconsLucide[item.family];
   
-    refHtml.current = groupedObj.map((item, i) => {
+        return (
-      const Icon: any = nodeIconsLucide[item.family];
+          <span
-
+            key={getRandomKeyByssmm() + item.family + i}
-      return (
+            className={classNames(
-        <span
+              i > 0 ? "mt-2 flex items-center" : "flex items-center"
-          key={getRandomKeyByssmm() + item.family + i}
+            )}
-          className={classNames(
-            i > 0 ? "mt-2 flex items-center" : "flex items-center"
-          )}
-        >
-          <div
-            className="h-5 w-5"
-            style={{
-              color: nodeColors[item.family],
-            }}
           >
-            <Icon
+            <div
               className="h-5 w-5"
-              strokeWidth={1.5}
               style={{
-                color: nodeColors[item.family] ?? nodeColors.unknown,
+                color: nodeColors[item.family],
               }}
-            />
+            >
-          </div>
+              <Icon
-          <span className="ps-2 text-xs text-foreground">
+                className="h-5 w-5"
-            {nodeNames[item.family] ?? ""}{" "}
+                strokeWidth={1.5}
+                style={{
+                  color: nodeColors[item.family] ?? nodeColors.unknown,
+                }}
+              />
+            </div>
+            <span className="ps-2 text-xs text-foreground">
+            {item.family !== 'custom_components' ? nodeNames[item.family] : item.component ?? ""}{" "}
             <span className="text-xs">
               {" "}
               {item.type === "" ? "" : " - "}
@@ -155,10 +158,14 @@ export default function ParameterComponent({
                 : item.type}
             </span>
           </span>
-        </span>
+
-      );
+          </span>
-    });
+        );
-  }, [tooltipTitle]);
+      });
+    }
+
+    
+  }, [tooltipTitle, flows.find((f) => f.id === tabId).data.nodes]);
   return (
     <div
       ref={ref}

src/frontend/src/utils/utils.ts

@@ -5,6 +5,7 @@ import { IVarHighlightType } from "../types/components";
 import { FlowType } from "../types/flow";
 import { TabsState } from "../types/tabs";
 import { buildTweaks } from "./reactflowUtils";
+import { nodeNames } from "./styleUtils";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -88,12 +89,13 @@ export function checkUpperWords(str: string) {
 export const isWrappedWithClass = (event: any, className: string | undefined) =>
   event.target.closest(`.${className}`);
 
-export function groupByFamily(data, baseClasses, left, type) {
+export function groupByFamily(data, baseClasses, left, type, flow) {
   let parentOutput: string;
   let arrOfParent: string[] = [];
   let arrOfType: { family: string; type: string; component: string }[] = [];
   let arrOfLength: { length: number; type: string }[] = [];
   let lastType = "";
+
   Object.keys(data).forEach((d) => {
     Object.keys(data[d]).forEach((n) => {
       try {
@@ -203,6 +205,104 @@ export function groupByFamily(data, baseClasses, left, type) {
   }
 }
 
+export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
+  let arrOfParentCustom: string[] = [];
+  let arrOfType: { family: string; type: string; component: string }[] = [];
+  
+
+  if (type === "CustomComponent") {
+    const uniqueValuesSet = new Set();
+    flow.forEach((element) => {
+      element["data"]["node"]["base_classes"].forEach((el) => {
+        if (!uniqueValuesSet.has(el)) {
+          arrOfParentCustom.push(el);
+          uniqueValuesSet.add(el);
+        }
+      });
+    });
+  }
+
+  
+
+  if (left === false) {
+    arrOfParentCustom.map((n) => {
+      try {
+        arrOfType.push({
+          family: "custom_components",
+          type: n,
+          component: nodeNames["custom_components"],
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    });
+    
+  }
+
+  else{
+    flow.forEach((element) => {
+      Object.keys(element["data"]["node"]["template"]).map((el) => {
+        if(element["data"]["node"]["template"][el].input_types &&  element["data"]["node"]["template"][el].input_types.length > 0){
+          element["data"]["node"]["template"][el].input_types.map((n) => {
+            try {
+              arrOfType.push({
+                family: "custom_components",
+                type: n,
+                component: nodeNames["custom_components"],
+              });
+            } catch (e) {
+              console.log(e);
+            }
+          });
+        }
+        
+      });
+    });
+    
+  }
+
+const groupedResult = {};
+
+arrOfType.forEach((item) => {
+  const { family, type, component } = item;
+  if (groupedResult.hasOwnProperty(family)) {
+    if (!groupedResult[family].type.includes(type)) {
+      groupedResult[family].type += `, ${type}`;
+    }
+  } else {
+    groupedResult[family] = { family, type, component };
+  }
+});
+
+
+const result = Object.values(groupedResult);
+
+if(left === false)
+{
+  let resultFiltered = [];
+  flow.forEach((element) => {
+    Object.keys(element["data"]["node"]["template"]).map((el) => {
+      if(element["data"]["node"]["template"][el].input_types &&  element["data"]["node"]["template"][el].input_types.length > 0){
+        element["data"]["node"]["template"][el].input_types.map((n) => {
+          resultFiltered.push({
+            family: "custom_components",
+            type: n,
+            component: element["data"]["node"]["display_name"],
+          })
+        });
+      }
+    });
+  });
+  return resultFiltered;
+}
+
+else{
+  return result;
+}
+
+
+}
+
 export function buildInputs(tabsState, id) {
   return tabsState &&
     tabsState[id] &&