Implementation:Apache Druid NamedExpressionsInput

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

Overview

NamedExpressionsInput is a generic React component that renders a tag-based input for managing an ordered list of named expressions or measures with drag-and-drop reordering support.

Description

The component displays each expression or measure as a BlueprintJS Tag within a tag input container. Users can click a tag to open a Popover with an item menu for editing, remove tags via the remove button, and add new items via a plus-icon tag. When allowReordering is enabled, tags support drag-and-drop to rearrange their order. The component is generic over types extending ExpressionMeta or Measure.

Usage

Used in the Explore view's control pane to manage the list of show columns (ExpressionMeta) and measures. It provides the visual tag input where users add, remove, reorder, and edit expressions that define the query shape.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/control-pane/named-expressions-input.tsx
• Lines: 1-158

Signature

export interface NamesExpressionsInputProps<M extends ExpressionMeta | Measure> {
  values: M[];
  onValuesChange(value: M[]): void;
  allowReordering?: boolean;
  singleton?: boolean;
  nonEmpty?: boolean;
  itemMenu: (item: M | undefined, onClose: () => void) => JSX.Element;
}

export const NamedExpressionsInput = function NamedExpressionsInput<
  M extends ExpressionMeta | Measure,
>(props: NamesExpressionsInputProps<M>): JSX.Element;

Import

import { NamedExpressionsInput } from './views/explore-view/components/control-pane/named-expressions-input';

I/O Contract

Inputs

Name	Type	Required	Description
values	M[]	Yes	The current array of expression or measure values to display as tags
onValuesChange	(value: M[]) => void	Yes	Callback invoked when the list of values changes (add, remove, or reorder)
allowReordering	boolean	No	Enables drag-and-drop reordering of tags
singleton	boolean	No	When true, hides the add button if one value already exists
nonEmpty	boolean	No	When true, prevents removing the last remaining tag
itemMenu	(item: M or undefined, onClose: () => void) => JSX.Element	Yes	Factory function returning the Popover content for editing an existing item or adding a new one (undefined)

Outputs

Name	Type	Description
JSX.Element	ReactElement	A tag input with interactive tags, remove buttons, drag-and-drop, and add functionality

Usage Examples

Managing Show Columns

<NamedExpressionsInput
  values={showColumns}
  onValuesChange={setShowColumns}
  allowReordering
  nonEmpty
  itemMenu={(item, onClose) => (
    <ExpressionMenu
      columns={querySource.columns}
      initExpression={item}
      onSelectExpression={(expr) => { handleExpressionSelect(expr); onClose(); }}
      onClose={onClose}
    />
  )}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development