Status: {segmentationRunResult.status === 'completed' ? 'afgerond' : segmentationRunResult.status}
diff --git a/frontend/src/components/shell/WorkbenchNavigation.tsx b/frontend/src/components/shell/WorkbenchNavigation.tsx
index 6edf8ef6..a3c4e39e 100644
--- a/frontend/src/components/shell/WorkbenchNavigation.tsx
+++ b/frontend/src/components/shell/WorkbenchNavigation.tsx
@@ -15,6 +15,7 @@ import { GeoIntelMark } from '../brand/GeoIntelBrand'
export interface WorkspaceNavigationItem {
key: WorkspaceKey
label: string
+ navigationLabel?: string
description: string
}
@@ -78,7 +79,7 @@ export function WorkbenchNavigation({
data-testid={`workspace-nav-${item.key}`}
>
-
{item.label}
+
{item.navigationLabel ?? item.label}
)
})}
diff --git a/frontend/src/hooks/useCoverageResolver.test.tsx b/frontend/src/hooks/useCoverageResolver.test.tsx
index 53cd47af..88f7f5e5 100644
--- a/frontend/src/hooks/useCoverageResolver.test.tsx
+++ b/frontend/src/hooks/useCoverageResolver.test.tsx
@@ -85,6 +85,28 @@ describe('useCoverageResolver', () => {
expect(result.current.coverageDurationMs).toBeNull()
})
+ it('clears stale coverage as soon as a different selection starts resolving', async () => {
+ const nextBbox = { ...bbox, min_x: 5.1, max_x: 5.2 }
+ const { result, rerender } = renderHook(
+ ({ selection }) => useCoverageResolver({ projectId: 'project-1', bbox: selection }),
+ { initialProps: { selection: bbox } },
+ )
+
+ await act(async () => {
+ await vi.advanceTimersByTimeAsync(250)
+ })
+ expect(result.current.coverage).toEqual(coverageResult)
+
+ rerender({ selection: nextBbox })
+
+ expect(result.current.coverage).toBeNull()
+ expect(result.current.loadingCoverage).toBe(true)
+ await act(async () => {
+ await vi.advanceTimersByTimeAsync(249)
+ })
+ expect(mocks.resolveCoverage).toHaveBeenCalledTimes(1)
+ })
+
it('exposes provider failures without retaining stale results', async () => {
mocks.resolveCoverage.mockRejectedValueOnce(new Error('provider unavailable'))
const { result } = renderHook(() => useCoverageResolver({ projectId: 'project-1', bbox }))
diff --git a/frontend/src/hooks/useCoverageResolver.ts b/frontend/src/hooks/useCoverageResolver.ts
index cd00865c..80182dbc 100644
--- a/frontend/src/hooks/useCoverageResolver.ts
+++ b/frontend/src/hooks/useCoverageResolver.ts
@@ -26,11 +26,14 @@ export function useCoverageResolver({ projectId, bbox }: CoverageResolverOptions
return
}
let cancelled = false
+ // A new AOI must never temporarily display the previous AOI's coverage.
+ // Clear immediately; the debounce only postpones the network request.
+ setCoverage(null)
+ setCoverageError(null)
+ setLoadingCoverage(true)
+ setCoverageDurationMs(null)
const timer = window.setTimeout(() => {
const startedAt = Date.now()
- setLoadingCoverage(true)
- setCoverageError(null)
- setCoverageDurationMs(null)
externalApi.resolveCoverage({
projectId,
bbox: {
diff --git a/frontend/src/hooks/useDetectionWorkflow.test.tsx b/frontend/src/hooks/useDetectionWorkflow.test.tsx
new file mode 100644
index 00000000..96929a9f
--- /dev/null
+++ b/frontend/src/hooks/useDetectionWorkflow.test.tsx
@@ -0,0 +1,301 @@
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { DetectionRunRead, JobRead, YoloPreflightResponse } from '../types'
+
+const mocks = vi.hoisted(() => ({
+ listModels: vi.fn(),
+ listModelAssets: vi.fn(),
+ getYoloPreflight: vi.fn(),
+ runAsync: vi.fn(),
+ listRuns: vi.fn(),
+ listDetections: vi.fn(),
+ getRunGeoJson: vi.fn(),
+ getRun: vi.fn(),
+ compareWithReference: vi.fn(),
+ rasterInspect: vi.fn(),
+ rasterTile: vi.fn(),
+ upload: vi.fn(),
+}))
+
+vi.mock('../services/api', () => ({
+ detectionApi: {
+ listModels: mocks.listModels,
+ listModelAssets: mocks.listModelAssets,
+ getYoloPreflight: mocks.getYoloPreflight,
+ runAsync: mocks.runAsync,
+ listRuns: mocks.listRuns,
+ listDetections: mocks.listDetections,
+ getRunGeoJson: mocks.getRunGeoJson,
+ getRun: mocks.getRun,
+ compareWithReference: mocks.compareWithReference,
+ },
+ datasetsApi: {
+ rasterInspect: mocks.rasterInspect,
+ rasterTile: mocks.rasterTile,
+ upload: mocks.upload,
+ },
+}))
+
+import { useDetectionWorkflow } from './useDetectionWorkflow'
+
+const projectId = 'project-1'
+const datasetId = 'dataset-1'
+const jobId = 'job-1'
+const analysisRunId = 'run-1'
+
+const completedJob: JobRead = {
+ id: jobId,
+ job_type: 'detection.run',
+ status: 'success',
+ project_id: projectId,
+ dataset_id: datasetId,
+ parameters_json: {},
+ result_json: { detection_count: 1 },
+}
+
+const persistedRun: DetectionRunRead = {
+ id: analysisRunId,
+ project_id: projectId,
+ dataset_id: datasetId,
+ job_id: jobId,
+ analysis_type: 'detection',
+ status: 'success',
+ model_name: 'yolo-configured',
+ parameters_json: {},
+ result_json: { detection_count: 1 },
+}
+
+function preflight(acceleratorReady: boolean): YoloPreflightResponse {
+ return {
+ model_id: 'yolo-configured',
+ status: acceleratorReady ? 'ready' : 'accelerator_unavailable',
+ message: acceleratorReady ? 'Gereed' : 'NVIDIA CUDA is niet beschikbaar',
+ checks: {
+ enabled: true,
+ dependencies_available: true,
+ accelerator_ready: acceleratorReady,
+ model_path_set: true,
+ model_file_exists: true,
+ model_load_requested: false,
+ manifest_path_set: true,
+ manifest_valid: true,
+ tile_paths_exist: true,
+ tile_limit_ok: true,
+ },
+ runtime: { dependencies_assumed: false, cuda_available: acceleratorReady },
+ tile_count: 1,
+ max_tiles: 256,
+ will_download_models: false,
+ will_run_inference: acceleratorReady,
+ }
+}
+
+function renderWorkflow() {
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const view = renderHook(() => useDetectionWorkflow({
+ selectedProjectId: projectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }))
+ return { ...view, loadProjectData }
+}
+
+describe('useDetectionWorkflow GPU execution', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mocks.listRuns.mockResolvedValue({ items: [persistedRun], total: 1 })
+ mocks.listDetections.mockResolvedValue({ items: [], total: 1, truncated: false })
+ mocks.getRunGeoJson.mockResolvedValue({ type: 'FeatureCollection', features: [] })
+ mocks.listModels.mockResolvedValue({
+ models: [{
+ model_id: 'yolo-configured',
+ display_name: 'YOLO',
+ framework: 'ultralytics/pytorch',
+ task_type: 'object_detection',
+ supported_classes: ['building'],
+ configured: true,
+ status: 'configured',
+ limitation_message: '',
+ operator_review_required: true,
+ }],
+ })
+ mocks.listModelAssets.mockResolvedValue({ items: [], total: 0, model_directory: '/models' })
+ })
+
+ it('queues, follows and loads a persisted result without a synchronous inference fallback', async () => {
+ mocks.runAsync.mockResolvedValue(completedJob)
+ const { result, loadProjectData } = renderWorkflow()
+
+ act(() => {
+ result.current.setSelectedDetectionDatasetId(datasetId)
+ result.current.setDetectionTileManifestPath('/tiles/manifest.json')
+ })
+ await act(async () => {
+ await result.current.runDetection()
+ })
+
+ expect(mocks.runAsync).toHaveBeenCalledWith(expect.objectContaining({
+ project_id: projectId,
+ dataset_id: datasetId,
+ model_id: 'yolo-configured',
+ tile_manifest_path: '/tiles/manifest.json',
+ }))
+ expect(result.current.detectionJob?.status).toBe('success')
+ expect(result.current.detectionRunResult).toMatchObject({
+ analysis_run_id: analysisRunId,
+ job_id: jobId,
+ detection_count: 1,
+ status: 'success',
+ })
+ expect(result.current.detectionWorkflowStage).toBe('complete')
+ expect(result.current.detectionRunError).toBeNull()
+ expect(loadProjectData).toHaveBeenCalledWith(projectId)
+ })
+
+ it('blocks the queue when preflight says the NVIDIA accelerator is unavailable', async () => {
+ mocks.getYoloPreflight.mockResolvedValue(preflight(false))
+ const { result } = renderWorkflow()
+
+ await act(async () => {
+ await result.current.loadDetectionModels()
+ })
+ act(() => {
+ result.current.setSelectedDetectionDatasetId(datasetId)
+ result.current.setDetectionTileManifestPath('/tiles/manifest.json')
+ })
+ await act(async () => {
+ await result.current.prepareAndRunDetection()
+ })
+
+ expect(mocks.runAsync).not.toHaveBeenCalled()
+ expect(result.current.detectionWorkflowStage).toBe('failed')
+ expect(result.current.detectionRunError).toContain('NVIDIA CUDA')
+ })
+
+ it('does not let a late run list from another project overwrite the active project', async () => {
+ let resolveOlder!: (value: { items: DetectionRunRead[]; total: number }) => void
+ let resolveNewer!: (value: { items: DetectionRunRead[]; total: number }) => void
+ mocks.listRuns
+ .mockReturnValueOnce(new Promise((resolve) => { resolveOlder = resolve }))
+ .mockReturnValueOnce(new Promise((resolve) => { resolveNewer = resolve }))
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const { result, rerender } = renderHook(
+ ({ selectedProjectId }) => useDetectionWorkflow({
+ selectedProjectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }),
+ { initialProps: { selectedProjectId: 'project-1' } },
+ )
+
+ let olderRequest!: Promise
+ let newerRequest!: Promise
+ act(() => { olderRequest = result.current.loadDetectionRuns('project-1') })
+ rerender({ selectedProjectId: 'project-2' })
+ act(() => { newerRequest = result.current.loadDetectionRuns('project-2') })
+
+ const projectTwoRun = { ...persistedRun, id: 'run-2', project_id: 'project-2' }
+ await act(async () => {
+ resolveNewer({ items: [projectTwoRun], total: 1 })
+ await newerRequest
+ })
+ await act(async () => {
+ resolveOlder({ items: [persistedRun], total: 1 })
+ await olderRequest
+ })
+
+ expect(result.current.detectionRuns).toEqual([projectTwoRun])
+ expect(result.current.selectedDetectionRunId).toBe('run-2')
+ })
+
+ it('does not let late detection results from another project overwrite the active project', async () => {
+ type DetectionList = { items: Array<{ id: string }>; total: number; truncated: boolean }
+ type DetectionGeoJson = { type: 'FeatureCollection'; features: Array<{ id: string }> }
+ let resolveOlderList!: (value: DetectionList) => void
+ let resolveNewerList!: (value: DetectionList) => void
+ let resolveOlderGeoJson!: (value: DetectionGeoJson) => void
+ let resolveNewerGeoJson!: (value: DetectionGeoJson) => void
+ mocks.listDetections
+ .mockReturnValueOnce(new Promise((resolve) => { resolveOlderList = resolve }))
+ .mockReturnValueOnce(new Promise((resolve) => { resolveNewerList = resolve }))
+ mocks.getRunGeoJson
+ .mockReturnValueOnce(new Promise((resolve) => { resolveOlderGeoJson = resolve }))
+ .mockReturnValueOnce(new Promise((resolve) => { resolveNewerGeoJson = resolve }))
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const { result, rerender } = renderHook(
+ ({ selectedProjectId }) => useDetectionWorkflow({
+ selectedProjectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }),
+ { initialProps: { selectedProjectId: 'project-1' } },
+ )
+
+ let olderRequest!: Promise
+ let newerRequest!: Promise
+ act(() => { olderRequest = result.current.loadDetectionResults('run-1') })
+ rerender({ selectedProjectId: 'project-2' })
+ act(() => { newerRequest = result.current.loadDetectionResults('run-2') })
+
+ await act(async () => {
+ resolveNewerList({ items: [{ id: 'result-2' }], total: 1, truncated: false })
+ resolveNewerGeoJson({ type: 'FeatureCollection', features: [{ id: 'feature-2' }] })
+ await newerRequest
+ })
+ await act(async () => {
+ resolveOlderList({ items: [{ id: 'result-1' }], total: 1, truncated: false })
+ resolveOlderGeoJson({ type: 'FeatureCollection', features: [{ id: 'feature-1' }] })
+ await olderRequest
+ })
+
+ expect(result.current.detectionItems).toEqual([{ id: 'result-2' }])
+ expect(result.current.detectionGeoJson).toEqual({
+ type: 'FeatureCollection',
+ features: [{ id: 'feature-2' }],
+ })
+ expect(result.current.loadingDetectionResults).toBe(false)
+ })
+
+ it('drops a late queue response when the user has already changed project', async () => {
+ let resolveQueuedJob!: (value: JobRead) => void
+ mocks.runAsync.mockReturnValue(new Promise((resolve) => { resolveQueuedJob = resolve }))
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const { result, rerender } = renderHook(
+ ({ selectedProjectId }) => useDetectionWorkflow({
+ selectedProjectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }),
+ { initialProps: { selectedProjectId: 'project-1' } },
+ )
+ act(() => {
+ result.current.setSelectedDetectionDatasetId(datasetId)
+ result.current.setDetectionTileManifestPath('/tiles/manifest.json')
+ })
+
+ let request!: Promise
+ act(() => { request = result.current.runDetection() })
+ rerender({ selectedProjectId: 'project-2' })
+ await act(async () => {
+ resolveQueuedJob(completedJob)
+ await request
+ })
+
+ expect(result.current.detectionJob).toBeNull()
+ expect(result.current.detectionRunResult).toBeNull()
+ expect(result.current.runningDetection).toBe(false)
+ expect(mocks.getRun).not.toHaveBeenCalled()
+ })
+})
diff --git a/frontend/src/hooks/useDetectionWorkflow.ts b/frontend/src/hooks/useDetectionWorkflow.ts
index 7b6bd5c2..986bbe64 100644
--- a/frontend/src/hooks/useDetectionWorkflow.ts
+++ b/frontend/src/hooks/useDetectionWorkflow.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { datasetsApi, detectionApi } from '../services/api'
import type {
DatasetCreateResponse,
@@ -13,6 +13,12 @@ import type {
YoloPreflightResponse,
} from '../types'
import { formatError } from '../lib/formatError'
+import {
+ analysisRunIdFromJob,
+ completedDetectionResponse,
+ DetectionJobError,
+ waitForDetectionJob,
+} from '../services/detectionJob'
interface DetectionWorkflowOptions {
selectedProjectId: string | null
@@ -88,6 +94,16 @@ function rasterTileCount(metadata: Record, tileSize: number, ov
return Math.ceil(width / step) * Math.ceil(height / step)
}
+function isAbortError(error: unknown): boolean {
+ return error instanceof Error && error.name === 'AbortError'
+}
+
+function abortedError(): Error {
+ const error = new Error('Het volgen van de detectietaak is gestopt')
+ error.name = 'AbortError'
+ return error
+}
+
export function useDetectionWorkflow({
selectedProjectId,
rasterDatasets,
@@ -106,6 +122,7 @@ export function useDetectionWorkflow({
const [detectionTileManifestPath, setDetectionTileManifestPath] = useState('')
const [detectionConfidenceThreshold, setDetectionConfidenceThreshold] = useState(0.15)
const [runningDetection, setRunningDetection] = useState(false)
+ const [detectionJob, setDetectionJob] = useState(null)
const [detectionRunResult, setDetectionRunResult] = useState(null)
const [detectionRunError, setDetectionRunError] = useState(null)
const [detectionRuns, setDetectionRuns] = useState([])
@@ -130,6 +147,36 @@ export function useDetectionWorkflow({
const [detectionCalibrationRows, setDetectionCalibrationRows] = useState([])
const [detectionCalibrationError, setDetectionCalibrationError] = useState(null)
const [detectionWorkflowStage, setDetectionWorkflowStage] = useState('idle')
+ const activeDetectionControllerRef = useRef(null)
+ const selectedProjectIdRef = useRef(selectedProjectId)
+ const detectionExecutionSequence = useRef(0)
+ const detectionRunsRequestSequence = useRef(0)
+ const detectionResultsRequestSequence = useRef(0)
+ const detectionQaRequestSequence = useRef(0)
+ const detectionCalibrationSequence = useRef(0)
+ selectedProjectIdRef.current = selectedProjectId
+
+ useEffect(() => {
+ activeDetectionControllerRef.current?.abort()
+ activeDetectionControllerRef.current = null
+ detectionExecutionSequence.current += 1
+ detectionQaRequestSequence.current += 1
+ detectionCalibrationSequence.current += 1
+ setDetectionJob(null)
+ setRunningDetection(false)
+ setDetectionRunResult(null)
+ setDetectionRunError(null)
+ setDetectionWorkflowStage('idle')
+ setDetectionQaResult(null)
+ setDetectionQaError(null)
+ setRunningDetectionQa(false)
+ setDetectionCalibrationRows([])
+ setDetectionCalibrationError(null)
+ setRunningDetectionCalibration(false)
+ return () => {
+ activeDetectionControllerRef.current?.abort()
+ }
+ }, [selectedProjectId])
const loadDetectionModels = async () => {
setLoadingDetectionModels(true)
@@ -187,26 +234,36 @@ export function useDetectionWorkflow({
}
const loadDetectionRuns = async (projectId = selectedProjectId) => {
+ const sequence = detectionRunsRequestSequence.current + 1
+ detectionRunsRequestSequence.current = sequence
if (!projectId) {
setDetectionRuns([])
return
}
try {
const response = await detectionApi.listRuns({ project_id: projectId })
+ if (
+ detectionRunsRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== projectId
+ ) return
setDetectionRuns(response.items)
- if (!selectedDetectionRunId && response.items.length > 0) {
- setSelectedDetectionRunId(response.items[0].id)
- }
+ setSelectedDetectionRunId((current) => current || response.items[0]?.id || '')
} catch (error) {
- setDetectionRunError(formatError(error, 'De detectieruns konden niet worden geladen'))
+ if (
+ detectionRunsRequestSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setDetectionRunError(formatError(error, 'De detectieruns konden niet worden geladen'))
+ }
}
}
const loadDetectionResults = async (analysisRunId = selectedDetectionRunId) => {
- if (!analysisRunId) {
+ const sequence = detectionResultsRequestSequence.current + 1
+ detectionResultsRequestSequence.current = sequence
+ const requestProjectId = selectedProjectIdRef.current
+ if (!analysisRunId || !requestProjectId) {
setDetectionItems([])
- setDetectionTotal(0)
- setDetectionTruncated(false)
setDetectionTotal(0)
setDetectionTruncated(false)
setDetectionGeoJson(null)
@@ -216,7 +273,7 @@ export function useDetectionWorkflow({
setDetectionRunError(null)
try {
const params = {
- project_id: selectedProjectId ?? '',
+ project_id: requestProjectId,
class_name: detectionClassFilter || null,
min_confidence: detectionMinConfidenceFilter > 0 ? detectionMinConfidenceFilter : null,
}
@@ -224,14 +281,28 @@ export function useDetectionWorkflow({
detectionApi.listDetections(analysisRunId, params),
detectionApi.getRunGeoJson(analysisRunId, params),
])
+ if (
+ detectionResultsRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== requestProjectId
+ ) return
setDetectionItems(detectionsResponse.items)
setDetectionTotal(detectionsResponse.total)
setDetectionTruncated(Boolean(detectionsResponse.truncated))
setDetectionGeoJson(geoJsonResponse)
} catch (error) {
- setDetectionRunError(formatError(error, 'De detectieresultaten konden niet worden geladen'))
+ if (
+ detectionResultsRequestSequence.current === sequence
+ && selectedProjectIdRef.current === requestProjectId
+ ) {
+ setDetectionRunError(formatError(error, 'De detectieresultaten konden niet worden geladen'))
+ }
} finally {
- setLoadingDetectionResults(false)
+ if (
+ detectionResultsRequestSequence.current === sequence
+ && selectedProjectIdRef.current === requestProjectId
+ ) {
+ setLoadingDetectionResults(false)
+ }
}
}
@@ -241,23 +312,91 @@ export function useDetectionWorkflow({
manifestPath: string | null,
modelId = selectedDetectionModelId,
modelAssetId = selectedModelAssetId,
+ confidenceThreshold = detectionConfidenceThreshold,
+ parametersJson: Record = {},
) => {
- const result = await detectionApi.run({
+ if (
+ (activeDetectionControllerRef.current && !activeDetectionControllerRef.current.signal.aborted)
+ || detectionJob?.status === 'queued'
+ || detectionJob?.status === 'running'
+ ) {
+ throw new DetectionJobError(
+ 'Er wordt al een GPU-detectietaak gevolgd. Wacht tot die taak klaar is voordat u een nieuwe start.',
+ 'DETECTION_JOB_ALREADY_ACTIVE',
+ detectionJob?.id ?? 'unknown',
+ )
+ }
+
+ const request = {
project_id: projectId,
dataset_id: datasetId,
model_id: modelId,
model_asset_id: modelAssetId || null,
- confidence_threshold: detectionConfidenceThreshold,
+ confidence_threshold: confidenceThreshold,
tile_manifest_path: manifestPath,
- parameters_json: {},
- })
- setDetectionRunResult(result)
- setSelectedDetectionRunId(result.analysis_run_id)
- setDetectionWorkflowStage('loading')
- await loadDetectionRuns(projectId)
- await loadDetectionResults(result.analysis_run_id)
- await loadProjectData(projectId)
- return result
+ parameters_json: parametersJson,
+ }
+ const controller = new AbortController()
+ const executionSequence = detectionExecutionSequence.current + 1
+ detectionExecutionSequence.current = executionSequence
+ activeDetectionControllerRef.current = controller
+ const assertExecutionCurrent = () => {
+ if (
+ controller.signal.aborted
+ || detectionExecutionSequence.current !== executionSequence
+ || selectedProjectIdRef.current !== projectId
+ ) {
+ throw abortedError()
+ }
+ }
+ try {
+ setDetectionJob(null)
+ const queuedJob = await detectionApi.runAsync(request)
+ assertExecutionCurrent()
+ setDetectionJob(queuedJob)
+ const completedJob = await waitForDetectionJob({
+ projectId,
+ initialJob: queuedJob,
+ signal: controller.signal,
+ onStatus: (job) => {
+ if (
+ detectionExecutionSequence.current === executionSequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setDetectionJob(job)
+ }
+ },
+ })
+ assertExecutionCurrent()
+ const explicitAnalysisRunId = analysisRunIdFromJob(completedJob)
+ const run = explicitAnalysisRunId
+ ? await detectionApi.getRun(explicitAnalysisRunId, projectId)
+ : (await detectionApi.listRuns({ project_id: projectId, dataset_id: datasetId })).items
+ .find((candidate) => candidate.job_id === completedJob.id)
+ assertExecutionCurrent()
+ if (!run) {
+ throw new DetectionJobError(
+ 'De GPU-taak is voltooid, maar de bijbehorende bewaarde detectierun ontbreekt.',
+ 'DETECTION_RUN_RESULT_NOT_FOUND',
+ completedJob.id,
+ )
+ }
+ const result = completedDetectionResponse(request, completedJob, run)
+ setDetectionRunResult(result)
+ setSelectedDetectionRunId(result.analysis_run_id)
+ setDetectionWorkflowStage('loading')
+ await loadDetectionRuns(projectId)
+ assertExecutionCurrent()
+ await loadDetectionResults(result.analysis_run_id)
+ assertExecutionCurrent()
+ await loadProjectData(projectId)
+ assertExecutionCurrent()
+ return result
+ } finally {
+ if (activeDetectionControllerRef.current === controller) {
+ activeDetectionControllerRef.current = null
+ }
+ }
}
const runDetection = async () => {
@@ -265,6 +404,7 @@ export function useDetectionWorkflow({
setDetectionRunError('Kies eerst een werkruimte')
return
}
+ const projectId = selectedProjectId
const datasetId = selectedDetectionDatasetId
if (!datasetId) {
setDetectionRunError('Kies eerst een rasterbron')
@@ -275,13 +415,19 @@ export function useDetectionWorkflow({
setRunningDetection(true)
setDetectionWorkflowStage('detecting')
try {
- await executeDetection(selectedProjectId, datasetId, detectionTileManifestPath.trim() || null)
- setDetectionWorkflowStage('complete')
+ await executeDetection(projectId, datasetId, detectionTileManifestPath.trim() || null)
+ if (selectedProjectIdRef.current === projectId) {
+ setDetectionWorkflowStage('complete')
+ }
} catch (error) {
- setDetectionRunError(formatError(error, 'Detection run failed'))
- setDetectionWorkflowStage('failed')
+ if (!isAbortError(error) && selectedProjectIdRef.current === projectId) {
+ setDetectionRunError(formatError(error, 'Detection run failed'))
+ setDetectionWorkflowStage('failed')
+ }
} finally {
- setRunningDetection(false)
+ if (selectedProjectIdRef.current === projectId) {
+ setRunningDetection(false)
+ }
}
}
@@ -290,10 +436,11 @@ export function useDetectionWorkflow({
setDetectionRunError('De regionale werkruimte is nog niet geladen')
return false
}
+ const projectId = selectedProjectId
setDetectionRunError(null)
setDetectionWorkflowStage('uploading')
try {
- const dataset = await datasetsApi.upload(selectedProjectId, {
+ const dataset = await datasetsApi.upload(projectId, {
file,
datasetType: 'raster',
source: 'user_upload',
@@ -302,15 +449,19 @@ export function useDetectionWorkflow({
sourceMetadataJson: JSON.stringify({ purpose: 'building_detection' }),
provenanceMetadataJson: JSON.stringify({ original_filename: file.name, acquisition: 'explicit_user_upload' }),
})
+ if (selectedProjectIdRef.current !== projectId) throw abortedError()
setSelectedDetectionDatasetId(dataset.id)
setDetectionTileManifestPath('')
setDetectionRunResult(null)
setDetectionWorkflowStage('ready')
- await loadProjectData(selectedProjectId)
+ await loadProjectData(projectId)
+ if (selectedProjectIdRef.current !== projectId) throw abortedError()
return true
} catch (error) {
- setDetectionRunError(formatError(error, 'Het luchtbeeld kon niet worden toegevoegd'))
- setDetectionWorkflowStage('failed')
+ if (!isAbortError(error) && selectedProjectIdRef.current === projectId) {
+ setDetectionRunError(formatError(error, 'Het luchtbeeld kon niet worden toegevoegd'))
+ setDetectionWorkflowStage('failed')
+ }
return false
}
}
@@ -323,6 +474,10 @@ export function useDetectionWorkflow({
setDetectionRunError('De regionale werkruimte is nog niet geladen')
return null
}
+ const projectId = selectedProjectId
+ const assertProjectCurrent = () => {
+ if (selectedProjectIdRef.current !== projectId) throw abortedError()
+ }
const datasetId = datasetIdOverride || selectedDetectionDatasetId
if (!datasetId) {
setDetectionRunError('Kies of voeg eerst een gegeorefereerd luchtbeeld toe')
@@ -334,7 +489,7 @@ export function useDetectionWorkflow({
: selectedModelAssetId
const selectedModel = detectionModels.find((model) => model.model_id === effectiveModelId)
if (!selectedModel?.configured || effectiveModelId === 'manual-fixture-detector') {
- setDetectionRunError(selectedModel?.limitation_message ?? 'Het gekozen analysemodel is niet beschikbaar')
+ setDetectionRunError('Het gekozen productie-analysemodel is niet beschikbaar; vernieuw de modelstatus en controleer de serverconfiguratie')
return null
}
if (effectiveModelId === 'yolo-configured' && modelAssets.length > 0 && !effectiveModelAssetId) {
@@ -349,7 +504,8 @@ export function useDetectionWorkflow({
let manifestPath = detectionTileManifestPath.trim()
if (!manifestPath) {
setDetectionWorkflowStage('tiling')
- const inspection = await datasetsApi.rasterInspect(selectedProjectId, datasetId)
+ const inspection = await datasetsApi.rasterInspect(projectId, datasetId)
+ assertProjectCurrent()
const expectedTileCount = rasterTileCount(inspection.metadata, 512, 64)
const maxTiles = yoloPreflight?.max_tiles ?? 256
if (expectedTileCount === null) {
@@ -360,10 +516,11 @@ export function useDetectionWorkflow({
`Dit luchtbeeld zou ${expectedTileCount} beeldtegels maken; het veilige maximum is ${maxTiles}. Knip het beeld eerst tot het gewenste werkgebied.`,
)
}
- const tileJob = await datasetsApi.rasterTile(selectedProjectId, datasetId, {
+ const tileJob = await datasetsApi.rasterTile(projectId, datasetId, {
tile_size: 512,
overlap: 64,
})
+ assertProjectCurrent()
manifestPath = tileManifestPathFromJob(tileJob) ?? ''
if (!manifestPath) {
throw new Error(tileJob.error_message || 'De tegelvoorbereiding leverde geen geldig manifest op')
@@ -376,6 +533,7 @@ export function useDetectionWorkflow({
tile_manifest_path: manifestPath,
model_asset_id: effectiveModelAssetId || null,
})
+ assertProjectCurrent()
setYoloPreflight(preflight)
setYoloPreflightError(null)
if (
@@ -383,6 +541,7 @@ export function useDetectionWorkflow({
!preflight.checks.tile_paths_exist ||
!preflight.checks.tile_limit_ok ||
!preflight.checks.dependencies_available ||
+ preflight.checks.accelerator_ready !== true ||
!preflight.checks.model_file_exists
) {
throw new Error(preflight.message || 'De beeldtegels of modelruntime zijn niet startklaar')
@@ -390,20 +549,25 @@ export function useDetectionWorkflow({
setDetectionWorkflowStage('detecting')
const result = await executeDetection(
- selectedProjectId,
+ projectId,
datasetId,
manifestPath,
effectiveModelId,
effectiveModelAssetId,
)
+ assertProjectCurrent()
setDetectionWorkflowStage('complete')
return result
} catch (error) {
- setDetectionRunError(formatError(error, 'De beeldanalyse is mislukt'))
- setDetectionWorkflowStage('failed')
+ if (!isAbortError(error) && selectedProjectIdRef.current === projectId) {
+ setDetectionRunError(formatError(error, 'De beeldanalyse is mislukt'))
+ setDetectionWorkflowStage('failed')
+ }
return null
} finally {
- setRunningDetection(false)
+ if (selectedProjectIdRef.current === projectId) {
+ setRunningDetection(false)
+ }
}
}
@@ -421,26 +585,51 @@ export function useDetectionWorkflow({
setDetectionQaError('Kies eerst een referentiebron')
return null
}
+ const projectId = selectedProjectIdRef.current
+ if (!projectId) {
+ setDetectionQaError('Kies eerst een werkruimte')
+ return null
+ }
+ const sequence = detectionQaRequestSequence.current + 1
+ detectionQaRequestSequence.current = sequence
setSelectedDetectionRunId(analysisRunId)
setDetectionReferenceDatasetId(referenceDatasetId)
setDetectionQaError(null)
setDetectionQaResult(null)
setRunningDetectionQa(true)
try {
- const result = await detectionApi.compareWithReference(analysisRunId, selectedProjectId!, {
+ const result = await detectionApi.compareWithReference(analysisRunId, projectId, {
reference_dataset_id: referenceDatasetId,
iou_threshold: iouThresholdOverride ?? qaIouThreshold,
class_name: useCurrentFilters ? detectionClassFilter || null : null,
min_confidence: useCurrentFilters && detectionMinConfidenceFilter > 0 ? detectionMinConfidenceFilter : null,
})
+ if (
+ detectionQaRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== projectId
+ ) return null
setDetectionQaResult(result)
- await loadQualityChecks(selectedProjectId)
+ await loadQualityChecks(projectId)
+ if (
+ detectionQaRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== projectId
+ ) return null
return result
} catch (error) {
- setDetectionQaError(formatError(error, 'Detection QA failed'))
+ if (
+ detectionQaRequestSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setDetectionQaError(formatError(error, 'Detection QA failed'))
+ }
return null
} finally {
- setRunningDetectionQa(false)
+ if (
+ detectionQaRequestSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setRunningDetectionQa(false)
+ }
}
}
@@ -452,6 +641,7 @@ export function useDetectionWorkflow({
setDetectionCalibrationError('Kies eerst een werkruimte om te kalibreren')
return
}
+ const projectId = selectedProjectId
const datasetId = selectedDetectionDatasetId
if (!datasetId) {
setDetectionCalibrationError('Kies eerst een rasterbron om te kalibreren')
@@ -461,13 +651,14 @@ export function useDetectionWorkflow({
setDetectionCalibrationError('Kies eerst een referentiebron om te kalibreren')
return
}
+ const referenceDatasetId = detectionReferenceDatasetId
const selectedModel = detectionModels.find((model) => model.model_id === selectedDetectionModelId)
if (!selectedModel?.configured || selectedDetectionModelId === 'manual-fixture-detector') {
setDetectionCalibrationError('Kies eerst een geconfigureerd detectiemodel; testgegevens kunnen niet gekalibreerd worden')
return
}
if (selectedDetectionModelId === 'yolo-configured' && !detectionTileManifestPath.trim()) {
- setDetectionCalibrationError('Configured YOLO calibration requires a tile manifest')
+ setDetectionCalibrationError('Kalibratie met YOLO vereist een beeldtegelmanifest')
return
}
if (selectedDetectionModelId === 'yolo-configured' && modelAssets.length > 0 && !selectedModelAssetId) {
@@ -476,9 +667,17 @@ export function useDetectionWorkflow({
}
const thresholds = parseCalibrationThresholds(calibrationThresholdText)
if (thresholds.length === 0) {
- setDetectionCalibrationError('Provide at least one valid threshold between 0 and 1')
+ setDetectionCalibrationError('Geef minstens één geldige drempel tussen 0 en 1 op')
return
}
+ const sequence = detectionCalibrationSequence.current + 1
+ detectionCalibrationSequence.current = sequence
+ const assertCalibrationCurrent = () => {
+ if (
+ detectionCalibrationSequence.current !== sequence
+ || selectedProjectIdRef.current !== projectId
+ ) throw abortedError()
+ }
setDetectionCalibrationError(null)
setDetectionCalibrationRows(thresholds.map((threshold) => ({ threshold, status: 'queued' })))
setRunningDetectionCalibration(true)
@@ -492,24 +691,28 @@ export function useDetectionWorkflow({
setDetectionCalibrationRows((rows) =>
rows.map((row) => ({ ...row, status: 'running', message: 'Eén inferentie voor alle drempels' })),
)
- const result = await detectionApi.run({
- project_id: selectedProjectId,
- dataset_id: datasetId,
- model_id: selectedDetectionModelId,
- model_asset_id: selectedModelAssetId || null,
- confidence_threshold: lowestThreshold,
- tile_manifest_path: detectionTileManifestPath.trim() || null,
- parameters_json: { calibration: true, calibration_thresholds: thresholds },
- })
+ setDetectionWorkflowStage('detecting')
+ const result = await executeDetection(
+ projectId,
+ datasetId,
+ detectionTileManifestPath.trim() || null,
+ selectedDetectionModelId,
+ selectedModelAssetId,
+ lowestThreshold,
+ { calibration: true, calibration_thresholds: thresholds },
+ )
+ assertCalibrationCurrent()
+ setDetectionWorkflowStage('complete')
setSelectedDetectionRunId(result.analysis_run_id)
- const qa = await detectionApi.compareWithReference(result.analysis_run_id, selectedProjectId, {
- reference_dataset_id: detectionReferenceDatasetId,
+ const qa = await detectionApi.compareWithReference(result.analysis_run_id, projectId, {
+ reference_dataset_id: referenceDatasetId,
iou_threshold: qaIouThreshold,
class_name: detectionClassFilter || null,
min_confidence: null,
calibration_thresholds: thresholds,
})
+ assertCalibrationCurrent()
const sweep = new Map((qa.calibration_sweep ?? []).map((point) => [point.min_confidence, point]))
setDetectionCalibrationRows((rows) =>
@@ -536,17 +739,31 @@ export function useDetectionWorkflow({
}),
)
- await loadDetectionRuns(selectedProjectId)
- await loadQualityChecks(selectedProjectId)
- await loadProjectData(selectedProjectId)
+ await loadDetectionRuns(projectId)
+ assertCalibrationCurrent()
+ await loadQualityChecks(projectId)
+ assertCalibrationCurrent()
+ await loadProjectData(projectId)
+ assertCalibrationCurrent()
} catch (error) {
- const message = formatError(error, 'Calibration failed')
- setDetectionCalibrationRows((rows) =>
- rows.map((row) => (row.status === 'success' ? row : { ...row, status: 'failed', message })),
- )
- setDetectionCalibrationError(message)
+ if (
+ !isAbortError(error)
+ && detectionCalibrationSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ const message = formatError(error, 'Kalibratie mislukt')
+ setDetectionCalibrationRows((rows) =>
+ rows.map((row) => (row.status === 'success' ? row : { ...row, status: 'failed', message })),
+ )
+ setDetectionCalibrationError(message)
+ }
} finally {
- setRunningDetectionCalibration(false)
+ if (
+ detectionCalibrationSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setRunningDetectionCalibration(false)
+ }
}
}
@@ -557,14 +774,32 @@ export function useDetectionWorkflow({
}
const resetDetectionForProject = () => {
+ detectionExecutionSequence.current += 1
+ detectionRunsRequestSequence.current += 1
+ detectionResultsRequestSequence.current += 1
+ detectionQaRequestSequence.current += 1
+ detectionCalibrationSequence.current += 1
+ activeDetectionControllerRef.current?.abort()
+ activeDetectionControllerRef.current = null
setSelectedDetectionDatasetId('')
setDetectionRuns([])
setSelectedDetectionRunId('')
setDetectionItems([])
+ setDetectionTotal(0)
+ setDetectionTruncated(false)
setDetectionGeoJson(null)
setDetectionRunResult(null)
+ setDetectionJob(null)
+ setDetectionReferenceDatasetId('')
+ setDetectionQaResult(null)
+ setDetectionQaError(null)
+ setRunningDetectionQa(false)
setDetectionCalibrationRows([])
setDetectionCalibrationError(null)
+ setRunningDetectionCalibration(false)
+ setDetectionRunError(null)
+ setLoadingDetectionResults(false)
+ setRunningDetection(false)
setDetectionWorkflowStage('idle')
}
@@ -580,6 +815,7 @@ export function useDetectionWorkflow({
detectionTileManifestPath,
detectionConfidenceThreshold,
runningDetection,
+ detectionJob,
detectionRunResult,
detectionRunError,
detectionRuns,
diff --git a/frontend/src/hooks/useGeoAssistant.test.tsx b/frontend/src/hooks/useGeoAssistant.test.tsx
new file mode 100644
index 00000000..2e666471
--- /dev/null
+++ b/frontend/src/hooks/useGeoAssistant.test.tsx
@@ -0,0 +1,117 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { AssistantQueryResponse } from '../types'
+
+const mocks = vi.hoisted(() => ({
+ status: vi.fn(),
+ models: vi.fn(),
+ query: vi.fn(),
+}))
+
+vi.mock('../services/api/assistant', () => ({
+ assistantApi: mocks,
+}))
+
+import { useGeoAssistant } from './useGeoAssistant'
+
+function deferred() {
+ let resolve!: (value: T) => void
+ let reject!: (reason?: unknown) => void
+ const promise = new Promise((resolvePromise, rejectPromise) => {
+ resolve = resolvePromise
+ reject = rejectPromise
+ })
+ return { promise, resolve, reject }
+}
+
+function response(answer: string): AssistantQueryResponse {
+ return {
+ answer,
+ model: 'geo-model',
+ scope_label: 'testgebied',
+ context_metrics: [],
+ temporal_series: [],
+ source_dataset_ids: [],
+ warnings: [],
+ generated_at: '2026-08-23T12:00:00Z',
+ }
+}
+
+describe('useGeoAssistant request scope', () => {
+ beforeEach(() => {
+ window.localStorage.clear()
+ mocks.status.mockResolvedValue({
+ enabled: true,
+ reachable: true,
+ status: 'ready',
+ base_url: 'http://localhost',
+ default_model: 'geo-model',
+ model_count: 1,
+ limitation_message: '',
+ })
+ mocks.models.mockResolvedValue({
+ items: [{ name: 'geo-model', capabilities: ['chat'] }],
+ total: 1,
+ default_model: 'geo-model',
+ })
+ })
+
+ it('ignores an answer that returns after the active project changed', async () => {
+ const pending = deferred()
+ mocks.query.mockReturnValueOnce(pending.promise)
+ const { result, rerender } = renderHook(
+ ({ projectId }) => useGeoAssistant({
+ selectedProjectId: projectId,
+ selectedAreaId: null,
+ selectionBbox: null,
+ }),
+ { initialProps: { projectId: 'project-1' } },
+ )
+ await waitFor(() => expect(result.current.selectedModel).toBe('geo-model'))
+
+ let request!: Promise
+ act(() => {
+ request = result.current.ask('Wat staat hier?')
+ })
+ rerender({ projectId: 'project-2' })
+ await act(async () => {
+ pending.resolve(response('antwoord uit project 1'))
+ await request
+ })
+
+ expect(result.current.messages).toEqual([])
+ expect(result.current.loading).toBe(false)
+ expect(result.current.error).toBeNull()
+ })
+
+ it('lets only the newest request update a conversation', async () => {
+ const older = deferred()
+ const newer = deferred()
+ mocks.query
+ .mockReturnValueOnce(older.promise)
+ .mockReturnValueOnce(newer.promise)
+ const { result } = renderHook(() => useGeoAssistant({
+ selectedProjectId: 'project-1',
+ selectedAreaId: null,
+ selectionBbox: null,
+ }))
+ await waitFor(() => expect(result.current.selectedModel).toBe('geo-model'))
+
+ let olderRequest!: Promise
+ let newerRequest!: Promise
+ act(() => { olderRequest = result.current.ask('Eerste vraag') })
+ act(() => { newerRequest = result.current.ask('Tweede vraag') })
+ await act(async () => {
+ newer.resolve(response('nieuwste antwoord'))
+ await newerRequest
+ })
+ await act(async () => {
+ older.resolve(response('verouderd antwoord'))
+ await olderRequest
+ })
+
+ const assistantMessages = result.current.messages.filter((message) => message.role === 'assistant')
+ expect(assistantMessages.map((message) => message.content)).toEqual(['nieuwste antwoord'])
+ expect(result.current.loading).toBe(false)
+ })
+})
diff --git a/frontend/src/hooks/useGeoAssistant.ts b/frontend/src/hooks/useGeoAssistant.ts
index b1024132..a1b31eec 100644
--- a/frontend/src/hooks/useGeoAssistant.ts
+++ b/frontend/src/hooks/useGeoAssistant.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { formatError } from '../lib/formatError'
import { assistantApi } from '../services/api/assistant'
import type {
@@ -36,15 +36,61 @@ function readStoredPreference(): string {
}
}
+function assistantScopeKey(
+ projectId: string | null,
+ areaId: string | null,
+ bbox: VectorSelectionBBox | null,
+): string {
+ return JSON.stringify([
+ projectId,
+ areaId,
+ bbox?.min_x ?? null,
+ bbox?.min_y ?? null,
+ bbox?.max_x ?? null,
+ bbox?.max_y ?? null,
+ bbox?.crs ?? null,
+ ])
+}
+
+interface AssistantConversationState {
+ scopeKey: string
+ messages: GeoAssistantMessage[]
+}
+
+interface AssistantRequestState {
+ scopeKey: string
+ requestId: number
+ loading: boolean
+ error: string | null
+}
+
export function useGeoAssistant({ selectedProjectId, selectedAreaId, selectionBbox }: UseGeoAssistantOptions) {
+ const scopeKey = assistantScopeKey(selectedProjectId, selectedAreaId, selectionBbox)
+ const activeScopeRef = useRef(scopeKey)
+ const latestRequestIdRef = useRef(0)
+ if (activeScopeRef.current !== scopeKey) {
+ activeScopeRef.current = scopeKey
+ latestRequestIdRef.current += 1
+ }
+
const [status, setStatus] = useState(null)
const [models, setModels] = useState([])
const [selectedModelChoice, setSelectedModelChoice] = useState(readStoredPreference)
const [defaultModel, setDefaultModel] = useState('')
- const [messages, setMessages] = useState([])
- const [loading, setLoading] = useState(false)
+ const [conversation, setConversation] = useState({ scopeKey, messages: [] })
+ const [requestState, setRequestState] = useState({
+ scopeKey,
+ requestId: 0,
+ loading: false,
+ error: null,
+ })
const [loadingModels, setLoadingModels] = useState(false)
- const [error, setError] = useState(null)
+ const [modelError, setModelError] = useState(null)
+
+ const messages = conversation.scopeKey === scopeKey ? conversation.messages : []
+ const loading = requestState.scopeKey === scopeKey && requestState.loading
+ const queryError = requestState.scopeKey === scopeKey ? requestState.error : null
+ const error = queryError ?? modelError
const selectedModel = useMemo(() => {
const available = new Set(models.map((model) => model.name))
@@ -62,7 +108,7 @@ export function useGeoAssistant({ selectedProjectId, selectedAreaId, selectionBb
const loadModels = async () => {
setLoadingModels(true)
- setError(null)
+ setModelError(null)
try {
const currentStatus = await assistantApi.status()
setStatus(currentStatus)
@@ -82,22 +128,39 @@ export function useGeoAssistant({ selectedProjectId, selectedAreaId, selectionBb
setStatus(null)
setModels([])
setDefaultModel('')
- setError(formatError(requestError, 'De lokale AI-assistent kon niet worden bereikt.'))
+ setModelError(formatError(requestError, 'De lokale AI-assistent kon niet worden bereikt.'))
} finally {
setLoadingModels(false)
}
}
useEffect(() => { void loadModels() }, [])
- useEffect(() => { setMessages([]); setError(null) }, [selectedProjectId])
+ useEffect(() => {
+ setConversation({ scopeKey, messages: [] })
+ setRequestState({
+ scopeKey,
+ requestId: latestRequestIdRef.current,
+ loading: false,
+ error: null,
+ })
+ }, [scopeKey])
const ask = async (question: string): Promise => {
const trimmed = question.trim()
if (!selectedProjectId || !trimmed || !selectedModel) return false
+ const requestId = latestRequestIdRef.current + 1
+ latestRequestIdRef.current = requestId
+ const requestScopeKey = scopeKey
const userMessage: GeoAssistantMessage = { id: nextAssistantMessageId('user'), role: 'user', content: trimmed }
- setMessages((current) => [...current, userMessage])
- setLoading(true)
- setError(null)
+ setConversation((current) => ({
+ scopeKey: requestScopeKey,
+ messages: [...(current.scopeKey === requestScopeKey ? current.messages : []), userMessage],
+ }))
+ setRequestState({ scopeKey: requestScopeKey, requestId, loading: true, error: null })
+ const isLatestRequest = () => (
+ latestRequestIdRef.current === requestId
+ && activeScopeRef.current === requestScopeKey
+ )
try {
const history = messages.slice(-6).map(({ role, content }) => ({ role, content }))
const result = await assistantApi.query(selectedProjectId, {
@@ -107,17 +170,40 @@ export function useGeoAssistant({ selectedProjectId, selectedAreaId, selectionBb
area_id: selectedAreaId,
history,
})
- setMessages((current) => [...current, { id: nextAssistantMessageId('assistant'), role: 'assistant', content: result.answer, response: result }])
+ if (!isLatestRequest()) return false
+ setConversation((current) => current.scopeKey === requestScopeKey ? {
+ scopeKey: requestScopeKey,
+ messages: [...current.messages, { id: nextAssistantMessageId('assistant'), role: 'assistant', content: result.answer, response: result }],
+ } : current)
return true
} catch (requestError) {
- setError(formatError(requestError, 'GeoIntel kon de vraag niet beantwoorden.'))
+ if (!isLatestRequest()) return false
+ setRequestState({
+ scopeKey: requestScopeKey,
+ requestId,
+ loading: false,
+ error: formatError(requestError, 'GeoIntel kon de vraag niet beantwoorden.'),
+ })
return false
} finally {
- setLoading(false)
+ if (isLatestRequest()) {
+ setRequestState((current) => current.scopeKey === requestScopeKey && current.requestId === requestId
+ ? { ...current, loading: false }
+ : current)
+ }
}
}
- const clear = () => { setMessages([]); setError(null) }
+ const clear = () => {
+ latestRequestIdRef.current += 1
+ setConversation({ scopeKey, messages: [] })
+ setRequestState({
+ scopeKey,
+ requestId: latestRequestIdRef.current,
+ loading: false,
+ error: null,
+ })
+ }
return { status, models, selectedModel, selectedModelChoice, defaultModel, messages, loading, loadingModels, error, loadModels, ask, clear, setSelectedModel }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/hooks/useSegmentationWorkflow.test.tsx b/frontend/src/hooks/useSegmentationWorkflow.test.tsx
new file mode 100644
index 00000000..87242f4d
--- /dev/null
+++ b/frontend/src/hooks/useSegmentationWorkflow.test.tsx
@@ -0,0 +1,220 @@
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { JobRead, SegmentationRead, SegmentationRunRead } from '../types'
+
+const mocks = vi.hoisted(() => ({
+ listModels: vi.fn(),
+ runAsync: vi.fn(),
+ listRuns: vi.fn(),
+ getRun: vi.fn(),
+ listSegmentations: vi.fn(),
+ getRunGeoJson: vi.fn(),
+ compareWithReference: vi.fn(),
+}))
+
+vi.mock('../services/api', () => ({
+ segmentationApi: {
+ listModels: mocks.listModels,
+ runAsync: mocks.runAsync,
+ listRuns: mocks.listRuns,
+ getRun: mocks.getRun,
+ listSegmentations: mocks.listSegmentations,
+ getRunGeoJson: mocks.getRunGeoJson,
+ compareWithReference: mocks.compareWithReference,
+ },
+}))
+
+import { useSegmentationWorkflow } from './useSegmentationWorkflow'
+
+const projectId = 'project-1'
+const datasetId = 'dataset-1'
+const jobId = 'job-1'
+const analysisRunId = 'run-1'
+
+const completedJob: JobRead = {
+ id: jobId,
+ job_type: 'segmentation.run',
+ status: 'success',
+ project_id: projectId,
+ dataset_id: datasetId,
+ parameters_json: {},
+ result_json: { analysis_run_id: analysisRunId, segmentation_count: 2 },
+}
+
+const persistedRun: SegmentationRunRead = {
+ id: analysisRunId,
+ project_id: projectId,
+ dataset_id: datasetId,
+ job_id: jobId,
+ analysis_type: 'segmentation',
+ status: 'success',
+ model_name: 'yolo-seg-configured',
+ parameters_json: {},
+ result_json: { segmentation_count: 2 },
+}
+
+function renderWorkflow(selectedProjectId = projectId) {
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const view = renderHook(() => useSegmentationWorkflow({
+ selectedProjectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }))
+ return { ...view, loadProjectData }
+}
+
+describe('useSegmentationWorkflow GPU execution', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mocks.listModels.mockResolvedValue({
+ models: [{
+ model_id: 'yolo-seg-configured',
+ display_name: 'YOLO segmentatie',
+ framework: 'ultralytics/pytorch',
+ task_type: 'segmentation',
+ supported_classes: ['building'],
+ configured: true,
+ status: 'configured',
+ limitation_message: '',
+ operator_review_required: true,
+ }],
+ })
+ mocks.runAsync.mockResolvedValue(completedJob)
+ mocks.listRuns.mockResolvedValue({ items: [persistedRun], total: 1 })
+ mocks.getRun.mockResolvedValue(persistedRun)
+ mocks.listSegmentations.mockResolvedValue({ items: [], total: 0, truncated: false })
+ mocks.getRunGeoJson.mockResolvedValue({ type: 'FeatureCollection', features: [] })
+ })
+
+ it('queues, follows and reconciles a persisted segmentation result', async () => {
+ const { result, loadProjectData } = renderWorkflow()
+ await act(async () => { await result.current.loadSegmentationModels() })
+ act(() => {
+ result.current.setSelectedSegmentationDatasetId(datasetId)
+ result.current.setSegmentationTileManifestPath('/tiles/manifest.json')
+ })
+
+ await act(async () => { await result.current.runSegmentation() })
+
+ expect(mocks.runAsync).toHaveBeenCalledWith(expect.objectContaining({
+ project_id: projectId,
+ dataset_id: datasetId,
+ model_id: 'yolo-seg-configured',
+ tile_manifest_path: '/tiles/manifest.json',
+ }))
+ expect(mocks.getRun).toHaveBeenCalledWith(analysisRunId, projectId)
+ expect(result.current.segmentationRunResult).toMatchObject({
+ analysis_run_id: analysisRunId,
+ job_id: jobId,
+ segmentation_count: 2,
+ status: 'success',
+ })
+ expect(result.current.segmentationRunError).toBeNull()
+ expect(result.current.segmentationTotal).toBe(0)
+ expect(result.current.segmentationTruncated).toBe(false)
+ expect(loadProjectData).toHaveBeenCalledWith(projectId)
+ })
+
+ it('does not queue a configured model without a tile manifest', async () => {
+ const { result } = renderWorkflow()
+ await act(async () => { await result.current.loadSegmentationModels() })
+ act(() => { result.current.setSelectedSegmentationDatasetId(datasetId) })
+
+ await act(async () => { await result.current.runSegmentation() })
+
+ expect(mocks.runAsync).not.toHaveBeenCalled()
+ expect(result.current.segmentationRunError).toContain('beeldtegelmanifest')
+ })
+
+ it('ignores a late run list after the active project changes', async () => {
+ let resolveOlder!: (value: { items: SegmentationRunRead[]; total: number }) => void
+ let resolveNewer!: (value: { items: SegmentationRunRead[]; total: number }) => void
+ mocks.listRuns
+ .mockReturnValueOnce(new Promise((resolve) => { resolveOlder = resolve }))
+ .mockReturnValueOnce(new Promise((resolve) => { resolveNewer = resolve }))
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const { result, rerender } = renderHook(
+ ({ selectedProjectId }) => useSegmentationWorkflow({
+ selectedProjectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }),
+ { initialProps: { selectedProjectId: 'project-1' } },
+ )
+
+ let olderRequest!: Promise
+ let newerRequest!: Promise
+ act(() => { olderRequest = result.current.loadSegmentationRuns('project-1') })
+ rerender({ selectedProjectId: 'project-2' })
+ act(() => { newerRequest = result.current.loadSegmentationRuns('project-2') })
+ const projectTwoRun = { ...persistedRun, id: 'run-2', project_id: 'project-2' }
+ await act(async () => {
+ resolveNewer({ items: [projectTwoRun], total: 1 })
+ await newerRequest
+ })
+ await act(async () => {
+ resolveOlder({ items: [persistedRun], total: 1 })
+ await olderRequest
+ })
+
+ expect(result.current.segmentationRuns).toEqual([projectTwoRun])
+ expect(result.current.selectedSegmentationRunId).toBe('run-2')
+ })
+
+ it('ignores late polygons from another project and clears an empty selection loader', async () => {
+ let resolveOlderList!: (value: { items: SegmentationRead[]; total: number }) => void
+ let resolveNewerList!: (value: { items: SegmentationRead[]; total: number }) => void
+ let resolveOlderGeo!: (value: GeoJSON.FeatureCollection) => void
+ let resolveNewerGeo!: (value: GeoJSON.FeatureCollection) => void
+ mocks.listSegmentations
+ .mockReturnValueOnce(new Promise((resolve) => { resolveOlderList = resolve }))
+ .mockReturnValueOnce(new Promise((resolve) => { resolveNewerList = resolve }))
+ mocks.getRunGeoJson
+ .mockReturnValueOnce(new Promise((resolve) => { resolveOlderGeo = resolve }))
+ .mockReturnValueOnce(new Promise((resolve) => { resolveNewerGeo = resolve }))
+ const loadProjectData = vi.fn().mockResolvedValue(undefined)
+ const loadQualityChecks = vi.fn().mockResolvedValue([])
+ const { result, rerender } = renderHook(
+ ({ selectedProjectId }) => useSegmentationWorkflow({
+ selectedProjectId,
+ rasterDatasets: [],
+ qaIouThreshold: 0.5,
+ loadProjectData,
+ loadQualityChecks,
+ }),
+ { initialProps: { selectedProjectId: 'project-1' } },
+ )
+ const oldItem: SegmentationRead = {
+ id: 'segment-1', project_id: 'project-1', analysis_run_id: 'run-1', model_name: 'model', class_name: 'building',
+ }
+ const newItem: SegmentationRead = {
+ id: 'segment-2', project_id: 'project-2', analysis_run_id: 'run-2', model_name: 'model', class_name: 'building',
+ }
+ let olderRequest!: Promise
+ let newerRequest!: Promise
+ act(() => { olderRequest = result.current.loadSegmentationResults('run-1') })
+ rerender({ selectedProjectId: 'project-2' })
+ act(() => { newerRequest = result.current.loadSegmentationResults('run-2') })
+ await act(async () => {
+ resolveNewerList({ items: [newItem], total: 1 })
+ resolveNewerGeo({ type: 'FeatureCollection', features: [] })
+ await newerRequest
+ })
+ await act(async () => {
+ resolveOlderList({ items: [oldItem], total: 1 })
+ resolveOlderGeo({ type: 'FeatureCollection', features: [] })
+ await olderRequest
+ })
+
+ expect(result.current.segmentationItems).toEqual([newItem])
+ await act(async () => { await result.current.loadSegmentationResults('') })
+ expect(result.current.loadingSegmentationResults).toBe(false)
+ expect(result.current.segmentationItems).toEqual([])
+ })
+})
diff --git a/frontend/src/hooks/useSegmentationWorkflow.ts b/frontend/src/hooks/useSegmentationWorkflow.ts
index 830f04a9..caff3c28 100644
--- a/frontend/src/hooks/useSegmentationWorkflow.ts
+++ b/frontend/src/hooks/useSegmentationWorkflow.ts
@@ -1,7 +1,8 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { segmentationApi } from '../services/api'
import type {
DatasetCreateResponse,
+ JobRead,
QualityCheckRead,
SegmentationModelCapability,
SegmentationQaResult,
@@ -10,6 +11,12 @@ import type {
SegmentationRunResponse,
} from '../types'
import { formatError } from '../lib/formatError'
+import {
+ analysisRunIdFromSegmentationJob,
+ completedSegmentationResponse,
+ SegmentationJobError,
+ waitForSegmentationJob,
+} from '../services/segmentationJob'
interface SegmentationWorkflowOptions {
selectedProjectId: string | null
@@ -19,6 +26,16 @@ interface SegmentationWorkflowOptions {
loadQualityChecks: (projectId?: string | null) => Promise
}
+function isAbortError(error: unknown): boolean {
+ return error instanceof Error && error.name === 'AbortError'
+}
+
+function abortedError(): Error {
+ const error = new Error('Het volgen van de segmentatietaak is gestopt')
+ error.name = 'AbortError'
+ return error
+}
+
export function useSegmentationWorkflow({
selectedProjectId,
rasterDatasets,
@@ -34,11 +51,14 @@ export function useSegmentationWorkflow({
const [segmentationTileManifestPath, setSegmentationTileManifestPath] = useState('')
const [segmentationConfidenceThreshold, setSegmentationConfidenceThreshold] = useState(0.5)
const [runningSegmentation, setRunningSegmentation] = useState(false)
+ const [segmentationJob, setSegmentationJob] = useState(null)
const [segmentationRunResult, setSegmentationRunResult] = useState(null)
const [segmentationRunError, setSegmentationRunError] = useState(null)
const [segmentationRuns, setSegmentationRuns] = useState([])
const [selectedSegmentationRunId, setSelectedSegmentationRunId] = useState('')
const [segmentationItems, setSegmentationItems] = useState([])
+ const [segmentationTotal, setSegmentationTotal] = useState(0)
+ const [segmentationTruncated, setSegmentationTruncated] = useState(false)
const [segmentationGeoJson, setSegmentationGeoJson] = useState(null)
const [segmentationClassFilter, setSegmentationClassFilter] = useState('')
const [segmentationMinConfidenceFilter, setSegmentationMinConfidenceFilter] = useState(0)
@@ -47,6 +67,41 @@ export function useSegmentationWorkflow({
const [segmentationQaResult, setSegmentationQaResult] = useState(null)
const [segmentationQaError, setSegmentationQaError] = useState(null)
const [runningSegmentationQa, setRunningSegmentationQa] = useState(false)
+ const activeSegmentationControllerRef = useRef(null)
+ const selectedProjectIdRef = useRef(selectedProjectId)
+ const segmentationExecutionSequence = useRef(0)
+ const segmentationRunsRequestSequence = useRef(0)
+ const segmentationResultsRequestSequence = useRef(0)
+ const segmentationQaRequestSequence = useRef(0)
+ selectedProjectIdRef.current = selectedProjectId
+
+ useEffect(() => {
+ activeSegmentationControllerRef.current?.abort()
+ activeSegmentationControllerRef.current = null
+ segmentationExecutionSequence.current += 1
+ segmentationRunsRequestSequence.current += 1
+ segmentationResultsRequestSequence.current += 1
+ segmentationQaRequestSequence.current += 1
+ setSelectedSegmentationDatasetId('')
+ setSegmentationRuns([])
+ setSelectedSegmentationRunId('')
+ setSegmentationItems([])
+ setSegmentationTotal(0)
+ setSegmentationTruncated(false)
+ setSegmentationGeoJson(null)
+ setSegmentationRunResult(null)
+ setSegmentationRunError(null)
+ setSegmentationJob(null)
+ setRunningSegmentation(false)
+ setLoadingSegmentationResults(false)
+ setSegmentationTileManifestPath('')
+ setSegmentationQaResult(null)
+ setSegmentationQaError(null)
+ setRunningSegmentationQa(false)
+ return () => {
+ activeSegmentationControllerRef.current?.abort()
+ }
+ }, [selectedProjectId])
const selectedSegmentationModel = useMemo(
() => segmentationModels.find((model) => model.model_id === selectedSegmentationModelId) ?? null,
@@ -79,32 +134,54 @@ export function useSegmentationWorkflow({
}
const loadSegmentationRuns = async (projectId = selectedProjectId) => {
+ const sequence = segmentationRunsRequestSequence.current + 1
+ segmentationRunsRequestSequence.current = sequence
if (!projectId) {
setSegmentationRuns([])
+ setSelectedSegmentationRunId('')
return
}
try {
const response = await segmentationApi.listRuns({ project_id: projectId })
+ if (
+ segmentationRunsRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== projectId
+ ) return
setSegmentationRuns(response.items)
- if (!selectedSegmentationRunId && response.items.length > 0) {
- setSelectedSegmentationRunId(response.items[0].id)
- }
+ setSelectedSegmentationRunId((current) => (
+ response.items.some((run) => run.id === current) ? current : response.items[0]?.id ?? ''
+ ))
} catch (error) {
- setSegmentationRunError(formatError(error, 'De segmentatieruns konden niet worden geladen'))
+ if (
+ segmentationRunsRequestSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setSegmentationRunError(formatError(error, 'De segmentatieruns konden niet worden geladen'))
+ }
}
}
const loadSegmentationResults = async (analysisRunId = selectedSegmentationRunId) => {
- if (!analysisRunId) {
+ const sequence = segmentationResultsRequestSequence.current + 1
+ segmentationResultsRequestSequence.current = sequence
+ const requestProjectId = selectedProjectIdRef.current
+ if (!analysisRunId || !requestProjectId) {
setSegmentationItems([])
+ setSegmentationTotal(0)
+ setSegmentationTruncated(false)
setSegmentationGeoJson(null)
+ setLoadingSegmentationResults(false)
return
}
setLoadingSegmentationResults(true)
setSegmentationRunError(null)
+ setSegmentationItems([])
+ setSegmentationTotal(0)
+ setSegmentationTruncated(false)
+ setSegmentationGeoJson(null)
try {
const params = {
- project_id: selectedProjectId ?? '',
+ project_id: requestProjectId,
class_name: segmentationClassFilter || null,
min_confidence: segmentationMinConfidenceFilter > 0 ? segmentationMinConfidenceFilter : null,
}
@@ -112,12 +189,33 @@ export function useSegmentationWorkflow({
segmentationApi.listSegmentations(analysisRunId, params),
segmentationApi.getRunGeoJson(analysisRunId, params),
])
+ if (
+ segmentationResultsRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== requestProjectId
+ ) return
+ if (segmentationsResponse.items.some((item) => (
+ item.project_id !== requestProjectId || item.analysis_run_id !== analysisRunId
+ ))) {
+ throw new Error('De server retourneerde segmentaties uit een andere werkruimte of analyserun')
+ }
setSegmentationItems(segmentationsResponse.items)
+ setSegmentationTotal(segmentationsResponse.total)
+ setSegmentationTruncated(Boolean(segmentationsResponse.truncated))
setSegmentationGeoJson(geoJsonResponse)
} catch (error) {
- setSegmentationRunError(formatError(error, 'De segmentatieresultaten konden niet worden geladen'))
+ if (
+ segmentationResultsRequestSequence.current === sequence
+ && selectedProjectIdRef.current === requestProjectId
+ ) {
+ setSegmentationRunError(formatError(error, 'De segmentatieresultaten konden niet worden geladen'))
+ }
} finally {
- setLoadingSegmentationResults(false)
+ if (
+ segmentationResultsRequestSequence.current === sequence
+ && selectedProjectIdRef.current === requestProjectId
+ ) {
+ setLoadingSegmentationResults(false)
+ }
}
}
@@ -135,31 +233,109 @@ export function useSegmentationWorkflow({
setSegmentationRunError('Het gekozen segmentatiemodel is niet geconfigureerd')
return
}
+ if (selectedSegmentationModelId === 'fixture-segmenter') {
+ setSegmentationRunError('Het fixturemodel is uitsluitend beschikbaar voor expliciete geautomatiseerde tests')
+ return
+ }
+ if (!segmentationTileManifestPath.trim()) {
+ setSegmentationRunError('Koppel eerst het beeldtegelmanifest van het gekozen rasterbestand')
+ return
+ }
+ if (
+ (activeSegmentationControllerRef.current && !activeSegmentationControllerRef.current.signal.aborted)
+ || segmentationJob?.status === 'queued'
+ || segmentationJob?.status === 'running'
+ ) {
+ setSegmentationRunError('Er wordt al een GPU-segmentatietaak verwerkt. Wacht tot die taak klaar is.')
+ return
+ }
+
+ const projectId = selectedProjectId
+ const parameters: Record = {}
+ const request = {
+ project_id: projectId,
+ dataset_id: datasetId,
+ model_id: selectedSegmentationModelId,
+ confidence_threshold: segmentationConfidenceThreshold,
+ tile_manifest_path: segmentationTileManifestPath.trim() || null,
+ parameters_json: parameters,
+ }
+ const controller = new AbortController()
+ const executionSequence = segmentationExecutionSequence.current + 1
+ segmentationExecutionSequence.current = executionSequence
+ activeSegmentationControllerRef.current = controller
+ const assertExecutionCurrent = () => {
+ if (
+ controller.signal.aborted
+ || segmentationExecutionSequence.current !== executionSequence
+ || selectedProjectIdRef.current !== projectId
+ ) {
+ throw abortedError()
+ }
+ }
+
setSegmentationRunError(null)
setSegmentationRunResult(null)
setRunningSegmentation(true)
+ setSegmentationJob(null)
try {
- const parameters =
- selectedSegmentationModelId === 'fixture-segmenter'
- ? { fixture_mode: true, fixture_segmentations: [] }
- : {}
- const result = await segmentationApi.run({
- project_id: selectedProjectId,
- dataset_id: datasetId,
- model_id: selectedSegmentationModelId,
- confidence_threshold: segmentationConfidenceThreshold,
- tile_manifest_path: segmentationTileManifestPath.trim() || null,
- parameters_json: parameters,
+ const queuedJob = await segmentationApi.runAsync(request)
+ assertExecutionCurrent()
+ setSegmentationJob(queuedJob)
+ const completedJob = await waitForSegmentationJob({
+ projectId,
+ initialJob: queuedJob,
+ signal: controller.signal,
+ onStatus: (job) => {
+ if (
+ segmentationExecutionSequence.current === executionSequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setSegmentationJob(job)
+ }
+ },
})
+ assertExecutionCurrent()
+ const explicitAnalysisRunId = analysisRunIdFromSegmentationJob(completedJob)
+ const run = explicitAnalysisRunId
+ ? await segmentationApi.getRun(explicitAnalysisRunId, projectId)
+ : (await segmentationApi.listRuns({ project_id: projectId, dataset_id: datasetId })).items
+ .find((candidate) => candidate.job_id === completedJob.id)
+ assertExecutionCurrent()
+ if (!run) {
+ throw new SegmentationJobError(
+ 'De GPU-taak is voltooid, maar de bijbehorende bewaarde segmentatierun ontbreekt.',
+ 'SEGMENTATION_RUN_RESULT_NOT_FOUND',
+ completedJob.id,
+ )
+ }
+ const result = completedSegmentationResponse(request, completedJob, run)
+ setSegmentationRunError(null)
setSegmentationRunResult(result)
setSelectedSegmentationRunId(result.analysis_run_id)
- await loadSegmentationRuns(selectedProjectId)
+ await loadSegmentationRuns(projectId)
+ assertExecutionCurrent()
await loadSegmentationResults(result.analysis_run_id)
- await loadProjectData(selectedProjectId)
+ assertExecutionCurrent()
+ await loadProjectData(projectId)
} catch (error) {
- setSegmentationRunError(formatError(error, 'Segmentation run failed'))
+ if (
+ !isAbortError(error)
+ && segmentationExecutionSequence.current === executionSequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setSegmentationRunError(formatError(error, 'De segmentatie is mislukt'))
+ }
} finally {
- setRunningSegmentation(false)
+ if (activeSegmentationControllerRef.current === controller) {
+ activeSegmentationControllerRef.current = null
+ }
+ if (
+ segmentationExecutionSequence.current === executionSequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setRunningSegmentation(false)
+ }
}
}
@@ -172,33 +348,71 @@ export function useSegmentationWorkflow({
setSegmentationQaError('Kies eerst een referentiebron')
return
}
+ const projectId = selectedProjectIdRef.current
+ if (!projectId) {
+ setSegmentationQaError('Kies eerst een werkruimte')
+ return
+ }
+ const analysisRunId = selectedSegmentationRunId
+ const referenceDatasetId = segmentationReferenceDatasetId
+ const sequence = segmentationQaRequestSequence.current + 1
+ segmentationQaRequestSequence.current = sequence
setSegmentationQaError(null)
setSegmentationQaResult(null)
setRunningSegmentationQa(true)
try {
- const result = await segmentationApi.compareWithReference(selectedSegmentationRunId, selectedProjectId!, {
- reference_dataset_id: segmentationReferenceDatasetId,
+ const result = await segmentationApi.compareWithReference(analysisRunId, projectId, {
+ reference_dataset_id: referenceDatasetId,
iou_threshold: qaIouThreshold,
class_name: segmentationClassFilter || null,
min_confidence: segmentationMinConfidenceFilter > 0 ? segmentationMinConfidenceFilter : null,
})
+ if (
+ segmentationQaRequestSequence.current !== sequence
+ || selectedProjectIdRef.current !== projectId
+ ) return
setSegmentationQaResult(result)
- await loadQualityChecks(selectedProjectId)
+ await loadQualityChecks(projectId)
} catch (error) {
- setSegmentationQaError(formatError(error, 'Segmentation QA failed'))
+ if (
+ segmentationQaRequestSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setSegmentationQaError(formatError(error, 'De segmentatiecontrole is mislukt'))
+ }
} finally {
- setRunningSegmentationQa(false)
+ if (
+ segmentationQaRequestSequence.current === sequence
+ && selectedProjectIdRef.current === projectId
+ ) {
+ setRunningSegmentationQa(false)
+ }
}
}
const resetSegmentationForProject = () => {
+ activeSegmentationControllerRef.current?.abort()
+ activeSegmentationControllerRef.current = null
+ segmentationExecutionSequence.current += 1
+ segmentationRunsRequestSequence.current += 1
+ segmentationResultsRequestSequence.current += 1
+ segmentationQaRequestSequence.current += 1
setSelectedSegmentationDatasetId('')
setSegmentationRuns([])
setSelectedSegmentationRunId('')
setSegmentationItems([])
+ setSegmentationTotal(0)
+ setSegmentationTruncated(false)
setSegmentationGeoJson(null)
setSegmentationRunResult(null)
+ setSegmentationRunError(null)
+ setSegmentationJob(null)
+ setRunningSegmentation(false)
+ setLoadingSegmentationResults(false)
setSegmentationTileManifestPath('')
+ setSegmentationQaResult(null)
+ setSegmentationQaError(null)
+ setRunningSegmentationQa(false)
}
return {
@@ -211,11 +425,14 @@ export function useSegmentationWorkflow({
segmentationTileManifestPath,
segmentationConfidenceThreshold,
runningSegmentation,
+ segmentationJob,
segmentationRunResult,
segmentationRunError,
segmentationRuns,
selectedSegmentationRunId,
segmentationItems,
+ segmentationTotal,
+ segmentationTruncated,
segmentationGeoJson,
segmentationClassFilter,
segmentationMinConfidenceFilter,
diff --git a/frontend/src/hooks/useTemporalComparison.test.tsx b/frontend/src/hooks/useTemporalComparison.test.tsx
index b34be14f..b9b4587d 100644
--- a/frontend/src/hooks/useTemporalComparison.test.tsx
+++ b/frontend/src/hooks/useTemporalComparison.test.tsx
@@ -69,4 +69,34 @@ describe('useTemporalComparison', () => {
preview_limit: 500,
})
})
+
+ it('keeps a newer comparison when an older request finishes last', async () => {
+ const resolvers: Array<(value: TemporalComparisonResponse) => void> = []
+ mocks.compare.mockImplementation(() => new Promise((resolve) => {
+ resolvers.push(resolve)
+ }))
+ const older = { earlier_dataset_id: 'older' } as unknown as TemporalComparisonResponse
+ const newer = { earlier_dataset_id: 'newer' } as unknown as TemporalComparisonResponse
+ const { result } = renderHook(() => useTemporalComparison('project-1'))
+
+ let olderRequest: Promise
+ let newerRequest: Promise
+ await act(async () => {
+ olderRequest = result.current.compareTemporalSnapshots('older', 'later', bbox)
+ newerRequest = result.current.compareTemporalSnapshots('newer', 'later', bbox)
+ await Promise.resolve()
+ })
+ await act(async () => {
+ resolvers[1](newer)
+ await newerRequest!
+ })
+ expect(result.current.temporalComparison).toEqual(newer)
+
+ await act(async () => {
+ resolvers[0](older)
+ await olderRequest!
+ })
+ expect(result.current.temporalComparison).toEqual(newer)
+ expect(result.current.temporalComparisonLoading).toBe(false)
+ })
})
diff --git a/frontend/src/hooks/useTemporalComparison.ts b/frontend/src/hooks/useTemporalComparison.ts
index 5d112fc6..515bfa2c 100644
--- a/frontend/src/hooks/useTemporalComparison.ts
+++ b/frontend/src/hooks/useTemporalComparison.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { formatError } from '../lib/formatError'
import { temporalApi } from '../services/api/temporal'
import type { TemporalComparisonResponse, VectorSelectionBBox } from '../types'
@@ -7,15 +7,20 @@ export function useTemporalComparison(selectedProjectId: string | null) {
const [temporalComparison, setTemporalComparison] = useState(null)
const [temporalComparisonLoading, setTemporalComparisonLoading] = useState(false)
const [temporalComparisonError, setTemporalComparisonError] = useState(null)
+ const requestSequence = useRef(0)
useEffect(() => {
+ requestSequence.current += 1
setTemporalComparison(null)
setTemporalComparisonError(null)
+ setTemporalComparisonLoading(false)
}, [selectedProjectId])
const clearTemporalComparison = () => {
+ requestSequence.current += 1
setTemporalComparison(null)
setTemporalComparisonError(null)
+ setTemporalComparisonLoading(false)
}
const compareTemporalSnapshots = async (
@@ -24,6 +29,8 @@ export function useTemporalComparison(selectedProjectId: string | null) {
bbox: VectorSelectionBBox,
areaId?: string,
): Promise => {
+ const sequence = requestSequence.current + 1
+ requestSequence.current = sequence
if (!selectedProjectId) {
setTemporalComparisonError('Open eerst een project om evoluties te vergelijken.')
return null
@@ -43,14 +50,20 @@ export function useTemporalComparison(selectedProjectId: string | null) {
area_id: areaId || null,
preview_limit: 500,
})
- setTemporalComparison(result)
+ if (requestSequence.current === sequence) {
+ setTemporalComparison(result)
+ }
return result
} catch (error) {
- setTemporalComparison(null)
- setTemporalComparisonError(formatError(error, 'De evolutieanalyse is mislukt.'))
+ if (requestSequence.current === sequence) {
+ setTemporalComparison(null)
+ setTemporalComparisonError(formatError(error, 'De evolutieanalyse is mislukt.'))
+ }
return null
} finally {
- setTemporalComparisonLoading(false)
+ if (requestSequence.current === sequence) {
+ setTemporalComparisonLoading(false)
+ }
}
}
diff --git a/frontend/src/hooks/useWorkbenchBootstrap.test.tsx b/frontend/src/hooks/useWorkbenchBootstrap.test.tsx
index 5fded3db..644d41e9 100644
--- a/frontend/src/hooks/useWorkbenchBootstrap.test.tsx
+++ b/frontend/src/hooks/useWorkbenchBootstrap.test.tsx
@@ -97,19 +97,25 @@ describe('useWorkbenchBootstrap', () => {
await waitFor(() => expect(systeem.loadCapabilities).toHaveBeenCalledOnce())
})
- it('blijft geladen wanneer de gebruiker terugkeert naar de kaart', async () => {
+ it('herlaadt bezochte werkbladen niet wanneer een ander werkblad opent', async () => {
const state = options('project-1', 'ai')
const { rerender } = renderHook((props: { werkblad: string }) =>
useWorkbenchBootstrap({ ...state, activeWorkspace: props.werkblad }), {
initialProps: { werkblad: 'ai' },
})
await waitFor(() => expect(state.loadDetectionRuns).toHaveBeenCalledWith('project-1'))
- const naEerste = state.loadDetectionRuns.mock.calls.length
+ const detectionRunCalls = state.loadDetectionRuns.mock.calls.length
+ const detectionResultCalls = state.loadDetectionResults.mock.calls.length
rerender({ werkblad: 'map' })
- // Een bezocht werkblad blijft bijgewerkt worden; het wordt niet opnieuw
- // dichtgezet zodra de gebruiker wegklikt.
- expect(state.loadDetectionRuns.mock.calls.length).toBeGreaterThanOrEqual(naEerste)
+ rerender({ werkblad: 'exports' })
+ await waitFor(() => expect(state.loadExports).toHaveBeenCalledOnce())
+ rerender({ werkblad: 'analysis' })
+ await waitFor(() => expect(state.loadQualityChecks).toHaveBeenCalledOnce())
+
+ expect(state.loadDetectionRuns).toHaveBeenCalledTimes(detectionRunCalls)
+ expect(state.loadDetectionResults).toHaveBeenCalledTimes(detectionResultCalls)
+ expect(state.loadExports).toHaveBeenCalledOnce()
})
it('meldt een mislukte laadactie in plaats van haar weg te slikken', async () => {
diff --git a/frontend/src/hooks/useWorkbenchBootstrap.ts b/frontend/src/hooks/useWorkbenchBootstrap.ts
index c950c019..5f5416ba 100644
--- a/frontend/src/hooks/useWorkbenchBootstrap.ts
+++ b/frontend/src/hooks/useWorkbenchBootstrap.ts
@@ -74,24 +74,17 @@ export function useWorkbenchBootstrap({
return null
}
- // Welke werkbladen welke gegevens nodig hebben. Alles werd voorheen bij het
- // opstarten opgehaald, ook voor werkbladen die de gebruiker nooit opent; dat
- // waren 27 verzoeken in drie golven voordat de kaart bruikbaar was.
- const bezocht = useRef(new Set())
- bezocht.current.add(activeWorkspace)
- const geopend = (werkblad: string): boolean => bezocht.current.has(werkblad)
-
useEffect(() => {
loadProjects().catch(meld('werkruimtes'))
}, [restrictedMode])
useEffect(() => {
- if (!geopend('system')) return
+ if (activeWorkspace !== 'system') return
loadCapabilities().catch(meld('bronkoppelingen'))
}, [restrictedMode, activeWorkspace])
useEffect(() => {
- if (!geopend('ai')) return
+ if (activeWorkspace !== 'ai') return
loadDetectionModels().catch(meld('detectiemodellen'))
loadSegmentationModels().catch(meld('segmentatiemodellen'))
}, [restrictedMode, activeWorkspace])
@@ -114,28 +107,28 @@ export function useWorkbenchBootstrap({
}, [restrictedMode, selectedProjectId])
useEffect(() => {
- if (!selectedProjectId || !geopend('analysis')) return
+ if (!selectedProjectId || activeWorkspace !== 'analysis') return
loadQualityChecks(selectedProjectId).catch(meld('kwaliteitscontroles'))
}, [restrictedMode, selectedProjectId, activeWorkspace])
useEffect(() => {
- if (!selectedProjectId || !geopend('ai')) return
+ if (!selectedProjectId || activeWorkspace !== 'ai') return
loadDetectionRuns(selectedProjectId).catch(meld('detectieruns'))
loadSegmentationRuns(selectedProjectId).catch(meld('segmentatieruns'))
}, [restrictedMode, selectedProjectId, activeWorkspace])
useEffect(() => {
- if (!selectedProjectId || !geopend('exports')) return
+ if (!selectedProjectId || activeWorkspace !== 'exports') return
loadExports(selectedProjectId).catch(meld('downloads'))
}, [restrictedMode, selectedProjectId, activeWorkspace])
useEffect(() => {
- if (!geopend('ai')) return
+ if (activeWorkspace !== 'ai') return
loadDetectionResults().catch(meld('detectieresultaten'))
}, [restrictedMode, activeWorkspace, selectedDetectionRunId, detectionClassFilter, detectionMinConfidenceFilter])
useEffect(() => {
- if (!geopend('ai')) return
+ if (activeWorkspace !== 'ai') return
loadSegmentationResults().catch(meld('segmentatieresultaten'))
}, [restrictedMode, activeWorkspace, selectedSegmentationRunId, segmentationClassFilter, segmentationMinConfidenceFilter])
}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d1288b42..93ff8ff1 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -10,7 +10,7 @@ import '@fontsource/public-sans/latin-400.css'
import '@fontsource/public-sans/latin-500.css'
import '@fontsource/public-sans/latin-600.css'
import '@fontsource/public-sans/latin-700.css'
-import './styles/app.css'
+import './styles/base.css'
import App from './App'
createRoot(document.getElementById('root')!).render(
diff --git a/frontend/src/services/api/detection.test.ts b/frontend/src/services/api/detection.test.ts
new file mode 100644
index 00000000..bfe4b5b5
--- /dev/null
+++ b/frontend/src/services/api/detection.test.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { DetectionRunRequest } from '../../types'
+import { detectionApi } from './detection'
+
+describe('detectionApi.runAsync', () => {
+ afterEach(() => {
+ vi.unstubAllGlobals()
+ })
+
+ it('starts production inference only through the queued endpoint', async () => {
+ const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+ data: {
+ id: 'job-1',
+ job_type: 'detection.run',
+ status: 'queued',
+ project_id: 'project 1',
+ parameters_json: {},
+ },
+ }), { status: 200, headers: { 'Content-Type': 'application/json' } }))
+ vi.stubGlobal('fetch', fetchMock)
+ const payload: DetectionRunRequest = {
+ project_id: 'project 1',
+ dataset_id: 'dataset-1',
+ model_id: 'yolo-configured',
+ confidence_threshold: 0.15,
+ tile_manifest_path: '/tiles/manifest.json',
+ }
+
+ const response = await detectionApi.runAsync(payload)
+
+ expect(response.status).toBe('queued')
+ expect(fetchMock).toHaveBeenCalledOnce()
+ const [url, init] = fetchMock.mock.calls[0]
+ expect(url).toBe('/api/v1/detection/run-async?project_id=project%201')
+ expect(init).toMatchObject({ method: 'POST', credentials: 'same-origin' })
+ expect(JSON.parse(String(init.body))).toEqual(payload)
+ })
+})
diff --git a/frontend/src/services/api/detection.ts b/frontend/src/services/api/detection.ts
index cb536073..5397aa95 100644
--- a/frontend/src/services/api/detection.ts
+++ b/frontend/src/services/api/detection.ts
@@ -7,7 +7,7 @@ import type {
DetectionRunListResponse,
DetectionRunRead,
DetectionRunRequest,
- DetectionRunResponse,
+ JobRead,
ModelAssetListResponse,
YoloPreflightResponse,
} from '../../types'
@@ -28,12 +28,12 @@ export const detectionApi = {
listModelAssets: (): Promise => apiGet('/api/v1/detection/model-assets'),
getYoloPreflight: (params: { tile_manifest_path?: string | null; check_model_load?: boolean | null; model_asset_id?: string | null } = {}): Promise =>
apiGet(`/api/v1/detection/yolo/preflight${queryString(params)}`),
- run: (payload: DetectionRunRequest): Promise =>
- apiPost(`/api/v1/detection/run?project_id=${encodeURIComponent(payload.project_id)}`, payload),
+ runAsync: (payload: DetectionRunRequest): Promise =>
+ apiPost(`/api/v1/detection/run-async?project_id=${encodeURIComponent(payload.project_id)}`, payload),
listRuns: (params: { project_id?: string | null; dataset_id?: string | null } = {}): Promise =>
apiGet(`/api/v1/detection/runs${queryString(params)}`),
- getRun: (analysisRunId: string): Promise =>
- apiGet(`/api/v1/detection/runs/${analysisRunId}`),
+ getRun: (analysisRunId: string, projectId?: string | null): Promise =>
+ apiGet(`/api/v1/detection/runs/${analysisRunId}${queryString({ project_id: projectId })}`),
listDetections: (
analysisRunId: string,
params: {
diff --git a/frontend/src/services/api/segmentation.test.ts b/frontend/src/services/api/segmentation.test.ts
new file mode 100644
index 00000000..099e99fa
--- /dev/null
+++ b/frontend/src/services/api/segmentation.test.ts
@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { SegmentationRunRequest } from '../../types'
+import { segmentationApi } from './segmentation'
+
+describe('segmentationApi.runAsync', () => {
+ afterEach(() => {
+ vi.unstubAllGlobals()
+ })
+
+ it('starts production segmentation only through the queued endpoint', async () => {
+ const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+ data: {
+ id: 'job-1',
+ job_type: 'segmentation.run',
+ status: 'queued',
+ project_id: 'project 1',
+ parameters_json: {},
+ },
+ }), { status: 200, headers: { 'Content-Type': 'application/json' } }))
+ vi.stubGlobal('fetch', fetchMock)
+ const payload: SegmentationRunRequest = {
+ project_id: 'project 1',
+ dataset_id: 'dataset-1',
+ model_id: 'yolo-seg-configured',
+ confidence_threshold: 0.5,
+ tile_manifest_path: '/tiles/manifest.json',
+ }
+
+ const response = await segmentationApi.runAsync(payload)
+
+ expect(response.status).toBe('queued')
+ expect(fetchMock).toHaveBeenCalledOnce()
+ const [url, init] = fetchMock.mock.calls[0]
+ expect(url).toBe('/api/v1/segmentation/run-async?project_id=project%201')
+ expect(init).toMatchObject({ method: 'POST', credentials: 'same-origin' })
+ expect(JSON.parse(String(init.body))).toEqual(payload)
+ })
+
+ it('scopes a persisted run read to the active guest project', async () => {
+ const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+ data: {
+ id: 'run-1',
+ analysis_type: 'segmentation',
+ status: 'success',
+ project_id: 'project 1',
+ parameters_json: {},
+ },
+ }), { status: 200, headers: { 'Content-Type': 'application/json' } }))
+ vi.stubGlobal('fetch', fetchMock)
+
+ await segmentationApi.getRun('run-1', 'project 1')
+
+ expect(fetchMock).toHaveBeenCalledOnce()
+ expect(fetchMock.mock.calls[0][0]).toBe('/api/v1/segmentation/runs/run-1?project_id=project+1')
+ })
+})
diff --git a/frontend/src/services/api/segmentation.ts b/frontend/src/services/api/segmentation.ts
index 5d880fe1..bcf29353 100644
--- a/frontend/src/services/api/segmentation.ts
+++ b/frontend/src/services/api/segmentation.ts
@@ -7,7 +7,7 @@ import type {
SegmentationRunListResponse,
SegmentationRunRead,
SegmentationRunRequest,
- SegmentationRunResponse,
+ JobRead,
} from '../../types'
function queryString(params: Record): string {
@@ -23,12 +23,12 @@ function queryString(params: Record)
export const segmentationApi = {
listModels: (): Promise => apiGet('/api/v1/segmentation/models'),
- run: (payload: SegmentationRunRequest): Promise =>
- apiPost(`/api/v1/segmentation/run?project_id=${encodeURIComponent(payload.project_id)}`, payload),
+ runAsync: (payload: SegmentationRunRequest): Promise =>
+ apiPost(`/api/v1/segmentation/run-async?project_id=${encodeURIComponent(payload.project_id)}`, payload),
listRuns: (params: { project_id?: string | null; dataset_id?: string | null } = {}): Promise =>
apiGet(`/api/v1/segmentation/runs${queryString(params)}`),
- getRun: (analysisRunId: string): Promise =>
- apiGet(`/api/v1/segmentation/runs/${analysisRunId}`),
+ getRun: (analysisRunId: string, projectId?: string | null): Promise =>
+ apiGet(`/api/v1/segmentation/runs/${analysisRunId}${queryString({ project_id: projectId })}`),
listSegmentations: (
analysisRunId: string,
params: { project_id: string; dataset_id?: string | null; class_name?: string | null; min_confidence?: number | null },
diff --git a/frontend/src/services/detectionJob.test.ts b/frontend/src/services/detectionJob.test.ts
new file mode 100644
index 00000000..f4f9b9b6
--- /dev/null
+++ b/frontend/src/services/detectionJob.test.ts
@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { DetectionRunRead, DetectionRunRequest, JobRead } from '../types'
+import {
+ completedDetectionResponse,
+ DetectionJobError,
+ waitForDetectionJob,
+} from './detectionJob'
+
+const projectId = 'project-1'
+const datasetId = 'dataset-1'
+const jobId = 'job-1'
+
+function job(status: string, overrides: Partial = {}): JobRead {
+ return {
+ id: jobId,
+ job_type: 'detection.run',
+ status,
+ project_id: projectId,
+ dataset_id: datasetId,
+ parameters_json: {},
+ ...overrides,
+ }
+}
+
+function run(overrides: Partial = {}): DetectionRunRead {
+ return {
+ id: 'run-1',
+ project_id: projectId,
+ dataset_id: datasetId,
+ job_id: jobId,
+ analysis_type: 'detection',
+ status: 'success',
+ model_name: 'yolo-configured',
+ parameters_json: {},
+ result_json: { detection_count: 4 },
+ ...overrides,
+ }
+}
+
+const request: DetectionRunRequest = {
+ project_id: projectId,
+ dataset_id: datasetId,
+ model_id: 'yolo-configured',
+ confidence_threshold: 0.15,
+ tile_manifest_path: '/tiles/manifest.json',
+}
+
+describe('waitForDetectionJob', () => {
+ it('follows queued and running states until the persisted GPU job succeeds', async () => {
+ const readJob = vi.fn()
+ .mockResolvedValueOnce(job('running'))
+ .mockResolvedValueOnce(job('success', { result_json: { detection_count: 4 } }))
+ const statuses: string[] = []
+
+ const completed = await waitForDetectionJob({
+ projectId,
+ initialJob: job('queued'),
+ intervalMs: 0,
+ readJob,
+ onStatus: (value) => statuses.push(value.status),
+ })
+
+ expect(completed.status).toBe('success')
+ expect(statuses).toEqual(['queued', 'running', 'success'])
+ expect(readJob).toHaveBeenCalledTimes(2)
+ })
+
+ it('does not reinterpret a failed model/runtime job as an empty success', async () => {
+ await expect(waitForDetectionJob({
+ projectId,
+ initialJob: job('failed', {
+ error_message: 'NVIDIA CUDA is niet beschikbaar',
+ result_json: { error_code: 'DETECTION_ACCELERATOR_UNAVAILABLE' },
+ }),
+ intervalMs: 0,
+ })).rejects.toMatchObject({
+ name: 'DetectionJobError',
+ code: 'DETECTION_ACCELERATOR_UNAVAILABLE',
+ message: 'NVIDIA CUDA is niet beschikbaar',
+ })
+ })
+
+ it('rejects partial and cross-project jobs instead of treating them as complete', async () => {
+ await expect(waitForDetectionJob({
+ projectId,
+ initialJob: job('partial'),
+ intervalMs: 0,
+ })).rejects.toBeInstanceOf(DetectionJobError)
+
+ await expect(waitForDetectionJob({
+ projectId,
+ initialJob: job('success', { project_id: 'other-project' }),
+ intervalMs: 0,
+ })).rejects.toMatchObject({ code: 'DETECTION_JOB_IDENTITY_MISMATCH' })
+ })
+})
+
+describe('completedDetectionResponse', () => {
+ it('uses the persisted count and explicitly avoids claiming that a zero result means absence', () => {
+ const response = completedDetectionResponse(
+ request,
+ job('success', { result_json: { detection_count: 0 } }),
+ run({ result_json: { detection_count: 0 } }),
+ )
+
+ expect(response.detection_count).toBe(0)
+ expect(response.status).toBe('success')
+ expect(response.message).toContain('bewijst niet')
+ })
+
+ it('fails closed when the server omits the persisted count or links another run', () => {
+ expect(() => completedDetectionResponse(
+ request,
+ job('success'),
+ run({ result_json: null }),
+ )).toThrowError(DetectionJobError)
+
+ expect(() => completedDetectionResponse(
+ request,
+ job('success', { result_json: { detection_count: 2 } }),
+ run({ job_id: 'another-job' }),
+ )).toThrowError(DetectionJobError)
+ })
+})
diff --git a/frontend/src/services/detectionJob.ts b/frontend/src/services/detectionJob.ts
new file mode 100644
index 00000000..8939f4c7
--- /dev/null
+++ b/frontend/src/services/detectionJob.ts
@@ -0,0 +1,197 @@
+import type { DetectionRunRead, DetectionRunRequest, DetectionRunResponse, JobRead } from '../types'
+import { jobsApi } from './api/jobs'
+
+const ACTIVE_JOB_STATUSES = new Set(['queued', 'running'])
+const TERMINAL_FAILURE_STATUSES = new Set(['failed', 'cancelled', 'partial'])
+
+export const DETECTION_JOB_POLL_INTERVAL_MS = 1_500
+export const DETECTION_JOB_TIMEOUT_MS = 30 * 60 * 1_000
+
+export class DetectionJobError extends Error {
+ readonly code: string
+ readonly jobId: string
+
+ constructor(message: string, code: string, jobId: string) {
+ super(message)
+ this.name = 'DetectionJobError'
+ this.code = code
+ this.jobId = jobId
+ }
+}
+
+interface WaitForDetectionJobOptions {
+ projectId: string
+ initialJob: JobRead
+ signal?: AbortSignal
+ intervalMs?: number
+ timeoutMs?: number
+ maxConsecutiveReadErrors?: number
+ readJob?: (projectId: string, jobId: string) => Promise
+ onStatus?: (job: JobRead) => void
+}
+
+function abortedError(): Error {
+ const error = new Error('Het volgen van de detectietaak is gestopt')
+ error.name = 'AbortError'
+ return error
+}
+
+function wait(milliseconds: number, signal?: AbortSignal): Promise {
+ if (signal?.aborted) {
+ return Promise.reject(abortedError())
+ }
+ if (milliseconds <= 0) {
+ return Promise.resolve()
+ }
+ return new Promise((resolve, reject) => {
+ const timer = window.setTimeout(() => {
+ signal?.removeEventListener('abort', onAbort)
+ resolve()
+ }, milliseconds)
+ const onAbort = () => {
+ window.clearTimeout(timer)
+ signal?.removeEventListener('abort', onAbort)
+ reject(abortedError())
+ }
+ signal?.addEventListener('abort', onAbort, { once: true })
+ })
+}
+
+function stringValue(record: Record | null | undefined, key: string): string | null {
+ const value = record?.[key]
+ return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+function numberValue(record: Record | null | undefined, key: string): number | null {
+ const value = record?.[key]
+ return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function assertDetectionJobIdentity(projectId: string, job: JobRead): void {
+ if (job.project_id !== projectId || job.job_type !== 'detection.run') {
+ throw new DetectionJobError(
+ 'De server koppelde een onverwachte taak aan deze beeldanalyse',
+ 'DETECTION_JOB_IDENTITY_MISMATCH',
+ job.id,
+ )
+ }
+}
+
+/**
+ * Follow one queued GPU run until the backend marks it terminal.
+ *
+ * A transient polling failure is retried, but an unknown or partial terminal
+ * state is never interpreted as a completed inference. The backend remains
+ * the only authority for the outcome and persisted detection count.
+ */
+export async function waitForDetectionJob({
+ projectId,
+ initialJob,
+ signal,
+ intervalMs = DETECTION_JOB_POLL_INTERVAL_MS,
+ timeoutMs = DETECTION_JOB_TIMEOUT_MS,
+ maxConsecutiveReadErrors = 3,
+ readJob = jobsApi.get,
+ onStatus,
+}: WaitForDetectionJobOptions): Promise {
+ const startedAt = Date.now()
+ let job = initialJob
+ let consecutiveReadErrors = 0
+
+ while (true) {
+ if (signal?.aborted) {
+ throw abortedError()
+ }
+ assertDetectionJobIdentity(projectId, job)
+ onStatus?.(job)
+
+ if (job.status === 'success') {
+ return job
+ }
+ if (TERMINAL_FAILURE_STATUSES.has(job.status)) {
+ const code = stringValue(job.result_json, 'error_code') ?? `DETECTION_JOB_${job.status.toUpperCase()}`
+ const message = job.error_message
+ ?? stringValue(job.result_json, 'message')
+ ?? 'De GPU-taak is niet volledig uitgevoerd'
+ throw new DetectionJobError(message, code, job.id)
+ }
+ if (!ACTIVE_JOB_STATUSES.has(job.status)) {
+ throw new DetectionJobError(
+ `De detectietaak heeft een onbekende status: ${job.status}`,
+ 'DETECTION_JOB_STATUS_INVALID',
+ job.id,
+ )
+ }
+ if (Date.now() - startedAt >= timeoutMs) {
+ throw new DetectionJobError(
+ 'De detectietaak loopt nog op de server, maar de wachttijd in dit scherm is verstreken. Herlaad de bewaarde detectieruns om het resultaat later te bekijken.',
+ 'DETECTION_JOB_POLL_TIMEOUT',
+ job.id,
+ )
+ }
+
+ await wait(intervalMs, signal)
+ try {
+ job = await readJob(projectId, job.id)
+ consecutiveReadErrors = 0
+ } catch (error) {
+ if (signal?.aborted) {
+ throw abortedError()
+ }
+ consecutiveReadErrors += 1
+ if (consecutiveReadErrors >= maxConsecutiveReadErrors) {
+ throw error
+ }
+ }
+ }
+}
+
+/** Convert persisted server evidence into the existing UI summary contract. */
+export function completedDetectionResponse(
+ request: DetectionRunRequest,
+ job: JobRead,
+ run: DetectionRunRead,
+): DetectionRunResponse {
+ assertDetectionJobIdentity(request.project_id, job)
+ if (
+ job.status !== 'success'
+ || run.status !== 'success'
+ || run.project_id !== request.project_id
+ || run.dataset_id !== request.dataset_id
+ || run.job_id !== job.id
+ ) {
+ throw new DetectionJobError(
+ 'De bewaarde detectierun komt niet overeen met de voltooide GPU-taak',
+ 'DETECTION_RUN_RESULT_MISMATCH',
+ job.id,
+ )
+ }
+
+ const detectionCount = numberValue(job.result_json, 'detection_count')
+ ?? numberValue(run.result_json, 'detection_count')
+ if (detectionCount === null || !Number.isInteger(detectionCount) || detectionCount < 0) {
+ throw new DetectionJobError(
+ 'De voltooide detectietaak bevat geen geldige, herleidbare objecttelling',
+ 'DETECTION_RUN_RESULT_INCOMPLETE',
+ job.id,
+ )
+ }
+
+ return {
+ analysis_run_id: run.id,
+ job_id: job.id,
+ project_id: request.project_id,
+ dataset_id: request.dataset_id,
+ model_id: run.model_name ?? request.model_id,
+ status: 'success',
+ detection_count: detectionCount,
+ error_code: null,
+ message: detectionCount === 0
+ ? 'Analyse voltooid zonder objecten boven de gekozen zekerheidsdrempel. Dit bewijst niet dat het gebied objectvrij is.'
+ : 'GPU-analyse voltooid; de bewaarde objecten zijn geladen.',
+ }
+}
+
+export function analysisRunIdFromJob(job: JobRead): string | null {
+ return stringValue(job.result_json, 'analysis_run_id')
+}
diff --git a/frontend/src/services/segmentationJob.test.ts b/frontend/src/services/segmentationJob.test.ts
new file mode 100644
index 00000000..3c9b5121
--- /dev/null
+++ b/frontend/src/services/segmentationJob.test.ts
@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { JobRead, SegmentationRunRead, SegmentationRunRequest } from '../types'
+import {
+ completedSegmentationResponse,
+ SegmentationJobError,
+ waitForSegmentationJob,
+} from './segmentationJob'
+
+const projectId = 'project-1'
+const datasetId = 'dataset-1'
+const jobId = 'job-1'
+
+function job(status: string, overrides: Partial = {}): JobRead {
+ return {
+ id: jobId,
+ job_type: 'segmentation.run',
+ status,
+ project_id: projectId,
+ dataset_id: datasetId,
+ parameters_json: {},
+ ...overrides,
+ }
+}
+
+function run(overrides: Partial = {}): SegmentationRunRead {
+ return {
+ id: 'run-1',
+ project_id: projectId,
+ dataset_id: datasetId,
+ job_id: jobId,
+ analysis_type: 'segmentation',
+ status: 'success',
+ model_name: 'yolo-seg-configured',
+ parameters_json: {},
+ result_json: { segmentation_count: 4 },
+ ...overrides,
+ }
+}
+
+const request: SegmentationRunRequest = {
+ project_id: projectId,
+ dataset_id: datasetId,
+ model_id: 'yolo-seg-configured',
+ confidence_threshold: 0.5,
+ tile_manifest_path: '/tiles/manifest.json',
+}
+
+describe('waitForSegmentationJob', () => {
+ it('polls the project-bound job until the GPU task succeeds', async () => {
+ const readJob = vi.fn()
+ .mockResolvedValueOnce(job('running'))
+ .mockResolvedValueOnce(job('success', { result_json: { segmentation_count: 4 } }))
+ const statuses: string[] = []
+
+ const completed = await waitForSegmentationJob({
+ projectId,
+ initialJob: job('queued'),
+ intervalMs: 0,
+ readJob,
+ onStatus: (value) => statuses.push(value.status),
+ })
+
+ expect(completed.status).toBe('success')
+ expect(statuses).toEqual(['queued', 'running', 'success'])
+ expect(readJob).toHaveBeenNthCalledWith(1, projectId, jobId)
+ expect(readJob).toHaveBeenCalledTimes(2)
+ })
+
+ it('keeps server failure and timeout distinct from a valid empty result', async () => {
+ await expect(waitForSegmentationJob({
+ projectId,
+ initialJob: job('failed', {
+ error_message: 'NVIDIA CUDA is niet beschikbaar',
+ result_json: { error_code: 'SEGMENTATION_ACCELERATOR_UNAVAILABLE' },
+ }),
+ intervalMs: 0,
+ })).rejects.toMatchObject({
+ name: 'SegmentationJobError',
+ code: 'SEGMENTATION_ACCELERATOR_UNAVAILABLE',
+ message: 'NVIDIA CUDA is niet beschikbaar',
+ })
+
+ await expect(waitForSegmentationJob({
+ projectId,
+ initialJob: job('running'),
+ intervalMs: 0,
+ timeoutMs: 0,
+ })).rejects.toMatchObject({ code: 'SEGMENTATION_JOB_POLL_TIMEOUT' })
+ })
+
+ it('rejects partial, cross-project and wrong-task jobs', async () => {
+ await expect(waitForSegmentationJob({
+ projectId,
+ initialJob: job('partial'),
+ intervalMs: 0,
+ })).rejects.toBeInstanceOf(SegmentationJobError)
+
+ await expect(waitForSegmentationJob({
+ projectId,
+ initialJob: job('success', { project_id: 'other-project' }),
+ intervalMs: 0,
+ })).rejects.toMatchObject({ code: 'SEGMENTATION_JOB_IDENTITY_MISMATCH' })
+
+ await expect(waitForSegmentationJob({
+ projectId,
+ initialJob: job('success', { job_type: 'detection.run' }),
+ intervalMs: 0,
+ })).rejects.toMatchObject({ code: 'SEGMENTATION_JOB_IDENTITY_MISMATCH' })
+ })
+})
+
+describe('completedSegmentationResponse', () => {
+ it('accepts a persisted zero-result run without claiming that the area is empty', () => {
+ const response = completedSegmentationResponse(
+ request,
+ job('success', { result_json: { segmentation_count: 0 } }),
+ run({ result_json: { segmentation_count: 0 } }),
+ )
+
+ expect(response.segmentation_count).toBe(0)
+ expect(response.status).toBe('success')
+ expect(response.message).toContain('bewijst niet')
+ })
+
+ it('fails closed for missing counts or a mismatched persisted run', () => {
+ expect(() => completedSegmentationResponse(
+ request,
+ job('success'),
+ run({ result_json: null }),
+ )).toThrowError(SegmentationJobError)
+
+ expect(() => completedSegmentationResponse(
+ request,
+ job('success', { result_json: { segmentation_count: 2 } }),
+ run({ project_id: 'other-project' }),
+ )).toThrowError(SegmentationJobError)
+
+ expect(() => completedSegmentationResponse(
+ request,
+ job('success', { result_json: { segmentation_count: 2 } }),
+ run({ model_name: 'sam-configured' }),
+ )).toThrowError(SegmentationJobError)
+ })
+})
diff --git a/frontend/src/services/segmentationJob.ts b/frontend/src/services/segmentationJob.ts
new file mode 100644
index 00000000..dcc95cac
--- /dev/null
+++ b/frontend/src/services/segmentationJob.ts
@@ -0,0 +1,193 @@
+import type { JobRead, SegmentationRunRead, SegmentationRunRequest, SegmentationRunResponse } from '../types'
+import { jobsApi } from './api/jobs'
+
+const ACTIVE_JOB_STATUSES = new Set(['queued', 'running'])
+const TERMINAL_FAILURE_STATUSES = new Set(['failed', 'cancelled', 'partial'])
+
+export const SEGMENTATION_JOB_POLL_INTERVAL_MS = 1_500
+export const SEGMENTATION_JOB_TIMEOUT_MS = 30 * 60 * 1_000
+
+export class SegmentationJobError extends Error {
+ readonly code: string
+ readonly jobId: string
+
+ constructor(message: string, code: string, jobId: string) {
+ super(message)
+ this.name = 'SegmentationJobError'
+ this.code = code
+ this.jobId = jobId
+ }
+}
+
+interface WaitForSegmentationJobOptions {
+ projectId: string
+ initialJob: JobRead
+ signal?: AbortSignal
+ intervalMs?: number
+ timeoutMs?: number
+ maxConsecutiveReadErrors?: number
+ readJob?: (projectId: string, jobId: string) => Promise
+ onStatus?: (job: JobRead) => void
+}
+
+function abortedError(): Error {
+ const error = new Error('Het volgen van de segmentatietaak is gestopt')
+ error.name = 'AbortError'
+ return error
+}
+
+function wait(milliseconds: number, signal?: AbortSignal): Promise {
+ if (signal?.aborted) {
+ return Promise.reject(abortedError())
+ }
+ if (milliseconds <= 0) {
+ return Promise.resolve()
+ }
+ return new Promise((resolve, reject) => {
+ const timer = window.setTimeout(() => {
+ signal?.removeEventListener('abort', onAbort)
+ resolve()
+ }, milliseconds)
+ const onAbort = () => {
+ window.clearTimeout(timer)
+ signal?.removeEventListener('abort', onAbort)
+ reject(abortedError())
+ }
+ signal?.addEventListener('abort', onAbort, { once: true })
+ })
+}
+
+function stringValue(record: Record | null | undefined, key: string): string | null {
+ const value = record?.[key]
+ return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+function numberValue(record: Record | null | undefined, key: string): number | null {
+ const value = record?.[key]
+ return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+function assertSegmentationJobIdentity(projectId: string, job: JobRead): void {
+ if (job.project_id !== projectId || job.job_type !== 'segmentation.run') {
+ throw new SegmentationJobError(
+ 'De server koppelde een onverwachte taak aan deze segmentatie',
+ 'SEGMENTATION_JOB_IDENTITY_MISMATCH',
+ job.id,
+ )
+ }
+}
+
+/** Follow one queued GPU segmentation until the backend marks it terminal. */
+export async function waitForSegmentationJob({
+ projectId,
+ initialJob,
+ signal,
+ intervalMs = SEGMENTATION_JOB_POLL_INTERVAL_MS,
+ timeoutMs = SEGMENTATION_JOB_TIMEOUT_MS,
+ maxConsecutiveReadErrors = 3,
+ readJob = jobsApi.get,
+ onStatus,
+}: WaitForSegmentationJobOptions): Promise {
+ const startedAt = Date.now()
+ let job = initialJob
+ let consecutiveReadErrors = 0
+
+ while (true) {
+ if (signal?.aborted) {
+ throw abortedError()
+ }
+ assertSegmentationJobIdentity(projectId, job)
+ onStatus?.(job)
+
+ if (job.status === 'success') {
+ return job
+ }
+ if (TERMINAL_FAILURE_STATUSES.has(job.status)) {
+ const code = stringValue(job.result_json, 'error_code') ?? `SEGMENTATION_JOB_${job.status.toUpperCase()}`
+ const message = job.error_message
+ ?? stringValue(job.result_json, 'message')
+ ?? 'De GPU-taak is niet volledig uitgevoerd'
+ throw new SegmentationJobError(message, code, job.id)
+ }
+ if (!ACTIVE_JOB_STATUSES.has(job.status)) {
+ throw new SegmentationJobError(
+ `De segmentatietaak heeft een onbekende status: ${job.status}`,
+ 'SEGMENTATION_JOB_STATUS_INVALID',
+ job.id,
+ )
+ }
+ if (Date.now() - startedAt >= timeoutMs) {
+ throw new SegmentationJobError(
+ 'De segmentatietaak loopt nog op de server, maar de wachttijd in dit scherm is verstreken. Herlaad de bewaarde segmentatieruns om het resultaat later te bekijken.',
+ 'SEGMENTATION_JOB_POLL_TIMEOUT',
+ job.id,
+ )
+ }
+
+ await wait(intervalMs, signal)
+ try {
+ job = await readJob(projectId, job.id)
+ consecutiveReadErrors = 0
+ } catch (error) {
+ if (signal?.aborted) {
+ throw abortedError()
+ }
+ consecutiveReadErrors += 1
+ if (consecutiveReadErrors >= maxConsecutiveReadErrors) {
+ throw error
+ }
+ }
+ }
+}
+
+/** Convert persisted server evidence into the UI summary contract. */
+export function completedSegmentationResponse(
+ request: SegmentationRunRequest,
+ job: JobRead,
+ run: SegmentationRunRead,
+): SegmentationRunResponse {
+ assertSegmentationJobIdentity(request.project_id, job)
+ if (
+ job.status !== 'success'
+ || run.status !== 'success'
+ || run.analysis_type !== 'segmentation'
+ || run.project_id !== request.project_id
+ || run.dataset_id !== request.dataset_id
+ || run.job_id !== job.id
+ || (run.model_name != null && run.model_name !== request.model_id)
+ ) {
+ throw new SegmentationJobError(
+ 'De bewaarde segmentatierun komt niet overeen met de voltooide GPU-taak',
+ 'SEGMENTATION_RUN_RESULT_MISMATCH',
+ job.id,
+ )
+ }
+
+ const segmentationCount = numberValue(job.result_json, 'segmentation_count')
+ ?? numberValue(run.result_json, 'segmentation_count')
+ if (segmentationCount === null || !Number.isInteger(segmentationCount) || segmentationCount < 0) {
+ throw new SegmentationJobError(
+ 'De voltooide segmentatietaak bevat geen geldige, herleidbare vlakkentelling',
+ 'SEGMENTATION_RUN_RESULT_INCOMPLETE',
+ job.id,
+ )
+ }
+
+ return {
+ analysis_run_id: run.id,
+ job_id: job.id,
+ project_id: request.project_id,
+ dataset_id: request.dataset_id,
+ model_id: run.model_name ?? request.model_id,
+ status: 'success',
+ segmentation_count: segmentationCount,
+ error_code: null,
+ message: segmentationCount === 0
+ ? 'Segmentatie voltooid zonder vlakken boven de gekozen zekerheidsdrempel. Dit bewijst niet dat het gebied geen relevante objecten bevat.'
+ : 'GPU-segmentatie voltooid; de bewaarde vlakken zijn geladen.',
+ }
+}
+
+export function analysisRunIdFromSegmentationJob(job: JobRead): string | null {
+ return stringValue(job.result_json, 'analysis_run_id')
+}
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
new file mode 100644
index 00000000..ecef3753
--- /dev/null
+++ b/frontend/src/styles/base.css
@@ -0,0 +1,139 @@
+/*
+ * Kleine, route-onafhankelijke basis.
+ *
+ * De kaartwerkbank importeert zijn omvangrijke app.css zelf via de lazy
+ * WorkbenchApp-chunk. Houd hier alleen de globale regels die ook het
+ * aanmeldscherm en de korte laadstatus nodig hebben; MapLibre hoort niet in de
+ * publieke landing-bundel.
+ */
+
+:root {
+ --bg: #f4f7f5;
+ --panel: #ffffff;
+ --panel-soft: #fafcfb;
+ --surface-raised: #ffffff;
+ --surface-sunken: #f7faf8;
+ --text: #132018;
+ --muted: #5f6f67;
+ --line: #dbe4de;
+ --line-strong: #b8c8bf;
+ --accent: #0f766e;
+ --accent-strong: #115e59;
+ --accent-soft: #e3f4ef;
+ --focus-ring: #0f766e;
+ --focus-ring-soft: rgba(15, 118, 110, 0.2);
+ --warning: #b45309;
+ --danger: #991b1b;
+ --shadow: 0 10px 26px rgba(33, 48, 41, 0.06);
+ --shadow-soft: 0 6px 18px rgba(33, 48, 41, 0.045);
+
+ /* De landing gebruikt dezelfde vormtaal, maar laadt het volledige
+ werkbank-designsysteem bewust pas na authenticatie. */
+ --gi-radius-sm: 6px;
+ --gi-radius-md: 10px;
+ --gi-radius-lg: 14px;
+ --gi-radius-xl: 20px;
+ --gi-radius-pill: 999px;
+ --gi-shadow-md: 0 12px 28px rgba(6, 37, 31, 0.1);
+ --gi-shadow-lg: 0 24px 60px rgba(6, 37, 31, 0.16);
+
+ color-scheme: light;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ overflow-x: hidden;
+ background: var(--bg);
+}
+
+body {
+ overflow-x: hidden;
+ margin: 0;
+ font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif;
+ color: var(--text);
+ background:
+ linear-gradient(180deg, rgba(15, 118, 110, 0.08), rgba(238, 244, 241, 0) 18rem),
+ var(--bg);
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+select,
+textarea {
+ font: inherit;
+}
+
+button {
+ min-height: 2.35rem;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--gi-radius-sm);
+ padding: 0.52rem 0.78rem;
+ background: linear-gradient(180deg, #ffffff, #eef8f6);
+ color: var(--text);
+ cursor: pointer;
+ font-weight: 600;
+ transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+}
+
+button:hover:not(:disabled) {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
+}
+
+button:active:not(:disabled) { transform: translateY(1px); }
+button:disabled { cursor: not-allowed; opacity: 0.52; }
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+ border-color: var(--focus-ring);
+ outline: 3px solid var(--focus-ring);
+ outline-offset: 2px;
+ box-shadow: 0 0 0 5px var(--focus-ring-soft);
+}
+
+input,
+select,
+textarea {
+ width: 100%;
+ min-height: 2.35rem;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--gi-radius-sm);
+ padding: 0.52rem 0.62rem;
+ background: #ffffff;
+ color: var(--text);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+ border-color: var(--accent);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
+}
+
+h1,
+h2,
+h3,
+p { overflow-wrap: anywhere; }
+
+h1 {
+ max-width: 42rem;
+ margin: 0;
+ font-size: clamp(1.85rem, 2.6vw, 2.7rem);
+ letter-spacing: 0;
+ line-height: 1.02;
+}
+
+h2 { margin: 0 0 0.9rem; font-size: 1.28rem; letter-spacing: 0; line-height: 1.15; }
+h3 { margin: 1.1rem 0 0.55rem; font-size: 1rem; letter-spacing: 0; line-height: 1.2; }
+p { line-height: 1.45; }
diff --git a/frontend/src/styles/geointel-system.css b/frontend/src/styles/geointel-system.css
index ee2a0728..97caf7b4 100644
--- a/frontend/src/styles/geointel-system.css
+++ b/frontend/src/styles/geointel-system.css
@@ -918,6 +918,24 @@
text-align: center;
}
+/* Een mislukte analyse is geen lege toestand: houd de resultatenlade open en
+ maak de herstelactie bereikbaar zonder hover op de smalle ladegreep. */
+.geo-results-error {
+ display: grid;
+ gap: var(--gi-space-3);
+ place-content: center;
+ justify-items: center;
+ min-height: 15rem;
+ padding: var(--gi-space-6) var(--gi-space-4);
+ border: 1px solid var(--gi-danger-soft);
+ border-radius: var(--gi-radius-sm);
+ background: color-mix(in srgb, var(--gi-danger-soft) 26%, var(--gi-surface));
+ text-align: center;
+}
+
+.geo-results-error strong { color: var(--gi-danger); }
+.geo-results-error p { max-width: 22rem; margin: 0; color: var(--gi-ink-600); }
+
/* -- 3. Bedieningspaneel compacter ----------------------------------------- */
/* Het statuslabel stond in een derde kolom en duwde de titel kapot
@@ -2368,6 +2386,7 @@ button.overview-command-card { cursor: pointer; }
@media (max-width: 600px) {
.workbench-layout { display: block; min-height: 100dvh; }
+ .workbench-topbar { top: 0; }
.workbench-sidebar {
position: fixed; z-index: 120; top: auto; right: 0; bottom: 0; left: 0; width: 100%;
min-height: 4.15rem; max-height: 4.15rem; border-top: 1px solid rgba(153, 218, 202, 0.22);
@@ -2415,6 +2434,17 @@ button.overview-command-card { cursor: pointer; }
.geo-map-actions button { min-width: 0; justify-content: center; padding-inline: 0.45rem; }
.geo-map-actions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-map-actions button:last-child span { display: none; }
+ .live-analysis-journey {
+ top: 4.4rem;
+ right: 3.25rem;
+ bottom: auto;
+ left: 0.5rem;
+ width: auto;
+ min-width: 0;
+ padding: 0.45rem 0.55rem;
+ }
+ .live-analysis-status-card { display: none; }
+ .live-analysis-steps { width: 100%; }
.geo-results-panel {
position: fixed; z-index: 130; top: 0; right: 0; bottom: 4.15rem;
width: min(31rem, calc(100% - 2.75rem)); height: auto; max-height: none;
@@ -2760,6 +2790,25 @@ body:not([data-theme='light']) .workbench-shell :where(input, select, textarea)
}
}
+@media (max-width: 600px) {
+ /* De primaire navigatie staat op smartphones onderaan. De kop toont daarom
+ alleen merk, werkstand en sessie; de werkcontext staat direct eronder in
+ het kaartscherm. Dit voorkomt dat logo en afgekorte contextlabels in
+ dezelfde smalle rastercel over elkaar heen worden getekend. */
+ .workbench-topbar {
+ grid-template-columns: minmax(0, 1fr) auto auto;
+ }
+
+ .workbench-topbar .context-bar,
+ .workbench-topbar .context-health {
+ display: none;
+ }
+
+ .workbench-topbar .mobile-brand {
+ display: flex;
+ }
+}
+
/* ============================================================================
AI-vragen: raster zonder botsingen
----------------------------------------------------------------------------
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 033a7196..a00d1720 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1321,6 +1321,7 @@ export interface ModelAssetListResponse {
export interface YoloPreflightChecks {
enabled: boolean
dependencies_available?: boolean | null
+ accelerator_ready?: boolean | null
model_path_set?: boolean | null
model_file_exists?: boolean | null
model_load_requested: boolean