Implementation:TobikoData Sqlmesh SQLMeshModel Extension

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

Overview

A CodeMirror extension that provides visual decorations for SQLMesh model and column references in the editor.

Description

SQLMeshModel is a CodeMirror ViewPlugin extension that applies syntax highlighting decorations to SQLMesh model names and column references within the code editor. It dynamically identifies and highlights model references and column names as users type, providing visual feedback about which identifiers are recognized SQLMesh entities. The extension uses a decoration system to apply CSS classes to text ranges, allowing for customizable styling of models and columns.

The extension integrates with the help module which contains the core decoration logic, and updates decorations in real-time as the editor content changes. It supports both action mode (when meta/cmd key is pressed) and normal mode, with different visual styles for each. The plugin tracks the active model being edited and highlights its columns distinctively from other model's columns.

Usage

Use this extension to provide visual highlighting of SQLMesh models and columns in the code editor. Add it to CodeMirror's extension array when configuring the editor for SQL files that reference SQLMesh models.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/editor/extensions/SQLMeshModel.ts

Signature

export default function SQLMeshModel(
  models: Map<string, ModelSQLMeshModel>,
  columns: Set<string>,
  isActionMode: boolean,
  model?: ModelSQLMeshModel,
): Extension

Import

import SQLMeshModel from '@components/editor/extensions/SQLMeshModel'

I/O Contract

Inputs

Name	Type	Required	Description
models	Map<string, ModelSQLMeshModel>	Yes	Map of all SQLMesh models for reference detection
columns	Set<string>	Yes	Set of all column names to highlight
isActionMode	boolean	Yes	Whether action mode is active (meta/cmd key pressed)
model	ModelSQLMeshModel	No	The currently active model being edited

Outputs

Name	Type	Description
Extension	Extension	CodeMirror extension that applies decorations

Implementation

The extension is implemented as a ViewPlugin:

return ViewPlugin.fromClass(
  class SQLMeshModelView {
    decorations: DecorationSet = Decoration.set([])

    constructor(readonly view: EditorView) {
      this.decorations = getDecorations(
        models,
        view,
        columns,
        isActionMode,
        model,
      )
    }

    update(viewUpdate: ViewUpdate): void {
      this.decorations = getDecorations(
        models,
        viewUpdate.view,
        columns,
        isActionMode,
        model,
      )
    }
  },
  {
    decorations: value => value.decorations,
  },
)

Decoration Logic

The extension delegates to the getDecorations helper function from the help module, which:

Scans visible ranges for model and column names
Applies CSS classes to matching text
Differentiates between active model columns and other columns
Handles both action mode and normal mode styling

CSS Classes Applied

The extension applies the following CSS classes:

sqlmesh-model: Applied to model name references
sqlmesh-model--is-active-model: Applied to the currently edited model
sqlmesh-model--is-action-mode: Applied when action mode is active
sqlmesh-model__column: Applied to column references
sqlmesh-model__column--is-original: Applied to original column names
sqlmesh-model__column--is-alias: Applied to aliased column names
sqlmesh-model__column--is-active-model: Applied to columns of the active model
sqlmesh-model__column--is-action-mode: Applied when action mode is active

Performance

The extension efficiently updates decorations:

Only processes visible ranges for performance
Reuses decoration sets when possible
Updates on viewport changes and content modifications

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment