@aloudata/ink-lineage 0.0.1-beta.1

package/src/manager/LineageManager.ts

@@ -0,0 +1,680 @@
+import { BigLayout, Graph, ISortConfig } from '@aloudata/ink-graph-new';
+import { DataProcessor, IParsedGraphData, ExpandManager } from './index';
+import {
+  EDashType,
+  EDirection,
+  IColumnConfig,
+  IContextMenuState,
+  IEdgeConfig,
+  IHotspotModalState,
+  INode,
+  INodeConfig,
+  IOverViewBase,
+  IColResBase,
+  TDataBase,
+} from '../types';
+import { getRelatedData } from '../utils';
+import { SearchNodeManager, RightKeyMenuManager, FoldLineageManager } from '.';
+import _ from 'lodash';
+import { ToolbarManager, IToolbarState } from './ToolbarManager';
+import EventEmitter from 'eventemitter3';
+import { CustomNode, DowngradeNode, TableNode, DefaultEdge } 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,
+  BASE_EDGE,
+} from '../constant';
+import { FoldEdge } from '../components/Edges/FoldEdge';
+import { LineageEdge } from '../components/Edges/LineageEdge';
+import { GraphEventManager } from './GraphEventManager';
+
+export interface ILineageManagerConfig {
+  root: string;
+  baseNodeHeight?: number;
+  cullingConfig: {
+    max: number;
+    auto: boolean;
+  }
+
+  [key: string]: any;
+}
+
+export class InkLineageManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> {
+  config: ILineageManagerConfig;
+
+  graph: Graph;
+
+  graphEventManager: GraphEventManager<TTableData, TColumnData>;
+
+  dataProcessor: DataProcessor<TTableData, TColumnData>;
+
+  emitter = new EventEmitter();
+
+  foldLineageManager: FoldLineageManager<TTableData, TColumnData>;
+
+  searchNodeManager: SearchNodeManager<TTableData, TColumnData>;
+
+  rightKeyMenuManager: RightKeyMenuManager<TTableData, TColumnData>;
+
+  tableEventManager: TableEventManager<TTableData, TColumnData>;
+
+  customEventManager: CustomEventManager<TTableData, TColumnData>;
+
+  columnEventManager: ColumnEventManager<TTableData, TColumnData>;
+
+  toolbarManager: ToolbarManager<TTableData, TColumnData>;
+
+  expandManager: ExpandManager<TTableData, TColumnData>;
+
+  activeNodes: (
+    | INodeConfig<TTableData, TColumnData>
+    | IColumnConfig<TColumnData>
+  )[] = [];
+
+  relatedNodes: (
+    | INodeConfig<TTableData, TColumnData>
+    | IColumnConfig<TColumnData>
+  )[] = [];
+
+  relatedEdges: IEdgeConfig[] = [];
+
+  cachedRelatedNodeConfig:
+    | INodeConfig<TTableData, TColumnData>
+    | IColumnConfig<TColumnData>
+    | null = null;
+
+  canvasDomRoot: HTMLElement;
+
+  parsedData: IParsedGraphData<TTableData, TColumnData>;
+
+  nodesMap = new Map<string, INodeConfig<TTableData, TColumnData>>();
+
+  childrenColumnsMap = new Map<string, IColumnConfig<TColumnData>>();
+
+  relatedColumnsMap = new Map<string, IColumnConfig<TColumnData>>();
+
+  edgesMap = new Map<string, IEdgeConfig>();
+
+  constructor(
+    data: IParsedGraphData<TTableData, TColumnData>,
+    config: ILineageManagerConfig,
+  ) {
+    this.config = config;
+
+    this.canvasDomRoot = _.isString(config.root)
+      ? document.getElementById(config.root as string)
+      : (config.root as HTMLElement);
+
+    this.setData(data);
+
+    // 初始化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);
+    }
+  }
+
+  private initGraph() {
+    // init graph by parsed data
+    const graph = new Graph<INodeConfig<TTableData, TColumnData>, IEdgeConfig>({
+      root: this.config.root,
+      layout: {
+        type: LAYOUT_TYPE,
+        sortOptions: this.getSortConfig(),
+      },
+      tools: {
+        zoom: {
+          min: 0.4,
+          max: 2,
+        },
+      },
+      culling: {
+        ...this.config.cullingConfig
+      },
+      baseNodeHeight: this.config.baseNodeHeight,
+    });
+
+    this.graph = graph;
+
+    // register custom node
+    graph.registerNode(BASE_NODE, DowngradeNode);
+    graph.registerNode(TABLE_NODE, TableNode);
+    graph.registerNode(CUSTOM_NODE, CustomNode);
+
+    graph.registerEdge(FOLD_EDGE, FoldEdge);
+    graph.registerEdge(LINEAGE_EDGE, LineageEdge);
+
+    DefaultNode.lineageManager = this;
+    DefaultEdge.lineageManager = this;
+
+    this.render();
+  }
+
+  private initManagers() {
+    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);
+  }
+
+  public updateData(data: IParsedGraphData<TTableData, TColumnData>) {
+    this.setData(data);
+    this.update();
+  }
+
+  on(
+    type: string,
+    listener: EventListenerOrEventListenerObject | ((...args: any[]) => void),
+  ) {
+    this.emitter.on(type, listener as (...args: any[]) => void);
+  }
+
+  once(
+    type: string,
+    listener: EventListenerOrEventListenerObject | ((...args: any[]) => void),
+  ) {
+    this.emitter.once(type, listener as (...args: any[]) => void);
+  }
+
+  emit(event: string, data?: any): void {
+    this.emitter.emit(event, data);
+  }
+
+  off(
+    type: string,
+    listener: EventListenerOrEventListenerObject | ((...args: any[]) => void),
+  ) {
+    this.emitter.off(type, listener as (...args: any[]) => void);
+  }
+
+  render() {
+    if (!this.parsedData) return;
+    const { nodes, edges } = this.parsedData;
+
+    this.refreshExtraStatus();
+
+    const visibleNodes = nodes.filter((node) => node.visible);
+    const visibleEdges = edges.filter((edge) => edge.visible);
+
+    const layoutedData = this.layout(visibleNodes, visibleEdges)
+
+    this.graph.setData(layoutedData);
+
+    this.graph?.render();
+  }
+
+  update(options?: { needLayout?: boolean; shouldGroupNodes?: boolean }) {
+    if (!this.parsedData) return;
+    const { nodes, edges } = this.parsedData;
+
+    const { needLayout = true, shouldGroupNodes = true } = options || {};
+
+    this.refreshExtraStatus();
+
+    const visibleNodes = nodes.filter((node) => node.visible);
+    const visibleEdges = edges.filter((edge) => edge.visible);
+
+    if (needLayout) {
+      const layoutedData = this.layout(visibleNodes, visibleEdges, {
+        shouldGroupNodes,
+      });
+      this.graph?.setData(layoutedData);
+    } else {
+      this.graph?.setData({
+        nodes: visibleNodes,
+        edges: visibleEdges,
+      });
+    }
+
+    this.graph?.update();
+  }
+
+  layout(
+    nodes: INodeConfig<TTableData, TColumnData>[] = this.parsedData.nodes,
+    edges: IEdgeConfig[] = this.parsedData.edges,
+    options?: {
+      shouldGroupNodes?: boolean;
+    },
+  ) {
+    const { shouldGroupNodes = true } = options || {};
+
+    const layoutedData = BigLayout(
+      nodes,
+      edges,
+      this.canvasDomRoot,
+      // todo
+      shouldGroupNodes,
+      this.getSortConfig(),
+      this.graph.mode,
+    );
+
+    return layoutedData;
+  }
+
+
+  destroy() {
+    this.graph?.destroy();
+
+    this.graph = null;
+  }
+
+  setData(data: IParsedGraphData<TTableData, TColumnData>) {
+    this.parsedData = data;
+
+    this.updateDataMaps(this.parsedData);
+  }
+
+  refreshExtraStatus() {
+    this.dataProcessor?.updateNodesAndEdgesVisible(
+      this.parsedData,
+      this.rightKeyMenuManager?.edgeDashVisible,
+      this.rightKeyMenuManager?.onlyShowRelated,
+      this.foldLineageManager?.isFoldChecked,
+    );
+
+    // 刷新相关节点和边的高亮样式（如果打开了间接血缘按钮，那这些间接血缘也需要高亮）
+    this.dataProcessor?.refreshRelatedNodesAndEdges(
+      this.relatedNodes,
+      this.relatedEdges,
+    );
+
+    this.dataProcessor?.updateSideIconVisible(this.parsedData);
+
+    this.dataProcessor?.updateNodeHeight(this.parsedData);
+    this.dataProcessor?.updateColumnPosition(this.parsedData);
+  }
+
+  updateActiveNodes(
+    nodes: (
+      | INodeConfig<TTableData, TColumnData>
+      | IColumnConfig<TColumnData>
+    )[],
+  ) {
+    // reset prev active nodes
+    this.activeNodes?.forEach((n) => {
+      if (!n) return;
+      n.isActive = false;
+      n.style.stroke = '#B1B1B1';
+      n.style.fill = '#fff';
+      n.style.zIndex = 2;
+    });
+
+    // update new active nodes
+    this.activeNodes = nodes;
+    this.activeNodes?.forEach((n) => {
+      if (!n) return;
+      n.isActive = true;
+      n.style.stroke = '#3271C9';
+      n.style.fill = '#A9CFFB';
+      n.style.zIndex = 3;
+    });
+  }
+
+  resetActiveNodes() {
+    this.updateActiveNodes([]);
+  }
+
+  updateRelatedNodes(
+    nodes: (
+      | INodeConfig<TTableData, TColumnData>
+      | IColumnConfig<TColumnData>
+    )[],
+    edges: IEdgeConfig[],
+    needUpdate: boolean = true,
+  ) {
+    // reset prev related nodes
+    this.relatedNodes?.forEach((n) => {
+      if (!n) return;
+
+      n.isRelated = false;
+      n.style.stroke = '#B1B1B1';
+      if (!n.isActive) n.style.fill = '#fff';
+      n.style.zIndex = 1;
+
+      if (n?.tableId) {
+        const tableNode = this.getNodeConfigById(n.tableId as string);
+        if (tableNode) {
+          tableNode.isRelated = false;
+        }
+      }
+    });
+
+    // reset prev related edges
+    this.relatedEdges?.forEach((e) => {
+      if (
+        (e.inFoldLink && this.foldLineageManager.isFoldChecked) ||
+        e.isExtraFoldEdge
+      )
+        return;
+
+      e.style.stroke = '#B1B1B1';
+      e.style.lineWidth = 1;
+      e.style.zIndex = -1;
+    });
+
+    // update new related nodes
+    this.relatedNodes = nodes;
+    this.relatedNodes?.forEach((n) => {
+      if (!n) return;
+
+      n.isRelated = true;
+      n.style.stroke = '#3271C9';
+      if (!n.isActive) n.style.fill = '#E4EFFF';
+      n.style.zIndex = 3;
+
+      if (n?.tableId) {
+        const tableNode = this.getNodeConfigById(n.tableId as string);
+        if (tableNode) {
+          tableNode.isRelated = true;
+        }
+      }
+    });
+
+    // update new related edges
+    this.relatedEdges = edges;
+    this.relatedEdges.forEach((e) => {
+      if (
+        (e.inFoldLink && this.foldLineageManager.isFoldChecked) ||
+        e.isExtraFoldEdge
+      )
+        return;
+
+      e.style.stroke = '#3271C9';
+      e.style.lineWidth = 1.5;
+      e.style.zIndex = 1;
+    });
+
+    if (needUpdate) {
+      this.update({ needLayout: false });
+    }
+  }
+
+  resetRelatedNodes(needUpdate: boolean = true) {
+    this.updateRelatedNodes([], [], needUpdate);
+  }
+
+  resetHighLight() {
+    const prevHighlightNodeConfig = this.getNodeConfigById(
+      this.searchNodeManager.highlightNodeId,
+    );
+
+    if (prevHighlightNodeConfig) {
+      // reset highlight
+      prevHighlightNodeConfig.style.stroke = '#E8E8E8';
+      prevHighlightNodeConfig.style.fill = '#FFF';
+    }
+
+    this.update({ needLayout: false });
+  }
+
+  getNodeInstanceById(id: string) {
+    return this.graph?.getNodeById(id);
+  }
+
+  getNodeOrColumnInstanceById(id: string) {
+    return this.graph?.getAnchorNodeById(id);
+  }
+
+  getEdgeInstanceById(id: string) {
+    return this.graph?.getEdgeById(id);
+  }
+
+  getNodeConfigById(
+    id: string,
+  ): INodeConfig<TTableData, TColumnData> | IColumnConfig<TColumnData> {
+    const tableNodeConfig = this.getTableNodeConfigById(id);
+    const relatedColumnConfig = this.getRelatedColumnConfigById(id);
+    const childrenColumnConfig = this.getChildrenColumnConfigById(id);
+
+    return (
+      tableNodeConfig ||
+      (relatedColumnConfig?.visible
+        ? relatedColumnConfig
+        : childrenColumnConfig)
+    );
+  }
+
+  getTableNodeConfigById(id: string): INodeConfig<TTableData, TColumnData> {
+    return this.nodesMap.get(id);
+  }
+
+  getRelatedColumnConfigById(id: string): IColumnConfig<TColumnData> {
+    return this.relatedColumnsMap.get(id);
+  }
+
+  getChildrenColumnConfigById(id: string): IColumnConfig<TColumnData> {
+    return this.childrenColumnsMap.get(id);
+  }
+
+  setRelatedNodesAndEdges(
+    nodeConfig:
+      | INodeConfig<TTableData, TColumnData>
+      | IColumnConfig<TColumnData>,
+    needUpdate: boolean = true,
+  ) {
+    this.cachedRelatedNodeConfig = nodeConfig;
+
+    if (!nodeConfig) return;
+    // update related ui
+    const relatedInputs = getRelatedData(
+      nodeConfig,
+      this.parsedData.nodes,
+      this.parsedData.edges,
+      EDirection.INPUT,
+    );
+
+    const relatedOutputs = getRelatedData(
+      nodeConfig,
+      this.parsedData.nodes,
+      this.parsedData.edges,
+      EDirection.OUTPUT,
+    );
+
+    const relatedNodes = _.uniqBy(
+      [...relatedInputs.relatedNodes, ...relatedOutputs.relatedNodes],
+      'id',
+    );
+
+    const relatedEdges = _.uniqBy(
+      [...relatedInputs.relatedEdges, ...relatedOutputs.relatedEdges],
+      'id',
+    );
+
+    this.updateRelatedNodes(relatedNodes, relatedEdges, needUpdate);
+  }
+
+  getEdgeConfigById(id: string): IEdgeConfig {
+    return this.edgesMap.get(id);
+  }
+
+  resetToolConfig() {
+    this.foldLineageManager.resetFoldCheck();
+    this.rightKeyMenuManager.resetEdgeDashVisible();
+    this.rightKeyMenuManager.resetOnlyShowRelated();
+  }
+
+  // Add method to update the maps
+  updateDataMaps(data: IParsedGraphData<TTableData, TColumnData>) {
+    // Clear existing maps
+    this.nodesMap.clear();
+    this.edgesMap.clear();
+
+    // Populate node map
+    data.nodes.forEach((node) => {
+      this.nodesMap.set(node.id, node);
+
+      // Add children to the map as well
+      node.children?.forEach((child) => {
+        this.childrenColumnsMap.set(child.id, child);
+      });
+
+      // Add related columns to the map
+      node.relatedColumns?.forEach((col) => {
+        this.relatedColumnsMap.set(col.id, col);
+      });
+    });
+
+    // Populate edge map
+    data.edges.forEach((edge) => {
+      this.edgesMap.set(edge.id, edge);
+    });
+  }
+
+  clearAllTableRelatedColumns(nodeConfig: IColumnConfig<TColumnData>) {
+    if (!nodeConfig) return;
+
+    if (nodeConfig.isStartNode) {
+      this.parsedData.nodes.forEach((node) => {
+        node.relatedColumns = [];
+      });
+    }
+  }
+
+  // TODOmuzi 后续这个方法要放到底层去
+  resetPosition() {
+    if (this.graph.mode === 'NORMAL') {
+      this.graph.resetPosition();
+    }
+  }
+
+  /**************************************** 扩展 *******************************/
+  get isExpanding() {
+    return this.expandManager?.isExpanding;
+  }
+
+  showExpandLoading(target: INode, direction: EDirection) {
+    this.expandManager?.showExpandLoading(target, direction);
+  }
+
+  hideExpandLoading() {
+    this.expandManager?.hideExpandLoading();
+  }
+
+  /**************************************** 全局搜索 *******************************/
+  searchNode(input: string) {
+    this.searchNodeManager?.searchNode(input);
+  }
+
+  /**************************************** 工具栏 *******************************/
+  refreshToolbarRelatedStatus(
+    nodeConfig:
+      | INodeConfig<TTableData, TColumnData>
+      | IColumnConfig<TColumnData>,
+  ) {
+    this.toolbarManager?.updateOnlyRelatedVisible(nodeConfig);
+  }
+
+  /**************************************** 右键菜单 *******************************/
+  // update overview info
+  setOverview(data: Partial<IOverViewBase>) {
+    this.rightKeyMenuManager?.setOverview(data);
+  }
+
+  // show context menu
+  showContextMenu(data: IContextMenuState) {
+    this.rightKeyMenuManager?.showContextMenu(data);
+  }
+
+  // hide context menu
+  hideContextMenu() {
+    this.rightKeyMenuManager?.hideContextMenu();
+  }
+
+  // show hotspot modal
+  updateHotspotModalState(data: IHotspotModalState) {
+    this.rightKeyMenuManager.updateHotspotModalState(data);
+  }
+
+  // update direct & indirect table visible
+  updateEdgeDashVisible(edgeDashVisible: EDashType) {
+    this.rightKeyMenuManager?.updateEdgeDashVisible(edgeDashVisible);
+  }
+
+  getHotspotModalState() {
+    return this.rightKeyMenuManager?.hotspotModalState;
+  }
+
+  getContextMenuState() {
+    return this.rightKeyMenuManager?.contextMenuState;
+  }
+
+  getHotspotTipState() {
+    return this.rightKeyMenuManager?.hotspotTipState;
+  }
+
+  getOverviewState() {
+    return this.rightKeyMenuManager?.overviewState;
+  }
+
+  getToolbarState(): IToolbarState | undefined {
+    return this.toolbarManager?.state;
+  }
+
+  /**************************************** 合并链路 *******************************/
+  updateFoldStatus(checked: boolean) {
+    this.foldLineageManager?.updateFoldStatus(checked);
+  }
+
+  unfoldNodeGroup(foldGroupKey: string, saveStatus?: boolean) {
+    this.foldLineageManager?.unfoldNodeGroup(foldGroupKey, saveStatus);
+  }
+
+  foldNodeGroup(foldGroupKey: string, saveStatus?: boolean) {
+    this.foldLineageManager?.foldNodeGroup(foldGroupKey, saveStatus);
+  }
+
+  // update related & unrelated table visible
+  updateRelatedTableVisible(
+    onlyShowRelated: boolean,
+    needUpdate: boolean = true,
+  ) {
+    this.rightKeyMenuManager?.updateRelatedTableVisible(
+      onlyShowRelated,
+      needUpdate,
+    );
+  }
+
+  getSortConfig(): ISortConfig[] {
+    return [
+      {
+        field: 'data.typeCode',
+        transform: (value) =>
+          this.config.orderList?.get(value) ?? Number.MAX_SAFE_INTEGER,
+      },
+      {
+        field: 'data.name',
+        transform: (value) => String(value || '').toLowerCase(),
+        defaultValue: '',
+      },
+    ];
+  }
+}