From a6f25e97b848b84d8993ce0d77baef0ad703ab02 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 17 Jan 2024 20:40:39 -0300
Subject: [PATCH] fix(parameterComponent): add isMinimized prop to
 ParameterComponent to control the display of a component when minimized
 feat(GenericNode): add isMinimized state to control the display of components
 when the node is minimized fix(nodeToolbarComponent): set isMinimized state
 based on showNode prop to control the display of components when the node is
 minimized

---
 .../components/parameterComponent/index.tsx            |  4 +++-
 src/frontend/src/CustomNodes/GenericNode/index.tsx     | 10 ++++++++++
 .../FlowPage/components/nodeToolbarComponent/index.tsx |  5 +++++
 src/frontend/src/types/components/index.ts             |  2 ++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 9d60313b8..81bf945a5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -57,6 +57,7 @@ export default function ParameterComponent({
   proxy,
   showNode,
   index = "",
+  isMinimized,
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@@ -287,7 +288,8 @@ 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"
+                "h-3 w-3 rounded-full border-2 bg-background",
+                isMinimized ? "mt-0" : ""
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 30110fdfe..1b97e0955 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -41,6 +41,7 @@ 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 takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@@ -105,6 +106,10 @@ export default function GenericNode({
 
   const nameEditable = data.node?.flow || data.type === "CustomComponent";
 
+  useEffect(() => {
+    console.log("isMinimized", isMinimized);
+  }, [isMinimized, setIsMinimized]);
+
   return (
     <>
       <NodeToolbar>
@@ -123,6 +128,7 @@ export default function GenericNode({
           }}
           numberOfHandles={handles}
           showNode={showNode}
+          setIsMinimized={setIsMinimized}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
@@ -276,6 +282,7 @@ export default function GenericNode({
                             }
                             proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
+                            isMinimized={isMinimized}
                           />
                         )
                     )}
@@ -302,6 +309,7 @@ export default function GenericNode({
                     type={data.node?.base_classes.join("|")}
                     left={false}
                     showNode={showNode}
+                    isMinimized={isMinimized}
                   />
                 </>
               )}
@@ -506,6 +514,7 @@ export default function GenericNode({
                         }
                         proxy={data.node?.template[templateField].proxy}
                         showNode={showNode}
+                        isMinimized={isMinimized}
                       />
                     ) : (
                       <></>
@@ -549,6 +558,7 @@ export default function GenericNode({
                   type={data.node?.base_classes.join("|")}
                   left={false}
                   showNode={showNode}
+                  isMinimized={isMinimized}
                 />
               )}
             </>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 10c984229..99e94f233 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,6 +32,7 @@ export default function NodeToolbarComponent({
   setShowNode,
   numberOfHandles,
   showNode,
+  setIsMinimized,
 }: nodeToolbarPropsType): JSX.Element {
   const nodeLength = Object.keys(data.node!.template).filter(
     (templateField) =>
@@ -97,6 +98,10 @@ export default function NodeToolbarComponent({
     showconfirmShare,
   ]);
 
+  useEffect(() => {
+    setIsMinimized(!showNode);
+  }, [showNode]);
+
   const handleSelectChange = (event) => {
     switch (event) {
       case "advanced":
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 0548981ec..6ed102590 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -53,6 +53,7 @@ export type ParameterComponentType = {
   showNode?: boolean;
   index?: string;
   onCloseModal?: (close: boolean) => void;
+  isMinimized?: boolean;
 };
 export type InputListComponentType = {
   value: string[];
@@ -479,6 +480,7 @@ export type nodeToolbarPropsType = {
   setShowNode: (boolean: any) => void;
   numberOfHandles: boolean[] | [];
   showNode: boolean;
+  setIsMinimized: (boolean: boolean) => void;
 };
 
 export type parsedDataType = {