Implementation:Apache Druid FilterPane

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

Overview

FilterPane is a React component (using forwardRef) that renders an interactive filter bar with filter pills, each representing an active filter pattern that can be edited, removed, or added.

Description

The component decomposes the current filter SqlExpression into individual filter patterns using fitFilterPatterns. Each pattern is displayed as a "filter pill" with a text button showing the formatted pattern and a remove button. Clicking a pill opens a FilterMenu Popover for editing the pattern. An "Add filter" button at the end opens a FilterMenu for creating new filters. The component also supports drag-and-drop via DroppableContainer (columns can be dropped to create filters) and exposes a filterOn imperative method via useImperativeHandle. For time-relative filters, it computes and resolves time bounds via a background SQL query.

Usage

Rendered as the filter bar in the Explore view, typically below the header and above the main content modules. It manages all active filter patterns for the current exploration query and supports programmatic filtering via its imperative handle.

Code Reference

Source Location

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

Signature

export interface FilterPaneProps {
  querySource: QuerySource | undefined;
  extraFilter: SqlExpression;
  timezone: Timezone;
  filter: SqlExpression;
  onFilterChange(filter: SqlExpression): void;
  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): Promise<QueryResult>;
  onAddToSourceQueryAsColumn?: (expression: SqlExpression) => void;
  onMoveToSourceQueryAsClause?: (expression: SqlExpression, changeWhere?: SqlExpression) => void;
}

export const FilterPane = forwardRef(
  function FilterPane(props: FilterPaneProps, ref): JSX.Element
);

Import

import { FilterPane } from './views/explore-view/components/filter-pane/filter-pane';

I/O Contract

Inputs

Name	Type	Required	Description
querySource	QuerySource or undefined	Yes	The current query source; when undefined, filter editing is disabled
extraFilter	SqlExpression	Yes	Additional filter expression applied alongside the main filter
timezone	Timezone	Yes	The current timezone for formatting time-based filter patterns
filter	SqlExpression	Yes	The current composed filter SQL expression
onFilterChange	(filter: SqlExpression) => void	Yes	Callback invoked when the filter changes (add, edit, or remove)
runSqlQuery	(query: string or SqlQuery, signal?: AbortSignal) => Promise<QueryResult>	Yes	Function to execute SQL queries for filter controls and time bounds
onAddToSourceQueryAsColumn	(expression: SqlExpression) => void	No	Optional callback to add a filter expression as a source query column
onMoveToSourceQueryAsClause	(expression: SqlExpression, changeWhere?: SqlExpression) => void	No	Optional callback to move a filter into the source query as a WHERE clause

Outputs

Name	Type	Description
JSX.Element	ReactElement	A filter bar with interactive filter pills, add button, and drag-and-drop support
ref.filterOn	(column: Column) => void	Imperative method to programmatically filter on a given column

Usage Examples

Filter Pane with Ref

const filterPaneRef = useRef();

<FilterPane
  ref={filterPaneRef}
  querySource={querySource}
  extraFilter={SqlExpression.TRUE}
  timezone={timezone}
  filter={currentFilter}
  onFilterChange={setFilter}
  runSqlQuery={runSqlQuery}
/>

// Programmatically filter on a column
filterPaneRef.current?.filterOn(column);

Related Pages

• Environment:Apache_Druid_Web_Console_Development