@defra/interactive-map 0.0.15-alpha → 0.0.17-alpha

package/plugins/beta/datasets/src/api/setDatasetVisibility.js

@@ -0,0 +1,37 @@
+export const setDatasetVisibility = ({ pluginState }, visible, options = {}) => {
+  const { datasetId, sublayerId } = options
+
+  if (sublayerId) {
+    const visibility = visible ? 'visible' : 'hidden'
+    pluginState.layerAdapter?.[visible ? 'showSublayer' : 'hideSublayer'](datasetId, sublayerId)
+    pluginState.dispatch({ type: 'SET_SUBLAYER_VISIBILITY', payload: { datasetId, sublayerId, visibility } })
+    return
+  }
+
+  if (datasetId) {
+    pluginState.layerAdapter?.[visible ? 'showDataset' : 'hideDataset'](datasetId)
+    pluginState.dispatch({ type: 'SET_DATASET_VISIBILITY', payload: { id: datasetId, visibility: visible ? 'visible' : 'hidden' } })
+    if (visible) {
+      const dataset = pluginState.datasets?.find(d => d.id === datasetId)
+      Object.entries(dataset?.sublayerVisibility || {}).forEach(([subId, vis]) => {
+        if (vis === 'hidden') {
+          pluginState.layerAdapter?.hideSublayer(datasetId, subId)
+        }
+      })
+    }
+    return
+  }
+
+  // Global
+  pluginState.dispatch({ type: 'SET_GLOBAL_VISIBILITY', payload: { visibility: visible ? 'visible' : 'hidden' } })
+  pluginState.datasets?.forEach(dataset => {
+    pluginState.layerAdapter?.[visible ? 'showDataset' : 'hideDataset'](dataset.id)
+    if (visible) {
+      Object.entries(dataset.sublayerVisibility || {}).forEach(([subId, vis]) => {
+        if (vis === 'hidden') {
+          pluginState.layerAdapter?.hideSublayer(dataset.id, subId)
+        }
+      })
+    }
+  })
+}

package/plugins/beta/datasets/src/api/setFeatureVisibility.js

@@ -0,0 +1,22 @@
+export const setFeatureVisibility = ({ pluginState }, visible, featureIds, { datasetId, idProperty = null } = {}) => {
+  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
+  if (!dataset) {
+    return
+  }
+
+  if (visible) {
+    const existingHidden = pluginState.hiddenFeatures[datasetId]
+    if (!existingHidden) {
+      return
+    }
+    const remainingHiddenIds = existingHidden.ids.filter(id => !featureIds.includes(id))
+    pluginState.dispatch({ type: 'SHOW_FEATURES', payload: { layerId: datasetId, featureIds } })
+    pluginState.layerAdapter?.showFeatures(dataset, idProperty, remainingHiddenIds)
+  } else {
+    const existingHidden = pluginState.hiddenFeatures[datasetId]
+    const existingIds = existingHidden?.ids || []
+    const allHiddenIds = [...new Set([...existingIds, ...featureIds])]
+    pluginState.dispatch({ type: 'HIDE_FEATURES', payload: { layerId: datasetId, idProperty, featureIds } })
+    pluginState.layerAdapter?.hideFeatures(dataset, idProperty, allHiddenIds)
+  }
+}

package/plugins/beta/datasets/src/api/setOpacity.js

