@kalisio/kdk 1.4.2 → 1.6.0

package/lib/map/client/components/catalog/KCatalog.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-scroll-area :style="computedStyle">
+  <k-scroll-area :maxHeight="scrollAreaMaxHeight" :style="innerStyle">
     <q-list dense bordered>
       <slot name="header" />
       <k-layers-selector
@@ -26,7 +26,7 @@
       </template>
       <slot name="footer" />
     </q-list>
-  </q-scroll-area>
+  </k-scroll-area>
 </template>
 
 <script>
@@ -65,10 +65,21 @@ export default {
     }
   },
   computed: {
-    computedStyle () {
-      if (this.$q.screen.lt.md) return 'height: 65vh; min-width: 300px;'
-      if (this.$q.screen.lt.lg) return 'height: 70vh; min-width: 350px;'
-      return 'height: 75vh; min-width: 400px;'
+    innerStyle () {
+      const screenHeight = this.$q.screen.height
+      this.scrollAreaMaxHeight = screenHeight * 0.75 // 75vh
+      let width = 420
+      if (this.$q.screen.lt.sm) {
+        this.scrollAreaMaxHeight = screenHeight * 0.60
+        width = 300
+      } else if (this.$q.screen.lt.md) {
+        this.scrollAreaMaxHeight = screenHeight * 0.65
+        width = 340
+      } else if (this.$q.screen.lt.lg) {
+        this.scrollAreaMaxHeight = screenHeight * 0.70
+        width = 380
+      }
+      return `height: ${this.scrollAreaMaxHeight}px; width: ${width}px`
     },
     layersByCategory () {
       const layers = _.values(this.layers)
@@ -95,6 +106,11 @@ export default {
       return _.difference(layers, categories)
     }
   },
+  data () {
+    return {
+      scrollAreaMaxHeight: 0
+    }
+  },
   methods: {
     getId (category) {
       return _.kebabCase(category.name)
@@ -128,10 +144,13 @@ export default {
       })
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
+    this.$options.components['k-scroll-area'] = this.$load('frame/KScrollArea')
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-layers-selector'] = this.$load('catalog/KLayersSelector')
+  },
+  created () {
     // Categorize layers
     this.categorize()
   }

package/lib/map/client/components/catalog/KImportLayer.vue

@@ -55,7 +55,7 @@ export default {
             field: {
               component: 'form/KFileField',
               label: 'KImportLayer.FILE_FIELD_LABEL',
-              mimeTypes: '.json,.geojson,application/json,application/geo+json'
+              mimeTypes: '.json,.geojson,.gpx,.kml'
             }
           }
         },
@@ -88,8 +88,6 @@ export default {
           },
           featureId: {
             type: 'string',
-            maxLength: 256,
-            minLength: 2,
             default: this.guessFeatureId(),
             field: {
               component: 'form/KSelectField',
@@ -98,7 +96,7 @@ export default {
             }
           }
         },
-        required: ['name', 'featureId']
+        required: ['name']
       }
     },
     onFileFormFieldChanged (field, value) {
@@ -122,10 +120,10 @@ export default {
       if (this.file) {
         const properties = _.keys(_.get(this.file, 'schema.properties', {}))
         for (const prop of properties) {
-          if (prop.toLowerCase().includes('id', 'fid', 'featureid', '_id', 'objectid')) return prop
+          if (_.indexOf(['id', 'fid', 'featureid', '_id', 'objectid'], prop.toLowerCase()) >= 0) return prop
         }
       }
-      return ''
+      return undefined
     },
     onClose () {
       this.$emit('done')
@@ -135,37 +133,12 @@ export default {
       const propertiesResult = this.$refs.propertiesForm.validate()
       if (!fileResult.isValid || !propertiesResult.isValid) return
       this.importing = true
-      // Create the layer accordingly the input fields
-      const geoJson = this.file.content
-      // Create an empty layer used as a container
-      const engine = {
-        type: 'geoJson',
-        isVisible: true,
-        realtime: true
-      }
-      const newLayer = {
+      await this.kActivity.addGeoJsonLayer({
         name: propertiesResult.values.name,
         description: propertiesResult.values.description,
-        type: 'OverlayLayer',
-        icon: 'insert_drive_file',
-        scope: 'user',
-        isDataEditable: true, // Flag as editable
-        featureId: propertiesResult.values.featureId,
-        leaflet: engine,
-        // Avoid sharing reference to the same object although options are similar
-        // otherwise updating one will automatically update the other one
-        cesium: Object.assign({}, engine),
-        schema: {
-          name: this.file.name,
-          content: this.file.schema
-        }
-      }
-      await this.kActivity.addLayer(newLayer)
-      // Assign the features to the layer
-      await this.kActivity.updateLayer(newLayer.name, geoJson)
-      // Zoom to it
-      if (geoJson.bbox) this.kActivity.zoomToBBox(geoJson.bbox)
-      else this.kActivity.zoomToLayer(newLayer.name)
+        schema: { name: this.file.name, content: this.file.schema },
+        featureId: propertiesResult.values.featureId
+      }, this.file.content)
       this.importing = false
       this.$emit('done')
     }

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

@@ -7,8 +7,9 @@
     :buttons="buttons"
     v-model="isModalOpened"
     @opened="$emit('opened')"
-    @closed="$emit('closed')">
-    <div slot="modal-content" id="layer-categories-content">
+    @closed="$emit('closed')"
+  >
+    <div id="layer-categories-content">
       <q-card-section id="layer-categories-list" v-if="mode === 'list'">
         <k-list
           style="min-height: 50px; min-width: 200px"

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

@@ -3,9 +3,9 @@
     <slot name="header" />
     <div v-if="layers.length > 0">
       <template v-for="layer in layers">
-        <div :key="getId(layer)" :id="getId(layer)" class="row items-center justify-between q-pl-md q-pr-sm no-span">
+        <div :key="getId(layer)" :id="getId(layer)" class="full-width row items-center q-pl-md q-pr-sm no-wrap">
           <!-- Layer name -->
-          <div v-bind:class="{
+          <div class="ellipsis" v-bind:class="{
             'text-primary text-weight-bold': layer.isVisible,
             'text-grey-6': layer.isDisabled
           }">
@@ -22,11 +22,11 @@
             </q-tooltip>
           </div>
           <q-space />
-          <q-icon name="las la-exclamation-circle" size="md" color="warning" v-if="layer.isDisabled">
+          <q-icon name="las la-exclamation-circle" size="sm" color="warning" v-if="layer.isDisabled">
             <q-tooltip>{{ $t('KLayersSelector.LAYER_DISABLED') }}</q-tooltip>
           </q-icon>
           <!-- Layer toggle -->
-          <q-toggle :value="layer.isVisible" :disable="layer.isDisabled" @input="onLayerClicked(layer)"/>
+          <q-toggle :value="layer.isVisible" :disable="layer.isDisabled" size="sm" @input="onLayerClicked(layer)" />
           <!-- Layer actions -->
           <k-panel
             :id="`${layer.name}-actions`"
@@ -37,7 +37,7 @@
         </div>
       </template>
     </div>
-    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pb-sm">
+    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pa-sm">
       <k-stamp icon="las la-exclamation-circle" icon-size="sm" :text="$t('KLayersSelector.NO_LAYER_AVAILABLE')" direction="horizontal" />
     </div>
     <slot name="footer" />
@@ -66,7 +66,9 @@ export default {
   },
   methods: {
     getId (layer) {
-      return _.kebabCase(layer.name)
+      const name = _.kebabCase(layer.name)
+      if (_.startsWith(name, 'layers-')) return name
+      return 'layers-' + name
     },
     layerIcon (layer) {
       return utils.getIconName(layer, 'icon')

package/lib/map/client/components/catalog/KWeatherLayersSelector.vue

@@ -33,7 +33,7 @@
       </template>
     </k-layers-selector>
   </div>
-  <div v-else class="row justify-center q-pb-sm">
+  <div v-else class="row justify-center q-pa-sm">
     <k-stamp icon="las la-exclamation-circle" icon-size="sm" :text="$t('KWeatherLayersSelector.NO_MODEL_AVAILABLE')" direction="horizontal" />
   </div>
 </template>

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

@@ -1,10 +1,10 @@
 <template>
-  <div :style="widgetStyle()">
+  <div :style="widgetStyle">
     <div v-if="schema && properties" class="fit row">
       <k-panel id="information-box-actions" class="q-pa-sm" :content="actions" direction="vertical" />
-      <q-scroll-area class="col fit" :thumb-style="thumbStyle" :bar-style="barStyle">
+      <k-scroll-area class="col" :maxHeight="widgetHeight">
         <k-view class="q-pa-md" :schema="schema" :values="properties" :separators="true" />
-      </q-scroll-area>
+      </k-scroll-area>
     </div>
     <div v-else class="absolute-center">
       <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KInformationBox.NO_FEATURE_PROPERTIES')" />
@@ -14,7 +14,7 @@
 
 <script>
 import _ from 'lodash'
-import { colors, copyToClipboard, exportFile } from 'quasar'
+import { copyToClipboard, exportFile } from 'quasar'
 import { baseWidget } from '../../../../core/client/mixins'
 import { generatePropertiesSchema } from '../../utils'
 
@@ -34,18 +34,6 @@ export default {
   },
   data () {
     return {
-      thumbStyle: {
-        right: '4px',
-        borderRadius: '5px',
-        backgroundColor: colors.getBrand('primary'),
-        width: '6px'
-      },
-      barStyle: {
-        right: '2px',
-        borderRadius: '5px',
-        backgroundColor: colors.getBrand('accent'),
-        width: '10px'
-      },
       schema: null,
       properties: null,
       actions: []
@@ -115,11 +103,14 @@ export default {
       }
     }
   },
-  created () {
+  beforeCreate () {
     // laod the required components
+    this.$options.components['k-scroll-area'] = this.$load('frame/KScrollArea')
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-view'] = this.$load('form/KView')
     this.$options.components['k-stamp'] = this.$load('frame/KStamp')
+  },
+  created () {
     // Registers the actions
     this.actions = {
       default: [

package/lib/map/client/components/widget/KMapillaryViewer.vue

@@ -1,6 +1,7 @@
 <template>
-  <div :style="widgetStyle()">
+  <div :style="widgetStyle">
     <div class="fit row">
+      <q-resize-observer @resize="onResized" />
       <k-panel id="mapillary-actions" class="q-pa-sm" :content="actions" direction="vertical" />
       <div class="col" id="mapillary-container"></div>
     </div>
@@ -123,6 +124,9 @@ export default {
       this.bearing = await this.mapillaryViewer.getBearing()
       this.centerMap()
       this.kActivity.updateSelectionHighlight('mapillary', this.getMarkerFeature())
+    },
+    onResized () {
+      if (this.mapillaryViewer) this.mapillaryViewer.resize()
     }
   },
   beforeCreate () {

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

@@ -1,5 +1,5 @@
 <template>
-  <div :style="widgetStyle()">
+  <div :style="widgetStyle">
     <div class="fit row">
       <q-resize-observer @resize="onResized" />
       <!-- Actions -->
@@ -32,12 +32,15 @@ import centroid from '@turf/centroid'
 import chroma from 'chroma-js'
 import Chart from 'chart.js'
 import 'chartjs-plugin-annotation'
+import Papa from 'papaparse'
 import { getTimeInterval } from '../../utils'
+import { downloadAsBlob } from '../../../../core/client/utils'
+import { Units } from '../../../../core/client/units'
 import { Time } from '../../../../core/client/time'
 import { baseWidget } from '../../../../core/client/mixins'
 
 export default {
-  name: 'k-time-series-widget',
+  name: 'k-time-series',
   inject: ['kActivity'],
   mixins: [baseWidget],
   props: {
@@ -101,6 +104,10 @@ export default {
     hasVariable (name, properties) {
       return (properties[name] && Array.isArray(properties[name]))
     },
+    getSelectedRunTime () {
+      // Set default run as latest
+      return this.runTime || _.last(this.runTimes)
+    },
     setupTimeTicks () {
       if (!this.times || !this.graphWidth) return
       // Choose the right step size to ensure we have almost 100px between hour ticks
@@ -145,24 +152,50 @@ export default {
         this.timeRange = null
       }
     },
+    setupAvailableRunTimes () {
+      this.runTimes = []
+      const runTime = this.probedLocation.runTime
+      this.probedVariables.forEach(variable => {
+        if (!variable.runTimes) return
+        // Check if we are targetting a specific level
+        const name = (this.kActivity.selectedLevel ? `${variable.name}-${this.kActivity.selectedLevel}` : variable.name)
+
+        if (runTime && runTime[name]) this.runTimes.push(runTime[name])
+      })
+      // Make union of all available run times
+      this.runTimes = _.union(...this.runTimes).map(time => moment.utc(time)).sort((a, b) => a - b)
+    },
     setupAvailableDatasets () {
       this.datasets = []
       const time = this.probedLocation.time || this.probedLocation.forecastTime
+      const runTime = this.probedLocation.runTime
       const properties = this.probedLocation.properties
       // Generate a color palette in case the variables does not provide it
       const colors = _.shuffle(chroma.scale('Spectral').colors(this.probedVariables.length))
       this.probedVariables.forEach((variable, index) => {
         // Check if we are targetting a specific level
         const name = (this.kActivity.selectedLevel ? `${variable.name}-${this.kActivity.selectedLevel}` : variable.name)
-        const unit = variable.units[0]
+        // Falback to base unit
+        const baseUnit = variable.units[0]
+        // Get default unit for this quantity instead if available
+        const defaultUnit = Units.getDefaultUnit(baseUnit)
+        const unit = (variable.units.includes(defaultUnit) ? defaultUnit : baseUnit)
         const label = this.$t(variable.label) || variable.label
         // Aggregated variable available for feature ?
         if (this.hasVariable(name, properties)) {
+          // Build data structure as expected by visualisation
+          let values = properties[name].map((value, index) => ({ x: time[name][index], y: Units.convert(value, baseUnit, unit) }))
+          // Keep only selected value if multiple are provided for the same time (eg different forecasts)
+          if (variable.runTimes && !_.isEmpty(_.get(runTime, name)) && this.getSelectedRunTime()) {
+            values = values.filter((value, index) => (runTime[name][index] === this.getSelectedRunTime().toISOString()))
+          } else values = _.uniqBy(values, 'x')
+          // Then transform to date object as expected by visualisation
+          values = values.map((value) => Object.assign(value, { x: new Date(value.x) })).filter(this.filter)
           this.datasets.push(_.merge({
-            label: `${label} (${unit})`,
+            label: `${label} (${Units.getUnitSymbol(unit)})`,
             borderColor: colors[index],
             backgroundColor: colors[index],
-            data: properties[name].map((value, index) => ({ x: new Date(time[name][index]), y: value })).filter(this.filter),
+            data: values,
             yAxisID: unit
           }, _.omit(variable.chartjs, 'yAxis')))
         }
@@ -176,7 +209,11 @@ export default {
       this.probedVariables.forEach(variable => {
         // Check if we are targetting a specific level
         const name = (this.kActivity.selectedLevel ? `${variable.name}-${this.kActivity.selectedLevel}` : variable.name)
-        const unit = variable.units[0]
+        // Falback to base unit
+        const baseUnit = variable.units[0]
+        // Get default unit for this quantity instead if available
+        const defaultUnit = Units.getDefaultUnit(baseUnit)
+        const unit = (variable.units.includes(defaultUnit) ? defaultUnit : baseUnit)
         // Variable available for feature ?
         // Check also if axis already created
         if (this.hasVariable(name, properties) && !_.find(this.yAxes, axis => axis.id === unit)) {
@@ -185,7 +222,7 @@ export default {
             position: isLeft ? 'left' : 'right',
             scaleLabel: {
               display: true,
-              labelString: unit
+              labelString: Units.getUnitSymbol(unit)
             }
           }, _.get(variable.chartjs, 'yAxis', {})))
           // Alternate axes by default
@@ -276,6 +313,7 @@ export default {
           // Setup the graph
           this.setupAvailableTimes()
           this.setupTimeTicks()
+          this.setupAvailableRunTimes()
           this.setupAvailableDatasets()
           this.setupAvailableYAxes()
 
@@ -381,6 +419,14 @@ export default {
     onUpdateSpan (span) {
       this.$store.set('timeseries.span', span)
     },
+    onUpdateRun (runTime) {
+      this.runTime = runTime
+      // Update tooltip action
+      const action = _.find(this.actions, { id: 'run-options' })
+      action.tooltip = this.$t('KTimeSeries.RUN') + ' (' + Time.format(this.getSelectedRunTime(), 'date.short') +
+        ' - ' + Time.format(this.getSelectedRunTime(), 'time.short') + ')'
+      this.setupGraph()
+    },
     updateProbedLocationHighlight () {
       if (!this.probedLocation) return
       const windDirection = (this.kActivity.selectedLevel ? `windDirection-${this.kActivity.selectedLevel}` : 'windDirection')
@@ -397,6 +443,20 @@ export default {
     onCenterOn () {
       this.kActivity.centerOnSelection()
     },
+    onExportSeries () {
+      const json = this.times.map(time => {
+        const row = {
+          [this.$t('KTimeSeries.TIME_LABEL')]: time.toISOString()
+        }
+        this.datasets.forEach(dataset => {
+          const value = _.find(dataset.data, item => item.x.toISOString() === time.toISOString())
+          row[dataset.label] = value ? value.y : null
+        })
+        return row
+      })
+      const csv = Papa.unparse(json)
+      downloadAsBlob(csv, this.$t('KTimeSeries.SERIES_EXPORT_FILE'), 'text/csv;charset=utf-8;')
+    },
     updateProbedLocationName () {
       this.probedLocationName = ''
       if (!this.probedLocation) return
@@ -420,9 +480,10 @@ export default {
           option.default = true
         }
       })
-      // Registers the actions
+      // Registers the base actions
       this.actions = [
         { id: 'center-view', icon: 'las la-eye', tooltip: 'KTimeSeries.CENTER_ON', handler: this.onCenterOn },
+        { id: 'export-feature', icon: 'las la-file-download', tooltip: this.$t('KTimeSeries.EXPORT_SERIES'), handler: this.onExportSeries },
         {
           component: 'input/KOptionsChooser',
           id: 'timespan-options',
@@ -432,6 +493,8 @@ export default {
           on: { event: 'option-chosen', listener: this.onUpdateSpan }
         }
       ]
+      // Clear previous run timle setup if any
+      this.runTime = null
       // Then manage selection
       this.kActivity.addSelectionHighlight('time-series')
       this.kActivity.centerOnSelection()
@@ -459,8 +522,28 @@ export default {
           (name ? ` (${name})` : ` (${longitude.toFixed(2)}°, ${latitude.toFixed(2)}°)`))
       }
       this.updateProbedLocationName()
-      this.setupGraph()
+      await this.setupGraph()
       this.updateProbedLocationHighlight()
+
+      // When forecast data are available allow to select wich run to use
+      if (this.runTimes && (this.runTimes.length > 1)) {
+        // Select latest runTime as default option
+        const runOptions = this.runTimes.map(runTime => ({
+          label: Time.format(runTime, 'date.short') + ' - ' + Time.format(runTime, 'time.short'),
+          value: runTime
+        }))
+        _.last(runOptions).default = true
+        // Registers the action
+        this.actions.push({
+          component: 'input/KOptionsChooser',
+          id: 'run-options',
+          icon: 'las la-clock',
+          tooltip: this.$t('KTimeSeries.RUN') + ' (' + Time.format(this.getSelectedRunTime(), 'date.short') +
+            ' - ' + Time.format(this.getSelectedRunTime(), 'time.short') + ')',
+          options: runOptions,
+          on: { event: 'option-chosen', listener: this.onUpdateRun }
+        })
+      }
     }
   },
   created () {

package/lib/map/client/i18n/map_en.json

@@ -11,7 +11,11 @@
     "ALERTS_LIMIT": "Too much alerts to display all of them",
     "FILE_IMPORT_ERROR": "File import has failed",
     "CANNOT_CHECK_ALERT_MISSING_SERVICE": "Last check failed due to unavailable service",
-    "CANNOT_CHECK_ALERT_MISSING_DATA": "Last check failed due to unavailable data"
+    "CANNOT_CHECK_ALERT_MISSING_DATA": "Last check failed due to unavailable data",
+    "INVALID_GEOJSON_FILE": "{{file}} is not a valid GeoJSON file",
+    "INVALID_GEOJSON_CRS": "{{file}} has an unsupported Coordinates Reference System (CRS)",
+    "INVALID_GPX_FILE": "{{file}} is not a valid GPX file",
+    "INVALID_KML_FILE": "{{file}} is not a valid KML file"
   },
   "mixins": {
     "navigator": {
@@ -21,7 +25,7 @@
       "IMPORTED_DATA_NAME": "My data"
     },
     "legend": {
-      "CONVERT_UNITS": "{{layer}}: convert to {{unit}}"
+      "CONVERT_UNITS": "Click to change unit"
     },
     "activity": {
       "ADD_LAYER": "Add a new layer",
@@ -65,7 +69,8 @@
       "SYNCHRONIZE_TIMELINE_LABEL": "Synchronize with timeline",
       "TOOLS": "Tools",
       "SAVE_LAYER_EDITION_CHANGES": "Save edition changes",
-      "DISCARD_LAYER_EDITION_CHANGES": "Discard edition changes"
+      "DISCARD_LAYER_EDITION_CHANGES": "Discard edition changes",
+      "CAPTURE_VIEW": "Capture the view"
     },
     "timeseries": {
       "FORECAST_PROBE": "Forecast"
@@ -202,21 +207,6 @@
     "LAYER_CATEGORY_ICON_FIELD_LABEL": "Select an icon for this category",
     "LAYER_CATEGORY_LAYERS_FIELD_LABEL": "Select the layers in this category",
     "LAYER_CATEGORY_EXCLUSIVE_FIELD_LABEL": "Make selection exclusive within this category",
-    "UPDATE_SETTINGS_TITLE": "Your settings",
-    "TIME_FORMAT_SETTINGS": "Time/Date format",
-    "TIME_FORMAT_SHORT_TIME_FIELD_LABEL": "Short time format",
-    "TIME_FORMAT_SHORT_TIME_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
-    "TIME_FORMAT_LONG_TIME_FIELD_LABEL": "Long time format",
-    "TIME_FORMAT_LONG_TIME_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
-    "TIME_FORMAT_SHORT_DATE_FIELD_LABEL": "Short date format",
-    "TIME_FORMAT_SHORT_DATE_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
-    "TIME_FORMAT_LONG_DATE_FIELD_LABEL": "Long date format",
-    "TIME_FORMAT_LONG_DATE_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
-    "TIME_FORMAT_SHORT_YEAR_FIELD_LABEL": "Short year format",
-    "TIME_FORMAT_SHORT_YEAR_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
-    "TIME_FORMAT_LONG_YEAR_FIELD_LABEL": "Long year format",
-    "TIME_FORMAT_LONG_YEAR_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
-    "TIME_FORMAT_UTC_FIELD_LABEL": "UTC time display mode",
     "MAP_SETTINGS": "Map parameters",
     "RESTORE_VIEW_FIELD_LABEL": "Save current extent",
     "RESTORE_LAYERS_FIELD_LABEL": "Save active layers",
@@ -224,6 +214,7 @@
     "LOCATION_FORMAT_HELPER": "<a target='_blank' href='https://github.com/nerik/formatcoords#formatting'>&#x1F6C8;</a>",
     "TIMELINE_SETTINGS": "Timeline parameters",
     "TIMELINE_STEP": "Timeline step (in minutes)",
+    "TIMELINE_INTERVAL": "Real-time data refresh update interval",
     "TIMESERIES_SETTINGS": "Timeseries parameters",
     "TIMESERIES_SPAN": "Timeseries span (in hours)"
   },
@@ -244,6 +235,13 @@
       "COPY_LOCATION_LABEL": "Copy the coordinates in your clipboard using this button.",
       "LOCATION_TRACKING_LABEL": "Drag the screen to display the coordinates of its center and release to keep track of it.",
       "TRACK_BACK_LABEL": "Then stop tracking by going back to the actions.",
+      "MEASURE_LABEL": "Activate measure tools using this button.",
+      "MEASURE_DISTANCE_LABEL": "Measure a distance using this button.",
+      "MEASURE_DISTANCE_DETAILS_LABEL": "Draw the line segment(s) you'd like to measure on the map and hover any elements to get measure information.",
+      "MEASURE_AREA_LABEL": "Measure an area using this button.",
+      "MEASURE_AREA_DETAILS_LABEL": "Draw the polygons(s) you'd like to measure on the map and hover any elements to get measure information.",
+      "CLEAR_MEASURE_LABEL": "Clear your current measurements using this button.",
+      "MEASURE_BACK_LABEL": "Then stop measuring by going back to the actions.",
       "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."
@@ -359,13 +357,19 @@
   "KTimeSeries": {
     "NO_DATA_AVAILABLE": "No data available",
     "CENTER_ON": "Center the view on the probed location",
-    "SPAN": "Timeseries span"
+    "SPAN": "Timeseries span",
+    "RUN": "Forecast run",
+    "TIME_LABEL": "Time",
+    "EXPORT_SERIES": "Export data",
+    "SERIES_EXPORT_FILE": "Series.csv"
   },
   "KCatalogPanel": {
     "BASE_LAYERS": "Base Layers",
     "TERRAIN_LAYERS": "Terrain layers",
     "OVERLAY_LAYERS": "My layers",
     "MEASURE_LAYERS": "Measure layers",
+    "INFRASTRUCTURE_LAYERS": "Infrastructures",
+    "ADMINISTRATIVE_LAYERS": "Administrative",
     "METEO_LAYERS": "Meteo forecasts",
     "BUSINESS_LAYERS": "Business layers",
     "CAPTURED_LAYERS": "Captured views",
@@ -410,9 +414,10 @@
   },
   "KLayerStyleForm": {
     "BASE": "Base properties",
-    "DEFAULT_VISIBILITY": "Visibilité par défaut",
+    "DEFAULT_VISIBILITY": "Visible by default",
     "MIN_ZOOM": "Visible from level",
     "MAX_ZOOM": "Visible until level",
+    "SELECTABLE": "Selectable",
     "LAYER_OPACITY": "Transparent layer",
     "OPACITY": "Opacity",
     "POINTS": "Markers",
@@ -549,5 +554,31 @@
     "EDIT_PROPERTIES": "Edit feature properties",
     "DRAG_FEATURES": "Move features",
     "REMOVE_FEATURES": "Remove features"
+  },
+  "KCaptureToolbar": {
+    "SD_LABEL": "Standard Definition",
+    "SD_DESCRIPTION": "4:3, 640 x 480",
+    "HD_LABEL": "High Definition",
+    "HD_DESCRIPTION": "16:9, 1280 x 720",
+    "FHD_LABEL": "Full HD",
+    "FHD_DESCRIPTION": "16:9, 1920 x 1080",
+    "QHD_LABEL": "Quad HD",
+    "QHD_DESCRIPTION": "16:9, 2560 x 1440",
+    "2K_LABEL": "2K",
+    "2K_DESCRIPTION": "1:1.77, 2048 x 1080",
+    "4K_LABEL": "4K or Ultra HD",
+    "4K_DESCRIPTION": "1:1.9, 3840 x 2160",
+    "8K_LABEL": "8K or Full Ultra HD",
+    "8K_DESCRIPTION": "16∶9, 7680 x 4320",
+    "CAPTURE_ACTION": "Capture view",
+    "CAPTURING_VIEW": "Waiting for capturing view"
+  },
+  "KMeasureTool": {
+    "TOOL_BUTTON_LABEL": "Display the measure tool",
+    "CLEAR": "Clear all measurements",
+    "MEASURE_DISTANCE": "Measure a distance",
+    "MEASURE_AREA": "Measure an area",
+    "DISPLAY_MEASURE_VALUE": "Display measure values",
+    "CLICK_TO_CHANGE_UNIT": "Click to change unit"
   }
 }