🐛 fix(parameterComponent): fix syntax error in refHtml.current assignment

🐛 fix(parameterComponent): fix classNames usage in span element
🐛 fix(parameterComponent): remove unnecessary line break element
🐛 fix(parameterComponent): fix className usage in span element
🐛 fix(ShadTooltipComponent): add className prop to TooltipContent component
🐛 fix(utils): fix syntax error in groupByFamily function
✨ feat(parameterComponent): add support for grouping and displaying multiple types in parameterComponent
✨ feat(utils): add support for grouping and filtering data in groupByFamily function

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

@@ -85,7 +85,8 @@ export default function ParameterComponent({
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
       
-    refHtml.current = groupedObj.map((item, i) => (
+  refHtml.current = groupedObj.map((item, i) => {
+    return (
       <span
         key={getRandomKeyByssmm() + item.family + i}
         className={classNames(
@@ -102,7 +103,7 @@ export default function ParameterComponent({
         </div>
         <span className="ps-2 text-gray-950">
           {nodeNames[item.family] ?? ""}{" "}
-          <span className={classNames(left ? "hidden" : "")}>
+          <span>
             {" "}
             -&nbsp;
             {item.type.split(", ").length > 2
@@ -113,14 +114,15 @@ export default function ParameterComponent({
                         ? el
                         : (el += `, `)}
                     </span>
-                    {i % 2 === 0 && i > 0 && <br />}
                   </React.Fragment>
                 ))
               : item.type}
           </span>
         </span>
       </span>
-    ));
+    );
+  });
+  
   }, [tooltipTitle]);
 
   return (
@@ -145,6 +147,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
+            class="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -15,6 +15,7 @@ const ShadTooltip = (props) => {
           side={props.side}
           avoidCollisions={false}
           sticky="always"
+          className={props.class}
         >
           {props.content}
         </TooltipContent>

src/frontend/src/utils.ts

@@ -841,7 +841,9 @@ export function updateIds(newFlow, getNodeId) {
 export function groupByFamily(data, baseClasses, left, type) {
   let parentOutput: string;
   let arrOfParent: string[] = [];
-  let arrOfType: { family: string; type: string }[] = [];
+  let arrOfType: { family: string; type: string; component: string }[] = [];
+  let arrOfLength: { length: number; type: string; }[] = [];
+  let lastType = "";
   Object.keys(data).map((d) => {
       Object.keys(data[d]).map((n) => {
           try {
@@ -855,6 +857,15 @@ export function groupByFamily(data, baseClasses, left, type) {
               if (n === type) {
                   parentOutput = d;
               }
+  
+              if (d !== lastType) {
+                  arrOfLength.push({
+                      length: Object.keys(data[d]).length,
+                      type: d
+                  });
+  
+                  lastType = d;
+              }
           } catch (e) {
               console.log(e);
           }
@@ -870,6 +881,7 @@ export function groupByFamily(data, baseClasses, left, type) {
               arrOfType.push({
                 family: d,
                 type: data,
+                component: n
               });
             }
           });
@@ -880,6 +892,7 @@ export function groupByFamily(data, baseClasses, left, type) {
     });
   });
 
+  if(left == false){
     let groupedBy = arrOfType.filter((object, index, self) => {
       const foundIndex = self.findIndex(
         (o) => o.family === object.family && o.type === object.type
@@ -893,7 +906,7 @@ export function groupByFamily(data, baseClasses, left, type) {
       if (existingGroup) {
         existingGroup.type += `, ${item.type}`;
       } else {
-      result.push({ family: item.family, type: item.type });
+        result.push({ family: item.family, type: item.type, component: item.component });
       }
   
       if (left == false) {
@@ -903,6 +916,38 @@ export function groupByFamily(data, baseClasses, left, type) {
   
       return result;
     }, []);
+  }
+
+  else{
+    const groupedArray = [];
+    const groupedData = {};
+    
+    arrOfType.forEach((item) => {
+        const { family, type, component } = item;
+        const key = `${family}-${type}`;
+    
+        if (!groupedData[key]) {
+            groupedData[key] = { family, type, component: [component] };
+        } else {
+            groupedData[key].component.push(component);
+        }
+    });
+    
+    for (const key in groupedData) {
+        groupedArray.push(groupedData[key]);
+    }
+
+    groupedArray.forEach((object, index, self) => {
+      const findObj = arrOfLength.find(x => x.type == object.family);
+      if(object.component.length == findObj.length){
+        self[index]['type'] = object.type;
+      }
+      else{
+        self[index]['type'] = object.component.join(', ');
+      }
+    })
+    return groupedArray
+  }
 }
 
 export function buildTweaks(flow) {