refactored number of handles

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -57,7 +57,6 @@ export default function ParameterComponent({
   proxy,
   showNode,
   index = "",
-  isMinimized,
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@@ -289,7 +288,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                isMinimized ? "mt-0" : ""
+                !showNode ? "mt-0" : ""
               )}
               style={{
                 borderColor: color,

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
+import { NodeToolbar } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -40,15 +40,12 @@ export default function GenericNode({
   );
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
-  const [handles, setHandles] = useState<boolean[] | []>([]);
-  const [isMinimized, setIsMinimized] = useState<boolean>(false);
-  let numberOfInputs: boolean[] = [];
-  const updateNodeInternals = useUpdateNodeInternals();
+  const [handles, setHandles] = useState<number>(0);
 
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
 
   function countHandles(): void {
-    numberOfInputs = Object.keys(data.node!.template)
+    let count = Object.keys(data.node!.template)
       .filter((templateField) => templateField.charAt(0) !== "_")
       .map((templateCamp) => {
         const { template } = data.node!;
@@ -56,24 +53,20 @@ export default function GenericNode({
         if (!template[templateCamp].show) return false;
         switch (template[templateCamp].type) {
           case "str":
-            return false;
           case "bool":
-            return false;
           case "float":
-            return false;
           case "code":
-            return false;
           case "prompt":
-            return false;
           case "file":
-            return false;
           case "int":
             return false;
           default:
             return true;
         }
-      });
-    setHandles(numberOfInputs);
+      })
+      .reduce((total, value) => total + (value ? 1 : 0), 0);
+
+    setHandles(count);
   }
 
   useEffect(() => {
@@ -114,10 +107,6 @@ export default function GenericNode({
 
   const nameEditable = data.node?.flow || data.type === "CustomComponent";
 
-  useEffect(() => {
-    updateNodeInternals(data.id);
-  }, [isMinimized]);
-
   return (
     <>
       <NodeToolbar>
@@ -136,7 +125,6 @@ export default function GenericNode({
           }}
           numberOfHandles={handles}
           showNode={showNode}
-          setIsMinimized={setIsMinimized}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
@@ -290,7 +278,6 @@ export default function GenericNode({
                             }
                             proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
-                            isMinimized={isMinimized}
                           />
                         )
                     )}
@@ -317,7 +304,6 @@ export default function GenericNode({
                     type={data.node?.base_classes.join("|")}
                     left={false}
                     showNode={showNode}
-                    isMinimized={isMinimized}
                   />
                 </>
               )}
@@ -522,7 +508,6 @@ export default function GenericNode({
                         }
                         proxy={data.node?.template[templateField].proxy}
                         showNode={showNode}
-                        isMinimized={isMinimized}
                       />
                     ) : (
                       <></>
@@ -566,7 +551,6 @@ export default function GenericNode({
                   type={data.node?.base_classes.join("|")}
                   left={false}
                   showNode={showNode}
-                  isMinimized={isMinimized}
                 />
               )}
             </>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -32,7 +32,6 @@ export default function NodeToolbarComponent({
   setShowNode,
   numberOfHandles,
   showNode,
-  setIsMinimized,
 }: nodeToolbarPropsType): JSX.Element {
   const nodeLength = Object.keys(data.node!.template).filter(
     (templateField) =>
@@ -54,22 +53,13 @@ export default function NodeToolbarComponent({
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
   const validApiKey = useStoreStore((state) => state.validApiKey);
 
-  function canMinimize() {
-    let countHandles: number = 0;
-    numberOfHandles.forEach((bool) => {
-      if (bool) countHandles += 1;
-    });
-    if (countHandles > 1) return false;
-    return true;
-  }
-  const isMinimal = canMinimize();
+  const isMinimal = numberOfHandles <= 1;
   const isGroup = data.node?.flow ? true : false;
 
   const paste = useFlowStore((state) => state.paste);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNodes = useFlowStore((state) => state.setNodes);
-  const setNode = useFlowStore((state) => state.setNode);
   const setEdges = useFlowStore((state) => state.setEdges);
 
   const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
@@ -78,7 +68,6 @@ export default function NodeToolbarComponent({
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [showconfirmShare, setShowconfirmShare] = useState(false);
-  const [selectedValue, setSelectedValue] = useState("");
   const [showOverrideModal, setShowOverrideModal] = useState(false);
 
   const [flowComponent, setFlowComponent] = useState<FlowType>();
@@ -99,10 +88,6 @@ export default function NodeToolbarComponent({
     showconfirmShare,
   ]);
 
-  useEffect(() => {
-    setIsMinimized(!showNode);
-  }, [showNode]);
-
   const handleSelectChange = (event) => {
     switch (event) {
       case "advanced":
@@ -196,7 +181,7 @@ export default function NodeToolbarComponent({
             </ShadTooltip>
           )}
 
-          <Select onValueChange={handleSelectChange} value={selectedValue}>
+          <Select onValueChange={handleSelectChange}>
             <ShadTooltip content="More" side="top">
               <SelectTrigger>
                 <div>

src/frontend/src/types/components/index.ts

@@ -53,7 +53,6 @@ export type ParameterComponentType = {
   showNode?: boolean;
   index?: string;
   onCloseModal?: (close: boolean) => void;
-  isMinimized?: boolean;
 };
 export type InputListComponentType = {
   value: string[];
@@ -478,9 +477,8 @@ export type nodeToolbarPropsType = {
   deleteNode: (idx: string) => void;
   position: XYPosition;
   setShowNode: (boolean: any) => void;
-  numberOfHandles: boolean[] | [];
+  numberOfHandles: number;
   showNode: boolean;
-  setIsMinimized: (boolean: boolean) => void;
 };
 
 export type parsedDataType = {