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

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,72 +16,47 @@ 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)
+      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())
     },
 
     /**
@@ -83,10 +64,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 +72,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 +81,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,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,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/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
@@ -81,7 +86,7 @@ export const manifest = {
     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
@@ -105,11 +110,14 @@ export const manifest = {
   }],
 
   api: {
-    showDataset,
-    hideDataset,
     addDataset,
     removeDataset,
-    showFeatures,
-    hideFeatures
+    setDatasetVisibility,
+    setFeatureVisibility,
+    setStyle,
+    getStyle,
+    setOpacity,
+    getOpacity,
+    setData
   }
 }

package/plugins/beta/datasets/src/panels/Key.jsx

@@ -1,62 +1,140 @@
 import React from 'react'
 import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
+import { hasPattern, getKeyPatternPaths } from '../styles/patterns.js'
+import { mergeSublayer } from '../utils/mergeSublayer.js'
+
+const SVG_SIZE = 20
+const SVG_CENTER = SVG_SIZE / 2
+const PATTERN_INSET = 2
+
+const buildKeyGroups = (datasets) => {
+  const seenGroups = new Set()
+  const items = []
+  datasets.forEach(dataset => {
+    if (dataset.sublayers?.length) {
+      items.push({ type: 'sublayers', dataset })
+      return
+    }
+    if (dataset.groupLabel) {
+      if (seenGroups.has(dataset.groupLabel)) {
+        return
+      }
+      seenGroups.add(dataset.groupLabel)
+      items.push({
+        type: 'group',
+        groupLabel: dataset.groupLabel,
+        datasets: datasets.filter(d => !d.sublayers?.length && d.groupLabel === dataset.groupLabel)
+      })
+      return
+    }
+    items.push({ type: 'flat', dataset })
+  })
+  return items
+}
 
 export const Key = ({ mapState, pluginState }) => {
   const { mapStyle } = mapState
 
-  const itemSymbol = (dataset) => (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='20'
-      height='20'
-      viewBox='0 0 20 20'
-      aria-hidden='true'
-      focusable='false'
-    >
-      {dataset.keySymbolShape === 'line'
-        ? (
-          <line
-            x1={dataset.strokeWidth / 2}
-            y1='10'
-            x2={20 - dataset.strokeWidth / 2}
-            y2='10'
-            stroke={getValueForStyle(dataset.stroke, mapStyle.id)}
-            strokeWidth={dataset.strokeWidth}
-            strokeLinecap='round'
-          />
-          )
-        : (
-          <rect
-            x={dataset.strokeWidth / 2}
-            y={dataset.strokeWidth / 2}
-            width={20 - dataset.strokeWidth}
-            height={20 - dataset.strokeWidth}
-            rx={dataset.strokeWidth}
-            ry={dataset.strokeWidth}
-            fill={getValueForStyle(dataset.fill, mapStyle.id)}
-            stroke={getValueForStyle(dataset.stroke, mapStyle.id)}
-            strokeWidth={dataset.strokeWidth}
-            strokeLinejoin='round'
-          />
-          )}
-    </svg>
+  const itemSymbol = (config) => {
+    const svgProps = {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: SVG_SIZE,
+      height: SVG_SIZE,
+      viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
+      'aria-hidden': 'true',
+      focusable: 'false'
+    }
+
+    if (hasPattern(config)) {
+      const paths = getKeyPatternPaths(config, mapStyle.id)
+      return (
+        <svg {...svgProps}>
+          <g dangerouslySetInnerHTML={{ __html: paths.border }} />
+          <g transform={`translate(${PATTERN_INSET}, ${PATTERN_INSET})`} dangerouslySetInnerHTML={{ __html: paths.content }} />
+        </svg>
+      )
+    }
+
+    return (
+      <svg {...svgProps}>
+        {config.keySymbolShape === 'line'
+          ? (
+            <line
+              x1={config.strokeWidth / 2}
+              y1={SVG_CENTER}
+              x2={SVG_SIZE - config.strokeWidth / 2}
+              y2={SVG_CENTER}
+              stroke={getValueForStyle(config.stroke, mapStyle.id)}
+              strokeWidth={config.strokeWidth}
+              strokeLinecap='round'
+            />
+            )
+          : (
+            <rect
+              x={config.strokeWidth / 2}
+              y={config.strokeWidth / 2}
+              width={SVG_SIZE - config.strokeWidth}
+              height={SVG_SIZE - config.strokeWidth}
+              rx={config.strokeWidth}
+              ry={config.strokeWidth}
+              fill={getValueForStyle(config.fill, mapStyle.id)}
+              stroke={getValueForStyle(config.stroke, mapStyle.id)}
+              strokeWidth={config.strokeWidth}
+              strokeLinejoin='round'
+            />
+            )}
+      </svg>
+    )
+  }
+
+  const renderEntry = (key, config) => (
+    <dl key={key} className='im-c-datasets-key__item'>
+      <dt className='im-c-datasets-key__item-symbol'>{itemSymbol(config)}</dt>
+      <dd className='im-c-datasets-key__item-label'>
+        {config.label}
+        {config.symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({getValueForStyle(config.symbolDescription, mapStyle.id)})
+          </span>
+        )}
+      </dd>
+    </dl>
   )
 
+  const visibleDatasets = (pluginState.datasets || [])
+    .filter(dataset => dataset.showInKey && dataset.visibility !== 'hidden')
+
+  const keyGroups = buildKeyGroups(visibleDatasets)
+  const hasGroups = keyGroups.some(item => item.type === 'sublayers' || item.type === 'group')
+  const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
+
   return (
-    <div className='im-c-datasets-key'>
-      {(pluginState.datasets || []).filter(dataset => dataset.showInKey && dataset.visibility !== 'hidden').map(dataset => (
-        <div key={dataset.id} className='im-c-datasets-key__item'>
-          <div className='im-c-datasets-key__item-label'>
-            {itemSymbol(dataset)}
-            {dataset.label}
-            {dataset.symbolDescription && (
-              <span className='govuk-visually-hidden'>
-                ({getValueForStyle(dataset.symbolDescription, mapStyle.id)})
-              </span>
-            )}
-          </div>
-        </div>
-      ))}
+    <div className={containerClass}>
+      {keyGroups.map(item => {
+        if (item.type === 'sublayers') {
+          const headingId = `key-heading-${item.dataset.id}`
+          return (
+            <section key={item.dataset.id} className='im-c-datasets-key__group' aria-labelledby={headingId}>
+              <h3 id={headingId} className='im-c-datasets-key__group-heading'>{item.dataset.label}</h3>
+              {item.dataset.sublayers
+                .filter(sublayer => item.dataset.sublayerVisibility?.[sublayer.id] !== 'hidden')
+                .map(sublayer => renderEntry(`${item.dataset.id}-${sublayer.id}`, mergeSublayer(item.dataset, sublayer)))}
+            </section>
+          )
+        }
+
+        if (item.type === 'group') {
+          const headingId = `key-heading-${item.groupLabel.toLowerCase().replaceAll(/\s+/g, '-')}`
+          return (
+            <section key={item.groupLabel} className='im-c-datasets-key__group' aria-labelledby={headingId}>
+              <h3 id={headingId} className='im-c-datasets-key__group-heading'>{item.groupLabel}</h3>
+              {item.datasets.map(dataset => renderEntry(dataset.id, dataset))}
+            </section>
+          )
+        }
+
+        return renderEntry(item.dataset.id, item.dataset)
+      })}
     </div>
   )
 }