Implementation:Apache Druid ColumnDialog

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

Overview

ColumnDialog is a memoized React component that provides a dialog for creating, editing, or duplicating columns in the Explore view's resource pane using SQL expressions.

Description

The component renders a BlueprintJS Dialog with a name input, a SQL expression editor (SqlInput), and a PreviewPane that shows a live sample of values for the column expression. It validates that the name is non-empty, not already in use (offering an auto-rename suggestion), and that the SQL formula parses correctly. On apply, it either adds a new column, updates an existing column (with rename tracking), or duplicates a column after the specified position in the query source.

Usage

Opened from the resource pane in the Explore view when the user clicks to add a new column, edit an existing column definition, or duplicate a column. It provides the full column definition workflow with live preview.

Code Reference

Source Location

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

Signature

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

export const ColumnDialog = React.memo(
  function ColumnDialog(props: ColumnDialogProps): JSX.Element
);

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
initExpression	SqlExpression or undefined	Yes	The initial SQL expression for editing; undefined when adding a new column
columnToDuplicate	string	No	Name of the column 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 column 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, SQL expression editor, live preview, and apply/cancel buttons

Usage Examples

Add New Column

<ColumnDialog
  initExpression={undefined}
  onApply={(newQuery, rename) => updateQuerySource(newQuery, rename)}
  querySource={querySource}
  where={currentWhere}
  runSqlQuery={runSqlQuery}
  onClose={() => setColumnDialogOpen(false)}
/>

Edit Existing Column

<ColumnDialog
  initExpression={existingExpression}
  onApply={(newQuery, rename) => updateQuerySource(newQuery, rename)}
  querySource={querySource}
  where={currentWhere}
  runSqlQuery={runSqlQuery}
  onClose={() => setColumnDialogOpen(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development