Implementation:Apache Druid RegexpFilterControl

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

Overview

RegexpFilterControl is a memoized React component that provides a regular expression input for configuring regexp-based column filters with a live preview of matching values.

Description

The component renders an InputGroup for entering a regular expression pattern and a preview pane showing matching values. It validates the entered regexp client-side using JavaScript's RegExp constructor and displays a validation error message if the pattern is invalid. When the regexp is valid, a debounced preview query is executed against the data source via useQueryManager, showing up to 101 matching values cast to VARCHAR and ordered by count descending. Loading and error states are displayed inline in the preview list.

Usage

Used within the FilterMenu component of the Explore view's filter pane when the user selects a "regexp" filter type. It provides the control interface for configuring regular expression column filters.

Code Reference

Source Location

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

Signature

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

export const RegexpFilterControl = React.memo(
  function RegexpFilterControl(props: RegexpFilterControlProps): JSX.Element
);

Import

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

I/O Contract

Inputs

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

Outputs

Name	Type	Description
JSX.Element	ReactElement	A regexp input with client-side validation and a live preview list of matching values

Usage Examples

Regexp Filter in Filter Menu

<RegexpFilterControl
  querySource={querySource}
  extraFilter={extraFilter}
  filter={otherFilters}
  filterPattern={{ type: 'regexp', column: 'url', negated: false, regexp: '' }}
  setFilterPattern={setFilterPattern}
  runSqlQuery={runSqlQuery}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development