fix: remove the edge when the node is deleted in dag exporter (pinter…

…est#1089)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "querybook",
-    "version": "3.14.0",
+    "version": "3.14.1",
     "description": "A Big Data Webapp",
     "private": true,
     "scripts": {
@@ -79,7 +79,6 @@
         "react-dnd": "^15.1.2",
         "react-dnd-html5-backend": "^15.1.2",
         "react-dom": "17.0.2",
-        "react-flow-renderer": "^10.3.17",
         "react-hot-toast": "^2.0.0",
         "react-json-view": "^1.21.3",
         "react-lazyload": "^3.2.0",
@@ -88,6 +87,7 @@
         "react-select": "4.3.1",
         "react-table": "6.8.6",
         "react-virtualized": "9.22.3",
+        "reactflow": "^11.3.0",
         "reactour": "^1.18.6",
         "redux": "4.1.0",
         "redux-logger": "3.0.6",

querybook/webapp/components/DataDocDAGExporter/DataDocDAGExporterGraph.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConnectDropTarget } from 'react-dnd';
-import { Edge, Node, ReactFlowInstance } from 'react-flow-renderer';
+import { Edge, Node, ReactFlowInstance } from 'reactflow';
 
 import { QueryDAGNodeTypes } from 'hooks/dag/useExporterDAG';
 import { FlowGraph } from 'ui/FlowGraph/FlowGraph';

querybook/webapp/components/DataTableViewLineage/DataTableViewLineage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Edge, Node } from 'react-flow-renderer';
+import { Edge, Node } from 'reactflow';
 
 import { DataTableViewMini } from 'components/DataTableViewMini/DataTableViewMini';
 import { IDataTable, ILineage, ILineageCollection } from 'const/metastore';

querybook/webapp/const/datadoc.ts

@@ -1,5 +1,5 @@
 import { ContentState } from 'draft-js';
-import { Edge, Node } from 'react-flow-renderer';
+import { Edge, Node } from 'reactflow';
 
 import { IChartConfig } from './dataDocChart';
 

querybook/webapp/hooks/dag/useExporterDAG.ts

@@ -6,8 +6,8 @@ import {
     useState,
 } from 'react';
 import { useDrop } from 'react-dnd';
-import { Edge, Node, Position, ReactFlowInstance } from 'react-flow-renderer';
 import { useSelector } from 'react-redux';
+import { Edge, Node, Position, ReactFlowInstance } from 'reactflow';
 
 import { queryCellDraggableType } from 'components/DataDocDAGExporter/DataDocDAGExporter';
 import { IDataQueryCell } from 'const/datadoc';

querybook/webapp/hooks/dag/useSavedDAG.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Edge, Node } from 'react-flow-renderer';
 import { useDispatch, useSelector } from 'react-redux';
+import { Edge, Node } from 'reactflow';
 
 import { hashString } from 'lib/data-doc/data-doc-utils';
 import { fetchDAGExport, saveDAGExport } from 'redux/dataDoc/action';

querybook/webapp/redux/dataDoc/action.ts

@@ -2,7 +2,7 @@ import { ContentState, convertToRaw } from 'draft-js';
 import { mapValues } from 'lodash';
 import moment from 'moment';
 import { normalize, schema } from 'normalizr';
-import { Edge, Node } from 'react-flow-renderer';
+import { Edge, Node } from 'reactflow';
 
 import { IAccessRequest } from 'const/accessRequest';
 import {

querybook/webapp/resource/dataDoc.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from 'react-flow-renderer';
+import { Edge, Node } from 'reactflow';
 
 import { IAccessRequest } from 'const/accessRequest';
 import type {

querybook/webapp/ui/FlowGraph/FlowGraph.tsx

@@ -16,7 +16,9 @@ import ReactFlow, {
     ReactFlowInstance,
     ReactFlowProvider,
     useReactFlow,
-} from 'react-flow-renderer';
+} from 'reactflow';
+
+import 'reactflow/dist/style.css';
 
 import { GraphControls } from './GraphControls';
 import {

querybook/webapp/ui/FlowGraph/GraphControls.tsx

@@ -5,7 +5,7 @@ import {
     useReactFlow,
     useStore,
     useStoreApi,
-} from 'react-flow-renderer';
+} from 'reactflow';
 
 import { IconButton } from 'ui/Button/IconButton';
 

querybook/webapp/ui/FlowGraph/LineageNode.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { Handle, Position } from 'react-flow-renderer';
+import { Handle, Position } from 'reactflow';
 
 import { IconButton } from 'ui/Button/IconButton';
 

querybook/webapp/ui/FlowGraph/QueryCellNode.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useContext, useState } from 'react';
-import { Handle, Position, useReactFlow } from 'react-flow-renderer';
 import { useSelector } from 'react-redux';
