Developer Guide: Data QC Review Tool

Last Updated: June 24, 2025 Audience: Developers tasked with maintaining, customizing, or troubleshooting the application.

1. Architectural Overview

The ADAM QC Viewer is intentionally designed as a zero-dependency, single-file web application. This architecture was chosen for maximum portability and ease of use for non-technical users, as it requires no build process, package manager, or local development server. Simplicity.

The application operates on the following principles:

Single index.html File: The entire application—structure, styles, and logic—is contained within a single .html file.
React via CDN: React and ReactDOM are loaded directly from a CDN (unpkg.com) in the <head> of the document. This avoids the need for npm or a local node_modules folder.
In-Browser JSX Transpilation: The React code is written in JSX within a <script type="text/babel"> tag. The Babel Standalone library, also loaded from a CDN, transpiles this JSX into standard JavaScript that the browser can execute in real-time. While not suitable for high-performance production apps, it is perfect for this type of self-contained tool.
Styling with Tailwind CSS: The UI is styled using Tailwind CSS, loaded via its official CDN script. This provides access to utility-first styling without a build step.
Local State Management: All application state (document lists, statuses, operator name) is managed within the React component tree using useState and useMemo hooks. There is no backend or persistent database.

<aside>

Recommended Normalized Data Schema

Update as needed.

{
  "document_id": "string", // Unique ID for the document
  "source_file": "string", // Original file name or S3 URI
  "metadata": {
    "author": "string | null", // May not always be available
    "keywords": ["string"], // May include derivations from crop and Region values
    "status": "normalized" | "needs_review", // Set by the Validator
    "quality_score": "float" // Final score from the Validator
  },
  "content_blocks": [
    {
      "block_id": "string", // Unique ID for this chunk
      "type": "prose" | "table",
      "page_number": "number", // Added for context
      // The Normalizer decides which field to populate:
      "content": "string | null", // For prose, or a sentence describing a table/figure
      "data": [["string"]] | null // The raw structured data of a table, for reference
    }
  ]
}

</aside>

2. Code Structure & Key Components

The primary logic is located inside the <script type="text/babel"> tag.

Icon Components

Since an npm package like lucide-react cannot be used, all required icons are pre-defined as simple React functional components that render inline SVG. This ensures the application remains self-contained.
```
const Icon = ({ children, className }) => <svg>...</svg>;
const UploadCloudIcon = ({ className }) => <Icon>...</Icon>;
```

1. Architectural Overview

Recommended Normalized Data Schema

2. Code Structure & Key Components

Icon Components

Core Functional Components