From 946c4c1237600969e0f39ff97a6f02b38f1b9a7d Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 11 Dec 2024 14:03:28 +0100
Subject: [PATCH 1/3] Make locations available in SpatialDisplay

---
 src/components/spatialdisplay/SpatialDisplay.vue | 16 ++++++++++++++--
 .../spatialdisplay/SpatialDisplayComponent.vue   | 13 +++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 12279daae..8d21a7eff 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -6,7 +6,8 @@
         :location-id="props.locationId"
         :latitude="props.latitude"
         :longitude="props.longitude"
-        :filter-ids="props.filterIds"
+        :locations="locations"
+        :geojson="geojson"
         @changeLocationId="onLocationChange"
         :layer-capabilities="layerCapabilities"
         :times="times"
@@ -32,7 +33,7 @@ import { computed, ref, watch } from 'vue'
 import SpatialDisplayComponent from '@/components/spatialdisplay/SpatialDisplayComponent.vue'
 import { useDisplay } from 'vuetify'
 import { configManager } from '@/services/application-config'
-import { useRoute, useRouter } from 'vue-router'
+import { onBeforeRouteUpdate, type RouteLocationNormalized, useRoute, useRouter } from 'vue-router'
 import { findParentRoute } from '@/router'
 import { onMounted } from 'vue'
 import {
@@ -48,6 +49,7 @@ import circle from '@turf/circle'
 import bbox from '@turf/bbox'
 import { useUserSettingsStore } from '@/stores/userSettings'
 import { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
+import { useFilterLocations } from '@/services/useFilterLocations'
 
 interface Props {
   layerName?: string
@@ -72,6 +74,10 @@ const { layerCapabilities, times } = useWmsLayerCapabilities(
   baseUrl,
   () => props.layerName,
 )
+const { locations, geojson } = useFilterLocations(
+  baseUrl,
+  () => props.filterIds,
+)
 
 const start = computed(() => {
   if (!times.value || times.value.length === 0) return null
@@ -267,6 +273,12 @@ watch(
     }
   },
 )
+
+onBeforeRouteUpdate(reroute)
+
+function reroute(to: RouteLocationNormalized) {
+  console.log('Spatial Display', to)
+}
 </script>
 
 <style scoped>
diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 56540a131..f41cf6b27 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -150,10 +150,10 @@ import {
 } from 'maplibre-gl'
 import { configManager } from '@/services/application-config'
 import type { Layer, Style } from '@deltares/fews-wms-requests'
+import type { Location } from '@deltares/fews-pi-requests'
 import { LayerKind } from '@/lib/streamlines'
 import { useColourScalesStore } from '@/stores/colourScales'
 import { useDisplay } from 'vuetify'
-import { useFilterLocations } from '@/services/useFilterLocations'
 import ColourLegend from '@/components/wms/ColourLegend.vue'
 import {
   getLegendTitle,
@@ -165,6 +165,7 @@ import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
 import CoordinateSelectorControl from '@/components/map/CoordinateSelectorControl.vue'
+import { FeatureCollection, Geometry } from 'geojson'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -178,8 +179,9 @@ interface Props {
   times?: Date[]
   layerCapabilities?: Layer
   elevation?: number
+  locations?: Location[]
+  geojson: FeatureCollection<Geometry, Location>,
   locationId?: string
-  filterIds?: string[]
   latitude?: string
   longitude?: string
   currentTime?: Date
@@ -235,11 +237,6 @@ const workflowsStore = useWorkflowsStore()
 
 const showLocationsLayer = ref<boolean>(true)
 
-const { locations, geojson } = useFilterLocations(
-  baseUrl,
-  () => props.filterIds,
-)
-
 // Set the start and end time for the workflow based on the WMS layer capabilities.
 watchEffect(() => {
   workflowsStore.startTime = props.layerCapabilities?.firstValueTime ?? ''
@@ -327,7 +324,7 @@ const selectedCoordinate = computed(() => {
 })
 
 const hasLocations = computed(() => {
-  return locations.value?.length
+  return props.locations?.length
 })
 
 function onLocationClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void {

From c8d53c2ec6514be23cda33bb7a58fe3440b5f8cf Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 11 Dec 2024 14:14:51 +0100
Subject: [PATCH 2/3] Do not show time series window when location not in
 filterIds locations

---
 .../spatialdisplay/SpatialDisplay.vue         | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 8d21a7eff..c9aa3d8fd 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -33,7 +33,7 @@ import { computed, ref, watch } from 'vue'
 import SpatialDisplayComponent from '@/components/spatialdisplay/SpatialDisplayComponent.vue'
 import { useDisplay } from 'vuetify'
 import { configManager } from '@/services/application-config'
-import { onBeforeRouteUpdate, type RouteLocationNormalized, useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { findParentRoute } from '@/router'
 import { onMounted } from 'vue'
 import {
@@ -255,11 +255,23 @@ function closeTimeSeriesDisplay(): void {
 }
 
 watch(
-  () => props.layerName,
+  () => locations.value,
   () => {
     if (currentLocationId.value && !props.locationId) {
-      openLocationTimeSeriesDisplay(currentLocationId.value)
+      if (
+        locations.value?.find((l) => l.locationId === currentLocationId.value)
+      ) {
+        openLocationTimeSeriesDisplay(currentLocationId.value)
+      } else {
+        currentLocationId.value = undefined
+      }
     }
+  },
+)
+
+watch(
+  () => props.layerName,
+  () => {
     if (
       currentLatitude.value &&
       currentLongitude.value &&
@@ -273,12 +285,6 @@ watch(
     }
   },
 )
-
-onBeforeRouteUpdate(reroute)
-
-function reroute(to: RouteLocationNormalized) {
-  console.log('Spatial Display', to)
-}
 </script>
 
 <style scoped>

From 6bd8111292f1de4eb81ed584bb35189e3afe8952 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 18 Dec 2024 13:56:04 +0100
Subject: [PATCH 3/3] Linter issue

---
 src/components/spatialdisplay/SpatialDisplayComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index f41cf6b27..d396d9a6e 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -180,7 +180,7 @@ interface Props {
   layerCapabilities?: Layer
   elevation?: number
   locations?: Location[]
-  geojson: FeatureCollection<Geometry, Location>,
+  geojson: FeatureCollection<Geometry, Location>
   locationId?: string
   latitude?: string
   longitude?: string