+import { Handle, Position, useReactFlow } from 'reactflow';
 
 import { IDataQueryCell } from 'const/datadoc';
 import { DataDocDAGExporterContext } from 'context/DataDocDAGExporter';
@@ -33,7 +33,7 @@ export const QueryCellNode = React.memo<IProps>(
     ({ data, sourcePosition, targetPosition, id, selected }) => {
         const { isEngineSupported } = useContext(DataDocDAGExporterContext);
 
-        const { setNodes } = useReactFlow();
+        const { getNode, deleteElements } = useReactFlow();
         const [showQuery, setShowQuery] = useState(false);
 
         const { queryCell, updated } = data;
@@ -54,8 +54,8 @@ export const QueryCellNode = React.memo<IProps>(
         });
 
         const deleteNode = useCallback(() => {
-            setNodes((nds) => nds.filter((node) => node.id !== id));
-        }, [id, setNodes]);
+            deleteElements({ nodes: [getNode(id)] });
+        }, [deleteElements, getNode, id]);
 
         return (
             <div

querybook/webapp/ui/FlowGraph/RemovableEdge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getBezierPath, getEdgeCenter, Position } from 'react-flow-renderer';
+import { getBezierPath, Position } from 'reactflow';
 
 import { IconButton } from 'ui/Button/IconButton';
 
