Move section collapse state to URL query params by alex-fedotyev · Pull Request #1958 · hyperdxio/hyperdx

alex-fedotyev · 2026-03-21T00:37:55Z

Summary

Section expand/collapse is now tracked in URL query params (collapsed/expanded) instead of persisting to the DB on every chevron click
The DB-stored collapsed field on DashboardContainer becomes the default fallback — what viewers see when opening a dashboard fresh (no URL state)
Chevron click updates URL state only (per-viewer, shareable via link)
"Collapse by Default" / "Expand by Default" menu action in the section header saves to the DB (via setDashboard), setting the default for all viewers
SectionHeader now accepts separate collapsed/defaultCollapsed props and onToggle/onToggleDefaultCollapsed handlers
Adds 7 unit tests for SectionHeader

Implements Drew's review feedback on PR #1926:

IMO, expanding/collapsing should not be persisted to the dashboard UNLESS this option is used. [...] I think it would be nice to persist normal expand collapse states in the URL, and then fallback to the default state (saved in the DB based on this option here) if there is no URL state.

Demo

Shows: expanded sections → chevron click collapses first section (URL updates to ?collapsed=...) → menu shows "Collapse by Default" (DB action, separate from view state)

Test plan

Open a dashboard with sections — collapse/expand via chevron click, verify URL updates (?collapsed=... / ?expanded=...) without saving to DB
Copy the URL with collapse state and open in a new tab — verify sections reflect the URL state
Open the section menu and click "Collapse by Default" — verify this saves to DB (persists after page refresh without URL params)
Verify "Expand by Default" / "Collapse by Default" label reflects the DB default, not current view state
Run yarn ci:unit --testPathPatterns='SectionHeader' — all 7 tests pass

🤖 Generated with Claude Code

Section expand/collapse state is now tracked in URL query params (collapsed/expanded) instead of persisting directly to the DB on every toggle. The DB-stored collapsed field on DashboardContainer becomes the default fallback for when someone opens a dashboard fresh (no URL state). - Chevron click updates URL state only (per-viewer, shareable) - "Collapse by Default" / "Expand by Default" menu action saves to DB - SectionHeader accepts separate collapsed/defaultCollapsed props and onToggle/onToggleDefaultCollapsed handlers - Add 7 unit tests for SectionHeader

changeset-bot · 2026-03-21T00:38:00Z

⚠️ No Changeset found

Latest commit: f3fe8d0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2026-03-21T00:38:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 24, 2026 1:57pm

github-actions · 2026-03-21T00:39:35Z

PR Review

⚠️ Stale URL state on section delete → handleDeleteSection doesn't remove the deleted section's ID from urlCollapsedIds/urlExpandedIds. IDs are random so collisions are near-impossible, but deleted section IDs accumulate as URL cruft. Add removeFromUrlSet(setUrlCollapsedIds, containerId) and removeFromUrlSet(setUrlExpandedIds, containerId) calls inside handleDeleteSection.
⚠️ isSectionCollapsed(section) called twice per section in render (lines 1827 and 1839) → Extract to a const isCollapsed = isSectionCollapsed(section) at the top of the sections.map callback to avoid double computation.
ℹ️ DBDashboardPage.tsx is 1921 lines, well over the 300-line guideline in AGENTS.md — pre-existing issue, but this PR adds ~60 more lines to it.

Otherwise the implementation is clean: URL state logic with nuqs is correct, the collapsed/expanded dual-set approach properly handles overrides in both directions, tests cover the key cases, and the separation of URL-state vs DB-default concerns is well-structured.

github-actions · 2026-03-21T00:45:29Z

E2E Test Results

✅ All tests passed • 92 passed • 3 skipped • 962s

Status	Count
✅ Passed	92
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

github-actions · 2026-03-23T15:03:56Z

Knip - Unused Code Analysis

⚪ 0 change in total issues (240 on main → 240 on PR)

Category	main	PR
Unused files	9	9
Unused dependencies	14	14
Unused devDependencies	20	20
Unlisted dependencies	14	14
Unresolved imports	2	2
Unlisted binaries	2	2
Unused exports	132	132
Unused exported types	41	41
Unused enum members	2	2
Duplicate exports	4	4

What is this?

Knip finds unused files, dependencies, and exports in your codebase.
This comment compares the PR branch against main to detect regressions.

Run yarn knip locally to see full details.

knudtty · 2026-03-23T15:33:05Z

