fix: Graph Center on initial render (#541)

* fix: upgrade react-flow-renderer version Signed-off-by: James <[email protected]> * fix: use setTimeout for queue on the next render Signed-off-by: James <[email protected]> * fix: use one state variable and fitView after nodesChange Signed-off-by: James <[email protected]> * introduce needFitView
flyteorg · Jul 20, 2022 · e62b43b · e62b43b
1 parent 7d196cd
commit e62b43b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 33 deletions.
diff --git 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
@@ -40,16 +40,10 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
     nodes: rfGraphJson.nodes,
     edges: rfGraphJson.edges,
     version: version,
+    reactFlowInstance: null,
+    needFitView: false
   });
 
-  const [reactFlowInstance, setReactFlowInstance] = useState<null | any>(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<RFWrapperProps> = ({
   }, [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<RFWrapperProps> = ({
           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<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

diff --git a/yarn.lock b/yarn.lock
@@ -1247,10 +1247,10 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.17.8":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
-  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+"@babel/runtime@^7.18.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -6730,7 +6730,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
+clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -7651,7 +7651,7 @@ d3-drag@1:
     d3-dispatch "1"
     d3-selection "1"
 
-"d3-drag@2 - 3":
+"d3-drag@2 - 3", d3-drag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
   integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
@@ -16372,14 +16372,6 @@ react-draggable@^4.4.3:
     classnames "^2.2.5"
     prop-types "^15.6.0"
 
-react-draggable@^4.4.4:
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.4.tgz#5b26d9996be63d32d285a426f41055de87e59b2f"
-  integrity sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==
-  dependencies:
-    clsx "^1.1.1"
-    prop-types "^15.6.0"
-
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8"
@@ -16401,17 +16393,17 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-flow-renderer@10.1.1:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.1.1.tgz#88e994753d0162286c1cc09bfded7202456b1049"
-  integrity sha512-fWmiW2OrJK1/FbJnQodvQzdFiv8JqwA8xdbzQX64eoxKRbYGkOwmta/CaIKsnmVektDeTD8/smbiwpxFElKdaA==
+react-flow-renderer@10.3.8:
+  version "10.3.8"
+  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.3.8.tgz#23525887ef707e6cd540777a4d2329e91311856d"
+  integrity sha512-owtDCSK6rATiZipew2OYSPPu2sd0VM/QCydN9S+ivrMVwR0vNSSwtsWKqJSq8DL5wXtIEed5gPi4yJqXJA7tLQ==
   dependencies:
-    "@babel/runtime" "^7.17.8"
+    "@babel/runtime" "^7.18.0"
     classcat "^5.0.3"
+    d3-drag "^3.0.0"
     d3-selection "^3.0.0"
     d3-zoom "^3.0.0"
-    react-draggable "^4.4.4"
-    zustand "^3.7.1"
+    zustand "^3.7.2"
 
 react-ga4@^1.4.1:
   version "1.4.1"
@@ -20358,7 +20350,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zustand@^3.7.1:
+zustand@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
   integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==