@kalisio/kdk 2.1.9 → 2.2.1

package/map/client/components/legend/KLegend.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column no-wrap">
+  <div class="column no-wrap" v-if="zoom">
     <!-- Sublegends -->
     <template
       v-for="sublegend in sublegends"
@@ -14,15 +14,32 @@
         :default-opened="sublegend.opened || opened"
         dense
       >
+        <template v-slot:header>
+          <!-- Label -->
+          <q-item-section>
+            {{ $tie(sublegend.name) }}
+          </q-item-section>
+          <!-- Helper -->
+          <q-item-section v-if="sublegend.helper" side >
+            <KAction
+              :id="sublegend.name + '-helper'"
+              color="primary"
+              :propagate="false"
+              :icon="getHelperIcon(sublegend.helper)"
+              :tooltip="getHelperTooltip(sublegend.helper)"
+              :url="getHelperUrl(sublegend.helper)"
+              :dialog="getHelperDialog(sublegend.helper)"
+            />
+          </q-item-section>
+        </template>
         <!-- legend components by layers -->
         <template v-for="layer in layersBySublegend[sublegend.name]" :key="layer.name" class="column full-width">
-          <div class="q-py-xs q-px-md">
-            <component
-              :is="layer.legend.renderer"
-              :label="layer.legend.label"
-              :content="filterContent(layer)"
-            />
-          </div>
+          <KLayerLegend
+            :layer ="layer"
+            :zoom="zoom"
+            :engine="engine"
+            :renderers="renderers"
+          />
         </template>
       </q-expansion-item>
     </template>
@@ -34,15 +51,12 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
 import { ref, computed, watch } from 'vue'