@@ -0,0 +1,29 @@
+export const setOpacity = ({ pluginState }, opacity, options) => {
+  const { datasetId, sublayerId } = options || {}
+
+  if (sublayerId) {
+    const dataset = pluginState.datasets?.find(d => d.id === datasetId)
+    if (!dataset) {
+      return
+    }
+    pluginState.dispatch({ type: 'SET_SUBLAYER_OPACITY', payload: { datasetId, sublayerId, opacity } })
+    pluginState.layerAdapter?.setSublayerOpacity(datasetId, sublayerId, opacity)
+    return
+  }
+
+  if (datasetId) {
+    const dataset = pluginState.datasets?.find(d => d.id === datasetId)
+    if (!dataset) {
+      return
+    }
+    pluginState.dispatch({ type: 'SET_OPACITY', payload: { datasetId, opacity } })
+    pluginState.layerAdapter?.setOpacity(datasetId, opacity)
+    return
+  }
+
+  // Global
+  pluginState.dispatch({ type: 'SET_GLOBAL_OPACITY', payload: { opacity } })
+  pluginState.datasets?.forEach(d => {
+    pluginState.layerAdapter?.setOpacity(d.id, opacity)
+  })
+}

package/plugins/beta/datasets/src/api/setStyle.js

@@ -0,0 +1,22 @@
+export const setStyle = ({ pluginState, mapState }, style, { datasetId, sublayerId } = {}) => {
+  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
+  if (!dataset) {
+    return
+  }
+
+  if (sublayerId) {
+    pluginState.dispatch({ type: 'SET_SUBLAYER_STYLE', payload: { datasetId, sublayerId, styleChanges: style } })
+    const updatedSublayerDataset = {
+      ...dataset,
+      sublayers: dataset.sublayers?.map(sublayer =>
+        sublayer.id === sublayerId ? { ...sublayer, style: { ...sublayer.style, ...style } } : sublayer
+      )
+    }
+    pluginState.layerAdapter?.setSublayerStyle(updatedSublayerDataset, sublayerId, mapState.mapStyle.id)
+    return
+  }
+
+  pluginState.dispatch({ type: 'SET_DATASET_STYLE', payload: { datasetId, styleChanges: style } })
+  const updatedDataset = { ...dataset, ...style }
+  pluginState.layerAdapter?.setStyle(updatedDataset, mapState.mapStyle.id)
+}

package/plugins/beta/datasets/src/datasets.js

@@ -1,8 +1,14 @@
-import { handleSetMapStyle } from './handleSetMapStyle.js'
-import { addMapLayers, getSourceId, getLayersUsingSource, isDynamicSource, updateSourceData } from './mapLayers.js'
 import { createDynamicSource } from './fetch/createDynamicSource.js'
