@aloudata/ink-lineage 0.0.1-beta.1

package/src/components/Nodes/ColumnNode.ts

@@ -0,0 +1,491 @@
+import {
+  Rect,
+  Text,
+  Image,
+  getTextDomWidth,
+  getNodeHeight,
+  Graph,
+} from '@aloudata/ink-graph-new';
+import _ from 'lodash';
+import { DefaultNode } from './DefaultNode';
+import {
+  COL_HEIGHT,
+  COL_ORDER_TEXT_X,
+  COL_ORDER_TEXT_Y,
+  COL_PK_FK_Y,
+  COL_TEXT_X,
+  COL_TEXT_Y,
+  NODE_WIDTH,
+  RECT_LINE_WIDTH,
+  SIDE_ICON_SIZE,
+} from '../../constant';
+import { fkIcon, pkIcon } from '../../assets';
+import {
+  EDashType,
+  EElementType,
+  EExpandType,
+  IColumnConfig,
+  IColResBase,
+  INodeConfig,
+  TDataBase,
+  EColumnEvents,
+  EEventEnum,
+} from '../../types';
+import { TableNode } from '.';
+import { getEventTypeByNodeType } from '../../utils';
+
+export class ColumnNode extends DefaultNode {
+  prevStartRelatedColumnId: string = '';
+
+  declare config: IColumnConfig<IColResBase>;
+
+  colText: Text;
+
+  colDesc: Text;
+
+  isForbidden: boolean;
+
+  constructor(
+    graph: Graph,
+    config: IColumnConfig<IColResBase>,
+    public node: TableNode,
+    public position: number,
+  ) {
+    super(graph, config);
+    this.elementType = EElementType.TABLE;
+    this.eventType = getEventTypeByNodeType(EElementType.COLUMN);
+
+    this.render();
+  }
+
+  render() {
+    if (!this.config.data) return;
+
+    this.container.name = 'column-group';
+    this.container.style.y = this.position * COL_HEIGHT;
+    this.container.style.cursor = 'default';
+
+    const { position, name, constraint } = this.config.data;
+
+    this.isForbidden = this.isForbiddenColumn();
+
+    this.container.style.zIndex = this.config.style.zIndex;
+
+    this.bgRect = new Rect({
+      name: 'column-bgRect',
+      style: {
+        x: 8,
+        fill: this.isForbidden ? '#fff' : this.config?.style?.fill || '#fff',
+        stroke: this.isForbidden
+          ? '#DBDBDB'
+          : this.config?.style?.stroke || '#DBDBDB',
+        lineWidth: RECT_LINE_WIDTH,
+        width: NODE_WIDTH - 16,
+        height: COL_HEIGHT,
+        zIndex: 0,
+      },
+    });
+
+    this.container.addEventListener('click', () => {
+      this.lineageManager.emit(EColumnEvents.CLICK, this);
+    });
+
+    this.container.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      this.contextmenuClick();
+    });
+
+    this.container.addEventListener('mouseenter', () => {
+      if (this.isForbidden) return;
+
+      this.node.isHoverColumn = true;
+      // show side icon
+      this.onHover();
+      this.node.onLeave();
+      this.showSideIcon();
+    });
+
+    this.container.addEventListener('mouseleave', () => {
+      this.node.isHoverColumn = false;
+      // hide side icon
+      this.onLeave();
+      // this.node.onHover();
+      this.hideSideIcon();
+    });
+
+    // 用于hover到sideIcon区域时也能显示sideIcon
+    const colHideRect = new Rect({
+      name: 'column-bgRect-hide',
+      style: {
+        x: -20,
+        fill: '#0000',
+        stroke: '#0000',
+        lineWidth: RECT_LINE_WIDTH,
+        width: NODE_WIDTH + 40,
+        height: COL_HEIGHT - 1,
+        zIndex: 9,
+        cursor: this.isForbidden ? 'not-allowed' : 'default',
+      },
+    });
+
+    const colOrderText = new Text({
+      style: {
+        x: COL_ORDER_TEXT_X + 8,
+        y: COL_ORDER_TEXT_Y,
+        text: position || '-',
+        fill: '#A2A2A2',
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'Tahoma',
+        zIndex: 2,
+        opacity: this.isForbidden ? 0.5 : 1,
+      },
+    });
+
+    const desc =
+      this.config.data?.displayName || this.config.data?.description || '';
+    const descLengh = getTextDomWidth(desc, 12, 'Tahoma');
+    const isDescExist = desc && descLengh > 0;
+
+    this.colText = new Text({
+      name: 'column-text',
+      style: {
+        x: COL_TEXT_X + 8,
+        y: COL_TEXT_Y,
+        wordWrap: true,
+        wordWrapWidth: isDescExist ? 150 : 240,
+        textOverflow: 'ellipsis',
+        maxLines: 1,
+        text: name,
+        fill: '#171717',
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'PingFang SC',
+        zIndex: 2,
+        opacity: this.isForbidden ? 0.5 : 1,
+      },
+    });
+
+    this.container.appendChild(colHideRect);
+    this.container.appendChild(this.bgRect);
+    this.container.appendChild(colOrderText);
+    this.container.appendChild(this.colText);
+
+    // desc
+    if (isDescExist) {
+      this.colDesc = new Text({
+        name: 'column-desc-text',
+        style: {
+          x: 300 - 20,
+          y: COL_TEXT_Y,
+          wordWrap: true,
+          wordWrapWidth: 85,
+          textOverflow: 'ellipsis',
+          textAlign: 'right',
+          maxLines: 1,
+          text: desc,
+          fill: '#4B5563',
+          fontSize: 12,
+          fontWeight: 400,
+          fontFamily: 'PingFang SC',
+          zIndex: 2,
+          opacity: this.isForbidden ? 0.5 : 1,
+        },
+      });
+      this.container.appendChild(this.colDesc);
+    }
+
+    // PK、FK
+    if (!_.isNil(constraint) && ['PK', 'FK'].includes(constraint)) {
+      const columnType = new Image({
+        style: {
+          x: 190, // FIXME @yk
+          y: COL_PK_FK_Y,
+          width: 12,
+          height: 12,
+          img: constraint === 'PK' ? pkIcon : fkIcon,
+          cursor: 'pointer',
+          zIndex: 2,
+        },
+      });
+      this.container.appendChild(columnType);
+    }
+
+    if (
+      !this.isForbidden &&
+      (this.config.isRelatedColumn || this.config.isStartNode)
+    ) {
+      this.leftIcon = new Image({
+        name: `sideIcon-img-left`,
+        style: {
+          x: -SIDE_ICON_SIZE - 5,
+          y: COL_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
+          width: SIDE_ICON_SIZE,
+          height: SIDE_ICON_SIZE,
+          cursor: 'pointer',
+          zIndex: 99,
+          visibility: 'visible',
+        },
+      });
+
+      this.leftIcon.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.leftIconClick();
+      });
+
+      this.rightIcon = new Image({
+        name: `sideIcon-img-right`,
+        style: {
+          x: NODE_WIDTH + 6,
+          y: COL_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
+          width: SIDE_ICON_SIZE,
+          height: SIDE_ICON_SIZE,
+          cursor: 'pointer',
+          zIndex: 99,
+          visibility: 'visible',
+        },
+      });
+
+      this.rightIcon.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.rightIconClick();
+      });
+
+      this.container.appendChild(this.leftIcon);
+      this.container.appendChild(this.rightIcon);
+    }
+  }
+
+  onHover() {
+    if (!this.config) return;
+    if (this.config.style.stroke === '#3271C9') return;
+
+    this.bgRect.setAttribute('stroke', '#3271C9');
+    this.container.setAttribute('zIndex', 3);
+  }
+
+  onLeave() {
+    if (!this.config) return;
+    if (this.config.style.stroke === '#3271C9') return;
+
+    this.bgRect.setAttribute('stroke', '#DBDBDB');
+    this.container.setAttribute('zIndex', 2);
+  }
+
+  destroy(): void {
+    const filteredArray = _.reject(this.node.config.relatedColumns, {
+      id: this.id,
+    });
+
+    this.node.config.relatedColumns = filteredArray;
+
+    if (filteredArray.length === 0) {
+      this.node.config.isRelated = false;
+    }
+
+    this.config = null;
+
+    this.node.update(this.node.config, this.node.container);
+  }
+
+  isForbiddenColumn() {
+    return (
+      !this.config.isRelatedColumn &&
+      this.node.config.relatedColumns.some((c) => c.id === this.id && c.visible)
+    );
+  }
+
+  showSideIcon = () => {
+    const { config } = this;
+
+    const onlyShowRelated =
+      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+
+    // check left
+    // show expand left side icon
+    if (config.canExpandInput) {
+      if (onlyShowRelated && config.isStartNode && !config.isRelatedColumn) {
+      } else {
+        this.showLeftIcon(EExpandType.EXPAND);
+      }
+    }
+
+    // show close left side icon
+    if (config.canFoldInput) {
+      if (onlyShowRelated) {
+      } else {
+        this.showLeftIcon(EExpandType.FOLD);
+      }
+    }
+
+    // check right
+    // show expand right side icon
+    if (config.canExpandOutput) {
+      if (onlyShowRelated && config.isStartNode && !config.isRelatedColumn)
+        return;
+
+      this.showRightIcon(EExpandType.EXPAND);
+    }
+
+    // show close right side icon
+    if (config.canFoldOutput && !onlyShowRelated) {
+      this.showRightIcon(EExpandType.FOLD);
+    }
+  };
+
+  handleHotspotExpand(data: { resData }) {
+    const { resData: parsedData } = data;
+
+    if (parsedData.nodes.length > 1) {
+      // save prev start related column id
+      this.lineageManager.expandManager.prevStartRelatedColumnId =
+        this.config.id;
+    }
+
+    const { nodes: newNodes, edges: newEdges } = parsedData;
+
+    if (
+      newEdges.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 (
+      this.config.isStartNode &&
+      this.prevStartRelatedColumnId !== this.config?.id
+    ) {
+      // find related nodes and edges
+      // 获取起始资产首列的上下游列，包含间接血缘
+      if (this.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(
+      newNodes,
+      prevNodesConfig,
+      'id',
+    ) as unknown as INodeConfig<TDataBase<IColResBase>, IColResBase>[];
+
+    // common nodes
+    // 找出prevNodesConfig中id等于nodes中id的节点
+    const commonObjects = _.intersectionBy(prevNodesConfig, newNodes, '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 = newNodes.find((node) => node.id === n.id);
+      if (sameNodeNew) {
+        n.relatedColumns = _.unionBy(
+          [...n.relatedColumns, ...sameNodeNew.children],
+          'id',
+        );
+        n.relatedColumns.forEach((col) => {
+          col.isRelatedColumn = true;
+        });
+        n.style.height = getNodeHeight(n);
+      }
+
+      sameNodeNew.data.isHotspot =
+        n.data.isHotspot || sameNodeNew.data.isHotspot;
+    });
+
+    // show related edges
+    newEdges.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, ...newEdges], '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,
+      edges: newEdgesConfig,
+    });
+
+    const onlyShowRelated =
+      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+    if (!onlyShowRelated) {
+      const currRelatedColumn = this.node.config.relatedColumns.find(
+        (col) => col.id === this.config.id,
+      );
+
+      // update active nodes
+      this.lineageManager?.updateActiveNodes([currRelatedColumn]);
+
+      // cache related edges
+      this.lineageManager?.setRelatedNodesAndEdges(this.config, false);
+    } else {
+      // update active nodes
+      this.lineageManager?.updateActiveNodes([
+        this.lineageManager.cachedRelatedNodeConfig,
+      ]);
+
+      // cache related edges
+      this.lineageManager?.setRelatedNodesAndEdges(
+        this.lineageManager.cachedRelatedNodeConfig,
+      );
+    }
+
+    // calc fold nodes
+    this.lineageManager?.updateFoldStatus(
+      this.lineageManager.foldLineageManager.isFoldChecked,
+    );
+  }
+}

package/src/components/Nodes/CustomNode.ts

@@ -0,0 +1,63 @@
+import { Text, Image, Graph } from '@aloudata/ink-graph-new';
+import { AssetNode } from './AssetNode';
+import { EElementType, EEntityType, INodeConfig, IColResBase, TDataBase, AssetEventType } from '../../types';
+import { entityDefaultType } from '../../assets';
+import { getEntityTypeIcon, getEventTypeByNodeType } from '../../utils';
+import { TABLE_HEADER_NAME_WRAP_WIDTH } from '../../constant';
+
+export class CustomNode extends AssetNode {
+  declare config: INodeConfig<TDataBase<IColResBase>, IColResBase>;
+
+  constructor(graph: Graph, config: INodeConfig<TDataBase<IColResBase>, IColResBase>) {
+    super(graph, config);
+    this.elementType = EElementType.CUSTOM;
+    this.eventType = getEventTypeByNodeType(EElementType.CUSTOM) as AssetEventType;
+  }
+
+  render(config: INodeConfig<TDataBase<IColResBase>, IColResBase>) {
+    this.renderAssetNode();
+
+    this.renderCustomHeader();
+
+    // refresh table height
+    this.updateNodeHeight();
+  }
+
+  renderCustomHeader() {
+    const { data } = this.config;
+    const { typeCode, typeCodeName, icon } = data;
+    const img =
+      data.type === EEntityType.CUSTOM
+        ? icon || entityDefaultType
+        : (getEntityTypeIcon(typeCode, data.type) as string);
+    const entityTypeIcon = new Image({
+      style: {
+        x: 12,
+        y: 12,
+        width: 20,
+        height: 20,
+        img,
+        cursor: 'pointer',
+      },
+    });
+
+    const typeCodeNameText = new Text({
+      style: {
+        x: 36,
+        y: 43,
+        text: typeCodeName,
+        fontSize: 12,
+        fontWeight: 400,
+        lineHeight: 16,
+        fontFamily: 'PingFang SC',
+        textBaseline: 'middle',
+        wordWrap: true,
+        wordWrapWidth: TABLE_HEADER_NAME_WRAP_WIDTH,
+        fill: '#4B5563',
+      },
+    });
+
+    this.headerGroup.appendChild(typeCodeNameText);
+    this.headerGroup.appendChild(entityTypeIcon);
+  }
+}

