Add spatial zone selector

api/hydroprocess_db/app/routers/__init__.py

@@ -1,3 +1,4 @@
 from app.routers.perceptual_model.router import router as perceptual_model_router
 from app.routers.process_taxonomy.router import router as process_taxonomy_router
 from app.routers.statistics.router import router as statistics_router
+from app.routers.spatial_zone.router import router as spatial_zone_router

api/hydroprocess_db/app/routers/spatial_zone/router.py

@@ -0,0 +1,28 @@
+from typing import List
+
+from fastapi import APIRouter, Depends
+from sqlmodel import select
+
+from app.db import get_session
+from app.models import SpatialZoneType
+
+router = APIRouter()
+
+
+@router.get(
+    "/",
+    description="Get all spatial zone types",
+    response_model=List[SpatialZoneType],
+)
+def get_spatial_zones_entries(*, session=Depends(get_session)):
+    """
+    Get spatial zone types from the database.
+
+    Parameters:
+    - session: The async session to use for database operations.
+
+    Returns:
+    - A list of spatial zone types.
+    """
+    spatial_zone_types = session.exec(select(SpatialZoneType)).all()
+    return spatial_zone_types

api/hydroprocess_db/main.py

@@ -7,6 +7,7 @@
 from app.routers.perceptual_model.router import router as perceptual_model_router
 from app.routers.process_taxonomy.router import router as process_taxonomy_router
 from app.routers.statistics.router import router as statistics_router
+from app.routers.spatial_zone.router import router as spatial_zone_router
 from app.schemas import UserCreate, UserRead, UserUpdate
 from app.users import auth_backend, fastapi_users
 from config import get_settings
@@ -62,6 +63,11 @@ async def lifespan(app: FastAPI):
     prefix="/process_taxonomy",
     tags=["process_taxonomy"],
 )
+app.include_router(
+    spatial_zone_router,
+    prefix="/spatial_zone",
+    tags=["spatial_zone"],
+)
 app.include_router(
     statistics_router,
     prefix="/statistics",

frontend/src/components/FilterDrawer.vue

@@ -7,9 +7,10 @@
     <v-sheet class="mx-auto" elevation="8" :width="mdAndDown ? '100vw' : '20vw'">
       <h3 class="ma-2 text-center">Model Filters</h3>
       <v-divider></v-divider>
-      <!-- Filter by process name -->
-      <v-autocomplete v-model="selectedProcess" :items="process_taxonomies" item-title="process" item-value="id"
-        label="Process Taxonomy" @update:modelValue="filterProcess" clearable chips multiple></v-autocomplete>
+      <v-autocomplete v-model="selectedProcesses" :items="process_taxonomies" item-title="process" item-value="id"
+        label="Process Taxonomies" @update:modelValue="filterProcess" clearable chips multiple></v-autocomplete>
+      <v-autocomplete v-model="selectedSpatialZones" :items="spatialZones" item-title="spatial_property" item-value="id"
+        label="Spatial Zones" @update:modelValue="filterSpatial" clearable chips multiple></v-autocomplete>
     </v-sheet>
   </v-navigation-drawer>
 </template>
@@ -36,32 +37,58 @@ perceptualModelStore.fetchPerceptualModels().then((perceptual_models) => {
 })
 
 const process_taxonomies = ref([])
-const selectedProcess = ref(null)
+const selectedProcesses = ref(null)
+const spatialZones = ref([])
+const selectedSpatialZones = ref(null)
+
 
 perceptualModelStore.fetchProcessTaxonomies().then((pt) => {
   process_taxonomies.value = pt
 })
 
-
-const translate = () => {
-  if (show.value) {
-    return 'translate(50%, 0)'
-  } else {
-    return 'translate(150%, 0)'
-  }
-}
-
+// TODO: combine the filter functions into one that filters based on a template
 const filterProcess = () => {
-  console.log("filtering with ", selectedProcess.value)
+  if (selectedProcesses.value.length === 0) {
+    // reset to show all features
+    mapStore.resetFilter()
+  }
   const filterFunction = (feature) => {
     // feature.properties.process_taxonomies is an array of objects, each contains an id
     // filter for the matching id
     // selectedProcess.value is an array of ids
     // we want all of the features that have a process_taxonomy id that is in selectedProcess.value
-    return feature.properties.process_taxonomies.some((pt) => selectedProcess.value.includes(pt.id))
+    return feature.properties.process_taxonomies.some((pt) => selectedProcesses.value.includes(pt.id))
   }
   mapStore.filterFeatures(filterFunction)
 }
+
+perceptualModelStore.fetchSpatialZones().then((sz) => {
+  spatialZones.value = sz
+})
+
+const filterSpatial = () => {
+  if (selectedSpatialZones.value.length === 0) {
+    // reset to show all features
+    mapStore.resetFilter()
+  }
+  const filterFunction = (feature) => {
+    // feature.properties.spatialzone_id is an id
+    // filter for the matching id
+    // selectedSpatialZones.value is an array of ids
+    // we want all of the features that have a spatial_zone id that is in selectedSpatialZones.value
+    return selectedSpatialZones.value.includes(feature.properties.spatialzone_id)
+  }
+  mapStore.filterFeatures(filterFunction)
+}
+
+
+const translate = () => {
+  if (show.value) {
+    return 'translate(50%, 0)'
+  } else {
+    return 'translate(150%, 0)'
+  }
+}
 </script>
 
 <style scoped>

frontend/src/constants.js

@@ -8,5 +8,6 @@ export const ENDPOINTS = {
   perceptual_models_geojson: `${APP_API_URL}/perceptual_model/geojson`,
   perceptual_models: `${APP_API_URL}/perceptual_model`,
   model_type_count: `${APP_API_URL}/statistics/model_type_count`,
-  process_taxonomies: `${APP_API_URL}/process_taxonomy`
+  process_taxonomies: `${APP_API_URL}/process_taxonomy`,
+  spatial_zones: `${APP_API_URL}/spatial_zone`
 }

frontend/src/stores/map.js

@@ -31,6 +31,7 @@ export const useMapStore = defineStore('map', () => {
   }
 
   function filterFeatures(filterFunction) {
+    // TODO enable multiple filters at the same time
     // first remove all layers
     layerGroup.value.removeLayer(modelFeatures.value)
     // filter features
@@ -46,11 +47,22 @@ export const useMapStore = defineStore('map', () => {
     layerGroup.value.addLayer(modelFeatures.value)
   }
 
+  function resetFilter() {
+    layerGroup.value.removeLayer(modelFeatures.value)
+    modelFeatures.value = L.geoJSON(perceptualModelsGeojson.value, {
+      onEachFeature: (feature, layer) => {
+        onEachFeature(feature, layer)
+      }
+    })
+    layerGroup.value.addLayer(modelFeatures.value)
+  }
+
   return {
     leaflet,
     modelFeatures,
     layerGroup,
     fetchPerceptualModelsGeojson,
-    filterFeatures
+    filterFeatures,
+    resetFilter
   }
 })

frontend/src/stores/perceptual_models.js

@@ -29,12 +29,19 @@ export const usePerceptualModelStore = defineStore('perceptual_model', () => {
     return process_taxonomies
   }
 
+  const fetchSpatialZones = async () => {
+    const response = await fetch(ENDPOINTS.spatial_zones)
+    const spatial_zones = await response.json()
+    return spatial_zones
+  }
+
   return {
     perceptualModels,
     selectedPerceptualModel,
     setPerceptualModels,
     setSelectedPerceptualModel,
     fetchPerceptualModels,
-    fetchProcessTaxonomies
+    fetchProcessTaxonomies,
+    fetchSpatialZones
   }
 })