Refactor: Minimize only works with 1 handle node and change minimized node UI

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

@@ -32,7 +32,7 @@ import {
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
 
-export default function ParameterComponent({
+export default function  ParameterComponent({
   left,
   id,
   data,
@@ -181,11 +181,6 @@ export default function ParameterComponent({
 
   return (
     !showNode ? (
-      <div
-        ref={ref}
-        className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
-      >
-        {
           left &&
           (type === "str" ||
             type === "bool" ||
@@ -211,7 +206,7 @@ export default function ParameterComponent({
                   isValidConnection(connection, reactFlowInstance!)
                 }
                 className={classNames(
-                  left ? "-ml-0.5 " : "-mr-0.5 ",
+                  left ? "-ml-0.5 my-12 " : " -mr-0.4 my-12 ",
                   "h-3 w-3 rounded-full border-2 bg-background"
                 )}
                 style={{
@@ -220,8 +215,7 @@ export default function ParameterComponent({
                 }}
               ></Handle>
             </ShadTooltip>
-          )}
+          )
-      </ div>
     ) : (
       <div
         ref={ref}

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

@@ -31,6 +31,39 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
   const [showNode, setShowNode] = useState<boolean>(true);
+  const [handles, setHandles] = useState<boolean[] | []>([]);
+  let numberOfInputs: boolean[] = [];
+
+  function countHandles(): void {
+    numberOfInputs = Object.keys(data.node!.template)
+      .filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => {
+        if (!data.node?.template[templateCamp].show) return false
+        switch (data.node?.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)
+  };
+
+  useEffect(() => {
+    countHandles();
+  }, [])
+
   // State for outline color
   const { sseData, isBuilding } = useSSE();
   useEffect(() => {
@@ -51,7 +84,9 @@ export default function GenericNode({
         },
       });
       updateFlow(flow);
+      console.log(myFlow)
     }
+    countHandles();
   }, [data]);
 
   // New useEffect to watch for changes in sseData and update validation status
@@ -73,27 +108,28 @@ export default function GenericNode({
           setData={setData}
           deleteNode={deleteNode}
           setShowNode={setShowNode}
+          numberOfHandles={handles}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
       <div
         className={classNames(
           selected ? "border border-ring" : "border",
-          showNode ? "w-96" : "w-32",
+          showNode ? "w-96" : "w-24 h-24 rounded-full",
           "generic-node-div",
         )}
       >
-        {data.node?.beta && (
+        {data.node?.beta && showNode && (
           <div className="beta-badge-wrapper">
             <div className="beta-badge-content">BETA</div>
           </div>
         )}
         <div>
-          <div className={"generic-node-div-title " + (!showNode ? "relative rounded-t-lg rounded-b-lg" : "justify-between rounded-t-lg")}>
+          <div className={"generic-node-div-title " + (!showNode ? "relative rounded-full w-24 h-24" : "justify-between rounded-t-lg")}>
-            <div className={"generic-node-title-arrangement " + (!showNode && "justify-center")}>
+            <div className={"generic-node-title-arrangement rounded-full" + (!showNode && "justify-center")}>
               <IconComponent
                 name={name}
-                className={"generic-node-icon " + (!showNode && "absolute left-10")}
+                className={"generic-node-icon " + (!showNode && "absolute left-7")}
                 iconColor={`${nodeColors[types[data.type]]}`}
               />
               {showNode && (
@@ -112,8 +148,7 @@ export default function GenericNode({
                   {Object.keys(data.node!.template)
                   .filter((templateField) => templateField.charAt(0) !== "_")
                   .map((templateField: string, idx) => (
-                    <div key={idx}>
+                      data.node!.template[templateField].show &&
-                      {data.node!.template[templateField].show &&
                       !data.node!.template[templateField].advanced && (
                         <ParameterComponent
                           key={
@@ -165,8 +200,7 @@ export default function GenericNode({
                           }
                           showNode={showNode}
                         />
-                      )}
+                      )))}
-                    </div>))}
                     <ParameterComponent
                       key={[data.type, data.id, ...data.node!.base_classes].join("|")}
                       data={data}

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

@@ -12,6 +12,7 @@ export default function NodeToolbarComponent({
   setData,
   deleteNode,
   setShowNode,
+  numberOfHandles,
 }: nodeToolbarPropsType): JSX.Element {
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node!.template).filter(
@@ -29,6 +30,15 @@ export default function NodeToolbarComponent({
     ).length
   );
 
+  function canMinimize() {
+    let countHandles: number = 0;
+    numberOfHandles.forEach((bool) => {
+      if (bool) countHandles += 1;
+    });
+    if (countHandles > 1) return false;
+    return true;
+  }
+
   const { paste } = useContext(TabsContext);
   const reactFlowInstance = useReactFlow();
   return (
@@ -119,11 +129,12 @@ export default function NodeToolbarComponent({
             </div>
           </ShadTooltip>
 
-          <ShadTooltip content="Minimize" side="top">
+          <ShadTooltip content={canMinimize() ? "Minimize" : "Only nodes with 1 or less input handles can minimize"} side="top">
             <button
               className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
-              onClick={() => {
+              onClick={(event) => {
-                setShowNode(prev => !prev);
+                if (canMinimize()) return setShowNode(prev => !prev);
+                event.preventDefault();
               }}
             >
               <IconComponent name="Minus" className="h-4 w-4" />

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

@@ -400,6 +400,7 @@ export type nodeToolbarPropsType = {
   deleteNode: (idx: string) => void;
   setData: (newState: NodeDataType) => void;
   setShowNode: (boolean: any) => void;
+  numberOfHandles: boolean[] | [];
 };
 
 export type parsedDataType = {