Implementation:Ucbepic Docetl OperationComponents

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

Overview

Concrete tool for the operation-type-specific editor components that render configuration forms for each DocETL operation type.

Description

This module implements editor components for every supported DocETL operation type and exports a factory function createOperationComponent that returns the appropriate component based on operation type. It includes MapFilterOperationComponent (for map, filter, parallel_map, and rank operations), ReduceOperationComponent, ResolveOperationComponent, UnnestOperationComponent, SplitOperationComponent, GatherOperationComponent, SampleOperationComponent, CodeOperationComponent, and ExtractOperationComponent. Each renders the relevant prompt inputs, schema editors, and operation-specific configuration fields (reduce keys, blocking thresholds, split keys, peripheral chunks, etc.).

Usage

Called by OperationCard via the createOperationComponent factory to render the correct editor form for the selected operation type.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/operations/components.tsx
• Lines: 1-2078

Signature

interface OperationComponentProps {
  operation: Operation;
  isSchemaExpanded: boolean;
  onUpdate: (updatedOperation: Operation) => void;
  onToggleSchema: () => void;
}

export const MapFilterOperationComponent: React.FC<OperationComponentProps>
export const ReduceOperationComponent: React.FC<OperationComponentProps>
export const ResolveOperationComponent: React.FC<OperationComponentProps>
// ... additional operation components

export default function createOperationComponent(
  operation: Operation,
  isSchemaExpanded: boolean,
  onUpdate: (op: Operation) => void,
  onToggleSchema: () => void
): JSX.Element

Import

import createOperationComponent from "@/components/operations/components";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
operation	Operation	Yes	The operation to render an editor for
isSchemaExpanded	boolean	Yes	Whether the schema section is expanded
onUpdate	(updatedOperation: Operation) => void	Yes	Callback for operation updates
onToggleSchema	() => void	Yes	Toggle schema section visibility

Outputs

Name	Type	Description
rendered	JSX.Element	Operation-type-specific editor form

Usage Examples

const operationEditor = createOperationComponent(
  operation,
  isSchemaExpanded,
  handleUpdate,
  toggleSchema
);

// Renders the appropriate editor based on operation.type
return <div>{operationEditor}</div>;

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment