Skip to content

feat: render active filters as inline chips in search where input #2388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MikeShi42 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: render active filters as inline chips in search where input #2388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
795a54d
feat: render active filters as inline chips in search where input
MikeShi42 May 30, 2026
42ca493
fix: address lint, unit, and e2e CI failures
MikeShi42 May 30, 2026
f9d6e54
chore: add changeset for filter chips feature
MikeShi42 May 31, 2026
d7ada9c
fix: address deep-review feedback on filter chips
MikeShi42 Jun 1, 2026
1dbfe55
fix: address Aaron's review feedback on filter chips
MikeShi42 Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/filter-chips-in-where-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
'@hyperdx/app': minor
---

feat: render active filters as inline chips in search where input

Active sidebar filters now appear as chips rendered inline inside the
search WHERE input itself, replacing the separate row of pills that
previously sat below the input. Chips render in both SQL and Lucene
modes, can be removed with the chip's × button, and Backspace at the
start of an empty input removes the last chip.
3 changes: 1 addition & 2 deletions packages/app/src/DBSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@ import { useIsFetching } from '@tanstack/react-query';
import { SortingState } from '@tanstack/react-table';
import CodeMirror from '@uiw/react-codemirror';

import { ActiveFilterPills } from '@/components/ActiveFilterPills';
import { AlertStatusIcon } from '@/components/AlertStatusIcon';
import { ContactSupportText } from '@/components/ContactSupportText';
import { DBSearchPageFilters } from '@/components/DBSearchPageFilters';
Expand Down Expand Up @@ -2019,6 +2018,7 @@ export function DBSearchPage() {
dateRange={searchedTimeRange}
sourceId={inputSource}
size="xs"
searchFilters={searchFilters}
Copy link
Copy Markdown
Contributor

@knudtty knudtty Jun 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suuuuper cool that this is the only diff required on this component

/>
<Flex
gap="sm"
Expand Down Expand Up @@ -2063,7 +2063,6 @@ export function DBSearchPage() {
<SearchSubmitButton isFormStateDirty={formState.isDirty} />
</Flex>
</Flex>
<ActiveFilterPills searchFilters={searchFilters} mt={6} />
</form>
{searchedConfig != null && searchedSource != null && (
<SaveSearchModal
Expand Down
3 changes: 0 additions & 3 deletions packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,9 +165,6 @@ jest.mock('@/components/DBTimeChart', () => ({
DBTimeChart: () => <div />,
}));

jest.mock('@/components/ActiveFilterPills', () => ({
ActiveFilterPills: () => <div />,
}));
jest.mock('@/components/ContactSupportText', () => ({
ContactSupportText: () => <div />,
}));
Expand Down
270 changes: 0 additions & 270 deletions packages/app/src/components/ActiveFilterPills.tsx
View file
Open in desktop

This file was deleted.

32 changes: 18 additions & 14 deletions packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@
background-color: var(--color-bg-field);
border: 1px solid var(--color-border);
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-items: center;
min-height: var(--editor-base-height, 36px);
box-shadow: none;
gap: 2px;
padding-top: 2px;
padding-bottom: 2px;

&.error {
border-color: var(--color-bg-danger);
Expand All @@ -34,31 +38,31 @@

&:not(.expanded) {
position: relative;
max-height: var(--editor-base-height, 36px);
overflow: hidden;
}

/* When no chips, keep original single-line height cap */
&:not(.expanded, [data-has-chips]) {
max-height: var(--editor-base-height, 36px);
}
}

.label {
white-space: nowrap;

&.sizeXs {
padding-top: 6px;
}

&:not(.sizeXs) {
padding-top: 8px;
}
flex-shrink: 0;
}

.cmWrapper {
min-width: 10px;
width: 100%;
padding-top: 3.4px;
min-width: 100px;
flex: 1 1 auto;
font-size: var(--mantine-font-size-sm);

/* When expanded with chips, require enough space or wrap to next line */
.expanded[data-has-chips] > & {
min-width: min(100%, 300px);
}

&.sizeXs {
padding-top: 2.4px;
font-size: var(--mantine-font-size-xs);
}

Expand Down
Loading
Loading