Add bounded terrain and flood analysis

frontend/src/components/map/MapWorkspace.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react'
 import GeoMap from '../GeoMap'
-import type { AreaRead, DatasetCreateResponse, DetectionQaResult, MapResultExportRequest, MapViewportState, OrthophotoAcquisitionResult, OrthophotoProductRead, ProjectRead, QaComparisonResult, ThematicRasterProductRead, VectorSelectionBBox, VectorSelectionMetric, VectorSelectionResponse } from '../../types'
-import { useMapThemeSelectionInsights, type MapThemeQuery } from '../../hooks/useMapThemeSelectionInsights'
-import { useThematicRasterProducts } from '../../hooks/useThematicRasterProducts'
+import type { AreaRead, DatasetCreateResponse, DetectionQaResult, MapResultExportRequest, MapViewportState, OrthophotoAcquisitionResult, OrthophotoProductRead, ProjectRead, QaComparisonResult, VectorSelectionBBox, VectorSelectionMetric, VectorSelectionResponse } from '../../types'
+import { useMapThemeSelectionInsights, type MapThemeAcquisition, type MapThemeQuery } from '../../hooks/useMapThemeSelectionInsights'
+import { useOfficialRasterProducts } from '../../hooks/useOfficialRasterProducts'
 import { useTemporalComparison } from '../../hooks/useTemporalComparison'
 import { getDatasetDisplayName, getDatasetSourceDisplayName } from '../../lib/datasetDisplay'
 import { TemporalTrendChart } from './TemporalTrendChart'
@@ -54,6 +54,14 @@ interface TemporalSeriesGroup {
   items: DatasetCreateResponse[]
 }
 
