feat: Add conditions to Dashboard filters; Support filter multi-select (#1969)

## Summary

This PR improves dashboard filters

1. Dashboard filters can now have an associated WHERE condition which filters the rows from which filter values will be queried.
2. Multiple values can now be selected for a single dashboard filter

### Screenshots or video

Multiple values can now be selected for a single filters:

<img width="544" height="77" alt="Screenshot 2026-03-23 at 12 31 02 PM" src="https://github.com/user-attachments/assets/2390a2d7-8514-4eb8-ac3c-db102a5df99b" />

Filters now have an optional condition, which filters the values which show up in the dropdown:

<img width="451" height="476" alt="Screenshot 2026-03-23 at 12 30 44 PM" src="https://github.com/user-attachments/assets/eed7f69e-466e-42fd-93f1-c27bfbc06204" />

<img width="265" height="94" alt="Screenshot 2026-03-23 at 12 30 54 PM" src="https://github.com/user-attachments/assets/2ba46e33-a44a-45ea-a6bf-fb71f5373e46" />

This also applies to Preset Dashboard Filters

<img width="726" height="908" alt="Screenshot 2026-03-23 at 12 33 34 PM" src="https://github.com/user-attachments/assets/df648feb-32e2-4f5e-80e5-409e0443b38e" />

### How to test locally or on Vercel

This can be partially tested in the preview environment, but testing the following requires running locally

1. Preset dashboard filters
2. External API support

### References



- Linear Issue: Closes HDX-3631 Closes HDX-2987
- Related PRs:

Author: pulpdrew

.changeset/lemon-gifts-suffer.md

@@ -0,0 +1,7 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+feat: Add conditions to Dashboard filters; Support filter multi-select

packages/api/openapi.json

@@ -1838,6 +1838,21 @@
             ],
             "description": "Metric type when source is metrics",
             "example": "gauge"
+          },
+          "where": {
+            "type": "string",
+            "description": "Optional WHERE condition to scope which rows this filter key reads values from",
+            "example": "ServiceName:api"
+          },
+          "whereLanguage": {
+            "type": "string",
+            "enum": [
+              "sql",
+              "lucene"
+            ],
+            "description": "Language of the where condition",
+            "default": "sql",
+            "example": "lucene"
           }
         }
       },

packages/api/src/models/presetDashboardFilter.ts

@@ -42,6 +42,12 @@ const PresetDashboardFilterSchema = new Schema<IPresetDashboardFilter>(
     },
     type: { type: String, required: true },
     expression: { type: String, required: true },
+    where: { type: String, required: false },
+    whereLanguage: {
+      type: String,
+      required: false,
+      enum: ['sql', 'lucene'],
+    },
   },
   {
     timestamps: true,

packages/api/src/routers/external-api/__tests__/dashboards.test.ts

@@ -848,14 +848,22 @@ describe('External API v2 Dashboards - old format', () => {
             sourceId: traceSource._id.toString(),
             sourceMetricType: undefined,
           },
+          {
+            type: 'QUERY_EXPRESSION' as const,
+            name: 'Region (Filtered)',
+            expression: 'region',
+            sourceId: traceSource._id.toString(),
+            where: "environment = 'production'",
+            whereLanguage: 'sql' as const,
+          },
         ],
       };
 
       const response = await authRequest('post', BASE_URL)
         .send(dashboardPayload)
         .expect(200);
 
