From 9973e7a61cf72752807d0e42ecae44dd4905d4fd Mon Sep 17 00:00:00 2001
From: Mark Fee <mark.fee@defra.gov.uk>
Date: Wed, 20 May 2026 15:39:23 +0100
Subject: [PATCH 1/6] IM-291 Key components now use the datasetsReducer

---
 .../beta/datasets/src/components/KeySvg.jsx   | 24 ---------
 .../datasets/src/components/KeySvgLine.jsx    | 19 -------
 .../datasets/src/components/KeySvgRect.jsx    | 22 --------
 .../src/components/{ => key}/EmptyKey.jsx     |  0
 .../components/{ => key}/EmptyKey.test.jsx    |  0
 .../datasets/src/components/key/KeyItem.jsx   |  0
 .../datasets/src/components/key/KeySvg.jsx    | 22 ++++++++
 .../src/components/{ => key}/KeySvg.test.jsx  |  6 +--
 .../src/components/key/KeySvgLine.jsx         | 19 +++++++
 .../components/{ => key}/KeySvgLine.test.jsx  |  2 +-
 .../components/{ => key}/KeySvgPattern.jsx    |  9 ++--
 .../{ => key}/KeySvgPattern.test.jsx          |  2 +-
 .../src/components/key/KeySvgRect.jsx         | 22 ++++++++
 .../components/{ => key}/KeySvgRect.test.jsx  |  2 +-
 .../src/components/{ => key}/KeySvgSymbol.jsx | 12 ++---
 .../{ => key}/KeySvgSymbol.test.jsx           |  2 +-
 plugins/beta/datasets/src/panels/Key.jsx      | 50 +++++++------------
 17 files changed, 98 insertions(+), 115 deletions(-)
 delete mode 100644 plugins/beta/datasets/src/components/KeySvg.jsx
 delete mode 100644 plugins/beta/datasets/src/components/KeySvgLine.jsx
 delete mode 100644 plugins/beta/datasets/src/components/KeySvgRect.jsx
 rename plugins/beta/datasets/src/components/{ => key}/EmptyKey.jsx (100%)
 rename plugins/beta/datasets/src/components/{ => key}/EmptyKey.test.jsx (100%)
 create mode 100644 plugins/beta/datasets/src/components/key/KeyItem.jsx
 create mode 100644 plugins/beta/datasets/src/components/key/KeySvg.jsx
 rename plugins/beta/datasets/src/components/{ => key}/KeySvg.test.jsx (93%)
 create mode 100644 plugins/beta/datasets/src/components/key/KeySvgLine.jsx
 rename plugins/beta/datasets/src/components/{ => key}/KeySvgLine.test.jsx (96%)
 rename plugins/beta/datasets/src/components/{ => key}/KeySvgPattern.jsx (54%)
 rename plugins/beta/datasets/src/components/{ => key}/KeySvgPattern.test.jsx (95%)
 create mode 100644 plugins/beta/datasets/src/components/key/KeySvgRect.jsx
 rename plugins/beta/datasets/src/components/{ => key}/KeySvgRect.test.jsx (97%)
 rename plugins/beta/datasets/src/components/{ => key}/KeySvgSymbol.jsx (55%)
 rename plugins/beta/datasets/src/components/{ => key}/KeySvgSymbol.test.jsx (98%)

diff --git a/plugins/beta/datasets/src/components/KeySvg.jsx b/plugins/beta/datasets/src/components/KeySvg.jsx
deleted file mode 100644
index 3a46fe7f..00000000
--- a/plugins/beta/datasets/src/components/KeySvg.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { hasSymbol } 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) && symbolRegistry.getSymbolDef(props)
-  if (symbolDef) {
-    return <KeySvgSymbol {...props} symbolDef={symbolDef} />
-  }
-
-  if (hasPattern(props)) {
-    return <KeySvgPattern {...props} />
-  }
-
-  if (props.keySymbolShape === 'line') {
-    return <KeySvgLine {...props} />
-  }
-
-  return <KeySvgRect {...props} />
-}
diff --git a/plugins/beta/datasets/src/components/KeySvgLine.jsx b/plugins/beta/datasets/src/components/KeySvgLine.jsx
deleted file mode 100644
index d1015383..00000000
--- a/plugins/beta/datasets/src/components/KeySvgLine.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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>
-  )
-}
diff --git a/plugins/beta/datasets/src/components/KeySvgRect.jsx b/plugins/beta/datasets/src/components/KeySvgRect.jsx
deleted file mode 100644
index 0207d561..00000000
--- a/plugins/beta/datasets/src/components/KeySvgRect.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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>
-  )
-}
diff --git a/plugins/beta/datasets/src/components/EmptyKey.jsx b/plugins/beta/datasets/src/components/key/EmptyKey.jsx
similarity index 100%
rename from plugins/beta/datasets/src/components/EmptyKey.jsx
rename to plugins/beta/datasets/src/components/key/EmptyKey.jsx
diff --git a/plugins/beta/datasets/src/components/EmptyKey.test.jsx b/plugins/beta/datasets/src/components/key/EmptyKey.test.jsx
similarity index 100%
rename from plugins/beta/datasets/src/components/EmptyKey.test.jsx
rename to plugins/beta/datasets/src/components/key/EmptyKey.test.jsx
diff --git a/plugins/beta/datasets/src/components/key/KeyItem.jsx b/plugins/beta/datasets/src/components/key/KeyItem.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/plugins/beta/datasets/src/components/key/KeySvg.jsx b/plugins/beta/datasets/src/components/key/KeySvg.jsx
new file mode 100644
index 00000000..264369ac
--- /dev/null
+++ b/plugins/beta/datasets/src/components/key/KeySvg.jsx
@@ -0,0 +1,22 @@
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+
+export const KeySvg = ({ symbolRegistry, registryDataset, mapStyle, patternRegistry }) => {
+  const { hasSymbol, hasPattern, style } = registryDataset
+  const symbolDef = hasSymbol && symbolRegistry.getSymbolDef(style)
+  if (symbolDef) {
+    return <KeySvgSymbol mapStyle={mapStyle} registryDataset={registryDataset} symbolRegistry={symbolRegistry} symbolDef={symbolDef} />
+  }
+
+  if (hasPattern) {
+    return <KeySvgPattern mapStyle={mapStyle} registryDataset={registryDataset} patternRegistry={patternRegistry} />
+  }
+
+  if (style.keySymbolShape === 'line') {
+    return <KeySvgLine mapStyle={mapStyle} registryDataset={registryDataset} />
+  }
+
+  return <KeySvgRect mapStyle={mapStyle} registryDataset={registryDataset} />
+}
diff --git a/plugins/beta/datasets/src/components/KeySvg.test.jsx b/plugins/beta/datasets/src/components/key/KeySvg.test.jsx
similarity index 93%
rename from plugins/beta/datasets/src/components/KeySvg.test.jsx
rename to plugins/beta/datasets/src/components/key/KeySvg.test.jsx
index 84b02b7a..4109bd30 100644
--- a/plugins/beta/datasets/src/components/KeySvg.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvg.test.jsx
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
 import { KeySvg } from './KeySvg'
 
-import { hasSymbol } from '../../../../../src/utils/symbolUtils.js'
-import { hasPattern } from '../../../../../src/utils/patternUtils.js'
-import { symbolRegistry } from '../../../../../src/services/symbolRegistry.js'
+import { hasSymbol } from '../../../../../../src/utils/symbolUtils.js'
+import { hasPattern } from '../../../../../../src/utils/patternUtils.js'
+import { symbolRegistry } from '../../../../../../src/services/symbolRegistry.js'
 // import { patternRegistry } from '../../../../../src/services/patternRegistry.js'
 
 const getSymbolDef = jest.spyOn(symbolRegistry, 'getSymbolDef')
diff --git a/plugins/beta/datasets/src/components/key/KeySvgLine.jsx b/plugins/beta/datasets/src/components/key/KeySvgLine.jsx
new file mode 100644
index 00000000..5d156550
--- /dev/null
+++ b/plugins/beta/datasets/src/components/key/KeySvgLine.jsx
@@ -0,0 +1,19 @@
+import { svgProps, SVG_SIZE, SVG_CENTER } from '../svgProperties.js'
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgLine = ({ mapStyle, registryDataset }) => {
+  const { style } = registryDataset
+  return (
+    <svg {...svgProps}>
+      <line
+        x1={style.strokeWidth / 2}
+        y1={SVG_CENTER}
+        x2={SVG_SIZE - style.strokeWidth / 2}
+        y2={SVG_CENTER}
+        stroke={getValueForStyle(style.stroke, mapStyle.id)}
+        strokeWidth={style.strokeWidth}
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}
diff --git a/plugins/beta/datasets/src/components/KeySvgLine.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx
similarity index 96%
rename from plugins/beta/datasets/src/components/KeySvgLine.test.jsx
rename to plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx
index 26711623..71af2bd5 100644
--- a/plugins/beta/datasets/src/components/KeySvgLine.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { KeySvgLine } from './KeySvgLine'
 
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
 
 jest.mock('../../../../../src/utils/getValueForStyle', () => ({
   getValueForStyle: jest.fn((value) => value)
diff --git a/plugins/beta/datasets/src/components/KeySvgPattern.jsx b/plugins/beta/datasets/src/components/key/KeySvgPattern.jsx
similarity index 54%
rename from plugins/beta/datasets/src/components/KeySvgPattern.jsx
rename to plugins/beta/datasets/src/components/key/KeySvgPattern.jsx
index 9fdb4d93..cd5c2286 100644
--- a/plugins/beta/datasets/src/components/KeySvgPattern.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgPattern.jsx
@@ -1,10 +1,9 @@
-import { svgProps } from './svgProperties.js'
+import { svgProps } from '../svgProperties.js'
 const PATTERN_INSET = 2
 
-export const KeySvgPattern = (props) => {
-  const { patternRegistry, mapStyle } = props
-
-  const paths = patternRegistry.getKeyPatternPaths(props, mapStyle.id)
+export const KeySvgPattern = ({ patternRegistry, registryDataset, mapStyle }) => {
+  const { style } = registryDataset
+  const paths = patternRegistry.getKeyPatternPaths(style, mapStyle.id)
   return (
     <svg {...svgProps}>
       <g dangerouslySetInnerHTML={{ __html: paths.border }} />
diff --git a/plugins/beta/datasets/src/components/KeySvgPattern.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx
similarity index 95%
rename from plugins/beta/datasets/src/components/KeySvgPattern.test.jsx
rename to plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx
index f17b73b4..aaf005ff 100644
--- a/plugins/beta/datasets/src/components/KeySvgPattern.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import { KeySvgPattern } from './KeySvgPattern'
-import { patternRegistry } from '../../../../../src/services/patternRegistry.js'
+import { patternRegistry } from '../../../../../../src/services/patternRegistry.js'
 
 const getKeyPatternPaths = jest.spyOn(patternRegistry, 'getKeyPatternPaths')
 const defaultProps = {
diff --git a/plugins/beta/datasets/src/components/key/KeySvgRect.jsx b/plugins/beta/datasets/src/components/key/KeySvgRect.jsx
new file mode 100644
index 00000000..d3ef8d86
--- /dev/null
+++ b/plugins/beta/datasets/src/components/key/KeySvgRect.jsx
@@ -0,0 +1,22 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { svgProps, SVG_SIZE } from '../svgProperties.js'
+
+export const KeySvgRect = ({ mapStyle, registryDataset }) => {
+  const { style } = registryDataset
+  return (
+    <svg {...svgProps}>
+      <rect
+        x={style.strokeWidth / 2}
+        y={style.strokeWidth / 2}
+        width={SVG_SIZE - style.strokeWidth}
+        height={SVG_SIZE - style.strokeWidth}
+        rx={style.strokeWidth}
+        ry={style.strokeWidth}
+        fill={getValueForStyle(style.fill, mapStyle.id)}
+        stroke={getValueForStyle(style.stroke, mapStyle.id)}
+        strokeWidth={style.strokeWidth}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
diff --git a/plugins/beta/datasets/src/components/KeySvgRect.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx
similarity index 97%
rename from plugins/beta/datasets/src/components/KeySvgRect.test.jsx
rename to plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx
index bb911330..158926af 100644
--- a/plugins/beta/datasets/src/components/KeySvgRect.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { KeySvgRect } from './KeySvgRect'
 
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
 
 jest.mock('../../../../../src/utils/getValueForStyle', () => ({
   getValueForStyle: jest.fn((value) => value)
diff --git a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx b/plugins/beta/datasets/src/components/key/KeySvgSymbol.jsx
similarity index 55%
rename from plugins/beta/datasets/src/components/KeySvgSymbol.jsx
rename to plugins/beta/datasets/src/components/key/KeySvgSymbol.jsx
index 4b62e46b..fdb41dcc 100644
--- a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgSymbol.jsx
@@ -1,13 +1,13 @@
-import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
-import { svgSymbolProps } from './svgProperties.js'
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
+import { svgSymbolProps } from '../svgProperties.js'
 
-export const KeySvgSymbol = (props) => {
-  const { symbolRegistry, mapStyle, symbolDef } = props
+export const KeySvgSymbol = ({ symbolRegistry, registryDataset, mapStyle, symbolDef }) => {
+  const { style } = registryDataset
   const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
   const keyMapStyle = { ...mapStyle, mapColorScheme }
 
-  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle)
-  const viewBox = getSymbolViewBox(props, symbolDef)
+  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle)
+  const viewBox = getSymbolViewBox(style, symbolDef)
   return (
     <svg {...svgSymbolProps} viewBox={viewBox}>
       <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
diff --git a/plugins/beta/datasets/src/components/KeySvgSymbol.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx
similarity index 98%
rename from plugins/beta/datasets/src/components/KeySvgSymbol.test.jsx
rename to plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx
index 2adfcd22..6f151fff 100644
--- a/plugins/beta/datasets/src/components/KeySvgSymbol.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { KeySvgSymbol } from './KeySvgSymbol'
 
-import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
 
 jest.mock('../../../../../src/utils/symbolUtils.js', () => ({
   getSymbolStyleColors: jest.fn(() => ({ foreground: '#000', background: '#fff' })),
diff --git a/plugins/beta/datasets/src/panels/Key.jsx b/plugins/beta/datasets/src/panels/Key.jsx
index 5e9a1080..67d96b21 100755
--- a/plugins/beta/datasets/src/panels/Key.jsx
+++ b/plugins/beta/datasets/src/panels/Key.jsx
@@ -1,35 +1,21 @@
 import React from 'react'
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
-import { mergeSublayer } from '../utils/mergeSublayer.js'
-import { EmptyKey } from '../components/EmptyKey.jsx'
-import { KeySvg } from '../components/KeySvg.jsx'
+import { EmptyKey } from '../components/key/EmptyKey.jsx'
+import { KeyItem } from './key/KeyItem.jsx'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
 
-export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
-  if (!pluginState?.key?.items?.length) {
-    return (<EmptyKey text={pluginConfig.noKeyItemText} />)
-  }
-  const { mapStyle } = mapState
-  const { symbolRegistry, patternRegistry } = services
+export const Key = ({
+  pluginConfig: { noKeyItemText },
+  mapState: { mapStyle },
+  pluginState: { mappedDatasets },
+  services: { symbolRegistry, patternRegistry }
+}) => {
+  const { items: keyGroups, hasGroups } = datasetRegistry.keyItems()
 
-  const renderEntry = (key, config) => (
-    <dl key={key} className='im-c-datasets-key__item'>
-      <dt className='im-c-datasets-key__item-symbol'>
-        <KeySvg {...config} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
-      </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>
-  )
+  if (!keyGroups?.length) {
+    return (<EmptyKey text={noKeyItemText} />)
+  }
 
-  const { items: keyGroups, hasGroups } = pluginState.key
   const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
-
   return (
     <div className={containerClass}>
       {keyGroups.map(item => {
@@ -38,9 +24,9 @@ export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
           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)))}
+              {item.sublayers.map(sublayer =>
+                <KeyItem key={`${sublayer.id}`} registryDataset={sublayer} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+              )}
             </section>
           )
         }
@@ -50,12 +36,12 @@ export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
           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))}
+              {item.datasets.map(dataset => <KeyItem key={`${dataset.id}`} registryDataset={dataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />)}
             </section>
           )
         }
 
-        return renderEntry(item.dataset.id, item.dataset)
+        return <KeyItem key={`${item.dataset.id}`} registryDataset={item.dataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
       })}
     </div>
   )

From 15a43aea12171a87b03a2c8e5de7e1dc886bbba9 Mon Sep 17 00:00:00 2001
From: Mark Fee <mark.fee@defra.gov.uk>
Date: Wed, 20 May 2026 15:42:19 +0100
Subject: [PATCH 2/6] IM-291 replaced visibility with visible Boolean

---
 plugins/beta/datasets/src/DatasetsInit.jsx    |  6 ++-
 .../maplibre/datasets/mapLibreDataset.js      |  6 +--
 .../adapters/maplibre/maplibreLayerAdapter.js |  3 +-
 plugins/beta/datasets/src/panels/Layers.jsx   | 10 ++--
 .../beta/datasets/src/panels/key/KeyItem.jsx  | 20 ++++++++
 .../datasets/src/reducers/datasetsToMenu.js   |  4 +-
 .../beta/datasets/src/reducers/keyReducer.js  |  2 +-
 plugins/beta/datasets/src/registry/dataset.js |  6 ++-
 .../datasets/src/registry/datasetRegistry.js  | 50 ++++++++++++++++++-
 9 files changed, 90 insertions(+), 17 deletions(-)
 create mode 100644 plugins/beta/datasets/src/panels/key/KeyItem.jsx

diff --git a/plugins/beta/datasets/src/DatasetsInit.jsx b/plugins/beta/datasets/src/DatasetsInit.jsx
index 19fcd3e9..9490828b 100755
--- a/plugins/beta/datasets/src/DatasetsInit.jsx
+++ b/plugins/beta/datasets/src/DatasetsInit.jsx
@@ -78,8 +78,12 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
   }, [pluginState.datasets])
 
   const datasetsRef = useRef(pluginState.mappedDatasets)
+  const orderedDatasetsRef = useRef(pluginState.orderedDatasets)
   datasetsRef.current = pluginState.mappedDatasets
-  useEffect(() => datasetRegistry.attach(datasetsRef.current), [pluginState.mappedDatasets])
+  orderedDatasetsRef.current = pluginState.orderedDatasets
+  useEffect(() => {
+    datasetRegistry.attach(datasetsRef.current, pluginState.orderedDatasets)
+  }, [pluginState.mappedDatasets, pluginState.orderedDatasets])
   useLayerAdapterActions('setStyle', dispatch, pluginState, [pluginState.layerAdapterActions.setStyle])
   useLayerAdapterActions('setDatasetVisibility', dispatch, pluginState, [pluginState.layerAdapterActions.setDatasetVisibility])
 
diff --git a/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js b/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js
index 30e8532b..5a4ff2c1 100644
--- a/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js
+++ b/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js
@@ -89,7 +89,7 @@ export class MapLibreDataset extends Dataset {
       minzoom: this.minZoom,
       maxzoom: this.maxZoom,
       layout: {
-        visibility: this.visibility === 'hidden' ? 'none' : 'visible',
+        visibility: this.visibility,
         'icon-image': imageId,
         'icon-anchor': anchorToMaplibre(anchor || symbolDef?.anchor || [0.5, 0.5]),
         'icon-allow-overlap': true
@@ -106,7 +106,7 @@ export class MapLibreDataset extends Dataset {
       'source-layer': this.sourceLayer,
       minzoom: this.minZoom,
       maxzoom: this.maxZoom,
-      layout: { visibility: this.visibility === 'hidden' ? 'none' : 'visible' },
+      layout: { visibility: this.visibility },
       paint,
       ...(this.filter ? { filter: this.filter } : {})
     }
@@ -120,7 +120,7 @@ export class MapLibreDataset extends Dataset {
       'source-layer': this.sourceLayer,
       minzoom: this.minZoom,
       maxzoom: this.maxZoom,
-      layout: { visibility: this.visibility === 'hidden' ? 'none' : 'visible' },
+      layout: { visibility: this.visibility },
       paint,
       ...(this.filter ? { filter: this.filter } : {})
     }
diff --git a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js
index 275bb1b5..e59d88c0 100644
--- a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js
+++ b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js
@@ -356,12 +356,11 @@ export default class MaplibreLayerAdapter {
       const { sublayerIds } = registryDataset
       sublayerIds.forEach(sublayerId => { this.setDatasetVisibility(sublayerId) })
     } else {
-      const { visible } = registryDataset
+      const { visibility } = registryDataset
       const datasetId = registryDataset.id
       style.layers.filter(layer =>
         layer.id === datasetId || layer.id.startsWith(`${datasetId}-`)
       ).forEach(layer => {
-        const visibility = visible ? 'visible' : 'none'
         this._map.setLayoutProperty(layer.id, 'visibility', visibility)
       })
     }
diff --git a/plugins/beta/datasets/src/panels/Layers.jsx b/plugins/beta/datasets/src/panels/Layers.jsx
index 8ba604fa..4aca8a7a 100755
--- a/plugins/beta/datasets/src/panels/Layers.jsx
+++ b/plugins/beta/datasets/src/panels/Layers.jsx
@@ -50,7 +50,7 @@ export const Layers = ({ pluginState }) => {
   }
 
   const renderDatasetItem = (dataset) => {
-    const itemClass = `im-c-datasets-layers__item govuk-checkboxes govuk-checkboxes--small${dataset.visibility === 'hidden' ? '' : ' im-c-datasets-layers__item--checked'}`
+    const itemClass = `im-c-datasets-layers__item govuk-checkboxes govuk-checkboxes--small${dataset.visible ? '' : ' im-c-datasets-layers__item--checked'}`
     return (
       <div key={dataset.id} className={itemClass} data-module='govuk-checkboxes'>
         <div className='govuk-checkboxes__item'>
@@ -60,7 +60,7 @@ export const Layers = ({ pluginState }) => {
             name='layers'
             type='checkbox'
             value={dataset.id}
-            checked={dataset.visibility !== 'hidden'}
+            checked={dataset.visible}
             onChange={handleDatasetChange}
           />
           <label className={CHECKBOX_LABEL_CLASS} htmlFor={dataset.id}>
@@ -72,10 +72,10 @@ export const Layers = ({ pluginState }) => {
   }
   // TODO - remove this useEffect - it's useful while refactoring the state
   useEffect(() => {
-    // console.log('menu:', pluginState.menu)
+    console.log('menu:', pluginState.menu)
     console.log('datasets:', pluginState.datasets)
     console.log('mappedDatasets:', pluginState.mappedDatasets)
-    // console.log('orderedDatasets:', pluginState.orderedDatasets)
+    console.log('orderedDatasets:', pluginState.orderedDatasets)
   }, [pluginState.datasets, pluginState.mappedDatasets])
 
   useEffect(() => {
@@ -133,7 +133,7 @@ export const Layers = ({ pluginState }) => {
         }
 
         if (item.type === 'group') {
-          const anyDatasetChecked = item.datasets.some(d => d.visibility !== 'hidden')
+          const anyDatasetChecked = item.datasets.some(d => d.visible)
           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}>
diff --git a/plugins/beta/datasets/src/panels/key/KeyItem.jsx b/plugins/beta/datasets/src/panels/key/KeyItem.jsx
new file mode 100644
index 00000000..d52ad244
--- /dev/null
+++ b/plugins/beta/datasets/src/panels/key/KeyItem.jsx
@@ -0,0 +1,20 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
+import { KeySvg } from '../../components/key/KeySvg.jsx'
+
+export const KeyItem = ({ key, registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <dl key={key} className='im-c-datasets-key__item'>
+      <dt className='im-c-datasets-key__item-symbol'>
+        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+      </dt>
+      <dd className='im-c-datasets-key__item-label'>
+        {registryDataset.label}
+        {registryDataset.symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
+          </span>
+        )}
+      </dd>
+    </dl>
+  )
+}
diff --git a/plugins/beta/datasets/src/reducers/datasetsToMenu.js b/plugins/beta/datasets/src/reducers/datasetsToMenu.js
index 539a9c9f..f84d77a5 100644
--- a/plugins/beta/datasets/src/reducers/datasetsToMenu.js
+++ b/plugins/beta/datasets/src/reducers/datasetsToMenu.js
@@ -14,7 +14,7 @@ export const datasetsToMenu = (state) => {
             .map(sublayer => ({
               id: sublayer.id,
               label: sublayer.label,
-              checked: sublayer.visibility !== 'hidden'
+              checked: sublayer.visible
             }))
         }
       }
@@ -24,7 +24,7 @@ export const datasetsToMenu = (state) => {
         items: [{
           id: dataset.id,
           label: dataset.label,
-          checked: dataset.visibility !== 'hidden'
+          checked: dataset.visible
         }]
       }
     })
diff --git a/plugins/beta/datasets/src/reducers/keyReducer.js b/plugins/beta/datasets/src/reducers/keyReducer.js
index bc32435e..3411a922 100644
--- a/plugins/beta/datasets/src/reducers/keyReducer.js
+++ b/plugins/beta/datasets/src/reducers/keyReducer.js
@@ -4,7 +4,7 @@ export const keyReducer = (state) => {
   const items = []
   let hasGroups = false
   datasets.forEach(dataset => {
-    if (!dataset.showInKey || dataset.visibility === 'hidden') {
+    if (!dataset.showInKey && dataset.visible) {
       return
     }
     if (dataset.sublayers?.length) {
diff --git a/plugins/beta/datasets/src/registry/dataset.js b/plugins/beta/datasets/src/registry/dataset.js
index 599945c3..39177a76 100644
--- a/plugins/beta/datasets/src/registry/dataset.js
+++ b/plugins/beta/datasets/src/registry/dataset.js
@@ -8,13 +8,13 @@ export class Dataset {
   }
 
   get id () { return this._datasetDefinition.id }
+  get label () { return this._datasetDefinition.label }
   get hasSymbol () { return !this.hasSublayers && Boolean(this.style?.symbol) }
   get hasPattern () { return !this.hasSublayers && !this.hasSymbol && hasPattern(this.style) }
   get hasFill () { return !this.hasSublayers && !this.hasSymbol && (this.hasPattern || (this.style?.fill && this.style?.fill !== 'transparent')) }
   get hasStroke () { return !this.hasSublayers && !this.hasSymbol && Boolean(this.style?.stroke) }
   get tiles () { return this._datasetDefinition.tiles }
   get geojson () { return this._datasetDefinition.geojson }
-  get visibility () { return this._datasetDefinition.visibility || this.parent?.visibility || 'visible' }
   get idProperty () { return this._datasetDefinition.idProperty }
   get transformRequest () { return this._datasetDefinition.transformRequest }
   get parentId () { return this._datasetDefinition.parentId }
@@ -22,6 +22,10 @@ export class Dataset {
   get minZoom () { return this._datasetDefinition.minZoom || this.parent?.minZoom }
   get maxZoom () { return this._datasetDefinition.maxZoom || this.parent?.maxZoom }
   get filter () { return this._datasetDefinition.filter || this.parent?.filter }
+  get showInKey () { return this._datasetDefinition.showInKey || this.parent?.showInKey || false }
+  get groupLabel () { return this._datasetDefinition.groupLabel }
+
+  get visibility () { return this.visible ? 'visible' : 'none' }
 
   get visible () {
     if (this.isSublayer) {
diff --git a/plugins/beta/datasets/src/registry/datasetRegistry.js b/plugins/beta/datasets/src/registry/datasetRegistry.js
index 3ea6e924..d1dff077 100644
--- a/plugins/beta/datasets/src/registry/datasetRegistry.js
+++ b/plugins/beta/datasets/src/registry/datasetRegistry.js
@@ -1,7 +1,10 @@
 import { createDataset } from './createDataset.js'
 
 const datasetRegistry = {
-  attach (datasetsRef) { this._datasets = datasetsRef },
+  attach (datasetsRef, orderedDatasetsRef) {
+    this._datasets = datasetsRef
+    this._orderedDatasets = orderedDatasetsRef
+  },
   // createDataset defaults to a generic dataset factory function, but can be overridden by calling
   // attachCreateDataset, which allows the layer adapter to provide its own createDataset function,
   attachCreateDataset (createDataset) { this.createDataset = createDataset },
@@ -9,12 +12,55 @@ const datasetRegistry = {
   // getDataset retrieves a dataset by id, creating a new Dataset instance that wraps the definition
   getDataset (id) { return this.createDataset(this.datasets[id]) },
   forEach (callback) {
-    Object.keys(this.datasets).forEach((datasetId) => callback(this.getDataset(datasetId)))
+    this._orderedDatasets.forEach((datasetId) => callback(this.getDataset(datasetId)))
   },
   forEachDataset (callback) {
     Object.values(this.datasets)
       .filter(def => !def.parentId) // Only top-level datasets
       .forEach((dataset) => callback(this.getDataset(dataset.id)))
+  },
+  topLevelDatasets () {
+    return Object.values(this.datasets)
+      .filter(def => !def.parentId)
+      .map(def => this.getDataset(def.id))
+  },
+  _lastKeyItems: {},
+  keyItems () {
+    if (this.datasets === this._lastKeyItemsDatasets) {
+      return this._lastKeyItems
+    }
+    this._lastKeyItemsDatasets = this.datasets
+    const items = []
+    const seenGroups = new Set()
+    let hasGroups = false
+    this.forEachDataset((dataset) => {
+      if (!dataset.showInKey && dataset.visible) {
+        return
+      }
+      if (dataset.hasSublayers) {
+        const sublayers = dataset.sublayers.filter(sublayer => sublayer.visible)
+        if (sublayers.length) {
+          hasGroups = true
+          items.push({ type: 'sublayers', dataset, sublayers })
+        }
+      } else if (dataset.groupLabel) {
+        if (seenGroups.has(dataset.groupLabel)) {
+          return
+        }
+        seenGroups.add(dataset.groupLabel)
+        hasGroups = true
+        items.push({
+          type: 'group',
+          groupLabel: dataset.groupLabel,
+          datasets: this.topLevelDatasets()
+            .filter(groupDataset => (groupDataset.groupLabel === dataset.groupLabel && !groupDataset.hasSublayers && groupDataset.showInKey))
+        })
+      } else {
+        items.push({ type: 'flat', dataset })
+      }
+    })
+    this._lastKeyItems = { items, hasGroups }
+    return this._lastKeyItems
   }
 }
 

From a634c30bc5b0f32514d04a765b412405cd523595 Mon Sep 17 00:00:00 2001
From: Mark Fee <mark.fee@defra.gov.uk>
Date: Wed, 20 May 2026 16:21:35 +0100
Subject: [PATCH 3/6] IM-291 added KeyItem.jsx and KeyGroupItem.jsx

---
 .../src/components/key/KeyGroupItem.jsx       | 18 ++++++
 .../datasets/src/components/key/KeyItem.jsx   | 20 +++++++
 plugins/beta/datasets/src/panels/Key.jsx      | 55 ++++++++++---------
 .../beta/datasets/src/panels/key/KeyItem.jsx  | 20 -------
 4 files changed, 67 insertions(+), 46 deletions(-)
 create mode 100644 plugins/beta/datasets/src/components/key/KeyGroupItem.jsx
 delete mode 100644 plugins/beta/datasets/src/panels/key/KeyItem.jsx

diff --git a/plugins/beta/datasets/src/components/key/KeyGroupItem.jsx b/plugins/beta/datasets/src/components/key/KeyGroupItem.jsx
new file mode 100644
index 00000000..ac8cc0b0
--- /dev/null
+++ b/plugins/beta/datasets/src/components/key/KeyGroupItem.jsx
@@ -0,0 +1,18 @@
+import { KeyItem } from './KeyItem.jsx'
+
+export const KeyGroupItem = ({ headingId, label, datasets, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <section className='im-c-datasets-key__group' aria-labelledby={headingId}>
+      <h3 id={headingId} className='im-c-datasets-key__group-heading'>{label}</h3>
+      {datasets.map(dataset =>
+        <KeyItem
+          key={`${dataset.id}`}
+          registryDataset={dataset}
+          symbolRegistry={symbolRegistry}
+          patternRegistry={patternRegistry}
+          mapStyle={mapStyle}
+        />
+      )}
+    </section>
+  )
+}
diff --git a/plugins/beta/datasets/src/components/key/KeyItem.jsx b/plugins/beta/datasets/src/components/key/KeyItem.jsx
index e69de29b..f931a7dc 100644
--- a/plugins/beta/datasets/src/components/key/KeyItem.jsx
+++ b/plugins/beta/datasets/src/components/key/KeyItem.jsx
@@ -0,0 +1,20 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { KeySvg } from './KeySvg.jsx'
+
+export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <dl className='im-c-datasets-key__item'>
+      <dt className='im-c-datasets-key__item-symbol'>
+        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+      </dt>
+      <dd className='im-c-datasets-key__item-label'>
+        {registryDataset.label}
+        {registryDataset.symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
+          </span>
+        )}
+      </dd>
+    </dl>
+  )
+}
diff --git a/plugins/beta/datasets/src/panels/Key.jsx b/plugins/beta/datasets/src/panels/Key.jsx
index 67d96b21..a471faa5 100755
--- a/plugins/beta/datasets/src/panels/Key.jsx
+++ b/plugins/beta/datasets/src/panels/Key.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { EmptyKey } from '../components/key/EmptyKey.jsx'
-import { KeyItem } from './key/KeyItem.jsx'
+import { KeyItem } from '../components/key/KeyItem.jsx'
+import { KeyGroupItem } from '../components/key/KeyGroupItem.jsx'
 import { datasetRegistry } from '../registry/datasetRegistry.js'
 
 export const Key = ({
@@ -17,32 +18,34 @@ export const Key = ({
 
   const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
   return (
-    <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.sublayers.map(sublayer =>
-                <KeyItem key={`${sublayer.id}`} registryDataset={sublayer} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
-              )}
-            </section>
-          )
-        }
+    <div className={containerClass}>{keyGroups.map(item => {
+      const key = item.type === 'group' ? item.groupLabel.toLowerCase().replaceAll(/\s+/g, '-') : item.dataset.id
 
-        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 => <KeyItem key={`${dataset.id}`} registryDataset={dataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />)}
-            </section>
-          )
-        }
-
-        return <KeyItem key={`${item.dataset.id}`} registryDataset={item.dataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
-      })}
+      if (item.type === 'sublayers' || item.type === 'group') {
+        const datasets = item.type === 'sublayers' ? item.sublayers : item.datasets
+        const label = item.type === 'sublayers' ? item.dataset.label : item.groupLabel
+        return (
+          <KeyGroupItem
+            key={key}
+            headingId={`key-heading-${key}`}
+            label={label}
+            datasets={datasets}
+            symbolRegistry={symbolRegistry}
+            patternRegistry={patternRegistry}
+            mapStyle={mapStyle}
+          />
+        )
+      }
+      return (
+        <KeyItem
+          key={key}
+          registryDataset={item.dataset}
+          symbolRegistry={symbolRegistry}
+          patternRegistry={patternRegistry}
+          mapStyle={mapStyle}
+        />
+      )
+    })}
     </div>
   )
 }
diff --git a/plugins/beta/datasets/src/panels/key/KeyItem.jsx b/plugins/beta/datasets/src/panels/key/KeyItem.jsx
deleted file mode 100644
index d52ad244..00000000
--- a/plugins/beta/datasets/src/panels/key/KeyItem.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
-import { KeySvg } from '../../components/key/KeySvg.jsx'
-
-export const KeyItem = ({ key, registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
-  return (
-    <dl key={key} className='im-c-datasets-key__item'>
-      <dt className='im-c-datasets-key__item-symbol'>
-        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
-      </dt>
-      <dd className='im-c-datasets-key__item-label'>
-        {registryDataset.label}
-        {registryDataset.symbolDescription && (
-          <span className='govuk-visually-hidden'>
-            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
-          </span>
-        )}
-      </dd>
-    </dl>
-  )
-}

From 52a6b7c6580560aaeca2b79a0f5636d638937f4a Mon Sep 17 00:00:00 2001
From: Mark Fee <mark.fee@defra.gov.uk>
Date: Wed, 20 May 2026 16:28:36 +0100
Subject: [PATCH 4/6] IM-291 updated demo

---
 demo/js/farming.js |  1 +
 demo/js/index.js   | 44 ++++++++++++++++++++++++++++++--------------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/demo/js/farming.js b/demo/js/farming.js
index 424cc2b8..946e323c 100755
--- a/demo/js/farming.js
+++ b/demo/js/farming.js
@@ -37,6 +37,7 @@ var datasetsPlugin = createDatasetsPlugin({
 		id: 'field-parcels',
 		label: 'Field parcels',
 		geojson: `${process.env.FARMING_API_URL}/api/collections/parcels/items?sbi=106325052`, // 106200212
+		idProperty: 'id',
 		transformRequest: transformDataRequest,
 		maxFeatures: 50000,
 		// filter: [
diff --git a/demo/js/index.js b/demo/js/index.js
index cfdab65f..4830f71b 100755
--- a/demo/js/index.js
+++ b/demo/js/index.js
@@ -125,6 +125,7 @@ const datasetsPlugin = createDatasetsPlugin({
 		showInKey: true,
 		showInMenu: true,
 		style: {
+			symbolDescription: 'Land cover',
 			fillPattern: 'horizontal-hatch',
 			fillPatternForegroundColor: { outdoor: '#00897B', dark: '#ffffff' },
 			fillPatternBackgroundColor: 'transparent'
@@ -190,7 +191,7 @@ const datasetsPlugin = createDatasetsPlugin({
 	{
 		id: 'existing-fields',
 		label: 'Existing fields',
-		// groupLabel: 'Test group',
+		groupLabel: 'Test group',
 		filter: ['all',['==', ['get', 'sbi'], '106223377'],['==', ['get', 'is_dominant_land_cover'], true]],
 		tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
 		sourceLayer: 'field_parcels_filtered',
@@ -204,7 +205,8 @@ const datasetsPlugin = createDatasetsPlugin({
 			fill: 'rgba(21,101,192,0.1)',
 			symbolDescription: { outdoor: 'blue outline', dark: 'white outline' }
 		}
-	},{
+	},
+	{
 		id: 'historic-monuments',
 		label: 'Historic monuments',
 		geojson: pointData,
@@ -215,6 +217,7 @@ const datasetsPlugin = createDatasetsPlugin({
 		style: {
 			symbol: 'square',
 			symbolGraphic: 'M3 15H1V1h2v2h2V1h2v5h2V4h2v2h2V4h2v11H6V9H3v6z', // Historic monument
+			symbolAnchor: [0.1, 0.1],
 			// symbolBackgroundColor: { outdoor: '#ca3535', dark: '#ffffff' },
 			// symbolForegroundColor: { outdoor: '#ffffff', dark: '#0b0c0c' }
 		},
@@ -224,6 +227,7 @@ const datasetsPlugin = createDatasetsPlugin({
 			filter: ['in', ['get', 'category'], 'prehistoric'],
 			showInMenu: true,
 			style: {
+				symbolAnchor: [0.5, 0.5],
 				symbolBackgroundColor: '#00897B',
 			}
 		},{
@@ -232,6 +236,7 @@ const datasetsPlugin = createDatasetsPlugin({
 			filter: ['in', ['get', 'category'], 'roman'],
 			showInMenu: true,
 			style: {
+				// symbolAnchor: [0.1, 0.1],
 				symbolBackgroundColor: '#ca3535',
 			}
 		},{
@@ -240,13 +245,15 @@ const datasetsPlugin = createDatasetsPlugin({
 			filter: ['in', ['get', 'category'], 'medieval'],
 			showInMenu: true,
 			style: {
+				// symbolAnchor: [0.9, 0.9],
 				symbolBackgroundColor: '#1565C0',
 			}
 		}]
-	},{
+	},
+	{
 		id: 'hedge-control',
 		label: 'Hedge control',
-		// groupLabel: 'Test group',
+		groupLabel: 'Test group',
 		tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
 		sourceLayer: 'hedge_control',
 		minZoom: 10,
@@ -261,7 +268,8 @@ const datasetsPlugin = createDatasetsPlugin({
 			symbolDescription: { outdoor: 'blue outline' },
 			keySymbolShape: 'line',
 		}
-	}]
+	}
+]
 })
 
 const interactiveMap = new InteractiveMap('map', {
@@ -346,18 +354,26 @@ interactiveMap.on('datasets:ready', function () {
 	// setTimeout(() => datasetsPlugin.setFeatureVisibility(false, [55], { datasetId: 'land-covers', idProperty: null }), 2000)
 	// setTimeout(() => datasetsPlugin.setFeatureVisibility(true, [55], { datasetId: 'land-covers', idProperty: null }), 4000)
 
-	// setTimeout(() => datasetsPlugin.setStyle(
-	// 	{
-	// 		stroke: { outdoor: '#ff0000', dark: '#ffffff' },
-	// 		fillPattern: 'horizontal-hatch',
-	// 		fillPatternForegroundColor:  { outdoor: '#ff0000', dark: '#ffffff' },
-	// 		fillPatternBackgroundColor: 'transparent'
-	// 	},
-	// 	{ datasetId: 'land-covers', sublayerId: '130-131' }), 2000)
+	setTimeout(() => datasetsPlugin.setStyle({
+		stroke: { outdoor: '#ff0000', dark: '#ffffff' },
+    fillPattern: 'horizontal-hatch',
+    fillPatternForegroundColor:  { outdoor: '#ff0000', dark: '#ffffff' },
+    fillPatternBackgroundColor: 'transparent'
+	}, { datasetId: 'land-covers', sublayerId: '130-131' }), 1000)
+
+	// Hide all landcovers
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(false, { datasetId: 'land-covers' }), 2000)
+	// Specifically hide landcovers-130-131
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(false, { datasetId: 'land-covers', sublayerId: '130-131' }), 3000)
+	// Show landcovers - expect landcovers-130-131 to remain hidden
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'land-covers' }), 4000)
+	// now reshow show landcovers-130-131
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'land-covers', sublayerId: '130-131' }), 5000)
+
 	// setTimeout(() => datasetsPlugin.setDatasetVisibility(false), 1000)
 	// setTimeout(() => datasetsPlugin.setDatasetVisibility(true), 5000)
 	// setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'hedge-control' }), 500)
-	// setTimeout(() => datasetsPlugin.setStyle({ stroke: { outdoor: '#ffff00' }, }, { datasetId: 'hedge-control' }), 1000)
+	// setTimeout(() => datasetsPlugin.setStyle({ stroke: { outdoor: '#ffff00' }, }, { datasetId: 'hedge-control' }), 2000)
 })
 
 // Ref to the selected features

From a8fd1afccd9dcd45236a63abc3b1ae4fd0fb4211 Mon Sep 17 00:00:00 2001
From: Mark Fee <mark.fee@defra.gov.uk>
Date: Wed, 20 May 2026 16:46:47 +0100
Subject: [PATCH 5/6] IM-291 fixed tests after refactor

---
 .../src/components/key/KeySvg.test.jsx        | 44 +++++++------------
 .../src/components/key/KeySvgLine.test.jsx    | 10 +++--
 .../src/components/key/KeySvgPattern.test.jsx |  8 +++-
 .../src/components/key/KeySvgRect.test.jsx    | 12 +++--
 .../src/components/key/KeySvgSymbol.test.jsx  | 14 +++---
 .../src/reducers/__data__/demoDatasets.js     | 12 +++++
 6 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/plugins/beta/datasets/src/components/key/KeySvg.test.jsx b/plugins/beta/datasets/src/components/key/KeySvg.test.jsx
index 4109bd30..494e9c4f 100644
--- a/plugins/beta/datasets/src/components/key/KeySvg.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvg.test.jsx
@@ -1,21 +1,11 @@
 import { render } from '@testing-library/react'
 import { KeySvg } from './KeySvg'
 
-import { hasSymbol } from '../../../../../../src/utils/symbolUtils.js'
-import { hasPattern } from '../../../../../../src/utils/patternUtils.js'
 import { symbolRegistry } from '../../../../../../src/services/symbolRegistry.js'
-// import { patternRegistry } from '../../../../../src/services/patternRegistry.js'
+import { patternRegistry } from '../../../../../../src/services/patternRegistry.js'
 
 const getSymbolDef = jest.spyOn(symbolRegistry, 'getSymbolDef')
 
-jest.mock('../../../../../src/utils/symbolUtils.js', () => ({
-  hasSymbol: jest.fn(() => false)
-}))
-
-jest.mock('../../../../../src/utils/patternUtils.js', () => ({
-  hasPattern: jest.fn(() => false)
-}))
-
 jest.mock('./KeySvgPattern.jsx', () => ({
   KeySvgPattern: () => <svg data-testid='key-svg-pattern' />
 }))
@@ -32,33 +22,37 @@ jest.mock('./KeySvgRect.jsx', () => ({
   KeySvgRect: () => <svg data-testid='key-svg-rect' />
 }))
 
+const baseRegistryDataset = {
+  hasSymbol: false,
+  hasPattern: false,
+  style: {}
+}
+
 const baseProps = {
   symbolRegistry,
-  mapStyle: { id: 'default' }
+  patternRegistry,
+  mapStyle: { id: 'default' },
+  registryDataset: baseRegistryDataset
 }
 
 beforeEach(() => {
-  hasSymbol.mockReturnValue(false)
   getSymbolDef.mockReturnValue(null)
-  hasPattern.mockReturnValue(false)
 })
 
 describe('KeySvg', () => {
   it('renders KeySvgSymbol when a symbolDef is resolved', () => {
-    hasSymbol.mockReturnValue(true)
     getSymbolDef.mockReturnValue({ id: 'marker' })
-    const { getByTestId } = render(<KeySvg {...baseProps} symbol='marker' />)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
     expect(getByTestId('key-svg-symbol')).toBeTruthy()
   })
 
   it('renders KeySvgPattern when hasPattern is true and no symbol', () => {
-    hasPattern.mockReturnValue(true)
-    const { getByTestId } = render(<KeySvg {...baseProps} fillPattern='dots' />)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true }} />)
     expect(getByTestId('key-svg-pattern')).toBeTruthy()
   })
 
   it('renders KeySvgLine when keySymbolShape is line and no symbol or pattern', () => {
-    const { getByTestId } = render(<KeySvg {...baseProps} keySymbolShape='line' />)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'line' } }} />)
     expect(getByTestId('key-svg-line')).toBeTruthy()
   })
 
@@ -68,30 +62,26 @@ describe('KeySvg', () => {
   })
 
   it('prefers symbol over pattern when both are present', () => {
-    hasSymbol.mockReturnValue(true)
     getSymbolDef.mockReturnValue({ id: 'marker' })
-    hasPattern.mockReturnValue(true)
-    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} symbol='marker' fillPattern='dots' />)
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true, hasPattern: true }} />)
     expect(getByTestId('key-svg-symbol')).toBeTruthy()
     expect(queryByTestId('key-svg-pattern')).toBeNull()
   })
 
   it('prefers pattern over line when both conditions are met', () => {
-    hasPattern.mockReturnValue(true)
-    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} fillPattern='dots' keySymbolShape='line' />)
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true, style: { keySymbolShape: 'line' } }} />)
     expect(getByTestId('key-svg-pattern')).toBeTruthy()
     expect(queryByTestId('key-svg-line')).toBeNull()
   })
 
   it('renders KeySvgRect when keySymbolShape is not line and no symbol or pattern', () => {
-    const { getByTestId } = render(<KeySvg {...baseProps} keySymbolShape='polygon' />)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'polygon' } }} />)
     expect(getByTestId('key-svg-rect')).toBeTruthy()
   })
 
   it('does not render KeySvgSymbol when hasSymbol is true but getSymbolDef returns null', () => {
-    hasSymbol.mockReturnValue(true)
     getSymbolDef.mockReturnValue(null)
-    const { getByTestId } = render(<KeySvg {...baseProps} symbol='unknown' />)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
     expect(getByTestId('key-svg-rect')).toBeTruthy()
   })
 })
