@aloudata/ink-lineage 0.0.1-beta.3 → 0.0.1-beta.31

package/dist/manager/LineageManager.js

@@ -1,22 +1,34 @@
 import { __assign, __read, __spreadArray } from "tslib";
-import { BigLayout, Graph } from '@aloudata/ink-graph-new';
-import { DataProcessor, ExpandManager } from './index';
-import { EDirection, } from '../types';
-import { getRelatedData } from '../utils';
-import { SearchNodeManager, RightKeyMenuManager, FoldLineageManager } from '.';
+import { BigLayout, Graph, isNodeVisible, } from '@aloudata/ink-graph-new';
+import { TableDataProcessor, ExpandManager, TaskGraphEventManager, ScheduleDataProcessor, } 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, DowngradeNode, 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, LAYOUT_TYPE, 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, } from '../constant';
 import { FoldEdge } from '../components/Edges/FoldEdge';
 import { LineageEdge } from '../components/Edges/LineageEdge';
-import { GraphEventManager } from './GraphEventManager';
+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, 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';
 var InkLineageManager = /** @class */ (function () {
     function InkLineageManager(data, config) {
         this.emitter = new EventEmitter();
+        this.activeEdges = [];
         this.activeNodes = [];
         this.relatedNodes = [];
         this.relatedEdges = [];
@@ -25,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)
@@ -33,59 +49,115 @@ var InkLineageManager = /** @class */ (function () {
         // 初始化managers
         this.initManagers();
         this.initGraph();
-        if (this.graph) {
-            this.dataProcessor.init(this.graph);
-            this.foldLineageManager.init(this.graph);
-            this.searchNodeManager.init(this.graph);
-            this.rightKeyMenuManager.init(this.graph);
-            this.toolbarManager.init(this.graph);
-            this.expandManager.init(this.graph);
-            this.graphEventManager.init(this.graph);
+        this.graphEventManager.init();
+        if ([ELineageType.TABLE, ELineageType.SCHEDULE].includes(this.config.lineageType)) {
+            this.expandManager.init();
         }
     }
+    Object.defineProperty(InkLineageManager.prototype, "isExpanding", {
+        get: function () {
+            var _a;
+            return (_a = this.expandManager) === null || _a === void 0 ? void 0 : _a.isExpanding;
+        },
+        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 () {
-        // init graph by parsed data
+        var _this = this;
+        var _a = this.config, root = _a.root, cullingConfig = _a.cullingConfig, layoutConfig = _a.layoutConfig, zoomConfig = _a.zoomConfig;
         var graph = new Graph({
-            root: this.config.root,
-            layout: {
-                type: LAYOUT_TYPE,
-                sortOptions: this.getSortConfig(),
-            },
+            root: root,
+            culling: cullingConfig,
+            layout: layoutConfig,
+            minimap: { enable: this.parsedData.nodes.length > 0 },
             tools: {
-                zoom: {
-                    min: 0.4,
-                    max: 2,
+                zoom: __assign(__assign({}, zoomConfig), { onZoomChange: function (mode) {
+                        if (_this.config.lineageType === ELineageType.TABLE) {
+                            onZoomChange(mode, _this);
+                        }
+                    } }),
+                resetViewport: {
+                    visible: true,
+                    onResetViewportChange: function () {
+                        _this.update({ shouldGroupNodes: false });
+                    },
+                },
+            },
+            canvasCallback: {
+                onDrop: function () {
+                    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 () {
+                    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 });
+                    }
                 },
             },
-            culling: __assign({}, this.config.cullingConfig),
-            baseNodeHeight: this.config.baseNodeHeight,
         });
         this.graph = graph;
         // register custom node
-        graph.registerNode(BASE_NODE, DowngradeNode);
+        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);
         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);
-    };
-    InkLineageManager.prototype.updateData = function (data) {
-        this.setData(data);
-        this.update();
+        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);
@@ -99,49 +171,117 @@ var InkLineageManager = /** @class */ (function () {
     InkLineageManager.prototype.off = function (type, listener) {
         this.emitter.off(type, listener);
     };
-    InkLineageManager.prototype.render = function () {
+    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 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.getState = function () {
         var _a;
-        if (!this.parsedData)
-            return;
-        var _b = this.parsedData, nodes = _b.nodes, edges = _b.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);
-        this.graph.setData(layoutedData);
-        (_a = this.graph) === null || _a === void 0 ? void 0 : _a.render();
+        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.update = function (options) {
-        var _a, _b, _c;
+    InkLineageManager.prototype.render = function (isUpdate, isInit) {
+        var _a, _b;
+        if (isUpdate === void 0) { isUpdate = false; }
         if (!this.parsedData)
             return;
-        var _d = this.parsedData, nodes = _d.nodes, edges = _d.edges;
-        var _e = options || {}, _f = _e.needLayout, needLayout = _f === void 0 ? true : _f, _g = _e.shouldGroupNodes, shouldGroupNodes = _g === void 0 ? true : _g;
         this.refreshExtraStatus();
-        var visibleNodes = nodes.filter(function (node) { return node.visible; });
-        var visibleEdges = edges.filter(function (edge) { return edge.visible; });
-        if (needLayout) {
-            var layoutedData = this.layout(visibleNodes, visibleEdges, {
-                shouldGroupNodes: shouldGroupNodes,
-            });
-            (_a = this.graph) === null || _a === void 0 ? void 0 : _a.setData(layoutedData);
+        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 layoutData = this.layout(visibleNodes, visibleEdges);
+            this.updateDataMaps(layoutData);
+            var data = this.handleCulling(layoutData);
+            this.graph.setData(data);
+        }
+        if (isUpdate) {
+            (_a = this.graph) === null || _a === void 0 ? void 0 : _a.update();
         }
         else {
-            (_b = this.graph) === null || _b === void 0 ? void 0 : _b.setData({
-                nodes: visibleNodes,
-                edges: visibleEdges,
-            });
+            (_b = this.graph) === null || _b === void 0 ? void 0 : _b.render();
         }
-        (_c = this.graph) === null || _c === void 0 ? void 0 : _c.update();
+        if (this.config.lineageType === ELineageType.TASK && isInit) {
+            this.taskTranslate();
+        }
+        this.resetLayoutControl();
     };
-    InkLineageManager.prototype.layout = function (nodes, edges, options) {
-        if (nodes === void 0) { nodes = this.parsedData.nodes; }
-        if (edges === void 0) { edges = this.parsedData.edges; }
-        var _a = (options || {}).shouldGroupNodes, shouldGroupNodes = _a === void 0 ? true : _a;
-        var layoutedData = BigLayout(nodes, edges, this.canvasDomRoot, 
-        // todo
-        shouldGroupNodes, this.getSortConfig(), this.graph.mode);
-        return layoutedData;
+    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;
@@ -149,17 +289,80 @@ 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);
     };
-    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.updateData = function (data) {
+        this.setData(data);
+        this.update();
+    };
+    // 裁剪逻辑
+    InkLineageManager.prototype.handleCulling = function (data) {
+        var _this = this;
+        var _a, _b;
+        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();
+            // set nodes & edges
+            var nodesConfigMap_1 = new Map();
+            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;
+            });
+        }
+        return {
+            nodes: nodesConfig,
+            edges: edgesConfig,
+        };
+    };
+    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, _f;
+        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);
+            (_f = this.dataProcessor) === null || _f === void 0 ? void 0 : _f.updateSideIconVisible(this.parsedData);
+            updateNodeHeight(this.parsedData);
+            updateColumnPosition(this.parsedData);
+        }
     };
     InkLineageManager.prototype.updateActiveNodes = function (nodes) {
         var _a, _b;
@@ -191,8 +394,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';
@@ -207,13 +411,11 @@ var InkLineageManager = /** @class */ (function () {
             }
         });
         // reset prev related edges
