Layer freeze

app/src/components/CenterPanel.vue

@@ -10,7 +10,6 @@
 <script>
 // Utilities
 import {
-  mapGetters,
   mapState,
 } from 'vuex';
 import Map from '@/components/map/Map.vue';

app/src/components/DataPanel.vue

@@ -13,7 +13,7 @@
         indicatorObject
         && (appConfig.id === 'gtif' || !indicatorObject.features
         || dataObject || mergedConfigsData[0].customAreaIndicator)
-        " class="d-flex">
+        " class="d-flex ma-0">
         <!--
         <v-col v-if="appConfig.id === 'gtif'"
           :cols="$vuetify.breakpoint.mdAndDown || !expanded ? 12 : 6"

app/src/components/map/CustomAreaButtons.vue

@@ -69,6 +69,22 @@
       </template>
       <span>Cancel drawing</span>
     </v-tooltip>
+    <v-tooltip
+      v-if="freezeLayerButtonVisible"
+      left
+    >
+      <template v-slot:activator="{ on }">
+        <v-btn
+          :color="$vuetify.theme.currentTheme.background"
+          class="pa-0 elevation-0"
+          v-on="on"
+          @click="freezeLayer()"
+        >
+          <v-icon>mdi-content-duplicate</v-icon>
+        </v-btn>
+      </template>
+      <span>Freeze layer for comparison</span>
+    </v-tooltip>
   </div>
 </template>
 
@@ -151,6 +167,9 @@ export default {
         // enables chart generation
         && (this.drawnLayerVisible);
     },
+    freezeLayerButtonVisible() {
+      return this.mergedConfigsData.length;
+    },
     deleteButtonVisible() {
       return this.drawnArea.area && this.drawToolsVisible;
     },
@@ -214,6 +233,9 @@ export default {
     },
   },
   methods: {
+    freezeLayer() {
+      this.$store.dispatch('indicators/freezeCurrentIndicator');
+    },
     drawEnable(tool) {
       const { map } = getMapInstance(this.mapId);
       this.disableInteractions();

app/src/components/map/FilterControls.vue

@@ -79,7 +79,7 @@
             dense
             :min="filters[key].min"
             :max="filters[key].max"
-            :step="(filters[key].max-filters[key].min)/100"
+            :step="filters[key].step || (filters[key].max-filters[key].min)/100"
             @input="(evt) => throttledUpdate(evt, filters[key].id)"
           >
             <template v-slot:prepend>
@@ -215,7 +215,7 @@
             dense
             :min="filters[key].min"
             :max="filters[key].max"
-            :step="(filters[key].max-filters[key].min)/100"
+            :step="filters[key].step || (filters[key].max-filters[key].min)/100"
             @input="(evt) => throttledUpdate(evt, filters[key].id)"
           >
             <template v-slot:prepend>
@@ -416,6 +416,13 @@ export default {
         }
         return p;
       });
+      if (this.indicatorCode === 'REP1') {
+        pars.push('height=200');
+      } else if (this.indicatorCode === 'REP1_1') {
+        pars.push('height=100');
+      } else if (this.indicatorCode === 'REP1_2') {
+        pars.push('height=50');
+      }
       const id = this.$store.state.features.selectedFeatures[0].id_;
       const aoi = `aoi=${id}&`;
       const request = baseUrl + aoi + pars.join('&');

app/src/components/map/Map.vue

@@ -31,6 +31,13 @@
       @setMapTime="(time) => dataLayerTime = {value: time}"
       @setTimeArray="handleSetTimeArray"
     />
+    <!-- additional special layer showing frozen indicator-->
+    <SpecialLayer
+      v-if="showFrozenLayer"
+      :mapId="mapId"
+      :mergedConfigs="mergedConfigsFrozenData"
+      :options="frozenLayerOptions"
+    />
     <div
       class="d-flex justify-center fill-height"
       style="position: absolute; bottom: 0; left: 0;
@@ -306,6 +313,10 @@ export default {
     layerNameMapping() {
       return this.baseConfig.layerNameMapping;
     },
+    showFrozenLayer() {
+      return this.frozenIndicator && this.mergedConfigsFrozenData
+      && this.mergedConfigsFrozenData.length;
+    },
     showSpecialLayer() {
       return this.mergedConfigsData.length && this.dataLayerName
       && this.indicatorHasMapData(this.indicator);
@@ -374,6 +385,9 @@ export default {
       }
       return indicator;
     },
+    frozenIndicator() {
+      return this.$store.state.indicators.frozenIndicator;
+    },
     featureObject() {
       let featureObject = this.$store.state.features.selectedFeature?.indicatorObject;
       if (this.currentFeatureObject) {
@@ -459,6 +473,26 @@ export default {
         this.currentTimeIndex,
       );
     },
+    mergedConfigsFrozenData() {
+      const config = createConfigFromIndicator(
+        this.frozenIndicator,
+        -1,
+      );
+      let resultConfig = null;
+      // use only first "layer" entry
+      if (config.length > 0) {
+        [resultConfig] = config;
+        resultConfig.name = `${resultConfig.name} (Frozen copy)`;
+        resultConfig.id = `${resultConfig.id}_frozen`;
+        // bake in selected time by only passing one time to the frozen indicator
+        if ('usedTimes' in resultConfig && this.dataLayerTime) {
+          resultConfig.usedTimes.time = [
+            this.dataLayerTime.value,
+          ];
+        }
+      }
+      return [resultConfig];
+    },
     currentTimeIndex() {
       return this.availableTimeEntries.findIndex((item) => item.name === this.dataLayerTime.name);
     },
@@ -481,6 +515,12 @@ export default {
         drawnArea: this.drawnArea,
       };
     },
+    frozenLayerOptions() {
+      return {
+        dataProp: 'frozenMapData',
+        frozenLayer: true,
+      };
+    },
     availableTimeEntries() {
       if (this.featureObject && this.featureData && this.featureData.time) {
         // merge information from both

app/src/components/map/SpecialLayer.vue

@@ -71,6 +71,12 @@ export default {
       if (this.compare) {
         layer.set('name', `${layer.get('name')}_compare`);
       }
+      if (options.frozenLayer) {
+        // exit early and do not bind any handlers
+        const dataGroup = map.getLayers().getArray().find((l) => l.get('id') === 'dataGroup');
+        dataGroup.getLayers().push(layer);
+        return;
+      }
       // find first feature layer
       if (config.features || config.tooltip) {
         // initiate hover over functionality optionally for both featureLayer

app/src/components/map/VectorTileStyleControl.vue

@@ -1,23 +1,15 @@
 <template>
   <v-container fluid>
-    <v-row align="center">
+    <v-row align="center"
+    v-if="queryParameters.items.length > 1">
       <v-col cols="6">
         <v-subheader>
           Data properties
-          <info-dialog
-            v-if="select && select.dataInfo && queryParameters.items.length === 1"
-            :infoSource="select.dataInfo"
-          />
-          <info-dialog
-            v-if="queryParameters.dataInfo"
-            :infoSource="queryParameters.dataInfo"
-          />
         </v-subheader>
       </v-col>
 
       <v-col cols="6">
         <v-select
-          v-if="queryParameters.items.length > 1"
           v-model="select"
           :items="queryParameters.items"
           item-text="description"

app/src/components/map/WmsStyleControls.vue

@@ -1,23 +1,9 @@
 <template>
   <v-container fluid>
-    <v-row align="center">
-      <v-col cols="6">
-        <v-subheader>
-          Data properties
-          <info-dialog
-            v-if="select && select.dataInfo && wmsStyles.items.length === 1"
-            :infoSource="select.dataInfo"
-          />
-          <info-dialog
-            v-if="wmsStyles.dataInfo"
-            :infoSource="wmsStyles.dataInfo"
-          />
-        </v-subheader>
-      </v-col>
-
+    <v-row align="center"
+      v-if="wmsStyles.items.length > 1">
       <v-col cols="6">
         <v-select
-          v-if="wmsStyles.items.length > 1"
           v-model="select"
           :items="wmsStyles.items"
           item-text="description"
@@ -27,7 +13,11 @@
           return-object
           single-line
           @change="updateMap"
-        ></v-select>
+        >
+          <template #append-outer v-if="select && select.dataInfo">
+            <info-dialog :infoSource="select.dataInfo"/>
+          </template>
+        </v-select>
       </v-col>
     </v-row>
   </v-container>