Overhaul GeoIntel model selection and map UX

frontend/src/components/detection/DetectionLab.tsx

@@ -14,6 +14,8 @@ import type { DetectionCalibrationRunRow, DetectionWorkflowStage } from '../../h
 import { DETECTION_OPERATOR_PROFILES, type DetectionOperatorProfile } from './detectionProfiles'
 import { DetectionModelManagement, detectionModelLabel } from './DetectionModelManagement'
 import { AiPipelineIllustration } from './AiPipelineIllustration'
+import { ModelSelector } from '../models/ModelSelector'
+import { toAnalysisModelOption } from '../models/modelOptions'
 
 const DETECTION_PAGE_SIZE_OPTIONS = [25, 50, 100] as const
 const DEFAULT_DETECTION_PAGE_SIZE = 50
@@ -461,16 +463,15 @@ export function DetectionLab({
                 ))}
               </select>
             </label>
-            <label>
-              Analysemodel
-              <select value={selectedDetectionModelId} onChange={(event) => onSelectModel(event.target.value)}>
-                {detectionModels.map((model) => (
-                  <option key={model.model_id} value={model.model_id}>
-                    {detectionModelLabel(model)}
-                  </option>
-                ))}
-              </select>
-            </label>
+            <ModelSelector
+              label="Analysemodel"
+              value={selectedDetectionModelId}
+              options={detectionModels.map(toAnalysisModelOption)}
+              onChange={onSelectModel}
+              loading={loadingDetectionModels}
+              error={detectionModelError}
+              onRefresh={onLoadModels}
+            />
             <label>
               Minimale zekerheid
               <input