-import { i18n, api, utils as coreUtils } from '../../../../core/client'
-import { useCurrentActivity } from '../../composables'
+import { i18n, Store } from '../../../../core/client'
+import { useCurrentActivity, useCatalog } from '../../composables'
+import KLayerLegend from './KLayerLegend.vue'
 
 // Props
 const props = defineProps({
-  contextId: {
-    type: String,
-    default: undefined
-  },
   headerClass: {
     type: String,
     default: 'bg-grey-3 text-weight-regular'
@@ -65,12 +79,18 @@ const props = defineProps({
       return {
         image: 'legend/KImageLegend',
         'color-scale': 'legend/KColorScaleLegend',
-        symbols: 'legend/KSymbolsLegend'
+        symbols: 'legend/KSymbolsLegend',
+        variables: 'legend/KVariablesLegend'
       }
     }
   }
 })
 
+// Use global catalog
+const { getSublegends } = useCatalog()
+// Use local catalog if any
+const { getSublegends: getContextSublegends } = useCatalog({ context: Store.get('context') })
+
 // Data
 const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
 const sublegends = ref([])
@@ -95,23 +115,15 @@ const layersBySublegend = computed(() => {
 
 // Functions
 function onShowLayer (layer, engine) {
-  const legend = layer.legend
-  if (!legend) return
-  if (!legend.content) {
-    logger.warn(`[KDK] Legend for ${layer.name} has no content`)
-    return
-  }
+  const layerLegend = layer.legend
+  // Check whether the layer has a legend
+  if (!layerLegend) return
+  // Check wehther the legend is already registered for that layer
   if (_.find(layers.value, { name: layer.name })) {
     logger.warn(`[KDK] Legend for ${layer.name} already resgistered`)
     return
   }
   logger.debug(`[KDK] Register '${layer.name}' legend`)
-  const renderer = props.renderers[legend.type]
-  if (!renderer) {
-    logger.warn(`[KDK] Cannot find any renderer for the layer's legend of type of ${legend.type}`)
-    return
-  }
-  legend.renderer = coreUtils.loadComponent(renderer)
   layers.value.push(layer)
 }
 function onHideLayer (layer) {
@@ -122,36 +134,27 @@ function onHideLayer (layer) {
 function onZoomChanged () {
   zoom.value = CurrentActivity.value.getCenter().zoomLevel
 }
-function filterContent (layer) {
-  const content = layer.legend.content
-  if (!zoom.value) return content
-  let result
-  if (Array.isArray(content)) {
-    _.forEach(content, item => {
-      const minZoom = _.get(layer, `${engine.value}.minZoom`, _.get(item, 'minZoom', 0))
-      const maxZoom = _.get(layer, `${engine.value}.maxZoom`, _.get(item, 'maxZoom', 99))
-      if (zoom.value >= minZoom && zoom.value <= maxZoom) {
-        result = item
-        return false
-      }
-    })
-  } else {
-    const minZoom = _.get(layer, `${engine.value}.minZoom`, _.get(content, 'minZoom', 0))
-    const maxZoom = _.get(layer, `${engine.value}.maxZoom`, _.get(content, 'maxZoom', 99))
-    if (zoom.value >= minZoom && zoom.value <= maxZoom) {
-      result = content
-    }
-  }
-  return result
+function getHelperIcon (helper) {
+  return _.get(helper, 'icon', undefined)
+}
+function getHelperTooltip (helper) {
+  return _.get(helper, 'tooltip', '')
+}
+function getHelperUrl (helper) {
+  return _.get(helper, 'url', null)
+}
+function getHelperDialog (helper) {
+  return _.get(helper, 'dialog', null)
 }
 
 // Watch
 watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
   // Retrieve the legends from catalog if required
   if (props.sublegendsFromCatalog) {
-    const catalogService = api.getService('catalog', props.contextOrId)
-    const response = await catalogService.find({ query: { type: 'Sublegend' } })
-    sublegends.value = response.data
+    sublegends.value = await getSublegends()
+    if (Store.get('context')) {
+      sublegends.value = sublegends.value.concat(await getContextSublegends())
+    }
   } else {
     sublegends.value = []
   }

package/map/client/components/legend/KLegendRenderer.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="column full-width q-gutter-xs">
-    <div v-if="label" class="text-weight-light">
+    <div v-if="label" class="text-weight-medium">
       {{ $tie(label) }}
     </div>
-    <slot>
+    <div class="q-pr-sm">
+      <slot>
       <!-- to be overloaded -->
-    </slot>
+      </slot>
+    </div>
   </div>
 </template>
 

package/map/client/components/legend/KSymbolsLegend.vue

@@ -17,20 +17,22 @@
           >
             <q-item dense>
               <q-item-section avatar v-if="element.component">
-                <component
-                  :is="element.component"
-                  v-bind="element.props"
-                  :key="element.label"
-                />
+                <div class="row justify-center">
+                  <component
+                    :is="element.component"
+                    v-bind="element.props"
+                    :key="element.label"
+                  />
+                </div>
               </q-item-section>
               <q-item-section>
-                <q-item-label>
+                <q-item-label class="text-caption">
                   {{ $tie(element.label )}}
                 </q-item-label>
               </q-item-section>
             </q-item>
           </template>
-          <q-separator v-if="index < sections.length - 1" />
+          <q-separator v-if="index < sections.length - 1" style="margin: 8px;" />
         </q-list>
       </template>
     </div>
@@ -44,7 +46,7 @@ import { computed } from 'vue'
 import { loadComponent } from '../../../../core/client/utils'
 import KLegendRenderer from './KLegendRenderer.vue'
 
-// props
+// Props
 const props = defineProps({
   label: {
     type: String,
@@ -56,9 +58,9 @@ const props = defineProps({
   }
 })
 
-// computed
+// Computed
 const sections = computed(() => {
-  return _.difference(_.keys(props.content), ['minZoom', 'maxZoom'])
+  return _.difference(_.keys(props.content))
 })
 
 // function

package/map/client/components/legend/KVariablesLegend.vue

@@ -0,0 +1,78 @@
+<template>
+  <KLegendRenderer
+    v-if="content"
+    :label="label"
+  >
+    <!-- content -->
+    <template v-for="variable in variables" :key="variable.name">
+      <!-- caption -->
+      <span class="text-caption">{{ variable.label }}</span>
+      <!-- colorscale -->
+      <KColorScale
+        v-bind="variable.colorScale"
+        style="height: 46px;"
+      />
+    </template>
+  </KLegendRenderer>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { computed } from 'vue'
+import { i18n } from '../../../../core/client'
+import { Units } from '../../../../core/client/units'
+import { KColorScale } from '../../../../core/client/components'
+import KLegendRenderer from './KLegendRenderer.vue'
+
+// Props
+const props = defineProps({
+  layer: {
+    type: Object,
+    required: true
+  },
+  label: {
+    type: String,
+    default: undefined
+  },
+  content: {
+    type: String,
+    default: '.'
+  }
+})
+
+// Computed
+const variables = computed(() => {
+  const regexp = new RegExp(props.content)
+  return _.filter(props.layer.variables, variable => {
+    if (regexp.test(variable)) {
+      if (variable.chromajs) return true
+      logger.warn(`[KDK] variable '${variable.name}' must have a 'chromajs' property`)
+    }
+    return false
+  })
+    .map(variable => {
+      // Pick useful properties
+      let { name, label, chromajs, unit } = _.pick(variable, ['name', 'label', 'chromajs', 'unit'])
+      // Avoid mutating layer data
+      const colorScale = _.cloneDeep(chromajs)
+      label = `${i18n.tie(label)} (${Units.getTargetUnitSymbol(unit)})`
+      // Rename required properties for backward compatibility
+      if (colorScale.scale) {
+        colorScale.colors = colorScale.scale
+        delete colorScale.scale
+      }
+      // Convert to target unit
+      if (colorScale.domain) {
+        colorScale.domain = colorScale.domain.map(value => Units.convert(value, unit))
+      }
+      if (colorScale.classes) {
+        colorScale.classes = colorScale.classes.map(value => Units.convert(value, unit))
+      }
+      return {
+        name, label, colorScale
+      }
+    })
+})
+
+</script>

package/map/client/components/location/KGeocodersFilter.vue

@@ -4,13 +4,13 @@
     v-model="selectedGeocoders"
     :options="availableGeocoders"
     type="toggle"
+    size="xs"
   />
 </template>
 
 <script setup>
 import _ from 'lodash'
 import { computed } from 'vue'
-import { i18n } from '../../../../core.client'
 
 // Props
 const props = defineProps({
@@ -37,8 +37,6 @@ const selectedGeocoders = computed({
   }
 })
 const availableGeocoders = computed(() => {
-  return _.map(props.geocoders, geocoder => {
-    return Object.assign({}, geocoder, { label: i18n.tie(geocoder.label) })
-  })
+  return _.sortBy(props.geocoders, ['label'])
 })
 </script>

package/map/client/components/location/KLocationCardSection.vue

@@ -32,10 +32,10 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import { ref, watch } from 'vue'
 import KLocationMap from './KLocationMap.vue'
 
-// props
+// Props
 const props = defineProps({
   location: {
     type: Object,
@@ -55,7 +55,11 @@ const props = defineProps({
   }
 })
 
-// data
-const { location: feature } = toRefs(props)
+// Data
+const feature = ref(null)
 
+// Watch
+watch(() => props.location, (value) => {
+  feature.value = value
+}, { immediate: true })
 </script>

package/map/client/components/location/KLocationMap.vue

@@ -20,15 +20,19 @@
 
 <script>
 import _ from 'lodash'
+import logger from 'loglevel'
 import L from 'leaflet'
 import config from 'config'
 import centroid from '@turf/centroid'
 import { KPanel } from '../../../../core/client/components'
+import { api } from '../../../../core/client/api.js'
 import * as mapMixins from '../../mixins/map'
-import { Geolocation } from '../../geolocation'
+import { Geolocation } from '../../geolocation.js'
+import { useCatalog, useCurrentActivity } from '../../composables'
 import {
-  setEngineJwt, coordinatesToGeoJSON, formatUserCoordinates,
-  bindLeafletEvents, unbindLeafletEvents, createLeafletMarkerFromStyle, convertToLeafletFromSimpleStyleSpec
+  coordinatesToGeoJSON, formatUserCoordinates,
+  bindLeafletEvents, unbindLeafletEvents, getFeatureStyleType,
+  getDefaultPointStyle, getDefaultLineStyle, getDefaultPolygonStyle, createMarkerFromPointStyle
 } from '../../utils.map.js'
 
 export default {
@@ -169,20 +173,34 @@ export default {
       }
       // create a new layer
       const type = _.get(this.location, 'geometry.type')
-      // style is expressed as simple style spec in config
-      const pointStyle = convertToLeafletFromSimpleStyleSpec(this.engineOptions.pointStyle)
-      const featureStyle = convertToLeafletFromSimpleStyleSpec(this.engineOptions.featureStyle)
       if (type === 'Point') {
         const coordinates = _.get(this.location, 'geometry.coordinates')
-        this.locationLayer = createLeafletMarkerFromStyle([coordinates[1], coordinates[0]],
-          Object.assign({ draggable: this.draggable, pmIgnore: true }, pointStyle))
+        const style = _.get(this.engineOptions, 'style.location.point')
+        this.locationLayer = createMarkerFromPointStyle([coordinates[1], coordinates[0]],
+          Object.assign({ draggable: this.draggable, pmIgnore: true }, style))
         if (this.draggable) this.locationLayer.on('dragend', this.onLocationDragged)
       } else {
         this.locationLayer = L.geoJson(this.location, {
-          pointToLayer: (feature, latlng) => createLeafletMarkerFromStyle(latlng, pointStyle),
-          style: (feature) => featureStyle
+          style: (feature) => {
+            const styleType = getFeatureStyleType(feature)
+            if (!styleType) {
+              logger.warn(`[KDK] cannot get a style type from the feature of geometry type ${feature.geometry.type}`)
+              return
+            }
+            if (styleType === 'line') return getDefaultLineStyle(feature, null, this.engineOptions, 'style.location.line')
+            return getDefaultPolygonStyle(feature, null, this.engineOptions, 'style.location.polygon')
+          },
+          pointToLayer: (feature, latlng) => {
+            const style = getDefaultPointStyle(feature, null, this.engineOptions, 'style.location.point')
+            if (!style) {
+              logger.warn('[KDK] cannot generate point style from a feature')
+              return
+            }
+            return createMarkerFromPointStyle(latlng, style)
+          }
         })
       }
+      // }
       this.locationLayer.addTo(this.map)
       // wait for the next tick to recenter the view
       this.$nextTick(() => this.recenter())
@@ -232,14 +250,10 @@ export default {
       this.map.pm.setGlobalOptions({ layerGroup: null })
     },
     async refreshBaseLayer () {
-      const catalogService = this.$api.getService('catalog', '')
+      const layers = await this.getLayers()
       // Get first visible base layer
-      const response = await catalogService.find({ query: { type: 'BaseLayer', 'leaflet.isVisible': true } })
-      if (response.data.length > 0) {
-        const baseLayer = response.data[0]
-        // Do we need to inject a token ?
-        await setEngineJwt([baseLayer])
-        this.addLayer(baseLayer)
+      if (layers.length > 0) {
+        this.addLayer(layers[0])
       }
     },
     mapRefCreated (container) {
@@ -261,6 +275,23 @@ export default {
   },
   beforeUnmount () {
     this.$engineEvents.off('pm:create', this.stopDraw)
+  },
+  async setup () {
+    // Get current project for activity if any
+    const { getActivityProject } = useCurrentActivity({ selection: false, probe: false })
+    const project = getActivityProject()
+    // We expect the project object to expose the underlying API
+    const planetApi = project && typeof project.getPlanetApi === 'function' ? project.getPlanetApi() : api
+    // Use target catalog according to project and filtering options to get base layer
+    const { getLayers } = useCatalog({
+      project,
+      layers: { type: 'BaseLayer', 'leaflet.isVisible': true },
+      planetApi
+    })
+    // expose
+    return {
+      getLayers
+    }
   }
 }
 </script>

package/map/client/components/location/KLocationSearch.vue

@@ -49,14 +49,22 @@
         <q-item-section>
           <q-item-label>{{ scope.opt.properties ? scope.opt.properties.name : scope.opt.name }}</q-item-label>
         </q-item-section>
+        <q-item-section avatar v-if="scope.opt.properties.source">
+          <q-chip dense size="0.7rem" color="primary" text-color="white">
+            {{ $tie(`Geocoders.${scope.opt.properties.source}`) }}
+          </q-chip>
+        </q-item-section>
         <KLocationTip :location="scope.opt" />
       </q-item>
     </template>
     <!-- No options -->
     <template v-slot:no-option>
       <q-item>
+        <q-item-section avatar>
+          <q-icon name="las la-frown" color="grey" />
+        </q-item-section>
         <q-item-section class="text-grey">
-          {{ $t('KLocationSearch.NO_RESULTS') }}
+          {{ $t('KLocationSearch.NO_RESULT') }}
         </q-item-section>
       </q-item>
     </template>
@@ -126,7 +134,7 @@ const hasGeocoders = computed(() => {
 
 // Functions
 async function onSearch (pattern, update, abort) {
-  if (pattern.length < 4) {
+  if (pattern.length < 3) {
     abort()
     return
   }
@@ -140,5 +148,7 @@ function onLocationChanged () {
 }
 
 // Hooks
-watch(() => props.geocoders, async (geocoders) => setGeocoders(geocoders), { immediate: true })
+watch(() => props.geocoders, (geocoders) => {
+  setGeocoders(geocoders)
+}, { immediate: true })
 </script>

package/map/client/components/tools/KSearchTool.vue

@@ -9,6 +9,7 @@
 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { uid, getCssVar, useQuasar } from 'quasar'
+import bbox from '@turf/bbox'
 import KLocationSearch from '../location/KLocationSearch.vue'
 import { useCurrentActivity } from '../../composables'
 
@@ -36,6 +37,7 @@ const computedStyle = computed(() => {
 // Functions
 async function createLocationLayer () {
   // create the layer
+  const style = CurrentActivity.value.activityOptions.engine.style.location
   await CurrentActivity.value.addLayer({
     name: LocationLayerName,
     type: 'OverlayLayer',
@@ -46,20 +48,18 @@ async function createLocationLayer () {
       isVisible: true,
       realtime: true,
       interactive: false,
-      popup: { template: '<%= properties.name %>' },
-      'icon-classes': 'fas fa-circle',
-      'marker-color': getCssVar('primary'),
-      'icon-color': '#FFFFFF',
-      'icon-x-offset': -2,
-      'icon-y-offset': 0
+      style,
+      popup: { template: '<%= properties.name %>' }
     },
     cesium: {
       type: 'geoJson',
       isVisible: true,
       realtime: true,
-      popup: { template: '<%= properties.name %>' },
+      // FIXME: should use the style
+      // style,
       'marker-symbol': 'marker',
-      'marker-color': getCssVar('primary')
+      'marker-color': getCssVar('primary'),
+      popup: { template: '<%= properties.name %>' }
     }
   })
   // updated the layer with the location
@@ -70,10 +70,15 @@ async function createLocationLayer () {
   // show the layer
   if (!CurrentActivity.value.isLayerVisible(LocationLayerName)) await CurrentActivity.value.showLayer(LocationLayerName)
   // zoom to the location
-  const zoomOrDist = CurrentActivity.value.is2D() ? 18 : 75
-  const lng = location.value.geometry.coordinates[0]
-  const lat = location.value.geometry.coordinates[1]
-  CurrentActivity.value.center(lng, lat, zoomOrDist)
+  const geometry = location.value.geometry
+  if (geometry.type === 'Point') {
+    const zoomOrDist = CurrentActivity.value.is2D() ? 18 : 75
+    const lng = location.value.geometry.coordinates[0]
+    const lat = location.value.geometry.coordinates[1]
+    CurrentActivity.value.center(lng, lat, zoomOrDist)
+  } else {
+    CurrentActivity.value.zoomToBBox(bbox(location.value))
+  }
 }
 
 async function removeLocationLayer () {