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

🐛 fix(parameterComponent): fix syntax error in refHtml.current assignment

Browse source 
🐛 fix(parameterComponent): fix classNames usage in span element
🐛 fix(parameterComponent): remove unnecessary line break element
🐛 fix(parameterComponent): fix className usage in span element
🐛 fix(ShadTooltipComponent): add className prop to TooltipContent component
🐛 fix(utils): fix syntax error in groupByFamily function
✨ feat(parameterComponent): add support for grouping and displaying multiple types in parameterComponent
✨ feat(utils): add support for grouping and filtering data in groupByFamily function
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-04 19:08:19 -03:00
commit 4f33f02d4f
3 changed files with 92 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -84,8 +84,9 @@ export default function ParameterComponent({
useEffect(() => {
const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
refHtml.current = groupedObj.map((item, i) => (
refHtml.current = groupedObj.map((item, i) => {
return (
<span
key={getRandomKeyByssmm() + item.family + i}
className={classNames(
@ -102,7 +103,7 @@ export default function ParameterComponent({
</div>
<span className="ps-2 text-gray-950">
{nodeNames[item.family] ?? ""}{" "}
<span className={classNames(left ? "hidden" : "")}>
<span>
{" "}
-&nbsp;
{item.type.split(", ").length > 2
@ -113,14 +114,15 @@ export default function ParameterComponent({
? el
: (el += `, `)}
</span>
{i % 2 === 0 && i > 0 && <br />}
</React.Fragment>
))
: item.type}
</span>
</span>
</span>
));
);
});
}, [tooltipTitle]);
return (
@ -145,6 +147,7 @@ export default function ParameterComponent({
<></>
) : (
<ShadTooltip
class="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
delayDuration={0}
content={refHtml.current}
side={left ? "left" : "right"}

1
src/frontend/src/components/ShadTooltipComponent/index.tsx
View file

@ -15,6 +15,7 @@ const ShadTooltip = (props) => {
side={props.side}
avoidCollisions={false}
sticky="always"
className={props.class}
>
{props.content}
</TooltipContent>

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

@ -841,26 +841,37 @@ export function updateIds(newFlow, getNodeId) {
export function groupByFamily(data, baseClasses, left, type) {
let parentOutput: string;
let arrOfParent: string[] = [];
let arrOfType: { family: string; type: string }[] = [];
let arrOfType: { family: string; type: string; component: 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;
}
} 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 {
@ -870,6 +881,7 @@ export function groupByFamily(data, baseClasses, left, type) {
arrOfType.push({
family: d,
type: data,
component: n
});
}
});
@ -880,29 +892,62 @@ export function groupByFamily(data, baseClasses, left, type) {
});
});
let groupedBy = arrOfType.filter((object, index, self) => {
const foundIndex = self.findIndex(
(o) => o.family === object.family && o.type === object.type
);
return foundIndex === index;
});
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);
if (existingGroup) {
existingGroup.type += `, ${item.type}`;
} else {
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;
}, []);
}
return groupedBy.reduce((result, item) => {
const existingGroup = result.find((group) => group.family === item.family);
if (existingGroup) {
existingGroup.type += `, ${item.type}`;
} else {
result.push({ family: item.family, type: item.type });
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);
}
});
for (const key in groupedData) {
groupedArray.push(groupedData[key]);
}
if (left == false) {
let resFil = result.filter((group) => group.family === parentOutput);
result = resFil;
}
return result;
}, []);
groupedArray.forEach((object, index, self) => {
const findObj = arrOfLength.find(x => x.type == object.family);
if(object.component.length == findObj.length){
self[index]['type'] = object.type;
}
else{
self[index]['type'] = object.component.join(', ');
}
})
return groupedArray
}
}
export function buildTweaks(flow) {