Implementation:Apache Druid QueryParametersDialog

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

Overview

QueryParametersDialog is a React dialog component for managing dynamic positional query parameters used with Druid SQL ? placeholder syntax.

Description

The dialog allows users to add, edit, and remove typed query parameters that are bound positionally to ? placeholders in SQL queries. Each parameter has a type selector (VARCHAR, TIMESTAMP, BIGINT, DOUBLE, FLOAT, ARRAY) and a corresponding value input -- numeric inputs use FancyNumericInput for BIGINT/DOUBLE/FLOAT, a JSON array input for ARRAY type, and a text input for VARCHAR and TIMESTAMP types. Parameters are managed in local state and committed on Save. The component handles type-specific value parsing, including JSON array parsing for ARRAY parameters.

Usage

Used in the workbench view when a user needs to define or modify dynamic query parameters for parameterized SQL queries. Opened from the query toolbar.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/workbench-view/query-parameters-dialog/query-parameters-dialog.tsx
• Lines: 1-182

Signature

interface QueryParametersDialogProps {
  queryParameters: QueryParameter[] | undefined;
  onQueryParametersChange(parameters: QueryParameter[] | undefined): void;
  onClose(): void;
}

export const QueryParametersDialog = React.memo(function QueryParametersDialog(
  props: QueryParametersDialogProps,
): JSX.Element;

Import

import { QueryParametersDialog } from 'web-console/src/views/workbench-view/query-parameters-dialog/query-parameters-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
queryParameters	QueryParameter[] or undefined	No	The current list of query parameters; undefined means no parameters set
onQueryParametersChange	(parameters: QueryParameter[] or undefined) => void	Yes	Callback invoked with updated parameters on Save; undefined when empty
onClose	() => void	Yes	Callback to close the dialog

Outputs

Name	Type	Description
JSX.Element	Dialog	A BlueprintJS Dialog with a form for adding/editing/removing typed query parameters and Save/Close buttons

Usage Examples

Opening the query parameters dialog

<QueryParametersDialog
  queryParameters={currentParams}
  onQueryParametersChange={(params) => setQueryParameters(params)}
  onClose={() => setShowParamsDialog(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development