Implementation:Apache Druid TimeRelativeFilterControl

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

Overview

TimeRelativeFilterControl is a memoized React component that provides a button-group interface for selecting predefined relative time ranges as filter patterns.

Description

The component organizes time range options into three groups -- "Latest" (relative to max data time), "Current" (ceil-aligned to current timestamp), and "Previous" (floor-aligned to current timestamp) -- each with durations of Hour, Day, Week, Month, and Year. Users click buttons to select a time range, and the active button is highlighted based on matching the current filter pattern's key. When optional time bounds are provided, the resolved date range is displayed in a Callout at the bottom using formatted ISO date strings.

Usage

Used within the FilterMenu component of the Explore view's filter pane when the user configures a time-relative filter on a timestamp column. It provides quick-select buttons for common relative time ranges.

Code Reference

Source Location

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

Signature

export interface TimeRelativeFilterControlProps {
  querySource: QuerySource;
  filterPattern: TimeRelativeFilterPattern;
  setFilterPattern(filterPattern: TimeRelativeFilterPattern): void;
  timeBounds?: [Date, Date];
}

export const TimeRelativeFilterControl = React.memo(
  function TimeRelativeFilterControl(props: TimeRelativeFilterControlProps): JSX.Element
);

Import

import { TimeRelativeFilterControl } from './views/explore-view/components/filter-pane/filter-menu/time-relative-filter-control/time-relative-filter-control';

I/O Contract

Inputs

Name	Type	Required	Description
querySource	QuerySource	Yes	The current query source (used for context)
filterPattern	TimeRelativeFilterPattern	Yes	The current time-relative filter pattern with column, negated, anchor, rangeDuration, and alignment fields
setFilterPattern	(filterPattern: TimeRelativeFilterPattern) => void	Yes	Callback to update the filter pattern when a time range button is clicked
timeBounds	[Date, Date]	No	Optional resolved time bounds to display as a formatted date range

Outputs

Name	Type	Description
JSX.Element	ReactElement	Grouped button bars for Latest, Current, and Previous time ranges with optional time bounds display

Usage Examples

Time Relative Filter with Bounds

<TimeRelativeFilterControl
  querySource={querySource}
  filterPattern={{
    type: 'timeRelative',
    column: '__time',
    negated: false,
    anchor: 'maxDataTime',
    rangeDuration: 'P1D',
    startBound: '[',
    endBound: ')',
  }}
  setFilterPattern={setFilterPattern}
  timeBounds={[new Date('2024-01-01'), new Date('2024-01-02')]}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development