@kalisio/kdk 2.5.2 → 2.6.0

package/test/api/map/grid-sources.test.js

@@ -155,9 +155,7 @@ describe('map:grid-source', () => {
   describe('geotiff', () => {
     const geotiffOptions = {
       geotiff: {
-        url: 'http://kMap.test/data.tif',
-        // because nock doesnt know howto intercept fecth
-        forceXHR: true
+        url: 'http://kMap.test/data.tif'
       }
     }
 

package/test/api/map/index.test.js

@@ -18,7 +18,7 @@ describe('map:services', () => {
   let app, server, port, // baseUrl,
     userService, userObject, catalogService, defaultLayers,
     zones, zonesService, vigicruesStationsService, nbStations, vigicruesObsService,
-    adsbObsService, items, eventListeners, eventCount, eventData
+    adsbObsService, openradiationService, items, eventListeners, eventCount, eventData
 
   function eventsOn (service) {
     eventListeners = {}
@@ -617,6 +617,64 @@ describe('map:services', () => {
   // Let enough time to process
     .timeout(10000)
 
+  it('create and feed the openradiation service', async () => {
+    // Create the service
+    const openradiationLayer = _.find(defaultLayers, { name: 'openradiation' })
+    expect(openradiationLayer).toExist()
+    expect(openradiationLayer.service === 'openradiation').beTrue()
+    await createFeaturesService.call(app, {
+      collection: openradiationLayer.service,
+      featureId: openradiationLayer.featureId,
+      featureLabel: openradiationLayer.featureLabel,
+      variables: openradiationLayer.variables,
+      // Raise simplified events
+      skipEvents: ['updated'],
+      simplifyEvents: ['created', 'patched', 'removed']
+    })
+    openradiationService = app.getService(openradiationLayer.service)
+    expect(openradiationService).toExist()
+    // Feed the collection
+    const observations = fs.readJsonSync(path.join(__dirname, 'data/openradiation.json'))
+    await openradiationService.create(observations)
+  })
+  // Let enough time to process
+    .timeout(5000)
+
+  it('performs geometry and value aggregation on openradiation service, similar to gradient path query', async () => {
+    const aggregationQuery = {
+      'properties.userId': 'Yann29',
+      time: {
+        $gte: new Date('2025-05-24T12:00:00.00Z').toISOString(),
+        $lte: new Date('2025-05-24T18:15:00.00Z').toISOString()
+      },
+      $groupBy: 'apparatusId',
+      $aggregate: ['geometry', 'value'],
+      $sort: { time: 1 }
+    }
+    // Aggregation requires feature ID index to be built so we add some time to do so
+    await utility.promisify(setTimeout)(5000)
+    const result = await openradiationService.find({ query: Object.assign({}, aggregationQuery) })
+    expect(result.features.length).to.equal(1)
+    result.features.forEach(feature => {
+      expect(feature.time).toExist()
+      expect(feature.time.geometry).toExist()
+      expect(feature.time.geometry.length).to.equal(82)
+      expect(feature.time.geometry[0].isBefore(feature.time.geometry[1])).beTrue()
+      expect(feature.time.value).toExist()
+      expect(feature.time.value.length).to.equal(82)
+      expect(feature.time.value[0].isBefore(feature.time.value[1])).beTrue()
+      expect(feature.time.value[0].isSame(feature.time.geometry[0])).beTrue()
+      expect(feature.geometry.type).to.equal('GeometryCollection')
+      expect(feature.geometry.geometries).toExist()
+      expect(feature.geometry.geometries.length).to.equal(82)
+      expect(feature.properties).toExist()
+      expect(feature.properties.value).toExist()
+      expect(feature.properties.value.length).to.equal(82)
+    })
+  })
+  // Let enough time to process
+    .timeout(10000)
+
   it('clears the layers', async () => {
     for (let i = 0; i < defaultLayers.length; ++i) {
       await catalogService.remove(defaultLayers[i]._id)
@@ -641,6 +699,7 @@ describe('map:services', () => {
     await vigicruesStationsService.Model.drop()
     await vigicruesObsService.Model.drop()
     await adsbObsService.Model.drop()
+    await openradiationService.Model.drop()
     await catalogService.Model.drop()
     await userService.Model.drop()
     await app.db.disconnect()

package/test/api/map/style.test.js

@@ -6,7 +6,7 @@ import map, { hooks } from '../../../map/api/index.js'
 const { util, expect } = chai
 
 describe('map:styles', () => {
-  let app, server, port, usersService, stylesService
+  let app, server, port, usersService, stylesService, tagsService
 
   before(async () => {
     chailint(chai, util)
@@ -22,6 +22,8 @@ describe('map:styles', () => {
     await app.configure(core)
     usersService = app.getService('users')
     expect(usersService).toExist()
+    tagsService = app.getService('tags')
+    expect(tagsService).toExist()
     await app.configure(map)
     stylesService = app.getService('styles')
     expect(stylesService).toExist()
@@ -53,6 +55,33 @@ describe('map:styles', () => {
   })
     .timeout(10000)
 
+  it('create and update tag', async () => {
+    const tag = await tagsService.create({ service: 'styles', property: 'tags', name: 'emissary', description: 'My description', color: '#F05F40' })
+    const style = await stylesService.create({ name: 'style2', tags: [{ name: 'emissary', description: 'My description', color: '#F05F40' }] })
+    const response = await stylesService.find({ query: { name: 'style2' } })
+    expect(response.data.length > 0).beTrue()
+    expect(response.data[0]._id.toString()).to.equal(style._id.toString())
+    expect(response.data[0].tags.length).to.equal(1)
+    expect(response.data[0].tags[0].name).to.equal('emissary')
+
+    // Update tag
+    const updatedTag = await tagsService.patch(tag._id, { color: '#FF0000' })
+    expect(updatedTag.color).to.equal('#FF0000')
+    const updatedStyle = await stylesService.get(style._id)
+    expect(updatedStyle.tags.length).to.equal(1)
+    expect(updatedStyle.tags[0].color).to.equal('#FF0000')
+  })
+
+  it('delete tag', async () => {
+    const tag = await tagsService.find({ query: { name: 'emissary' } })
+    expect(tag.data.length > 0).beTrue()
+    const deletedTag = await tagsService.remove(tag.data[0]._id)
+    expect(deletedTag._id.toString()).to.equal(tag.data[0]._id.toString())
+    const style = await stylesService.find({ query: { name: 'style2' } })
+    expect(style.data.length > 0).beTrue()
+    expect(style.data[0].tags.length).to.equal(0)
+  })
+
   // Cleanup
   after(async () => {
     if (server) await server.close()

package/test.api.js

@@ -1 +1 @@
-export * from './test/client/index.js'
+export * from './test/api/index.js'

package/vite/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <Suspense>
+    <!-- App content (2D) -->
+    <MapActivity style="width: 100%; height: 100%; position: fixed; left: 0;"/>
+  </Suspense>
+</template>
+
+<script setup>
+// For debug purpose with src hot reload
+//import { kdkCore } from '../client.map.js'
+// To test library build
+import { kdkCore } from '../client/kdk.client.map.js'
+import MapActivity from './MapActivity.vue'
+
+let map, globe, updatingMap, updatingGlobe
+
+kdkCore.composables.useSession()
+</script>

package/vite/AppWithGlobe.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div v-show="false" id="globe-credit"/>
+    <q-btn color="primary" class="fixed-top-left" style="z-index: 1" :label="synchronize ? 'UNSYNC VIEWS' : 'SYNC VIEWS'" @click="onSynchronize"/>
+    <Suspense>
+      <div>
+        <!-- App content (2D) -->
+        <MapActivity :ref="onMapCreated" @map-ready="onMapReady" style="width: 50%; height: 100%; position: fixed; left: 0;"/>
+        <!-- App content (3D) -->
+        <GlobeActivity :ref="onGlobeCreated" @globe-ready="onGlobeReady" style="width: 50%; height: 100%; position: fixed; right: 0;"/>
+      </div>
+    </Suspense>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// For debug purpose with src hot reload
+//import { kdkCore } from '../client.js'
+// To test library build
+import { kdkCore } from '../client/kdk.client.js'
+import MapActivity from './MapActivityWithGlobe.vue'
+import GlobeActivity from './GlobeActivity.vue'
+
+let map, globe, updatingMap, updatingGlobe
+const synchronize = ref(false)
+
+kdkCore.composables.useSession()
+
+function onSynchronize () {
+  synchronize.value = !synchronize.value
+}
+function onMapCreated (ref) {
+  if (ref && !map) {
+    map = ref
+  }
+}
+function onGlobeCreated (ref) {
+  if (ref && !globe) {
+    globe = ref
+  }
+}
+function onMapReady () {
+  map.$engineEvents.on('map-ready', () => {
+    map.map.on('moveend', updateGlobe)
+  })
+}
+function onGlobeReady () {
+  globe.$engineEvents.on('globe-ready', () => {
+    globe.viewer.camera.moveEnd.addEventListener(updateMap)
+  })
+}
+function updateGlobe() {
+  if (!synchronize.value || updatingMap) return
+  updatingMap = true
+  const center = map.getCenter()
+  globe.center(center.longitude, center.latitude, zoomLevelToAltitude(center.zoomLevel))
+  updatingMap = false
+}
+function updateMap() {
+  if (!synchronize.value || updatingGlobe) return
+  updatingGlobe = true
+  const center = globe.getCenter()
+  map.center(center.longitude, center.latitude, altitudeToZoomLevel(center.altitude))
+  updatingGlobe = false
+}
+// Empirical formula found on https://stackoverflow.com/questions/36544209/converting-altitude-to-z-level-and-vice-versa
+function altitudeToZoomLevel(altitude) {
+  var A = 40487.57
+  var B = 0.00007096758
+  var C = 91610.74
+  var D = -40467.74
+
+  return D+(A-D)/(1+Math.pow(altitude/C, B))
+}
+function zoomLevelToAltitude(zoomLevel) {
+  var A = 40487.57
+  var B = 0.00007096758
+  var C = 91610.74
+  var D = -40467.74
+
+  return C * Math.pow((A-D)/(zoomLevel-D) -1, 1/B)
+}
+</script>

package/vite/GlobeActivity.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="globe" :ref="configureGlobe">
+    <q-resize-observer @resize="onGlobeResized" />
+  </div>
+</template>
+
+<script>
+// For debug purpose with src hot reload
+//import { kdkCore, kdkMap } from '../client.globe.js'
+// To test library build
+import { kdkCore, kdkMap } from '../client/kdk.client.js'
+
+const name = 'globeActivity'
+const baseActivityMixin = kdkCore.mixins.baseActivity(name)
+
+export default {
+  mixins: [
+    kdkMap.mixins.globe.baseGlobe,
+    kdkMap.mixins.globe.geojsonLayers,
+    kdkMap.mixins.globe.fileLayers,
+    kdkMap.mixins.globe.style,
+    kdkMap.mixins.globe.tooltip,
+    kdkMap.mixins.globe.popup,
+    kdkMap.mixins.globe.activity,
+    kdkMap.mixins.globe.opendapLayers,
+    baseActivityMixin,
+    kdkMap.mixins.activity,
+    kdkMap.mixins.style,
+    kdkMap.mixins.featureService,
+    kdkMap.mixins.infobox,
+    kdkMap.mixins.weacast,
+    kdkMap.mixins.context
+  ],
+  methods: {
+    async configureGlobe (container) {
+      // Avoid reentrance during awaited operations
+      if (!container || this.globeContainer) return
+      this.globeContainer = container
+      // Not yet ready wait for capabilities to be there
+      if (!kdkCore.Store.get('capabilities.api')) return
+      const token = kdkCore.Store.get('capabilities.api.cesium.token')
+      // Wait until viewer is ready
+      await this.initializeGlobe(container, token)
+    }
+  },
+  created () {
+    this.setCurrentActivity(this)
+  },
+  async setup () {
+    const activity = kdkMap.composables.useActivity(name)
+    const expose = {
+      ...activity,
+      ...activity.CurrentActivityContext
+    }
+    return expose
+  }
+}
+</script>

package/vite/MapActivity.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="map" :ref="configureMap">
+    <q-resize-observer @resize="onMapResized" />
+  </div>
+</template>
+
+<script>
+// For debug purpose with src hot reload
+//import { kdkCore, kdkMap } from '../client.map.js'
+// To test library build
+import { kdkCore, kdkMap } from '../client/kdk.client.map.js'
+
+const name = 'mapActivity'
+const baseActivityMixin = kdkCore.mixins.baseActivity(name)
+
+export default {
+  mixins: [
+    kdkMap.mixins.map.baseMap,
+    kdkMap.mixins.map.canvasLayers,
+    kdkMap.mixins.map.geojsonLayers,
+    kdkMap.mixins.map.heatmapLayers,
+    kdkMap.mixins.map.fileLayers,
+    kdkMap.mixins.map.editLayers,
+    kdkMap.mixins.map.style,
+    kdkMap.mixins.map.tooltip,
+    kdkMap.mixins.map.popup,
+    kdkMap.mixins.map.activity,
+    kdkMap.mixins.map.tiledMeshLayers,
+    kdkMap.mixins.map.tiledWindLayers,
+    kdkMap.mixins.map.mapillaryLayers,
+    kdkMap.mixins.map.gsmapLayers,
+    kdkMap.mixins.map.pmtilesLayers,
+    baseActivityMixin,
+    kdkMap.mixins.activity,
+    kdkMap.mixins.style,
+    kdkMap.mixins.featureService,
+    kdkMap.mixins.infobox,
+    kdkMap.mixins.weacast,
+    kdkMap.mixins.levels,
+    kdkMap.mixins.context
+  ],
+  methods: {
+    async configureMap (container) {
+      // Avoid reentrance during awaited operations
+      if (!container || this.mapContainer) return
+      this.mapContainer = container
+      // Wait until map is ready
+      await this.initializeMap(container)
+    }
+  },
+  created () {
+    this.setCurrentActivity(this)
+  },
+  async setup () {
+    const activity = kdkMap.composables.useActivity(name)
+    const expose = {
+      ...activity,
+      ...activity.CurrentActivityContext
+    }
+    return expose
+  }
+}
+</script>

package/vite/MapActivityWithGlobe.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="map" :ref="configureMap">
+    <q-resize-observer @resize="onMapResized" />
+  </div>
+</template>
+
+<script>
+// For debug purpose with src hot reload
+//import { kdkCore, kdkMap } from '../client.js'
+// To test library build
+import { kdkCore, kdkMap } from '../client/kdk.client.js'
+
+const name = 'mapActivity'
+const baseActivityMixin = kdkCore.mixins.baseActivity(name)
+
+export default {
+  mixins: [
+    kdkMap.mixins.map.baseMap,
+    kdkMap.mixins.map.canvasLayers,
+    kdkMap.mixins.map.geojsonLayers,
+    kdkMap.mixins.map.heatmapLayers,
+    kdkMap.mixins.map.fileLayers,
+    kdkMap.mixins.map.editLayers,
+    kdkMap.mixins.map.style,
+    kdkMap.mixins.map.tooltip,
+    kdkMap.mixins.map.popup,
+    kdkMap.mixins.map.activity,
+    kdkMap.mixins.map.tiledMeshLayers,
+    kdkMap.mixins.map.tiledWindLayers,
+    kdkMap.mixins.map.mapillaryLayers,
+    kdkMap.mixins.map.gsmapLayers,
+    kdkMap.mixins.map.pmtilesLayers,
+    baseActivityMixin,
+    kdkMap.mixins.activity,
+    kdkMap.mixins.style,
+    kdkMap.mixins.featureService,
+    kdkMap.mixins.infobox,
+    kdkMap.mixins.weacast,
+    kdkMap.mixins.levels,
+    kdkMap.mixins.context
+  ],
+  methods: {
+    async configureMap (container) {
+      // Avoid reentrance during awaited operations
+      if (!container || this.mapContainer) return
+      this.mapContainer = container
+      // Wait until map is ready
+      await this.initializeMap(container)
+    }
+  },
+  created () {
+    this.setCurrentActivity(this)
+  },
+  async setup () {
+    const activity = kdkMap.composables.useActivity(name)
+    const expose = {
+      ...activity,
+      ...activity.CurrentActivityContext
+    }
+    return expose
+  }
+}
+</script>

package/vite/README.md

@@ -0,0 +1,169 @@
+# Using KDK with Vite
+
+This repository contains the Vite configuration required to:
+* build the KDK client-side library,
+* run application samples based on the KDK.
+
+The objectives of such experiment is to be able to:
+1. use the KDK outside our [skeleton](https://kalisio.github.io/skeleton/) in the most simple way (i.e. without configuring the Vue app too specifically),
+2. use the KDK inside an application built with Vite instead of Webpack, which is now the main choice when building apps with Quasar.
+
+> [!NOTE]
+> First you need to install required dependencies:
+```bash
+cd vite
+yarn install
+```
+
+## Library build
+
+You can retrieve the library files in the KDK :open_file_folder: [client](../client) folder and put it into an external application, to avoid the burden of importing [Cesium](https://cesium.com/) in applications not requiring 3D capabilities the following files are available:
+* 2D capabilities only - minified: `kdk.client.map.min.js`
+* 2D/3D capabilities - minified: `kdk.client.min.js`
+* 2D capabilities only - unminified, `kdk.client.map.js`
+* 2D/3D capabilities - unminified: `kdk.client.js`
+
+You can build the KDK client-side libraries like this:
+```bash
+// 2D/3D capabilities - minified/unminified + extras
+yarn build:libs
+// Copy extra files required for external apps like css, i18n, schemas, etc.
+yarn build:libs:extras
+// 2D capabilities only - minified
+yarn build:lib
+// 2D/3D capabilities - minified
+yarn build:lib:globe
+// 2D capabilities only - unminified
+yarn build:lib:debug
+// 2D/3D capabilities - unminified
+yarn build:lib:globe:debug
+```
+
+> [!NOTE]
+> Unminified versions for debug purpose are build by defining the `DEBUG` environment variable.
+
+## Application samples
+
+> [!NOTE]
+> Application samples require unminified library versions to be built first.
+
+There are two application samples available:
+* a 2D map view,
+* a 2D map view side-by-side with a 3D globe view that can be synchronized.
+
+You can run both samples in dev mode like this:
+```bash
+// 2D view only
+yarn dev
+// 2D/3D views
+yarn dev:globe
+```
+
+You can produce application distribution files like this:
+```bash
+// 2D view only
+yarn build:app
+// 2D/3D views
+yarn build:app:globe
+```
+
+You should then serve the `dist` folder with eg `http-server` NodeJs module like this:
+```bash
+// Install module first if required 
+npm install -g http-server
+cd dist
+http-server --cors --port 3000
+```
+
+## Changes and remaining issues
+
+In order to switch from Webpack to Vite and to build a stand alone library the following issues have been tackled or remain to be.
+
+> [!NOTE]
+> It was required to add all frontend dependencies required to build with Vite to the main KDK `package.json` file at the root level.
+> Indeed, it appears that if a `node_modules` directory is available at the root level Vite will use it instead of the one located in the directory of the Vite configuration.
+
+Some useful links and plugins:
+* https://cesium.com/blog/2024/02/13/configuring-vite-or-webpack-for-cesiumjs/
+* https://quasar.dev/start/vite-plugin/
+* https://github.com/davidmyersdev/vite-plugin-node-polyfills
+* https://github.com/unplugin/unplugin-vue-components
+
+### Avoid depending on application specific elements
+
+Typically using the router in a library does not make really sense as an app might not use it, if required add a check:
+```js
+const router = useRouter()
+if (router) router.XXX
+```
+
+### Get rid of global properties in the Vue app
+
+We were used to inject some objects to be available globally on any Vue component of the app (eg `$store, $api, $config, ...`), we should now directly import the target object:
+```js
+// Don't do
+app.config.globalProperties.$store = Store
+this.$store.patch(...)
+// Do
+import { Store } from ''
+Store.patch(...)
+```
+
+> [!NOTE]
+> As the `$tie` utility function is used in a lot of components it has not yet been changed.
+
+### Avoid importing internal module pathes
+
+When building a library Vite requires each external dependency to be listed individually in the build configuration.
+In order to make this smooth we read dependencies from the `package.json` file but this only works when importing the module directly not internal pathes:
+```js
+// Don't do
+import reactive from 'feathers-reactive/dist/feathers-reactive.js'
+// Do
+import { rx as reactive } from 'feathers-reactive'
+```
+
+> [!NOTE]
+> This might require changes to dependent modules, notably if not really provided to be natively used as ES modules.
+
+### Get rid of dynamic imports
+
+Sometimes named imports are not useful because they are static, e.g. the name of the function that will be called is actually defined by a runtime variable.
+Avoid using dynamic import for such use case but prefer importing all named elements with a global alias.
+```js
+// Don't do
+Cesium = await import(`cesium`)
+// Do
+import * as Cesium from 'cesium'
+```
+
+### Avoid aliases to multiple directories
+
+We used to define aliases to dynamic load resources like schemas, components, etc. like this:
+```js
+alias: {
+	'@schemas': [
+		path.resolve(__dirname, 'node_modules/@kalisio/kdk/core/common/schemas'),
+		path.resolve(__dirname, 'node_modules/@kalisio/kdk/map/common/schemas')
+	]
+}
+```
+
+However it does not seem that alias can target multiple directories with Vite, resources should be placed in a single directory whenever possible:
+```js
+alias: {
+	'@schemas': fileURLToPath(new URL('node_modules/@kalisio/kdk/extras/schemas', import.meta.url))
+}
+```
+
+> [!NOTE]
+> Moving components to a single directory is hard as they are part of the source code split into `core`/`map` directories.
+> This would probably require to rewrite the `loadComponent` utility function using the `@component` alias.
+
+### How to integrate Quasar langage packs ?
+
+Not yet found a solution to integrate it with Vite, an alias does not seem to work.
+
+### How to integrate Vue components ?
+
+Not yet tested how to integrate single-file components into the library with Vite, only JS files are considered so far.