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(null); const refHtml = useRef(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(null); const [handles, setHandles] = useState([]); + const [isMinimized, setIsMinimized] = useState(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 ( <> @@ -123,6 +128,7 @@ export default function GenericNode({ }} numberOfHandles={handles} showNode={showNode} + setIsMinimized={setIsMinimized} > @@ -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 = {