PB-1383: initial values not included in external layers

packages/layers/src/index.ts

@@ -7,7 +7,13 @@ export * from '@/types/capabilities'
 export * from '@/types/timeConfig'
 
 export * from '@/validation'
+
 import { register } from 'ol/proj/proj4'
 
+/**
+ * We need this to register the Swiss projections within the openlayers library.
+ *
+ * If we don't, layers with only Swiss projections can't be rendered by openlayers.
+ */
 registerProj4(proj4)
 register(proj4)

packages/layers/src/parsers/WMSCapabilitiesParser.ts

@@ -548,6 +548,7 @@ function getExternalLayer(
     return layerUtils.makeExternalWMSLayer({
         ...getLayerAttributes(capabilities, layer, parents ?? [], outputProjection, ignoreErrors),
         format: 'png',
+        ...initialValues,
         isLoading: false,
         getFeatureInfoCapability: getFeatureInfoCapability(capabilities, ignoreErrors),
         currentYear,

packages/layers/src/parsers/WMTSCapabilitiesParser.ts

@@ -430,7 +430,6 @@ function getExternalLayer(
     }
 
     const layer = getCapabilitiesLayer(capabilities, layerId)
-
     if (!layer) {
         const msg = `No WMTS layer ${layerId} found in Capabilities ${capabilities.originUrl.toString()}`
         log.error({

packages/viewer/src/modules/menu/components/topics/MenuTopicSection.vue

@@ -37,8 +37,9 @@ const showTopicTree = computed(() => {
     // // We only want the topic tree open whenever the user has chosen a different topic
     // // than the default one (it can be opened by the user by a click on it, but by default it's closed)
     // // If we have defined catalog themes to be opened in the URL, it makes sense to open the catalog
-    // return !isDefaultTopic.value
-    return topicsStore.openedTreeThemesIds.includes(currentTopic.value)
+    return (
+        topicsStore.openedTreeThemesIds.includes(currentTopic.value) && !topicsStore.isDefaultTopic
+    )
 })
 
 const mapModuleReady = computed(() => appStore.isMapReady)

packages/viewer/src/store/modules/app/index.ts

@@ -52,18 +52,21 @@ const initiateUrlParsing: AppState = {
 
 const parseLegacyUrlParams: AppState = {
     name: AppStateNames.LegacyParsing,
-    // legacyUrlParsingHasHappened is necessary to reevaluate after the legacy parsing has happened, without it, 
+    // legacyUrlParsingHasHappened is necessary to reevaluate after the legacy parsing has happened, without it,
     // isFulfilled would always return false/true after the first time
     // it also has to be the first condition because the && operator is short-circuiting
     isFulfilled: () => useAppStore().legacyUrlParsingHasHappened && !isLegacyParams(window?.location?.search),
+
     next: () => {
         return initiateUrlParsing
     },
 }
 
 const configLoaded: AppState = {
     name: AppStateNames.ConfigLoaded,
-    isFulfilled: () => true, // there's always a topic set, so no need to check if topicStore.current is defined
+    // we wait for the background layer to be set to the current topic default, to avoid conflicts between the mutation happening,
+    // and the URL synchronization.
+    isFulfilled: () => useTopicsStore().currentTopic?.defaultBackgroundLayer?.id === useLayersStore().currentBackgroundLayer?.id,
     next: () => {
         if (isLegacyParams(window?.location?.search)) {
             return parseLegacyUrlParams

packages/viewer/src/store/modules/topics/actions/loadTopic.ts

@@ -24,13 +24,12 @@ export default function loadTopic(
             if (options.openGeocatalogSection) {
                 this.setTopicTreeOpenedThemesIds([this.current, ...topicTree.itemIdToOpen], dispatcher)
             }
+            if (this.currentTopic.defaultBackgroundLayer) {
+                layersStore.setBackground(this.currentTopic.defaultBackgroundLayer.id, dispatcher)
+            } else if (options.changeLayers) {
+                layersStore.setBackground(undefined, dispatcher)
+            }
             if (options.changeLayers) {
-                if (this.currentTopic.defaultBackgroundLayer) {
-                    layersStore.setBackground(this.currentTopic.defaultBackgroundLayer.id, dispatcher)
-                } else {
-                    layersStore.setBackground(undefined, dispatcher)
-                }
-
                 if (this.currentTopic.layersToActivate) {
                     layersStore.setLayers(this.currentTopic.layersToActivate, dispatcher)
                 }

packages/viewer/src/store/plugins/storeSync/params/bgLayer.param.ts

@@ -1,6 +1,7 @@
 import type { RouteLocationNormalizedGeneric } from 'vue-router'
 
 import useLayersStore from '@/store/modules/layers'
+import useTopicsStore from '@/store/modules/topics'
 import UrlParamConfig, {
     STORE_DISPATCHER_ROUTER_PLUGIN,
 } from '@/store/plugins/storeSync/UrlParamConfig.class'
@@ -21,10 +22,12 @@ const backgroundLayerParamConfig = new UrlParamConfig<string>({
     },
     setValuesInStore: (_: RouteLocationNormalizedGeneric, urlParamValue?: string) => {
         const layersStore = useLayersStore()
-        if (urlParamValue && urlParamValue !== 'void') {
+        const topicsStore = useTopicsStore()
+
+        if (urlParamValue) {
             layersStore.setBackground(urlParamValue, STORE_DISPATCHER_ROUTER_PLUGIN)
         } else {
-            layersStore.setBackground(undefined, STORE_DISPATCHER_ROUTER_PLUGIN)
+            layersStore.setBackground(topicsStore.currentTopic?.defaultBackgroundLayer?.id, STORE_DISPATCHER_ROUTER_PLUGIN)
         }
     },
     keepInUrlWhenDefault: true,
@@ -34,7 +37,7 @@ const backgroundLayerParamConfig = new UrlParamConfig<string>({
             queryValue,
             !!queryValue &&
                 (queryValue === 'void' ||
-                    useLayersStore().backgroundLayers?.some((layer) => layer.id == queryValue)),
+                    useLayersStore().backgroundLayers?.some((layer) => layer.id === queryValue)),
             'bgLayer'
         ),
 })

packages/viewer/tests/cypress/support/commands.ts

@@ -1,7 +1,7 @@
 import 'cypress-real-events'
 import 'cypress-wait-until'
 import '@4tw/cypress-drag-drop'
-import type { GeoAdminLayer } from '@swissgeo/layers'
+import type { GeoAdminLayer, Layer } from '@swissgeo/layers'
 import type { Layer as OLLayer } from 'ol/layer'
 import type { Pinia } from 'pinia'
 
@@ -427,7 +427,6 @@ Cypress.Commands.add('openLayerSettings', (layerId) => {
 export interface PartialLayer {
     id: string
     opacity?: number
-    visible?: boolean // the Layers interface has 'isVisible' as a boolean, I'll make the 'visible' to 'isVisible' change in another commit so I'm not destroying everything
     isVisible?: boolean
 }
 
@@ -445,24 +444,24 @@ Cypress.Commands.add('checkOlLayer', (args) => {
             }
         })
     } else if (typeof args === 'string') {
-        layers.push({ id: args, visible: true, opacity: 1 })
+        layers.push({ id: args, isVisible: true, opacity: 1 })
     } else {
         layers.push(Cypress._.cloneDeep(args))
     }
     layers = layers.map((l) => {
         if (!l.id) {
             throw new Error(`Invalid layer object ${JSON.stringify(l)}: don't have an id`)
         }
-        if (l.visible === undefined) {
-            l.visible = true
+        if (l.isVisible === undefined) {
+            l.isVisible = true
         }
         if (l.opacity === undefined) {
             l.opacity = 1
         }
         return l
     })
-    const visibleLayers: PartialLayer[] = layers.filter((l) => l.visible)
-    const invisibleLayers: PartialLayer[] = layers.filter((l) => !l.visible)
+    const visibleLayers: PartialLayer[] = layers.filter((l) => l.isVisible)
+    const invisibleLayers: PartialLayer[] = layers.filter((l) => !l.isVisible)
     cy.window()
         .its('map')
         .invoke('getAllLayers')
@@ -495,7 +494,7 @@ Cypress.Commands.add('checkOlLayer', (args) => {
                 expect(olLayer, `[${layer.id}] layer at index ${index} not found`).not.to.be
                     .undefined
                 expect(olLayer!.getVisible(), `[${layer.id}] layer.isVisible`).to.be.equal(
-                    layer.visible
+                    layer.isVisible
                 )
                 expect(olLayer!.getOpacity(), `[${layer.id}] layer.opacity`).to.be.equal(
                     layer.opacity
@@ -504,7 +503,10 @@ Cypress.Commands.add('checkOlLayer', (args) => {
                 // Also, the rendered flag is protected, so we're checking if it is set with a getRenderSource().getState()
                 // function, which returns false as long as either there is no renderer, or the rendered
                 // flag is false
-                cy.waitUntil(() => olLayer?.getRenderSource()?.getState() === 'ready', {
+                cy.waitUntil(() => {
+                    return olLayer?.getRenderSource()?.getState() === 'ready'
+                }
+                , {
                     description: `[${layer.id}] waitUntil layer.rendered`,
                     errorMsg: `[${layer.id}] layer.rendered is not true`,
                 })