Implementation:TobikoData Sqlmesh ModelNode

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

Overview

ModelNode is a custom React Flow node component that renders SQLMesh models with visual styling, column displays, and interactive behaviors in lineage graphs.

Description

The ModelNode component extends React Flow's node system to display SQLMesh models with rich visual information and interactivity. It applies dynamic styling based on model type (SQL, CTE, external, seed, unknown), node state (selected, highlighted, active), and relationship to other nodes. The component supports expandable column views that appear on hover, selection, or when columns have active connections. Column data is intelligently merged from both model metadata and lineage information, with type normalization for STRUCT columns. The component implements selection and navigation handlers, preventing interactions on non-interactive node types like CTEs and the main node itself.

Usage

Use ModelNode as the custom node renderer for React Flow graphs displaying SQLMesh model lineage and dependencies. It provides the visual representation and interaction layer for model nodes.

Code Reference

Source Location

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

Signature

export default function ModelNode({
  id,
  data,
  sourcePosition,
  targetPosition,
}: NodeProps): JSX.Element

export const EnumLineageNodeModelType = {
  ...ModelType,
  cte: 'cte',
  unknown: 'unknown',
} as const

export type LineageNodeModelType = KeyOf<typeof EnumLineageNodeModelType>

Import

import ModelNode, { EnumLineageNodeModelType } from '@library/components/graph/ModelNode'

I/O Contract

Inputs

Name	Type	Required	Description
id	string	Yes	Unique identifier for the node
data	GraphNodeData	Yes	Node data containing model type, label, and configuration
sourcePosition	Position	No	React Flow position for source handle
targetPosition	Position	No	React Flow position for target handle

Outputs

Name	Type	Description
JSX.Element	React component	Styled node with header, optional column list, and handles

Usage Examples

import { ReactFlow } from 'reactflow'
import ModelNode from '@library/components/graph/ModelNode'

const nodeTypes = {
  model: ModelNode,
}

function LineageGraph() {
  const nodes = [
    {
      id: 'model_1',
      type: 'model',
      data: {
        type: 'sql',
        label: 'my_schema.my_model',
        withColumns: false,
      },
      position: { x: 0, y: 0 },
    },
  ]

  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
    />
  )
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment