formatting

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,23 +102,31 @@ export default function ParameterComponent({
     );
   }, [info]);
 
-
-
   useEffect(() => {
-    let groupedObj = groupByFamily(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes);
+    console.log(flows.find((f) => f.id === tabId).data.nodes);
 
-    if(groupedObj?.length === 0){
+    let groupedObj = groupByFamily(
-      groupedObj = groupByFamilyCustom(myData, tooltipTitle, left, data.type, flows.find((f) => f.id === tabId).data.nodes)
+      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
+      );
     }
 
-
+    if (groupedObj) {
-    if(groupedObj){
       refNumberComponents.current = groupedObj[0]?.type?.length;
 
       refHtml.current = groupedObj.map((item, i) => {
-
-        
-
         const Icon: any = nodeIconsLucide[item.family];
 
         return (
@@ -141,7 +151,9 @@ export default function ParameterComponent({
               />
             </div>
             <span className="ps-2 text-xs text-foreground">
-            {item.family !== 'custom_components' ? nodeNames[item.family] : item.component ?? ""}{" "}
+              {item.family !== "custom_components"
+                ? nodeNames[item.family]
+                : item.component ?? ""}{" "}
               <span className="text-xs">
                 {" "}
                 {item.type === "" ? "" : " - "}
@@ -158,14 +170,15 @@ export default function ParameterComponent({
                   : item.type}
               </span>
             </span>
-
           </span>
         );
       });
     }
-
+  }, [
-    
+    tooltipTitle,
-  }, [tooltipTitle, flows.find((f) => f.id === tabId).data.nodes]);
+    flows.find((f) => f.id === tabId).data.nodes.length,
+    closeEdit,
+  ]);
   return (
     <div
       ref={ref}

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -11,9 +11,11 @@ import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
+import { getRandomKeyByssmm } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
@@ -39,6 +41,7 @@ export default function CodeAreaModal({
   const [error, setError] = useState<{
     detail: { error: string; traceback: string };
   }>(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) => {

src/frontend/src/utils/utils.ts

@@ -209,7 +209,6 @@ 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) => {
@@ -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,15 +252,13 @@ export function groupByFamilyCustom(data, baseClasses, left, type, flow) {
             }
           });
         }
-        
       });
     });
-    
   }
 
-const groupedResult = {};
+  const groupedResult = {};
 
-arrOfType.forEach((item) => {
+  arrOfType.forEach((item) => {
     const { family, type, component } = item;
     if (groupedResult.hasOwnProperty(family)) {
       if (!groupedResult[family].type.includes(type)) {
@@ -272,35 +267,32 @@ arrOfType.forEach((item) => {
     } else {
       groupedResult[family] = { family, type, component };
     }
-});
+  });
 
+  const result = Object.values(groupedResult);
 
-const result = Object.values(groupedResult);
+  if (left === false) {
-
-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){
+        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 {
-
-else{
     return result;
-}
+  }
-
-
 }
 
 export function buildInputs(tabsState, id) {