Add vector change detection foundation

frontend/src/App.tsx

@@ -4,13 +4,15 @@ import GeoMap from './components/GeoMap'
 import { areasApi } from './services/api/areas'
 import { datasetsApi } from './services/api/datasets'
 import { projectsApi } from './services/api/projects'
-import { demoApi, detectionApi, jobsApi, externalApi, exportsApi, qaApi, segmentationApi } from './services/api'
+import { analysisApi, demoApi, detectionApi, jobsApi, externalApi, exportsApi, qaApi, segmentationApi } from './services/api'
+import { ChangeDetectionPanel } from './components/analysis/ChangeDetectionPanel'
 import { DetectionLab } from './components/detection/DetectionLab'
 import { ExportCenter } from './components/exports/ExportCenter'
 import { AreaPanel } from './components/project/AreaPanel'
 import { ProjectPanel } from './components/project/ProjectPanel'
 import type {
   ApiError,
+  ChangeDetectionSummary,
   DatasetCreateResponse,
   DatasetListResponse,
   DetectionQaResult,
@@ -96,6 +98,13 @@ function App(): JSX.Element {
   const [providerCapabilities, setProviderCapabilities] = useState<ProviderCapability[]>([])
   const [loadingCapabilities, setLoadingCapabilities] = useState(false)
   const [capabilitiesError, setCapabilitiesError] = useState<string | null>(null)
+  const [changeSourceDatasetId, setChangeSourceDatasetId] = useState('')
+  const [changeTargetDatasetId, setChangeTargetDatasetId] = useState('')
+  const [changeIouThreshold, setChangeIouThreshold] = useState(0.8)
+  const [changeIncludeUnchanged, setChangeIncludeUnchanged] = useState(true)
+  const [runningChangeDetection, setRunningChangeDetection] = useState(false)
+  const [changeDetectionResult, setChangeDetectionResult] = useState<ChangeDetectionSummary | null>(null)
+  const [changeDetectionError, setChangeDetectionError] = useState<string | null>(null)
   const [detectionModels, setDetectionModels] = useState<DetectionModelCapability[]>([])
   const [loadingDetectionModels, setLoadingDetectionModels] = useState(false)
   const [detectionModelError, setDetectionModelError] = useState<string | null>(null)
@@ -231,7 +240,10 @@ function App(): JSX.Element {
     () => segmentationModels.find((model) => model.model_id === selectedSegmentationModelId) ?? null,
     [segmentationModels, selectedSegmentationModelId],
   )
-  const mapFeatureCollection = useMemo(() => segmentationGeoJson ?? detectionGeoJson ?? datasetContent, [segmentationGeoJson, detectionGeoJson, datasetContent])
+  const mapFeatureCollection = useMemo(
+    () => changeDetectionResult?.geojson ?? segmentationGeoJson ?? detectionGeoJson ?? datasetContent,
+    [changeDetectionResult, segmentationGeoJson, detectionGeoJson, datasetContent],
+  )
   const isRasterTileInputValid = useMemo(
     () => rasterTileSize > 0 && rasterTileOverlap >= 0 && rasterTileOverlap < rasterTileSize,
     [rasterTileSize, rasterTileOverlap],
@@ -1119,6 +1131,51 @@ function App(): JSX.Element {
     }
   }
 
+  const runChangeDetection = async () => {
+    const sourceDatasetId = changeSourceDatasetId || availableVectorDatasets[0]?.id
+    const targetDatasetId =
+      changeTargetDatasetId || availableVectorDatasets.find((dataset) => dataset.id !== sourceDatasetId)?.id
+    if (!sourceDatasetId || !targetDatasetId) {
+      setChangeDetectionError('Select two vector datasets')
+      return
+    }
+    if (sourceDatasetId === targetDatasetId) {
+      setChangeDetectionError('Source and target datasets must differ')
+      return
+    }
+    if (changeIouThreshold < 0 || changeIouThreshold > 1) {
+      setChangeDetectionError('IoU threshold must be between 0 and 1')
+      return
+    }
+    setChangeDetectionError(null)
+    setChangeDetectionResult(null)
+    setRunningChangeDetection(true)
+    try {
+      const job = await analysisApi.runChangeDetection({
+        source_dataset_id: sourceDatasetId,
+        target_dataset_id: targetDatasetId,
+        iou_threshold: changeIouThreshold,
+        include_unchanged: changeIncludeUnchanged,
+      })
+      if (job.status !== 'success') {
+        throw new Error(job.error_message || 'Change detection job failed')
+      }
+      if (!job.result_json) {
+        throw new Error('Change detection completed without result payload')
+      }
+      setChangeSourceDatasetId(sourceDatasetId)
+      setChangeTargetDatasetId(targetDatasetId)
+      setChangeDetectionResult(job.result_json)
+      if (selectedProjectId) {
+        await loadDatasetJobs(selectedProjectId, sourceDatasetId)
+      }
+    } catch (error) {
+      setChangeDetectionError(formatError(error, 'Change detection failed'))
+    } finally {
+      setRunningChangeDetection(false)
+    }
+  }
+
   const runDetectionQa = async () => {
     if (!selectedDetectionRunId) {
       setDetectionQaError('Select a detection run')
@@ -1280,6 +1337,22 @@ function App(): JSX.Element {
           onRefresh={loadCapabilities}
         />
 
+        <ChangeDetectionPanel
+          vectorDatasets={availableVectorDatasets}
+          sourceDatasetId={changeSourceDatasetId}
+          targetDatasetId={changeTargetDatasetId}
+          iouThreshold={changeIouThreshold}
+          includeUnchanged={changeIncludeUnchanged}
+          running={runningChangeDetection}
+          result={changeDetectionResult}
+          error={changeDetectionError}
+          onSourceDatasetChange={setChangeSourceDatasetId}
+          onTargetDatasetChange={setChangeTargetDatasetId}
+          onIouThresholdChange={setChangeIouThreshold}
+          onIncludeUnchangedChange={setChangeIncludeUnchanged}
+          onRun={runChangeDetection}
+        />
+
         <DetectionLab
           detectionModels={detectionModels}
           loadingDetectionModels={loadingDetectionModels}