Implementation:TobikoData Sqlmesh LineageLayoutBase

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

Overview

Base React component for rendering interactive lineage graphs using ReactFlow.

Description

LineageLayoutBase is a generic TypeScript/React component that provides the foundational layout system for visualizing data lineage in SQLMesh. It uses the @xyflow/react (ReactFlow) library to render nodes and edges, supporting interactive features like zoom, pan, node selection, and connected node highlighting.

The component is highly generic with type parameters for nodes, edges, and handles, making it reusable across different lineage contexts (model lineage, column lineage, etc.). It implements sophisticated node selection logic that recursively traverses the graph to identify all upstream (incomers) and downstream (outgoers) nodes.

Usage

Use this component as the base for any lineage visualization in SQLMesh. It handles the ReactFlow integration, viewport controls, node/edge selection state, and provides custom controls for filtering and zooming.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/Lineage/LineageLayoutBase.tsx

Signature

export function LineageLayoutBase<
  TNodeData extends LineageNodeData = LineageNodeData,
  TEdgeData extends LineageEdgeData = LineageEdgeData,
  TEdgeID extends string = EdgeId,
  TNodeID extends string = NodeId,
  TSourceID extends string = TNodeID,
  TTargetID extends string = TNodeID,
  TSourceHandleID extends string = PortId,
  TTargetHandleID extends string = PortId,
>({
  nodeTypes,
  edgeTypes,
  className,
  controls,
  useLineage,
  onNodeClick,
  onNodeDoubleClick,
  showControlOnlySelectedNodes = true,
  showControlZoomToSelectedNode = true,
}: { ... })

Import

import { LineageLayoutBase } from '@sqlmesh-common/components/Lineage/LineageLayoutBase'

I/O Contract

Inputs

Name	Type	Required	Description
useLineage	LineageContextHook	Yes	Custom hook providing lineage state and actions
nodeTypes	NodeTypes	No	Custom ReactFlow node component definitions
edgeTypes	EdgeTypes	No	Custom ReactFlow edge component definitions
className	string	No	Additional CSS classes for the component
controls	ReactNode/Function	No	Custom control buttons or render function
onNodeClick	Function	No	Handler for node click events
onNodeDoubleClick	Function	No	Handler for node double-click events
showControlOnlySelectedNodes	boolean	No	Show/hide the "only selected nodes" control (default: true)
showControlZoomToSelectedNode	boolean	No	Show/hide the "zoom to node" control (default: true)

Outputs

Name	Type	Description
ReactFlow Graph	JSX.Element	Interactive lineage visualization with nodes and edges
State Updates	void	Updates selected nodes, edges, and zoom level via context

Implementation Details

Key Features

Recursive Graph Traversal: `getAllIncomers()` and `getAllOutgoers()` recursively find all connected nodes with cycle detection
Smart Selection: Automatically highlights all nodes in the path between selected node and its dependencies/dependents
Zoom Controls: Integrated zoom with adaptive threshold (NODES_TRESHOLD_ZOOM for large graphs)
Dynamic Centering: `zoomToSelectedNode()` automatically centers viewport on selected node
Debounced Updates: Zoom state updates are debounced (200ms) to prevent excessive re-renders
Custom Controls: Support for "Only Selected Nodes" mode and "Zoom to Selected Node" actions

Algorithm Complexity

Graph Traversal: O(N + E) where N = nodes, E = edges (uses visited set to prevent cycles)
Edge Filtering: O(E) to identify edges connecting selected nodes
Zoom Update: Debounced with 200ms delay

ReactFlow Configuration

Zoom Range: Adaptive min zoom based on node count, max zoom = MAX_ZOOM
Rendering: Only visible elements rendered for performance
Interactions: Pan on scroll enabled, zoom on scroll enabled, double-click zoom disabled
Background: Dot grid pattern shown above ZOOM_THRESHOLD

Usage Examples

// Basic usage with model lineage
<LineageLayoutBase
  useLineage={useModelLineage}
  nodeTypes={{ node: ModelNode }}
  edgeTypes={{ edge: EdgeWithGradient }}
  showControlOnlySelectedNodes={true}
  showControlZoomToSelectedNode={true}
  onNodeClick={(event, node) => console.log('Node clicked:', node.id)}
/>

// With custom controls
<LineageLayoutBase
  useLineage={useModelLineage}
  controls={({ setCenter }) => (
    <CustomControlButton onClick={() => setCenter(0, 0, { zoom: 1 })}>
      Reset View
    </CustomControlButton>
  )}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment