Implementation:TobikoData Sqlmesh Editor Page

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

Overview

Main editor page component providing an integrated development environment for editing SQLMesh models with file explorer and code editor.

Description

PageEditor is the primary IDE interface in the SQLMesh web UI, combining a file explorer sidebar with a code editor workspace. The page uses lazy loading with React Suspense for performance optimization, loading heavy components (FileExplorer, Editor, LineageFlowProvider) only when needed. It provides model navigation, error handling integration with the notification center, and context-aware model selection.

Key features include conditional file explorer sidebar display based on module availability, integrated LineageFlowProvider context for column lineage visualization, handleClickModel callback for navigating to models from lineage graphs, error tracking via NotificationCenter with specific error keys, and loading states with spinners during component initialization.

The page architecture uses Page component wrapper for consistent layout and integrates with both useStoreContext (global app state) and useStoreProject (project-specific state) for state management.

Usage

Use this page as the main development interface for editing SQLMesh models, Python scripts, and other project files with integrated file navigation and lineage visualization.

Code Reference

Source Location

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

Signature

export default function PageEditor(): JSX.Element

Import

import PageEditor from '@library/pages/editor/Editor'

I/O Contract

Inputs

Source	Type	Description
modules.hasFiles	boolean	Determines if file explorer sidebar is shown
models	Map<string, ModelSQLMeshModel>	Available models for navigation
files	Map<string, ModelFile>	Project files

Outputs

Component	Type	Description
JSX.Element	React Component	Full editor page with sidebar and content area

Usage Examples

// Route configuration
<Route
  path={EnumRoutes.Editor}
  element={<PageEditor />}
/>

// Page structure:
// ┌──────────────┬─────────────────────────────┐
// │ File         │  Code Editor                │
// │ Explorer     │  ┌─────────────────────────┐│
// │ (optional)   │  │ SQL/Python Editor       ││
// │              │  │                         ││
// │ models/      │  │ SELECT * FROM ...       ││
// │ ├─ model1.sql│  │                         ││
// │ ├─ model2.sql│  │                         ││
// │ tests/       │  └─────────────────────────┘│
// └──────────────┴─────────────────────────────┘

// Callback: Handle model clicks from lineage graph
const handleClickModel = useCallback(
  function handleClickModel(modelName: string): void {
    const model = models.get(modelName)
    if (isNil(model)) return
    setLastSelectedModel(model)
  },
  [files, models]
)

// Callback: Handle lineage errors
const handleError = useCallback(function handleError(error: ErrorIDE): void {
  addError(EnumErrorKey.ColumnLineage, error)
}, [])

// Conditional sidebar rendering
{modules.hasFiles ? (
  <FileExplorer />
) : undefined}

// Loading states
<Suspense
  fallback={
    <Loading>
      <Spinner />
      <h3>Getting Files...</h3>
    </Loading>
  }
>
  <FileExplorerProvider>
    <FileExplorer />
  </FileExplorerProvider>
</Suspense>

// Lazy loading for performance
const FileExplorer = lazy(() => import('@components/fileExplorer/FileExplorer'))
const Editor = lazy(() => import('@components/editor/Editor'))
const LineageFlowProvider = lazy(() => import('@components/graph/context'))

Component Architecture

Page Layout

Page component wrapper provides consistent layout
sidebar prop: Optional FileExplorer (shown if modules.hasFiles)
content prop: Editor with LineageFlowProvider context

Lazy Loading Strategy

Component	Reason for Lazy Loading
FileExplorer	Large component with tree rendering
FileExplorerProvider	Context provider with state management
Editor	Heavy component with CodeMirror integration
LineageFlowProvider	Graph rendering with React Flow

State Management

Global State (useStoreContext): modules, models, lastSelectedModel
Project State (useStoreProject): files
Notification Center: Error tracking and display

Callbacks

handleClickModel: Navigate to model when clicked in lineage
handleError: Add errors to notification center with ColumnLineage key

Loading States

File Explorer: "Getting Files..."
Editor: "Getting Editor Ready..."
Both show spinner with message during initialization

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment