Implementation:Ucbepic Docetl DecompositionComparisonDialog

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

Overview

Concrete tool for the dialog that compares original vs. decomposed operation outputs in the DocETL playground.

Description

The DecompositionComparisonDialog presents a side-by-side comparison of pipeline outputs from the original operation and its decomposed version. It displays the winning directive, comparison rationale, cost, and number of candidates evaluated. A paginated data viewer lets users browse through individual rows of both original and decomposed outputs, with Apply and Cancel buttons for accepting or rejecting the decomposition. The dialog filters out observability columns from the display.

Usage

Opened after a decomposition task completes, allowing users to review the results before applying changes to their pipeline.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/DecompositionComparisonDialog.tsx
• Lines: 1-271

Signature

interface DecompositionComparisonDialogProps {
  isOpen: boolean;
  result: DecomposeResult | null;
  operationName?: string;
  onOpenChange: (open: boolean) => void;
  onApply: () => void;
  onCancel: () => void;
}

export const DecompositionComparisonDialog: React.FC<DecompositionComparisonDialogProps>

Import

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

I/O Contract

Inputs (Props)

Name	Type	Required	Description
isOpen	boolean	Yes	Whether the dialog is visible
result	DecomposeResult or null	Yes	Decomposition result data
operationName	string	No	Name of the operation being compared
onOpenChange	(open: boolean) => void	Yes	Toggle dialog visibility
onApply	() => void	Yes	Callback to apply decomposition
onCancel	() => void	Yes	Callback to cancel decomposition

Outputs

Name	Type	Description
rendered	JSX.Element	Side-by-side comparison dialog with paginated data

Usage Examples

<DecompositionComparisonDialog
  isOpen={showComparison}
  result={decomposeResult}
  operationName="extract_themes"
  onOpenChange={setShowComparison}
  onApply={handleApplyDecomposition}
  onCancel={handleCancelDecomposition}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment