Implementation:Ucbepic Docetl OutputPanel

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

Overview

Concrete tool for the output display panel that shows pipeline execution results and terminal output in the DocETL playground.

Description

The Output component renders a tabbed interface with two main views: a data table showing pipeline operation outputs (via ResizableDataTable) and a terminal view showing raw execution logs (via AnsiRenderer). It includes a cost breakdown display with a pie chart indicator, CSV download functionality, operation selection tabs, and optimizer progress tracking. The component uses memoization extensively to optimize rendering performance with large datasets.

Usage

Rendered in the bottom panel of the DocETL playground. Displays results after a pipeline run completes, with tabs for each operation's output and a terminal log view.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/Output.tsx
• Lines: 1-814

Signature

// Internal memoized sub-components:
const TinyPieChart: React.FC<{ percentage: number }>
const TableContent = memo(({ opName, isLoadingOutputs, outputs, operation, columns }: {
  opName: string | undefined;
  isLoadingOutputs: boolean;
  outputs: OutputRow[];
  operation: Operation | undefined;
  columns: ColumnType<OutputRow>[];
}) => { ... })

// Main component (default export)
export default function Output(): JSX.Element

Import

import Output from "@/components/Output";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- reads from PipelineContext and WebSocketContext

Outputs

Name	Type	Description
rendered	JSX.Element	Tabbed output panel with data table and terminal views

Usage Examples

<Output />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment