Extract QA and map workbench components

2026-06-17 04:14:35 +02:00
parent 016926e256
commit acf95905ca
11 changed files with 312 additions and 125 deletions
@@ -0,0 +1,134 @@
+import GeoMap from '../GeoMap'
+import type { AreaRead } from '../../types'
+
+interface MapWorkspaceProps {
+  areas: AreaRead[]
+  selectedMapAreaId: string
+  areaFeatureCollection: GeoJSON.FeatureCollection | null
+  mapFeatureCollection: GeoJSON.FeatureCollection | null
+  mapLayerLabel: string
+  mapLayerVisible: boolean
+  mapLayerOpacity: number
+  areaLayerVisible: boolean
+  areaLayerOpacity: number
+  mapFeatureCount: number
+  areaFeatureCount: number
+  selectedMapFeature: GeoJSON.Feature | null
+  onSelectMapArea: (areaId: string) => void
+  onSetAreaLayerVisible: (visible: boolean) => void
+  onSetAreaLayerOpacity: (opacity: number) => void
+  onSetMapLayerVisible: (visible: boolean) => void
+  onSetMapLayerOpacity: (opacity: number) => void
+  onSelectMapFeature: (feature: GeoJSON.Feature | null) => void
+}
+
+export function MapWorkspace({
+  areas,
+  selectedMapAreaId,
+  areaFeatureCollection,
+  mapFeatureCollection,
+  mapLayerLabel,
+  mapLayerVisible,
+  mapLayerOpacity,
+  areaLayerVisible,
+  areaLayerOpacity,
+  mapFeatureCount,
+  areaFeatureCount,
+  selectedMapFeature,
+  onSelectMapArea,
+  onSetAreaLayerVisible,
+  onSetAreaLayerOpacity,
+  onSetMapLayerVisible,
+  onSetMapLayerOpacity,
+  onSelectMapFeature,
+}: MapWorkspaceProps): JSX.Element {
+  return (
+    <section>
+      <h2>Map workspace</h2>
+      <p>{mapLayerLabel}</p>
+      <div className="map-controls">
+        <label>
+          Selected area
+          <select
+            value={selectedMapAreaId}
+            onChange={(event) => onSelectMapArea(event.target.value)}
+            disabled={areas.length === 0}
+          >
+            <option value="">No area</option>
+            {areas.map((area) => (
+              <option key={area.id} value={area.id}>
+                {area.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="checkbox-row">
+          <input
+            checked={areaLayerVisible}
+            disabled={!areaFeatureCollection}
+            type="checkbox"
+            onChange={(event) => onSetAreaLayerVisible(event.target.checked)}
+          />
+          Area visible
+        </label>
+        <label>
+          Area opacity
+          <input
+            disabled={!areaFeatureCollection}
+            max="0.7"
+            min="0.05"
+            step="0.05"
+            type="range"
+            value={areaLayerOpacity}
+            onChange={(event) => onSetAreaLayerOpacity(Number(event.target.value))}
+          />
+        </label>
+        <label className="checkbox-row">
+          <input
+            checked={mapLayerVisible}
+            disabled={!mapFeatureCollection}
+            type="checkbox"
+            onChange={(event) => onSetMapLayerVisible(event.target.checked)}
+          />
+          Layer visible
+        </label>
+        <label>
+          Layer opacity
+          <input
+            disabled={!mapFeatureCollection}
+            max="1"
+            min="0.05"
+            step="0.05"
+            type="range"
+            value={mapLayerOpacity}
+            onChange={(event) => onSetMapLayerOpacity(Number(event.target.value))}
+          />
+        </label>
+        <div className="map-status">
+          {areaFeatureCollection ? `${areaFeatureCount} area loaded` : 'No area loaded'} -{' '}
+          {mapFeatureCollection ? `${mapFeatureCount} features loaded` : 'No vector layer loaded'}
+        </div>
+      </div>
+      <GeoMap
+        data={mapFeatureCollection}
+        areaData={areaFeatureCollection}
+        visible={mapLayerVisible}
+        opacity={mapLayerOpacity}
+        areaVisible={areaLayerVisible}
+        areaOpacity={areaLayerOpacity}
+        onFeatureSelect={onSelectMapFeature}
+      />
+      <div className="feature-inspector">
+        <h3>Feature inspector</h3>
+        {selectedMapFeature ? (
+          <>
+            <p>Geometry: {selectedMapFeature.geometry?.type ?? 'n/a'}</p>
+            <pre className="job-result">{JSON.stringify(selectedMapFeature.properties ?? {}, null, 2)}</pre>
+          </>
+        ) : (
+          <p className="muted">Click a visible map feature to inspect its properties.</p>
+        )}
+      </div>
+    </section>
+  )
+}