From ba74e0beb8020b32889b5e50baf23a82f7b118f4 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 31 May 2024 14:26:49 +0200
Subject: [PATCH 1/3] PB-543 : fix Cesium CSS spillover

Cesium CSS was altering how our buttons were shown, adding some padding or margins there and there. As we were importing the Cesium CSS file just to place the canvas (and its Cesium generated parent divs) correctly, I've switched to declare this CSS ourselves and remove the import of the Cesium CSS file.

Also removing a couple wrapping divs in the Cesium component that are not useful, as they clutter our "real" DOM with many empty divs
---
 .../components/cesium/CesiumGeoJSONLayer.vue  |  4 +-
 .../components/cesium/CesiumInternalLayer.vue | 96 ++++++++-----------
 .../map/components/cesium/CesiumMap.vue       | 38 +++++++-
 .../map/components/cesium/CesiumWMSLayer.vue  |  4 +-
 .../map/components/cesium/CesiumWMTSLayer.vue |  4 +-
 5 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/src/modules/map/components/cesium/CesiumGeoJSONLayer.vue b/src/modules/map/components/cesium/CesiumGeoJSONLayer.vue
index d01380a6d..7946ffac1 100644
--- a/src/modules/map/components/cesium/CesiumGeoJSONLayer.vue
+++ b/src/modules/map/components/cesium/CesiumGeoJSONLayer.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <slot />
-    </div>
+    <slot />
 </template>
 
 <script>
diff --git a/src/modules/map/components/cesium/CesiumInternalLayer.vue b/src/modules/map/components/cesium/CesiumInternalLayer.vue
index d4d88f126..d3a39ae0a 100644
--- a/src/modules/map/components/cesium/CesiumInternalLayer.vue
+++ b/src/modules/map/components/cesium/CesiumInternalLayer.vue
@@ -1,70 +1,58 @@
 <template>
-    <div>
-        <CesiumVectorLayer
-            v-if="layerConfig.type === LayerTypes.VECTOR"
-            :layer-config="layerConfig"
-        />
-        <CesiumWMTSLayer
-            v-if="layerConfig.type === LayerTypes.WMTS"
-            :wmts-layer-config="layerConfig"
-            :preview-year="previewYear"
-            :projection="projection"
-            :parent-layer-opacity="parentLayerOpacity"
-            :z-index="zIndex"
-            :is-time-slider-active="isTimeSliderActive"
-        />
+    <CesiumVectorLayer v-if="layerConfig.type === LayerTypes.VECTOR" :layer-config="layerConfig" />
+    <CesiumWMTSLayer
+        v-if="layerConfig.type === LayerTypes.WMTS"
+        :wmts-layer-config="layerConfig"
+        :preview-year="previewYear"
+        :projection="projection"
+        :parent-layer-opacity="parentLayerOpacity"
+        :z-index="zIndex"
+        :is-time-slider-active="isTimeSliderActive"
+    />
+    <CesiumWMSLayer
+        v-if="layerConfig.type === LayerTypes.WMS"
+        :wms-layer-config="layerConfig"
+        :preview-year="previewYear"
+        :projection="projection"
+        :z-index="zIndex"
+        :is-time-slider-active="isTimeSliderActive"
+    />
+    <div v-if="layerConfig.type === LayerTypes.GROUP">
         <CesiumWMSLayer
-            v-if="layerConfig.type === LayerTypes.WMS"
-            :wms-layer-config="layerConfig"
+            v-for="(layer, index) in layerConfig.layers"
+            :key="`${layer.id}-${index}`"
+            :wms-layer-config="layer"
             :preview-year="previewYear"
             :projection="projection"
             :parent-layer-opacity="parentLayerOpacity"
-            :z-index="zIndex"
+            :z-index="zIndex + index"
             :is-time-slider-active="isTimeSliderActive"
         />
-        <div v-if="layerConfig.type === LayerTypes.GROUP">
-            <CesiumWMSLayer
-                v-for="(layer, index) in layerConfig.layers"
-                :key="`${layer.id}-${index}`"
-                :wms-layer-config="layer"
+    </div>
+    <div v-if="layerConfig.type === LayerTypes.AGGREGATE">
+        <!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
+        <div v-for="aggregateSubLayer in layerConfig.subLayers" :key="aggregateSubLayer.subLayerId">
+            <CesiumInternalLayer
+                v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
+                :layer-config="aggregateSubLayer.layer"
+                :parent-layer-opacity="layerConfig.opacity"
                 :preview-year="previewYear"
                 :projection="projection"
-                :parent-layer-opacity="layerConfig.opacity"
-                :z-index="zIndex + index"
                 :is-time-slider-active="isTimeSliderActive"
+                :z-index="zIndex"
             />
         </div>
-        <div v-if="layerConfig.type === LayerTypes.AGGREGATE">
-            <!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
-            <div
-                v-for="aggregateSubLayer in layerConfig.subLayers"
-                :key="aggregateSubLayer.subLayerId"
-            >
-                <CesiumInternalLayer
-                    v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
-                    :layer-config="aggregateSubLayer.layer"
-                    :parent-layer-opacity="layerConfig.opacity"
-                    :preview-year="previewYear"
-                    :projection="projection"
-                    :is-time-slider-active="isTimeSliderActive"
-                    :z-index="zIndex"
-                />
-            </div>
-        </div>
-        <CesiumGeoJSONLayer
-            v-if="layerConfig.type === LayerTypes.GEOJSON"
-            :layer-id="layerConfig.id"
-            :opacity="layerConfig.opacity"
-            :geojson-url="layerConfig.geoJsonUrl"
-            :style-url="layerConfig.styleUrl"
-            :projection="projection"
-        />
-        <CesiumKMLLayer
-            v-if="layerConfig.type === LayerTypes.KML"
-            :kml-layer-config="layerConfig"
-        />
-        <slot />
     </div>
+    <CesiumGeoJSONLayer
+        v-if="layerConfig.type === LayerTypes.GEOJSON"
+        :layer-id="layerConfig.id"
+        :opacity="layerConfig.opacity"
+        :geojson-url="layerConfig.geoJsonUrl"
+        :style-url="layerConfig.styleUrl"
+        :projection="projection"
+    />
+    <CesiumKMLLayer v-if="layerConfig.type === LayerTypes.KML" :kml-layer-config="layerConfig" />
+    <slot />
 </template>
 
 <script>
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 9a1ad416c..672356ea3 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -3,7 +3,7 @@
         v-if="isProjectionWebMercator"
         id="cesium"
         ref="viewer"
-        class="cesium-widget"
+        class="cesium-map"
         data-cy="cesium-map"
         @touchstart.passive="onTouchStart"
         @touchmove.passive="clearLongPressTimer"
@@ -78,7 +78,6 @@
     </div>
 </template>
 <script>
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 import '@geoblocks/cesium-compass'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -634,16 +633,47 @@ export default {
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 @import '@/modules/map/scss/toolbox-buttons';
+@import '@/scss/media-query.mixin';
+
+.cesium-map,
+.cesium-widget,
+:global(.cesium-viewer),
+:global(.cesium-viewer-cesiumWidgetContainer),
+:global(.cesium-widget),
+:global(.cesium-widget canvas) {
+    overflow: hidden;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 
 // rule can't be scoped otherwise styles will be not applied
 :global(.cesium-viewer .cesium-widget-credits) {
     display: none !important;
 }
 :global(.cesium-performanceDisplay-defaultContainer) {
-    left: $screen-padding-for-ui-elements;
+    position: absolute;
+    right: $screen-padding-for-ui-elements;
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     top: unset;
-    right: unset;
+    left: unset;
+    border: $border-width solid $danger-border-subtle;
+    border-radius: $border-radius;
+    background-color: $danger-bg-subtle;
+    padding: 0.5rem;
+}
+
+@include respond-above(phone) {
+    :global(.cesium-performanceDisplay-defaultContainer) {
+        // Background wheel is on the opposite side of the screen past the phone threshold,
+        // so we move the debug box to the other side too (so that it is not covered/covering the
+        // BG wheel button)
+        left: $screen-padding-for-ui-elements;
+        right: unset;
+    }
 }
 
 .cesium-compass {
diff --git a/src/modules/map/components/cesium/CesiumWMSLayer.vue b/src/modules/map/components/cesium/CesiumWMSLayer.vue
index 084a80212..05d866af0 100644
--- a/src/modules/map/components/cesium/CesiumWMSLayer.vue
+++ b/src/modules/map/components/cesium/CesiumWMSLayer.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <slot />
-    </div>
+    <slot />
 </template>
 
 <script>
diff --git a/src/modules/map/components/cesium/CesiumWMTSLayer.vue b/src/modules/map/components/cesium/CesiumWMTSLayer.vue
index 9ba89257f..aa227e781 100644
--- a/src/modules/map/components/cesium/CesiumWMTSLayer.vue
+++ b/src/modules/map/components/cesium/CesiumWMTSLayer.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <slot />
-    </div>
+    <slot />
 </template>
 
 <script>

From 5ae2a0b378996036da6d0314e5533ba647276a83 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 31 May 2024 14:16:40 +0200
Subject: [PATCH 2/3] fix warning that 3D viewer inject isn't available when
 starting in 2D

making the inject a factory method, so it won't be computed at startup (on mount) but only the first time it is being used
---
 src/modules/map/components/toolbox/ZoomButtons.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/map/components/toolbox/ZoomButtons.vue b/src/modules/map/components/toolbox/ZoomButtons.vue
index ce1fa8ecb..20721e346 100644
--- a/src/modules/map/components/toolbox/ZoomButtons.vue
+++ b/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -13,7 +13,8 @@ const resolution = computed(() => store.getters.resolution)
 
 useTippyTooltip('#zoomButtons [data-tippy-content]', { placement: 'left' })
 
-const getViewer = inject('getViewer')
+// telling vue that getViewer is a factory method (avoid unnecessary computation or side effects)
+const getViewer = inject('getViewer', () => {}, true)
 
 // The `step` variable is used with the 3D viewer. The goal was to find an increase or
 // decrease in the zoom that emulated a zoom level in an agreeable way. `200` here is a

From f8c7f076f61c53ece788f950505f3125fc83d69d Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 31 May 2024 14:51:19 +0200
Subject: [PATCH 3/3] fix test after change in PB-549

---
 tests/cypress/tests-e2e/legacyParamImport.cy.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/cypress/tests-e2e/legacyParamImport.cy.js b/tests/cypress/tests-e2e/legacyParamImport.cy.js
index a6c1e9265..82edd520c 100644
--- a/tests/cypress/tests-e2e/legacyParamImport.cy.js
+++ b/tests/cypress/tests-e2e/legacyParamImport.cy.js
@@ -249,6 +249,7 @@ describe('Test on legacy param import', () => {
             )
             cy.readStoreValue('state.search.query').should('eq', '1530 Payerne')
             cy.url().should('include', 'swisssearch=1530+Payerne')
+            cy.get('[data-cy="searchbar"]').click()
             cy.get('[data-cy="search-results-locations"]').should('be.visible')
         })
         it('External WMS layer', () => {