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

package/plugins/beta/datasets/src/api/getStyle.test.js

@@ -0,0 +1,42 @@
+import { getStyle } from './getStyle.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { logger } from '../../../../../src/services/logger.js'
+
+jest.mock('../registry/datasetRegistry.js', () => ({
+  datasetRegistry: { getDataset: jest.fn() }
+}))
+
+jest.mock('../../../../../src/services/logger.js', () => ({
+  logger: { warn: jest.fn() }
+}))
+
+describe('getStyle', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('returns the style for a known dataset', () => {
+    const style = { fill: 'blue', stroke: 'red' }
+    datasetRegistry.getDataset.mockReturnValue({ style })
+    expect(getStyle({}, { datasetId: 'roads' })).toBe(style)
+  })
+
+  it('returns style for the combined sublayer id', () => {
+    const style = { fill: 'green' }
+    datasetRegistry.getDataset.mockReturnValue({ style })
+    expect(getStyle({}, { datasetId: 'parent', sublayerId: 'child' })).toBe(style)
+    expect(datasetRegistry.getDataset).toHaveBeenCalledWith('parent-child')
+  })
+
+  it('returns null and warns when a sublayer dataset is not found', () => {
+    datasetRegistry.getDataset.mockReturnValue(undefined)
+    expect(getStyle({}, { datasetId: 'parent', sublayerId: 'missing' })).toBeNull()
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('parent-missing'))
+  })
+
+  it('uses undefined datasetId when options argument is omitted', () => {
+    datasetRegistry.getDataset.mockReturnValue(undefined)
+    expect(getStyle({})).toBeNull()
+    expect(logger.warn).toHaveBeenCalledWith('getStyle: Dataset with id undefined not found')
+  })
+})

package/plugins/beta/datasets/src/api/removeDataset.js

@@ -1,9 +1,9 @@
-export const removeDataset = ({ pluginState }, datasetId) => {
-  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-  if (!dataset) {
-    return
-  }
+import { layerAdapter } from '../adapters/loadLayerAdapter.js'
 
-  pluginState.layerAdapter?.removeDataset(dataset, pluginState.datasets)
-  pluginState.dispatch({ type: 'REMOVE_DATASET', payload: { id: datasetId } })
+export const removeDataset = ({ pluginState: { dispatch } }, datasetId) => {
+  // Here we need to remove the dataset from the adapter before removing it from state,
+  // otherwise the datasetDefinition will have been removed from the registry by the
+  // time the adapter tries to remove the dataset, which causes an error
+  layerAdapter.removeDataset(datasetId)
+  dispatch({ type: 'REMOVE_DATASET', payload: { id: datasetId } })
 }

package/plugins/beta/datasets/src/api/removeDataset.test.js

@@ -0,0 +1,45 @@
+import { removeDataset } from './removeDataset.js'
+import { layerAdapter } from '../adapters/loadLayerAdapter.js'
+
+jest.mock('../adapters/loadLayerAdapter.js', () => ({
+  layerAdapter: {
+    removeDataset: jest.fn()
+  }
+}))
+
+describe('removeDataset', () => {
+  const dispatch = jest.fn()
+  it('calls layerAdapter.removeDataset with the datasetId', () => {
+    removeDataset({ pluginState: { layerAdapter, dispatch } }, 'my-dataset')
+
+    expect(layerAdapter.removeDataset).toHaveBeenCalledWith('my-dataset')
+  })
+
+  it('dispatches REMOVE_DATASET with the datasetId', () => {
+    removeDataset({ pluginState: { layerAdapter, dispatch } }, 'my-dataset')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'REMOVE_DATASET',
+      payload: { id: 'my-dataset' }
+    })
+  })
+
+  it('calls layerAdapter.removeDataset before dispatching', () => {
+    const callOrder = []
+    dispatch.mockImplementationOnce(() => callOrder.push('dispatch'))
+    layerAdapter.removeDataset.mockImplementationOnce(() => callOrder.push('adapter'))
+
+    removeDataset({ pluginState: { layerAdapter, dispatch } }, 'my-dataset')
+
+    expect(callOrder).toEqual(['adapter', 'dispatch'])
+  })
+
+  it('still dispatches REMOVE_DATASET when layerAdapter is undefined', () => {
+    removeDataset({ pluginState: { layerAdapter: undefined, dispatch } }, 'my-dataset')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'REMOVE_DATASET',
+      payload: { id: 'my-dataset' }
+    })
+  })
+})

package/plugins/beta/datasets/src/api/setData.js

@@ -1,10 +1,16 @@
 import { logger } from '../../../../../src/services/logger.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { layerAdapter } from '../adapters/loadLayerAdapter.js'
 
 export const setData = ({ pluginState }, geojson, { datasetId }) => {
-  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-  if (dataset?.tiles) {
+  const registryDataset = datasetRegistry.getDataset(datasetId)
+  if (!registryDataset) {
+    logger.warn(`setData: Dataset with id ${datasetId} not found`)
+    return
+  }
+  if (registryDataset?.tiles) {
     logger.warn(`setData called on vector tile dataset "${datasetId}" — has no effect`)
     return
   }
-  pluginState.layerAdapter?.setData(datasetId, geojson)
+  layerAdapter.setData(datasetId, geojson)
 }

package/plugins/beta/datasets/src/api/setData.test.js

@@ -0,0 +1,62 @@
+import { setData } from './setData.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { logger } from '../../../../../src/services/logger.js'
+import { layerAdapter } from '../adapters/loadLayerAdapter.js'
+
+jest.mock('../adapters/loadLayerAdapter.js', () => ({
+  layerAdapter: {
+    setData: jest.fn()
+  }
+}))
+
+jest.mock('../registry/datasetRegistry.js', () => ({
+  datasetRegistry: { getDataset: jest.fn() }
+}))
+
+jest.mock('../../../../../src/services/logger.js', () => ({
+  logger: { warn: jest.fn() }
+}))
+
+describe('setData', () => {
+  const geojson = { type: 'FeatureCollection', features: [] }
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('calls layerAdapter.setData with datasetId and geojson', () => {
+    datasetRegistry.getDataset.mockReturnValue({ id: 'my-dataset' })
+
+    setData({ pluginState: { layerAdapter } }, geojson, { datasetId: 'my-dataset' })
+
+    expect(layerAdapter.setData).toHaveBeenCalledWith('my-dataset', geojson)
+  })
+
+  it('does nothing when the dataset is not found in the registry', () => {
+    datasetRegistry.getDataset.mockReturnValue(undefined)
+
+    setData({ pluginState: { layerAdapter } }, geojson, { datasetId: 'missing' })
+
+    expect(layerAdapter.setData).not.toHaveBeenCalled()
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('missing'))
+  })
+
+  it('warns and does nothing when dataset is a vector tile dataset', () => {
+    datasetRegistry.getDataset.mockReturnValue({
+      id: 'tiles-dataset',
+      tiles: ['https://example.com/{z}/{x}/{y}']
+    })
+
+    setData({ pluginState: { layerAdapter } }, geojson, { datasetId: 'tiles-dataset' })
+
+    expect(layerAdapter.setData).not.toHaveBeenCalled()
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('tiles-dataset'))
+  })
+
+  it("doesn't throw when layerAdapter is undefined", () => {
+    datasetRegistry.getDataset.mockReturnValue({ id: 'my-dataset' })
+    // Should not throw even if layerAdapter is undefined
+    expect(() =>
+      setData({ pluginState: { layerAdapter: undefined } }, geojson, { datasetId: 'my-dataset' })
+    ).not.toThrow()
+  })
+})

package/plugins/beta/datasets/src/api/setDatasetVisibility.js

@@ -1,37 +1,12 @@
-export const setDatasetVisibility = ({ pluginState }, visible, options = {}) => {
-  const { datasetId, sublayerId } = options
-
-  if (sublayerId) {
-    const visibility = visible ? 'visible' : 'hidden'
-    pluginState.layerAdapter?.[visible ? 'showSublayer' : 'hideSublayer'](datasetId, sublayerId)
-    pluginState.dispatch({ type: 'SET_SUBLAYER_VISIBILITY', payload: { datasetId, sublayerId, visibility } })
-    return
-  }
+export const setDatasetVisibility = ({ pluginState: { dispatch } }, visible, ids = {}) => {
+  const { datasetId: datasetToUpdate, sublayerId } = ids
+  const datasetId = sublayerId ? `${datasetToUpdate}-${sublayerId}` : datasetToUpdate
 
   if (datasetId) {
-    pluginState.layerAdapter?.[visible ? 'showDataset' : 'hideDataset'](datasetId)
-    pluginState.dispatch({ type: 'SET_DATASET_VISIBILITY', payload: { id: datasetId, visibility: visible ? 'visible' : 'hidden' } })
-    if (visible) {
-      const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-      Object.entries(dataset?.sublayerVisibility || {}).forEach(([subId, vis]) => {
-        if (vis === 'hidden') {
-          pluginState.layerAdapter?.hideSublayer(datasetId, subId)
-        }
-      })
-    }
+    dispatch({ type: 'SET_DATASET_VISIBILITY', payload: { datasetId, visible } })
     return
   }
 
   // Global
-  pluginState.dispatch({ type: 'SET_GLOBAL_VISIBILITY', payload: { visibility: visible ? 'visible' : 'hidden' } })
-  pluginState.datasets?.forEach(dataset => {
-    pluginState.layerAdapter?.[visible ? 'showDataset' : 'hideDataset'](dataset.id)
-    if (visible) {
-      Object.entries(dataset.sublayerVisibility || {}).forEach(([subId, vis]) => {
-        if (vis === 'hidden') {
-          pluginState.layerAdapter?.hideSublayer(dataset.id, subId)
-        }
-      })
-    }
-  })
+  dispatch({ type: 'SET_GLOBAL_VISIBILITY', payload: { visible } })
 }

package/plugins/beta/datasets/src/api/setDatasetVisibility.test.js

@@ -0,0 +1,31 @@
+import { setDatasetVisibility } from './setDatasetVisibility.js'
+
+describe('setDatasetVisibility', () => {
+  const dispatch = jest.fn()
+  it('dispatches SET_DATASET_VISIBILITY with visible false', () => {
+    setDatasetVisibility({ pluginState: { dispatch } }, false, { datasetId: 'my-dataset' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_VISIBILITY',
+      payload: { datasetId: 'my-dataset', visible: false }
+    })
+  })
+
+  it('combines datasetId and sublayerId for the dispatched id', () => {
+    setDatasetVisibility({ pluginState: { dispatch } }, true, { datasetId: 'parent', sublayerId: 'child' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_VISIBILITY',
+      payload: { datasetId: 'parent-child', visible: true }
+    })
+  })
+
+  it('dispatches SET_GLOBAL_VISIBILITY when ids defaults to empty object', () => {
+    setDatasetVisibility({ pluginState: { dispatch } }, false)
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_GLOBAL_VISIBILITY',
+      payload: { visible: false }
+    })
+  })
+})

package/plugins/beta/datasets/src/api/setFeatureVisibility.js

