From c5533cecd2da5ade2056b1c996229c2a64154e4e Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Fri, 5 Jun 2020 07:57:27 +0200
Subject: [PATCH 1/7] Update data-set-controls.vue

---
 components/data-set-controls.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index f95cfaa4..69dbc64e 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -20,7 +20,7 @@
               @click="toggleRasterLayer(dataset.id)"
             />
           </div>
-          <div v-if="dataset.toolTip" class="tooltip" @click="onTooltipClick(dataset.id)">
+          <div v-if="dataset.toolTip" @click="onTooltipClick(dataset.id)" class="tooltip">
             <icon name="info" />
           </div>
         </div>
@@ -30,6 +30,16 @@
             class="data-set-controls__tooltip-text markdown"
           />
         </div>
+        <div
+          v-if="getActiveRasterLayer === dataset.id && dataset.layerOptions"
+          class="data-set-controls__options"
+        >
+          <ui-select
+            id="layer-options-dropdown"
+            v-model="layerSelected"
+            :options="dataset.layerOptions"
+          />
+        </div>
         <div v-if="getActiveRasterLayer === dataset.id" class="data-set-controls__legend">
           <layer-legend class="data-set-controls__legend-bar" />
           <p>[{{ dataset.units }}]</p>
@@ -48,9 +58,10 @@
   import Panel from './panel'
   import UiRadio from './ui-radio'
   import UiToggle from './ui-toggle'
+  import UiSelect from './ui-select'
 
   export default {
-    components: { Icon, LayerLegend, Panel, UiRadio, UiToggle, VueMarkdown },
+    components: { Icon, LayerLegend, Panel, UiRadio, UiToggle, VueMarkdown, UiSelect },
     props: {
       datasets: {
         type: Array,
@@ -60,6 +71,7 @@
     data() {
       return {
         hoverId: null,
+        layerSelected: '',
       }
     },
     computed: {
@@ -72,6 +84,16 @@
       themeName() {
         return _.get(this.getActiveTheme, 'name') || 'All datasets'
       },
+      // layerSelected: {
+      //   get() {
+      //     console.log(this.activeRasterData)
+      //     return this.activeRasterData.layerOptions.find(data => data.selected === true)
+      //   },
+      //   set(val) {
+      //     console.log(val)
+      //     this.dataset
+      //   },
+      // },
     },
     methods: {
       onTooltipClick(id) {

From 2edef6c4edaf9bc635b07e04bcaeca2ae601bfb3 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Fri, 5 Jun 2020 12:48:03 +0200
Subject: [PATCH 2/7] configurable layers by select

---
 components/data-set-controls.vue | 60 +++++++++++++++++++++++---------
 components/graph-line.vue        |  8 ++---
 components/layer-legend.vue      | 17 +++++----
 store/map/index.js               |  7 ++--
 4 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index ddc46a09..d0b8d600 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -36,12 +36,16 @@
         >
           <ui-select
             id="layer-options-dropdown"
-            v-model="layerSelected"
-            :options="dataset.layerOptions"
+            v-model="selectedLayer"
+            @change="updateRasterLayer"
+            :options="optionItems(dataset.layerOptions)"
+            :label="`Configure ${dataset.name} layer`"
+            class="data-set-controls__select-layer"
           />
         </div>
         <div v-if="getActiveRasterLayer === dataset.id" class="data-set-controls__legend">
-          <layer-legend class="data-set-controls__legend-bar" :unit="dataset.units" />
+          <layer-legend class="data-set-controls__legend-bar" />
+          <p>[{{ dataset.units }}]</p>
         </div>
       </li>
     </ul>
@@ -49,7 +53,7 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+  import { mapGetters, mapActions } from 'vuex'
   import VueMarkdown from 'vue-markdown'
   import _ from 'lodash'
   import Icon from './icon'
@@ -70,9 +74,22 @@
     data() {
       return {
         hoverId: null,
-        layerSelected: '',
+        selectedLayer: '',
       }
     },
+    watch: {
+      activeRasterData: {
+        handler(data) {
+          const datasets = this.getDatasets
+          const raster = datasets[this.getActiveRasterLayer]
+          if (raster.layerOptions) {
+            this.selectedLayer = raster.name
+          }
+        },
+        deep: true,
+      },
+    },
+
     computed: {
       ...mapGetters('map', [
         'getActiveRasterLayer',
@@ -83,18 +100,9 @@
       themeName() {
         return _.get(this.getActiveTheme, 'name') || 'All datasets'
       },
-      // layerSelected: {
-      //   get() {
-      //     console.log(this.activeRasterData)
-      //     return this.activeRasterData.layerOptions.find(data => data.selected === true)
-      //   },
-      //   set(val) {
-      //     console.log(val)
-      //     this.dataset
-      //   },
-      // },
     },
     methods: {
+      ...mapActions('map', ['retrieveRasterLayerByImageId']),
       onTooltipClick(id) {
         this.hoverId ? (this.hoverId = null) : (this.hoverId = id)
       },
@@ -116,6 +124,22 @@
       checkRaster(id) {
         return _.has(this.getDatasets, `${id}.raster`)
       },
+      updateRasterLayer(value) {
+        const datasets = this.getDatasets
+        const raster = datasets[this.getActiveRasterLayer]
+        const option = raster.metadata.layerOptions.find(opt => {
+          return opt.band === this.selectedLayer
+        })
+        this.retrieveRasterLayerByImageId({ imageId: raster.raster.imageId, band: option.band })
+      },
+      optionItems(layers) {
+        // Add value to the array to use in the ui-select
+        const options = layers.map(layer => {
+          layer.value = layer.band
+          return layer
+        })
+        return options
+      },
     },
   }
 </script>
@@ -199,7 +223,8 @@
   }
 
   .data-set-controls__legend-bar {
-    flex: 0 0 100%;
+    flex: 1 1 auto;
+    margin-right: 0.5rem;
   }
 
   .data-set-controls__legend p {
@@ -208,4 +233,7 @@
   .data-set-controls__item-radio {
     width: 32px;
   }
+  .data-set-controls__select-layer {
+    margin-top: var(--spacing-small);
+  }
 </style>
diff --git a/components/graph-line.vue b/components/graph-line.vue
index a0816b0e..cb61eaa2 100644
--- a/components/graph-line.vue
+++ b/components/graph-line.vue
@@ -8,13 +8,13 @@
   >
     <ui-button-icon
       v-if="collapsible"
+      @click="toggleCollapsedDataset(parameterId)"
       class="graph-line__toggle"
       label="Toggle"
-      @click="toggleCollapsedDataset(parameterId)"
     >
       <icon name="action-chevron-down" />
     </ui-button-icon>
-    <figcaption class="graph-line__caption strong" @click="toggleCollapsedDataset(parameterId)">
+    <figcaption @click="toggleCollapsedDataset(parameterId)" class="graph-line__caption strong">
       {{ title }}
     </figcaption>
     <div v-if="!isCollapsed" :class="{ image: type === 'images' }" class="graph-line__aspect-ratio">
@@ -28,17 +28,17 @@
       <img v-if="type === 'images'" :src="imageUrl" class="graph-line__chart graph-image" />
       <ui-button
         v-if="user && type !== 'images'"
+        @click="downloadJson"
         class="graph-line__download"
         kind="secondary"
-        @click="downloadJson"
       >
         Download data
       </ui-button>
       <ui-button
         v-if="user && type === 'images'"
+        @click="downloadImage"
         class="graph-line__download"
         kind="secondary"
-        @click="downloadImage"
       >
         Download image
       </ui-button>
diff --git a/components/layer-legend.vue b/components/layer-legend.vue
index 20e14542..550eab63 100644
--- a/components/layer-legend.vue
+++ b/components/layer-legend.vue
@@ -18,33 +18,33 @@
     </svg>
     <div class="layer-legend__range unselectable">
       <div v-if="!editingRange" class="layer-legend__range-min">
-        <ui-button kind="quiet" @click="editRange">{{ minValue }}{{ unit }}</ui-button>
+        <ui-button @click="editRange" kind="quiet">{{ minValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-min layer-legend__range-min--editing">
         <ui-text-input
           id="range-min"
           v-model="minValue"
-          type="text"
           :label="`Min (${unit})`"
+          type="text"
           placeholder="Min value"
         />
       </div>
-      <div v-if="!editingRange" class="layer-legend__range-max" @click="editRange">
-        <ui-button kind="quiet" @click="editRange">{{ maxValue }}{{ unit }}</ui-button>
+      <div v-if="!editingRange" @click="editRange" class="layer-legend__range-max">
+        <ui-button @click="editRange" kind="quiet">{{ maxValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-max layer-legend__range-max--editing">
         <ui-text-input
           id="range-max"
           v-model="maxValue"
-          type="text"
           :label="`Max (${unit})`"
+          type="text"
           placeholder="Max value"
         />
       </div>
       <div v-if="editingRange" class="layer-legend__range-buttons">
-        <ui-button kind="quiet" @click="cancelEditRange">Cancel</ui-button>
-        <ui-button kind="secondary" @click="resetRange">Reset</ui-button>
-        <ui-button kind="primary" @click="saveRange">Save</ui-button>
+        <ui-button @click="cancelEditRange" kind="quiet">Cancel</ui-button>
+        <ui-button @click="resetRange" kind="secondary">Reset</ui-button>
+        <ui-button @click="saveRange" kind="primary">Save</ui-button>
       </div>
     </div>
   </div>
@@ -108,7 +108,6 @@
           min: this.minValue,
           max: this.maxValue,
         }
-
         this.retrieveRasterLayerByImageId({ imageId, range })
       },
     },
diff --git a/store/map/index.js b/store/map/index.js
index c04e1a9c..29142a40 100644
--- a/store/map/index.js
+++ b/store/map/index.js
@@ -132,11 +132,12 @@ export const actions = {
     })
   },
 
-  retrieveRasterLayerByImageId({ commit, state, getters }, { imageId, range }) {
+  retrieveRasterLayerByImageId({ commit, state, getters }, options) {
     commit('setLoadingRasterLayers', true)
+    const imageId = options.imageId
     const dataset = getters.getActiveRasterLayer
-    const params = range ? `?min=${range.min}&max=${range.max}` : ''
-
+    let params = options.range ? `?min=${options.range.min}&max=${options.range.max}` : ''
+    params += options.band ? `?band=${options.band}` : ''
     // Retrieve complete new rasterLayer by imageId and dataset
     return getFromApi(`datasets/${dataset}/${imageId}${params}`).then(val => {
       commit('updateRasterLayer', { dataset, rasterLayer: val })

From 47173d38fd2ddc954c09d77630cb0e4078f0e329 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Fri, 5 Jun 2020 16:38:37 +0200
Subject: [PATCH 3/7] lint fix

---
 components/data-set-controls.vue |  4 ++--
 components/graph-line.vue        |  8 ++++----
 components/layer-legend.vue      | 12 ++++++------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index 8779dfe1..614449a5 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -24,7 +24,7 @@
               @click="toggleRasterLayer(dataset.id)"
             />
           </div>
-          <div v-if="dataset.toolTip" @click="onTooltipClick(dataset.id)" class="tooltip">
+          <div v-if="dataset.toolTip" class="tooltip" @click="onTooltipClick(dataset.id)">
             <icon name="info" />
           </div>
         </div>
@@ -42,10 +42,10 @@
           <ui-select
             id="layer-options-dropdown"
             v-model="selectedLayer"
-            @change="updateRasterLayer"
             :options="optionItems(dataset.layerOptions)"
             :label="`Configure ${dataset.name} layer`"
             class="data-set-controls__select-layer"
+            @change="updateRasterLayer"
           />
         </div>
         <div v-if="getActiveRasterLayer === dataset.id" class="data-set-controls__legend">
diff --git a/components/graph-line.vue b/components/graph-line.vue
index f85fd4d8..6da05d07 100644
--- a/components/graph-line.vue
+++ b/components/graph-line.vue
@@ -8,13 +8,13 @@
   >
     <ui-button-icon
       v-if="collapsible"
-      @click="toggleCollapsedDataset(parameterId)"
       class="graph-line__toggle"
       label="Toggle"
+      @click="toggleCollapsedDataset(parameterId)"
     >
       <icon name="action-chevron-down" />
     </ui-button-icon>
-    <figcaption @click="toggleCollapsedDataset(parameterId)" class="graph-line__caption strong">
+    <figcaption class="graph-line__caption strong" @click="toggleCollapsedDataset(parameterId)">
       {{ title }}
     </figcaption>
     <div
@@ -32,17 +32,17 @@
       <img v-else :src="imageUrl" class="graph-line__image" />
       <ui-button
         v-if="user && (isLine || isScatter)"
-        @click="downloadJson"
         class="graph-line__download"
         kind="secondary"
+        @click="downloadJson"
       >
         Download data
       </ui-button>
       <ui-button
         v-if="user && isImage"
-        @click="downloadImage"
         class="graph-line__download"
         kind="secondary"
+        @click="downloadImage"
       >
         Download image
       </ui-button>
diff --git a/components/layer-legend.vue b/components/layer-legend.vue
index 550eab63..35101850 100644
--- a/components/layer-legend.vue
+++ b/components/layer-legend.vue
@@ -18,7 +18,7 @@
     </svg>
     <div class="layer-legend__range unselectable">
       <div v-if="!editingRange" class="layer-legend__range-min">
-        <ui-button @click="editRange" kind="quiet">{{ minValue }}{{ unit }}</ui-button>
+        <ui-button kind="quiet" @click="editRange">{{ minValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-min layer-legend__range-min--editing">
         <ui-text-input
@@ -29,8 +29,8 @@
           placeholder="Min value"
         />
       </div>
-      <div v-if="!editingRange" @click="editRange" class="layer-legend__range-max">
-        <ui-button @click="editRange" kind="quiet">{{ maxValue }}{{ unit }}</ui-button>
+      <div v-if="!editingRange" class="layer-legend__range-max" @click="editRange">
+        <ui-button kind="quiet" @click="editRange">{{ maxValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-max layer-legend__range-max--editing">
         <ui-text-input
@@ -42,9 +42,9 @@
         />
       </div>
       <div v-if="editingRange" class="layer-legend__range-buttons">
-        <ui-button @click="cancelEditRange" kind="quiet">Cancel</ui-button>
-        <ui-button @click="resetRange" kind="secondary">Reset</ui-button>
-        <ui-button @click="saveRange" kind="primary">Save</ui-button>
+        <ui-button kind="quiet" @click="cancelEditRange">Cancel</ui-button>
+        <ui-button kind="secondary" @click="resetRange">Reset</ui-button>
+        <ui-button kind="primary" @click="saveRange">Save</ui-button>
       </div>
     </div>
   </div>

From 853df07f48ecfc9682cd02499de0012c24070c64 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 9 Jun 2020 08:25:12 +0200
Subject: [PATCH 4/7] fix setting legend and initial layer selected

---
 components/data-set-controls.vue |  7 ++++---
 components/layer-legend.vue      | 23 +++++++++++++++++------
 layouts/default.vue              |  3 +--
 store/map/index.js               |  4 ++--
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index 614449a5..b880301b 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -86,9 +86,10 @@
       activeRasterData: {
         handler(data) {
           const datasets = this.getDatasets
-          const raster = datasets[this.getActiveRasterLayer]
-          if (raster.layerOptions) {
-            this.selectedLayer = raster.name
+          const meta = datasets[this.getActiveRasterLayer].metadata
+          const raster = datasets[this.getActiveRasterLayer].raster
+          if (meta.layerOptions) {
+            this.selectedLayer = raster.band
           }
         },
         deep: true,
diff --git a/components/layer-legend.vue b/components/layer-legend.vue
index 35101850..af942b8f 100644
--- a/components/layer-legend.vue
+++ b/components/layer-legend.vue
@@ -60,7 +60,7 @@
     props: {
       unit: {
         type: String,
-        required: true,
+        default: () => '',
       },
     },
     data() {
@@ -75,15 +75,26 @@
     computed: {
       ...mapGetters('map', ['activeRasterData', 'activeRasterLegendData']),
     },
+    watch: {
+      activeRasterLegendData: {
+        handler() {
+          this.updateMinMax()
+        },
+        deep: true,
+      },
+    },
     mounted() {
-      const { min, max } = this.activeRasterLegendData
-      this.minValue = min.toString()
-      this.defaultMinValue = min.toString()
-      this.maxValue = max.toString()
-      this.defaultMaxValue = max.toString()
+      this.updateMinMax()
     },
     methods: {
       ...mapActions('map', ['retrieveRasterLayerByImageId']),
+      updateMinMax() {
+        const { min, max } = this.activeRasterLegendData
+        this.minValue = min.toString()
+        this.defaultMinValue = min.toString()
+        this.maxValue = max.toString()
+        this.defaultMaxValue = max.toString()
+      },
       cancelEditRange() {
         this.minValue = this.defaultMinValue
         this.maxValue = this.defaultMaxValue
diff --git a/layouts/default.vue b/layouts/default.vue
index 780f0239..631c574d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -59,7 +59,7 @@
 
     <disclaimer-modal />
 
-    <v-tour name="introduction" :steps="tourSteps" :options="tourConfig"></v-tour>
+    <v-tour :steps="tourSteps" :options="tourConfig" name="introduction"></v-tour>
   </div>
 </template>
 
@@ -224,7 +224,6 @@
 
       setStyleLayers() {
         // Wait for refs to be loaded
-        console.log(this.$refs, _.get(this.$refs, 'map.map'))
         this.map = this.$refs.map.map
         // Wait for map to be loaded and then add background labels and features
         this.map.addLayer({
diff --git a/store/map/index.js b/store/map/index.js
index 29142a40..3813e633 100644
--- a/store/map/index.js
+++ b/store/map/index.js
@@ -140,7 +140,7 @@ export const actions = {
     params += options.band ? `?band=${options.band}` : ''
     // Retrieve complete new rasterLayer by imageId and dataset
     return getFromApi(`datasets/${dataset}/${imageId}${params}`).then(val => {
-      commit('updateRasterLayer', { dataset, rasterLayer: val })
+      commit('updateRasterLayer', { dataset, rasterLayer: val.rasterLayer })
       commit('setLoadingRasterLayers', false)
     })
   },
@@ -293,7 +293,7 @@ export const getters = {
     }
     return _.get(datasets, `${activeRasterLayerId}.raster`)
   },
-  activeRasterLegendData({ datasets, activeRasterLayerId, activeDatasets }) {
+  activeRasterLegendData({ datasets, activeRasterLayerId }) {
     // Return the active raster data tiles (if not defined, return [])
     if (activeRasterLayerId === '' || activeRasterLayerId === null) {
       return []

From c340fb1eae75e2fe8a2dab6eb0f640989aa6fd88 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Tue, 9 Jun 2020 08:41:46 +0200
Subject: [PATCH 5/7] correction in band retrieval

---
 store/map/index.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/store/map/index.js b/store/map/index.js
index 3813e633..f848fb9c 100644
--- a/store/map/index.js
+++ b/store/map/index.js
@@ -137,7 +137,14 @@ export const actions = {
     const imageId = options.imageId
     const dataset = getters.getActiveRasterLayer
     let params = options.range ? `?min=${options.range.min}&max=${options.range.max}` : ''
-    params += options.band ? `?band=${options.band}` : ''
+
+    // If band has changed, use band from options. If band is not defined use already set band
+    if (options.band) {
+      params += `?band=${options.band}`
+    } else if (_.get(getters, 'activeRasterData.band')) {
+      params += `?band=${_.get(getters, 'activeRasterData.band')}`
+    }
+    console.log(params)
     // Retrieve complete new rasterLayer by imageId and dataset
     return getFromApi(`datasets/${dataset}/${imageId}${params}`).then(val => {
       commit('updateRasterLayer', { dataset, rasterLayer: val.rasterLayer })

From f5a26c26a10ec9d5d72a4b76cc647e41dad67e83 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Wed, 10 Jun 2020 10:07:08 +0200
Subject: [PATCH 6/7] review update 1

---
 components/data-set-controls.vue | 19 +++++++++----------
 components/layer-legend.vue      | 16 ++++++++--------
 components/time-stamp.vue        |  8 ++++----
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index b880301b..7dc5190c 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -24,7 +24,7 @@
               @click="toggleRasterLayer(dataset.id)"
             />
           </div>
-          <div v-if="dataset.toolTip" class="tooltip" @click="onTooltipClick(dataset.id)">
+          <div v-if="dataset.toolTip" @click="onTooltipClick(dataset.id)" class="tooltip">
             <icon name="info" />
           </div>
         </div>
@@ -42,10 +42,10 @@
           <ui-select
             id="layer-options-dropdown"
             v-model="selectedLayer"
-            :options="optionItems(dataset.layerOptions)"
+            :options="options(dataset.layerOptions)"
             :label="`Configure ${dataset.name} layer`"
-            class="data-set-controls__select-layer"
             @change="updateRasterLayer"
+            class="data-set-controls__select-layer"
           />
         </div>
         <div v-if="getActiveRasterLayer === dataset.id" class="data-set-controls__legend">
@@ -108,7 +108,7 @@
       },
     },
     methods: {
-      ...mapActions('map', ['retrieveRasterLayerByImageId']),
+      ...mapActions('map', ['retrieveRasterLayer']),
       onTooltipClick(id) {
         this.hoverId ? (this.hoverId = null) : (this.hoverId = id)
       },
@@ -136,15 +136,14 @@
         const option = raster.metadata.layerOptions.find(opt => {
           return opt.band === this.selectedLayer
         })
-        this.retrieveRasterLayerByImageId({ imageId: raster.raster.imageId, band: option.band })
+        this.retrieveRasterLayer({ imageId: raster.raster.imageId, band: option.band })
       },
-      optionItems(layers) {
+      items(options) {
         // Add value to the array to use in the ui-select
-        const options = layers.map(layer => {
-          layer.value = layer.band
-          return layer
+        return options.map(option => {
+          option.value = option.band
+          return option
         })
-        return options
       },
     },
   }
diff --git a/components/layer-legend.vue b/components/layer-legend.vue
index af942b8f..3a2634eb 100644
--- a/components/layer-legend.vue
+++ b/components/layer-legend.vue
@@ -18,7 +18,7 @@
     </svg>
     <div class="layer-legend__range unselectable">
       <div v-if="!editingRange" class="layer-legend__range-min">
-        <ui-button kind="quiet" @click="editRange">{{ minValue }}{{ unit }}</ui-button>
+        <ui-button @click="editRange" kind="quiet">{{ minValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-min layer-legend__range-min--editing">
         <ui-text-input
@@ -29,8 +29,8 @@
           placeholder="Min value"
         />
       </div>
-      <div v-if="!editingRange" class="layer-legend__range-max" @click="editRange">
-        <ui-button kind="quiet" @click="editRange">{{ maxValue }}{{ unit }}</ui-button>
+      <div v-if="!editingRange" @click="editRange" class="layer-legend__range-max">
+        <ui-button @click="editRange" kind="quiet">{{ maxValue }}{{ unit }}</ui-button>
       </div>
       <div v-else class="layer-legend__range-max layer-legend__range-max--editing">
         <ui-text-input
@@ -42,9 +42,9 @@
         />
       </div>
       <div v-if="editingRange" class="layer-legend__range-buttons">
-        <ui-button kind="quiet" @click="cancelEditRange">Cancel</ui-button>
-        <ui-button kind="secondary" @click="resetRange">Reset</ui-button>
-        <ui-button kind="primary" @click="saveRange">Save</ui-button>
+        <ui-button @click="cancelEditRange" kind="quiet">Cancel</ui-button>
+        <ui-button @click="resetRange" kind="secondary">Reset</ui-button>
+        <ui-button @click="saveRange" kind="primary">Save</ui-button>
       </div>
     </div>
   </div>
@@ -87,7 +87,7 @@
       this.updateMinMax()
     },
     methods: {
-      ...mapActions('map', ['retrieveRasterLayerByImageId']),
+      ...mapActions('map', ['retrieveRasterLayer']),
       updateMinMax() {
         const { min, max } = this.activeRasterLegendData
         this.minValue = min.toString()
@@ -119,7 +119,7 @@
           min: this.minValue,
           max: this.maxValue,
         }
-        this.retrieveRasterLayerByImageId({ imageId, range })
+        this.retrieveRasterLayer({ imageId, range })
       },
     },
   }
diff --git a/components/time-stamp.vue b/components/time-stamp.vue
index 5942c322..929e0541 100644
--- a/components/time-stamp.vue
+++ b/components/time-stamp.vue
@@ -6,8 +6,8 @@
     <time-slider
       :dates="activeRasterData.imageTimeseries"
       :set-time-index="dateIndex"
-      start-at="end"
       @update-timestep="getNewRasterLayer"
+      start-at="end"
     >
       <template v-slot:backButton="{ back }">
         <ui-button-icon :disabled="getLoadingState" @click="back">
@@ -18,9 +18,9 @@
         <ui-select
           id="timeslider-dropdown"
           v-model="timestamp"
-          label="Select a timestamp"
           :options="timeseriesItems"
           :disabled="loadingRasterLayers"
+          label="Select a timestamp"
         />
       </template>
       <template v-slot:forwardButton="{ forward }">
@@ -97,12 +97,12 @@
       },
     },
     methods: {
-      ...mapActions('map', ['retrieveRasterLayerByImageId']),
+      ...mapActions('map', ['retrieveRasterLayer']),
       getNewRasterLayer(serie) {
         if (this.getActiveRasterLayer) {
           const imageId = _.get(serie, 'imageId')
           // For each update of the timeslider adjust the raster layer to the new time
-          this.retrieveRasterLayerByImageId({ imageId })
+          this.retrieveRasterLayer({ imageId })
           this.$emit('update-timestep')
         }
       },

From 6e7912992fe5f414410a09b10cbac34236bc48b7 Mon Sep 17 00:00:00 2001
From: CindyvdVries <cindyvdvries@gmail.com>
Date: Thu, 11 Jun 2020 11:11:15 +0200
Subject: [PATCH 7/7] fix retrieve rastr by imageid in min max

---
 components/data-set-controls.vue | 17 +++++++++-----
 components/graph-line.vue        |  8 +++----
 components/layer-legend.vue      | 38 +++++++++++++++-----------------
 components/time-stamp.vue        |  4 ++--
 layouts/default.vue              |  8 ++++---
 store/map/index.js               | 25 ++++++++++++---------
 6 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/components/data-set-controls.vue b/components/data-set-controls.vue
index 7dc5190c..45cd71c5 100644
--- a/components/data-set-controls.vue
+++ b/components/data-set-controls.vue
@@ -42,14 +42,18 @@
           <ui-select
             id="layer-options-dropdown"
             v-model="selectedLayer"
-            :options="options(dataset.layerOptions)"
+            :options="items(dataset.layerOptions)"
             :label="`Configure ${dataset.name} layer`"
             @change="updateRasterLayer"
             class="data-set-controls__select-layer"
           />
         </div>
-        <div v-if="getActiveRasterLayer === dataset.id" class="data-set-controls__legend">
-          <layer-legend class="data-set-controls__legend-bar" />
+        <div
+          v-if="checkRaster(dataset.id)"
+          v-show="getActiveRasterLayer === dataset.id"
+          class="data-set-controls__legend"
+        >
+          <layer-legend :datasetId="dataset.id" class="data-set-controls__legend-bar" />
           <p>[{{ dataset.units }}]</p>
         </div>
       </li>
@@ -108,7 +112,7 @@
       },
     },
     methods: {
-      ...mapActions('map', ['retrieveRasterLayer']),
+      ...mapActions('map', ['retrieveRasterLayerByImageId']),
       onTooltipClick(id) {
         this.hoverId ? (this.hoverId = null) : (this.hoverId = id)
       },
@@ -136,7 +140,10 @@
         const option = raster.metadata.layerOptions.find(opt => {
           return opt.band === this.selectedLayer
         })
-        this.retrieveRasterLayer({ imageId: raster.raster.imageId, band: option.band })
+        this.retrieveRasterLayerByImageId({
+          imageId: raster.raster.imageId,
+          options: { band: option.band },
+        })
       },
       items(options) {
         // Add value to the array to use in the ui-select
diff --git a/components/graph-line.vue b/components/graph-line.vue
index d203d582..b8c54010 100644
--- a/components/graph-line.vue
+++ b/components/graph-line.vue
@@ -8,13 +8,13 @@
   >
     <ui-button-icon
       v-if="collapsible"
-      @click="toggleCollapsedDataset(parameterId)"
       class="graph-line__toggle"
       label="Toggle"
+      @click="toggleCollapsedDataset(parameterId)"
     >
       <icon name="action-chevron-down" />
     </ui-button-icon>
-    <figcaption @click="toggleCollapsedDataset(parameterId)" class="graph-line__caption strong">
+    <figcaption class="graph-line__caption strong" @click="toggleCollapsedDataset(parameterId)">
       {{ title }}
     </figcaption>
     <div
@@ -32,17 +32,17 @@
       <img v-else :src="imageUrl" class="graph-line__image" />
       <ui-button
         v-if="user && (isLine || isScatter)"
-        @click="downloadJson"
         class="graph-line__download"
         kind="secondary"
+        @click="downloadJson"
       >
         Download data
       </ui-button>
       <ui-button
         v-if="user && isImage"
-        @click="downloadImage"
         class="graph-line__download"
         kind="secondary"
+        @click="downloadImage"
       >
         Download image
       </ui-button>
diff --git a/components/layer-legend.vue b/components/layer-legend.vue
index 3a2634eb..ec8a71ed 100644
--- a/components/layer-legend.vue
+++ b/components/layer-legend.vue
@@ -2,9 +2,9 @@
   <div class="layer-legend">
     <svg viewBox="0 0 100 5">
       <defs>
-        <linearGradient id="gradient" x1="0" x2="1" y1="0" y2="0">
+        <linearGradient :id="`gradient-${datasetId}`" x1="0" x2="1" y1="0" y2="0">
           <stop
-            v-for="(stop, index) in activeRasterLegendData.linearGradient"
+            v-for="(stop, index) in linearGradient"
             :key="index"
             :offset="stop.offset"
             :style="{
@@ -14,7 +14,7 @@
           />
         </linearGradient>
       </defs>
-      <rect width="100" height="10" x="0" y="0" fill="url('#gradient')" />
+      <rect :fill="`url(#gradient-${datasetId})`" width="100" height="10" x="0" y="0" />
     </svg>
     <div class="layer-legend__range unselectable">
       <div v-if="!editingRange" class="layer-legend__range-min">
@@ -52,15 +52,16 @@
 
 <script>
   import { mapActions, mapGetters } from 'vuex'
+  import _ from 'lodash'
   import UiButton from '~/components/ui-button'
   import UiTextInput from '~/components/ui-text-input'
 
   export default {
     components: { UiButton, UiTextInput },
     props: {
-      unit: {
+      datasetId: {
         type: String,
-        default: () => '',
+        required: true,
       },
     },
     data() {
@@ -70,29 +71,27 @@
         minValue: '',
         defaultMaxValue: '',
         maxValue: '',
+        dataset: {},
+        unit: '',
+        linearGradient: {},
       }
     },
     computed: {
-      ...mapGetters('map', ['activeRasterData', 'activeRasterLegendData']),
-    },
-    watch: {
-      activeRasterLegendData: {
-        handler() {
-          this.updateMinMax()
-        },
-        deep: true,
-      },
+      ...mapGetters('map', ['getDatasets', 'activeRasterData', 'activeRasterLegendData']),
     },
     mounted() {
+      this.dataset = this.getDatasets[this.datasetId]
+      this.unit = _.get(this.dataset, 'metadata.units')
       this.updateMinMax()
+      this.linearGradient = _.get(this.dataset, 'raster.linearGradient')
     },
     methods: {
-      ...mapActions('map', ['retrieveRasterLayer']),
+      ...mapActions('map', ['retrieveRasterLayerByImageId']),
       updateMinMax() {
-        const { min, max } = this.activeRasterLegendData
+        const { min, max } = _.get(this.dataset, 'raster')
         this.minValue = min.toString()
-        this.defaultMinValue = min.toString()
         this.maxValue = max.toString()
+        this.defaultMinValue = min.toString()
         this.defaultMaxValue = max.toString()
       },
       cancelEditRange() {
@@ -106,7 +105,6 @@
       },
       saveRange() {
         this.editingRange = false
-
         this.postUpdatedRange()
       },
       resetRange() {
@@ -114,12 +112,12 @@
         this.maxValue = this.defaultMaxValue
       },
       postUpdatedRange() {
-        const { imageId } = this.activeRasterData
+        const { imageId } = this.dataset.raster
         const range = {
           min: this.minValue,
           max: this.maxValue,
         }
-        this.retrieveRasterLayer({ imageId, range })
+        this.retrieveRasterLayerByImageId({ imageId, options: { min: range.min, max: range.max } })
       },
     },
   }
diff --git a/components/time-stamp.vue b/components/time-stamp.vue
index 929e0541..17ff7812 100644
--- a/components/time-stamp.vue
+++ b/components/time-stamp.vue
@@ -97,12 +97,12 @@
       },
     },
     methods: {
-      ...mapActions('map', ['retrieveRasterLayer']),
+      ...mapActions('map', ['retrieveRasterLayerByImageId']),
       getNewRasterLayer(serie) {
         if (this.getActiveRasterLayer) {
           const imageId = _.get(serie, 'imageId')
           // For each update of the timeslider adjust the raster layer to the new time
-          this.retrieveRasterLayer({ imageId })
+          this.retrieveRasterLayerByImageId({ imageId })
           this.$emit('update-timestep')
         }
       },
diff --git a/layouts/default.vue b/layouts/default.vue
index 631c574d..ffe0346b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,9 +14,11 @@
         ref="map"
         :access-token="mapboxAccessToken"
         :preserve-drawing-buffer="true"
+        @mb-load="setStyleLayers"
+        :zoom="1"
+        :center="[0, 0]"
         map-style="mapbox://styles/global-data-viewer/ckaqyfcc63q1w1io3l3bpd50h?fresh=true"
         data-v-step="5"
-        @mb-load="setStyleLayers"
       >
         <v-mapbox-navigation-control :options="{ visualizePitch: true }" position="bottom-right" />
         <v-mapbox-selected-point-layer v-if="mapLoaded" :geometry="geometry" />
@@ -42,15 +44,15 @@
 
     <data-set-controls
       :datasets="datasetsInActiveTheme"
-      class="default-layout__data-set-controls"
       @toggle-location-dataset="toggleLocationDataset"
       @toggle-raster-layer="toggleRasterLayer"
+      class="default-layout__data-set-controls"
     />
 
     <time-stamp
       v-show="activeTimestamp !== '' && getActiveRasterLayer"
-      class="default-layout__timestamp"
       @update-timestep="removeInfoText"
+      class="default-layout__timestamp"
     />
 
     <nuxt />
diff --git a/store/map/index.js b/store/map/index.js
index f848fb9c..79d08a21 100644
--- a/store/map/index.js
+++ b/store/map/index.js
@@ -132,21 +132,26 @@ export const actions = {
     })
   },
 
-  retrieveRasterLayerByImageId({ commit, state, getters }, options) {
+  retrieveRasterLayerByImageId({ commit, state, getters }, { imageId, options }) {
+    options = options || {}
     commit('setLoadingRasterLayers', true)
-    const imageId = options.imageId
     const dataset = getters.getActiveRasterLayer
-    let params = options.range ? `?min=${options.range.min}&max=${options.range.max}` : ''
-
     // If band has changed, use band from options. If band is not defined use already set band
-    if (options.band) {
-      params += `?band=${options.band}`
-    } else if (_.get(getters, 'activeRasterData.band')) {
-      params += `?band=${_.get(getters, 'activeRasterData.band')}`
+    if (!_.get(options, 'band') && _.get(getters, 'activeRasterData.band')) {
+      options.band = _.get(getters, 'activeRasterData.band')
+    }
+
+    if (!_.get(options, 'min') && _.get(getters, 'activeRasterData.min')) {
+      options.min = _.get(getters, 'activeRasterData.min')
+    }
+
+    if (!_.get(options, 'max') && _.get(getters, 'activeRasterData.max')) {
+      options.max = _.get(getters, 'activeRasterData.max')
     }
-    console.log(params)
+    const params = new URLSearchParams(options)
     // Retrieve complete new rasterLayer by imageId and dataset
-    return getFromApi(`datasets/${dataset}/${imageId}${params}`).then(val => {
+    return getFromApi(`datasets/${dataset}/${imageId}?${params}`).then(val => {
+      // If the range is set manually we don't want to update the default raster laayer
       commit('updateRasterLayer', { dataset, rasterLayer: val.rasterLayer })
       commit('setLoadingRasterLayers', false)
     })