Harden RC9 UX and performance states

frontend/src/components/map/MapWorkspace.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
 import GeoMap from '../GeoMap'
 import type { AreaRead, CoverageResolveResponse, CoverageStatus, DatasetCreateResponse, DetectionQaResult, MapResultExportRequest, MapViewportState, OrthophotoAcquisitionResult, OrthophotoProductRead, ProjectRead, QaComparisonResult, VectorSelectionBBox, VectorSelectionMetric, VectorSelectionResponse } from '../../types'
 import { useMapThemeSelectionInsights, type MapThemeAcquisition, type MapThemeQuery } from '../../hooks/useMapThemeSelectionInsights'
@@ -10,6 +10,11 @@ import { terrainImageUrl } from '../../lib/terrainImage'
 import { floodHazardImageUrl } from '../../lib/floodHazardImage'
 import { thematicRasterImageUrl } from '../../lib/thematicRaster'
 import { FLANDERS_WORKSPACE_PROJECT_NAME } from '../../config/primaryFocus'
+import {
+  MAP_ANALYSIS_BUDGET_MS,
+  exceedsPerformanceBudget,
+  formatPerformanceDuration,
+} from '../../lib/performanceBudget'
 import {
   bboxToInputState,
   bboxesEqual,
@@ -562,6 +567,10 @@ interface MapWorkspaceProps {
   coverage: CoverageResolveResponse | null
   coverageLoading: boolean
   coverageError: string | null
+  coverageDurationMs: number | null
+  coverageBudgetExceeded: boolean
+  workspaceLoading: boolean
+  workspaceError: string | null
   selectionExporting: boolean
   selectionExportError: string | null
   latestSelectionExportPath: string | null
@@ -651,6 +660,10 @@ export function MapWorkspace({
   coverage,
   coverageLoading,
   coverageError,
+  coverageDurationMs,
+  coverageBudgetExceeded,
+  workspaceLoading,
+  workspaceError,
   selectionExporting,
   selectionExportError,
   latestSelectionExportPath,
@@ -744,6 +757,8 @@ export function MapWorkspace({
   const [fullWorkflowStatus, setFullWorkflowStatus] = useState('Klaar om de volledige GIS-werkstroom uit te voeren.')
   const [fullWorkflowError, setFullWorkflowError] = useState<string | null>(null)
   const [fullWorkflowMode, setFullWorkflowMode] = useState<'new' | 'reuse'>('new')
+  const [mapAnalysisDurationMs, setMapAnalysisDurationMs] = useState<number | null>(null)
+  const mapAnalysisRequestSequence = useRef(0)
   const selectedMapArea = areas.find((area) => area.id === selectedMapAreaId)
   const regionalScopeSelected = Boolean(selectedMapArea && !isMunicipalityAreaName(selectedMapArea.name))
   const featureProperties = selectedMapFeature?.properties ?? null
@@ -1331,6 +1346,8 @@ export function MapWorkspace({
   }
 
   const clearAreaSelection = () => {
+    mapAnalysisRequestSequence.current += 1
+    setMapAnalysisDurationMs(null)
     setBboxSelectionMode(false)
     setFirstSelectionCorner(null)
     setBboxInput(bboxToInputState(null))
@@ -1493,6 +1510,23 @@ export function MapWorkspace({
     }
   }
 
+  const handleAnalysisModeKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    mode: 'current' | 'evolution',
+  ) => {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+    event.preventDefault()
+    const nextMode = event.key === 'ArrowLeft' || event.key === 'Home'
+      ? 'current'
+      : event.key === 'ArrowRight' || event.key === 'End'
+        ? 'evolution'
+        : mode
+    setExplorerMode(nextMode)
+    window.requestAnimationFrame(() => {
+      document.getElementById(`geo-analysis-tab-${nextMode}`)?.focus()
+    })
+  }
+
   const loadAllThemeResults = async (bbox: VectorSelectionBBox, areaId?: string) => {
     const availableThemes: Array<MapThemeQuery<DataThemeId>> = []
     for (const theme of DATA_THEMES) {
@@ -1524,6 +1558,10 @@ export function MapWorkspace({
   }
 
   const analyzeSelection = async (bbox: VectorSelectionBBox, areaId?: string) => {
+    const requestId = mapAnalysisRequestSequence.current + 1
+    mapAnalysisRequestSequence.current = requestId
+    const startedAt = Date.now()
+    setMapAnalysisDurationMs(null)
     setSelectionBbox(bbox)
     const tasks: Array<Promise<unknown>> = [loadAllThemeResults(bbox, areaId)]
     if (activeThemeAvailable && !regionalPartitionedThemeActive && !onDemandThemeActive) {
@@ -1532,7 +1570,13 @@ export function MapWorkspace({
     if (analysisMode === 'evolution' && earlierDatasetId && laterDatasetId) {
       tasks.push(compareTemporalSnapshots(earlierDatasetId, laterDatasetId, bbox, areaId))
     }
-    await Promise.all(tasks)
+    try {
+      await Promise.all(tasks)
+    } finally {
+      if (mapAnalysisRequestSequence.current === requestId) {
+        setMapAnalysisDurationMs(Date.now() - startedAt)
+      }
+    }
   }
 
   const runTemporalComparison = () => {
@@ -1638,7 +1682,12 @@ export function MapWorkspace({
 
   if (!advancedMode) {
     return (
-      <section className="geo-explorer" data-testid="map-workspace" aria-label={`Gebiedsverkenner ${activeScopeLabel}`}>
+      <section
+        className="geo-explorer"
+        data-testid="map-workspace"
+        aria-label={`Gebiedsverkenner ${activeScopeLabel}`}
+        aria-busy={workspaceLoading}
+      >
         <header className="geo-explorer-header">
           <div>
             <p className="eyebrow">{activeScopeLabel} · geografische verkenner</p>
@@ -1647,29 +1696,60 @@ export function MapWorkspace({
           </div>
           <div className="geo-analysis-mode" role="tablist" aria-label="Analyseperiode">
             <button
+              id="geo-analysis-tab-current"
               className={analysisMode === 'current' ? 'active' : ''}
               type="button"
               role="tab"
               aria-selected={analysisMode === 'current'}
+              aria-controls="geo-explorer-results"
+              tabIndex={analysisMode === 'current' ? 0 : -1}
               onClick={() => setExplorerMode('current')}
+              onKeyDown={(event) => handleAnalysisModeKeyDown(event, 'current')}
             >
               Laatste toestand
             </button>
             <button
+              id="geo-analysis-tab-evolution"
               className={analysisMode === 'evolution' ? 'active' : ''}
               type="button"
               role="tab"
               aria-selected={analysisMode === 'evolution'}
+              aria-controls="geo-explorer-results"
+              tabIndex={analysisMode === 'evolution' ? 0 : -1}
               onClick={() => setExplorerMode('evolution')}
+              onKeyDown={(event) => handleAnalysisModeKeyDown(event, 'evolution')}
             >
               Evolutie
             </button>
           </div>
-          <button className="secondary-action geo-explorer-advanced" type="button" onClick={() => setAdvancedMode(true)}>
+          <button
+            className="secondary-action geo-explorer-advanced"
+            type="button"
+            onClick={() => setAdvancedMode(true)}
+            aria-expanded={advancedMode}
+            aria-controls="geo-advanced-workbench"
+          >
             Geavanceerde werkbank
           </button>
         </header>
 
+        {workspaceLoading ? (
+          <div className="geo-bootstrap-status" role="status" aria-live="polite">
+            <span className="geo-loading-indicator" aria-hidden="true" />
+            <div>
+              <strong>Databronnen worden gecontroleerd</strong>
+              <small>Beschikbaarheid verschijnt zodra de nationale werkruimte volledig is geladen.</small>
+            </div>
+          </div>
+        ) : workspaceError ? (
+          <div className="geo-bootstrap-status geo-bootstrap-status-error" role="alert">
+            <div>
+              <strong>De werkruimte kon niet volledig worden geladen</strong>
+              <small>{workspaceError}</small>
+            </div>
+          </div>
+        ) : null}
+
         <div className="geo-explorer-layout">
           <aside className="geo-theme-panel" aria-label="Datathema kiezen">
             <div className="geo-panel-heading">
@@ -1682,7 +1762,13 @@ export function MapWorkspace({
             <div className="geo-loaded-scope" aria-label="Ingeladen regiobereik">
               <span>Ingeladen bereik</span>
               <strong>{activeScopeLabel}</strong>
-              <small>{municipalityAreaCount > 0 ? `${municipalityAreaCount} gemeenten en de volledige regio beschikbaar` : 'Regionale gegevens worden geladen'}</small>
+              <small>
+                {workspaceLoading
+                  ? 'Gebieden en bronnen worden geladen'
+                  : municipalityAreaCount > 0
+                    ? `${municipalityAreaCount} gemeenten en de volledige regio beschikbaar`
+                    : 'Geen gemeentelijke onderverdeling in deze werkruimte'}
+              </small>
             </div>
             <div className="geo-theme-list">
               {DATA_THEMES.map((theme) => {
@@ -1692,9 +1778,9 @@ export function MapWorkspace({
                 const temporalGroups = themeTemporalSeriesMap[theme.id]
                 const temporalGroup = temporalGroups[0]
                 const evolutionAvailable = temporalGroups.some((group) => group.items.length >= 2)
-                const available = analysisMode === 'current'
+                const available = !workspaceLoading && (analysisMode === 'current'
                   ? Boolean(dataset || onDemandProduct)
-                  : Boolean(dataset) && evolutionAvailable
+                  : Boolean(dataset) && evolutionAvailable)
                 const active = activeThemeId === theme.id
                 const temporalRange = temporalGroup ? temporalRangeLabel(temporalGroup.items) : null
                 return (
@@ -1710,7 +1796,9 @@ export function MapWorkspace({
                     <span>
                       <strong>{theme.label}</strong>
                       <small>
-                        {analysisMode === 'evolution'
+                        {workspaceLoading
+                          ? 'Beschikbaarheid controleren'
+                          : analysisMode === 'evolution'
                           ? evolutionAvailable
                             ? `${temporalGroup.items.length} meetmomenten${temporalRange ? ` · ${temporalRange}` : ''}`
                             : dataset
@@ -1724,7 +1812,9 @@ export function MapWorkspace({
                       </small>
                     </span>
                     <i>
-                      {analysisMode === 'evolution'
+                      {workspaceLoading
+                        ? 'Laden'
+                        : analysisMode === 'evolution'
                         ? evolutionAvailable ? 'Tijdreeks' : dataset ? 'Alleen huidig' : 'Ontbreekt'
                         : dataset ? 'Beschikbaar' : onDemandProduct ? 'Op aanvraag' : 'Ontbreekt'}
                     </i>
@@ -1736,7 +1826,9 @@ export function MapWorkspace({
             <div className="geo-source-summary">
               <span>{analysisOverlayActive ? 'Actieve analyselaag' : analysisMode === 'evolution' ? 'Tijdreeks' : 'Actieve bron'}</span>
               <strong>
-                {analysisOverlayActive
+                {workspaceLoading
+                  ? 'Databronnen worden geladen'
+                  : analysisOverlayActive
                   ? mapLayerLabel
                   : analysisMode === 'evolution'
                   ? activeTemporalSeriesGroup?.label ?? 'Nog geen historische reeks ingeladen'
@@ -1747,7 +1839,9 @@ export function MapWorkspace({
                       : activeOnDemandMapProduct?.displayName ?? 'Geen databron beschikbaar'}
               </strong>
               <small>
-                {analysisOverlayActive
+                {workspaceLoading
+                  ? 'Even geduld; ontbrekende bronnen worden pas na de laadcontrole gemeld.'
+                  : analysisOverlayActive
                   ? `${mapLayerSourceLabel} · AI-resultaat, controle vereist`
                   : analysisMode === 'evolution'
                   ? activeTemporalSeries.length >= 2
@@ -2022,7 +2116,12 @@ export function MapWorkspace({
             </div>
           </div>
 
-          <aside className="geo-results-panel" aria-label="Gebiedsanalyse">
+          <aside
+            id="geo-explorer-results"
+            className="geo-results-panel"
+            aria-label="Gebiedsanalyse"
+            aria-live="polite"
+          >
             <div className="geo-panel-heading">
               <span>3</span>
               <div>
@@ -2301,6 +2400,19 @@ export function MapWorkspace({
                 ) : null}
               </>
             )}
+            {mapAnalysisDurationMs !== null ? (
+              <p
+                className={exceedsPerformanceBudget(mapAnalysisDurationMs, MAP_ANALYSIS_BUDGET_MS)
+                  ? 'geo-performance-status geo-performance-status-warning'
+                  : 'geo-performance-status'}
+                role={exceedsPerformanceBudget(mapAnalysisDurationMs, MAP_ANALYSIS_BUDGET_MS) ? 'alert' : 'status'}
+              >
+                Selectie geanalyseerd in {formatPerformanceDuration(mapAnalysisDurationMs)}.
+                {exceedsPerformanceBudget(mapAnalysisDurationMs, MAP_ANALYSIS_BUDGET_MS)
+                  ? ' Dit overschrijdt het releasebudget van 15 seconden.'
+                  : ''}
+              </p>
+            ) : null}
           </aside>
         </div>
 
@@ -2326,7 +2438,7 @@ export function MapWorkspace({
   }
 
   return (
-    <section className="map-workspace-shell" data-testid="map-workspace">
+    <section id="geo-advanced-workbench" className="map-workspace-shell" data-testid="map-workspace">
       <button className="secondary-action" type="button" onClick={() => setAdvancedMode(false)}>
         Terug naar gebiedsverkenner
       </button>
@@ -2589,7 +2701,11 @@ export function MapWorkspace({
       ) : null}
 
       {mapSelectionBbox ? (
-        <section className="coverage-resolution-surface" aria-label="Datadekking van de kaartselectie">
+        <section
+          className="coverage-resolution-surface"
+          aria-label="Datadekking van de kaartselectie"
+          aria-busy={coverageLoading}
+        >
           <div className="panel-title-row">
             <div>
               <p className="eyebrow">Dekking van deze selectie</p>
@@ -2597,7 +2713,18 @@ export function MapWorkspace({
             </div>
             {coverageLoading ? <span className="count-pill">controleren</span> : null}
           </div>
-          {coverageError ? <p className="error">{coverageError}</p> : null}
+          {coverageError ? <p className="error" role="alert">{coverageError}</p> : null}
+          {coverageDurationMs !== null ? (
+            <p
+              className={coverageBudgetExceeded
+                ? 'geo-performance-status geo-performance-status-warning'
+                : 'geo-performance-status'}
+              role={coverageBudgetExceeded ? 'alert' : 'status'}
+            >
+              Dekkingscontrole voltooid in {formatPerformanceDuration(coverageDurationMs)}.
+              {coverageBudgetExceeded ? ' Dit overschrijdt het releasebudget van 4 seconden.' : ''}
+            </p>
+          ) : null}
           {coverage ? (
             <>
               <div className="coverage-zone-row">