@@ -1,22 +1,13 @@
-export const setFeatureVisibility = ({ pluginState }, visible, featureIds, { datasetId, idProperty = null } = {}) => {
-  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-  if (!dataset) {
-    return
-  }
+import { logger } from '../../../../../src/services/logger.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
 
-  if (visible) {
-    const existingHidden = pluginState.hiddenFeatures[datasetId]
-    if (!existingHidden) {
-      return
+export const setFeatureVisibility = ({ pluginState: { dispatch } }, visible, featureIds, { datasetId = null } = {}) => {
+  if (datasetId) {
+    const dataset = datasetRegistry.getDataset(datasetId)
+    if (dataset && !dataset.idProperty && !dataset.generateIds) {
+      logger.warn(`setFeatureVisibility: Dataset "${datasetId}" has no idProperty or generateIds configured. Features may not be matched correctly. Add idProperty to match by a feature property, or add generateIds: true to use auto-generated IDs.`)
     }
-    const remainingHiddenIds = existingHidden.ids.filter(id => !featureIds.includes(id))
-    pluginState.dispatch({ type: 'SHOW_FEATURES', payload: { layerId: datasetId, featureIds } })
-    pluginState.layerAdapter?.showFeatures(dataset, idProperty, remainingHiddenIds)
-  } else {
-    const existingHidden = pluginState.hiddenFeatures[datasetId]
-    const existingIds = existingHidden?.ids || []
-    const allHiddenIds = [...new Set([...existingIds, ...featureIds])]
-    pluginState.dispatch({ type: 'HIDE_FEATURES', payload: { layerId: datasetId, idProperty, featureIds } })
-    pluginState.layerAdapter?.hideFeatures(dataset, idProperty, allHiddenIds)
   }
+  const type = visible ? 'SHOW_FEATURES' : 'HIDE_FEATURES'
+  dispatch({ type, payload: { datasetId, featureIds } })
 }

package/plugins/beta/datasets/src/api/setFeatureVisibility.test.js

@@ -0,0 +1,74 @@
+import { setFeatureVisibility } from './setFeatureVisibility.js'
+import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { logger } from '../../../../../src/services/logger.js'
+
+jest.mock('../registry/datasetRegistry.js', () => ({
+  datasetRegistry: { getDataset: jest.fn() }
+}))
+
+jest.mock('../../../../../src/services/logger.js', () => ({
+  logger: { warn: jest.fn() }
+}))
+
+describe('setFeatureVisibility', () => {
+  const dispatch = jest.fn()
+  const featureIds = [1, 2, 3]
+  const datasetId = 'my-dataset'
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    datasetRegistry.getDataset.mockReturnValue({ idProperty: 'id', generateIds: false })
+  })
+
+  it('dispatches SHOW_FEATURES when visible is true', () => {
+    setFeatureVisibility({ pluginState: { dispatch } }, true, featureIds, { datasetId })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SHOW_FEATURES',
+      payload: { datasetId, featureIds }
+    })
+  })
+
+  it('dispatches HIDE_FEATURES when visible is false', () => {
+    setFeatureVisibility({ pluginState: { dispatch } }, false, featureIds, { datasetId })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'HIDE_FEATURES',
+      payload: { datasetId, featureIds }
+    })
+  })
+
+  it('uses null datasetId when options are not provided', () => {
+    setFeatureVisibility({ pluginState: { dispatch } }, true, featureIds)
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SHOW_FEATURES',
+      payload: { datasetId: null, featureIds }
+    })
+  })
+
+  it('does not warn when dataset has idProperty set', () => {
+    datasetRegistry.getDataset.mockReturnValue({ idProperty: 'parcel_id', generateIds: false })
+    setFeatureVisibility({ pluginState: { dispatch } }, false, featureIds, { datasetId })
+    expect(logger.warn).not.toHaveBeenCalled()
+  })
+
+  it('does not warn when dataset has generateIds set', () => {
+    datasetRegistry.getDataset.mockReturnValue({ idProperty: null, generateIds: true })
+    setFeatureVisibility({ pluginState: { dispatch } }, false, featureIds, { datasetId })
+    expect(logger.warn).not.toHaveBeenCalled()
+  })
+
+  it('warns when dataset has neither idProperty nor generateIds', () => {
+    datasetRegistry.getDataset.mockReturnValue({ idProperty: null, generateIds: false })
+    setFeatureVisibility({ pluginState: { dispatch } }, false, featureIds, { datasetId })
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining(`"${datasetId}"`))
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('idProperty'))
+  })
+
+  it('does not warn or look up registry when datasetId is not provided', () => {
+    setFeatureVisibility({ pluginState: { dispatch } }, false, featureIds)
+    expect(datasetRegistry.getDataset).not.toHaveBeenCalled()
+    expect(logger.warn).not.toHaveBeenCalled()
+  })
+})

package/plugins/beta/datasets/src/api/setGlobals.js

@@ -0,0 +1,20 @@
+import { logger } from '../../../../../src/services/logger.js'
+export const setGlobals = ({ pluginState: { dispatch } }, values) => {
+  const { opacityMode } = values
+  const payload = {}
+  let valuesSet = false
+  if (opacityMode) {
+    if (!['dataset', 'global', 'multiply'].includes(opacityMode)) {
+      logger.warn(`Ignoring invalid opacityMode: ${opacityMode}. Must be one of 'dataset', 'global' or 'multiply'.`)
+    } else {
+      valuesSet = true
+      payload.opacityMode = opacityMode
+    }
+  }
+
+  if (valuesSet) {
+    dispatch({ type: 'SET_GLOBAL_STATE', payload })
+  } else {
+    logger.warn('setGlobals: requires a valid value for opacityMode to be set')
+  }
+}

package/plugins/beta/datasets/src/api/setGlobals.test.js

