Implementation:TobikoData Sqlmesh EditorPreview
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Code_Editor, Data_Preview |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A tabbed preview panel that displays query results, lineage graphs, table data, diffs, and error messages for the active editor tab.
Description
EditorPreview is a sophisticated React component that provides a multi-tabbed interface for previewing various aspects of the code being edited. It dynamically shows or hides tabs based on available data, including data preview tables, rendered SQL queries, model lineage graphs, table diffs, and error messages. The component uses HeadlessUI's TabGroup for accessible tab management and lazy-loads the lineage graph component for performance optimization.
The component intelligently manages tab visibility based on the current state of preview data, automatically switching to the appropriate tab when new preview data becomes available (e.g., switching to the Table tab when preview data is loaded). It integrates with the notification center to display errors and automatically clears error notifications when preview data is refreshed. The component also provides a layout toggle button allowing users to switch between horizontal and vertical editor/preview layouts.
Usage
Use this component as the preview panel in the code editor to display dynamic results and visualizations. It automatically updates when preview data changes and handles various types of content including tables, SQL queries, lineage graphs, and error reports.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/editor/EditorPreview.tsx
Signature
export default function EditorPreview({
tab,
className,
}: {
tab: EditorTab
className?: string
}): JSX.Element
export const EnumEditorPreviewTabs = {
Query: 'Query',
Table: 'Data Preview',
Console: 'Logs',
Lineage: 'Lineage',
Diff: 'Diff',
Errors: 'Errors',
} as const
export type EditorPreviewTabs = KeyOf<typeof EnumEditorPreviewTabs>
Import
import EditorPreview from '@components/editor/EditorPreview'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| tab | EditorTab | Yes | The active editor tab to preview |
| className | string | No | Additional CSS classes for the container |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | JSX.Element | The rendered preview panel with dynamic tabs |
Available Preview Tabs
The component conditionally renders the following tabs:
- Data Preview: Displays table data when previewTable is available
- Query: Shows the rendered SQL query for remote files when previewQuery is available
- Lineage: Displays the model lineage graph for models when available
- Diff: Shows table differences when previewDiff is available
- Errors: Displays error messages when errors exist in the notification center
Tab Auto-Selection
The component automatically switches to the appropriate tab when:
// Auto-switch to Table tab when preview data loads
useEffect(() => {
if (isNotNil(previewTable)) {
setActiveTabIndex(tabs.indexOf(EnumEditorPreviewTabs.Table))
}
}, [previewTable])
// Auto-switch to Errors tab when errors occur
useEffect(() => {
if (showErrors) {
setActiveTabIndex(tabs.indexOf(EnumEditorPreviewTabs.Errors))
}
}, [showErrors])
Error Handling
The component automatically clears specific error types when preview data is refreshed:
- Fetchdf errors
- EvaluateModel errors
- RenderQuery errors
- ColumnLineage errors
- ModelLineage errors
- TableDiff errors
- Table errors
- SaveFile errors