Implementation:TobikoData Sqlmesh EditorFooter
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Code_Editor |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A React component that displays status indicators and metadata in the footer of the code editor.
Description
EditorFooter is a React component that renders the footer bar below the code editor, displaying important information about the current editor tab including save status, format status, language, SQL dialect, and SQLMesh file type. It provides visual indicators using colored lights to show whether a file is saved and formatted, and includes a dropdown selector for choosing SQL dialects when editing SQL files. The component automatically detects the file type based on the file path (model, test, audit, macro, hook, log, config, seed, metric, or schema) and displays it prominently.
The component integrates with the editor context to manage dialect selection and communicates with the editor engine through post messages when the dialect changes. It responds to changes in the dialects list and automatically sets the default dialect when a tab is opened.
Usage
Use this component to display contextual information and controls at the bottom of the code editor. It automatically appears when an editor tab is active and provides users with important status information and configuration options.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/editor/EditorFooter.tsx
Signature
export default function EditorFooter({ tab }: { tab: EditorTab }): JSX.Element
export type FileType =
| 'model' | 'test' | 'audit' | 'macro' | 'hook'
| 'log' | 'config' | 'seed' | 'metric' | 'schema' | 'unknown'
function getFileType(path?: string): FileType
Import
import EditorFooter from '@components/editor/EditorFooter'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| tab | EditorTab | Yes | The active editor tab containing file information and state |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | JSX.Element | The rendered footer bar with status indicators and controls |
Component Structure
The component displays the following indicators from left to right:
- Saved Indicator: Shows whether remote files have unsaved changes (green/red light)
- Formatted Indicator: Shows whether SQL files are formatted (green/red light)
- Language Indicator: Displays the programming language based on file extension
- Dialect Selector: Dropdown to select SQL dialect for models (when applicable)
- Dialect Display: Read-only dialect display for models with fixed dialects
- SQLMesh Type Indicator: Shows the type of SQLMesh file (model, test, macro, etc.)
File Type Detection
The component uses path-based detection to determine SQLMesh file types:
// Examples of file type detection
models/* → 'model'
tests/* → 'test'
macros/* → 'macro'
config.yaml → 'config'
schema.yaml → 'schema'