Implementation:Ucbepic Docetl OptimizationDialog

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

Overview

Concrete tool for the optimization results dialog that displays the outcome of an operation optimization check.

Description

The OptimizationDialog presents the results of a "should optimize" check for a pipeline operation. It displays the optimization rationale text, the operation's prompt, paginated input and output data tables (filtering out observability columns), and the number of documents analyzed. It conditionally shows input data only if its columns differ from the output data. An optional "Decompose" button allows users to proceed to task decomposition if the optimizer recommends it.

Usage

Opened after the optimization check completes for an operation, showing whether decomposition or other optimization strategies are recommended.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/OptimizationDialog.tsx
• Lines: 1-215

Signature

interface OptimizationDialogProps {
  isOpen: boolean;
  content: string;
  prompt?: string;
  operationName?: string;
  inputData?: Array<Record<string, unknown>>;
  outputData?: Array<Record<string, unknown>>;
  numDocsAnalyzed?: number;
  onOpenChange: (open: boolean) => void;
  onDecompose?: () => void;
}

export const OptimizationDialog: React.FC<OptimizationDialogProps>

Import

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

I/O Contract

Inputs (Props)

Name	Type	Required	Description
isOpen	boolean	Yes	Whether the dialog is visible
content	string	Yes	Optimization rationale text
prompt	string	No	The operation's prompt text
operationName	string	No	Name of the operation
inputData	Array	No	Sample input data rows
outputData	Array	No	Sample output data rows
numDocsAnalyzed	number	No	Number of documents analyzed
onOpenChange	(open: boolean) => void	Yes	Toggle dialog visibility
onDecompose	() => void	No	Callback to start decomposition

Outputs

Name	Type	Description
rendered	JSX.Element	Optimization results dialog with data tables

Usage Examples

<OptimizationDialog
  isOpen={showOptDialog}
  content={optimizeResult.should_optimize}
  prompt={operation.prompt}
  operationName={operation.name}
  inputData={optimizeResult.input_data}
  outputData={optimizeResult.output_data}
  numDocsAnalyzed={optimizeResult.num_docs_analyzed}
  onOpenChange={setShowOptDialog}
  onDecompose={handleDecompose}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment