Snapshots all four versioned Docusaurus sections at v6.1.0. Built on top of the version-cutting tooling work in chore/docs-cut-6.1.0-versions so the snapshot benefits from: - Auto-gen refresh before snapshotting (database pages from engine spec metadata, API reference from openapi.json, component pages from Storybook stories) — captured at the SHA we cut from rather than whatever happened to be on disk. - Data-import freeze: country list, feature flag table, database diagnostics, and component metadata are copied into snapshot-local `_versioned_data/` dirs so the historical version doesn't silently mutate when the source files change. - Depth-aware import-path rewriter that handles deeply-nested component MDX files referencing `../../../src/` from the snapshot. Versioning behavior: `lastVersion` stays at `current` for every section, so the canonical URLs (`/docs/...`, `/admin-docs/...`, `/developer-docs/...`, `/components/...`) continue to render content from master. The `current` version is consistently labeled "Next" with an `unreleased` banner, and `6.1.0` is a historical pin accessible only via its explicit version segment. Component playground: previously `disabled: true` in versions-config.json, now enabled and versioned. The plugin block in docusaurus.config.ts was already gated only by the `disabled` flag, so no other code changes were needed to bring it back online. The frozen `databases.json` in the snapshot is the canonical 80-database artifact from the latest committed state in master (preserved by the generator's input-hash cache), not a fallback regenerated from a local Flask environment.
6.7 KiB
title, sidebar_position
| title | sidebar_position |
|---|---|
| SQL Lab | 1 |
SQL Lab Extension Points
SQL Lab provides 4 extension points where extensions can contribute custom UI components. Each area serves a specific purpose and supports different types of customizations. These areas will evolve over time as new features are added to SQL Lab.
Layout Overview
┌──────────┬─────────────────────────────────────────┬─────────────┐
│ │ │ │
│ │ │ │
│ │ Editor │ │
│ │ │ │
│ Left │ │ Right │
│ Sidebar ├─────────────────────────────────────────┤ Sidebar │
│ │ │ │
│ │ Panels │ │
│ │ │ │
│ │ │ │
│ │ │ │
└──────────┴─────────────────────────────────────────┴─────────────┘
| Extension Point | ID | Views | Menus | Description |
|---|---|---|---|---|
| Left Sidebar | sqllab.leftSidebar |
— | ✓ | Menu actions for the database explorer |
| Editor | sqllab.editor |
✓* | ✓ | Custom editors + toolbar actions |
| Right Sidebar | sqllab.rightSidebar |
✓ | — | Custom panels (AI assistants, query analysis) |
| Panels | sqllab.panels |
✓ | ✓ | Custom tabs + toolbar actions (data profiling) |
*Editor views are contributed via Editor Contributions, not standard view contributions.
Customization Types
Views
Extensions can add custom views (React components) to Right Sidebar and Panels. Views appear as new panels or tabs in their respective areas.
Menus
Extensions can add toolbar actions to Left Sidebar, Editor, and Panels. Menu contributions support:
┌───────────────────────────────────────────────────────────────┐
│ [Button] [Button] [•••] │
├───────────────────────────────────────────────────────────────┤
│ Area Content │
└───────────────────────────────────────────────────────────────┘
| Action Type | Location | Use Case |
|---|---|---|
| Primary Actions | Toolbar buttons | Frequently used actions (e.g., run, refresh, add new) |
| Secondary Actions | 3-dot menu (•••) | Less common actions (e.g., export, settings) |
Custom Editors
Extensions can replace the default SQL editor with custom implementations (Monaco, CodeMirror, etc.). See Editor Contributions for details.
Examples
Adding a Panel
This example adds a "Data Profiler" panel to SQL Lab:
import React from 'react';
import { views } from '@apache-superset/core';
import DataProfilerPanel from './DataProfilerPanel';
views.registerView(
{ id: 'my-extension.data-profiler', name: 'Data Profiler' },
'sqllab.panels',
() => <DataProfilerPanel />,
);
Adding Actions to the Editor
This example adds primary, secondary, and context actions to the editor:
import { commands, menus, sqlLab } from '@apache-superset/core';
commands.registerCommand(
{ id: 'my-extension.format', title: 'Format Query', icon: 'FormatPainterOutlined' },
async () => {
const tab = sqlLab.getCurrentTab();
if (tab) {
const editor = await tab.getEditor();
// Format the SQL query
}
},
);
commands.registerCommand(
{ id: 'my-extension.explain', title: 'Explain Query' },
async () => {
const tab = sqlLab.getCurrentTab();
if (tab) {
const editor = await tab.getEditor();
// Show query explanation
}
},
);
commands.registerCommand(
{ id: 'my-extension.copy-as-cte', title: 'Copy as CTE' },
async () => {
const tab = sqlLab.getCurrentTab();
if (tab) {
const editor = await tab.getEditor();
// Copy selected text as CTE
}
},
);
menus.registerMenuItem(
{ view: 'builtin.editor', command: 'my-extension.format' },
'sqllab.editor',
'primary',
);
menus.registerMenuItem(
{ view: 'builtin.editor', command: 'my-extension.explain' },
'sqllab.editor',
'secondary',
);
menus.registerMenuItem(
{ view: 'builtin.editor', command: 'my-extension.copy-as-cte' },
'sqllab.editor',
'context',
);
Next Steps
- Contribution Types - Learn about other contribution types (commands, menus)
- Development - Set up your development environment
- Quick Start - Build a complete extension