From 90b48e71634ade5fbfe17d64bfd7e61d3cb05431 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Mon, 21 Sep 2026 00:22:19 -0700
Subject: [PATCH 1/8] feat: search filters by name in the search page sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sidebar's filter list only requests low-cardinality columns and map
sub-fields, so a team with a wide schema had no way to reach a filter that
wasn't already on screen: the list is long, alphabetical, and truncated,
with no way to jump to a column you know exists.

Typing in the new search box filters what is already rendered instantly, and
a second, debounced query fetches values for matching fields the browse list
never asked for — so a high-cardinality column is reachable by name.

The search runs as a separate query rather than widening the existing one.
That keeps the browse list untouched while typing, makes clearing the search
free, caches each term on its own, and gives search its own key budget
instead of competing with browse for the 100-key cap.

Also here, both needed to make the above usable:

- NestedFilterGroup gains a transient `isForceExpanded` so a match inside a
  collapsed group is visible, and the group returns to the user's own state
  when the search is cleared.
- Its virtualizer no longer caches a row height of 0 measured while the
  Filters section is collapsed, which previously left the group reopening
  empty.

HDX-3495
---
 .changeset/search-filters-by-name.md          |   7 +
 .../src/components/DBSearchPageFilters.tsx    |  95 +++++++++--
 .../DBSearchPageFilters/FilterKeySearch.tsx   |  49 ++++++
 .../DBSearchPageFilters/NestedFilterGroup.tsx |  17 +-
 .../DBSearchPageFilters/hooks.test.tsx        | 161 +++++++++++++++++-
 .../components/DBSearchPageFilters/hooks.ts   | 148 +++++++++++++---
 6 files changed, 434 insertions(+), 43 deletions(-)
 create mode 100644 .changeset/search-filters-by-name.md
 create mode 100644 packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx

diff --git a/.changeset/search-filters-by-name.md b/.changeset/search-filters-by-name.md
new file mode 100644
index 0000000000..751380076e
--- /dev/null
+++ b/.changeset/search-filters-by-name.md
@@ -0,0 +1,7 @@
+---
+'@hyperdx/app': patch
+---
+
+feat: search filters by name in the search page sidebar
+
+Teams with a wide schema had no way to reach a filter that wasn't in the sidebar's default list, which shows low-cardinality columns and map sub-fields only. The new search box filters what is already rendered as you type, and runs a second query for matching fields the browse list never loaded, so a high-cardinality column is reachable by name.
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 67a154aae7..121640768c 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -31,6 +31,7 @@ import {
   Tooltip,
   UnstyledButton,
 } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import {
   IconArrowBarToLeft,
@@ -65,6 +66,7 @@ import {
 import { useSource } from '@/source';
 import { useLocalStorage } from '@/utils';
 
+import { FilterKeySearch } from './DBSearchPageFilters/FilterKeySearch';
 import { FilterSettingsPanel } from './DBSearchPageFilters/FilterSettingsPopover';
 import { useFetchFacets } from './DBSearchPageFilters/hooks';
 import { NestedFilterGroup } from './DBSearchPageFilters/NestedFilterGroup';
@@ -88,6 +90,9 @@ const INITIAL_MAX_VALUES_DISPLAYED = 10;
 /* The maximum number of values per filter to render at once after loading more */
 const SHOW_MORE_MAX_VALUES_DISPLAYED = 50;
 
+/* How long typing in the filter-name search settles before it queries */
+const SEARCH_DEBOUNCE_MS = 300;
+
 // This function will clean json string attributes specifically. It will turn a string like
 // 'toString(ResourceAttributes.`hdx`.`sdk`.`version`)' into 'ResourceAttributes.hdx.sdk.version'.
 export function cleanedFacetName(key: string): string {
@@ -400,6 +405,12 @@ export type FilterGroupProps = {
   loadMoreLoading: boolean;
   hasLoadedMore: boolean;
   isDefaultExpanded?: boolean;
+  /**
+   * Holds the group open for as long as it is true, without touching the
+   * user's own expand/collapse state — so a filter-name search can reveal
+   * matches and the group snaps back when the search is cleared.
+   */
+  isForceExpanded?: boolean;
   showFilterCounts?: boolean;
   'data-testid'?: string;
   chartConfig: BuilderChartConfigWithDateRange;
@@ -898,6 +909,7 @@ export const FilterGroup = ({
   loadMoreLoading,
   hasLoadedMore,
   isDefaultExpanded,
+  isForceExpanded,
   showFilterCounts,
   'data-testid': dataTestId,
   chartConfig,
@@ -906,6 +918,7 @@ export const FilterGroup = ({
   onRangeChange,
 }: FilterGroupProps) => {
   const [isExpanded, setExpanded] = useState(isDefaultExpanded ?? false);
+  const expanded = isExpanded || !!isForceExpanded;
   const [showDistributions, setShowDistributions] = useState(false);
   const [isFetchingDistribution, setIsFetchingDistribution] = useState(false);
 
@@ -951,7 +964,7 @@ export const FilterGroup = ({
       variant="unstyled"
       chevronPosition="left"
       classNames={{ chevron: classes.chevron }}
-      value={isExpanded ? displayName : null}
+      value={expanded ? displayName : null}
       onChange={v => {
         setExpanded(v === displayName);
       }}
@@ -1170,10 +1183,16 @@ const DBSearchPageFiltersComponent = ({
   );
 
   const [showMoreFields, setShowMoreFields] = useState(false);
+  const [filterSearch, setFilterSearch] = useState('');
+  const [debouncedFilterSearch] = useDebouncedValue(
+    filterSearch.trim(),
+    SEARCH_DEBOUNCE_MS,
+  );
   const {
     data: fetchFacetsData,
     isLoading: isFacetsLoading,
     isFetching: isFacetsFetching,
+    isSearchFetching,
     error,
     loadMoreFacetsForKey,
     loadMoreLoadingKeys,
@@ -1185,6 +1204,7 @@ const DBSearchPageFiltersComponent = ({
     mode: showAllValues ? 'all' : 'exact',
     filterState,
     showMoreFields,
+    searchQuery: debouncedFilterSearch,
   });
   const facets = fetchFacetsData.keyValues;
 
@@ -1342,6 +1362,34 @@ const DBSearchPageFiltersComponent = ({
     sharedFilterKeys,
   ]);
 
+  // Applied against the raw input, not the debounced value: filtering what is
+  // already on screen costs nothing, so it should keep up with typing even
+  // while the query behind it is still settling.
+  const isSearching = filterSearch.trim().length > 0;
+  // The debounce has not fired yet, so no query is in flight for what is
+  // currently typed. Without this the sidebar answers "No matching filters"
+  // for 300ms before it has asked anything.
+  const isSearchPending =
+    isSearching && filterSearch.trim() !== debouncedFilterSearch;
+  const isSearchBusy = isSearchPending || isSearchFetching;
+  const matchesFilterSearch = useCallback(
+    (key: string) => {
+      const needle = filterSearch.trim().toLowerCase();
+      if (!needle) return true;
+      return cleanedFacetName(key).toLowerCase().includes(needle);
+    },
+    [filterSearch],
+  );
+
+  const visibleFacets = useMemo(
+    () => shownFacets.filter(facet => matchesFilterSearch(facet.key)),
+    [shownFacets, matchesFilterSearch],
+  );
+  const visibleSharedFacets = useMemo(
+    () => sharedFacets.filter(facet => matchesFilterSearch(facet.key)),
+    [sharedFacets, matchesFilterSearch],
+  );
+
   // Check if shared facets have active selections
   const showSharedClearButton = useMemo(
     () =>
@@ -1421,10 +1469,17 @@ const DBSearchPageFiltersComponent = ({
   const renderFacetList = useCallback(
     (
       facets: { key: string; value: (string | boolean)[] }[],
-      options?: { keyPrefix?: string; isDefaultExpanded?: boolean },
+      options?: {
+        keyPrefix?: string;
+        isDefaultExpanded?: boolean;
+        isForceExpanded?: boolean;
+      },
     ) => {
-      const { keyPrefix = '', isDefaultExpanded: forceExpanded } =
-        options ?? {};
+      const {
+        keyPrefix = '',
+        isDefaultExpanded: forceExpanded,
+        isForceExpanded,
+      } = options ?? {};
       const { grouped, nonGrouped } = groupFacetsByBaseName(facets);
 
       const makeValuePins = (key: string): ValuePinHandlers => ({
@@ -1516,6 +1571,7 @@ const DBSearchPageFiltersComponent = ({
                   );
                 })
               }
+              isForceExpanded={isForceExpanded}
               chartConfig={chartConfig}
               isLive={isLive}
             />
@@ -1571,6 +1627,7 @@ const DBSearchPageFiltersComponent = ({
                           entry.range != null)))
                   );
                 })()}
+                isForceExpanded={isForceExpanded}
                 chartConfig={chartConfig}
                 isLive={isLive}
                 onRangeChange={range => setFilterRange(facet.key, range)}
@@ -1690,7 +1747,7 @@ const DBSearchPageFiltersComponent = ({
 
           {isSharedFiltersVisible && (
             <SharedFiltersSection
-              hasSharedFacets={sharedFacets.length > 0}
+              hasSharedFacets={visibleSharedFacets.length > 0}
               opened={isSharedFiltersExpanded}
               onToggle={() =>
                 setSharedFiltersExpanded(!isSharedFiltersExpanded)
@@ -1698,7 +1755,7 @@ const DBSearchPageFiltersComponent = ({
               showClearButton={showSharedClearButton}
               onClearSelections={clearSharedSelections}
             >
-              {renderFacetList(sharedFacets, {
+              {renderFacetList(visibleSharedFacets, {
                 keyPrefix: 'shared-',
                 isDefaultExpanded: true,
               })}
@@ -1706,7 +1763,7 @@ const DBSearchPageFiltersComponent = ({
           )}
 
           {/* Divider between shared and regular filters */}
-          {isSharedFiltersVisible && sharedFacets.length > 0 && (
+          {isSharedFiltersVisible && visibleSharedFacets.length > 0 && (
             <Divider color="dark.4" />
           )}
 
@@ -1764,6 +1821,12 @@ const DBSearchPageFiltersComponent = ({
             </Flex>
             <Collapse expanded={isFiltersExpanded}>
               <Stack gap="sm">
+                <FilterKeySearch
+                  value={filterSearch}
+                  onChange={setFilterSearch}
+                  isFetching={isSearchBusy}
+                />
+
                 {analysisMode === 'results' && (
                   <Checkbox
                     size={13 as any}
@@ -1832,12 +1895,24 @@ const DBSearchPageFiltersComponent = ({
                     <Loader size="xs" color="gray" />
                   </Flex>
                 ) : (
-                  shownFacets.length === 0 && (
+                  visibleFacets.length === 0 &&
+                  (isSearching ? (
+                    <Text size="xxs">
+                      {isSearchBusy
+                        ? 'Searching filters…'
+                        : 'No matching filters'}
+                    </Text>
+                  ) : (
                     <Text size="xxs">No filters available</Text>
-                  )
+                  ))
                 )}
                 {/* Show facets even when loading to ensure pinned filters are visible while loading */}
-                {renderFacetList(shownFacets)}
+                {renderFacetList(visibleFacets, {
+                  // A match buried in a collapsed group is a match the user
+                  // cannot see, which defeats searching for it. Transient, so
+                  // clearing the search restores the browse view as it was.
+                  isForceExpanded: isSearching,
+                })}
 
                 <Button
                   variant="secondary"
diff --git a/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx b/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx
new file mode 100644
index 0000000000..bccb527dab
--- /dev/null
+++ b/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx
@@ -0,0 +1,49 @@
+import { CloseButton, Loader, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+
+/**
+ * Search box for the filter sidebar, matching on filter (column) names rather
+ * than their values. Matches already on screen filter instantly; `isFetching`
+ * covers the query that goes looking for fields the browse list never loaded.
+ */
+export function FilterKeySearch({
+  value,
+  onChange,
+  isFetching,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  isFetching: boolean;
+}) {
+  return (
+    <TextInput
+      size="xs"
+      placeholder="Search filters..."
+      aria-label="Search filters"
+      data-testid="filter-key-search"
+      value={value}
+      onChange={event => onChange(event.currentTarget.value)}
+      onKeyDown={event => {
+        if (event.key === 'Escape' && value) {
+          // Stop it bubbling to whatever else listens for Escape on the page;
+          // clearing the search is the more specific intent here.
+          event.stopPropagation();
+          onChange('');
+        }
+      }}
+      leftSection={<IconSearch size={12} stroke={2} />}
+      leftSectionWidth={24}
+      rightSection={
+        isFetching ? (
+          <Loader size={12} color="gray" />
+        ) : value ? (
+          <CloseButton
+            size="xs"
+            aria-label="Clear filter search"
+            onClick={() => onChange('')}
+          />
+        ) : null
+      }
+    />
+  );
+}
diff --git a/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx b/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx
index 4145d8e917..76eca24f40 100644
--- a/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx
@@ -38,6 +38,12 @@ type NestedFilterGroupProps = {
   loadMoreLoading: Record<string, boolean>;
   hasLoadedMore: Record<string, boolean>;
   isDefaultExpanded?: boolean;
+  /**
+   * Holds the group open for as long as it is true, without touching the
+   * user's own expand/collapse state — so a filter-name search can reveal
+   * matching children and the group snaps back when the search is cleared.
+   */
+  isForceExpanded?: boolean;
   'data-testid'?: string;
   chartConfig: any; // Using any to avoid importing ChartConfigWithDateRange
   isLive?: boolean;
@@ -69,6 +75,7 @@ export const NestedFilterGroup = ({
   loadMoreLoading,
   hasLoadedMore,
   isDefaultExpanded,
+  isForceExpanded,
   'data-testid': dataTestId,
   chartConfig,
   isLive,
@@ -91,15 +98,21 @@ export const NestedFilterGroup = ({
   const [isExpanded, setExpanded] = useState(
     isDefaultExpanded ?? hasSelections,
   );
+  const expanded = isExpanded || !!isForceExpanded;
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const rowVirtualizer = useVirtualizer({
-    count: isExpanded ? childFilters.length : 0,
+    count: expanded ? childFilters.length : 0,
     getScrollElement: () => scrollContainerRef.current,
     estimateSize: () => VIRTUAL_ITEM_HEIGHT_ESTIMATE,
     overscan: 10,
     getItemKey: index => childFilters[index]?.key ?? index,
+    // Collapsing the whole Filters section measures every row at 0 while it is
+    // hidden; that zero is cached, so the total size stays 0 and the group
+    // reopens empty. Fall back to the estimate rather than cache a zero.
+    measureElement: el =>
+      el.getBoundingClientRect().height || VIRTUAL_ITEM_HEIGHT_ESTIMATE,
   });
 
   return (
@@ -107,7 +120,7 @@ export const NestedFilterGroup = ({
       variant="unstyled"
       chevronPosition="left"
       classNames={{ chevron: classes.chevron }}
-      value={isExpanded ? name : null}
+      value={expanded ? name : null}
       onChange={v => setExpanded(v === name)}
     >
       <Accordion.Item value={name} data-testid={dataTestId}>
diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
index a3c567233e..a1c693651b 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
@@ -83,6 +83,11 @@ const useMapColumns = jest.mocked(useMetadataModule.useMapColumns);
 const useAllFields = jest.mocked(useMetadataModule.useAllFields);
 const useGetKeyValues = jest.mocked(useMetadataModule.useGetKeyValues);
 
+// Each render issues two `useGetKeyValues` calls: the browse list, then the
+// filter-name search.
+const lastBrowseCall = () => useGetKeyValues.mock.calls.at(-2);
+const lastSearchCall = () => useGetKeyValues.mock.calls.at(-1);
+
 const CHART_CONFIG: BuilderChartConfigWithDateRange = {
   connection: 'conn1',
   from: { databaseName: 'db', tableName: 'logs' },
@@ -214,7 +219,7 @@ describe('useFetchFacets', () => {
         { wrapper },
       );
 
-      const call = useGetKeyValues.mock.calls.at(-1);
+      const call = lastBrowseCall();
       expect(call?.[0]?.mode).toBe('exact');
       expect(call?.[1]?.enabled).toBe(true);
     });
@@ -234,7 +239,7 @@ describe('useFetchFacets', () => {
         { wrapper },
       );
 
-      const call = useGetKeyValues.mock.calls.at(-1);
+      const call = lastBrowseCall();
       expect(call?.[0]?.mode).toBe('all');
       expect(call?.[1]?.enabled).toBe(true);
     });
@@ -254,7 +259,7 @@ describe('useFetchFacets', () => {
         { wrapper },
       );
 
-      const call = useGetKeyValues.mock.calls.at(-1);
+      const call = lastBrowseCall();
       expect(call?.[0]?.mode).toBe('exact');
     });
   });
@@ -280,7 +285,7 @@ describe('useFetchFacets', () => {
         { wrapper },
       );
 
-      const call = useGetKeyValues.mock.calls.at(-1);
+      const call = lastBrowseCall();
       expect(call?.[1]?.enabled).toBe(false);
     });
 
@@ -300,7 +305,7 @@ describe('useFetchFacets', () => {
         { wrapper },
       );
 
-      const call = useGetKeyValues.mock.calls.at(-1);
+      const call = lastBrowseCall();
       expect(call?.[1]?.enabled).toBe(true);
     });
 
@@ -1145,4 +1150,150 @@ describe('useFetchFacets', () => {
       expect(result.current.extraFacetKeys.size).toBe(0);
     });
   });
+
+  // The filter-name search runs as a second query so the browse list survives
+  // typing untouched, and it looks at every string field rather than the
+  // low-cardinality subset the browse list narrows to.
+  describe('searchQuery', () => {
+    const FIELDS = [
+      {
+        path: ['ServiceName'],
+        type: 'LowCardinality(String)',
+        jsType: 'string',
+      },
+      { path: ['TraceId'], type: 'String', jsType: 'string' },
+      { path: ['SpanId'], type: 'String', jsType: 'string' },
+      { path: ['Duration'], type: 'UInt64', jsType: 'number' },
+      {
+        path: ['LogAttributes', 'service.version'],
+        type: 'String',
+        jsType: 'string',
+      },
+    ];
+
+    const renderWithSearch = (searchQuery?: string) => {
+      setupDefaultMocks({ withMVs: false });
+      useAllFields.mockReturnValue({ data: FIELDS } as any);
+      useMapColumns.mockReturnValue({ data: ['LogAttributes'] } as any);
+      const { wrapper } = makeWrapper();
+      return renderHook(
+        () =>
+          useFetchFacets({
+            chartConfig: CHART_CONFIG,
+            sourceId: 'source1',
+            dateRange: DATE_RANGE,
+            mode: 'all',
+            searchQuery,
+          }),
+        { wrapper },
+      );
+    };
+
+    it('does not query when there is no search', () => {
+      renderWithSearch();
+
+      expect(lastSearchCall()?.[0]?.keys).toEqual([]);
+      expect(lastSearchCall()?.[1]?.enabled).toBe(false);
+    });
+
+    it('does not query for a single character', () => {
+      renderWithSearch('s');
+
+      expect(lastSearchCall()?.[1]?.enabled).toBe(false);
+    });
+
+    it('reaches fields the browse list never requests', () => {
+      renderWithSearch('trace');
+
+      expect(lastBrowseCall()?.[0]?.keys).not.toContain('TraceId');
+      expect(lastSearchCall()?.[0]?.keys).toEqual(['TraceId']);
+      expect(lastSearchCall()?.[1]?.enabled).toBe(true);
+    });
+
+    it('matches map sub-fields and ranks prefix matches first', () => {
+      renderWithSearch('service');
+
+      expect(lastSearchCall()?.[0]?.keys).toEqual([
+        'ServiceName',
+        "LogAttributes['service.version']",
+      ]);
+    });
+
+    it('leaves the browse query untouched while searching', () => {
+      renderWithSearch();
+      const browseKeys = lastBrowseCall()?.[0]?.keys;
+
+      jest.clearAllMocks();
+      renderWithSearch('trace');
+
+      expect(lastBrowseCall()?.[0]?.keys).toEqual(browseKeys);
+      expect(lastBrowseCall()?.[1]?.enabled).toBe(true);
+    });
+
+    it('drops the last search page once the search is cleared', () => {
+      setupDefaultMocks({ withMVs: false });
+      useAllFields.mockReturnValue({ data: FIELDS } as any);
+      // Stands in for `keepPreviousData`, which keeps serving the last page
+      // even after the query is disabled.
+      useGetKeyValues.mockReturnValue({
+        data: [{ key: 'TraceId', value: ['abc'] }],
+        isLoading: false,
+        isFetching: false,
+        error: null,
+      } as any);
+
+      const { wrapper } = makeWrapper();
+      const { result, rerender } = renderHook(
+        (props: { searchQuery?: string }) =>
+          useFetchFacets({
+            chartConfig: CHART_CONFIG,
+            sourceId: 'source1',
+            dateRange: DATE_RANGE,
+            mode: 'all',
+            searchQuery: props.searchQuery,
+          }),
+        { wrapper, initialProps: { searchQuery: 'trace' } },
+      );
+
+      expect(result.current.data.keyValues).toHaveLength(1);
+
+      rerender({ searchQuery: '' });
+
+      expect(result.current.data.keyValues).toEqual([
+        { key: 'TraceId', value: ['abc'] },
+      ]);
+      expect(lastSearchCall()?.[1]?.enabled).toBe(false);
+    });
+
+    it('unions search results into the facet list without duplicating keys', () => {
+      setupDefaultMocks({ withMVs: false });
+      useAllFields.mockReturnValue({ data: FIELDS } as any);
+      useGetKeyValues.mockImplementation(((args: { keys: string[] }) => ({
+        data: args.keys.includes('TraceId')
+          ? [{ key: 'TraceId', value: ['abc'] }]
+          : [{ key: 'ServiceName', value: ['api'] }],
+        isLoading: false,
+        isFetching: false,
+        error: null,
+      })) as any);
+
+      const { wrapper } = makeWrapper();
+      const { result } = renderHook(
+        () =>
+          useFetchFacets({
+            chartConfig: CHART_CONFIG,
+            sourceId: 'source1',
+            dateRange: DATE_RANGE,
+            mode: 'all',
+            searchQuery: 'trace',
+          }),
+        { wrapper },
+      );
+
+      expect(result.current.data.keyValues).toEqual([
+        { key: 'ServiceName', value: ['api'] },
+        { key: 'TraceId', value: ['abc'] },
+      ]);
+    });
+  });
 });
diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.ts b/packages/app/src/components/DBSearchPageFilters/hooks.ts
index be73a26336..f7d00c249b 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.ts
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.ts
@@ -35,6 +35,15 @@ const INITIAL_LOAD_LIMIT = 20;
 /* The maximum number of values per filter to load when "Load More" is clicked */
 const LOAD_MORE_LOAD_LIMIT = 10000;
 
+/* The maximum number of matched fields a filter-name search fetches values for */
+const SEARCH_MAX_KEYS = 50;
+
+/* Shorter than this matches most of the schema, so it isn't worth a query */
+const MIN_SEARCH_LENGTH = 2;
+
+/* Free-text bodies and the timestamp are never useful as faceted filters */
+const NON_FACET_PATHS = ['body', 'timestamp', '_hdx_body'];
+
 /**
  * Decide which table key-value discovery reads from.
  *
@@ -68,6 +77,7 @@ function useFacets({
   dateRange,
   filterState,
   showMoreFields,
+  searchQuery,
   enabled,
   disableValues,
 }: {
@@ -82,6 +92,8 @@ function useFacets({
   dateRange: [Date, Date];
   filterState?: FilterState;
   showMoreFields?: boolean;
+  /** Debounced filter-name search; fetches values for fields matching it. */
+  searchQuery?: string;
   enabled?: boolean;
   disableValues?: boolean;
 }) {
@@ -152,10 +164,7 @@ function useFacets({
           isSharedFieldPinned(field.path), // keep team-shared fields
       )
       .map(({ path }) => path)
-      .filter(
-        path =>
-          !['body', 'timestamp', '_hdx_body'].includes(path.toLowerCase()),
-      );
+      .filter(path => !NON_FACET_PATHS.includes(path.toLowerCase()));
     return strings;
   }, [
     allFields,
@@ -167,21 +176,66 @@ function useFacets({
     isSharedFieldPinned,
   ]);
 
-  const { escapedKeysToFetch, sqlKeyToUiKey } = useMemo(() => {
-    // Don't fetch any keys until the column list is loaded,
-    // since we need the real column names to escape correctly.
-    if (isColumnsLoading) {
-      return { escapedKeysToFetch: [], sqlKeyToUiKey: new Map() };
+  // Searched over every string field rather than `keysToFetch`, which is the
+  // point: the browse list deliberately omits high-cardinality columns, and
+  // those are exactly the filters a user resorts to searching for.
+  const searchKeysToFetch = useMemo(() => {
+    const needle = searchQuery?.trim().toLowerCase() ?? '';
+    if (!allFields || needle.length < MIN_SEARCH_LENGTH) {
+      return [];
     }
+    return allFields
+      .filter(field => field.jsType === 'string')
+      .map(({ path }) => {
+        const merged = mergePath(path, jsonColumns ?? [], mapColumns ?? []);
+        return {
+          path: merged,
+          // JSON sub-paths arrive backtick-quoted (Body.`user`.`id`), which no
+          // one types. Matched against the bare text the sidebar displays.
+          haystack: merged.toLowerCase().replaceAll('`', ''),
+        };
+      })
+      .filter(
+        ({ path, haystack }) =>
+          !NON_FACET_PATHS.includes(path.toLowerCase()) &&
+          haystack.includes(needle),
+      )
+      .sort((a, b) => {
+        // SEARCH_MAX_KEYS is a hard cutoff, so this order decides which matches
+        // get values at all — prefix matches are the likelier intent.
+        const aPrefix = a.haystack.startsWith(needle);
+        const bPrefix = b.haystack.startsWith(needle);
+        if (aPrefix !== bPrefix) return aPrefix ? -1 : 1;
+        return a.path.localeCompare(b.path);
+      })
+      .slice(0, SEARCH_MAX_KEYS)
+      .map(({ path }) => path);
+  }, [allFields, jsonColumns, mapColumns, searchQuery]);
 
-    const sqlKeyToUiKey = new Map<string, string>();
-    const escapedKeysToFetch = keysToFetch.map(key => {
-      const sqlKey = toQuotedClickHouseKeyExpression(key, knownColumns);
-      sqlKeyToUiKey.set(sqlKey, key);
-      return sqlKey;
-    });
-    return { escapedKeysToFetch, sqlKeyToUiKey };
-  }, [isColumnsLoading, keysToFetch, knownColumns]);
+  const { escapedKeysToFetch, escapedSearchKeys, sqlKeyToUiKey } =
+    useMemo(() => {
+      // Don't fetch any keys until the column list is loaded,
+      // since we need the real column names to escape correctly.
+      if (isColumnsLoading) {
+        return {
+          escapedKeysToFetch: [],
+          escapedSearchKeys: [],
+          sqlKeyToUiKey: new Map(),
+        };
+      }
+
+      const sqlKeyToUiKey = new Map<string, string>();
+      const escape = (key: string) => {
+        const sqlKey = toQuotedClickHouseKeyExpression(key, knownColumns);
+        sqlKeyToUiKey.set(sqlKey, key);
+        return sqlKey;
+      };
+      return {
+        escapedKeysToFetch: keysToFetch.map(escape),
+        escapedSearchKeys: searchKeysToFetch.map(escape),
+        sqlKeyToUiKey,
+      };
+    }, [isColumnsLoading, keysToFetch, searchKeysToFetch, knownColumns]);
 
   const facetsChartConfig = useMemo(
     () =>
@@ -201,15 +255,52 @@ function useFacets({
     { enabled: enabled && !disableValues },
   );
 
-  // Map the (escaped) result keys back to the original UI keys.
-  const facets = useMemo<Facet[] | undefined>(
-    () =>
-      rawFacets?.map(f => ({
-        ...f,
-        key: sqlKeyToUiKey.get(f.key) ?? f.key,
-      })),
-    [rawFacets, sqlKeyToUiKey],
-  );
+  // A second query rather than widening the one above: the browse list must
+  // survive typing untouched, so clearing the search costs nothing and each
+  // search term caches on its own.
+  const { data: lastSearchFacets, isFetching: isSearchFetching } =
+    useGetKeyValues(
+      {
+        chartConfig: facetsChartConfig,
+        limit: INITIAL_LOAD_LIMIT,
+        keys: escapedSearchKeys,
+        mode,
+      },
+      { enabled: enabled && !disableValues && escapedSearchKeys.length > 0 },
+    );
+
+  // `keepPreviousData` keeps serving the last search's page even once the query
+  // is disabled, which would leave fields the browse list never asked for
+  // sitting in the sidebar after the search box is cleared.
+  const rawSearchFacets =
+    escapedSearchKeys.length > 0 ? lastSearchFacets : undefined;
+
+  // Map the (escaped) result keys back to the original UI keys, and union the
+  // search results in. Search and browse can ask for the same key, and while a
+  // new search is in flight `rawSearchFacets` still holds the previous term's
+  // page — harmless, since the caller filters by the typed text anyway.
+  const facets = useMemo<Facet[] | undefined>(() => {
+    if (rawFacets === undefined && rawSearchFacets === undefined) {
+      return undefined;
+    }
+    const byKey = new Map<string, Facet>();
+    for (const facet of [...(rawFacets ?? []), ...(rawSearchFacets ?? [])]) {
+      const key = sqlKeyToUiKey.get(facet.key) ?? facet.key;
+      const existing = byKey.get(key);
+      if (!existing) {
+        byKey.set(key, { key, value: [...facet.value] });
+        continue;
+      }
+      const seen = new Set(existing.value);
+      for (const value of facet.value) {
+        if (!seen.has(value)) {
+          seen.add(value);
+          existing.value.push(value);
+        }
+      }
+    }
+    return [...byKey.values()];
+  }, [rawFacets, rawSearchFacets, sqlKeyToUiKey]);
 
   const metadata = useMetadataWithSettings();
   const loadMoreFacetsForKey = useCallback(
@@ -292,6 +383,7 @@ function useFacets({
     error: allFieldsError ?? rest.error,
     data: { keys: allFields, keyValues: facets },
     isLoading: isAllFieldsLoading || rest.isLoading,
+    isSearchFetching,
     loadMoreFacetsForKey,
   };
 }
@@ -304,6 +396,7 @@ export function useFetchFacets({
   mode,
   filterState,
   showMoreFields,
+  searchQuery,
   disableValues,
 }: {
   chartConfig: BuilderChartConfigWithDateRange;
@@ -317,6 +410,8 @@ export function useFetchFacets({
   mode: 'all' | 'exact';
   filterState?: FilterState;
   showMoreFields?: boolean;
+  /** Debounced filter-name search; fetches values for fields matching it. */
+  searchQuery?: string;
   disableValues?: boolean;
 }) {
   const facetsQuery = useFacets({
@@ -327,6 +422,7 @@ export function useFetchFacets({
     dateRange,
     filterState,
     showMoreFields,
+    searchQuery,
     enabled: true,
     disableValues,
   });

From f37947c7e31d78edfec61d4ba95ce020c55d744c Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Mon, 21 Sep 2026 23:27:36 -0700
Subject: [PATCH 2/8] test: type the new filter-search mocks instead of casting
 to any
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The escape-hatch ratchet gates `as any` per package, and the six casts the
search tests added pushed app over its baseline. Replaced them with typed
`mockAllFields` / `mockMapColumns` / `settledKeyValues` helpers in the same
style as the `mockSourceQuery` and `mockMetadata` helpers already in the file,
and typed the field fixtures with `Field` / `JSDataType` — which also drops
the duplicated inline mock bodies.
---
 .../DBSearchPageFilters/hooks.test.tsx        | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
index a1c693651b..f33be720d5 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-type-assertion */
 import React from 'react';
 import { enableMapSet } from 'immer';
+import { JSDataType } from '@hyperdx/common-utils/dist/clickhouse';
+import type { Field } from '@hyperdx/common-utils/dist/core/metadata';
 import { FilterState } from '@hyperdx/common-utils/dist/filters';
 import {
   BuilderChartConfigWithDateRange,
@@ -10,6 +12,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { act, renderHook, waitFor } from '@testing-library/react';
 
 import api from '@/api';
+import type { Facet } from '@/hooks/useMetadata';
 import * as useMetadataModule from '@/hooks/useMetadata';
 import * as searchFiltersModule from '@/searchFilters';
 import * as sourceModule from '@/source';
@@ -135,6 +138,24 @@ const mockSourceQuery = (data: SourceQueryResult['data']) =>
 const mockMetadata = (metadata: Partial<MetadataWithSettings>) =>
   useMetadataWithSettings.mockReturnValue(metadata as MetadataWithSettings);
 
+type AllFieldsResult = ReturnType<typeof useMetadataModule.useAllFields>;
+type MapColumnsResult = ReturnType<typeof useMetadataModule.useMapColumns>;
+type KeyValuesResult = ReturnType<typeof useMetadataModule.useGetKeyValues>;
+
+const mockAllFields = (data: Field[]) =>
+  useAllFields.mockReturnValue({ data } as AllFieldsResult);
+
+const mockMapColumns = (data: string[]) =>
+  useMapColumns.mockReturnValue({ data } as MapColumnsResult);
+
+const settledKeyValues = (data: Facet[]) =>
+  ({
+    data,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+  }) as KeyValuesResult;
+
 function makeWrapper() {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false } },
@@ -1155,26 +1176,26 @@ describe('useFetchFacets', () => {
   // typing untouched, and it looks at every string field rather than the
   // low-cardinality subset the browse list narrows to.
   describe('searchQuery', () => {
-    const FIELDS = [
+    const FIELDS: Field[] = [
       {
         path: ['ServiceName'],
         type: 'LowCardinality(String)',
-        jsType: 'string',
+        jsType: JSDataType.String,
       },
-      { path: ['TraceId'], type: 'String', jsType: 'string' },
-      { path: ['SpanId'], type: 'String', jsType: 'string' },
-      { path: ['Duration'], type: 'UInt64', jsType: 'number' },
+      { path: ['TraceId'], type: 'String', jsType: JSDataType.String },
+      { path: ['SpanId'], type: 'String', jsType: JSDataType.String },
+      { path: ['Duration'], type: 'UInt64', jsType: JSDataType.Number },
       {
         path: ['LogAttributes', 'service.version'],
         type: 'String',
-        jsType: 'string',
+        jsType: JSDataType.String,
       },
     ];
 
     const renderWithSearch = (searchQuery?: string) => {
       setupDefaultMocks({ withMVs: false });
-      useAllFields.mockReturnValue({ data: FIELDS } as any);
-      useMapColumns.mockReturnValue({ data: ['LogAttributes'] } as any);
+      mockAllFields(FIELDS);
+      mockMapColumns(['LogAttributes']);
       const { wrapper } = makeWrapper();
       return renderHook(
         () =>
@@ -1232,15 +1253,12 @@ describe('useFetchFacets', () => {
 
     it('drops the last search page once the search is cleared', () => {
       setupDefaultMocks({ withMVs: false });
-      useAllFields.mockReturnValue({ data: FIELDS } as any);
+      mockAllFields(FIELDS);
       // Stands in for `keepPreviousData`, which keeps serving the last page
       // even after the query is disabled.
-      useGetKeyValues.mockReturnValue({
-        data: [{ key: 'TraceId', value: ['abc'] }],
-        isLoading: false,
-        isFetching: false,
-        error: null,
-      } as any);
+      useGetKeyValues.mockReturnValue(
+        settledKeyValues([{ key: 'TraceId', value: ['abc'] }]),
+      );
 
       const { wrapper } = makeWrapper();
       const { result, rerender } = renderHook(
@@ -1267,15 +1285,14 @@ describe('useFetchFacets', () => {
 
     it('unions search results into the facet list without duplicating keys', () => {
       setupDefaultMocks({ withMVs: false });
-      useAllFields.mockReturnValue({ data: FIELDS } as any);
-      useGetKeyValues.mockImplementation(((args: { keys: string[] }) => ({
-        data: args.keys.includes('TraceId')
-          ? [{ key: 'TraceId', value: ['abc'] }]
-          : [{ key: 'ServiceName', value: ['api'] }],
-        isLoading: false,
-        isFetching: false,
-        error: null,
-      })) as any);
+      mockAllFields(FIELDS);
+      useGetKeyValues.mockImplementation(({ keys }) =>
+        settledKeyValues(
+          keys.includes('TraceId')
+            ? [{ key: 'TraceId', value: ['abc'] }]
+            : [{ key: 'ServiceName', value: ['api'] }],
+        ),
+      );
 
       const { wrapper } = makeWrapper();
       const { result } = renderHook(

From 68e1b80ba99913f1cecdc2009517b06db279aea4 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Mon, 21 Sep 2026 23:33:29 -0700
Subject: [PATCH 3/8] fix: render the body of a filter group opened by search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FilterGroup's accordion header opened on the search override while the body
still rendered on the component's own `isExpanded`, so a top-level column
found only by search — TraceId, say — showed an open header with nothing in
it, and clicking could not recover: the accordion was already open, so its
change handler only set a state the override was masking.

Map sub-fields were unaffected, which is why manual testing missed this:
they render as NestedFilterGroup children and never receive the override.

Also surface the search query's error. It was dropped, so a failed lookup
read as "No matching filters" — indistinguishable from a field that really
has no values.

The clearing test now mocks distinct browse and search facets. With the same
facet on both queries it passed even with the guard it names removed.
---
 .../src/components/DBSearchPageFilters.tsx    |  2 +-
 .../DBSearchPageFilters/hooks.test.tsx        | 21 ++++++++++----
 .../components/DBSearchPageFilters/hooks.ts   | 28 +++++++++++--------
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 121640768c..24599b3b34 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -1037,7 +1037,7 @@ export const FilterGroup = ({
                 onRangeChange={onRangeChange}
               />
             ) : (
-              isExpanded && (
+              expanded && (
                 <FilterGroupBody
                   name={name}
                   options={options}
diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
index f33be720d5..20a6f3dcf1 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
@@ -1254,10 +1254,16 @@ describe('useFetchFacets', () => {
     it('drops the last search page once the search is cleared', () => {
       setupDefaultMocks({ withMVs: false });
       mockAllFields(FIELDS);
-      // Stands in for `keepPreviousData`, which keeps serving the last page
-      // even after the query is disabled.
-      useGetKeyValues.mockReturnValue(
-        settledKeyValues([{ key: 'TraceId', value: ['abc'] }]),
+      // Browse answers with ServiceName; the search query answers with
+      // TraceId and keeps doing so after it is disabled, standing in for
+      // `keepPreviousData` still serving the last page. Distinct facets, so
+      // dropping the guard fails this test rather than passing by overlap.
+      useGetKeyValues.mockImplementation(({ keys }) =>
+        settledKeyValues(
+          keys.includes('ServiceName')
+            ? [{ key: 'ServiceName', value: ['api'] }]
+            : [{ key: 'TraceId', value: ['abc'] }],
+        ),
       );
 
       const { wrapper } = makeWrapper();
@@ -1273,12 +1279,15 @@ describe('useFetchFacets', () => {
         { wrapper, initialProps: { searchQuery: 'trace' } },
       );
 
-      expect(result.current.data.keyValues).toHaveLength(1);
+      expect(result.current.data.keyValues).toEqual([
+        { key: 'ServiceName', value: ['api'] },
+        { key: 'TraceId', value: ['abc'] },
+      ]);
 
       rerender({ searchQuery: '' });
 
       expect(result.current.data.keyValues).toEqual([
-        { key: 'TraceId', value: ['abc'] },
+        { key: 'ServiceName', value: ['api'] },
       ]);
       expect(lastSearchCall()?.[1]?.enabled).toBe(false);
     });
diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.ts b/packages/app/src/components/DBSearchPageFilters/hooks.ts
index f7d00c249b..17d66229a2 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.ts
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.ts
@@ -258,16 +258,19 @@ function useFacets({
   // A second query rather than widening the one above: the browse list must
   // survive typing untouched, so clearing the search costs nothing and each
   // search term caches on its own.
-  const { data: lastSearchFacets, isFetching: isSearchFetching } =
-    useGetKeyValues(
-      {
-        chartConfig: facetsChartConfig,
-        limit: INITIAL_LOAD_LIMIT,
-        keys: escapedSearchKeys,
-        mode,
-      },
-      { enabled: enabled && !disableValues && escapedSearchKeys.length > 0 },
-    );
+  const {
+    data: lastSearchFacets,
+    isFetching: isSearchFetching,
+    error: searchError,
+  } = useGetKeyValues(
+    {
+      chartConfig: facetsChartConfig,
+      limit: INITIAL_LOAD_LIMIT,
+      keys: escapedSearchKeys,
+      mode,
+    },
+    { enabled: enabled && !disableValues && escapedSearchKeys.length > 0 },
+  );
 
   // `keepPreviousData` keeps serving the last search's page even once the query
   // is disabled, which would leave fields the browse list never asked for
@@ -380,7 +383,10 @@ function useFacets({
 
   return {
     ...rest,
-    error: allFieldsError ?? rest.error,
+    // A failed search must not read as "no matching filters": the caller
+    // reports this, so a field that exists but could not be looked up is
+    // distinguishable from one that genuinely has no values.
+    error: allFieldsError ?? rest.error ?? searchError,
     data: { keys: allFields, keyValues: facets },
     isLoading: isAllFieldsLoading || rest.isLoading,
     isSearchFetching,

From b0c622900cca20fcf92a4f49cb8cc1b9f100eeb8 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Tue, 22 Sep 2026 08:00:05 -0700
Subject: [PATCH 4/8] fix: move the filter search box above the filter list

It sat above the Denoise Results and Root Spans Only checkboxes, which made
it read as a control over the whole panel rather than over the list it
filters. Moved below them, directly above the groups.

Placeholder now names what it matches: columns and properties, not values.
---
 packages/app/src/components/DBSearchPageFilters.tsx  | 12 ++++++------
 .../DBSearchPageFilters/FilterKeySearch.tsx          |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 24599b3b34..c25517749e 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -1821,12 +1821,6 @@ const DBSearchPageFiltersComponent = ({
             </Flex>
             <Collapse expanded={isFiltersExpanded}>
               <Stack gap="sm">
-                <FilterKeySearch
-                  value={filterSearch}
-                  onChange={setFilterSearch}
-                  isFetching={isSearchBusy}
-                />
-
                 {analysisMode === 'results' && (
                   <Checkbox
                     size={13 as any}
@@ -1890,6 +1884,12 @@ const DBSearchPageFiltersComponent = ({
                     />
                   )}
 
+                <FilterKeySearch
+                  value={filterSearch}
+                  onChange={setFilterSearch}
+                  isFetching={isSearchBusy}
+                />
+
                 {isFacetsLoading ? (
                   <Flex align="center" justify="center">
                     <Loader size="xs" color="gray" />
diff --git a/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx b/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx
index bccb527dab..3159271825 100644
--- a/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/FilterKeySearch.tsx
@@ -18,8 +18,8 @@ export function FilterKeySearch({
   return (
     <TextInput
       size="xs"
-      placeholder="Search filters..."
-      aria-label="Search filters"
+      placeholder="Search filter column/properties"
+      aria-label="Search filter column/properties"
       data-testid="filter-key-search"
       value={value}
       onChange={event => onChange(event.currentTarget.value)}

From cd255d0a3b126f298e668589b570403d15bbc1d5 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Tue, 22 Sep 2026 08:35:31 -0700
Subject: [PATCH 5/8] perf: skip the search query for keys browse already
 answered
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Searching for a field that is already on screen was costing a round trip
that came back with values we were already holding — and that is the most
common search there is, since the point of the box is to find something you
believe is in the list.

Filtered against what the browse query *returned*, not what it requested:
browse truncates at `maxKeys`, so "we asked for it" does not mean "we have
it". A match past that cutoff is still fetched, which is the case the
feature exists for.

Measured against the dev stack, per search:

  Severity              1 req /   674 B -> 0
  ServiceName           1 req /   673 B -> 0
  agentToServer.health  1 req / 7,704 B -> 0
  cust (past the cap)   1 req / 1,377 B -> unchanged
---
 .../DBSearchPageFilters/hooks.test.tsx        | 35 +++++++++++++++++++
 .../components/DBSearchPageFilters/hooks.ts   | 21 +++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
index 20a6f3dcf1..4a5ec47a10 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.test.tsx
@@ -1251,6 +1251,41 @@ describe('useFetchFacets', () => {
       expect(lastBrowseCall()?.[1]?.enabled).toBe(true);
     });
 
+    it('does not re-request keys the browse query already answered', () => {
+      setupDefaultMocks({ withMVs: false });
+      mockAllFields(FIELDS);
+      // Browse answered for ServiceName, so searching for it must not ask
+      // again; TraceId is absent from the browse page and still must.
+      useGetKeyValues.mockImplementation(({ keys }) =>
+        settledKeyValues(
+          keys.includes('ServiceName')
+            ? [{ key: 'ServiceName', value: ['api'] }]
+            : [],
+        ),
+      );
+
+      const { wrapper } = makeWrapper();
+      const { rerender } = renderHook(
+        (props: { searchQuery: string }) =>
+          useFetchFacets({
+            chartConfig: CHART_CONFIG,
+            sourceId: 'source1',
+            dateRange: DATE_RANGE,
+            mode: 'all',
+            searchQuery: props.searchQuery,
+          }),
+        { wrapper, initialProps: { searchQuery: 'ServiceName' } },
+      );
+
+      expect(lastSearchCall()?.[0]?.keys).toEqual([]);
+      expect(lastSearchCall()?.[1]?.enabled).toBe(false);
+
+      rerender({ searchQuery: 'trace' });
+
+      expect(lastSearchCall()?.[0]?.keys).toEqual(['TraceId']);
+      expect(lastSearchCall()?.[1]?.enabled).toBe(true);
+    });
+
     it('drops the last search page once the search is cleared', () => {
       setupDefaultMocks({ withMVs: false });
       mockAllFields(FIELDS);
diff --git a/packages/app/src/components/DBSearchPageFilters/hooks.ts b/packages/app/src/components/DBSearchPageFilters/hooks.ts
index 17d66229a2..a96cc0b802 100644
--- a/packages/app/src/components/DBSearchPageFilters/hooks.ts
+++ b/packages/app/src/components/DBSearchPageFilters/hooks.ts
@@ -212,14 +212,14 @@ function useFacets({
       .map(({ path }) => path);
   }, [allFields, jsonColumns, mapColumns, searchQuery]);
 
-  const { escapedKeysToFetch, escapedSearchKeys, sqlKeyToUiKey } =
+  const { escapedKeysToFetch, escapedSearchMatches, sqlKeyToUiKey } =
     useMemo(() => {
       // Don't fetch any keys until the column list is loaded,
       // since we need the real column names to escape correctly.
       if (isColumnsLoading) {
         return {
           escapedKeysToFetch: [],
-          escapedSearchKeys: [],
+          escapedSearchMatches: [],
           sqlKeyToUiKey: new Map(),
         };
       }
@@ -232,7 +232,7 @@ function useFacets({
       };
       return {
         escapedKeysToFetch: keysToFetch.map(escape),
-        escapedSearchKeys: searchKeysToFetch.map(escape),
+        escapedSearchMatches: searchKeysToFetch.map(escape),
         sqlKeyToUiKey,
       };
     }, [isColumnsLoading, keysToFetch, searchKeysToFetch, knownColumns]);
@@ -255,6 +255,21 @@ function useFacets({
     { enabled: enabled && !disableValues },
   );
 
+  // Whatever browse already returned needs no second lookup — same keys, same
+  // limit, same scope. Without this, searching for a field that is already on
+  // screen costs a round trip that answers with what we are holding, which is
+  // the most common search there is. Keyed off what came back rather than what
+  // was asked for: the browse query truncates at `maxKeys`, so "we requested
+  // it" does not mean "we have it".
+  const browseKeys = useMemo(
+    () => new Set((rawFacets ?? []).map(facet => facet.key)),
+    [rawFacets],
+  );
+  const escapedSearchKeys = useMemo(
+    () => escapedSearchMatches.filter(key => !browseKeys.has(key)),
+    [escapedSearchMatches, browseKeys],
+  );
+
   // A second query rather than widening the one above: the browse list must
   // survive typing untouched, so clearing the search costs nothing and each
   // search term caches on its own.

From d1300830dcff040ed14870e8735b5d952b142602 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Tue, 22 Sep 2026 10:31:12 -0700
Subject: [PATCH 6/8] fix: keep filter groups collapsible while a search is
 open

The search override was `expanded = isExpanded || isForceExpanded`, so
clicking a group's header during a search did nothing visible: the click
flipped a state the override was masking, leaving the group stuck open with
no way to close it.

Expansion now lives in `useGroupExpansion`, which holds the search override
separately from the browse state. During a search the group starts open and
the user can close it; the browse state is untouched underneath, so clearing
the search restores what they had rather than whatever the search left
behind. The override resets when a search starts or ends.

The setter keeps a stable identity through a ref, since callers hold it in a
`useCallback([])` and in effect deps.
---
 .../src/components/DBSearchPageFilters.tsx    | 11 +++--
 .../DBSearchPageFilters/NestedFilterGroup.tsx |  8 +--
 .../DBSearchPageFilters/useGroupExpansion.ts  | 49 +++++++++++++++++++
 3 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index c25517749e..9fa2a358c9 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -75,6 +75,7 @@ import {
   PinShareMenu,
 } from './DBSearchPageFilters/PinShareMenu';
 import { SharedFiltersSection } from './DBSearchPageFilters/SharedFilters';
+import { useGroupExpansion } from './DBSearchPageFilters/useGroupExpansion';
 import {
   getFilterStateEntry,
   groupFacetsByBaseName,
@@ -917,8 +918,10 @@ export const FilterGroup = ({
   distributionKey,
   onRangeChange,
 }: FilterGroupProps) => {
-  const [isExpanded, setExpanded] = useState(isDefaultExpanded ?? false);
-  const expanded = isExpanded || !!isForceExpanded;
+  const [expanded, setExpanded] = useGroupExpansion(
+    isDefaultExpanded ?? false,
+    isForceExpanded,
+  );
   const [showDistributions, setShowDistributions] = useState(false);
   const [isFetchingDistribution, setIsFetchingDistribution] = useState(false);
 
@@ -936,7 +939,7 @@ export const FilterGroup = ({
       }
       return !prev;
     });
-  }, []);
+  }, [setExpanded]);
 
   const onDistributionError = useCallback(() => {
     setShowDistributions(false);
@@ -946,7 +949,7 @@ export const FilterGroup = ({
     if (isDefaultExpanded) {
       setExpanded(true);
     }
-  }, [isDefaultExpanded]);
+  }, [isDefaultExpanded, setExpanded]);
 
   const totalAppliedFiltersSize =
     selectedValues.included.size +
diff --git a/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx b/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx
index 76eca24f40..6fe437a57a 100644
--- a/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx
+++ b/packages/app/src/components/DBSearchPageFilters/NestedFilterGroup.tsx
@@ -1,10 +1,12 @@
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 import { FilterState } from '@hyperdx/common-utils/dist/filters';
 import { Accordion, Group, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { FilterGroup } from '@/components/DBSearchPageFilters';
 
+import { useGroupExpansion } from './useGroupExpansion';
+
 import classes from '@styles/SearchPage.module.scss';
 
 type NestedFilterGroupProps = {
@@ -95,10 +97,10 @@ export const NestedFilterGroup = ({
   );
 
   const hasSelections = totalFiltersSize > 0;
-  const [isExpanded, setExpanded] = useState(
+  const [expanded, setExpanded] = useGroupExpansion(
     isDefaultExpanded ?? hasSelections,
+    isForceExpanded,
   );
-  const expanded = isExpanded || !!isForceExpanded;
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
diff --git a/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts b/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts
new file mode 100644
index 0000000000..1a0cec2798
--- /dev/null
+++ b/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Expansion state for a filter group, with a filter-name search override.
+ *
+ * A search opens every matching group so the match is actually visible, but
+ * the user still has to be able to close one while the search is open. So the
+ * override is held separately from the user's own browse state: toggling
+ * during a search moves the override, leaving the browse state to be restored
+ * when the search ends rather than the group staying stuck open.
+ *
+ * The override resets whenever a search starts or ends, so each search begins
+ * from "matches are visible" again.
+ */
+export function useGroupExpansion(
+  defaultExpanded: boolean,
+  isForceExpanded?: boolean,
+): [boolean, (expanded: boolean) => void] {
+  const [browseExpanded, setBrowseExpanded] = useState(defaultExpanded);
+  const [searchExpanded, setSearchExpanded] = useState<boolean | null>(null);
+
+  // Reset during render rather than in an effect — this is the "adjust state
+  // when a prop changes" case, and an effect would render the stale override
+  // for a frame first.
+  const [lastForced, setLastForced] = useState(isForceExpanded);
+  if (lastForced !== isForceExpanded) {
+    setLastForced(isForceExpanded);
+    setSearchExpanded(null);
+  }
+
+  const expanded = isForceExpanded ? (searchExpanded ?? true) : browseExpanded;
+
+  // Read through a ref so the setter keeps a stable identity: callers hold it
+  // in `useCallback([])` and in effect deps, and a fresh function each render
+  // would either go stale or retrigger them.
+  const forcedRef = useRef(isForceExpanded);
+  useEffect(() => {
+    forcedRef.current = isForceExpanded;
+  }, [isForceExpanded]);
+  const setExpanded = useCallback((next: boolean) => {
+    if (forcedRef.current) {
+      setSearchExpanded(next);
+    } else {
+      setBrowseExpanded(next);
+    }
+  }, []);
+
+  return [expanded, setExpanded];
+}

From 9f6702704173e4ad2f2d0741d7cf63c8e2dfb10a Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Tue, 22 Sep 2026 10:46:35 -0700
Subject: [PATCH 7/8] test: cover the search expansion override

---
 .../__tests__/useGroupExpansion.test.ts       | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts

diff --git a/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts b/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts
new file mode 100644
index 0000000000..ec29cd1303
--- /dev/null
+++ b/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts
@@ -0,0 +1,78 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useGroupExpansion } from '@/components/DBSearchPageFilters/useGroupExpansion';
+
+const render = (defaultExpanded: boolean, isForceExpanded?: boolean) =>
+  renderHook(
+    (props: { defaultExpanded: boolean; isForceExpanded?: boolean }) =>
+      useGroupExpansion(props.defaultExpanded, props.isForceExpanded),
+    { initialProps: { defaultExpanded, isForceExpanded } },
+  );
+
+describe('useGroupExpansion', () => {
+  it('follows its own state when no search is active', () => {
+    const { result } = render(false);
+    expect(result.current[0]).toBe(false);
+
+    act(() => result.current[1](true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('opens while a search forces it, and can still be closed', () => {
+    const { result, rerender } = render(false);
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+    expect(result.current[0]).toBe(true);
+
+    act(() => result.current[1](false));
+    expect(result.current[0]).toBe(false);
+
+    act(() => result.current[1](true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('restores the browse state when the search ends', () => {
+    const { result, rerender } = render(false);
+
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+    act(() => result.current[1](true));
+    expect(result.current[0]).toBe(true);
+
+    // Closing the search must not leave the group stuck open.
+    rerender({ defaultExpanded: false, isForceExpanded: false });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('leaves an expanded group expanded after a search closes it', () => {
+    const { result, rerender } = render(false);
+    act(() => result.current[1](true));
+
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+    act(() => result.current[1](false));
+    expect(result.current[0]).toBe(false);
+
+    rerender({ defaultExpanded: false, isForceExpanded: false });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('reopens on a fresh search after the previous one was closed', () => {
+    const { result, rerender } = render(false);
+
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+    act(() => result.current[1](false));
+    expect(result.current[0]).toBe(false);
+
+    rerender({ defaultExpanded: false, isForceExpanded: false });
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('keeps the setter identity stable so callers can memoize on it', () => {
+    const { result, rerender } = render(false);
+    const setter = result.current[1];
+
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+    act(() => result.current[1](false));
+
+    expect(result.current[1]).toBe(setter);
+  });
+});

From 55ded361d3f7fbd5bc94415b8dfeef861e21c4d4 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Wed, 23 Sep 2026 13:32:16 -0700
Subject: [PATCH 8/8] fix: keep a group expanded when it is filtered during a
 search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting a value while searching flips the group's default-expansion
signal true, and that effect ran through the mode-routing setter — so during
a search it wrote the override instead of the browse state. Clearing the
search then dropped the override and fell back to a browse state that had
never been updated, collapsing the group the user had just filtered on.

That is the feature's main path (search, apply, clear), not a corner.

The default-expansion signal now goes through `expandBrowse`, which always
targets the browse state. The user's own toggles keep routing by mode, so a
group closed during a search still stays closed for that search.
---
 packages/app/src/components/DBSearchPageFilters.tsx  |  6 +++---
 .../__tests__/useGroupExpansion.test.ts              | 12 ++++++++++++
 .../DBSearchPageFilters/useGroupExpansion.ts         | 11 +++++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 9fa2a358c9..b800fbd3de 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -918,7 +918,7 @@ export const FilterGroup = ({
   distributionKey,
   onRangeChange,
 }: FilterGroupProps) => {
-  const [expanded, setExpanded] = useGroupExpansion(
+  const [expanded, setExpanded, expandBrowse] = useGroupExpansion(
     isDefaultExpanded ?? false,
     isForceExpanded,
   );
@@ -947,9 +947,9 @@ export const FilterGroup = ({
 
   useEffect(() => {
     if (isDefaultExpanded) {
-      setExpanded(true);
+      expandBrowse();
     }
-  }, [isDefaultExpanded, setExpanded]);
+  }, [isDefaultExpanded, expandBrowse]);
 
   const totalAppliedFiltersSize =
     selectedValues.included.size +
diff --git a/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts b/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts
index ec29cd1303..635e07d19c 100644
--- a/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts
+++ b/packages/app/src/components/DBSearchPageFilters/__tests__/useGroupExpansion.test.ts
@@ -66,6 +66,18 @@ describe('useGroupExpansion', () => {
     expect(result.current[0]).toBe(true);
   });
 
+  it('keeps a default-expansion signal raised during a search', () => {
+    const { result, rerender } = render(false);
+    rerender({ defaultExpanded: false, isForceExpanded: true });
+
+    // The group gains a selection mid-search, so the caller's
+    // default-expansion effect fires. That describes the browse state.
+    act(() => result.current[2]());
+
+    rerender({ defaultExpanded: true, isForceExpanded: false });
+    expect(result.current[0]).toBe(true);
+  });
+
   it('keeps the setter identity stable so callers can memoize on it', () => {
     const { result, rerender } = render(false);
     const setter = result.current[1];
diff --git a/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts b/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts
index 1a0cec2798..631e98456d 100644
--- a/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts
+++ b/packages/app/src/components/DBSearchPageFilters/useGroupExpansion.ts
@@ -11,11 +11,16 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  *
  * The override resets whenever a search starts or ends, so each search begins
  * from "matches are visible" again.
+ *
+ * `expandBrowse` is for the caller's default-expansion signal — a group gaining
+ * a selection or a pin. That describes the browse state, so it has to bypass
+ * the override: routing it through `setExpanded` during a search would leave
+ * the browse state stale and collapse the group the moment the search cleared.
  */
 export function useGroupExpansion(
   defaultExpanded: boolean,
   isForceExpanded?: boolean,
-): [boolean, (expanded: boolean) => void] {
+): [boolean, (expanded: boolean) => void, () => void] {
   const [browseExpanded, setBrowseExpanded] = useState(defaultExpanded);
   const [searchExpanded, setSearchExpanded] = useState<boolean | null>(null);
 
@@ -45,5 +50,7 @@ export function useGroupExpansion(
     }
   }, []);
 
-  return [expanded, setExpanded];
+  const expandBrowse = useCallback(() => setBrowseExpanded(true), []);
+
+  return [expanded, setExpanded, expandBrowse];
 }