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

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

@@ -3,12 +3,15 @@ import { initialState, actions } from './reducer.js'
 import { DatasetsInit } from './DatasetsInit.jsx'
 import { Layers } from './panels/Layers.jsx'
 import { Key } from './panels/Key.jsx'
-import { showDataset } from './api/showDataset.js'
-import { hideDataset } from './api/hideDataset.js'
 import { addDataset } from './api/addDataset.js'
 import { removeDataset } from './api/removeDataset.js'
-import { showFeatures } from './api/showFeatures.js'
-import { hideFeatures } from './api/hideFeatures.js'
+import { setDatasetVisibility } from './api/setDatasetVisibility.js'
+import { setFeatureVisibility } from './api/setFeatureVisibility.js'
+import { setStyle } from './api/setStyle.js'
+import { getStyle } from './api/getStyle.js'
+import { setOpacity } from './api/setOpacity.js'
+import { getOpacity } from './api/getOpacity.js'
+import { setData } from './api/setData.js'
 
 export const manifest = {
   InitComponent: DatasetsInit,
@@ -22,7 +25,7 @@ export const manifest = {
     id: 'datasetsLayers',
     label: 'Layers',
     mobile: {
-      slot: 'bottom',
+      slot: 'drawer',
       modal: true,
       dismissible: true
     },
@@ -30,30 +33,30 @@ export const manifest = {
       slot: 'left-top',
       dismissible: true,
       exclusive: true,
-      width: '300px'
+      width: '260px'
     },
     desktop: {
       slot: 'left-top',
       modal: false,
       dismissible: true,
       exclusive: true,
-      width: '320px'
+      width: '280px'
     },
     render: Layers
   }, {
     id: 'datasetsKey',
     label: 'Key',
     mobile: {
-      slot: 'bottom',
+      slot: 'drawer',
       modal: true
     },
     tablet: {
       slot: 'left-top',
-      width: '300px'
+      width: '260px'
     },
     desktop: {
       slot: 'left-top',
-      width: '320px'
+      width: '280px'
     },
     render: Key
   }],
@@ -63,7 +66,9 @@ export const manifest = {
     label: 'Layers',
     panelId: 'datasetsLayers',
     iconId: 'layers',
-    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.find(l => l.showInLayers),
+    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.some(l =>
+      l.toggleVisibility || l.sublayers?.some(r => r.toggleVisibility)
+    ),
     mobile: {
       slot: 'top-left',
       showLabel: true
@@ -81,7 +86,7 @@ export const manifest = {
     label: 'Key',
     panelId: 'datasetsKey',
     iconId: 'key',
-    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.find(l => l.showInKey),
+    excludeWhen: ({ pluginConfig }) => !pluginConfig.datasets.some(l => l.showInKey),
     mobile: {
       slot: 'top-left',
       showLabel: false
@@ -98,18 +103,21 @@ export const manifest = {
 
   icons: [{
     id: 'layers',
-    svgContent: '<path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"></path><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"></path>'
+    svgContent: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'
   }, {
     id: 'key',
     svgContent: '<path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/>'
   }],
 
   api: {
-    showDataset,
-    hideDataset,
     addDataset,
     removeDataset,
-    showFeatures,
-    hideFeatures
+    setDatasetVisibility,
+    setFeatureVisibility,
+    setStyle,
+    getStyle,
+    setOpacity,
+    getOpacity,
+    setData
   }
 }

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

@@ -1,62 +1,62 @@
 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'
 
-export const Key = ({ mapState, pluginState }) => {
+export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
+  if (!pluginState?.key?.items?.length) {
+    return (<EmptyKey text={pluginConfig.noKeyItemText} />)
+  }
   const { mapStyle } = mapState
+  const { symbolRegistry, patternRegistry } = services
 
-  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 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>
   )
 
+  const { items: keyGroups, hasGroups } = pluginState.key
+  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,69 @@
-.im-c-datasets-key {
+// When groups are present, every direct child gets a border-top
+.im-c-datasets-key > *:first-child {
+  padding-top: 5px;
 
+  .im-c-datasets-key__group-heading {
+    padding-top: 0;
+  }
 }
 
-.im-c-datasets-key__item-label {
+.im-c-datasets-key--has-groups > *:not(: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__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;
+
+  // First item inside a group — heading already provides top spacing
+  .im-c-datasets-key__group &:first-child {
+    padding-top: 0;
+  }
+}
+
+.im-c-datasets-key--has-groups > .im-c-datasets-key__item:not(:first-child) {
+  padding-top: 15px;
 }
 
-.im-c-datasets-key__item-label svg {
+.im-c-datasets-key--has-groups > .im-c-datasets-key__item {
+  padding-bottom: 15px;
+}
+
+.im-c-datasets-key__group .im-c-datasets-key__item {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+// 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;
+}
+
+// Symbol
+
+.am-c-datasets-key-symbol {
   position: relative;
   flex-shrink: 0;
-  margin: 0px 13px 0 2px;
-}
+  margin: 0 13px 0 2px;
+}
+
+.am-c-datasets-key-symbol--point {
+  margin: -9px 3px -9px -7px;
+}

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

@@ -1,38 +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 handleChange = (e) => {
-    const { value, checked } = e.target
-    if (checked) {
-      showDataset({ mapProvider, pluginState }, value)
-    } else {
-      hideDataset({ mapProvider, pluginState }, value)
+const CHECKBOX_LABEL_CLASS = 'im-c-datasets-layers__item-label govuk-label govuk-checkboxes__label'
+
+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,39 @@
+// When groups are present, every direct child except the first gets a border-top
+.im-c-datasets-layers--has-groups > *:not(:first-child) {
+  border-top: 1px solid var(--button-hover-color);
+}
+
+.im-c-datasets-layers > *:first-child {
+  padding-top: 5px;
+}
+
+.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;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  .im-c-datasets-layers--has-groups > &:not(:first-child) {
+    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 +50,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 +58,24 @@
     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);
+}
+
+.im-c-datasets-layers-group:first-child .im-c-datasets-layers-group__legend {
+  padding-top: 0;
+}