Implementation:Apache Druid ModulePane

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

Overview

ModulePane is a React container component that manages the lifecycle, parameter state, and rendering of a single visualization module within the explore view.

Description

The ModulePane component resolves a visualization module by its ID from the ModuleRepository, fills in default parameter values, manages sticky parameter persistence in localStorage, and renders the module's component inside a resizable, droppable container with error boundaries. It also provides a control bar with a ModulePicker for switching module types (with parameter transfer between compatible modules), toggle buttons for showing/hiding module-specific filters and control panes, and a popover menu for resetting parameters or deleting the module.

Usage

ModulePane is rendered for each visualization tile in the explore view layout. It is instantiated by the parent explore view whenever a user adds or configures a visualization module.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/module-pane/module-pane.tsx
• Lines: 1-347

Signature

export interface ModulePaneProps {
  className: string;
  moduleState: ModuleState;
  setModuleState(moduleState: ModuleState): void;
  onDelete(): void;
  querySource: QuerySource;
  timezone: Timezone;
  where: SqlExpression;
  setWhere(where: SqlExpression): void;
  runSqlQuery(
    query: string | SqlQuery | { query: string | SqlQuery; timezone?: Timezone },
  ): Promise<QueryResult>;
  onAddToSourceQueryAsColumn?(expression: SqlExpression): void;
  onAddToSourceQueryAsMeasure?(measure: Measure): void;
}

export const ModulePane = function ModulePane(props: ModulePaneProps): JSX.Element;

Import

import { ModulePane } from './views/explore-view/components/module-pane/module-pane';

I/O Contract

Inputs

Name	Type	Required	Description
className	string	Yes	CSS class name applied to the root element for layout positioning
moduleState	ModuleState	Yes	The current state of the module including moduleId, parameterValues, moduleWhere, and UI flags
setModuleState	(moduleState: ModuleState) => void	Yes	Callback to update the module state in the parent
onDelete	() => void	Yes	Callback invoked when the user deletes this module
querySource	QuerySource	Yes	The data source providing columns and query context
timezone	Timezone	Yes	The current timezone for time-aware operations
where	SqlExpression	Yes	The global WHERE filter expression
setWhere	(where: SqlExpression) => void	Yes	Callback to update the global WHERE filter
runSqlQuery	function	Yes	Function to execute SQL queries against the Druid backend
onAddToSourceQueryAsColumn	(expression: SqlExpression) => void	No	Optional callback to add an expression as a column to the source query
onAddToSourceQueryAsMeasure	(measure: Measure) => void	No	Optional callback to add a measure to the source query

Outputs

Name	Type	Description
Rendered module	JSX.Element	The visualization module rendered inside a resizable container with control bar, filter pane, and error boundary

Usage Examples

Rendering a module pane in the explore view

<ModulePane
  className="module-tile-0"
  moduleState={moduleStates[0]}
  setModuleState={(newState) => updateModuleState(0, newState)}
  onDelete={() => removeModule(0)}
  querySource={querySource}
  timezone={timezone}
  where={where}
  setWhere={setWhere}
  runSqlQuery={runSqlQuery}
  onAddToSourceQueryAsColumn={handleAddColumn}
  onAddToSourceQueryAsMeasure={handleAddMeasure}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development