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

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

@@ -1,62 +0,0 @@
-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 = ({ pluginConfig, mapState, pluginState, services }) => {
-  if (!pluginState?.key?.items?.length) {
-    return (<EmptyKey text={pluginConfig.noKeyItemText} />)
-  }
-  const { mapStyle } = mapState
-  const { symbolRegistry, patternRegistry } = services
-
-  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={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/Layers.jsx

@@ -1,141 +0,0 @@
-import React from 'react'
-import { setDatasetVisibility } from '../api/setDatasetVisibility'
-
-const CHECKBOX_LABEL_CLASS = 'im-c-datasets-layers__item-label govuk-label govuk-checkboxes__label'
-
-const hasToggleableSublayers = (dataset) => dataset.sublayers?.some(sublayer => sublayer.showInMenu)
-
-/**
- * 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 })
-  }
-
-  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.showInMenu || 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.showInMenu)
-            .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.showInMenu)
-                  .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/reducer.js

@@ -1,219 +0,0 @@
-import { applyDatasetDefaults } from './defaults.js'
-import { keyReducer } from './reducers/keyReducer.js'
-
-const initialState = {
-  datasets: null,
-  key: {
-    items: [],
-    hasGroups: false
-  },
-  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 => initSublayerVisibility(applyDatasetDefaults(dataset, datasetDefaults)))
-  }
-}
-
-const addDataset = (state, payload) => {
-  const { dataset, datasetDefaults } = payload
-  return {
-    ...state,
-    datasets: [
-      ...(state.datasets || []),
-      initSublayerVisibility(applyDatasetDefaults(dataset, datasetDefaults))
-    ]
-  }
-}
-
-const removeDataset = (state, payload) => {
-  const { id } = payload
-  return {
-    ...state,
-    datasets: state.datasets?.filter(dataset => dataset.id !== id) || []
-  }
-}
-
-const setDatasetVisibility = (state, payload) => {
-  const { id, visibility } = payload
-  return {
-    ...state,
-    datasets: state.datasets?.map(dataset =>
-      dataset.id === id ? { ...dataset, visibility } : dataset
-    )
-  }
-}
-
-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]
-  const existingIds = existing?.ids || []
-  const newIds = [...new Set([...existingIds, ...featureIds])]
-
-  return {
-    ...state,
-    hiddenFeatures: {
-      ...state.hiddenFeatures,
-      [layerId]: { idProperty, ids: newIds }
-    }
-  }
-}
-
-const showFeatures = (state, payload) => {
-  const { layerId, featureIds } = payload
-  const existing = state.hiddenFeatures[layerId]
-  if (!existing) {
-    return state
-  }
-
-  const newIds = existing.ids.filter(id => !featureIds.includes(id))
-
-  if (newIds.length === 0) {
-    const rest = { ...state.hiddenFeatures }
-    delete rest[layerId]
-    return { ...state, hiddenFeatures: rest }
-  }
-
-  return {
-    ...state,
-    hiddenFeatures: {
-      ...state.hiddenFeatures,
-      [layerId]: { ...existing, ids: newIds }
-    }
-  }
-}
-
-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 = {
-  BUILD_KEY_GROUPS: keyReducer,
-  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,
-  SET_LAYER_ADAPTER: setLayerAdapter
-}
-
-export {
-  initialState,
-  actions
-}

package/plugins/beta/datasets/src/reducers/keyReducer.js

@@ -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.visibility === 'hidden') {
-      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 } }
-}

package/plugins/beta/datasets/src/utils/filters.js

@@ -1,34 +0,0 @@
-/**
- * Build a filter that excludes specific features by ID property
- * Coerces values to strings for comparison to handle mixed number/string types
- */
-export const buildExclusionFilter = (originalFilter, idProperty, excludeIds) => {
-  if (!excludeIds || excludeIds.length === 0) {
-    return originalFilter
-  }
-
-  // Coerce both sides to strings to handle number/string type mismatches
-  // When no idProperty, use feature-level id via ['id'] (GeoJSON feature.id)
-  const idExpr = idProperty ? ['to-string', ['get', idProperty]] : ['to-string', ['id']]
-  // Convert all IDs to strings; map passes each element as the first argument to String
-  const stringIds = excludeIds.map(String)
-  const exclusionFilter = ['!', ['in', idExpr, ['literal', stringIds]]]
-
-  if (!originalFilter) {
-    return exclusionFilter
-  }
-
-  return ['all', originalFilter, exclusionFilter]
-}
-
-/**
- * Apply exclusion filter to a map layer
- */
-export const applyExclusionFilter = (map, layerId, originalFilter, idProperty, excludeIds) => {
-  if (!map.getLayer(layerId)) {
-    return
-  }
-
-  const filter = buildExclusionFilter(originalFilter, idProperty, excludeIds)
-  map.setFilter(layerId, filter)
-}

package/plugins/beta/datasets/src/utils/mergeSublayer.js

@@ -1,86 +0,0 @@
-import { hasCustomVisualStyle } from '../defaults.js'
-
-const getFillProps = (dataset, sublayerStyle) => {
-  if (sublayerStyle.fillPattern || sublayerStyle.fillPatternSvgContent) {
-    return {
-      fillPattern: sublayerStyle.fillPattern,
-      fillPatternSvgContent: sublayerStyle.fillPatternSvgContent,
-      fillPatternForegroundColor: sublayerStyle.fillPatternForegroundColor ?? dataset.fillPatternForegroundColor,
-      fillPatternBackgroundColor: sublayerStyle.fillPatternBackgroundColor ?? dataset.fillPatternBackgroundColor
-    }
-  }
-  if ('fill' in sublayerStyle) {
-    // Sublayer explicitly sets a plain fill — do not inherit any parent pattern
-    return { fill: sublayerStyle.fill }
-  }
-  return {
-    fill: dataset.fill,
-    fillPattern: dataset.fillPattern,
-    fillPatternSvgContent: dataset.fillPatternSvgContent,
-    fillPatternForegroundColor: dataset.fillPatternForegroundColor,
-    fillPatternBackgroundColor: dataset.fillPatternBackgroundColor
-  }
-}
-
-const getCombinedFilter = (datasetFilter, sublayerFilter) => {
-  if (datasetFilter && sublayerFilter) {
-    return ['all', datasetFilter, sublayerFilter]
-  }
-  return sublayerFilter || datasetFilter || null
-}
-
-const getSymbolDescription = (dataset, sublayerStyle) => {
-  if ('symbolDescription' in sublayerStyle) {
-    return sublayerStyle.symbolDescription
-  }
-  if (hasCustomVisualStyle(sublayerStyle)) {
-    return undefined
-  }
-  return dataset.symbolDescription
-}
-
-/**
- * Merge a sublayer with its parent dataset, producing a flat style
- * object suitable for layer creation and key symbol rendering.
- *
- * The sublayer's nested `style` object is flattened before merging.
- *
- * Fill precedence (highest to lowest):
- *   1. Sublayer's own fillPattern
- *   2. Sublayer's own fill (explicit, even if transparent — clears any parent pattern)
- *   3. Parent's fillPattern
- *   4. Parent's fill
- *
- * symbolDescription is only inherited from the parent when the sublayer has no
- * custom visual styles of its own. If the sublayer overrides stroke/fill/pattern
- * without setting symbolDescription explicitly, no description is shown.
- */
-export const mergeSublayer = (dataset, sublayer) => {
-  const sublayerStyle = sublayer.style || {}
-  const combinedFilter = getCombinedFilter(dataset.filter, sublayer.filter)
-
-  return {
-    id: sublayer.id,
-    label: sublayer.label,
-    stroke: sublayerStyle.stroke ?? dataset.stroke,
-    strokeWidth: sublayerStyle.strokeWidth ?? dataset.strokeWidth,
-    strokeDashArray: sublayerStyle.strokeDashArray ?? dataset.strokeDashArray,
-    opacity: sublayerStyle.opacity ?? dataset.opacity,
-    keySymbolShape: sublayerStyle.keySymbolShape ?? dataset.keySymbolShape,
-    symbolDescription: getSymbolDescription(dataset, sublayerStyle),
-    showInKey: sublayer.showInKey ?? dataset.showInKey,
-    showInMenu: sublayer.showInMenu ?? false,
-    filter: combinedFilter,
-    minZoom: dataset.minZoom,
-    maxZoom: dataset.maxZoom,
-    symbol: sublayerStyle.symbol ?? dataset.symbol,
-    symbolSvgContent: sublayerStyle.symbolSvgContent ?? dataset.symbolSvgContent,
-    symbolViewBox: sublayerStyle.symbolViewBox ?? dataset.symbolViewBox,
-    symbolAnchor: sublayerStyle.symbolAnchor ?? dataset.symbolAnchor,
-    symbolBackgroundColor: sublayerStyle.symbolBackgroundColor ?? dataset.symbolBackgroundColor,
-    symbolForegroundColor: sublayerStyle.symbolForegroundColor ?? dataset.symbolForegroundColor,
-    symbolHaloWidth: sublayerStyle.symbolHaloWidth ?? dataset.symbolHaloWidth,
-    symbolGraphic: sublayerStyle.symbolGraphic ?? dataset.symbolGraphic,
-    ...getFillProps(dataset, sublayerStyle)
-  }
-}

package/plugins/beta/draw-ml/dist/css/index.css

@@ -1,21 +0,0 @@
-.touch-vertex-target circle {
-  fill: var(--map-overlay-foreground-color);
-}
-.touch-vertex-target path {
-  fill: var(--map-overlay-halo-color);
-}
-
-.im-c-actions .im-c-button-wrapper--draw-done,
-.im-c-actions .im-c-button-wrapper--draw-menu,
-.im-c-actions .im-c-button-wrapper--draw-cancel {
-  width: 33.33%;
-}
-
-.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-done,
-.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-menu,
-.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-cancel,
-.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-done,
-.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-menu,
-.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-cancel {
-  width: 100px;
-}