feat: stream municipality vectors by viewport

frontend/src/App.tsx

@@ -29,6 +29,7 @@ import { useProjectWorkspace } from './hooks/useProjectWorkspace'
 import { useQualityWorkflow } from './hooks/useQualityWorkflow'
 import { useSegmentationWorkflow } from './hooks/useSegmentationWorkflow'
 import { useWorkbenchBootstrap } from './hooks/useWorkbenchBootstrap'
+import { useViewportVectorLayer } from './hooks/useViewportVectorLayer'
 
 function isVectorDatasetType(datasetType: string): boolean {
   return datasetType === 'vector' || datasetType === 'geojson'
@@ -344,6 +345,15 @@ function App(): JSX.Element {
     loadProjectData,
     loadQualityChecks,
   })
+  const viewportVectorLayer = useViewportVectorLayer({
+    selectedProjectId,
+    selectedDataset,
+    featureCount: selectedDatasetSummary?.feature_count ?? selectedDataset?.feature_count ?? null,
+    isVectorDatasetType,
+  })
+  const analysisMapLayerActive = Boolean(changeDetectionResult?.geojson || segmentationGeoJson || detectionGeoJson)
+  const viewportVectorLayerActive = viewportVectorLayer.enabled && !analysisMapLayerActive
+  const datasetMapContent = viewportVectorLayer.enabled ? viewportVectorLayer.data : datasetContent
   const useRasterTileManifestForSegmentation = () => {
     const manifestPath = latestRasterTileManifestPath.trim()
     if (!manifestPath || !selectedDataset || selectedDataset.dataset_type !== 'raster') {
@@ -403,8 +413,9 @@ function App(): JSX.Element {
     changeDetectionGeoJson: changeDetectionResult?.geojson ?? null,
     segmentationGeoJson,
     detectionGeoJson,
-    datasetContent,
+    datasetContent: datasetMapContent,
     selectedDataset,
+    datasetLayerActive: Boolean(selectedDataset && isVectorDatasetType(selectedDataset.dataset_type)),
   })
   const {
     mapSelectionBbox,
@@ -519,11 +530,11 @@ function App(): JSX.Element {
     if (detectionGeoJson) {
       return 'Detection run'
     }
-    if (datasetContent && selectedDataset) {
+    if ((datasetMapContent || viewportVectorLayer.enabled) && selectedDataset) {
       return `${selectedDataset.dataset_type} dataset`
     }
     return 'No active vector or result layer'
-  }, [changeDetectionResult?.geojson, datasetContent, detectionGeoJson, segmentationGeoJson, selectedDataset])
+  }, [changeDetectionResult?.geojson, datasetMapContent, detectionGeoJson, segmentationGeoJson, selectedDataset, viewportVectorLayer.enabled])
   const mapLayerProvenance = useMemo(() => {
     if (changeDetectionResult?.geojson) {
       return `source ${changeSourceDatasetId || 'n/a'} -> target ${changeTargetDatasetId || 'n/a'}`
@@ -534,7 +545,7 @@ function App(): JSX.Element {
     if (detectionGeoJson) {
       return selectedDetectionRunId ? `analysis run ${selectedDetectionRunId}` : 'detection results loaded'
     }
-    if (datasetContent && selectedDataset) {
+    if ((datasetMapContent || viewportVectorLayer.enabled) && selectedDataset) {
       return `${selectedDataset.dataset_role ?? 'source'} / ${selectedDataset.source_name ?? selectedDataset.source}`
     }
     return 'Open a dataset, detection run, segmentation run or change result to draw it here.'
@@ -542,12 +553,13 @@ function App(): JSX.Element {
     changeDetectionResult?.geojson,
     changeSourceDatasetId,
     changeTargetDatasetId,
-    datasetContent,
+    datasetMapContent,
     detectionGeoJson,
     segmentationGeoJson,
     selectedDataset,
     selectedDetectionRunId,
     selectedSegmentationRunId,
+    viewportVectorLayer.enabled,
   ])
   const openDatasetInMap = (dataset: DatasetCreateResponse) => {
     if (selectedProjectId) {
@@ -643,7 +655,11 @@ function App(): JSX.Element {
   const projectContextLabel = selectedProject?.name ?? 'No project'
   const areaContextLabel = selectedArea?.name ?? (areas.length > 0 ? 'Select area' : 'No AOI')
   const datasetContextLabel = selectedDataset?.name ?? (datasets.length > 0 ? 'Select dataset' : 'No dataset')
-  const layerContextLabel = mapFeatureCollection ? `${mapFeatureCount} features` : 'No active layer'
+  const layerContextLabel = mapFeatureCollection
+    ? `${mapFeatureCount} features`
+    : viewportVectorLayerActive
+      ? 'Viewport layer selected'
+      : 'No active layer'
 
   return (
     <div className="app-shell workbench-shell">
@@ -905,6 +921,10 @@ function App(): JSX.Element {
               areaLayerOpacity={areaLayerOpacity}
               mapFeatureCount={mapFeatureCount}
               areaFeatureCount={areaFeatureCount}
+              viewportVectorEnabled={viewportVectorLayerActive}
+              viewportVectorStatus={viewportVectorLayerActive ? viewportVectorLayer.statusMessage : null}
+              viewportVectorTone={viewportVectorLayer.error ? 'error' : viewportVectorLayer.truncated ? 'warning' : viewportVectorLayer.loading || viewportVectorLayer.zoomRequired ? 'pending' : 'ready'}
+              fitMapDataOnChange={!viewportVectorLayerActive}
               selectedMapFeature={selectedMapFeature}
               mapSelectionBbox={mapSelectionBbox}
               mapSelectionResult={mapSelectionResult}
@@ -933,6 +953,7 @@ function App(): JSX.Element {
               onSetMapLayerVisible={setMapLayerVisible}
               onSetMapLayerOpacity={setMapLayerOpacity}
               onSelectMapFeature={setSelectedMapFeature}
+              onMapViewportChange={viewportVectorLayer.setViewport}
               onSetMapSelectionBbox={setMapSelectionBbox}
               onRunMapSelectionExtract={runMapSelectionExtract}
               onClearMapSelectionExtract={resetMapSelectionExtract}