Implementation:Apache Druid FilterMenu

Knowledge Sources	Apache Druid
Domains	Visual_Exploration, Data_Filtering
Last Updated	2026-02-10 00:00 GMT

Overview

Concrete React component for building WHERE clause filter conditions through form-based interactions in the Explore view.

Description

The FilterMenu component (460 lines) renders a form-based filter editor that creates FilterPattern objects. It supports multiple filter types (contains, regex, values, comparison, timeRelative, custom) and converts each to a SqlExpression for the query's WHERE clause.

The component uses druid-query-toolkit expressions (SqlComparison, C, F, L) to construct type-safe SQL expressions. No direct API calls are made — filters are stored in the ExploreState and applied when queries execute.

Usage

Render this component in the Explore view's FilterPane when the user adds or edits a filter condition.

Code Reference

Source Location

Repository: Apache Druid
File: web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
Lines: L1-L460

Signature

interface FilterMenuProps {
  querySource: QuerySource;
  filter: SqlExpression;
  filterPattern: FilterPattern;
  onPatternChange(pattern: FilterPattern): void;
  onClose(): void;
}

export const FilterMenu = React.memo(function FilterMenu(
  props: FilterMenuProps,
): JSX.Element {
  // 460-line filter editor with multiple filter types
});

Import

import { FilterMenu } from './filter-menu/filter-menu';

I/O Contract

Inputs

Name	Type	Required	Description
querySource	QuerySource	Yes	Available columns for filter selection
filter	SqlExpression	Yes	Current WHERE clause expression
filterPattern	FilterPattern	Yes	Current filter pattern being edited
onPatternChange	callback	Yes	Called when filter condition changes

Outputs

Name	Type	Description
FilterPattern	via callback	Updated filter condition (contains, regex, values, comparison, etc.)

Usage Examples

Creating a Filter

<FilterMenu
  querySource={querySource}
  filter={currentWhere}
  filterPattern={{ type: 'values', column: 'country', values: ['US', 'UK'] }}
  onPatternChange={(pattern) => {
    // pattern = { type: 'values', column: 'country', values: ['US', 'UK', 'CA'] }
    // Converts to SQL: "country" IN ('US', 'UK', 'CA')
    updateFilter(pattern);
  }}
  onClose={() => setFilterOpen(false)}
/>

Related Pages

Implements Principle

Principle:Apache_Druid_Visual_Filter_Configuration

Requires Environment

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment