Implementation:Ucbepic Docetl OperationHelpButton

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

Overview

Concrete tool for the contextual help button that shows operation-type-specific documentation and example prompts.

Description

The OperationHelpButton renders a help icon that, on hover, displays a rich hover card with operation-type-specific guidance. For each operation type (map, filter, reduce, resolve, unnest, split, gather, sample, code_map, code_reduce, code_filter), it shows example prompts with copy-to-clipboard functionality, explanations of template variables (input for map, inputs for reduce, etc.), output schema guidance, and operation-specific configuration tips. The PromptBlock sub-component renders copyable code blocks with a copy button overlay.

Usage

Displayed in the OperationCard header to provide contextual help when users are configuring operations.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/OperationHelpButton.tsx
• Lines: 1-241

Signature

interface OperationHelpButtonProps {
  type: string;
}

export const OperationHelpButton: React.FC<OperationHelpButtonProps>

Import

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

I/O Contract

Inputs (Props)

Name	Type	Required	Description
type	string	Yes	Operation type (map, reduce, filter, resolve, etc.)

Outputs

Name	Type	Description
rendered	JSX.Element	Help icon with hover card showing examples and documentation

Usage Examples

<OperationHelpButton type="map" />
<OperationHelpButton type="reduce" />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment