@aloudata/ink-lineage 0.0.1-beta.1

package/src/manager/nodeManager/ColumnEventManager.ts

@@ -0,0 +1,467 @@
+import { getNodeHeight, runtime } from '@aloudata/ink-graph-new';
+import { InkLineageManager, IParsedGraphData } from '..';
+import { ColumnNode, TableNode } from '../../components';
+import { COL_HEIGHT } from '../../constant';
+import {
+  EDashType,
+  EDirection,
+  EElementType,
+  EEntityType,
+  EExpandType,
+  EOverviewType,
+  IColResBase,
+  TDataBase,
+  IColumnConfig,
+  INodeConfig,
+  EColumnEvents,
+  EEventEnum,
+} from '../../types';
+import { getRelatedData } from '../../utils';
+import { BaseEventManager } from './BaseEventManager';
+import _ from 'lodash';
+
+export class ColumnEventManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends BaseEventManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager, EColumnEvents);
+    this.registerExtraEvents();
+  }
+
+  registerExtraEvents(): void {
+    this.lineageManager.on(EColumnEvents.CLICK, (node: ColumnNode) => {
+      this.onClick(node);
+    });
+  }
+
+  onClick(node: ColumnNode) {
+    const onlyShowRelated =
+      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+
+    // hide context menu
+    this.lineageManager?.hideContextMenu();
+
+    if (node.isForbidden) return;
+
+    // show detail panel
+    this.showDetailPanel(node);
+
+    if (!onlyShowRelated) {
+      // update active nodes
+      this.lineageManager?.updateActiveNodes([node.config as IColumnConfig<TColumnData>]);
+
+      this.lineageManager?.setRelatedNodesAndEdges(node.config as IColumnConfig<TColumnData>);
+
+      // refresh toolbar related status
+      this.lineageManager?.refreshToolbarRelatedStatus(node.config as IColumnConfig<TColumnData>);
+    }
+  }
+
+  onLeftIconClick(node: ColumnNode) {
+    if (this.lineageManager.isExpanding) return;
+
+    const iconType = (node.leftIcon as any).iconType as EExpandType;
+    if (iconType === EExpandType.EXPAND) {
+      this.handleExpand({ direction: EDirection.INPUT, node });
+    }
+
+    if (iconType === EExpandType.FOLD) {
+      this.handleFold(EDirection.INPUT, node);
+    }
+  }
+
+  onRightIconClick(node: ColumnNode) {
+    if (this.lineageManager.isExpanding) return;
+
+    const iconType = (node.rightIcon as any).iconType as EExpandType;
+    if (iconType === EExpandType.EXPAND) {
+      this.handleExpand({ direction: EDirection.OUTPUT, node });
+    }
+
+    if (iconType === EExpandType.FOLD) {
+      this.handleFold(EDirection.OUTPUT, node);
+    }
+  }
+
+  onContextMenu(node: ColumnNode) {
+    const { isStartNode, id } = node.config;
+    const { name } = node.config.data;
+    const translate = runtime.sceneGraphManager.getPosition(node.colText);
+    const [translateX, translateY] = translate;
+    const x = 70 + translateX;
+    const y = Number(node.colText.style.y) + translateY - 20;
+
+    this.lineageManager.showContextMenu({
+      id,
+      visible: true,
+      x,
+      y,
+      type: EElementType.COLUMN,
+      typeCode: 'Table',
+      isStartNode,
+      parentGuid: node.config.tableId || '',
+      parentName: node.config.tableName || '',
+      name,
+    });
+  }
+
+  showDetailPanel = (node: ColumnNode) => {
+    // 将data同步到atom，触发更新
+    const { userClosed, visible } =
+      this.lineageManager.rightKeyMenuManager.overviewState;
+    let overviewType = EOverviewType.COLUMN;
+
+    if (node.node?.config?.data?.type === EEntityType.TEMP_TABLE) {
+      overviewType = EOverviewType.TEMP_COLUMN;
+    }
+
+    this.lineageManager.setOverview({
+      ...this.lineageManager.rightKeyMenuManager.overviewState,
+      targetId: node.config.id,
+      type: overviewType,
+      visible: !(userClosed && !visible),
+      initial: true,
+      caliberIsHighlight: false,
+      taskIsHighlight: false,
+      // tableName: this.props.data.parent._data_.name,
+    });
+  };
+
+  handleFold(direction: EDirection, node: ColumnNode) {
+    if (this.lineageManager?.foldLineageManager.isFoldChecked) {
+      this.lineageManager?.foldLineageManager?.unfoldNodes();
+      this.lineageManager?.update();
+    }
+
+    this.lineageManager?.resetActiveNodes();
+
+    const { nodes, edges } = this.lineageManager.parsedData;
+
+    // find related nodes and edges
+    const relatedNodesAndEdges = getRelatedData<TTableData, TColumnData>(
+      node.config as IColumnConfig<TColumnData>,
+      nodes,
+      edges,
+      direction,
+      // this.lineageManager?.rightKeyMenuManager?.edgeDashVisible,
+    );
+    if (!relatedNodesAndEdges) return;
+
+    const { relatedNodes, relatedEdges } = relatedNodesAndEdges;
+
+    const relatedNodesIds = relatedNodes.map((n) => n.id);
+
+    relatedNodesIds.forEach((nodeId) => {
+      // find all inputNodes
+      const inputNodes: string[] = [];
+      // find all outputNodes
+      const outputNodes: string[] = [];
+
+      edges.forEach((edge) => {
+        if (
+          edge.target === nodeId &&
+          (edge.visible || edge.relationType === EDashType.INDIRECT)
+        ) {
+          inputNodes.push(edge.source);
+        }
+        if (
+          edge.source === nodeId &&
+          (edge.visible || edge.relationType === EDashType.INDIRECT)
+        ) {
+          outputNodes.push(edge.target);
+        }
+      });
+
+      // exclude multi relation nodes
+      if (!inputNodes.every((item) => relatedNodesIds.includes(item))) return;
+      if (!outputNodes.every((item) => relatedNodesIds.includes(item))) {
+        return;
+      }
+
+      let node = this.lineageManager.getNodeInstanceById(nodeId);
+
+      if (!node) {
+        this.lineageManager.graph.nodes?.forEach((n) => {
+          n.relatedColumns?.forEach((c) => {
+            if (c.id === nodeId) {
+              node = c;
+              return;
+            }
+          });
+        });
+      }
+
+      if (node instanceof TableNode) {
+        // exclude curr node
+        if (nodeId === node.config?.id) return;
+
+        node.config.isRelated = false;
+        node.update(node.config, node.container);
+      }
+
+      if (node instanceof ColumnNode) {
+        node.destroy();
+      }
+    });
+
+    relatedEdges.forEach((edgeCfg) => {
+      const edge = this.lineageManager.getEdgeInstanceById(edgeCfg.id);
+
+      if (edge) {
+        // edge.config.isFolded = true;
+        // edge.destroy();
+        // edge.update();
+
+        this.lineageManager.setData({
+          ...this.lineageManager.parsedData,
+          edges: this.lineageManager.parsedData.edges.filter(
+            (e) => e.id !== edgeCfg.id,
+          ),
+        });
+      }
+    });
+
+    this.lineageManager?.resetRelatedNodes(false);
+    this.lineageManager?.update();
+  }
+
+  async handleExpand(data: {
+    direction: EDirection;
+    depth?: number;
+    node: ColumnNode;
+  }) {
+    const { depth = 1, direction, node } = data;
+    // get prev start related column id
+    node.prevStartRelatedColumnId =
+      this.lineageManager.expandManager.prevStartRelatedColumnId;
+
+    const onlyShowRelated =
+      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+
+    if (onlyShowRelated) {
+      // 开启仅相关的时候扩展
+      // 1. 先打开仅相关
+      this.lineageManager.updateRelatedTableVisible(false, false);
+      // 2. 接下来按照正常逻辑扩展
+    }
+
+    // reset active nodes
+    this.lineageManager?.resetActiveNodes();
+
+    // reset related nodes
+    this.lineageManager?.resetRelatedNodes(false);
+
+    // show expand loading
+    this.lineageManager?.showExpandLoading(node, direction);
+
+    // fetch data
+    const params = {
+      depth,
+      direction,
+      guid: node.config.id,
+    };
+
+    const getNewDataPromise = new Promise<IParsedGraphData<TDataBase<IColResBase>, IColResBase>>((resolve) => {
+      this.lineageManager.once(EEventEnum.COLUMN_EXPAND_RESPONSE,
+        (response: IParsedGraphData<TDataBase<IColResBase>, IColResBase>) => {
+          resolve(response);
+        });
+
+      this.lineageManager.emit(EEventEnum.COLUMN_EXPAND, params);
+    });
+
+    // Wait for the response
+    const newData = await getNewDataPromise;
+
+
+    //  hide expand loading
+    this.lineageManager?.hideExpandLoading();
+
+    if (!newData) return;
+
+    const { nodes, edges } = newData;
+
+    if (
+      nodes.length > 0 &&
+      nodes.some(
+        (e) => e.id === node.config.tableId && e.data?.isHotspot,
+      ) &&
+      direction !== EDirection.BOTH
+    ) {
+      // hotspot expand
+      this.lineageManager.updateHotspotModalState({
+        id: node.config.id,
+        visible: true,
+        direction,
+      });
+
+      return;
+    }
+
+    if (nodes.length > 0 && nodes.some((e) => e.data?.isHotspot)) {
+      if (direction === EDirection.BOTH) return;
+
+      this.lineageManager.emit(EEventEnum.INDIRECT_TIPS, {
+        message: '存在热点资产',
+        description:
+          '本次探索过程中存在热点资产，热点资产默认不继续探索，请手动探索后展开',
+        position: 'top-center',
+      });
+    }
+
+    if (nodes.length > 1) {
+      // save prev start related column id
+      this.lineageManager.expandManager.prevStartRelatedColumnId =
+        node.config.id;
+    }
+
+    if (edges.length <= 0) {
+      // no more input
+      if (direction === EDirection.INPUT) {
+        node.config.hasMoreInput = false;
+      }
+
+      // no more output
+      if (direction === EDirection.OUTPUT) {
+        node.config.hasMoreOutput = false;
+      }
+
+      this.lineageManager.emit(EEventEnum.INDIRECT_TIPS, { message: `该节点无${direction === EDirection.INPUT ? '上游' : '下游'}血缘` });
+    } else {
+      if (
+        edges.every((edge) => edge.relationType === EDashType.INDIRECT) &&
+        this.lineageManager?.rightKeyMenuManager?.edgeDashVisible ===
+        EDashType.DIRECT
+      ) {
+        this.lineageManager.emit(EEventEnum.INDIRECT_TIPS, { message: '当前字段只有间接血缘，请打开间接血缘开关后查看' });
+      }
+
+      const prevNodesConfig = this.lineageManager.parsedData.nodes;
+      let prevEdgesConfig = this.lineageManager.parsedData.edges;
+
+      // 如果是从起始列往下扩展并且不是同一个列，先清空之前所有节点下的的relatedColumns，再把新的parse后的列赋值给每一个表下
+      // 展开列是起始资产的列且展开列不是起始资产的第一个列
+      if (
+        node.config.isStartNode &&
+        node.prevStartRelatedColumnId !== node.config?.id
+      ) {
+        // find related nodes and edges
+        // 获取起始资产首列的上下游列，包含间接血缘
+        if (node.prevStartRelatedColumnId) {
+          prevEdgesConfig = prevEdgesConfig.filter((e) => {
+            return !e.data.relationTypeCode.includes('Column');
+          });
+        }
+
+        // clear all related columns
+        prevNodesConfig.forEach((n) => {
+          // clear related edges
+          n.relatedColumns = [];
+        });
+      }
+
+      // difference nodes
+      // 去除nodes中id等于prevNodesConfig.id中的节点，得到改变深度后的额外节点
+      const differentObjects = _.differenceBy(nodes, prevNodesConfig, 'id');
+
+      // common nodes
+      // 找出prevNodesConfig中id等于nodes中id的节点
+      const commonObjects = _.intersectionBy(prevNodesConfig, nodes, 'id');
+
+      differentObjects.forEach((n) => {
+        n.relatedColumns = n.children;
+        n.relatedColumns.forEach((col) => {
+          col.isRelatedColumn = true;
+        });
+        n.children = [];
+        n.isFolded = false;
+        n.style.height = getNodeHeight(n);
+      });
+
+      commonObjects.forEach((n) => {
+        n.isFolded = false;
+        // 展开后得到的所有节点中找到第一个交集节点
+        const sameNodeNew = nodes.find((node) => node.id === n.id);
+        if (sameNodeNew) {
+          n.relatedColumns = _.unionBy(
+            [...n.relatedColumns, ...sameNodeNew.children],
+            'id',
+          ) as IColumnConfig<TColumnData>[];
+          n.relatedColumns.forEach((col) => {
+            col.isRelatedColumn = true;
+          });
+          n.style.height = getNodeHeight(n);
+        }
+      });
+
+      // show related edges
+      edges.forEach((e) => {
+        const prevEdge = prevEdgesConfig.find((edge) => edge.id === e.id);
+        if (prevEdge) {
+          prevEdge.isFolded = false;
+          //
+          if (e.relationType !== prevEdge.relationType) {
+            prevEdge.relationType = EDashType.ALL;
+            prevEdge.style.strokeDasharray = [0];
+          }
+        } else {
+          e.isFolded = false;
+        }
+      });
+
+      const newNodesConfig = _.concat(prevNodesConfig, differentObjects);
+      //
+      const newEdgesConfig = _.unionBy([...prevEdgesConfig, ...edges], 'id');
+
+      // update related column position
+      newNodesConfig.forEach((n) => {
+        n.relatedColumns
+          .sort((a, b) => {
+            return a.data?.position - b.data?.position;
+          })
+          .forEach((col, i) => {
+            col.position = {
+              x: 0,
+              y: i * COL_HEIGHT,
+            };
+          });
+      });
+
+      this.lineageManager.setData({
+        nodes: newNodesConfig as INodeConfig<TTableData, TColumnData>[],
+        edges: newEdgesConfig,
+      });
+    }
+
+    if (!onlyShowRelated) {
+      const currRelatedColumn = node.node.config.relatedColumns.find(
+        (col) => col.id === node.config.id,
+      );
+
+      // update active nodes
+      this.lineageManager?.updateActiveNodes([currRelatedColumn as IColumnConfig<TColumnData>]);
+
+      // cache related edges
+      this.lineageManager?.setRelatedNodesAndEdges(node.config as IColumnConfig<TColumnData>, false);
+    } else {
+      // update active nodes
+      this.lineageManager?.updateActiveNodes([
+        this.lineageManager.cachedRelatedNodeConfig,
+      ]);
+
+      // cache related edges
+      this.lineageManager?.setRelatedNodesAndEdges(
+        this.lineageManager.cachedRelatedNodeConfig,
+      );
+
+      // 开启仅相关的时候扩展   FIXME: 这里需要优化  @yunke
+      // this.lineageManager.updateRelatedTableVisible(true);
+    }
+
+    // calc fold nodes
+    this.lineageManager?.updateFoldStatus(
+      this.lineageManager.foldLineageManager.isFoldChecked,
+    );
+  }
+}

