Implementation:Ucbepic Docetl TutorialsDialog

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

Overview

Concrete tool for the tutorials dialog that provides pre-built pipeline templates for learning DocETL.

Description

The TutorialsDialog presents a selection of tutorial pipelines (e.g., Supreme Court transcript analysis) with descriptions, dataset URLs, and complete YAML pipeline templates. When a user selects a tutorial, it downloads the dataset using useDatasetUpload, restores the pipeline configuration using useRestorePipeline, and sets up the complete working environment. Each tutorial includes a description of the operations involved (map, reduce, etc.) and the expected dataset format.

Usage

Opened from the playground toolbar to help new users get started with pre-configured example pipelines and datasets.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/TutorialsDialog.tsx
• Lines: 1-491

Signature

interface Tutorial {
  id: string;
  title: string;
  description: string;
  datasetUrl: string;
  datasetDescription: string;
  operations: string[];
  pipelineTemplate: string;
}

// Main component (default export)
export default function TutorialsDialog(props: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}): JSX.Element

Import

import TutorialsDialog from "@/components/TutorialsDialog";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
open	boolean	Yes	Whether the dialog is visible
onOpenChange	(open: boolean) => void	Yes	Toggle dialog visibility

Outputs

Name	Type	Description
rendered	JSX.Element	Tutorial selection dialog with pipeline templates

Usage Examples

<TutorialsDialog
  open={showTutorials}
  onOpenChange={setShowTutorials}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment