@kalisio/kdk 2.6.3 → 2.7.0

package/extras/configs/widgets.top.js

@@ -27,10 +27,10 @@ module.exports = {
   }, 
   TIME_SERIES: {
     id: 'time-series',
-    label: 'TimeSeries.LABEL',
+    label: 'KTimeSeries.LABEL',
     icon: 'las la-chart-line',
-    content: { component: 'TimeSeries' },
-    header: [{ component: 'TimeSeriesToolbar' }]
+    content: { component: 'widget/KTimeSeries' },
+    header: [{ component: 'widget/KTimeSeriesToolbar' }]
   }, 
   ELEVATION_PROFILE: {
     id: 'elevation-profile',

package/extras/tests/core/collection.mjs

@@ -1,5 +1,5 @@
 import makeDebug from 'debug'
-import { countElements, waitForTimeout } from './utils.mjs'
+import { countElements, waitForTimeout, clickXPath } from './utils.mjs'
 
 const debug = makeDebug('kdk:core:test:collection')
 
@@ -33,14 +33,7 @@ export async function clickItem (page, component, name, wait = 500) {
 
 export async function clickItemAction (page, component, name, action, wait = 500) {
   const xpath = `//div[contains(@component, "${component}") and contains(., "${name}")]//button[@id="${action}"]`
-  const elements = await page.$$('xpath/.' + xpath)
-  if (elements.length > 0) {
-    elements[0].click()
-    await waitForTimeout(wait)
-    debug(`Clicked action ${action} on item ${name}`)
-  } else {
-    debug(`Action ${action} on item ${name} not found`)
-  }
+  await clickXPath(page, xpath, wait)
 }
 
 export async function isCardExpanded (page, component, name) {

package/map/api/hooks/hooks.catalog.js

@@ -30,6 +30,7 @@ export function getDefaultCategories (hook) {
     const service = hook.service
     // Check for default categories config
     const defaultCategories = _.get(service, 'options.categories', [])
+    debug(`Retrieving ${defaultCategories.length} default categories for query`, query)
     replaceItems(hook, addDefaultItems(query, type, getItems(hook), defaultCategories))
   }
 }
@@ -42,6 +43,7 @@ export function getDefaultSublegends (hook) {
     const service = hook.service
     // Check for default sublegends config
     const defaultSublegends = _.get(service, 'options.sublegends', [])
+    debug(`Retrieving ${defaultSublegends.length} default sublegends for query`, query)
     replaceItems(hook, addDefaultItems(query, type, getItems(hook), defaultSublegends))
   }
 }
@@ -97,7 +99,9 @@ export async function updateProjects (hook) {
   if (!Array.isArray(removedItems)) removedItems = [removedItems]
   for (let i = 0; i < removedItems.length; i++) {
     const removedItem = removedItems[i]
-    const isLayer = removedItem.type !== 'Context'
+    const isLayer = removedItem.type.endsWith('Layer')
+    const isView = (removedItem.type === 'Context')
+    if (!isLayer && !isView) continue
     const query = {}
     if (isLayer) {
       query.$or = [{ 'layers._id': removedItem._id }, { 'layers.name': removedItem.name }]
@@ -111,7 +115,7 @@ export async function updateProjects (hook) {
     // Stop when non found
     if (projects.length === 0) {
       debug(`No project to update after removing item ${removedItem.name} `)
-      return hook
+      continue
     }
     // Update each project otherwise
     await Promise.all(projects.map(project => {
@@ -130,13 +134,18 @@ export function convertFilterQueriesToString (hook) {
   let items = getItems(hook)
   const isArray = Array.isArray(items)
   items = (isArray ? items : [items])
+  let nbUpdatedItems = 0
   items.forEach(item => {
     const filters = _.get(item, 'filters', [])
+    nbUpdatedItems += filters.length
     _.forEach(filters, filter => {
       toString(filter, ['active', 'inactive'])
     })
   })
-  replaceItems(hook, isArray ? items : items[0])
+  if (nbUpdatedItems > 0) {
+    replaceItems(hook, isArray ? items : items[0])
+    debug(`Updated ${nbUpdatedItems} filters on items`)
+  }
 
   return hook
 }
@@ -145,13 +154,18 @@ export function convertFilterQueriesToObject (hook) {
   let items = getItems(hook)
   const isArray = Array.isArray(items)
   items = (isArray ? items : [items])
+  let nbUpdatedItems = 0
   items.forEach(item => {
     const filters = _.get(item, 'filters', [])
+    nbUpdatedItems += filters.length
     _.forEach(filters, filter => {
       toJson(filter, ['active', 'inactive'])
     })
   })
-  replaceItems(hook, isArray ? items : items[0])
+  if (nbUpdatedItems > 0) {
+    replaceItems(hook, isArray ? items : items[0])
+    debug(`Updated ${nbUpdatedItems} filters on items`)
+  }
 
   return hook
 }

package/map/api/services/catalog/catalog.hooks.js

@@ -17,6 +17,9 @@ export default {
     get: [],
     create: [
       coreHooks.checkUnique({ field: 'name', query: (query, hook) => { query.type = _.get(hook, 'data.type') } }),
+      // Usually conversion of _id to ObjectID is performed by an app-evel hook, which is not yet setup when creating the service.
+      // As we can create features when initializing layer service/data we add it here as well to ensure it will work fine anyway.
+      coreHooks.convertObjectIDs(['_id']),
       coreHooks.convertToString(['baseQuery', 'schema.content']),
       convertFilterQueriesToString,
       setNow('createdAt', 'updatedAt'),

package/map/api/services/features/features.hooks.js

@@ -44,7 +44,9 @@ export default {
     find: [coreHooks.marshallComparisonQuery, coreHooks.marshallSortQuery, marshallSpatialQuery,
       coreHooks.distinct, aggregateFeaturesQuery, coreHooks.aggregationQuery, fuzzySearch, coreHooks.diacriticSearch()],
     get: [],
-    create: [coreHooks.processTimes(['time']), fullResult, emitEvents],
+    // Usually conversion of _id to ObjectID is performed by an app-evel hook, which is not yet setup when creating the service.
+    // As we can create features when initializing layer service/data we add it here as well to ensure it will work fine anyway.
+    create: [coreHooks.processTimes(['time']), coreHooks.convertObjectIDs(['_id']), fullResult, emitEvents],
     update: [upsert, coreHooks.processTimes(['time']), fullResult, emitEvents],
     patch: [upsert, coreHooks.processTimes(['time']), fullResult, emitEvents],
     remove: [coreHooks.marshallComparisonQuery, marshallSpatialQuery, fullResult, emitEvents],

package/map/api/services/index.js

@@ -220,10 +220,6 @@ export async function createDefaultCatalogLayers (options = {}) {
             let geojson = fs.readJsonSync(extractedFileName)
             // We allow GeoJson collection or features array
             geojson = Array.isArray(geojson) ? geojson : geojson.features
-            // We also allow for data exported from MongoDB, in this case remove any Mongo specific ID
-            geojson.forEach(feature => {
-              delete feature._id
-            })
             try {
               await createFeaturesForLayer.call(app, geojson, defaultLayer, options)
             } catch (error) {
@@ -266,11 +262,11 @@ export function removeStylesService (options = {}) {
   return app.removeService(app.getService('styles', options.context))
 }
 
-export async function createDefaultStyles () {
+export async function createDefaultStyles (context) {
   const app = this
   const defaultStyles = app.get('styles').defaultStyles
   if (!defaultStyles) return
-  const stylesService = app.getService('styles')
+  const stylesService = app.getService('styles', context)
   // Create default styles if not already done
   const styles = await stylesService.find({ paginate: false })
   for (let i = 0; i < defaultStyles.length; i++) {

package/map/api/services/styles/styles.hooks.js

@@ -9,7 +9,12 @@ export default {
       kdkCoreHooks.diacriticSearch()
     ],
     get: [],
-    create: [kdkCoreHooks.checkUnique({ field: 'name' })],
+    create: [
+      // Usually conversion of _id to ObjectID is performed by an app-evel hook, which is not yet setup when creating the service.
+      // As we can create features when initializing layer service/data we add it here as well to ensure it will work fine anyway.
+      kdkCoreHooks.convertObjectIDs(['_id']),
+      kdkCoreHooks.checkUnique({ field: 'name' })
+    ],
     update: [kdkCoreHooks.checkUnique({ field: 'name' })],
     patch: [kdkCoreHooks.checkUnique({ field: 'name' })],
     remove: []

package/map/client/components/KFeatureActionButton.vue

@@ -7,13 +7,13 @@
     :actions="featureActions"
     @close="onCloseMenu">
     <!--template v-slot:closed-menu-container>
-      <q-btn round color="accent" icon="las la-chevron-up" />
+      <q-btn round :color="color" icon="las la-chevron-up" />
     </template-->
     <template v-slot:open-menu-container>
-      <q-btn round color="accent" icon="las la-times" />
+      <q-btn round :color="color" icon="las la-times" />
     </template>
     <template v-slot:menu-item="action">
-      <q-btn round color="accent" :icon="action.icon" @click="onFeatureActionClicked(action)">
+      <q-btn round :color="color" :icon="action.icon" @click="onFeatureActionClicked(action)">
         <!-- tooltip -->
         <q-tooltip v-if="action.label">
           {{action.label}}
@@ -36,6 +36,12 @@ export default {
   components: {
     KRadialFab
   },
+  props: {
+    color: {
+      type: String,
+      default: 'accent'
+    }
+  },
   data () {
     return {
       featureActions: [],

package/map/client/components/KFeaturesFilterManager.vue

@@ -25,8 +25,8 @@
           <q-list separator v-if="filters.length">
             <q-item v-for="item in filters" :key="item.id">
               <q-item-section>
-                <q-item-label>{{ item.label }}</q-item-label>
-                <q-item-label caption>{{ item.description }}</q-item-label>
+                <q-item-label>{{ $t(item.label) }}</q-item-label>
+                <q-item-label caption>{{ item.description ? $t(item.description) : '' }}</q-item-label>
               </q-item-section>
               <q-item-section class="col-auto">
                 <KPanel
@@ -171,13 +171,13 @@ async function apply () {
     }
 
     const engineStyle = _.pick(_.get(CurrentActivity.value, 'activityOptions.engine.style', {}), ['point', 'line', 'polygon'])
-    const layerDefaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', {}))
+    const layerDefaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', _.get(layer, 'cesium.style', {})))
     const templates = generateStyleTemplates(_.merge({}, DefaultStyle, engineStyle, layerDefaultStyle), styles)
     const result = Object.assign(
       {},
       (!_.isEmpty(validFilters) ? { filters: validFilters } : { $unset: { filters: true } }),
-      _.mapKeys(templates, (value, key) => `leaflet.${key}`),
-      _.mapKeys(templates, (value, key) => `cesium.${key}`)
+      _.has(layer, 'leaflet') ? _.mapKeys(templates, (value, key) => `leaflet.${key}`) : {},
+      _.has(layer, 'cesium') ? _.mapKeys(templates, (value, key) => `cesium.${key}`) : {}
     )
     const legendLayer = Object.assign({}, layer, result)
     if (_.isEmpty(validFilters)) delete legendLayer.filters

package/map/client/components/KFilterCondition.vue

@@ -191,17 +191,24 @@ async function onPropertyChange (property) {
     return
   }
 
-  const options = await api.getService(_.get(layer, 'service'))
-    .find({ query: Object.assign({ $distinct: `properties.${property}` }, _.get(layer, 'baseQuery')) })
+  // If layer isn't backed by some feathers service, dont' bother querying the list
+  // of allowed values.
+  if (layer.service) {
+    const options = await api.getService(_.get(layer, 'service'))
+      .find({ query: Object.assign({ $distinct: `properties.${property}` }, _.get(layer, 'baseQuery')) })
 
-  // Filter values that are not in the new options
-  if (value.value && !_.isArray(value.value)) {
-    value.value = options.includes(value.value) ? value.value : null
-  } else if (value.value && _.isArray(value.value)) {
-    value.value = _.filter(value.value, v => options.includes(v))
+    // Filter values that are not in the new options
+    if (value.value && !_.isArray(value.value)) {
+      value.value = options.includes(value.value) ? value.value : null
+    } else if (value.value && _.isArray(value.value)) {
+      value.value = _.filter(value.value, v => options.includes(v))
+    }
+
+    valueOptions.value = options.sort()
+  } else {
+    valueOptions.value = null
   }
 
-  valueOptions.value = options.sort()
   valueIsNumber.value = false
 
   checkPropertyValidity(property)
@@ -246,9 +253,9 @@ function checkComparisonOperatorValidity (value) {
 function checkValueValidity (value) {
   const isDefined = !!value
   // For unique value, check if the value is in the options
-  const valueInOptions = !useMultipleValuesSelect.value && valueOptions.value.includes(value)
+  const valueInOptions = !valueOptions.value || (!useMultipleValuesSelect.value && valueOptions.value.includes(value))
   // For multiple values, check if all values are in the options
-  const valuesInOptions = useMultipleValuesSelect.value && !_.isEmpty(value) && !_.some(value, v => !valueOptions.value.includes(v))
+  const valuesInOptions = !valueOptions.value || (useMultipleValuesSelect.value && !_.isEmpty(value) && !_.some(value, v => !valueOptions.value.includes(v)))
   if (isDefined && (valueInOptions || valuesInOptions)) {
     hasValueErrors.value = false
     return true

package/map/client/components/KLayerEditor.vue

@@ -391,44 +391,51 @@ function apply () {
     ? { pick: values.value.infobox.properties.map(property => property.value) }
     : false
 
-  _.merge(updatedLayer, {
-    isSelectable: display.isSelectable,
-    leaflet: {
-      isVisible: display.isVisible,
-      cluster: display.clustering.leaflet.enabled
-        ? { disableClusteringAtZoom: display.clustering.leaflet.value }
-        : false,
-      minZoom: display.zoom.leaflet.enabled
-        ? display.zoom.leaflet.value.min
-        : false,
-      maxZoom: display.zoom.leaflet.enabled
-        ? display.zoom.leaflet.value.max
-        : false,
-      opacity: display.opacity.enabled
-        ? display.opacity.value
-        : false,
-      popup,
-      tooltip,
-      infobox
-    },
-    cesium: {
-      isVisible: display.isVisible,
-      cluster: display.clustering.cesium.enabled
-        ? { pixelRange: display.clustering.cesium.value }
-        : false,
-      minZoom: display.zoom.cesium.enabled
-        ? leafletToCesiumZoom(display.zoom.cesium.value.max)
-        : false,
-      maxZoom: display.zoom.cesium.enabled
-        ? leafletToCesiumZoom(display.zoom.cesium.value.min)
-        : false,
-      popup,
-      tooltip,
-      infobox
-    }
-  })
-
   const layer = CurrentActivity.value.getLayerByName(props.layerName)
+  const is2DLayer = _.has(layer, 'leaflet')
+  const is3DLayer = _.has(layer, 'cesium')
+  const leaflet = {
+    isVisible: display.isVisible,
+    cluster: display.clustering.leaflet.enabled
+      ? { disableClusteringAtZoom: display.clustering.leaflet.value }
+      : false,
+    minZoom: display.zoom.leaflet.enabled
+      ? display.zoom.leaflet.value.min
+      : false,
+    maxZoom: display.zoom.leaflet.enabled
+      ? display.zoom.leaflet.value.max
+      : false,
+    opacity: display.opacity.enabled
+      ? display.opacity.value
+      : false,
+    popup,
+    tooltip,
+    infobox
+  }
+  const cesium = {
+    isVisible: display.isVisible,
+    cluster: display.clustering.cesium.enabled
+      ? { pixelRange: display.clustering.cesium.value }
+      : false,
+    minZoom: display.zoom.cesium.enabled
+      ? leafletToCesiumZoom(display.zoom.cesium.value.max)
+      : false,
+    maxZoom: display.zoom.cesium.enabled
+      ? leafletToCesiumZoom(display.zoom.cesium.value.min)
+      : false,
+    popup,
+    tooltip,
+    infobox
+  }
+  // Merge all updated values
+  // Ensure we don't create leaflet/cesium objects if the layer is not 2D/3D
+  _.merge(
+    updatedLayer,
+    { isSelectable: display.isSelectable },
+    is2DLayer ? { leaflet } : {},
+    is3DLayer ? { cesium } : {}
+  )
+
   if (isInMemoryLayer(layer)) {
     const previousName = _.get(layer, 'name', '')
     _.merge(layer, updatedLayer)
@@ -450,8 +457,11 @@ function apply () {
       })
     })
     // Add the objects that don't need to be dotified
-    _.forEach(keys, (key) => {
-      dotifiedLayer[key] = _.get(updatedLayer, key, false)
+    // Ensure not to add 2D properties to a 3D layer and vice versa
+    _.forEach(keys, (key, index) => {
+      if ((is2DLayer && index < 4) || (is3DLayer && index >= 4)) {
+        dotifiedLayer[key] = _.get(updatedLayer, key, false)
+      }
     })
 
     api.getService('catalog').patch(layer._id, dotifiedLayer)

package/map/client/components/KMeasureTool.vue

@@ -34,6 +34,12 @@ export default {
   components: {
     KPanel
   },
+  props: {
+    wrapCircle: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       measureMode: 'measure-distance',
@@ -480,7 +486,7 @@ export default {
       state.distToCenter = distance(center, cursor, { units: 'kilometers' }) * 1000 // GeodesicCircle requires radius in m
       this.measureValue = this.formatDistance(state.distToCenter, 'm')
       if (!state.circleLayer) {
-        state.circleLayer = L.geodesiccircle(this.measureCircle.center, { fill: true, steps: 360, radius: state.distToCenter })
+        state.circleLayer = L.geodesiccircle(this.measureCircle.center, { fill: true, wrap: this.wrapCircle, steps: 360, radius: state.distToCenter })
         state.lineLayer = L.polyline([state.center, event.latlng], { dashArray: [5, 5] })
         this.kActivity.map.addLayer(state.circleLayer)
         this.kActivity.map.addLayer(state.lineLayer)

package/map/client/components/KTimezoneMap.vue

@@ -7,7 +7,8 @@
 <script>
 import _ from 'lodash'
 import L from 'leaflet'
-import { api, utils as kCoreUtils } from '../../../core/client'
+import sift from 'sift'
+import { api, Context, utils as kCoreUtils } from '../../../core/client'
 import * as mapMixins from '../mixins/map'
 import * as mixins from '../mixins'
 import { useCatalog, useCurrentActivity } from '../composables'
@@ -66,10 +67,17 @@ export default {
       }
     },
     async refreshBaseLayer () {
-      const layers = await this.getLayers()
-      // Get first visible base layer
-      if (layers.length > 0) {
-        this.addLayer(layers[0])
+      // We get layers coming from global catalog first if any
+      let baseLayers = await this.getLayers()
+      // Then we get layers coming from contextual catalog if any
+      if (typeof this.getContextLayers === 'function') baseLayers = baseLayers.concat(await this.getContextLayers())
+      if (baseLayers.length > 0) {
+        const defaultLayer = _.find(baseLayers, sift({ 'leaflet.isVisible': true }))
+        // If no default layer defined use the first one
+        const baseLayer = (defaultLayer || baseLayers[0])
+        await this.addLayer(baseLayer)
+        // Ensure it is visible if not by default
+        await this.showLayer(baseLayer.name)
       }
     },
     getTimezoneMarker (feature, options) {
@@ -155,16 +163,28 @@ export default {
     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
+    // Use target catalog(s) according to project and filtering options to get base layer
+    // Use global catalog
     const { getLayers } = useCatalog({
       project,
-      layers: { type: 'BaseLayer', 'leaflet.isVisible': true },
-      planetApi
+      layers: { type: 'BaseLayer' },
+      context: 'global'
     })
     // expose
-    return {
+    const expose = {
       getLayers
     }
+    // Use local catalog if any
+    if (Context.get() && planetApi.hasService('catalog', Context.get())) {
+      const { getLayers: getContextLayers } = useCatalog({
+        project,
+        layers: { type: 'BaseLayer' },
+        context: Context.get()
+      })
+      Object.assign(expose, { getContextLayers })
+    }
+
+    return expose
   }
 }
 </script>

package/map/client/components/catalog/KLayersPanel.vue

@@ -6,7 +6,7 @@
     <div>
       <slot name="header">
         <KPanel
-          :content="header"
+          :content="panelHeader"
           :class="headerClass"
         />
         <q-separator inset v-if="header"/>
@@ -79,7 +79,7 @@
       <slot name="footer">
         <q-separator inset v-if="footer"/>
         <KPanel
-          :content="footer"
+          :content="panelFooter"
           :class="footerClass"
         />
       </slot>
@@ -98,7 +98,7 @@ export default {
 <script setup>
 import _ from 'lodash'
 import sift from 'sift'
-import { ref, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { utils as coreUtils, i18n } from '../../../../core/client'
 import { useCurrentActivity, useProject } from '../../composables'
 import { getLayersByCategory } from '../../utils'
@@ -176,6 +176,18 @@ const layersByCategory = ref({})
 const filteredOrphanLayers = ref([])
 const draggedIndex = ref(null)
 
+// Computed
+const panelHeader = computed(() => {
+  let header = _.cloneDeep(props.header)
+  header = coreUtils.bindContent(header, CurrentActivity.value)
+  return header
+})
+const panelFooter = computed(() => {
+  let footer = _.cloneDeep(props.footer)
+  footer = coreUtils.bindContent(footer, CurrentActivity.value)
+  return footer
+})
+
 // Watch
 watchEffect(() => { refresh() })
 
@@ -187,14 +199,17 @@ function getCategoryIcon (category) {
   return _.get(category, 'icon.name', _.get(category, 'icon'), 'las la-bars')
 }
 function isCategoryVisible (category) {
-  const options = category.options || category
   // Show a built-in category only if it has some layers.
   // Indeed, depending on the app configuration, none might be available for this category.
   // User-defined categories are visible by default, even if empty,
   // except if used inside a project as in this case having no layers means we don't want to use this category.
   // App might also force to hide it anyway with the hideIfEmpty option.
   const isEmpty = (layersByCategory.value[category.name].length === 0)
-  return (isEmpty ? !_.get(options, 'hideIfEmpty', !category._id || hasProject()) : true)
+  let hideIfEmpty = !category._id || hasProject() || _.get(CurrentActivity.value, 'project')
+  if (category.options && _.has(category.options, 'hideIfEmpty')) hideIfEmpty = _.get(category.options, 'hideIfEmpty')
+  // Backward compatibility with KDK version <= 2.7 where it could be stored at root level and not in options subobject
+  else if (_.has(category, 'hideIfEmpty')) hideIfEmpty = _.get(category, 'hideIfEmpty')
+  return (isEmpty ? !hideIfEmpty : true)
 }
 function refresh () {
   const { layers, layerCategories, orphanLayers } = CurrentActivity.value
@@ -222,20 +237,15 @@ async function onOrphanLayerUpdated (targetIndex, draggedIndex) {
   const removedLayers = filteredOrphanLayers.value.splice(draggedIndex, 1)
   // As orphan layers are filtered we might have a mismatch between activity list index and panel index
   // so that we find the layer by name in the activity list to perform the same reordering
-  let orphanLayer
-  draggedIndex = _.findIndex(orphanLayers, orphanLayer => orphanLayer.name === layer.name)
-  if (draggedIndex >= 0) {
-    orphanLayer = orphanLayers[draggedIndex]
-    orphanLayers.splice(draggedIndex, 1)
-  }
+  const unfilteredDraggedIndex = _.findIndex(orphanLayers, orphanLayer => orphanLayer.name === layer.name)
+  const unfilteredTargetIndex = (targetLayer ? _.findIndex(orphanLayers, orphanLayer => orphanLayer.name === targetLayer.name) : -1)
+  orphanLayers.splice(unfilteredDraggedIndex, 1)
+  
   // If not -1 it means the orphan layer has been moved within the orphan layers list.
   // Otherwise it has been moved to another category so that we only need to remove it from the list
   if ((removedLayers.length > 0) && targetLayer) {
     filteredOrphanLayers.value.splice(targetIndex, 0, removedLayers[0])
-    // As orphan layers are filtered we might have a mismatch between activity list index and panel index
-    // so that we find the layer by name in the activity list to perform the same reordering
-    targetIndex = _.findIndex(orphanLayers, orphanLayer => orphanLayer.name === targetLayer.name)
-    if (orphanLayer && (targetIndex >= 0)) orphanLayers.splice(targetIndex, 0, orphanLayer)
+    orphanLayers.splice(unfilteredTargetIndex, 0, removedLayers[0])
   }
   await updateOrphanLayersOrder(filteredOrphanLayers.value.map(layer => layer?._id || layer?.name), layer)
 }
@@ -251,7 +261,7 @@ async function onDrop (event, targetIndex) {
   const sourceCategoryId = event.dataTransfer.getData('categoryID')
   const layerName = event.dataTransfer.getData('layerName')
   const layers = _.flatten(_.values(layersByCategory.value)).concat(filteredOrphanLayers.value)
-  const layer = layers.find(layer => layer.name === layerName)
+  const layer = layers.find(layer => layer?.name === layerName)
   const draggedLayerIndex = event.dataTransfer.getData('draggedIndex')
   if (layerName && layerName.length > 0) { // drag source is layer: change layer category
     const currentCategoryLayers = filteredCategories.value[targetIndex]?.layers

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

@@ -18,8 +18,8 @@
             multiple
             clearable
             @filter="filter"
-            @add="toggleLayer"
-            @remove="toggleLayer"
+            @add="addLayer"
+            @remove="removeLayer"
             @clear="clear"
           >
             <template v-slot:prepend>
@@ -94,6 +94,17 @@ const filteredLayers = computed(() =>
 )
 
 // Functions
+function addLayer (layerId) {
+  const layer = props.layers.find((l) => l._id === layerId.value)
+  if (layer?.isVisible) return
+  toggleLayer(layerId)
+}
+function removeLayer (layerId) {
+  const layer = props.layers.find((l) => l._id === layerId.value)
+  if (layer?.isVisible) {
+    toggleLayer(layerId)
+  }
+}
 function toggleLayer (layerId) {
   const layer = props.layers.find((l) => l._id === layerId.value)
   const toggleAction = _.find(layer.actions, { id: 'toggle' })

package/map/client/components/catalog/KViewsPanel.vue

@@ -21,10 +21,11 @@
 import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, computed } from 'vue'
-import { utils, i18n, api, LocalCache, Store } from '../../../../core/client'
+import { utils, i18n, api, LocalCache, Context } from '../../../../core/client'
 import { KGrid } from '../../../../core/client/components'
 import { useCurrentActivity, useProject } from '../../composables'
 import { cacheView, uncacheView } from '../../utils/utils.offline.js'
+import { getViewsProjectQuery } from '../../utils/utils.project.js'
 import { Dialog, Notify } from 'quasar'
 
 // Data
@@ -41,7 +42,7 @@ const baseQuery = computed(() => {
 })
 const filterQuery = computed(() => {
   const query = {}
-  if (project.value) Object.assign(query, { _id: { $in: _.map(project.value.views, '_id') } })
+  if (project.value) Object.assign(query, getViewsProjectQuery(project.value))
   if (!_.isEmpty(searchString.value)) {
     Object.assign(query, { name: { $regex: searchString.value } })
   }
@@ -172,7 +173,7 @@ async function onViewSelected (view, action) {
           spinner: true
         })
         await cacheView(view, getProjectLayers(), {
-          contextId: Store.get('context'),
+          contextId: Context.get(),
           ...values
         })
         view.isCached = true
@@ -190,7 +191,7 @@ async function onViewSelected (view, action) {
         spinner: true
       })
       await uncacheView(view, getProjectLayers(), {
-        contextId: Store.get('context')
+        contextId: Context.get()
       })
       view.isCached = false
       dismiss()