package/src/manager/nodeManager/CustomEventManager.ts

@@ -0,0 +1,11 @@
+import { InkLineageManager } from "..";
+import { ECustomEvents, IColResBase, TDataBase } from "../..";
+import { AssetEventManager } from "./AssetEventManager";
+
+export class CustomEventManager<TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,> extends AssetEventManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager, ECustomEvents);
+    super.registerExtraEvents();
+  }
+}

package/src/manager/nodeManager/TableEventManager.ts

@@ -0,0 +1,87 @@
+import _ from 'lodash';
+import { DataProcessor, InkLineageManager } from '..';
+import { AssetEventManager } from './AssetEventManager';
+import { EEventEnum, ETableEvents, IColResBase, IColumnConfig, TDataBase } from '../../types';
+import { TableNode } from '../../components';
+
+export class TableEventManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends AssetEventManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager, ETableEvents);
+    this.registerExtraEvents();
+  }
+
+  registerExtraEvents(): void {
+    super.registerExtraEvents();
+    this.lineageManager.on(
+      ETableEvents.CONTROL_TOGGLE_GROUP,
+      (node: TableNode) => {
+        this.onControlBarToggleClick(node);
+      },
+    );
+  }
+
+  async onControlBarToggleClick(node: TableNode) {
+    // hide side icon
+    this.hideSideIcon(node);
+
+    // update toggle type
+    node.config.isOpen = !node.config?.isOpen;
+
+    if (node.config.isOpen === true) {
+      // fetch data while no children
+      const columnsConfig = node.config?.children;
+      if (
+        _.isArray(columnsConfig) &&
+        columnsConfig.length !== node.config?.data?.columnCount
+      ) {
+        // 获取外部的数据
+        const getColumnListPromise = new Promise<any>((resolve) => {
+          this.lineageManager.once(
+            EEventEnum.TABLE_OPEN_RESPONSE,
+            (response: any) => {
+              resolve(response);
+            },
+          );
+
+          this.lineageManager.emit(EEventEnum.TABLE_OPEN, {
+            id: node.config.id,
+          });
+        });
+
+        // Wait for the response
+        const columnsRes = await getColumnListPromise;
+
+        const columns = columnsRes?.columns || [];
+
+        // parse columns data
+        const parsedColumns =
+          columns?.map((col) => {
+            const parsedColConfig = DataProcessor.parseColumn(
+              col,
+              node.config.isStartNode,
+              node.config.id,
+              node.config.data?.name,
+            ) as IColumnConfig<TColumnData>;
+
+            return parsedColConfig;
+          }) || [];
+
+        node.config.children = parsedColumns;
+      }
+      // show all children
+      node.config.children.forEach((child) => {
+        child.visible = true;
+      });
+    } else {
+      // hide all children
+      node.config.children.forEach((child) => {
+        child.visible = false;
+      });
+    }
+    // update node
+    this.lineageManager.update({ shouldGroupNodes: false });
+  }
+}