+interface OnDemandRasterProduct extends MapThemeAcquisition {
+  theme: DataThemeId
+  nativeResolutionM: number
+  referenceLabel: string
+  attribution: string
+  limitationMessage: string
+}
+
 const DATA_THEMES: DataTheme[] = [
   {
     id: 'buildings',
@@ -661,10 +669,10 @@ export function MapWorkspace({
     clearThemeInsights,
   } = useMapThemeSelectionInsights<DataThemeId>(selectedProjectId, onRefreshProjectData)
   const {
-    products: thematicRasterProducts,
-    loading: thematicRasterProductsLoading,
-    error: thematicRasterProductsError,
-  } = useThematicRasterProducts(flandersScopeSelected ? selectedProjectId : null)
+    products: officialRasterProducts,
+    loading: officialRasterProductsLoading,
+    error: officialRasterProductsError,
+  } = useOfficialRasterProducts(flandersScopeSelected ? selectedProjectId : null)
   const {
     temporalComparison,
     temporalComparisonLoading,
@@ -674,6 +682,8 @@ export function MapWorkspace({
   } = useTemporalComparison(selectedProjectId)
   const [analysisMode, setAnalysisMode] = useState<'current' | 'evolution'>('current')
   const [selectedFloodHazardDatasetId, setSelectedFloodHazardDatasetId] = useState('')
+  const [selectedDhmvProductKey, setSelectedDhmvProductKey] = useState<'dtm_1m' | 'dsm_1m'>('dtm_1m')
+  const [selectedFloodHazardProductKey, setSelectedFloodHazardProductKey] = useState('pluviaal_current_t100')
   const [selectedTemporalSeriesKey, setSelectedTemporalSeriesKey] = useState('')
   const [earlierDatasetId, setEarlierDatasetId] = useState('')
   const [laterDatasetId, setLaterDatasetId] = useState('')
@@ -743,12 +753,37 @@ export function MapWorkspace({
         pickThemeDataset(availableMapDatasets, theme, selectedMapAreaId, regionalScopeSelected),
       ]),
     ) as Record<DataThemeId, DatasetCreateResponse | null>
-    const selectedFloodHazard = floodHazardDatasets.find((dataset) => dataset.id === selectedFloodHazardDatasetId)
+    const selectedFloodHazard = floodHazardDatasets.find(
+      (dataset) =>
+        dataset.id === selectedFloodHazardDatasetId
+        || (flandersScopeSelected && datasetProductKey(dataset) === selectedFloodHazardProductKey),
+    )
     if (selectedFloodHazard) {
       result.flood_hazard = selectedFloodHazard
+    } else if (flandersScopeSelected && officialRasterProducts.floodHazard.length > 0) {
+      result.flood_hazard = null
+    }
+    if (flandersScopeSelected && officialRasterProducts.dhmv.length > 0) {
+      result.elevation = availableMapDatasets.find(
+        (dataset) =>
+          dataset.source_name === 'digitaal_vlaanderen_dhmv'
+          && datasetProductKey(dataset) === selectedDhmvProductKey
+          && datasetCoversSelectedArea(dataset, selectedMapAreaId, regionalScopeSelected),
+      ) ?? null
     }
     return result
-  }, [availableMapDatasets, floodHazardDatasets, regionalScopeSelected, selectedFloodHazardDatasetId, selectedMapAreaId])
+  }, [
+    availableMapDatasets,
+    flandersScopeSelected,
+    floodHazardDatasets,
+    officialRasterProducts.dhmv.length,
+    officialRasterProducts.floodHazard.length,
+    regionalScopeSelected,
+    selectedDhmvProductKey,
+    selectedFloodHazardDatasetId,
+    selectedFloodHazardProductKey,
+    selectedMapAreaId,
+  ])
   const themePartitionMap = useMemo(
     () =>
       Object.fromEntries(
@@ -765,15 +800,62 @@ export function MapWorkspace({
     [availableMapDatasets, regionalScopeSelected, selectedMapAreaId, themeDatasetMap],
   )
   const activeTheme = DATA_THEMES.find((theme) => theme.id === activeThemeId) ?? DATA_THEMES[0]
-  const onDemandThematicProductMap = useMemo(
-    () => flandersScopeSelected
-      ? new Map<DataThemeId, ThematicRasterProductRead>(
-          thematicRasterProducts.map((product) => [product.theme, product]),
-        )
-      : new Map<DataThemeId, ThematicRasterProductRead>(),
-    [flandersScopeSelected, thematicRasterProducts],
+  const onDemandRasterProductMap = useMemo(
+    () => {
+      const result = new Map<DataThemeId, OnDemandRasterProduct>()
+      if (!flandersScopeSelected) {
+        return result
+      }
+      for (const product of officialRasterProducts.thematic) {
+        result.set(product.theme, {
+          kind: 'thematic_raster',
+          productKey: product.key,
+          displayName: product.display_name,
+          theme: product.theme,
+          nativeResolutionM: product.native_resolution_m,
+          referenceLabel: String(product.observation_year),
+          attribution: product.attribution,
+          limitationMessage: product.limitation_message,
+        })
+      }
+      const dhmvProduct = officialRasterProducts.dhmv.find((product) => product.key === selectedDhmvProductKey)
+      if (dhmvProduct) {
+        result.set('elevation', {
+          kind: 'dhmv',
+          productKey: dhmvProduct.key,
+          displayName: dhmvProduct.display_name,
+          theme: 'elevation',
+          nativeResolutionM: dhmvProduct.native_resolution_m,
+          referenceLabel: dhmvProduct.acquisition_period,
+          attribution: dhmvProduct.attribution,
+          limitationMessage: dhmvProduct.limitation_message,
+        })
+      }
+      const floodProduct = officialRasterProducts.floodHazard.find(
+        (product) => product.key === selectedFloodHazardProductKey,
+      )
+      if (floodProduct) {
+        result.set('flood_hazard', {
+          kind: 'flood_hazard',
+          productKey: floodProduct.key,
+          displayName: floodProduct.display_name,
+          theme: 'flood_hazard',
+          nativeResolutionM: floodProduct.native_resolution_m,
+          referenceLabel: `${floodProduct.climate_context} · T${floodProduct.return_period_years}`,
+          attribution: floodProduct.attribution,
+          limitationMessage: floodProduct.limitation_message,
+        })
+      }
+      return result
+    },
+    [
+      flandersScopeSelected,
+      officialRasterProducts,
+      selectedDhmvProductKey,
+      selectedFloodHazardProductKey,
+    ],
   )
-  const activeOnDemandThematicProduct = onDemandThematicProductMap.get(activeTheme.id) ?? null
+  const activeOnDemandRasterProduct = onDemandRasterProductMap.get(activeTheme.id) ?? null
   const activeThemeMapStyle = DATA_THEME_MAP_STYLES[activeTheme.id]
   const analysisOverlayActive = mapContentMode === 'analysis' && analysisLayerAvailable && Boolean(mapFeatureCollection)
   const selectedOrthophotoProduct = orthophotoProducts.find((item) => item.key === selectedOrthophotoProductKey) ?? null
@@ -793,24 +875,24 @@ export function MapWorkspace({
   const regionalRasterThemeActive = regionalScopeSelected && isPartitionedRaster(activeThemeDataset)
   const regionalBathymetryThemeActive = regionalScopeSelected && isPartitionedBathymetry(activeThemeDataset)
   const regionalPartitionedThemeActive = regionalRasterThemeActive || regionalBathymetryThemeActive
-  const onDemandThematicThemeActive = analysisMode === 'current' && Boolean(activeOnDemandThematicProduct)
-  const regionalOnDemandThematicThemeActive = regionalScopeSelected && onDemandThematicThemeActive
-  const activeThemeAvailable = Boolean(activeThemeDataset) || onDemandThematicThemeActive
+  const onDemandRasterThemeActive = analysisMode === 'current' && Boolean(activeOnDemandRasterProduct)
+  const regionalOnDemandRasterThemeActive = regionalScopeSelected && onDemandRasterThemeActive
+  const activeThemeAvailable = Boolean(activeThemeDataset) || onDemandRasterThemeActive
 
   useEffect(() => {
     if (
       !flandersScopeSelected
       || analysisMode !== 'current'
       || activeThemeAvailable
-      || (onDemandThematicProductMap.size === 0 && !thematicRasterProductsError)
+      || (onDemandRasterProductMap.size === 0 && !officialRasterProductsError)
     ) {
       return
     }
     const fallbackTheme = DATA_THEMES.find((theme) =>
       theme.id === 'space_occupation'
-      && Boolean(themeDatasetMap[theme.id] || onDemandThematicProductMap.get(theme.id)),
+      && Boolean(themeDatasetMap[theme.id] || onDemandRasterProductMap.get(theme.id)),
     ) ?? DATA_THEMES.find((theme) =>
-      Boolean(themeDatasetMap[theme.id] || onDemandThematicProductMap.get(theme.id)),
+      Boolean(themeDatasetMap[theme.id] || onDemandRasterProductMap.get(theme.id)),
     )
     if (!fallbackTheme) {
       return
@@ -824,9 +906,9 @@ export function MapWorkspace({
     activeThemeAvailable,
     analysisMode,
     flandersScopeSelected,
-    onDemandThematicProductMap,
+    officialRasterProductsError,
+    onDemandRasterProductMap,
     onOpenDatasetInMap,
-    thematicRasterProductsError,
     themeDatasetMap,
   ])
 
@@ -917,12 +999,12 @@ export function MapWorkspace({
   useEffect(() => {
     const contextSourceLabel = analysisMode === 'evolution' ? activeTemporalSeriesGroup?.label ?? null
       : regionalBathymetryThemeActive ? 'VHA-dwarsprofielen Vlaanderen'
-      : activeOnDemandThematicProduct?.display_name ?? null
+      : activeOnDemandRasterProduct?.displayName ?? null
     onSetContextSourceLabel(contextSourceLabel)
     return () => onSetContextSourceLabel(null)
   }, [
     activeTemporalSeriesGroup?.label,
-    activeOnDemandThematicProduct?.display_name,
+    activeOnDemandRasterProduct?.displayName,
     analysisMode,
     onSetContextSourceLabel,
     regionalBathymetryThemeActive,
@@ -1021,14 +1103,33 @@ export function MapWorkspace({
   }, [activeTemporalSeriesGroups])
 
   useEffect(() => {
-    if (floodHazardDatasets.some((dataset) => dataset.id === selectedFloodHazardDatasetId)) {
+    const selected = floodHazardDatasets.find(
+      (dataset) => datasetProductKey(dataset) === selectedFloodHazardProductKey,
+    )
+    if (selected) {
+      if (selected.id !== selectedFloodHazardDatasetId) {
+        setSelectedFloodHazardDatasetId(selected.id)
+      }
+      return
+    }
+    if (flandersScopeSelected && officialRasterProducts.floodHazard.length > 0) {
+      setSelectedFloodHazardDatasetId('')
       return
     }
     const preferred = floodHazardDatasets.find(
       (dataset) => dataset.source_metadata?.['product_key'] === 'pluviaal_current_t100',
     ) ?? floodHazardDatasets[0]
     setSelectedFloodHazardDatasetId(preferred?.id ?? '')
-  }, [floodHazardDatasets, selectedFloodHazardDatasetId])
+    if (preferred && datasetProductKey(preferred)) {
+      setSelectedFloodHazardProductKey(datasetProductKey(preferred))
+    }
+  }, [
+    flandersScopeSelected,
+    floodHazardDatasets,
+    officialRasterProducts.floodHazard.length,
+    selectedFloodHazardDatasetId,
+    selectedFloodHazardProductKey,
+  ])
 
   useEffect(() => {
     const first = activeTemporalSeries[0]
@@ -1049,6 +1150,17 @@ export function MapWorkspace({
     if (!selectedMapDataset) {
       return
     }
+    const selectedProductKey = datasetProductKey(selectedMapDataset)
+    if (
+      selectedMapDataset.source_name === 'digitaal_vlaanderen_dhmv'
+      && (selectedProductKey === 'dtm_1m' || selectedProductKey === 'dsm_1m')
+    ) {
+      setSelectedDhmvProductKey(selectedProductKey)
+    }
+    if (selectedMapDataset.source_name === 'vmm_flood_hazard' && selectedProductKey) {
+      setSelectedFloodHazardProductKey(selectedProductKey)
+      setSelectedFloodHazardDatasetId(selectedMapDataset.id)
+    }
     const matchingThemeId = themeIdForDataset(selectedMapDataset)
     if (matchingThemeId) {
       setActiveThemeId(matchingThemeId)
@@ -1238,7 +1350,7 @@ export function MapWorkspace({
       ? temporalGroup?.items[temporalGroup.items.length - 1] ?? null
       : themeDatasetMap[theme.id]
     const onDemandProduct = analysisMode === 'current'
-      ? onDemandThematicProductMap.get(theme.id)
+      ? onDemandRasterProductMap.get(theme.id)
       : null
     if (!dataset && !onDemandProduct) {
       return
@@ -1268,13 +1380,17 @@ export function MapWorkspace({
   const loadAllThemeResults = async (bbox: VectorSelectionBBox, areaId?: string) => {
     const availableThemes: Array<MapThemeQuery<DataThemeId>> = []
     for (const theme of DATA_THEMES) {
-      const thematicProduct = analysisMode === 'current'
-        ? onDemandThematicProductMap.get(theme.id)
+      const onDemandProduct = analysisMode === 'current'
+        ? onDemandRasterProductMap.get(theme.id)
         : null
-      if (thematicProduct) {
+      if (onDemandProduct) {
         availableThemes.push({
           themeId: theme.id,
-          thematicProductKey: thematicProduct.key,
+          acquisition: {
+            kind: onDemandProduct.kind,
+            productKey: onDemandProduct.productKey,
+            displayName: onDemandProduct.displayName,
+          },
         })
         continue
       }
@@ -1294,7 +1410,7 @@ export function MapWorkspace({
   const analyzeSelection = async (bbox: VectorSelectionBBox, areaId?: string) => {
     setSelectionBbox(bbox)
     const tasks: Array<Promise<unknown>> = [loadAllThemeResults(bbox, areaId)]
-    if (!regionalPartitionedThemeActive && !onDemandThematicThemeActive) {
+    if (!regionalPartitionedThemeActive && !onDemandRasterThemeActive) {
       tasks.push(onRunMapSelectionExtract(bbox, areaId))
     }
     if (analysisMode === 'evolution' && earlierDatasetId && laterDatasetId) {
@@ -1455,7 +1571,7 @@ export function MapWorkspace({
             <div className="geo-theme-list">
               {DATA_THEMES.map((theme) => {
                 const dataset = themeDatasetMap[theme.id]
-                const onDemandProduct = onDemandThematicProductMap.get(theme.id)
+                const onDemandProduct = onDemandRasterProductMap.get(theme.id)
                 const partitions = themePartitionMap[theme.id]
                 const temporalGroups = themeTemporalSeriesMap[theme.id]
                 const temporalGroup = temporalGroups[0]
@@ -1487,7 +1603,7 @@ export function MapWorkspace({
                           : dataset
                             ? datasetAvailabilityLabel(dataset, partitions)
                             : onDemandProduct
-                              ? `${onDemandProduct.native_resolution_m} m · ${onDemandProduct.observation_year} · laad bij selectie`
+                              ? `${onDemandProduct.nativeResolutionM} m · ${onDemandProduct.referenceLabel} · laad bij selectie`
                             : 'Bron nog niet ingeladen'}
                       </small>
                     </span>
@@ -1512,7 +1628,7 @@ export function MapWorkspace({
                     ? 'VHA-dwarsprofielen Vlaanderen'
                     : activeThemeDataset
                       ? getDatasetDisplayName(activeThemeDataset)
-                      : activeOnDemandThematicProduct?.display_name ?? 'Geen databron beschikbaar'}
+                      : activeOnDemandRasterProduct?.displayName ?? 'Geen databron beschikbaar'}
               </strong>
               <small>
                 {analysisOverlayActive
@@ -1525,19 +1641,71 @@ export function MapWorkspace({
                     ? `${activeThemePartitions.length} gecontroleerde gemeentepartities · selectie wordt ruimtelijk samengevoegd`
                   : activeThemeDataset
                     ? `${getDatasetSourceDisplayName(activeThemeDataset)} · ${formatDatasetObservation(activeThemeDataset)}`
-                    : activeOnDemandThematicProduct
-                      ? `${activeOnDemandThematicProduct.attribution} · wordt alleen voor de gekozen selectie ingeladen`
+                    : activeOnDemandRasterProduct
+                      ? `${activeOnDemandRasterProduct.attribution} · wordt alleen voor de gekozen selectie ingeladen`
                     : activeTheme.description}
               </small>
             </div>
-            {thematicRasterProductsLoading && flandersScopeSelected ? (
-              <p className="geo-data-notice">Beschikbare Vlaamse beleidsbronnen worden gecontroleerd…</p>
+            {officialRasterProductsLoading && flandersScopeSelected ? (
+              <p className="geo-data-notice">Beschikbare Vlaamse rasterbronnen worden gecontroleerd…</p>
             ) : null}
-            {thematicRasterProductsError && flandersScopeSelected ? (
-              <p className="error">{thematicRasterProductsError}</p>
+            {officialRasterProductsError && flandersScopeSelected ? (
+              <p className="error">{officialRasterProductsError}</p>
             ) : null}
 
-            {analysisMode === 'current' && activeTheme.id === 'flood_hazard' && floodHazardDatasets.length > 0 ? (
+            {analysisMode === 'current' && activeTheme.id === 'elevation' && officialRasterProducts.dhmv.length > 0 ? (
+              <label className="geo-scope-select">
+                Hoogtemodel
+                <select
+                  aria-label="Hoogtemodel"
+                  value={selectedDhmvProductKey}
+                  onChange={(event) => {
+                    const productKey = event.target.value as 'dtm_1m' | 'dsm_1m'
+                    setSelectedDhmvProductKey(productKey)
+                    clearThemeInsights()
+                    const dataset = availableMapDatasets.find(
+                      (item) =>
+                        item.source_name === 'digitaal_vlaanderen_dhmv'
+                        && datasetProductKey(item) === productKey
+                        && datasetCoversSelectedArea(item, selectedMapAreaId, regionalScopeSelected),
+                    )
+                    if (dataset) {
+                      onOpenDatasetInMap(dataset)
+                    }
+                  }}
+                >
+                  {officialRasterProducts.dhmv.map((product) => (
+                    <option key={product.key} value={product.key}>{product.display_name}</option>
+                  ))}
+                </select>
+                <small>DTM meet het maaiveld; DSM bevat ook gebouwen en vegetatie.</small>
+              </label>
+            ) : null}
+
+            {analysisMode === 'current' && activeTheme.id === 'flood_hazard' && officialRasterProducts.floodHazard.length > 0 ? (
+              <label className="geo-scope-select">
+                Overstromingsscenario
+                <select
+                  aria-label="Overstromingsscenario"
+                  value={selectedFloodHazardProductKey}
+                  onChange={(event) => {
+                    const productKey = event.target.value
+                    const dataset = floodHazardDatasets.find((item) => datasetProductKey(item) === productKey)
+                    setSelectedFloodHazardProductKey(productKey)
+                    setSelectedFloodHazardDatasetId(dataset?.id ?? '')
+                    clearThemeInsights()
+                    if (dataset) {
+                      onOpenDatasetInMap(dataset)
+                    }
+                  }}
+                >
+                  {officialRasterProducts.floodHazard.map((product) => (
+                    <option key={product.key} value={product.key}>{product.display_name}</option>
+                  ))}
+                </select>
+                <small>Gemodelleerde maximale waterdiepte voor de gekozen kans en klimaatprojectie; geen actuele waterstand.</small>
+              </label>
+            ) : analysisMode === 'current' && activeTheme.id === 'flood_hazard' && floodHazardDatasets.length > 0 ? (
               <label className="geo-scope-select">
                 Overstromingsscenario
                 <select
@@ -1633,7 +1801,7 @@ export function MapWorkspace({
                       ? 'Sleep nu een rechthoek op de kaart.'
                       : regionalRasterThemeActive
                         ? 'Teken een rechthoek; de juiste gemeentelijke rasters worden automatisch gecombineerd.'
-                        : onDemandThematicThemeActive
+                        : onDemandRasterThemeActive
                           ? 'Teken een rechthoek; officiële Vlaamse rasters worden begrensd opgehaald, bewaard en hergebruikt.'
                         : regionalBathymetryThemeActive
                           ? 'Teken een rechthoek of analyseer Vlaanderen; alleen overlappende VHA-partities worden samengevoegd.'
@@ -1652,16 +1820,16 @@ export function MapWorkspace({
                 </button>
                 <button
                   className="secondary-action"
-                  disabled={!activeThemeAvailable || regionalRasterThemeActive || regionalOnDemandThematicThemeActive || (analysisMode === 'evolution' && activeTemporalSeries.length < 2) || !selectedAreaBbox || mapSelectionLoading || themeResultsLoading}
+                  disabled={!activeThemeAvailable || regionalRasterThemeActive || regionalOnDemandRasterThemeActive || (analysisMode === 'evolution' && activeTemporalSeries.length < 2) || !selectedAreaBbox || mapSelectionLoading || themeResultsLoading}
                   type="button"
                   title={
-                    regionalRasterThemeActive || regionalOnDemandThematicThemeActive
+                    regionalRasterThemeActive || regionalOnDemandRasterThemeActive
                       ? 'Teken een begrensde rechthoek voor een regionale rasteranalyse.'
                       : undefined
                   }
                   onClick={() => selectedAreaBbox && void analyzeSelection(selectedAreaBbox, selectedMapArea?.id)}
                 >
-                  {regionalRasterThemeActive || regionalOnDemandThematicThemeActive ? 'Selecteer een deelgebied' : 'Volledig werkgebied'}
+                  {regionalRasterThemeActive || regionalOnDemandRasterThemeActive ? 'Selecteer een deelgebied' : 'Volledig werkgebied'}
                 </button>
                 <button className="secondary-action" disabled={!mapSelectionBbox} type="button" onClick={clearAreaSelection}>
                   Wis selectie
@@ -2030,7 +2198,7 @@ export function MapWorkspace({
                 ? `VHA-dwarsprofielen Vlaanderen · ${activeThemePartitions.length} gemeentepartities`
               : activeThemeDataset
                 ? getDatasetDisplayName(activeThemeDataset)
-                : activeOnDemandThematicProduct?.display_name
+                : activeOnDemandRasterProduct?.displayName
                   ?? 'niet beschikbaar'}
           </span>
           {usesDefaultOsmBasemap ? <span><strong>Ondergrond:</strong> OpenStreetMap</span> : null}