@aloudata/ink-lineage 0.0.1-beta.1

package/src/manager/RightKeyMenuManager.ts

@@ -0,0 +1,114 @@
+import { InkLineageManager } from './LineageManager';
+import { BaseManager } from './BaseManager';
+import { EDashType, IColResBase, TDataBase } from '../types';
+import {
+  contextMenuDefaultData,
+  EOverviewType,
+  hotspotModalDefaultData,
+  hotspotTipDefaultData,
+  IContextMenuState,
+  IHotspotModalState,
+  IHotspotTipState,
+  IOverViewBase,
+  overviewDefaultData,
+  EEventEnum,
+} from '../types';
+
+export const getOverviewDefaultData = () => {
+  const search = window.location.hash.split('?')[1];
+  if (!search) return overviewDefaultData;
+  const arr = search.split('&');
+  const filterData: string[] = arr.filter((item) => item.includes('code'));
+  const [, codeValue] = filterData[0]?.split('=');
+
+  return {
+    ...overviewDefaultData,
+    type: codeValue === 'Custom' ? EOverviewType.CUSTOM : EOverviewType.TABLE,
+  };
+};
+export class RightKeyMenuManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends BaseManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager);
+  }
+
+  // context menu
+  contextMenuState: IContextMenuState = contextMenuDefaultData;
+
+  overviewState: IOverViewBase = getOverviewDefaultData();
+
+  edgeDashVisible: EDashType = EDashType.DIRECT;
+
+  onlyShowRelated: boolean = false;
+
+  hotspotModalState: IHotspotModalState = hotspotModalDefaultData;
+
+  hotspotTipState: IHotspotTipState = hotspotTipDefaultData;
+
+  // 更新概览信息
+  setOverview(data: Partial<IOverViewBase>) {
+    this.overviewState = {
+      ...this.overviewState,
+      ...data,
+    };
+    this.lineageManager.emit(EEventEnum.OVERVIEW);
+  }
+
+  showContextMenu(data: IContextMenuState) {
+    this.contextMenuState = data;
+    this.lineageManager.emit(EEventEnum.CONTEXT_MENU);
+  }
+
+  // hide context menu
+  hideContextMenu() {
+    this.contextMenuState.visible = false;
+    this.lineageManager.emit(EEventEnum.CONTEXT_MENU);
+  }
+
+  // update direct & indirect table visible
+  updateEdgeDashVisible(edgeDashVisible: EDashType) {
+    if (!this.graph) return;
+
+    this.edgeDashVisible = edgeDashVisible;
+
+    this.lineageManager.update();
+  }
+
+  // update related & unrelated table visible
+  updateRelatedTableVisible(
+    onlyShowRelated: boolean,
+    needUpdate: boolean = true,
+  ) {
+    if (!this.graph) return;
+
+    this.onlyShowRelated = onlyShowRelated;
+
+    if (needUpdate) {
+      this.lineageManager.update();
+    } else {
+      this.lineageManager.refreshExtraStatus();
+    }
+
+    this.lineageManager.emit(EEventEnum.CONTEXT_MENU);
+  }
+
+  resetEdgeDashVisible() {
+    this.edgeDashVisible = EDashType.DIRECT;
+  }
+
+  resetOnlyShowRelated() {
+    this.onlyShowRelated = false;
+  }
+
+  updateHotspotModalState(data: IHotspotModalState) {
+    this.hotspotModalState = data;
+    this.lineageManager.emit(EEventEnum.HOTSPOT_MODAL_UPDATE);
+  }
+
+  updateHotspotTipState(data: IHotspotTipState) {
+    this.hotspotTipState = data;
+    this.lineageManager.emit(EEventEnum.HOTSPOT_TIPS);
+  }
+}

package/src/manager/SearchNodeManager.ts

