Add map selection QA shortcut

frontend/src/components/map/MapWorkspace.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import GeoMap from '../GeoMap'
-import type { AreaRead, DatasetCreateResponse, VectorSelectionBBox, VectorSelectionResponse } from '../../types'
+import type { AreaRead, DatasetCreateResponse, QaComparisonResult, VectorSelectionBBox, VectorSelectionResponse } from '../../types'
 
 const DEFAULT_SELECTED_FEATURE_FILENAME = 'selected-feature.geojson'
 const DEFAULT_AREA_SELECTION_FILENAME = 'area-selection.geojson'
@@ -197,6 +197,11 @@ interface MapWorkspaceProps {
   selectionDatasetSaving: boolean
   selectionDatasetError: string | null
   latestSelectionDatasetName: string | null
+  mapQaReferenceDatasets: DatasetCreateResponse[]
+  selectedMapQaReferenceDatasetId: string
+  mapSelectionQaRunning: boolean
+  mapSelectionQaError: string | null
+  mapSelectionQaResult: QaComparisonResult | null
   availableMapDatasets: DatasetCreateResponse[]
   onSelectMapArea: (areaId: string) => void
   onOpenDatasetInMap: (dataset: DatasetCreateResponse) => void
@@ -210,6 +215,8 @@ interface MapWorkspaceProps {
   onClearMapSelectionExtract: () => void
   onExportMapSelection: (bbox: VectorSelectionBBox) => void
   onDeriveMapSelectionDataset: (bbox: VectorSelectionBBox) => void
+  onSelectMapQaReferenceDataset: (datasetId: string) => void
+  onRunMapSelectionQa: () => void
 }
 
 export function MapWorkspace({
@@ -238,6 +245,11 @@ export function MapWorkspace({
   selectionDatasetSaving,
   selectionDatasetError,
   latestSelectionDatasetName,
+  mapQaReferenceDatasets,
+  selectedMapQaReferenceDatasetId,
+  mapSelectionQaRunning,
+  mapSelectionQaError,
+  mapSelectionQaResult,
   availableMapDatasets,
   onSelectMapArea,
   onOpenDatasetInMap,
@@ -251,6 +263,8 @@ export function MapWorkspace({
   onClearMapSelectionExtract,
   onExportMapSelection,
   onDeriveMapSelectionDataset,
+  onSelectMapQaReferenceDataset,
+  onRunMapSelectionQa,
 }: MapWorkspaceProps): JSX.Element {
   const [bboxSelectionMode, setBboxSelectionMode] = useState(false)
   const [firstSelectionCorner, setFirstSelectionCorner] = useState<[number, number] | null>(null)
@@ -644,6 +658,54 @@ export function MapWorkspace({
               {latestSelectionDatasetName ? (
                 <p className="muted">Saved derived dataset: {latestSelectionDatasetName}</p>
               ) : null}
+              {latestSelectionDatasetName ? (
+                <div className="map-selection-qa-surface" aria-label="Map selection QA shortcut">
+                  <label>
+                    Reference dataset
+                    <select
+                      value={selectedMapQaReferenceDatasetId}
+                      onChange={(event) => onSelectMapQaReferenceDataset(event.target.value)}
+                      disabled={mapQaReferenceDatasets.length === 0 || mapSelectionQaRunning}
+                    >
+                      <option value="">Select reference</option>
+                      {mapQaReferenceDatasets.map((dataset) => (
+                        <option key={dataset.id} value={dataset.id}>
+                          {dataset.name}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <button
+                    className="primary-action"
+                    disabled={!selectedMapQaReferenceDatasetId || mapSelectionQaRunning}
+                    type="button"
+                    onClick={onRunMapSelectionQa}
+                  >
+                    {mapSelectionQaRunning ? 'Running QA...' : 'Run QA on saved dataset'}
+                  </button>
+                  {mapSelectionQaError ? <p className="error">{mapSelectionQaError}</p> : null}
+                  {mapSelectionQaResult ? (
+                    <div className="feature-extract-grid" aria-label="Map selection QA result">
+                      <div>
+                        <span>Precision</span>
+                        <strong>{mapSelectionQaResult.precision ?? 'n/a'}</strong>
+                      </div>
+                      <div>
+                        <span>Recall</span>
+                        <strong>{mapSelectionQaResult.recall ?? 'n/a'}</strong>
+                      </div>
+                      <div>
+                        <span>F1</span>
+                        <strong>{mapSelectionQaResult.f1_score ?? 'n/a'}</strong>
+                      </div>
+                      <div>
+                        <span>Quality check</span>
+                        <strong>{mapSelectionQaResult.status}</strong>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
               {areaSelectionPreviewFeatures.length > 0 ? (
                 <div className="table-scroll feature-property-table" aria-label="Area selection feature table">
                   <table>