Feat: Introducing Node Minimization Feature (#906)

This pull request introduces a new feature that enhances the usability
and organization of our application's flow. We've added a convenient
"Minimize Node" button, empowering users to declutter their workspace
with a single click. This feature allows users to focus on the most
relevant nodes, resulting in a more efficient and visually pleasing
workflow.

src/frontend/src/App.css

@@ -6,6 +6,13 @@
   text-align: center;
 }
 
+.react-flow__node {
+	width: auto;
+	height: auto;
+	border-radius: auto;
+	min-width: inherit;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

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

@@ -52,6 +52,7 @@ export default function ParameterComponent({
   required = false,
   optionalHandle = null,
   info = "",
+  showNode,
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@@ -192,7 +193,43 @@ export default function ParameterComponent({
     renderTooltips();
   }, [tooltipTitle, flow]);
 
-  return (
+  return !showNode ? (
+    left &&
+    (type === "str" ||
+      type === "bool" ||
+      type === "float" ||
+      type === "code" ||
+      type === "prompt" ||
+      type === "file" ||
+      type === "int") &&
+    !optionalHandle ? (
+      <></>
+    ) : (
+      <ShadTooltip
+        styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
+        delayDuration={0}
+        content={refHtml.current}
+        side={left ? "left" : "right"}
+      >
+        <Handle
+          type={left ? "target" : "source"}
+          position={left ? Position.Left : Position.Right}
+          id={id}
+          isValidConnection={(connection) =>
+            isValidConnection(connection, reactFlowInstance!)
+          }
+          className={classNames(
+            left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
+            "h-3 w-3 rounded-full border-2 bg-background"
+          )}
+          style={{
+            borderColor: color,
+            top: position,
+          }}
+        ></Handle>
+      </ShadTooltip>
+    )
+  ) : (
     <div
       ref={ref}
       className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"

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

@@ -29,6 +29,43 @@ export default function GenericNode({
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   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) => {
+        const { template } = data.node!;
+        if (template[templateCamp].input_types) return true;
+        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);
+  }
+
+  useEffect(() => {
+    countHandles();
+  }, []);
+
   // State for outline color
   const { sseData, isBuilding } = useSSE();
   useEffect(() => {
@@ -50,8 +87,15 @@ export default function GenericNode({
       });
       updateFlow(flow);
     }
+    countHandles();
   }, [data]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      updateNodeInternals(data.id);
+    }, 300);
+  }, [showNode]);
+
   // New useEffect to watch for changes in sseData and update validation status
   useEffect(() => {
     const relevantData = sseData[data.id];
@@ -70,27 +114,51 @@ export default function GenericNode({
           data={data}
           setData={setData}
           deleteNode={deleteNode}
+          setShowNode={setShowNode}
+          numberOfHandles={handles}
+          showNode={showNode}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
       <div
         className={classNames(
           selected ? "border border-ring" : "border",
+          " transition-transform ",
+          showNode
+            ? " w-96 scale-100 transform rounded-lg duration-500 ease-in-out "
+            : " transform-width w-26 h-26 scale-90 transform rounded-full duration-500 ",
           "generic-node-div"
         )}
       >
-        {data.node?.beta && (
+        {data.node?.beta && showNode && (
           <div className="beta-badge-wrapper">
             <div className="beta-badge-content">BETA</div>
           </div>
         )}
-        <div className="generic-node-div-title">
+        <div>
-          <div className="generic-node-title-arrangement">
+          <div
+            className={
+              "generic-node-div-title " +
+              (!showNode
+                ? " relative h-24 w-24 rounded-full "
+                : " justify-between rounded-t-lg ")
+            }
+          >
+            <div
+              className={
+                "generic-node-title-arrangement rounded-full" +
+                (!showNode && "justify-center")
+              }
+            >
               <IconComponent
                 name={name}
-              className="generic-node-icon"
+                className={
+                  "generic-node-icon " +
+                  (!showNode && "absolute inset-x-6 h-12 w-12")
+                }
                 iconColor={`${nodeColors[types[data.type]]}`}
               />
+              {showNode && (
                 <div className="generic-node-tooltip-div">
                   <ShadTooltip content={data.node?.display_name}>
                     <div className="generic-node-tooltip-div text-primary">
@@ -98,7 +166,104 @@ export default function GenericNode({
                     </div>
                   </ShadTooltip>
                 </div>
+              )}
             </div>
+            <div>
+              {!showNode && (
+                <>
+                  {Object.keys(data.node!.template)
+                    .filter((templateField) => templateField.charAt(0) !== "_")
+                    .map(
+                      (templateField: string, idx) =>
+                        data.node!.template[templateField].show &&
+                        !data.node!.template[templateField].advanced && (
+                          <ParameterComponent
+                            key={
+                              (data.node!.template[
+                                templateField
+                              ].input_types?.join(";") ??
+                                data.node!.template[templateField].type) +
+                              "|" +
+                              templateField +
+                              "|" +
+                              data.id
+                            }
+                            data={data}
+                            setData={setData}
+                            color={
+                              nodeColors[
+                                types[data.node?.template[templateField].type!]
+                              ] ??
+                              nodeColors[
+                                data.node?.template[templateField].type!
+                              ] ??
+                              nodeColors.unknown
+                            }
+                            title={
+                              data.node?.template[templateField].display_name
+                                ? data.node.template[templateField].display_name
+                                : data.node?.template[templateField].name
+                                ? toTitleCase(
+                                    data.node.template[templateField].name
+                                  )
+                                : toTitleCase(templateField)
+                            }
+                            info={data.node?.template[templateField].info}
+                            name={templateField}
+                            tooltipTitle={
+                              data.node?.template[
+                                templateField
+                              ].input_types?.join("\n") ??
+                              data.node?.template[templateField].type
+                            }
+                            required={
+                              data.node?.template[templateField].required
+                            }
+                            id={
+                              (data.node?.template[
+                                templateField
+                              ].input_types?.join(";") ??
+                                data.node?.template[templateField].type) +
+                              "|" +
+                              templateField +
+                              "|" +
+                              data.id
+                            }
+                            left={true}
+                            type={data.node?.template[templateField].type}
+                            optionalHandle={
+                              data.node?.template[templateField].input_types
+                            }
+                            showNode={showNode}
+                          />
+                        )
+                    )}
+                  <ParameterComponent
+                    key={[data.type, data.id, ...data.node!.base_classes].join(
+                      "|"
+                    )}
+                    data={data}
+                    setData={setData}
+                    color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+                    title={
+                      data.node?.output_types &&
+                      data.node.output_types.length > 0
+                        ? data.node.output_types.join("|")
+                        : data.type
+                    }
+                    tooltipTitle={data.node?.base_classes.join("\n")}
+                    id={[data.type, data.id, ...data.node!.base_classes].join(
+                      "|"
+                    )}
+                    type={data.node?.base_classes.join("|")}
+                    left={false}
+                    showNode={showNode}
+                  />
+                </>
+              )}
+            </div>
+
+            {showNode && (
               <div className="round-button-div">
                 <div>
                   <Tooltip
@@ -156,15 +321,20 @@ export default function GenericNode({
                   </Tooltip>
                 </div>
               </div>
+            )}
+          </div>
         </div>
 
+        {showNode && (
           <div
             className={
-            "generic-node-desc " +
+              showNode
-            (data.node?.description !== "" ? "py-5" : "pb-5")
+                ? "generic-node-desc " +
+                  (data.node?.description !== "" && showNode ? "py-5" : "pb-5")
+                : ""
             }
           >
-          {data.node?.description !== "" && (
+            {data.node?.description !== "" && showNode && (
               <div className="generic-node-desc-text">
                 {data.node?.description}
               </div>
@@ -193,14 +363,18 @@ export default function GenericNode({
                           nodeColors[
                             types[data.node?.template[templateField].type!]
                           ] ??
-                        nodeColors[data.node?.template[templateField].type!] ??
+                          nodeColors[
+                            data.node?.template[templateField].type!
+                          ] ??
                           nodeColors.unknown
                         }
                         title={
                           data.node?.template[templateField].display_name
                             ? data.node.template[templateField].display_name
                             : data.node?.template[templateField].name
-                          ? toTitleCase(data.node.template[templateField].name)
+                            ? toTitleCase(
+                                data.node.template[templateField].name
+                              )
                             : toTitleCase(templateField)
                         }
                         info={data.node?.template[templateField].info}
@@ -225,6 +399,7 @@ export default function GenericNode({
                         optionalHandle={
                           data.node?.template[templateField].input_types
                         }
+                        showNode={showNode}
                       />
                     ) : (
                       <></>
@@ -253,9 +428,11 @@ export default function GenericNode({
                 id={[data.type, data.id, ...data.node!.base_classes].join("|")}
                 type={data.node?.base_classes.join("|")}
                 left={false}
+                showNode={showNode}
               />
             </>
           </div>
+        )}
       </div>
     </>
   );

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

@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { useReactFlow } from "reactflow";
+import { useReactFlow, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -11,6 +11,9 @@ export default function NodeToolbarComponent({
   data,
   setData,
   deleteNode,
+  setShowNode,
+  numberOfHandles,
+  showNode,
 }: nodeToolbarPropsType): JSX.Element {
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node!.template).filter(
@@ -27,6 +30,16 @@ export default function NodeToolbarComponent({
           data.node.template[templateField].type === "int")
     ).length
   );
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  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();
@@ -106,7 +119,8 @@ export default function NodeToolbarComponent({
               >
                 <div
                   className={classNames(
-                    "relative -ml-px 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" +
+                    "relative -ml-px inline-flex items-center 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" +
+                      (!canMinimize() && " rounded-r-md ") +
                       (nodeLength == 0
                         ? " text-muted-foreground"
                         : " text-foreground")
@@ -117,6 +131,23 @@ export default function NodeToolbarComponent({
               </EditNodeModal>
             </div>
           </ShadTooltip>
+
+          {canMinimize() && (
+            <ShadTooltip content={showNode ? "Minimize" : "Expand"} 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={(event) => {
+                  setShowNode((prev) => !prev);
+                  updateNodeInternals(data.id);
+                }}
+              >
+                <IconComponent
+                  name={showNode ? "Minimize2" : "Maximize2"}
+                  className="h-4 w-4"
+                />
+              </button>
+            </ShadTooltip>
+          )}
         </span>
       </div>
     </>

src/frontend/src/style/applies.css

@@ -264,10 +264,10 @@
     @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4;
   }
   .generic-node-div {
-    @apply relative flex w-96 flex-col justify-center rounded-lg bg-background;
+    @apply relative flex flex-col justify-center bg-background;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4;
+    @apply flex w-full items-center gap-8  border-b bg-muted p-4;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;

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

@@ -46,6 +46,7 @@ export type ParameterComponentType = {
   dataContext?: typesContextType;
   optionalHandle?: Array<String> | null;
   info?: string;
+  showNode?: boolean;
 };
 export type InputListComponentType = {
   value: string[];
@@ -198,6 +199,7 @@ export type IconComponentProps = {
   name: string;
   className?: string;
   iconColor?: string;
+  onClick?: () => void;
 };
 
 export type InputProps = {
@@ -422,6 +424,9 @@ export type nodeToolbarPropsType = {
   data: NodeDataType;
   deleteNode: (idx: string) => void;
   setData: (newState: NodeDataType) => void;
+  setShowNode: (boolean: any) => void;
+  numberOfHandles: boolean[] | [];
+  showNode: boolean;
 };
 
 export type parsedDataType = {

src/frontend/src/utils/styleUtils.ts

@@ -45,10 +45,13 @@ import {
   Link,
   Lock,
   LucideSend,
+  Maximize2,
   Menu,
   MessageCircle,
   MessageSquare,
   MessagesSquare,
+  Minimize2,
+  Minus,
   MoonIcon,
   MoreHorizontal,
   Paperclip,
@@ -62,6 +65,7 @@ import {
   Settings2,
   Shield,
   Sparkles,
+  Square,
   SunIcon,
   TerminalSquare,
   Trash2,
@@ -310,4 +314,8 @@ export const nodeIconsLucide: iconsType = {
   Unplug,
   BookMarked,
   ChevronUp,
+  Minus,
+  Square,
+  Minimize2,
+  Maximize2,
 };