jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
🔧 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.
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-06 23:51:07 -03:00
commit a06b47c9a8
2 changed files with 73 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -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 ||
""
.split("\n")
.map((line, index) => <div key={index}>{line}</div>)}
{validationStatus.params
? validationStatus.params
.split("\n")
.map((line, index) => <div key={index}>{line}</div>)
: ""}
</div>
)
}

127
src/frontend/src/utils.ts
View file

@ -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<SVGProps<SVGSVGElement>>
>,
custom_components: Sparkles as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
unknown: HelpCircle as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
custom: Edit as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ComponentType<SVGProps<SVGSVGElement>>
>,
};
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;
}
}