@defra/interactive-map 0.0.16-alpha → 0.0.18-alpha

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)
+    return
+  }
+
+  pluginState.dispatch({ type: 'SET_DATASET_STYLE', payload: { datasetId, styleChanges: style } })
+  const updatedDataset = { ...dataset, ...style }
+  pluginState.layerAdapter?.setStyle(updatedDataset, mapState.mapStyle)
+}

package/plugins/beta/datasets/src/components/EmptyKey.jsx

@@ -0,0 +1,7 @@
+export const EmptyKey = ({ text }) => {
+  return (
+    <div className='im-c-datasets-key'>
+      <p className='im-c-datasets-key__empty-message'>{text}</p>
+    </div>
+  )
+}

package/plugins/beta/datasets/src/components/EmptyKey.test.jsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { EmptyKey } from './EmptyKey'
+
+describe('EmptyKey', () => {
+  const text = 'No features available'
+
+  it('renders the wrapper div with the correct class', async () => {
+    const { container } = render(<EmptyKey text={text} />)
+    expect(container.querySelector('.im-c-datasets-key')).toBeTruthy()
+  })
+
+  it('renders the empty message paragraph with the correct class', async () => {
+    const { container } = render(<EmptyKey text={text} />)
+    expect(container.querySelector('.im-c-datasets-key__empty-message')).toBeTruthy()
+  })
+
+  it('renders the provided text', async () => {
+    render(<EmptyKey text={text} />)
+    expect(screen.getByText(text)).toBeTruthy()
+  })
+})

package/plugins/beta/datasets/src/components/KeySvg.jsx

@@ -0,0 +1,24 @@
+import { hasSymbol, getSymbolDef } from '../../../../../src/utils/symbolUtils.js'
+import { hasPattern } from '../../../../../src/utils/patternUtils.js'
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+
+export const KeySvg = (props) => {
+  const { symbolRegistry } = props
+  const symbolDef = hasSymbol(props) && getSymbolDef(props, symbolRegistry)
+  if (symbolDef) {
+    return <KeySvgSymbol {...props} symbolDef={symbolDef} />
+  }
+
+  if (hasPattern(props)) {
+    return <KeySvgPattern {...props} />
+  }
+
+  if (props.keySymbolShape === 'line') {
+    return <KeySvgLine {...props} />
+  }
+
+  return <KeySvgRect {...props} />
+}

package/plugins/beta/datasets/src/components/KeySvgLine.jsx

@@ -0,0 +1,19 @@
+import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
+
+export const KeySvgLine = (props) => {
+  const { mapStyle } = props
+  return (
+    <svg {...svgProps}>
+      <line
+        x1={props.strokeWidth / 2}
+        y1={SVG_CENTER}
+        x2={SVG_SIZE - props.strokeWidth / 2}
+        y2={SVG_CENTER}
+        stroke={getValueForStyle(props.stroke, mapStyle.id)}
+        strokeWidth={props.strokeWidth}
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/KeySvgPattern.jsx

@@ -0,0 +1,15 @@
+import { getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js'
+import { svgProps } from './svgProperties.js'
+const PATTERN_INSET = 2
+
+export const KeySvgPattern = (props) => {
+  const { patternRegistry, mapStyle } = props
+
+  const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry)
+  return (
+    <svg {...svgProps}>
+      <g dangerouslySetInnerHTML={{ __html: paths.border }} />
+      <g transform={`translate(${PATTERN_INSET}, ${PATTERN_INSET})`} dangerouslySetInnerHTML={{ __html: paths.content }} />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/KeySvgRect.jsx

@@ -0,0 +1,22 @@
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
+import { svgProps, SVG_SIZE } from './svgProperties.js'
+
+export const KeySvgRect = (props) => {
+  const { mapStyle } = props
+  return (
+    <svg {...svgProps}>
+      <rect
+        x={props.strokeWidth / 2}
+        y={props.strokeWidth / 2}
+        width={SVG_SIZE - props.strokeWidth}
+        height={SVG_SIZE - props.strokeWidth}
+        rx={props.strokeWidth}
+        ry={props.strokeWidth}
+        fill={getValueForStyle(props.fill, mapStyle.id)}
+        stroke={getValueForStyle(props.stroke, mapStyle.id)}
+        strokeWidth={props.strokeWidth}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/KeySvgSymbol.jsx

@@ -0,0 +1,16 @@
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { svgSymbolProps } from './svgProperties.js'
+
+export const KeySvgSymbol = (props) => {
+  const { symbolRegistry, mapStyle, symbolDef } = props
+  const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
+  const keyMapStyle = { ...mapStyle, mapColorScheme }
+
+  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle)
+  const viewBox = getSymbolViewBox(props, symbolDef)
+  return (
+    <svg {...svgSymbolProps} viewBox={viewBox}>
+      <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
+    </svg>
+  )
+}

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

@@ -0,0 +1,20 @@
+export const SVG_SIZE = 20
+export const SVG_CENTER = SVG_SIZE / 2
+const SVG_SYMBOL_SIZE = 38
+
+export const svgProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: SVG_SIZE,
+  height: SVG_SIZE,
+  viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
+  className: 'am-c-datasets-key-symbol',
+  'aria-hidden': 'true',
+  focusable: 'false'
+}
+
+export const svgSymbolProps = {
+  ...svgProps,
+  width: SVG_SYMBOL_SIZE,
+  height: SVG_SYMBOL_SIZE,
+  className: 'am-c-datasets-key-symbol am-c-datasets-key-symbol--point'
+}

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

@@ -1,81 +1,71 @@
-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,
+  mapStyle,
   mapProvider,
   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, mapStyle).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
-  })
+  let currentMapStyle = mapStyle
+
+  // Handle basemap style changes — delegate entirely to the adapter
+  const onSetStyle = (newMapStyle) => {
+    currentMapStyle = newMapStyle
+    adapter.onStyleChange(getDatasets(), newMapStyle, getHiddenFeatures(), dynamicSources)
+  }
+
+  const onSizeChange = () => {
+    adapter.onSizeChange(getDatasets(), currentMapStyle)
+  }
+
+  eventBus.on(events.MAP_SET_STYLE, onSetStyle)
+  eventBus.on(events.MAP_SIZE_CHANGE, onSizeChange)
 
   return {
     remove () {
-      eventBus.off(events.MAP_SET_STYLE, styleHandler)
+      eventBus.off(events.MAP_SET_STYLE, onSetStyle)
+      eventBus.off(events.MAP_SIZE_CHANGE, onSizeChange)
 
       // 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())
     },
 
     /**
@@ -83,10 +73,7 @@ export const createDatasets = ({
      * @param {string} datasetId - Dataset ID to refresh
      */
     refreshDataset (datasetId) {
-      const dynamicSource = dynamicSources.get(datasetId)
-      if (dynamicSource) {
-        dynamicSource.refresh()
-      }
+      dynamicSources.get(datasetId)?.refresh()
     },
 
     /**
@@ -94,10 +81,7 @@ export const createDatasets = ({
      * @param {string} datasetId - Dataset ID to clear
      */
     clearDatasetCache (datasetId) {
-      const dynamicSource = dynamicSources.get(datasetId)
-      if (dynamicSource) {
-        dynamicSource.clear()
-      }
+      dynamicSources.get(datasetId)?.clear()
     },
 
     /**
@@ -106,8 +90,7 @@ export const createDatasets = ({
      * @returns {number|null} Feature count or null if not a dynamic source
      */
     getFeatureCount (datasetId) {
-      const dynamicSource = dynamicSources.get(datasetId)
-      return dynamicSource ? dynamicSource.getFeatureCount() : null
+      return dynamicSources.get(datasetId)?.getFeatureCount() ?? null
     }
   }
 }

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

@@ -1,15 +1,51 @@
 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',
+  'symbol', 'symbolSvgContent', 'symbolViewBox', 'symbolAnchor',
+  'symbolBackgroundColor', 'symbolForegroundColor', 'symbolHaloWidth', 'symbolGraphic'
+]
+
+// 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', 'symbol', 'symbolSvgContent']
+
+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,11 +168,14 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
 
   return {
     /**
-     * Clean up event listeners
+     * Clean up event listeners and cancel any in-flight request
      */
     destroy () {
       map.off('moveend', handleMoveEnd)
       debouncedFetch.cancel()
+      if (currentController) {
+        currentController.abort()
+      }
     },
 
     /**
@@ -175,7 +184,7 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
     clear () {
       features.clear()
       fetchedBbox = null
-      onUpdate(sourceId, { type: 'FeatureCollection', features: [] })
+      onUpdate(dataset.id, { type: 'FeatureCollection', features: [] })
     },
 
     /**
@@ -199,7 +208,7 @@ export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
      */
     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/index.js

@@ -1,8 +1,9 @@
 // /plugins/datasets/index.js
 import './datasets.scss'
 
-export default function createPlugin (options = {}) {
+export default function createPlugin (options = { }) {
   const plugin = {
+    noKeyItemText: 'No features displayed',
     ...options,
     id: 'datasets',
     load: async () => {