+// NOSONAR: applyDatasetDefaults and datasetDefaults are used in processedDatasets.map
+import { applyDatasetDefaults, datasetDefaults } from './defaults.js'
+
+const isDynamicSource = (dataset) =>
+  typeof dataset.geojson === 'string' &&
+  !!dataset.idProperty &&
+  typeof dataset.transformRequest === 'function'
 
 export const createDatasets = ({
+  adapter,
   pluginConfig,
   pluginStateRef,
   mapStyleId,
@@ -10,94 +16,63 @@ export const createDatasets = ({
   events,
   eventBus
 }) => {
-  const { map } = mapProvider
   const { datasets } = pluginConfig
 
-  // Track dynamic sources for cleanup
   const dynamicSources = new Map()
 
   const getDatasets = () => pluginStateRef.current.datasets || datasets
   const getHiddenFeatures = () => pluginStateRef.current.hiddenFeatures || {}
 
-  // Initialize all datasets once
-  datasets.forEach(dataset => {
-    addMapLayers(map, mapStyleId, dataset)
+  // Initialise all datasets via the adapter, then set up dynamic sources
+  const processedDatasets = datasets.map(d => applyDatasetDefaults(d, datasetDefaults))
+  adapter.init(processedDatasets, mapStyleId).then(() => {
+    processedDatasets.forEach(dataset => {
+      if (!isDynamicSource(dataset)) {
+        return
+      }
 
-    // Initialize dynamic source if applicable
-    if (isDynamicSource(dataset)) {
-      const sourceId = getSourceId(dataset)
       const dynamicSource = createDynamicSource({
         dataset,
-        map,
-        sourceId,
-        onUpdate: (id, geojson) => updateSourceData(map, id, geojson)
+        map: mapProvider.map,
+        onUpdate: (datasetId, geojson) => adapter.setData(datasetId, geojson)
       })
       dynamicSources.set(dataset.id, dynamicSource)
-    }
-  })
+    })
 
-  // Emit ready event once map has processed the layers
-  map.once('idle', () => {
     eventBus.emit('datasets:ready')
   })
 
-  // Handle style changes
-  const styleHandler = handleSetMapStyle({
-    map,
-    events,
-    eventBus,
-    getDatasets,
-    getHiddenFeatures,
-    getDynamicSources: () => dynamicSources
-  })
+  // Handle basemap style changes — delegate entirely to the adapter
+  const onSetStyle = (e) => {
+    adapter.onStyleChange(getDatasets(), e.id, getHiddenFeatures(), dynamicSources)
+  }
+
+  eventBus.on(events.MAP_SET_STYLE, onSetStyle)
 
   return {
-    remove() {
-      eventBus.off(events.MAP_SET_STYLE, styleHandler)
+    remove () {
+      eventBus.off(events.MAP_SET_STYLE, onSetStyle)
 
       // Clean up dynamic sources
       dynamicSources.forEach(source => source.destroy())
       dynamicSources.clear()
-
-      const allDatasets = getDatasets()
-      const removedSourceIds = new Set()
-
-      // Remove layers and sources
-      allDatasets.forEach(dataset => {
-        const sourceId = getSourceId(dataset)
-        const layers = getLayersUsingSource(map, sourceId)
-
-        // Remove all layers using this source
-        layers.forEach(id => map.removeLayer(id))
-
-        // Remove the source once
-        if (!removedSourceIds.has(sourceId) && map.getSource(sourceId)) {
-          map.removeSource(sourceId)
-          removedSourceIds.add(sourceId)
-        }
-      })
+      adapter.destroy(getDatasets())
     },
 
     /**
      * Refresh a dynamic source - clears cache and re-fetches
      * @param {string} datasetId - Dataset ID to refresh
      */
-    refreshDataset(datasetId) {
-      const dynamicSource = dynamicSources.get(datasetId)
-      if (dynamicSource) {
-        dynamicSource.refresh()
-      }
+    refreshDataset (datasetId) {
+      dynamicSources.get(datasetId)?.refresh()
     },
 
     /**
      * Clear a dynamic source's cache
      * @param {string} datasetId - Dataset ID to clear
      */
-    clearDatasetCache(datasetId) {
-      const dynamicSource = dynamicSources.get(datasetId)
-      if (dynamicSource) {
-        dynamicSource.clear()
-      }
+    clearDatasetCache (datasetId) {
+      dynamicSources.get(datasetId)?.clear()
     },
 
     /**
@@ -105,9 +80,8 @@ export const createDatasets = ({
      * @param {string} datasetId - Dataset ID
      * @returns {number|null} Feature count or null if not a dynamic source
      */
-    getFeatureCount(datasetId) {
-      const dynamicSource = dynamicSources.get(datasetId)
-      return dynamicSource ? dynamicSource.getFeatureCount() : null
+    getFeatureCount (datasetId) {
+      return dynamicSources.get(datasetId)?.getFeatureCount() ?? null
     }
   }
 }

package/plugins/beta/datasets/src/defaults.js

@@ -1,15 +1,49 @@
 const datasetDefaults = {
-  stroke: '#d4351c',
-  strokeWidth: 2,
-  fill: 'transparent',
-  symbolDescription: 'red outline',
   minZoom: 6,
   maxZoom: 24,
   showInKey: false,
-  showInLayers: false,
-  visibility: 'visible'
+  toggleVisibility: false,
+  visibility: 'visible',
+  style: {
+    stroke: '#d4351c',
+    strokeWidth: 2,
+    fill: 'transparent',
+    symbolDescription: 'red outline'
+  }
 }
 
-export {
-  datasetDefaults
-}
+// All properties considered style properties — must be provided via dataset.style, not at the top level.
+const STYLE_PROPS = [
+  'stroke', 'strokeWidth', 'strokeDashArray',
+  'fill', 'fillPattern', 'fillPatternSvgContent', 'fillPatternForegroundColor', 'fillPatternBackgroundColor',
+  'opacity', 'symbolDescription', 'keySymbolShape'
+]
+
+// Props whose presence in a style object indicates a custom visual style.
+// When any are set, the default symbolDescription is not appropriate.
+const VISUAL_STYLE_PROPS = ['stroke', 'fill', 'fillPattern', 'fillPatternSvgContent']
+
+const hasCustomVisualStyle = (style) =>
+  VISUAL_STYLE_PROPS.some(prop => prop in style)
+
+/**
+ * Merge a dataset config with defaults, flattening the nested `style` object.
+ * Style properties must be provided via dataset.style — top-level occurrences are ignored.
+ * symbolDescription from defaults.style is dropped when custom visual styles
+ * are present and the dataset doesn't explicitly set its own symbolDescription.
+ */
+const applyDatasetDefaults = (dataset, defaults) => {
+  const style = dataset.style || {}
+  const mergedStyle = { ...defaults.style, ...style }
+  if (!('symbolDescription' in style) && hasCustomVisualStyle(style)) {
+    delete mergedStyle.symbolDescription
+  }
+  const topLevel = { ...dataset }
+  delete topLevel.style
+  STYLE_PROPS.forEach(prop => delete topLevel[prop])
+  const topLevelDefaults = { ...defaults }
+  delete topLevelDefaults.style
+  return { ...topLevelDefaults, ...topLevel, ...mergedStyle }
+}
+
+export { datasetDefaults, hasCustomVisualStyle, applyDatasetDefaults }

package/plugins/beta/datasets/src/fetch/createDynamicSource.js

@@ -14,17 +14,17 @@ const EVICTION_THRESHOLD = 1.2 // Trigger eviction at 120% of maxFeatures
  * @param {Function} options.onUpdate - Callback when source data should be updated
  * @returns {Object} { destroy, clear, refresh }
  */
-export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
+export const createDynamicSource = ({ dataset, map, onUpdate }) => {
   const { geojson: baseUrl, idProperty, transformRequest, maxFeatures, minZoom = 0 } = dataset
 
-  // Feature cache: id → { feature, bbox, addedAt }
+  // Feature cache: id → { feature, bbox, lastSeenAt }
   const features = new Map()
 
   // Track the bbox we've fetched data for
   let fetchedBbox = null
 
-  // Loading state
-  let isLoading = false
+  // Abort controller for the in-flight request
+  let currentController = null
 
   /**
    * Convert features Map to FeatureCollection
@@ -63,25 +63,25 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
       if (bboxIntersects(data.bbox, currentBbox)) {
         inView.push(id)
       } else {
-        outOfView.push({ id, addedAt: data.addedAt })
+        outOfView.push({ id, lastSeenAt: data.lastSeenAt })
       }
     }
 
-    // Sort out-of-view by insertion time (oldest first)
-    outOfView.sort((a, b) => a.addedAt - b.addedAt)
+    // Sort out-of-view by last seen time (least recently seen first)
+    outOfView.sort((a, b) => a.lastSeenAt - b.lastSeenAt)
 
-    // Evict oldest out-of-view features until under target
+    // Evict least-recently-seen out-of-view features until under target
     const toEvict = features.size - targetSize
     for (let i = 0; i < toEvict && i < outOfView.length; i++) {
       features.delete(outOfView[i].id)
     }
 
-    // If still over target (viewport has too many), evict oldest in-view
+    // If still over target (viewport has too many), evict least recently seen in-view
     if (features.size > targetSize) {
       const remaining = features.size - targetSize
       const inViewSorted = inView
-        .map(id => ({ id, addedAt: features.get(id).addedAt }))
-        .sort((a, b) => a.addedAt - b.addedAt)
+        .map(id => ({ id, lastSeenAt: features.get(id).lastSeenAt }))
+        .sort((a, b) => a.lastSeenAt - b.lastSeenAt)
 
       for (let i = 0; i < remaining && i < inViewSorted.length; i++) {
         features.delete(inViewSorted[i].id)
@@ -105,19 +105,19 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
       return
     }
 
-    if (isLoading) {
-      return
+    // Abort any in-flight request — new viewport takes priority
+    if (currentController) {
+      currentController.abort()
     }
-
-    isLoading = true
+    currentController = new AbortController()
 
     try {
       const context = { bbox: currentBbox, zoom, dataset }
-      const data = await fetchGeoJSON(baseUrl, context, transformRequest)
+      const data = await fetchGeoJSON(baseUrl, context, transformRequest, currentController.signal)
 
       const now = Date.now()
 
-      // Add/update features with deduplication
+      // Add/update features with deduplication, refreshing lastSeenAt on each fetch
       data.features.forEach(feature => {
         const id = getFeatureId(feature)
         if (id == null) {
@@ -128,22 +128,28 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
         features.set(id, {
           feature,
           bbox: getGeometryBbox(feature.geometry),
-          addedAt: features.has(id) ? features.get(id).addedAt : now
+          lastSeenAt: now
         })
       })
 
       // Expand tracked bbox
       fetchedBbox = expandBbox(fetchedBbox, currentBbox)
 
-      // Evict if over limit
+      // Evict if over limit; if features were removed, fetchedBbox no longer
+      // covers those regions — reset to current viewport to force re-fetch on return
+      const sizeBeforeEviction = features.size
       evictIfNeeded(currentBbox)
+      if (features.size < sizeBeforeEviction) {
+        fetchedBbox = currentBbox
+      }
 
       // Update map source
-      onUpdate(sourceId, toFeatureCollection())
+      onUpdate(dataset.id, toFeatureCollection())
     } catch (error) {
+      if (error.name === 'AbortError') {
+        return
+      }
       console.error(`Failed to fetch dynamic GeoJSON for ${dataset.id}:`, error)
-    } finally {
-      isLoading = false
     }
   }
 
@@ -162,26 +168,29 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
 
   return {
     /**
-     * Clean up event listeners
+     * Clean up event listeners and cancel any in-flight request
      */
-    destroy() {
+    destroy () {
       map.off('moveend', handleMoveEnd)
       debouncedFetch.cancel()
+      if (currentController) {
+        currentController.abort()
+      }
     },
 
     /**
      * Clear all cached features and reset fetch tracking
      */
-    clear() {
+    clear () {
       features.clear()
       fetchedBbox = null
-      onUpdate(sourceId, { type: 'FeatureCollection', features: [] })
+      onUpdate(dataset.id, { type: 'FeatureCollection', features: [] })
     },
 
     /**
      * Force refresh - clear cache and fetch current viewport
      */
-    refresh() {
+    refresh () {
       features.clear()
       fetchedBbox = null
       fetchData()
@@ -190,16 +199,16 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
     /**
      * Get current feature count
      */
-    getFeatureCount() {
+    getFeatureCount () {
       return features.size
     },
 
     /**
      * Re-push cached features to the source (e.g., after style change)
      */
-    reapply() {
+    reapply () {
       if (features.size > 0) {
-        onUpdate(sourceId, toFeatureCollection())
+        onUpdate(dataset.id, toFeatureCollection())
       }
     }
   }

package/plugins/beta/datasets/src/fetch/fetchGeoJSON.js

@@ -5,14 +5,14 @@
  * @param {Function} transformRequest - Function to transform the request (builds URL with bbox, adds headers)
  * @returns {Promise<Object>} GeoJSON FeatureCollection
  */
-export const fetchGeoJSON = async (baseUrl, context, transformRequest) => {
+export const fetchGeoJSON = async (baseUrl, context, transformRequest, signal) => {
   const result = transformRequest(baseUrl, context)
 
   // Handle both string and object return values
   const config = typeof result === 'string' ? { url: result } : result
   const { url, headers = {} } = config
 
-  const response = await fetch(url, { headers })
+  const response = await fetch(url, { headers, signal })
 
   if (!response.ok) {
     throw new Error(`Failed to fetch GeoJSON: ${response.status} ${response.statusText}`)

package/plugins/beta/datasets/src/manifest.js

@@ -3,12 +3,15 @@ import { initialState, actions } from './reducer.js'
 import { DatasetsInit } from './DatasetsInit.jsx'
 import { Layers } from './panels/Layers.jsx'
 import { Key } from './panels/Key.jsx'
-import { showDataset } from './api/showDataset.js'
-import { hideDataset } from './api/hideDataset.js'
 import { addDataset } from './api/addDataset.js'
 import { removeDataset } from './api/removeDataset.js'
-import { showFeatures } from './api/showFeatures.js'
-import { hideFeatures } from './api/hideFeatures.js'
+import { setDatasetVisibility } from './api/setDatasetVisibility.js'
+import { setFeatureVisibility } from './api/setFeatureVisibility.js'
+import { setStyle } from './api/setStyle.js'
+import { getStyle } from './api/getStyle.js'
+import { setOpacity } from './api/setOpacity.js'
+import { getOpacity } from './api/getOpacity.js'
+import { setData } from './api/setData.js'
 
 export const manifest = {
   InitComponent: DatasetsInit,
@@ -22,7 +25,7 @@ export const manifest = {
     id: 'datasetsLayers',
     label: 'Layers',
     mobile: {
-      slot: 'bottom',
+      slot: 'drawer',
       modal: true,
       dismissible: true
     },
@@ -30,30 +33,30 @@ export const manifest = {
       slot: 'left-top',
       dismissible: true,
       exclusive: true,
-      width: '300px'
+      width: '260px'
     },
     desktop: {
       slot: 'left-top',
       modal: false,
       dismissible: true,
       exclusive: true,
-      width: '320px'
+      width: '280px'
     },
     render: Layers
-  },{
+  }, {
     id: 'datasetsKey',
     label: 'Key',
     mobile: {
-      slot: 'bottom',
+      slot: 'drawer',
       modal: true
     },
     tablet: {
       slot: 'left-top',
-      width: '300px'
+      width: '260px'
     },
     desktop: {
       slot: 'left-top',
-      width: '320px'
+      width: '280px'
     },
     render: Key
   }],
@@ -63,7 +66,9 @@ export const manifest = {
     label: 'Layers',
     panelId: 'datasetsLayers',
     iconId: 'layers',
-    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.find(l => l.showInLayers),
+    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.some(l =>
+      l.toggleVisibility || l.sublayers?.some(r => r.toggleVisibility)
+    ),
     mobile: {
       slot: 'top-left',
       showLabel: true
@@ -76,12 +81,12 @@ export const manifest = {
       slot: 'top-left',
       showLabel: true
     }
-  },{
+  }, {
     id: 'datasetsKey',
     label: 'Key',
     panelId: 'datasetsKey',
     iconId: 'key',
-    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.find(l => l.showInKey),
+    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.some(l => l.showInKey),
     mobile: {
       slot: 'top-left',
       showLabel: false
@@ -99,17 +104,20 @@ export const manifest = {
   icons: [{
     id: 'layers',
     svgContent: '<path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"></path><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"></path>'
-  },{
+  }, {
     id: 'key',
     svgContent: '<path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/>'
   }],
 
   api: {
-    showDataset,
-    hideDataset,
     addDataset,
     removeDataset,
-    showFeatures,
-    hideFeatures
+    setDatasetVisibility,
+    setFeatureVisibility,
+    setStyle,
+    getStyle,
+    setOpacity,
+    getOpacity,
+    setData
   }
 }