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) {