diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 55c732f79..3f61d1038 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,3 +1,4 @@ +import { cloneDeep } from "lodash"; import React, { ReactNode, useContext, @@ -68,7 +69,7 @@ export default function ParameterComponent({ const { setErrorData } = useContext(alertContext); const updateNodeInternals = useUpdateNodeInternals(); const [position, setPosition] = useState(0); - const { setTabsState, tabId, flows } = useContext(FlowsContext); + const { setTabsState, tabId, flows, tabsState } = useContext(FlowsContext); const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null; @@ -126,19 +127,14 @@ export default function ParameterComponent({ data.node!.template[name].value = newValue; // Set state to pending //@ts-ignore - setTabsState((prev: TabsState) => { - if (!prev[tabId]) { - return prev; - } - return { - ...prev, - [tabId]: { - ...prev[tabId], - isPending: true, - formKeysData: prev[tabId].formKeysData, - }, - }; - }); + if (data.node!.template[name].value !== newValue) { + const tabs = cloneDeep(tabsState); + tabs[tabId].isPending = false; + tabs[tabId].formKeysData = tabsState[tabId].formKeysData; + setTabsState({ + ...tabs, + }); + } renderTooltips(); }; diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 75cfc7a57..f6d82dc22 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -187,6 +187,15 @@ export default function Page({ }; }, []); + //remove this if you dont want to see the whole flow on fork + useEffect(() => { + setTimeout(() => { + flow?.data!.nodes!.length > 3 + ? reactFlowInstance?.fitView({ padding: 0.1 }) + : reactFlowInstance?.fitView({ padding: 0.5 }); + }, 200); + }, []); + const onEdgesChangeMod = useCallback( (change: EdgeChange[]) => { updateFlow({