Implementation:Apache Druid ControlPane ResourcePane
| Knowledge Sources | |
|---|---|
| Domains | Visual_Exploration, Data_Modeling |
| Last Updated | 2026-02-10 00:00 GMT |
Overview
Concrete React components for configuring visualization module parameters through column/measure selection panels in the Explore view.
Description
Two complementary components work together:
ControlPane (401 lines): Renders typed input controls for each module parameter. Parameter types include column (single column picker), columns (multi-column picker), measure (single measure picker), measures (multi-measure picker), option (dropdown), boolean (toggle), string (text input), and number (numeric input).
ResourcePane (349 lines): Shows all available columns and measures from the QuerySource in a scrollable list. Each item has a context menu with actions: filter by, show raw, split by, aggregate. Items can be dragged to ControlPane parameter slots.
Usage
Render both components in the Explore view sidebar. ControlPane receives the current module's parameter definitions, and ResourcePane provides the available columns and measures.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/views/explore-view/components/control-pane/control-pane.tsx (L1-L401)
- File: web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx (L1-L349)
Signature
// ControlPane
interface ControlPaneProps {
querySource: QuerySource;
parameters: Record<string, ParameterDefinition>;
parameterValues: Record<string, any>;
onParameterValuesChange(values: Record<string, any>): void;
where: SqlExpression;
onAddToFilter(column: ExpressionMeta): void;
}
// ResourcePane
interface ResourcePaneProps {
querySource: QuerySource;
onFilter(column: ExpressionMeta): void;
onShowColumn(column: ExpressionMeta): void;
onSplitColumn(column: ExpressionMeta): void;
onMeasure(measure: Measure): void;
}
Import
import { ControlPane } from './components/control-pane/control-pane';
import { ResourcePane } from './components/resource-pane/resource-pane';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| querySource | QuerySource | Yes | Available columns and measures |
| parameters | Record | Yes | Module parameter definitions (ControlPane) |
| parameterValues | Record | Yes | Current parameter values (ControlPane) |
| onParameterValuesChange | callback | Yes | Called when parameters change (ControlPane) |
Outputs
| Name | Type | Description |
|---|---|---|
| parameterValues | via callback | Updated parameter values for the visualization module |
| actions | via callbacks | Filter, show, split, aggregate actions from column interactions |
Usage Examples
In Explore View
<ControlPane
querySource={querySource}
parameters={module.parameters}
parameterValues={moduleState.parameterValues}
onParameterValuesChange={(values) => updateModuleState(values)}
where={exploreState.where}
onAddToFilter={(col) => addFilter(col)}
/>
<ResourcePane
querySource={querySource}
onFilter={(col) => addFilter(col)}
onShowColumn={(col) => addShowColumn(col)}
onSplitColumn={(col) => setSplitColumn(col)}
onMeasure={(m) => addMeasure(m)}
/>