Scope current colour scales to spatialdisplay instance

src/components/spatialdisplay/SpatialDisplayComponent.vue

@@ -13,18 +13,18 @@
       :streamlineOptions="layerCapabilities?.animatedVectors"
       @doubleclick="onCoordinateClick"
     />
-    <div class="colourbar-container" v-if="colourScalesStore.currentScale">
+    <div class="colourbar-container" v-if="currentColourScale">
       <ColourLegend
-        v-if="!colourScalesStore.currentScale.useGradients"
-        :colourMap="colourScalesStore.currentScale.colourMap"
-        :title="colourScalesStore.currentScale.title"
+        v-if="!currentColourScale.useGradients"
+        :colourMap="currentColourScale.colourMap"
+        :title="currentColourScale.title"
       />
       <ColourBar
         v-else
-        :colourMap="colourScalesStore.currentScale.colourMap"
-        :title="colourScalesStore.currentScale.title"
-        :useGradients="colourScalesStore.currentScale.useGradients"
-        v-model:range="colourScalesStore.currentScale.range"
+        :colourMap="currentColourScale.colourMap"
+        :title="currentColourScale.title"
+        :useGradients="currentColourScale.useGradients"
+        v-model:range="currentColourScale.range"
       />
     </div>
     <SelectedCoordinateLayer
@@ -75,6 +75,8 @@
           :canUseStreamlines="canUseStreamlines"
           v-model:layer-kind="layerKind"
           v-model:show-layer="showLayer"
+          :currentColourScaleIds="currentColourScaleIds"
+          @update:current-colour-scale="currentColourScale = $event"
         />
         <LocationsSearchControl
           v-model:showLocations="showLocationsLayer"
@@ -108,7 +110,7 @@
     <template #below-track>
       <DateTimeSliderValues
         :values="maxValuesTimeSeries ?? []"
-        :colour-scale="colourScalesStore.currentScale ?? null"
+        :colour-scale="currentColourScale ?? null"
         height="6px"
         class="mb-1"
         style="margin-top: -7px"
@@ -122,12 +124,8 @@ import DateTimeSliderValues from '@/components/general/DateTimeSliderValues.vue'
 import MapComponent from '@/components/map/MapComponent.vue'
 import AnimatedStreamlineRasterLayer from '@/components/wms/AnimatedStreamlineRasterLayer.vue'
 
-import { ref, computed, onBeforeMount, reactive, watch, watchEffect } from 'vue'
-import {
-  convertBoundingBoxToLngLatBounds,
-  fetchWmsLegend,
-  useWmsLegend,
-} from '@/services/useWms'
+import { ref, computed, onBeforeMount, watch, watchEffect } from 'vue'
+import { convertBoundingBoxToLngLatBounds } from '@/services/useWms'
 import ColourBar from '@/components/wms/ColourBar.vue'
 import AnimatedRasterLayer, {
   AnimatedRasterLayerOptions,
@@ -151,16 +149,11 @@ import {
 import { configManager } from '@/services/application-config'
 import type { Layer, Style } from '@deltares/fews-wms-requests'
 import { LayerKind } from '@/lib/streamlines'
-import { useColourScalesStore } from '@/stores/colourScales'
+import { ColourScale, useColourScalesStore } from '@/stores/colourScales'
 import { useDisplay } from 'vuetify'
 import { useFilterLocations } from '@/services/useFilterLocations'
 import ColourLegend from '@/components/wms/ColourLegend.vue'
-import {
-  getLegendTitle,
-  legendToRange,
-  rangeToString,
-  styleToId,
-} from '@/lib/legend'
+import { rangeToString, styleToId } from '@/lib/legend'
 import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
@@ -221,7 +214,6 @@ const forecastTime = ref<Date>()
 const isLoading = ref(false)
 let debouncedSetLayerOptions!: () => void
 
-const legendLayerName = ref(props.layerName)
 const legendLayerStyles = ref<Style[]>()
 const settings = useUserSettingsStore()
 
@@ -231,6 +223,9 @@ const showLayer = ref<boolean>(true)
 const layerKind = ref(LayerKind.Static)
 
 const colourScalesStore = useColourScalesStore()
+const currentColourScale = ref<ColourScale>()
+const currentColourScaleIds = ref<string[]>([])
+
 const workflowsStore = useWorkflowsStore()
 
 const showLocationsLayer = ref<boolean>(true)
@@ -248,73 +243,22 @@ watchEffect(() => {
 
 watch(
   legendLayerStyles,
-  () => {
-    const styles = legendLayerStyles.value
+  (styles) => {
     if (styles === undefined) {
-      colourScalesStore.currentIds = []
-      colourScalesStore.currentIndex = 0
+      currentColourScaleIds.value = []
       return
     }
 
-    legendLayerName.value = props.layerName
-    colourScalesStore.currentIds = styles.map(styleToId)
-    colourScalesStore.currentIndex = 0
-
-    styles.forEach(async (style) => {
-      const styleId = styleToId(style)
-
-      if (!(styleId in colourScalesStore.scales)) {
-        const initialLegendGraphic = await fetchWmsLegend(
-          baseUrl,
-          legendLayerName.value,
-          settings.useDisplayUnits,
-          undefined,
-          style,
-        )
-
-        const legend = initialLegendGraphic.legend
-        const newColourScale = reactive({
-          title: getLegendTitle(
-            props.layerCapabilities?.title ?? '',
-            initialLegendGraphic,
-          ),
-          style: style,
-          colourMap: legend,
-          range: legendToRange(legend),
-          initialRange: legendToRange(legend),
-          useGradients: !legend.some((entry) => entry.colorSmoothing === false),
-        })
-        colourScalesStore.scales[styleId] = newColourScale
-
-        const range = computed(() => {
-          const newRange = rangeToString(newColourScale.range)
-          const initialRange = rangeToString(newColourScale.initialRange)
-
-          return newRange !== initialRange ? newRange : undefined
-        })
-
-        const newLegendGraphic = useWmsLegend(
-          baseUrl,
-          legendLayerName,
-          () => settings.useDisplayUnits,
-          range,
-          style,
-          () =>
-            props.layerCapabilities
-              ? (props.layerCapabilities.styles ?? [style])
-              : undefined,
-        )
-
-        watch(newLegendGraphic, () => {
-          if (newLegendGraphic.value?.legend === undefined) return
-          colourScalesStore.scales[styleId].title = getLegendTitle(
-            props.layerCapabilities?.title ?? '',
-            newLegendGraphic.value,
-          )
-          colourScalesStore.scales[styleId].colourMap =
-            newLegendGraphic.value.legend
-        })
-      }
+    currentColourScaleIds.value = styles.map(styleToId)
+
+    styles.forEach((style) => {
+      colourScalesStore.addScale(
+        style,
+        props.layerName,
+        () => props.layerCapabilities?.title,
+        () => settings.useDisplayUnits,
+        () => props.layerCapabilities?.styles ?? [],
+      )
     })
   },
   { immediate: true },
@@ -364,7 +308,6 @@ watch(
     const _forecastTime = layer?.keywordList?.[0].forecastTime
     forecastTime.value = _forecastTime ? new Date(_forecastTime) : undefined
 
-    legendLayerName.value = props.layerName
     legendLayerStyles.value = props.layerCapabilities?.styles
     if (legendLayerStyles.value === undefined && props.layerName) {
       legendLayerStyles.value = [
@@ -395,7 +338,7 @@ watch(currentElevation, () => {
 })
 
 watch(
-  [() => colourScalesStore.currentScale?.range, () => settings.useDisplayUnits],
+  [() => currentColourScale.value?.range, () => settings.useDisplayUnits],
   () => {
     setLayerOptions()
   },
@@ -443,10 +386,10 @@ function setLayerOptions(): void {
         ? convertBoundingBoxToLngLatBounds(props.layerCapabilities.boundingBox)
         : undefined,
       elevation: currentElevation.value,
-      colorScaleRange: colourScalesStore.currentScale?.range
-        ? rangeToString(colourScalesStore.currentScale?.range)
+      colorScaleRange: currentColourScale.value?.range
+        ? rangeToString(currentColourScale.value?.range)
         : undefined,
-      style: colourScalesStore.currentScale?.style.name,
+      style: currentColourScale.value?.style.name,
       useDisplayUnits: settings.useDisplayUnits,
     }
   } else {

src/components/wms/InformationPanel.vue

@@ -36,14 +36,11 @@
           prepend-icon="mdi-clock-time-four-outline"
         >
         </v-list-item>
-        <v-list-item
-          prepend-icon="mdi-palette"
-          v-if="colourScalesStore.currentScales"
-        >
+        <v-list-item prepend-icon="mdi-palette" v-if="currentScales">
           <v-list-item
-            v-for="(item, index) of colourScalesStore.currentScales"
+            v-for="(item, index) of currentScales"
             :key="index"
-            @click="colourScalesStore.currentIndex = index"
+            @click="currentColourScaleIndex = index"
             class="px-0"
           >
             <v-list-item-title>
@@ -62,14 +59,12 @@
                 <ColourLegendTable :colourMap="item.colourMap" />
               </template>
             </div>
-            <template #append v-if="index === colourScalesStore.currentIndex">
+            <template #append v-if="index === currentColourScaleIndex">
               <v-icon>mdi-check</v-icon>
             </template>
           </v-list-item>
         </v-list-item>
-        <v-list-item
-          v-if="colourScalesStore.currentScale?.useGradients !== false"
-        >
+        <v-list-item v-if="currentScale?.useGradients !== false">
           <template v-slot:prepend>
             <div class="mx-7"></div>
           </template>
@@ -81,8 +76,8 @@
                 variant="plain"
                 hide-details
                 density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
+                @keydown.enter.stop="changeCurrentColourScaleRange"
+                @blur="changeCurrentColourScaleRange"
                 :rules="[rules.required, rules.smallerThanMax]"
               ></v-text-field>
             </v-col>
@@ -93,18 +88,18 @@
                 variant="plain"
                 hide-details
                 density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
+                @keydown.enter.stop="changeCurrentColourScaleRange"
+                @blur="changeCurrentColourScaleRange"
                 :rules="[rules.required, rules.biggerThanMin]"
               ></v-text-field>
             </v-col>
             <v-col cols="2" class="d-flex align-center justify-center">
               <v-btn
-                v-if="!colourScalesStore.currentScaleIsInitialRange"
+                v-if="!currentScaleIsInitialRange"
                 icon="mdi-restore"
                 variant="flat"
                 density="compact"
-                @click="colourScalesStore.resetCurrentScaleRange"
+                @click="resetCurrentScaleRange"
               />
             </v-col>
           </v-row>
@@ -142,9 +137,10 @@ import { ref } from 'vue'
 import { LayerKind } from '@/lib/streamlines'
 import ColourStrip from '@/components/wms/ColourStrip.vue'
 import { watch } from 'vue'
-import { useColourScalesStore } from '@/stores/colourScales'
+import { useColourScalesStore, type Range } from '@/stores/colourScales'
 import ColourLegendTable from './ColourLegendTable.vue'
 import ControlChip from '@/components/wms/ControlChip.vue'
+import { useColourScales } from '@/services/useColourScales'
 
 interface Props {
   layerTitle?: string
@@ -155,36 +151,64 @@ interface Props {
   firstValueTime?: Date
   lastValueTime?: Date
   canUseStreamlines?: boolean
+  currentColourScaleIds: string[]
 }
 
-const colourScalesStore = useColourScalesStore()
-
 const props = withDefaults(defineProps<Props>(), {
   layerTitle: '',
   completelyMissing: false,
 })
 
-const emit = defineEmits(['style-click', 'update:layerKind'])
+const emit = defineEmits([
+  'style-click',
+  'update:layerKind',
+  'update:current-colour-scale',
+])
+
+const currentColourScaleIndex = ref(0)
+watch(
+  () => props.currentColourScaleIds,
+  () => {
+    currentColourScaleIndex.value = 0
+  },
+)
+
+const colourScalesStore = useColourScalesStore()
+const {
+  currentScale,
+  currentScales,
+  currentScaleIsInitialRange,
+  resetCurrentScaleRange,
+} = useColourScales(
+  currentColourScaleIndex,
+  () => props.currentColourScaleIds,
+  () => colourScalesStore.scales,
+)
 
-const mutableColorScaleRange = ref(
-  colourScalesStore.currentScale?.range
-    ? { ...colourScalesStore.currentScale?.range }
-    : undefined,
+watch(
+  currentScale,
+  () => {
+    emit('update:current-colour-scale', currentScale.value)
+  },
+  { immediate: true },
 )
 
+const mutableColorScaleRange = ref<Range>()
 watch(
-  () => colourScalesStore.currentScale?.range,
+  () => currentScale.value?.range,
   () => {
-    mutableColorScaleRange.value = colourScalesStore.currentScale?.range
-      ? { ...colourScalesStore.currentScale?.range }
+    mutableColorScaleRange.value = currentScale.value?.range
+      ? { ...currentScale.value?.range }
       : undefined
   },
-  { deep: true },
+  { immediate: true, deep: true },
 )
 
-const changecolorScaleRange = () => {
+const changeCurrentColourScaleRange = () => {
   if (mutableColorScaleRange.value === undefined) return
-  colourScalesStore.setCurrentScaleRange(mutableColorScaleRange.value)
+  if (currentScale.value === undefined) return
+
+  currentScale.value.range = mutableColorScaleRange.value
 }
 
 const showLayer = defineModel<boolean>('showLayer')