split more to include in vscode and data catalog

Author: mykalmax

web/common/package.json

@@ -64,7 +64,17 @@
     },
     "./styles/*": "./dist/styles/*",
     "./design/*": "./dist/styles/design/*",
-    "./configs/*": "./dist/configs/*"
+    "./configs/*": "./dist/configs/*",
+    "./lineage": {
+      "import": {
+        "types": "./dist/lineage/index.d.ts",
+        "default": "./dist/lineage/index.es.js"
+      },
+      "require": {
+        "types": "./dist/lineage/index.d.ts",
+        "default": "./dist/lineage/index.umd.js"
+      }
+    }
   },
   "files": [
     "/dist"

web/common/src/components/Lineage/LineageColumnLevel/ColumnLevelLineageContext.ts

@@ -67,7 +67,7 @@ export type ColumnLevelLineageContextValue<
   setFetchingColumns: React.Dispatch<React.SetStateAction<Set<TColumnID>>>
 }
 
-export function getInitial<
+export function getColumnLevelLineageContextInitial<
   TAdjacencyListKey extends string,
   TAdjacencyListColumnKey extends string,
   TColumnID extends string = PortId,

web/common/src/components/Lineage/LineageLayout.tsx

@@ -5,6 +5,7 @@ import {
   type EdgeTypes,
   type NodeTypes,
   ReactFlow,
+  ReactFlowProvider,
   type SetCenter,
   getConnectedEdges,
   getIncomers,
@@ -79,6 +80,58 @@ export function LineageLayout<
     event: React.MouseEvent<Element, MouseEvent>,
     node: LineageNode<TNodeData, TNodeID>,
   ) => void
+}) {
+  return (
+    <ReactFlowProvider>
+      <LineageLayoutBase
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        className={className}
+        controls={controls}
+        useLineage={useLineage}
+        onNodeClick={onNodeClick}
+        onNodeDoubleClick={onNodeDoubleClick}
+      />
+    </ReactFlowProvider>
+  )
+}
+
+function LineageLayoutBase<
+  TNodeData extends LineageNodeData = LineageNodeData,
+  TEdgeData extends LineageEdgeData = LineageEdgeData,
+  TNodeID extends string = NodeId,
+  TEdgeID extends string = EdgeId,
+  TPortID extends string = PortId,
+>({
+  nodeTypes,
+  edgeTypes,
+  className,
+  controls,
+  useLineage,
+  onNodeClick,
+  onNodeDoubleClick,
+}: {
+  useLineage: LineageContextHook<
+    TNodeData,
+    TEdgeData,
+    TNodeID,
+    TEdgeID,
+    TPortID
+  >
+  nodeTypes?: NodeTypes
+  edgeTypes?: EdgeTypes
+  className?: string
+  controls?:
+    | React.ReactNode
+    | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
+  onNodeClick?: (
+    event: React.MouseEvent<Element, MouseEvent>,
+    node: LineageNode<TNodeData, TNodeID>,
+  ) => void
+  onNodeDoubleClick?: (
+    event: React.MouseEvent<Element, MouseEvent>,
+    node: LineageNode<TNodeData, TNodeID>,
+  ) => void
 }) {
   const { zoom: viewportZoom } = useViewport()
   const { setCenter } = useReactFlow()

web/common/src/components/Lineage/edge/FactoryEdgeWithGradient.tsx

@@ -3,22 +3,13 @@ import React from 'react'
 import { type LineageContextHook } from '../LineageContext'
 import {
   type EdgeId,
-  type LineageEdgeData,
   type LineageNodeData,
   type NodeId,
-  type PathType,
   type PortId,
 } from '../utils'
-import { EdgeWithGradient } from './EdgeWithGradient'
+import { EdgeWithGradient, type EdgeData } from './EdgeWithGradient'
 import type { Edge, EdgeProps } from '@xyflow/react'
 
-export interface EdgeData extends LineageEdgeData {
-  startColor?: string
-  endColor?: string
-  strokeWidth?: number
-  pathType?: PathType
-}
-
 export function FactoryEdgeWithGradient<
   TNodeData extends LineageNodeData = LineageNodeData,
   TEdgeData extends EdgeData = EdgeData,

web/common/src/components/Lineage/index.ts

@@ -0,0 +1,28 @@
+export * from './utils'
+export * from './LineageLayout'
+export * from './LineageContext'
+export * from './LineageControlButton'
+export * from './LineageControlIcon'
+export * from './help'
+export * from './node/base-handle'
+export * from './node/base-node'
+export * from './node/NodeContainer'
+export * from './node/NodeBase'
+export * from './node/NodeDivider'
+export * from './node/NodeHandleIcon'
+export * from './node/NodeHandles'
+export * from './node/NodeHandle'
+export * from './node/NodeHeader'
+export * from './node/NodePorts'
+export * from './node/NodePort'
+export * from './node/NodeAppendix'
+export * from './node/NodeBadge'
+export * from './node/useNodeMetadata'
+export * from './edge/EdgeWithGradient'
+export * from './edge/FactoryEdgeWithGradient'
+export * from './layout/dagreLayout'
+export * from './LineageColumnLevel/ColumnLevelLineageContext'
+export * from './LineageColumnLevel/FactoryColumn'
+export * from './LineageColumnLevel/useColumns'
+export * from './LineageColumnLevel/useColumnLevelLineage'
+export * from './LineageColumnLevel/help'

web/common/src/components/Lineage/layout/dagreLayout.ts

@@ -1,102 +1,90 @@
 import {
+  DEFAULT_NODE_WIDTH,
   type EdgeId,
-  type LayoutedGraph,
   type LineageEdge,
   type LineageEdgeData,
   type LineageNodeData,
   type LineageNodesMap,
   type NodeId,
   type PortId,
 } from '../utils'
+import dagre from 'dagre'
 
-const DEFAULT_TIMEOUT = 1000 * 60 // 1 minute
-
-let workerInstance: Worker | null = null
-
-function getWorker(): Worker {
-  if (workerInstance) return workerInstance
-
-  workerInstance = new Worker(
-    new URL('./dagreLayout.worker.ts', import.meta.url),
-    { type: 'module' },
-  )
-
-  return workerInstance
-}
-
-export async function getLayoutedGraph<
+export function buildLayout<
   TNodeData extends LineageNodeData = LineageNodeData,
   TEdgeData extends LineageEdgeData = LineageEdgeData,
   TNodeID extends string = NodeId,
   TEdgeID extends string = EdgeId,
   TPortID extends string = PortId,
->(
-  edges: LineageEdge<TEdgeData, TNodeID, TEdgeID, TPortID>[],
-  nodesMap: LineageNodesMap<TNodeData>,
-): Promise<LayoutedGraph<TNodeData, TEdgeData, TNodeID, TEdgeID, TPortID>> {
-  let timeoutId: NodeJS.Timeout | null = null
-
-  return new Promise((resolve, reject) => {
-    const nodes = Object.values(nodesMap)
-
-    if (nodes.length === 0) return resolve({ edges: [], nodesMap: {} })
-
-    const worker = getWorker()
-
-    if (worker == null)
-      return errorHandler(new ErrorEvent('Failed to create worker'))
-
-    timeoutId = setTimeout(
-      () => errorHandler(new ErrorEvent('Layout calculation timed out')),
-      DEFAULT_TIMEOUT,
-    )
-
-    worker.addEventListener('message', handler)
-    worker.addEventListener('error', errorHandler)
-
-    try {
-      worker.postMessage({ edges, nodesMap } as LayoutedGraph<
-        TNodeData,
-        TEdgeData,
-        TNodeID,
-        TEdgeID,
-        TPortID
-      >)
-    } catch (postError) {
-      errorHandler(postError as ErrorEvent)
+>({
+  edges,
+  nodesMap,
+}: {
+  edges: LineageEdge<TEdgeData, TNodeID, TEdgeID, TPortID>[]
+  nodesMap: LineageNodesMap<TNodeData>
+}) {
+  const nodes = Object.values(nodesMap)
+  const nodeCount = nodes.length
+  const edgeCount = edges.length
+
+  if (nodeCount === 0)
+    return {
+      edges: [],
+      nodesMap: {},
     }
 
-    function handler(
-      event: MessageEvent<
-        LayoutedGraph<TNodeData, TEdgeData, TNodeID, TEdgeID, TPortID> & {
-          error: ErrorEvent
-        }
-      >,
-    ) {
-      cleanup()
-
-      if (event.data.error) return errorHandler(event.data.error)
-
-      resolve(event.data)
-    }
+  const g = new dagre.graphlib.Graph({
+    compound: true,
+    multigraph: true,
+    directed: true,
+  })
 
-    function errorHandler(error: ErrorEvent) {
-      cleanup()
-      reject(error)
-    }
+  g.setGraph({
+    rankdir: 'LR',
+    nodesep: 0,
+    ranksep: 48,
+    edgesep: 0,
+    ranker: 'longest-path',
+  })
 
-    function cleanup() {
-      if (timeoutId) {
-        clearTimeout(timeoutId)
-        timeoutId = null
-      }
-      worker?.removeEventListener('message', handler)
-      worker?.removeEventListener('error', errorHandler)
+  g.setDefaultEdgeLabel(() => ({}))
+
+  // Building layout already heavy operation, so trying to optimize it a bit
+  for (let i = 0; i < edgeCount; i++) {
+    g.setEdge(edges[i].source, edges[i].target)
+  }
+
+  for (let i = 0; i < nodeCount; i++) {
+    const node = nodes[i]
+    g.setNode(node.id, {
+      width: node.width || DEFAULT_NODE_WIDTH,
+      height: node.height || 0,
+    })
+  }
+
+  dagre.layout(g)
+
+  // Building layout already heavy operation, so trying to optimize it a bit
+  for (let i = 0; i < nodeCount; i++) {
+    const node = nodes[i]
+    const width = node.width || DEFAULT_NODE_WIDTH
+    const height = node.height || 0
+    const nodeId = node.id as NodeId
+    const nodeWithPosition = g.node(nodeId)
+    const halfWidth = width / 2
+    const halfHeight = height / 2
+
+    nodesMap[nodeId] = {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - halfWidth,
+        y: nodeWithPosition.y - halfHeight,
+      },
     }
-  })
-}
+  }
 
-export function cleanupLayoutWorker(): void {
-  workerInstance?.terminate()
-  workerInstance = null
+  return {
+    edges,
+    nodesMap,
+  }
 }