@defra/interactive-map 0.0.30-alpha → 0.0.31-alpha

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

@@ -0,0 +1,61 @@
+import { SVG_SIZE, SVG_CENTER, svgProps, svgSymbolProps } from './svgProperties'
+
+describe('svgProperties constants', () => {
+  it('SVG_SIZE is 20', () => {
+    expect(SVG_SIZE).toBe(20)
+  })
+
+  it('SVG_CENTER is half of SVG_SIZE', () => {
+    expect(SVG_CENTER).toBe(SVG_SIZE / 2)
+  })
+})
+
+describe('svgProps', () => {
+  it('has the correct xmlns', () => {
+    expect(svgProps.xmlns).toBe('http://www.w3.org/2000/svg')
+  })
+
+  it('has width and height equal to SVG_SIZE', () => {
+    expect(svgProps.width).toBe(SVG_SIZE)
+    expect(svgProps.height).toBe(SVG_SIZE)
+  })
+
+  it('has viewBox covering the full SVG_SIZE', () => {
+    expect(svgProps.viewBox).toBe(`0 0 ${SVG_SIZE} ${SVG_SIZE}`)
+  })
+
+  it('has the correct className', () => {
+    expect(svgProps.className).toBe('am-c-datasets-key-symbol')
+  })
+
+  it('is aria-hidden', () => {
+    expect(svgProps['aria-hidden']).toBe('true')
+  })
+
+  it('is not focusable', () => {
+    expect(svgProps.focusable).toBe('false')
+  })
+})
+
+describe('svgSymbolProps', () => {
+  it('inherits xmlns from svgProps', () => {
+    expect(svgSymbolProps.xmlns).toBe(svgProps.xmlns)
+  })
+
+  it('has a larger width than svgProps', () => {
+    expect(svgSymbolProps.width).toBeGreaterThan(svgProps.width)
+  })
+
+  it('has a larger height than svgProps', () => {
+    expect(svgSymbolProps.height).toBeGreaterThan(svgProps.height)
+  })
+
+  it('width and height are equal', () => {
+    expect(svgSymbolProps.width).toBe(svgSymbolProps.height)
+  })
+
+  it('className includes the base class and a modifier', () => {
+    expect(svgSymbolProps.className).toContain('am-c-datasets-key-symbol')
+    expect(svgSymbolProps.className).toContain('--point')
+  })
+})

package/plugins/beta/datasets/src/{panels → components/LayersMenu}/Layers.module.scss

@@ -79,3 +79,7 @@
 .im-c-datasets-layers-group:first-child .im-c-datasets-layers-group__legend {
   padding-top: 0;
 }
+
+.im-c-datasets-layers .govuk-checkboxes__input[aria-disabled="true"] + .govuk-checkboxes__label {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { setDatasetVisibility } from '../../api/setDatasetVisibility.js'
+import { LayersMenuCheckbox } from './LayersMenuCheckbox.jsx'
+import { LayersMenuGroupWrapper } from './LayersMenuGroupWrapper.jsx'
+
+export const LayersMenu = ({ pluginState }) => {
+  const { menu = [] } = pluginState
+  const handleDatasetChange = (e) => {
+    const { value, checked } = e.target
+    setDatasetVisibility({ pluginState }, checked, { datasetId: value })
+  }
+
+  const hasGroups = menu.some(item => item.groupLabel)
+  const containerClass = `im-c-datasets-layers${hasGroups ? ' im-c-datasets-layers--has-groups' : ''}`
+  return (
+    <div className={containerClass}>
+      {// Each menuGroup
+        menu.map(menuGroup =>
+          <LayersMenuGroupWrapper key={menuGroup.id} menuGroup={menuGroup}>
+            {// Each menuGroupItem
+              menuGroup.items.map(menuGroupItem =>
+                <LayersMenuCheckbox
+                  key={menuGroupItem.id}
+                  menuGroupItem={menuGroupItem}
+                  onChange={handleDatasetChange}
+                />
+              )
+            }
+          </LayersMenuGroupWrapper>)
+      }
+    </div>
+  )
+}

package/plugins/beta/datasets/src/components/LayersMenu/LayersMenuCheckbox.jsx

@@ -0,0 +1,31 @@
+import { datasetRegistry } from '../../registry/datasetRegistry.js'
+
+export const LayersMenuCheckbox = ({ menuGroupItem, onChange }) => {
+  const registryDataset = datasetRegistry.getDataset(menuGroupItem.id)
+  if (!registryDataset) {
+    return null
+  }
+  const datasetId = registryDataset.isSublayer ? registryDataset.parentId : registryDataset.id
+  const sublayerId = registryDataset.isSublayer ? registryDataset.id : undefined
+  const itemClass = `im-c-datasets-layers__item govuk-checkboxes govuk-checkboxes--small${registryDataset.visible ? '' : ' im-c-datasets-layers__item--checked'}`
+  return (
+    <div key={registryDataset.id} className={itemClass} data-module='govuk-checkboxes'>
+      <div className='govuk-checkboxes__item'>
+        <input
+          className='govuk-checkboxes__input'
+          id={registryDataset.id}
+          data-dataset-id={datasetId}
+          data-sublayer-id={sublayerId}
+          name='layers'
+          type='checkbox'
+          value={registryDataset.id}
+          checked={registryDataset.isLocallyVisible}
+          onChange={onChange}
+        />
+        <label className='im-c-datasets-layers__item-label govuk-label govuk-checkboxes__label' htmlFor={registryDataset.id}>
+          {registryDataset.label}
+        </label>
+      </div>
+    </div>
+  )
+}

package/plugins/beta/datasets/src/components/LayersMenu/LayersMenuGroupWrapper.jsx

@@ -0,0 +1,19 @@
+export const LayersMenuGroupWrapper = ({ menuGroup, children }) => {
+  if (!menuGroup.groupLabel) {
+    return <>{children}</>
+  }
+  // TODO - is there any need for im-c-datasets-layers-group--items-checked - it isn't used anywhere
+  // const anyItemsChecked = false
+  // const wrapperClass = `govuk-form-group im-c-datasets-layers-group${anyItemsChecked ? ' im-c-datasets-layers-group--items-checked' : ''}`
+  const wrapperClass = 'govuk-form-group im-c-datasets-layers-group'
+  return (
+    <div key={menuGroup.id} className={wrapperClass}>
+      <fieldset className='im-c-datasets-layers-group__fieldset'>
+        <legend className='im-c-datasets-layers-group__legend'>
+          {menuGroup.groupLabel}
+        </legend>
+        {children}
+      </fieldset>
+    </div>
+  )
+}

package/plugins/beta/datasets/src/datasets.scss

@@ -1,6 +1,6 @@
 // Components: specific UI components. Using 'CSS in Component' pattern
-@use './panels/Key.module';
-@use './panels/Layers.module';
+@use './components/Key/Key.module';
+@use './components/LayersMenu/Layers.module';
 
 .im-c-datasets {
     display: block;

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

@@ -8,14 +8,14 @@ const EVICTION_THRESHOLD = 1.2 // Trigger eviction at 120% of maxFeatures
 /**
  * Create a dynamic GeoJSON source that fetches data based on viewport
  * @param {Object} options
- * @param {Object} options.dataset - Dataset configuration
+ * @param {Object} options.registryDataset - registryDataset instance
  * @param {Object} options.map - Map instance
  * @param {string} options.sourceId - Source ID for the map
  * @param {Function} options.onUpdate - Callback when source data should be updated
  * @returns {Object} { destroy, clear, refresh }
  */
-export const createDynamicSource = ({ dataset, map, onUpdate }) => {
-  const { geojson: baseUrl, idProperty, transformRequest, maxFeatures, minZoom = 0 } = dataset
+export const createDynamicSource = ({ dynamicGeoJSON, map, onUpdate }) => {
+  const { url: baseUrl, idProperty, transformRequest, maxFeatures, minZoom = 0 } = dynamicGeoJSON
 
   // Feature cache: id → { feature, bbox, lastSeenAt }
   const features = new Map()
@@ -112,7 +112,7 @@ export const createDynamicSource = ({ dataset, map, onUpdate }) => {
     currentController = new AbortController()
 
     try {
-      const context = { bbox: currentBbox, zoom, dataset }
+      const context = { bbox: currentBbox, zoom }
       const data = await fetchGeoJSON(baseUrl, context, transformRequest, currentController.signal)
 
       const now = Date.now()
@@ -144,12 +144,12 @@ export const createDynamicSource = ({ dataset, map, onUpdate }) => {
       }
 
       // Update map source
-      onUpdate(dataset.id, toFeatureCollection())
+      onUpdate(dynamicGeoJSON.id, toFeatureCollection())
     } catch (error) {
       if (error.name === 'AbortError') {
         return
       }
-      console.error(`Failed to fetch dynamic GeoJSON for ${dataset.id}:`, error)
+      console.error(`Failed to fetch dynamic GeoJSON for ${dynamicGeoJSON.id}:`, error)
     }
   }
 
@@ -184,7 +184,7 @@ export const createDynamicSource = ({ dataset, map, onUpdate }) => {
     clear () {
       features.clear()
       fetchedBbox = null
-      onUpdate(dataset.id, { type: 'FeatureCollection', features: [] })
+      onUpdate(dynamicGeoJSON.id, { type: 'FeatureCollection', features: [] })
     },
 
     /**
@@ -208,7 +208,7 @@ export const createDynamicSource = ({ dataset, map, onUpdate }) => {
      */
     reapply () {
       if (features.size > 0) {
-        onUpdate(dataset.id, toFeatureCollection())
+        onUpdate(dynamicGeoJSON.id, toFeatureCollection())
       }
     }
   }

package/plugins/beta/datasets/src/{DatasetsInit.jsx → initialise/DatasetsInit.jsx}

@@ -1,13 +1,14 @@
 // src/plugins/datasets/datasetsInit.jsx
 import { useEffect, useRef } from 'react'
-import { EVENTS } from '../../../../src/config/events.js'
-import { datasetDefaults } from './defaults.js'
-import { createDatasets } from './datasets.js'
+import { EVENTS } from '../../../../../src/config/events.js'
+import { initialiseDatasets } from './initialiseDatasets.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { attachGlobalState } from '../registry/globalDataset.js'
+import { loadLayerAdapter, layerAdapter } from '../adapters/loadLayerAdapter.js'
 
 export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, mapProvider, services }) {
   const { dispatch } = pluginState
   const { eventBus, symbolRegistry, patternRegistry } = services
-
   const isMapStyleReady = !!mapProvider.map?.getStyle()
 
   // Keep a ref to the latest pluginState so event handlers can access current data
@@ -30,28 +31,17 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
       return
     }
 
-    // Only initialise state if not already set
-    if (!pluginState.datasets) {
-      dispatch({ type: 'SET_DATASETS', payload: { datasets: pluginConfig.datasets, datasetDefaults } })
-    }
-
     const initDatasets = async () => {
-      if (!pluginConfig.layerAdapter) {
-        throw new Error('datasets plugin: no layerAdapter provided. Import and pass maplibreLayerAdapter or a custom adapter.')
-      }
+      const adapter = await loadLayerAdapter(mapProvider, symbolRegistry, patternRegistry)
 
-      const { default: LayerAdapter } = await pluginConfig.layerAdapter.load()
-      const adapter = new LayerAdapter(mapProvider, symbolRegistry, patternRegistry)
-
-      dispatch({ type: 'SET_LAYER_ADAPTER', payload: adapter })
-
-      datasetsInstanceRef.current = createDatasets({
+      datasetsInstanceRef.current = initialiseDatasets({
         adapter,
         pluginConfig,
         pluginStateRef,
         mapStyle: mapState.mapStyle,
         mapProvider,
         events: EVENTS,
+        dispatch,
         eventBus
       })
     }
@@ -59,9 +49,18 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
     initDatasets()
   }, [isMapStyleReady, appState.mode])
 
+  useEffect(() => datasetRegistry.attach(pluginState.mappedDatasets, pluginState.orderedDatasets),
+    [pluginState.mappedDatasets, pluginState.orderedDatasets])
+
+  useEffect(() => attachGlobalState(pluginState.globals), [pluginState.globals])
+
+  // Call layerAdapter methods that are queued from state updates
   useEffect(() => {
-    dispatch({ type: 'BUILD_KEY_GROUPS', payload: null })
-  }, [pluginState.datasets])
+    const { actionsArray } = pluginState
+    if (!actionsArray.length) { return }
+    actionsArray.forEach(({ method, parameters }) => layerAdapter[method](...parameters))
+    dispatch({ type: 'REMOVE_ADAPTER_ACTIONS', payload: actionsArray })
+  }, [pluginState.actionsArray])
 
   // Cleanup only on unmount
   useEffect(() => {
@@ -70,7 +69,6 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
         datasetsInstanceRef.current.remove()
         datasetsInstanceRef.current = null
       }
-      dispatch({ type: 'SET_LAYER_ADAPTER', payload: null })
     }
   }, [])
 

package/plugins/beta/datasets/src/{defaults.js → initialise/defaults.js}

@@ -3,7 +3,7 @@ const datasetDefaults = {
   maxZoom: 24,
   showInKey: false,
   showInMenu: false,
-  visibility: 'visible',
+  visible: true,
   style: {
     stroke: '#d4351c',
     strokeWidth: 2,
@@ -48,4 +48,19 @@ const applyDatasetDefaults = (dataset, defaults) => {
   return { ...topLevelDefaults, ...topLevel, ...mergedStyle }
 }
 
-export { datasetDefaults, hasCustomVisualStyle, applyDatasetDefaults }
+const applyDatasetDefaultsWithoutFlattening = (dataset) => {
+  // Allow for existing configs that use visibility instead of visible, but default to visible if neither is set
+  if (dataset.visible !== true && dataset.visible !== false) {
+    dataset.visible = dataset.visibility !== 'hidden'
+  }
+  const datasetWithDefaults = { ...datasetDefaults, ...dataset, style: { ...datasetDefaults.style, ...dataset.style } }
+
+  const style = dataset.style || {}
+  if (!('symbolDescription' in style) && hasCustomVisualStyle(style)) {
+    delete datasetWithDefaults.style.symbolDescription
+  }
+  STYLE_PROPS.forEach(prop => delete datasetWithDefaults[prop])
+  return datasetWithDefaults
+}
+
+export { datasetDefaults, hasCustomVisualStyle, applyDatasetDefaults, applyDatasetDefaultsWithoutFlattening }

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

@@ -0,0 +1,127 @@
+import { datasetDefaults, hasCustomVisualStyle, applyDatasetDefaults } from './defaults'
+
+describe('datasetDefaults', () => {
+  it('has expected top-level defaults', () => {
+    expect(datasetDefaults).toMatchObject({
+      minZoom: 6,
+      maxZoom: 24,
+      showInKey: false,
+      showInMenu: false,
+      visible: true
+    })
+  })
+
+  it('has expected style defaults', () => {
+    expect(datasetDefaults.style).toMatchObject({
+      stroke: '#d4351c',
+      strokeWidth: 2,
+      fill: 'transparent',
+      symbolDescription: 'red outline'
+    })
+  })
+})
+
+describe('hasCustomVisualStyle', () => {
+  it('returns true when stroke is present', () => {
+    expect(hasCustomVisualStyle({ stroke: '#ff0000' })).toBe(true)
+  })
+
+  it('returns true when fill is present', () => {
+    expect(hasCustomVisualStyle({ fill: 'blue' })).toBe(true)
+  })
+
+  it('returns true when fillPattern is present', () => {
+    expect(hasCustomVisualStyle({ fillPattern: 'dots' })).toBe(true)
+  })
+
+  it('returns true when fillPatternSvgContent is present', () => {
+    expect(hasCustomVisualStyle({ fillPatternSvgContent: '<svg/>' })).toBe(true)
+  })
+
+  it('returns true when symbol is present', () => {
+    expect(hasCustomVisualStyle({ symbol: 'marker' })).toBe(true)
+  })
+
+  it('returns true when symbolSvgContent is present', () => {
+    expect(hasCustomVisualStyle({ symbolSvgContent: '<svg/>' })).toBe(true)
+  })
+
+  it('returns false when no visual style props are present', () => {
+    expect(hasCustomVisualStyle({ strokeWidth: 2, opacity: 0.5 })).toBe(false)
+  })
+
+  it('returns false for an empty style object', () => {
+    expect(hasCustomVisualStyle({})).toBe(false)
+  })
+})
+
+describe('applyDatasetDefaults', () => {
+  const defaults = {
+    minZoom: 6,
+    maxZoom: 24,
+    showInKey: false,
+    style: {
+      stroke: '#d4351c',
+      strokeWidth: 2,
+      symbolDescription: 'red outline'
+    }
+  }
+
+  it('merges top-level dataset properties over defaults', () => {
+    const dataset = { id: 'test', minZoom: 10 }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.minZoom).toBe(10)
+    expect(result.maxZoom).toBe(24)
+    expect(result.showInKey).toBe(false)
+  })
+
+  it('flattens style properties into the result', () => {
+    const dataset = { id: 'test', style: { fill: 'transparent' } }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.fill).toBe('transparent')
+    expect(result.stroke).toBe('#d4351c')
+    expect(result.style).toBeUndefined()
+  })
+
+  it('dataset style properties override default style properties', () => {
+    const dataset = { id: 'test', style: { stroke: '#0000ff' } }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.stroke).toBe('#0000ff')
+  })
+
+  it('drops symbolDescription from defaults when custom visual style is present and no explicit symbolDescription', () => {
+    const dataset = { id: 'test', style: { stroke: '#0000ff' } }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.symbolDescription).toBeUndefined()
+  })
+
+  it('keeps symbolDescription when dataset provides its own, even with custom visual style', () => {
+    const dataset = { id: 'test', style: { stroke: '#0000ff', symbolDescription: 'blue outline' } }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.symbolDescription).toBe('blue outline')
+  })
+
+  it('keeps symbolDescription from defaults when no custom visual style is present', () => {
+    const dataset = { id: 'test', style: { strokeWidth: 4 } }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.symbolDescription).toBe('red outline')
+  })
+
+  it('keeps symbolDescription from defaults when dataset has no style', () => {
+    const dataset = { id: 'test' }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.symbolDescription).toBe('red outline')
+  })
+
+  it('ignores style properties set at top level of dataset', () => {
+    const dataset = { id: 'test', stroke: '#ignored' }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result.stroke).toBe('#d4351c')
+  })
+
+  it('does not include style key in the result', () => {
+    const dataset = { id: 'test', style: { fill: 'blue' } }
+    const result = applyDatasetDefaults(dataset, defaults)
+    expect(result).not.toHaveProperty('style')
+  })
+})

