Overhaul GeoIntel model selection and map UX

frontend/src/components/map/MapWorkspace.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
-import { BoxSelect, ChevronLeft, ChevronRight, MapPinned, Play, SlidersHorizontal, Trash2 } from 'lucide-react'
+import { BoxSelect, ChevronLeft, ChevronRight, MapPinned, Play, Search, SlidersHorizontal, Trash2 } from 'lucide-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'
@@ -841,6 +841,7 @@ export function MapWorkspace({
     return themeIdForDataset(selectedDataset) ?? 'buildings'
   })
   const [selectedThemeIds, setSelectedThemeIds] = useState<DataThemeId[]>([])
+  const [themeFilter, setThemeFilter] = useState('')
   const [resultsPanelOpen, setResultsPanelOpen] = useState(false)
   const activeScopeProject = projects.find((project) => project.id === selectedProjectId) ?? null
   const activeScopeLabel = activeScopeProject ? operationalScopeProjectLabel(activeScopeProject) : 'Werkgebied'
@@ -1313,6 +1314,11 @@ export function MapWorkspace({
   const regionalOnDemandThemeActive = regionalScopeSelected && onDemandThemeActive
   const activeThemeAvailable = Boolean(activeThemeDataset) || onDemandThemeActive
 
+  const visibleThemes = useMemo(() => {
+    const query = themeFilter.trim().toLocaleLowerCase('nl-BE')
+    if (!query) return DATA_THEMES
+    return DATA_THEMES.filter((theme) => theme.label.toLocaleLowerCase('nl-BE').includes(query))
+  }, [themeFilter])
   const selectedThemes = useMemo(
     () => DATA_THEMES.filter((theme) => selectedThemeIds.includes(theme.id)),
     [selectedThemeIds],
@@ -2296,8 +2302,18 @@ export function MapWorkspace({
                     : 'Zoek optioneel een gemeente of teken vrij op de kaart'}
               </small>
             </div>
+            <label className="geo-theme-search">
+              <span className="sr-only">Zoek een thema of gegevensbron</span>
+              <Search aria-hidden="true" />
+              <input
+                type="search"
+                value={themeFilter}
+                onChange={(event) => setThemeFilter(event.target.value)}
+                placeholder="Zoek thema’s"
+              />
+            </label>
             <div className="geo-theme-list">
-              {DATA_THEMES.map((theme) => {
+              {visibleThemes.map((theme) => {
                 const dataset = themeDatasetMap[theme.id]
                 const onDemandProduct = onDemandProductMap.get(theme.id)
                 const temporalGroups = themeTemporalSeriesMap[theme.id]