Implementation:TobikoData Sqlmesh LineageLayout

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

Overview

Top-level React component that wraps lineage graph visualization with ReactFlow provider and layout management.

Description

LineageLayout is the main entry point component for rendering lineage graphs in SQLMesh's web UI. It wraps the entire lineage visualization in a ReactFlowProvider context to enable React Flow functionality, then renders LineageLayoutContainer (handles loading states and styling) and LineageLayoutBase (implements the actual graph rendering). The component accepts custom node and edge types, control components, event handlers for node interactions, and visibility controls for filtering selected nodes and zooming. All props are passed through to the base component while maintaining proper context boundaries.

Usage

Use this component as the root element when embedding lineage visualizations. It handles all necessary React Flow setup and provides a consistent container structure for lineage graphs.

Code Reference

Source Location

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

Signature

export function LineageLayout<
  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,
>({
  nodeTypes,
  edgeTypes,
  className,
  controls,
  isBuildingLayout,
  useLineage,
  onNodeClick,
  onNodeDoubleClick,
  showControlOnlySelectedNodes,
  showControlZoomToSelectedNode,
}: {
  useLineage: LineageContextHook<...>
  isBuildingLayout?: boolean
  nodeTypes?: NodeTypes
  edgeTypes?: EdgeTypes
  className?: string
  showControlOnlySelectedNodes?: boolean
  showControlZoomToSelectedNode?: boolean
  controls?: React.ReactNode | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
  onNodeClick?: (event: React.MouseEvent, node: LineageNode<TNodeData, TNodeID>) => void
  onNodeDoubleClick?: (event: React.MouseEvent, node: LineageNode<TNodeData, TNodeID>) => void
})

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
useLineage	LineageContextHook	Yes	Hook to access lineage context
nodeTypes	NodeTypes	No	Custom React Flow node type definitions
edgeTypes	EdgeTypes	No	Custom React Flow edge type definitions
className	string	No	Additional CSS classes for container
controls	React.ReactNode or Function	No	Custom control components or render function
isBuildingLayout	boolean	No	Whether layout calculation is in progress
showControlOnlySelectedNodes	boolean	No	Whether to show "only selected nodes" toggle
showControlZoomToSelectedNode	boolean	No	Whether to show "zoom to node" control
onNodeClick	Function	No	Handler for node click events
onNodeDoubleClick	Function	No	Handler for node double-click events

Outputs

Name	Type	Description
Component	React.ReactElement	Complete lineage visualization with controls and event handling

Usage Examples

import { LineageLayout } from '@sqlmesh-common/components/Lineage/LineageLayout'
import { useLineage } from './lineageContext'

// Custom node types
const nodeTypes = {
  modelNode: ModelNode,
  sourceNode: SourceNode,
}

// Custom edge types
const edgeTypes = {
  gradient: EdgeWithGradient,
}

function LineageVisualization() {
  const handleNodeClick = (event, node) => {
    console.log('Node clicked:', node.id)
  }

  const handleNodeDoubleClick = (event, node) => {
    // Navigate to model details
    router.push(`/models/${node.id}`)
  }

  return (
    <LineageLayout
      useLineage={useLineage}
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes}
      className="h-screen w-screen"
      isBuildingLayout={false}
      showControlOnlySelectedNodes={true}
      showControlZoomToSelectedNode={true}
      controls={({ setCenter }) => (
        <div className="custom-controls">
          <button onClick={() => setCenter(0, 0)}>Reset View</button>
        </div>
      )}
      onNodeClick={handleNodeClick}
      onNodeDoubleClick={handleNodeDoubleClick}
    />
  )
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment