Implementation:Ucbepic Docetl OperationCard

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

Overview

Concrete tool for the individual operation card component used in the DocETL playground pipeline editor.

Description

The OperationCard is a complex composite component that renders a single pipeline operation as an expandable card. It includes an OperationHeader sub-component with controls for editing, deleting, optimizing, toggling visibility, reordering, and accessing prompt improvement. The card body renders operation-type-specific editors (via createOperationComponent), guardrails configuration, gleaning settings, and model selection. It uses debounced updates to avoid excessive re-renders and integrates with the pipeline context for state management.

Usage

Rendered for each operation in the pipeline editor. Users interact with operation cards to configure prompts, schemas, and operation-specific settings.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/OperationCard.tsx
• Lines: 1-1222

Signature

interface OperationHeaderProps {
  name: string;
  type: string;
  llmType: string;
  disabled: boolean;
  currOp: boolean;
  expanded: boolean;
  visibility: boolean;
  optimizeResult?: string;
  isGuardrailsExpanded: boolean;
  isGleaningsExpanded: boolean;
  onEdit: (name: string) => void;
  onDelete: () => void;
  onToggleSettings: () => void;
  onShowOutput: () => void;
  onOptimize: () => void;
  onToggleExpand: () => void;
  onToggleVisibility: () => void;
  onImprovePrompt: () => void;
  onToggleGuardrails: () => void;
  onToggleGleanings: () => void;
  onMoveUp: () => void;
  onMoveDown: () => void;
  isFirst: boolean;
  isLast: boolean;
  model?: string;
  onModelChange?: (newModel: string) => void;
}

Import

import OperationCard from "@/components/OperationCard";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
operation	Operation	Yes	The operation data object
index	number	Yes	Position in the pipeline
isFirst	boolean	Yes	Whether this is the first operation
isLast	boolean	Yes	Whether this is the last operation

Outputs

Name	Type	Description
rendered	JSX.Element	Expandable operation card with editor controls

Usage Examples

{operations.map((op, index) => (
  <OperationCard
    key={op.id}
    operation={op}
    index={index}
    isFirst={index === 0}
    isLast={index === operations.length - 1}
  />
))}

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment