@kalisio/kdk 1.3.5 → 1.4.2

package/lib/map/client/components/catalog/KLayersSelector.vue

@@ -1,62 +1,59 @@
 <template>
-  <q-list dense>
+  <div>
     <slot name="header" />
     <div v-if="layers.length > 0">
       <template v-for="layer in layers">
-        <q-item
-          :id="layer.name"
-          :key="layer.name"
-          :active="layer.isVisible"
-          :disable="layer.isDisabled"
-          :clickable="!layer.isDisabled"
-          active-class="text-accent text-weight-bolder"
-          class="cursor-pointer"
-          dense>
-          <q-item-section avatar @click="onLayerClicked(layer)">
-            <q-icon v-if="!layer.iconUrl" :name="layerIcon(layer)"></q-icon>
-            <img v-else :src="layer.iconUrl" width="32" />
-            <!-- badge -->
+        <div :key="getId(layer)" :id="getId(layer)" class="row items-center justify-between q-pl-md q-pr-sm no-span">
+          <!-- Layer name -->
+          <div v-bind:class="{
+            'text-primary text-weight-bold': layer.isVisible,
+            'text-grey-6': layer.isDisabled
+          }">
+            {{ layer.label || layer.name }}
             <q-badge v-if="layer.badge" v-bind="layer.badge">
               <q-icon v-if="layer.badge.icon" v-bind="layer.badge.icon" />
             </q-badge>
-          </q-item-section>
-          <!-- item label -->
-          <q-item-section @click="onLayerClicked(layer)">
-            <q-item-label lines="1">
-              {{ layer.label || layer.name }}
-            </q-item-label>
-            <q-item-label v-if="options.description" caption lines="2">
-              {{ layer.description }}
-            </q-item-label>
-            <q-item-label v-if="layer.isDisabled" caption lines="2">
-              {{ $t('KLayersSelector.LAYER_DISABLED') }}
-            </q-item-label>
-          </q-item-section>
-          <!-- actions -->
-          <q-item-section side>
-            <k-panel :id="`${layer.name}-actions`" :content="layer.actions" :context="layer" :filter="{ id: { $nin: ['toggle'] } }" action-renderer="item" />
-          </q-item-section>
-          <!-- tooltip -->
-          <q-tooltip v-if="(layer.tooltip || layer.description) && $q.platform.is.desktop" :delay="1000"
-            anchor="center left" self="center right" :offset="[20, 0]">
-            {{ layer.tooltip || layer.description }}
-          </q-tooltip>
-        </q-item>
+            <q-tooltip
+              v-if="(layer.tooltip || layer.description) && $q.platform.is.desktop" :delay="1000"
+              anchor="center left"
+              self="center right"
+              :offset="[20, 0]">
+              {{ layer.tooltip || layer.description }}
+            </q-tooltip>
+          </div>
+          <q-space />
+          <q-icon name="las la-exclamation-circle" size="md" color="warning" v-if="layer.isDisabled">
+            <q-tooltip>{{ $t('KLayersSelector.LAYER_DISABLED') }}</q-tooltip>
+          </q-icon>
+          <!-- Layer toggle -->
+          <q-toggle :value="layer.isVisible" :disable="layer.isDisabled" @input="onLayerClicked(layer)"/>
+          <!-- Layer actions -->
+          <k-panel
+            :id="`${layer.name}-actions`"
+            :content="layer.actions"
+            :context="layer"
+            :filter="{ id: { $nin: ['toggle'] } }"
+            action-renderer="item" />
+        </div>
       </template>
     </div>
-    <div v-else-if="!options.hideIfEmpty">
-      <k-label class="q-pb-md" :text="$t('KLayersSelector.NO_LAYER_AVAILABLE')" alignement="center-top" direction="horizontal" />
+    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pb-sm">
+      <k-stamp icon="las la-exclamation-circle" icon-size="sm" :text="$t('KLayersSelector.NO_LAYER_AVAILABLE')" direction="horizontal" />
     </div>
     <slot name="footer" />
