Implementation:Ucbepic Docetl HealthQuotesExplorer

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

Overview

Concrete tool for the health hearing quotes explorer showcase component in the DocETL website.

Description

The HealthQuotesExplorer visualizes data extracted from congressional health committee hearings processed through a DocETL pipeline. It displays hearing summaries with evasion rates, role shares, top topics, and most quoted statements. The component features year/topic/committee filtering, full-text search, hearing detail cards with quote tables including speaker, role, tone, and quotability scores, and progress bar visualizations for evasion metrics. It uses React Query for cached data fetching from the /api/health-quotes endpoint.

Usage

Rendered on the DocETL showcase page to demonstrate analysis of congressional hearing transcripts.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/showcase/health-quotes-explorer.tsx
• Lines: 1-385

Signature

interface HealthQuote {
  quote: string;
  speaker: string;
  role: string;
  topic: string;
  tone: string;
  interaction: string;
  response_type: string;
  quotability_score: number;
}

interface Hearing {
  title: string;
  date: string;
  committee: string;
  role_shares: { [key: string]: number };
  top_topics: string[];
  evasion_rate: number;
  most_quoted: HealthQuote[];
  quotes: HealthQuote[];
  summary?: string;
  html_link?: string;
}

export default function HealthQuotesExplorer(): JSX.Element

Import

import HealthQuotesExplorer from "@/components/showcase/health-quotes-explorer";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- fetches data from /api/health-quotes

Outputs

Name	Type	Description
rendered	JSX.Element	Interactive hearing quotes explorer with filtering and metrics

Usage Examples

<HealthQuotesExplorer />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment