@kalisio/kdk 2.6.4 → 2.7.0

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

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="count > 0">
+    <KMenu v-if="menu"
+      icon="las la-bars" id="time-series-selector"
+      :content="actions"
+      action-renderer="item"
+      :dense="dense"
+      :badge="{ color: 'accent', label: count }"
+    />
+    <KPanel v-else
+      id="time-series-selector"
+      :content="actions"
+      action-renderer="item"
+      :dense="dense"
+      direction="vertical"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { Store, composables as kCoreComposables } from '../../../../core/client/index.js'
+
+// Props
+defineProps({
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  menu: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Data
+const { CurrentActivityContext } = kCoreComposables.useCurrentActivity()
+const { state } = CurrentActivityContext
+
+// Computed
+const actions = computed(() => {
+  const timeSeries = []
+  for (let i = 0; i < state.timeSeries.length; i++) {
+    const timeSerie = state.timeSeries[i]
+    // When using list display all available timeseries like tabs
+    // When using menu only those that are not yet visible
+    if (Store.get('layout.windows.top.gt.sm') || !timeSerie.visible) {
+      timeSeries.push(timeSerie)
+    }
+  }
+  return timeSeries.map(timeSerie => ({
+    id: timeSerie.id,
+    label: timeSerie.label,
+    color: timeSerie.visible ? 'primary' : 'grey-9',
+    handler: () => showTimeSerie(timeSerie.id)
+  }))
+})
+const count = computed(() => {
+  return actions.value.length
+})
+
+// Functions
+function showTimeSerie (id) {
+  // Only one graph visible at a time if no pinning
+  // Otherwise only one in addition to the pinned one
+  // This is managed by pinning action that will hide once pinned
+  _.forEach(state.timeSeries, timeSerie => {
+    timeSerie.visible = (timeSerie.id === id) || timeSerie.pinned
+  })
+}
+</script>

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

@@ -0,0 +1,83 @@
+<template>
+  <KPanel
+    id="time-series-toolbar"
+    :content="content"
+    :context="context"
+  />
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { Store } from '../../../../core/client/store.js'
+import { useCurrentActivity } from '../../composables/activity.js'
+
+const { CurrentActivityContext, centerOnSelection, hasProbedLocation, centerOnProbe } = useCurrentActivity()
+const { state } = CurrentActivityContext
+
+// Props
+const props = defineProps({
+  context: {
+    type: Object,
+    default: () => null
+  }
+})
+
+// Data
+const widget = inject('widget')
+
+// Computed
+const context = computed(() => {
+  return props.context
+})
+const hasSingleSerie = computed(() => {
+  return state.timeSeries.length === 1
+})
+const content = computed(() => {
+  if (!widget.value) return []
+  return [{
+    id: 'time-series-selector',
+    component: 'KTimeSeriesSelector',
+    visible: () => !hasSingleSerie.value && Store.get('layout.windows.top.lt.md')
+  }, {
+    id: 'restore-time-series-zoom',
+    icon: 'las la-undo',
+    tooltip: 'KTimeSeries.RESTORE_ZOOM',
+    visible: widget.value.isZoomed,
+    handler: () => widget.value.onRestoreZoom()
+  }, {
+    id: 'absolute-time-range',
+    component: 'time/KAbsoluteTimeRange'
+  }, {
+    id: 'relative-time-ranges',
+    component: 'menu/KMenu',
+    icon: 'las la-history',
+    content: [{
+      component: 'time/KRelativeTimeRanges',
+      ranges: ['last-hour', 'last-2-hours', 'last-3-hours', 'last-6-hours',
+        'last-12-hours', 'last-day', 'last-2-days', 'last-3-days', 'last-week',
+        'next-12-hours', 'next-day', 'next-2-days', 'next-3-days']
+    }]
+  }, {
+    id: 'center-view',
+    icon: 'las la-eye',
+    tooltip: 'KTimeSeries.CENTER_ON',
+    handler: () => {
+      if (hasProbedLocation()) centerOnProbe()
+      else centerOnSelection()
+    }
+  }]
+  /* TODO: action previously available on KTimeSeries
+  {
+    id: 'run-options',
+    component: 'input/KOptionsChooser',
+    icon: 'las la-clock',
+    tooltip: 'KTimeSeries.RUN',
+    visible: 'hasRunTimes',
+    hideSelected: false,
+    options: ':runOptions',
+    on: { event: 'option-chosen', listener: 'onUpdateRun' }
+  }
+  */
+})
+
+</script>

package/map/client/composables/catalog.js

@@ -1,7 +1,6 @@
 import _ from 'lodash'
 import { ref, computed } from 'vue'
 import * as catalog from '../utils/utils.catalog.js'
-import { getCatalogProjectQuery } from '../utils/utils.project.js'
 import { api } from '../../../core/client/api.js'
 
 export function useCatalog (options = {}) {
@@ -30,13 +29,10 @@ export function useCatalog (options = {}) {
 
   // Functions
   async function getLayers (filterQuery = {}) {
-    const query = Object.assign({},
-      options.project ? Object.assign(getCatalogProjectQuery(options.project), options.layers) : options.layers,
-      filterQuery)
     layers.value = await catalog.getLayers({
-      query,
+      query: Object.assign({}, options.layers, filterQuery),
       context: options.context,
-      planetApi: options.planetApi
+      project: options.project
     })
     return layers.value
   }
@@ -44,7 +40,7 @@ export function useCatalog (options = {}) {
     categories.value = await catalog.getCategories({
       query: options.categories,
       context: options.context,
-      planetApi: options.planetApi
+      project: options.project
     })
     return categories.value
   }
@@ -52,15 +48,15 @@ export function useCatalog (options = {}) {
     sublegends.value = await catalog.getSublegends({
       query: options.sublegends,
       context: options.context,
-      planetApi: options.planetApi
+      project: options.project
     })
     return sublegends.value
   }
   async function getViews () {
     views.value = await catalog.getViews({
-      query: options.project ? Object.assign(getCatalogProjectQuery(options.project), options.views) : options.views,
+      query: options.views,
       context: options.context,
-      planetApi: options.planetApi
+      project: options.project
     })
     return views.value
   }

package/map/client/composables/highlight.js

@@ -4,7 +4,9 @@ import bbox from '@turf/bbox'
 import bboxPolygon from '@turf/bbox-polygon'
 import { uid } from 'quasar'
 import { unref, onBeforeMount, onBeforeUnmount } from 'vue'
-import * as utils from '../utils.js'
+import { getFeatureId } from '../utils/utils.js'
+import * as features from '../utils/utils.features.js' // Named import to avoid conflict with similar function names
+import { isLayerHighlightable } from '../utils/utils.layers.js'
 import * as composables from '../../../core/client/composables/index.js'
 
 export const HighlightsLayerName = uid()
@@ -58,13 +60,13 @@ export function useHighlight (name, options = {}) {
     let id = `${name}`
     if (layer) id += `-${_.kebabCase(layer.name)}`
     if (feature) {
-      const featureId = utils.getFeatureId(feature, layer)
+      const featureId = getFeatureId(feature, layer)
       if (featureId) id += `-${featureId}`
     }
     return id
   }
   function isHighlightFor (highlightId, layer, feature) {
-    return feature ? highlightId.includes(`-${utils.getFeatureId(feature, layer)}`) : highlightId.includes(`-${_.kebabCase(layer.name)}`)
+    return feature ? highlightId.includes(`-${getFeatureId(feature, layer)}`) : highlightId.includes(`-${_.kebabCase(layer.name)}`)
   }
   function hasHighlight (feature, layer) {
     return has(getHighlightId(feature, layer))
@@ -88,7 +90,7 @@ export function useHighlight (name, options = {}) {
     highlightMode = mode
   }
   function highlight (feature, layer, selected = true) {
-    if (layer && (highlightMode === 'highlightable-layers') && !utils.isLayerHighlightable(layer)) return
+    if (layer && (highlightMode === 'highlightable-layers') && !isLayerHighlightable(layer)) return
     const highlightId = getHighlightId(feature, layer)
     // Define default highlight feature
     const highlight = {
@@ -102,7 +104,7 @@ export function useHighlight (name, options = {}) {
     // Assign style
     if (selected) {
       // Do not alter config object
-      const selectionStylePath = `engines.${activity.engine}.style.selection.${utils.getFeatureStyleType(highlight)}`
+      const selectionStylePath = `engines.${activity.engine}.style.selection.${features.getFeatureStyleType(highlight)}`
       let highlightStyle = _.cloneDeep(_.get(config, selectionStylePath, {}))
       if (activity.is2D()) {
         // adapt the size to the marker using feature style
@@ -120,8 +122,9 @@ export function useHighlight (name, options = {}) {
           }
         }
         // If highlight size is based on a shape with a radius use it, otherwise go for size
-        if (radius) Object.assign(highlightStyle, { radius: radius + 0.5 * HighlightMargin }) 
-        else if (size) Object.assign(highlightStyle, { size: [size[0] + HighlightMargin, size[1] + HighlightMargin] })
+        // FIXME: Take care to templating, in this case for now we don't take it into account
+        if (_.isNumber(radius)) Object.assign(highlightStyle, { radius: radius + 0.5 * HighlightMargin }) 
+        else if (Array.isArray(size) && (size.length > 1) && _.isNumber(size[0]) && _.isNumber(size[1])) Object.assign(highlightStyle, { size: [size[0] + HighlightMargin, size[1] + HighlightMargin] })
       
         Object.assign(highlight, { style: highlightStyle })
       } else {
@@ -236,13 +239,13 @@ export function useHighlight (name, options = {}) {
     })
   }
   function listenToFeaturesServiceEventsForLayer (layer) {
-    const listeners = utils.listenToFeaturesServiceEventsForLayer(layer, {
+    const listeners = features.listenToFeaturesServiceEventsForLayer(layer, {
       all: onFeatureUpdated, removed: onFeatureRemoved
     }, layerServiceEventListeners[layer._id])
     if (listeners) layerServiceEventListeners[layer._id] = listeners
   }
   function unlistenToFeaturesServiceEventsForLayer (layer) {
-    utils.unlistenToFeaturesServiceEventsForLayer(layer, layerServiceEventListeners[layer._id])
+    features.unlistenToFeaturesServiceEventsForLayer(layer, layerServiceEventListeners[layer._id])
     delete layerServiceEventListeners[layer._id]
   }
   function listenToFeaturesServiceEventsForLayers () {

package/map/client/composables/project.js

@@ -38,7 +38,7 @@ export function useProject (options = {}) {
 
   // Functions
   function hasProject () {
-    return projectId.value
+    return projectId.value || project.value
   }
   function isProjectLoaded () {
     return project.value

package/map/client/composables/selection.js

@@ -9,7 +9,8 @@ import intersects from '@turf/boolean-intersects'
 import { featureEach } from '@turf/meta'
 import { unref } from 'vue'
 import * as composables from '../../../core/client/composables/index.js'
-import * as utils from '../utils.js'
+import { getFeatureId } from '../utils/utils.js'
+import * as features from '../utils/utils.features.js' // Named import to avoid conflict with similar function names
 import { convertPolygonStyleToLeafletPath } from '../leaflet/utils/index.js'
 
 export function useSelection (name, options = {}) {
@@ -31,8 +32,8 @@ export function useSelection (name, options = {}) {
         if (layer1 !== layer2) return false
         // Then compare features
         if (item1.feature && item2.feature) {
-          const id1 = utils.getFeatureId(item1.feature, item1.layer)
-          const id2 = utils.getFeatureId(item2.feature, item2.layer)
+          const id1 = getFeatureId(item1.feature, item1.layer)
+          const id2 = getFeatureId(item2.feature, item2.layer)
           return id1 === id2
         } else {
           // If only one has a feature then it cannot be the same
@@ -158,8 +159,8 @@ export function useSelection (name, options = {}) {
     for (let i = 0; i < items.length; i++) {
       const item = items[i]
       if (item.feature && item.layer && (item.layer.name === layer.name)) {
-        const selectedId = utils.getFeatureId(item.feature, item.layer)
-        const featureId = utils.getFeatureId(feature, layer)
+        const selectedId = getFeatureId(item.feature, item.layer)
+        const featureId = getFeatureId(feature, layer)
         if (featureId === selectedId) return item
       }
     }
@@ -355,13 +356,13 @@ export function useSelection (name, options = {}) {
     hiddenFeatures.forEach((item) => selection.unselectItem(item))
   }
   function listenToFeaturesServiceEventsForLayer (layer) {
-    const listeners = utils.listenToFeaturesServiceEventsForLayer(layer, {
+    const listeners = features.listenToFeaturesServiceEventsForLayer(layer, {
       all: onFeatureUpdated, removed: onFeatureRemoved
     }, layerServiceEventListeners[layer._id])
     if (listeners) layerServiceEventListeners[layer._id] = listeners
   }
   function unlistenToFeaturesServiceEventsForLayer (layer) {
-    utils.unlistenToFeaturesServiceEventsForLayer(layer, layerServiceEventListeners[layer._id])
+    features.unlistenToFeaturesServiceEventsForLayer(layer, layerServiceEventListeners[layer._id])
     delete layerServiceEventListeners[layer._id]
   }
   function listenToFeaturesServiceEventsForLayers () {

package/map/client/composables/weather.js

@@ -58,8 +58,15 @@ export function useWeather (options = {}) {
     if (variables && variables.length > 0) {
       _.forOwn(fields, (value, key) => {
         // Take care that weather fields are prefixed by 'properties.' because they target feature
-        const variable = _.find(variables, { name: `${value.property.replace('properties.', '')}` })
-        if (variable) value.label = variable.label
+        let name = value.property.replace('properties.', '')
+        // Also weacast properties are postfixed by forecast level
+        if (activity.forecastLevel) name = name.replace(`-${activity.forecastLevel}`, '')
+        const variable = _.find(variables, { name })
+        // We allow variable name to be customized based on level information
+        if (variable) value.label = _.template(i18n.tie(variable.label))({
+          level: (activity ? activity.selectedLevel : null),
+          levelUnit: (activity && activity.selectableLevels ? activity.selectableLevels.unit : '')
+        })
       })
     }
     return fields

package/map/client/geolocation.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import { Store, Events, utils } from '../../core/client/index.js'
 import { errors } from '../common/index.js'
 import { formatUserCoordinates } from './utils.js'
@@ -50,11 +51,12 @@ export const Geolocation = {
   get altitudeAccuracy () {
     return this.getAltitudeAccuracy()
   },
-  async update () {
+  async update (params = {}) {
+    const refreshParams = _.merge({ timeout: 30000, enableHighAccuracy: true }, params)
     let location = null
     // Get the position
     try {
-      location = await this.refresh()
+      location = await this.refresh(refreshParams)
       Store.patch('geolocation', { location, error: undefined })
       logger.debug('[KDK] Geolocation updated:', location)
     } catch (error) {
@@ -78,13 +80,14 @@ export const Geolocation = {
       Events.emit('error', Object.assign(geolocationError, {
         // By default we only show geolocation errors, nothing if disabled by user
         ignore: (code === error.PERMISSION_DENIED),
-        retryHandler: () => this.refresh()
+        retryHandler: () => this.refresh(refreshParams)
       }))
       logger.debug('[KDK] geolocation failed: ', error)
     }
     return location
   },
-  async refresh () {
+  async refresh (params = {}) {
+    const refreshParams = _.merge({ timeout: 30000, enableHighAccuracy: true }, params)
     this.positionPromise = utils.createQuerablePromise(new Promise((resolve, reject) => {
       if (!window.navigator.geolocation) {
         Events.emit('error', {
@@ -112,7 +115,7 @@ export const Geolocation = {
             }
           })
         },
-        (error) => reject(error), { timeout: 30000, enableHighAccuracy: true })
+        (error) => reject(error), refreshParams)
     }))
     return this.positionPromise
   }

package/map/client/i18n/map_en.json

@@ -318,8 +318,7 @@
       "TOGGLE_VR_LABEL": "Switch to Virtual Reality (VR) mode with this button.",
       "TOGGLE_FULLSCREEN_LABEL": "Switch to fullscreen mode with this button.",
       "TOGGLE_CATALOG_LABEL": "Open the catalog with this button.",
-      "NORTH_ARROW_LABEL": "Display or hide the north arrow using this button.",
-      "ZOOM_CONTROL_LABEL": "Display or hide the zoom control buttons using this button."
+      "NORTH_ARROW_LABEL": "Display or hide the north arrow using this button."
     },
     "catalog-panel": {
       "CATALOG_LABEL": "The <b>catalog</b> allows to manage data displayed on your map.<br/>The catalogd is divided into 3 different tabs.",
@@ -466,15 +465,17 @@
     "OUTSIDE_MAP": "Indeterminated position"
   },
   "KTimeSeries": {
-    "LABEL": "Time Series",
-    "RESTORE_TIME_RANGE": "Restore previous view",
-    "NO_DATA_AVAILABLE": "No data available",
-    "CENTER_ON": "Center the view on the probed location",
-    "SPAN": "Timeseries span",
+    "LABEL": "Time series",
+    "CHART_SERIE_TOOLTIP": "View graph",
+    "TABLE_SERIE_TOOLTIP": "View table",
+    "LOGARITHMIC_SERIE_TOOLTIP": "Logarithmic scale",
+    "LINEAR_SERIE_TOOLTIP": "Linear scale",
+    "PIN_SERIE_TOOLTIP": "Pin graph",
+    "UNPIN_SERIE_TOOLTIP": "Unpin graph",
+    "EXPORT_SERIE_TOOLTIP": "Export data",
+    "RESTORE_ZOOM": "Restore previous view",
     "RUN": "Forecast run",
-    "TIME_LABEL": "Time",
-    "EXPORT_SERIES": "Export data",
-    "SERIES_EXPORT_FILE": "Series"
+    "CENTER_ON": "Center the view on the probed location"
   },
   "KStackableTimeSeries": {
     "NO_DATA_AVAILABLE": "No data available"

package/map/client/i18n/map_fr.json

@@ -318,8 +318,7 @@
       "TOGGLE_VR_LABEL": "Basculez en mode <b>Réalité Virtuelle</b> (VR) avec ce bouton.",
       "TOGGLE_FULLSCREEN_LABEL": "Basculez en mode plein écran avec ce bouton.",
       "TOGGLE_CATALOG_LABEL": "Ouvrez le <b>catalogue</b> avec ce bouton.",
-      "NORTH_ARROW_LABEL": "Affichez ou cachez la flèche nord avec ce bouton.",
-      "ZOOM_CONTROL_LABEL": "Affichez ou cachez les boutons de zoom avec ce bouton."
+      "NORTH_ARROW_LABEL": "Affichez ou cachez la flèche nord avec ce bouton."
     },
     "catalog-panel": {
       "CATALOG_LABEL": "Le <b>catalogue</b> permet de gérer les données affichées sur votre carte.<br/>Le catalogue se décompose en 3 onglets.",
@@ -467,14 +466,16 @@
   },
   "KTimeSeries": {
     "LABEL": "Séries chronologiques",
-    "RESTORE_TIME_RANGE": "Restaurer la vue précédente",
-    "NO_DATA_AVAILABLE": "Aucune donnée disponible",
-    "CENTER_ON": "Centrer la vue sur la sonde",
-    "SPAN": "Intervalle de la série temporelle",
+    "CHART_SERIE_TOOLTIP": "Voir le graphe",
+    "TABLE_SERIE_TOOLTIP": "Voir la table",
+    "LOGARITHMIC_SERIE_TOOLTIP": "Echelle logarithmique",
+    "LINEAR_SERIE_TOOLTIP": "Echelle linéaire",
+    "PIN_SERIE_TOOLTIP": "Epingler le graphe",
+    "UNPIN_SERIE_TOOLTIP": "Désépingler le graphe",
+    "EXPORT_SERIE_TOOLTIP": "Exporter les données",
+    "RESTORE_ZOOM": "Restaurer la vue précédente",
     "RUN": "Réseau de prévision",
-    "TIME_LABEL": "Temps",
-    "EXPORT_SERIES": "Exporter les données",
-    "SERIES_EXPORT_FILE": "Series"
+    "CENTER_ON": "Centrer la vue sur la sonde"
   },
   "KStackableTimeSeries": {
     "NO_DATA_AVAILABLE": "Aucune donnée disponible"