Lineage Viewer

The Lineage components at frontend/data-workbench/src/components/Lineage/ provide interactive data lineage visualization at table, column, and pipeline levels.

Components

Component	File	Purpose
`LineageViewer`	`LineageViewer.tsx`	Main lineage graph viewer
`ColumnLineageGraph`	`ColumnLineageGraph.tsx`	Column-level lineage
`DataFlowView`	`DataFlowView.tsx`	Data flow visualization
`LineageNode`	`LineageNode.tsx`	Custom graph node for assets
`NodeDetailPanel`	`NodeDetailPanel.tsx`	Asset detail side panel
`LayerFilter`	`LayerFilter.tsx`	Layer/depth filtering

Types

// frontend/data-workbench/src/components/Lineage/types.ts
interface LineageGraphData {
  nodes: LineageNodeData[];
  edges: LineageEdgeData[];
}
 
interface LineageNodeData {
  id: string;
  name: string;
  type: 'table' | 'view' | 'pipeline' | 'model' | 'dashboard';
  database?: string;
  schema?: string;
  columns?: LineageColumnData[];
  position?: { x: number; y: number };
}

LineageViewer

The main viewer uses React Flow for graph rendering with auto-layout via Dagre:

Upstream and downstream lineage exploration
Depth-based filtering (1-5 levels)
Impact analysis highlighting
Column-level lineage drill-down
Pipeline step expansion
Integration with useLineage hook from shared library

Catalog Browser Ontology Builder