@@ -0,0 +1,63 @@
+import { setGlobals } from './setGlobals.js'
+import { logger } from '../../../../../src/services/logger.js'
+
+jest.mock('../../../../../src/services/logger.js', () => ({
+  logger: { warn: jest.fn() }
+}))
+
+describe('setGlobals', () => {
+  const dispatch = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('dispatches SET_GLOBAL_STATE with opacityMode when valid value is provided', () => {
+    setGlobals({ pluginState: { dispatch } }, { opacityMode: 'dataset' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_GLOBAL_STATE',
+      payload: { opacityMode: 'dataset' }
+    })
+  })
+
+  it.each(['dataset', 'global', 'multiply'])('accepts valid opacityMode: %s', (opacityMode) => {
+    setGlobals({ pluginState: { dispatch } }, { opacityMode })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_GLOBAL_STATE',
+      payload: { opacityMode }
+    })
+    expect(logger.warn).not.toHaveBeenCalled()
+  })
+
+  it('warns and does not dispatch when opacityMode is invalid', () => {
+    setGlobals({ pluginState: { dispatch } }, { opacityMode: 'invalid' })
+
+    expect(logger.warn).toHaveBeenCalledWith(
+      "Ignoring invalid opacityMode: invalid. Must be one of 'dataset', 'global' or 'multiply'."
+    )
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+
+  it('warns and does not dispatch when no valid values are provided', () => {
+    setGlobals({ pluginState: { dispatch } }, {})
+
+    expect(logger.warn).toHaveBeenCalledWith(
+      'setGlobals: requires a valid value for opacityMode to be set'
+    )
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+
+  it('warns about invalid opacityMode and then warns no valid values set', () => {
+    setGlobals({ pluginState: { dispatch } }, { opacityMode: 'bad' })
+
+    expect(logger.warn).toHaveBeenCalledWith(
+      "Ignoring invalid opacityMode: bad. Must be one of 'dataset', 'global' or 'multiply'."
+    )
+    expect(logger.warn).toHaveBeenCalledWith(
+      'setGlobals: requires a valid value for opacityMode to be set'
+    )
+    expect(dispatch).not.toHaveBeenCalled()
+  })
+})

package/plugins/beta/datasets/src/api/setOpacity.js

@@ -1,29 +1,10 @@
-export const setOpacity = ({ pluginState }, opacity, options) => {
-  const { datasetId, sublayerId } = options || {}
-
-  if (sublayerId) {
-    const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-    if (!dataset) {
-      return
-    }
-    pluginState.dispatch({ type: 'SET_SUBLAYER_OPACITY', payload: { datasetId, sublayerId, opacity } })
-    pluginState.layerAdapter?.setSublayerOpacity(datasetId, sublayerId, opacity)
-    return
+export const setOpacity = ({ pluginState: { dispatch } }, opacity, options = {}) => {
+  const { datasetId, sublayerId } = options
+  const fullId = sublayerId ? `${datasetId}-${sublayerId}` : datasetId
+  if (fullId) {
+    dispatch({ type: 'SET_OPACITY', payload: { datasetId: fullId, opacity } })
+  } else {
+    // Global update
+    dispatch({ type: 'SET_GLOBAL_OPACITY', payload: { opacity } })
   }
-
-  if (datasetId) {
-    const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-    if (!dataset) {
-      return
-    }
-    pluginState.dispatch({ type: 'SET_OPACITY', payload: { datasetId, opacity } })
-    pluginState.layerAdapter?.setOpacity(datasetId, opacity)
-    return
-  }
-
-  // Global
-  pluginState.dispatch({ type: 'SET_GLOBAL_OPACITY', payload: { opacity } })
-  pluginState.datasets?.forEach(d => {
-    pluginState.layerAdapter?.setOpacity(d.id, opacity)
-  })
 }

package/plugins/beta/datasets/src/api/setOpacity.test.js

@@ -0,0 +1,31 @@
+import { setOpacity } from './setOpacity.js'
+
+describe('setOpacity', () => {
+  const dispatch = jest.fn()
+  it('dispatches SET_OPACITY when datasetId is provided', () => {
+    setOpacity({ pluginState: { dispatch } }, 0.5, { datasetId: 'my-dataset' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_OPACITY',
+      payload: { datasetId: 'my-dataset', opacity: 0.5 }
+    })
+  })
+
+  it('combines datasetId and sublayerId for the dispatched datasetId', () => {
+    setOpacity({ pluginState: { dispatch } }, 0.4, { datasetId: 'parent', sublayerId: 'child' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_OPACITY',
+      payload: { datasetId: 'parent-child', opacity: 0.4 }
+    })
+  })
+
+  it('dispatches SET_GLOBAL_OPACITY when no datasetId is provided', () => {
+    setOpacity({ pluginState: { dispatch } }, 0.8, {})
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_GLOBAL_OPACITY',
+      payload: { opacity: 0.8 }
+    })
+  })
+})

package/plugins/beta/datasets/src/api/setStyle.js

@@ -1,22 +1,6 @@
-export const setStyle = ({ pluginState, mapState }, style, { datasetId, sublayerId } = {}) => {
-  const dataset = pluginState.datasets?.find(d => d.id === datasetId)
-  if (!dataset) {
-    return
-  }
-
-  if (sublayerId) {
-    pluginState.dispatch({ type: 'SET_SUBLAYER_STYLE', payload: { datasetId, sublayerId, styleChanges: style } })
-    const updatedSublayerDataset = {
-      ...dataset,
-      sublayers: dataset.sublayers?.map(sublayer =>
-        sublayer.id === sublayerId ? { ...sublayer, style: { ...sublayer.style, ...style } } : sublayer
-      )
-    }
-    pluginState.layerAdapter?.setSublayerStyle(updatedSublayerDataset, sublayerId, mapState.mapStyle)
-    return
-  }
-
-  pluginState.dispatch({ type: 'SET_DATASET_STYLE', payload: { datasetId, styleChanges: style } })
-  const updatedDataset = { ...dataset, ...style }
-  pluginState.layerAdapter?.setStyle(updatedDataset, mapState.mapStyle)
+export const setStyle = ({ pluginState: { dispatch }, mapState }, styleChanges, { datasetId, sublayerId } = {}) => {
+  datasetId = sublayerId ? `${datasetId}-${sublayerId}` : datasetId
+  const mapStyle = mapState.mapStyle
+  const payload = { datasetId, styleChanges, mapStyle }
+  dispatch({ type: 'SET_DATASET_STYLE', payload })
 }

package/plugins/beta/datasets/src/api/setStyle.test.js

@@ -0,0 +1,53 @@
+import { setStyle } from './setStyle.js'
+
+describe('setStyle', () => {
+  it('dispatches SET_DATASET_STYLE with datasetId, styleChanges, and mapStyle', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, layers: [] }
+    const styleChanges = { fill: 'blue' }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, styleChanges, { datasetId: 'my-dataset' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_STYLE',
+      payload: { datasetId: 'my-dataset', styleChanges, mapStyle }
+    })
+  })
+
+  it('combines datasetId and sublayerId for the dispatched datasetId', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, layers: [] }
+    const styleChanges = { stroke: 'red' }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, styleChanges, { datasetId: 'parent', sublayerId: 'child' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_STYLE',
+      payload: { datasetId: 'parent-child', styleChanges, mapStyle }
+    })
+  })
+
+  it('passes mapState.mapStyle in the payload', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, sources: { s: {} }, layers: [{ id: 'base' }] }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, {}, { datasetId: 'ds' })
+
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ payload: expect.objectContaining({ mapStyle }) })
+    )
+  })
+
+  it('uses undefined datasetId when options are not provided', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, layers: [] }
+    const styleChanges = { fill: 'green' }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, styleChanges)
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_STYLE',
+      payload: { datasetId: undefined, styleChanges, mapStyle }
+    })
+  })
+})

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { EmptyKey } from './EmptyKey.jsx'
+import { KeyItem } from './KeyItem.jsx'
+import { KeyGroupItem } from './KeyGroupItem.jsx'
+import { datasetRegistry } from '../../registry/datasetRegistry.js'
+
+export const Key = ({
+  pluginConfig: { noKeyItemText },
+  mapState: { mapStyle },
+  pluginState: { mappedDatasets },
+  services: { symbolRegistry, patternRegistry }
+}) => {
+  const { items: keyGroups, hasGroups } = datasetRegistry.keyItems()
+
+  if (!keyGroups?.length) {
+    return (<EmptyKey text={noKeyItemText} />)
+  }
+
+  const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
+  return (
+    <div className={containerClass}>{keyGroups.map(item => {
+      const key = item.type === 'group' ? item.groupLabel.toLowerCase().replaceAll(/\s+/g, '-') : item.dataset.id
+
+      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>
+  )
+}