Implementation:Ucbepic Docetl VisualizationBuilder

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

Overview

Concrete tool for the visual pipeline comparison builder that allows users to design and compare pipeline decomposition strategies.

Description

The VisualizationBuilder provides an interactive editor for creating pipeline visualization diagrams using a JSON-based grammar. It supports defining multiple pipeline configurations with operators of different types (LLM-powerful, LLM-cheap, code, stack), arranging them via drag-and-drop (using react-beautiful-dnd), and rendering them as visual block diagrams. The component includes a Monaco code editor for direct JSON editing, an AI-powered generation feature, and preset pipeline configurations for common decomposition patterns (task decomposition, model substitution, context-based).

Usage

Used in the decomposition comparison workflow to visually design and compare different pipeline architectures for the same task.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/VisualizationBuilder.tsx
• Lines: 1-1315

Signature

interface BlockOp {
  type: string;
  label?: string;
  width?: number;
  height?: number;
  id?: string;
}

interface StackOp {
  type: "stack";
  operators: Array<BlockOp>;
  id?: string;
}

interface PipelineConfig {
  pipelines: Array<{
    name: string;
    operators: Array<BlockOp | StackOp>;
  }>;
}

export default function VisualizationBuilder(): JSX.Element

Import

import VisualizationBuilder from "@/components/VisualizationBuilder";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- self-contained builder component

Outputs

Name	Type	Description
rendered	JSX.Element	Interactive pipeline visualization builder with drag-and-drop

Usage Examples

<VisualizationBuilder />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment