Implementation:Apache Druid MeasureDialog

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

Overview

MeasureDialog is a memoized React component that provides a dialog for creating, editing, or duplicating aggregate measure definitions in the Explore view's resource pane.

Description

The component renders a BlueprintJS Dialog with a name input, a SQL expression editor (SqlInput with aggregate function support enabled), and a PreviewPane that shows the overall computed value for the measure expression. It validates that the name is non-empty, not already in use (with auto-rename suggestions), and that the SQL formula parses correctly. On apply, it creates a Measure object and either adds a new measure, updates an existing one (with rename tracking), or duplicates a measure after the specified position.

Usage

Opened from the resource pane in the Explore view when the user clicks to add, edit, or duplicate a measure. It provides the full measure definition workflow including aggregate SQL expression editing and live value preview.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/resource-pane/measure-dialog/measure-dialog.tsx
• Lines: 1-173

Signature

export interface MeasureDialogProps {
  initMeasure: Measure | undefined;
  measureToDuplicate?: string;
  onApply(newQuery: SqlQuery, rename: Rename | undefined): void;
  querySource: QuerySource;
  where: SqlExpression;
  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
  onClose(): void;
}

export const MeasureDialog = React.memo(
  function MeasureDialog(props: MeasureDialogProps): JSX.Element
);

Import

import { MeasureDialog } from './views/explore-view/components/resource-pane/measure-dialog/measure-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
initMeasure	Measure or undefined	Yes	The initial Measure object for editing; undefined when adding a new measure
measureToDuplicate	string	No	Name of the measure after which to insert the duplicate
onApply	(newQuery: SqlQuery, rename: Rename or undefined) => void	Yes	Callback invoked with the modified query and optional rename mapping on apply
querySource	QuerySource	Yes	The current query source for name validation and query modification
where	SqlExpression	Yes	The current WHERE expression used for preview query filtering
runSqlQuery	(query: string or SqlQuery) => Promise<QueryResult>	Yes	Function to execute SQL queries for the preview pane
onClose	() => void	Yes	Callback to close the dialog

Outputs

Name	Type	Description
JSX.Element	ReactElement	A dialog with name input, aggregate SQL expression editor, overall value preview, and apply/cancel buttons

Usage Examples

Add New Measure

<MeasureDialog
  initMeasure={undefined}
  onApply={(newQuery, rename) => updateQuerySource(newQuery, rename)}
  querySource={querySource}
  where={currentWhere}
  runSqlQuery={runSqlQuery}
  onClose={() => setMeasureDialogOpen(false)}
/>

Edit Existing Measure

<MeasureDialog
  initMeasure={existingMeasure}
  onApply={(newQuery, rename) => updateQuerySource(newQuery, rename)}
  querySource={querySource}
  where={currentWhere}
  runSqlQuery={runSqlQuery}
  onClose={() => setMeasureDialogOpen(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development