Implementation:Ucbepic Docetl PipelineVisualization

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

Overview

Concrete tool for the interactive pipeline step visualization displayed on the DocETL landing page demo.

Description

The PipelineVisualization component renders a step-by-step visual walkthrough of a DocETL pipeline using the presidential debate analysis as an example. Each step is displayed as an animated card (using Framer Motion) with the operation type, prompt template with variable highlighting, example input/output data in a tabular format, and links to the relevant operator documentation. It supports expand/collapse of step details and auto-advances through synthesized steps.

Usage

Rendered within the PresidentialDebateDemo component on the landing page. Shows users how pipeline operations work by walking through a concrete example.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/PipelineVisualization.tsx
• Lines: 1-694

Signature

export const pipelineSteps: Array<{
  synthesized: boolean;
  filename: string;
  name: string;
  type: string;
  color: string;
  isLLM: boolean;
  outputDescription?: string;
  outputCols?: string[];
  exampleVars: Record<string, unknown>;
  exampleOutput: unknown;
  prompt?: string;
  description?: string;
}>

export default function PipelineVisualization(): JSX.Element

Import

import PipelineVisualization from "@/components/PipelineVisualization";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- uses static pipeline step data

Outputs

Name	Type	Description
rendered	JSX.Element	Animated pipeline step visualization

Usage Examples

<PipelineVisualization />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment