Implementation:TobikoData Sqlmesh ModelNodeHeaderHandles

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

Overview

ModelNodeHeaderHandles renders the header section of model nodes in lineage graphs, including connection handles, selection controls, model labels, and type badges.

Description

The ModelNodeHeaderHandles component provides the interactive header for model nodes in React Flow graphs. It displays connection handles on the left (target) and right (source) sides when specified, showing circular arrow icons that enable visual edge connections. The component includes an optional selection checkbox that allows users to multi-select nodes for batch operations. The header displays the model type badge (e.g., SQL, CTE, external) and a truncated model label with full text on hover. An optional column count badge shows the number of columns in the model. The label supports click navigation for interactive nodes, and the entire header can be configured as draggable for graph manipulation.

Usage

Use ModelNodeHeaderHandles as the header component within custom React Flow node implementations for SQLMesh model lineage visualization. It provides standardized visual presentation and interaction patterns.

Code Reference

Source Location

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

Signature

export default function ModelNodeHeaderHandles({
  id,
  className,
  hasLeft = false,
  hasRight = false,
  isSelected = false,
  isDraggable = false,
  label,
  type,
  count,
  handleClick,
  handleSelect,
}: {
  id: string
  label: string
  type?: LineageNodeModelType
  hasLeft?: boolean
  hasRight?: boolean
  count?: number
  className?: string
  isSelected?: boolean
  isDraggable?: boolean
  handleClick?: (e: MouseEvent) => void
  handleSelect?: (e: MouseEvent) => void
}): JSX.Element

Import

import ModelNodeHeaderHandles from '@library/components/graph/ModelNodeHeaderHandles'

I/O Contract

Inputs

Name	Type	Required	Description
id	string	Yes	Unique identifier for the node
label	string	Yes	Display name for the model
type	LineageNodeModelType	No	Model type for badge display
hasLeft	boolean	No	Show left (target) connection handle
hasRight	boolean	No	Show right (source) connection handle
count	number	No	Column count to display
className	string	No	Additional CSS classes
isSelected	boolean	No	Whether node is selected
isDraggable	boolean	No	Whether node can be dragged
handleClick	Function	No	Click handler for label navigation
handleSelect	Function	No	Click handler for selection checkbox

Outputs

Name	Type	Description
JSX.Element	React component	Header with handles, label, and controls

Usage Examples

import ModelNodeHeaderHandles from '@library/components/graph/ModelNodeHeaderHandles'

function CustomModelNode({ id, data }) {
  const handleNavigate = () => {
    console.log('Navigate to model:', id)
  }

  const handleToggleSelect = () => {
    console.log('Toggle selection:', id)
  }

  return (
    <div className="model-node">
      <ModelNodeHeaderHandles
        id={id}
        label={data.label}
        type={data.type}
        hasLeft={true}
        hasRight={true}
        count={data.columnCount}
        isDraggable={true}
        handleClick={handleNavigate}
        handleSelect={handleToggleSelect}
      />
    </div>
  )
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment