From d538110a08902621edb37d66c1e9e9f69b48d401 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 13 Jul 2022 00:08:57 -0400 Subject: [PATCH 1/6] fix: upgrade react-flow-renderer version Signed-off-by: James --- packages/zapp/console/package.json | 2 +- yarn.lock | 36 ++++++++++++------------------ 2 files changed, 15 insertions(+), 23 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/yarn.lock b/yarn.lock index b233be40b..60d8f484f 100644 --- 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== From 53af61b28333e7a7dccf4f88f1bf9308970a75c6 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 13 Jul 2022 04:38:58 -0400 Subject: [PATCH 2/6] fix: use setTimeout for queue on the next render Signed-off-by: James --- .../src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index 28e408c6e..e825a19c0 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -45,8 +45,8 @@ export const ReactFlowWrapper: React.FC = ({ const [reactFlowInstance, setReactFlowInstance] = useState(null); useEffect(() => { - if (reactFlowInstance && state.shouldUpdate === false) { - reactFlowInstance?.fitView(); + if (reactFlowInstance) { + setTimeout(() => reactFlowInstance?.fitView(), 0); } }, [state.shouldUpdate, reactFlowInstance]); From a908d9ecd16c5cf7b93d5239fa508b96d59b4f50 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 13 Jul 2022 04:54:01 -0400 Subject: [PATCH 3/6] fix: use one state variable and fitView after nodesChange Signed-off-by: James --- .../flytegraph/ReactFlow/ReactFlowWrapper.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index e825a19c0..8e33b74a8 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -40,16 +40,9 @@ export const ReactFlowWrapper: React.FC = ({ nodes: rfGraphJson.nodes, edges: rfGraphJson.edges, version: version, + reactFlowInstance: null, }); - const [reactFlowInstance, setReactFlowInstance] = useState(null); - - useEffect(() => { - if (reactFlowInstance) { - setTimeout(() => reactFlowInstance?.fitView(), 0); - } - }, [state.shouldUpdate, reactFlowInstance]); - useEffect(() => { setState((state) => ({ ...state, @@ -60,7 +53,7 @@ export const ReactFlowWrapper: React.FC = ({ }, [rfGraphJson]); const onLoad = (rf: any) => { - setReactFlowInstance(rf); + setState({ ...state, reactFlowInstance: rf }); }; const onNodesChange = useCallback( @@ -88,6 +81,9 @@ export const ReactFlowWrapper: React.FC = ({ edges: hashEdges, })); } + if (state.reactFlowInstance) { + (state.reactFlowInstance as any)?.fitView(); + } }, [state.shouldUpdate], ); From 8abcd1eb6e8ef1f24ff43e03fa95f3d7193c9bc1 Mon Sep 17 00:00:00 2001 From: James Date: Fri, 15 Jul 2022 11:14:08 -0400 Subject: [PATCH 4/6] fix: graph edge overlaps nodes issue Signed-off-by: James --- .../src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index 28e408c6e..bad3d73d6 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -107,6 +107,7 @@ export const ReactFlowWrapper: React.FC = ({ style={reactFlowStyle} onInit={onLoad} fitView + defaultEdgeOptions={{ zIndex: 0 }} > Date: Wed, 20 Jul 2022 08:23:22 -0400 Subject: [PATCH 5/6] introduce needFitView --- .../flytegraph/ReactFlow/ReactFlowWrapper.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index 8e33b74a8..57d1d059d 100644 --- 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 = ({ edges: rfGraphJson.edges, version: version, reactFlowInstance: null, + needFitView: false }); useEffect(() => { @@ -53,7 +54,7 @@ export const ReactFlowWrapper: React.FC = ({ }, [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 = ({ 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 = ({ flexDirection: 'column', }; + const onNodeClick = () => { + setState((state) => ({ ...state, needFitView: false })) + } + return ( Date: Wed, 20 Jul 2022 12:00:03 -0400 Subject: [PATCH 6/6] edge overlap --- .../src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx | 2 +- .../zapp/console/src/components/flytegraph/ReactFlow/utils.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index bad3d73d6..618f59a8f 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -55,7 +55,7 @@ export const ReactFlowWrapper: React.FC = ({ ...state, shouldUpdate: true, nodes: rfGraphJson.nodes, - edges: rfGraphJson.edges, + edges: rfGraphJson.edges.map(edge => ({ ...edge, zIndex: 0 })), })); }, [rfGraphJson]); diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx index 8e815ad34..99b7f80a5 100644 --- a/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx +++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx @@ -142,7 +142,6 @@ export const getNestedContainerStyle = (nodeExecutionStatus) => { const style = { border: `1px dashed ${getStatusColor(nodeExecutionStatus)}`, borderRadius: '8px', - background: 'rgba(255,255,255,.9)', width: '100%', height: '100%', padding: '.25rem',