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

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

@@ -1,60 +1,140 @@
-import React from "react"
+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>
   )
 }

package/plugins/beta/datasets/src/panels/Key.module.scss

@@ -1,19 +1,58 @@
-.im-c-datasets-key {
+// When groups are present, every direct child gets a border-top
+.im-c-datasets-key--has-groups > * {
+  border-top: 1px solid var(--button-hover-color);
+}
+
+// When no groups, only the first child gets a border-top
+.im-c-datasets-key:not(.im-c-datasets-key--has-groups) > *:first-child {
+  border-top: 1px solid var(--button-hover-color);
+}
 
+.im-c-datasets-key__group:not(:last-child) {
+  padding-bottom: 5px;
 }
 
-.im-c-datasets-key__item-label {
+.im-c-datasets-key__group-heading {
+  padding-top: 15px;
+  padding-bottom: 10px;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  color: var(--foreground-color);
+}
+
+.im-c-datasets-key__item {
   display: flex;
   align-items: start;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  align-self: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
   font-size: 1rem;
-  line-height: 1.2;
+
+  // When mixed with groups, flat items match group heading spacing
+  .im-c-datasets-key--has-groups > & {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  // First item inside a group — heading already provides top spacing
+  .im-c-datasets-key__group &:first-child {
+    padding-top: 0;
+  }
+}
+
+// No-groups: first item needs 15px below the single border
+.im-c-datasets-key:not(.im-c-datasets-key--has-groups) > .im-c-datasets-key__item:first-child {
+  padding-top: 15px;
 }
 
-.im-c-datasets-key__item-label svg {
+// Last item in all scenarios — flat or inside the last group
+.im-c-datasets-key > .im-c-datasets-key__item:last-child,
+.im-c-datasets-key__group:last-child .im-c-datasets-key__item:last-child {
+  padding-bottom: 5px;
+}
+
+.im-c-datasets-key__item svg {
   position: relative;
   flex-shrink: 0;
-  margin: 0px 13px 0 2px;
-}
+  margin: 0 13px 0 2px;
+}

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

@@ -1,39 +1,141 @@
 import React from 'react'
-import { showDataset } from '../api/showDataset'
-import { hideDataset } from '../api/hideDataset'
+import { setDatasetVisibility } from '../api/setDatasetVisibility'
 
-export const Layers = ({ pluginState, mapProvider }) => {
+const CHECKBOX_LABEL_CLASS = 'im-c-datasets-layers__item-label govuk-label govuk-checkboxes__label'
 
-  const handleChange = (e) => {
-    const { value, checked } = e.target
-    if (checked) {
-      showDataset({ mapProvider, pluginState }, value)
-    } else {
-      hideDataset({ mapProvider, pluginState }, value)
+const hasToggleableSublayers = (dataset) => dataset.sublayers?.some(sublayer => sublayer.toggleVisibility)
+
+/**
+ * Collapse the filtered dataset list into ordered render items:
+ *   { type: 'sublayers', dataset }              — dataset with sublayers (takes precedence)
+ *   { type: 'group', groupLabel, datasets } — datasets sharing a groupLabel
+ *   { type: 'flat', dataset }               — standalone dataset
+ */
+const buildRenderItems = (datasets) => {
+  const seenGroups = new Set()
+  const items = []
+  datasets.forEach(dataset => {
+    if (hasToggleableSublayers(dataset)) {
+      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 => !hasToggleableSublayers(d) && d.groupLabel === dataset.groupLabel)
+      })
+      return
+    }
+    items.push({ type: 'flat', dataset })
+  })
+  return items
+}
+
+export const Layers = ({ pluginState }) => {
+  const handleDatasetChange = (e) => {
+    const { value, checked } = e.target
+    setDatasetVisibility({ pluginState }, checked, { datasetId: value })
   }
 
-  return (
-    <div className="im-c-datasets-layers">
-      <div className="govuk-form-group">
-        <fieldset className="govuk-fieldset">
-          <legend className="govuk-visually-hidden">
-            Layers
-          </legend>
-          <div className="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
-            {(pluginState.datasets || []).filter(dataset => dataset.showInLayers).map(dataset => (
-              <div key={dataset.id} className={`im-c-datasets-layers__item${dataset.visibility !== 'hidden' ? ' im-c-datasets-layers__item--checked' : ''}`}>
-                <div className="govuk-checkboxes__item">
-                  <input className="govuk-checkboxes__input" id={dataset.id} name="layers" type="checkbox" value={dataset.id} checked={dataset.visibility !== 'hidden'} onChange={handleChange} />
-                  <label className="im-c-datasets-layers__item-label govuk-label govuk-checkboxes__label" htmlFor={dataset.id}>
-                    {dataset.label}
-                  </label>
-                </div>
-              </div>
-            ))}
-          </div>
-        </fieldset>
+  const handleSublayerChange = (e) => {
+    const { checked } = e.target
+    const datasetId = e.target.dataset.datasetId
+    const sublayerId = e.target.dataset.sublayerId
+    setDatasetVisibility({ pluginState }, checked, { datasetId, sublayerId })
+  }
+
+  const renderDatasetItem = (dataset) => {
+    const itemClass = `im-c-datasets-layers__item govuk-checkboxes govuk-checkboxes--small${dataset.visibility === 'hidden' ? '' : ' im-c-datasets-layers__item--checked'}`
+    return (
+      <div key={dataset.id} className={itemClass} data-module='govuk-checkboxes'>
+        <div className='govuk-checkboxes__item'>
+          <input
+            className='govuk-checkboxes__input'
+            id={dataset.id}
+            name='layers'
+            type='checkbox'
+            value={dataset.id}
+            checked={dataset.visibility !== 'hidden'}
+            onChange={handleDatasetChange}
+          />
+          <label className={CHECKBOX_LABEL_CLASS} htmlFor={dataset.id}>
+            {dataset.label}
+          </label>
+        </div>
       </div>
+    )
+  }
+
+  const visibleDatasets = (pluginState.datasets || [])
+    .filter(dataset => dataset.toggleVisibility || hasToggleableSublayers(dataset))
+
+  const renderItems = buildRenderItems(visibleDatasets)
+  const hasGroups = renderItems.some(item => item.type === 'sublayers' || item.type === 'group')
+  const containerClass = `im-c-datasets-layers${hasGroups ? ' im-c-datasets-layers--has-groups' : ''}`
+
+  return (
+    <div className={containerClass}>
+      {renderItems.map(item => {
+        if (item.type === 'sublayers') {
+          const { dataset } = item
+          const anySublayerChecked = dataset.sublayers
+            .filter(sublayer => sublayer.toggleVisibility)
+            .some(sublayer => dataset.sublayerVisibility?.[sublayer.id] !== 'hidden')
+          const wrapperClass = `govuk-form-group im-c-datasets-layers-group${anySublayerChecked ? ' im-c-datasets-layers-group--items-checked' : ''}`
+          return (
+            <div key={dataset.id} className={wrapperClass}>
+              <fieldset className='im-c-datasets-layers-group__fieldset'>
+                <legend className='im-c-datasets-layers-group__legend'>{dataset.label}</legend>
+                {dataset.sublayers
+                  .filter(sublayer => sublayer.toggleVisibility)
+                  .map(sublayer => {
+                    const sublayerVisible = dataset.sublayerVisibility?.[sublayer.id] !== 'hidden'
+                    const inputId = `${dataset.id}-${sublayer.id}`
+                    const itemClass = `im-c-datasets-layers__item govuk-checkboxes govuk-checkboxes--small${sublayerVisible ? ' im-c-datasets-layers__item--checked' : ''}`
+                    return (
+                      <div key={sublayer.id} className={itemClass} data-module='govuk-checkboxes'>
+                        <div className='govuk-checkboxes__item'>
+                          <input
+                            className='govuk-checkboxes__input'
+                            id={inputId}
+                            type='checkbox'
+                            checked={sublayerVisible}
+                            data-dataset-id={dataset.id}
+                            data-sublayer-id={sublayer.id}
+                            onChange={handleSublayerChange}
+                          />
+                          <label className={CHECKBOX_LABEL_CLASS} htmlFor={inputId}>
+                            {sublayer.label}
+                          </label>
+                        </div>
+                      </div>
+                    )
+                  })}
+              </fieldset>
+            </div>
+          )
+        }
+
+        if (item.type === 'group') {
+          const anyDatasetChecked = item.datasets.some(d => d.visibility !== 'hidden')
+          const wrapperClass = `govuk-form-group im-c-datasets-layers-group${anyDatasetChecked ? ' im-c-datasets-layers-group--items-checked' : ''}`
+          return (
+            <div key={item.groupLabel} className={wrapperClass}>
+              <fieldset className='im-c-datasets-layers-group__fieldset'>
+                <legend className='im-c-datasets-layers-group__legend'>{item.groupLabel}</legend>
+                {item.datasets.map(dataset => renderDatasetItem(dataset))}
+              </fieldset>
+            </div>
+          )
+        }
+
+        return renderDatasetItem(item.dataset)
+      })}
     </div>
   )
 }

package/plugins/beta/datasets/src/panels/Layers.module.scss

@@ -1,8 +1,37 @@
+// When groups are present, every direct child (groups and flat items) gets a border-top
+.im-c-datasets-layers--has-groups > * {
+  border-top: 1px solid var(--button-hover-color);
+}
+
+// When no groups, only the first child gets a border-top with 15px padding
+.im-c-datasets-layers:not(.im-c-datasets-layers--has-groups) > *:first-child {
+  border-top: 1px solid var(--button-hover-color);
+  padding-top: 10px;
+}
+
+.im-c-datasets-layers > *:last-child {
+  margin-bottom: -5px;
+}
+
+.im-c-datasets-layers-group:not(:last-child) {
+  padding-bottom: 5px;
+}
+
 .im-c-datasets-layers__item {
-  border: 1px solid var(--button-hover-color);
-  padding-left: 10px;
-  &:not(last-child) {
-    margin-bottom: 5px;
+  padding-bottom: 5px;
+
+  .im-c-datasets-layers--has-groups > & {
+    padding-top: 5px;
+  }
+
+  // Items inside a group have no individual padding or spacing between them
+  .im-c-datasets-layers-group & {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -19,10 +48,6 @@
   color: var(--foreground-color);
 }
 
-.im-c-datasets-layers__item--checked {
-  border-color: var(--app-border-color);
-}
-
 // GovUK style overide
 .im-c-datasets-layers__item .govuk-checkboxes__item {
   flex-wrap: nowrap;
@@ -31,3 +56,20 @@
     margin-left: -3px;
   }
 }
+
+.im-c-datasets-layers-group__fieldset {
+  // Reset browser fieldset defaults
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.im-c-datasets-layers-group__legend {
+  padding-top: 15px;
+  padding-bottom: 10px;
+  padding-inline: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  color: var(--foreground-color);
+}

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

@@ -1,16 +1,27 @@
+import { applyDatasetDefaults } from './defaults.js'
+
 const initialState = {
   datasets: null,
-  hiddenFeatures: {} // { [layerId]: { idProperty: string, ids: string[] } }
+  hiddenFeatures: {}, // { [layerId]: { idProperty: string, ids: string[] } }
+  layerAdapter: null
+}
+
+const initSublayerVisibility = (dataset) => {
+  if (!dataset.sublayers?.length) {
+    return dataset
+  }
+  const sublayerVisibility = {}
+  dataset.sublayers.forEach(sublayer => {
+    sublayerVisibility[sublayer.id] = 'visible'
+  })
+  return { ...dataset, sublayerVisibility }
 }
 
 const setDatasets = (state, payload) => {
   const { datasets, datasetDefaults } = payload
   return {
     ...state,
-    datasets: datasets.map(dataset => ({
-      ...datasetDefaults,
-      ...dataset
-    }))
+    datasets: datasets.map(dataset => initSublayerVisibility(applyDatasetDefaults(dataset, datasetDefaults)))
   }
 }
 
@@ -20,7 +31,7 @@ const addDataset = (state, payload) => {
     ...state,
     datasets: [
       ...(state.datasets || []),
-      { ...datasetDefaults, ...dataset }
+      initSublayerVisibility(applyDatasetDefaults(dataset, datasetDefaults))
     ]
   }
 }
@@ -43,6 +54,14 @@ const setDatasetVisibility = (state, payload) => {
   }
 }
 
+const setGlobalVisibility = (state, payload) => {
+  const { visibility } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => ({ ...dataset, visibility }))
+  }
+}
+
 const hideFeatures = (state, payload) => {
   const { layerId, idProperty, featureIds } = payload
   const existing = state.hiddenFeatures[layerId]
@@ -61,12 +80,15 @@ const hideFeatures = (state, payload) => {
 const showFeatures = (state, payload) => {
   const { layerId, featureIds } = payload
   const existing = state.hiddenFeatures[layerId]
-  if (!existing) return state
+  if (!existing) {
+    return state
+  }
 
   const newIds = existing.ids.filter(id => !featureIds.includes(id))
 
   if (newIds.length === 0) {
-    const { [layerId]: _, ...rest } = state.hiddenFeatures
+    const rest = { ...state.hiddenFeatures }
+    delete rest[layerId]
     return { ...state, hiddenFeatures: rest }
   }
 
@@ -79,13 +101,110 @@ const showFeatures = (state, payload) => {
   }
 }
 
+const setSublayerVisibility = (state, payload) => {
+  const { datasetId, sublayerId, visibility } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => {
+      if (dataset.id !== datasetId) {
+        return dataset
+      }
+      return {
+        ...dataset,
+        sublayerVisibility: {
+          ...dataset.sublayerVisibility,
+          [sublayerId]: visibility
+        }
+      }
+    })
+  }
+}
+
+const setDatasetStyle = (state, payload) => {
+  const { datasetId, styleChanges } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset =>
+      dataset.id === datasetId ? { ...dataset, ...styleChanges } : dataset
+    )
+  }
+}
+
+const setSublayerStyle = (state, payload) => {
+  const { datasetId, sublayerId, styleChanges } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => {
+      if (dataset.id !== datasetId) {
+        return dataset
+      }
+      return {
+        ...dataset,
+        sublayers: dataset.sublayers?.map(sublayer =>
+          sublayer.id === sublayerId
+            ? { ...sublayer, style: { ...sublayer.style, ...styleChanges } }
+            : sublayer
+        )
+      }
+    })
+  }
+}
+
+const setOpacity = (state, payload) => {
+  const { datasetId, opacity } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset =>
+      dataset.id === datasetId ? { ...dataset, opacity } : dataset
+    )
+  }
+}
+
+const setGlobalOpacity = (state, payload) => {
+  const { opacity } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => ({ ...dataset, opacity }))
+  }
+}
+
+const setSublayerOpacity = (state, payload) => {
+  const { datasetId, sublayerId, opacity } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => {
+      if (dataset.id !== datasetId) {
+        return dataset
+      }
+      return {
+        ...dataset,
+        sublayers: dataset.sublayers?.map(sublayer =>
+          sublayer.id === sublayerId
+            ? { ...sublayer, style: { ...sublayer.style, opacity } }
+            : sublayer
+        )
+      }
+    })
+  }
+}
+
+const setLayerAdapter = (state, payload) => ({ ...state, layerAdapter: payload })
+
 const actions = {
   SET_DATASETS: setDatasets,
   ADD_DATASET: addDataset,
   REMOVE_DATASET: removeDataset,
   SET_DATASET_VISIBILITY: setDatasetVisibility,
+  SET_GLOBAL_VISIBILITY: setGlobalVisibility,
+  SET_SUBLAYER_VISIBILITY: setSublayerVisibility,
+  SET_DATASET_STYLE: setDatasetStyle,
+  SET_SUBLAYER_STYLE: setSublayerStyle,
+  SET_OPACITY: setOpacity,
+  SET_GLOBAL_OPACITY: setGlobalOpacity,
+  SET_SUBLAYER_OPACITY: setSublayerOpacity,
   HIDE_FEATURES: hideFeatures,
-  SHOW_FEATURES: showFeatures
+  SHOW_FEATURES: showFeatures,
+  SET_LAYER_ADAPTER: setLayerAdapter
 }
 
 export {