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

🐛 fix(parameterComponent): fix linting issues and add missing import

Browse source 
✨ feat(parameterComponent): add support for custom components in groupByFamily function
✨ feat(utils): add groupByFamilyCustom function to handle custom components in groupByFamily function
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-24 15:10:55 -03:00
commit 891abae528
2 changed files with 142 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -27,6 +27,7 @@ import {
classNames,
getRandomKeyByssmm,
groupByFamily,
groupByFamilyCustom,
} from "../../../../utils/utils";
export default function ParameterComponent({
@ -99,46 +100,48 @@ export default function ParameterComponent({
);
}, [info]);
useEffect(() => {
console.log("mydata", myData);
console.log("tooltipTitle", tooltipTitle);
console.log("left", left);
console.log("data.type", data.type);
console.log("flows", flows);
let groupedObj = groupByFamily(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes);
if(groupedObj?.length === 0){
groupedObj = groupByFamilyCustom(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes)
}
const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
refNumberComponents.current = groupedObj[0]?.type?.length;
if(groupedObj){
refNumberComponents.current = groupedObj[0]?.type?.length;
refHtml.current = groupedObj.map((item, i) => {
const Icon: any = nodeIconsLucide[item.family];
refHtml.current = groupedObj.map((item, i) => {
return (
<span
key={getRandomKeyByssmm() + item.family + i}
className={classNames(
i > 0 ? "mt-2 flex items-center" : "flex items-center"
)}
>
<div
className="h-5 w-5"
style={{
color: nodeColors[item.family],
}}
const Icon: any = nodeIconsLucide[item.family];
return (
<span
key={getRandomKeyByssmm() + item.family + i}
className={classNames(
i > 0 ? "mt-2 flex items-center" : "flex items-center"
)}
>
<Icon
<div
className="h-5 w-5"
strokeWidth={1.5}
style={{
color: nodeColors[item.family] ?? nodeColors.unknown,
color: nodeColors[item.family],
}}
/>
</div>
<span className="ps-2 text-xs text-foreground">
{nodeNames[item.family] ?? ""}{" "}
>
<Icon
className="h-5 w-5"
strokeWidth={1.5}
style={{
color: nodeColors[item.family] ?? nodeColors.unknown,
}}
/>
</div>
<span className="ps-2 text-xs text-foreground">
{item.family !== 'custom_components' ? nodeNames[item.family] : item.component ?? ""}{" "}
<span className="text-xs">
{" "}
{item.type === "" ? "" : " - "}
@ -155,10 +158,14 @@ export default function ParameterComponent({
: item.type}
</span>
</span>
</span>
);
});
}, [tooltipTitle]);
</span>
);
});
}
}, [tooltipTitle, flows.find((f) => f.id === tabId).data.nodes]);
return (
<div
ref={ref}

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

@ -5,6 +5,7 @@ import { IVarHighlightType } from "../types/components";
import { FlowType } from "../types/flow";
import { TabsState } from "../types/tabs";
import { buildTweaks } from "./reactflowUtils";
import { nodeNames } from "./styleUtils";
export function classNames(...classes: Array<string>) {
return classes.filter(Boolean).join(" ");
@ -88,12 +89,13 @@ export function checkUpperWords(str: string) {
export const isWrappedWithClass = (event: any, className: string | undefined) =>
event.target.closest(`.${className}`);
export function groupByFamily(data, baseClasses, left, type) {
export function groupByFamily(data, baseClasses, left, type, flow) {
let parentOutput: string;
let arrOfParent: string[] = [];
let arrOfType: { family: string; type: string; component: string }[] = [];
let arrOfLength: { length: number; type: string }[] = [];
let lastType = "";
Object.keys(data).forEach((d) => {
Object.keys(data[d]).forEach((n) => {
try {
@ -203,6 +205,104 @@ export function groupByFamily(data, baseClasses, left, type) {
}
}
export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
let arrOfParentCustom: string[] = [];
let arrOfType: { family: string; type: string; component: string }[] = [];
if (type === "CustomComponent") {
const uniqueValuesSet = new Set();
flow.forEach((element) => {
element["data"]["node"]["base_classes"].forEach((el) => {
if (!uniqueValuesSet.has(el)) {
arrOfParentCustom.push(el);
uniqueValuesSet.add(el);
}
});
});
}
if (left === false) {
arrOfParentCustom.map((n) => {
try {
arrOfType.push({
family: "custom_components",
type: n,
component: nodeNames["custom_components"],
});
} catch (e) {
console.log(e);
}
});
}
else{
flow.forEach((element) => {
Object.keys(element["data"]["node"]["template"]).map((el) => {
if(element["data"]["node"]["template"][el].input_types && element["data"]["node"]["template"][el].input_types.length > 0){
element["data"]["node"]["template"][el].input_types.map((n) => {
try {
arrOfType.push({
family: "custom_components",
type: n,
component: nodeNames["custom_components"],
});
} catch (e) {
console.log(e);
}
});
}
});
});
}
const groupedResult = {};
arrOfType.forEach((item) => {
const { family, type, component } = item;
if (groupedResult.hasOwnProperty(family)) {
if (!groupedResult[family].type.includes(type)) {
groupedResult[family].type += `, ${type}`;
}
} else {
groupedResult[family] = { family, type, component };
}
});
const result = Object.values(groupedResult);
if(left === false)
{
let resultFiltered = [];
flow.forEach((element) => {
Object.keys(element["data"]["node"]["template"]).map((el) => {
if(element["data"]["node"]["template"][el].input_types && element["data"]["node"]["template"][el].input_types.length > 0){
element["data"]["node"]["template"][el].input_types.map((n) => {
resultFiltered.push({
family: "custom_components",
type: n,
component: element["data"]["node"]["display_name"],
})
});
}
});
});
return resultFiltered;
}
else{
return result;
}
}
export function buildInputs(tabsState, id) {
return tabsState &&
tabsState[id] &&