diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 3d5c696e3..cc24a7175 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -89,6 +89,13 @@ export default function GenericNode({ countHandles(); }, [data]); + useEffect(() => { + setTimeout(() => { + updateNodeInternals(data.id) + }, 400) + + }, [showNode]) + // New useEffect to watch for changes in sseData and update validation status useEffect(() => { const relevantData = sseData[data.id]; @@ -117,7 +124,7 @@ export default function GenericNode({ className={classNames( selected ? "border border-ring" : "border", " transition-all ", - showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-75", + showNode ? " w-96 duration-500 ease-in-out scale-100" : " transform-width duration-500 w-26 h-26 rounded-full scale-95", "generic-node-div", )} > diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 74abbc3e1..24fb79a02 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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"; @@ -30,6 +30,7 @@ export default function NodeToolbarComponent({ data.node.template[templateField].type === "int") ).length ); + const updateNodeInternals = useUpdateNodeInternals(); function canMinimize() { let countHandles: number = 0; @@ -136,6 +137,7 @@ export default function NodeToolbarComponent({ 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) }} >