- {toolBtn('BOX', mode === 'box', () => setMode('box'), 'Box mode', 'B')}
- {toolBtn('POLYGON', mode === 'polygon', () => setMode('polygon'), 'Polygon mode', 'P (Enter to finalize)')}
- {toolBtn('KEYPOINT', mode === 'keypoint', () => setMode('keypoint'), 'Keypoint mode', 'K')}
- {toolBtn('CLASSIFY', mode === 'classify', () => setMode('classify'), 'Classify mode', 'C')}
- {toolBtn('SELECT', mode === 'select', () => setMode('select'), 'Select mode', 'V')}
-
-
-
- {toolBtn('UNDO', false, undo, 'Undo', 'Ctrl/Cmd+Z')}
- {toolBtn('REDO', false, redo, 'Redo', 'Ctrl/Cmd+Shift+Z')}
-
-
-
-
-
-
-
- {toolBtn('← PREV', false, () => navigateAsset(-1), 'Previous asset', '←')}
- {toolBtn('NEXT →', false, () => navigateAsset(1), 'Next asset', '→')}
-
-
- {neighbors.total > 0 && (
- <>
- FRAME{' '}
-
- {(neighbors.index ?? 0) + 1}/{neighbors.total}
-
- {' · '}
-
- )}
- ASSET{' '}
-
- {assetId}
-
+ {/* Offscreen live region — keeps assistive tech + tests informed. */}
+
+ {status}
+ {mode}
+ {assetId}
+
+ {frameNo}/{frameTotal}
+
+
+ {/* Toolbar */}
+
+ {/* Left — exit + context */}
+
+
+
+ {'//'} {datasetName || 'dataset'}
+
- {dirty && (
-
+ {TOOLS.map((t) => {
+ const active = mode === t.id;
+ return (
+
+ );
+ })}
+
+ {dirty ? (
+
+ ● UNSAVED
+
+ ) : (
+
+ ✓ saved
+
+ )}
+
+
+
- {/* Left sidebar — Classes */}
-
-
Classes
- {classes.map((cls, i) => (
-
);
diff --git a/frontend/src/pages/datasets/index.tsx b/frontend/src/pages/datasets/index.tsx
index 915c521..805991b 100644
--- a/frontend/src/pages/datasets/index.tsx
+++ b/frontend/src/pages/datasets/index.tsx
@@ -7,6 +7,8 @@ import ErrorState from '@/components/common/ErrorState';
import Pager, { PaginatedResponse } from '@/components/common/Pager';
import { apiGet } from '@/services/api';
+type DatasetStatus = 'ready' | 'annotating' | 'review';
+
interface Dataset {
id: string;
name: string;
@@ -16,11 +18,111 @@ interface Dataset {
project_id?: string;
project_name?: string;
task_type?: 'detect' | 'classify' | null;
+ coverage_pct?: number;
+ status?: DatasetStatus;
created_at: string;
}
const PAGE_SIZE = 24;
+// 5-column grid shared by the table header and every body row.
+const GRID = 'grid items-center gap-3.5 [grid-template-columns:2.2fr_0.8fr_1fr_1.4fr_1.2fr]';
+
+const STATUS_META: Record<
+ DatasetStatus,
+ { variant: 'success' | 'warning' | 'info'; label: string }
+> = {
+ ready: { variant: 'success', label: '● READY' },
+ annotating: { variant: 'warning', label: 'ANNOTATING' },
+ review: { variant: 'info', label: 'IN REVIEW' },
+};
+
+/** Short, stable, monospace id chip in the spirit of the design (`ds_4471`). */
+function shortId(id: string): string {
+ return `ds_${id.replace(/-/g, '').slice(0, 4)}`;
+}
+
+function CoverageCell({ dataset }: { dataset: Dataset }) {
+ const pct = Math.max(0, Math.min(100, Math.round(dataset.coverage_pct ?? 0)));
+ const version = dataset.latest_version;
+ const full = pct >= 100;
+ return (
+
+
+
+ {version != null ? `v${version}` : '—'}
+
+ {pct}%
+
+
+
+ );
+}
+
+function DatasetRow({ dataset }: { dataset: Dataset }) {
+ const status = STATUS_META[dataset.status ?? 'ready'] ?? STATUS_META.ready;
+ return (
+
+ {/* Dataset */}
+
+
+ {dataset.name}
+
+
+ {shortId(dataset.id)}
+
+
+
+ {/* Task */}
+
+ {dataset.task_type ? (
+
+ {dataset.task_type}
+
+ ) : (
+ —
+ )}
+
+
+ {/* Assets */}
+
+ {dataset.asset_count.toLocaleString()}
+
+
+ {/* Coverage */}
+
+
+ {/* Status + action */}
+
+ {status.label}
+ {dataset.asset_count > 0 ? (
+
+ ANNOTATE
+
+ ) : (
+
+ —
+
+ )}
+
+
+ );
+}
+
export default function DatasetsIndex() {
const [searchParams] = useSearchParams();
const projectId = searchParams.get('projectId') || '';
@@ -38,147 +140,96 @@ export default function DatasetsIndex() {
page_size: String(PAGE_SIZE),
});
if (projectId) params.set('project_id', projectId);
- apiGet
>(`/api/datasets?${params.toString()}`)
+ apiGet | Dataset[]>(`/api/datasets?${params.toString()}`)
.then((data) => {
- setDatasets(data.items);
- setTotal(data.total);
+ // Tolerate both the paginated envelope and a bare array.
+ const items = Array.isArray(data) ? data : (data.items ?? []);
+ const count = Array.isArray(data) ? data.length : (data.total ?? items.length);
+ setDatasets(items);
+ setTotal(count);
})
.catch((err) => setError(err instanceof Error ? err.message : 'Failed to load datasets'))
.finally(() => setLoading(false));
}, [projectId, page]);
- if (loading) return
;
- if (error) return ;
-
const uploadTo = projectId ? `/datasets/upload?projectId=${projectId}` : '/datasets/upload';
return (
-
- {/* Header */}
-
+
+ {/* PageHeader */}
+
-
+
{projectId ? '// Projects / Datasets' : '// Datasets'}
-
-
- Datasets
{projectId && (
-
- (filtered)
-
- CLEAR ×
-
-
+
+ CLEAR ×
+
)}
-
+
+
Datasets
+
+ Versioned image collections and their annotation coverage.
+
- IMPORT (COCO/YOLO/...)
+ IMPORT COCO/YOLO
+ UPLOAD DATASET
- {datasets.length === 0 ? (
+ {loading ? (
+
+
+
+ ) : error ? (
+
+ ) : datasets.length === 0 ? (
Upload Dataset →
) : (
- <>
-
- {datasets.map((ds) => (
-
- {/* Title row */}
-
-
- {ds.name}
-
-
- {ds.task_type && (
-
- {ds.task_type}
-
- )}
- {ds.latest_version != null && (
- v{ds.latest_version}
- )}
-
-
-
- {/* Metadata */}
-
-
- ASSETS
- {ds.asset_count}
-
- {ds.project_name && (
-
- PROJ
- {ds.project_name}
-
- )}
-
- CREATED
-
- {new Date(ds.created_at).toLocaleDateString()}
-
-
-
-
- {/* Actions */}
-
-
- UPLOAD
-
-
- SNAPSHOT
-
- {ds.asset_count > 0 && (
-
- ANNOTATE
-
- )}
-
- REVIEW
-
-
+ <>
+ {/* Table */}
+
+ {/* Header row */}
+
+ Dataset
+ Task
+ Assets
+ Coverage
+ Status
- ))}
-
-
-
+ {/* Body rows — hairline seams via a 1px gap over the subtle border color */}
+
+ {datasets.map((ds) => (
+
+ ))}
+
+
+
+
)}
);