@@ -33,20 +33,14 @@ export const RemovableEdge: React.FC<IProps> = ({
     markerEnd,
 }: IProps) => {
     const { onRemove } = data;
-    const edgePath = getBezierPath({
+    const [edgePath, labelX, labelY] = getBezierPath({
         sourceX,
         sourceY,
         sourcePosition,
         targetX,
         targetY,
         targetPosition,
     });
-    const [edgeCenterX, edgeCenterY] = getEdgeCenter({
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-    });
 
     return (
         <>
@@ -60,8 +54,8 @@ export const RemovableEdge: React.FC<IProps> = ({
             <foreignObject
                 width={foreignObjectSize}
                 height={foreignObjectSize}
-                x={edgeCenterX - foreignObjectSize / 2}
-                y={edgeCenterY - foreignObjectSize / 2}
+                x={labelX - foreignObjectSize / 2}
+                y={labelY - foreignObjectSize / 2}
             >
                 <IconButton
                     icon="X"

querybook/webapp/ui/FlowGraph/helpers.ts

@@ -1,5 +1,5 @@
 import dagre from 'dagre';
-import { Edge, Node, Position } from 'react-flow-renderer';
+import { Edge, Node, Position } from 'reactflow';
 
 const dagreGraph = new dagre.graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));

yarn.lock

@@ -3759,6 +3759,64 @@
   resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-3.0.1.tgz#8056fe046a8d10a275e321ec0557ae652d7a4d06"
   integrity sha512-XjDVbs3ZU16CO1h5Q3Ew2RPJqmZBDE/EVf1LYp6ePEffs3V/MX9ZbL5bJr8qiK5SbGmUMuDoaFgyKacYz8prRA==
 
+"@reactflow/background@11.0.5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.0.5.tgz#9d086809251b46269cf69f72d2897d6101e11bfc"
+  integrity sha512-rQKqD3gCjhsy6tuKkRrSuCgZj66tdfdX6t58d73+84+lud1O3f+vj/JfFZC9ee5ZY4R/5kVzOpKOAPaGQZmhig==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.3.0"
+    classcat "^5.0.3"
+    zustand "^4.1.1"
+
+"@reactflow/controls@11.0.5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.0.5.tgz#d8204dd8bc579c5795c8fbaaf4c43a7bfce4112b"
+  integrity sha512-a8rWtFnEZk7HyWbaWWjsaFssr5q++p9iCKVzuvYUuXFveJwTofRdkjq2nKlrszrMJLNeNZwDi9mYIwVqqds9aQ==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.3.0"
+    classcat "^5.0.3"
+
+"@reactflow/core@11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.3.0.tgz#321d47d9edfc15b41e85268563ae0e9407062dac"
+  integrity sha512-RmxP/Vy7aImu4WfFYcvG25zWJirriMupaz25qX+75jbtakTKZHCTurA7jI6NgubUY1OlwcXqG9surCQgSu6+hQ==
+  dependencies:
+    "@types/d3" "^7.4.0"
+    "@types/d3-drag" "^3.0.1"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.1.1"
+
+"@reactflow/minimap@11.2.0":
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.2.0.tgz#e635df2b6de88b13ecb614a695d648d14a58f3f4"
+  integrity sha512-CORkxIVI+LNOk1fHRPSwiBFBXglt6gfHU+V5hBzF8ZsOhs0gxgHDTw+2ktvMsRkSKnnT58uPXEvdseksVonI2g==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.3.0"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.1.1"
+
+"@reactflow/node-toolbar@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.0.0.tgz#f9870cbb8e57ebafba4678d3ba8c6281012e752c"
+  integrity sha512-UP/X7Y9rfPVDEipOPP/MXWOK02+Yzuo3PIEPFDebDtUPDLu5EKeTENKAgpihy/YG5X2Bi2eh5XRs0bc3CsmRiw==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.3.0"
+    classcat "^5.0.3"
+    zustand "^4.1.1"
+
 "@rooks/use-mutation-observer@4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@rooks/use-mutation-observer/-/use-mutation-observer-4.11.2.tgz#a0466c4338e0a4487ea19253c86bcd427c29f4af"
@@ -4952,7 +5010,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-1.0.9.tgz#c5a180f1e251de853b399cfbfbb6dd7f8bf842ae"
   integrity sha512-zJ44YgjqALmyps+II7b1mZLhrtfV/FOxw9owT87mrweGWcg+WK5oiJX2M3SYJ0XUAExBduarysfgbR11YxzojQ==
 
-"@types/d3-drag@*":
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.1.tgz#fb1e3d5cceeee4d913caa59dedf55c94cb66e80f"
   integrity sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==
@@ -5122,7 +5180,7 @@
   dependencies:
     "@types/d3-time" "^1"
 
-"@types/d3-selection@*":
+"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.3.tgz#57be7da68e7d9c9b29efefd8ea5a9ef1171e42ba"
   integrity sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==
@@ -5195,7 +5253,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-voronoi/-/d3-voronoi-1.1.8.tgz#a039cb8368bce4efc1a70aebe744d210851cf1a7"
   integrity sha512-zqNhW7QsYQGlfOdrwPNPG3Wk64zUa4epKRurkJ/dVc6oeXrB+iTDt8sRZ0KZKOOXvvfa1dcdB0e45TZeLBiodQ==
 
-"@types/d3-zoom@*":
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.1.tgz#4bfc7e29625c4f79df38e2c36de52ec3e9faf826"
   integrity sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==
@@ -5745,11 +5803,6 @@
   resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.4.tgz#84879a4d6d4aaefde53d4b29c91c0c4cbcffc26f"
   integrity sha512-rPvqs+1hL/5hbES/0HTdUu4lvNmneiwKwccbWe7HGLWbnsLdqKnQHyWLg4Pj0AMO7PLHCwBM1Cs8orChdkDONg==
 
-"@types/resize-observer-browser@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
-  integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
-
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -15903,20 +15956,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-flow-renderer@^10.3.17:
-  version "10.3.17"
-  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz#06d6ecef5559ba5d3e64d2c8dcb74c43071d62b1"
-  integrity sha512-bywiqVErlh5kCDqw3x0an5Ur3mT9j9CwJsDwmhmz4i1IgYM1a0SPqqEhClvjX+s5pU4nHjmVaGXWK96pwsiGcQ==
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    "@types/d3" "^7.4.0"
-    "@types/resize-observer-browser" "^0.1.7"
-    classcat "^5.0.3"
-    d3-drag "^3.0.0"
-    d3-selection "^3.0.0"
-    d3-zoom "^3.0.0"
-    zustand "^3.7.2"
-
 react-focus-lock@2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.2.tgz#f1e4db5e25cd8789351f2bd5ebe91e9dcb9c2922"
@@ -16139,6 +16178,17 @@ react@^16.8.3:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+reactflow@^11.3.0:
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.3.0.tgz#68d91c4fd2c1ee0d5c1305c6fb8d898339c35de0"
+  integrity sha512-KU3Uwww0hjvF0Er5sA0Qy+e3KPJOn5bLpyxVooyef0MLDk/W5ybCmMvKKnML705GtJWChzHPNzHST5hCf5OflA==
+  dependencies:
+    "@reactflow/background" "11.0.5"
+    "@reactflow/controls" "11.0.5"
+    "@reactflow/core" "11.3.0"
+    "@reactflow/minimap" "11.2.0"
+    "@reactflow/node-toolbar" "1.0.0"
+
 reactour@^1.18.6:
   version "1.18.6"
   resolved "https://registry.yarnpkg.com/reactour/-/reactour-1.18.6.tgz#b8027c9d3a8b42079c483042717adc5b61bfc50e"
@@ -18665,6 +18715,11 @@ use-sidecar@^1.0.5:
     detect-node-es "^1.1.0"
     tslib "^1.9.3"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -19492,10 +19547,12 @@ yup@^0.32.11:
     property-expr "^2.0.4"
     toposort "^2.0.2"
 
-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==
+zustand@^4.1.1:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.4.tgz#b0286da4cc9edd35e91c96414fa54bfa4652a54d"
+  integrity sha512-k2jVOlWo8p4R83mQ+/uyB8ILPO2PCJOf+QVjcL+1PbMCk1w5OoPYpAIxy9zd93FSfmJqoH6lGdwzzjwqJIRU5A==
+  dependencies:
+    use-sync-external-store "1.2.0"
 
 zwitch@^1.0.0:
   version "1.0.5"