343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
import { useMemo, useState } from 'react'
|
|
import type { DatasetCreateResponse, ExportCreateResponse, ExportRead } from '../../types'
|
|
|
|
interface ExportCenterProps {
|
|
selectedProjectId: string | null
|
|
selectedDataset: DatasetCreateResponse | null
|
|
selectedDetectionRunId: string
|
|
selectedSegmentationRunId: string
|
|
exports: ExportRead[]
|
|
latestExport: ExportCreateResponse | null
|
|
exportError: string | null
|
|
loadingExports: boolean
|
|
exporting: boolean
|
|
onRefresh: () => void
|
|
onExportDataset: () => void
|
|
onExportDetectionRun: () => void
|
|
onExportSegmentationRun: () => void
|
|
onExportProjectMetadata: () => void
|
|
onExportProjectReport: () => void
|
|
onPreviewContent: (exportId: string) => void
|
|
onDownload: (exportId: string) => void
|
|
}
|
|
|
|
function isVectorDatasetType(datasetType: string): boolean {
|
|
return datasetType === 'vector' || datasetType === 'geojson'
|
|
}
|
|
|
|
function canPreviewJson(item: ExportRead): boolean {
|
|
if (item.export_type === 'project_report_html') {
|
|
return false
|
|
}
|
|
if (item.metadata_json?.format === 'html') {
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
function compactPath(value: string): string {
|
|
const parts = value.split('/').filter(Boolean)
|
|
if (parts.length <= 2) {
|
|
return value
|
|
}
|
|
return parts.slice(-2).join('/')
|
|
}
|
|
|
|
function formatExportType(value: string): string {
|
|
return value
|
|
.split('_')
|
|
.filter(Boolean)
|
|
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
|
.join(' ')
|
|
}
|
|
|
|
function exportMatchesSearch(item: ExportRead, query: string): boolean {
|
|
const normalizedQuery = query.trim().toLowerCase()
|
|
if (!normalizedQuery) {
|
|
return true
|
|
}
|
|
return [item.export_type, item.status, item.id, item.storage_path]
|
|
.filter(Boolean)
|
|
.some((value) => String(value).toLowerCase().includes(normalizedQuery))
|
|
}
|
|
|
|
export function ExportCenter({
|
|
selectedProjectId,
|
|
selectedDataset,
|
|
selectedDetectionRunId,
|
|
selectedSegmentationRunId,
|
|
exports,
|
|
latestExport,
|
|
exportError,
|
|
loadingExports,
|
|
exporting,
|
|
onRefresh,
|
|
onExportDataset,
|
|
onExportDetectionRun,
|
|
onExportSegmentationRun,
|
|
onExportProjectMetadata,
|
|
onExportProjectReport,
|
|
onPreviewContent,
|
|
onDownload,
|
|
}: ExportCenterProps): JSX.Element {
|
|
const [showAllExports, setShowAllExports] = useState(false)
|
|
const [exportTypeFilter, setExportTypeFilter] = useState('all')
|
|
const [exportStatusFilter, setExportStatusFilter] = useState('all')
|
|
const [exportSearchQuery, setExportSearchQuery] = useState('')
|
|
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
|
|
const handoffStatus = selectedProjectId ? 'project selected' : 'select project'
|
|
const exportTypes = useMemo(() => Array.from(new Set(exports.map((item) => item.export_type))).sort(), [exports])
|
|
const exportStatuses = useMemo(() => Array.from(new Set(exports.map((item) => item.status))).sort(), [exports])
|
|
const filteredExports = useMemo(
|
|
() =>
|
|
exports.filter((item) => {
|
|
const typeMatches = exportTypeFilter === 'all' || item.export_type === exportTypeFilter
|
|
const statusMatches = exportStatusFilter === 'all' || item.status === exportStatusFilter
|
|
return typeMatches && statusMatches && exportMatchesSearch(item, exportSearchQuery)
|
|
}),
|
|
[exports, exportTypeFilter, exportStatusFilter, exportSearchQuery],
|
|
)
|
|
const visibleExports = showAllExports ? filteredExports : filteredExports.slice(0, 10)
|
|
const hiddenExportCount = Math.max(filteredExports.length - visibleExports.length, 0)
|
|
const hasActiveExportFilters = exportTypeFilter !== 'all' || exportStatusFilter !== 'all' || exportSearchQuery.trim().length > 0
|
|
|
|
return (
|
|
<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="handoff-summary-card">
|
|
<div className="panel-title-row">
|
|
<div>
|
|
<h3>Handoff readiness</h3>
|
|
<p className="muted">Pick the artifact that matches the current review state before sharing data outside the workbench.</p>
|
|
</div>
|
|
<span className="status-badge">{handoffStatus}</span>
|
|
</div>
|
|
<div className="handoff-readiness-grid">
|
|
<div>
|
|
<span>Vector dataset</span>
|
|
<strong>{canExportDataset ? selectedDataset?.name : 'none ready'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>Detection run</span>
|
|
<strong>{selectedDetectionRunId || 'none'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>Segmentation run</span>
|
|
<strong>{selectedSegmentationRunId || 'none'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>Latest handoff artifact</span>
|
|
<strong>{latestExport ? formatExportType(latestExport.export_type) : 'none'}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="export-action-grid">
|
|
<div className="handoff-action-grid">
|
|
<div className="handoff-action-card">
|
|
<span>Refresh</span>
|
|
<strong>Export registry</strong>
|
|
<p>Reload the persisted artifact list for the selected project.</p>
|
|
<button
|
|
type="button"
|
|
className="secondary-action"
|
|
onClick={onRefresh}
|
|
disabled={!selectedProjectId || loadingExports}
|
|
data-testid="refresh-exports"
|
|
>
|
|
Refresh exports
|
|
</button>
|
|
</div>
|
|
<div className="handoff-action-card handoff-action-card-primary">
|
|
<span>Project report</span>
|
|
<strong>HTML summary</strong>
|
|
<p>Generate the human-readable V1 handoff report from persisted project state.</p>
|
|
<button type="button" className="primary-action" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>
|
|
Export project report HTML
|
|
</button>
|
|
</div>
|
|
<div className="handoff-action-card">
|
|
<span>Metadata</span>
|
|
<strong>Project JSON</strong>
|
|
<p>Export project, dataset, QA and artifact metadata for machine-readable review.</p>
|
|
<button
|
|
type="button"
|
|
className="secondary-action"
|
|
onClick={onExportProjectMetadata}
|
|
disabled={!selectedProjectId || exporting}
|
|
data-testid="export-project-metadata"
|
|
>
|
|
Export project metadata JSON
|
|
</button>
|
|
</div>
|
|
<div className="handoff-action-card">
|
|
<span>Vector dataset</span>
|
|
<strong>Selected GeoJSON</strong>
|
|
<p>Export the active vector/reference dataset when it is selected and ready.</p>
|
|
<button type="button" className="secondary-action" onClick={onExportDataset} disabled={!canExportDataset || exporting}>
|
|
Export selected vector GeoJSON
|
|
</button>
|
|
</div>
|
|
<div className="handoff-action-card">
|
|
<span>Detection run</span>
|
|
<strong>Detections GeoJSON</strong>
|
|
<p>Export persisted detection geometries for the selected analysis run.</p>
|
|
<button type="button" className="secondary-action" onClick={onExportDetectionRun} disabled={!selectedDetectionRunId || exporting}>
|
|
Export selected detection run GeoJSON
|
|
</button>
|
|
</div>
|
|
<div className="handoff-action-card">
|
|
<span>Segmentation run</span>
|
|
<strong>Segmentations GeoJSON</strong>
|
|
<p>Export persisted segmentation polygons for the selected analysis run.</p>
|
|
<button type="button" className="secondary-action" onClick={onExportSegmentationRun} disabled={!selectedSegmentationRunId || exporting}>
|
|
Export selected segmentation run GeoJSON
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{loadingExports ? (
|
|
<div className="result-state result-state-loading">
|
|
<strong>Loading export registry.</strong>
|
|
<p>Retrieving persisted artifacts for the selected project.</p>
|
|
</div>
|
|
) : null}
|
|
{exportError ? (
|
|
<div className="result-state result-state-error">
|
|
<strong>Export action failed.</strong>
|
|
<p>{exportError}</p>
|
|
</div>
|
|
) : null}
|
|
{latestExport ? (
|
|
<div className="latest-export-card">
|
|
<span>Latest export</span>
|
|
<strong>{formatExportType(latestExport.export_type)}</strong>
|
|
<p>{latestExport.path}</p>
|
|
</div>
|
|
) : null}
|
|
{exports.length === 0 ? (
|
|
<div className="result-state result-state-empty">
|
|
<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}
|
|
{exports.length > 0 ? (
|
|
<div className="export-history-controls" aria-label="Export history filters">
|
|
<label>
|
|
Search exports
|
|
<input
|
|
type="search"
|
|
placeholder="Type, id or path"
|
|
value={exportSearchQuery}
|
|
onChange={(event) => setExportSearchQuery(event.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Type
|
|
<select value={exportTypeFilter} onChange={(event) => setExportTypeFilter(event.target.value)}>
|
|
<option value="all">All types</option>
|
|
{exportTypes.map((type) => (
|
|
<option key={type} value={type}>
|
|
{type}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Status
|
|
<select value={exportStatusFilter} onChange={(event) => setExportStatusFilter(event.target.value)}>
|
|
<option value="all">All statuses</option>
|
|
{exportStatuses.map((status) => (
|
|
<option key={status} value={status}>
|
|
{status}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<button
|
|
type="button"
|
|
className="secondary-action"
|
|
onClick={() => {
|
|
setExportSearchQuery('')
|
|
setExportTypeFilter('all')
|
|
setExportStatusFilter('all')
|
|
setShowAllExports(false)
|
|
}}
|
|
disabled={!hasActiveExportFilters && !showAllExports}
|
|
>
|
|
Reset view
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{filteredExports.length > 10 ? (
|
|
<div className="list-limit-banner">
|
|
<span>
|
|
Showing {visibleExports.length} of {filteredExports.length} matching exports.
|
|
{hiddenExportCount > 0 ? ` ${hiddenExportCount} older artifacts hidden.` : ' All matching artifacts shown.'}
|
|
</span>
|
|
<button type="button" className="secondary-action" onClick={() => setShowAllExports((value) => !value)}>
|
|
{showAllExports ? 'Show latest 10' : 'Show all exports'}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{exports.length > 0 && filteredExports.length === 0 ? (
|
|
<div className="result-state result-state-empty">
|
|
<strong>No exports match the current filters.</strong>
|
|
<p>Clear the search, type or status filter to return to the latest artifacts.</p>
|
|
</div>
|
|
) : null}
|
|
<ul className="export-list">
|
|
{visibleExports.map((item) => (
|
|
<li className="export-card" key={item.id}>
|
|
<div className="export-card-header">
|
|
<div>
|
|
<span className="export-type-badge">{formatExportType(item.export_type)}</span>
|
|
<div className="entity-meta">
|
|
<span>export id: {item.id}</span>
|
|
{item.analysis_run_id ? <span>analysis run: {item.analysis_run_id}</span> : null}
|
|
{item.created_at ? <span>created: {item.created_at}</span> : null}
|
|
</div>
|
|
</div>
|
|
<span className={item.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>{item.status}</span>
|
|
</div>
|
|
<p title={item.storage_path}>{compactPath(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>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|