Implementation:Apache Druid MeasureMenu

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

Overview

MeasureMenu is a React component that provides a tabbed interface for selecting, composing, or writing custom SQL measure expressions in the explore view.

Description

The MeasureMenu component presents three tabs -- "Saved", "Compose", and "SQL" -- allowing users to pick from pre-defined measures, build measures by selecting an aggregate function and column, or write raw SQL expressions. It manages internal state for the selected tab, output name, measure pattern, and SQL formula, and validates user input before emitting a finalized Measure object. The component also supports an optional action to add the composed measure directly to the source query.

Usage

This component is rendered as a popover menu when users interact with measure selection controls in the explore view's ControlPane. It is displayed whenever a user needs to add or modify a measure for a visualization module.

Code Reference

Source Location

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

Signature

export interface MeasureMenuProps {
  columns: readonly Column[];
  measures: readonly Measure[];
  initMeasure: Measure | undefined;
  disabledMeasureNames?: string[];
  onSelectMeasure(measure: Measure): void;
  onClose(): void;
  onAddToSourceQueryAsMeasure?(measure: Measure): void;
}

export const MeasureMenu = function MeasureMenu(props: MeasureMenuProps): JSX.Element;

Import

import { MeasureMenu } from './views/explore-view/components/control-pane/measure-menu';

I/O Contract

Inputs

Name	Type	Required	Description
columns	readonly Column[]	Yes	Available columns for composing measures
measures	readonly Measure[]	Yes	Pre-defined saved measures to show in the Saved tab
initMeasure	undefined	No	Initial measure to populate the menu state with
disabledMeasureNames	string[]	No	Names of measures that should be grayed out / disabled in the Saved tab
onSelectMeasure	(measure: Measure) => void	Yes	Callback invoked when the user selects or applies a measure
onClose	() => void	Yes	Callback invoked when the menu should close
onAddToSourceQueryAsMeasure	(measure: Measure) => void	No	Optional callback to add the measure directly to the source query

Outputs

Name	Type	Description
Measure (via callback)	Measure	The selected or composed measure, emitted through onSelectMeasure

Usage Examples

Rendering a MeasureMenu with saved measures

<MeasureMenu
  columns={querySource.columns}
  measures={availableMeasures}
  initMeasure={currentMeasure}
  disabledMeasureNames={['Count']}
  onSelectMeasure={(measure) => {
    setParameterValues({ measure });
  }}
  onClose={() => setMenuOpen(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development