@aloudata/ink-lineage 0.0.1-beta.9 → 0.0.2-beta.4

package/dist/manager/LineageManager.js

@@ -1,24 +1,33 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import { BigLayout, Graph, isNodeVisible, } from '@aloudata/ink-graph-new';
-import { DataProcessor, ExpandManager } from './index';
-import { EDirection, } from '../types';
-import { getRelatedData, getTableIdByColumnId } from '../utils';
-import { SearchNodeManager, RightKeyMenuManager, FoldLineageManager } from '.';
+import { TableDataProcessor, ExpandManager, TaskGraphEventManager, } 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, } 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, } 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 { onZoomChange } from '../utils/manager';
+import { mat3ToMat4 } from '../utils/matrix';
+import { TableGraphEventManager } from './TableGraphEventManager';
+import { hideEdgeTypes, 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 { TaskDataProcessor } from './TaskDataProcessor';
+import { TaskRightKeyMenuManager } from './TaskRightKeyMenuManager';
+import { mat4 } from 'gl-matrix';
+import { BigDagre } from '../BigDagre';
+import { AssetBaseNode } from '../components/Nodes/Table/AssetBaseNode';
 var InkLineageManager = /** @class */ (function () {
     function InkLineageManager(data, config) {
         this.emitter = new EventEmitter();
+        this.activeEdges = [];
         this.activeNodes = [];
         this.relatedNodes = [];
         this.relatedEdges = [];
@@ -39,8 +48,8 @@ var InkLineageManager = /** @class */ (function () {
         // 初始化managers
         this.initManagers();
         this.initGraph();
-        if (this.graph) {
-            this.graphEventManager.init();
+        this.graphEventManager.init();
+        if (this.config.lineageType === ELineageType.TABLE) {
             this.expandManager.init();
         }
     }
@@ -52,50 +61,84 @@ 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 {
+            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);
+        }
+    };
     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 _a = this.config, root = _a.root, cullingConfig = _a.cullingConfig, layoutConfig = _a.layoutConfig, zoomConfig = _a.zoomConfig, fontList = _a.fontList;
         var graph = new Graph({
             root: root,
             culling: cullingConfig,
             layout: layoutConfig,
+            fontList: fontList,
+            minimap: { enable: this.parsedData.nodes.length > 0 },
             tools: {
                 zoom: __assign(__assign({}, zoomConfig), { onZoomChange: function (mode) {
-                        onZoomChange(mode, _this);
+                        if (_this.config.lineageType === ELineageType.TABLE) {
+                            onZoomChange(mode, _this);
+                        }
                     } }),
+                resetViewport: {
+                    visible: true,
+                    onResetViewportChange: function () {
+                        _this.update({ shouldGroupNodes: false });
+                    },
+                },
             },
             canvasCallback: {
                 onDrop: function () {
-                    _this.update({ shouldGroupNodes: false });
+                    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({ shouldGroupNodes: false });
+                    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.registerEdge(FOLD_EDGE, FoldEdge);
         graph.registerEdge(LINEAGE_EDGE, LineageEdge);
         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);
+        graph.canvas.whenReady().then(function () { return _this.render(false, true); });
     };
     InkLineageManager.prototype.on = function (type, listener) {
         this.emitter.on(type, listener);
@@ -110,28 +153,70 @@ var InkLineageManager = /** @class */ (function () {
         this.emitter.off(type, listener);
     };
     InkLineageManager.prototype.layout = function (nodes, edges) {
-        var _a, _b;
+        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, {
-            shouldGroupNodes: this.layoutControl.shouldGroupNodes,
-            sortConfig: (_b = (_a = this.config.layoutConfig) === null || _a === void 0 ? void 0 : _a.sortRules) !== null && _b !== void 0 ? _b : [],
-            mode: this.graph.mode,
-        });
-        return layoutedData || { nodes: [], edges: [] };
+        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) {
+    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;
         if (isUpdate === void 0) { isUpdate = false; }
         if (!this.parsedData)
             return;
-        this.refreshExtraStatus();
+        if (this.config.lineageType === ELineageType.TABLE) {
+            this.refreshExtraStatus();
+        }
+        else {
+            this.taskRefreshExtraStatus();
+        }
         if (this.layoutControl.shouldLayout) {
             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 layoutedData = this.layout(visibleNodes, visibleEdges);
-            var data = this.handleCulling(layoutedData);
+            var layoutData = this.layout(visibleNodes, visibleEdges);
+            var data = this.handleCulling(layoutData);
             this.graph.setData(data);
         }
         if (isUpdate) {
@@ -140,8 +225,37 @@ var InkLineageManager = /** @class */ (function () {
         else {
             (_b = this.graph) === null || _b === void 0 ? void 0 : _b.render();
         }
+        if (this.config.lineageType === ELineageType.TASK && isInit) {
+            this.taskTranslate();
+        }
         this.resetLayoutControl();
     };
+    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, _d;
+            if (!node.config.visible)
+                return;
+            var target = node.bgGroup;
+            var x = target.getPosition().x;
+            var curRightNodeX = (_d = (_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)) === null || _d === void 0 ? void 0 : _d.x;
+            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 = target.getPosition(), x = _g.x, y = _g.y;
+        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);
@@ -160,6 +274,16 @@ var InkLineageManager = /** @class */ (function () {
         this.graph = null;
     };
     InkLineageManager.prototype.setData = function (data) {
+        if (this.getMode() === 'SIMPLE' &&
+            this.config.lineageType === ELineageType.TABLE) {
+            data.edges.forEach(function (edge) {
+                if (hideEdgeTypes.includes(edge.data.relationTypeCode)) {
+                    edge.visible = false;
+                    edge.canBeFold = true;
+                    edge.isFolded = true;
+                }
+            });
+        }
         this.parsedData = data;
         this.updateDataMaps(this.parsedData);
     };
@@ -171,48 +295,49 @@ 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;
         if (culling) {
-            var orthoMatrix_1 = this.getCanvas().getCamera().getOrthoMatrix();
+            // TODO: 节点裁剪逻辑优化
+            var orthoMatrix_1 = this.getCanvas()
+                .getContext()
+                .cameraManager.getTransform()
+                .getLocalMatrix();
             // 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) {
-                var isVisible = isNodeVisible(node, _this.canvasDomRoot.clientWidth, _this.canvasDomRoot.clientHeight, orthoMatrix_1);
+            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, mat3ToMat4(mat4.create(), 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.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);
+        // 刷新相关节点和边的高亮样式（如果打开了间接血缘按钮，那这些间接血缘也需要高亮）
+        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, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         (_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);
         (_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);
+        updateNodeHeight(this.parsedData);
+        updateColumnPosition(this.parsedData);
     };
     InkLineageManager.prototype.updateActiveNodes = function (nodes) {
         var _a, _b;
@@ -244,8 +369,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.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';
@@ -264,9 +390,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;
@@ -299,6 +423,12 @@ var InkLineageManager = /** @class */ (function () {
             this.update({ shouldLayout: false });
         }
     };
+    InkLineageManager.prototype.resetEdgeStyle = function (edge) {
+        edge.type = this.getMode() === 'SIMPLE' ? BASE_EDGE : LINEAGE_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);
@@ -330,6 +460,47 @@ 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;
@@ -346,7 +517,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();
     };
@@ -358,6 +530,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) {
@@ -399,7 +573,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
@@ -434,18 +609,117 @@ var InkLineageManager = /** @class */ (function () {
     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.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 = target.getPosition(), x = _d.x, y = _d.y;
+        // 画布的宽高
+        var wrapperWidth = this.graph.getWidth();
+        var wrapperHeight = this.graph.getHeight();
+        if (this.rightKeyMenuManager.exploreState.mode === EGraphMode.EXPLORE) {
+            var sidebarWidth = 650;
+            wrapperWidth = wrapperWidth - sidebarWidth;
+        }
+        var _e = this.graph.canvas.getTranslation(), rootX = _e.x, rootY = _e.y;
+        var zoom = this.graph.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 (!isVisible) {
+            var canvasW = this.graph.getWidth();
+            var canvasH = this.graph.getHeight();
+            (_a = this.graph) === null || _a === void 0 ? void 0 : _a.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) {
@@ -457,10 +731,11 @@ var InkLineageManager = /** @class */ (function () {
         this.graph.moveTargetToCenter(nodeId);
     };
     InkLineageManager.prototype.appendChild = function (child) {
-        this.graph.canvas.appendChild(child);
+        this.graph.canvas.add(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);