diff --git a/plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx
index 71af2bd5..866aa330 100644
--- a/plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgLine.test.jsx
@@ -3,13 +3,17 @@ import { KeySvgLine } from './KeySvgLine'
 
 import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
 
-jest.mock('../../../../../src/utils/getValueForStyle', () => ({
+jest.mock('../../../../../../src/utils/getValueForStyle', () => ({
   getValueForStyle: jest.fn((value) => value)
 }))
 
 const defaultProps = {
-  stroke: '#ff0000',
-  strokeWidth: 2,
+  registryDataset: {
+    style: {
+      stroke: '#ff0000',
+      strokeWidth: 2
+    }
+  },
   mapStyle: { id: 'default' }
 }
 
diff --git a/plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx
index aaf005ff..c806168a 100644
--- a/plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgPattern.test.jsx
@@ -4,7 +4,11 @@ import { patternRegistry } from '../../../../../../src/services/patternRegistry.
 
 const getKeyPatternPaths = jest.spyOn(patternRegistry, 'getKeyPatternPaths')
 const defaultProps = {
-  fillPattern: 'dots',
+  registryDataset: {
+    style: {
+      fillPattern: 'dots'
+    }
+  },
   patternRegistry,
   mapStyle: { id: 'default' }
 }
@@ -21,7 +25,7 @@ describe('KeySvgPattern', () => {
 
   it('calls getKeyPatternPaths with props, the mapStyle id, and the patternRegistry', () => {
     render(<KeySvgPattern {...defaultProps} />)
-    expect(getKeyPatternPaths).toHaveBeenCalledWith(defaultProps, 'default')
+    expect(getKeyPatternPaths).toHaveBeenCalledWith(defaultProps.registryDataset.style, 'default')
   })
 
   it('renders two g elements for border and content', () => {
diff --git a/plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx
index 158926af..0365d806 100644
--- a/plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgRect.test.jsx
@@ -3,14 +3,18 @@ import { KeySvgRect } from './KeySvgRect'
 
 import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
 
-jest.mock('../../../../../src/utils/getValueForStyle', () => ({
+jest.mock('../../../../../../src/utils/getValueForStyle', () => ({
   getValueForStyle: jest.fn((value) => value)
 }))
 
 const defaultProps = {
-  fill: '#0000ff',
-  stroke: '#ff0000',
-  strokeWidth: 2,
+  registryDataset: {
+    style: {
+      fill: '#0000ff',
+      stroke: '#ff0000',
+      strokeWidth: 2
+    }
+  },
   mapStyle: { id: 'default' }
 }
 
diff --git a/plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx b/plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx
index 6f151fff..4436c78f 100644
--- a/plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx
+++ b/plugins/beta/datasets/src/components/key/KeySvgSymbol.test.jsx
@@ -3,7 +3,7 @@ import { KeySvgSymbol } from './KeySvgSymbol'
 
 import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
 
-jest.mock('../../../../../src/utils/symbolUtils.js', () => ({
+jest.mock('../../../../../../src/utils/symbolUtils.js', () => ({
   getSymbolStyleColors: jest.fn(() => ({ foreground: '#000', background: '#fff' })),
   getSymbolViewBox: jest.fn(() => '0 0 38 38')
 }))
@@ -12,9 +12,13 @@ const mockResolve = jest.fn(() => '<path d="M0 0"/>')
 
 const defaultProps = {
   symbolDef: { id: 'marker' },
+  registryDataset: {
+    style: {
+      stroke: '#000000'
+    }
+  },
   symbolRegistry: { resolve: mockResolve },
-  mapStyle: { id: 'default' },
-  stroke: '#000000'
+  mapStyle: { id: 'default' }
 }
 
 beforeEach(() => {
@@ -41,12 +45,12 @@ describe('KeySvgSymbol', () => {
 
   it('calls getSymbolStyleColors with the dataset props', () => {
     render(<KeySvgSymbol {...defaultProps} />)
-    expect(getSymbolStyleColors).toHaveBeenCalledWith(defaultProps)
+    expect(getSymbolStyleColors).toHaveBeenCalledWith(defaultProps.registryDataset.style)
   })
 
   it('calls getSymbolViewBox with the dataset props and symbolDef', () => {
     render(<KeySvgSymbol {...defaultProps} />)
-    expect(getSymbolViewBox).toHaveBeenCalledWith(defaultProps, defaultProps.symbolDef)
+    expect(getSymbolViewBox).toHaveBeenCalledWith(defaultProps.registryDataset.style, defaultProps.symbolDef)
   })
 
   it('sets the viewBox from getSymbolViewBox', () => {
diff --git a/plugins/beta/datasets/src/reducers/__data__/demoDatasets.js b/plugins/beta/datasets/src/reducers/__data__/demoDatasets.js
index fac586bf..964ba42a 100644
--- a/plugins/beta/datasets/src/reducers/__data__/demoDatasets.js
+++ b/plugins/beta/datasets/src/reducers/__data__/demoDatasets.js
@@ -27,11 +27,13 @@ export const datasets = [
     maxZoom: 24,
     showInKey: true,
     showInMenu: true,
+    visible: true,
     sublayers: [{
       id: '130-131',
       label: 'Permanent grassland',
       filter: ['in', ['get', 'dominant_land_cover'], ['literal', ['130', '131']]], // 'dominant_land_cover = "130"'
       showInMenu: true,
+      visible: true,
       style: {
         stroke: { outdoor: '#00897B', dark: '#ffffff' },
         fillPattern: 'diagonal-cross-hatch',
@@ -43,6 +45,7 @@ export const datasets = [
       label: 'Woodland',
       filter: ['==', ['get', 'dominant_land_cover'], '332'],
       showInMenu: true,
+      visible: true,
       style: {
         stroke: { outdoor: '#2E7D32', dark: '#ffffff' },
         fillPattern: 'dot',
@@ -54,6 +57,7 @@ export const datasets = [
       label: 'Arable',
       filter: ['==', ['get', 'dominant_land_cover'], '110'],
       showInMenu: true,
+      visible: true,
       style: {
         stroke: { outdoor: '#6D4C41', dark: '#ffffff' },
         fillPattern: 'horizontal-hatch',
@@ -64,6 +68,7 @@ export const datasets = [
       id: '379',
       label: 'Farmyards',
       visibility: 'hidden',
+      visible: false,
       filter: ['==', ['get', 'dominant_land_cover'], '379'],
       showInMenu: true,
       style: {
@@ -77,6 +82,7 @@ export const datasets = [
       label: 'Others',
       filter: ['!', ['in', ['get', 'dominant_land_cover'], ['literal', ['110', '130', '131', '332', '379']]]],
       showInMenu: true,
+      visible: true,
       style: {
         stroke: { outdoor: '#1565C0', dark: '#ffffff' },
         fill: 'rgba(0,0,255,0.1)',
@@ -97,6 +103,7 @@ export const datasets = [
     maxZoom: 24,
     showInKey: true,
     showInMenu: true,
+    visible: true,
     style: {
       stroke: { outdoor: '#1565C0', dark: '#ffffff' },
       strokeWidth: 2,
@@ -111,6 +118,7 @@ export const datasets = [
     maxZoom: 24,
     showInKey: true,
     showInMenu: true,
+    visible: true,
     style: {
       symbol: 'square',
       symbolGraphic: 'M3 15H1V1h2v2h2V1h2v5h2V4h2v2h2V4h2v11H6V9H3v6z' // Historic monument
@@ -120,6 +128,7 @@ export const datasets = [
       label: 'Prehistoric',
       filter: ['in', ['get', 'category'], 'prehistoric'],
       showInMenu: true,
+      visible: true,
       style: {
         symbolBackgroundColor: '#00897B'
       }
@@ -128,6 +137,7 @@ export const datasets = [
       label: 'Roman',
       filter: ['in', ['get', 'category'], 'roman'],
       showInMenu: true,
+      visible: true,
       style: {
         symbolBackgroundColor: '#ca3535'
       }
@@ -136,6 +146,7 @@ export const datasets = [
       label: 'Medieval',
       filter: ['in', ['get', 'category'], 'medieval'],
       showInMenu: true,
+      visible: true,
       style: {
         symbolBackgroundColor: '#1565C0'
       }
@@ -151,6 +162,7 @@ export const datasets = [
     showInKey: true,
     showInMenu: true,
     visibility: 'hidden',
+    visible: false,
     style: {
       stroke: '#b58840',
       fill: 'transparent',

From 9dbbdcf373c32b3f591a8e0230a1bcf0f9452d7b Mon Sep 17 00:00:00 2001
From: Mark Fee <mark.fee@defra.gov.uk>
Date: Wed, 20 May 2026 17:04:46 +0100
Subject: [PATCH 6/6] IM-291 removed keyReducer

---
 plugins/beta/datasets/src/DatasetsInit.jsx    |  4 ---
 plugins/beta/datasets/src/reducer.js          |  4 ---
 .../beta/datasets/src/reducers/keyReducer.js  | 34 -------------------
 3 files changed, 42 deletions(-)
 delete mode 100644 plugins/beta/datasets/src/reducers/keyReducer.js

diff --git a/plugins/beta/datasets/src/DatasetsInit.jsx b/plugins/beta/datasets/src/DatasetsInit.jsx
index 9490828b..4f87329f 100755
--- a/plugins/beta/datasets/src/DatasetsInit.jsx
+++ b/plugins/beta/datasets/src/DatasetsInit.jsx
@@ -73,10 +73,6 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
     initDatasets()
   }, [isMapStyleReady, appState.mode])
 
-  useEffect(() => {
-    dispatch({ type: 'BUILD_KEY_GROUPS', payload: null })
-  }, [pluginState.datasets])
-
   const datasetsRef = useRef(pluginState.mappedDatasets)
   const orderedDatasetsRef = useRef(pluginState.orderedDatasets)
   datasetsRef.current = pluginState.mappedDatasets
diff --git a/plugins/beta/datasets/src/reducer.js b/plugins/beta/datasets/src/reducer.js
index 14b0a342..ce0073b5 100755
--- a/plugins/beta/datasets/src/reducer.js
+++ b/plugins/beta/datasets/src/reducer.js
@@ -1,5 +1,4 @@
 import { applyDatasetDefaults } from './defaults.js'
-import { keyReducer } from './reducers/keyReducer.js'
 import { datasetsToMenu } from './reducers/datasetsToMenu.js'
 
 const initialState = {
@@ -38,10 +37,8 @@ const initSublayerVisibility = (dataset) => {
 
 const setDatasets = (state, payload) => {
   const { datasets, mappedDatasets, orderedDatasets } = payload
-  // console.log('Setting datasets', datasets, mappedDatasets)
   const datasetsWithSublayerVisibility = datasets.map(initSublayerVisibility)
   const menu = payload.menu || datasetsToMenu({ datasets })
-  // const { mappedDatasets, orderedDatasets } = mappedDatasetsReducer({ datasets: pluginConfigDatasets })
   return {
     ...state,
     datasets: datasetsWithSublayerVisibility,
@@ -190,7 +187,6 @@ const setSublayerOpacity = (state, payload) => {
 const setLayerAdapter = (state, payload) => ({ ...state, layerAdapter: payload })
 
 const actions = {
-  BUILD_KEY_GROUPS: keyReducer,
   SET_DATASETS: setDatasets,
   ADD_DATASET: addDataset,
   REMOVE_DATASET: removeDataset,
diff --git a/plugins/beta/datasets/src/reducers/keyReducer.js b/plugins/beta/datasets/src/reducers/keyReducer.js
deleted file mode 100644
index 3411a922..00000000
--- a/plugins/beta/datasets/src/reducers/keyReducer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const keyReducer = (state) => {
-  const datasets = state.datasets || []
-  const seenGroups = new Set()
-  const items = []
-  let hasGroups = false
-  datasets.forEach(dataset => {
-    if (!dataset.showInKey && dataset.visible) {
-      return
-    }
-    if (dataset.sublayers?.length) {
-      const { sublayerVisibility = [] } = dataset
-      if (Object.values(sublayerVisibility).some((value) => value !== 'hidden')) {
-        hasGroups = true
-        items.push({ type: 'sublayers', dataset })
-      }
-      return
-    }
-    if (dataset.groupLabel) {
-      if (seenGroups.has(dataset.groupLabel)) {
-        return
-      }
-      seenGroups.add(dataset.groupLabel)
-      hasGroups = true
-      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 { ...state, key: { items, hasGroups } }
-}