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,6 +180,49 @@ export default function ParameterComponent({
   }, [tooltipTitle, flow]);
 
   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" ||
+            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>
+          )}
+      </ div>
+    ) : (
       <div
         ref={ref}
         className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
@@ -355,5 +399,6 @@ export default function ParameterComponent({
           )}
         </>
       </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,23 +89,14 @@ export default function GenericNode({
           </div>
         )}
         <div>
-          <div className="grid justify-items-end bg-muted pt-2 pr-2 border-b rounded-t-lg">
+          <div className={"generic-node-div-title " + (!showNode ? "relative rounded-t-lg rounded-b-lg" : "justify-between rounded-t-lg")}>
-            <button
+            <div className={"generic-node-title-arrangement " + (!showNode && "justify-center")}>
-              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">
               <IconComponent
                 name={name}
-                className="generic-node-icon"
+                className={"generic-node-icon " + (!showNode && "absolute left-10")}
                 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">
@@ -111,7 +104,93 @@ export default function GenericNode({
                     </div>
                   </ShadTooltip>
                 </div>
+              )}
             </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>))}
+                    <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
@@ -169,10 +248,12 @@ export default function GenericNode({
                   </Tooltip>
                 </div>
               </div>
+            )}
           </div>
         </div>
 
-        <div className={"generic-node-desc " + (data.node?.description !== "" && showNode ? "py-5" : "pb-5")}>
+        {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>
             )}
@@ -183,8 +264,7 @@ export default function GenericNode({
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&
-                  !data.node!.template[templateField].advanced &&
+                    !data.node!.template[templateField].advanced ? (
-                  showNode ? (
                       <ParameterComponent
                         key={
                           (data.node!.template[templateField].input_types?.join(
@@ -233,6 +313,7 @@ export default function GenericNode({
                         optionalHandle={
                           data.node?.template[templateField].input_types
                         }
+                        showNode={showNode}
                       />
                     ) : (
                       <></>
@@ -261,9 +342,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

@@ -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 = {