add temporal zone autocomplete

api/hydroprocess_db/app/routers/__init__.py

@@ -1,4 +1,5 @@
 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.routers.statistics.router import router as statistics_router
+from app.routers.temporal_zone.router import router as temporal_zone_router

api/hydroprocess_db/app/routers/temporal_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 TemporalZoneType
+
+router = APIRouter()
+
+
+@router.get(
+    "/",
+    description="Get all temporal zone types",
+    response_model=List[TemporalZoneType],
+)
+def get_temporal_zones_entries(*, session=Depends(get_session)):
+    """
+    Get temporal zone types from the database.
+
+    Parameters:
+    - session: The async session to use for database operations.
+
+    Returns:
+    - A list of temporal zone types.
+    """
+    temporal_zone_types = session.exec(select(TemporalZoneType)).all()
+    return temporal_zone_types

api/hydroprocess_db/main.py

@@ -6,8 +6,9 @@
 from app.db import create_db_and_tables
 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.routers.statistics.router import router as statistics_router
+from app.routers.temporal_zone.router import router as temporal_zone_router
 from app.schemas import UserCreate, UserRead, UserUpdate
 from app.users import auth_backend, fastapi_users
 from config import get_settings
@@ -68,6 +69,11 @@ async def lifespan(app: FastAPI):
     prefix="/spatial_zone",
     tags=["spatial_zone"],
 )
+app.include_router(
+    temporal_zone_router,
+    prefix="/temporal_zone",
+    tags=["temporal_zone"],
+)
 app.include_router(
     statistics_router,
     prefix="/statistics",

frontend/src/components/FilterDrawer.vue

@@ -11,6 +11,9 @@
         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-autocomplete v-model="selectedTemporalZones" :items="temporalZones" item-title="temporal_property"
+        item-value="id" label="Temporal Zones" @update:modelValue="filterTemporal" clearable chips
+        multiple></v-autocomplete>
     </v-sheet>
   </v-navigation-drawer>
 </template>
@@ -40,6 +43,8 @@ const process_taxonomies = ref([])
 const selectedProcesses = ref(null)
 const spatialZones = ref([])
 const selectedSpatialZones = ref(null)
+const temporalZones = ref([])
+const selectedTemporalZones = ref(null)
 
 
 perceptualModelStore.fetchProcessTaxonomies().then((pt) => {
@@ -81,6 +86,25 @@ const filterSpatial = () => {
   mapStore.filterFeatures(filterFunction)
 }
 
+perceptualModelStore.fetchTemporalZones().then((tz) => {
+  temporalZones.value = tz
+})
+
+const filterTemporal = () => {
+  if (selectedTemporalZones.value.length === 0) {
+    // reset to show all features
+    mapStore.resetFilter()
+  }
+  const filterFunction = (feature) => {
+    // feature.properties.temporalzone_id is an id
+    // filter for the matching id
+    // selectedTemporalZones.value is an array of ids
+    // we want all of the features that have a temporal_zone id that is in selectedTemporalZones.value
+    return selectedTemporalZones.value.includes(feature.properties.temporalzone_id)
+  }
+  mapStore.filterFeatures(filterFunction)
+}
+
 
 const translate = () => {
   if (show.value) {

frontend/src/constants.js

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

frontend/src/stores/perceptual_models.js

@@ -35,13 +35,20 @@ export const usePerceptualModelStore = defineStore('perceptual_model', () => {
     return spatial_zones
   }
 
+  const fetchTemporalZones = async () => {
+    const response = await fetch(ENDPOINTS.temporal_zones)
+    const temporal_zones = await response.json()
+    return temporal_zones
+  }
+
   return {
     perceptualModels,
     selectedPerceptualModel,
     setPerceptualModels,
     setSelectedPerceptualModel,
     fetchPerceptualModels,
     fetchProcessTaxonomies,
-    fetchSpatialZones
+    fetchSpatialZones,
+    fetchTemporalZones
   }
 })