From 078626052ff59a0f78b84efd44ff1d3032144a6b Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 24 Jul 2023 15:30:00 -0300 Subject: [PATCH] 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) {