package/src/manager/nodeManager/index.ts

@@ -0,0 +1,3 @@
+export * from './ColumnEventManager';
+export * from './CustomEventManager';
+export * from './TableEventManager';

package/src/types/NodeConfig.ts

@@ -0,0 +1,69 @@
+import { IBaseEdgeConfig, IBaseNodeConfig } from "@aloudata/ink-graph-new";
+import { EDashType, ERelationType, IColResBase, TDataBase } from "..";
+
+export interface IEdgeConfig extends IBaseEdgeConfig {
+    id: string;
+    type: string;
+    relationType: EDashType;
+    isFolded: boolean; // 展开/收起
+    canBeFold: boolean; // 合并链路
+    data: {
+        srcGuid: string;
+        dstGuid: string;
+        relationTypeCode: ERelationType;
+        fold?: boolean;
+    };
+    source: string;
+    target: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+
+export interface INodeConfig<T extends TDataBase<M>, M extends IColResBase> extends IBaseNodeConfig {
+    data: T;
+    children: IColumnConfig<M>[];
+    isStartNode: boolean;
+    isOpen: boolean; // open table
+    visible: boolean; // see: direct & indirect & - & +
+    isRelated: boolean; // see: related & uncorrelated
+    isFolded: boolean; // see: fold & unfold
+    isFoldInput: boolean;
+    isFoldOutput: boolean;
+    isExpandOutput: boolean;
+    isExpandInput: boolean;
+    canExpandInput: boolean; // has edge.target === this
+    canExpandOutput: boolean; // has edge.source === this
+    canFoldInput: boolean;
+    canFoldOutput: boolean;
+    hasMoreInput: boolean; // has more input data
+    hasMoreOutput: boolean; // has more output data
+    canBeFold: boolean;
+    pagination: {
+        pageNum: number; // current page index
+        pageSize: number; // page size
+        total: number; // columns count
+        totalPage: number; // page count
+    };
+    relatedColumns: IColumnConfig<M>[]; // related columns are expanded out
+    [key: string]: unknown;
+}
+
+export interface IColumnConfig<T> extends IBaseNodeConfig {
+    id: string;
+    tableId: string;
+    tableName: string;
+    visible: boolean;
+    isRelated: boolean;
+    isRelatedColumn: boolean;
+    isFolded: boolean;
+    canBeFold: boolean;
+    canExpandInput: boolean;
+    canExpandOutput: boolean;
+    canFoldInput: boolean;
+    canFoldOutput: boolean;
+    hasMoreInput: boolean;
+    hasMoreOutput: boolean;
+    isStartNode: boolean;
+    data: T;
+}

package/src/types/eventEnum.ts

@@ -0,0 +1,58 @@
+export enum ETableEvents {
+  HEADER_CLICK = 'table:headerClick',
+  CONTROL_TOGGLE_GROUP = 'table:controlToggleGroup',
+  LEFT_ICON_CLICK = 'table:leftIconClick',
+  RIGHT_ICON_CLICK = 'table:rightIconClick',
+  CONTEXT_MENU = 'table:contextMenu',
+  HOTSPOT_EXPAND = 'table:hotspotExpand',
+  EXPAND = 'table:rightExpand',
+}
+
+export enum ECustomEvents {
+  HEADER_CLICK = 'custom:headerClick',
+  LEFT_ICON_CLICK = 'custom:leftIconClick',
+  RIGHT_ICON_CLICK = 'custom:rightIconClick',
+  CONTEXT_MENU = 'custom:contextMenu',
+  HOTSPOT_EXPAND = 'custom:hotspotExpand',
+  EXPAND = 'custom:rightExpand',
+}
+
+export enum EColumnEvents {
+  CLICK = 'column:click',
+  LEFT_ICON_CLICK = 'column:leftIconClick',
+  RIGHT_ICON_CLICK = 'column:rightIconClick',
+  CONTEXT_MENU = 'column:contextMenu',
+  HOTSPOT_EXPAND = 'column:hotspotExpand',
+  EXPAND = 'column:rightExpand',
+}
+
+// 表资产和自定义资产的共同事件类型
+export type AssetEventType = typeof ETableEvents | typeof ECustomEvents;
+
+// 合并所有事件枚举类型
+export type EventEnumType = AssetEventType | typeof EColumnEvents;
+
+// 各个事件回调
+export enum EEventEnum {
+  TABLE_EXPAND = 'table:expand',
+  TABLE_EXPAND_RESPONSE = 'table:expandResponse',
+
+  TABLE_OPEN = 'table:open',
+  TABLE_OPEN_RESPONSE = 'table:openResponse',
+
+  COLUMN_EXPAND = 'column:expand',
+  COLUMN_EXPAND_RESPONSE = 'column:expandResponse',
+
+  CONTEXT_MENU = 'contextmenu:contextmenu',
+
+  OVERVIEW = 'overview:overview',
+
+  HOTSPOT_MODAL_UPDATE = 'hotspotModalData:update',
+
+  HOTSPOT_TIPS = 'hotspotTips:hotspotTipsData',
+
+  TOOLBAR = 'TOOLBAR',
+
+  // 间接血缘提示
+  INDIRECT_TIPS = 'indirectTips:indirectTips',
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './node';
+export * from './manager';
+export * from './eventEnum';