From 530d416735afc1abf0209e5f7c2f962ac295bc22 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 24 Jul 2023 10:09:53 -0300 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=94=A7=20fix(parameterComponent):=20i?= =?UTF-8?q?mport=20'flow'=20function=20from=20lodash=20to=20fix=20missing?= =?UTF-8?q?=20reference=20error=20=F0=9F=94=A7=20fix(parameterComponent):?= =?UTF-8?q?=20add=20'flows'=20to=20the=20list=20of=20destructured=20variab?= =?UTF-8?q?les=20from=20TabsContext=20to=20fix=20missing=20reference=20err?= =?UTF-8?q?or=20=F0=9F=94=A7=20fix(parameterComponent):=20remove=20unused?= =?UTF-8?q?=20console.log=20statements=20to=20clean=20up=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 8edc1affa..309485584 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,4 +1,4 @@ -import { cloneDeep } from "lodash"; +import { cloneDeep, flow } from "lodash"; import React, { useContext, useEffect, useRef, useState } from "react"; import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; @@ -49,7 +49,7 @@ export default function ParameterComponent({ const infoHtml = useRef(null); const updateNodeInternals = useUpdateNodeInternals(); const [position, setPosition] = useState(0); - const { setTabsState, tabId, save } = useContext(TabsContext); + const { setTabsState, tabId, save, flows } = useContext(TabsContext); // Update component position useEffect(() => { @@ -100,6 +100,15 @@ 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); + + const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type); refNumberComponents.current = groupedObj[0]?.type?.length; From 891abae528c5575415a8bc215fd1fbdfdba8b694 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 24 Jul 2023 15:10:55 -0300 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20f?= =?UTF-8?q?ix=20linting=20issues=20and=20add=20missing=20import=20?= =?UTF-8?q?=E2=9C=A8=20feat(parameterComponent):=20add=20support=20for=20c?= =?UTF-8?q?ustom=20components=20in=20groupByFamily=20function=20=E2=9C=A8?= =?UTF-8?q?=20feat(utils):=20add=20groupByFamilyCustom=20function=20to=20h?= =?UTF-8?q?andle=20custom=20components=20in=20groupByFamily=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 75 +++++++------ src/frontend/src/utils/utils.ts | 102 +++++++++++++++++- 2 files changed, 142 insertions(+), 35 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 309485584..039f67ecd 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -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 ( - 0 ? "mt-2 flex items-center" : "flex items-center" - )} - > -
0 ? "mt-2 flex items-center" : "flex items-center" + )} > - -
- - {nodeNames[item.family] ?? ""}{" "} + > + + + + {item.family !== 'custom_components' ? nodeNames[item.family] : item.component ?? ""}{" "} {" "} {item.type === "" ? "" : " - "} @@ -155,10 +158,14 @@ export default function ParameterComponent({ : item.type} - - ); - }); - }, [tooltipTitle]); + + + ); + }); + } + + + }, [tooltipTitle, flows.find((f) => f.id === tabId).data.nodes]); return (
) { 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] && From 078626052ff59a0f78b84efd44ff1d3032144a6b Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 24 Jul 2023 15:30:00 -0300 Subject: [PATCH 3/4] formatting --- .../components/parameterComponent/index.tsx | 79 ++++++++++-------- .../src/modals/codeAreaModal/index.tsx | 5 ++ src/frontend/src/utils/utils.ts | 82 +++++++++---------- 3 files changed, 88 insertions(+), 78 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 039f67ecd..baf457467 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,4 +1,4 @@ -import { cloneDeep, flow } from "lodash"; +import { cloneDeep } from "lodash"; import React, { useContext, useEffect, useRef, useState } from "react"; import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; @@ -14,6 +14,7 @@ import PromptAreaComponent from "../../../../components/promptComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent"; import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants/constants"; +import { PopUpContext } from "../../../../contexts/popUpContext"; import { TabsContext } from "../../../../contexts/tabsContext"; import { typesContext } from "../../../../contexts/typesContext"; import { ParameterComponentType } from "../../../../types/components"; @@ -51,6 +52,7 @@ export default function ParameterComponent({ const updateNodeInternals = useUpdateNodeInternals(); const [position, setPosition] = useState(0); const { setTabsState, tabId, save, flows } = useContext(TabsContext); + const { closeEdit } = useContext(PopUpContext); // Update component position useEffect(() => { @@ -100,25 +102,33 @@ export default function ParameterComponent({ ); }, [info]); - - useEffect(() => { - 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) - } + console.log(flows.find((f) => f.id === tabId).data.nodes); + let groupedObj = groupByFamily( + myData, + tooltipTitle, + left, + data.type, + flows.find((f) => f.id === tabId).data.nodes + ); - if(groupedObj){ + if (groupedObj?.length === 0) { + groupedObj = groupByFamilyCustom( + myData, + tooltipTitle, + left, + data.type, + flows.find((f) => f.id === tabId).data.nodes + ); + } + + if (groupedObj) { refNumberComponents.current = groupedObj[0]?.type?.length; refHtml.current = groupedObj.map((item, i) => { - - - const Icon: any = nodeIconsLucide[item.family]; - + return (
- {item.family !== 'custom_components' ? nodeNames[item.family] : item.component ?? ""}{" "} - - {" "} - {item.type === "" ? "" : " - "} - {item.type.split(", ").length > 2 - ? item.type.split(", ").map((el, i) => ( - - - {i === item.type.split(", ").length - 1 - ? el - : (el += `, `)} - - - )) - : item.type} + {item.family !== "custom_components" + ? nodeNames[item.family] + : item.component ?? ""}{" "} + + {" "} + {item.type === "" ? "" : " - "} + {item.type.split(", ").length > 2 + ? item.type.split(", ").map((el, i) => ( + + + {i === item.type.split(", ").length - 1 + ? el + : (el += `, `)} + + + )) + : item.type} + - - ); }); } - - - }, [tooltipTitle, flows.find((f) => f.id === tabId).data.nodes]); + }, [ + tooltipTitle, + flows.find((f) => f.id === tabId).data.nodes.length, + closeEdit, + ]); return (
(null); + const { setCloseEdit } = useContext(PopUpContext); useEffect(() => { // if nodeClass.template has more fields other than code and dynamic is true @@ -61,6 +64,7 @@ export default function CodeAreaModal({ }); setOpen(false); setValue(code); + setCloseEdit(getRandomKeyByssmm().toString()); // setValue(code); } else { if (funcErrors.length !== 0) { @@ -97,6 +101,7 @@ export default function CodeAreaModal({ setNodeClass(data); setValue(code); setOpen(false); + setCloseEdit(getRandomKeyByssmm().toString()); } }) .catch((err) => { diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 4b6a7fb20..d70f6a5a9 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -208,7 +208,6 @@ export function groupByFamily(data, baseClasses, left, type, flow) { 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(); @@ -222,8 +221,6 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) { }); } - - if (left === false) { arrOfParentCustom.map((n) => { try { @@ -236,13 +233,13 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) { console.log(e); } }); - - } - - else{ + } 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){ + 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({ @@ -255,52 +252,47 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) { } }); } - }); }); - } -const groupedResult = {}; + 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"], - }) - }); + 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 }; + } }); - return resultFiltered; -} - -else{ - return result; -} + 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) { From fb6caaa6bc063bf290b722698ea6f7878b74f658 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 24 Jul 2023 18:20:12 -0300 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A5=20refactor(parameterComponent)?= =?UTF-8?q?:=20remove=20unnecessary=20console.log=20statement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GenericNode/components/parameterComponent/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index baf457467..f6403b8cb 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -103,8 +103,6 @@ export default function ParameterComponent({ }, [info]); useEffect(() => { - console.log(flows.find((f) => f.id === tabId).data.nodes); - let groupedObj = groupByFamily( myData, tooltipTitle,