Implementation:TobikoData Sqlmesh ModelLineageDetails
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Data_Lineage, Graph_Visualization |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
ModelLineageDetails displays summary statistics and interactive controls for SQLMesh model lineage graphs, including node counts, filtering options, and reset functionality.
Description
The ModelLineageDetails component renders a comprehensive information bar for lineage graph visualization. It displays real-time statistics about visible nodes including total count, hidden nodes, selected nodes, active connections, and categorized counts for sources, CTEs, and upstream/downstream relationships. The component provides interactive reset functionality to clear selections and restore cached lineage states. It integrates with the LineageFlow context to access and manage graph state, and includes smart visibility logic to show only relevant statistics based on the current graph interaction state.
Usage
Use ModelLineageDetails as the information header for model lineage visualization pages. It provides users with contextual awareness of what they're viewing in the graph and offers quick actions to reset filters or selections.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/graph/ModelLineageDetails.tsx
Signature
export default function ModelLineageDetails({
nodes = [],
}: {
nodes: Node[]
}): JSX.Element
Import
import ModelLineageDetails from '@library/components/graph/ModelLineageDetails'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| nodes | Node[] | No (defaults to []) | Array of React Flow nodes representing models in the lineage graph |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Rendered information bar with statistics and controls |
Usage Examples
import ModelLineageDetails from '@library/components/graph/ModelLineageDetails'
import { useNodesState } from 'reactflow'
function LineageGraph() {
const [nodes] = useNodesState([])
return (
<div>
<div className="flex items-center">
<ModelLineageDetails nodes={nodes} />
</div>
{/* Graph visualization */}
</div>
)
}