Merge pull request #20 from CUAHSI:ui-touchup

Ui-touchup

frontend/src/components/FilterDrawer.vue

@@ -8,11 +8,14 @@
       <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>
+        label="Process Taxonomies" @update:modelValue="filter" clearable chips multiple
+        :loading="filtering"></v-autocomplete>
       <v-autocomplete v-model="selectedSpatialZones" :items="spatialZones" item-title="spatial_property" item-value="id"
-        label="Spatial Zones" @update:modelValue="filter" clearable chips multiple></v-autocomplete>
+        label="Spatial Zones" @update:modelValue="filter" clearable chips multiple
+        :loading="filtering"></v-autocomplete>
       <v-autocomplete v-model="selectedTemporalZones" :items="temporalZones" item-title="temporal_property"
-        item-value="id" label="Temporal Zones" @update:modelValue="filter" clearable chips multiple></v-autocomplete>
+        item-value="id" label="Temporal Zones" @update:modelValue="filter" clearable chips multiple
+        :loading="filtering"></v-autocomplete>
       <v-card order="1">
         <v-card-title>Search Text Within:</v-card-title>
         <v-card-text>
@@ -25,13 +28,14 @@
           <v-text-field v-show="hasTextSearchFields" @update:focused="filter" @keydown.enter.prevent="filter"
             @click:clear="filter" v-model="searchTerm" label="Search" clearable></v-text-field>
         </v-card-text>
+        <v-progress-linear v-if="filtering" indeterminate color="primary"></v-progress-linear>
       </v-card>
     </v-sheet>
   </v-navigation-drawer>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { useDisplay } from 'vuetify'
 import { mdiChevronRight, mdiChevronLeft } from '@mdi/js'
 import { usePerceptualModelStore } from "@/stores/perceptual_models";
@@ -45,6 +49,7 @@ defineEmits(['selectModel', 'toggle'])
 const { mdAndDown } = useDisplay()
 
 let modelFeatures = ref({})
