EnxDev opened a new issue, #37613: URL: https://github.com/apache/superset/issues/37613
## Motivation Apache Superset provides powerful data visualization capabilities, but currently lacks a unified system for building custom page layouts. Users who want to create tailored experiences; whether for dashboards, landing pages, or specialized views; are limited by the existing fixed structures. ### The Opportunity A **Generic Page Builder** would bring modularity to Superset's page creation: - **Custom Pages**: Users can create pages tailored to specific use cases (executive summaries, operational dashboards, data portals, etc.) - **Flexible Layouts**: Support for different layout modes (grid, free positioning, rows) to accommodate various design needs - **Reusable Infrastructure**: The same drag-and-drop system can power multiple features across Superset - **Extensibility**: Third-party components can be integrated through the Extensions SDK ### Related Work The concept of customizable pages in Superset has been explored in the context of Homepage customization: - **[SIP-198: Homepage Layout Extensions](https://github.com/apache/superset/issues/37016)** - Proposes allowing users to customize their homepage - **[Demo Implementation](https://github.com/EnxDev/superset-homepage-builder-demo)** - Proof of concept for homepage customization This SIP focuses on the **underlying Page Builder infrastructure** that could power such features. The Homepage customization use case is addressed separately in SIP-198. ### Community Demand Customizable pages are a frequently requested feature: - [Discussion #18571](https://github.com/apache/superset/discussions/18571) - Customize Home Page option - [Discussion #33761](https://github.com/apache/superset/discussions/33761) - Customizing the Welcome Page --- ## Proposed Change This SIP proposes a **Generic Page Builder** - a unified system for creating and editing page layouts in Superset through an intuitive drag-and-drop interface. ### Core Architecture ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ PAGE BUILDER INTERFACE │ ├─────────────────┬───────────────────────────────────────────────────────────┤ │ │ │ │ TOOLS SIDEBAR │ CANVAS │ │ │ │ │ ┌───────────┐ │ Layout: [Grid ▼] [Columns: 12 ▼] │ │ │ 📊 Chart │ │ │ │ ├───────────┤ │ ┌─────────────────────────────────────────────────┐ │ │ │ 🔍 Filter │ │ │ │ │ │ ├───────────┤ │ │ USER-CREATED LAYOUT │ │ │ │ 📐 Row │ │ │ │ │ │ ├───────────┤ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ 📑 Tabs │ │ │ │ Chart │ │ Chart │ │ Filter │ │ │ │ ├───────────┤ │ │ │ │ │ │ │ Sidebar │ │ │ │ │ ▤ Sidebar │ │ │ └──────────┘ └──────────┘ │ (toggle) │ │ │ │ ├───────────┤ │ │ └──────────┘ │ │ │ │ 📝 Header │ │ │ ┌────────────────────────────────────────┐ │ │ │ ├───────────┤ │ │ │ Data Table │ │ │ │ │ 📄 Text │ │ │ └────────────────────────────────────────┘ │ │ │ ├───────────┤ │ │ │ │ │ │ ➖ Divider│ │ └─────────────────────────────────────────────────┘ │ │ ├───────────┤ │ │ │ │ ⬜ Spacer │ │ │ │ └───────────┘ │ │ │ │ │ └─────────────────┴───────────────────────────────────────────────────────────┘ ``` ### Page Builder in view mode <img width="804" height="587" alt="Image" src="https://github.com/user-attachments/assets/6498f2be-b6fa-4710-bb4c-e72cd29f94a2"; /> ### Page Builder in edit mode <img width="872" height="567" alt="Image" src="https://github.com/user-attachments/assets/20c5ec13-8f13-48c5-8fa5-323a4501707a"; /> ### Key Design Principles #### 1. Configurable Layout System The Page Builder supports multiple layout modes: | Layout Mode | Description | Use Case | |-------------|-------------|----------| | **Grid** | N-column responsive grid (configurable columns) | Traditional dashboards | | **X-Y** | Free positioning anywhere on canvas | Precise custom layouts | | **Rows** | Multiple horizontal rows | Simple stacked layouts | ``` LAYOUT SELECTOR ┌────────────────────────────────────────────────────────────────┐ │ Layout Mode: [Grid ▼] │ │ │ │ Grid Options (when Grid selected): │ │ ┌──────────────┐ ┌──────────────┐ │ │ │ Columns: 12 │ │ Gutter: 16px │ │ │ └──────────────┘ └──────────────┘ │ │ Components snap to columns automatically │ │ │ │ X-Y Options (when X-Y selected): │ │ ┌──────────────┐ ┌──────────────┐ │ │ │ Snap: ON/OFF │ │ Snap size:20 │ │ │ └──────────────┘ └──────────────┘ │ │ Snap size = invisible grid spacing (10px, 20px, 40px...) │ │ When ON, components align to nearest grid intersection │ └────────────────────────────────────────────────────────────────┘ ``` #### 2. Inline Editing Pattern Instead of pre-configured chart types in the toolbar, the Page Builder uses **generic tools with inline configuration**: ``` WORKFLOW: Adding a Chart 1. TOOLBAR 2. DROP 3. CONFIGURE ┌───────────┐ ┌──────────────┐ ┌─────────────────┐ │ 📊 Chart │ ─── drag ───► │ 📊 │ ─ opens ─► │ Select Chart │ │ (generic) │ │ [Placeholder]│ │ │ └───────────┘ └──────────────┘ │ ○ Revenue Trend │ │ ○ Sales by... │ │ ○ Market Share │ │ [Select] │ └─────────────────┘ ``` ``` WORKFLOW: Adding a Filter 1. TOOLBAR 2. DROP 3. CONFIGURE ┌───────────┐ ┌──────────────┐ ┌─────────────────┐ │ 🔍 Filter │ ─── drag ───► │ 🔍 │ ─ opens ─► │ Filter Config │ │ (generic) │ │ [Placeholder]│ │ │ └───────────┘ └──────────────┘ │ Type: [Select▼] │ │ Column: [ ▼] │ │ Dataset:[ ▼] │ │ [Create] │ └─────────────────┘ ``` **Key behaviors:** - Tools show **generic placeholders** until configured (similar to empty chart state) - Dropping a tool **automatically opens** its configuration modal - Clicking **"Edit"** on any placed component opens the **same modal** - This provides a consistent, streamlined editing experience **Benefits of Inline Editing:** - Cleaner, simpler toolbar (no need for "Existing Chart", "New Chart", "Big Number", etc.) - Contextual configuration at the right moment - Same pattern for new components and editing existing ones #### 3. Component Nesting All layout components support nesting, enabling complex layouts: ``` ┌─ Tabs ──────────────────────────────────────────────────────────┐ │ [Overview] [Details] [Analytics] │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ ┌─ Row ───────────────────────────────────────────────────┐ │ │ │ │ │ ┌─ Column ──────┐ ┌─ Column ──────┐ ┌─ Sidebar ────┐ │ │ │ │ │ │ │ │ │ │ │ (toggle) │ │ │ │ │ │ │ │ Chart │ │ Chart │ │ Filters │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └───────────────┘ └───────────────┘ └──────────────┘ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` **Nesting hierarchy example:** ``` 📑 Tabs └─ 📐 Row ├─ 📐 Column │ └─ 📊 Chart A ├─ 📐 Column │ └─ 📊 Chart B └─ ▤ Sidebar (toggleable) ├─ 🔍 Filter 1 ├─ 🔍 Filter 2 └─ 🔍 Filter 3 ``` #### 4. Internal Sidebar Component Users can create a **toggleable sidebar within their layout** (separate from the Tools Sidebar): ``` PAGE WITH INTERNAL SIDEBAR ┌─────────────────────────────────────────────────────────────────┐ │ [≡ Toggle Sidebar] [Edit] │ ├─────────────┬───────────────────────────────────────────────────┤ │ │ │ │ INTERNAL │ MAIN CONTENT │ │ SIDEBAR │ │ │ (toggle) │ ┌─────────────────────────────────────────┐ │ │ │ │ │ │ │ ┌────────┐ │ │ Chart │ │ │ │Region ▼│ │ │ │ │ │ ├────────┤ │ └─────────────────────────────────────────┘ │ │ │Date │ │ │ │ │[=====] │ │ ┌─────────────────────────────────────────┐ │ │ ├────────┤ │ │ │ │ │ │Category│ │ │ Table │ │ │ │☑ A ☑ B │ │ │ │ │ │ └────────┘ │ └─────────────────────────────────────────┘ │ │ │ │ │ [Hide ◄] │ │ └─────────────┴───────────────────────────────────────────────────┘ SIDEBAR HIDDEN (after toggle) ┌─────────────────────────────────────────────────────────────────┐ │ [► Show Sidebar] [Edit] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ MAIN CONTENT (expanded) │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Chart │ │ │ └─────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Table │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` **Features:** - Toggle button to show/hide - Can contain any components (filters, widgets, etc.) - Main content area expands when sidebar is hidden - State persistence (remembers show/hide state) --- ### Tools Sidebar Components The Tools Sidebar contains draggable components: #### Layout Components | Component | Description | Supports Nesting | |-----------|-------------|------------------| | **Row** | Horizontal container | ✓ | | **Column** | Vertical container | ✓ | | **Tabs** | Tabbed container with multiple panels | ✓ | | **Sidebar** | Toggleable side panel within the page | ✓ | | **Header** | Title text (H1, H2, H3 sizes) | ✗ | | **Markdown** | Rich text content | ✗ | | **Divider** | Horizontal separator line | ✗ | | **Spacer** | Empty space for layout purposes | ✗ | #### Content Components | Component | Inline Configuration | |-----------|---------------------| | **Chart** | Opens chart selector modal on drop | | **Filter** | Opens filter configuration modal on drop | > **Note**: Additional content components can be added via the Extensions SDK pattern. --- ### Drag & Drop Behavior #### Drop Zones Components can be dropped in three locations: | Drop Location | Behavior | |---------------|----------| | **Empty area** | Component is added to the empty space | | **Between components** | Component is inserted between existing components | | **Inside container** | Component is added as child of the container (Tabs, Row, etc.) | ``` DROP ZONE TYPES 1. EMPTY AREA 2. BETWEEN COMPONENTS 3. INSIDE CONTAINER ┌─────────────────┐ ┌─────────────────┐ ┌─ Tabs ──────────┐ │ │ │ Chart A │ │ [Tab 1] [Tab 2] │ │ [Drop Here] │ ├─────────────────┤ │ ┌─────────────┐ │ │ │ │ ► [Drop Here] ◄ │◄── insert │ │ │ │ │ │ ├─────────────────┤ between │ │ [Drop Here] │ │ └─────────────────┘ │ Chart B │ │ │ │ │ └─────────────────┘ │ └─────────────┘ │ └─────────────────┘ ``` #### Component Resizing Components are **resized by dragging their edges**: ``` ┌──────────────────────────────────┐ │ │ │ Chart │ │ │ │ ├─── drag to resize width │ │ └──────────────────────────────────┘ │ └─── drag to resize height ``` #### Reordering Existing components can be **reordered by dragging** to a new position. --- ### Edit Mode vs View Mode | Aspect | Edit Mode | View Mode | |--------|-----------|-----------| | Tools Sidebar | Visible | Hidden | | Component borders | Visible (dashed) | Hidden | | Drag & drop | Enabled | Disabled | | Resize handles | Visible | Hidden | | Click behavior | Select component | Interact with component | | "Edit" button | Visible on hover | Hidden | | Internal sidebar | Always visible | Toggleable | --- ### Undo/Redo - **50 levels** of undo/redo history - Keyboard shortcuts: `Ctrl+Z` (undo), `Ctrl+Shift+Z` or `Ctrl+Y` (redo) - Actions tracked: add, remove, move, resize, configure components --- ### Unsaved Changes Warning When leaving with unsaved changes: ``` ┌─────────────────────────────────────────────────────┐ │ ⚠️ Unsaved Changes │ │ │ │ You have unsaved changes. Do you want to save │ │ before leaving? │ │ │ │ [Don't Save] [Cancel] [Save] │ └─────────────────────────────────────────────────────┘ ``` --- ## Scope ### This SIP Covers (Page Builder Infrastructure) - ✓ Page Builder interface (Tools Sidebar + Canvas) - ✓ Layout system (Grid, X-Y, Rows) - ✓ Drag & drop functionality - ✓ Inline editing pattern - ✓ Component nesting - ✓ Edit mode / View mode - ✓ Undo/Redo - ✓ Extensions SDK integration ### Out of Scope (Future SIPs) - ✗ Homepage customization (addressed in [SIP-198](https://github.com/apache/superset/issues/37016)) - ✗ Data model and storage (layout JSON format, database tables) - ✗ REST API endpoints - ✗ Event system / pub-sub - ✗ Migration of existing dashboards - ✗ Mobile/responsive behavior - ✗ Permissions and access control --- ## References - [SIP-151: Vision for new Superset Plugins Architecture](https://github.com/apache/superset/issues/...) - [SIP-177: SQL Lab Extensions](https://github.com/apache/superset/issues/...) - [SIP-198: Homepage Layout Extensions](https://github.com/apache/superset/issues/37016) - [Homepage Builder Demo](https://github.com/EnxDev/superset-homepage-builder-demo) - [Discussion #18571: Customize Home Page option](https://github.com/apache/superset/discussions/18571) - [Discussion #33761: Customizing the Welcome Page](https://github.com/apache/superset/discussions/33761) --- *This SIP establishes the foundation for a unified page building experience in Apache Superset.* -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
