Implementation:Ucbepic Docetl ColumnDialog

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the full-screen column detail dialog used to inspect individual data cells in DocETL output tables.

Description

The ColumnDialog is a modal dialog that provides a detailed view of a specific column value for a given row in the output data table. It features row navigation (previous/next/jump-to), an observability indicator showing LLM call details, column statistics with histograms and charts, user notes management with bookmark integration, and a resizable two-panel layout for viewing column content alongside statistics. It supports both word-count and categorical bar chart visualizations.

Usage

Opened when a user clicks on a cell in the ResizableDataTable to view its full content. Typically triggered from within the output panel.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/ColumnDialog.tsx
• Lines: 1-733

Signature

export interface ColumnDialogProps<T extends Record<string, unknown>> {
  isOpen: boolean;
  onClose: () => void;
  columnId: string;
  columnHeader: string;
  data: T[];
  currentIndex: number;
  onNavigate: (direction: "prev" | "next") => void;
  onJumpToRow: (index: number) => void;
  currentOperation: string;
  columnStats: ColumnStats | null;
}

Import

import { ColumnDialog } from "@/components/ColumnDialog";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
isOpen	boolean	Yes	Whether the dialog is visible
onClose	() => void	Yes	Callback to close the dialog
columnId	string	Yes	Accessor key for the column
columnHeader	string	Yes	Display name of the column
data	T[]	Yes	Full dataset array
currentIndex	number	Yes	Currently selected row index
onNavigate	(direction) => void	Yes	Navigate to prev/next row
onJumpToRow	(index) => void	Yes	Jump to a specific row
currentOperation	string	Yes	Name of the current operation for observability
columnStats	ColumnStats or null	Yes	Statistical data for the column

Outputs

Name	Type	Description
rendered	JSX.Element	Full-screen column detail dialog

Usage Examples

<ColumnDialog
  isOpen={dialogOpen}
  onClose={() => setDialogOpen(false)}
  columnId="summary"
  columnHeader="Summary"
  data={outputData}
  currentIndex={selectedRow}
  onNavigate={handleNavigate}
  onJumpToRow={handleJump}
  currentOperation="extract_themes"
  columnStats={stats}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment