Implementation:Ucbepic Docetl LeaseContractExplorer

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

Overview

Concrete tool for the lease contract red flag explorer showcase component in the DocETL website.

Description

The LeaseContractExplorer visualizes lease contracts processed through a DocETL pipeline to extract red flags. It displays a master-detail layout with a contract list sorted by severity rank on the left and a contract viewer on the right. The viewer shows the full contract text with red flag highlights and a sidebar listing all extracted red flags as badges. Clicking a red flag scrolls the document to the relevant section. The component uses React Query for data fetching from the /api/lease-contracts endpoint.

Usage

Rendered on the DocETL showcase page to demonstrate document analysis and ranking applied to lease contract review.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/showcase/lease-contract-explorer.tsx
• Lines: 1-240

Signature

interface Contract {
  name: string;
  contents: string;
  extracted_red_flags: string[];
  _rank?: number;
  red_flags?: string[];
}

export default function LeaseContractExplorer(): JSX.Element

Import

import LeaseContractExplorer from "@/components/showcase/lease-contract-explorer";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- fetches data from /api/lease-contracts

Outputs

Name	Type	Description
rendered	JSX.Element	Master-detail contract explorer with red flag highlighting

Usage Examples

<LeaseContractExplorer />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment