Dashboard Layout and Components#

Superset's dashboard edit mode is built on a React-based grid system using react-dnd for drag-and-drop and re-resizable for resizing. All layout state lives in Redux and is serialized as a flat map of component nodes (the "layout tree").

Grid Constants#

All sizing is derived from two base values defined in constants.ts:

Pixel width of a resizable item is computed as (widthStep + gutterWidth) × widthMultiple − gutterWidth, where widthStep = columnWidth and gutterWidth = GRID_GUTTER_SIZE 1. Height is heightStep × heightMultiple where heightStep = GRID_BASE_UNIT 2.

Component Type Registry#

Every layout node has a type string drawn from componentTypes.ts:

• Containers: GRID, ROOT, ROW, COLUMN, TABS, TAB
• Content: CHART, MARKDOWN, HEADER, DIVIDER
• Special: NEW_COMPONENT_SOURCE (palette drag source), DYNAMIC (lazy-loaded custom components)

The runtime component lookup (gridComponents/index.js) maps each type constant to its React component for dynamic rendering.

Component Nesting Rules#

isValidChild.ts enforces the nesting hierarchy using a parentMaxDepthLookup table. Key rules:

• GRID accepts: CHART, ROW, COLUMN, TABS, MARKDOWN, HEADER, DIVIDER, DYNAMIC 3
• ROW accepts: CHART, COLUMN, MARKDOWN, DYNAMIC — not DIVIDER or HEADER 4
• COLUMN accepts: CHART, HEADER, MARKDOWN, ROW, DIVIDER, TABS 5
• CHART, DIVIDER, HEADER, MARKDOWN have no valid children 6
• TABS/TAB do not increment nesting depth, allowing valid paths like ROOT > GRID > TABS > TAB > ROW > COLUMN > CHART 7

Builder Component Pane (Layout Palette)#

BuilderComponentPane/index.tsx renders a 374 px sticky side panel with two tabs:

• Charts — a SliceAdder search list of saved charts 8
• Layout elements — draggable palette items: NewTabs, NewRow, NewColumn, NewHeader, NewMarkdown, NewDivider, plus any registered dynamic components 9

Each New* item wraps DraggableNewComponent 10 — a thin layer that configures DragDroppable with the component's type, a NEW_*_ID constant for its source identity, and an Ant Design icon + label for the palette UI. The parent is set to NEW_COMPONENTS_SOURCE_ID so drop handlers can distinguish palette drops from existing-component moves.

ResizableContainer#

ResizableContainer.tsx wraps re-resizable and provides the snap-to-grid behavior. Resize handles appear on hover (right, bottom, bottom-right) and are only enabled in editMode 11. On onResizeStop, the delta is converted back to grid multiples: nextWidthMultiple = widthMultiple + round(delta.width / (widthStep + gutterWidth)) 12.

ChartHolder#

ChartHolder.tsx is the layout wrapper for every chart on the canvas. It:

• Resolves widthMultiple from the component's meta.width, clamping it to the parent column's width if nested inside a COLUMN 13
• Computes chartWidth = widthMultiple × columnWidth + (widthMultiple − 1) × GRID_GUTTER_SIZE − CHART_MARGIN 14 and chartHeight = meta.height × GRID_BASE_UNIT − CHART_MARGIN 15, where CHART_MARGIN = 32 px 16
• Width is only adjustable when the parent is ROW_TYPE; height is always adjustable 17
• Wraps the chart in a Draggable (drag source only) with orientation based on parent type 18

Divider Component#

The DIVIDER is a non-container leaf component used as a visual separator. It consists of two files:

• NewDivider.jsx — the palette entry; uses NEW_DIVIDER_ID and DIVIDER_TYPE, renders with Icons.LineOutlined 19
• Divider.jsx — the canvas component; renders a DividerLine styled div: 1 px grayscale.light2 ::after pseudo-element with sizeUnit × 2 vertical padding for a larger mouse target 20. In edit mode shows a HoverMenu with a delete button 21. Orientation is always "row" since it can be placed inside GRID or COLUMN but not ROW 22.

Key Source Locations#