FEAT: Add dataset catalog navigation and cards

[Julio César Suástegui (juliosuas)]

Description

Closes #2747

Summary

Adds a Datasets entry and a catalog of datasets already loaded in memory. Cards come only from GET /api/datasets?loaded_only=true. Search, modality, harm category, the unlabeled facet, and sort stay in the query string, so Back, Forward, and refresh keep them.

A card links to /datasets/detail?selection_key= through the shared query builder in routeParams.ts. The key stays opaque and is used only to find a row in that same catalog response. An unknown key shows a not-found state, truncated to 80 characters, and is rendered as text. This page does not list individual examples; the prompt table stays with #2745.

Sort options are name A–Z, name Z–A, most examples, and fewest examples. Changing the runtime generation drops the catalog on screen and aborts the in-flight request.

Deferred

Provider-only cards and an available-to-load view are deferred. loaded and provider_available remain on DatasetInfo because the API returns them.

Screenshots

Captured from commit abf4f01a41d6a224b7fd79df8c49bc469b17da1d, using the production frontend build and the real backend catalog API with isolated, synthetic in-memory seed data. The dataset names and counts below are demonstration fixtures, not newly bundled datasets. No provider downloads or model calls were needed.

Loaded dataset catalog and navigation

Six loaded datasets, including separate unnamed and literally named __unnamed__ populations. Cards show logical examples, seed pieces, objectives, stored modalities, and harm categories.

Search, facets, and sorting

A filtered catalog with name search, modality, harm category, the unlabeled facet, and most-examples sorting. These selections are represented in the URL.

Dataset selection route

Opening a card uses the opaque selection_key query parameter. The route shows the selected catalog summary and explicitly leaves individual examples to the later prompt-table milestone.

Empty memory

The catalog stays empty when no datasets are loaded, without exposing provider-loading controls.

Mobile selection view in dark mode

The selection route at a 390 × 844 CSS-pixel viewport, with the three counts stacked vertically.

Tests and Documentation

Testing

The original validation commands are retained below, with review-time results distinguished from the original report:

• npm run lint: passed during this review.
• npm run type-check: passed during this review.
• npm run test:coverage (109 suites, 2812 tests): reported in the original description; the full coverage run was not repeated during this review.
• PYRIT_PYTHON=python3 npm run build: retained from the original description; this Linux command was not run verbatim on Windows. The Windows production build below passed.

The changed test suites were run from frontend:

npm test -- --runInBand --silent --runTestsByPath src\App.test.tsx src\components\Datasets\DatasetCatalog.test.tsx src\components\Datasets\DatasetSelection.test.tsx src\components\Datasets\datasetQuery.test.ts src\components\Sidebar\Navigation.test.tsx src\hooks\useLoadedDatasets.test.tsx src\services\api.test.ts src\utils\routeParams.test.ts

Result: 8 suites passed, 230 tests passed.

Production build, with the worktree's Python environment selected from the repository root:

$env:PYRIT_PYTHON = (Resolve-Path '.venv\Scripts\python.exe').Path
Set-Location frontend
npm run build

Result: passed. Vite emitted non-failing configuration and large-chunk warnings.

Browser checks used an isolated Chromium instance against the production build and real in-memory backend. Confirmed empty-memory rendering, catalog filters, refresh and browser Back/Forward preservation, distinct unnamed selections, special-character selection keys, and catalog-only requests without seed-page prefetch. The screenshots above document the additions; they are not a claim that all review findings are resolved.

No repository documentation or notebook files were changed. JupyText was not run for this frontend-only change.

[Julio César Suástegui (juliosuas)]

@microsoft-github-policy-service agree