Implementation:Apache Druid FlexibleQueryInput

Knowledge Sources	Apache Druid
Domains	SQL_Querying, Developer_Experience
Last Updated	2026-02-10 00:00 GMT

Overview

Concrete React component wrapping an Ace editor for SQL/JSON query authoring with Druid-specific autocompletion.

Description

The FlexibleQueryInput component wraps the Ace editor with Druid-specific configuration including:

Custom syntax mode (dsql) for Druid SQL keywords and functions
Schema-aware autocompletion via sql-completions.ts (383 lines)
Automatic detection of query language (SQL vs JSON) based on content
Editor state caching via editorStateId for tab persistence
Resize handling for responsive layout

Usage

Render this component in any view that needs SQL/JSON query input. Pass column metadata for schema-aware autocompletion.

Code Reference

Source Location

Repository: Apache Druid
File: web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx
Lines: L55-L321

Signature

interface FlexibleQueryInputProps {
  queryString: string;
  onQueryStringChange?: (queryString: string) => void;
  autoHeight?: boolean;
  minRows?: number;
  showGutter?: boolean;
  placeholder?: string;
  columnMetadata?: readonly ColumnMetadata[];
  currentSchema?: string;
  currentTable?: string;
  editorStateId?: string;
  leaveBackground?: boolean;
}

export const FlexibleQueryInput = React.memo(function FlexibleQueryInput(
  props: FlexibleQueryInputProps,
): JSX.Element {
  // Wraps Ace editor with Druid SQL/JSON support
});

Import

import { FlexibleQueryInput } from './flexible-query-input/flexible-query-input';

I/O Contract

Inputs

Name	Type	Required	Description
queryString	string	Yes	Current query text (SQL or JSON)
onQueryStringChange	callback	No	Called when query text changes
columnMetadata	ColumnMetadata[]	No	Schema metadata for autocompletion
currentSchema	string	No	Current schema context for completion filtering
currentTable	string	No	Current table context for completion filtering
editorStateId	string	No	ID for persisting editor state across tab switches

Outputs

Name	Type	Description
queryString	via callback	Updated query text as user types
Editor UI	visual	Syntax-highlighted editor with autocompletion popups

Usage Examples

SQL Editor with Autocompletion

<FlexibleQueryInput
  queryString="SELECT * FROM "
  onQueryStringChange={(qs) => setQueryString(qs)}
  columnMetadata={columnMetadata}
  currentSchema="druid"
  editorStateId="tab-1"
/>

Related Pages

Implements Principle

Principle:Apache_Druid_Query_Composition

Requires Environment

Uses Heuristic

Heuristic:Apache_Druid_Query_Error_Suggestion_Patterns

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment