Implementation:TobikoData Sqlmesh ModelLineage
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Data_Lineage, Graph_Visualization |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
Concrete tool for rendering interactive model lineage graphs in the SQLMesh web client.
Description
ModelLineage is a React component that orchestrates the visualization of data model dependencies using ReactFlow. It fetches model lineage data from the API, processes it using Web Workers for performance, and renders an interactive directed acyclic graph (DAG) showing upstream and downstream model relationships. The component supports column-level lineage, automatic layout generation using ELK graph layout algorithms, node highlighting, filtering by connection type (connected, impacted, secondary), and real-time graph updates as users interact with the lineage. It integrates with the LineageFlowContext to manage shared state across the lineage visualization system.
Usage
Use this component when displaying the complete lineage graph for a specific SQLMesh model. It should be wrapped in a ReactFlowProvider and typically appears in the main editor view when users request lineage exploration.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/graph/ModelLineage.tsx
Signature
export default function ModelLineage({
model,
highlightedNodes,
}: {
model: ModelSQLMeshModel
highlightedNodes?: HighlightedNodes
}): JSX.Element
Import
import ModelLineage from '@components/graph/ModelLineage'
import { ReactFlowProvider } from 'reactflow'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| model | ModelSQLMeshModel | Yes | The SQLMesh model to display lineage for |
| highlightedNodes | HighlightedNodes | No | Map of CSS classes to node names for highlighting |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Interactive lineage graph with controls |
Usage Examples
// Basic lineage display
<ReactFlowProvider>
<ModelLineage model={currentModel} />
</ReactFlowProvider>
// With highlighted nodes for plan changes
<ReactFlowProvider>
<ModelLineage
model={currentModel}
highlightedNodes={{
'border-4 border-warning-500': ['indirect_model1', 'indirect_model2'],
'border-4 border-secondary-500 ring-8 ring-brand-50': ['main_model'],
'border-4 border-secondary-500': ['direct_model1']
}}
/>
</ReactFlowProvider>
// Integrated with LineageFlowProvider
<LineageFlowProvider
showColumns={true}
showConnected={true}
handleClickModel={(name) => console.log('Clicked:', name)}
>
<ReactFlowProvider>
<ModelLineage model={model} />
</ReactFlowProvider>
</LineageFlowProvider>