package/plugins/beta/datasets/src/{datasets.js → initialise/initialiseDatasets.js}

@@ -1,71 +1,75 @@
-import { createDynamicSource } from './fetch/createDynamicSource.js'
+import { createDynamicSource } from '../fetch/createDynamicSource.js'
 // NOSONAR: applyDatasetDefaults and datasetDefaults are used in processedDatasets.map
 import { applyDatasetDefaults, datasetDefaults } from './defaults.js'
+import { mappedDatasetsReducer } from '../reducers/mappedDatasetsReducer.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
 
-const isDynamicSource = (dataset) =>
-  typeof dataset.geojson === 'string' &&
-  !!dataset.idProperty &&
-  typeof dataset.transformRequest === 'function'
-
-export const createDatasets = ({
+export const initialiseDatasets = ({
   adapter,
   pluginConfig,
   pluginStateRef,
   mapStyle,
   mapProvider,
   events,
+  dispatch,
   eventBus
 }) => {
   const { datasets } = pluginConfig
-
   const dynamicSources = new Map()
 
-  const getDatasets = () => pluginStateRef.current.datasets || datasets
-  const getHiddenFeatures = () => pluginStateRef.current.hiddenFeatures || {}
+  if (pluginConfig.globals) {
+    dispatch({ type: 'SET_GLOBAL_STATE', payload: pluginConfig.globals })
+  }
 
   // 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)) {
+  const { mappedDatasets, orderedDatasets } = mappedDatasetsReducer({ datasets })
+  if (adapter.createDataset) {
+    datasetRegistry.attachCreateDataset(adapter.createDataset)
+  }
+  datasetRegistry.attach(mappedDatasets)
+  adapter.init(mapStyle).then(() => {
+    datasetRegistry.forEachDataset(registryDataset => {
+      if (!registryDataset.hasDynamicGeoJSON) {
         return
       }
-
+      const { dynamicGeoJSON } = registryDataset
       const dynamicSource = createDynamicSource({
-        dataset,
+        dynamicGeoJSON,
         map: mapProvider.map,
         onUpdate: (datasetId, geojson) => adapter.setData(datasetId, geojson)
       })
-      dynamicSources.set(dataset.id, dynamicSource)
+      dynamicSources.set(registryDataset.id, dynamicSource)
     })
-
+    // TODO - apply dynamic source defaults here, and include in mappedDatasets
+    dispatch({ type: 'SET_DATASETS', payload: { datasets: processedDatasets, mappedDatasets, orderedDatasets } })
     eventBus.emit('datasets:ready')
   })
 
   let currentMapStyle = mapStyle
 
   // Handle basemap style changes — delegate entirely to the adapter
-  const onSetStyle = (newMapStyle) => {
+  const onSetMapStyle = (newMapStyle) => {
     currentMapStyle = newMapStyle
-    adapter.onStyleChange(getDatasets(), newMapStyle, getHiddenFeatures(), dynamicSources)
+    adapter.onMapStyleChange(newMapStyle, dynamicSources)
   }
 
-  const onSizeChange = () => {
-    adapter.onSizeChange(getDatasets(), currentMapStyle)
+  const onMapSizeChange = () => {
+    adapter.onMapSizeChange(currentMapStyle)
   }
 
-  eventBus.on(events.MAP_SET_STYLE, onSetStyle)
-  eventBus.on(events.MAP_SIZE_CHANGE, onSizeChange)
+  eventBus.on(events.MAP_SET_STYLE, onSetMapStyle)
+  eventBus.on(events.MAP_SIZE_CHANGE, onMapSizeChange)
 
   return {
     remove () {
-      eventBus.off(events.MAP_SET_STYLE, onSetStyle)
-      eventBus.off(events.MAP_SIZE_CHANGE, onSizeChange)
+      eventBus.off(events.MAP_SET_STYLE, onSetMapStyle)
+      eventBus.off(events.MAP_SIZE_CHANGE, onMapSizeChange)
 
       // Clean up dynamic sources
       dynamicSources.forEach(source => source.destroy())
       dynamicSources.clear()
-      adapter.destroy(getDatasets())
+      adapter.destroy()
     },
 
     /**