Implementation:TobikoData Sqlmesh LineageContext

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

Overview

TypeScript type definitions and factory functions for creating React contexts that manage model-level lineage graph state.

Description

LineageContext provides comprehensive type definitions for managing lineage visualization state in SQLMesh's web UI. The LineageContextValue interface includes node selection state (selected nodes Set, selected edges Set, single selected node ID), layout state (zoom level), and graph data (nodes array, edges array, nodes map, computed selected node object). The module provides getInitial function for default values and createLineageContext factory function that creates a typed React context with a Provider and custom hook. All types are fully generic to support flexible node/edge data structures and ID types.

Usage

Use this module when creating lineage visualization components that need centralized state management for graph interactions, node selection, zoom controls, and graph data. The factory pattern ensures type safety across the context provider and consumer hooks.

Code Reference

Source Location

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

Signature

export interface LineageContextValue<
  TNodeData extends LineageNodeData = LineageNodeData,
  TEdgeData extends LineageEdgeData = LineageEdgeData,
  TNodeID extends string = NodeId,
  TEdgeID extends string = EdgeId,
  TSourceID extends string = TNodeID,
  TTargetID extends string = TNodeID,
  TSourceHandleID extends string = PortId,
  TTargetHandleID extends string = PortId,
> {
  showOnlySelectedNodes: boolean
  setShowOnlySelectedNodes: React.Dispatch<React.SetStateAction<boolean>>
  selectedNodes: Set<TNodeID>
  setSelectedNodes: React.Dispatch<React.SetStateAction<Set<TNodeID>>>
  selectedEdges: Set<TEdgeID>
  setSelectedEdges: React.Dispatch<React.SetStateAction<Set<TEdgeID>>>
  selectedNodeId: TNodeID | null
  setSelectedNodeId: React.Dispatch<React.SetStateAction<TNodeID | null>>
  zoom: number
  setZoom: React.Dispatch<React.SetStateAction<number>>
  edges: LineageEdge<...>[]
  setEdges: React.Dispatch<React.SetStateAction<LineageEdge<...>[]>>
  nodes: LineageNode<TNodeData, TNodeID>[]
  nodesMap: LineageNodesMap<TNodeData, TNodeID>
  setNodesMap: React.Dispatch<React.SetStateAction<LineageNodesMap<TNodeData, TNodeID>>>
  currentNodeId: TNodeID | null
  selectedNode: LineageNode<TNodeData, TNodeID> | null
}

export function getInitial<TNodeID extends string = NodeId, TEdgeID extends string = EdgeId>()

export function createLineageContext<...>(initial: TLineageContextValue): {
  Provider: React.Provider<TLineageContextValue>
  useLineage: () => TLineageContextValue
}

export type LineageContextHook<...> = () => LineageContextValue<...>

Import

import {
  type LineageContextValue,
  type LineageContextHook,
  getInitial,
  createLineageContext,
} from '@sqlmesh-common/components/Lineage/LineageContext'

I/O Contract

Inputs

Name	Type	Required	Description
initial	TLineageContextValue	Yes (for createLineageContext)	Initial context value with all required properties
Generic Type Parameters	Various	No	Types for node data, edge data, and various ID types

Outputs

Name	Type	Description
Provider	React.Provider	React context provider component
useLineage	Hook Function	Custom hook to access context value
initialValue	LineageContextValue	Default context value from getInitial()

Usage Examples

import { createLineageContext, getInitial } from '@sqlmesh-common/components/Lineage/LineageContext'

// Create a lineage context with default values
const { Provider, useLineage } = createLineageContext(getInitial())

// Use in a parent component
function LineageContainer() {
  const [selectedNodes, setSelectedNodes] = useState(new Set())
  const [zoom, setZoom] = useState(0.85)
  const [nodesMap, setNodesMap] = useState({})

  const contextValue = {
    ...getInitial(),
    selectedNodes,
    setSelectedNodes,
    zoom,
    setZoom,
    nodesMap,
    setNodesMap,
    nodes: Object.values(nodesMap),
    edges: computeEdges(nodesMap),
  }

  return (
    <Provider value={contextValue}>
      <LineageGraph />
    </Provider>
  )
}

// Use in a child component
function LineageGraph() {
  const {
    selectedNodes,
    zoom,
    nodes,
    edges,
    setSelectedNodes,
    setZoom
  } = useLineage()

  const handleNodeClick = (nodeId) => {
    setSelectedNodes(new Set([nodeId]))
  }

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      zoom={zoom}
      onZoomChange={setZoom}
      onNodeClick={(_, node) => handleNodeClick(node.id)}
    />
  )
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment