@kalisio/kdk 2.6.4 → 2.7.0

package/map/client/mixins/map/mixin.tiled-wind-layers.js

@@ -1,7 +1,9 @@
 import _ from 'lodash'
+import moment from 'moment'
 import 'leaflet-velocity'
 import { Time } from '../../../../core/client/time.js'
 import { Events } from '../../../../core/client/events.js'
+import * as time from '../../../../core/client/utils/utils.time.js'
 import { makeGridSource, extractGridSourceConfig } from '../../../common/grid.js'
 import { TiledWindLayer } from '../../leaflet/TiledWindLayer.js'
 
@@ -20,20 +22,27 @@ export const tiledWindLayers = {
       // Build u & v grid sources
       const [gridKey, gridConf] = extractGridSourceConfig(options)
       // Check API to be used in case the layer is coming from a remote "planet"
-      const weacastApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
-      const uSource = makeGridSource(gridKey, { weacastApi })
-      const vSource = makeGridSource(gridKey, { weacastApi })
+      const planetApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
+      const uSource = makeGridSource(gridKey, { planetApi })
+      const vSource = makeGridSource(gridKey, { planetApi })
       uSource.setup(gridConf)
       vSource.setup(gridConf)
       if (uSource.updateCtx) {
         // define variables for source's dynamic properties
-        const gatewayToken = (weacastApi.hasConfig('gatewayJwt') ? await weacastApi.get('storage').getItem(weacastApi.getConfig('gatewayJwt')) : null)
-        if (gatewayToken) {
-          uSource.updateCtx.jwtToken = gatewayToken
-          vSource.updateCtx.jwtToken = gatewayToken
-        }
-        uSource.updateCtx.windComponent = _.get(options, 'meteoElements[0]')
-        vSource.updateCtx.windComponent = _.get(options, 'meteoElements[1]')
+        const apiJwt = (planetApi.hasConfig('apiJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('apiJwt')) : null)
+        const gatewayJwt = (planetApi.hasConfig('gatewayJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('gatewayJwt')) : null)
+        Object.assign(uSource.updateCtx, {
+          apiJwt, gatewayJwt, moment, Time, ...time,
+          // This one is for backward compatibility
+          jwtToken: gatewayJwt,
+          windComponent: _.get(options, 'meteoElements[0]')
+        })
+        Object.assign(vSource.updateCtx, {
+          apiJwt, gatewayJwt, ...time,
+          // This one is for backward compatibility
+          jwtToken: gatewayJwt,
+          windComponent: _.get(options, 'meteoElements[1]')
+        })
       }
 
       return new TiledWindLayer(layerOptions, uSource, vSource)

package/map/client/mixins/mixin.activity.js

@@ -2,7 +2,7 @@ import config from 'config'
 import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
-import { Store } from '../../../core/client/store.js'
+import { Context } from '../../../core/client/context.js'
 import { Events } from '../../../core/client/events.js'
 import { api } from '../../../core/client/api.js'
 import { isDataOperation } from '../../../core/client/utils/utils.services.js'
@@ -50,19 +50,11 @@ export const activity = {
       return []
     },
     async getCatalogLayers () {
-      const query = {}
-      // Do we get layers coming from project ?
-      if (this.project) {
-        Object.assign(query, this.catalogProjectQuery ? this.catalogProjectQuery : getCatalogProjectQuery(this.project))
-      } else {
-        this.project = null
-      }
-
+      const context = Context.get()
       // We get layers coming from global catalog first if any
-      let layers = await getLayers({ query })
+      let layers = await getLayers({ context: 'global', project: this.project })
       // Then we get layers coming from contextual catalog if any
-      const context = Store.get('context')
-      if (context) layers = layers.concat(await getLayers({ query, context }))
+      if (context) layers = layers.concat(await getLayers({ context, project: this.project }))
       return layers
     },
     async addCatalogLayer (layer) {
@@ -86,18 +78,18 @@ export const activity = {
     },
     async getCatalogCategories () {
       // We get categories coming from global catalog first if any
-      let categories = await getCategories()
+      let categories = await getCategories({ context: 'global', project: this.project })
       // Then we get categories coming from contextual catalog if any
-      const context = Store.get('context')
-      if (context) categories = categories.concat(await getCategories({ context }))
+      const context = Context.get()
+      if (context) categories = categories.concat(await getCategories({ context, project: this.project }))
       return categories
     },
     async getCatalogSublegends () {
       // We get sublegends coming from global catalog first if any
-      let sublegends = await getSublegends()
+      let sublegends = await getSublegends({ context: 'global', project: this.project })
       // Then we get categories coming from contextual catalog if any
-      const context = Store.get('context')
-      if (context) sublegends = sublegends.concat(await getSublegends({ context }))
+      const context = Context.get()
+      if (context) sublegends = sublegends.concat(await getSublegends({ context, project: this.project }))
       return sublegends
     },
     async addCatalogCategory (category) {
@@ -110,7 +102,8 @@ export const activity = {
       for (let i = 0; i < layerCategories.length; i++) {
         this.addCatalogCategory(layerCategories[i])
       }
-      await this.refreshOrphanLayers()
+      // Update orphan layers list (ie layers without any category) based on current loaded categories/layers
+      this.orphanLayers = await this.getOrphanLayers()
       this.reorderLayers()
     },
     getOrphanLayerByName (name) {
@@ -162,7 +155,8 @@ export const activity = {
       for (let i = 0; i < catalogLayers.length; i++) {
         await this.addCatalogLayer(catalogLayers[i])
       }
-      await this.refreshOrphanLayers()
+      // Update orphan layers list (ie layers without any category) based on current loaded categories/layers
+      this.orphanLayers = await this.getOrphanLayers()
       // We need at least an active background
       const hasVisibleBaseLayer = catalogLayers.find((layer) => (layer.type === 'BaseLayer') && layer.isVisible)
       if (!hasVisibleBaseLayer) {
@@ -171,10 +165,9 @@ export const activity = {
       }
       this.reorderLayers()
     },
-    // Update orphan layers list (ie layers without any category) based on current loaded categories/layers
-    async refreshOrphanLayers () {
+    async getOrphanLayers () {
       const layersByCategory = getLayersByCategory(this.layers, this.layerCategories)
-      this.orphanLayers = getOrphanLayers(this.layers, layersByCategory)
+      return getOrphanLayers(this.layers, layersByCategory)
     },
     isInMemoryLayer: layers.isInMemoryLayer,
     isUserLayer: layers.isUserLayer,
@@ -322,9 +315,6 @@ export const activity = {
         await this.resetLayer(layer)
       }
     },
-    async onRemoveCategory (category) {
-      // virtual method
-    },
     async onRemoveLayer (layer) {
       // Stop any running edition
       if ((typeof this.isLayerEdited === 'function') && this.isLayerEdited(layer)) await this.stopEditLayer('reject')
@@ -336,11 +326,10 @@ export const activity = {
       // Removing the layer should automatically update all projects
     },
     async onAddOrphanLayer (layer) {
-      if (!this.isOrphanLayer(layer)) {
-        await this.refreshOrphanLayers()
-      }
+      // FIXME: Not easy to detect if the new layer will be orphan except by recomputing everything
+      this.orphanLayers = await this.getOrphanLayers()
     },
-    onRemoveOrphanLayer (layer) {
+    async onRemoveOrphanLayer (layer) {
       if (this.isOrphanLayer(layer)) {
         _.remove(this.orphanLayers, orphanLayer => layer._id ? orphanLayer._id === layer._id : orphanLayer.name === layer.name)
       }
@@ -420,6 +409,8 @@ export const activity = {
       if (layer && (typeof layer.getPlanetApi === 'function')) {
         planetApi = layer.getPlanetApi()
       }
+      // Check if layer was visible before refreshing it
+      const isVisibleBeforeRefresh = this.isLayerVisible(layer.name)
       if (layer) {
         // Stop any running edition
         if ((typeof this.isLayerEdited === 'function') && this.isLayerEdited(layer)) await this.stopEditLayer('reject')
@@ -439,6 +430,8 @@ export const activity = {
         await setEngineJwt([layer], planetApi)
         processTranslations(layer)
         await this.addCatalogLayer(layer)
+        // Check if not already visible, because addCatalogLayer might have shown it in some cases
+        if (isVisibleBeforeRefresh && !this.isLayerVisible(layer.name)) await this.showLayer(layer.name)
       }
     },
     requestRefreshLayer (layer, event) {

package/map/client/mixins/mixin.feature-selection.js

@@ -1,15 +1,17 @@
+import _ from 'lodash'
+import { ForecastProbeId, updateTimeSeries } from '../utils/utils.time-series.js'
+import { Layout } from '../../../core/client/layout.js'
+
 export const featureSelection = {
   watch: {
     'selection.items': {
       handler () {
-        this.updateHighlights()
-        this.handleWidget(this.getWidgetForSelection())
+        this.updateSelection()
       }
     },
     'probe.item': {
       handler () {
-        this.updateHighlights()
-        this.handleWidget(this.getWidgetForProbe())
+        this.updateSelection()
       }
     }
   },
@@ -19,11 +21,45 @@ export const featureSelection = {
       this.getSelectedItems().forEach(item => {
         this.highlight(item.feature || item.location, item.layer)
       })
-      if (this.hasProbedLocation()) this.highlight(this.getProbedLocation(), this.getProbedLayer())
+    },
+    async updateProbedLocationHighlight () {
+      if (this.hasProbedLocation()) {
+        this.highlight(this.getProbedLocation(), this.getProbedLayer() || { name: ForecastProbeId })
+      }
+    },
+    async updateSelection () {
+      this.updateHighlights()
+      await this.updateTimeSeries()
+      // As probed location depends on time series do this after
+      await this.updateProbedLocationHighlight()
+      if (this.hasProbedLocation() || this.hasSelectedItems()) {
+        this.handleWidget(this.getWidgetForProbe() || this.getWidgetForSelection())
+      }
+    },
+    async updateTimeSeries () {
+      if (!this.state) return
+      const timeSeries = await updateTimeSeries(this.state.timeSeries || [])
+      this.state.timeSeries = timeSeries
     },
     handleWidget (widget) {
       // If window already open on another widget keep it
       if (widget && (widget !== 'none') && !this.isWidgetWindowVisible(widget)) this.openWidget(widget)
     }
+  },
+  mounted () {
+    this.$engineEvents.on('forecast-model-changed', this.updateSelection)
+    this.$engineEvents.on('selected-level-changed', this.updateSelection)
+    // We use debounce here to avoid multiple refresh when editing settings for instance
+    this.requestTimeSeriesUpdate = _.debounce(() => this.updateTimeSeries(), 250)
+    this.$events.on('timeseries-group-by-changed', this.requestTimeSeriesUpdate)
+    this.$events.on('units-changed', this.requestTimeSeriesUpdate)
+    this.$events.on('time-current-time-changed', this.updateProbedLocationHighlight)
+  },
+  beforeUnmount () {
+    this.$engineEvents.off('forecast-model-changed', this.updateSelection)
+    this.$engineEvents.off('selected-level-changed', this.updateSelection)
+    this.$events.off('timeseries-group-by-changed', this.updateTimeSeries)
+    this.$events.off('units-changed', this.requestTimeSeriesUpdate)
+    this.$events.off('time-current-time-changed', this.requestTimeSeriesUpdate)
   }
 }

package/map/client/planets.js

@@ -24,7 +24,7 @@ export const Planets = {
 
     const client = await createClient(options)
     setupApi.bind(client)(options)
-    client.on('authenticated', (data) => {
+    client.on('login', (data) => {
       // Store API gateway token if any
       if (data.gatewayToken) client.get('storage').setItem(options.gatewayJwt, data.gatewayToken)
     })

package/map/client/readers/reader.kml.js

@@ -2,7 +2,7 @@ import logger from 'loglevel'
 import _ from 'lodash'
 import { kml } from '@tmcw/togeojson'
 import { i18n } from '../../../core/client/i18n.js'
-import { convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle } from '../utils/utils.style.js'
+import { convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle, kmlStyleSpecialProperties } from '../utils/utils.style.js'
 
 export const KMLReader = {
   read (files, options) {
@@ -39,13 +39,12 @@ export const KMLReader = {
 
 function getExtraPropertiesFromKMLByName (document) {
   const properties = {}
-  const propertiesToAdd = ['extrude', 'altitudeMode']
   const placemarks = document.getElementsByTagName('Placemark')
   _.forEach(placemarks, placemark => {
     const nameElements = placemark.getElementsByTagName('name')
     if (!nameElements.length) return
     const name = nameElements[0].textContent
-    _.forEach(propertiesToAdd, property => {
+    _.forEach(kmlStyleSpecialProperties, property => {
       const propertyElements = placemark.getElementsByTagName(property)
       if (!propertyElements.length) return
 

package/map/client/utils/utils.catalog.js

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import sift from 'sift'
 import { api, i18n, Store } from '../../../core/client/index.js'
 import { buildUrl } from '../../../core/common/index.js'
+import { getCatalogProjectQuery, getViewsProjectQuery } from './utils.project.js'
 
 // Helper to set a JWT as query param in a target URL
 export function setUrlJwt (item, path, baseUrl, jwtField, jwt) {
@@ -104,17 +105,19 @@ export async function getLayers (options = {}) {
     context: '',
     planetApi: api
   })
-
+  // We expect the project object to expose the underlying API
+  const planetApi = (options.project && typeof options.project.getPlanetApi === 'function' ? options.project.getPlanetApi() : options.planetApi)
+    
   let layers = []
-  const catalogService = options.planetApi.getService('catalog', options.context)
+  const catalogService = planetApi.getService('catalog', options.context)
   if (catalogService) {
-    const response = await catalogService.find({ query: options.query })
+    const response = await catalogService.find({ query: (options.project ? Object.assign(getCatalogProjectQuery(options.project), options.query) : options.query) })
     _.forEach(response.data, processTranslations)
     // Set which API to use to retrieve layer data
-    layers = layers.concat(response.data.map(layer => Object.assign(layer, { getPlanetApi: () => options.planetApi })))
+    layers = layers.concat(response.data.map(layer => Object.assign(layer, { getPlanetApi: () => planetApi })))
   }
   // Do we need to inject a token ?
-  await setEngineJwt(layers, options.planetApi)
+  await setEngineJwt(layers, planetApi)
   return layers
 }
 
@@ -124,9 +127,11 @@ export async function getCategories (options = {}) {
     context: '',
     planetApi: api
   })
+  // We expect the project object to expose the underlying API
+  const planetApi = (options.project && typeof options.project.getPlanetApi === 'function' ? options.project.getPlanetApi() : options.planetApi)
 
   let categories = []
-  const catalogService = options.planetApi.getService('catalog', options.context)
+  const catalogService = planetApi.getService('catalog', options.context)
   if (catalogService) {
     const response = await catalogService.find({ query: Object.assign({ type: 'Category' }, options.query) })
     _.forEach(response.data, processTranslations)
@@ -141,9 +146,11 @@ export async function getSublegends (options = {}) {
     context: '',
     planetApi: api
   })
+  // We expect the project object to expose the underlying API
+  const planetApi = (options.project && typeof options.project.getPlanetApi === 'function' ? options.project.getPlanetApi() : options.planetApi)
 
   let sublegends = []
-  const catalogService = options.planetApi.getService('catalog', options.context)
+  const catalogService = planetApi.getService('catalog', options.context)
   if (catalogService) {
     const response = await catalogService.find({ query: Object.assign({ type: 'Sublegend' }, options.query) })
     _.forEach(response.data, processTranslations)
@@ -173,13 +180,32 @@ export async function getViews (options = {}) {
     context: '',
     planetApi: api
   })
-
+  // We expect the project object to expose the underlying API
+  const planetApi = (options.project && typeof options.project.getPlanetApi === 'function' ? options.project.getPlanetApi() : options.planetApi)
+  
   let views = []
-  const catalogService = options.planetApi.getService('catalog', options.context)
+  const catalogService = planetApi.getService('catalog', options.context)
   if (catalogService) {
-    const response = await catalogService.find({ query: Object.assign({ type: 'Context' }, options.query) })
+    const response = await catalogService.find({
+      query: Object.assign({ type: 'Context' }, (options.project ? Object.assign(getViewsProjectQuery(options.project), options.query) : options.query))
+    })
     _.forEach(response.data, processTranslations)
     views = views.concat(response.data)
   }
   return views
 }
+
+// Order is given as an array of catalog item IDs or names
+export function orderCatalogItemsBy(items, itemsOrder) {
+  if (!_.isEmpty(itemsOrder)) {
+    for (let i = itemsOrder.length; i >= 0; i--) {
+      const itemIdOrName = itemsOrder[i]
+      // Move item to beginning of array          
+      const itemIndex = items.findIndex(item => (item?._id === itemIdOrName) || (item?.name === itemIdOrName))
+      if (itemIndex >= 0) {
+        const removedItems = items.splice(itemIndex, 1)
+        if (removedItems.length > 0) items.unshift(removedItems[0])
+      }
+    }
+  }
+}

package/map/client/utils/utils.layers.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import logger from 'loglevel'
+import sift from 'sift'
 import { Notify, Loading, uid } from 'quasar'
 import explode from '@turf/explode'
 import SphericalMercator from '@mapbox/sphericalmercator'
@@ -366,8 +367,8 @@ async function generateStyleFromFilters (layer, defaultStyle) {
   const templates = generateStyleTemplates(defaultStyle, filters)
   const result = Object.assign(
     {},
-    _.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}`) : {}
   )
   return result
 }
@@ -384,13 +385,18 @@ export async function editLayerStyle (layer, style, ignoreFeatureStyle = false)
       await api.getService('catalog').patch(layer._id, result)
     } else {
       const legend = await getLegendForLayer(Object.assign({}, layer, { 'cesium.style': style, 'leaflet.style': style }))
-      const patch = Object.assign({}, { 'cesium.style': style, 'leaflet.style': style }, legend)
+      const patch = Object.assign(
+        {},
+        _.has(layer, 'cesium') ? { 'cesium.style': style } : {},
+        _.has(layer, 'leaflet') ? { 'leaflet.style': style } : {},
+        legend
+      )
       if (ignoreFeatureStyle) patch.ignoreFeatureStyle = true
       await api.getService('catalog').patch(layer._id, patch)
     }
   } else {
-    _.set(layer, 'cesium.style', style)
-    _.set(layer, 'leaflet.style', style)
+    if (_.has(layer, 'cesium')) _.set(layer, 'cesium.style', style)
+    if (_.has(layer, 'leaflet')) _.set(layer, 'leaflet.style', style)
     Object.assign(layer, await getLegendForLayer(layer))
     if (ignoreFeatureStyle) layer.ignoreFeatureStyle = true
   }
@@ -399,7 +405,7 @@ export async function editLayerStyle (layer, style, ignoreFeatureStyle = false)
 
 export async function updateLayerWithFiltersStyle (layer) {
   if (!layer._id) return
-  const defaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', {}))
+  const defaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', _.get(layer, 'cesium.style', {})))
   const style = await generateStyleFromFilters(layer, defaultStyle)
   if (!style) return
 
@@ -408,7 +414,7 @@ export async function updateLayerWithFiltersStyle (layer) {
 
 export async function editFilterStyle (layer, filter, engineStyle, style, ignoreFeatureStyle = false) {
   if (!layer._id) return
-  const layerDefaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', {}))
+  const layerDefaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', _.get(layer, 'cesium.style', {})))
 
   const filters = await parseFiltersFromLayer(layer)
   const targetFilterCondition = filterQueryToConditions(filter.active)
@@ -499,7 +505,7 @@ export async function getLegendForLayer (layer) {
     if (!hasFilterWithStyle) return { $unset: { legend: '' } }
     return legend
   } else {
-    const layerStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', {}))
+    const layerStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', _.get(layer, 'cesium.style', {})))
     const legend = generateLegendFromStyle(layer, layerStyle, _.get(layer, 'geometryTypes', []))
     legend.label = _.get(layer, 'label', _.get(layer, 'name'))
     return { legend }
@@ -680,3 +686,28 @@ export async function removeLayer (layer) {
   Loading.hide()
   return true
 }
+
+export function getFilterFunctionFromLayerFilters (layer) {
+  // To be flexible enough filters can provide a query for their active and inactive state
+  // Similarly, filters can be combined with a different operator for each state
+  const filterOperators = _.get(layer, 'filterOperators', { active: '$or', inactive: '$and' })
+  const activeFilters = layer.filters
+    .filter(filter => filter.isActive)
+    .map(filter => filter.active)
+    .filter(filter => !_.isEmpty(filter))
+  const activeCondition = activeFilters.length > 1
+    ? { [filterOperators.active]: activeFilters }
+    : activeFilters.length === 1 ? activeFilters[0] : {}
+  const inactiveFilters = layer.filters
+    .filter(filter => !filter.isActive)
+    .map(filter => filter.inactive)
+    .filter(filter => !_.isEmpty(filter))
+  const inactiveCondition = inactiveFilters.length > 1
+    ? { [filterOperators.inactive]: inactiveFilters }
+    : inactiveFilters.length === 1 ? inactiveFilters[0] : {}
+
+  const finalCondition = activeFilters.length && inactiveFilters.length
+    ? { '$and': [ activeCondition, inactiveCondition ] } : activeFilters.length ? activeCondition : inactiveCondition
+
+  return sift(finalCondition)
+}

package/map/client/utils/utils.project.js

@@ -6,3 +6,7 @@ export function getCatalogProjectQuery (project) {
   const nameQuery = { name: { $in: _.map(_.filter(project.layers, 'name'), 'name') } }
   return { $or: [idQuery, nameQuery] }
 }
+
+export function getViewsProjectQuery (project) {
+  return { _id: { $in: _.map(project.views, '_id') } }
+}

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

@@ -182,6 +182,8 @@ export const DefaultStyle = {
   }
 }
 
+export const kmlStyleSpecialProperties = ['extrude', 'altitudeMode']
+
 // Map properties of a given style according to given mapping, performing number conversion if required
 export function convertStyle (style, mapping, asNumber = []) {
   let convertedStyle = {}
@@ -328,12 +330,30 @@ export function generateStyleTemplates (defaultStyle, styles, dotify = true) {
 
     // Process all properties, for each property
     properties.forEach((property, index) => {
-      if (!_.has(style.values, property)) return
-      // Conversion from palette to RGB color is required
-      const value = (property.includes('color')
-        ? kdkCoreUtils.getHtmlColor(_.get(style.values, property))
-        : _.get(style.values, property))
+      // Don't need to create template if the section (point, line, polygon) is not defined in the style
+      if (!_.get(style.values, property.split('.')[0])) return
+
+      let value = null
+      // If no value is defined for the given property, that means this property is in a optional sub-object (e.g. stroke, icon)
+      // So we need to hide the element corresponding to this sub-object by setting all of its properties to null or default values
+      // We must create the condition anyway to prevent default style from being applied on this case
+      if (!_.get(style.values, property)) {
+        if (_.isNumber(_.get(DefaultStyle, property))) {
+          value = 0
+        } else if (property.includes('shape')) {
+          value = _.get(DefaultStyle, property)
+        } else if (property.includes('color')) {
+          value = kdkCoreUtils.getHtmlColor(_.get(defaultStyle, property))
+        }
+      } else {
+        // Conversion from palette to RGB color is required
+        value = (property.includes('color')
+          ? kdkCoreUtils.getHtmlColor(_.get(style.values, property))
+          : _.get(style.values, property))
+      }
+
       // Generate style value for given property value
+      if (_.isNil(value)) return
       templates[index] += `if (${predicate}) { %>${value}<% } else `
     })
   })
@@ -346,18 +366,28 @@ export function generateStyleTemplates (defaultStyle, styles, dotify = true) {
     const value = (property.includes('color')
       ? kdkCoreUtils.getHtmlColor(_.get(defaultStyle, property))
       : _.get(defaultStyle, property))
+    if (_.isNil(value)) return
     // Avoid converting numbers to string on default values
     if (hasStyles) templates[index] += `{ %>${value}<% }`
     else templates[index] = value
   })
   // Set all templates
+  options.template = []
   properties.forEach((property, index) => {
-    if (!_.has(defaultStyle, property)) return
+    if (!_.has(defaultStyle, property) || _.isEmpty(templates[index])) return
     // We voluntary use dot notation here by default as this object should be used to update style values using a patch operation
     if (dotify) options[`style.${property}`] = (hasStyles ? `<% ${templates[index]} %>` : templates[index])
     else _.set(options, `style.${property}`, (hasStyles ? `<% ${templates[index]} %>` : templates[index]))
+
+    // Check if templating is needed
+    if (options[`style.${property}`].startsWith('<% if')) {
+      options.template.push(`style.${property}`)
+      // Remove duplicates "<% { %>" that are added to default style (else statement) when filters are reapplied
+      options[`style.${property}`] = options[`style.${property}`].replace(/(<% { %>)+/g, '<% { %>').replace(/(<% } %>)+/g, '<% } %>')
+    } else {
+      options[`style.${property}`] = options[`style.${property}`].replace(/(<% { %>)+/g, '').replace(/(<% } %>)+/g, '')
+    }
   })
-  options.template = (hasStyles ? properties : []).map(property => `style.${property}`)
   return options
 }