QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: Reorganize and improve developer portal documentation (#36005)

Browse Source
This commit is contained in:
Michael S. Molina
2025-11-06 16:50:31 -03:00
committed by GitHub
parent 2f2128ac48
commit 208b1f7fa3
43 changed files with 708 additions and 5081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

772
docs/developer_portal/api/frontend.md
View File

@@ -1,772 +0,0 @@
---
title: Frontend API Reference
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Frontend Extension API Reference
The `@apache-superset/core` package provides comprehensive APIs for frontend extensions to interact with Apache Superset. All APIs are versioned and follow semantic versioning principles.
## Core APIs
### Extension Context
Every extension receives a context object during activation that provides access to the extension system.
```typescript
interface ExtensionContext {
// Unique extension identifier
extensionId: string;
// Extension metadata
extensionPath: string;
extensionUri: Uri;
// Storage paths
globalStorageUri: Uri;
workspaceStorageUri: Uri;
// Subscription management
subscriptions: Disposable[];
// State management
globalState: Memento;
workspaceState: Memento;
// Extension-specific APIs
registerView(viewId: string, component: React.Component): Disposable;
registerCommand(commandId: string, handler: CommandHandler): Disposable;
}
```
### Lifecycle Methods
```typescript
// Required: Called when extension is activated
export function activate(context: ExtensionContext): void | Promise<void> {
console.log('Extension activated');
}
// Optional: Called when extension is deactivated
export function deactivate(): void | Promise<void> {
console.log('Extension deactivated');
}
```
## SQL Lab APIs
The `sqlLab` namespace provides APIs specific to SQL Lab functionality.
### Query Management
```typescript
// Get current query editor content
sqlLab.getCurrentQuery(): string | undefined
// Get active tab information
sqlLab.getCurrentTab(): Tab | undefined
// Get all open tabs
sqlLab.getTabs(): Tab[]
// Get available databases
sqlLab.getDatabases(): Database[]
// Get schemas for a database
sqlLab.getSchemas(databaseId: number): Promise<Schema[]>
// Get tables for a schema
sqlLab.getTables(databaseId: number, schema: string): Promise<Table[]>
// Insert text at cursor position
sqlLab.insertText(text: string): void
// Replace entire query
sqlLab.replaceQuery(query: string): void
// Execute current query
sqlLab.executeQuery(): Promise<QueryResult>
// Stop query execution
sqlLab.stopQuery(queryId: string): Promise<void>
```
### Event Subscriptions
```typescript
// Query execution events
sqlLab.onDidQueryRun(
listener: (event: QueryRunEvent) => void
): Disposable
sqlLab.onDidQueryComplete(
listener: (event: QueryCompleteEvent) => void
): Disposable
sqlLab.onDidQueryFail(
listener: (event: QueryFailEvent) => void
): Disposable
// Editor events
sqlLab.onDidChangeEditorContent(
listener: (content: string) => void
): Disposable
sqlLab.onDidChangeActiveTab(
listener: (tab: Tab) => void
): Disposable
// Panel events
sqlLab.onDidOpenPanel(
listener: (panel: Panel) => void
): Disposable
sqlLab.onDidClosePanel(
listener: (panel: Panel) => void
): Disposable
```
### Types
```typescript
interface Tab {
id: string;
title: string;
query: string;
database: Database;
schema?: string;
isActive: boolean;
queryId?: string;
status?: 'pending' | 'running' | 'success' | 'error';
}
interface Database {
id: number;
name: string;
backend: string;
allows_subquery: boolean;
allows_ctas: boolean;
allows_cvas: boolean;
}
interface QueryResult {
queryId: string;
status: 'success' | 'error';
data?: any[];
columns?: Column[];
error?: string;
startTime: number;
endTime: number;
rows: number;
}
```
## Commands API
Register and execute commands within Superset.
### Registration
```typescript
interface CommandHandler {
execute(...args: any[]): any | Promise<any>;
isEnabled?(): boolean;
isVisible?(): boolean;
}
// Register a command
commands.registerCommand(
commandId: string,
handler: CommandHandler
): Disposable
// Register with metadata
commands.registerCommand(
commandId: string,
metadata: CommandMetadata,
handler: (...args: any[]) => any
): Disposable
interface CommandMetadata {
title: string;
category?: string;
icon?: string;
enablement?: string;
when?: string;
}
```
### Execution
```typescript
// Execute a command
commands.executeCommand<T>(
commandId: string,
...args: any[]
): Promise<T>
// Get all registered commands
commands.getCommands(): Promise<string[]>
// Check if command exists
commands.hasCommand(commandId: string): boolean
```
### Built-in Commands
```typescript
// SQL Lab commands
'sqllab.executeQuery'
'sqllab.formatQuery'
'sqllab.saveQuery'
'sqllab.shareQuery'
'sqllab.downloadResults'
// Editor commands
'editor.action.formatDocument'
'editor.action.commentLine'
'editor.action.findReferences'
// Extension commands
'extensions.installExtension'
'extensions.uninstallExtension'
'extensions.enableExtension'
'extensions.disableExtension'
```
## UI Components
Pre-built components from `@apache-superset/core` for consistent UI.
### Basic Components
```typescript
import {
Button,
Input,
Select,
Checkbox,
Radio,
Switch,
Slider,
DatePicker,
TimePicker,
Tooltip,
Popover,
Modal,
Drawer,
Alert,
Message,
Notification,
Spin,
Progress
} from '@apache-superset/core';
```
### Data Display
```typescript
import {
Table,
List,
Card,
Collapse,
Tabs,
Tag,
Badge,
Statistic,
Timeline,
Tree,
Empty,
Result
} from '@apache-superset/core';
```
### Form Components
```typescript
import {
Form,
FormItem,
FormList,
InputNumber,
TextArea,
Upload,
Rate,
Cascader,
AutoComplete,
Mentions
} from '@apache-superset/core';
```
## Authentication API
Access authentication and user information.
```typescript
// Get current user
authentication.getCurrentUser(): User | undefined
interface User {
id: number;
username: string;
email: string;
firstName: string;
lastName: string;
roles: Role[];
isActive: boolean;
isAnonymous: boolean;
}
// Get CSRF token for API requests
authentication.getCSRFToken(): Promise<string>
// Check permissions
authentication.hasPermission(
permission: string,
resource?: string
): boolean
// Get user preferences
authentication.getPreferences(): UserPreferences
// Update preferences
authentication.setPreference(
key: string,
value: any
): Promise<void>
```
## Storage API
Persist data across sessions.
### Global Storage
```typescript
// Shared across all workspaces
const globalState = context.globalState;
// Get value
const value = globalState.get<T>(key: string): T | undefined
// Set value
await globalState.update(key: string, value: any): Promise<void>
// Get all keys
globalState.keys(): readonly string[]
```
### Workspace Storage
```typescript
// Specific to current workspace
const workspaceState = context.workspaceState;
// Same API as globalState
workspaceState.get<T>(key: string): T | undefined
workspaceState.update(key: string, value: any): Promise<void>
workspaceState.keys(): readonly string[]
```
### Secrets Storage
```typescript
// Secure storage for sensitive data
secrets.store(key: string, value: string): Promise<void>
secrets.get(key: string): Promise<string | undefined>
secrets.delete(key: string): Promise<void>
```
## Events API
Subscribe to and emit custom events.
```typescript
// Create an event emitter
const onDidChange = new EventEmitter<ChangeEvent>();
// Expose as event
export const onChange = onDidChange.event;
// Fire event
onDidChange.fire({
type: 'update',
data: newData
});
// Subscribe to event
const disposable = onChange((event) => {
console.log('Changed:', event);
});
// Cleanup
disposable.dispose();
```
## Window API
Interact with the UI window.
### Notifications
```typescript
// Show info message
window.showInformationMessage(
message: string,
...items: string[]
): Promise<string | undefined>
// Show warning
window.showWarningMessage(
message: string,
...items: string[]
): Promise<string | undefined>
// Show error
window.showErrorMessage(
message: string,
...items: string[]
): Promise<string | undefined>
// Show with options
window.showInformationMessage(
message: string,
options: MessageOptions,
...items: MessageItem[]
): Promise<MessageItem | undefined>
interface MessageOptions {
modal?: boolean;
detail?: string;
}
```
### Input Dialogs
```typescript
// Show input box
window.showInputBox(
options?: InputBoxOptions
): Promise<string | undefined>
interface InputBoxOptions {
title?: string;
prompt?: string;
placeHolder?: string;
value?: string;
password?: boolean;
validateInput?(value: string): string | null;
}
// Show quick pick
window.showQuickPick(
items: string[] | QuickPickItem[],
options?: QuickPickOptions
): Promise<string | QuickPickItem | undefined>
interface QuickPickOptions {
title?: string;
placeHolder?: string;
canPickMany?: boolean;
matchOnDescription?: boolean;
matchOnDetail?: boolean;
}
```
### Progress
```typescript
// Show progress
window.withProgress<T>(
options: ProgressOptions,
task: (progress: Progress<{message?: string}>) => Promise<T>
): Promise<T>
interface ProgressOptions {
location: ProgressLocation;
title?: string;
cancellable?: boolean;
}
// Example usage
await window.withProgress(
{
location: ProgressLocation.Notification,
title: "Processing",
cancellable: true
},
async (progress) => {
progress.report({ message: 'Step 1...' });
await step1();
progress.report({ message: 'Step 2...' });
await step2();
}
);
```
## Workspace API
Access workspace information and configuration.
```typescript
// Get workspace folders
workspace.workspaceFolders: readonly WorkspaceFolder[]
// Get configuration
workspace.getConfiguration(
section?: string
): WorkspaceConfiguration
// Update configuration
workspace.getConfiguration('myExtension')
.update('setting', value, ConfigurationTarget.Workspace)
// Watch for configuration changes
workspace.onDidChangeConfiguration(
listener: (e: ConfigurationChangeEvent) => void
): Disposable
// File system operations
workspace.fs.readFile(uri: Uri): Promise<Uint8Array>
workspace.fs.writeFile(uri: Uri, content: Uint8Array): Promise<void>
workspace.fs.delete(uri: Uri): Promise<void>
workspace.fs.rename(oldUri: Uri, newUri: Uri): Promise<void>
workspace.fs.copy(source: Uri, destination: Uri): Promise<void>
workspace.fs.createDirectory(uri: Uri): Promise<void>
workspace.fs.readDirectory(uri: Uri): Promise<[string, FileType][]>
workspace.fs.stat(uri: Uri): Promise<FileStat>
```
## HTTP Client API
Make HTTP requests from extensions.
```typescript
import { api } from '@apache-superset/core';
// GET request
const response = await api.get('/api/v1/chart/');
// POST request
const response = await api.post('/api/v1/chart/', {
data: chartData
});
// PUT request
const response = await api.put('/api/v1/chart/123', {
data: updatedData
});
// DELETE request
const response = await api.delete('/api/v1/chart/123');
// Custom headers
const response = await api.get('/api/v1/chart/', {
headers: {
'X-Custom-Header': 'value'
}
});
// Query parameters
const response = await api.get('/api/v1/chart/', {
params: {
page: 1,
page_size: 20
}
});
```
## Theming API
Access and customize theme settings.
```typescript
// Get current theme
theme.getActiveTheme(): Theme
interface Theme {
name: string;
isDark: boolean;
colors: ThemeColors;
typography: Typography;
spacing: Spacing;
}
// Listen for theme changes
theme.onDidChangeTheme(
listener: (theme: Theme) => void
): Disposable
// Get theme colors
const colors = theme.colors;
colors.primary
colors.success
colors.warning
colors.error
colors.info
colors.text
colors.background
colors.border
```
## Disposable Pattern
Manage resource cleanup consistently.
```typescript
interface Disposable {
dispose(): void;
}
// Create a disposable
class MyDisposable implements Disposable {
dispose() {
// Cleanup logic
}
}
// Combine disposables
const composite = Disposable.from(
disposable1,
disposable2,
disposable3
);
// Dispose all at once
composite.dispose();
// Use in extension
export function activate(context: ExtensionContext) {
// All disposables added here are cleaned up on deactivation
context.subscriptions.push(
registerCommand(...),
registerView(...),
onDidChange(...)
);
}
```
## Type Definitions
Complete TypeScript definitions are available:
```typescript
import type {
ExtensionContext,
Disposable,
Event,
EventEmitter,
Uri,
Command,
QuickPickItem,
InputBoxOptions,
Progress,
CancellationToken
} from '@apache-superset/core';
```
## Version Compatibility
The API follows semantic versioning:
```typescript
// Check API version
const version = superset.version;
// Version components
version.major // Breaking changes
version.minor // New features
version.patch // Bug fixes
// Check minimum version
if (version.major < 1) {
throw new Error('Requires Superset API v1.0.0 or higher');
}
```
## Migration Guide
### From v0.x to v1.0
```typescript
// Before (v0.x)
sqlLab.runQuery(query);
// After (v1.0)
sqlLab.executeQuery();
// Before (v0.x)
core.registerPanel(id, component);
// After (v1.0)
context.registerView(id, component);
```
## Best Practices
### Error Handling
```typescript
export async function activate(context: ExtensionContext) {
try {
await initializeExtension();
} catch (error) {
console.error('Failed to initialize:', error);
window.showErrorMessage(
`Extension failed to activate: ${error.message}`
);
}
}
```
### Resource Management
```typescript
// Always use disposables
const disposables: Disposable[] = [];
disposables.push(
commands.registerCommand(...),
sqlLab.onDidQueryRun(...),
workspace.onDidChangeConfiguration(...)
);
// Cleanup in deactivate
export function deactivate() {
disposables.forEach(d => d.dispose());
}
```
### Type Safety
```typescript
// Use type guards
function isDatabase(obj: any): obj is Database {
return obj && typeof obj.id === 'number' && typeof obj.name === 'string';
}
// Use generics
function getValue<T>(key: string, defaultValue: T): T {
return context.globalState.get(key) ?? defaultValue;
}
```

194
docs/developer_portal/architecture/overview.md
View File

@@ -1,194 +0,0 @@
---
title: Extension Architecture
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Superset Extension Architecture
Apache Superset's extension architecture enables developers to enhance and customize the platform without modifying the core codebase. Inspired by the successful VS Code Extensions model, this architecture provides well-defined, versioned APIs and clear contribution points that allow the community to build upon and extend Superset's functionality.
## Core Concepts
### Extensions vs Plugins
We use the term "extensions" rather than "plugins" to better convey the idea of enhancing and expanding Superset's core capabilities in a modular and integrated way. Extensions can add new features, modify existing behavior, and integrate deeply with the host application through well-defined APIs.
### Lean Core Philosophy
Superset's core remains minimal, with many features delegated to extensions. Built-in features are implemented using the same APIs available to external extension authors, ensuring consistency and validating the extension architecture through real-world usage.
## Architecture Overview
The extension architecture consists of several key components:
### Core Packages
#### @apache-superset/core (Frontend)
Provides essential building blocks for extensions:
- Shared UI components
- Utility functions
- Type definitions
- Frontend APIs for interacting with the host
#### apache-superset-core (Backend)
Exposes backend functionality:
- Database access APIs
- Security models
- REST API extensions
- SQLAlchemy models and utilities
### Extension CLI
The `apache-superset-extensions-cli` package provides commands for:
- Scaffolding new extension projects
- Building and bundling extensions
- Development workflows with hot-reload
- Packaging extensions for distribution
### Host Application
Superset acts as the host, providing:
- Extension registration and management
- Dynamic loading of extension assets
- API implementation for extensions
- Lifecycle management (activation/deactivation)
## Extension Points
Extensions can contribute to various parts of Superset:
### SQL Lab Extensions
- Custom panels (left, right, bottom)
- Editor enhancements
- Query processors
- Autocomplete providers
- Execution plan visualizers
### Dashboard Extensions (Future)
- Custom widget types
- Filter components
- Interaction handlers
### Chart Extensions (Future)
- New visualization types
- Data transformers
- Export formats
## Technical Foundation
### Module Federation
Frontend extensions leverage Webpack Module Federation for dynamic loading:
- Extensions are built independently
- Dependencies are shared with the host
- No rebuild of Superset required
- Runtime loading of extension assets
### API Versioning
All public APIs follow semantic versioning:
- Breaking changes require major version bumps
- Extensions declare compatibility requirements
- Backward compatibility maintained within major versions
### Security Model
- Extensions disabled by default (require `ENABLE_EXTENSIONS` flag)
- Built-in extensions follow same security standards as core
- External extensions run in same context as host (sandboxing planned)
- Administrators responsible for vetting third-party extensions
## Development Workflow
1. **Initialize**: Use CLI to scaffold new extension
2. **Develop**: Work with hot-reload in development mode
3. **Build**: Bundle frontend and backend assets
4. **Package**: Create `.supx` distribution file
5. **Deploy**: Upload through API or management UI
## Example: Dataset References Extension
A practical example demonstrating the architecture:
```typescript
// Frontend activation
export function activate(context) {
// Register a new SQL Lab panel
const panel = core.registerView('dataset_references.main',
<DatasetReferencesPanel />
);
// Listen to query changes
const listener = sqlLab.onDidQueryRun(editor => {
// Analyze query and update panel
});
// Cleanup on deactivation
context.subscriptions.push(panel, listener);
}
```
```python
# Backend API extension
from superset_core.api import rest_api
from .api import DatasetReferencesAPI
# Register custom REST endpoints
rest_api.add_extension_api(DatasetReferencesAPI)
```
## Best Practices
### Extension Design
- Keep extensions focused on specific functionality
- Use versioned APIs for stability
- Handle cleanup properly on deactivation
- Follow Superset's coding standards
### Performance
- Lazy load assets when possible
- Minimize bundle sizes
- Share dependencies with host
- Cache expensive operations
### Compatibility
- Declare API version requirements
- Test across Superset versions
- Provide migration guides for breaking changes
- Document compatibility clearly
## Future Roadmap
Planned enhancements include:
- JavaScript sandboxing for untrusted extensions
- Extension marketplace and registry
- Inter-extension communication
- Advanced theming capabilities
- Backend hot-reload without restart
## Getting Started
Ready to build your first extension? Check out:
- [Extension Project Structure](/developer_portal/extensions/extension-project-structure)
- [API Reference](/developer_portal/api/frontend)
- [CLI Documentation](/developer_portal/cli/overview)
- [Frontend Contribution Types](/developer_portal/extensions/frontend-contribution-types)

55
docs/developer_portal/capabilities/common-capabilities.md
View File

@@ -1,55 +0,0 @@
---
title: Common Plugin Capabilities
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Common Plugin Capabilities
🚧 **Coming Soon** 🚧
Explore the shared functionality and common patterns available to all Superset plugins.
## Topics to be covered:
- Plugin lifecycle hooks (initialization, activation, deactivation)
- Accessing Superset's core services and APIs
- State management and data persistence
- Event handling and plugin communication
- Internationalization (i18n) support
- Error handling and logging
- Plugin configuration management
- Accessing user context and permissions
- Working with datasets and queries
- Plugin metadata and manifests
## Core Services Available
- **API Client** - HTTP client for backend communication
- **State Store** - Redux store access
- **Theme Provider** - Access to current theme settings
- **User Context** - Current user information and permissions
- **Dataset Service** - Working with data sources
- **Chart Service** - Chart rendering utilities
---
*This documentation is under active development. Check back soon for updates!*

62
docs/developer_portal/capabilities/extending-workbench.md
View File

@@ -1,62 +0,0 @@
---
title: Extending the Workbench
sidebar_position: 4
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Extending the Workbench
🚧 **Coming Soon** 🚧
Discover how to extend Superset's main interface and workbench with custom components and functionality.
## Topics to be covered:
- Adding custom menu items and navigation
- Creating custom dashboard components
- Extending the SQL Lab interface
- Adding custom sidebar panels
- Creating floating panels and modals
- Integrating with the command palette
- Custom toolbar buttons and actions
- Workspace state management
- Plugin-specific keyboard shortcuts
- Context menu extensions
## Extension Points
- **Main navigation** - Top-level menu items
- **Dashboard builder** - Custom components and layouts
- **SQL Lab** - Query editor extensions
- **Chart explorer** - Visualization building tools
- **Settings panels** - Configuration interfaces
- **Data source explorer** - Database navigation
## UI Integration Patterns
- React component composition
- Portal-based rendering
- Event-driven UI updates
- Responsive layout adaptation
---
*This documentation is under active development. Check back soon for updates!*

53
docs/developer_portal/capabilities/overview.md
View File

@@ -1,53 +0,0 @@
---
title: Plugin Capabilities Overview
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Plugin Capabilities Overview
🚧 **Coming Soon** 🚧
This section provides a comprehensive overview of what Superset plugins can do and how they integrate with the core platform.
## Topics to be covered:
- Plugin architecture and lifecycle
- Available extension points
- Core APIs and services
- Plugin communication patterns
- Configuration and settings management
- Plugin permissions and security
- Performance considerations
- Best practices for plugin development
## Plugin Types
Superset supports several types of plugins:
- **Visualization plugins** - Custom chart types and data visualizations
- **Database connectors** - New data source integrations
- **UI extensions** - Custom dashboard components and interfaces
- **Theme plugins** - Custom styling and branding
- **Filter plugins** - Custom filter components
---
*This documentation is under active development. Check back soon for updates!*

61
docs/developer_portal/capabilities/theming.md
View File

@@ -1,61 +0,0 @@
---
title: Theming and Styling
sidebar_position: 3
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Theming and Styling
🚧 **Coming Soon** 🚧
Learn how to create custom themes and style your plugins to match Superset's design system.
## Topics to be covered:
- Understanding Superset's theme architecture
- Using the theme provider in plugins
- Creating custom color palettes
- Responsive design considerations
- Dark mode and light mode support
- Customizing chart colors and styling
- Brand customization and white-labeling
- CSS-in-JS best practices
- Working with Ant Design components
- Accessibility in custom themes
## Theme Structure
- **Color tokens** - Primary, secondary, and semantic colors
- **Typography** - Font families, sizes, and weights
- **Spacing** - Grid system and layout tokens
- **Component styles** - Default component appearances
- **Chart themes** - Color schemes for visualizations
## Supported Theming APIs
- Theme provider context
- CSS custom properties
- Emotion/styled-components integration
- Chart color palette API
---
*This documentation is under active development. Check back soon for updates!*

578
docs/developer_portal/cli/overview.md
View File

@@ -1,578 +0,0 @@
---
title: Extension CLI
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Superset Extension CLI
The `apache-superset-extensions-cli` package provides command-line tools for creating, developing, and packaging Apache Superset extensions. It streamlines the entire extension development workflow from initialization to deployment.
## Installation
Install the CLI globally using pip:
```bash
pip install apache-superset-extensions-cli
```
Or install locally in your project:
```bash
pip install --user apache-superset-extensions-cli
```
Verify installation:
```bash
superset-extensions --version
# Output: apache-superset-extensions-cli version 1.0.0
```
## Commands Overview
| Command | Description |
|---------|-------------|
| `init` | Create a new extension project |
| `dev` | Start development mode with hot reload |
| `build` | Build extension assets for production |
| `bundle` | Package extension into a .supx file |
| `validate` | Validate extension metadata and structure |
| `publish` | Publish extension to registry (future) |
## Command Reference
### init
Creates a new extension project with the standard structure and boilerplate code.
```bash
superset-extensions init [options] <extension-name>
```
#### Options
- `--type, -t <type>` - Extension type: `full` (default), `frontend-only`, `backend-only`
- `--template <template>` - Project template: `default`, `sql-lab`, `dashboard`, `chart`
- `--author <name>` - Extension author name
- `--description <desc>` - Extension description
- `--license <license>` - License identifier (default: Apache-2.0)
- `--superset-version <version>` - Minimum Superset version (default: 4.0.0)
- `--skip-install` - Skip installing dependencies
- `--use-typescript` - Use TypeScript for frontend (default: true)
- `--use-npm` - Use npm instead of yarn
#### Examples
```bash
# Create a basic extension
superset-extensions init my-extension
# Create a SQL Lab focused extension
superset-extensions init query-optimizer --template sql-lab
# Create frontend-only extension
superset-extensions init custom-viz --type frontend-only
# Create with metadata
superset-extensions init data-quality \
--author "Jane Doe" \
--description "Data quality monitoring for SQL Lab"
```
#### Generated Structure
```
my-extension/
├── extension.json # Extension metadata
├── frontend/ # Frontend source code
│ ├── src/
│ │ ├── index.tsx # Main entry point
│ │ └── components/ # React components
│ ├── package.json
│ ├── tsconfig.json
│ └── webpack.config.js
├── backend/ # Backend source code
│ ├── src/
│ │ └── my_extension/
│ │ ├── __init__.py
│ │ └── api.py
│ ├── tests/
│ └── requirements.txt
├── README.md
└── .gitignore
```
### dev
Starts development mode with automatic rebuilding and hot reload.
```bash
superset-extensions dev [options]
```
#### Options
- `--port, -p <port>` - Development server port (default: 9001)
- `--host <host>` - Development server host (default: localhost)
- `--watch-backend` - Also watch backend files (default: true)
- `--watch-frontend` - Also watch frontend files (default: true)
- `--no-open` - Don't open browser automatically
- `--superset-url <url>` - Superset instance URL (default: http://localhost:8088)
- `--verbose` - Enable verbose logging
#### Examples
```bash
# Start development mode
superset-extensions dev
# Use custom port
superset-extensions dev --port 9002
# Connect to remote Superset
superset-extensions dev --superset-url https://superset.example.com
```
#### Development Workflow
1. **Start the dev server:**
```bash
superset-extensions dev
```
2. **Configure Superset** (`superset_config.py`):
```python
LOCAL_EXTENSIONS = [
"/path/to/your/extension"
]
ENABLE_EXTENSIONS = True
```
3. **Start Superset:**
```bash
superset run -p 8088 --with-threads --reload
```
The extension will automatically reload when you make changes.
### build
Builds extension assets for production deployment.
```bash
superset-extensions build [options]
```
#### Options
- `--mode <mode>` - Build mode: `production` (default), `development`
- `--analyze` - Generate bundle analysis report
- `--source-maps` - Generate source maps
- `--minify` - Minify output (default: true in production)
- `--output, -o <dir>` - Output directory (default: dist)
- `--clean` - Clean output directory before build
- `--parallel` - Build frontend and backend in parallel
#### Examples
```bash
# Production build
superset-extensions build
# Development build with source maps
superset-extensions build --mode development --source-maps
# Analyze bundle size
superset-extensions build --analyze
# Custom output directory
superset-extensions build --output build
```
#### Build Output
```
dist/
├── manifest.json # Build manifest
├── frontend/
│ ├── remoteEntry.[hash].js
│ ├── [name].[hash].js
│ └── assets/
└── backend/
└── my_extension/
├── __init__.py
└── *.py
```
### bundle
Packages the built extension into a distributable `.supx` file.
```bash
superset-extensions bundle [options]
```
#### Options
- `--output, -o <file>` - Output filename (default: `{name}-{version}.supx`)
- `--sign` - Sign the bundle (requires configured keys)
- `--compression <level>` - Compression level 0-9 (default: 6)
- `--exclude <patterns>` - Files to exclude (comma-separated)
- `--include-dev-deps` - Include development dependencies
#### Examples
```bash
# Create bundle
superset-extensions bundle
# Custom output name
superset-extensions bundle --output my-extension-latest.supx
# Signed bundle
superset-extensions bundle --sign
# Exclude test files
superset-extensions bundle --exclude "**/*.test.js,**/*.spec.ts"
```
#### Bundle Structure
The `.supx` file is a ZIP archive containing:
```
my-extension-1.0.0.supx
├── manifest.json
├── extension.json
├── frontend/
│ └── dist/
└── backend/
└── src/
```
### validate
Validates extension structure, metadata, and compatibility.
```bash
superset-extensions validate [options]
```
#### Options
- `--strict` - Enable strict validation
- `--fix` - Auto-fix correctable issues
- `--check-deps` - Validate dependencies
- `--check-security` - Run security checks
#### Examples
```bash
# Basic validation
superset-extensions validate
# Strict mode with auto-fix
superset-extensions validate --strict --fix
# Full validation
superset-extensions validate --check-deps --check-security
```
#### Validation Checks
- Extension metadata completeness
- File structure conformity
- API version compatibility
- Dependency security vulnerabilities
- Code quality standards
- Bundle size limits
## Configuration File
Create `.superset-extension.json` for project-specific settings:
```json
{
"build": {
"mode": "production",
"sourceMaps": true,
"analyze": false,
"parallel": true
},
"dev": {
"port": 9001,
"host": "localhost",
"autoOpen": true
},
"bundle": {
"compression": 6,
"sign": false,
"exclude": [
"**/*.test.*",
"**/*.spec.*",
"**/tests/**"
]
},
"validation": {
"strict": true,
"autoFix": true
}
}
```
## Environment Variables
Configure CLI behavior using environment variables:
```bash
# Superset connection
export SUPERSET_URL=http://localhost:8088
export SUPERSET_USERNAME=admin
export SUPERSET_PASSWORD=admin
# Development settings
export EXTENSION_DEV_PORT=9001
export EXTENSION_DEV_HOST=localhost
# Build settings
export EXTENSION_BUILD_MODE=production
export EXTENSION_SOURCE_MAPS=true
# Registry settings (future)
export EXTENSION_REGISTRY_URL=https://registry.superset.apache.org
export EXTENSION_REGISTRY_TOKEN=your-token
```
## Advanced Usage
### Custom Templates
Create custom project templates:
```bash
# Use custom template
superset-extensions init my-ext --template https://github.com/user/template
# Use local template
superset-extensions init my-ext --template ./my-template
```
### CI/CD Integration
#### GitHub Actions
```yaml
name: Build Extension
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Python
uses: actions/setup-python@v2
with:
python-version: '3.9'
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Install CLI
run: pip install apache-superset-extensions-cli
- name: Install dependencies
run: |
npm install --prefix frontend
pip install -r backend/requirements.txt
- name: Validate
run: superset-extensions validate --strict
- name: Build
run: superset-extensions build --mode production
- name: Bundle
run: superset-extensions bundle
- name: Upload artifact
uses: actions/upload-artifact@v2
with:
name: extension-bundle
path: '*.supx'
```
### Automated Deployment
Deploy extensions automatically:
```bash
#!/bin/bash
# deploy.sh
# Build and bundle
superset-extensions build --mode production
superset-extensions bundle --sign
# Upload to Superset instance
BUNDLE=$(ls *.supx | head -1)
curl -X POST "$SUPERSET_URL/api/v1/extensions/import/" \
-H "Authorization: Bearer $SUPERSET_TOKEN" \
-F "bundle=@$BUNDLE"
# Verify deployment
curl "$SUPERSET_URL/api/v1/extensions/" \
-H "Authorization: Bearer $SUPERSET_TOKEN"
```
### Multi-Extension Projects
Manage multiple extensions in one repository:
```bash
# Initialize multiple extensions
superset-extensions init extensions/viz-plugin --type frontend-only
superset-extensions init extensions/sql-optimizer --template sql-lab
superset-extensions init extensions/auth-provider --type backend-only
# Build all extensions
for dir in extensions/*/; do
(cd "$dir" && superset-extensions build)
done
# Bundle all extensions
for dir in extensions/*/; do
(cd "$dir" && superset-extensions bundle)
done
```
## Troubleshooting
### Common Issues
#### Port already in use
```bash
# Error: Port 9001 is already in use
# Solution: Use a different port
superset-extensions dev --port 9002
```
#### Module not found
```bash
# Error: Cannot find module '@apache-superset/core'
# Solution: Ensure dependencies are installed
npm install --prefix frontend
```
#### Build failures
```bash
# Check Node and Python versions
node --version # Should be 16+
python --version # Should be 3.9+
# Clear cache and rebuild
rm -rf dist node_modules frontend/node_modules
npm install --prefix frontend
superset-extensions build --clean
```
#### Bundle too large
```bash
# Warning: Bundle size exceeds recommended limit
# Solution: Analyze and optimize
superset-extensions build --analyze
# Exclude unnecessary files
superset-extensions bundle --exclude "**/*.map,**/*.test.*"
```
### Debug Mode
Enable debug logging:
```bash
# Set debug environment variable
export DEBUG=superset-extensions:*
# Or use verbose flag
superset-extensions dev --verbose
superset-extensions build --verbose
```
### Getting Help
```bash
# General help
superset-extensions --help
# Command-specific help
superset-extensions init --help
superset-extensions dev --help
# Version information
superset-extensions --version
```
## Best Practices
### Development
1. **Use TypeScript** for type safety
2. **Follow the style guide** for consistency
3. **Write tests** for critical functionality
4. **Document your code** with JSDoc/docstrings
5. **Use development mode** for rapid iteration
### Building
1. **Optimize bundle size** - analyze and tree-shake
2. **Generate source maps** for debugging
3. **Validate before building** to catch issues early
4. **Use production mode** for final builds
5. **Clean build directory** to avoid stale files
### Deployment
1. **Sign your bundles** for security
2. **Version properly** using semantic versioning
3. **Test in staging** before production deployment
4. **Document breaking changes** in CHANGELOG
5. **Provide migration guides** for major updates
## Resources
- [Extension Architecture](/developer_portal/architecture/overview)
- [API Reference](/developer_portal/api/frontend)
- [Frontend Contribution Types](/developer_portal/extensions/frontend-contribution-types)
- [GitHub Repository](https://github.com/apache/superset)
- [Community Forum](https://github.com/apache/superset/discussions)

44
docs/developer_portal/coding-guidelines/overview.md
View File

@@ -1,44 +0,0 @@
---
title: Coding Guidelines Overview
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Coding Guidelines Overview
🚧 **Coming Soon** 🚧
Best practices and coding standards for Apache Superset development.
## Topics to be covered:
- General coding principles
- Code organization
- Error handling
- Performance considerations
- Security best practices
- Testing requirements
- Documentation standards
- Commit message conventions
---
*This documentation is under active development. Check back soon for updates!*

4
docs/developer_portal/contributing/code-review.md
View File

@@ -327,9 +327,9 @@ stats.sort_stats('cumulative').print_stats(10)
## Resources
### Internal
- [Coding Guidelines](../coding-guidelines/overview)
- [Coding Guidelines](../guidelines/design-guidelines)
- [Testing Guide](../testing/overview)
- [Architecture Overview](../architecture/overview)
- [Extension Architecture](../extensions/architecture)
### External
- [Google's Code Review Guide](https://google.github.io/eng-practices/review/)

4
docs/developer_portal/contributing/overview.md
View File

@@ -1,5 +1,5 @@
---
title: Contributing Overview
title: Overview
sidebar_position: 1
---
@@ -22,7 +22,7 @@ specific language governing permissions and limitations
under the License.
-->
# Contributing to Apache Superset
# Contributing
Superset is an [Apache Software foundation](https://www.apache.org/theapacheway/index.html) project.
The core contributors (or committers) to Superset communicate primarily in the following channels (which can be joined by anyone):

2
docs/developer_portal/contributing/submitting-pr.md
View File

@@ -35,7 +35,7 @@ Learn how to create and submit high-quality pull requests to Apache Superset.
- [ ] You've found or created an issue to work on
### PR Readiness Checklist
- [ ] Code follows [coding guidelines](../coding-guidelines/overview)
- [ ] Code follows [coding guidelines](../guidelines/design-guidelines)
- [ ] Tests are passing locally
- [ ] Linting passes (`pre-commit run --all-files`)
- [ ] Documentation is updated if needed

36
docs/developer_portal/extensions/architectural-principles.md
View File

@@ -1,36 +0,0 @@
---
title: Architectural Principles
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Architectural Principles
Realizing this vision requires a strong architectural foundation. To ensure the resulting system is robust, maintainable, and adaptable, we have defined a set of architectural principles that will guide the design and implementation of the changes. These principles serve as the basis for all technical decisions and help create an environment where extensions can be developed safely and predictably, while minimizing technical debt and fragmentation.
The architectural principles guiding this proposal include:
1. **Lean core**: Superset's core should remain as minimal as possible, with many features and capabilities delegated to extensions. Wherever possible, built-in features should be implemented using the same APIs and extension mechanisms available to external extension authors. This approach reduces maintenance burden and complexity in the core application, encourages modularity, and allows the community to innovate and iterate on features independently of the main codebase.
2. **Explicit contribution points**: All extension points must be clearly defined and documented, so extension authors know exactly where and how they can interact with the host system. Each extension must also declare its capabilities in a metadata file, enabling the host to manage the extension lifecycle and provide a consistent user experience.
3. **Versioned and stable APIs**: Public interfaces for extensions should be versioned and follow semantic versioning, allowing for safe evolution and backward compatibility.
4. **Lazy loading and activation**: Extensions should be loaded and activated only when needed, minimizing performance overhead and resource consumption.
5. **Composability and reuse**: The architecture should encourage the reuse of extension points and patterns across different modules, promoting consistency and reducing duplication.
6. **Community-driven evolution**: The system should be designed to evolve based on real-world feedback and contributions, allowing new extension points and capabilities to be added as needs emerge.

253
docs/developer_portal/extensions/architecture.md Normal file
View File

@@ -0,0 +1,253 @@
---
title: Architecture
sidebar_position: 3
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Architecture
Apache Superset's extension system is designed to enable powerful customization while maintaining stability, security, and performance. This page explains the architectural principles, system design, and technical mechanisms that make the extension ecosystem possible.
## Architectural Principles
The extension architecture is built on six core principles that guide all technical decisions and ensure extensions can be developed safely and predictably:
### 1. Lean Core
Superset's core should remain minimal, with many features delegated to extensions. Built-in features use the same APIs and extension mechanisms available to external developers. This approach:
- Reduces maintenance burden and complexity
- Encourages modularity
- Allows the community to innovate independently of the main codebase
### 2. Explicit Contribution Points
All extension points are clearly defined and documented. Extension authors know exactly where and how they can interact with the host system. Each extension declares its capabilities in a metadata file, enabling the host to:
- Manage the extension lifecycle
- Provide a consistent user experience
- Validate extension compatibility
### 3. Versioned and Stable APIs
Public interfaces for extensions follow semantic versioning, allowing for:
- Safe evolution of the platform
- Backward compatibility
- Clear upgrade paths for extension authors
### 4. Lazy Loading and Activation
Extensions are loaded and activated only when needed, which:
- Minimizes performance overhead
- Reduces resource consumption
- Improves startup time
### 5. Composability and Reuse
The architecture encourages reusing extension points and patterns across different modules, promoting:
- Consistency across extensions
- Reduced duplication
- Shared best practices
### 6. Community-Driven Evolution
The system evolves based on real-world feedback and contributions. New extension points and capabilities are added as needs emerge, ensuring the platform remains relevant and flexible.
## System Overview
The extension architecture is built around three main components that work together to create a flexible, maintainable ecosystem:
### Core Packages
Two core packages provide the foundation for extension development:
**Frontend: `@apache-superset/core`**
This package provides essential building blocks for frontend extensions and the host application:
- Shared UI components
- Utility functions
- APIs and hooks
- Type definitions
By centralizing these resources, both extensions and built-in features use the same APIs, ensuring consistency, type safety, and a seamless user experience. The package is versioned to support safe platform evolution while maintaining compatibility.
**Backend: `apache-superset-core`**
This package exposes key classes and APIs for backend extensions:
- Database connectors
- API extensions
- Security manager customization
- Core utilities and models
It includes dependencies on critical libraries like Flask-AppBuilder and SQLAlchemy, and follows semantic versioning for compatibility and stability.
### Developer Tools
**`apache-superset-extensions-cli`**
The CLI provides comprehensive commands for extension development:
- Project scaffolding
- Code generation
- Building and bundling
- Packaging for distribution
By standardizing these processes, the CLI ensures extensions are built consistently, remain compatible with evolving versions of Superset, and follow best practices.
### Host Application
The Superset host application serves as the runtime environment for extensions:
**Extension Management**
- Exposes `/api/v1/extensions` endpoint for registration and management
- Provides a dedicated UI for managing extensions
- Stores extension metadata in the `extensions` database table
**Extension Storage**
The extensions table contains:
- Extension name, version, and author
- Contributed features and exposed modules
- Metadata and configuration
- Built frontend and/or backend code
### Architecture Diagram
The following diagram illustrates how these components work together:
<img width="955" height="586" alt="Extension System Architecture" src="https://github.com/user-attachments/assets/cc2a41df-55a4-48c8-b056-35f7a1e567c6" />
The diagram shows:
1. **Extension projects** depend on core packages for development
2. **Core packages** provide APIs and type definitions
3. **The host application** implements the APIs and manages extensions
4. **Extensions** integrate seamlessly with the host through well-defined interfaces
### Extension Dependencies
Extensions can depend on any combination of packages based on their needs. For example:
**Frontend-only extension** (e.g., a custom chart type):
- Depends on `@apache-superset/core` for UI components and React APIs
**Full-stack extension** (e.g., a custom SQL editor with new API endpoints):
- Depends on `@apache-superset/core` for frontend components
- Depends on `apache-superset-core` for backend APIs and models
This modular approach allows extension authors to choose exactly what they need while promoting consistency and reusability.
## Dynamic Module Loading
One of the most sophisticated aspects of the extension architecture is how frontend code is dynamically loaded at runtime using Webpack's Module Federation.
### Module Federation
The architecture leverages Webpack's Module Federation to enable dynamic loading of frontend assets. This allows extensions to be built independently from Superset.
### How It Works
**Extension Configuration**
Extensions configure Webpack to expose their entry points:
``` typescript
new ModuleFederationPlugin({
name: 'my_extension',
filename: 'remoteEntry.[contenthash].js',
exposes: {
'./index': './src/index.tsx',
},
externalsType: 'window',
externals: {
'@apache-superset/core': 'superset',
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true },
'antd-v5': { singleton: true }
}
})
```
This configuration does several important things:
**`exposes`** - Declares which modules are available to the host application. The extension makes `./index` available as its entry point.
**`externals` and `externalsType`** - Tell Webpack that when the extension imports `@apache-superset/core`, it should use `window.superset` at runtime instead of bundling its own copy. This ensures extensions use the host's implementation of shared packages.
**`shared`** - Prevents duplication of common libraries like React and Ant Design. The `singleton: true` setting ensures only one instance of each library exists, avoiding version conflicts and reducing bundle size.
### Runtime Resolution
The following diagram illustrates the module loading process:
<img width="913" height="558" alt="Module Federation Flow" src="https://github.com/user-attachments/assets/e5e4d2ae-e8b5-4d17-a2a1-3667c65f25ca" />
Here's what happens at runtime:
1. **Extension Registration**: When an extension is registered, Superset stores its remote entry URL
2. **Dynamic Loading**: When the extension is activated, the host fetches the remote entry file
3. **Module Resolution**: The extension imports `@apache-superset/core`, which resolves to `window.superset`
4. **Execution**: The extension code runs with access to the host's APIs and shared dependencies
### Host API Setup
On the Superset side, the APIs are mapped to `window.superset` during application bootstrap:
``` typescript
import * as supersetCore from '@apache-superset/core';
import {
authentication,
core,
commands,
environment,
extensions,
sqlLab,
} from 'src/extensions';
export default function setupExtensionsAPI() {
window.superset = {
...supersetCore,
authentication,
core,
commands,
environment,
extensions,
sqlLab,
};
}
```
This function runs before any extensions are loaded, ensuring the APIs are available when extensions import from `@apache-superset/core`.
### Benefits
This architecture provides several key benefits:
- **Independent development**: Extensions can be built separately from Superset's codebase
- **Version isolation**: Each extension can be developed with its own release cycle
- **Shared dependencies**: Common libraries are shared, reducing memory usage and bundle size
- **Type safety**: TypeScript types flow from the core package to extensions
## Next Steps
Now that you understand the architecture, explore:
- **[Extension Project Structure](./extension-project-structure)** - How to organize your extension code
- **[Frontend Contribution Types](./frontend-contribution-types)** - What kinds of extensions you can build
- **[Quick Start](./quick-start)** - Build your first extension

36
docs/developer_portal/extensions/built-in-features.md
View File

@@ -1,36 +0,0 @@
---
title: What This Means for Superset's Built-in Features
sidebar_position: 13
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# What This Means for Superset's Built-in Features
Transitioning to a well-defined, versioned API model has significant implications for Superset's built-in features. By exposing stable, public APIs for core functionality, we enable both extensions and internal modules to interact with the application in a consistent and predictable way. This approach brings several key benefits:
- **Unified API Surface**: All important features of Superset will be accessible through documented, versioned APIs. This not only empowers extension authors but also ensures that built-in features use the same mechanisms, validating the APIs through real-world usage and making it easier to replace or enhance individual features over time.
- **Dogfooding and Replaceability**: By building Superset's own features using the same APIs available to extensions, we ensure that these APIs are robust, flexible, and well-tested. This also means that any built-in feature can potentially be replaced or extended by a third-party extension, increasing modularity and adaptability.
- **Versioned and Stable Contracts**: Public APIs will be versioned and follow semantic versioning, providing stability for both internal and external consumers. This stability is critical for long-term maintainability, but it also means that extra care must be taken to avoid breaking changes and to provide clear migration paths when changes are necessary.
- **Improved Inter-Module Communication**: With clearly defined APIs and a command-based architecture, modules and extensions can communicate through explicit interfaces rather than relying on direct Redux store access or tightly coupled state management. This decouples modules, reduces the risk of unintended side effects, and makes the codebase easier to reason about and maintain.
- **Facilitated Refactoring and Evolution**: As the application evolves, having a stable API layer allows for internal refactoring and optimization without breaking consumers. This makes it easier to modernize or optimize internal implementations while preserving compatibility.
- **Clearer Documentation and Onboarding**: A public, versioned API surface makes it easier to document and onboard new contributors, both for core development and for extension authors.
Overall, this shift represents a move toward a more modular, maintainable, and extensible architecture, where both built-in features and extensions are first-class citizens, and where the boundaries between core and community-driven innovation are minimized.

84
docs/developer_portal/extensions/dynamic-module-loading.md
View File

@@ -1,84 +0,0 @@
---
title: Dynamic Module Loading
sidebar_position: 7
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Dynamic Module Loading
The extension architecture leverages Webpack's Module Federation to enable dynamic loading of frontend assets at runtime. This sophisticated mechanism involves several key concepts:
**Module Federation** allows extensions to be built and deployed independently while sharing dependencies with the host application. Extensions expose their entry points through the federation configuration:
``` typescript
new ModuleFederationPlugin({
name: 'my_extension',
filename: 'remoteEntry.[contenthash].js',
exposes: {
'./index': './src/index.tsx',
},
externalsType: 'window',
externals: {
'@apache-superset/core': 'superset',
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true },
'antd-v5': { singleton: true }
}
})
```
`externals` and `externalsType` ensure that extensions use the host's implementation of shared packages rather than bundling their own copies.
`shared` dependencies prevent duplication of common libraries like React and Ant Design avoiding version conflicts and reducing bundle size.
This configuration tells Webpack that when the extension imports from `@apache-superset/core`, it should resolve to `window.superset` at runtime, where the host application provides the actual implementation. The following diagram illustrates how this works in practice:
<img width="913" height="558" alt="Image" src="https://github.com/user-attachments/assets/e5e4d2ae-e8b5-4d17-a2a1-3667c65f25ca" />
During extension registration, the host application fetches the remote entry file and dynamically loads the extension's modules without requiring a rebuild or restart of Superset.
On the host application side, the `@apache-superset/core` package will be mapped to the corresponding implementations during bootstrap in the `setupExtensionsAPI` function.
``` typescript
import * as supersetCore from '@apache-superset/core';
import {
authentication,
core,
commands,
environment,
extensions,
sqlLab,
} from 'src/extensions';
export default function setupExtensionsAPI() {
window.superset = {
...supersetCore,
authentication,
core,
commands,
environment,
extensions,
sqlLab,
};
}
```

41
docs/developer_portal/extensions/high-level-architecture.md
View File

@@ -1,41 +0,0 @@
---
title: High-level Architecture
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# High-level Architecture
It is important to note that this SIP is not intended to address every aspect of the architecture in a single document. Rather, it should be seen as a chapter in an ongoing book: it establishes foundational concepts and direction, while recognizing that many important topics remain to be explored. Many topics not covered here are expected to be addressed in subsequent SIPs as the architecture and community needs evolve.
The following diagram illustrates the overall architecture, emphasizing the relationships between the host application, extensions, and the supporting packages that will be developed to enable this ecosystem.
<img width="955" height="586" alt="Image" src="https://github.com/user-attachments/assets/cc2a41df-55a4-48c8-b056-35f7a1e567c6" />
On the frontend side, as a result of discussions in [[SIP-169] Proposal for Extracting and Publishing Superset Core UI Components](https://github.com/apache/superset/issues/33441), the `@apache-superset/core` package will be created to provide all the essential building blocks for both the host application and extensions, including shared UI components, utility functions, APIs, and type definitions. By centralizing these resources, extensions and built-in features can use the same APIs and components, ensuring consistency, type safety, and a seamless user experience across the Superset ecosystem. This package will be versioned to support safe evolution of the platform while maintaining compatibility for both internal and external features.
On the backend side, the `apache-superset-core` package will expose key classes and APIs needed by extensions that provide backend functionality such as extending Superset's API, providing database connectors, or customizing the security manager. It will contain dependencies on critical libraries like FAB, SQLAlchemy, etc and like `@apache-superset/core`, it will be versioned to ensure compatibility and stability.
The `apache-superset-extensions-cli` package will provide a comprehensive set of CLI commands for extension development, including tools for code generation, building, and packaging extensions. These commands streamline the development workflow, making it easier for developers to scaffold new projects, build and bundle their code, and distribute extensions efficiently. By standardizing these processes, the CLI helps ensure that extensions are built in a consistent manner, remain compatible with evolving versions of Superset, and adhere to best practices across the ecosystem.
Extension projects might have references to all packages, depending on their specific needs. For example, an extension that provides a custom SQL editor might depend on the `apache-superset-core` package for backend functionality, while also using the `@apache-superset/core` package for UI components and type definitions. This modular approach allows extension authors to choose the dependencies that best suit their needs, while also promoting consistency and reusability across the ecosystem.
The host application (Superset) will depend on core packages and is responsible for providing the implementation of the APIs defined in them. It will expose a new endpoint (`/api/v1/extensions`) for extension registration and management, and a dedicated UI for managing extensions. Registered extensions will be stored in the metadata database in a table called `extensions`, which will contain information such as the extension's name, version, author, contributed features, exposed modules, relevant metadata and the built frontend and/or backend code.

41
docs/developer_portal/extensions/lifecycle-management.md
View File

@@ -1,41 +0,0 @@
---
title: Lifecycle and Management
sidebar_position: 9
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Lifecycle and Management
Superset will manage the full lifecycle of extensions, including activation, deactivation, and cleanup. The lifecycle is designed to ensure that extensions can safely register resources and reliably clean them up when no longer needed.
## Frontend lifecycle
- When an extension is activated, its `activate(context)` function is called. The extension should register all event listeners, commands, views, and other contributions using the provided context, and add any disposables to `context.disposables`.
- When the extension is deactivated (e.g., disabled or uninstalled), Superset automatically calls `dispose()` on all items in `context.disposables`, ensuring that event listeners, commands, and UI contributions are removed and memory leaks are avoided.
## Backend lifecycle
- Backend entry points, which can add REST API endpoints or execute arbitrary backend code, are eagerly evaluated during startup. Other backend code is lazily loaded when needed, ensuring minimal startup latency.
- In the future, we plan to leverage mechanisms like Redis pub/sub (already an optional dependency of Superset) to dynamically manage the lifecycle of extensions' backend functionality. This will ensure that all running instances of the Superset backend have the same available extensions without requiring a restart. This will be addressed in a follow-up SIP.
The proof-of-concept (POC) code for this SIP already implements a management module where administrators can upload, delete, enable/disable, and inspect the manifest for installed extensions via the Superset UI, making extension operations straightforward. These operations are currently supported dynamically for frontend extensions. For backend extensions, dynamic upload, deletion, and enable/disable are planned for a future iteration; at present, changes to backend extensions (such as uploading, deleting, or enabling/disabling) still require a server restart.
https://github.com/user-attachments/assets/4eb7064b-3290-4e4c-b88b-52d8d1c11245

18
docs/developer_portal/extensions/overview.md
View File

@@ -1,5 +1,5 @@
---
title: Extensions Overview
title: Overview
sidebar_position: 1
---
@@ -22,7 +22,7 @@ specific language governing permissions and limitations
under the License.
-->
# Extensions Overview
# Overview
Apache Superset's extension system allows developers to enhance and customize Superset's functionality through a modular, plugin-based architecture. Extensions can add new visualization types, custom UI components, data processing capabilities, and integration points.
@@ -32,8 +32,7 @@ Superset extensions are self-contained packages that extend the core platform's
## Extension Architecture
- **[Architectural Principles](./architectural-principles)** - Core design principles guiding extension development
- **[High-level Architecture](./high-level-architecture)** - System overview and component relationships
- **[Architecture](./architecture)** - Architectural principles and high-level system overview
- **[Extension Project Structure](./extension-project-structure)** - Standard project layout and organization
- **[Extension Metadata](./extension-metadata)** - Configuration and manifest structure
@@ -41,19 +40,18 @@ Superset extensions are self-contained packages that extend the core platform's
- **[Frontend Contribution Types](./frontend-contribution-types)** - Types of UI contributions available
- **[Interacting with Host](./interacting-with-host)** - Communication patterns with Superset core
- **[Dynamic Module Loading](./dynamic-module-loading)** - Runtime loading and dependency management
- **[Development Mode](./development-mode)** - Tools and workflows for extension development
For information about runtime loading and dependency management, see the [Dynamic Module Loading](./architecture#dynamic-module-loading) section in the Architecture page.
## Deployment & Management
- **[Deploying Extension](./deploying-extension)** - Packaging and distribution strategies
- **[Lifecycle Management](./lifecycle-management)** - Installation, updates, and removal
- **[Versioning](./versioning)** - Version management and compatibility
- **[Security Implications](./security-implications)** - Security considerations and best practices
## Hands-on Examples
- **[Proof of Concept](./proof-of-concept)** - Complete Hello World extension walkthrough
- **[Quick Start](./quick-start)** - Complete Hello World extension walkthrough
## Extension Capabilities
@@ -68,9 +66,9 @@ Extensions can provide:
## Getting Started
1. **Learn the Architecture**: Start with [Architectural Principles](./architectural-principles) to understand the design philosophy
1. **Learn the Architecture**: Start with [Architecture](./architecture) to understand the design philosophy
2. **Set up Development**: Follow the [Development Mode](./development-mode) guide to configure your environment
3. **Build Your First Extension**: Complete the [Proof of Concept](./proof-of-concept) tutorial
3. **Build Your First Extension**: Complete the [Quick Start](./quick-start) tutorial
4. **Deploy and Share**: Use the [Deploying Extension](./deploying-extension) guide to package your extension
## Extension Ecosystem

288
docs/developer_portal/extensions/proof-of-concept.md
View File

@@ -1,288 +0,0 @@
---
title: "Example: Hello World"
sidebar_position: 14
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Example: Hello World
:::warning Work in Progress
This documentation is under active development. Some features described may not be fully implemented yet.
:::
This guide walks you through creating your first Superset extension - a simple "Hello World" panel for SQL Lab. You'll learn how to create, build, package, install, and test a basic extension.
## Prerequisites
Before starting, ensure you have:
- Node.js 18+ and npm installed
- Python 3.9+ installed
- A running Superset development environment with `ENABLE_EXTENSIONS = True` in your config
- Basic knowledge of React and TypeScript
## Step 1: Initialize Your Extension
First, install the Superset extension CLI and create a new extension project:
```bash
# Install the CLI globally
pip install apache-superset-extensions-cli
# Create a new extension
superset-extensions init hello-world
cd hello-world
```
This creates the following structure:
```
hello-world/
├── extension.json # Extension metadata
├── frontend/ # Frontend code
│ ├── src/
│ │ └── index.tsx # Main entry point
│ ├── package.json
│ └── webpack.config.js
├── backend/ # Backend code (optional)
│ └── src/
└── README.md
```
## Step 2: Configure Extension Metadata
Edit `extension.json` to define your extension's capabilities:
```json
{
"name": "hello_world",
"displayName": "Hello World Extension",
"version": "1.0.0",
"description": "A simple Hello World panel for SQL Lab",
"author": "Your Name",
"license": "Apache-2.0",
"superset": {
"minVersion": "4.0.0"
},
"frontend": {
"contributions": {
"views": {
"sqllab.panels": [
{
"id": "hello_world.main",
"name": "Hello World",
"icon": "SmileOutlined"
}
]
},
"commands": [
{
"command": "hello_world.greet",
"title": "Say Hello",
"description": "Display a greeting message"
}
]
}
}
}
```
## Step 3: Create the Frontend Component
Create `frontend/src/HelloWorldPanel.tsx`:
```tsx
import React, { useState, useEffect } from 'react';
import { Card, Button, Alert } from '@apache-superset/core';
export const HelloWorldPanel: React.FC = () => {
const [greeting, setGreeting] = useState('Hello, Superset!');
const [queryCount, setQueryCount] = useState(0);
// Listen for query executions
useEffect(() => {
const handleQueryRun = () => {
setQueryCount(prev => prev + 1);
setGreeting(`Hello! You've run ${queryCount + 1} queries.`);
};
// Subscribe to SQL Lab events
const disposable = window.superset?.sqlLab?.onDidQueryRun?.(handleQueryRun);
return () => disposable?.dispose?.();
}, [queryCount]);
return (
<Card title="Hello World Extension">
<Alert
message={greeting}
type="success"
showIcon
/>
<p style={{ marginTop: 16 }}>
This is your first Superset extension! 🎉
</p>
<p>
Queries executed this session: <strong>{queryCount}</strong>
</p>
<Button
onClick={() => setGreeting('Hello from the button!')}
style={{ marginTop: 16 }}
>
Click Me
</Button>
</Card>
);
};
```
## Step 4: Set Up the Entry Point
Update `frontend/src/index.tsx`:
```tsx
import { ExtensionContext } from '@apache-superset/core';
import { HelloWorldPanel } from './HelloWorldPanel';
export function activate(context: ExtensionContext) {
console.log('Hello World extension is activating!');
// Register the panel
const panel = context.registerView(
'hello_world.main',
<HelloWorldPanel />
);
// Register the command
const command = context.registerCommand('hello_world.greet', {
execute: () => {
console.log('Hello from the command!');
// You could trigger panel updates or show notifications here
}
});
// Add disposables for cleanup
context.subscriptions.push(panel, command);
}
export function deactivate() {
console.log('Hello World extension is deactivating!');
}
```
## Step 5: Build the Extension
Build your extension assets:
```bash
# Install dependencies
cd frontend
npm install
# Build the extension
cd ..
superset-extensions build
# This creates a dist/ folder with your built assets
```
> **Note:** The `superset-extensions` CLI handles webpack configuration automatically. Superset already has Module Federation configured, so you don't need to set up webpack yourself unless you have specific advanced requirements.
## Step 6: Package the Extension
Create the distributable `.supx` file:
```bash
superset-extensions bundle
# This creates hello_world-1.0.0.supx
```
## Step 7: Install in Superset
Upload your extension to a running Superset instance:
### Option A: Via API
```bash
curl -X POST http://localhost:8088/api/v1/extensions/import/ \
-H "Authorization: Bearer YOUR_TOKEN" \
-F "bundle=@hello_world-1.0.0.supx"
```
### Option B: Via UI
1. Navigate to Settings → Extensions
2. Click "Upload Extension"
3. Select your `hello_world-1.0.0.supx` file
4. Click "Install"
## Step 9: Test Your Extension
1. Open SQL Lab in Superset
2. Look for the "Hello World" panel in the panels dropdown or sidebar
3. The panel should display your greeting message
4. Run a SQL query and watch the query counter increment
5. Click the button to see the greeting change
## Step 10: Development Mode (Optional)
For faster development iteration, use local development mode:
1. Add to your `superset_config.py`:
```python
LOCAL_EXTENSIONS = [
"/path/to/hello-world"
]
ENABLE_EXTENSIONS = True
```
2. Run the extension in watch mode:
```bash
superset-extensions dev
```
3. Changes will be reflected immediately without rebuilding
## Troubleshooting
### Extension Not Loading
- Check that `ENABLE_EXTENSIONS = True` in your Superset config
- Verify the extension is listed in Settings → Extensions
- Check browser console for errors
- Ensure all dependencies are installed
### Build Errors
- Make sure you have the correct Node.js version (18+)
- Clear node_modules and reinstall: `rm -rf node_modules && npm install`
- Check that webpack.config.js is properly configured
### Panel Not Visible
- Verify the contribution point in extension.json matches `sqllab.panels`
- Check that the panel ID is unique
- Restart Superset after installing the extension
## Next Steps
Now that you have a working Hello World extension, you can:
- Add more complex UI components
- Integrate with Superset's API to fetch data
- Add backend functionality for data processing
- Create custom commands and menu items
- Listen to more SQL Lab events
For more advanced examples, explore the other pages in this documentation section.

397
docs/developer_portal/extensions/quick-start.md Normal file
View File

@@ -0,0 +1,397 @@
---
title: Quick Start
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Quick Start
This guide walks you through creating your first Superset extension - a simple "Hello World" panel that displays a message fetched from a backend API endpoint. You'll learn the essential structure and patterns for building full-stack Superset extensions.
## Prerequisites
Before starting, ensure you have:
- Node.js and npm compatible with your Superset version
- Python compatible with your Superset version
- A running Superset development environment
- Basic knowledge of React, TypeScript, and Flask
## Step 1: Install the Extensions CLI
First, install the Apache Superset Extensions CLI:
```bash
pip install apache-superset-extensions-cli
```
## Step 2: Create a New Extension
Use the CLI to scaffold a new extension project. Extensions can include frontend functionality, backend functionality, or both, depending on your needs. This quickstart demonstrates a full-stack extension with both frontend UI components and backend API endpoints to show the complete integration pattern.
```bash
superset-extensions init
```
The CLI will prompt you for information:
```
Extension ID (unique identifier, alphanumeric only): hello_world
Extension name (human-readable display name): Hello World
Initial version [0.1.0]: 0.1.0
License [Apache-2.0]: Apache-2.0
Include frontend? [Y/n]: Y
Include backend? [Y/n]: Y
```
This creates a complete project structure:
```
hello_world/
├── extension.json # Extension metadata and configuration
├── backend/ # Backend Python code
│ ├── src/
│ │ └── hello_world/
│ │ ├── __init__.py
│ │ └── entrypoint.py # Backend registration
│ └── pyproject.toml
└── frontend/ # Frontend TypeScript/React code
├── src/
│ └── index.tsx # Frontend entry point
├── package.json
├── tsconfig.json
└── webpack.config.js
```
## Step 3: Configure Extension Metadata
The generated `extension.json` contains basic metadata. Update it to register your panel in SQL Lab:
```json
{
"id": "hello_world",
"name": "Hello World",
"version": "0.1.0",
"license": "Apache-2.0",
"frontend": {
"contributions": {
"views": {
"sqllab.panels": [
{
"id": "hello_world.main",
"name": "Hello World"
}
]
}
},
"moduleFederation": {
"exposes": ["./index"]
}
},
"backend": {
"entryPoints": ["hello_world.entrypoint"],
"files": ["backend/src/hello_world/**/*.py"]
},
"permissions": ["can_read"]
}
```
**Key fields:**
- `frontend.contributions.views.sqllab.panels`: Registers your panel in SQL Lab
- `backend.entryPoints`: Python modules to load eagerly when extension starts
## Step 4: Create Backend API
The CLI generated a basic `backend/src/hello_world/entrypoint.py`. We'll create an API endpoint.
**Create `backend/src/hello_world/api.py`**
```python
from flask import Response
from flask_appbuilder.api import expose, protect, safe
from superset_core.api.types.rest_api import RestApi
class HelloWorldAPI(RestApi):
resource_name = "hello_world"
openapi_spec_tag = "Hello World"
class_permission_name = "hello_world"
@expose("/message", methods=("GET",))
@protect()
@safe
def get_message(self) -> Response:
"""Gets a hello world message
---
get:
description: >-
Get a hello world message from the backend
responses:
200:
description: Hello world message
content:
application/json:
schema:
type: object
properties:
result:
type: object
properties:
message:
type: string
401:
$ref: '#/components/responses/401'
"""
return self.response(
200,
result={"message": "Hello from the backend!"}
)
```
**Key points:**
- Extends `RestApi` from `superset_core.api.types.rest_api`
- Uses Flask-AppBuilder decorators (`@expose`, `@protect`, `@safe`)
- Returns responses using `self.response(status_code, result=data)`
- The endpoint will be accessible at `/extensions/hello_world/message`
- OpenAPI docstrings are crucial - Flask-AppBuilder uses them to automatically generate interactive API documentation at `/swagger/v1`, allowing developers to explore endpoints, understand schemas, and test the API directly from the browser
**Update `backend/src/hello_world/entrypoint.py`**
Replace the generated print statement with API registration:
```python
from superset_core.api import rest_api
from .api import HelloWorldAPI
rest_api.add_extension_api(HelloWorldAPI)
```
This registers your API with Superset when the extension loads.
## Step 5: Create Frontend Component
The CLI generated boilerplate files. The webpack config and package.json are already properly configured with Module Federation.
**Create `frontend/src/HelloWorldPanel.tsx`**
Create a new file for the component implementation:
```tsx
import React, { useEffect, useState } from 'react';
import { authentication } from '@apache-superset/core';
const HelloWorldPanel: React.FC = () => {
const [message, setMessage] = useState<string>('');
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string>('');
useEffect(() => {
const fetchMessage = async () => {
try {
const csrfToken = await authentication.getCSRFToken();
const response = await fetch('/extensions/hello_world/message', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken!,
},
});
if (!response.ok) {
throw new Error(`Server returned ${response.status}`);
}
const data = await response.json();
setMessage(data.result.message);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
fetchMessage();
}, []);
if (loading) {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<p>Loading...</p>
</div>
);
}
if (error) {
return (
<div style={{ padding: '20px', color: 'red' }}>
<strong>Error:</strong> {error}
</div>
);
}
return (
<div style={{ padding: '20px' }}>
<h3>Hello World Extension</h3>
<div
style={{
padding: '16px',
backgroundColor: '#f6ffed',
border: '1px solid #b7eb8f',
borderRadius: '4px',
marginBottom: '16px',
}}
>
<strong>{message}</strong>
</div>
<p>This message was fetched from the backend API! 🎉</p>
</div>
);
};
export default HelloWorldPanel;
```
**Update `frontend/src/index.tsx`**
Replace the generated code with the extension entry point:
```tsx
import React from 'react';
import { core } from '@apache-superset/core';
import HelloWorldPanel from './HelloWorldPanel';
export const activate = (context: core.ExtensionContext) => {
context.disposables.push(
core.registerViewProvider('hello_world.main', () => <HelloWorldPanel />),
);
};
export const deactivate = () => {};
```
**Key patterns:**
- `activate` function is called when the extension loads
- `core.registerViewProvider` registers the component with ID `hello_world.main` (matching `extension.json`)
- `authentication.getCSRFToken()` retrieves the CSRF token for API calls
- Fetch calls to `/extensions/{extension_id}/{endpoint}` reach your backend API
- `context.disposables.push()` ensures proper cleanup
## Step 6: Install Dependencies
Install the frontend dependencies:
```bash
cd frontend
npm install
cd ..
```
## Step 7: Package the Extension
Create a `.supx` bundle for deployment:
```bash
superset-extensions bundle
```
This command automatically:
- Builds frontend assets using Webpack with Module Federation
- Collects backend Python source files
- Creates a `dist/` directory with:
- `manifest.json` - Build metadata and asset references
- `frontend/dist/` - Built frontend assets (remoteEntry.js, chunks)
- `backend/` - Python source files
- Packages everything into `hello_world-0.1.0.supx` - a zip archive with the specific structure required by Superset
## Step 8: Deploy to Superset
To deploy your extension, you need to enable extensions support and configure where Superset should load them from.
**Configure Superset**
Add the following to your `superset_config.py`:
```python
# Enable extensions feature
FEATURE_FLAGS = {
"EXTENSIONS": True,
}
# Set the directory where extensions are stored
EXTENSIONS_PATH = "/path/to/extensions/folder"
```
**Copy Extension Bundle**
Copy your `.supx` file to the configured extensions path:
```bash
cp hello_world-0.1.0.supx /path/to/extensions/folder/
```
**Restart Superset**
Restart your Superset instance to load the extension:
```bash
# Restart your Superset server
superset run
```
Superset will extract and validate the extension metadata, load the assets, register the extension with its capabilities, and make it available for use.
## Step 9: Test Your Extension
1. **Open SQL Lab** in Superset
2. Look for the **"Hello World"** panel in the panels dropdown or sidebar
3. Open the panel - it should display "Hello from the backend!"
4. Check that the message was fetched from your API endpoint
## Understanding the Flow
Here's what happens when your extension loads:
1. **Superset starts**: Reads `extension.json` and loads backend entrypoint
2. **Backend registration**: `entrypoint.py` registers your API via `rest_api.add_extension_api()`
3. **Frontend loads**: When SQL Lab opens, Superset fetches the remote entry file
4. **Module Federation**: Webpack loads your extension code and resolves `@apache-superset/core` to `window.superset`
5. **Activation**: `activate()` is called, registering your view provider
6. **Rendering**: When the user opens your panel, React renders `<HelloWorldPanel />`
7. **API call**: Component fetches data from `/extensions/hello_world/message`
8. **Backend response**: Your Flask API returns the hello world message
9. **Display**: Component shows the message to the user
## Next Steps
Now that you have a working extension, explore:
- **[Development Mode](./development-mode)** - Faster iteration with local development and watch mode
- **[Extension Project Structure](./extension-project-structure)** - Best practices for organizing larger extensions
- **[Frontend Contribution Types](./frontend-contribution-types)** - Other UI contribution points beyond panels
- **[Interacting with Host](./interacting-with-host)** - Advanced APIs for interacting with Superset
- **[Security Implications](./security-implications)** - Security best practices for extensions
For a complete real-world example, examine the query insights extension in the Superset codebase.

31
docs/developer_portal/extensions/versioning.md
View File

@@ -1,31 +0,0 @@
---
title: Versioning
sidebar_position: 11
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Versioning
All core packages published to NPM and PyPI—including `@apache-superset/core`, `apache-superset-core`, and `apache-superset-extensions-cli`—will follow semantic versioning ([semver](https://semver.org/)). This means that any breaking changes to public APIs, interfaces, or extension points will result in a major version bump, while new features and non-breaking changes will be released as minor or patch updates.
During the initial development phase, packages will remain under version 0.x, allowing for rapid iteration and the introduction of breaking changes as the architecture evolves based on real-world feedback. Once the APIs and extension points are considered stable, we will release version 1.0.0 and begin enforcing strict server practices.
To minimize disruption, breaking changes will be carefully planned and communicated in advance. We will provide clear migration guides and changelogs to help extension authors and core contributors adapt to new versions. Where possible, we will deprecate APIs before removing them, giving developers time to transition to newer interfaces.

61
docs/developer_portal/guides/command-palette.md
View File

@@ -1,61 +0,0 @@
---
title: Command Palette Integration
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Command Palette Integration
🚧 **Coming Soon** 🚧
Learn how to integrate your plugin with Superset's command palette to provide quick access to plugin functionality.
## Topics to be covered:
- Understanding the command palette architecture
- Registering custom commands
- Command categories and organization
- Keyboard shortcuts and hotkeys
- Dynamic command generation
- Command context and availability
- Icon and description customization
- Command execution and callbacks
- Search and filtering integration
- Command palette theming
## Command Types
- **Navigation commands** - Quick navigation to plugin views
- **Action commands** - Execute plugin-specific actions
- **Creation commands** - Create new charts, dashboards, or data sources
- **Configuration commands** - Quick access to settings
- **Help commands** - Documentation and support links
## Implementation Patterns
- Command registration lifecycle
- Async command execution
- Context-aware command availability
- Command result handling
---
*This documentation is under active development. Check back soon for updates!*

64
docs/developer_portal/guides/custom-editors.md
View File

@@ -1,64 +0,0 @@
---
title: Custom Editors
sidebar_position: 4
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Custom Editors
🚧 **Coming Soon** 🚧
Build specialized editing interfaces for data manipulation, query building, and configuration management.
## Topics to be covered:
- Editor component architecture
- Syntax highlighting and code completion
- Real-time validation and error detection
- Undo/redo functionality
- Collaborative editing features
- Custom language support
- Editor extensions and plugins
- Integration with Superset's SQL Lab
- File and document management
- Export and import capabilities
## Editor Types
- **SQL query editors** - Enhanced database query interfaces
- **Configuration editors** - JSON, YAML, and custom config formats
- **Formula editors** - Mathematical and business logic expressions
- **Chart configuration** - Visual chart property editors
- **Data transformation** - ETL pipeline builders
- **Dashboard layout editors** - Drag-and-drop interface builders
## Advanced Features
- Monaco Editor integration
- CodeMirror customization
- Custom language definitions
- Intelligent autocomplete
- Syntax error highlighting
- Multi-cursor editing
---
*This documentation is under active development. Check back soon for updates!*

58
docs/developer_portal/guides/overview.md
View File

@@ -1,58 +0,0 @@
---
title: Development Guides Overview
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Development Guides Overview
🚧 **Coming Soon** 🚧
This section contains practical guides and tutorials for common plugin development scenarios and advanced techniques.
## Topics to be covered:
- Step-by-step development tutorials
- Common development patterns and solutions
- Integration with Superset's core features
- Advanced plugin architectures
- Performance optimization techniques
- Debugging and troubleshooting guides
- Migration guides for plugin updates
- Best practices and coding standards
## Available Guides
- **Command Palette Integration** - Add custom commands and shortcuts
- **WebViews and Embedded Content** - Display external content in Superset
- **Custom Editors** - Build specialized data editing interfaces
- **Virtual Documents** - Handle dynamic content and data sources
## Guide Categories
- **Beginner** - Getting started with basic concepts
- **Intermediate** - Common patterns and integrations
- **Advanced** - Complex architectures and performance optimization
- **Troubleshooting** - Debugging and problem-solving
---
*This documentation is under active development. Check back soon for updates!*

63
docs/developer_portal/guides/virtual-documents.md
View File

@@ -1,63 +0,0 @@
---
title: Virtual Documents
sidebar_position: 5
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Virtual Documents
🚧 **Coming Soon** 🚧
Learn how to create and manage virtual documents that represent dynamic content and data sources within Superset.
## Topics to be covered:
- Virtual document concepts and architecture
- Dynamic content generation
- Document lifecycle management
- Data source abstraction
- Real-time document updates
- Document caching and performance
- Version control and history
- Collaborative document editing
- Document search and indexing
- Export and sharing capabilities
## Virtual Document Types
- **Dynamic reports** - Auto-updating analytical reports
- **Data lineage documents** - Interactive data flow visualization
- **Configuration schemas** - Dynamic form generation
- **API documentation** - Auto-generated from code
- **Data dictionaries** - Searchable metadata catalogs
- **Query libraries** - Shared SQL query collections
## Implementation Patterns
- Document provider interfaces
- Content resolution strategies
- Change detection and synchronization
- Document serialization formats
- Access control and permissions
---
*This documentation is under active development. Check back soon for updates!*

61
docs/developer_portal/guides/webviews.md
View File

@@ -1,61 +0,0 @@
---
title: WebViews and Embedded Content
sidebar_position: 3
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# WebViews and Embedded Content
🚧 **Coming Soon** 🚧
Explore how to embed external web content, iframes, and interactive applications within your Superset plugins.
## Topics to be covered:
- Creating secure WebView components
- iframe integration and sandboxing
- Cross-origin communication patterns
- Authentication and session management
- WebView lifecycle and memory management
- Event handling between parent and child
- Responsive WebView sizing
- Loading states and error handling
- Performance optimization for embedded content
- Security considerations and CSP compliance
## WebView Use Cases
- **External dashboards** - Embed third-party analytics tools
- **Interactive documentation** - Live code examples and tutorials
- **Configuration panels** - External admin interfaces
- **Data exploration tools** - Specialized analysis applications
- **Custom visualizations** - Complex D3.js or other web-based charts
## Security Features
- Content Security Policy (CSP) integration
- Cross-origin resource sharing (CORS) handling
- Secure message passing
- Domain allowlisting
---
*This documentation is under active development. Check back soon for updates!*

8
docs/developer_portal/index.md
View File

@@ -35,8 +35,8 @@ Welcome to the Apache Superset Developer Portal - your comprehensive resource fo
### Extension Development
- [Extension Project Structure](/developer_portal/extensions/extension-project-structure)
- [Extension Architecture](/developer_portal/architecture/overview)
- [Extension Architecture](/developer_portal/extensions/high-level-architecture)
- [Extension Architecture](/developer_portal/extensions/architecture)
- [Quick Start](/developer_portal/extensions/quick-start)
## 📚 Documentation Sections
@@ -105,9 +105,9 @@ Everything you need to contribute to the Apache Superset project. This section i
<td width="50%">
**I want to build an extension**
1. [Learn the architecture](/developer_portal/architecture/overview)
1. [Start with Quick Start](/developer_portal/extensions/quick-start)
2. [Learn extension structure](/developer_portal/extensions/extension-project-structure)
3. [Explore architecture](/developer_portal/extensions/high-level-architecture)
3. [Explore architecture](/developer_portal/extensions/architecture)
</td>
</tr>

549
docs/developer_portal/references/activation-events.md
View File

@@ -1,549 +0,0 @@
---
title: Activation Events
sidebar_position: 4
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Activation Events
Activation events control when your extension is loaded and activated. Extensions should specify activation events to ensure they're only loaded when needed, improving Superset's startup performance.
## Overview
Extensions are activated lazily - they're loaded only when certain conditions are met. This is controlled by the `activationEvents` field in your `extension.json`:
```json
{
"activationEvents": [
"onCommand:myExtension.start",
"onView:sqllab.panels",
"onLanguage:sql"
]
}
```
## Activation Event Types
### onCommand
Activated when a specific command is invoked:
```json
"activationEvents": [
"onCommand:myExtension.analyze",
"onCommand:myExtension.export"
]
```
The extension activates when any of its commands are executed, either through:
- Command palette
- Menu items
- Keyboard shortcuts
- API calls
### onView
Activated when a specific view becomes visible:
```json
"activationEvents": [
"onView:sqllab.panels",
"onView:dashboard.widgets"
]
```
**Available Views**:
- `sqllab.panels` - SQL Lab side panels
- `sqllab.bottomPanels` - SQL Lab bottom panels
**TODO: Future Views**:
- `dashboard.widgets` - Dashboard widget areas
- `chart.toolbar` - Chart toolbar views
- `explore.panels` - Explore view panels
### onLanguage
Activated when a file of a specific language is opened:
```json
"activationEvents": [
"onLanguage:sql",
"onLanguage:python"
]
```
Useful for extensions that provide:
- Language-specific features
- Syntax highlighting
- Code completion
- Linting
### workspaceContains
Activated when the workspace contains files matching a pattern:
```json
"activationEvents": [
"workspaceContains:**/*.sql",
"workspaceContains:**/.supersetrc",
"workspaceContains:**/superset_config.py"
]
```
Uses glob patterns to detect:
- Configuration files
- Project types
- Specific file structures
### onStartupFinished
Activated after Superset has fully started:
```json
"activationEvents": [
"onStartupFinished"
]
```
Use for extensions that:
- Don't need immediate activation
- Provide background services
- Monitor system events
### Star Activation (*)
Always activate (not recommended):
```json
"activationEvents": ["*"]
```
⚠️ **Warning**: This impacts startup performance. Only use when absolutely necessary.
## Extension Lifecycle
### 1. Registration
When Superset starts or an extension is installed:
```typescript
// Extension is registered but not loaded
{
id: 'myExtension',
state: 'unloaded',
activationEvents: ['onCommand:myExtension.start']
}
```
### 2. Activation Trigger
When an activation event occurs:
```typescript
// Event triggered
eventBus.emit('command:myExtension.start');
// Extension manager checks activation events
if (extension.activationEvents.includes('onCommand:myExtension.start')) {
activateExtension(extensionId);
}
```
### 3. Loading
Extension assets are loaded:
```typescript
async function loadExtension(extensionId: string) {
// Load frontend assets
await loadRemoteEntry(extension.remoteEntry);
// Load backend modules (if applicable)
await loadBackendModules(extension.backendModules);
return extension;
}
```
### 4. Activation
The `activate` function is called:
```typescript
export async function activate(context: ExtensionContext) {
console.log('Extension activating');
// Register contributions
const view = context.registerView(...);
const command = context.registerCommand(...);
// Store disposables for cleanup
context.subscriptions.push(view, command);
// Perform initialization
await initialize();
console.log('Extension activated');
}
```
### 5. Active State
Extension is fully operational:
```typescript
{
id: 'myExtension',
state: 'activated',
exports: { /* exposed APIs */ }
}
```
### 6. Deactivation
When extension is disabled or Superset shuts down:
```typescript
export async function deactivate() {
console.log('Extension deactivating');
// Cleanup resources
await cleanup();
// Subscriptions are automatically disposed
console.log('Extension deactivated');
}
```
## Activation Strategies
### Lazy Activation (Recommended)
Activate only when needed:
```json
{
"activationEvents": [
"onCommand:myExtension.start",
"onView:myExtension.panel"
]
}
```
Benefits:
- ✅ Fast startup
- ✅ Lower memory usage
- ✅ Better performance
### Eager Activation
Activate on startup for critical features:
```json
{
"activationEvents": [
"onStartupFinished"
]
}
```
Use cases:
- Authentication providers
- Security extensions
- Core infrastructure
### Conditional Activation
Activate based on workspace:
```json
{
"activationEvents": [
"workspaceContains:**/superset_config.py",
"workspaceContains:**/*.sql"
]
}
```
Benefits:
- Context-aware activation
- Project-specific features
- Automatic detection
## Multiple Activation Events
Extensions can specify multiple events (OR logic):
```json
{
"activationEvents": [
"onCommand:myExtension.start",
"onCommand:myExtension.configure",
"onView:sqllab.panels",
"onLanguage:sql",
"workspaceContains:**/*.myext"
]
}
```
The extension activates when **any** event occurs.
## Performance Considerations
### Do's ✅
1. **Use specific activation events**
```json
"activationEvents": ["onCommand:myExtension.specific"]
```
2. **Defer heavy initialization**
```typescript
export async function activate(context) {
// Quick registration
context.registerCommand('myExtension.heavy', async () => {
// Heavy work only when command is used
await doHeavyWork();
});
}
```
3. **Load resources on demand**
```typescript
let heavyModule;
export async function activate(context) {
context.registerCommand('myExtension.feature', async () => {
// Lazy load when needed
heavyModule = heavyModule || await import('./heavy');
heavyModule.execute();
});
}
```
### Don'ts ❌
1. **Avoid star activation**
```json
// Bad - activates always
"activationEvents": ["*"]
```
2. **Don't block activation**
```typescript
// Bad - blocks activation
export async function activate(context) {
await longRunningOperation(); // Blocks
}
// Good - defer work
export async function activate(context) {
setImmediate(() => longRunningOperation());
}
```
3. **Avoid unnecessary events**
```json
// Bad - too many events
"activationEvents": [
"onStartupFinished",
"onCommand:*",
"onView:*"
]
```
## Testing Activation Events
### Manual Testing
1. **Check activation timing**:
```typescript
export async function activate(context) {
console.time('activation');
// ... activation code
console.timeEnd('activation');
}
```
2. **Verify event triggers**:
```typescript
// In browser console
superset.extensions.getExtension('myExtension').state
// Should be 'unloaded' before event
// Trigger event
superset.commands.executeCommand('myExtension.start');
// Check again
superset.extensions.getExtension('myExtension').state
// Should be 'activated' after event
```
### Automated Testing
```typescript
describe('Extension Activation', () => {
it('should activate on command', async () => {
const extension = await loadExtension('myExtension');
expect(extension.state).toBe('unloaded');
await commands.executeCommand('myExtension.start');
expect(extension.state).toBe('activated');
});
it('should not activate on unrelated event', async () => {
const extension = await loadExtension('myExtension');
await commands.executeCommand('unrelated.command');
expect(extension.state).toBe('unloaded');
});
});
```
## Debugging Activation
### Enable Debug Logging
```typescript
// In extension
const DEBUG = true;
export async function activate(context) {
if (DEBUG) {
console.log('[MyExtension] Activating', {
extensionId: context.extensionId,
timestamp: new Date().toISOString()
});
}
}
```
### Monitor Activation Events
```typescript
// In browser console
superset.events.on('extension:activating', (e) => {
console.log('Extension activating:', e.extensionId);
});
superset.events.on('extension:activated', (e) => {
console.log('Extension activated:', e.extensionId);
});
```
### Common Issues
**Extension not activating:**
- Check activation events are correct
- Verify event is being triggered
- Check browser console for errors
- Ensure extension is enabled
**Extension activating too early:**
- Review activation events
- Consider using more specific events
- Check for star activation
**Extension activating multiple times:**
- Check for duplicate event registrations
- Verify deactivation cleanup
- Review activation logic
## Best Practices
1. **Choose minimal activation events** - Only what's necessary
2. **Defer expensive operations** - Don't block activation
3. **Use specific events** - Avoid broad patterns
4. **Test activation timing** - Ensure good performance
5. **Document activation requirements** - Help users understand
6. **Handle activation failures** - Graceful error handling
7. **Clean up on deactivation** - Prevent memory leaks
8. **Log activation in debug mode** - Aid troubleshooting
9. **Consider user experience** - Balance performance and features
10. **Version activation events** - Plan for changes
## Future Activation Events
These activation events are planned for future releases:
- `onUri` - Custom URI schemes
- `onWebviewPanel` - Webview visibility
- `onFileSystem` - File system providers
- `onDebug` - Debug sessions
- `onTaskType` - Task providers
- `onNotebook` - Notebook documents
- `onAuthentication` - Auth providers
- `onCustomEditor` - Custom editors
- `onTerminalProfile` - Terminal profiles
## Migration Guide
### From Always Active to Lazy
Before (always active):
```json
{
"activationEvents": ["*"]
}
```
After (lazy activation):
```json
{
"activationEvents": [
"onCommand:myExtension.command1",
"onCommand:myExtension.command2",
"onView:myExtension.view"
]
}
```
### Adding New Activation Events
When adding features:
```json
{
"version": "1.0.0",
"activationEvents": [
"onCommand:myExtension.oldCommand"
]
}
// Version 1.1.0 - Added new feature
{
"version": "1.1.0",
"activationEvents": [
"onCommand:myExtension.oldCommand",
"onCommand:myExtension.newCommand", // New
"onView:myExtension.panel" // New
]
}
```
## Related Documentation
- [Extension Manifest](/developer_portal/references/manifest)
- [Lifecycle Management](/developer_portal/extensions/lifecycle-management)
- [Contribution Points](/developer_portal/references/contribution-points)
- [Architecture Overview](/developer_portal/architecture/overview)

101
docs/developer_portal/references/api.md
View File

@@ -1,101 +0,0 @@
---
title: API Reference
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# API Reference
🚧 **Coming Soon** 🚧
Complete API documentation for all Superset plugin development interfaces and services.
## Topics to be covered:
- Core plugin development APIs
- Chart and visualization APIs
- Data transformation and query APIs
- UI component and theming APIs
- Event handling and lifecycle APIs
- Configuration and settings APIs
- Security and authentication APIs
- Performance and monitoring APIs
- Utility functions and helpers
- TypeScript type definitions
## API Categories
### Core Plugin APIs
#### Plugin Registration
```typescript
// Plugin registration interface
interface PluginConfig {
name: string;
version: string;
components: ComponentRegistry;
metadata: PluginMetadata;
}
// registerPlugin function
function registerPlugin(config: PluginConfig): void;
```
#### Plugin Lifecycle
- `onActivate()` - Plugin activation hook
- `onDeactivate()` - Plugin deactivation hook
- `onUpdate()` - Plugin update hook
- `onConfigChange()` - Configuration change hook
### Chart Development APIs
#### Chart Component Interface
```typescript
interface ChartComponent {
render(props: ChartProps): JSX.Element;
transformProps(chartProps: ChartProps): TransformedProps;
buildQuery(formData: FormData): Query;
}
```
#### Data Transformation
- `transformProps()` - Data transformation function
- `buildQuery()` - Query building function
- `formatData()` - Data formatting utilities
- `validateData()` - Data validation helpers
### UI and Theming APIs
#### Theme Provider
- `useTheme()` - Theme context hook
- `ThemeProvider` - Theme provider component
- `createTheme()` - Theme creation utility
- `mergeThemes()` - Theme composition function
#### Component Library
- Button components and variants
- Form controls and inputs
- Layout and grid components
- Data display components
---
*This documentation is under active development. Check back soon for updates!*

475
docs/developer_portal/references/contribution-points.md
View File

@@ -1,475 +0,0 @@
---
title: Contribution Points
sidebar_position: 3
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Contribution Points Reference
Contribution points define where and how extensions can add functionality to Apache Superset. Extensions declare their contributions in the `extension.json` manifest file.
## Views
Views are UI components that appear in designated areas of Superset.
### SQL Lab Panels
Extensions can contribute panels to SQL Lab:
```json
"contributions": {
"views": {
"sqllab.panels": [
{
"id": "myExtension.dataPanel",
"name": "Data Explorer",
"icon": "DatabaseOutlined",
"when": "sqllab.connected"
}
]
}
}
```
**Properties**:
- `id` - Unique view identifier
- `name` - Display name in UI
- `icon` - Ant Design icon name
- `when` - Conditional visibility
**Available Locations**:
- `sqllab.panels` - Side panels in SQL Lab
- `sqllab.bottomPanels` - Bottom panels below editor
**TODO: Future Locations**:
- `dashboard.widgets` - Dashboard widget areas
- `chart.panels` - Chart editor panels
- `explore.sections` - Explore view sections
### View Registration
In your extension code:
```typescript
export function activate(context: ExtensionContext) {
const view = context.registerView(
'myExtension.dataPanel',
<DataExplorerPanel />
);
context.subscriptions.push(view);
}
```
## Commands
Commands are actions that can be invoked by users or other extensions.
### Command Definition
```json
"commands": [
{
"command": "myExtension.runAnalysis",
"title": "Run Analysis",
"category": "Data Tools",
"icon": "PlayCircleOutlined",
"enablement": "sqllab.hasQuery && !sqllab.running"
}
]
```
**Properties**:
- `command` - Unique command identifier
- `title` - Display name
- `category` - Command palette category
- `icon` - Optional icon
- `enablement` - Condition for enabling
### Command Registration
```typescript
commands.registerCommand('myExtension.runAnalysis', {
execute: async (...args) => {
const query = sqlLab.getCurrentQuery();
const result = await analyzeQuery(query);
return result;
},
isEnabled: () => {
return sqlLab.hasQuery() && !sqlLab.isRunning();
}
});
```
### Built-in Commands
Extensions can invoke these built-in commands:
```typescript
// SQL Lab commands
await commands.executeCommand('sqllab.executeQuery');
await commands.executeCommand('sqllab.formatQuery');
await commands.executeCommand('sqllab.saveQuery');
await commands.executeCommand('sqllab.exportResults');
// Editor commands
await commands.executeCommand('editor.action.formatDocument');
await commands.executeCommand('editor.action.commentLine');
// System commands
await commands.executeCommand('workbench.action.openSettings');
await commands.executeCommand('workbench.action.showCommands');
```
## Menus
Add items to existing Superset menus.
### Menu Contributions
```json
"menus": {
"sqllab.editor": {
"primary": [
{
"command": "myExtension.analyze",
"group": "navigation",
"order": 1,
"when": "editorFocus"
}
],
"secondary": [
{
"command": "myExtension.settings",
"group": "settings"
}
],
"context": [
{
"command": "myExtension.explain",
"group": "1_modification",
"when": "editorTextFocus && editorHasSelection"
}
]
}
}
```
**Menu Locations**:
- `sqllab.editor.primary` - Main toolbar
- `sqllab.editor.secondary` - Secondary toolbar
- `sqllab.editor.context` - Right-click menu
**Groups** (for organization):
- `navigation` - Primary navigation items
- `1_modification` - Edit operations
- `2_workspace` - Workspace management
- `9_cutcopypaste` - Clipboard operations
- `z_commands` - Other commands
**TODO: Future Menu Locations**:
- `explorer.context` - Data explorer context menu
- `dashboard.toolbar` - Dashboard toolbar
- `chart.context` - Chart context menu
## Configuration
Define user-configurable settings.
### Configuration Schema
```json
"configuration": {
"title": "My Extension Settings",
"order": 10,
"properties": {
"myExtension.enableFeature": {
"type": "boolean",
"default": true,
"description": "Enable the main feature",
"order": 1
},
"myExtension.apiEndpoint": {
"type": "string",
"default": "https://api.example.com",
"description": "API endpoint URL",
"pattern": "^https?://",
"order": 2
},
"myExtension.refreshInterval": {
"type": "number",
"default": 5000,
"minimum": 1000,
"maximum": 60000,
"description": "Refresh interval in milliseconds",
"order": 3
},
"myExtension.theme": {
"type": "string",
"enum": ["light", "dark", "auto"],
"enumDescriptions": [
"Light theme",
"Dark theme",
"Follow system"
],
"default": "auto",
"description": "Color theme",
"order": 4
},
"myExtension.advanced": {
"type": "object",
"properties": {
"cacheSize": {
"type": "number",
"default": 100
},
"debug": {
"type": "boolean",
"default": false
}
},
"description": "Advanced settings",
"order": 5
}
}
}
```
### Accessing Configuration
```typescript
// Get configuration value
const isEnabled = workspace.getConfiguration('myExtension')
.get<boolean>('enableFeature');
// Update configuration
await workspace.getConfiguration('myExtension')
.update('refreshInterval', 10000);
// Listen for changes
workspace.onDidChangeConfiguration(e => {
if (e.affectsConfiguration('myExtension.theme')) {
updateTheme();
}
});
```
## Keybindings
Register keyboard shortcuts for commands.
### TODO: Keybinding Definition (Future)
```json
"keybindings": [
{
"command": "myExtension.runQuery",
"key": "ctrl+shift+r",
"mac": "cmd+shift+r",
"when": "editorTextFocus"
}
]
```
## Language Support
### TODO: Language Contributions (Future)
```json
"languages": [
{
"id": "supersql",
"extensions": [".ssql"],
"aliases": ["SuperSQL", "ssql"],
"configuration": "./language-configuration.json"
}
]
```
## Themes
### TODO: Theme Contributions (Future)
```json
"themes": [
{
"label": "My Dark Theme",
"uiTheme": "vs-dark",
"path": "./themes/my-dark-theme.json"
}
]
```
## Status Bar
Add items to the status bar.
### TODO: Status Bar Contributions (Future)
```json
"statusBar": [
{
"id": "myExtension.status",
"alignment": "left",
"priority": 100,
"text": "$(database) Connected",
"tooltip": "Database connection status",
"command": "myExtension.showStatus"
}
]
```
## Activity Bar
### TODO: Activity Bar Contributions (Future)
```json
"activityBar": [
{
"id": "myExtension.explorer",
"title": "Data Explorer",
"icon": "./icons/explorer.svg"
}
]
```
## Context Variables
Extensions can use these context variables in `when` clauses:
### SQL Lab Context
- `sqllab.connected` - Database connection established
- `sqllab.hasQuery` - Query text present
- `sqllab.querySelected` - Query text selected
- `sqllab.running` - Query executing
- `sqllab.hasResults` - Results available
- `sqllab.queryExecuted` - Query has been run
- `sqllab.panelVisible` - Specific panel visible
- `sqllab.tabActive` - Specific tab active
### Editor Context
- `editorFocus` - Editor has focus
- `editorTextFocus` - Text area focused
- `editorHasSelection` - Text selected
- `editorHasMultipleSelections` - Multiple selections
- `editorReadonly` - Editor is read-only
- `editorLangId` - Language ID matches
### Workspace Context
- `workspaceFolderCount` - Number of workspace folders
- `workspaceState` - Workspace state value
- `config.*` - Configuration values
### Resource Context
- `resourceScheme` - URI scheme matches
- `resourceFilename` - Filename matches pattern
- `resourceExtname` - File extension matches
- `resourceLangId` - Resource language ID
## Activation Events
Control when your extension activates:
```json
"activationEvents": [
"onCommand:myExtension.start",
"onView:myExtension.explorer",
"onLanguage:sql",
"workspaceContains:**/*.ssql",
"onStartupFinished"
]
```
See [Activation Events](/developer_portal/references/activation-events) for details.
## API Access Declaration
Declare which APIs your extension uses:
```json
"capabilities": {
"apis": [
"sqllab.*",
"authentication.getUser",
"workspace.getConfiguration",
"commands.executeCommand"
]
}
```
## Contribution Validation
Contributions are validated:
1. **At build time** - Schema validation
2. **At registration** - Conflict detection
3. **At runtime** - Permission checks
Common validation errors:
- Duplicate command IDs
- Invalid menu locations
- Missing required properties
- Circular dependencies
- Invalid context expressions
## Best Practices
1. **Use namespaced IDs** - Prefix with extension name
2. **Declare minimal capabilities** - Only request needed APIs
3. **Provide meaningful descriptions** - Help users understand
4. **Use appropriate icons** - Follow Ant Design guidelines
5. **Group related items** - Organize menus logically
6. **Test context conditions** - Ensure `when` clauses work
7. **Handle missing permissions** - Graceful degradation
8. **Document commands** - Explain what they do
9. **Version your APIs** - Plan for changes
10. **Validate user input** - For configuration values
## Future Contribution Points
These contribution points are planned for future releases:
- **Debuggers** - Custom debugging adapters
- **Tasks** - Background task providers
- **Snippets** - Code snippets
- **Color Themes** - Complete color themes
- **Icon Themes** - Icon set definitions
- **Product Icons** - Custom product icons
- **Walkthroughs** - Getting started guides
- **Authentication** - Auth providers
- **Views Containers** - Custom view containers
- **Terminal** - Terminal profiles
- **Comments** - Comment providers
- **Code Actions** - Quick fixes
- **Code Lens** - Inline commands
- **Semantic Tokens** - Syntax highlighting
## Related Documentation
- [Extension Manifest](/developer_portal/references/manifest)
- [Activation Events](/developer_portal/references/activation-events)
- [API Reference](/developer_portal/api/frontend)
- [Frontend Contribution Types](/developer_portal/extensions/frontend-contribution-types)

526
docs/developer_portal/references/manifest.md
View File

@@ -1,526 +0,0 @@
---
title: Extension Manifest
sidebar_position: 5
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Extension Manifest Reference
The `extension.json` file defines metadata, capabilities, and configuration for a Superset extension. This file is required at the root of every extension project.
## Complete Example
```json
{
"name": "dataset_references",
"displayName": "Dataset References",
"version": "1.0.0",
"description": "Display metadata about tables referenced in SQL queries",
"author": "Apache Superset Contributors",
"license": "Apache-2.0",
"homepage": "https://github.com/apache/superset",
"repository": {
"type": "git",
"url": "https://github.com/apache/superset.git"
},
"bugs": {
"url": "https://github.com/apache/superset/issues"
},
"engines": {
"superset": ">=4.0.0"
},
"categories": ["SQL Lab", "Analytics"],
"keywords": ["sql", "metadata", "tables", "references"],
"icon": "database",
"galleryBanner": {
"color": "#1890ff",
"theme": "dark"
},
"frontend": {
"main": "./dist/index.js",
"contributions": {
"views": {
"sqllab.panels": [
{
"id": "dataset_references.main",
"name": "Dataset References",
"icon": "TableOutlined",
"when": "sqllab.queryExecuted"
}
]
},
"commands": [
{
"command": "dataset_references.refresh",
"title": "Refresh Dataset Metadata",
"category": "Dataset References",
"icon": "ReloadOutlined"
}
],
"menus": {
"sqllab.editor": {
"primary": [
{
"command": "dataset_references.refresh",
"group": "navigation",
"when": "dataset_references.panelVisible"
}
]
}
},
"configuration": {
"title": "Dataset References",
"properties": {
"dataset_references.autoRefresh": {
"type": "boolean",
"default": true,
"description": "Automatically refresh metadata on query execution"
},
"dataset_references.showPartitions": {
"type": "boolean",
"default": true,
"description": "Display partition information"
},
"dataset_references.cacheTimeout": {
"type": "number",
"default": 300,
"description": "Cache timeout in seconds"
}
}
}
},
"moduleFederation": {
"name": "dataset_references",
"exposes": {
"./index": "./src/index"
},
"shared": {
"react": { "singleton": true },
"react-dom": { "singleton": true }
}
}
},
"backend": {
"main": "dataset_references.entrypoint",
"entryPoints": ["dataset_references.entrypoint"],
"files": ["backend/src/dataset_references/**/*.py"],
"requirements": [
"sqlparse>=0.4.0",
"pandas>=1.3.0"
]
},
"activationEvents": [
"onView:sqllab.panels",
"onCommand:dataset_references.refresh",
"workspaceContains:**/*.sql"
]
}
```
## Required Fields
### name
- **Type**: `string`
- **Pattern**: `^[a-z0-9_]+$`
- **Description**: Unique identifier for the extension. Must be lowercase with underscores.
```json
"name": "my_extension"
```
### version
- **Type**: `string`
- **Format**: [Semantic Versioning](https://semver.org/)
- **Description**: Extension version following semver format.
```json
"version": "1.2.3"
```
### engines
- **Type**: `object`
- **Description**: Specifies compatible Superset versions.
```json
"engines": {
"superset": ">=4.0.0 <5.0.0"
}
```
## Metadata Fields
### displayName
- **Type**: `string`
- **Description**: Human-readable name shown in UI.
### description
- **Type**: `string`
- **Description**: Short description of extension functionality.
### author
- **Type**: `string` | `object`
- **Description**: Extension author information.
```json
"author": {
"name": "Jane Doe",
"email": "jane@example.com",
"url": "https://example.com"
}
```
### license
- **Type**: `string`
- **Description**: SPDX license identifier.
- **Common values**: `Apache-2.0`, `MIT`, `BSD-3-Clause`
### categories
- **Type**: `string[]`
- **Description**: Extension categories for marketplace organization.
- **Valid values**:
- `"SQL Lab"`
- `"Dashboard"`
- `"Charts"`
- `"Data Sources"`
- `"Analytics"`
- `"Security"`
- `"Theming"`
- `"Developer Tools"`
### keywords
- **Type**: `string[]`
- **Description**: Search keywords for extension discovery.
### icon
- **Type**: `string`
- **Description**: Icon identifier or path to icon file.
## Frontend Configuration
### frontend.main
- **Type**: `string`
- **Description**: Entry point for frontend code.
### frontend.contributions
Defines how the extension extends Superset's UI.
#### views
Register custom views and panels:
```json
"views": {
"sqllab.panels": [
{
"id": "extension.panel",
"name": "My Panel",
"icon": "icon-name",
"when": "condition"
}
]
}
```
**View Locations**:
- `sqllab.panels` - SQL Lab side panels
- `sqllab.bottomPanels` - SQL Lab bottom panels
- `dashboard.widgets` - Dashboard widgets (TODO: future)
- `chart.toolbar` - Chart toolbar items (TODO: future)
#### commands
Register executable commands:
```json
"commands": [
{
"command": "extension.doSomething",
"title": "Do Something",
"category": "My Extension",
"icon": "PlayCircleOutlined",
"enablement": "resourceIsSelected"
}
]
```
#### menus
Add items to existing menus:
```json
"menus": {
"sqllab.editor": {
"primary": [
{
"command": "extension.command",
"group": "navigation",
"when": "editorFocus"
}
],
"context": [
{
"command": "extension.contextAction",
"group": "1_modification"
}
]
}
}
```
**Menu Locations**:
- `sqllab.editor.primary` - Main SQL Lab toolbar
- `sqllab.editor.secondary` - Secondary actions
- `sqllab.editor.context` - Right-click context menu
- `explorer.context` - Data explorer context menu (TODO: future)
#### configuration
Define extension settings:
```json
"configuration": {
"title": "My Extension",
"properties": {
"myExtension.setting1": {
"type": "boolean",
"default": true,
"description": "Enable feature X"
},
"myExtension.setting2": {
"type": "string",
"enum": ["option1", "option2"],
"default": "option1",
"description": "Choose option"
}
}
}
```
**Property Types**:
- `boolean` - True/false toggle
- `string` - Text input
- `number` - Numeric input
- `array` - List of values
- `object` - Complex configuration
### frontend.moduleFederation
Webpack Module Federation configuration:
```json
"moduleFederation": {
"name": "extension_name",
"exposes": {
"./index": "./src/index"
},
"shared": {
"react": { "singleton": true },
"react-dom": { "singleton": true },
"@apache-superset/core": { "singleton": true }
}
}
```
## Backend Configuration
### backend.main
- **Type**: `string`
- **Description**: Main Python module entry point.
### backend.entryPoints
- **Type**: `string[]`
- **Description**: Python modules to load on startup.
```json
"entryPoints": [
"my_extension.api",
"my_extension.security",
"my_extension.models"
]
```
### backend.files
- **Type**: `string[]`
- **Description**: Glob patterns for backend files to include.
```json
"files": [
"backend/src/**/*.py",
"backend/config/*.yaml"
]
```
### backend.requirements
- **Type**: `string[]`
- **Description**: Python package dependencies.
```json
"requirements": [
"requests>=2.28.0",
"pandas>=1.3.0,<2.0.0"
]
```
## Activation Events
Controls when the extension is activated:
```json
"activationEvents": [
"onView:sqllab.panels",
"onCommand:myExtension.start",
"onLanguage:sql",
"workspaceContains:**/*.sql",
"*"
]
```
**Event Types**:
- `onView:<viewId>` - When specific view is opened
- `onCommand:<commandId>` - When command is executed
- `onLanguage:<language>` - When file type is opened
- `workspaceContains:<pattern>` - When workspace contains matching files
- `onStartupFinished` - After Superset fully starts
- `*` - Always activate (not recommended)
## Conditional Activation ("when" clauses)
Control when UI elements are visible/enabled:
```json
"when": "sqllab.queryExecuted && config.myExtension.enabled"
```
**Context Keys**:
- `sqllab.queryExecuted` - Query has been run
- `sqllab.hasResults` - Query returned results
- `editorFocus` - Editor is focused
- `resourceIsSelected` - Resource selected in explorer
- `config.<setting>` - Configuration value check
**Operators**:
- `&&` - AND
- `||` - OR
- `!` - NOT
- `==` - Equals
- `!=` - Not equals
- `=~` - Regex match
## Capabilities Declaration
Declare required permissions and capabilities:
```json
"capabilities": {
"permissions": [
"database.read",
"query.execute",
"cache.write"
],
"apis": [
"sqllab.*",
"authentication.getUser"
]
}
```
## Build Configuration
### TODO: Future Fields
These fields are planned for future implementation:
```json
{
"publisher": "organization-name",
"preview": false,
"contributes": {
"themes": [],
"languages": [],
"debuggers": [],
"jsonValidation": []
},
"extensionDependencies": [
"other-extension@^1.0.0"
],
"extensionPack": [
"extension1",
"extension2"
],
"scripts": {
"compile": "webpack",
"test": "jest",
"lint": "eslint"
}
}
```
## Validation
The manifest is validated against a JSON schema during:
- Development (`superset-extensions dev`)
- Build (`superset-extensions build`)
- Installation (API upload)
Common validation errors:
- Missing required fields
- Invalid version format
- Incompatible engine version
- Duplicate command IDs
- Invalid activation events
## Best Practices
1. **Use semantic versioning** for the version field
2. **Declare minimum Superset version** accurately
3. **Use specific activation events** to improve performance
4. **Provide clear descriptions** for configuration options
5. **Include all required Python dependencies** in requirements
6. **Use unique IDs** for commands and views
7. **Follow naming conventions** (snake_case for name, camelCase for settings)
8. **Include complete author information** for support
9. **Specify appropriate categories** for discovery
10. **Test manifest changes** before deployment
## Migration from Legacy Format
If migrating from older extension formats:
```javascript
// Legacy format (deprecated)
{
"plugin_name": "MyPlugin",
"plugin_version": "1.0"
}
// New format
{
"name": "my_plugin",
"version": "1.0.0",
"engines": {
"superset": ">=4.0.0"
}
}
```
## Related Documentation
- [Extension Project Structure](/developer_portal/extensions/extension-project-structure)
- [Contribution Points](/developer_portal/references/contribution-points)
- [Activation Events](/developer_portal/references/activation-events)
- [API Reference](/developer_portal/api/frontend)

74
docs/developer_portal/references/overview.md
View File

@@ -1,74 +0,0 @@
---
title: References Overview
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# References Overview
🚧 **Coming Soon** 🚧
Comprehensive reference documentation for all Superset plugin APIs, configuration options, and development resources.
## Topics to be covered:
- Complete API reference documentation
- Plugin configuration schemas
- Event and hook reference
- Component library documentation
- TypeScript type definitions
- Extension point catalog
- Error code reference
- Performance metrics documentation
- Migration guides and changelogs
- Troubleshooting and FAQ
## Reference Sections
### API Documentation
- **Plugin APIs** - Core plugin development interfaces
- **Chart APIs** - Visualization component interfaces
- **Data APIs** - Query and transformation interfaces
- **UI APIs** - User interface and theming interfaces
- **Utility APIs** - Helper functions and utilities
### Configuration References
- **Plugin Manifests** - Plugin.json schema and options
- **Contribution Points** - Available extension points
- **Activation Events** - Plugin lifecycle triggers
- **Settings Schema** - Configuration option definitions
### Development Resources
- **TypeScript Definitions** - Complete type reference
- **Component Library** - Reusable UI components
- **Testing Utilities** - Testing helpers and mocks
- **Build Tools** - Webpack and bundling configuration
## Documentation Format
- **Interactive examples** - Live code demonstrations
- **Type annotations** - Complete TypeScript signatures
- **Usage patterns** - Common implementation examples
- **Migration notes** - Version upgrade guidance
---
*This documentation is under active development. Check back soon for updates!*

47
docs/developer_portal/sidebars.js
View File

@@ -22,16 +22,10 @@ module.exports = {
'index',
{
type: 'category',
label: 'Getting Started',
label: 'Contributing',
collapsed: true,
items: [
'getting-started/index',
],
},
{
type: 'category',
label: 'Architecture',
items: [
'architecture/overview',
'contributing/overview',
],
},
{
@@ -39,47 +33,24 @@ module.exports = {
label: 'Extensions',
collapsed: true,
items: [
'extensions/architectural-principles',
'extensions/high-level-architecture',
'extensions/overview',
'extensions/quick-start',
'extensions/architecture',
'extensions/extension-project-structure',
'extensions/extension-metadata',
'extensions/frontend-contribution-types',
'extensions/interacting-with-host',
'extensions/dynamic-module-loading',
'extensions/deploying-extension',
'extensions/lifecycle-management',
'extensions/development-mode',
'extensions/versioning',
'extensions/security-implications',
{
type: 'doc',
id: 'extensions/built-in-features',
customProps: {
disabled: true,
},
},
'extensions/proof-of-concept',
],
},
{
type: 'category',
label: 'API Reference',
label: 'Testing',
collapsed: true,
items: [
'api/frontend',
],
},
{
type: 'category',
label: 'CLI',
items: [
'cli/overview',
],
},
{
type: 'category',
label: 'Examples',
items: [
'examples/index',
'testing/overview',
],
},
],

4
docs/developer_portal/testing/overview.md
View File

@@ -1,5 +1,5 @@
---
title: Testing Overview
title: Overview
sidebar_position: 1
---
@@ -22,7 +22,7 @@ specific language governing permissions and limitations
under the License.
-->
# Testing Overview
# Overview
Apache Superset follows a comprehensive testing strategy that ensures code quality, reliability, and maintainability. This section covers all aspects of testing in the Superset ecosystem, from unit tests to end-to-end testing workflows.

70
docs/developer_portal/ux/accessibility.md
View File

@@ -1,70 +0,0 @@
---
title: Accessibility Guidelines
sidebar_position: 3
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Accessibility Guidelines
🚧 **Coming Soon** 🚧
Ensure your Superset plugins are accessible to users with disabilities and comply with modern accessibility standards.
## Topics to be covered:
- WCAG 2.1 compliance requirements
- Keyboard navigation and focus management
- Screen reader compatibility
- Color contrast and visual accessibility
- Alternative text for images and charts
- Accessible form design and validation
- ARIA labels and semantic markup
- Accessibility testing tools and techniques
- Voice control and assistive technology support
- Internationalization and right-to-left languages
## Accessibility Standards
### WCAG 2.1 Level AA Compliance
- **Perceivable** - Information presented in ways users can perceive
- **Operable** - Interface components must be operable by all users
- **Understandable** - Information and UI operation must be understandable
- **Robust** - Content must be robust enough for various assistive technologies
### Key Requirements
- **Color contrast** - Minimum 4.5:1 ratio for normal text
- **Keyboard navigation** - All functionality accessible via keyboard
- **Focus indicators** - Clear visual focus indicators
- **Alternative text** - Meaningful descriptions for non-text content
- **Error identification** - Clear error messages and instructions
## Testing Tools
- axe-core accessibility testing
- Lighthouse accessibility audits
- Screen reader testing (NVDA, JAWS, VoiceOver)
- Keyboard navigation testing
- Color contrast analyzers
---
*This documentation is under active development. Check back soon for updates!*

73
docs/developer_portal/ux/best-practices.md
View File

@@ -1,73 +0,0 @@
---
title: UX Best Practices
sidebar_position: 4
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# UX Best Practices
🚧 **Coming Soon** 🚧
Practical guidelines and proven patterns for creating exceptional user experiences in Superset plugins.
## Topics to be covered:
- User research and persona development
- Usability testing and feedback collection
- Information architecture and navigation design
- Interaction design patterns
- Visual design and branding consistency
- Performance optimization for user experience
- Mobile and responsive design strategies
- User onboarding and feature discovery
- Error handling and graceful degradation
- Analytics and user behavior tracking
## Common UX Patterns
### Data Visualization
- **Progressive disclosure** - Show summary first, details on demand
- **Contextual actions** - Relevant controls near data points
- **Consistent legends** - Standardized color coding and symbols
- **Responsive charts** - Adapt to different screen sizes
### Navigation and Discovery
- **Breadcrumb navigation** - Clear path indicators
- **Search and filtering** - Quick content discovery
- **Contextual menus** - Right-click and hover actions
- **Keyboard shortcuts** - Power user efficiency
### Form Design
- **Smart defaults** - Pre-populate based on context
- **Inline validation** - Real-time feedback
- **Progressive enhancement** - Advanced features for power users
- **Clear error states** - Helpful error messages and recovery
## Performance Considerations
- Loading state management
- Perceived performance optimization
- Data streaming and pagination
- Client-side caching strategies
---
*This documentation is under active development. Check back soon for updates!*

68
docs/developer_portal/ux/design-principles.md
View File

@@ -1,68 +0,0 @@
---
title: Design Principles
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Design Principles
🚧 **Coming Soon** 🚧
Core design principles that guide the development of effective and user-friendly Superset plugins.
## Topics to be covered:
- Data-first design philosophy
- Progressive disclosure principles
- Cognitive load reduction strategies
- Visual hierarchy and information architecture
- Feedback and affordance design
- Error prevention and recovery
- Performance and perceived performance
- Cross-platform consistency
- Internationalization considerations
- Mobile and responsive design principles
## Fundamental Principles
### Data Transparency
- Make data sources and transformations visible
- Provide clear data lineage and provenance
- Show confidence levels and data quality indicators
### User Empowerment
- Enable self-service analytics
- Provide multiple paths to accomplish goals
- Support both novice and expert workflows
### Contextual Relevance
- Show relevant information at the right time
- Minimize context switching
- Provide smart defaults based on user behavior
### Collaborative Design
- Support sharing and collaboration features
- Enable team workflows and permissions
- Provide commenting and annotation capabilities
---
*This documentation is under active development. Check back soon for updates!*

62
docs/developer_portal/ux/overview.md
View File

@@ -1,62 +0,0 @@
---
title: User Experience Guidelines
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# User Experience Guidelines
🚧 **Coming Soon** 🚧
Comprehensive guidelines for creating intuitive and accessible user experiences in Superset plugins.
## Topics to be covered:
- Superset design system principles
- User interface consistency standards
- Interaction patterns and behaviors
- Visual hierarchy and layout guidelines
- Color usage and accessibility compliance
- Typography and content guidelines
- Responsive design principles
- Error handling and user feedback
- Loading states and performance indicators
- User onboarding and help systems
## UX Principles
- **Consistency** - Follow established patterns and conventions
- **Clarity** - Make interfaces intuitive and self-explanatory
- **Efficiency** - Optimize for user productivity and speed
- **Accessibility** - Ensure inclusive design for all users
- **Flexibility** - Support different workflows and preferences
## Design Resources
- Component library and style guide
- Design tokens and theme variables
- Icon library and usage guidelines
- Layout templates and grid systems
- Accessibility testing tools
---
*This documentation is under active development. Check back soon for updates!*

77
docs/developer_portal/viz-plugins/controls.md
View File

@@ -1,77 +0,0 @@
---
title: Controls and Configuration
sidebar_position: 3
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Controls and Configuration
🚧 **Coming Soon** 🚧
Learn how to create intuitive control panels and configuration interfaces for your visualization plugins.
## Topics to be covered:
- Control panel architecture and layout
- Built-in control types and components
- Creating custom control components
- Control validation and error handling
- Conditional control visibility
- Control grouping and sections
- Advanced control patterns
- Form state management
- Control panel theming
- Accessibility in control design
## Available Control Types
### Basic Controls
- **Text Input** - String values and labels
- **Number Input** - Numeric values with validation
- **Checkbox** - Boolean toggles
- **Radio Buttons** - Single selection from options
- **Select Dropdown** - Single or multi-select
- **Slider** - Numeric range selection
### Advanced Controls
- **Color Picker** - Color selection with palette
- **Date Picker** - Date and time selection
- **Code Editor** - SQL, JSON, or custom syntax
- **File Upload** - Asset and data file handling
- **Metrics Selector** - Data column selection
- **Filter Controls** - Dynamic filtering options
### Custom Controls
- Building reusable control components
- Control component API and props
- Integration with form validation
- Custom control styling and theming
## Control Configuration Patterns
- Section organization and collapsible groups
- Conditional control display logic
- Dynamic control generation
- Control dependencies and relationships
---
*This documentation is under active development. Check back soon for updates!*

80
docs/developer_portal/viz-plugins/creating-viz-plugin.md
View File

@@ -1,80 +0,0 @@
---
title: Creating a Visualization Plugin
sidebar_position: 2
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Creating a Visualization Plugin
🚧 **Coming Soon** 🚧
Step-by-step guide to building your first custom visualization plugin for Apache Superset.
## Topics to be covered:
- Setting up the plugin development environment
- Using the visualization plugin generator
- Understanding the plugin file structure
- Implementing the chart component
- Creating the control panel interface
- Adding data transformation logic
- Testing your visualization locally
- Debugging common issues
- Packaging for distribution
- Publishing to npm registry
## Development Steps
### 1. Project Setup
- Clone the superset-ui repository
- Install dependencies and development tools
- Create a new plugin directory
- Configure build and development scripts
### 2. Chart Implementation
- Define the main chart component
- Handle data props and rendering
- Implement responsive design
- Add interactive features
### 3. Configuration Interface
- Design the control panel layout
- Add form controls and validation
- Implement conditional controls
- Handle control state management
### 4. Testing and Validation
- Unit testing with Jest
- Integration testing with Storybook
- Visual regression testing
- Performance benchmarking
## Code Examples
Examples will include:
- Basic chart component structure
- Control panel configuration
- Data transformation functions
- Event handling patterns
---
*This documentation is under active development. Check back soon for updates!*

67
docs/developer_portal/viz-plugins/overview.md
View File

@@ -1,67 +0,0 @@
---
title: Visualization Plugins Overview
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Visualization Plugins Overview
🚧 **Coming Soon** 🚧
Learn how to create custom visualization plugins to extend Superset's charting capabilities with new chart types and data representations.
## Topics to be covered:
- Visualization plugin architecture
- Chart component development
- Data transformation and processing
- Control panel configuration
- Chart rendering lifecycle
- Interactive features and event handling
- Performance optimization for large datasets
- Chart theming and customization
- Export and sharing capabilities
- Plugin packaging and distribution
## Plugin Components
### Core Components
- **Chart Component** - Main visualization renderer
- **Control Panel** - Configuration interface
- **Transform Props** - Data processing logic
- **Metadata** - Plugin registration and configuration
### Optional Components
- **Thumbnail** - Chart preview image
- **Build Query** - Custom query generation
- **Control Panel Sections** - Advanced configuration grouping
## Supported Chart Libraries
- **D3.js** - Custom SVG-based visualizations
- **ECharts** - Rich interactive charts
- **Deck.gl** - Geospatial and 3D visualizations
- **React** - Custom React-based components
- **Canvas/WebGL** - High-performance rendering
---
*This documentation is under active development. Check back soon for updates!*

76
docs/developer_portal/viz-plugins/transforming-data.md
View File

@@ -1,76 +0,0 @@
---
title: Transforming Data
sidebar_position: 4
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Transforming Data
🚧 **Coming Soon** 🚧
Master data transformation techniques to prepare and optimize data for your visualization plugins.
## Topics to be covered:
- Data transformation pipeline architecture
- Understanding query results structure
- Implementing transform props functions
- Data aggregation and grouping
- Filtering and sorting operations
- Data type conversion and validation
- Handling missing and null values
- Performance optimization for large datasets
- Caching and memoization strategies
- Error handling in data transformations
## Transformation Patterns
### Data Preparation
- **Normalization** - Converting data to consistent formats
- **Aggregation** - Grouping and summarizing data
- **Pivoting** - Reshaping data for different chart types
- **Joining** - Combining multiple data sources
- **Filtering** - Removing irrelevant data points
### Chart-Specific Transformations
- **Time series** - Date parsing and time-based grouping
- **Geographic data** - Coordinate conversion and mapping
- **Hierarchical data** - Tree and nested structure handling
- **Network data** - Node and edge relationship processing
- **Statistical data** - Distribution and correlation analysis
### Performance Considerations
- Lazy evaluation and streaming
- Incremental data processing
- Client-side vs server-side transformations
- Memory management for large datasets
- Parallel processing techniques
## API Reference
- Transform props function signature
- Available utility functions
- Data structure interfaces
- Error handling patterns
---
*This documentation is under active development. Check back soon for updates!*

71
docs/sidebarTutorials.js
View File

@@ -30,47 +30,7 @@ const sidebars = {
},
{
type: 'category',
label: 'Extensions',
collapsed: true,
items: [
'extensions/overview',
'extensions/architectural-principles',
'extensions/high-level-architecture',
'extensions/extension-project-structure',
'extensions/extension-metadata',
'extensions/frontend-contribution-types',
'extensions/interacting-with-host',
'extensions/dynamic-module-loading',
'extensions/deploying-extension',
'extensions/lifecycle-management',
'extensions/development-mode',
'extensions/versioning',
'extensions/security-implications',
{
type: 'doc',
id: 'extensions/built-in-features',
customProps: {
disabled: true,
},
},
'extensions/proof-of-concept',
],
},
{
type: 'category',
label: 'Testing',
collapsed: true,
items: [
'testing/overview',
'testing/frontend-testing',
'testing/backend-testing',
'testing/e2e-testing',
'testing/ci-cd',
],
},
{
type: 'category',
label: 'Contributing to Superset',
label: 'Contributing',
collapsed: true,
items: [
'contributing/overview',
@@ -112,6 +72,35 @@ const sidebars = {
},
],
},
{
type: 'category',
label: 'Extensions',
collapsed: true,
items: [
'extensions/overview',
'extensions/quick-start',
'extensions/architecture',
'extensions/extension-project-structure',
'extensions/extension-metadata',
'extensions/frontend-contribution-types',
'extensions/interacting-with-host',
'extensions/deploying-extension',
'extensions/development-mode',
'extensions/security-implications',
],
},
{
type: 'category',
label: 'Testing',
collapsed: true,
items: [
'testing/overview',
'testing/frontend-testing',
'testing/backend-testing',
'testing/e2e-testing',
'testing/ci-cd',
],
},
],
};