-      expect(response.body.data.filters).toHaveLength(2);
+      expect(response.body.data.filters).toHaveLength(3);
       response.body.data.filters.forEach(
         (f: {
           id: string;
@@ -879,12 +887,18 @@ describe('External API v2 Dashboards - old format', () => {
       expect(response.body.data.filters[0].expression).toBe('environment');
       expect(response.body.data.filters[1].name).toBe('Service Filter');
       expect(response.body.data.filters[1].expression).toBe('service_name');
+      expect(response.body.data.filters[2].name).toBe('Region (Filtered)');
+      expect(response.body.data.filters[2].expression).toBe('region');
+      expect(response.body.data.filters[2].where).toBe(
+        "environment = 'production'",
+      );
+      expect(response.body.data.filters[2].whereLanguage).toBe('sql');
 
       const getResponse = await authRequest(
         'get',
         `${BASE_URL}/${response.body.data.id}`,
       ).expect(200);
-      expect(getResponse.body.data.filters).toHaveLength(2);
+      expect(getResponse.body.data.filters).toHaveLength(3);
       expect(getResponse.body.data.filters).toEqual(response.body.data.filters);
     });
 
@@ -2519,14 +2533,22 @@ describe('External API v2 Dashboards - new format', () => {
             sourceId: traceSource._id.toString(),
             sourceMetricType: undefined,
           },
+          {
+            type: 'QUERY_EXPRESSION' as const,
+            name: 'Region (Filtered)',
+            expression: 'region',
+            sourceId: traceSource._id.toString(),
+            where: "environment = 'production'",
+            whereLanguage: 'sql' as const,
+          },
         ],
       };
 
       const response = await authRequest('post', BASE_URL)
         .send(dashboardPayload)
         .expect(200);
 
-      expect(response.body.data.filters).toHaveLength(2);
+      expect(response.body.data.filters).toHaveLength(3);
       response.body.data.filters.forEach(
         (f: {
           id: string;
@@ -2550,12 +2572,18 @@ describe('External API v2 Dashboards - new format', () => {
       expect(response.body.data.filters[0].expression).toBe('environment');
       expect(response.body.data.filters[1].name).toBe('Service Filter');
       expect(response.body.data.filters[1].expression).toBe('service_name');
+      expect(response.body.data.filters[2].name).toBe('Region (Filtered)');
+      expect(response.body.data.filters[2].expression).toBe('region');
+      expect(response.body.data.filters[2].where).toBe(
+        "environment = 'production'",
+      );
+      expect(response.body.data.filters[2].whereLanguage).toBe('sql');
 
       const getResponse = await authRequest(
         'get',
         `${BASE_URL}/${response.body.data.id}`,
       ).expect(200);
-      expect(getResponse.body.data.filters).toHaveLength(2);
+      expect(getResponse.body.data.filters).toHaveLength(3);
       expect(getResponse.body.data.filters).toEqual(response.body.data.filters);
     });
 

packages/api/src/routers/external-api/v2/dashboards.ts

@@ -1156,6 +1156,16 @@ const updateDashboardBodySchema = buildDashboardBodySchema(
  *           enum: [sum, gauge, histogram, summary, exponential histogram]
  *           description: Metric type when source is metrics
  *           example: "gauge"
+ *         where:
+ *           type: string
+ *           description: Optional WHERE condition to scope which rows this filter key reads values from
+ *           example: "ServiceName:api"
+ *         whereLanguage:
+ *           type: string
+ *           enum: [sql, lucene]
+ *           description: Language of the where condition
+ *           default: "sql"
+ *           example: "lucene"
  *
  *     Filter:
  *       allOf:

packages/app/src/DashboardFilters.tsx

@@ -1,14 +1,14 @@
 import { DashboardFilter } from '@hyperdx/common-utils/dist/types';
-import { Group, Select } from '@mantine/core';
+import { Group, MultiSelect } from '@mantine/core';
 import { IconRefresh } from '@tabler/icons-react';
 
 import { useDashboardFilterValues } from './hooks/useDashboardFilterValues';
 import { FilterState } from './searchFilters';
 
 interface DashboardFilterSelectProps {
   filter: DashboardFilter;
-  onChange: (value: string | null) => void;
-  value?: string | null;
+  onChange: (values: string[]) => void;
+  value: string[];
   values?: string[];
   isLoading?: boolean;
 }
@@ -26,18 +26,17 @@ const DashboardFilterSelect = ({
   }));
 
   return (
-    <Select
-      placeholder={filter.name}
-      value={value ?? null} // null clears the select, undefined makes the select uncontrolled
+    <MultiSelect
+      placeholder={value.length === 0 ? filter.name : undefined}
+      value={value}
       data={selectValues || []}
       searchable
       clearable
-      allowDeselect
       size="xs"
       maxDropdownHeight={280}
       disabled={isLoading}
       variant="filled"
-      w={200}
+      w={250}
       limit={20}
       onChange={onChange}
       data-testid={`dashboard-filter-select-${filter.name}`}
@@ -48,7 +47,7 @@ const DashboardFilterSelect = ({
 interface DashboardFilterProps {
   filters: DashboardFilter[];
   filterValues: FilterState;
-  onSetFilterValue: (expression: string, value: string | null) => void;
+  onSetFilterValue: (expression: string, values: string[]) => void;
   dateRange: [Date, Date];
 }
 
@@ -58,28 +57,27 @@ const DashboardFilters = ({
   filterValues,
   onSetFilterValue,
 }: DashboardFilterProps) => {
-  const { data: filterValuesBySource, isFetching } = useDashboardFilterValues({
+  const { data: filterValuesById, isFetching } = useDashboardFilterValues({
     filters,
     dateRange,
   });
 
   return (
-    <Group mt="sm">
+    <Group mt="sm" align="start">
       {Object.values(filters).map(filter => {
-        const queriedFilterValues = filterValuesBySource?.get(
-          filter.expression,
-        );
+        const queriedFilterValues = filterValuesById?.get(filter.id);
+        const included = filterValues[filter.expression]?.included;
+        const selectedValues = included
+          ? Array.from(included).map(v => v.toString())
+          : [];
         return (
           <DashboardFilterSelect
             key={filter.id}
             filter={filter}
             isLoading={!queriedFilterValues}
-            onChange={value => onSetFilterValue(filter.expression, value)}
+            onChange={values => onSetFilterValue(filter.expression, values)}
             values={queriedFilterValues?.values}
-            value={filterValues[filter.expression]?.included
-              .values()
-              .next()
-              .value?.toString()}
+            value={selectedValues}
           />
         );
       })}

packages/app/src/DashboardFiltersModal.tsx

@@ -31,6 +31,9 @@ import {
   IconTrash,
 } from '@tabler/icons-react';
 
+import SearchWhereInput, {
+  getStoredLanguage,
+} from '@/components/SearchInput/SearchWhereInput';
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 
 import SourceSchemaPreview from './components/SourceSchemaPreview';
@@ -40,7 +43,7 @@ import { getMetricTableName } from './utils';
 
 import styles from '../styles/DashboardFiltersModal.module.scss';
 
-const MODAL_SIZE = 'sm';
+const MODAL_SIZE = 'md';
 
 interface CustomInputWrapperProps {
   children: React.ReactNode;
@@ -97,11 +100,19 @@ const DashboardFilterEditForm = ({
 }: DashboardFilterEditFormProps) => {
   const { handleSubmit, register, formState, control, reset } =
     useForm<DashboardFilter>({
-      defaultValues: filter,
+      defaultValues: {
+        ...filter,
+        where: filter.where ?? '',
+        whereLanguage: filter.whereLanguage ?? getStoredLanguage() ?? 'sql',
+      },
     });
 
   useEffect(() => {
-    reset(filter);
+    reset({
+      ...filter,
+      where: filter.where ?? '',
+      whereLanguage: filter.whereLanguage ?? getStoredLanguage() ?? 'sql',
+    });
   }, [filter, reset]);
 
   const sourceId = useWatch({ control, name: 'source' });
@@ -134,7 +145,18 @@ const DashboardFilterEditForm = ({
       size={MODAL_SIZE}
     >
       <div ref={setModalContentRef}>
-        <form onSubmit={handleSubmit(onSave)}>
+        <form
+          onSubmit={handleSubmit(values => {
+            const trimmedWhere = values.where?.trim() ?? '';
+            onSave({
+              ...values,
+              where: trimmedWhere || undefined,
+              whereLanguage: trimmedWhere
+                ? (values.whereLanguage ?? 'sql')
+                : undefined,
+            });
+          })}
+        >
           <Stack>
             <CustomInputWrapper label="Name" error={formState.errors.name}>
               <TextInput
@@ -204,6 +226,22 @@ const DashboardFilterEditForm = ({
               />
             </CustomInputWrapper>
 
+            <CustomInputWrapper
+              label="Dropdown values filter"
+              tooltipText="Optional condition used to filter the rows from which available filter values are queried"
+            >
+              <SearchWhereInput
+                tableConnection={tableConnection}
+                control={control}
+                name="where"
+                languageName="whereLanguage"
+                showLabel={false}
+                allowMultiline={true}
+                sqlPlaceholder="Filter for dropdown values"
+                lucenePlaceholder="Filter for dropdown values"
+              />
+            </CustomInputWrapper>
+
             <Group justify="space-between" my="xs">
               <Button variant="secondary" onClick={onCancel}>
                 Cancel
@@ -394,6 +432,8 @@ const DashboardFiltersModal = ({
       name: '',
       expression: '',
       source: source?.id ?? '',
+      where: '',
+      whereLanguage: getStoredLanguage() ?? 'sql',
     });
   };