modify base layers, theme, popups

api/hydroprocess_db/app/models.py

@@ -172,6 +172,11 @@ def get_feature_properties(self) -> dict:
         if model_type:
             properties["model_type"] = model_type.model_dump()
 
+        # add the location to the properties
+        location = self.location
+        if location:
+            properties["location"] = location.model_dump()
+
         return properties
 
 

api/hydroprocess_db/main.py

@@ -5,8 +5,8 @@
 
 from app.db import create_db_and_tables
 from app.routers.filters.router import router as filters_router
-from app.routers.statistics.router import router as statistics_router
 from app.routers.perceptual_model.router import router as perceptual_model_router
+from app.routers.statistics.router import router as statistics_router
 from app.schemas import UserCreate, UserRead, UserUpdate
 from app.users import auth_backend, fastapi_users
 from config import get_settings

frontend/src/components/FilterDrawer.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-navigation-drawer location="left" width="auto" :model-value="show" @update:modelValue="$emit('toggle')">
+  <v-navigation-drawer location="left" width="auto" :model-value="show" @update:modelValue="$emit('toggle')" order="1">
     <v-btn @click="show = !show" color="primary" location="right" order="0" postition="absolute"
       :style="{ bottom: '30%', transform: translate(), position: 'absolute' }"
       :icon="show ? mdiChevronLeft : mdiChevronRight">
     </v-btn>
     <v-sheet class="mx-auto" elevation="8" :width="mdAndDown ? '100vw' : '20vw'">
-      <h3 class="ma-2 text-center">Model Filters</h3>
+      <h3 class="text-h6 ma-2 text-center">Model Filters</h3>
       <v-divider></v-divider>
       <v-autocomplete v-model="selectedProcesses" :items="process_taxonomies" item-title="process" item-value="id"
         label="Process Taxonomies" @update:modelValue="filter" clearable chips multiple></v-autocomplete>

frontend/src/components/TheAppBar.vue

@@ -1,9 +1,8 @@
 <template>
   <v-app-bar v-if="!$route.meta.hideNavigation" color="navbar" ref="appBar" id="app-bar" elevate-on-scroll fixed app>
     <div class="d-flex align-end full-height pa-2 align-center w-100">
-      <router-link :to="{ path: `/` }" class="logo">
-        <img src="@/assets/logo.png" alt="home" />
-      </router-link>
+      <v-app-bar-title>Perceptual Models Around the World<div class="text-subtitle-1">McMillan Hydrology Lab</div>
+      </v-app-bar-title>
 
       <v-spacer></v-spacer>
 
@@ -41,14 +40,6 @@ function login(){
 </script>
 
 <style lang="scss" scoped>
-.logo {
-  height: 100%;
-  cursor: pointer;
-
-  img {
-    height: 100%;
-  }
-}
 
 .v-toolbar.v-app-bar--is-scrolled>.v-toolbar__content>.container {
   align-items: center !important;

frontend/src/components/TheFooter.vue

@@ -5,12 +5,30 @@
         {{ new Date().getFullYear() }} — <strong>hydroprocess_db</strong>
       </div>
       <v-spacer></v-spacer>
+      <a href="https://cuahsi.org" class="logo" target="_blank">
+        <v-card height="10vh">
+          <v-card-text>
+            <div class="text-body-1">Powered by</div>
+            <v-img :src="imgUrl" cover width="8rem"></v-img>
+          </v-card-text>
+        </v-card>
+      </a>
     </div>
   </v-footer>
 </template>
 
 <script setup>
+import imgUrl from '@/assets/logo.png'
 
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.logo {
+  height: 10%;
+  cursor: pointer;
+
+  img {
+    height: 10%;
+  }
+}
+</style>

frontend/src/plugins/vuetify.js

@@ -34,7 +34,7 @@ const light = {
 
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
     themes: {
       light,
       dark

frontend/src/stores/map.js

@@ -10,12 +10,31 @@ export const useMapStore = defineStore('map', () => {
   const perceptualModelsGeojson = ref([])
 
   function onEachFeature(feature, layer) {
-    let content = `<h3>${feature.properties.citation.citation}</h3><p><ul>`
-    for (const [key, value] of Object.entries(feature.properties)) {
-      content += `<li>${key}: ${value}</li>`
-    }
-    content += '</ul></p>'
-    layer.bindPopup(content)
+    let content = `<h3>Perceptual model of <strong>${feature.properties.location.long_name}</strong></h3>`
+    content += `<p>${feature.properties.citation.citation}</p>`
+    content += '<hr>'
+    content += `<p><strong>${feature.properties.model_type.name}</strong></p>`
+    content += `<small>${feature.properties.textmodel_snipped}</small>`
+    content += '<hr>'
+
+    content += '<h4>Processes:</h4>'
+    content += '<ul>'
+    feature.properties.process_taxonomies.forEach((process_taxonomy) => {
+      content += `<li>${process_taxonomy.process} (${process_taxonomy.identifier})</li>`
+    })
+    content += '<hr>'
+
+    content += '<h4>Spatial zone:</h4>'
+    content += `${feature.properties.spatial_zone_type.spatial_property}`
+    content += '<hr>'
+
+    content += '<h4>Temporal zone:</h4>'
+    content += `${feature.properties.temporal_zone_type.temporal_property}`
+    layer.bindPopup(content, {
+      maxWidth: 400,
+      maxHeight: 300,
+      keepInView: true
+    })
   }
 
   const fetchPerceptualModelsGeojson = async () => {