@defra/interactive-map 0.0.40-alpha → 0.0.41-alpha

package/plugins/map-key/src/components/Key/KeyItem.test.jsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react'
+import { KeyItem } from './KeyItem'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+jest.mock('../../../../../src/utils/getValueForStyle.js', () => ({
+  getValueForStyle: jest.fn()
+}))
+
+jest.mock('./KeySvg.jsx', () => ({
+  KeySvg: () => <svg data-testid='key-svg' />
+}))
+
+const mapStyle = { id: 'default' }
+
+const baseKeyDefinition = {
+  id: '1',
+  label: 'My Label',
+  symbolDescription: null
+}
+
+beforeEach(() => {
+  getValueForStyle.mockReturnValue(null)
+})
+
+describe('KeyItem', () => {
+  it('renders a dl with the item class', () => {
+    const { container } = render(<KeyItem keyDefinition={baseKeyDefinition} mapStyle={mapStyle} />)
+    expect(container.querySelector('.im-c-map-key__item')).toBeTruthy()
+  })
+
+  it('renders the symbol dt with the correct class', () => {
+    const { container } = render(<KeyItem keyDefinition={baseKeyDefinition} mapStyle={mapStyle} />)
+    expect(container.querySelector('.im-c-map-key__item-symbol')).toBeTruthy()
+  })
+
+  it('renders KeySvg inside the symbol dt', () => {
+    render(<KeyItem keyDefinition={baseKeyDefinition} mapStyle={mapStyle} />)
+    expect(screen.getByTestId('key-svg')).toBeTruthy()
+  })
+
+  it('renders the label dd with the correct class', () => {
+    const { container } = render(<KeyItem keyDefinition={baseKeyDefinition} mapStyle={mapStyle} />)
+    expect(container.querySelector('.im-c-map-key__item-label')).toBeTruthy()
+  })
+
+  it('renders the label text', () => {
+    render(<KeyItem keyDefinition={baseKeyDefinition} mapStyle={mapStyle} />)
+    expect(screen.getByText('My Label')).toBeTruthy()
+  })
+
+  it('renders the symbol description when getValueForStyle returns a value', () => {
+    getValueForStyle.mockReturnValue('A marker symbol')
+    render(<KeyItem keyDefinition={{ ...baseKeyDefinition, symbolDescription: 'A marker symbol' }} mapStyle={mapStyle} />)
+    expect(screen.getByText('(A marker symbol)')).toBeTruthy()
+  })
+
+  it('does not render the symbol description span when getValueForStyle returns null', () => {
+    render(<KeyItem keyDefinition={baseKeyDefinition} mapStyle={mapStyle} />)
+    expect(screen.queryByRole('presentation')).toBeNull()
+    expect(document.querySelector('.govuk-visually-hidden')).toBeNull()
+  })
+
+  it('calls getValueForStyle with the symbolDescription and mapStyle id', () => {
+    render(<KeyItem keyDefinition={{ ...baseKeyDefinition, symbolDescription: 'desc' }} mapStyle={mapStyle} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('desc', 'default')
+  })
+})

package/plugins/map-key/src/components/Key/KeySvg.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+import { symbolRegistry } from '../../registry/index.js'
+
+export const KeySvg = ({ keyDefinition, mapStyle }) => {
+  const [symbolShape, setSymbolShape] = useState(null)
+  const [symbolDef, setSymbolDef] = useState(null)
+
+  useEffect(() => {
+    if (!keyDefinition) {
+      setSymbolShape(null)
+      return
+    }
+    const { hasSymbol, hasPattern, style } = keyDefinition
+    if (hasSymbol) {
+      const _symbolDef = symbolRegistry.getSymbolDef(style)
+      setSymbolDef(_symbolDef)
+      setSymbolShape(_symbolDef ? 'symbol' : 'rect')
+    } else if (hasPattern) {
+      setSymbolShape('pattern')
+    } else if (style.keySymbolShape === 'line') {
+      setSymbolShape('line')
+    } else {
+      setSymbolShape('rect')
+    }
+  }, [keyDefinition])
+
+  if (!symbolShape) {
+    return null
+  } else if (symbolShape === 'symbol') {
+    return <KeySvgSymbol mapStyle={mapStyle} keyDefinition={keyDefinition} symbolDef={symbolDef} />
+  } else if (symbolShape === 'pattern') {
+    return <KeySvgPattern mapStyle={mapStyle} keyDefinition={keyDefinition} />
+  } else if (symbolShape === 'line') {
+    return <KeySvgLine mapStyle={mapStyle} keyDefinition={keyDefinition} />
+  } else {
+    return <KeySvgRect mapStyle={mapStyle} keyDefinition={keyDefinition} />
+  }
+}

package/plugins/{datasets → map-key}/src/components/Key/KeySvg.test.jsx

@@ -2,7 +2,6 @@ import { render } from '@testing-library/react'
 import { KeySvg } from './KeySvg'
 
 import { symbolRegistry } from '../../../../../src/services/symbolRegistry.js'
-import { patternRegistry } from '../../../../../src/services/patternRegistry.js'
 
 const getSymbolDef = jest.spyOn(symbolRegistry, 'getSymbolDef')
 
@@ -22,17 +21,15 @@ jest.mock('./KeySvgRect.jsx', () => ({
   KeySvgRect: () => <svg data-testid='key-svg-rect' />
 }))
 
-const baseRegistryDataset = {
+const baseKeyDefinition = {
   hasSymbol: false,
   hasPattern: false,
   style: {}
 }
 
 const baseProps = {
-  symbolRegistry,
-  patternRegistry,
   mapStyle: { id: 'default' },
-  registryDataset: baseRegistryDataset
+  keyDefinition: baseKeyDefinition
 }
 
 beforeEach(() => {
@@ -42,17 +39,17 @@ beforeEach(() => {
 describe('KeySvg', () => {
   it('renders KeySvgSymbol when a symbolDef is resolved', () => {
     getSymbolDef.mockReturnValue({ id: 'marker' })
-    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, hasSymbol: true }} />)
     expect(getByTestId('key-svg-symbol')).toBeTruthy()
   })
 
   it('renders KeySvgPattern when hasPattern is true and no symbol', () => {
-    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true }} />)
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, 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} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'line' } }} />)
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, style: { keySymbolShape: 'line' } }} />)
     expect(getByTestId('key-svg-line')).toBeTruthy()
   })
 
