Implementation:TobikoData Sqlmesh ColumnLevelLineageContext

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Lineage_Visualization
Last Updated	2026-02-07 20:00 GMT

Overview

TypeScript context definition for column-level lineage state management in React applications.

Description

ColumnLevelLineageContext provides type definitions and initialization functions for managing column-level lineage data in SQLMesh's web UI. It defines the adjacency list structure that represents column-to-column relationships across models, tracks selected columns, manages fetching states, and controls visibility of column-level lineage diagrams. The context uses generic type parameters to support flexible adjacency list key types for model and column identifiers.

Usage

Use this context when building React components that need to display, interact with, or modify column-level lineage graphs. The context provides state management for column selection, lineage data storage, and loading states.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/Lineage/LineageColumnLevel/ColumnLevelLineageContext.ts

Signature

export type ColumnLevelLineageAdjacencyList<
  TAdjacencyListKey extends string,
  TAdjacencyListColumnKey extends string,
> = {
  [K in TAdjacencyListKey]: {
    [C in TAdjacencyListColumnKey]: {
      source?: string | null
      expression?: string | null
      models: Record<TAdjacencyListKey, TAdjacencyListColumnKey[]>
    }
  }
}

export type ColumnLevelLineageContextValue<
  TAdjacencyListKey extends string,
  TAdjacencyListColumnKey extends string,
  TColumnID extends string = PortId,
  TColumnLevelLineageAdjacencyList extends ColumnLevelLineageAdjacencyList<
    TAdjacencyListKey,
    TAdjacencyListColumnKey
  > = ColumnLevelLineageAdjacencyList<
    TAdjacencyListKey,
    TAdjacencyListColumnKey
  >,
> = {
  adjacencyListColumnLevel: TColumnLevelLineageAdjacencyList
  selectedColumns: Set<TColumnID>
  columnLevelLineage: Map<TColumnID, TColumnLevelLineageAdjacencyList>
  setColumnLevelLineage: React.Dispatch<
    React.SetStateAction<Map<TColumnID, TColumnLevelLineageAdjacencyList>>
  >
  showColumns: boolean
  setShowColumns: React.Dispatch<React.SetStateAction<boolean>>
  fetchingColumns: Set<TColumnID>
  setFetchingColumns: React.Dispatch<React.SetStateAction<Set<TColumnID>>>
}

export function getColumnLevelLineageContextInitial<...>()

export type ColumnLevelLineageContextHook<...> = () => ColumnLevelLineageContextValue<...>

Import

import {
  type ColumnLevelLineageAdjacencyList,
  type ColumnLevelLineageContextValue,
  type ColumnLevelLineageContextHook,
  getColumnLevelLineageContextInitial,
} from '@sqlmesh-common/components/Lineage/LineageColumnLevel/ColumnLevelLineageContext'

I/O Contract

Inputs

Name	Type	Required	Description
TAdjacencyListKey	Generic Type Parameter	Yes	String type for model identifiers
TAdjacencyListColumnKey	Generic Type Parameter	Yes	String type for column identifiers
TColumnID	Generic Type Parameter	No	String type for column IDs (defaults to PortId)

Outputs

Name	Type	Description
adjacencyListColumnLevel	TColumnLevelLineageAdjacencyList	The merged adjacency list of all column-level lineage
selectedColumns	Set<TColumnID>	Set of currently selected column IDs
columnLevelLineage	Map<TColumnID, TColumnLevelLineageAdjacencyList>	Map storing lineage data for each column
setColumnLevelLineage	React.Dispatch	State setter for column lineage data
showColumns	boolean	Flag indicating whether columns should be displayed
setShowColumns	React.Dispatch	State setter for column visibility
fetchingColumns	Set<TColumnID>	Set of column IDs currently being fetched
setFetchingColumns	React.Dispatch	State setter for fetching state

Usage Examples

// Initialize context with default values
const initial = getColumnLevelLineageContextInitial<string, string>()

// Create a React context
const ColumnLineageContext = React.createContext(initial)

// Context value structure
const contextValue: ColumnLevelLineageContextValue<string, string> = {
  adjacencyListColumnLevel: {
    model1: {
      col1: {
        source: 'SELECT col1 FROM source',
        expression: 'col1 * 2',
        models: {
          model2: ['col2', 'col3']
        }
      }
    }
  },
  selectedColumns: new Set(['model1.col1']),
  columnLevelLineage: new Map(),
  setColumnLevelLineage: (value) => { /* ... */ },
  showColumns: true,
  setShowColumns: (value) => { /* ... */ },
  fetchingColumns: new Set(['model2.col2']),
  setFetchingColumns: (value) => { /* ... */ },
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment