@kalisio/kdk 2.3.2 → 2.4.0

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

@@ -108,40 +108,6 @@ const zoom = ref()
 // Computed
 const layersBySublegend = computed(() => getLayersBySublegend(layers.value, sublegends.value))
 
-// Functions
-function onShowLayer (layer, engine) {
-  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`)
-  layers.value.push(layer)
-}
-function onHideLayer (layer) {
-  if (!layer.legend) return
-  logger.debug(`[KDK] Unregister '${layer.name}' legend`)
-  _.remove(layers.value, { name: layer.name })
-}
-function onZoomChanged () {
-  zoom.value = CurrentActivity.value.getCenter().zoomLevel
-}
-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
@@ -189,4 +155,38 @@ watch(CurrentActivity, (newActivity, oldActivity) => {
     newActivity.$engineEvents.on('zoomend', onZoomChanged)
   }
 }, { immediate: true })
+
+// Functions
+function onShowLayer (layer, engine) {
+  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`)
+  layers.value.push(layer)
+}
+function onHideLayer (layer) {
+  if (!layer.legend) return
+  logger.debug(`[KDK] Unregister '${layer.name}' legend`)
+  _.remove(layers.value, { name: layer.name })
+}
+function onZoomChanged () {
+  zoom.value = CurrentActivity.value.getCenter().zoomLevel
+}
+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)
+}
 </script>

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

@@ -2,25 +2,25 @@
   <KCardSection
     :title="$t('KLocationCardSection.TITLE')"
     :actions="actions"
-    :context="context"
+    :actionsFilter="actionsFilter"
+    :hideHeader="hideHeader"
     :dense="dense"
-    style="position: relative"
   >
     <div v-if="feature" class="full-width column">
       <!-- Description -->
       <KTextArea
-        :text="feature.properties.name"
-        :minHeight="44"
+        :text="feature.properties[namePath]"
+        :minHeight="24"
         :maxHeight="204"
         :dense="true"
       />
       <!-- Map  -->
       <KLocationMap
         v-model="feature"
-        style="min-height: 140px"
+        style="min-height: 120px"
       />
     </div>
-    <div v-else style="height: 184px">
+    <div v-else style="height: 142px">
       <div class="absolute-center">
         <KStamp
           icon="las la-map-marker"
@@ -32,34 +32,30 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { ref, watch } from 'vue'
+import { utils as coreUtils } from '../../../../core.client'
 import KLocationMap from './KLocationMap.vue'
 
 // Props
 const props = defineProps({
-  location: {
-    type: Object,
-    default: () => null
+  locationPath: {
+    type: String,
+    default: 'location'
   },
-  actions: {
-    type: [Object, Array],
-    default: () => null
+  namePath: {
+    type: String,
+    default: 'name'
   },
-  context: {
-    type: Object,
-    default: () => null
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  }
+  ...coreUtils.CardSectionProps
 })
 
 // Data
 const feature = ref(null)
 
 // Watch
-watch(() => props.location, (value) => {
-  feature.value = value
+watch(() => [props.item, props.locationPath], () => {
+  if (_.get(props.item, 'type') === 'Feature') feature.value = _.cloneDeep(props.item)
+  else feature.value = _.get(props.item, props.locationPath)
 }, { immediate: true })
 </script>

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

@@ -1,19 +1,13 @@
 <template>
-  <div class="fit column">
-    <!-- Map container -->
-    <div
-      :ref="mapRefCreated"
-      class="col"
-    >
-      <q-resize-observer @resize="refreshMap" />
-      <!-- Map header -->
-      <div class="row justify-center">
-        <KPanel
-          id="header"
-          :content="headerComponents"
-          class="k-location-map-toolbar"
-        />
-      </div>
+  <div :ref="mapRefCreated" class="fit">
+    <q-resize-observer @resize="refreshMap" />
+    <!-- Map header -->
+    <div class="row justify-center">
+      <KPanel
+        id="header"
+        :content="header"
+        class="k-location-map-toolbar"
+      />
     </div>
   </div>
 </template>
@@ -52,19 +46,15 @@ export default {
         return _.get(config, 'engines.leaflet')
       }
     },
-    header: {
+    tools: {
       type: Array,
       default: () => []
-    },
-    draggable: {
-      type: Boolean,
-      default: false
     }
   },
   computed: {
-    headerComponents () {
+    header () {
       const components = []
-      _.forEach(this.header, component => {
+      _.forEach(this.tools, component => {
         if (component === 'separator') {
           components.push({
             component: 'QSeparator',
@@ -104,6 +94,7 @@ export default {
             icon: 'las la-project-diagram',
             tooltip: 'KLocationMap.DRAW_LINE',
             propagate: false,
+
             handler: () => this.startDraw('Line')
           })
         }
@@ -128,6 +119,12 @@ export default {
       })
       return components
     },
+    interactive () {
+      return !_.isEmpty(this.tools)
+    },
+    draggable () {
+      return _.indexOf(this.tools, 'draw-point') !== -1
+    },
     allowGeolocation () {
       return !_.isNil(this.header.geolocate)
     }
@@ -135,9 +132,6 @@ export default {
   watch: {
     modelValue: function () {
       this.refresh()
-    },
-    draggable: function () {
-      this.refresh()
     }
   },
   methods: {
@@ -157,6 +151,10 @@ export default {
     },
     refresh () {
       if (!this.mapReady) return
+      // disable handler if non interactive
+      if (!this.interactive) {
+        _.forEach(this.map._handlers, handler => { handler.disable() })
+      }
       // clear the existing layer if any
       if (this.locationLayer) {
         this.map.removeLayer(this.locationLayer)
@@ -177,10 +175,11 @@ export default {
         const coordinates = _.get(this.location, 'geometry.coordinates')
         const style = _.get(this.engineOptions, 'style.location.point')
         this.locationLayer = createMarkerFromPointStyle([coordinates[1], coordinates[0]],
-          Object.assign({ draggable: this.draggable, pmIgnore: true }, style))
+          Object.assign({ interactive: this.draggable, draggable: this.draggable, pmIgnore: true }, style))
         if (this.draggable) this.locationLayer.on('dragend', this.onLocationDragged)
       } else {
         this.locationLayer = L.geoJson(this.location, {
+          interactive: false,
           style: (feature) => {
             const styleType = getFeatureStyleType(feature)
             if (!styleType) {
@@ -200,10 +199,8 @@ export default {
           }
         })
       }
-      // }
       this.locationLayer.addTo(this.map)
-      // wait for the next tick to recenter the view
-      this.$nextTick(() => this.recenter())
+      this.recenter()
     },
     onLocationDragged () {
       const latLng = this.locationLayer.getLatLng()
@@ -249,19 +246,16 @@ export default {
       unbindLeafletEvents(this.map, ['pm:create'])
       this.map.pm.setGlobalOptions({ layerGroup: null })
     },
-    async refreshBaseLayer () {
-      const layers = await this.getLayers()
-      // Get first visible base layer
-      if (layers.length > 0) {
-        this.addLayer(layers[0])
-      }
-    },
-    mapRefCreated (container) {
+    async mapRefCreated (container) {
       if (container) {
         if (!this.mapReady) {
+          // setup map
           this.setupMap(container, this.engineOptions.viewer)
           this.mapReady = true
-          this.refreshBaseLayer()
+          // setup base layer
+          const baseLayers = await this.getLayers({ type: 'BaseLayer' })
+          if (baseLayers.length > 0) await this.addLayer(baseLayers[0])
+          // setup location
           this.refresh()
         }
       }
@@ -275,6 +269,10 @@ export default {
   },
   beforeUnmount () {
     this.$engineEvents.off('pm:create', this.stopDraw)
+    if (this.locationLayer) {
+      this.map.removeLayer(this.locationLayer)
+      this.locationLayer = null
+    }
   },
   async setup () {
     // Get current project for activity if any

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

@@ -0,0 +1,147 @@
+<template>
+  <KCard
+    v-bind="$props"
+    :header="header"
+    :sections="sections"
+    :footer="footer"
+    :shadow="shadow"
+    :dense="dense"
+  >
+    <template v-slot:card-heading>
+      <div class="full-width row">
+        <div :class="{ 'col-12': dense, 'col-8': !dense }">
+          <div class="full-width row justify-between">
+            <!-- name -->
+            <div
+              class="text-subtitle1 text-weight-medium ellipsis-2-lines"
+              v-bind:class="{ 'q-py-xs': dense, 'q-py-sm': !dense }"
+            >
+              {{ item.name }}
+            </div>
+            <!-- location name if dense -->
+            <div v-if="dense && item.location"
+              class="row items-center justify-end q-gutter-x-sm k-location-name"
+            >
+              <q-icon v-if="dense" name="las la-map-marker" />
+              <span class="ellipsis text-caption">{{ item.location.properties.name }}</span>
+              <KLocationTip
+                v-if="dense"
+                :location="item.location"
+              />
+            </div>
+          </div>
+          <KDescriptionCardSection
+            :item="item"
+            :actions="descriptionActions"
+            :dense="dense"
+          />
+        </div>
+        <div v-if="!dense" class="q-pl-sm q-pb-sm col-4">
+          <div v-if="item.location" class="fit column relative-position">
+            <KLocationMap
+              v-model="item.location"
+              :tools="[]"
+              class="col k-location-map"
+            />
+            <div class="full-width ellipsis text-caption k-location-map-caption">
+              {{ item.location.properties.name }}
+            </div>
+            <KPanel
+              :content="locationActions"
+              class="k-location-actions"
+            />
+          </div>
+          <div v-else class="fit column k-location-map relative-position">
+            <div class="absolute-center" >
+              <KStamp
+                icon="las la-map-marker"
+                text="KLocationCardSection.NO_LOCATION"
+              />
+            </div>
+            <KPanel
+              :content="locationActions"
+              class="k-location-actions"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </KCard>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mixins as kCoreMixins } from '../../../../core/client'
+import KDescriptionCardSection from '../../../../core/client/components/collection/KDescriptionCardSection.vue'
+import KLocationMap from './KLocationMap'
+import KLocationTip from './KLocationTip'
+
+export default {
+  mixins: [kCoreMixins.baseItem],
+  components: {
+    KDescriptionCardSection,
+    KLocationMap,
+    KLocationTip
+  },
+  props: {
+    header: {
+      type: [Array, Object],
+      default: () => null
+    },
+    sections: {
+      type: Object,
+      default: () => null
+    },
+    footer: {
+      type: [Array, Object],
+      default: () => null
+    },
+    shadow: {
+      type: Number,
+      default: 0,
+      validator: (value) => {
+        return value >= 0 && value <= 24
+      }
+    },
+    dense: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    descriptionActions () {
+      return _.filter(this.itemActions, { scope: 'description' })
+    },
+    locationActions () {
+      return _.filter(this.itemActions, { scope: 'location' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.k-location-name {
+  user-select: none;
+  cursor: pointer;
+}
+.k-location-map {
+  border-radius: 5px 5px 0px 0px;
+  border: 1px solid lightgrey;
+}
+.k-location-map-caption {
+  user-select: none;
+  padding-left: 4px;
+  padding-right: 4px;
+  background-color: #EEEEEE;
+  border-radius: 0px 0px 5px 5px;
+  border: 1px solid lightgrey;
+}
+.k-location-actions {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background-color: #ffffffaa;
+  border-radius: 10px;
+  z-index: 401;
+}
+</style>

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

@@ -3,6 +3,9 @@
     anchor="center end"
     self="center middle"
     class="q-pa-none"
+    :delay="delay"
+    :hide-delay="150"
+    :transition-duration="150"
     style="border-radius: 100px; border: 1px solid var(--q-primary);"
   >
     <KLocationMap
@@ -14,7 +17,7 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import { computed } from 'vue'
 import KLocationMap from './KLocationMap.vue'
 
 // Props
@@ -22,8 +25,15 @@ const props = defineProps({
   location: {
     type: Object,
     required: true
+  },
+  delay: {
+    type: Number,
+    default: 500
   }
 })
 
-const { location: feature } = toRefs(props)
+// Data
+const feature = computed(() => {
+  return props.location
+})
 </script>

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

@@ -22,7 +22,6 @@
 <script>
 import _ from 'lodash'
 import logger from 'loglevel'
-import { ref } from 'vue'
 import { copyToClipboard, exportFile } from 'quasar'
 import { KView, KPanel, KStamp } from '../../../../core/client/components'
 import { generatePropertiesSchema } from '../../utils'
@@ -132,11 +131,8 @@ export default {
     }
   },
   setup (props) {
-    // Data
-    const height = ref(0)
     // Expose
     return {
-      height,
       ...useCurrentActivity(),
       ...useHighlight('information-box', props.highlight)
     }

package/map/client/components/widget/KStackableTimeSeries.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="stacked-time-series" class="column justify-start no-wrap" v-if="components.length > 0">
+  <div id="stacked-time-series" v-if="components.length > 0" class="column justify-start no-wrap">
     <!-- Pinned charts first -->
     <template v-for="(timeSerie, index) in timeSeries">
       <div v-if="timeSerie.pinned" class="col column justify-start no-wrap">
@@ -117,6 +117,7 @@ const exposed = {
   zoomToData,
   restorePreviousZoom,
   update,
+  requestUpdate,
   exportData,
   exportSeries
 }
@@ -200,6 +201,12 @@ function update () {
     if (component.table) component.table.update()
   })
 }
+function requestUpdate () {
+  _.forEach(components.value, component => {
+    if (component.chart) component.chart.requestUpdate()
+    if (component.table) component.table.requestUpdate()
+  })
+}
 function exportData (timeSerie) {
   const component = _.find(components.value, { timeSerie })
   if (component && component.table) component.table.exportData(_.get(props, 'exportOptions.data', {}))

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

@@ -398,7 +398,7 @@ export default {
     },
     onExportSeries () {
       let times = []
-      const time = this.probedLocation.time || this.probedLocation.forecastTime
+      const time = _.get(this.probedLocation, 'time', _.get(this.probedLocation, 'forecastTime'))
       this.probedVariables.forEach(variable => {
         // Check if we are targetting a specific level
         const name = (this.kActivity.forecastLevel ? `${variable.name}-${this.kActivity.forecastLevel}` : variable.name)

package/map/client/composables/highlight.js

@@ -4,26 +4,26 @@ import bbox from '@turf/bbox'
 import bboxPolygon from '@turf/bbox-polygon'
 import { uid } from 'quasar'
 import { unref, onUnmounted } from 'vue'
-import { getFeatureId, getFeatureStyleType } from '../utils.js'
+import { getFeatureId, getFeatureStyleType, isLayerHighlightable } from '../utils.js'
 import * as composables from '../../../core/client/composables/index.js'
 
 export const HighlightsLayerName = uid()
-// This ensure it is on tp of everything else
+// This ensure it is on top of everything else
 export const HighlightsZIndex = 999
 
 export function useHighlight (name, options = {}) {
   // Set default options
-  options = Object.assign({ updateDelay: 100 }, options)
+  options = Object.assign({ updateDelay: 250 }, options)
   // Retrieve activity
   const { kActivity } = composables.useCurrentActivity()
   // Avoid using .value everywhere
   let activity = unref(kActivity)
 
   // Data
-  // hightligh store for context
-  const { store, clear, set, get, unset, has } = composables.useStore(`hightlighs.${name}`)
+  // highlight store for context
+  const { store, clear, set, get, unset, has } = composables.useStore(`highlights.${name}`)
   // global highlight store
-  const { forOwn } = composables.useStore('hightlighs')
+  const { forOwn } = composables.useStore('highlights')
 
   // functions
   function setCurrentActivity (newActivity) {
@@ -63,6 +63,7 @@ export function useHighlight (name, options = {}) {
     return get(getHighlightId(feature, layer))
   }
   function highlight (feature, layer, selected = true) {
+    if (layer && !isLayerHighlightable(layer)) return
     const highlightId = getHighlightId(feature, layer)
     // Define default highlight feature
     const highlight = {
@@ -116,17 +117,17 @@ export function useHighlight (name, options = {}) {
     // Add additional information provided by feature, if any, for custom styling
     _.merge(highlight, _.omit(feature, ['geometry', 'style']))
     set(highlightId, highlight)
-    updateHighlightsLayer()
+    requestHighlightsLayerUpdate()
     return highlight
   }
   function unhighlight (feature, layer) {
     const highlightId = getHighlightId(feature, layer)
     unset(highlightId)
-    updateHighlightsLayer()
+    requestHighlightsLayerUpdate()
   }
   function clearHighlights () {
     clear()
-    updateHighlightsLayer()
+    requestHighlightsLayerUpdate()
   }
   function getHighlightedFeatures () {
     // Iterate over all highlights
@@ -156,7 +157,8 @@ export function useHighlight (name, options = {}) {
           cluster: false,
           removeMissing: true,
           popup: { pick: [] },
-          zIndex: HighlightsZIndex
+          zIndex: HighlightsZIndex,
+          interactive: false
         },
         cesium: {
           type: 'geoJson',
@@ -170,29 +172,25 @@ export function useHighlight (name, options = {}) {
     }
     if (!activity.isLayerVisible(HighlightsLayerName)) await activity.showLayer(HighlightsLayerName)
   }
-  let updateRequested
   function updateHighlightsLayer () {
-    // In order to avoid updating the layer too much often we queue a request update every N ms
-    if (updateRequested) return
-    updateRequested = setTimeout(() => {
-      // Get all highlights
-      let features = getHighlightedFeatures()
-      // Filter invisible ones
-      features = features.filter(feature => !feature.isDisabled)
-      // Order from back to front
-      features = _.sortBy(features, feature => _.get(feature, 'properties.zOrder'))
-      if (activity) {
-        activity.updateLayer(HighlightsLayerName, {
-          type: 'FeatureCollection',
-          features
-        })
-      }
-      updateRequested = false
-    }, options.updateDelay)
+    // Get all highlights
+    let features = getHighlightedFeatures()
+    // Filter invisible ones
+    features = features.filter(feature => !feature.isDisabled)
+    // Order from back to front
+    features = _.sortBy(features, feature => _.get(feature, 'properties.zOrder'))
+    if (activity) {
+      activity.updateLayer(HighlightsLayerName, {
+        type: 'FeatureCollection',
+        features
+      }, { replace: true }) // Always start from fresh data as we debounce the update and might multiple operations might generate a wrong order otherwise
+    }
   }
+  // In order to avoid updating the layer too much often we queue a request update every N ms
+  const requestHighlightsLayerUpdate = _.debounce(updateHighlightsLayer, options.updateDelay)
+   
   function removeHighlightsLayer () {
     // Clear any running update
-    if (updateRequested) clearTimeout(updateRequested)
     if (activity) activity.removeLayer(HighlightsLayerName)
   }
   function onHighlightedLayerDisabled (layer) {
@@ -203,7 +201,7 @@ export function useHighlight (name, options = {}) {
       const suffix = `-${_.kebabCase(layer.name)}-${getFeatureId(feature, layer)}`
       if (feature.highlightId.endsWith(suffix)) feature.isDisabled = true
     })
-    updateHighlightsLayer()
+    requestHighlightsLayerUpdate()
   }
   function onHighlightedLayerEnabled (layer) {
     // Get all highlights
@@ -213,7 +211,7 @@ export function useHighlight (name, options = {}) {
       const suffix = `-${_.kebabCase(layer.name)}-${getFeatureId(feature, layer)}`
       if (feature.highlightId.endsWith(suffix)) feature.isDisabled = false
     })
-    updateHighlightsLayer()
+    requestHighlightsLayerUpdate()
   }
 
   // Cleanup on destroy