Skip to content

feat: Add Column toggle button to filter panel in DBSearchPage#1947

Draft
MikeShi42 wants to merge 1 commit intomainfrom
cursor/HDX-3770-column-from-filter-panel-fdf0
Draft

feat: Add Column toggle button to filter panel in DBSearchPage#1947
MikeShi42 wants to merge 1 commit intomainfrom
cursor/HDX-3770-column-from-filter-panel-fdf0

Conversation

@MikeShi42
Copy link
Contributor

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

Open in Web Open in Cursor 

Add a +/- icon button next to the show distribution button in each
FilterGroup header. Clicking the button adds or removes the filter's
field from the SELECT statement, reflecting immediately in the table.

- Add onColumnToggle and isColumnDisplayed props to FilterGroup
- Pass toggleColumn and displayedColumns from DBSearchPage through
  DBSearchPageFilters and NestedFilterGroup to each FilterGroup
- Show IconPlus when column is not displayed, IconMinus when it is
- Include tooltip (Add Column / Remove Column) for discoverability

Co-authored-by: Mike Shi <mike@hyperdx.io>
@changeset-bot
Copy link

changeset-bot bot commented Mar 19, 2026

⚠️ No Changeset found

Latest commit: 1691424

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
Copy link

vercel bot commented Mar 19, 2026

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

Project Deployment Actions Updated (UTC)
hyperdx-oss Ready Ready Preview, Comment Mar 19, 2026 11:14pm

Request Review

@github-actions
Copy link
Contributor

E2E Test Results

All tests passed • 92 passed • 3 skipped • 948s

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

Tests ran across 4 shards in parallel.

View full report →

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants