fix(parameterComponent): refactor code to handle both item.display_name and item.type in rendering parameter component

fix(extraSidebarComponent): fix useEffect dependency warning by adding getFilterEdge to the dependency array
fix(utils): refactor groupByFamily function to use nodeGroupedObjType type for tempInputs and tempOutputs arrays

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

@@ -168,6 +168,24 @@ export default function ParameterComponent({
               </div>
               <span className="ps-2 text-xs text-foreground">
                 {nodeNames[item.family] ?? "Other"}{" "}
+                {item?.display_name && item?.display_name?.length > 0 ? (
+                  <span className="text-xs">
+                    {" "}
+                    {item.display_name === "" ? "" : " - "}
+                    {item.display_name.split(", ").length > 2
+                      ? item.display_name.split(", ").map((el, index) => (
+                          <React.Fragment key={el + index}>
+                            <span>
+                              {index ===
+                              item.display_name.split(", ").length - 1
+                                ? el
+                                : (el += `, `)}
+                            </span>
+                          </React.Fragment>
+                        ))
+                      : item.display_name}
+                  </span>
+                ) : (
                   <span className="text-xs">
                     {" "}
                     {item.type === "" ? "" : " - "}
@@ -183,6 +201,7 @@ export default function ParameterComponent({
                         ))
                       : item.type}
                   </span>
+                )}
               </span>
             </span>
           </div>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -135,6 +135,43 @@ export default function ExtraSidebar(): JSX.Element {
     handleSearchInput(search);
   }, [data]);
 
+  useEffect(() => {
+    if (getFilterEdge?.length > 0) {
+      setFilterData((_) => {
+        let dataClone = cloneDeep(data);
+        let ret = {};
+        Object.keys(dataClone).forEach((d: keyof APIObjectType, i) => {
+          ret[d] = {};
+          if (getFilterEdge.some((x) => x.family === d)) {
+            ret[d] = dataClone[d];
+
+            const filtered = getFilterEdge
+              .filter((x) => x.family === d)
+              .pop()
+              .type.split(",");
+
+            for (let i = 0; i < filtered.length; i++) {
+              filtered[i] = filtered[i].trimStart();
+            }
+
+            if (filtered.some((x) => x !== "")) {
+              let keys = Object.keys(dataClone[d]).filter((nd) =>
+                filtered.includes(nd)
+              );
+              Object.keys(dataClone[d]).forEach((element) => {
+                if (!keys.includes(element)) {
+                  delete ret[d][element];
+                }
+              });
+            }
+          }
+        });
+        setSearch("");
+        return ret;
+      });
+    }
+  }, [getFilterEdge]);
+
   const handleShareFlow = () => {
     const reactFlow = flow!.data as ReactFlowJsonObject;
     const saveFlow: FlowType = {

src/frontend/src/types/components/index.ts

@@ -366,6 +366,11 @@ export type groupedObjType = {
   type: string;
 };
 
+export type nodeGroupedObjType = {
+  displayName: string;
+  node: string[] | string;
+};
+
 type test = {
   [char: string]: string;
 };

src/frontend/src/utils/utils.ts

@@ -9,6 +9,7 @@ import {
 import {
   IVarHighlightType,
   groupedObjType,
+  nodeGroupedObjType,
   tweakType,
 } from "../types/components";
 import { FlowType, NodeType } from "../types/flow";
@@ -107,13 +108,15 @@ export function groupByFamily(
   const baseClassesSet = new Set(baseClasses.split("\n"));
   let arrOfPossibleInputs: Array<{
     category: string;
-    nodes: string[];
+    nodes: nodeGroupedObjType[];
     full: boolean;
+    display_name?: string;
   }> = [];
   let arrOfPossibleOutputs: Array<{
     category: string;
-    nodes: string[];
+    nodes: nodeGroupedObjType[];
     full: boolean;
+    display_name?: string;
   }> = [];
   let checkedNodes = new Map();
   const excludeTypes = new Set([
@@ -126,18 +129,23 @@ export function groupByFamily(
     "int",
   ]);
 
-  const checkBaseClass = (template: TemplateVariableType) =>
+  const checkBaseClass = (template: TemplateVariableType) => {
+    return (
       template.type &&
       template.show &&
-    ((!excludeTypes.has(template.type) && baseClassesSet.has(template.type)) ||
+      ((!excludeTypes.has(template.type) &&
+        baseClassesSet.has(template.type)) ||
         (template.input_types &&
-        template.input_types.some((inputType) =>
+          template.input_types.some((inputType) => {
-          baseClassesSet.has(inputType)
+            baseClassesSet.has(inputType);
-        )));
+          })))
+    );
+  };
 
   if (flow) {
     for (const node of flow) {
       const nodeData = node.data;
+
       const foundNode = checkedNodes.get(nodeData.type);
       checkedNodes.set(nodeData.type, {
         hasBaseClassInTemplate:
@@ -148,16 +156,18 @@ export function groupByFamily(
           nodeData.node!.base_classes.some((baseClass) =>
             baseClassesSet.has(baseClass)
           ),
+        displayName: nodeData.node?.display_name,
       });
     }
   }
 
   for (const [d, nodes] of Object.entries(data)) {
-    let tempInputs: string[] = [],
+    let tempInputs: nodeGroupedObjType[] = [],
-      tempOutputs: string[] = [];
+      tempOutputs: nodeGroupedObjType[] = [];
 
     for (const [n, node] of Object.entries(nodes!)) {
       let foundNode = checkedNodes.get(n);
+
       if (!foundNode) {
         foundNode = {
           hasBaseClassInTemplate: Object.values(node!.template).some(
@@ -166,15 +176,18 @@ export function groupByFamily(
           hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) =>
             baseClassesSet.has(baseClass)
           ),
+          displayName: node?.display_name,
         };
-        checkedNodes.set(n, foundNode);
       }
 
-      if (foundNode.hasBaseClassInTemplate) tempInputs.push(n);
+      if (foundNode.hasBaseClassInTemplate)
-      if (foundNode.hasBaseClassInBaseClasses) tempOutputs.push(n);
+        tempInputs.push({ node: n, displayName: foundNode.displayName });
+      if (foundNode.hasBaseClassInBaseClasses)
+        tempOutputs.push({ node: n, displayName: foundNode.displayName });
     }
 
     const totalNodes = Object.keys(nodes!).length;
+
     if (tempInputs.length)
       arrOfPossibleInputs.push({
         category: d,
@@ -188,14 +201,19 @@ export function groupByFamily(
         full: tempOutputs.length === totalNodes,
       });
   }
+
   return left
     ? arrOfPossibleOutputs.map((output) => ({
         family: output.category,
-        type: output.full ? "" : output.nodes.join(", "),
+        type: output.full
+          ? ""
+          : output.nodes.map((item) => item.node).join(", "),
+        display_name: "",
       }))
     : arrOfPossibleInputs.map((input) => ({
         family: input.category,
-        type: input.full ? "" : input.nodes.join(", "),
+        type: input.full ? "" : input.nodes.map((item) => item.node).join(", "),
+        display_name: input.nodes.map((item) => item.displayName).join(", "),
       }));
 }