UI Component Architecture

The Quantum Advantage Tracker (QAT) is built using Next.js 15 with the App Router, utilizing a component-based architecture designed for modularity and performance. The UI leverages Tailwind CSS for styling and follows a pattern of separating high-level page layouts from reusable UI primitives.

Component Hierarchy

The application follows a standard Next.js directory structure where src/app defines routes and layouts, while src/components (and specific feature folders) contain the UI building blocks.

Layout & Navigation

• RootLayout: The top-level wrapper providing global styles, fonts (Inter), and the persistent header/footer.
• NavMenu: A client-side component managing the primary navigation links. It uses the usePathname hook to apply active styling to the current route.
• TrackerTabs: A specialized navigation component used within the /trackers routes. It allows users to toggle between the three advantage pathways: Observable Estimations, Variational Problems, and Classically Verifiable Problems.

Key Feature Components

SubmissionsTable

The SubmissionsTable is the primary data-rendering component for the tracking pages. It is designed to be data-agnostic, receiving different datasets based on the pathway.

Usage Example:

import { SubmissionsTable } from './SubmissionsTable';

// Used within a pathway page
<SubmissionsTable 
  submissions={submissionsData} 
  circuitModels={circuitModelsData} 
/>

| Prop | Type | Description | | :--- | :--- | :--- | | submissions | Array<Submission> | List of validated quantum advantage submissions. | | circuitModels | CircuitModels | (Optional) Map of circuit definitions related to the path. | | hamiltonians | Hamiltonians | (Optional) Map of Hamiltonian definitions for Variational Problems. |

Contributors

An internal marquee component used on the homepage to display participating institutions. It dynamically aggregates a list of unique institutions from all submission JSON files.

Usage:

import { Contributors } from './Contributors';

// Renders the infinite horizontal marquee
<Contributors />

Shared UI Primitives

QAT uses a set of low-level components located in src/components/ui. These are built for flexibility using the asChild pattern from Radix UI, allowing them to wrap other elements like Next.js Link or standard <a> tags.

Button

The primary action component. It supports multiple variants and sizes.

import { Button } from '@/components/ui/button';

// As a standard button
<Button variant="default" size="lg">Submit</Button>

// As a link (using the asChild pattern)
<Button asChild variant="secondary">
  <Link href="/trackers">View Trackers</Link>
</Button>

Icons

The project uses Lucide React for general UI icons and a custom GithubIcon (located in src/icons) for external repository links.

Utility Functions

The architecture includes several helper utilities to manage data formatting and dynamic URL generation for GitHub-hosted assets.

URL Builders

These utilities generate consistent links to the underlying data repository where circuit files and Hamiltonians are stored.

| Function | Input | Output | | :--- | :--- | :--- | | getCircuitInstanceUrl | path: string, instance: object | GitHub URL to a specific circuit JSON. | | getHamiltonianUrl | instance: object | GitHub URL to a specific Hamiltonian file. |

Example:

import { getHamiltonianUrl } from '@/utils';

const url = getHamiltonianUrl({ type: 'molecular', path: 'h2_6-31g.json' });

Data Helpers

• cn(...inputs): A wrapper around clsx and tailwind-merge for safely combining Tailwind CSS classes.
• formatDate(dateString): Returns a localized date string in YYYY-MM-DD format.
• sortSubmissions(arr): Sorts an array of submissions by their createdAt timestamp in descending order.