Merge pull request #106 from openearth/feat/bed-416-configurable-vect…

…orlayers

Feat/bed 416 configurable vectorlayers

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>
@@ -35,26 +35,45 @@
             class="data-set-controls__tooltip-text markdown"
           />
         </div>
-        <div v-if="getActiveRasterLayer === dataset.id" class="data-set-controls__legend">
-          <layer-legend class="data-set-controls__legend-bar" :unit="dataset.units" />
+        <div
+          v-if="getActiveRasterLayer === dataset.id && dataset.layerOptions"
+          class="data-set-controls__options"
+        >
+          <ui-select
+            id="layer-options-dropdown"
+            v-model="selectedLayer"
+            :options="items(dataset.layerOptions)"
+            :label="`Configure ${dataset.name} layer`"
+            @change="updateRasterLayer"
+            class="data-set-controls__select-layer"
+          />
+        </div>
+        <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>
     </ul>
   </panel>
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+  import { mapGetters, mapActions } from 'vuex'
   import VueMarkdown from 'vue-markdown'
   import _ from 'lodash'
   import Icon from './icon'
   import LayerLegend from './layer-legend.vue'
   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,
@@ -64,8 +83,23 @@
     data() {
       return {
         hoverId: null,
+        selectedLayer: '',
       }
     },
+    watch: {
+      activeRasterData: {
+        handler(data) {
+          const datasets = this.getDatasets
+          const meta = datasets[this.getActiveRasterLayer].metadata
+          const raster = datasets[this.getActiveRasterLayer].raster
+          if (meta.layerOptions) {
+            this.selectedLayer = raster.band
+          }
+        },
+        deep: true,
+      },
+    },
+
     computed: {
       ...mapGetters('map', [
         'getActiveRasterLayer',
@@ -78,6 +112,7 @@
       },
     },
     methods: {
+      ...mapActions('map', ['retrieveRasterLayerByImageId']),
       onTooltipClick(id) {
         this.hoverId ? (this.hoverId = null) : (this.hoverId = id)
       },
@@ -99,6 +134,24 @@
       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,
+          options: { band: option.band },
+        })
+      },
+      items(options) {
+        // Add value to the array to use in the ui-select
+        return options.map(option => {
+          option.value = option.band
+          return option
+        })
+      },
     },
   }
 </script>
@@ -182,7 +235,8 @@
   }
 
   .data-set-controls__legend-bar {
-    flex: 0 0 100%;
+    flex: 1 1 auto;
+    margin-right: 0.5rem;
   }
 
   .data-set-controls__legend p {
@@ -191,4 +245,7 @@
   .data-set-controls__item-radio {
     width: 32px;
   }
+  .data-set-controls__select-layer {
+    margin-top: var(--spacing-small);
+  }
 </style>

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>

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,51 +14,52 @@
           />
         </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">
-        <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>
 </template>
 
 <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,
         required: true,
       },
@@ -70,20 +71,29 @@
         minValue: '',
         defaultMaxValue: '',
         maxValue: '',
+        dataset: {},
+        unit: '',
+        linearGradient: {},
       }
     },
     computed: {
-      ...mapGetters('map', ['activeRasterData', 'activeRasterLegendData']),
+      ...mapGetters('map', ['getDatasets', 'activeRasterData', 'activeRasterLegendData']),
     },
     mounted() {
-      const { min, max } = this.activeRasterLegendData
-      this.minValue = min.toString()
-      this.defaultMinValue = min.toString()
-      this.maxValue = max.toString()
-      this.defaultMaxValue = max.toString()
+      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', ['retrieveRasterLayerByImageId']),
+      updateMinMax() {
+        const { min, max } = _.get(this.dataset, 'raster')
+        this.minValue = min.toString()
+        this.maxValue = max.toString()
+        this.defaultMinValue = min.toString()
+        this.defaultMaxValue = max.toString()
+      },
       cancelEditRange() {
         this.minValue = this.defaultMinValue
         this.maxValue = this.defaultMaxValue
@@ -95,21 +105,19 @@
       },
       saveRange() {
         this.editingRange = false
-
         this.postUpdatedRange()
       },
       resetRange() {
         this.minValue = this.defaultMinValue
         this.maxValue = this.defaultMaxValue
       },
       postUpdatedRange() {
-        const { imageId } = this.activeRasterData
+        const { imageId } = this.dataset.raster
         const range = {
           min: this.minValue,
           max: this.maxValue,
         }
-
-        this.retrieveRasterLayerByImageId({ imageId, range })
+        this.retrieveRasterLayerByImageId({ imageId, options: { min: range.min, max: range.max } })
       },
     },
   }

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 }">

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 />
@@ -59,7 +61,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 +226,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({