From 4f33f02d4f03519bc9f1df37d52c2fd06bc2d224 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 4 Jul 2023 19:08:19 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20fix?= =?UTF-8?q?=20syntax=20error=20in=20refHtml.current=20assignment=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20fix=20classNames=20us?= =?UTF-8?q?age=20in=20span=20element=20=F0=9F=90=9B=20fix(parameterCompone?= =?UTF-8?q?nt):=20remove=20unnecessary=20line=20break=20element=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20fix=20className=20usa?= =?UTF-8?q?ge=20in=20span=20element=20=F0=9F=90=9B=20fix(ShadTooltipCompon?= =?UTF-8?q?ent):=20add=20className=20prop=20to=20TooltipContent=20componen?= =?UTF-8?q?t=20=F0=9F=90=9B=20fix(utils):=20fix=20syntax=20error=20in=20gr?= =?UTF-8?q?oupByFamily=20function=20=E2=9C=A8=20feat(parameterComponent):?= =?UTF-8?q?=20add=20support=20for=20grouping=20and=20displaying=20multiple?= =?UTF-8?q?=20types=20in=20parameterComponent=20=E2=9C=A8=20feat(utils):?= =?UTF-8?q?=20add=20support=20for=20grouping=20and=20filtering=20data=20in?= =?UTF-8?q?=20groupByFamily=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 13 +- .../components/ShadTooltipComponent/index.tsx | 1 + src/frontend/src/utils.ts | 121 ++++++++++++------ 3 files changed, 92 insertions(+), 43 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index dda444d05..439cf1fe9 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -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 ( {nodeNames[item.family] ?? ""}{" "} - + {" "} -  {item.type.split(", ").length > 2 @@ -113,14 +114,15 @@ export default function ParameterComponent({ ? el : (el += `, `)} - {i % 2 === 0 && i > 0 &&
} )) : item.type} - )); + ); + }); + }, [tooltipTitle]); return ( @@ -145,6 +147,7 @@ export default function ParameterComponent({ <> ) : ( { side={props.side} avoidCollisions={false} sticky="always" + className={props.class} > {props.content} diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index f2d5eca43..939461f13 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -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) {