@kalisio/kdk 2.3.2 → 2.4.0

package/extras/css/core.variables.scss

@@ -15,12 +15,7 @@ $warning: #d09931 !default;
 $tooltip-fontsize: 12px !default;
 $tooltip-background: $accent !default;
 
-// Pane
-$left-pane-width: 320px !default;
-
 // Window
-$window-min-width: 300px !default;
-$window-min-height: 300px !default;
 $window-background: #ffffff !default;
 $window-border-style: solid !default;
 $window-border-width: 1px !default;
@@ -31,10 +26,39 @@ $window-header-background: #eeeeee !default;
 $window-header-hover-background: #dddddd !default;
 $window-controls-size: 1rem !default;
 
-// Sticky
-$sticky-z-index: 1000 !default;
-
 // Table: quasar has eg $table-hover-background but nothing for background
 $table-background: #fff !default;
 
+// Scrollbar
+.q-scrollarea__thumb {
+  background: $primary;
+  border-radius: 3px;
+  opacity: .2;
+}
+
+/* TODO try to specify style the same as above
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+  background: transparent;
+  overflow: visible;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: $primary;
+  border-radius: 3px;
+  -webkit-transition: background-color .28s ease-in-out;
+  transition: background-color .28s ease-in-out;
+  opacity: .2;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: $primary
+}*/
 
+// Anchor
+a {
+  color: $accent;
+  cursor: pointer;
+}

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

@@ -15,8 +15,7 @@ export default {
     get: [],
     create: [
       coreHooks.checkUnique({ field: 'name', query: (query, hook) => { query.type = _.get(hook, 'data.type') } }),
-      coreHooks.convertObjectIDs(['baseQuery.layer']),
-      coreHooks.convertToString(['schema.content', 'filters']),
+      coreHooks.convertToString(['baseQuery', 'schema.content', 'filters']),
       setNow('createdAt', 'updatedAt'),
       // This allow to use keys for base queries like 'properties.xxx': 'yyy'
       (hook) => { _.set(hook, 'params.mongodb.checkKeys', false) }
@@ -24,16 +23,14 @@ export default {
     update: [
       coreHooks.populatePreviousObject,
       coreHooks.checkUnique({ field: 'name', query: (query, hook) => { query.type = _.get(hook, 'params.previousItem.type') } }),
-      coreHooks.convertObjectIDs(['baseQuery.layer']),
-      coreHooks.convertToString(['schema.content', 'filters']),
+      coreHooks.convertToString(['baseQuery', 'schema.content', 'filters']),
       discard('createdAt', 'updatedAt'),
       setNow('updatedAt')
     ],
     patch: [
       coreHooks.populatePreviousObject,
       coreHooks.checkUnique({ field: 'name', query: (query, hook) => { query.type = _.get(hook, 'params.previousItem.type') } }),
-      coreHooks.convertObjectIDs(['baseQuery.layer']),
-      coreHooks.convertToString(['schema.content', 'filters']),
+      coreHooks.convertToString(['baseQuery', 'schema.content', 'filters']),
       discard('createdAt', 'updatedAt'),
       setNow('updatedAt')
     ],
@@ -44,7 +41,8 @@ export default {
 
   after: {
     all: [
-      coreHooks.convertToJson(['schema.content', 'filters'])
+      coreHooks.convertToJson(['baseQuery', 'schema.content', 'filters']),
+      coreHooks.convertObjectIDs(['baseQuery.layer'])
     ],
     find: [
       // Merge built-in categoriessublegends with user-defined ones for global catalog only

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

@@ -20,7 +20,7 @@ export default {
   before: {
     all: [coreHooks.marshallTimeQuery, coreHooks.convertObjectIDs(['layer'])],
     find: [coreHooks.marshallComparisonQuery, coreHooks.marshallSortQuery, marshallSpatialQuery,
-      coreHooks.distinct, aggregateFeaturesQuery, coreHooks.aggregationQuery, fuzzySearch, coreHooks.diacriticSearch],
+      coreHooks.distinct, aggregateFeaturesQuery, coreHooks.aggregationQuery, fuzzySearch, coreHooks.diacriticSearch()],
     get: [],
     create: [coreHooks.processTimes(['time']), fullResult, emitEvents],
     update: [coreHooks.processTimes(['time']), fullResult, emitEvents],

package/map/client/cesium/utils/utils.style.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import chroma from 'chroma-js'
 import moment from 'moment'
 import { Color } from 'cesium'
-import { Time, Units } from '../../../../core/client/index.js'
+import { Time, Units, TemplateContext } from '../../../../core/client/index.js'
 import { convertPointStyleToSimpleStyle, convertLineStyleToSimpleStyle, convertPolygonStyleToSimpleStyle, convertSimpleStyleColors,
          convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
          PointStyleTemplateMappings, LineStyleTemplateMappings, PolygonStyleTemplateMappings } from '../../utils/utils.style.js'
@@ -47,7 +47,7 @@ function processStyle (style, feature, options, mappings) {
   const cesiumOptions = options.cesium || options
   // We allow to template style properties according to feature,
   // because it can be slow you have to specify a subset of properties
-  const context = { properties: feature.properties, feature, chroma, moment, Units, Time }
+  const context = Object.assign({ properties: feature.properties, feature, chroma, moment, Units, Time }, TemplateContext.get())
   if (cesiumOptions.template) {
     // Create the map of variables
     if (options.variables) context.variables = _.reduce(options.variables,
@@ -56,6 +56,15 @@ function processStyle (style, feature, options, mappings) {
       _.set(style, _.get(mappings, _.kebabCase(entry.property), entry.property), entry.compiler(context))
     })
   }
+
+  // visibility attribute can be used to hide individual features
+  // visibility is true by default but can also be a string when it's
+  // a result of a lodash steing template evaluation
+  let visibility = _.get(style, 'style.visibility', true)
+  if (typeof visibility === 'string') visibility = visibility === 'true'
+  // The 'kdk-hidden-features' pane is created when the leaflet map is initialized
+  // if (!visibility) _.set(style, `style.${type}.pane`, 'kdk-hidden-features')
+
   return style
 }
 

package/map/client/components/KAttribution.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="q-pa-sm">
+    <KShape
+      class="text-weight-bold"
+      :options="{
+        shape: 'circle',
+        color: 'white',
+        stroke: {
+          color: 'primary',
+          width: '2'
+        },
+        text: {
+          label: 'i',
+          color: 'primary'
+        }
+      }"
+    />
+    <q-popup-proxy
+      id="attributions-popup"
+      transition-show="scale"
+      transition-hide="scale"
+      anchor="center left"
+      self="bottom right"
+    >
+      <div
+        id="attributions-banner"
+        class="bg-white text-primary text-center q-col-gutter-y-xs"
+      >
+        <!-- Header Content -->
+        <div v-if="header">
+          <KContent :content="header" :class="headerClass" />
+        </div>
+        <!-- Main Content -->
+        <div
+          id="attributions-content"
+          v-html="sanitizedAttributions"
+          class="text-caption q-py-none q-px-sm"
+        />
+        <!-- Footer Content -->
+        <div v-if="footer">
+          <KContent :content="footer" :class="footerClass" />
+        </div>
+      </div>
+    </q-popup-proxy>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import config from 'config'
+import { ref, computed, watch } from 'vue'
+import { Document } from '../../../core/client/document.js'
+import { KShape } from '../../../core/client/components/media'
+import { useCurrentActivity } from '../composables'
+import KContent from '../../../core/client/components/KContent.vue'
+
+// Data
+const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
+const attributions = ref({})
+const header = ref(_.get(config, 'attribution.header', []))
+const headerClass = ref(_.get(config, 'attribution.headerClass', ''))
+const footer = ref(_.get(config, 'attribution.footer', []))
+const footerClass = ref(_.get(config, 'attribution.footerClass', ''))
+
+// Computed
+const sanitizedAttributions = computed(() => {
+  let content = ''
+  _.forOwn(attributions.value, (attribution, layer) => {
+    content += `${attribution}<br>`
+  })
+  return Document.sanitizeHtml(content)
+})
+
+// Watch
+watch(CurrentActivity, (newActivity, oldActivity) => {
+  if (oldActivity) {
+    // remove listeners
+    oldActivity.value.$engineEvents.off('layer-shown', onShowLayer)
+    oldActivity.value.$engineEvents.off('layer-hidden', onHideLayer)
+  }
+  if (newActivity) {
+    // setup attribution
+    newActivity.getLayers().forEach((layer) => {
+      if (newActivity.isLayerVisible(layer.name)) {
+        onShowLayer(layer)
+      }
+    })
+    // install listeners
+    newActivity.$engineEvents.on('layer-shown', onShowLayer)
+    newActivity.$engineEvents.on('layer-hidden', onHideLayer)
+  }
+}, { immediate: true })
+
+// Functions
+function onShowLayer (layer) {
+  if (layer.attribution) {
+    logger.debug(`[KDK] Add ${layer.name} to attribution`)
+    _.set(attributions.value, _.kebabCase(layer.name), layer.attribution)
+  }
+}
+function onHideLayer (layer) {
+  if (layer.attribution) {
+    logger.debug(`[KDK] Remove ${layer.name} from attribution`)
+    _.unset(attributions.value, _.kebabCase(layer.name))
+  }
+}
+</script>

package/map/client/components/KPositionIndicator.vue

@@ -28,8 +28,8 @@ export default {
   inject: ['kActivity'],
   props: {
     size: {
-      type: String,
-      default: '3rem'
+      type: Number,
+      default: 48
     }
   },
   data () {
@@ -61,30 +61,23 @@ export default {
       id: 'position-target',
       component: 'QImg',
       src: 'icons/kdk/target.svg',
-      height: this.size,
-      width: this.size,
-      class: 'fixed-center k-position-indicator'
+      height: `${this.size}px`,
+      width: `${this.size}px`,
+      position: 'center',
+      offset: [0, -this.size / 2],
+      style: 'pointer-events: none; background-color: #00000020; border-radius: 50%;'
     }
     kdkCoreUtils.bindContent(target, this.kActivity)
-    const components = Layout.getPage().components
+    const stickies = Layout.getStickies().components
     // Required to use splice when modifying an object inside an array to make it reactive
-    components.splice(components.length, 0, target)
+    stickies.splice(stickies.length, 0, target)
     this.kActivity.$engineEvents.on('move', this.updatePosition)
   },
   beforeUnmount () {
-    const components = Layout.getPage().components
+    const stickies = Layout.getStickies().components
     // Required to use splice when modifying an object inside an array to make it reactive
-    components.splice(_.findIndex(components, component => component.id === 'position-target'), 1)
+    stickies.splice(_.findIndex(stickies, component => component.id === 'position-target'), 1)
     this.kActivity.$engineEvents.off('move', this.updatePosition)
   }
 }
 </script>
-
-<style lang="scss">
-  .k-position-indicator {
-    pointer-events: none;
-    border-radius: 50%;
-    background-color: #00000020;
-    z-index: $sticky-z-index;
-  }
-</style>

package/map/client/components/KProjectMenu.vue

@@ -17,11 +17,11 @@
       menu-anchor="bottom middle"
       menu-self="top middle">
       <template v-slot:default>
-        <KList
+        <KGrid
           service="projects"
           :base-query="{ _id: { $ne: projectId } }"
-          @selection-changed="onProjectSelected"
           :dense="true"
+          @selection-changed="onProjectSelected"
         />
       </template>
     </q-btn-dropdown>
@@ -30,12 +30,12 @@
 
 <script>
 import _ from 'lodash'
-import { KList } from '../../../core/client/components'
+import { KGrid } from '../../../core/client/components'
 import { useProject } from '../composables'
 
 export default {
   components: {
-    KList
+    KGrid
   },
   inject: ['kActivity'],
   computed: {

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

@@ -0,0 +1,74 @@
+<template>
+  <q-expansion-item
+    :header-class="headerClass"
+    :icon="icon"
+    :label="name"
+    :default-opened="defaultOpened"
+    expand-separator
+    @update:model-value="onToggled"
+  >
+    <component
+      :is="category.componentInstance"
+      :layers="layers"
+      :forecastModels="forecastModels"
+      :options="category.options || category">
+    </component>
+  </q-expansion-item>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { i18n, LocalStorage } from '../../../../core/client'
+
+// Props
+const props = defineProps({
+  category: {
+    type: Object,
+    required: true
+  },
+  layers: {
+    type: Array,
+    required: true
+  },
+  forecastModels: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Data
+const localStorageKey = 'catalog-categories'
+
+// Computed
+const name = computed(() => {
+  return i18n.tie(props.category.name)
+})
+const headerClass = computed(() => {
+  const defaultClass = 'text-' + _.get(props.category, 'icon.color', 'primary')
+  return _.get(props.category, 'headerClass', defaultClass)
+})
+const icon = computed(() => {
+  _.get(props.category, 'icon.name', _.get(props.category, 'icon'))
+})
+const defaultOpened = computed(() => {
+  const states = LocalStorage.get(localStorageKey)
+  if (states && _.has(states, getId())) return states[getId()]
+  // if category explicitly specify default opened state, use that
+  if (_.has(props.category, 'options.open')) return props.category.options.open
+  // otherwise, default open when there's only one category
+  // return this.filteredCategories.length === 1
+  // robin: to not break existing apps, just return false when options.open is not defined
+  return false
+})
+
+// Functions
+function getId () {
+  return _.kebabCase(_.replace(props.category.name, 'Categories.', ''))
+}
+function onToggled (value) {
+  const states = LocalStorage.get(localStorageKey, {})
+  states[getId()] = value
+  LocalStorage.set(localStorageKey, states)
+}
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <k-modal
+  <KModal
     id="layer-categories-modal"
     :title="title"
     :toolbar="toolbar"
@@ -8,37 +8,48 @@
   >
     <div id="layer-categories-content">
       <q-card-section id="layer-categories-list" v-if="mode === 'list'">
-        <k-list
+        <KGrid
           style="min-height: 50px; min-width: 200px"
           service="catalog"
           :renderer="categoryRenderer"
-          :nbItemsPerPage="8"
+          :nbItemsPerPage="12"
           :base-query="baseQuery"
           :filter-query="filter.query"
-          @collection-refreshed="refreshCategories" />
+          :append-items="true"
+          @collection-refreshed="refreshCategories"
+        />
       </q-card-section>
       <q-card-section id="layer-category-add" v-if="mode === 'add'">
-        <k-form :ref="onAddFormCreated" :schema="categorySchema" style="min-width: 300px" />
+        <KForm
+          :ref="onAddFormCreated"
+          :schema="categorySchema"
+          style="min-width: 300px"
+        />
       </q-card-section>
       <q-card-section id="layer-category-edit" v-if="mode === 'edit'">
-        <k-form :ref="onEditFormCreated" @form-ready="onEditFormReady" :schema="categorySchema" style="min-width: 300px" />
+        <KForm
+          :ref="onEditFormCreated"
+          :schema="categorySchema"
+          style="min-width: 300px"
+          @form-ready="onEditFormReady"
+        />
       </q-card-section>
     </div>
-  </k-modal>
+  </KModal>
 </template>
 
 <script>
 import _ from 'lodash'
 import { mixins as kCoreMixins } from '../../../../core/client'
-import { KModal, KAction, KPanel, KList } from '../../../../core/client/components'
+import { KModal, KGrid, KAction, KPanel, KForm } from '../../../../core/client/components'
 
 export default {
-  name: 'k-layer-categories',
   components: {
     KModal,
+    KGrid,
     KAction,
     KPanel,
-    KList
+    KForm
   },
   mixins: [
     kCoreMixins.baseModal
@@ -187,10 +198,11 @@ export default {
       filter: this.$store.get('filter'),
       sorter: this.$store.get('sorter'),
       mode: 'list',
-      count: 0,
+      count: undefined,
       savingCategory: false,
       categoryRenderer: {
         component: 'collection/KItem',
+        class: 'col-12',
         actions: [{
           id: 'edit-layer-category',
           icon: 'las la-file-alt',
@@ -246,7 +258,7 @@ export default {
           if (!_.isEmpty(category.layers)) category.description = category.layers.join(',')
         })
       } else {
-        if (!this.filter.pattern) this.mode = 'add'
+        if (this.count === 0 && _.isEmpty(this.filter.pattern)) this.mode = 'add'
       }
     },
     onAddFormCreated (ref) {