Implementation:TobikoData Sqlmesh UseColumnLevelLineage
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Lineage_Visualization |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
React hook that merges and processes multiple column-level lineage adjacency lists into a unified view with memoization.
Description
useColumnLevelLineage is a custom React hook that takes a Map of column-level lineage data and performs three key computations using useMemo for performance optimization. First, it merges all adjacency lists using deep merge with array deduplication to create a unified graph. Second, it extracts all connected column IDs from the merged adjacency list. Third, it collects all model names (adjacency list keys) participating in the lineage. All computations are memoized and only recalculate when the input Map reference changes.
Usage
Use this hook in React components that need to display aggregated column-level lineage from multiple sources. It efficiently combines lineage data and extracts metadata needed for rendering lineage graphs.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/Lineage/LineageColumnLevel/useColumnLevelLineage.ts
Signature
export function useColumnLevelLineage<
TAdjacencyListKey extends string,
TAdjacencyListColumnKey extends string,
TColumnID extends string = PortId,
TColumnLevelLineageAdjacencyList extends ColumnLevelLineageAdjacencyList<
TAdjacencyListKey,
TAdjacencyListColumnKey
> = ColumnLevelLineageAdjacencyList<
TAdjacencyListKey,
TAdjacencyListColumnKey
>,
>(columnLevelLineage: Map<TColumnID, TColumnLevelLineageAdjacencyList>): {
adjacencyListColumnLevel: TColumnLevelLineageAdjacencyList
selectedColumns: Set<TColumnID>
adjacencyListKeysColumnLevel: TAdjacencyListKey[]
}
Import
import { useColumnLevelLineage } from '@sqlmesh-common/components/Lineage/LineageColumnLevel/useColumnLevelLineage'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| columnLevelLineage | Map<TColumnID, TColumnLevelLineageAdjacencyList> | Yes | Map of column IDs to their lineage adjacency lists |
Outputs
| Name | Type | Description |
|---|---|---|
| adjacencyListColumnLevel | TColumnLevelLineageAdjacencyList | Merged adjacency list from all entries in the map |
| selectedColumns | Set<TColumnID> | Set of all column IDs that have lineage connections |
| adjacencyListKeysColumnLevel | TAdjacencyListKey[] | Array of all model names in the merged lineage |
Usage Examples
import { useColumnLevelLineage } from '@sqlmesh-common/components/Lineage/LineageColumnLevel/useColumnLevelLineage'
function ColumnLineageGraph() {
// Map of column IDs to their lineage data
const [columnLevelLineage, setColumnLevelLineage] = useState(
new Map([
['model1.col1', {
model1: {
col1: {
models: { model2: ['col2'] }
}
}
}],
['model2.col2', {
model2: {
col2: {
models: { model3: ['col3'] }
}
}
}]
])
)
// Hook merges all lineage data and extracts metadata
const {
adjacencyListColumnLevel, // Merged graph
selectedColumns, // Set of connected columns
adjacencyListKeysColumnLevel // All model names
} = useColumnLevelLineage(columnLevelLineage)
return (
<div>
<p>Models: {adjacencyListKeysColumnLevel.join(', ')}</p>
<p>Connected columns: {selectedColumns.size}</p>
<LineageGraph data={adjacencyListColumnLevel} />
</div>
)
}