@aloudata/ink-lineage 0.0.1-beta.6 → 0.0.1-beta.61

package/dist/manager/LineageManager.js

@@ -1,23 +1,34 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import { BigLayout, Graph, isNodeVisible, } from '@aloudata/ink-graph-new';
-import { DataProcessor, ExpandManager } from './index';
-import { EDirection, ERelationType, } from '../types';
-import { getRelatedData, getTableIdByColumnId } from '../utils';
-import { SearchNodeManager, RightKeyMenuManager, FoldLineageManager } from '.';
+import { TableDataProcessor, ExpandManager, TaskGraphEventManager, ScheduleDataProcessor, TaskDataProcessor, } from './index';
+import { EDashType, EDirection, ELineageType, EGraphMode, EEventEnum, } from '../types';
+import { getRelatedData, getTaskRelatedData } from '../utils';
+import { SearchNodeManager, TableRightKeyMenuManager, FoldLineageManager, } from '.';
 import _ from 'lodash';
 import { ToolbarManager } from './ToolbarManager';
 import EventEmitter from 'eventemitter3';
-import { CustomNode, TableNode, DefaultEdge } from '../components';
+import { CustomNode, TableNode, DefaultEdge, ColumnNode, TaskColumnNode, } from '../components';
 import { DefaultNode } from '../components/Nodes/DefaultNode';
 import { CustomEventManager, TableEventManager, ColumnEventManager, } from './nodeManager';
-import { CUSTOM_NODE, BASE_NODE, FOLD_EDGE, LINEAGE_EDGE, TABLE_NODE, } from '../constant';
+import { CUSTOM_NODE, BASE_NODE, FOLD_EDGE, LINEAGE_EDGE, TABLE_NODE, BASE_EDGE, TASK_TABLE_NODE, TASK_TABLE_WIDTH, SCHEDULE_TASK_TABLE_NODE, CLICK_EDGE, } from '../constant';
 import { FoldEdge } from '../components/Edges/FoldEdge';
 import { LineageEdge } from '../components/Edges/LineageEdge';
