Implementation:TobikoData Sqlmesh Editor Extensions Help

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

Overview

Helper functions for creating CodeMirror decorations that highlight SQLMesh models and columns in the editor.

Description

Editor_Extensions_Help provides the core decoration logic for highlighting SQLMesh models and columns within the CodeMirror editor. It includes functions for finding models and columns from mouse events, creating decorations with appropriate CSS classes, and scanning text for model and column references using regular expressions. The module handles the complex logic of identifying which text ranges should be decorated and with what styling.

The module implements intelligent pattern matching that handles both standard and quoted identifier formats (e.g., "schema"."table" vs schema.table), and distinguishes between original columns (used in SELECT or expressions) and aliased columns (used in aliases or column definitions). It validates that column references have appropriate surrounding characters (dots, parentheses, spaces) to avoid false matches with keywords or other identifiers.

Usage

Use these helper functions when implementing editor extensions that need to highlight SQLMesh entities. The functions are primarily used by the SQLMeshModel extension to apply decorations, and for handling click events on models and columns in the editor.

Code Reference

Source Location

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

Signature

export function findModel(
  event: MouseEvent,
  models: Map<string, ModelSQLMeshModel>,
): ModelSQLMeshModel | undefined

export function findColumn(
  event: MouseEvent,
  model: ModelSQLMeshModel,
): Column | undefined

export function getDecorations(
  models: Map<string, ModelSQLMeshModel>,
  view: EditorView,
  columns: Set<string>,
  isActionMode: boolean,
  model?: ModelSQLMeshModel,
): DecorationSet

Import

import { findModel, findColumn, getDecorations } from '@components/editor/extensions/help'

I/O Contract

findModel Function

Name	Type	Required	Description
event	MouseEvent	Yes	Mouse event with target element
models	Map<string, ModelSQLMeshModel>	Yes	Map of available models

Returns: ModelSQLMeshModel | undefined - The clicked model if found

findColumn Function

Name	Type	Required	Description
event	MouseEvent	Yes	Mouse event with target element
model	ModelSQLMeshModel	Yes	The model to search for columns

Returns: Column | undefined - The clicked column if found

getDecorations Function

Name	Type	Required	Description
models	Map<string, ModelSQLMeshModel>	Yes	Map of all models
view	EditorView	Yes	CodeMirror editor view
columns	Set<string>	Yes	Set of all column names
isActionMode	boolean	Yes	Whether action mode is active
model	ModelSQLMeshModel	No	Currently active model

Returns: DecorationSet - CodeMirror decoration set to apply

1. Core Functions ==

Finding Models and Columns

Extract model and column information from clicked elements:

// Find model from click event
const modelName = el.getAttribute('model') ?? el.parentElement?.getAttribute('model')
return models.get(modelName)

// Find column from click event
const columnName = el.getAttribute('column') ?? el.parentElement?.getAttribute('column')
return model.columns.find(c => c.name === columnName)

Creating Decorations

The module creates two types of decorations:

// Model decoration
function createMarkDecorationModel({ model, isActionMode, isActiveModel }) {
  return Decoration.mark({
    attributes: {
      class: clsx(
        'sqlmesh-model',
        isActiveModel && '--is-active-model',
        isActionMode && '--is-action-mode',
      ),
      model,
    },
  })
}

// Column decoration
function createMarkDecorationColumn({ column, isOriginalColumn, isActionMode, isActiveModel }) {
  return Decoration.mark({
    attributes: {
      class: clsx(
        'sqlmesh-model__column',
        isOriginalColumn ? '--is-original' : '--is-alias',
        isActiveModel && '--is-active-model',
        isActionMode && '--is-action-mode',
      ),
      column,
    },
  })
}

Pattern Matching

Supports multiple identifier formats:

// Standard format: schema.table
const regex = new RegExp(`\\b${name}\\b`, 'ig')

// Quoted format: "schema"."table"
const regex_normalized = new RegExp(
  `\\b${alternativeNameFormat(name)}\\b`,
  'ig',
)

function alternativeNameFormat(modelName: string): string {
  return modelName.includes('"')
    ? modelName
    : modelName.split('.').map(name => `"${name}"`).join('.')
}

Column Context Validation

Validates column references have appropriate surrounding characters:

const validLeftCharColumn = new Set(['.', '(', '[', ' ', '\n'])
const validRightCharColumn = new Set([':', ')', ',', ']', ' ', '\n'])

// Check that column is in valid context
if (
  (isNotNil(leftChar) && isFalse(validLeftCharColumn.has(leftChar))) ||
  (isNotNil(rightChar) && isFalse(validRightCharColumn.has(rightChar)))
)
  return // Skip this match

Original vs Alias Detection

Distinguishes between original and aliased columns:

function isOriginalColumn(column: string): boolean {
  return (
    column.startsWith('.') ||  // table.column
    column.endsWith(':') ||    // column: alias
    column.startsWith('(') ||  // function(column)
    column.endsWith(')')       // function(column)
  )
}

Performance Optimization

The decoration system is optimized for performance:

Only processes visible ranges in the editor
Uses a visited set to avoid processing the same name multiple times
Sorts decoration ranges by position for efficient application
Reuses decoration objects where possible

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment