Implementation:Apache Druid ColumnTree

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

Overview

Concrete React component that renders a navigable schema browser tree from INFORMATION_SCHEMA query results.

Description

The ColumnTree component (725 lines) takes pre-loaded ColumnMetadata and renders a hierarchical Tree (from BlueprintJS) organized as schemas → tables → columns. Each tree node has a context menu with SQL snippet insertion actions:

Table level: "Show 100 rows" (SELECT * FROM table LIMIT 100), "Show in Explore view"
Column level: "Add to query" (column name), "Sort by", "Group by", "Aggregate" (SUM, COUNT, etc.)

The component does not query INFORMATION_SCHEMA directly — it receives the metadata from its parent WorkbenchView component which manages the query lifecycle.

Usage

Render this component in the Workbench view sidebar. Pass the column metadata state from the parent's INFORMATION_SCHEMA query.

Code Reference

Source Location

Repository: Apache Druid
File: web-console/src/views/workbench-view/column-tree/column-tree.tsx
Lines: L213-L725

Signature

interface ColumnTreeProps {
  columnMetadataState: QueryState<ColumnMetadata[]>;
  onQueryTab(newQuery: WorkbenchQuery, tabName?: string): void;
  defaultSchema?: string;
  defaultTable?: string;
}

export const ColumnTree = React.memo(function ColumnTree(
  props: ColumnTreeProps,
): JSX.Element {
  // Renders BlueprintJS Tree with schema/table/column hierarchy
  // Context menus provide SQL snippet insertion
});

Import

import { ColumnTree } from './column-tree/column-tree';

I/O Contract

Inputs

Name	Type	Required	Description
columnMetadataState	QueryState<ColumnMetadata[]>	Yes	INFORMATION_SCHEMA query results with schema, table, column, and type
onQueryTab	callback	Yes	Called to create/update a query tab with a SQL snippet
defaultSchema	string	No	Pre-selected schema to expand in the tree
defaultTable	string	No	Pre-selected table to expand in the tree

Outputs

Name	Type	Description
SQL snippet	via callback	Inserted into query editor when user clicks tree items or context menu actions
Tree UI	visual	Interactive hierarchical schema browser

Usage Examples

In Workbench View

import { ColumnTree } from './column-tree/column-tree';

<ColumnTree
  columnMetadataState={columnMetadataState}
  onQueryTab={(newQuery, tabName) => {
    // Creates new tab with: SELECT * FROM "events" LIMIT 100
    addTab(newQuery, tabName);
  }}
  defaultSchema="druid"
  defaultTable="events"
/>

Related Pages

Implements Principle

Principle:Apache_Druid_Schema_Discovery

Requires Environment

Page Connections

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

Principle

Implementation

Heuristic

Environment