@@ -0,0 +1,188 @@
+import { InkLineageManager } from './LineageManager';
+import {
+  EDataSourceType,
+  IColumnConfig,
+  INodeConfig,
+  IColResBase,
+  TDataBase,
+} from '../types';
+import { getNodeHeight } from '@aloudata/ink-graph-new';
+import { BaseManager } from './BaseManager';
+export class SearchNodeManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends BaseManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager);
+  }
+
+  highlightCurrIndex: number = 0;
+
+  highlightNodesId: string[];
+
+  highlightNodeId: string;
+
+  searchNode(input: string) {
+    this.resetHighLightNodes();
+
+    const search = input.trim();
+    if (!search || search.length < 1) return;
+
+    const nodeRes = this.getLikeNodesIdBySearch(search);
+
+    // 绘制每个column的高亮框
+    if (nodeRes.size < 1) return;
+    return nodeRes;
+  }
+
+  // 每次查询 重置参数
+  resetHighLightNodes() {
+    // reset highlight node
+    const target = this.lineageManager.getNodeConfigById(this.highlightNodeId);
+
+    if (target) {
+      // reset highlight
+      target.style.stroke = '#E8E8E8';
+      target.style.fill = '#FFF';
+    }
+
+    this.highlightCurrIndex = 0;
+    this.highlightNodeId = '';
+    this.highlightNodesId = [];
+  }
+
+  getLikeNodesIdBySearch(search: string) {
+    const res = new Map<
+      string,
+      {
+        id: string;
+        name: string;
+        tableId?: string;
+        tableName?: string;
+        icon?: string;
+        type?: string;
+        tableType?: string;
+        dataSourceType?: EDataSourceType;
+        assetPath?: string;
+        description?: string;
+      }
+    >();
+
+    this.lineageManager.parsedData?.nodes?.forEach(
+      (n: INodeConfig<TTableData, TColumnData>) => {
+        if (n.visible) {
+          // node
+          if (n.data?.name?.toLowerCase().includes(search)) {
+            res.set(n.id, {
+              id: n.id,
+              type: (n as INodeConfig<TTableData, TColumnData>).data?.type,
+              name: n?.data?.name,
+              icon: n?.data?.icon,
+              dataSourceType: n?.data?.datasourceType,
+              description: n?.data?.description,
+              assetPath: n?.data?.assetPath,
+            });
+          }
+
+          // related columns
+          (n.relatedColumns as IColumnConfig<TColumnData>[])?.forEach(
+            (col: IColumnConfig<TColumnData>) => {
+              if (col.data?.name?.toLowerCase().includes(search)) {
+                const tableNode = this.lineageManager.getTableNodeConfigById(
+                  col.tableId,
+                );
+                res.set(col.id, {
+                  tableId: col.tableId,
+                  tableName: col.tableName,
+                  tableType: tableNode?.data.type,
+                  dataSourceType: tableNode?.data?.datasourceType,
+                  description: tableNode?.data?.description,
+                  assetPath: tableNode?.data?.assetPath,
+                  id: col.id,
+                  type: 'Column',
+                  name: col?.data?.name,
+                });
+              }
+            },
+          );
+
+          // children columns
+          (n.children as IColumnConfig<TColumnData>[])?.forEach(
+            (col: IColumnConfig<TColumnData>) => {
+              if (
+                !res.get(col.id) &&
+                col?.data?.name?.toLowerCase().includes(search)
+              ) {
+                const tableNode = this.lineageManager.getTableNodeConfigById(
+                  col.tableId,
+                );
+                res.set(col.id, {
+                  tableId: col.tableId,
+                  tableName: col.tableName,
+                  tableType: tableNode?.data.type,
+                  dataSourceType: tableNode?.data?.datasourceType,
+                  description: tableNode?.data?.description,
+                  assetPath: tableNode?.data?.assetPath,
+                  id: col.id,
+                  type: 'Column',
+                  name: col?.data?.name,
+                });
+              }
+            },
+          );
+        }
+      },
+    );
+
+    return res;
+  }
+
+  highLightById() {
+    // highlight current node
+    const currNodeId = this.highlightNodeId;
+    if (!currNodeId) return;
+
+    const currNodeConfig = this.lineageManager.getNodeConfigById(currNodeId);
+    if (!currNodeConfig) return;
+
+    const nodeId = currNodeConfig?.tableId
+      ? currNodeConfig.tableId
+      : currNodeConfig.id;
+
+    this.graph.moveTargetToCenter(nodeId as string);
+
+    const tableId = currNodeConfig.tableId as string;
+
+    if (tableId) {
+      // 如果是列则说明不在当前页面
+      // 需要翻页
+      const tableNodeConfig =
+        this.lineageManager.getTableNodeConfigById(tableId);
+
+      if (!tableNodeConfig) return;
+
+      const { children, pagination } = tableNodeConfig;
+
+      // 根据currNodeId 在children中的位置，计算该字段处于第几个页，每页展示10个字段
+      const index = children.findIndex(
+        (col: IColumnConfig<TColumnData>) => col.id === currNodeId,
+      );
+      const page = Math.floor(index / 10) + 1;
+
+      tableNodeConfig.pagination = {
+        ...pagination,
+        pageNum: page,
+      };
+
+      tableNodeConfig.isOpen = true; // 需要layout
+      tableNodeConfig.style.height = getNodeHeight(tableNodeConfig);
+    }
+
+    if (currNodeConfig) {
+      currNodeConfig.style.stroke = '#FFC04D';
+      currNodeConfig.style.fill = '#FFD180';
+    }
+
+    this.lineageManager.update();
+  }
+}

package/src/manager/ToolbarManager.ts

@@ -0,0 +1,42 @@
+import { IColumnConfig, IEdgeConfig, INodeConfig, TDataBase } from '../types';
+import { BaseManager } from './BaseManager';
+import { InkLineageManager } from './LineageManager';
+import { EEventEnum } from '../types';
+import { isAllDirectEdges } from '../utils';
+import { IColResBase } from '../types';
+
+export interface IToolbarState {
+  onlyRelatedVisible: boolean;
+}
+
+export class ToolbarManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends BaseManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager);
+  }
+
+  state: IToolbarState = {
+    onlyRelatedVisible: false,
+  };
+
+  updateOnlyRelatedVisible(
+    nodeConfig:
+      | INodeConfig<TTableData, TColumnData>
+      | IColumnConfig<TColumnData>,
+  ) {
+    const onlyRelatedVisible = isAllDirectEdges<TTableData, TColumnData>(
+      nodeConfig,
+      this.graph.nodesConfig as (
+        | INodeConfig<TTableData, TColumnData>
+        | IColumnConfig<TColumnData>
+      )[],
+      this.graph.edgesConfig as IEdgeConfig[],
+    );
+
+    this.state.onlyRelatedVisible = onlyRelatedVisible;
+
+    this.lineageManager.emit(EEventEnum.TOOLBAR);
+  }
+}

package/src/manager/index.ts

@@ -0,0 +1,8 @@
+export * from './LineageManager';
+export * from './ExpandManager';
+export * from './FoldLineageManager';
+export * from './RightKeyMenuManager';
+export * from './SearchNodeManager';
+export * from './DataProcessor';
+export * from './ToolbarManager';
+export * from './nodeManager';