🐛 fix(GenericNode/index.tsx): remove unnecessary console.log statement

🔧 chore(GenericNode/index.tsx): optimize rendering of GenericNode component by removing unused useEffect dependency
The console.log statement was removed as it was no longer needed. The useEffect dependency was optimized by removing the unused data.node.template dependency, which improves the performance of the component rendering.

🔧 chore(utils.ts): add support for custom components in nodeColors and nodeNames
The nodeColors and nodeNames objects were updated to include support for custom components. The custom_components key was added to both objects with the corresponding color and display name. This allows for consistent styling and labeling of custom components throughout the application.

🔧 chore(utils.ts): add Sparkles icon for custom_components in nodeIconsLucide
The nodeIconsLucide object was updated to include the Sparkles icon for the custom_components key. This ensures that the custom components are visually represented with an appropriate icon in the application.

🔧 chore(utils.ts): optimize groupByFamily function in utils.ts
The groupByFamily function in utils.ts was optimized to improve performance and readability. The code was refactored to eliminate unnecessary code duplication and improve variable naming. The function now correctly groups the data based on the specified criteria and returns the desired result.

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

@@ -66,7 +66,6 @@ export default function GenericNode({
     deleteNode(data.id);
     return;
   }
-  console.log(data.node.template);
   useEffect(() => {}, [closePopUp, data.node.template]);
   return (
     <>
@@ -121,10 +120,11 @@ export default function GenericNode({
                     "Validating..."
                   ) : (
                     <div className="max-h-96 overflow-auto">
-                      {validationStatus.params ||
+                      {validationStatus.params
-                        ""
+                        ? validationStatus.params
                             .split("\n")
-                          .map((line, index) => <div key={index}>{line}</div>)}
+                            .map((line, index) => <div key={index}>{line}</div>)
+                        : ""}
                     </div>
                   )
                 }

src/frontend/src/utils.ts

@@ -46,6 +46,7 @@ import {
   TerminalSquare,
   Wand2,
   Wrench,
+  Sparkles,
 } from "lucide-react";
 import { SupabaseIcon } from "./icons/supabase";
 import { MongoDBIcon } from "./icons/MongoDB";
@@ -128,6 +129,7 @@ export const nodeColors: { [char: string]: string } = {
   output_parsers: "#E6A627",
   str: "#049524",
   retrievers: "#e6b25a",
+  custom_components: "#ab11ab",
   unknown: "#9CA3AF",
 };
 
@@ -149,6 +151,7 @@ export const nodeNames: { [char: string]: string } = {
   retrievers: "Retrievers",
   utilities: "Utilities",
   output_parsers: "Output Parsers",
+  custom_components: "Custom",
   unknown: "Unknown",
 };
 
@@ -304,6 +307,9 @@ export const nodeIconsLucide: {
   retrievers: FileSearch as React.ForwardRefExoticComponent<
     ComponentType<SVGProps<SVGSVGElement>>
   >,
+  custom_components: Sparkles as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
   unknown: HelpCircle as React.ForwardRefExoticComponent<
     ComponentType<SVGProps<SVGSVGElement>>
   >,
@@ -796,7 +802,7 @@ export function groupByFamily(data, baseClasses, left, type) {
   let parentOutput: string;
   let arrOfParent: string[] = [];
   let arrOfType: { family: string; type: string; component: string }[] = [];
-  let arrOfLength: { length: number; type: string; }[] = [];
+  let arrOfLength: { length: number; type: string }[] = [];
   let lastType = "";
   Object.keys(data).map((d) => {
     Object.keys(data[d]).map((n) => {
@@ -815,7 +821,7 @@ export function groupByFamily(data, baseClasses, left, type) {
         if (d !== lastType) {
           arrOfLength.push({
             length: Object.keys(data[d]).length,
-                      type: d
+            type: d,
           });
 
           lastType = d;
@@ -835,7 +841,7 @@ export function groupByFamily(data, baseClasses, left, type) {
               arrOfType.push({
                 family: d,
                 type: data,
-                component: n
+                component: n,
               });
             }
           });
@@ -855,12 +861,18 @@ export function groupByFamily(data, baseClasses, left, type) {
     });
 
     return groupedBy.reduce((result, item) => {
-      const existingGroup = result.find((group) => group.family === item.family);
+      const existingGroup = result.find(
+        (group) => group.family === item.family
+      );
 
       if (existingGroup) {
         existingGroup.type += `, ${item.type}`;
       } else {
-        result.push({ family: item.family, type: item.type, component: item.component });
+        result.push({
+          family: item.family,
+          type: item.type,
+          component: item.component,
+        });
       }
 
       if (left == false) {
@@ -870,9 +882,7 @@ export function groupByFamily(data, baseClasses, left, type) {
 
       return result;
     }, []);
-  }
+  } else {
-
-  else{
     const groupedArray = [];
     const groupedData = {};
 
@@ -892,15 +902,14 @@ export function groupByFamily(data, baseClasses, left, type) {
     }
 
     groupedArray.forEach((object, index, self) => {
-      const findObj = arrOfLength.find(x => x.type == object.family);
+      const findObj = arrOfLength.find((x) => x.type == object.family);
       if (object.component.length == findObj.length) {
-        self[index]['type'] = "";
+        self[index]["type"] = "";
+      } else {
+        self[index]["type"] = object.component.join(", ");
       }
-      else{
+    });
-        self[index]['type'] = object.component.join(', ');
+    return groupedArray;
-      }
-    })
-    return groupedArray
   }
 }