PB-1121: compare slider works with COG imported through menus

- Issue : When importing through the menu, the watchers in the compare slider caught the layer on top being modified before the layer was added to the OpenLayers Map object itself
- Fix : when importing through the menu, we now send a signal that we should force a compare slider update once the import is finished

src/modules/map/components/CompareSlider.vue

@@ -17,6 +17,9 @@ const compareRatio = ref(-0.5)
 const store = useStore()
 const storeCompareRatio = computed(() => store.state.ui.compareRatio)
 const clientWidth = computed(() => store.state.ui.width)
+const shouldUpdateCompareSlider = computed(
+    () => store.state.ui.isCompareSliderInNeedOfAForcedUpdate
+)
 const compareSliderPosition = computed(() => {
     return {
         left: compareRatio.value * 100 + '%',
@@ -35,6 +38,19 @@ watch(storeCompareRatio, (newValue) => {
 watch(visibleLayerOnTop, (newLayerOnTop, oldLayerOnTop) => {
     unRegisterRenderingEvents(oldLayerOnTop.id)
     registerRenderingEvents(newLayerOnTop.id)
+    olMap.render()
+})
+
+watch(shouldUpdateCompareSlider, (newValue) => {
+    // when importing COGTiffs, we update the layerconfig before the map,
+    // which means the 'visible layer on top' watcher tries to register the
+    // rendering events too soon. This watcher waits for a signal sent by the
+    // finally in the import file function to register the pre rendering again.
+    if (newValue) {
+        store.dispatch('forceCompareSliderUpdate', { shouldUpdate: false, ...dispatcher })
+        registerRenderingEvents(visibleLayerOnTop.value.id)
+        olMap.render()
+    }
 })
 
 onMounted(() => {
@@ -46,12 +62,12 @@ onMounted(() => {
 onBeforeUnmount(() => {
     compareRatio.value = storeCompareRatio.value
     unRegisterRenderingEvents(visibleLayerOnTop.value.id)
-
     olMap.render()
 })
 
 function registerRenderingEvents(layerId) {
     const layer = getLayerFromMapById(layerId)
+
     // When loading a layer for the first time, we might need to clean the
     // context to ensure it is also cut correctly upon activating the compare slider
     // or loading a new COG layer on top.

src/modules/menu/components/advancedTools/ImportFile/useImportFile.composable.js

@@ -52,6 +52,11 @@ export default function useImportFile() {
                 requester: source.name ?? source,
                 ...dispatcher,
             })
+            // When importing file, the compare slider sometimes doesn't update
+            // correctly, as it checks for the changes in the layers config before
+            // the map is registered in the openlayers Map itself. So we need to send a flag to tell
+            // the compare slider to update itself.
+            store.dispatch('forceCompareSliderUpdate', { shouldUpdate: true, ...dispatcher })
         }
     }
 

src/store/modules/ui.store.js

@@ -140,11 +140,19 @@ export default {
          * @type Boolean
          */
         isCompareSliderActive: false,
+        /**
+         * Flag telling if we need to enforce a compare slider update, as sometimes the order in
+         * which some events occur won't let the compare slider update correctly
+         *
+         * @type Boolean
+         */
+        isCompareSliderInNeedOfAForcedUpdate: false,
         /**
          * Flag telling if the time slider is currently active or not
          *
          * @type Boolean
          */
+
         isTimeSliderActive: false,
 
         /**
@@ -358,6 +366,11 @@ export default {
         setCompareSliderActive({ commit }, args) {
             commit('setCompareSliderActive', args)
         },
+        forceCompareSliderUpdate({ commit, state }, args) {
+            commit('forceCompareSliderUpdate', {
+                shouldUpdate: state.isCompareSliderActive && args?.shouldUpdate,
+            })
+        },
         setFeatureInfoPosition({ commit, state }, { position, dispatcher }) {
             let featurePosition = FeatureInfoPositions[position?.toUpperCase()]
             if (!featurePosition) {
@@ -501,6 +514,9 @@ export default {
         setCompareSliderActive(state, { compareSliderActive }) {
             state.isCompareSliderActive = compareSliderActive
         },
+        forceCompareSliderUpdate(state, { shouldUpdate }) {
+            state.isCompareSliderInNeedOfAForcedUpdate = !!shouldUpdate
+        },
         setTimeSliderActive(state, { timeSliderActive }) {
             state.isTimeSliderActive = timeSliderActive
         },