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,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);
+    console.log(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)
-    } 
 
+    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 (
           <span
             key={getRandomKeyByssmm() + item.family + i}
@@ -141,31 +151,34 @@ 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"
-            <span className="text-xs">
+                ? nodeNames[item.family]
-              {" "}
+                : item.component ?? ""}{" "}
-              {item.type === "" ? "" : " - "}
+              <span className="text-xs">
-              {item.type.split(", ").length > 2
+                {" "}
-                ? item.type.split(", ").map((el, i) => (
+                {item.type === "" ? "" : " - "}
-                    <React.Fragment key={el + i}>
+                {item.type.split(", ").length > 2
-                      <span>
+                  ? item.type.split(", ").map((el, i) => (
-                        {i === item.type.split(", ").length - 1
+                      <React.Fragment key={el + i}>
-                          ? el
+                        <span>
-                          : (el += `, `)}
+                          {i === item.type.split(", ").length - 1
-                      </span>
+                            ? el
-                    </React.Fragment>
+                            : (el += `, `)}
-                  ))
+                        </span>
-                : item.type}
+                      </React.Fragment>
+                    ))
+                  : item.type}
+              </span>
             </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

@@ -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) => {
+  arrOfType.forEach((item) => {
-  const { family, type, component } = item;
+    const { family, type, component } = item;
-  if (groupedResult.hasOwnProperty(family)) {
+    if (groupedResult.hasOwnProperty(family)) {
-    if (!groupedResult[family].type.includes(type)) {
+      if (!groupedResult[family].type.includes(type)) {
-      groupedResult[family].type += `, ${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"],
-          })
-        });
       }
-    });
+    } 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) {