Implementation:Apache Druid ValuesFilterControl

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Exploration
Last Updated	2026-02-10 10:00 GMT

Overview

ValuesFilterControl is a memoized React component that provides a multi-select value list for configuring inclusion or exclusion filters on a column.

Description

The component queries the data source for available column values using a debounced SQL query (via useQueryManager), displaying them in a selectable menu list. Users can toggle individual values to include or exclude them from the filter, with visual indicators showing selected (tick circle), excluded (delete icon), and unselected (circle) states. A search input filters the displayed values client-side using case-insensitive matching. Right-click context menus allow copying values as plain text or SQL literals. Alt-clicking a value selects it exclusively.

Usage

Used within the FilterMenu component of the Explore view's filter pane when the user selects a "values" filter type. It provides the multi-select interface for filtering by specific column values, supporting both inclusion and exclusion modes.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
• Lines: 1-133

Signature

export interface ValuesFilterControlProps {
  querySource: QuerySource;
  extraFilter: SqlExpression;
  filter: SqlExpression;
  filterPattern: ValuesFilterPattern;
  setFilterPattern(filterPattern: ValuesFilterPattern): void;
  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): Promise<QueryResult>;
}

export const ValuesFilterControl = React.memo(
  function ValuesFilterControl(props: ValuesFilterControlProps): JSX.Element
);

Import

import { ValuesFilterControl } from './views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control';

I/O Contract

Inputs

Name	Type	Required	Description
querySource	QuerySource	Yes	The current query source providing the base query for fetching values
extraFilter	SqlExpression	Yes	Additional filter expression applied alongside the main filter
filter	SqlExpression	Yes	The current overall filter expression (excluding this pattern)
filterPattern	ValuesFilterPattern	Yes	The current values filter pattern with column, negated, and values fields
setFilterPattern	(filterPattern: ValuesFilterPattern) => void	Yes	Callback to update the values filter pattern when selections change
runSqlQuery	(query: string or SqlQuery, signal?: AbortSignal) => Promise<QueryResult>	Yes	Function to execute SQL queries for fetching available values

Outputs

Name	Type	Description
JSX.Element	ReactElement	A searchable multi-select value list with inclusion/exclusion toggle and context menus

Usage Examples

Values Filter in Filter Menu

<ValuesFilterControl
  querySource={querySource}
  extraFilter={extraFilter}
  filter={otherFilters}
  filterPattern={{ type: 'values', column: 'country', negated: false, values: ['US', 'UK'] }}
  setFilterPattern={setFilterPattern}
  runSqlQuery={runSqlQuery}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development