Implementation:Apache Druid ContainsFilterControl

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

Overview

ContainsFilterControl is a memoized React component that provides a text input for specifying a "contains" string filter with a live preview of matching values.

Description

The component renders an InputGroup where the user types a search string to create a contains filter pattern on a specific column. It uses the useQueryManager hook to execute a debounced preview query against the data source, showing up to 101 matching values cast to VARCHAR and ordered by count descending. The preview updates reactively as the user modifies the contains string, with loading and error states displayed inline.

Usage

Used within the FilterMenu component of the Explore view's filter pane when the user selects a "contains" filter type. It provides the control interface for configuring substring-based column filters.

Code Reference

Source Location

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

Signature

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

export const ContainsFilterControl = React.memo(
  function ContainsFilterControl(props: ContainsFilterControlProps): JSX.Element
);

Import

import { ContainsFilterControl } from './views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-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	ContainsFilterPattern	Yes	The current contains filter pattern with column, negated, and contains fields
setFilterPattern	(filterPattern: ContainsFilterPattern) => void	Yes	Callback to update the contains 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 text input with a live preview list of matching column values

Usage Examples

Contains Filter in Filter Menu

<ContainsFilterControl
  querySource={querySource}
  extraFilter={extraFilter}
  filter={otherFilters}
  filterPattern={{ type: 'contains', column: 'city', negated: false, contains: '' }}
  setFilterPattern={setFilterPattern}
  runSqlQuery={runSqlQuery}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development