Fix lineage again (#2411)

* fix: Lineage render problem * Spotless Apply * feat: use origin lineage-dag-ext.tsx * feat: use ext lineage-dag-ext.tsx * Spotless Apply --------- Co-authored-by: leechor <[email protected]>
DataLinkDC · Oct 20, 2023 · e001756 · e001756
1 parent 80529cf
commit e001756
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 102 deletions.
diff --git a/dinky-web/src/components/LineageGraph/index.tsx b/dinky-web/src/components/LineageGraph/index.tsx
@@ -1,6 +1,5 @@
 import { Badge, Tooltip, Typography } from 'antd';
 
-import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext';
 import {
   LineageDetailInfo,
   LineageRelations,
@@ -20,6 +19,9 @@ import {
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import 'react-lineage-dag/dist/index.css';
+// import LineageDag from "react-lineage-dag";
+import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext';
+// import LineageDagExt from "@/components/LineageGraph/lineage-dag-ext";
 
 interface LineageState {
   lineageData: LineageDetailInfo;
@@ -76,58 +78,74 @@ const InitLineageState: LineageState = {
   collapseUpstream: false
 };
 
-const LineageGraph: React.FC<JobLineageProps> = (props) => {
-  const { lineageData, refreshCallBack } = props;
-  const [lineageState, setLineageState] = React.useState<LineageState>(InitLineageState);
-
-  const buildLineageColumns = (data: LineageDetailInfo) => {
-    return [
-      {
-        key: 'id',
-        width: '100',
-        render: (text: any, record: any, index: number) => {
-          return (
-            <Badge
-              count={index + 1}
-              size={'small'}
-              color={index < 10 ? 'red' : index < 20 ? 'blue' : index < 30 ? 'gold' : 'cyan'}
-            />
-          );
-        }
-      },
-      {
-        key: 'name',
-        primaryKey: true,
-        width: '250',
-        render: (text: any, record: any, index: number) => {
-          return (
-            <>
-              <InsertRowAboveOutlined /> {text}
-            </>
-          );
-        }
+const buildLineageColumns = (data: LineageDetailInfo) => {
+  return [
+    {
+      key: 'id',
+      width: '100',
+      render: (text: any, record: any, index: number) => {
+        return (
+          <Badge
+            count={index + 1}
+            size={'small'}
+            color={index < 10 ? 'red' : index < 20 ? 'blue' : index < 30 ? 'gold' : 'cyan'}
+          />
+        );
       }
-    ];
-  };
+    },
+    {
+      key: 'name',
+      primaryKey: true,
+      width: '250',
+      render: (text: any, record: any, index: number) => {
+        return (
+          <>
+            <InsertRowAboveOutlined /> {text}
+          </>
+        );
+      }
+    }
+  ];
+};
 
-  const buildLineageTables = (tables: LineageTable[]) => {
-    return tables.map((table: LineageTable) => ({
-      id: table?.id,
-      name: table?.name,
-      isCollapse: false,
-      fields: table?.columns
-    }));
-  };
+const buildLineageTables = (tables: LineageTable[]) => {
+  return tables.map((table: LineageTable) => ({
+    id: table?.id,
+    name: table?.name,
+    isCollapse: false,
+    fields: table?.columns
+  }));
+};
 
-  const buildLineageRelations = (relations: LineageRelations[]) => {
-    return relations.map((relation: LineageRelations) => ({
-      id: relation?.id,
-      srcTableId: relation?.srcTableId,
-      tgtTableId: relation?.tgtTableId,
-      srcTableColName: relation?.srcTableColName,
-      tgtTableColName: relation?.tgtTableColName
-    }));
-  };
+const buildLineageRelations = (relations: LineageRelations[]) => {
+  return relations.map((relation: LineageRelations) => ({
+    id: relation?.id,
+    srcTableId: relation?.srcTableId,
+    tgtTableId: relation?.tgtTableId,
+    srcTableColName: relation?.srcTableColName,
+    tgtTableColName: relation?.tgtTableColName
+  }));
+};
+
+const LineageGraph: React.FC<JobLineageProps> = (props) => {
+  const { lineageData, refreshCallBack } = props;
+  const [lineageState, setLineageState] = React.useState<LineageState>({
+    ...InitLineageState,
+    lineageData: lineageData,
+    tables: buildLineageTables(lineageData.tables),
+    relations: buildLineageRelations(lineageData.relations)
+  });
+
+  useEffect(() => {
+    if (lineageData) {
+      setLineageState((prevState) => ({
+        ...prevState,
+        lineageData: lineageData,
+        tables: buildLineageTables(lineageData.tables),
+        relations: buildLineageRelations(lineageData.relations)
+      }));
+    }
+  }, [lineageData, lineageState.refresh]);
 
   const handleExpandField = (nodeData: any, tables: ITable[]) => {
     const { isCollapse, id } = nodeData;
@@ -260,7 +278,7 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
         ellipsis
         type={'secondary'}
         onClick={() => {
-          lineageState.canvas.nodes.forEach((item: { redrawTitle: () => void }) => {
+          lineageState.canvas.nodes?.forEach((item: { redrawTitle: () => void }) => {
             item.redrawTitle();
           });
         }}
@@ -270,17 +288,6 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
     );
   };
 
-  useEffect(() => {
-    if (lineageData) {
-      setLineageState((prevState) => ({
-        ...prevState,
-        lineageData: lineageData,
-        tables: buildLineageTables(lineageData.tables),
-        relations: buildLineageRelations(lineageData.relations)
-      }));
-    }
-  }, [lineageData, lineageState.refresh]);
-
   return (
     <LineageDagExt
       tables={buildLineageTables(lineageState.lineageData.tables)}
@@ -308,23 +315,6 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
             circleColor: '#e8e8e8'
           }
         }
-        // theme: {
-        //   isMouseMoveStopPropagation: true,
-        //   autoFixCanvas: {
-        //     enable: true,
-        //     autoMovePadding: [40, 40, 40, 40],
-        //   },
-        //   edge: {
-        //     type: 'endpoint',
-        //     shapeType: 'AdvancedBezier',
-        //     hasRadius: true,
-        //     isExpandWidth: true,
-        //     label: '111',
-        //     defaultAnimate: true,
-        //     arrowPosition: 1,
-        //     arrowOffset: -5
-        //   },
-        // }
       }}
       butterfly={{
         zoomable: true,

diff --git a/dinky-web/src/components/LineageGraph/lineage-dag-ext.tsx b/dinky-web/src/components/LineageGraph/lineage-dag-ext.tsx
@@ -22,7 +22,7 @@ export default class LineageDagExt extends LineageDag {
       theme: {
         edge: {
           type: 'endpoint',
-          // shapeType: 'AdvancedBezier',
+          shapeType: 'AdvancedBezier',
           arrow: true,
           isExpandWidth: true,
           arrowPosition: 1,
@@ -59,37 +59,67 @@ export default class LineageDagExt extends LineageDag {
     this.originEdges = result.edges;
 
     result = transformEdges(result.nodes, _.cloneDeep(result.edges));
+    result.edges = result.edges.map((item) => {
+      return {
+        ...item,
+        shapeType: 'AdvancedBezier'
+      };
+    });
+
     this.canvasData = {
       nodes: result.nodes,
       edges: result.edges
     };
 
-    let minimap = _.get(this, 'props.config.minimap', {});
+    setTimeout(() => {
+      let tmpEdges = result.edges;
+      result.edges = [];
+      // this.canvas.wrapper.style.visibility = 'hidden';
+      this.canvas.draw(result, () => {
+        this.canvas.relayout(
+          {
+            edges: tmpEdges.map((item) => {
+              return {
+                source: item.sourceNode,
+                target: item.targetNode
+              };
+            })
+          },
+          true
+        );
+        // this.canvas.wrapper.style.visibility = 'visible';
+        debugger;
+        this.canvas.addEdges(tmpEdges, true);
 
-    const minimapCfg = _.assign({}, minimap.config, {
-      events: ['system.node.click', 'system.canvas.click']
-    });
+        let minimap = _.get(this, 'props.config.minimap', {});
 
-    if (minimap && minimap.enable) {
-      this.canvas.setMinimap(true, minimapCfg);
-    }
+        const minimapCfg = _.assign({}, minimap.config, {
+          events: ['system.node.click', 'system.canvas.click']
+        });
 
-    if (_.get(this, 'props.config.gridMode')) {
-      this.canvas.setGridMode(true, _.assign({}, _.get(this, 'props.config.gridMode', {})));
-    }
+        if (minimap && minimap.enable) {
+          this.canvas.setMinimap(true, minimapCfg);
+        }
 
-    if (result.nodes.length !== 0) {
-      this.canvas.focusCenterWithAnimate();
-      this._isFirstFocus = true;
-    }
+        if (_.get(this, 'props.config.gridMode')) {
+          this.canvas.setGridMode(true, _.assign({}, _.get(this, 'props.config.gridMode', {})));
+        }
 
-    this.props.onLoaded && this.props.onLoaded(this.canvas);
-    this.canvas.on('system.node.click', (data) => {
-      let node = data.node;
-      this.canvas.focus(node.id);
-    });
-    this.canvas.on('system.canvas.click', () => {
-      this.canvas.unfocus();
-    });
+        if (result.nodes.length !== 0) {
+          this.canvas.focusCenterWithAnimate();
+          this._isFirstFocus = true;
+        }
+
+        this.forceUpdate();
+        this.props.onLoaded && this.props.onLoaded(this.canvas);
+      });
+      this.canvas.on('system.node.click', (data) => {
+        let node = data.node;
+        this.canvas.focus(node.id);
+      });
+      this.canvas.on('system.canvas.click', () => {
+        this.canvas.unfocus();
+      });
+    }, _.get(this.props, 'config.delayDraw', 0));
   }
 }