Implementation:TobikoData Sqlmesh EditorInspector

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

Overview

Concrete tool for the editor inspector sidebar providing model evaluation and SQL execution capabilities in the SQLMesh web client.

Description

This module provides a collapsible inspector panel that appears beside the code editor, offering different functionality based on the file type. For SQLMesh models, it provides tabs for model evaluation, column inspection, and table diff operations. For custom SQL tabs, it offers query execution and diff capabilities. The inspector integrates with the API layer to execute operations and display results in the preview pane.

Key features include:

Tabbed interface with Evaluate, Columns, and Diff tabs for models
FormActionsModel for model evaluation with date range and limit controls
FormActionsCustomSQL for running ad-hoc SQL queries
FormDiffModel for comparing model versions across environments
FormDiff for comparing arbitrary tables
Loading states with spinner and cancel buttons
Input validation with disabled states for incomplete forms
SQL formatting integration via engine worker

Usage

The inspector automatically renders appropriate content based on the active editor tab. Developers interact with it through form controls to evaluate models, run queries, or generate table diffs. Results appear in the preview pane below the editor.

Code Reference

Source Location

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

Signature

function EditorInspector({
  tab,
  isOpen = true,
  toggle,
}: {
  tab: EditorTab
  isOpen?: boolean
  toggle?: () => void
}): JSX.Element

// Internal sub-components
function InspectorModel({ tab, model, isOpen, toggle }: { ... }): JSX.Element
function InspectorSql({ tab, isOpen, toggle }: { ... }): JSX.Element
function FormActionsModel({ model }: { model: ModelSQLMeshModel }): JSX.Element
function FormActionsCustomSQL({ tab }: { tab: EditorTab }): JSX.Element
function FormDiffModel({ tab, model, list, target }: { ... }): JSX.Element
function FormDiff(): JSX.Element

Import

import EditorInspector from '@components/editor/EditorInspector'

I/O Contract

Inputs

Name	Type	Required	Description
tab	EditorTab	Yes	The active editor tab
isOpen	boolean	No	Whether inspector is expanded (default: true)
toggle	function	No	Callback to toggle inspector visibility

Outputs

Name	Type	Description
rendered	JSX.Element	The inspector panel with forms and controls

Usage Examples

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

function EditorWithInspector() {
  const tab = useStoreEditor(s => s.tab)
  const [isOpen, setIsOpen] = useState(true)

  return (
    <div className="flex">
      <div className="flex-1">
        {/* Code editor */}
      </div>
      <div className="w-80">
        <EditorInspector
          tab={tab}
          isOpen={isOpen}
          toggle={() => setIsOpen(prev => !prev)}
        />
      </div>
    </div>
  )
}

// Example: Model Evaluation Flow
// 1. User selects "Evaluate" tab in inspector
// 2. Fills in form fields:
//    - Start Date: 02/11/2023
//    - End Date: 02/13/2023
//    - Execution Time: 02/13/2023
//    - Limit: 1000
// 3. Clicks "Evaluate" button
// 4. Inspector calls:
//    - useApiRender to get rendered SQL query
//    - useApiEvaluate to execute and get results
// 5. Results displayed in preview pane below editor

// Example: Custom SQL Execution
// 1. User writes SQL in local tab: "SELECT * FROM customers LIMIT 10"
// 2. Inspector shows "Run Query" tab
// 3. User clicks "Run Query" or presses Cmd+Enter
// 4. Inspector calls useApiFetchdf with SQL content
// 5. Query results appear in preview pane as table

// Example: Table Diff Between Environments
// 1. User selects "Diff" tab in inspector
// 2. Form shows:
//    - Source: dev (dropdown)
//    - Target: prod (read-only, current environment)
//    - Limit: 50
//    - ON: s.id = t.id (optional join condition)
//    - WHERE: id > 10 (optional filter)
// 3. User clicks "Get Diff"
// 4. Inspector calls useApiTableDiff
// 5. Diff results displayed in preview pane

// Example: SQL Formatting
// In FormActionsCustomSQL, user clicks "Format" button:
// -> Sends message to engine worker: { topic: 'format', payload: { sql, dialect } }
// -> Worker formats SQL using SQLGlot
// -> Returns formatted SQL
// -> Editor content updated with formatted code

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment