From a06b47c9a820265238aa7071e5edfbd5cd092a7d Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Thu, 6 Jul 2023 23:51:07 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode/index.tsx):=20re?= =?UTF-8?q?move=20unnecessary=20console.log=20statement=20=F0=9F=94=A7=20c?= =?UTF-8?q?hore(GenericNode/index.tsx):=20optimize=20rendering=20of=20Gene?= =?UTF-8?q?ricNode=20component=20by=20removing=20unused=20useEffect=20depe?= =?UTF-8?q?ndency=20The=20console.log=20statement=20was=20removed=20as=20i?= =?UTF-8?q?t=20was=20no=20longer=20needed.=20The=20useEffect=20dependency?= =?UTF-8?q?=20was=20optimized=20by=20removing=20the=20unused=20data.node.t?= =?UTF-8?q?emplate=20dependency,=20which=20improves=20the=20performance=20?= =?UTF-8?q?of=20the=20component=20rendering.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔧 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/CustomNodes/GenericNode/index.tsx | 10 +- src/frontend/src/utils.ts | 127 ++++++++++-------- 2 files changed, 73 insertions(+), 64 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index e9ab81a81..c2226a126 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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..." ) : (
- {validationStatus.params || - "" - .split("\n") - .map((line, index) =>
{line}
)} + {validationStatus.params + ? validationStatus.params + .split("\n") + .map((line, index) =>
{line}
) + : ""}
) } diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index 8be2ca07a..ce091bd7b 100644 --- a/src/frontend/src/utils.ts +++ b/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,12 +307,15 @@ export const nodeIconsLucide: { retrievers: FileSearch as React.ForwardRefExoticComponent< ComponentType> >, + custom_components: Sparkles as React.ForwardRefExoticComponent< + ComponentType> + >, unknown: HelpCircle as React.ForwardRefExoticComponent< ComponentType> >, custom: Edit as React.ForwardRefExoticComponent< - ComponentType> ->, + ComponentType> + >, }; export const gradients = [ @@ -796,36 +802,36 @@ 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) => { - try { - if ( - data[d][n].base_classes.some((r) => - baseClasses.split("\n").includes(r) - ) - ) { - arrOfParent.push(d); - } - 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); - } - }); + Object.keys(data[d]).map((n) => { + try { + if ( + data[d][n].base_classes.some((r) => + baseClasses.split("\n").includes(r) + ) + ) { + arrOfParent.push(d); + } + 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); + } + }); }); - + Object.keys(data).map((d) => { Object.keys(data[d]).map((n) => { try { @@ -835,7 +841,7 @@ export function groupByFamily(data, baseClasses, left, type) { arrOfType.push({ family: d, type: data, - component: n + component: n, }); } }); @@ -846,61 +852,64 @@ export function groupByFamily(data, baseClasses, left, type) { }); }); - if(left == false){ + if (left == false) { let groupedBy = arrOfType.filter((object, index, self) => { const foundIndex = self.findIndex( (o) => o.family === object.family && o.type === object.type ); return foundIndex === index; }); - + 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) { let resFil = result.filter((group) => group.family === parentOutput); result = resFil; } - + return result; }, []); - } - - else{ + } 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); - } + 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.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'] = ""; + const findObj = arrOfLength.find((x) => x.type == object.family); + if (object.component.length == findObj.length) { + self[index]["type"] = ""; + } else { + self[index]["type"] = object.component.join(", "); } - else{ - self[index]['type'] = object.component.join(', '); - } - }) - return groupedArray + }); + return groupedArray; } }