Implementation:TobikoData Sqlmesh Editor Container

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

Overview

Concrete tool for the main editor container component provided by the SQLMesh web client.

Description

This module provides the top-level Editor component that orchestrates the entire code editing experience in the SQLMesh UI. It manages split panes for code editing, preview, and inspection, coordinates tab management, and handles SQL execution via keyboard shortcuts (Cmd/Ctrl+Enter). The component integrates with the file explorer, model system, and lineage visualization.

Key features include:

Dynamic split pane layout with configurable horizontal/vertical splits
EditorMain component managing the active tab's editing context
Integration with CodeEditorDefault and CodeEditorRemoteFile
EditorInspector for model evaluation and SQL queries
EditorPreview for displaying query results and lineage
Custom SQL keymaps including Cmd+Enter to execute queries
Worker-based SQL formatting and dialect management

Usage

This component is rendered when a file or SQL tab is active. It automatically manages the editing context, handles file content changes, and coordinates with the backend for SQL execution and model evaluation.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/editor/Editor.tsx

Signature

function Editor(): JSX.Element

// Sub-components
function EditorEmpty(): JSX.Element
function EditorMain({ tab }: { tab: EditorTab }): JSX.Element

// Composed component structure
Editor.Empty = EditorEmpty
Editor.Loading = EditorEmpty
Editor.Main = EditorMain

Import

import Editor from '@components/editor/Editor'

I/O Contract

Inputs

Name	Type	Required	Description
tab	EditorTab	Yes (for EditorMain)	The active editor tab containing file and metadata
tab.file	ModelFile	Yes	The file being edited
tab.dialect	string	No	SQL dialect for the current tab
tab.id	string	Yes	Unique identifier for the tab

Outputs

Name	Type	Description
rendered	JSX.Element	The complete editor interface with split panes, code editor, and preview

Usage Examples

import Editor from '@components/editor/Editor'
import { useStoreEditor } from '~/context/editor'

function EditorPage() {
  const tab = useStoreEditor(s => s.tab)

  return (
    <div className="editor-container">
      <Editor />
    </div>
  )
}

// The Editor component automatically:
// 1. Shows EditorEmpty when no tab is selected
// 2. Renders EditorMain with split panes when tab exists
// 3. Handles Cmd+Enter to execute SQL queries
// 4. Manages preview pane visibility based on content
// 5. Integrates with inspector for model evaluation

// Example: Executing SQL via keyboard shortcut
// User presses Cmd+Enter (or Ctrl+Enter on Windows)
// -> Editor captures keymap event
// -> Calls fetchdfApiCommandsFetchdfPost with SQL content
// -> Updates preview pane with query results
// -> Displays any errors in notification center

// Example: Split pane layout calculation
// EditorMain calculates pane sizes dynamically:
// - Preview shown: [70, 30] (code 70%, preview 30%)
// - Preview hidden: [100, 0] (code 100%)
// - Inspector shown: [70, 30] (editor 70%, inspector 30%)
// - Inspector hidden: [100, 0] (editor 100%)

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment