Merge pull request #109 from openearth/fix/small-fixes-june

Fix/small fixes june

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>
@@ -43,17 +43,17 @@
             id="layer-options-dropdown"
             v-model="selectedLayer"
             :options="items(dataset.layerOptions)"
-            :label="`Configure ${dataset.name} layer`"
-            @change="updateRasterLayer"
+            :label="`Select ${dataset.name}`"
             class="data-set-controls__select-layer"
+            @change="updateRasterLayer"
           />
         </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" />
+          <layer-legend :dataset-id="dataset.id" class="data-set-controls__legend-bar" />
           <p>[{{ dataset.units }}]</p>
         </div>
       </li>
@@ -89,6 +89,9 @@
     watch: {
       activeRasterData: {
         handler(data) {
+          if (data.length === 0) {
+            return
+          }
           const datasets = this.getDatasets
           const meta = datasets[this.getActiveRasterLayer].metadata
           const raster = datasets[this.getActiveRasterLayer].raster

components/disclaimer-modal.vue

@@ -46,9 +46,6 @@
   import UiCheckbox from './ui-checkbox.vue'
   import UiButton from './ui-button.vue'
 
-  import userAgreements from '~/assets/docs/user-agreements.md'
-  import cookieAgreement from '~/assets/docs/cookie-agreements.md'
-
   export default {
     components: {
       UiCheckbox,
@@ -59,8 +56,8 @@
     data() {
       return {
         open: true,
-        userAgreements: userAgreements.html,
-        cookieAgreement: cookieAgreement.html,
+        userAgreements: '',
+        cookieAgreement: '',
         agree: false,
         cookie: false,
       }
@@ -72,6 +69,23 @@
         this.open = false
       }
     },
+    mounted() {
+      fetch('/docs/user-agreements.md')
+        .then(res => {
+          return res.text()
+        })
+        .then(response => {
+          this.userAgreements = response
+        })
+
+      fetch('/docs/cookie-agreements.md')
+        .then(res => {
+          return res.text()
+        })
+        .then(response => {
+          this.cookieAgreement = response
+        })
+    },
     validations: {
       cookie: {
         required,

components/graph-line.vue

@@ -330,12 +330,13 @@
 </script>
 
 <style>
-  .graph-line__aspect-ratio.image {
+  .graph-line__aspect-ratio--image {
     height: 1200px;
   }
 
-  .graph-image {
+  .graph-line__image {
     height: 1200px;
+    max-width: 100%;
     background-repeat: no-repeat;
     background-size: 50% 100%;
   }
@@ -349,10 +350,6 @@
     min-height: 400px;
   }
 
-  .graph-line__aspect-ratio--image {
-    height: 600px;
-  }
-
   .graph-line__chart {
     position: absolute;
     top: 0;
@@ -361,12 +358,6 @@
     height: 85%;
   }
 
-  .graph-line__image {
-    height: 600px;
-    background-repeat: no-repeat;
-    background-size: 50% 100%;
-  }
-
   .graph-line__collapsible .graph-line__caption {
     cursor: pointer;
   }

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>

components/sidebar/sidebar.vue

@@ -16,8 +16,9 @@
         <template v-slot:body>
           <vue-markdown
             class="markdown"
+            :watches="['source']"
             :source="aboutText"
-            :anchor-attributes="{ target: '_blank', rel: 'noopener' }"
+            :anchor-attributes="{ target: '_blank' }"
           />
         </template>
       </ui-tray>
@@ -56,7 +57,6 @@
   import UiButton from '../../components/ui-button'
   import UiTray from '../../components/ui-tray'
   import AccountDetails from '../../components/account-details'
-  import aboutText from '~/assets/docs/about-text.md'
 
   export default {
     components: {
@@ -69,12 +69,21 @@
     data: () => ({
       aboutOpen: false,
       accountOpen: false,
-      aboutText: aboutText.html,
+      aboutText: '',
     }),
     computed: {
       ...mapState('preferences', ['user']),
       ...mapGetters('map', ['getActiveTheme']),
     },
+    mounted() {
+      fetch('/docs/about-text.md')
+        .then(res => {
+          return res.text()
+        })
+        .then(response => {
+          this.aboutText = response
+        })
+    },
     methods: {
       login() {
         auth.signinRedirect({ state: window.location.href })

components/time-stamp.vue

@@ -6,8 +6,8 @@
     <time-slider
       :dates="activeRasterData.imageTimeseries"
       :set-time-index="dateIndex"
-      @update-timestep="getNewRasterLayer"
       start-at="end"
+      @update-timestep="getNewRasterLayer"
     >
       <template v-slot:backButton="{ back }">
         <ui-button-icon :disabled="getLoadingState" @click="back">

components/v-mapbox-components/v-mapbox-raster-layer.vue

@@ -51,7 +51,7 @@
 
             // Only add if tiles in source are not empty
             if (get('source.tiles[0]', newOptions)) {
-              this.map.addLayer(newOptions, 'background-features')
+              this.map.addLayer(newOptions, 'water-border')
             }
           }
         },
@@ -68,7 +68,7 @@
     mounted() {
       this.map = this.getMap()
       this.id = this.options.id
-      this.map.addLayer(this.options, 'background-features')
+      this.map.addLayer(this.options, 'water-border')
       this.map.on('click', event => {
         const bbox = {
           type: 'Point',

layouts/default.vue

@@ -14,11 +14,9 @@
         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"
+        map-style="mapbox://styles/global-data-viewer/cjtss3jfb05w71fmra13u4qqm"
         data-v-step="5"
+        @mb-load="mapLoaded = true"
       >
         <v-mapbox-navigation-control :options="{ visualizePitch: true }" position="bottom-right" />
         <v-mapbox-selected-point-layer v-if="mapLoaded" :geometry="geometry" />
@@ -44,15 +42,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"
-      @update-timestep="removeInfoText"
       class="default-layout__timestamp"
+      @update-timestep="removeInfoText"
     />
 
     <nuxt />
@@ -223,38 +221,6 @@
         'setActiveRasterLayer',
         'setGeographicalScope',
       ]),
-
-      setStyleLayers() {
-        // Wait for refs to be loaded
-        this.map = this.$refs.map.map
-        // Wait for map to be loaded and then add background labels and features
-        this.map.addLayer({
-          id: 'background-labels',
-          type: 'raster',
-          source: {
-            type: 'raster',
-            tiles: [
-              `https://api.mapbox.com/styles/v1/global-data-viewer/ckarrxvmx05rv1ips1l3vgluh/tiles/256/{z}/{x}/{y}@2x?access_token=${this.mapboxAccessToken}`,
-            ],
-            tileSize: 256,
-          },
-        })
-        this.map.addLayer({
-          id: 'background-features',
-          type: 'raster',
-          source: {
-            type: 'raster',
-            tiles: [
-              `https://api.mapbox.com/styles/v1/global-data-viewer/ckarrxnck9xjy1iqtqt0spezq/tiles/256/{z}/{x}/{y}@2x?access_token=${this.mapboxAccessToken}`,
-            ],
-            tileSize: 256,
-          },
-        })
-        this.map.on('styledata', () => {
-          // Wait on changed bakground before notifying all mapbox layers to be added
-          this.mapLoaded = true
-        })
-      },
       removeInfoText() {
         this.infoTextGeometry = {
           type: 'Point',

lib/mapbox/layers/get-raster-layer.js

@@ -10,15 +10,15 @@ const baseLayer = {
       mapbox.removeSource(this.id)
     }
     if (this.source.tiles.length > 0) {
-      mapbox.addLayer(this, 'background-features')
+      mapbox.addLayer(this, 'water-border')
     }
   },
   get(mapbox) {
     return this
   },
   add(mapbox) {
     if (this.source.tiles.length > 0) {
-      mapbox.addLayer(this, 'background-features')
+      mapbox.addLayer(this, 'water-border')
     }
   },
 }