Implementation:Ucbepic Docetl DatasetView

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

Overview

Concrete tool for displaying and exploring uploaded dataset files in the DocETL playground.

Description

The DatasetView component renders a virtualized, paginated view of JSON dataset files. It uses React Query's useInfiniteQuery to fetch file content in pages, extracts JSON keys from the first valid object for display, computes dataset statistics (document count, word counts, min/max/average, standard deviation, histogram), and provides in-content text search with match navigation. The component handles large files efficiently through incremental loading.

Usage

Rendered in the playground sidebar when a dataset file is selected. Displays the raw content, extracted keys as badges, and statistical summaries with word count histograms.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/DatasetView.tsx
• Lines: 1-603

Signature

const DatasetView: React.FC<{ file: File | null }> = ({ file }) => { ... }

// Key interfaces:
interface FileChunk {
  content: string;
  totalSize: number;
  page: number;
  hasMore: boolean;
}

interface DatasetStats {
  documentCount: number;
  averageWords: number;
  minWords: number;
  maxWords: number;
  standardDeviation: number;
  isCalculating: boolean;
  wordCounts: number[];
  histogram: HistogramBin[];
}

Import

import DatasetView from "@/components/DatasetView";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
file	File or null	Yes	The dataset file object to display

Outputs

Name	Type	Description
rendered	JSX.Element	Dataset viewer with stats, keys, search, and content display

Usage Examples

<DatasetView file={currentFile} />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment