Refactor: Change how minimize displays on screen

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

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep, divide } from "lodash";
 import React, {
   ReactNode,
   useContext,
@@ -45,6 +45,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);
@@ -179,181 +180,225 @@ export default function ParameterComponent({
   }, [tooltipTitle, flow]);
 
   return (
-    <div
-      ref={ref}
-      className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
-    >
-      <>
-        <div
-          className={
-            "w-full truncate text-sm" +
-            (left ? "" : " text-end") +
-            (info !== "" ? " flex items-center" : "")
-          }
-        >
-          {title}
-          <span className="text-status-red">{required ? " *" : ""}</span>
-          <div className="">
-            {info !== "" && (
-              <ShadTooltip content={infoHtml.current}>
-                {/* put div to avoid bug that does not display tooltip */}
-                <div>
-                  <IconComponent
-                    name="Info"
-                    className="relative bottom-0.5 ml-2 h-3 w-4"
-                  />
-                </div>
-              </ShadTooltip>
-            )}
-          </div>
-        </div>
-        {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 ? "-ml-0.5 " : "-mr-0.5 ",
-                "h-3 w-3 rounded-full border-2 bg-background"
-              )}
-              style={{
-                borderColor: color,
-                top: position,
-              }}
-            ></Handle>
-          </ShadTooltip>
-        )}
-
-        {left === true &&
-        type === "str" &&
-        !data.node?.template[name].options ? (
-          <div className="mt-2 w-full">
-            {data.node?.template[name].list ? (
-              <InputListComponent
-                disabled={disabled}
-                value={
-                  !data.node.template[name].value ||
-                  data.node.template[name].value === ""
-                    ? [""]
-                    : data.node.template[name].value
+    !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" ||
+            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!)
                 }
-                onChange={handleOnNewValue}
-              />
-            ) : data.node?.template[name].multiline ? (
-              <TextAreaComponent
+                className={classNames(
+                  left ? "-ml-0.5 " : "-mr-0.5 ",
+                  "h-3 w-3 rounded-full border-2 bg-background"
+                )}
+                style={{
+                  borderColor: color,
+                  top: position,
+                }}
+              ></Handle>
+            </ShadTooltip>
+          )}
+      </ div>
+    ) : (
+      <div
+        ref={ref}
+        className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
+      >
+        <>
+          <div
+            className={
+              "w-full truncate text-sm" +
+              (left ? "" : " text-end") +
+              (info !== "" ? " flex items-center" : "")
+            }
+          >
+            {title}
+            <span className="text-status-red">{required ? " *" : ""}</span>
+            <div className="">
+              {info !== "" && (
+                <ShadTooltip content={infoHtml.current}>
+                  {/* put div to avoid bug that does not display tooltip */}
+                  <div>
+                    <IconComponent
+                      name="Info"
+                      className="relative bottom-0.5 ml-2 h-3 w-4"
+                    />
+                  </div>
+                </ShadTooltip>
+              )}
+            </div>
+          </div>
+          {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 ? "-ml-0.5 " : "-mr-0.5 ",
+                  "h-3 w-3 rounded-full border-2 bg-background"
+                )}
+                style={{
+                  borderColor: color,
+                  top: position,
+                }}
+              ></Handle>
+            </ShadTooltip>
+          )}
+
+          {left === true &&
+          type === "str" &&
+          !data.node?.template[name].options ? (
+            <div className="mt-2 w-full">
+              {data.node?.template[name].list ? (
+                <InputListComponent
+                  disabled={disabled}
+                  value={
+                    !data.node.template[name].value ||
+                    data.node.template[name].value === ""
+                      ? [""]
+                      : data.node.template[name].value
+                  }
+                  onChange={handleOnNewValue}
+                />
+              ) : data.node?.template[name].multiline ? (
+                <TextAreaComponent
+                  disabled={disabled}
+                  value={data.node.template[name].value ?? ""}
+                  onChange={handleOnNewValue}
+                />
+              ) : (
+                <InputComponent
+                  disabled={disabled}
+                  password={data.node?.template[name].password ?? false}
+                  value={data.node?.template[name].value ?? ""}
+                  onChange={handleOnNewValue}
+                />
+              )}
+            </div>
+          ) : left === true && type === "bool" ? (
+            <div className="mt-2 w-full">
+              <ToggleShadComponent
                 disabled={disabled}
-                value={data.node.template[name].value ?? ""}
-                onChange={handleOnNewValue}
+                enabled={data.node?.template[name].value ?? false}
+                setEnabled={(isEnabled) => {
+                  handleOnNewValue(isEnabled);
+                }}
+                size="large"
               />
-            ) : (
-              <InputComponent
+            </div>
+          ) : left === true && type === "float" ? (
+            <div className="mt-2 w-full">
+              <FloatComponent
                 disabled={disabled}
-                password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
                 onChange={handleOnNewValue}
               />
-            )}
-          </div>
-        ) : left === true && type === "bool" ? (
-          <div className="mt-2 w-full">
-            <ToggleShadComponent
-              disabled={disabled}
-              enabled={data.node?.template[name].value ?? false}
-              setEnabled={(isEnabled) => {
-                handleOnNewValue(isEnabled);
-              }}
-              size="large"
-            />
-          </div>
-        ) : left === true && type === "float" ? (
-          <div className="mt-2 w-full">
-            <FloatComponent
-              disabled={disabled}
-              value={data.node?.template[name].value ?? ""}
-              onChange={handleOnNewValue}
-            />
-          </div>
-        ) : left === true &&
-          type === "str" &&
-          data.node?.template[name].options ? (
-          <div className="mt-2 w-full">
-            <Dropdown
-              options={data.node.template[name].options}
-              onSelect={handleOnNewValue}
-              value={data.node.template[name].value ?? "Choose an option"}
-            ></Dropdown>
-          </div>
-        ) : left === true && type === "code" ? (
-          <div className="mt-2 w-full">
-            <CodeAreaComponent
-              dynamic={data.node?.template[name].dynamic ?? false}
-              setNodeClass={(nodeClass) => {
-                data.node = nodeClass;
-              }}
-              nodeClass={data.node}
-              disabled={disabled}
-              value={data.node?.template[name].value ?? ""}
-              onChange={handleOnNewValue}
-            />
-          </div>
-        ) : left === true && type === "file" ? (
-          <div className="mt-2 w-full">
-            <InputFileComponent
-              disabled={disabled}
-              value={data.node?.template[name].value ?? ""}
-              onChange={handleOnNewValue}
-              fileTypes={data.node?.template[name].fileTypes}
-              suffixes={data.node?.template[name].suffixes}
-              onFileChange={(filePath: string) => {
-                data.node!.template[name].file_path = filePath;
-                save();
-              }}
-            ></InputFileComponent>
-          </div>
-        ) : left === true && type === "int" ? (
-          <div className="mt-2 w-full">
-            <IntComponent
-              disabled={disabled}
-              value={data.node?.template[name].value ?? ""}
-              onChange={handleOnNewValue}
-            />
-          </div>
-        ) : left === true && type === "prompt" ? (
-          <div className="mt-2 w-full">
-            <PromptAreaComponent
-              field_name={name}
-              setNodeClass={(nodeClass) => {
-                data.node = nodeClass;
-              }}
-              nodeClass={data.node}
-              disabled={disabled}
-              value={data.node?.template[name].value ?? ""}
-              onChange={handleOnNewValue}
-            />
-          </div>
-        ) : (
-          <></>
-        )}
-      </>
-    </div>
+            </div>
+          ) : left === true &&
+            type === "str" &&
+            data.node?.template[name].options ? (
+            <div className="mt-2 w-full">
+              <Dropdown
+                options={data.node.template[name].options}
+                onSelect={handleOnNewValue}
+                value={data.node.template[name].value ?? "Choose an option"}
+              ></Dropdown>
+            </div>
+          ) : left === true && type === "code" ? (
+            <div className="mt-2 w-full">
+              <CodeAreaComponent
+                dynamic={data.node?.template[name].dynamic ?? false}
+                setNodeClass={(nodeClass) => {
+                  data.node = nodeClass;
+                }}
+                nodeClass={data.node}
+                disabled={disabled}
+                value={data.node?.template[name].value ?? ""}
+                onChange={handleOnNewValue}
+              />
+            </div>
+          ) : left === true && type === "file" ? (
+            <div className="mt-2 w-full">
+              <InputFileComponent
+                disabled={disabled}
+                value={data.node?.template[name].value ?? ""}
+                onChange={handleOnNewValue}
+                fileTypes={data.node?.template[name].fileTypes}
+                suffixes={data.node?.template[name].suffixes}
+                onFileChange={(filePath: string) => {
+                  data.node!.template[name].file_path = filePath;
+                  save();
+                }}
+              ></InputFileComponent>
+            </div>
+          ) : left === true && type === "int" ? (
+            <div className="mt-2 w-full">
+              <IntComponent
+                disabled={disabled}
+                value={data.node?.template[name].value ?? ""}
+                onChange={handleOnNewValue}
+              />
+            </div>
+          ) : left === true && type === "prompt" ? (
+            <div className="mt-2 w-full">
+              <PromptAreaComponent
+                field_name={name}
+                setNodeClass={(nodeClass) => {
+                  data.node = nodeClass;
+                }}
+                nodeClass={data.node}
+                disabled={disabled}
+                value={data.node?.template[name].value ?? ""}
+                onChange={handleOnNewValue}
+              />
+            </div>
+          ) : (
+            <></>
+          )}
+        </>
+      </div>
+    )
   );
 }

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

@@ -72,13 +72,15 @@ export default function GenericNode({
           data={data}
           setData={setData}
           deleteNode={deleteNode}
+          setShowNode={setShowNode}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
       <div
         className={classNames(
           selected ? "border border-ring" : "border",
-          "generic-node-div"
+          showNode ? "w-96" : "w-32",
+          "generic-node-div",
         )}
       >
         {data.node?.beta && (
@@ -87,183 +89,264 @@ export default function GenericNode({
           </div>
         )}
         <div>
-          <div className="grid justify-items-end bg-muted pt-2 pr-2 border-b rounded-t-lg">
-            <button
-              onClick={() => setShowNode(prev => !prev)}
-            >
-              <IconComponent
-                name="Minus"
-                className="hover:text-accent-foreground text-muted-foreground"
-              />
-            </button>
-          </div>
-          <div className="generic-node-div-title">
-            <div className="generic-node-title-arrangement">
+          <div className={"generic-node-div-title " + (!showNode ? "relative rounded-t-lg rounded-b-lg" : "justify-between rounded-t-lg")}>
+            <div className={"generic-node-title-arrangement " + (!showNode && "justify-center")}>
               <IconComponent
                 name={name}
-                className="generic-node-icon"
+                className={"generic-node-icon " + (!showNode && "absolute left-10")}
                 iconColor={`${nodeColors[types[data.type]]}`}
               />
-              <div className="generic-node-tooltip-div">
-                <ShadTooltip content={data.node?.display_name}>
-                  <div className="generic-node-tooltip-div text-primary">
-                    {data.node?.display_name}
-                  </div>
-                </ShadTooltip>
-              </div>
+              {showNode && (
+                <div className="generic-node-tooltip-div">
+                  <ShadTooltip content={data.node?.display_name}>
+                    <div className="generic-node-tooltip-div text-primary">
+                      {data.node?.display_name}
+                    </div>
+                  </ShadTooltip>
+                </div>
+              )}
             </div>
-            <div className="round-button-div">
-              <div>
-                <Tooltip
-                  title={
-                    isBuilding ? (
-                      <span>Building...</span>
-                    ) : !validationStatus ? (
-                      <span className="flex">
-                        Build{" "}
-                        <IconComponent
-                          name="Zap"
-                          className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
-                        />{" "}
-                        flow to validate status.
-                      </span>
-                    ) : (
-                      <div className="max-h-96 overflow-auto">
-                        {typeof validationStatus.params === "string"
-                          ? validationStatus.params
-                              .split("\n")
-                              .map((line: string, index: number) => (
-                                <div key={index}>{line}</div>
-                              ))
-                          : ""}
-                      </div>
-                    )
-                  }
-                >
-                  <div className="generic-node-status-position">
-                    <div
-                      className={classNames(
-                        validationStatus && validationStatus.valid
-                          ? "green-status"
-                          : "status-build-animation",
-                        "status-div"
+            <div>
+              {!showNode && (
+                <>
+                  {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].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}
+                        />
                       )}
-                    ></div>
-                    <div
-                      className={classNames(
-                        validationStatus && !validationStatus.valid
-                          ? "red-status"
-                          : "status-build-animation",
-                        "status-div"
-                      )}
-                    ></div>
-                    <div
-                      className={classNames(
-                        !validationStatus || isBuilding
-                          ? "yellow-status"
-                          : "status-build-animation",
-                        "status-div"
-                      )}
-                    ></div>
-                  </div>
-                </Tooltip>
-              </div>
+                    </div>))}
+                    <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
+                    title={
+                      isBuilding ? (
+                        <span>Building...</span>
+                      ) : !validationStatus ? (
+                        <span className="flex">
+                          Build{" "}
+                          <IconComponent
+                            name="Zap"
+                            className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                          />{" "}
+                          flow to validate status.
+                        </span>
+                      ) : (
+                        <div className="max-h-96 overflow-auto">
+                          {typeof validationStatus.params === "string"
+                            ? validationStatus.params
+                                .split("\n")
+                                .map((line: string, index: number) => (
+                                  <div key={index}>{line}</div>
+                                ))
+                            : ""}
+                        </div>
+                      )
+                    }
+                  >
+                    <div className="generic-node-status-position">
+                      <div
+                        className={classNames(
+                          validationStatus && validationStatus.valid
+                            ? "green-status"
+                            : "status-build-animation",
+                          "status-div"
+                        )}
+                      ></div>
+                      <div
+                        className={classNames(
+                          validationStatus && !validationStatus.valid
+                            ? "red-status"
+                            : "status-build-animation",
+                          "status-div"
+                        )}
+                      ></div>
+                      <div
+                        className={classNames(
+                          !validationStatus || isBuilding
+                            ? "yellow-status"
+                            : "status-build-animation",
+                          "status-div"
+                        )}
+                      ></div>
+                    </div>
+                  </Tooltip>
+                </div>
+              </div>
+            )}
           </div>
         </div>
 
-        <div className={"generic-node-desc " + (data.node?.description !== "" && showNode ? "py-5" : "pb-5")}>
-          {data.node?.description !== "" && showNode && (
-            <div className="generic-node-desc-text">{data.node?.description}</div>
-          )}
+        {showNode && (
+          <div className={(showNode ? "generic-node-desc " + (data.node?.description !== "" && showNode ? "py-5" : "pb-5") : "")}>
+            {data.node?.description !== "" && showNode && (
+              <div className="generic-node-desc-text">{data.node?.description}</div>
+            )}
 
-          <>
-            {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].advanced &&
-                  showNode ? (
-                    <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
-                      }
-                    />
-                  ) : (
-                    <></>
-                  )}
-                </div>
-              ))}
-            <div
-              className={classNames(
-                Object.keys(data.node!.template).length < 1 ? "hidden" : "",
-                "flex-max-width justify-center"
-              )}
-            >
-              {" "}
-            </div>
-            <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}
-            />
-          </>
-        </div>
+            <>
+              {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].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}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </div>
+                ))}
+              <div
+                className={classNames(
+                  Object.keys(data.node!.template).length < 1 ? "hidden" : "",
+                  "flex-max-width justify-center"
+                )}
+              >
+                {" "}
+              </div>
+              <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>
+        )}
       </div>
     </>
   );

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

@@ -11,6 +11,7 @@ export default function NodeToolbarComponent({
   data,
   setData,
   deleteNode,
+  setShowNode,
 }: nodeToolbarPropsType): JSX.Element {
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node!.template).filter(
@@ -106,7 +107,7 @@ 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" +
                       (nodeLength == 0
                         ? " text-muted-foreground"
                         : " text-foreground")
@@ -117,6 +118,17 @@ export default function NodeToolbarComponent({
               </EditNodeModal>
             </div>
           </ShadTooltip>
+
+          <ShadTooltip content="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={() => {
+                setShowNode(prev => !prev);
+              }}
+            >
+              <IconComponent name="Minus" 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 rounded-lg bg-background;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center justify-between gap-8  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[];
@@ -398,6 +399,7 @@ export type nodeToolbarPropsType = {
   data: NodeDataType;
   deleteNode: (idx: string) => void;
   setData: (newState: NodeDataType) => void;
+  setShowNode: (boolean: any) => void;
 };
 
 export type parsedDataType = {