Fix legend title not updating and legend performing requests on inactive styles

src/components/spatialdisplay/SpatialDisplayComponent.vue

@@ -132,19 +132,20 @@ import debounce from 'lodash-es/debounce'
 import { useUserSettingsStore } from '@/stores/userSettings'
 import type { MapLayerMouseEvent, MapLayerTouchEvent } from 'maplibre-gl'
 import { configManager } from '@/services/application-config'
-import type {
-  GetLegendGraphicResponse,
-  Layer,
-} from '@deltares/fews-wms-requests'
+import type { Layer, Style } from '@deltares/fews-wms-requests'
 import { LayerKind } from '@/lib/streamlines'
-import { Style } from '@deltares/fews-wms-requests'
-import { ColourMap } from '@deltares/fews-web-oc-charts'
 import { pointToGeoJson } from '@/lib/topology/coordinates'
 import { SecondaryWorkflowGroupItem } from '@deltares/fews-pi-requests'
-import { Range, useColourScalesStore } from '@/stores/colourScales'
+import { 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'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -247,7 +248,10 @@ watch(
 
         const legend = initialLegendGraphic.legend
         const newColourScale = reactive({
-          title: getLegendTitle(initialLegendGraphic),
+          title: getLegendTitle(
+            props.layerCapabilities?.title ?? '',
+            initialLegendGraphic,
+          ),
           style: style,
           colourMap: legend,
           range: legendToRange(legend),
@@ -263,10 +267,15 @@ watch(
           () => settings.useDisplayUnits,
           () => rangeToString(newColourScale.range),
           style,
+          () => props.layerCapabilities?.styles ?? [],
         )
 
         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
         })
@@ -297,21 +306,6 @@ function onLocationChange(locationId: string | null): void {
   emit('changeLocationId', locationId)
 }
 
-function styleToId(style: Style) {
-  return style.name ?? style.title
-}
-
-function rangeToString(range: Range): string {
-  return `${range.min},${range.max}`
-}
-
-function legendToRange(legend: ColourMap): Range {
-  return {
-    min: legend[0].lowerValue,
-    max: legend[legend.length - 1].lowerValue,
-  }
-}
-
 const canUseStreamlines = computed(
   () => props.layerCapabilities?.animatedVectors !== undefined,
 )
@@ -418,12 +412,6 @@ function setLayerOptions(): void {
   }
 }
 
-function getLegendTitle(legendGraphic: GetLegendGraphicResponse): string {
-  if (!props.layerCapabilities) return ''
-  const unitString = legendGraphic.unit ? ` [${legendGraphic.unit}]` : ''
-  return `${props.layerCapabilities.title}${unitString}`
-}
-
 function onCoordinateClick(
   event: MapLayerMouseEvent | MapLayerTouchEvent,
 ): void {

src/lib/legend/index.ts

@@ -0,0 +1,29 @@
+import type {
+  Style,
+  GetLegendGraphicResponse,
+} from '@deltares/fews-wms-requests'
+import type { ColourMap } from '@deltares/fews-web-oc-charts'
+import type { Range } from '@/stores/colourScales'
+
+export function rangeToString(range: Range): string {
+  return `${range.min},${range.max}`
+}
+
+export function getLegendTitle(
+  layerTitle: string,
+  legendGraphic: GetLegendGraphicResponse,
+) {
+  const unitString = legendGraphic.unit ? ` [${legendGraphic.unit}]` : ''
+  return `${layerTitle}${unitString}`
+}
+
+export function styleToId(style: Style) {
+  return style.name ?? style.title
+}
+
+export function legendToRange(legend: ColourMap): Range {
+  return {
+    min: legend[0].lowerValue,
+    max: legend[legend.length - 1].lowerValue,
+  }
+}

src/services/useWms/index.ts

@@ -13,6 +13,7 @@ import { LngLatBounds } from 'maplibre-gl'
 import { GetLegendGraphicResponse } from '@deltares/fews-wms-requests/src/response/getLegendGraphicResponse.ts'
 import { createTransformRequestFn } from '@/lib/requests/transformRequest'
 import { Style } from '@deltares/fews-wms-requests'
+import { styleToId } from '@/lib/legend'
 
 export interface UseWmsReturn {
   layerCapabilities: Ref<Layer | undefined>
@@ -89,6 +90,7 @@ export function useWmsLegend(
   useDisplayUnits: MaybeRefOrGetter<boolean>,
   colorScaleRange?: MaybeRefOrGetter<string | undefined>,
   style?: MaybeRefOrGetter<Style>,
+  activeStyles?: MaybeRefOrGetter<Style[]>,
 ): Ref<GetLegendGraphicResponse | undefined> {
   const legendGraphic = ref<GetLegendGraphicResponse>()
 
@@ -97,12 +99,21 @@ export function useWmsLegend(
     const _useDisplayUnits = toValue(useDisplayUnits)
     const _colorScaleRange = toValue(colorScaleRange)
     const _style = toValue(style)
+    const _activeStyles = toValue(activeStyles)
 
     if (_layers === '') {
       legendGraphic.value = undefined
       return
     }
 
+    if (
+      _activeStyles &&
+      _style &&
+      !_activeStyles.some((s) => styleToId(s) === styleToId(_style))
+    ) {
+      return
+    }
+
     legendGraphic.value = await fetchWmsLegend(
       baseUrl,
       _layers,