@@ -1102,16 +1102,11 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
  const [editedTile, setEditedTile] = useState<undefined | Tile>();

  const onAddTile = (containerId?: string) => {


i think this whole hook should be moved below the isSectionCollapsed hook to avoid potential weird behavior due to hoisting

Done — moved onAddTile below isSectionCollapsed and handleToggleSection so it can reference both without hoisting concerns. See c72626e.

knudtty · 2026-03-23T15:40:34Z

+        setUrlExpandedIds(prev => {
+          const next = [...(prev ?? [])];
+          if (!next.includes(containerId)) next.push(containerId);
+          return next.length > 0 ? next : null;
+        });
+        setUrlCollapsedIds(prev => {
+          const next = (prev ?? []).filter(id => id !== containerId);
+          return next.length > 0 ? next : null;
+        });
+      } else {
+        // Collapsing: add to collapsed list, remove from expanded list
+        setUrlCollapsedIds(prev => {
+          const next = [...(prev ?? [])];
+          if (!next.includes(containerId)) next.push(containerId);
+          return next.length > 0 ? next : null;
+        });
+        setUrlExpandedIds(prev => {
+          const next = (prev ?? []).filter(id => id !== containerId);
+          return next.length > 0 ? next : null;
+        });


These functions are similar enough they should be abstracted.
1 function that pushes a new container id to the existing array
1 function that filters out the old containerId

Additionally, it would be worth using produce via immer as we do elsewhere in the app

Done — extracted addToUrlSet and removeFromUrlSet helpers using produce via immer. handleToggleSection now calls these instead of duplicating the add/filter logic, and uses isSectionCollapsed directly instead of re-implementing the lookup. See c72626e.

…with immer - Move onAddTile below isSectionCollapsed/handleToggleSection to avoid hoisting issues (knudtty review comment) - Extract addToUrlSet/removeFromUrlSet helpers using immer produce, eliminating duplicated add/filter logic in handleToggleSection - Use isSectionCollapsed directly instead of re-implementing the lookup

knudtty · 2026-03-24T13:54:27Z

I find it a bit counterintuitive how different the 2 ways of adding a tile are (small icon to add to a panel, huge button to add a tile) but we can loop in design and address in a follow up! Nice work

## Summary - Section expand/collapse is now tracked in URL query params (`collapsed`/`expanded`) instead of persisting to the DB on every chevron click - The DB-stored `collapsed` field on `DashboardContainer` becomes the default fallback — what viewers see when opening a dashboard fresh (no URL state) - Chevron click updates URL state only (per-viewer, shareable via link) - "Collapse by Default" / "Expand by Default" menu action in the section header saves to the DB (via `setDashboard`), setting the default for all viewers - `SectionHeader` now accepts separate `collapsed`/`defaultCollapsed` props and `onToggle`/`onToggleDefaultCollapsed` handlers - Adds 7 unit tests for `SectionHeader` Implements Drew's [review feedback on PR #1926](#1926 (comment)): > IMO, expanding/collapsing should not be persisted to the dashboard UNLESS this option is used. [...] I think it would be nice to persist normal expand collapse states in the URL, and then fallback to the default state (saved in the DB based on this option here) if there is no URL state. ## Demo ![Section collapse via URL params demo](https://github.com/hyperdxio/hyperdx/feat/url-based-collapse-state/docs/assets/collapse-url-state-demo.gif) Shows: expanded sections → chevron click collapses first section (URL updates to `?collapsed=...`) → menu shows "Collapse by Default" (DB action, separate from view state) ## Test plan - [x] Open a dashboard with sections — collapse/expand via chevron click, verify URL updates (`?collapsed=...` / `?expanded=...`) without saving to DB - [x] Copy the URL with collapse state and open in a new tab — verify sections reflect the URL state - [x] Open the section menu and click "Collapse by Default" — verify this saves to DB (persists after page refresh without URL params) - [x] Verify "Expand by Default" / "Collapse by Default" label reflects the DB default, not current view state - [x] Run `yarn ci:unit --testPathPatterns='SectionHeader'` — all 7 tests pass 🤖 Generated with [Claude Code](https://claude.com/claude-code)

## Summary - Section expand/collapse is now tracked in URL query params (`collapsed`/`expanded`) instead of persisting to the DB on every chevron click - The DB-stored `collapsed` field on `DashboardContainer` becomes the default fallback — what viewers see when opening a dashboard fresh (no URL state) - Chevron click updates URL state only (per-viewer, shareable via link) - "Collapse by Default" / "Expand by Default" menu action in the section header saves to the DB (via `setDashboard`), setting the default for all viewers - `SectionHeader` now accepts separate `collapsed`/`defaultCollapsed` props and `onToggle`/`onToggleDefaultCollapsed` handlers - Adds 7 unit tests for `SectionHeader` Implements Drew's [review feedback on PR #1926](#1926 (comment)): > IMO, expanding/collapsing should not be persisted to the dashboard UNLESS this option is used. [...] I think it would be nice to persist normal expand collapse states in the URL, and then fallback to the default state (saved in the DB based on this option here) if there is no URL state. ## Demo ![Section collapse via URL params demo](https://github.com/hyperdxio/hyperdx/feat/url-based-collapse-state/docs/assets/collapse-url-state-demo.gif) Shows: expanded sections → chevron click collapses first section (URL updates to `?collapsed=...`) → menu shows "Collapse by Default" (DB action, separate from view state) ## Test plan - [x] Open a dashboard with sections — collapse/expand via chevron click, verify URL updates (`?collapsed=...` / `?expanded=...`) without saving to DB - [x] Copy the URL with collapse state and open in a new tab — verify sections reflect the URL state - [x] Open the section menu and click "Collapse by Default" — verify this saves to DB (persists after page refresh without URL params) - [x] Verify "Expand by Default" / "Collapse by Default" label reflects the DB default, not current view state - [x] Run `yarn ci:unit --testPathPatterns='SectionHeader'` — all 7 tests pass 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: peter-leonov-ch <209667683+peter-leonov-ch@users.noreply.github.com>

alex-fedotyev marked this pull request as draft March 21, 2026 00:38

vercel Bot deployed to Preview March 21, 2026 00:40 View deployment

alex-fedotyev marked this pull request as ready for review March 21, 2026 00:45

alex-fedotyev requested review from a team and knudtty and removed request for a team March 21, 2026 00:55

alex-fedotyev self-assigned this Mar 21, 2026

alex-fedotyev added the automerge label Mar 21, 2026

Merge branch 'main' into feat/url-based-collapse-state

a9dbc5e

vercel Bot deployed to Preview March 23, 2026 15:05 View deployment

knudtty requested changes Mar 23, 2026

View reviewed changes

vercel Bot deployed to Preview March 23, 2026 19:01 View deployment

Add demo gif for PR #1958

f092446

vercel Bot deployed to Preview March 23, 2026 19:09 View deployment

alex-fedotyev requested a review from knudtty March 23, 2026 19:14

knudtty approved these changes Mar 24, 2026

View reviewed changes

Merge branch 'main' into feat/url-based-collapse-state

f3fe8d0

vercel Bot deployed to Preview March 24, 2026 13:57 View deployment

kodiakhq Bot merged commit 105a2f8 into main Mar 24, 2026
14 of 15 checks passed

kodiakhq Bot deleted the feat/url-based-collapse-state branch March 24, 2026 13:58

alex-fedotyev mentioned this pull request Mar 24, 2026

feat: Dashboard groups with tabs, collapsible/bordered options, and panel organization #1972

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move section collapse state to URL query params#1958

Move section collapse state to URL query params#1958
kodiakhq[bot] merged 5 commits into
mainfrom
feat/url-based-collapse-state

alex-fedotyev commented Mar 21, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

knudtty Mar 23, 2026

Uh oh!

alex-fedotyev Mar 23, 2026

Uh oh!

knudtty Mar 23, 2026

Uh oh!

alex-fedotyev Mar 23, 2026

Uh oh!

knudtty commented Mar 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1102,16 +1102,11 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
		const [editedTile, setEditedTile] = useState<undefined \| Tile>();

		const onAddTile = (containerId?: string) => {

Conversation

alex-fedotyev commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Demo

Test plan

Uh oh!

changeset-bot Bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions Bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Test Results

Uh oh!

github-actions Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Knip - Unused Code Analysis

Uh oh!

knudtty Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

alex-fedotyev Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

knudtty Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

alex-fedotyev Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

knudtty commented Mar 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alex-fedotyev commented Mar 21, 2026 •

edited

Loading

changeset-bot Bot commented Mar 21, 2026 •

edited

Loading

vercel Bot commented Mar 21, 2026 •

edited

Loading

github-actions Bot commented Mar 21, 2026 •

edited

Loading

github-actions Bot commented Mar 21, 2026 •

edited

Loading

github-actions Bot commented Mar 23, 2026 •

edited

Loading