Implementation:Apache Druid NestedColumnDialog

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

Overview

NestedColumnDialog is a memoized React component that provides a dialog for expanding a nested (JSON) column into multiple derived columns by selecting JSON paths.

Description

The component queries the data source to discover available JSON paths within a nested column using ARRAY_CONCAT_AGG(DISTINCT, JSON_PATHS(...)), limited to the last 14 days of data for performance. Discovered paths are displayed in a searchable, checkable list where users can select individual paths or use "Select all" / "Select none" buttons. A naming scheme input (using % as a placeholder for the path) controls the output column names. On apply, the selected paths are expanded into JSON_VALUE expressions and inserted after the original nested column in the query source.

Usage

Opened from the resource pane in the Explore view when the user wants to expand a nested/complex column (e.g., a JSON column) into individual typed columns based on discovered JSON paths.

Code Reference

Source Location

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

Signature

export interface NestedColumnDialogProps {
  nestedColumn: SqlExpression;
  onApply(newQuery: SqlQuery): void;
  querySource: QuerySource;
  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
  onClose(): void;
}

export const NestedColumnDialog = React.memo(
  function NestedColumnDialog(props: NestedColumnDialogProps): JSX.Element
);

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
nestedColumn	SqlExpression	Yes	The SQL expression representing the nested column to expand
onApply	(newQuery: SqlQuery) => void	Yes	Callback invoked with the modified query containing the expanded path columns
querySource	QuerySource	Yes	The current query source for base query construction and column management
runSqlQuery	(query: string or SqlQuery) => Promise<QueryResult>	Yes	Function to execute SQL queries for path discovery
onClose	() => void	Yes	Callback to close the dialog

Outputs

Name	Type	Description
JSX.Element	ReactElement	A dialog with path discovery, naming scheme input, searchable path selection, and apply/cancel buttons

Usage Examples

Expand Nested JSON Column

<NestedColumnDialog
  nestedColumn={SqlExpression.parse('"event_payload"')}
  onApply={(newQuery) => updateQuerySource(newQuery)}
  querySource={querySource}
  runSqlQuery={runSqlQuery}
  onClose={() => setNestedDialogOpen(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development