feat: Add Column toggle button to filter panel in DBSearchPage

[MikeShi42]

Summary

Adds a column toggle button (+ / - icon) next to the "Show Distribution" button in each filter group header on the search page. Clicking the button adds or removes the filter's field from the SELECT statement, and the table reflects the change immediately.

Changes

• FilterGroup (DBSearchPageFilters.tsx): Added onColumnToggle and isColumnDisplayed props. Renders an ActionIcon with IconPlus (add) or IconMinus (remove) between the distribution toggle and the pin field button.
• NestedFilterGroup: Passes the new column toggle props through to child FilterGroup components.
• DBSearchPage.tsx: Passes toggleColumn and displayedColumns to DBSearchPageFilters, reusing the existing toggleColumn callback that manages the SELECT form field.

Screenshots or video

Before	After
Only distribution and pin buttons in filter header	New +/- column button appears between distribution and pin buttons

How to test locally or on Vercel

1. Navigate to the Search page
2. Open the filter panel on the left side
3. Find any filter group and hover over the header area — a + icon should appear next to the distribution chart icon
4. Click the + icon — the field should be added to the SELECT input and appear as a column in the results table
5. Click the - icon (now shown since the column is displayed) — the field should be removed from SELECT and the column disappears

References

• Linear Issue: HDX-3770

Linear Issue: HDX-3770

  

[changeset-bot]

🦋 Changeset detected

Latest commit: b1ae829

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 23, 2026 3:21pm

[github-actions]

E2E Test Results

✅ All tests passed • 91 passed • 3 skipped • 967s

Status	Count
✅ Passed	91
❌ Failed	0
⚠️ Flaky	2
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

PR Review

✅ No critical issues found.

The implementation is clean and consistent with existing patterns:

• ActionIcon styling (size="xs", variant="subtle", color="gray") matches the adjacent distribution and pin buttons exactly
• Prop threading through NestedFilterGroup → FilterGroup correctly wraps (column: string) => void into VoidFunction at the leaf level
• isColumnDisplayed correctly defaults to falsy (shows +) when displayedColumns is undefined

One minor observation: the distributionKey JSDoc comment was silently dropped (// Optional key to use for distribution queries, defaults to name). Not blocking, but worth noting if it carried useful context for contributors.

[dhable]

@claude add a changeset

[github-actions]

Claude finished @dhable's task in 37s —— View job

---

Changeset added

• Gather context
• Create changeset file (.changeset/hdx-3770-column-from-filter-panel.md)
• Commit and push

Added a patch changeset for @hyperdx/app describing the column toggle button feature.

[github-actions]

Knip - Unused Code Analysis

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

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

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.