-        (_b = this.relatedEdges) === null || _b === void 0 ? void 0 : _b.forEach(function (e) {
-            if ((e.inFoldLink && _this.foldLineageManager.isFoldChecked) ||
-                e.isExtraFoldEdge)
+        (_b = this.relatedEdges) === null || _b === void 0 ? void 0 : _b.forEach(function (edge) {
+            var isFold = edge.inFoldLink && _this.foldLineageManager.isFoldChecked;
+            if (isFold || edge.isExtraFoldEdge)
                 return;
-            e.style.stroke = '#B1B1B1';
-            e.style.lineWidth = 1;
-            e.style.zIndex = -1;
+            _this.resetEdgeStyle(edge);
         });
         // update new related nodes
         this.relatedNodes = nodes;
@@ -234,18 +436,24 @@ var InkLineageManager = /** @class */ (function () {
         });
         // update new related edges
         this.relatedEdges = edges;
-        this.relatedEdges.forEach(function (e) {
-            if ((e.inFoldLink && _this.foldLineageManager.isFoldChecked) ||
-                e.isExtraFoldEdge)
+        this.relatedEdges.forEach(function (edge) {
+            var isFold = edge.inFoldLink && _this.foldLineageManager.isFoldChecked;
+            if (isFold || edge.isExtraFoldEdge)
                 return;
-            e.style.stroke = '#3271C9';
-            e.style.lineWidth = 1.5;
-            e.style.zIndex = 1;
+            edge.style.stroke = '#3271C9';
+            edge.style.lineWidth = 1.5;
+            edge.style.zIndex = 1;
         });
         if (needUpdate) {
-            this.update({ needLayout: false });
+            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);
@@ -257,19 +465,7 @@ var InkLineageManager = /** @class */ (function () {
             prevHighlightNodeConfig.style.stroke = '#E8E8E8';
             prevHighlightNodeConfig.style.fill = '#FFF';
         }
-        this.update({ needLayout: false });
-    };
-    InkLineageManager.prototype.getNodeInstanceById = function (id) {
-        var _a;
-        return (_a = this.graph) === null || _a === void 0 ? void 0 : _a.getNodeById(id);
-    };
-    InkLineageManager.prototype.getNodeOrColumnInstanceById = function (id) {
-        var _a;
-        return (_a = this.graph) === null || _a === void 0 ? void 0 : _a.getAnchorNodeById(id);
-    };
-    InkLineageManager.prototype.getEdgeInstanceById = function (id) {
-        var _a;
-        return (_a = this.graph) === null || _a === void 0 ? void 0 : _a.getEdgeById(id);
+        this.update({ shouldLayout: false });
     };
     InkLineageManager.prototype.getNodeConfigById = function (id) {
         var tableNodeConfig = this.getTableNodeConfigById(id);
@@ -289,6 +485,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;
@@ -305,15 +542,21 @@ 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();
     };
+    InkLineageManager.prototype.setChildrenColumnsMap = function (id, column) {
+        this.childrenColumnsMap.set(id, column);
+    };
     // Add method to update the maps
     InkLineageManager.prototype.updateDataMaps = function (data) {
         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) {
@@ -342,33 +585,16 @@ var InkLineageManager = /** @class */ (function () {
             });
         }
     };
-    // TODOmuzi 后续这个方法要放到底层去
-    InkLineageManager.prototype.resetPosition = function () {
-        if (this.graph.mode === 'NORMAL') {
-            this.graph.resetPosition();
-        }
-    };
-    Object.defineProperty(InkLineageManager.prototype, "isExpanding", {
-        /**************************************** 扩展 *******************************/
-        get: function () {
-            var _a;
-            return (_a = this.expandManager) === null || _a === void 0 ? void 0 : _a.isExpanding;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**************************************** 扩展 *******************************/
     InkLineageManager.prototype.showExpandLoading = function (target, direction) {
-        var _a;
-        (_a = this.expandManager) === null || _a === void 0 ? void 0 : _a.showExpandLoading(target, direction);
+        this.expandManager.showExpandLoading(target, direction);
     };
     InkLineageManager.prototype.hideExpandLoading = function () {
-        var _a;
-        (_a = this.expandManager) === null || _a === void 0 ? void 0 : _a.hideExpandLoading();
+        this.expandManager.hideExpandLoading();
     };
     /**************************************** 全局搜索 *******************************/
     InkLineageManager.prototype.searchNode = function (input) {
-        var _a;
-        (_a = this.searchNodeManager) === null || _a === void 0 ? void 0 : _a.searchNode(input);
+        this.searchNodeManager.searchNode(input);
     };
     /**************************************** 工具栏 *******************************/
     InkLineageManager.prototype.refreshToolbarRelatedStatus = function (nodeConfig) {
@@ -378,18 +604,15 @@ var InkLineageManager = /** @class */ (function () {
     /**************************************** 右键菜单 *******************************/
     // update overview info
     InkLineageManager.prototype.setOverview = function (data) {
-        var _a;
-        (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.setOverview(data);
+        this.rightKeyMenuManager.setOverview(data);
     };
     // show context menu
     InkLineageManager.prototype.showContextMenu = function (data) {
-        var _a;
-        (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.showContextMenu(data);
+        this.rightKeyMenuManager.showContextMenu(data);
     };
     // hide context menu
     InkLineageManager.prototype.hideContextMenu = function () {
-        var _a;
-        (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.hideContextMenu();
+        this.rightKeyMenuManager.hideContextMenu();
     };
     // show hotspot modal
     InkLineageManager.prototype.updateHotspotModalState = function (data) {
@@ -397,28 +620,122 @@ var InkLineageManager = /** @class */ (function () {
     };
     // update direct & indirect table visible
     InkLineageManager.prototype.updateEdgeDashVisible = function (edgeDashVisible) {
-        var _a;
-        (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.updateEdgeDashVisible(edgeDashVisible);
+        this.rightKeyMenuManager.updateEdgeDashVisible(edgeDashVisible);
     };
     InkLineageManager.prototype.getHotspotModalState = function () {
-        var _a;
-        return (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.hotspotModalState;
+        return this.rightKeyMenuManager.hotspotModalState;
     };
     InkLineageManager.prototype.getContextMenuState = function () {
-        var _a;
-        return (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.contextMenuState;
+        return this.rightKeyMenuManager.contextMenuState;
     };
     InkLineageManager.prototype.getHotspotTipState = function () {
-        var _a;
-        return (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.hotspotTipState;
+        return this.rightKeyMenuManager.hotspotTipState;
     };
     InkLineageManager.prototype.getOverviewState = function () {
-        var _a;
-        return (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.overviewState;
+        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 () {
         var _a;
-        return (_a = this.toolbarManager) === null || _a === void 0 ? void 0 : _a.state;
+        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 = __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) {
@@ -435,23 +752,49 @@ var InkLineageManager = /** @class */ (function () {
     };
     // update related & unrelated table visible
     InkLineageManager.prototype.updateRelatedTableVisible = function (onlyShowRelated, needUpdate) {
-        var _a;
         if (needUpdate === void 0) { needUpdate = true; }
-        (_a = this.rightKeyMenuManager) === null || _a === void 0 ? void 0 : _a.updateRelatedTableVisible(onlyShowRelated, needUpdate);
+        this.rightKeyMenuManager.updateRelatedTableVisible(onlyShowRelated, needUpdate);
     };
-    InkLineageManager.prototype.getSortConfig = function () {
-        var _this = this;
-        return [
-            {
-                field: 'data.typeCode',
-                transform: function (value) { var _a, _b; return (_b = (_a = _this.config.orderList) === null || _a === void 0 ? void 0 : _a.get(value)) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER; },
-            },
-            {
-                field: 'data.name',
-                transform: function (value) { return String(value || '').toLowerCase(); },
-                defaultValue: '',
-            },
-        ];
+    /**************************************** graph *******************************/
+    InkLineageManager.prototype.moveTargetToCenter = function (nodeId) {
+        this.graph.moveTargetToCenter(nodeId);
+    };
+    InkLineageManager.prototype.appendChild = function (child) {
+        this.graph.canvas.appendChild(child);
+    };
+    InkLineageManager.prototype.getMode = function () {
+        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);
+    };
+    InkLineageManager.prototype.getCanvas = function () {
+        return this.graph.canvas;
+    };
+    InkLineageManager.prototype.getNodeInstanceById = function (id) {
+        return this.graph.getNodeById(id);
+    };
+    InkLineageManager.prototype.getNodeOrColumnInstanceById = function (id) {
+        return this.graph.getAnchorNodeById(id);
+    };
+    InkLineageManager.prototype.getEdgeInstanceById = function (id) {
+        return this.graph.getEdgeById(id);
+    };
+    InkLineageManager.prototype.resetPosition = function () {
+        this.graph.resetPosition();
+    };
+    InkLineageManager.prototype.graphUpdate = function () {
+        this.graph.update();
+    };
+    InkLineageManager.prototype.graphRender = function () {
+        this.graph.render();
+    };
+    InkLineageManager.prototype.getGraph = function () {
+        return this.graph;
+    };
+    InkLineageManager.prototype.setGraphData = function (data) {
+        this.graph.setData(data);
     };
     return InkLineageManager;
 }());