@@ -63,25 +60,30 @@ describe('KeySvg', () => {
 
   it('prefers symbol over pattern when both are present', () => {
     getSymbolDef.mockReturnValue({ id: 'marker' })
-    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true, hasPattern: true }} />)
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, 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', () => {
-    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true, style: { keySymbolShape: 'line' } }} />)
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, 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} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'polygon' } }} />)
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, style: { keySymbolShape: 'polygon' } }} />)
     expect(getByTestId('key-svg-rect')).toBeTruthy()
   })
 
   it('does not render KeySvgSymbol when hasSymbol is true but getSymbolDef returns null', () => {
     getSymbolDef.mockReturnValue(null)
-    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, hasSymbol: true }} />)
     expect(getByTestId('key-svg-rect')).toBeTruthy()
   })
+
+  it('should return null if keyDefinition is undefined', () => {
+    const { container } = render(<KeySvg {...baseProps} keyDefinition={null} />)
+    expect(container.firstChild).toBeNull()
+  })
 })

package/plugins/map-key/src/components/Key/KeySvgLine.jsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgLine = ({ mapStyle, keyDefinition }) => {
+  const [strokeWidth, setStrokeWidth] = useState(2)
+  const [stroke, setStroke] = useState('#ff0000')
+
+  useEffect(() => {
+    const { style } = keyDefinition
+    setStrokeWidth(style.strokeWidth)
+    setStroke(getValueForStyle(style.stroke, mapStyle.id))
+  }, [mapStyle.id, keyDefinition])
+
+  return (
+    <svg {...svgProps}>
+      <line
+        x1={strokeWidth / 2}
+        y1={SVG_CENTER}
+        x2={SVG_SIZE - strokeWidth / 2}
+        y2={SVG_CENTER}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}

package/plugins/{datasets → map-key}/src/components/Key/KeySvgLine.test.jsx

@@ -8,7 +8,7 @@ jest.mock('../../../../../src/utils/getValueForStyle', () => ({
 }))
 
 const defaultProps = {
-  registryDataset: {
+  keyDefinition: {
     style: {
       stroke: '#ff0000',
       strokeWidth: 2

package/plugins/map-key/src/components/Key/KeySvgPattern.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+import { svgProps } from './svgProperties.js'
+import { patternRegistry } from '../../registry/index.js'
+const PATTERN_INSET = 2
+
+export const KeySvgPattern = ({ keyDefinition, mapStyle }) => {
+  const [paths, setPaths] = useState(null)
+
+  useEffect(() => {
+    const { style } = keyDefinition
+    setPaths(patternRegistry.getKeyPatternPaths(style, mapStyle.id))
+  }, [mapStyle.id, keyDefinition])
+
+  if (!paths) {
+    return null
+  }
+  return (
+    <svg {...svgProps}>
+      <g dangerouslySetInnerHTML={{ __html: paths.border }} />
+      <g transform={`translate(${PATTERN_INSET}, ${PATTERN_INSET})`} dangerouslySetInnerHTML={{ __html: paths.content }} />
+    </svg>
+  )
+}

package/plugins/{datasets → map-key}/src/components/Key/KeySvgPattern.test.jsx

@@ -4,7 +4,7 @@ import { patternRegistry } from '../../../../../src/services/patternRegistry.js'
 
 const getKeyPatternPaths = jest.spyOn(patternRegistry, 'getKeyPatternPaths')
 const defaultProps = {
-  registryDataset: {
+  keyDefinition: {
     style: {
       fillPattern: 'dots'
     }
@@ -25,7 +25,7 @@ describe('KeySvgPattern', () => {
 
   it('calls getKeyPatternPaths with props, the mapStyle id, and the patternRegistry', () => {
     render(<KeySvgPattern {...defaultProps} />)
-    expect(getKeyPatternPaths).toHaveBeenCalledWith(defaultProps.registryDataset.style, 'default')
+    expect(getKeyPatternPaths).toHaveBeenCalledWith(defaultProps.keyDefinition.style, 'default')
   })
 
   it('renders two g elements for border and content', () => {

package/plugins/map-key/src/components/Key/KeySvgRect.jsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+import { svgProps, SVG_SIZE } from './svgProperties.js'
+
+export const KeySvgRect = ({ mapStyle, keyDefinition }) => {
+  const [strokeWidth, setStrokeWidth] = useState(2)
+  const [fill, setFill] = useState('#ff0000')
+  const [stroke, setStroke] = useState('#ff0000')
+
+  useEffect(() => {
+    const { style } = keyDefinition
+    setStrokeWidth(style.strokeWidth)
+    setFill(getValueForStyle(style.fill, mapStyle.id))
+    setStroke(getValueForStyle(style.stroke, mapStyle.id))
+  }, [mapStyle.id, keyDefinition])
+
+  return (
+    <svg {...svgProps}>
+      <rect
+        x={strokeWidth / 2}
+        y={strokeWidth / 2}
+        width={SVG_SIZE - strokeWidth}
+        height={SVG_SIZE - strokeWidth}
+        rx={strokeWidth}
+        ry={strokeWidth}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/plugins/{datasets → map-key}/src/components/Key/KeySvgRect.test.jsx

@@ -8,7 +8,7 @@ jest.mock('../../../../../src/utils/getValueForStyle', () => ({
 }))
 
 const defaultProps = {
-  registryDataset: {
+  keyDefinition: {
     style: {
       fill: '#0000ff',
       stroke: '#ff0000',

package/plugins/map-key/src/components/Key/KeySvgSymbol.jsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { svgSymbolProps } from './svgProperties.js'
+import { symbolRegistry } from '../../registry/index.js'
+
+export const KeySvgSymbol = ({ keyDefinition, mapStyle, symbolDef }) => {
+  const [resolvedSvg, setResolvedSvg] = useState(null)
+  const [viewBox, setViewBox] = useState(null)
+
+  useEffect(() => {
+    const { style } = keyDefinition
+    const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
+    const keyMapStyle = { ...mapStyle, mapColorScheme }
+    setResolvedSvg(symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle))
+    setViewBox(getSymbolViewBox(style, symbolDef))
+  }, [mapStyle, keyDefinition])
+
+  if (!(resolvedSvg && viewBox)) {
+    return null
+  }
+
+  return (
+    <svg {...svgSymbolProps} viewBox={viewBox}>
+      <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
+    </svg>
+  )
+}

package/plugins/{datasets → map-key}/src/components/Key/KeySvgSymbol.test.jsx

@@ -1,23 +1,22 @@
 import { render } from '@testing-library/react'
 import { KeySvgSymbol } from './KeySvgSymbol'
-
 import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { symbolRegistry } from '../../registry/index.js'
 
 jest.mock('../../../../../src/utils/symbolUtils.js', () => ({
   getSymbolStyleColors: jest.fn(() => ({ foreground: '#000', background: '#fff' })),
   getSymbolViewBox: jest.fn(() => '0 0 38 38')
 }))
 
-const mockResolve = jest.fn(() => '<path d="M0 0"/>')
+const mockResolve = jest.spyOn(symbolRegistry, 'resolve')
 
 const defaultProps = {
   symbolDef: { id: 'marker' },
-  registryDataset: {
+  keyDefinition: {
     style: {
       stroke: '#000000'
     }
   },
-  symbolRegistry: { resolve: mockResolve },
   mapStyle: { id: 'default' }
 }
 
@@ -45,12 +44,12 @@ describe('KeySvgSymbol', () => {
 
   it('calls getSymbolStyleColors with the dataset props', () => {
     render(<KeySvgSymbol {...defaultProps} />)
-    expect(getSymbolStyleColors).toHaveBeenCalledWith(defaultProps.registryDataset.style)
+    expect(getSymbolStyleColors).toHaveBeenCalledWith(defaultProps.keyDefinition.style)
   })
 
   it('calls getSymbolViewBox with the dataset props and symbolDef', () => {
     render(<KeySvgSymbol {...defaultProps} />)
-    expect(getSymbolViewBox).toHaveBeenCalledWith(defaultProps.registryDataset.style, defaultProps.symbolDef)
+    expect(getSymbolViewBox).toHaveBeenCalledWith(defaultProps.keyDefinition.style, defaultProps.symbolDef)
   })
 
   it('sets the viewBox from getSymbolViewBox', () => {

package/plugins/map-key/src/components/Key/MapKey.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react'
+import { getDatasetRegistry } from '../../registry/index.js'
+
+import { Key } from './Key.jsx'
+
+export function MapKey ({
+  mapState: { mapStyle },
+  pluginConfig: { noKeyItemText },
+  services: { eventBus }
+}) {
+  const [keyGroups, setKeyGroups] = useState([])
+  const [hasGroups, setHasGroups] = useState(false)
+  const [datasetRegistry, setDatasetRegistry] = useState(getDatasetRegistry())
+
+  const getKeyItems = () => {
+    const { items, hasGroups: _hasGroups } = datasetRegistry.keyItems()
+    setKeyGroups(items)
+    setHasGroups(_hasGroups)
+  }
+
+  const onMenuChanged = (menuState) => {
+    datasetRegistry.invalidateKeyItemsOnMenuStateChange(menuState)
+    getKeyItems()
+  }
+
+  useEffect(() => {
+    if (!datasetRegistry) {
+      // 'datasets:registry' is only required when the key is opened before datasets:ready
+      eventBus.requestOnce('datasets:registry', setDatasetRegistry)
+      return () => {}
+    } else {
+      getKeyItems() // populate the initial KeyItems from the datasetRegistry (which caches them)
+      eventBus
+        .on('menu:changed', onMenuChanged) // Ensure keyItems refresh when menu updates
+        .on('datasets:changed', getKeyItems) // Ensure keyItems refresh when datasets change
+      return () => eventBus
+        .off('menu:changed', onMenuChanged)
+        .off('datasets:changed', getKeyItems)
+    }
+  }, [datasetRegistry])
+
+  return (
+    <Key
+      noKeyItemText={noKeyItemText}
+      keyGroups={keyGroups}
+      hasGroups={hasGroups}
+      mapStyle={mapStyle}
+    />
+  )
+}

package/plugins/map-key/src/components/Key/MapKey.test.jsx

@@ -0,0 +1,130 @@
+import { render, act } from '@testing-library/react'
+import { MapKey } from './MapKey'
+import { getDatasetRegistry } from '../../registry/index.js'
+
+jest.mock('../../registry/index.js', () => ({
+  getDatasetRegistry: jest.fn()
+}))
+
+jest.mock('./Key.jsx', () => ({
+  Key: ({ noKeyItemText, keyGroups, hasGroups, mapStyle }) => (
+    <div
+      data-testid='key'
+      data-no-key-item-text={noKeyItemText}
+      data-has-groups={String(hasGroups)}
+      data-map-style-id={mapStyle.id}
+      data-key-groups-length={keyGroups.length}
+    />
+  )
+}))
+
+const makeEventBus = () => {
+  const eventBus = {
+    requestOnce: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn()
+  }
+  eventBus.on.mockReturnValue(eventBus)
+  eventBus.off.mockReturnValue(eventBus)
+  return eventBus
+}
+
+const makeRegistry = (items = [], hasGroups = false) => ({
+  keyItems: jest.fn().mockReturnValue({ items, hasGroups }),
+  invalidateKeyItemsOnMenuStateChange: jest.fn()
+})
+
+let eventBus
+const baseProps = () => ({
+  mapState: { mapStyle: { id: 'default' } },
+  pluginConfig: { noKeyItemText: 'No items' },
+  services: { eventBus }
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  eventBus = makeEventBus()
+})
+
+describe('MapKey', () => {
+  describe('when datasetRegistry is null', () => {
+    beforeEach(() => { getDatasetRegistry.mockReturnValue(null) })
+
+    it('passes empty items and hasGroups false to Key', () => {
+      const { getByTestId } = render(<MapKey {...baseProps()} />)
+      expect(getByTestId('key').dataset.keyGroupsLength).toBe('0')
+      expect(getByTestId('key').dataset.hasGroups).toBe('false')
+    })
+
+    it('calls requestOnce for datasets:registry', () => {
+      render(<MapKey {...baseProps()} />)
+      expect(eventBus.requestOnce).toHaveBeenCalledWith('datasets:registry', expect.any(Function))
+    })
+
+    it('populates key items when the registry arrives via requestOnce', () => {
+      render(<MapKey {...baseProps()} />)
+      const setReg = eventBus.requestOnce.mock.calls[0][1]
+      const registry = makeRegistry([{ id: '1' }, { id: '2' }], true)
+      act(() => { setReg(registry) })
+      expect(registry.keyItems).toHaveBeenCalled()
+    })
+  })
+
+  describe('when datasetRegistry exists', () => {
+    let registry
+
+    beforeEach(() => {
+      registry = makeRegistry([{ id: '1' }, { id: '2' }], true)
+      getDatasetRegistry.mockReturnValue(registry)
+    })
+
+    it('passes keyGroups and hasGroups from the registry to Key', () => {
+      const { getByTestId } = render(<MapKey {...baseProps()} />)
+      expect(getByTestId('key').dataset.keyGroupsLength).toBe('2')
+      expect(getByTestId('key').dataset.hasGroups).toBe('true')
+    })
+
+    it('registers menu:changed and datasets:changed listeners', () => {
+      render(<MapKey {...baseProps()} />)
+      expect(eventBus.on).toHaveBeenCalledWith('menu:changed', expect.any(Function))
+      expect(eventBus.on).toHaveBeenCalledWith('datasets:changed', expect.any(Function))
+    })
+
+    it('deregisters listeners on unmount', () => {
+      const { unmount } = render(<MapKey {...baseProps()} />)
+      unmount()
+      expect(eventBus.off).toHaveBeenCalledWith('menu:changed', expect.any(Function))
+      expect(eventBus.off).toHaveBeenCalledWith('datasets:changed', expect.any(Function))
+    })
+
+    it('refreshes key items when datasets:changed fires', () => {
+      render(<MapKey {...baseProps()} />)
+      const onDatasetsChanged = eventBus.on.mock.calls.find(([e]) => e === 'datasets:changed')[1]
+      act(() => { onDatasetsChanged() })
+      expect(registry.keyItems).toHaveBeenCalledTimes(2)
+    })
+
+    it('invalidates and refreshes key items when menu:changed fires', () => {
+      render(<MapKey {...baseProps()} />)
+      const onMenuChanged = eventBus.on.mock.calls.find(([e]) => e === 'menu:changed')[1]
+      const menuState = { someKey: 'value' }
+      act(() => { onMenuChanged(menuState) })
+      expect(registry.invalidateKeyItemsOnMenuStateChange).toHaveBeenCalledWith(menuState)
+      expect(registry.keyItems).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('props forwarded to Key', () => {
+    beforeEach(() => { getDatasetRegistry.mockReturnValue(null) })
+
+    it('passes noKeyItemText from pluginConfig', () => {
+      const { getByTestId } = render(<MapKey {...baseProps()} />)
+      expect(getByTestId('key').dataset.noKeyItemText).toBe('No items')
+    })
+
+    it('passes mapStyle from mapState', () => {
+      const { getByTestId } = render(<MapKey {...baseProps()} />)
+      expect(getByTestId('key').dataset.mapStyleId).toBe('default')
+    })
+  })
+})

package/plugins/{datasets → map-key}/src/components/Key/svgProperties.js

@@ -7,7 +7,7 @@ export const svgProps = {
   width: SVG_SIZE,
   height: SVG_SIZE,
   viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
-  className: 'am-c-datasets-key-symbol',
+  className: 'am-c-map-key-symbol',
   'aria-hidden': 'true',
   focusable: 'false'
 }
@@ -16,5 +16,5 @@ export const svgSymbolProps = {
   ...svgProps,
   width: SVG_SYMBOL_SIZE,
   height: SVG_SYMBOL_SIZE,
-  className: 'am-c-datasets-key-symbol am-c-datasets-key-symbol--point'
+  className: 'am-c-map-key-symbol am-c-map-key-symbol--point'
 }

package/plugins/{datasets → map-key}/src/components/Key/svgProperties.test.js

@@ -25,7 +25,7 @@ describe('svgProps', () => {
   })
 
   it('has the correct className', () => {
-    expect(svgProps.className).toBe('am-c-datasets-key-symbol')
+    expect(svgProps.className).toBe('am-c-map-key-symbol')
   })
 
   it('is aria-hidden', () => {
@@ -55,7 +55,7 @@ describe('svgSymbolProps', () => {
   })
 
   it('className includes the base class and a modifier', () => {
-    expect(svgSymbolProps.className).toContain('am-c-datasets-key-symbol')
+    expect(svgSymbolProps.className).toContain('am-c-map-key-symbol')
     expect(svgSymbolProps.className).toContain('--point')
   })
 })

package/plugins/map-key/src/index.js

@@ -0,0 +1,13 @@
+import './mapKey.scss'
+
+export default function createPlugin (options = {}) {
+  return {
+    noKeyItemText: 'No features displayed',
+    ...options,
+    id: 'mapKey',
+    load: async () => {
+      const module = (await import(/* webpackChunkName: "im-map-key-plugin" */ './manifest.js')).manifest
+      return module
+    }
+  }
+}

package/plugins/map-key/src/index.test.js

@@ -0,0 +1,31 @@
+import createPlugin from './index.js'
+
+jest.mock('./mapKey.scss', () => {})
+jest.mock('./manifest.js', () => ({ manifest: { InitComponent: 'MapKeyInit', panels: [] } }))
+
+describe('createPlugin', () => {
+  it('returns the mapKey id', () => {
+    expect(createPlugin().id).toBe('mapKey')
+  })
+
+  it('id cannot be overridden by options', () => {
+    expect(createPlugin({ id: 'other' }).id).toBe('mapKey')
+  })
+
+  it('returns the default noKeyItemText', () => {
+    expect(createPlugin().noKeyItemText).toBe('No features displayed')
+  })
+
+  it('allows noKeyItemText to be overridden', () => {
+    expect(createPlugin({ noKeyItemText: 'Nothing here' }).noKeyItemText).toBe('Nothing here')
+  })
+
+  it('merges additional options into the returned object', () => {
+    expect(createPlugin({ custom: true }).custom).toBe(true)
+  })
+
+  it('load() resolves to the manifest', async () => {
+    const result = await createPlugin().load()
+    expect(result).toEqual({ InitComponent: 'MapKeyInit', panels: [] })
+  })
+})

package/plugins/map-key/src/initialise/MapKeyInit.jsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+import { setDatasetRegistry } from '../registry/getDatasetRegistry.js'
+
+// additional possible params here are: pluginConfig, pluginState, appState, mapProvider,
+export function MapKeyInit ({ mapState, services }) {
+  const { eventBus } = services
+
+  useEffect(() => {
+    if (!mapState.isMapReady) {
+      return
+    }
+    // Request a handle on the datasetsRegistry singleton
+    eventBus.requestOnce('datasets:registry', setDatasetRegistry)
+  }, [mapState.isMapReady])
+}