introduce needFitView

flyteorg · Jul 20, 2022 · 5de663a · 5de663a
1 parent a908d9e
commit 5de663a
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx
@@ -41,6 +41,7 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
     edges: rfGraphJson.edges,
     version: version,
     reactFlowInstance: null,
+    needFitView: false
   });
 
   useEffect(() => {
@@ -53,7 +54,7 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
   }, [rfGraphJson]);
 
   const onLoad = (rf: any) => {
-    setState({ ...state, reactFlowInstance: rf });
+    setState({ ...state, needFitView: true, reactFlowInstance: rf });
   };
 
   const onNodesChange = useCallback(
@@ -81,11 +82,11 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
           edges: hashEdges,
         }));
       }
-      if (state.reactFlowInstance) {
+      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 = {
@@ -94,12 +95,17 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
     flexDirection: 'column',
   };
 
+  const onNodeClick = () => {
+    setState((state) => ({ ...state, needFitView: false }))
+  }
+
   return (
     <ReactFlow
       nodes={state.nodes}
       edges={state.edges}
       nodeTypes={CustomNodeTypes}
       onNodesChange={onNodesChange}
+      onNodeClick={onNodeClick}
       style={reactFlowStyle}
       onInit={onLoad}
       fitView