Merge pull request #834 from bcgov/bcwat-823-frontend-point-caching

bcwat-823-frontend-point-caching

Author: idaeusice

client/src/components/MapFilters.vue

@@ -159,39 +159,37 @@
                 >
                     <div
                         v-for="button in localFilters.matchFilters.find(cat => cat.category === 'Type').filters"
-                        class="legend-item row"
+                        class="legend-item"
                     >
-                        <div class="col legend-point">
+                        <div class="legend-point">
                             <span
                                 class="dot"
                                 :class="button.matchValue"
                             />
                             {{ button.label }}
                         </div>
                         <q-toggle
-                            class="col"
                             :key="button"
-                            :label="button.label"
                             v-model="button.model"
                             @update:model-value="emit('update-filter', localFilters)"
                         />
                     </div>
                     <div
                         v-if="localFilters.matchFilters[0].filters.find(el => el.property)"
-                        class="legend-item row"
+                        class="legend-item"
                     >
-                        <div class="col legend-point">
+                        <div class="legend-point">
                             <span class="dot active" />
                             Active Application
                         </div>
-                        <q-toggle
-                            class="col"
-                            label="Active Appl."
-                            v-model="localFilters.matchFilters[4].filters.find(el => el.matchValue === 'ACTIVE APPL.').model"
-                            @update:model-value="() => {
-                                emit('update-filter', localFilters)
-                            }"
-                        />
+                        <div>
+                            <q-toggle
+                                v-model="localFilters.matchFilters[4].filters.find(el => el.matchValue === 'ACTIVE APPL.').model"
+                                @update:model-value="() => {
+                                    emit('update-filter', localFilters)
+                                }"
+                            />
+                        </div>
                     </div>
                 </q-card>
             </div>
@@ -335,16 +333,7 @@
                 dense
             />
         </div>
-
-        <div
-            v-if="props.loading"
-            class="map-points-loader"
-        >
-            <q-spinner size="lg" />
-            <div class="q-mt-sm">
-                Getting points in map view...
-            </div>
-        </div>
+        
         <div 
             v-if="filteredPoints && !filteredPoints.length"
             class="q-ma-md"
@@ -460,9 +449,9 @@
                             Network: {{ item.properties.net }}
                         </q-item-label>
                         <!-- handling for "analysesObj" display -->
-                        <div v-if="Object.keys(filterableProperties).length && filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics')">
+                        <div v-if="props.filterableProperties && Object.keys(props.filterableProperties).length && props.filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics')">
                             <template
-                                v-for="analysis in filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics').filters"
+                                v-for="analysis in props.filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics').filters"
                                 :key = "analysis"
                             >
                                 <q-chip
@@ -771,7 +760,8 @@ const clearFilters = () => {
 }
 
 .watershed-legend {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     position: absolute;
     top: 0.2rem;
     left: calc(100% + 0.3rem);
@@ -780,13 +770,15 @@ const clearFilters = () => {
     .legend-contents {
         background-color: rgba(255, 255, 255, 0.8);
         transition-duration: 0.2s;
-        width: 23rem;
+        width: 16rem;
 
         &:hover {
             background-color: rgba(255, 255, 255);
         }
+
         .legend-item {
             display: flex;
+            justify-content: space-between;
 
             .legend-point {
                 display: flex;

client/src/components/water-portal/WaterPortal.vue

@@ -110,7 +110,10 @@ import WaterQualityReport from '@/components/waterquality/WaterQualityReport.vue
 import GroundWaterLevelReport from "@/components/groundwater-level/GroundWaterLevelReport.vue";
 import ClimateReport from '@/components/climate/ClimateReport.vue';
 import mapboxgl from 'mapbox-gl';
-import { portalHandler } from '@/utils/reactor.js';
+import { 
+    fetchCache, 
+    portalHandler 
+} from '@/utils/reactor.js';
 import { 
     geolocate, 
     getFilteredPoints,
@@ -119,7 +122,6 @@ import {
 } from '@/utils/mapHelpers.js';
 import { highlightLayer, pointLayer } from "@/constants/mapLayers.js";
 import { 
-    getWaterPortalStations, 
     getWaterPortalReportDataByIdAndType,
     downloadCSVByTypeAndId,
 } from '@/utils/api.js';
@@ -153,7 +155,6 @@ const pointsLoading = ref(false);
 const activePoint = ref(null);
 const loading = ref(false);
 const loadingMsg = ref('Loading. Please wait...');
-const features = ref([]);
 const allFeatures = ref([]);
 const sidebarFeatures = ref([]);
 const filteredFeatures = ref([]);
@@ -165,8 +166,7 @@ const allQueriedPoints = ref([]);
 const marker = ref(null);
 const reportData = ref(null);
 const filterableProperties = ref({});
-const matchFilters = ref([]);
-const uniqueFilters = ref([]);
+const pointsPromise = ref();
 
 const currentPageText = computed(() => {
     const headerObj = {};
@@ -204,6 +204,13 @@ const pointCount = computed(() => {
     return 0;
 });
 
+onMounted(() => {
+    portalHandler.viewType = props.defaultViewType;
+    pointsPromise.value = new Promise(resolve => {
+        resolve(fetchCache.fetchWaterPortalPoints(portalHandler.viewType));
+    });
+});
+
 /**
  * Add Watershed License points to the supplied map
  * @param mapObj Mapbox Map
@@ -222,7 +229,7 @@ const loadPoints = async (mapObj) => {
         }
     }
 
-    points.value = await getWaterPortalStations(props.defaultViewType);
+    points.value = await pointsPromise.value;
     filteredFeatures.value = points.value.features;
     sidebarFeatures.value = getVisibleLicenses(filteredFeatures.value);
     filterableProperties.value = getFilterableProperties(points.value.features);
@@ -330,10 +337,10 @@ const onViewTypeUpdate = async (newViewType) => {
     updateFilters(null);
 
     loading.value = true;
-    points.value = await getWaterPortalStations(newViewType);
+    points.value = await fetchCache.fetchWaterPortalPoints(newViewType);
     filteredFeatures.value = points.value.features;
     sidebarFeatures.value = getVisibleLicenses(filteredFeatures.value);
-    filterableProperties.value = getFilterableProperties(points.value.features);
+    filterableProperties.value = points.value.filterableProperties;
 
     try{
         if (!map.value.getSource("point-source")) {

client/src/components/watershed/Watershed.vue

@@ -118,9 +118,10 @@ import {
     getFilteredPoints,
     goToLocation
 } from '@/utils/mapHelpers.js';
-import { getAllWatershedLicences, getWatershedByLatLng, getWatershedReportByWFI, getWatershedByWFI } from '@/utils/api.js';
+import { getWatershedByLatLng, getWatershedReportByWFI, getWatershedByWFI } from '@/utils/api.js';
 import { highlightLayer, pointLayer } from "@/constants/mapLayers.js";
-import { computed, onBeforeUnmount, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { fetchCache } from "@/utils/reactor";
 
 const map = ref();
 const points = ref();
@@ -139,8 +140,7 @@ const sidebarFeatures = ref([]);
 const filteredFeatures = ref();
 const filterableProperties = ref({});
 const marker = ref();
-const matchFilters = ref();
-const uniqueFilters = ref();
+const pointsPromise = ref();
 const selectedWatershedCanvas = ref();
 const firstSymbolId = ref();
 const allFeatures = ref([]);
@@ -174,6 +174,12 @@ const createMarker = (coords) => {
         .addTo(map.value)
 }
 
+onMounted(() => {
+    pointsPromise.value = new Promise(resolve => {
+        resolve(fetchCache.fetchWatershedLicences());
+    });
+});
+
 /**
  * Add Watershed License points to the supplied map
  * @param mapObj Mapbox Map
@@ -192,7 +198,7 @@ const loadPoints = async (mapObj) => {
         }
     }
 
-    points.value = await getAllWatershedLicences();
+    points.value = await pointsPromise.value;
     filteredFeatures.value = points.value.features;
     sidebarFeatures.value = getVisibleLicenses(filteredFeatures.value);
     // NOTE: we could modify the points response object to have a dynamic list of 

client/src/utils/reactor.js

@@ -1,4 +1,8 @@
 import { reactive } from "vue";
+import { 
+    getAllWatershedLicences,
+    getWaterPortalStations
+} from "@/utils/api.js";
 
 // acts as a data store which will store data while across routing actions etc. 
 export const portalHandler = reactive({
@@ -7,3 +11,31 @@ export const portalHandler = reactive({
         portalHandler.viewType = viewType;
     }
 });
+
+export const fetchCache = reactive({
+    watershedPoints: null,
+    groundwaterPoints: null,
+    groundwaterCaptureZones: null,
+    groundwaterAquifers: null,
+    waterPortal: {
+        streams: null,
+        surface: null,
+        ground: null,
+        wells: null,
+        weather: null,
+    },
+
+    // fetchers to check if data already exists, otherwise fetch it
+    fetchWatershedLicences: async () => {
+        if(!fetchCache.watershedPoints){
+            fetchCache.watershedPoints = await getAllWatershedLicences();
+        }
+        return fetchCache.watershedPoints;
+    },
+    fetchWaterPortalPoints: async (viewType) => {
+        if(!fetchCache.waterPortal[viewType]){
+            fetchCache.waterPortal[viewType] = await getWaterPortalStations(viewType);
+        }
+        return fetchCache.waterPortal[viewType];
+    }
+});