@aloudata/ink-lineage 0.0.1-beta.2 → 0.0.1-beta.21

package/src/manager/LineageManager.ts

@@ -1,680 +0,0 @@
-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: '',
-      },
-    ];
-  }
-}