From e62b43bf69096261a313644ef7054a89e1622851 Mon Sep 17 00:00:00 2001 From: james-union <105876962+james-union@users.noreply.github.com> Date: Wed, 20 Jul 2022 13:12:32 -0400 Subject: [PATCH] fix: Graph Center on initial render (#541) * fix: upgrade react-flow-renderer version Signed-off-by: James * fix: use setTimeout for queue on the next render Signed-off-by: James * fix: use one state variable and fitView after nodesChange Signed-off-by: James * introduce needFitView --- packages/zapp/console/package.json | 2 +- .../flytegraph/ReactFlow/ReactFlowWrapper.tsx | 22 ++++++------ yarn.lock | 36 ++++++++----------- 3 files changed, 27 insertions(+), 33 deletions(-) diff --git a/packages/zapp/console/package.json b/packages/zapp/console/package.json index 07ffa8321..a1229f110 100644 --- a/packages/zapp/console/package.json +++ b/packages/zapp/console/package.json @@ -45,7 +45,7 @@ "lodash": "^4.17.21", "morgan": "^1.8.2", "react-chartjs-2": "^4.0.0", - "react-flow-renderer": "10.1.1", + "react-flow-renderer": "10.3.8", "react-ga4": "^1.4.1", "react-json-view": "^1.21.3", "react-transition-group": "^2.3.1", diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index 28e408c6e..57d1d059d 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -40,16 +40,10 @@ export const ReactFlowWrapper: React.FC = ({ nodes: rfGraphJson.nodes, edges: rfGraphJson.edges, version: version, + reactFlowInstance: null, + needFitView: false }); - const [reactFlowInstance, setReactFlowInstance] = useState(null); - - useEffect(() => { - if (reactFlowInstance && state.shouldUpdate === false) { - reactFlowInstance?.fitView(); - } - }, [state.shouldUpdate, reactFlowInstance]); - useEffect(() => { setState((state) => ({ ...state, @@ -60,7 +54,7 @@ export const ReactFlowWrapper: React.FC = ({ }, [rfGraphJson]); const onLoad = (rf: any) => { - setReactFlowInstance(rf); + setState({ ...state, needFitView: true, reactFlowInstance: rf }); }; const onNodesChange = useCallback( @@ -88,8 +82,11 @@ export const ReactFlowWrapper: React.FC = ({ edges: hashEdges, })); } + if (changes.length === state.nodes.length && state.reactFlowInstance && state.needFitView) { + (state.reactFlowInstance as any)?.fitView(); + } }, - [state.shouldUpdate], + [state.shouldUpdate, state.reactFlowInstance, state.needFitView], ); const reactFlowStyle: React.CSSProperties = { @@ -98,12 +95,17 @@ export const ReactFlowWrapper: React.FC = ({ flexDirection: 'column', }; + const onNodeClick = () => { + setState((state) => ({ ...state, needFitView: false })) + } + return (