Implementation:Apache Druid ExpressionEditorDialog

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

Overview

A React dialog component for editing SQL expressions with an optional output name field, used in the SQL Data Loader view.

Description

The ExpressionEditorDialog component renders a BlueprintJS Dialog containing a FlexibleQueryInput code editor for entering SQL expressions and an optional output name input field. The dialog manages local state for both the formula text and the output name, parsing the formula in real-time via SqlExpression.maybeParse to validate it. The Save button is disabled until the expression parses successfully. On save, the parsed expression is optionally aliased with the output name if it differs from the current one. The dialog also supports a Delete action for removing existing expressions.

Usage

Used in the SQL Data Loader view's schema step when users need to create or edit column expressions, dimension transforms, or metric aggregations by writing SQL expressions with an interactive code editor.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.tsx
• Lines: 1-109

Signature

interface ExpressionEditorDialogProps {
  title?: string;
  includeOutputName?: boolean;
  expression?: SqlExpression;
  onSave(expression: SqlExpression): void;
  onDelete?(): void;
  onClose(): void;
}

export const ExpressionEditorDialog = React.memo(
  function ExpressionEditorDialog(props: ExpressionEditorDialogProps)
);

Import

import { ExpressionEditorDialog } from './expression-editor-dialog/expression-editor-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
title	string	No	Custom dialog title; defaults to "Edit expression"
includeOutputName	boolean	No	Whether to show the output name input field for aliasing the expression
expression	SqlExpression	No	The existing SQL expression to edit; used to initialize the formula and output name fields
onSave	(expression: SqlExpression) => void	Yes	Callback invoked with the parsed (and optionally aliased) SQL expression when the user clicks Save
onDelete	() => void	No	Callback invoked when the user clicks Delete; if not provided, the Delete button is hidden
onClose	() => void	Yes	Callback invoked when the dialog is closed via Cancel, Save, or Delete

Outputs

Name	Type	Description
Rendered dialog	JSX.Element	A modal dialog with a SQL expression editor, optional output name field, and Save/Delete/Close action buttons

Usage Examples

Opening the expression editor for a new expression

<ExpressionEditorDialog
  title="Add dimension expression"
  includeOutputName
  onSave={newExpression => addColumnExpression(newExpression)}
  onClose={() => setDialogOpen(false)}
/>

Editing an existing expression with delete support

<ExpressionEditorDialog
  title="Edit metric"
  includeOutputName
  expression={existingExpression}
  onSave={updatedExpression => updateColumn(columnIndex, updatedExpression)}
  onDelete={() => removeColumn(columnIndex)}
  onClose={() => setDialogOpen(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development