-import { GraphEventManager } from './GraphEventManager';
-import { AssetNode } from '../components/Nodes/AssetNode';
+import { TableGraphEventManager } from './graphEventManager/TableGraphEventManager';
+import { onZoomChange, updateColumnPosition, updateNodeHeight, } from '../utils/manager';
+import { TaskTableNode } from '../components/Nodes/Task/TaskTableNode';
+import { TaskTableEventManager } from './nodeManager/task/TaskTableEventManager';
+import { TaskColumnEventManager } from './nodeManager/task/TaskColumnEventManager';
+import { TaskRightKeyMenuManager } from './rightKeyMenu/TaskRightKeyMenuManager';
+import { mat4, vec3 } from 'gl-matrix';
+import { BigDagre } from '../BigDagre';
+import { AssetBaseNode } from '../components/Nodes/Table/AssetBaseNode';
+import { ScheduleTaskTableNode } from '../components/Nodes/ScheduleTaskTableNode';
+import { ScheduleTaskTableEventManager } from './nodeManager/ScheduleTaskTableEventManager';
+import { ClickEdge } from '../components/Edges/ClickEdge';
 var InkLineageManager = /** @class */ (function () {
     function InkLineageManager(data, config) {
         this.emitter = new EventEmitter();
+        this.activeEdges = [];
         this.activeNodes = [];
         this.relatedNodes = [];
         this.relatedEdges = [];
@@ -26,6 +37,10 @@ var InkLineageManager = /** @class */ (function () {
         this.childrenColumnsMap = new Map();
         this.relatedColumnsMap = new Map();
         this.edgesMap = new Map();
+        this.layoutControl = {
+            shouldGroupNodes: true,
+            shouldLayout: true,
+        };
         this.config = config;
         this.canvasDomRoot = _.isString(config.root)
             ? document.getElementById(config.root)
@@ -34,8 +49,8 @@ var InkLineageManager = /** @class */ (function () {
         // 初始化managers
         this.initManagers();
         this.initGraph();
-        if (this.graph) {
-            this.graphEventManager.init();
+        this.graphEventManager.init();
+        if ([ELineageType.TABLE, ELineageType.SCHEDULE].includes(this.config.lineageType)) {
             this.expandManager.init();
         }
     }
@@ -47,68 +62,103 @@ var InkLineageManager = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    InkLineageManager.prototype.initManagers = function () {
+        this.searchNodeManager = new SearchNodeManager(this);
+        if (this.config.lineageType === ELineageType.TABLE) {
+            this.tableEventManager = new TableEventManager(this);
+            this.customEventManager = new CustomEventManager(this);
+            this.columnEventManager = new ColumnEventManager(this);
+            this.graphEventManager = new TableGraphEventManager(this);
+            this.dataProcessor = new TableDataProcessor(this);
+            this.foldLineageManager = new FoldLineageManager(this);
+            this.rightKeyMenuManager = new TableRightKeyMenuManager(this);
+            this.toolbarManager = new ToolbarManager(this);
+            this.expandManager = new ExpandManager(this);
+        }
+        else if (this.config.lineageType === ELineageType.TASK) {
+            this.tableEventManager = new TaskTableEventManager(this);
+            this.columnEventManager = new TaskColumnEventManager(this);
+            this.graphEventManager = new TaskGraphEventManager(this);
+            this.dataProcessor = new TaskDataProcessor(this);
+            this.rightKeyMenuManager = new TaskRightKeyMenuManager(this);
+        }
+        else {
+            this.scheduleTaskTableEventManager = new ScheduleTaskTableEventManager(this);
+            this.graphEventManager = new TableGraphEventManager(this);
+            this.dataProcessor = new ScheduleDataProcessor(this);
+            this.rightKeyMenuManager = new TaskRightKeyMenuManager(this);
+            this.expandManager = new ExpandManager(this);
+        }
+    };
     InkLineageManager.prototype.initGraph = function () {
         var _this = this;
-        // init graph by parsed data
         var _a = this.config, root = _a.root, cullingConfig = _a.cullingConfig, layoutConfig = _a.layoutConfig, zoomConfig = _a.zoomConfig;
         var graph = new Graph({
             root: root,
             culling: cullingConfig,
             layout: layoutConfig,
+            minimap: { enable: this.parsedData.nodes.length > 0 },
             tools: {
                 zoom: __assign(__assign({}, zoomConfig), { onZoomChange: function (mode) {
-                        var _a = _this.parsedData, nodes = _a.nodes, edges = _a.edges;
-                        _this.refreshExtraStatus();
-                        var visibleNodes = nodes.filter(function (node) { return node.visible; });
-                        var visibleEdges = edges.filter(function (edge) { return edge.visible; });
-                        var layoutedData = _this.layout(visibleNodes, visibleEdges);
-                        var cullingData = _this.handleCulling(layoutedData);
-                        if (mode === 'SIMPLE') {
-                            var hideEdgeTypes_1 = [
-                                ERelationType.ColumnDirectColumn,
-                                ERelationType.ColumnIndirectColumn,
-                                ERelationType.ColumnIndirectTable,
-                                ERelationType.ColumnDirectCustom,
-                                ERelationType.ColumnIndirectCustom,
-                                ERelationType.CustomDirectColumn,
-                                ERelationType.CustomIndirectColumn,
-                            ];
-                            cullingData.edges = cullingData.edges.filter(function (edge) { return !hideEdgeTypes_1.includes(edge.data.relationTypeCode); });
+                        if (_this.config.lineageType === ELineageType.TABLE) {
+                            onZoomChange(mode, _this);
                         }
-                        _this.graph.setData(cullingData);
                     } }),
+                resetViewport: {
+                    visible: true,
+                    onResetViewportChange: function () {
+                        _this.update({ shouldGroupNodes: false });
+                    },
+                },
             },
             canvasCallback: {
                 onDrop: function () {
-                    _this.update();
+                    var _a, _b, _c, _d;
+                    if (((_b = (_a = _this.config) === null || _a === void 0 ? void 0 : _a.cullingConfig) === null || _b === void 0 ? void 0 : _b.auto) &&
+                        _this.parsedData.nodes.length > ((_d = (_c = _this.config) === null || _c === void 0 ? void 0 : _c.cullingConfig) === null || _d === void 0 ? void 0 : _d.max)) {
+                        _this.update({ shouldGroupNodes: false });
+                    }
                 },
                 onWheel: function () {
-                    _this.update();
+                    var _a, _b, _c, _d;
+                    if (((_b = (_a = _this.config) === null || _a === void 0 ? void 0 : _a.cullingConfig) === null || _b === void 0 ? void 0 : _b.auto) &&
+                        _this.parsedData.nodes.length > ((_d = (_c = _this.config) === null || _c === void 0 ? void 0 : _c.cullingConfig) === null || _d === void 0 ? void 0 : _d.max)) {
+                        _this.update({ shouldGroupNodes: false });
+                    }
                 },
             },
         });
         this.graph = graph;
         // register custom node
-        graph.registerNode(BASE_NODE, AssetNode);
+        if (this.config.lineageType === ELineageType.TASK) {
+            graph.registerNode(BASE_NODE, TaskTableNode);
+            graph.registerEdge(BASE_EDGE, LineageEdge);
+        }
+        else {
+            graph.registerNode(BASE_NODE, AssetBaseNode);
+        }
         graph.registerNode(TABLE_NODE, TableNode);
+        graph.registerNode(TASK_TABLE_NODE, TaskTableNode);
         graph.registerNode(CUSTOM_NODE, CustomNode);
+        graph.registerNode(SCHEDULE_TASK_TABLE_NODE, ScheduleTaskTableNode);
         graph.registerEdge(FOLD_EDGE, FoldEdge);
         graph.registerEdge(LINEAGE_EDGE, LineageEdge);
+        graph.registerEdge(CLICK_EDGE, ClickEdge);
         DefaultNode.lineageManager = this;
         DefaultEdge.lineageManager = this;
-        this.render();
-    };
-    InkLineageManager.prototype.initManagers = function () {
-        this.tableEventManager = new TableEventManager(this);
-        this.customEventManager = new CustomEventManager(this);
-        this.columnEventManager = new ColumnEventManager(this);
-        this.graphEventManager = new GraphEventManager(this);
-        this.dataProcessor = new DataProcessor(this);
-        this.foldLineageManager = new FoldLineageManager(this);
-        this.searchNodeManager = new SearchNodeManager(this);
-        this.rightKeyMenuManager = new RightKeyMenuManager(this);
-        this.toolbarManager = new ToolbarManager(this);
-        this.expandManager = new ExpandManager(this);
+        if (this.config.lineageType === ELineageType.TASK) {
+            TaskTableNode.lineageManager = this;
+            TaskColumnNode.lineageManager = this;
+        }
+        else if (this.config.lineageType === ELineageType.SCHEDULE) {
+            ScheduleTaskTableNode.lineageManager = this;
+        }
+        else {
+            TableNode.lineageManager = this;
+            CustomNode.lineageManager = this;
+            ColumnNode.lineageManager = this;
+        }
+        this.render(false, true);
     };
     InkLineageManager.prototype.on = function (type, listener) {
         this.emitter.on(type, listener);
@@ -123,39 +173,139 @@ var InkLineageManager = /** @class */ (function () {
         this.emitter.off(type, listener);
     };
     InkLineageManager.prototype.layout = function (nodes, edges) {
+        var _a, _b, _c;
         if (nodes === void 0) { nodes = this.parsedData.nodes; }
         if (edges === void 0) { edges = this.parsedData.edges; }
-        var layoutedData = BigLayout(nodes, edges, this.canvasDomRoot, true, [], this.graph.mode);
-        return layoutedData;
+        var layoutData;
+        if (this.config.lineageType === ELineageType.TABLE) {
+            layoutData = BigLayout(nodes, edges, this.canvasDomRoot, {
+                shouldGroupNodes: this.layoutControl.shouldGroupNodes,
+                sortConfig: (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.layoutConfig) === null || _b === void 0 ? void 0 : _b.sortRules) !== null && _c !== void 0 ? _c : [],
+                mode: this.graph.mode,
+            });
+        }
+        else {
+            layoutData = BigDagre(nodes, edges, this.getCanvas(), {
+                rankdir: 'LR',
+                excludeIndirectEdges: true,
+                ranksep: 80,
+            });
+        }
+        return layoutData || { nodes: [], edges: [] };
     };
-    InkLineageManager.prototype.render = function (isUpdate) {
-        var _a, _b;
+    InkLineageManager.prototype.getState = function () {
+        var _a;
+        return {
+            activeNodesId: this.activeNodes.map(function (item) { return item.id; }),
+            relatedNodesId: this.relatedNodes.map(function (item) { return item.id; }),
+            relatedEdgesId: this.relatedEdges.map(function (item) { return item.id; }),
+            cachedRelatedNodeConfigId: (_a = this.cachedRelatedNodeConfig) === null || _a === void 0 ? void 0 : _a.id,
+            parsedData: this.parsedData,
+            expandManager: this.expandManager.getState(),
+            toolbarManager: this.toolbarManager.getState(),
+            rightKeyMenuManager: this.rightKeyMenuManager.getState(),
+            foldLineageManager: this.foldLineageManager.getState(),
+        };
+    };
+    InkLineageManager.prototype.updateState = function (data) {
+        var _this = this;
+        var activeNodesId = data.activeNodesId, relatedNodesId = data.relatedNodesId, relatedEdgesId = data.relatedEdgesId, cachedRelatedNodeConfigId = data.cachedRelatedNodeConfigId, expandManager = data.expandManager, toolbarManager = data.toolbarManager, rightKeyMenuManager = data.rightKeyMenuManager, foldLineageManager = data.foldLineageManager;
+        this.activeNodes = activeNodesId.map(function (id) { return _this.getNodeConfigById(id); });
+        this.relatedNodes = relatedNodesId.map(function (id) { return _this.getNodeConfigById(id); });
+        this.relatedEdges = relatedEdgesId.map(function (id) { return _this.getEdgeConfigById(id); });
+        this.cachedRelatedNodeConfig = this.getNodeConfigById(cachedRelatedNodeConfigId);
+        this.expandManager.updateState(expandManager);
+        this.toolbarManager.updateState(toolbarManager);
+        this.rightKeyMenuManager.updateState(rightKeyMenuManager);
+        this.foldLineageManager.updateState(foldLineageManager);
+        this.update();
+    };
+    InkLineageManager.prototype.render = function (isUpdate, isInit) {
+        var _a, _b, _c, _d;
         if (isUpdate === void 0) { isUpdate = false; }
         if (!this.parsedData)
             return;
-        var _c = this.parsedData, nodes = _c.nodes, edges = _c.edges;
         this.refreshExtraStatus();
-        var visibleNodes = nodes.filter(function (node) { return node.visible; });
-        var visibleEdges = edges.filter(function (edge) { return edge.visible; });
-        var layoutedData = this.layout(visibleNodes, visibleEdges);
-        var data = this.handleCulling(layoutedData);
-        this.graph.setData(data);
+        if (this.layoutControl.shouldLayout) {
+            var _e = this.parsedData, nodes = _e.nodes, edges = _e.edges;
+            var visibleNodes = nodes.filter(function (node) { return node.visible; });
+            var visibleEdges = edges.filter(function (edge) { return edge.visible; });
+            var layoutData = this.layout(visibleNodes, visibleEdges);
+            // this.updateDataMaps(layoutData); // 布局完之后的节点需要更新到map中，这样节点才有偏移，合并链路才符合预期
+            var data = this.handleCulling(layoutData);
+            this.graph.setData(data);
+        }
+        // 表血缘有环的情况下，icon的显隐判断，需要根据坐标判断
+        if (this.config.lineageType === ELineageType.TABLE) {
+            (_b = (_a = this.dataProcessor) === null || _a === void 0 ? void 0 : _a.updateSideIconVisible) === null || _b === void 0 ? void 0 : _b.call(_a, this.parsedData);
+        }
         if (isUpdate) {
-            (_a = this.graph) === null || _a === void 0 ? void 0 : _a.update();
+            (_c = this.graph) === null || _c === void 0 ? void 0 : _c.update();
         }
         else {
-            (_b = this.graph) === null || _b === void 0 ? void 0 : _b.render();
+            (_d = this.graph) === null || _d === void 0 ? void 0 : _d.render();
+        }
+        if (this.config.lineageType === ELineageType.TASK && isInit) {
+            this.taskTranslate();
         }
+        this.resetLayoutControl();
     };
-    InkLineageManager.prototype.update = function () {
+    InkLineageManager.prototype.taskTranslate = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f;
+        var rightNode = '';
+        (_b = (_a = this.graph) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.forEach(function (node) {
+            var _a, _b, _c;
+            if (!node.config.visible)
+                return;
+            var target = node.bgRect;
+            var _d = __read(target.getPosition(), 1), x = _d[0];
+            var curRightNodeX = (_c = (_b = (_a = _this.graph.nodes) === null || _a === void 0 ? void 0 : _a.get(rightNode)) === null || _b === void 0 ? void 0 : _b.getPosition) === null || _c === void 0 ? void 0 : _c.call(_b)[0];
+            if (rightNode === '' || x > curRightNodeX)
+                rightNode = node === null || node === void 0 ? void 0 : node.id;
+        });
+        if (!rightNode)
+            return;
+        var canvasW = (_c = this.graph) === null || _c === void 0 ? void 0 : _c.getWidth();
+        var canvasH = (_d = this.graph) === null || _d === void 0 ? void 0 : _d.getHeight();
+        var target = (_e = this.graph.nodes) === null || _e === void 0 ? void 0 : _e.get(rightNode);
+        var _g = __read(target.getPosition(), 2), x = _g[0], y = _g[1];
+        var _h = target.getBBox(), height = _h.height, width = _h.width;
+        var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+        var offsetX = (-200 * innerWidth) / 1920;
+        var offsetY = (100 * innerHeight) / 1080;
+        (_f = this.graph) === null || _f === void 0 ? void 0 : _f.translate(x - canvasW / 2 + width / 2 + offsetX, y - canvasH / 2 + height / 2 + offsetY);
+    };
+    InkLineageManager.prototype.update = function (layoutControl) {
+        if (layoutControl) {
+            this.layoutControl = __assign(__assign({}, this.layoutControl), layoutControl);
+        }
         this.render(true);
     };
+    InkLineageManager.prototype.resetLayoutControl = function () {
+        this.layoutControl = {
+            shouldGroupNodes: true,
+            shouldLayout: true,
+        };
+    };
     InkLineageManager.prototype.destroy = function () {
         var _a;
         (_a = this.graph) === null || _a === void 0 ? void 0 : _a.destroy();
         this.graph = null;
     };
     InkLineageManager.prototype.setData = function (data) {
+        // if (
+        //   this.getMode() === 'SIMPLE' &&
+        //   this.config.lineageType === ELineageType.TABLE
+        // ) {
+        //   data.edges.forEach((edge) => {
+        //     if (hideEdgeTypes.includes(edge.data.relationTypeCode)) {
+        //       edge.visible = false;
+        //       edge.canBeFold = true;
+        //       edge.isFolded = true;
+        //     }
+        //   });
+        // }
         this.parsedData = data;
         this.updateDataMaps(this.parsedData);
     };
@@ -167,7 +317,7 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.handleCulling = function (data) {
         var _this = this;
         var _a, _b;
-        var _c = this.config.cullingConfig, auto = _c.auto, max = _c.max;
+        var _c = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.cullingConfig) || { auto: false, max: 0 }, auto = _c.auto, max = _c.max;
         var culling = auto && this.parsedData.nodes.length > max;
         var nodesConfig = data.nodes;
         var edgesConfig = data.edges;
@@ -175,40 +325,53 @@ var InkLineageManager = /** @class */ (function () {
             var orthoMatrix_1 = this.getCanvas().getCamera().getOrthoMatrix();
             // set nodes & edges
             var nodesConfigMap_1 = new Map();
-            nodesConfig = (_a = data === null || data === void 0 ? void 0 : data.nodes) === null || _a === void 0 ? void 0 : _a.filter(function (node) {
+            nodesConfig = (_b = data === null || data === void 0 ? void 0 : data.nodes) === null || _b === void 0 ? void 0 : _b.filter(function (node) {
                 var isVisible = isNodeVisible(node, _this.canvasDomRoot.clientWidth, _this.canvasDomRoot.clientHeight, orthoMatrix_1);
                 if (isVisible) {
                     nodesConfigMap_1.set(node.id, node);
                 }
                 return isVisible;
             });
-            // 根据裁剪的节点，在裁剪掉边
-            edgesConfig = (_b = data === null || data === void 0 ? void 0 : data.edges) === null || _b === void 0 ? void 0 : _b.filter(function (edge) {
-                var source = edge.source, target = edge.target, data = edge.data;
-                var isVisible = nodesConfigMap_1.has(source) && nodesConfigMap_1.has(target);
-                if (data.relationTypeCode.includes('Column')) {
-                    var sourceTableId = getTableIdByColumnId(source);
-                    var targetTableId = getTableIdByColumnId(target);
-                    isVisible =
-                        nodesConfigMap_1.has(sourceTableId) &&
-                            nodesConfigMap_1.has(targetTableId);
-                }
-                return isVisible;
-            });
         }
         return {
             nodes: nodesConfig,
             edges: edgesConfig,
         };
     };
-    InkLineageManager.prototype.refreshExtraStatus = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        (_a = this.dataProcessor) === null || _a === void 0 ? void 0 : _a.updateNodesAndEdgesVisible(this.parsedData, (_b = this.rightKeyMenuManager) === null || _b === void 0 ? void 0 : _b.edgeDashVisible, (_c = this.rightKeyMenuManager) === null || _c === void 0 ? void 0 : _c.onlyShowRelated, (_d = this.foldLineageManager) === null || _d === void 0 ? void 0 : _d.isFoldChecked);
+    InkLineageManager.prototype.scheduleRefreshExtraStatus = function () {
+        var _a, _b, _c;
+        (_a = this.dataProcessor) === null || _a === void 0 ? void 0 : _a.updateNodesAndEdgesVisible(this.parsedData);
+        (_b = this.dataProcessor) === null || _b === void 0 ? void 0 : _b.refreshRelatedNodesAndEdges(this.relatedNodes, this.relatedEdges);
+        (_c = this.dataProcessor) === null || _c === void 0 ? void 0 : _c.updateSideIconVisible(this.parsedData);
+    };
+    InkLineageManager.prototype.taskRefreshExtraStatus = function () {
+        var _a, _b, _c, _d, _e;
+        (_a = this.dataProcessor) === null || _a === void 0 ? void 0 : _a.updateNodesAndEdgesVisible(this.parsedData, (_b = this.rightKeyMenuManager) === null || _b === void 0 ? void 0 : _b.edgeDashVisible, (_c = this.rightKeyMenuManager) === null || _c === void 0 ? void 0 : _c.onlyShowRelated);
         // 刷新相关节点和边的高亮样式（如果打开了间接血缘按钮，那这些间接血缘也需要高亮）
-        (_e = this.dataProcessor) === null || _e === void 0 ? void 0 : _e.refreshRelatedNodesAndEdges(this.relatedNodes, this.relatedEdges);
-        (_f = this.dataProcessor) === null || _f === void 0 ? void 0 : _f.updateSideIconVisible(this.parsedData);
-        (_g = this.dataProcessor) === null || _g === void 0 ? void 0 : _g.updateNodeHeight(this.parsedData);
-        (_h = this.dataProcessor) === null || _h === void 0 ? void 0 : _h.updateColumnPosition(this.parsedData);
+        if (((_d = this.rightKeyMenuManager) === null || _d === void 0 ? void 0 : _d.exploreState.mode) === EGraphMode.NORMAL) {
+            (_e = this.dataProcessor) === null || _e === void 0 ? void 0 : _e.refreshRelatedNodesAndEdges(this.relatedNodes, this.relatedEdges);
+        }
+        updateNodeHeight(this.parsedData);
+        updateColumnPosition(this.parsedData);
+    };
+    InkLineageManager.prototype.refreshExtraStatus = function () {
+        var _a, _b, _c, _d, _e;
+        if (this.config.lineageType === ELineageType.TASK) {
+            this.taskRefreshExtraStatus();
+        }
+        else if (this.config.lineageType === ELineageType.SCHEDULE) {
+            this.scheduleRefreshExtraStatus();
+        }
+        else {
+            (_a = this.dataProcessor) === null || _a === void 0 ? void 0 : _a.updateNodesAndEdgesVisible(this.parsedData, (_b = this.rightKeyMenuManager) === null || _b === void 0 ? void 0 : _b.edgeDashVisible, (_c = this.rightKeyMenuManager) === null || _c === void 0 ? void 0 : _c.onlyShowRelated, (_d = this.foldLineageManager) === null || _d === void 0 ? void 0 : _d.isFoldChecked);
+            // 刷新相关节点和边的高亮样式（如果打开了间接血缘按钮，那这些间接血缘也需要高亮）
+            (_e = this.dataProcessor) === null || _e === void 0 ? void 0 : _e.refreshRelatedNodesAndEdges(this.relatedNodes, this.relatedEdges);
+            // (
+            //   this.dataProcessor as TableDataProcessor<TTableData, TColumnData>
+            // )?.updateSideIconVisible(this.parsedData);
+            updateNodeHeight(this.parsedData);
+            updateColumnPosition(this.parsedData);
+        }
     };
     InkLineageManager.prototype.updateActiveNodes = function (nodes) {
         var _a, _b;
@@ -240,8 +403,9 @@ var InkLineageManager = /** @class */ (function () {
         var _a, _b, _c;
         if (needUpdate === void 0) { needUpdate = true; }
         // reset prev related nodes
+        var activeNodeIds = this.activeNodes.map(function (n) { return n === null || n === void 0 ? void 0 : n.id; }) || [];
         (_a = this.relatedNodes) === null || _a === void 0 ? void 0 : _a.forEach(function (n) {
-            if (!n)
+            if (!n || activeNodeIds.includes(n.id))
                 return;
             n.isRelated = false;
             n.style.stroke = '#B1B1B1';
@@ -260,9 +424,7 @@ var InkLineageManager = /** @class */ (function () {
             var isFold = edge.inFoldLink && _this.foldLineageManager.isFoldChecked;
             if (isFold || edge.isExtraFoldEdge)
                 return;
-            edge.style.stroke = '#B1B1B1';
-            edge.style.lineWidth = 1;
-            edge.style.zIndex = -1;
+            _this.resetEdgeStyle(edge);
         });
         // update new related nodes
         this.relatedNodes = nodes;
@@ -292,9 +454,14 @@ var InkLineageManager = /** @class */ (function () {
             edge.style.zIndex = 1;
         });
         if (needUpdate) {
-            this.update();
+            this.update({ shouldLayout: false });
         }
     };
+    InkLineageManager.prototype.resetEdgeStyle = function (edge) {
+        edge.style.stroke = '#B1B1B1';
+        edge.style.lineWidth = 1;
+        edge.style.zIndex = -1;
+    };
     InkLineageManager.prototype.resetRelatedNodes = function (needUpdate) {
         if (needUpdate === void 0) { needUpdate = true; }
         this.updateRelatedNodes([], [], needUpdate);
@@ -306,7 +473,7 @@ var InkLineageManager = /** @class */ (function () {
             prevHighlightNodeConfig.style.stroke = '#E8E8E8';
             prevHighlightNodeConfig.style.fill = '#FFF';
         }
-        this.update();
+        this.update({ shouldLayout: false });
     };
     InkLineageManager.prototype.getNodeConfigById = function (id) {
         var tableNodeConfig = this.getTableNodeConfigById(id);
@@ -326,14 +493,56 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.getChildrenColumnConfigById = function (id) {
         return this.childrenColumnsMap.get(id);
     };
+    InkLineageManager.prototype.setTaskRelatedNodesAndEdges = function (nodeConfig, needUpdate, direction) {
+        if (needUpdate === void 0) { needUpdate = true; }
+        if (direction === void 0) { direction = EDirection.BOTH; }
+        this.cachedRelatedNodeConfig = nodeConfig;
+        var edgeDashVisible = this.rightKeyMenuManager.edgeDashVisible;
+        if (!nodeConfig)
+            return;
+        var relatedNodes = [];
+        var relatedEdges = [];
+        if (direction === EDirection.BOTH) {
+            // update related ui
+            // 获取与点击节点相关的节点/边（包含自己在内）
+            var relatedInputs = getTaskRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, EDirection.INPUT, edgeDashVisible);
+            var relatedOutputs = getTaskRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, EDirection.OUTPUT, edgeDashVisible);
+            // 高亮是把点击节点的上下游节点/边都高亮，所以要去重
+            relatedNodes = _.uniqBy(__spreadArray(__spreadArray([], __read(relatedInputs.relatedNodes), false), __read(relatedOutputs.relatedNodes), false), 'id');
+            relatedEdges = _.uniqBy(__spreadArray(__spreadArray([], __read(relatedInputs.relatedEdges), false), __read(relatedOutputs.relatedEdges), false), 'id');
+        }
+        else if (direction === EDirection.INPUT ||
+            direction === EDirection.OUTPUT) {
+            var relatedInputsOrOutputs = getTaskRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, direction, edgeDashVisible);
+            var _relatedNodes = relatedInputsOrOutputs.relatedNodes, _relatedEdges = relatedInputsOrOutputs.relatedEdges;
+            if (
+            // 间接血缘开关已打开就不需要进行此判断
+            edgeDashVisible === EDashType.DIRECT &&
+                _relatedEdges.every(function (e) { return e.relationType === EDashType.INDIRECT; })) {
+                // 清空上一次探索的相关列
+                this.clearRelatedColumns();
+                // 取消之前点击节点的相关节点的高亮状态；间接血缘从开到关的情况下相关表应当取消高亮
+                // 该探索节点只有间接血缘导致没有其相关节点被高亮，但此时已经进入了探索模式，所以仍需要取消之前的高亮状态
+                this.resetRelatedNodes(true);
+                return this.emit(EEventEnum.NOTIFICATION_TIPS, {
+                    message: '当前字段只有间接血缘，请打开间接血缘开关后查看',
+                });
+            }
+            relatedNodes = _relatedNodes;
+            relatedEdges = _relatedEdges;
+        }
+        // 设置点击节点的上下游节点/边的高亮样式并进行最终的图形更新
+        this.updateRelatedNodes(relatedNodes, relatedEdges, needUpdate);
+    };
     InkLineageManager.prototype.setRelatedNodesAndEdges = function (nodeConfig, needUpdate) {
         if (needUpdate === void 0) { needUpdate = true; }
         this.cachedRelatedNodeConfig = nodeConfig;
         if (!nodeConfig)
             return;
+        var edgeDashVisible = this.rightKeyMenuManager.edgeDashVisible;
         // update related ui
-        var relatedInputs = getRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, EDirection.INPUT);
-        var relatedOutputs = getRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, EDirection.OUTPUT);
+        var relatedInputs = getRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, EDirection.INPUT, edgeDashVisible);
+        var relatedOutputs = getRelatedData(nodeConfig, this.parsedData.nodes, this.parsedData.edges, EDirection.OUTPUT, edgeDashVisible);
         var relatedNodes = _.uniqBy(__spreadArray(__spreadArray([], __read(relatedInputs.relatedNodes), false), __read(relatedOutputs.relatedNodes), false), 'id');
         var relatedEdges = _.uniqBy(__spreadArray(__spreadArray([], __read(relatedInputs.relatedEdges), false), __read(relatedOutputs.relatedEdges), false), 'id');
         this.updateRelatedNodes(relatedNodes, relatedEdges, needUpdate);
@@ -342,7 +551,8 @@ var InkLineageManager = /** @class */ (function () {
         return this.edgesMap.get(id);
     };
     InkLineageManager.prototype.resetToolConfig = function () {
-        this.foldLineageManager.resetFoldCheck();
+        var _a;
+        (_a = this.foldLineageManager) === null || _a === void 0 ? void 0 : _a.resetFoldCheck();
         this.rightKeyMenuManager.resetEdgeDashVisible();
         this.rightKeyMenuManager.resetOnlyShowRelated();
     };
@@ -354,6 +564,8 @@ var InkLineageManager = /** @class */ (function () {
         var _this = this;
         // Clear existing maps
         this.nodesMap.clear();
+        this.relatedColumnsMap.clear();
+        this.childrenColumnsMap.clear();
         this.edgesMap.clear();
         // Populate node map
         data.nodes.forEach(function (node) {
@@ -395,7 +607,8 @@ var InkLineageManager = /** @class */ (function () {
     };
     /**************************************** 工具栏 *******************************/
     InkLineageManager.prototype.refreshToolbarRelatedStatus = function (nodeConfig) {
-        this.toolbarManager.updateOnlyRelatedVisible(nodeConfig);
+        var _a;
+        (_a = this.toolbarManager) === null || _a === void 0 ? void 0 : _a.updateOnlyRelatedVisible(nodeConfig);
     };
     /**************************************** 右键菜单 *******************************/
     // update overview info
@@ -414,6 +627,19 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.updateHotspotModalState = function (data) {
         this.rightKeyMenuManager.updateHotspotModalState(data);
     };
+    InkLineageManager.prototype.updateAggregationTableModalState = function (data) {
+        this.rightKeyMenuManager.updateAggregationTableModalState(data);
+    };
+    InkLineageManager.prototype.getAggregationTableModalState = function () {
+        return this.rightKeyMenuManager.aggregationTableModalState;
+    };
+    InkLineageManager.prototype.updateRelationConditionState = function (data) {
+        var _a, _b;
+        (_b = (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.updateRelationConditionState) === null || _b === void 0 ? void 0 : _b.call(_a, data);
+    };
+    InkLineageManager.prototype.getRelationConditionState = function () {
+        return this.rightKeyMenuManager.relationConditionState;
+    };
     // update direct & indirect table visible
     InkLineageManager.prototype.updateEdgeDashVisible = function (edgeDashVisible) {
         this.rightKeyMenuManager.updateEdgeDashVisible(edgeDashVisible);
@@ -427,21 +653,138 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.getHotspotTipState = function () {
         return this.rightKeyMenuManager.hotspotTipState;
     };
+    InkLineageManager.prototype.getAggregationTableTipState = function () {
+        return this.rightKeyMenuManager.aggregationTableTipState;
+    };
     InkLineageManager.prototype.getOverviewState = function () {
         return this.rightKeyMenuManager.overviewState;
     };
+    InkLineageManager.prototype.setExploreState = function (data) {
+        this.rightKeyMenuManager.setExploreState(data);
+    };
+    InkLineageManager.prototype.getExploreState = function () {
+        return this.rightKeyMenuManager.exploreState;
+    };
     InkLineageManager.prototype.getToolbarState = function () {
-        return this.toolbarManager.state;
+        var _a;
+        return (_a = this === null || this === void 0 ? void 0 : this.toolbarManager) === null || _a === void 0 ? void 0 : _a.state;
+    };
+    InkLineageManager.prototype.setOnlyShowRelatedData = function (onlyShowRelated, onlyShowRelatedDisable) {
+        this.rightKeyMenuManager.onlyShowRelatedDisable = onlyShowRelatedDisable;
+        this.rightKeyMenuManager.onlyShowRelated = onlyShowRelated;
+        this.emit(EEventEnum.ONLY_SHOW_RELATED_DATA_CHANGE);
+    };
+    InkLineageManager.prototype.getOnlyShowRelatedData = function () {
+        return {
+            onlyShowRelated: this.rightKeyMenuManager.onlyShowRelated,
+            onlyShowRelatedDisable: this.rightKeyMenuManager.onlyShowRelatedDisable,
+        };
+    };
+    // 任务
+    InkLineageManager.prototype.clearRelatedColumns = function () {
+        this.parsedData.nodes.forEach(function (n) { return (n.relatedColumns = []); });
+    };
+    // 任务
+    InkLineageManager.prototype.updateHighlightEdges = function (edges) {
+        var _this = this;
+        this.activeEdges.forEach(function (e) {
+            var _a;
+            var edge = (_a = _this.graph) === null || _a === void 0 ? void 0 : _a.edges.get(e.id);
+            if (!edge)
+                return;
+            edge.config.style.stroke = '#B1B1B1';
+            edge.config.style.lineWidth = 1;
+            edge.config.style.zIndex = -1;
+        });
+        // update new active edges
+        this.activeEdges = edges;
+        this.activeEdges.forEach(function (e) {
+            var _a;
+            var edge = (_a = _this.graph) === null || _a === void 0 ? void 0 : _a.edges.get(e.id);
+            if (!edge)
+                return;
+            edge.config.style.stroke = '#FFC04D';
+            edge.config.style.lineWidth = 1;
+            edge.config.style.zIndex = -1;
+        });
+    };
+    // 任务
+    InkLineageManager.prototype.highlightRelatedNodesByStatus = function () {
+        var _this = this;
+        this.relatedNodes.forEach(function (n) {
+            if (!n)
+                return;
+            if (_this.currentClickId.includes(n.id)) {
+                n.style.stroke = '#FFC04D';
+                n.style.fill = '#FFD180';
+                n.style.zIndex = 3;
+            }
+            else if (n.isActive) {
+                n.isActive = true;
+                n.style.stroke = '#3271C9';
+                n.style.fill = '#A9CFFB';
+                n.style.zIndex = 3;
+            }
+            else {
+                n.isRelated = true;
+                n.style.stroke = '#3271C9';
+                if (!n.isActive) {
+                    n.style.fill = '#E4EFFF';
+                }
+                n.style.zIndex = 3;
+            }
+        });
+    };
+    // 任务
+    InkLineageManager.prototype.collapseAllNodes = function () {
+        this.parsedData.nodes.forEach(function (node) { return (node.isOpen = false); });
+    };
+    // 任务
+    InkLineageManager.prototype.determineNodeIsInView = function (node) {
+        var _a, _b;
+        if (!node)
+            return;
+        var target = node.bgRect;
+        var _c = target.getBBox(), height = _c.height, width = _c.width;
+        var _d = __read(target.getPosition(), 2), x = _d[0], y = _d[1];
+        // 画布的宽高
+        var wrapperWidth = this.graph.getWidth();
+        var wrapperHeight = this.graph.getHeight();
+        var camera = this.graph.canvas.getCamera();
+        if (this.rightKeyMenuManager.exploreState.mode === EGraphMode.EXPLORE) {
+            var sidebarWidth = 650;
+            wrapperWidth = wrapperWidth - sidebarWidth;
+        }
+        var _e = __read(mat4.getTranslation(vec3.create(), camera.getOrthoMatrix()), 2), rootX = _e[0], rootY = _e[1];
+        var zoom = this.graph.getZoom();
+        // const zoom = camera.getZoom();
+        var xCenter = (rootX + x + width / 2) * zoom;
+        var yCenter = (rootY + y + height / 2) * zoom;
+        var isVisible = xCenter > 0 &&
+            xCenter < wrapperWidth &&
+            yCenter > 0 &&
+            yCenter < wrapperHeight;
+        if (target.isCulled() || !isVisible) {
+            // this.searchNodeManager.moveTargetToCenter(target);
+            var canvasW = this.graph.getWidth();
+            var canvasH = this.graph.getHeight();
+            (_a = this.graph) === null || _a === void 0 ? void 0 : _a.resetPosition();
+            // this.graph.canvas.getCamera().resetPosition();
+            (_b = this.graph) === null || _b === void 0 ? void 0 : _b.translate(x - canvasW / 2 + TASK_TABLE_WIDTH + width / 2, y - canvasH / 2 + height / 2);
+        }
     };
     /**************************************** 合并链路 *******************************/
     InkLineageManager.prototype.updateFoldStatus = function (checked) {
-        this.foldLineageManager.updateFoldStatus(checked);
+        var _a;
+        (_a = this.foldLineageManager) === null || _a === void 0 ? void 0 : _a.updateFoldStatus(checked);
     };
     InkLineageManager.prototype.unfoldNodeGroup = function (foldGroupKey, saveStatus) {
-        this.foldLineageManager.unfoldNodeGroup(foldGroupKey, saveStatus);
+        var _a;
+        (_a = this.foldLineageManager) === null || _a === void 0 ? void 0 : _a.unfoldNodeGroup(foldGroupKey, saveStatus);
     };
     InkLineageManager.prototype.foldNodeGroup = function (foldGroupKey, saveStatus) {
-        this.foldLineageManager.foldNodeGroup(foldGroupKey, saveStatus);
+        var _a;
+        (_a = this.foldLineageManager) === null || _a === void 0 ? void 0 : _a.foldNodeGroup(foldGroupKey, saveStatus);
     };
     // update related & unrelated table visible
     InkLineageManager.prototype.updateRelatedTableVisible = function (onlyShowRelated, needUpdate) {
@@ -450,13 +793,33 @@ var InkLineageManager = /** @class */ (function () {
     };
     /**************************************** graph *******************************/
     InkLineageManager.prototype.moveTargetToCenter = function (nodeId) {
-        this.graph.moveTargetToCenter(nodeId);
+        if (!nodeId)
+            return;
+        var node = this.parsedData.nodes.find(function (n) { return n.id === nodeId; });
+        if (!node) {
+            console.error("node ".concat(nodeId, " is not found"));
+            return;
+        }
+        // move to center
+        var _a = node.position, x = _a.x, y = _a.y;
+        var _b = node.style, height = _b.height, width = _b.width;
+        var canvasW = this.getCanvasWidth();
+        var canvasH = this.getCanvasHeight();
+        this.resetPosition();
+        this.translateCanvas(x - canvasW / 2 + width / 2, y - canvasH / 2 + height / 2);
+        var _c = this.parsedData, nodes = _c.nodes, edges = _c.edges;
+        var visibleNodes = nodes.filter(function (node) { return node.visible; });
+        var visibleEdges = edges.filter(function (edge) { return edge.visible; });
+        var data = this.handleCulling({ nodes: visibleNodes, edges: visibleEdges });
+        this.graph.setData(data);
+        this.graph.update();
     };
     InkLineageManager.prototype.appendChild = function (child) {
         this.graph.canvas.appendChild(child);
     };
     InkLineageManager.prototype.getMode = function () {
-        return this.graph.mode;
+        var _a;
+        return ((_a = this === null || this === void 0 ? void 0 : this.graph) === null || _a === void 0 ? void 0 : _a.mode) || 'NORMAL';
     };
     InkLineageManager.prototype.canvasResize = function (clientWidth, clientHeight) {
         this.graph.canvas.resize(clientWidth, clientHeight);
@@ -464,6 +827,12 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.getCanvas = function () {
         return this.graph.canvas;
     };
+    InkLineageManager.prototype.getCanvasWidth = function () {
+        return this.graph.getWidth();
+    };
+    InkLineageManager.prototype.getCanvasHeight = function () {
+        return this.graph.getHeight();
+    };
     InkLineageManager.prototype.getNodeInstanceById = function (id) {
         return this.graph.getNodeById(id);
     };
@@ -485,6 +854,13 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.getGraph = function () {
         return this.graph;
     };
+    InkLineageManager.prototype.setGraphData = function (data) {
+        this.graph.setData(data);
+    };
+    InkLineageManager.prototype.translateCanvas = function (x, y) {
+        this.graph.translate(x, y);
+    };
+    InkLineageManager.dataSourceIconMap = {};
     return InkLineageManager;
 }());
 export { InkLineageManager };