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

package/plugins/{datasets → map-key}/src/components/Key/Key.module.scss

@@ -1,21 +1,28 @@
+
 // When groups are present, every direct child gets a border-top
-.im-c-datasets-key > *:first-child {
+.im-c-map-key > *:first-child {
   padding-top: 5px;
 
-  .im-c-datasets-key__group-heading {
+  .im-c-map-key__group-heading {
     padding-top: 0;
   }
 }
 
-.im-c-datasets-key--has-groups > *:not(:first-child) {
+.im-c-map-key--has-groups > *:not(:first-child) {
   border-top: 1px solid var(--button-hover-color);
 }
 
-.im-c-datasets-key__group:not(:last-child) {
+.im-c-map-key__group:not(:last-child) {
   padding-bottom: 5px;
 }
 
-.im-c-datasets-key__group-heading {
+.im-c-map-key__empty-message {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--foreground-color);
+}
+
+.im-c-map-key__group-heading {
   padding-top: 15px;
   padding-bottom: 10px;
   margin: 0;
@@ -24,7 +31,7 @@
   color: var(--foreground-color);
 }
 
-.im-c-datasets-key__item {
+.im-c-map-key__item {
   display: flex;
   align-items: start;
   padding-top: 10px;
@@ -32,38 +39,38 @@
   font-size: 1rem;
 
   // First item inside a group — heading already provides top spacing
-  .im-c-datasets-key__group &:first-child {
+  .im-c-map-key__group &:first-child {
     padding-top: 0;
   }
 }
 
-.im-c-datasets-key--has-groups > .im-c-datasets-key__item:not(:first-child) {
+.im-c-map-key--has-groups > .im-c-map-key__item:not(:first-child) {
   padding-top: 15px;
 }
 
-.im-c-datasets-key--has-groups > .im-c-datasets-key__item {
+.im-c-map-key--has-groups > .im-c-map-key__item {
   padding-bottom: 15px;
 }
 
-.im-c-datasets-key__group .im-c-datasets-key__item {
+.im-c-map-key__group .im-c-map-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 {
+.im-c-map-key > .im-c-map-key__item:last-child,
+.im-c-map-key__group:last-child .im-c-map-key__item:last-child {
   padding-bottom: 5px;
 }
 
 // Symbol
 
-.am-c-datasets-key-symbol {
+.am-c-map-key-symbol {
   position: relative;
   flex-shrink: 0;
   margin: 0 13px 0 3px;
 }
 
-.am-c-datasets-key-symbol--point {
+.am-c-map-key-symbol--point {
   margin: -12px 1px -12px -9px;
 }

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

@@ -0,0 +1,73 @@
+import { render, screen } from '@testing-library/react'
+import { Key } from './Key'
+
+jest.mock('./EmptyKey.jsx', () => ({
+  EmptyKey: ({ text }) => <div data-testid='empty-key'>{text}</div>
+}))
+
+jest.mock('./KeyItem.jsx', () => ({
+  KeyItem: () => <div data-testid='key-item' />
+}))
+
+jest.mock('./KeyGroupItem.jsx', () => ({
+  KeyGroupItem: ({ label }) => <div data-testid='key-group-item'>{label}</div>
+}))
+
+const mapStyle = { id: 'default' }
+
+describe('Key', () => {
+  it('renders EmptyKey when keyGroups is undefined', () => {
+    render(<Key mapStyle={mapStyle} />)
+    expect(screen.getByTestId('empty-key')).toBeTruthy()
+  })
+
+  it('renders EmptyKey when keyGroups is an empty array', () => {
+    render(<Key mapStyle={mapStyle} keyGroups={[]} />)
+    expect(screen.getByTestId('empty-key')).toBeTruthy()
+  })
+
+  it('passes noKeyItemText to EmptyKey', () => {
+    render(<Key mapStyle={mapStyle} noKeyItemText='No items' />)
+    expect(screen.getByText('No items')).toBeTruthy()
+  })
+
+  it('renders the wrapper div with the base class', () => {
+    const { container } = render(<Key mapStyle={mapStyle} keyGroups={[{ id: '1', keyDefinition: { id: '1' } }]} />)
+    expect(container.querySelector('.im-c-map-key')).toBeTruthy()
+  })
+
+  it('adds the groups class when hasGroups is true', () => {
+    const { container } = render(<Key mapStyle={mapStyle} keyGroups={[{ id: '1', keyDefinition: { id: '1' } }]} hasGroups />)
+    expect(container.querySelector('.im-c-map-key--has-groups')).toBeTruthy()
+  })
+
+  it('does not add the groups class when hasGroups is false', () => {
+    const { container } = render(<Key mapStyle={mapStyle} keyGroups={[{ id: '1', keyDefinition: { id: '1' } }]} hasGroups={false} />)
+    expect(container.querySelector('.im-c-map-key--has-groups')).toBeNull()
+  })
+
+  it('renders KeyItem for a non-group item', () => {
+    render(<Key mapStyle={mapStyle} keyGroups={[{ id: '1', keyDefinition: { id: '1' } }]} />)
+    expect(screen.getByTestId('key-item')).toBeTruthy()
+  })
+
+  it('renders KeyGroupItem for a group item', () => {
+    render(<Key mapStyle={mapStyle} keyGroups={[{ id: '1', type: 'group', groupLabel: 'Group A', keyDefinitions: [] }]} />)
+    expect(screen.getByTestId('key-group-item')).toBeTruthy()
+  })
+
+  it('passes groupLabel to KeyGroupItem', () => {
+    render(<Key mapStyle={mapStyle} keyGroups={[{ id: '1', type: 'group', groupLabel: 'My Group', keyDefinitions: [] }]} />)
+    expect(screen.getByText('My Group')).toBeTruthy()
+  })
+
+  it('renders mixed group and non-group items', () => {
+    const keyGroups = [
+      { id: '1', keyDefinition: { id: '1' } },
+      { id: '2', type: 'group', groupLabel: 'Group A', keyDefinitions: [] }
+    ]
+    render(<Key mapStyle={mapStyle} keyGroups={keyGroups} />)
+    expect(screen.getAllByTestId('key-item')).toHaveLength(1)
+    expect(screen.getAllByTestId('key-group-item')).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,16 @@
+import { KeyItem } from './KeyItem.jsx'
+
+export const KeyGroupItem = ({ headingId, label, keyDefinitions, mapStyle }) => {
+  return (
+    <section className='im-c-map-key__group' aria-labelledby={headingId}>
+      <h3 id={headingId} className='im-c-map-key__group-heading'>{label}</h3>
+      {keyDefinitions.map(keyDefinition =>
+        <KeyItem
+          key={`${keyDefinition.id}`}
+          keyDefinition={keyDefinition}
+          mapStyle={mapStyle}
+        />
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react'
+import { KeyGroupItem } from './KeyGroupItem'
+
+jest.mock('./KeyItem.jsx', () => ({
+  KeyItem: ({ keyDefinition }) => <div data-testid='key-item'>{keyDefinition.id}</div>
+}))
+
+const mapStyle = { id: 'default' }
+
+const baseProps = {
+  headingId: 'key-heading-1',
+  label: 'My Group',
+  keyDefinitions: [],
+  mapStyle
+}
+
+describe('KeyGroupItem', () => {
+  it('renders a section with the group class', () => {
+    const { container } = render(<KeyGroupItem {...baseProps} />)
+    expect(container.querySelector('.im-c-map-key__group')).toBeTruthy()
+  })
+
+  it('sets aria-labelledby to headingId on the section', () => {
+    const { container } = render(<KeyGroupItem {...baseProps} />)
+    expect(container.querySelector('section').getAttribute('aria-labelledby')).toBe('key-heading-1')
+  })
+
+  it('renders the heading with the correct id', () => {
+    render(<KeyGroupItem {...baseProps} />)
+    expect(document.getElementById('key-heading-1')).toBeTruthy()
+  })
+
+  it('renders the heading with the group-heading class', () => {
+    const { container } = render(<KeyGroupItem {...baseProps} />)
+    expect(container.querySelector('.im-c-map-key__group-heading')).toBeTruthy()
+  })
+
+  it('renders the label text in the heading', () => {
+    render(<KeyGroupItem {...baseProps} />)
+    expect(screen.getByText('My Group')).toBeTruthy()
+  })
+
+  it('renders a KeyItem for each keyDefinition', () => {
+    const keyDefinitions = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
+    render(<KeyGroupItem {...baseProps} keyDefinitions={keyDefinitions} />)
+    expect(screen.getAllByTestId('key-item')).toHaveLength(3)
+  })
+
+  it('renders no KeyItems when keyDefinitions is empty', () => {
+    render(<KeyGroupItem {...baseProps} keyDefinitions={[]} />)
+    expect(screen.queryAllByTestId('key-item')).toHaveLength(0)
+  })
+})

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

@@ -0,0 +1,26 @@
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+import { KeySvg } from './KeySvg.jsx'
+
+export const KeyItem = ({ keyDefinition, mapStyle }) => {
+  // Pure derivations of props — computed directly on every render rather than staged through
+  // useState/useEffect, so there's no post-mount frame where the label/description are blank
+  // (every panel reopen mounts this fresh, so that frame was visible as a flicker).
+  const label = keyDefinition.label
+  const symbolDescription = getValueForStyle(keyDefinition.symbolDescription, mapStyle.id)
+
+  return (
+    <dl className='im-c-map-key__item'>
+      <dt className='im-c-map-key__item-symbol'>
+        <KeySvg keyDefinition={keyDefinition} mapStyle={mapStyle} />
+      </dt>
+      <dd className='im-c-map-key__item-label'>
+        {label}
+        {symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({symbolDescription})
+          </span>
+        )}
+      </dd>
+    </dl>
+  )
+}

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,41 @@
+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'
+
+// Pure derivation of keyDefinition — computed directly during render (see KeyItem.jsx for why:
+// staging this through useState/useEffect meant every fresh mount painted a blank symbol first).
+const getSymbolShape = (keyDefinition) => {
+  if (!keyDefinition) {
+    return { symbolShape: null, symbolDef: null }
+  }
+  const { hasSymbol, hasPattern, style } = keyDefinition
+  if (hasSymbol) {
+    const symbolDef = symbolRegistry.getSymbolDef(style)
+    return { symbolShape: symbolDef ? 'symbol' : 'rect', symbolDef }
+  }
+  if (hasPattern) {
+    return { symbolShape: 'pattern', symbolDef: null }
+  }
+  if (style.keySymbolShape === 'line') {
+    return { symbolShape: 'line', symbolDef: null }
+  }
+  return { symbolShape: 'rect', symbolDef: null }
+}
+
+export const KeySvg = ({ keyDefinition, mapStyle }) => {
+  const { symbolShape, symbolDef } = getSymbolShape(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,22 @@
+import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgLine = ({ mapStyle, keyDefinition }) => {
+  const { style } = keyDefinition
+  const strokeWidth = style.strokeWidth
+  const stroke = getValueForStyle(style.stroke, mapStyle.id)
+
+  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/{datasets → map-key}/src/components/Key/KeySvgPattern.jsx

@@ -1,9 +1,14 @@
 import { svgProps } from './svgProperties.js'
+import { patternRegistry } from '../../registry/index.js'
 const PATTERN_INSET = 2
 
-export const KeySvgPattern = ({ patternRegistry, registryDataset, mapStyle }) => {
-  const { style } = registryDataset
+export const KeySvgPattern = ({ keyDefinition, mapStyle }) => {
+  const { style } = keyDefinition
   const paths = patternRegistry.getKeyPatternPaths(style, mapStyle.id)
+
+  if (!paths) {
+    return null
+  }
   return (
     <svg {...svgProps}>
       <g dangerouslySetInnerHTML={{ __html: paths.border }} />

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', () => {
@@ -52,4 +52,10 @@ describe('KeySvgPattern', () => {
     const { container } = render(<KeySvgPattern {...defaultProps} />)
     expect(container.querySelector('#content-el')).toBeTruthy()
   })
+
+  it('renders nothing when getKeyPatternPaths returns falsy', () => {
+    getKeyPatternPaths.mockReturnValue(null)
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.firstChild).toBeNull()
+  })
 })

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

@@ -0,0 +1,26 @@
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+import { svgProps, SVG_SIZE } from './svgProperties.js'
+
+export const KeySvgRect = ({ mapStyle, keyDefinition }) => {
+  const { style } = keyDefinition
+  const strokeWidth = style.strokeWidth
+  const fill = getValueForStyle(style.fill, mapStyle.id)
+  const stroke = getValueForStyle(style.stroke, mapStyle.id)
+
+  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/{datasets → map-key}/src/components/Key/KeySvgSymbol.jsx

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

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', () => {
@@ -77,4 +76,16 @@ describe('KeySvgSymbol', () => {
     const callArg = mockResolve.mock.calls[0][2]
     expect(callArg.mapColorScheme).toBe('dark')
   })
+
+  it('renders nothing when resolve returns falsy', () => {
+    mockResolve.mockReturnValue(null)
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when getSymbolViewBox returns falsy', () => {
+    getSymbolViewBox.mockReturnValue(null)
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.firstChild).toBeNull()
+  })
 })