Implementation:Apache Druid ExpressionMenu

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

Overview

ExpressionMenu is a React component that provides a dual-tab interface for selecting or composing SQL expressions within the Explore view.

Description

The component presents two tabs: "Select" for picking an existing column from a list, and "SQL" for entering a custom SQL expression via the SqlInput editor. In SQL mode, users can name the output expression and optionally add it as a column to the source query. The component validates the SQL formula before applying and shows error toasts for invalid input.

Usage

Used within the control pane of the Explore view when users need to define or modify expressions for show columns or measures. It is typically rendered inside a Popover attached to an expression tag.

Code Reference

Source Location

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

Signature

export interface ExpressionMenuProps {
  columns: readonly Column[];
  initExpression: ExpressionMeta | undefined;
  onSelectExpression(measure: ExpressionMeta): void;
  disabledColumnNames?: readonly string[];
  onClose(): void;
  onAddToSourceQueryAsColumn?(expression: SqlExpression): void;
}

export const ExpressionMenu = function ExpressionMenu(props: ExpressionMenuProps): JSX.Element;

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
columns	readonly Column[]	Yes	Available columns for selection in the "Select" tab
initExpression	ExpressionMeta or undefined	Yes	The initial expression to populate the menu, or undefined for a new expression
onSelectExpression	(measure: ExpressionMeta) => void	Yes	Callback invoked when an expression is selected or applied
disabledColumnNames	readonly string[]	No	Column names that should appear disabled in the select list
onClose	() => void	Yes	Callback to close the menu
onAddToSourceQueryAsColumn	(expression: SqlExpression) => void	No	Optional callback to add the expression as a column to the source query

Outputs

Name	Type	Description
JSX.Element	ReactElement	A tabbed menu with column selection and SQL expression editor

Usage Examples

Expression Menu for Column Selection

<ExpressionMenu
  columns={querySource.columns}
  initExpression={currentExpression}
  onSelectExpression={(expr) => handleExpressionChange(expr)}
  onClose={() => setMenuOpen(false)}
/>

Expression Menu with Source Query Integration

<ExpressionMenu
  columns={querySource.columns}
  initExpression={undefined}
  onSelectExpression={(expr) => addExpression(expr)}
  disabledColumnNames={usedColumnNames}
  onClose={() => setMenuOpen(false)}
  onAddToSourceQueryAsColumn={(expr) => querySource.addColumn(expr)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development