+const filtering = ref()
 
 // query the api for the features
 perceptualModelStore.fetchPerceptualModels().then((perceptual_models) => {
@@ -88,7 +93,9 @@ const checkSearchTerm = (searchTerm, fieldsToSearch, feature) => {
 }
 
 
-const filter = async () => {
+async function filter() {
+  filtering.value = true
+  await nextTick()
   // reset search term if no text search fields are selected
   if (textSearchFields.value.length === 0) {
     searchTerm.value = null
@@ -102,6 +109,7 @@ const filter = async () => {
     return process && spatial && temporal && search
   }
   mapStore.filterFeatures(filterFunction)
+  filtering.value = false
 }
 
 

frontend/src/components/TheLeafletMap.vue

@@ -1,5 +1,8 @@
 <template>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <v-overlay :model-value="!mapStore.mapLoaded" class="align-center justify-center">
+        <v-progress-circular indeterminate :size="128"></v-progress-circular>
+    </v-overlay>
     <div v-show="$route.meta.showMap" id="mapContainer"></div>
 </template>
 
@@ -17,7 +20,7 @@ onUpdated(() => {
     mapStore.leaflet.invalidateSize()
 })
 
-onMounted(() => {
+onMounted(async () => {
     let leaflet = L.map('mapContainer').setView([0, 11], 2);
     mapStore.leaflet = leaflet;
     let layerGroup = new L.LayerGroup();
@@ -57,7 +60,7 @@ onMounted(() => {
     Esri_Hydro_Reference_Overlay.addTo(leaflet);
 
     // query the api for the features
-    mapStore.fetchPerceptualModelsGeojson()
+    await mapStore.fetchPerceptualModelsGeojson()
 
     // layer toggling
     let mixed = {
@@ -78,6 +81,8 @@ onMounted(() => {
     leaflet.on("click", function (e) {
         mapClick(e);
     });
+
+    mapStore.mapLoaded = true;
 })
 
 

frontend/src/stores/map.js

@@ -9,19 +9,19 @@ export const useMapStore = defineStore('map', () => {
   const layerGroup = ref(null)
   const modelFeatures = ref({})
   const perceptualModelsGeojson = ref([])
+  const mapLoaded = ref(false)
 
   function onEachFeature(feature, layer) {
     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 += '<hr><br>'
+    content += `<h4>${feature.properties.model_type.name}</h4>`
     if (feature.properties.model_type.name === 'Text model') {
       content += `<p>${feature.properties.textmodel_snipped}</p>`
     } else {
       content += `<img src="${feature.properties.figure_url}" style="width: 100%">`
     }
-    content += '<hr>'
-
+    content += '<hr><br>'
     content += '<h4>Processes:</h4>'
     content += '<ul>'
     feature.properties.process_taxonomies.forEach((process_taxonomy) => {
@@ -32,7 +32,7 @@ export const useMapStore = defineStore('map', () => {
       feature.properties.spatial_zone_type?.spatial_property &&
       feature.properties.spatial_zone_type.spatial_property != 'N'
     ) {
-      content += '<hr>'
+      content += '<hr><br>'
       content += '<h4>Spatial zone:</h4>'
       content += `${feature.properties.spatial_zone_type.spatial_property}`
     }
@@ -41,19 +41,26 @@ export const useMapStore = defineStore('map', () => {
       feature.properties.temporal_zone_type?.temporal_property &&
       feature.properties.temporal_zone_type.temporal_property != 'N'
     ) {
-      content += '<hr>'
+      content += '<hr><br>'
       content += '<h4>Temporal zone:</h4>'
       content += `${feature.properties.temporal_zone_type.temporal_property}`
     }
-    
+
     layer.bindPopup(content, {
       maxWidth: 400,
       maxHeight: 300,
       keepInView: true
     })
   }
 
-  var textIcon = L.IconMaterial.icon({
+  const pointToLayer = (feature, latlng) => {
+    if (feature.properties.model_type.name === 'Text model') {
+      return L.marker(latlng, { icon: textIcon })
+    }
+    return L.marker(latlng, { icon: figureIcon })
+  }
+
+  let textIcon = L.IconMaterial.icon({
     icon: 'article', // Name of Material icon
     iconColor: 'white', // Material icon color (could be rgba, hex, html name...)
     markerColor: 'grey', // Marker fill color
@@ -79,12 +86,7 @@ export const useMapStore = defineStore('map', () => {
       onEachFeature: (feature, layer) => {
         onEachFeature(feature, layer)
       },
-      pointToLayer: (feature, latlng) => {
-        if (feature.properties.model_type.name === 'Text model') {
-          return L.marker(latlng, { icon: textIcon })
-        }
-        return L.marker(latlng, { icon: figureIcon })
-      }
+      pointToLayer: pointToLayer
     })
     layerGroup.value.addLayer(modelFeatures.value)
   }
@@ -100,7 +102,8 @@ export const useMapStore = defineStore('map', () => {
       },
       onEachFeature: (feature, layer) => {
         onEachFeature(feature, layer)
-      }
+      },
+      pointToLayer: pointToLayer
     })
     // add filtered features
     layerGroup.value.addLayer(modelFeatures.value)
@@ -120,6 +123,7 @@ export const useMapStore = defineStore('map', () => {
     leaflet,
     modelFeatures,
     layerGroup,
+    mapLoaded,
     fetchPerceptualModelsGeojson,
     filterFeatures,
     resetFilter

frontend/src/views/MapView.vue

@@ -1,9 +1,13 @@
 <template>
     <DataViewDrawer />
-    <FilterDrawer />
+    <FilterDrawer v-if="mapStore.mapLoaded" />
 </template>
 
 <script setup>
 import FilterDrawer from '@/components/FilterDrawer.vue';
 import DataViewDrawer from '@/components/DataViewDrawer.vue';
+import { useMapStore } from '@/stores/map';
+
+const mapStore = useMapStore()
+
 </script>