Dashboard: Sections, groups with tabs, and panel organization #1929

Vision

Make HyperDX dashboards meet the organization and interaction standards users expect from enterprise observability platforms. Users should be able to structure complex dashboards with collapsible sections and groups (with optional tabs) — with intuitive controls for all operations.

Architecture

PR #1900 introduced core rendering mechanics. PR #1926 added authoring UX and the DashboardContainer abstraction. PR #1972 implements groups with smart tab support, container reordering, and panel organization polish.

DashboardContainer = {
  id: string;
  type: 'section' | 'group';
  title: string;
  collapsed: boolean;
  tabs?: { id: string; title: string }[];  // groups only, min 1
  activeTabId?: string;
}

Tiles reference containers via containerId and optionally tabId for tab assignment.

Sub-issues

Shipped

• Core mechanics — collapsible sections, multi-grid rendering, lazy loading (HDX-3687, merged as #1900)
• Authoring UX + DashboardContainer schema — create/rename/delete sections, move tiles, click-to-rename, hover controls (HDX-3688, PR #1926)
• Groups with optional tabs — bordered group containers that can dynamically become tabbed views. 1 tab = plain group header, 2+ tabs = tab bar. Add/rename/remove tabs. Group identity IS the first tab. (PR #1972)
• Container reordering — sortable container headers via drag handle using @dnd-kit
• Cross-container tile moves — "Move to Section" dropdown on tile hover toolbar. Shows sections, groups, and individual tabs as targets. Grouped tabs display with container label and indented tab items.
• Tile positioning — fill-right-then-wrap placement (like text in a book). Auto-positions on create and move.
• Delete confirmation — always confirms container deletion, shows tile count when tiles will be ungrouped
• Empty container placeholders — full-width [+ Add] button matching bottom Add style
• Select-and-group — Shift+click tiles to select, Cmd+G to group into new section
• Floating drag bar — hover-only drag indicator on tiles, no content shift
• Theme-aware borders — var(--mantine-color-default-border) for light/dark support

Industry-standard expectations