Skip to content

Commit a872aac

Browse files
authored
Merge pull request #834 from bcgov/bcwat-823-frontend-point-caching
bcwat-823-frontend-point-caching
2 parents 479b3f1 + b8c2b05 commit a872aac

File tree

4 files changed

+78
-41
lines changed

4 files changed

+78
-41
lines changed

client/src/components/MapFilters.vue

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -159,39 +159,37 @@
159159
>
160160
<div
161161
v-for="button in localFilters.matchFilters.find(cat => cat.category === 'Type').filters"
162-
class="legend-item row"
162+
class="legend-item"
163163
>
164-
<div class="col legend-point">
164+
<div class="legend-point">
165165
<span
166166
class="dot"
167167
:class="button.matchValue"
168168
/>
169169
{{ button.label }}
170170
</div>
171171
<q-toggle
172-
class="col"
173172
:key="button"
174-
:label="button.label"
175173
v-model="button.model"
176174
@update:model-value="emit('update-filter', localFilters)"
177175
/>
178176
</div>
179177
<div
180178
v-if="localFilters.matchFilters[0].filters.find(el => el.property)"
181-
class="legend-item row"
179+
class="legend-item"
182180
>
183-
<div class="col legend-point">
181+
<div class="legend-point">
184182
<span class="dot active" />
185183
Active Application
186184
</div>
187-
<q-toggle
188-
class="col"
189-
label="Active Appl."
190-
v-model="localFilters.matchFilters[4].filters.find(el => el.matchValue === 'ACTIVE APPL.').model"
191-
@update:model-value="() => {
192-
emit('update-filter', localFilters)
193-
}"
194-
/>
185+
<div>
186+
<q-toggle
187+
v-model="localFilters.matchFilters[4].filters.find(el => el.matchValue === 'ACTIVE APPL.').model"
188+
@update:model-value="() => {
189+
emit('update-filter', localFilters)
190+
}"
191+
/>
192+
</div>
195193
</div>
196194
</q-card>
197195
</div>
@@ -335,16 +333,7 @@
335333
dense
336334
/>
337335
</div>
338-
339-
<div
340-
v-if="props.loading"
341-
class="map-points-loader"
342-
>
343-
<q-spinner size="lg" />
344-
<div class="q-mt-sm">
345-
Getting points in map view...
346-
</div>
347-
</div>
336+
348337
<div
349338
v-if="filteredPoints && !filteredPoints.length"
350339
class="q-ma-md"
@@ -460,9 +449,9 @@
460449
Network: {{ item.properties.net }}
461450
</q-item-label>
462451
<!-- handling for "analysesObj" display -->
463-
<div v-if="Object.keys(filterableProperties).length && filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics')">
452+
<div v-if="props.filterableProperties && Object.keys(props.filterableProperties).length && props.filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics')">
464453
<template
465-
v-for="analysis in filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics').filters"
454+
v-for="analysis in props.filterableProperties.matchFilters.find(el => el.category === 'Analysis Metrics').filters"
466455
:key = "analysis"
467456
>
468457
<q-chip
@@ -771,7 +760,8 @@ const clearFilters = () => {
771760
}
772761
773762
.watershed-legend {
774-
display: flex;
763+
display: grid;
764+
grid-template-columns: 1fr 1fr;
775765
position: absolute;
776766
top: 0.2rem;
777767
left: calc(100% + 0.3rem);
@@ -780,13 +770,15 @@ const clearFilters = () => {
780770
.legend-contents {
781771
background-color: rgba(255, 255, 255, 0.8);
782772
transition-duration: 0.2s;
783-
width: 23rem;
773+
width: 16rem;
784774
785775
&:hover {
786776
background-color: rgba(255, 255, 255);
787777
}
778+
788779
.legend-item {
789780
display: flex;
781+
justify-content: space-between;
790782
791783
.legend-point {
792784
display: flex;

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,10 @@ import WaterQualityReport from '@/components/waterquality/WaterQualityReport.vue
110110
import GroundWaterLevelReport from "@/components/groundwater-level/GroundWaterLevelReport.vue";
111111
import ClimateReport from '@/components/climate/ClimateReport.vue';
112112
import mapboxgl from 'mapbox-gl';
113-
import { portalHandler } from '@/utils/reactor.js';
113+
import {
114+
fetchCache,
115+
portalHandler
116+
} from '@/utils/reactor.js';
114117
import {
115118
geolocate,
116119
getFilteredPoints,
@@ -119,7 +122,6 @@ import {
119122
} from '@/utils/mapHelpers.js';
120123
import { highlightLayer, pointLayer } from "@/constants/mapLayers.js";
121124
import {
122-
getWaterPortalStations,
123125
getWaterPortalReportDataByIdAndType,
124126
downloadCSVByTypeAndId,
125127
} from '@/utils/api.js';
@@ -153,7 +155,6 @@ const pointsLoading = ref(false);
153155
const activePoint = ref(null);
154156
const loading = ref(false);
155157
const loadingMsg = ref('Loading. Please wait...');
156-
const features = ref([]);
157158
const allFeatures = ref([]);
158159
const sidebarFeatures = ref([]);
159160
const filteredFeatures = ref([]);
@@ -165,8 +166,7 @@ const allQueriedPoints = ref([]);
165166
const marker = ref(null);
166167
const reportData = ref(null);
167168
const filterableProperties = ref({});
168-
const matchFilters = ref([]);
169-
const uniqueFilters = ref([]);
169+
const pointsPromise = ref();
170170
171171
const currentPageText = computed(() => {
172172
const headerObj = {};
@@ -204,6 +204,13 @@ const pointCount = computed(() => {
204204
return 0;
205205
});
206206
207+
onMounted(() => {
208+
portalHandler.viewType = props.defaultViewType;
209+
pointsPromise.value = new Promise(resolve => {
210+
resolve(fetchCache.fetchWaterPortalPoints(portalHandler.viewType));
211+
});
212+
});
213+
207214
/**
208215
* Add Watershed License points to the supplied map
209216
* @param mapObj Mapbox Map
@@ -222,7 +229,7 @@ const loadPoints = async (mapObj) => {
222229
}
223230
}
224231
225-
points.value = await getWaterPortalStations(props.defaultViewType);
232+
points.value = await pointsPromise.value;
226233
filteredFeatures.value = points.value.features;
227234
sidebarFeatures.value = getVisibleLicenses(filteredFeatures.value);
228235
filterableProperties.value = getFilterableProperties(points.value.features);
@@ -330,10 +337,10 @@ const onViewTypeUpdate = async (newViewType) => {
330337
updateFilters(null);
331338
332339
loading.value = true;
333-
points.value = await getWaterPortalStations(newViewType);
340+
points.value = await fetchCache.fetchWaterPortalPoints(newViewType);
334341
filteredFeatures.value = points.value.features;
335342
sidebarFeatures.value = getVisibleLicenses(filteredFeatures.value);
336-
filterableProperties.value = getFilterableProperties(points.value.features);
343+
filterableProperties.value = points.value.filterableProperties;
337344
338345
try{
339346
if (!map.value.getSource("point-source")) {

client/src/components/watershed/Watershed.vue

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,10 @@ import {
118118
getFilteredPoints,
119119
goToLocation
120120
} from '@/utils/mapHelpers.js';
121-
import { getAllWatershedLicences, getWatershedByLatLng, getWatershedReportByWFI, getWatershedByWFI } from '@/utils/api.js';
121+
import { getWatershedByLatLng, getWatershedReportByWFI, getWatershedByWFI } from '@/utils/api.js';
122122
import { highlightLayer, pointLayer } from "@/constants/mapLayers.js";
123-
import { computed, onBeforeUnmount, ref } from "vue";
123+
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
124+
import { fetchCache } from "@/utils/reactor";
124125
125126
const map = ref();
126127
const points = ref();
@@ -139,8 +140,7 @@ const sidebarFeatures = ref([]);
139140
const filteredFeatures = ref();
140141
const filterableProperties = ref({});
141142
const marker = ref();
142-
const matchFilters = ref();
143-
const uniqueFilters = ref();
143+
const pointsPromise = ref();
144144
const selectedWatershedCanvas = ref();
145145
const firstSymbolId = ref();
146146
const allFeatures = ref([]);
@@ -174,6 +174,12 @@ const createMarker = (coords) => {
174174
.addTo(map.value)
175175
}
176176
177+
onMounted(() => {
178+
pointsPromise.value = new Promise(resolve => {
179+
resolve(fetchCache.fetchWatershedLicences());
180+
});
181+
});
182+
177183
/**
178184
* Add Watershed License points to the supplied map
179185
* @param mapObj Mapbox Map
@@ -192,7 +198,7 @@ const loadPoints = async (mapObj) => {
192198
}
193199
}
194200
195-
points.value = await getAllWatershedLicences();
201+
points.value = await pointsPromise.value;
196202
filteredFeatures.value = points.value.features;
197203
sidebarFeatures.value = getVisibleLicenses(filteredFeatures.value);
198204
// NOTE: we could modify the points response object to have a dynamic list of

client/src/utils/reactor.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { reactive } from "vue";
2+
import {
3+
getAllWatershedLicences,
4+
getWaterPortalStations
5+
} from "@/utils/api.js";
26

37
// acts as a data store which will store data while across routing actions etc.
48
export const portalHandler = reactive({
@@ -7,3 +11,31 @@ export const portalHandler = reactive({
711
portalHandler.viewType = viewType;
812
}
913
});
14+
15+
export const fetchCache = reactive({
16+
watershedPoints: null,
17+
groundwaterPoints: null,
18+
groundwaterCaptureZones: null,
19+
groundwaterAquifers: null,
20+
waterPortal: {
21+
streams: null,
22+
surface: null,
23+
ground: null,
24+
wells: null,
25+
weather: null,
26+
},
27+
28+
// fetchers to check if data already exists, otherwise fetch it
29+
fetchWatershedLicences: async () => {
30+
if(!fetchCache.watershedPoints){
31+
fetchCache.watershedPoints = await getAllWatershedLicences();
32+
}
33+
return fetchCache.watershedPoints;
34+
},
35+
fetchWaterPortalPoints: async (viewType) => {
36+
if(!fetchCache.waterPortal[viewType]){
37+
fetchCache.waterPortal[viewType] = await getWaterPortalStations(viewType);
38+
}
39+
return fetchCache.waterPortal[viewType];
40+
}
41+
});

0 commit comments

Comments
 (0)