-  </q-list>
+  </div>
 </template>
 
 <script>
 import _ from 'lodash'
+import { QToggle } from 'quasar'
 import { utils } from '../../../../core/client'
 
 export default {
   name: 'k-layers-selector',
+  components: {
+    QToggle
+  },
   props: {
     layers: {
       type: Array,
@@ -68,6 +65,9 @@ export default {
     }
   },
   methods: {
+    getId (layer) {
+      return _.kebabCase(layer.name)
+    },
     layerIcon (layer) {
       return utils.getIconName(layer, 'icon')
     },
@@ -85,10 +85,10 @@ export default {
       this.toggleLayer(layer)
     }
   },
-  created () {
+  beforeCreate () {
     // Loads the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
-    this.$options.components['k-label'] = this.$load('frame/KLabel')
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
   }
 }
 </script>

package/lib/map/client/components/catalog/KWeatherLayersSelector.vue

@@ -33,8 +33,8 @@
       </template>
     </k-layers-selector>
   </div>
-  <div v-else>
-    <k-label :text="$t('KWeatherLayersSelector.NO_MODEL_AVAILABLE')" alignement="center-top" icon-size="36px" direction="vertical" />
+  <div v-else class="row justify-center q-pb-sm">
+    <k-stamp icon="las la-exclamation-circle" icon-size="sm" :text="$t('KWeatherLayersSelector.NO_MODEL_AVAILABLE')" direction="horizontal" />
   </div>
 </template>
 
@@ -128,7 +128,7 @@ export default {
   created () {
     // Loads the required components
     this.$options.components['k-layers-selector'] = this.$load('catalog/KLayersSelector')
-    this.$options.components['k-label'] = this.$load('frame/KLabel')
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
     // Set the current forecast model
     this.model = this.forecastModel
   }

package/lib/map/client/components/form/KLocationField.vue

@@ -9,7 +9,7 @@
   >
     <!-- Content -->
     <template v-slot:default>
-      <k-location-input v-model="model" class="full-width" />
+      <k-location-input id="location-input" v-model="model" v-bind="properties.field" class="full-width" />
     </template>
     <!--Helper -->
     <template v-if="helper" v-slot:hint>

package/lib/map/client/components/form/KOwsLayerField.vue

@@ -11,10 +11,11 @@
     :error-message="errorLabel"
     :error="hasError"
     bottom-slots
-    :options="availableLayers"
+    :options="filteredLayers"
     option-label="display"
     option-value="id"
     :loading="loading"
+    @filter="onFilter"
     @input="onUpdated">
     <!-- Options display -->
     <template v-slot:option="scope">
@@ -46,10 +47,16 @@ export default {
   data () {
     return {
       layer: '',
-      loading: false
+      loading: false,
+      filter: ''
     }
   },
   computed: {
+    filteredLayers () {
+      return this.filter
+        ? this.availableLayers.filter(layer => layer.display.toLowerCase().includes(this.filter.toLowerCase()))
+        : this.availableLayers
+    },
     availableLayers () {
       // sort alphabetically layers per display
       return this.service ? _.map(this.service.availableLayers, (value, key) => value).sort((a, b) => {
@@ -66,6 +73,11 @@ export default {
     emptyModel () {
       return null
     },
+    onFilter (val, update, abort) {
+      update(() => {
+        this.filter = val.toLocaleLowerCase()
+      })
+    },
     async onUpdated (layer) {
       this.error = ''
       this.loading = true
@@ -84,6 +96,13 @@ export default {
           if (!_.has(layer.crs, '3857')) {
             this.error = 'KOwsLayerField.UNSUPPORTED_LAYER_CRS'
           }
+          // selected layer must support at least one image format we understand
+          // some WMTS layer only expose application/x-protobuf as format
+          const supportedFormats = _.map(layer.formats, (value, key) => key)
+          const hasImageFormat = supportedFormats.some((format) => format.startsWith('image/'))
+          if (!hasImageFormat) {
+            this.error = 'KOwsLayerField.UNSUPPORTED_LAYER_FORMAT'
+          }
         } else if (this.service.protocol === 'TMS') {
           // selected layer must be available with 3857 crs
           if (layer.srs !== 'EPSG:3857') {

package/lib/map/client/components/form/KOwsServiceField.vue

@@ -199,6 +199,7 @@ export default {
           result.availableLayers = decoded.availableLayers
           result.version = this.findQueryParameter(url.searchParams, 'VERSION')
           if (!result.version) result.version = decoded.version
+          result.getTileUseKvpEncoding = decoded.getTileUseKvpEncoding
         // } else if (result.service === 'WCS') {
         } else if (result.protocol === 'TMS') {
           const decoded = await tms.discover(result.baseUrl, result.searchParams, caps)

package/lib/map/client/components/widget/KInformationBox.vue

@@ -3,11 +3,11 @@
     <div v-if="schema && properties" class="fit row">
       <k-panel id="information-box-actions" class="q-pa-sm" :content="actions" direction="vertical" />
       <q-scroll-area class="col fit" :thumb-style="thumbStyle" :bar-style="barStyle">
-        <k-view class="q-pa-md" :schema="schema" :values="properties" :options="viewOptions" />
+        <k-view class="q-pa-md" :schema="schema" :values="properties" :separators="true" />
       </q-scroll-area>
     </div>
     <div v-else class="absolute-center">
-      <k-label :text="$t('KInformationBox.NO_FEATURE_PROPERTIES')" icon-size="48px" />
+      <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KInformationBox.NO_FEATURE_PROPERTIES')" />
     </div>
   </div>
 </template>
@@ -37,20 +37,14 @@ export default {
       thumbStyle: {
         right: '4px',
         borderRadius: '5px',
-        backgroundColor: colors.getBrand('secondary'),
-        width: '5px',
-        opacity: 0.75
+        backgroundColor: colors.getBrand('primary'),
+        width: '6px'
       },
       barStyle: {
         right: '2px',
-        borderRadius: '9px',
-        backgroundColor: colors.getBrand('primary'),
-        width: '9px',
-        opacity: 0.25
-      },
-      viewOptions: {
-        labelWidth: 5,
-        separators: true
+        borderRadius: '5px',
+        backgroundColor: colors.getBrand('accent'),
+        width: '10px'
       },
       schema: null,
       properties: null,
@@ -67,6 +61,8 @@ export default {
       this.properties = null
       this.schema = null
       if (this.feature && this.layer) {
+        this.kActivity.centerOnSelection()
+        this.kActivity.addSelectionHighlight('information-box')
         let schema
         // Is there any schema ?
         if (_.has(this.layer, 'schema.content')) {
@@ -91,8 +87,6 @@ export default {
         })
         this.schema = schema
         this.properties = properties
-        this.kActivity.centerOnSelection()
-        this.kActivity.addSelectionHighlight('information-box')
       }
     },
     onCenterOn () {
@@ -125,7 +119,7 @@ export default {
     // laod the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-view'] = this.$load('form/KView')
-    this.$options.components['k-label'] = this.$load('frame/KLabel')
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
     // Registers the actions
     this.actions = {
       default: [

package/lib/map/client/components/widget/KMapillaryViewer.vue

@@ -1,6 +1,5 @@
 <template>
   <div :style="widgetStyle()">
-    <q-resize-observer @resize="onResized" />
     <div class="fit row">
       <k-panel id="mapillary-actions" class="q-pa-sm" :content="actions" direction="vertical" />
       <div class="col" id="mapillary-container"></div>
@@ -11,10 +10,11 @@
 <script>
 import _ from 'lodash'
 import L from 'leaflet'
-import moment from 'moment'
 import logger from 'loglevel'
-import * as Mapillary from 'mapillary-js'
-import 'mapillary-js/dist/mapillary.min.css'
+import { Viewer } from 'mapillary-js'
+import 'mapillary-js/dist/mapillary.css'
+import distance from '@turf/distance'
+import { point } from '@turf/helpers'
 import { baseWidget } from '../../../../core/client/mixins'
 
 export default {
@@ -37,14 +37,14 @@ export default {
       this.$store.set('selection.states.mapillary', {
         location: this.location,
         bearing: this.bearing,
-        key: this.key
+        imageId: this.imageId
       })
     },
     restoreStates () {
       const states = this.$store.get('selection.states.mapillary')
       this.location = states.location
       this.bearing = states.bearing
-      this.key = states.key
+      this.imageId = states.imageId
     },
     getMarkerFeature () {
       const lat = this.location ? this.location.lat : 0
@@ -64,76 +64,87 @@ export default {
     async refresh () {
       if (_.has(this.selection, 'states.mapillary')) {
         this.restoreStates()
-        if (this.key) await this.moveToKey(this.key)
+        if (this.imageId) await this.refreshView()
         else if (this.location) await this.moveCloseTo(this.location.lat, this.location.lng)
       } else {
         const location = this.selection.location
         if (location) await this.moveCloseTo(location.lat, location.lng)
       }
     },
-    async moveToKey (key) {
-      try {
-        await this.mapillaryViewer.moveToKey(key)
-        this.onCenterOn()
-        this.kActivity.addSelectionHighlight('mapillary', this.getMarkerFeature())
-      } catch (error) {
-        logger.error(error)
-        this.$toast({ type: 'negative', message: this.$t('KMapillaryWidget.NO_IMAGE_FOUND') })
+    async moveCloseTo (lat, lon) {
+      // Query the images according a bbox that contains the given position
+      const buffer = 0.0002 // around 25m
+      const left = lon - buffer
+      const right = lon + buffer
+      const top = lat + buffer
+      const bottom = lat - buffer
+      const token = this.kActivity.mapillaryToken
+      const query = `https://graph.mapillary.com/images?fields=id,computed_geometry&bbox=${left},${bottom},${right},${top}&access_token=${token}&limit=50`
+      const response = await fetch(query)
+      if (response.status !== 200) {
+        throw new Error(`Impossible to fetch ${query}: ` + response.status)
+      }
+      const data = await response.json()
+      const imageCount = data.data.length
+      // If any results then search for the nearest image
+      if (imageCount > 0) {
+        const clickedPosition = point([lon, lat])
+        let minDist
+        _.forEach(data.data, image => {
+          const dist = distance(clickedPosition, image.computed_geometry)
+          if (!minDist || dist < minDist) {
+            minDist = dist
+            this.imageId = image.id
+          }
+        })
+        this.refreshView()
+      } else {
+        this.$toast({ type: 'negative', message: this.$t('KMapillaryWidget.NO_IMAGE_FOUND_CLOSE_TO') })
       }
     },
-    async moveCloseTo (lat, lon) {
+    centerMap () {
+      if (this.location) this.kActivity.center(this.location.lng, this.location.lat)
+    },
+    async refreshView () {
+      this.kActivity.addSelectionHighlight('mapillary', this.getMarkerFeature())
       try {
-        await this.mapillaryViewer.moveCloseTo(lat, lon)
-        this.onCenterOn()
-        this.kActivity.addSelectionHighlight('mapillary', this.getMarkerFeature())
+        await this.mapillaryViewer.moveTo(this.imageId)
       } catch (error) {
         logger.error(error)
-        this.$toast({ type: 'negative', message: this.$t('KMapillaryWidget.NO_IMAGE_FOUND_CLOSE_TO') })
       }
     },
-    setupViewerFilters () {
-      // Not yet initialized ?
-      if (!this.mapillaryViewer || !this.kActivity.mapillaryLayer) return
-      // Update viewer filters
-      const endTime = this.kActivity.currentTime || moment.utc()
-      const startTime = endTime.clone().add(moment.duration(_.get(this.kActivity.mapillaryLayer, 'queryFrom', 'P-1Y'))) // 1 year back by default
-      this.mapillaryViewer.setFilter(['all',
-        ['>=', 'capturedAt', startTime.valueOf()],
-        ['<=', 'capturedAt', endTime.valueOf()]
-      ])
-    },
-    onCenterOn () {
-      if (this.location) this.kActivity.center(this.location.lng, this.location.lat)
-    },
-    onResized (size) {
-      if (this.mapillaryViewer) this.mapillaryViewer.resize()
+    onCurrentTimeChanged (time) {
+      this.setupViewerFilters()
     },
-    async onNodeChanged (node) {
-      this.location = L.latLng(node.latLon.lat, node.latLon.lon)
+    async onImageEvent (viewerImageEvent) {
+      const image = viewerImageEvent.image
+      this.imageId = image.id
+      this.location = image.lngLat
       this.bearing = await this.mapillaryViewer.getBearing()
+      this.centerMap()
       this.kActivity.updateSelectionHighlight('mapillary', this.getMarkerFeature())
-    },
-    onCurrentTimeChanged (time) {
-      this.setupViewerFilters()
     }
   },
-  created () {
+  beforeCreate () {
     // laod the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
+  },
+  created () {
     // Registers the actions
     this.actions = {
       default: [
-        { id: 'center', icon: 'las la-eye', tooltip: this.$t('KMapillaryWidget.CENTER_ON'), handler: this.onCenterOn }
+        { id: 'center', icon: 'las la-eye', tooltip: this.$t('KMapillaryWidget.CENTER_ON'), handler: this.centerMap }
       ]
     }
   },
   mounted () {
     // Create the viewer
-    this.mapillaryViewer = new Mapillary.Viewer('mapillary-container', this.kActivity.mapillaryClientID)
-    this.setupViewerFilters()
+    this.mapillaryViewer = new Viewer({
+      container: 'mapillary-container',
+      accessToken: this.kActivity.mapillaryToken
+    })
     // Add event listeners
-    this.mapillaryViewer.on(Mapillary.Viewer.nodechanged, this.onNodeChanged)
-    this.kActivity.$on('current-time-changed', this.onCurrentTimeChanged)
+    this.mapillaryViewer.on('image', this.onImageEvent)
     // Configure the viewer
     this.location = undefined
     this.bearing = undefined
@@ -142,8 +153,7 @@ export default {
   },
   async beforeDestroy () {
     // Remove event listeners
-    this.mapillaryViewer.off(Mapillary.Viewer.nodechanged, this.onNodeChanged)
-    this.kActivity.$off('current-time-changed', this.onCurrentTimeChanged)
+    this.mapillaryViewer.off('image', this.onImageEvent)
     // Remove the marker
     this.kActivity.removeSelectionHighlight('mapillary')
     // Save the states

package/lib/map/client/components/widget/KTimeSeries.vue

@@ -18,7 +18,7 @@
         </div>
       </div>
       <div v-else class="absolute-center">
-        <k-label :text="$t('KTimeSeries.NO_DATA_AVAILABLE')" icon-size="48px" />
+        <k-stamp icon="las la-exclamation-circle"  icon-size="3rem" :text="$t('KTimeSeries.NO_DATA_AVAILABLE')" text-size="1rem" />
       </div>
     </div>
   </div>
@@ -33,6 +33,7 @@ import chroma from 'chroma-js'
 import Chart from 'chart.js'
 import 'chartjs-plugin-annotation'
 import { getTimeInterval } from '../../utils'
+import { Time } from '../../../../core/client/time'
 import { baseWidget } from '../../../../core/client/mixins'
 
 export default {
@@ -278,10 +279,10 @@ export default {
           this.setupAvailableDatasets()
           this.setupAvailableYAxes()
 
-          const date = _.get(this.kActivity.currentFormattedTime, 'date.short')
-          const time = _.get(this.kActivity.currentFormattedTime, 'time.long')
-          const dateFormat = _.get(this.kActivity.currentTimeFormat, 'date.short')
-          const timeFormat = _.get(this.kActivity.currentTimeFormat, 'time.long')
+          const date = _.get(Time.getCurrentFormattedTime(), 'date.short')
+          const time = _.get(Time.getCurrentFormattedTime(), 'time.long')
+          const dateFormat = _.get(Time.getFormat(), 'date.short')
+          const timeFormat = _.get(Time.getFormat(), 'time.long')
 
           this.config = {
             type: 'line',
@@ -333,7 +334,7 @@ export default {
             }
           }
           // Is current time visible in data time range ?
-          const currentTime = moment.utc(this.kActivity.currentFormattedTime.iso)
+          const currentTime = moment.utc(Time.getCurrentFormattedTime().iso)
           if (this.timeRange && currentTime.isBetween(...this.timeRange)) {
             this.config.options.annotation = {
               drawTime: 'afterDatasetsDraw',
@@ -403,6 +404,35 @@ export default {
       if (name) this.probedLocationName = name
     },
     async refresh () {
+      // Select the current span as default option in UX
+      const span = this.$store.get('timeseries.span')
+      const spanOptions = [
+        { badge: '3H', value: 180 },
+        { badge: '6H', value: 360 },
+        { badge: '12H', value: 720 },
+        { badge: '24H', value: 1440 },
+        { badge: '48H', value: 2880 },
+        { badge: '72H', value: 4320 },
+        { badge: '96H', value: 5760 }
+      ]
+      spanOptions.forEach(option => {
+        if (option.value === span) {
+          option.default = true
+        }
+      })
+      // Registers the actions
+      this.actions = [
+        { id: 'center-view', icon: 'las la-eye', tooltip: 'KTimeSeries.CENTER_ON', handler: this.onCenterOn },
+        {
+          component: 'input/KOptionsChooser',
+          id: 'timespan-options',
+          icon: 'las la-history',
+          tooltip: 'KTimeSeries.SPAN',
+          options: spanOptions,
+          on: { event: 'option-chosen', listener: this.onUpdateSpan }
+        }
+      ]
+      // Then manage selection
       this.kActivity.addSelectionHighlight('time-series')
       this.kActivity.centerOnSelection()
       // Update timeseries data if required
@@ -436,39 +466,19 @@ export default {
   created () {
     // Load the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
-    this.$options.components['k-label'] = this.$load('frame/KLabel')
-    // Registers the actions
-    this.actions = [
-      { id: 'center-view', icon: 'las la-eye', tooltip: 'KTimeSeries.CENTER_ON', handler: this.onCenterOn },
-      {
-        component: 'input/KOptionsChooser',
-        id: 'timespan-options',
-        icon: 'las la-history',
-        tooltip: 'KTimeSeries.SPAN',
-        options: [
-          { badge: '3H', value: 180 },
-          { badge: '6H', value: 360 },
-          { badge: '12H', value: 720, default: true },
-          { badge: '24H', value: 1440 },
-          { badge: '48H', value: 2880 },
-          { badge: '72H', value: 4320 },
-          { badge: '96H', value: 5760 }
-        ],
-        on: { event: 'option-chosen', listener: this.onUpdateSpan }
-      }
-    ]
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
     // Refresh the component
     this.refresh()
   },
   mounted () {
-    this.kActivity.$on('current-time-changed', this.refresh)
+    this.$events.$on('time-current-time-changed', this.refresh)
     this.$events.$on('time-format-changed', this.refresh)
     this.$events.$on('timeseries-span-changed', this.refresh)
     this.kActivity.$on('forecast-model-changed', this.refresh)
     this.kActivity.$on('forecast-level-changed', this.refresh)
   },
   beforeDestroy () {
-    this.kActivity.$off('current-time-changed', this.refresh)
+    this.$events.$off('time-current-time-changed', this.refresh)
     this.$events.$off('time-format-changed', this.refresh)
     this.$events.$off('timeseries-span-changed', this.refresh)
     this.kActivity.$off('forecast-model-changed', this.refresh)