Dashboard: Sections, groups with tabs, and panel organization

[alex-fedotyev]

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

Capability	Expected UX	HyperDX status
Collapsible sections	Full-width divider bars, click to collapse/expand, lazy loading	Shipped
Groups	Bordered container with header, always visible	Shipped
Tabs (within groups)	Group becomes tabbed when adding tabs, reverts when removing	Shipped
Move tiles between containers	Dropdown-based move (Kibana/Datadog pattern)	Shipped
Reorder containers	Drag handle on headers to reorder	Shipped
Select + group	Multi-select tiles → group into section	Shipped
Inline rename	Click title text to edit directly	Shipped
Hover-only controls	Edit affordances hidden in view mode, visible on hover	Shipped