fix: graph edge overlaps nodes (flyteorg#542)

* 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]> * fix: graph edge overlaps nodes issue Signed-off-by: James <[email protected]> * introduce needFitView * edge overlap
eapolinario · Jul 20, 2022 · 28a224e · 28a224e
1 parent e62b43b
commit 28a224e
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx
@@ -49,7 +49,7 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
       ...state,
       shouldUpdate: true,
       nodes: rfGraphJson.nodes,
-      edges: rfGraphJson.edges,
+      edges: rfGraphJson.edges.map(edge => ({ ...edge, zIndex: 0 })),
     }));
   }, [rfGraphJson]);
 
@@ -109,6 +109,7 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
       style={reactFlowStyle}
       onInit={onLoad}
       fitView
+      defaultEdgeOptions={{ zIndex: 0 }}
     >
       <Background
         style={backgroundStyle.background}

diff --git 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',