Dashboard: Sections, groups with tabs, and panel organization

Open
#1,929 0 comments 0 reactions 1 assignee View on GitHub

@alex-fedotyev is already working on this.

Since Mar 17, 2026.

Assessment

This issue has not been assessed yet.

Description

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
Dominant language
TypeScript
Stars
9.9k
Forks
471
Avg merge
2d 4h
Merged PRs (30d)
117

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from hyperdxio/hyperdx

All issues in hyperdxio/hyperdx

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.