package/src/components/Nodes/DefaultNode.ts

@@ -0,0 +1,74 @@
+import { BaseNode, Graph, Image } from '@aloudata/ink-graph-new';
+import {
+  EElementType,
+  EExpandType,
+  EXPAND_BUTTON_TYPE,
+  IColumnConfig,
+  INodeConfig,
+  IColResBase,
+  TDataBase,
+  EventEnumType,
+} from '../../types';
+import { InkLineageManager } from '../../manager';
+
+export class DefaultNode extends BaseNode<
+  INodeConfig<TDataBase<IColResBase>, IColResBase> | IColumnConfig<IColResBase>
+> {
+  static lineageManager: InkLineageManager<TDataBase<IColResBase>, IColResBase>;
+
+  eventType: EventEnumType;
+
+  elementType: EElementType;
+
+  leftIcon: Image;
+
+  rightIcon: Image;
+
+  isHoverColumn?: boolean;
+
+  get lineageManager(): InkLineageManager<TDataBase<IColResBase>, IColResBase> {
+    return DefaultNode.lineageManager;
+  }
+
+  constructor(
+    graph: Graph,
+    config:
+      | INodeConfig<TDataBase<IColResBase>, IColResBase>
+      | IColumnConfig<IColResBase>,
+  ) {
+    super(graph, config);
+  }
+
+  rightIconClick() {
+    this.lineageManager.emit(this.eventType.RIGHT_ICON_CLICK, this);
+  }
+
+  leftIconClick() {
+    this.lineageManager.emit(this.eventType.LEFT_ICON_CLICK, this);
+  }
+
+  contextmenuClick() {
+    this.lineageManager.emit(this.eventType.CONTEXT_MENU, this);
+  }
+
+  hideSideIcon = () => {
+    this.leftIcon?.setAttribute('visibility', 'hidden');
+    this.rightIcon?.setAttribute('visibility', 'hidden');
+  };
+
+  showLeftIcon(type: EExpandType) {
+    if (!this.leftIcon) return;
+
+    this.leftIcon.style.img = EXPAND_BUTTON_TYPE[type];
+    this.leftIcon.setAttribute('visibility', 'visible');
+    (this.leftIcon as any).iconType = type;
+  }
+
+  showRightIcon(type: EExpandType) {
+    if (!this.rightIcon) return;
+
+    this.rightIcon.style.img = EXPAND_BUTTON_TYPE[type];
+    this.rightIcon.setAttribute('visibility', 'visible');
+    (this.rightIcon as any).iconType = type;
+  }
+}