Implementation:TobikoData Sqlmesh ModelColumns
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Data_Lineage, Column_Level_Lineage |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
Concrete tool for displaying and managing column-level lineage in the SQLMesh lineage graph provided by the SQLMesh web client.
Description
ModelColumns is a React component that renders a list of columns for a model node in the lineage graph. It provides interactive column-level lineage exploration by allowing users to click on individual columns to fetch and display their upstream and downstream dependencies. The component manages active column states, handles API requests for column lineage data, displays column metadata (name, type, description), and integrates with ReactFlow handles for visual connection rendering. It supports filtering, source code preview, and loading states for async lineage fetching.
Usage
Use this component when rendering model nodes in the lineage graph that need to display their columns with interactive lineage exploration capabilities. Import it within the graph visualization system to enable column-level dependency tracking.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/graph/ModelColumns.tsx
Signature
export default function ModelColumns({
nodeId,
columns,
disabled,
className,
limit = 5,
withHandles = false,
withSource = false,
withDescription = true,
maxHeight = '50vh',
}: {
nodeId: string
columns: Column[]
disabled?: boolean
className?: string
limit?: number
withHandles?: boolean
withSource?: boolean
withDescription?: boolean
maxHeight?: string
}): JSX.Element
Import
import ModelColumns from '@components/graph/ModelColumns'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| nodeId | string | Yes | Unique identifier for the model node |
| columns | Column[] | Yes | Array of column objects with name, type, and description |
| disabled | boolean | No | Disables column interaction (e.g., for Python models) |
| className | string | No | Additional CSS classes |
| limit | number | No | Maximum columns to display before scrolling (default: 5) |
| withHandles | boolean | No | Enable ReactFlow handles for edge connections |
| withSource | boolean | No | Display source code preview on hover |
| withDescription | boolean | No | Show column descriptions (default: true) |
| maxHeight | string | No | Maximum height for scrollable column list (default: '50vh') |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Rendered column list with interactive lineage features |
Usage Examples
// Basic usage in a model node
<ModelColumns
nodeId="project.my_model"
columns={[
{ name: "user_id", type: "INT", description: "User identifier" },
{ name: "created_at", type: "TIMESTAMP", description: "Creation time" }
]}
/>
// Advanced usage with handles and source preview
<ModelColumns
nodeId="project.my_model"
columns={model.columns}
withHandles={true}
withSource={true}
withDescription={true}
limit={10}
maxHeight="60vh"
/>
// Disabled columns (e.g., for Python models)
<ModelColumns
nodeId="project.python_model"
columns={model.columns}
disabled={true}
/>