Polish QA and export workspaces
This commit is contained in:
Codex
@@ -54,57 +54,103 @@ export function ExportCenter({
|
||||
onDownload,
|
||||
}: ExportCenterProps): JSX.Element {
|
||||
const canExportDataset = Boolean(selectedDataset && isVectorDatasetType(selectedDataset.dataset_type))
|
||||
const geojsonExports = exports.filter((item) => item.export_type.includes('geojson')).length
|
||||
const reportExports = exports.filter((item) => item.export_type === 'project_report_html').length
|
||||
|
||||
return (
|
||||
<section data-testid="export-center">
|
||||
<h2>Export Center</h2>
|
||||
<button type="button" onClick={onRefresh} disabled={!selectedProjectId || loadingExports} data-testid="refresh-exports">
|
||||
Refresh exports
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onExportProjectMetadata}
|
||||
disabled={!selectedProjectId || exporting}
|
||||
data-testid="export-project-metadata"
|
||||
>
|
||||
Export project metadata JSON
|
||||
</button>
|
||||
<button type="button" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>
|
||||
Export project report HTML
|
||||
</button>
|
||||
<button type="button" onClick={onExportDataset} disabled={!canExportDataset || exporting}>
|
||||
Export selected vector GeoJSON
|
||||
</button>
|
||||
<button type="button" onClick={onExportDetectionRun} disabled={!selectedDetectionRunId || exporting}>
|
||||
Export selected detection run GeoJSON
|
||||
</button>
|
||||
<button type="button" onClick={onExportSegmentationRun} disabled={!selectedSegmentationRunId || exporting}>
|
||||
Export selected segmentation run GeoJSON
|
||||
</button>
|
||||
<section className="export-center" data-testid="export-center">
|
||||
<div className="panel-title-row">
|
||||
<div>
|
||||
<h2>Export Center</h2>
|
||||
<p className="muted">Create handoff artifacts from persisted datasets, AI runs and project metadata.</p>
|
||||
</div>
|
||||
<span className="count-pill">{exports.length} exports</span>
|
||||
</div>
|
||||
<div className="quality-summary-grid">
|
||||
<div>
|
||||
<span>GeoJSON</span>
|
||||
<strong>{geojsonExports}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Reports</span>
|
||||
<strong>{reportExports}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Selected dataset</span>
|
||||
<strong>{selectedDataset?.name ?? 'none'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="export-action-grid">
|
||||
<button
|
||||
type="button"
|
||||
className="secondary-action"
|
||||
onClick={onRefresh}
|
||||
disabled={!selectedProjectId || loadingExports}
|
||||
data-testid="refresh-exports"
|
||||
>
|
||||
Refresh exports
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="primary-action"
|
||||
onClick={onExportProjectMetadata}
|
||||
disabled={!selectedProjectId || exporting}
|
||||
data-testid="export-project-metadata"
|
||||
>
|
||||
Export project metadata JSON
|
||||
</button>
|
||||
<button type="button" className="secondary-action" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>
|
||||
Export project report HTML
|
||||
</button>
|
||||
<button type="button" className="secondary-action" onClick={onExportDataset} disabled={!canExportDataset || exporting}>
|
||||
Export selected vector GeoJSON
|
||||
</button>
|
||||
<button type="button" className="secondary-action" onClick={onExportDetectionRun} disabled={!selectedDetectionRunId || exporting}>
|
||||
Export selected detection run GeoJSON
|
||||
</button>
|
||||
<button type="button" className="secondary-action" onClick={onExportSegmentationRun} disabled={!selectedSegmentationRunId || exporting}>
|
||||
Export selected segmentation run GeoJSON
|
||||
</button>
|
||||
</div>
|
||||
{exportError ? <p className="error">{exportError}</p> : null}
|
||||
{latestExport ? (
|
||||
<p>
|
||||
Latest export: {latestExport.export_type} {'->'} {latestExport.path}
|
||||
</p>
|
||||
<div className="latest-export-card">
|
||||
<span>Latest export</span>
|
||||
<strong>{latestExport.export_type}</strong>
|
||||
<p>{latestExport.path}</p>
|
||||
</div>
|
||||
) : null}
|
||||
{exports.length === 0 ? <p>No exports registered yet.</p> : null}
|
||||
<ul>
|
||||
{exports.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<strong>No exports registered yet.</strong>
|
||||
<p>Create metadata, GeoJSON or HTML report artifacts once the active project has data to hand off.</p>
|
||||
</div>
|
||||
) : null}
|
||||
<ul className="export-list">
|
||||
{exports.map((item) => (
|
||||
<li key={item.id}>
|
||||
<strong>{item.export_type}</strong>
|
||||
<div>status: {item.status}</div>
|
||||
<div>path: {item.storage_path}</div>
|
||||
<div>export id: {item.id}</div>
|
||||
{canPreviewJson(item) ? (
|
||||
<button type="button" onClick={() => onPreviewContent(item.id)}>
|
||||
Preview JSON content
|
||||
<li className="export-card" key={item.id}>
|
||||
<div className="export-card-header">
|
||||
<div>
|
||||
<strong>{item.export_type}</strong>
|
||||
<div className="entity-meta">
|
||||
<span>export id: {item.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={item.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>{item.status}</span>
|
||||
</div>
|
||||
<p>{item.storage_path}</p>
|
||||
<div className="button-row">
|
||||
{canPreviewJson(item) ? (
|
||||
<button type="button" className="secondary-action" onClick={() => onPreviewContent(item.id)}>
|
||||
Preview JSON content
|
||||
</button>
|
||||
) : (
|
||||
<span className="status-badge">download-only HTML artifact</span>
|
||||
)}
|
||||
<button type="button" className="primary-action" onClick={() => onDownload(item.id)}>
|
||||
Download artifact
|
||||
</button>
|
||||
) : (
|
||||
<div>Preview: download-only HTML artifact</div>
|
||||
)}
|
||||
<button type="button" onClick={() => onDownload(item.id)}>
|
||||
Download artifact
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -8,8 +8,14 @@ export function ExportPreview({ content }: ExportPreviewProps): JSX.Element | nu
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2>Export Preview</h2>
|
||||
<section className="export-preview-panel">
|
||||
<div className="panel-title-row">
|
||||
<div>
|
||||
<h2>Export Preview</h2>
|
||||
<p className="muted">JSON and GeoJSON content preview for the selected export artifact.</p>
|
||||
</div>
|
||||
<span className="count-pill">preview</span>
|
||||
</div>
|
||||
<pre className="job-result">{JSON.stringify(content, null, 2)}</pre>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -13,27 +13,84 @@ export function QualityResultsPanel({
|
||||
qualityChecksError,
|
||||
onRefresh,
|
||||
}: QualityResultsPanelProps): JSX.Element {
|
||||
const completedChecks = qualityChecks.filter((check) => check.status === 'ok' || check.status === 'completed').length
|
||||
const latestCheck = qualityChecks[0] ?? null
|
||||
|
||||
return (
|
||||
<section data-testid="quality-results-panel">
|
||||
<h2>QA/QC Results</h2>
|
||||
<button type="button" onClick={onRefresh} disabled={!selectedProjectId} data-testid="refresh-quality-results">
|
||||
Refresh QA/QC results
|
||||
</button>
|
||||
<section className="quality-results-panel" data-testid="quality-results-panel">
|
||||
<div className="panel-title-row">
|
||||
<div>
|
||||
<h2>QA/QC Results</h2>
|
||||
<p className="muted">Persisted quality checks from dataset, detection and segmentation comparisons.</p>
|
||||
</div>
|
||||
<span className="count-pill">{qualityChecks.length} checks</span>
|
||||
</div>
|
||||
<div className="quality-summary-grid">
|
||||
<div>
|
||||
<span>Completed</span>
|
||||
<strong>{completedChecks}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Latest score</span>
|
||||
<strong>{latestCheck?.score ?? 'n/a'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Latest status</span>
|
||||
<strong>{latestCheck?.status ?? 'waiting'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-row">
|
||||
<button
|
||||
type="button"
|
||||
className="secondary-action"
|
||||
onClick={onRefresh}
|
||||
disabled={!selectedProjectId}
|
||||
data-testid="refresh-quality-results"
|
||||
>
|
||||
Refresh QA/QC results
|
||||
</button>
|
||||
</div>
|
||||
{qualityChecksError ? <p className="error">{qualityChecksError}</p> : null}
|
||||
{qualityChecks.length === 0 ? <p>No persisted QA/QC results yet</p> : null}
|
||||
<ul>
|
||||
{qualityChecks.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<strong>No persisted QA/QC results yet</strong>
|
||||
<p>Run dataset, detection or segmentation QA against a reference layer to populate this workspace.</p>
|
||||
</div>
|
||||
) : null}
|
||||
<ul className="quality-check-list">
|
||||
{qualityChecks.map((check) => (
|
||||
<li key={check.id}>
|
||||
<strong>{check.check_type}</strong>
|
||||
<div>status: {check.status}</div>
|
||||
<div>score: {check.score ?? 'n/a'}</div>
|
||||
<div>candidate: {check.candidate_dataset_id ?? 'n/a'}</div>
|
||||
<div>reference: {check.reference_dataset_id}</div>
|
||||
<div>quality check: {check.id}</div>
|
||||
<ul>
|
||||
<li className="quality-check-card" key={check.id}>
|
||||
<div className="quality-check-header">
|
||||
<div>
|
||||
<strong>{check.check_type}</strong>
|
||||
<div className="entity-meta">
|
||||
<span>candidate: {check.candidate_dataset_id ?? 'n/a'}</span>
|
||||
<span>reference: {check.reference_dataset_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={check.status === 'ok' || check.status === 'completed' ? 'status-badge status-badge-ready' : 'status-badge'}>
|
||||
{check.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="quality-score-row">
|
||||
<div>
|
||||
<span>Score</span>
|
||||
<strong>{check.score ?? 'n/a'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Metrics</span>
|
||||
<strong>{check.metrics.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Quality check</span>
|
||||
<strong>{check.id}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="metric-list">
|
||||
{check.metrics.map((metric) => (
|
||||
<li key={metric.id}>
|
||||
{metric.metric_key}: {metric.metric_value ?? 'n/a'}
|
||||
<span>{metric.metric_key}</span>
|
||||
<strong>{metric.metric_value ?? 'n/a'}</strong>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
+146
-5
@@ -847,7 +847,10 @@ section th {
|
||||
|
||||
.entity-list,
|
||||
.dataset-list,
|
||||
.model-list {
|
||||
.model-list,
|
||||
.quality-check-list,
|
||||
.export-list,
|
||||
.metric-list {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
padding: 0;
|
||||
@@ -858,7 +861,11 @@ section th {
|
||||
.dataset-card,
|
||||
.model-card,
|
||||
.lab-block,
|
||||
.layer-control-card {
|
||||
.layer-control-card,
|
||||
.quality-check-card,
|
||||
.export-card,
|
||||
.latest-export-card,
|
||||
.empty-state {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--panel-soft);
|
||||
@@ -898,12 +905,18 @@ button.entity-card {
|
||||
|
||||
.dataset-card,
|
||||
.model-card,
|
||||
.lab-block {
|
||||
.lab-block,
|
||||
.quality-check-card,
|
||||
.export-card,
|
||||
.latest-export-card,
|
||||
.empty-state {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.dataset-card-header,
|
||||
.model-card {
|
||||
.model-card,
|
||||
.quality-check-header,
|
||||
.export-card-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.75rem;
|
||||
@@ -937,6 +950,131 @@ button.entity-card {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.quality-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.quality-summary-grid > div {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 0.72rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.quality-summary-grid span,
|
||||
.quality-score-row span,
|
||||
.latest-export-card span,
|
||||
.metric-list span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.quality-summary-grid strong {
|
||||
display: block;
|
||||
margin-top: 0.28rem;
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.quality-score-row {
|
||||
display: grid;
|
||||
grid-template-columns: 6rem 5rem minmax(0, 1fr);
|
||||
gap: 0.65rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.quality-score-row > div {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.quality-score-row strong {
|
||||
display: block;
|
||||
margin-top: 0.22rem;
|
||||
overflow: hidden;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.metric-list li {
|
||||
display: grid;
|
||||
gap: 0.16rem;
|
||||
margin-top: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 0.58rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.metric-list strong {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.empty-state p,
|
||||
.latest-export-card p,
|
||||
.export-card p {
|
||||
margin: 0.25rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.export-action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.export-action-grid button {
|
||||
min-height: 3.2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.latest-export-card {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
margin-top: 0.75rem;
|
||||
border-color: rgba(15, 118, 110, 0.28);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.export-list {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.export-card p {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.export-preview-panel .job-result {
|
||||
max-height: 38rem;
|
||||
}
|
||||
|
||||
.map-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.8fr) minmax(10rem, 0.8fr) minmax(14rem, 1fr);
|
||||
@@ -1045,7 +1183,10 @@ button.entity-card {
|
||||
|
||||
.dataset-upload-form,
|
||||
.map-toolbar,
|
||||
.lab-form-grid {
|
||||
.lab-form-grid,
|
||||
.quality-summary-grid,
|
||||
.quality-score-row,
|
||||
.export-action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user