Implementation:TobikoData Sqlmesh Graph Context

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

Overview

Concrete tool for managing shared state across lineage graph components provided by the SQLMesh web client.

Description

LineageFlowProvider is a React context provider that manages the centralized state for the lineage graph visualization system. It provides active edge tracking, node selection state, column connection management, lineage data caching, and visibility toggles (columns, connected nodes, impacted nodes, secondary nodes, background). The context exposes methods for edge manipulation (add, remove, check), column activation tracking, and model click handling. It serves as the single source of truth for all lineage-related state, enabling coordinated updates across ModelLineage, ModelColumns, and other graph components.

Usage

Wrap the lineage graph components with LineageFlowProvider to enable shared state management. Access the context using the useLineageFlow hook in child components.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/graph/context.tsx

Signature

export default function LineageFlowProvider({
  handleError,
  handleClickModel,
  children,
  showColumns = false,
  showConnected = false,
  showControls = true,
}: {
  children: React.ReactNode
  handleClickModel?: (modelName: string) => void
  handleError?: (error: ErrorIDE) => void
  showColumns?: boolean
  showConnected?: boolean
  showControls?: boolean
}): JSX.Element

export function useLineageFlow(): LineageFlow

Import

import LineageFlowProvider, { useLineageFlow } from '@components/graph/context'

I/O Contract

Inputs

Name	Type	Required	Description
children	React.ReactNode	Yes	Child components that consume lineage context
handleClickModel	(modelName: string) => void	No	Callback when a model is clicked
handleError	(error: ErrorIDE) => void	No	Error handler callback
showColumns	boolean	No	Initial state for column visibility (default: false)
showConnected	boolean	No	Initial state for connected nodes visibility (default: false)
showControls	boolean	No	Show graph controls (default: true)

Outputs

Name	Type	Description
JSX.Element	React component	Provider wrapping children with lineage context
LineageFlow	Context value	Shared state and methods via useLineageFlow hook

Usage Examples

// Provider setup
<LineageFlowProvider
  showColumns={true}
  showConnected={false}
  handleClickModel={(name) => navigateToModel(name)}
  handleError={(error) => showNotification(error)}
>
  <ModelLineage model={currentModel} />
</LineageFlowProvider>

// Consuming context in child component
function MyGraphComponent() {
  const {
    activeEdges,
    connections,
    withColumns,
    isActiveColumn,
    addActiveEdges,
    removeActiveEdges,
    setWithColumns,
  } = useLineageFlow()

  // Check if column is active
  const isActive = isActiveColumn('project.model', 'column_name')

  // Add new column connections
  addActiveEdges([
    ['left::model::column', 'right::upstream::col'],
    ['left::downstream::col', 'right::model::column']
  ])

  // Toggle column visibility
  setWithColumns(!withColumns)

  return <div>Graph Component</div>
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment