fix: remove the edge when the node is deleted in dag exporter (pinterest#1089)

Author: jczhong84

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';