@defra/interactive-map 0.0.22-alpha → 0.0.24-alpha

package/src/App/components/KeyboardHelp/KeyboardHelp.test.jsx

@@ -1,9 +1,10 @@
 // src/components/KeyboardHelp.test.jsx
 import React from 'react'
-import { render, screen, within } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { KeyboardHelp } from './KeyboardHelp'
 import { getKeyboardShortcuts } from '../../registry/keyboardShortcutRegistry.js'
 import { useConfig } from '../../store/configContext'
+import { useApp } from '../../store/appContext.js'
 
 jest.mock('../../registry/keyboardShortcutRegistry.js', () => ({
   getKeyboardShortcuts: jest.fn()
@@ -13,51 +14,159 @@ jest.mock('../../store/configContext', () => ({
   useConfig: jest.fn()
 }))
 
-describe('KeyboardHelp', () => {
+jest.mock('../../store/appContext.js', () => ({
+  useApp: jest.fn()
+}))
+
+jest.mock('../../hooks/useResizeObserver.js', () => ({ useResizeObserver: jest.fn() }))
+
+const SELECT_FEATURES_GROUP = 'Select features'
+const DEFAULT_GROUP = 'Navigate'
+
+// Ungrouped — mirrors real core shortcuts (no group, plain context)
+const VIEWPORT_SHORTCUTS = [
+  { id: '1', context: 'viewport', title: 'Move', command: '<kbd>↑</kbd>' },
+  { id: '2', context: 'viewport', title: 'Zoom', command: '<kbd>+</kbd>' }
+]
+
+const LISTBOX_SHORTCUTS = [
+  { id: '3', group: SELECT_FEATURES_GROUP, context: 'listbox', title: 'Navigate', command: '<kbd>↓</kbd>' },
+  { id: '4', group: SELECT_FEATURES_GROUP, context: 'listbox', title: 'Select', command: '<kbd>Enter</kbd>' }
+]
+
+const GLOBAL_SHORTCUTS = [
+  { id: '5', context: 'global', title: 'Help', command: '<kbd>Alt</kbd>' }
+]
+
+beforeEach(() => {
+  useConfig.mockReturnValue({})
+  useApp.mockReturnValue({ listboxIsActive: false })
+})
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+// ─── flat list (single group) ─────────────────────────────────────────────────
+
+describe('KeyboardHelp — flat list', () => {
+  it('renders a flat list with no tabs when all shortcuts share one group', () => {
+    getKeyboardShortcuts.mockReturnValue(VIEWPORT_SHORTCUTS)
+    render(<KeyboardHelp />)
+    expect(document.querySelector('.im-c-keyboard-help')).toBeInTheDocument()
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
+    expect(screen.getByText('Move')).toBeInTheDocument()
+    expect(screen.getByText('Zoom')).toBeInTheDocument()
+  })
+
+  it('renders a flat list with no tabs when there are no shortcuts', () => {
+    getKeyboardShortcuts.mockReturnValue([])
+    render(<KeyboardHelp />)
+    expect(document.querySelector('.im-c-keyboard-help')).toBeInTheDocument()
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
+  })
+
+  it('renders command HTML', () => {
+    getKeyboardShortcuts.mockReturnValue(VIEWPORT_SHORTCUTS)
+    render(<KeyboardHelp />)
+    expect(screen.getByText('↑')).toBeInTheDocument()
+  })
+})
+
+// ─── tab UI (multiple groups) ─────────────────────────────────────────────────
+
+describe('KeyboardHelp — tabs', () => {
+  const allShortcuts = [...GLOBAL_SHORTCUTS, ...VIEWPORT_SHORTCUTS, ...LISTBOX_SHORTCUTS]
+
   beforeEach(() => {
-    useConfig.mockReturnValue({})
+    useApp.mockReturnValue({ listboxIsActive: true })
+  })
+
+  it('renders a tab for each group when listboxIsActive is true', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
+    render(<KeyboardHelp />)
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: DEFAULT_GROUP })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: SELECT_FEATURES_GROUP })).toBeInTheDocument()
+  })
+
+  it('defaults to first viewport-context tab when context is viewport', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
+    render(<KeyboardHelp context='viewport' />)
+    expect(screen.getByRole('tab', { name: DEFAULT_GROUP })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByText('Move')).toBeInTheDocument()
   })
 
-  afterEach(() => {
-    jest.clearAllMocks()
+  it('defaults to first listbox-context tab when context is listbox', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
+    render(<KeyboardHelp context='listbox' />)
+    expect(screen.getByRole('tab', { name: SELECT_FEATURES_GROUP })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByText('Select')).toBeInTheDocument()
   })
 
-  it('renders grouped keyboard shortcuts correctly', () => {
+  it('falls back to first global-context tab when no exact match exists', () => {
+    getKeyboardShortcuts.mockReturnValue([...GLOBAL_SHORTCUTS, ...LISTBOX_SHORTCUTS])
+    render(<KeyboardHelp context='viewport' />)
+    expect(screen.getByRole('tab', { name: DEFAULT_GROUP })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('falls back to first tab when no exact or global-context match exists', () => {
     getKeyboardShortcuts.mockReturnValue([
-      { id: '1', group: 'Navigation', title: 'Go Home', command: '<kbd>H</kbd>' },
-      { id: '2', group: 'Navigation', title: 'Search', command: '<kbd>/</kbd>' },
-      { id: '3', group: 'Editing', title: 'Copy', command: '<kbd>Ctrl+C</kbd>' }
+      { id: 'a', group: 'Group A', context: 'listbox', title: 'A', command: '<kbd>A</kbd>' },
+      { id: 'b', group: 'Group B', context: 'listbox', title: 'B', command: '<kbd>B</kbd>' }
     ])
+    render(<KeyboardHelp context='viewport' />)
+    expect(screen.getByRole('tab', { name: 'Group A' })).toHaveAttribute('aria-selected', 'true')
+  })
 
-    render(<KeyboardHelp />)
+  it('shows only the active tab panel content', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
+    render(<KeyboardHelp context='viewport' />)
+    expect(screen.getByText('Move')).toBeInTheDocument()
+    expect(screen.queryByText('Select')).not.toBeInTheDocument()
+  })
 
-    // outer container
-    const container = document.querySelector('.im-c-keyboard-help')
-    expect(container).toBeInTheDocument()
+  it('switches tab and content on click', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
+    render(<KeyboardHelp context='viewport' />)
+    fireEvent.click(screen.getByRole('tab', { name: SELECT_FEATURES_GROUP }))
+    expect(screen.getByRole('tab', { name: SELECT_FEATURES_GROUP })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByText('Select')).toBeInTheDocument()
+    expect(screen.queryByText('Move')).not.toBeInTheDocument()
+  })
 
-    // Navigation group contains its shortcuts
-    const navGroup = screen.getByText('Go Home').closest('.im-c-keyboard-help__group')
-    expect(navGroup).toBeInTheDocument()
-    expect(within(navGroup).getByText('Search')).toBeInTheDocument()
-    expect(within(navGroup).getByText('Go Home')).toBeInTheDocument()
+  it('ungrouped shortcuts default to Navigate group', () => {
+    getKeyboardShortcuts.mockReturnValue([
+      { id: 'x', title: 'No group', command: '<kbd>X</kbd>' },
+      ...LISTBOX_SHORTCUTS
+    ])
+    render(<KeyboardHelp />)
+    fireEvent.click(screen.getByRole('tab', { name: DEFAULT_GROUP }))
+    expect(screen.getByText('No group')).toBeInTheDocument()
+  })
+})
 
-    // Editing group contains its shortcut
-    const editGroup = screen.getByText('Copy').closest('.im-c-keyboard-help__group')
-    expect(editGroup).toBeInTheDocument()
+// ─── listboxIsActive filtering ────────────────────────────────────────────────
 
-    // command HTML is injected
-    expect(screen.getByText('H')).toBeInTheDocument()
-    expect(screen.getByText('/')).toBeInTheDocument()
-    expect(screen.getByText('Ctrl+C')).toBeInTheDocument()
-  })
+describe('KeyboardHelp — listboxIsActive filtering', () => {
+  const allShortcuts = [...GLOBAL_SHORTCUTS, ...VIEWPORT_SHORTCUTS, ...LISTBOX_SHORTCUTS]
 
-  it('renders nothing if there are no shortcuts', () => {
-    getKeyboardShortcuts.mockReturnValue([])
+  it('hides the Select features tab when listboxIsActive is false', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
+    render(<KeyboardHelp />)
+    expect(screen.queryByRole('tab', { name: SELECT_FEATURES_GROUP })).not.toBeInTheDocument()
+  })
 
+  it('still shows ungrouped shortcuts when listboxIsActive is false', () => {
+    getKeyboardShortcuts.mockReturnValue(allShortcuts)
     render(<KeyboardHelp />)
+    expect(screen.getByText('Move')).toBeInTheDocument()
+  })
 
-    const container = document.querySelector('.im-c-keyboard-help')
-    expect(container).toBeInTheDocument()
-    expect(container.querySelectorAll('.im-c-keyboard-help__group')).toHaveLength(0)
+  it('renders as a flat list when only ungrouped shortcuts remain after filtering', () => {
+    getKeyboardShortcuts.mockReturnValue([...VIEWPORT_SHORTCUTS, ...LISTBOX_SHORTCUTS])
+    render(<KeyboardHelp />)
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
+    expect(screen.getByText('Move')).toBeInTheDocument()
   })
 })

package/src/App/components/Markers/LabelMarker.jsx

@@ -0,0 +1,14 @@
+const LabelMarker = ({ marker, mapId, markerRef }) => ( // NOSONAR: project does not use PropTypes
+  <div
+    ref={markerRef(marker.id)}
+    id={`${mapId}-marker-${marker.id}`}
+    className='im-c-marker-wrapper im-c-marker-wrapper--label'
+    style={{ display: marker.isVisible ? 'block' : 'none' }}
+  >
+    <div role='note' className='im-c-marker__label im-c-marker__label--standalone'>
+      {marker.label}
+    </div>
+  </div>
+)
+
+export default LabelMarker

package/src/App/components/Markers/LabelMarker.test.jsx

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react'
+import LabelMarker from './LabelMarker.jsx'
+
+const makeMarker = (overrides = {}) => ({ id: 'lbl-1', isVisible: true, label: 'Test Label', ...overrides })
+const markerRef = () => () => {}
+
+describe('LabelMarker', () => {
+  it('renders the label text', () => {
+    const { getByText } = render(<LabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} />)
+    expect(getByText('Test Label')).toBeTruthy()
+  })
+
+  it('has wrapper id of mapId-marker-markerId', () => {
+    const { container } = render(<LabelMarker marker={makeMarker()} mapId='my-map' markerRef={markerRef} />)
+    expect(container.querySelector('.im-c-marker-wrapper').getAttribute('id')).toBe('my-map-marker-lbl-1')
+  })
+
+  it('has wrapper class im-c-marker-wrapper--label', () => {
+    const { container } = render(<LabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} />)
+    expect(container.querySelector('.im-c-marker-wrapper')).toHaveClass('im-c-marker-wrapper--label')
+  })
+
+  it('label element has role note and standalone class', () => {
+    const { container } = render(<LabelMarker marker={makeMarker()} mapId='map' markerRef={markerRef} />)
+    const label = container.querySelector('.im-c-marker__label--standalone')
+    expect(label.getAttribute('role')).toBe('note')
+  })
+
+  it.each([
+    [true, 'block'],
+    [false, 'none']
+  ])('display is %s when isVisible=%s', (isVisible, display) => {
+    const { container } = render(<LabelMarker marker={makeMarker({ isVisible })} mapId='map' markerRef={markerRef} />)
+    expect(container.querySelector('.im-c-marker-wrapper')).toHaveStyle({ display })
+  })
+})

package/src/App/components/Markers/Markers.jsx

@@ -1,59 +1,51 @@
 import { useEffect, useRef, useState } from 'react'
 import { useMarkers } from '../../hooks/useMarkersAPI.js'
+import { useMarkerCursor } from '../../hooks/useMarkerCursor.js'
 import { useConfig } from '../../store/configContext.js'
 import { useMap } from '../../store/mapContext.js'
 import { useService } from '../../store/serviceContext.js'
-import { stringToKebab } from '../../../utils/stringToKebab.js'
 import { scaleFactor } from '../../../config/appConfig.js'
+import { isStandaloneLabel } from '../../../utils/symbolUtils.js'
+import { EVENTS } from '../../../config/events.js'
+import LabelMarker from './LabelMarker.jsx'
+import SymbolLabelMarker from './SymbolLabelMarker.jsx'
+import SymbolMarker from './SymbolMarker.jsx'
 
 // Marker properties handled internally — excluded from style value resolution
-const INTERNAL_KEYS = new Set(['id', 'coords', 'x', 'y', 'isVisible', 'symbol', 'symbolSvgContent', 'viewBox', 'anchor', 'selectedColor', 'selectedWidth'])
+const INTERNAL_KEYS = new Set(['id', 'coords', 'x', 'y', 'isVisible', 'symbol', 'symbolSvgContent', 'viewBox', 'anchor', 'selectedColor', 'label', 'showLabel'])
 
 const resolveSymbolDef = (marker, defaults, symbolRegistry) => {
   const svgContent = marker.symbolSvgContent || defaults.symbolSvgContent
-  // Inline symbolSvgContent takes precedence over a registered symbol,
-  // cascading through marker → constructor defaults
   return svgContent
     ? { svg: svgContent }
     : symbolRegistry.get(marker.symbol || defaults.symbol)
 }
 
 const resolveViewBox = (marker, defaults, symbolDef) =>
-  marker.viewBox || defaults.viewBox || symbolDef?.viewBox || '0 0 38 38'
+  marker.viewBox || defaults.viewBox || symbolDef?.viewBox || '0 0 44 44'
 
 const resolveAnchor = (marker, defaults, symbolDef) =>
   marker.anchor ?? defaults.anchor ?? symbolDef?.anchor ?? [0.5, 0.5]
 
-/**
- * When the interact plugin is active, watch mousemove to set cursor:pointer whenever
- * the mouse is over one of the marker SVG elements (which are pointer-events:none).
- */
-const useMarkerCursor = (markers, interactActive, viewportRef) => {
-  useEffect(() => {
-    if (!interactActive) {
-      return undefined
-    }
-    const viewport = viewportRef.current
-    if (!viewport) {
-      return undefined
-    }
-    const onMove = (e) => {
-      const hit = markers.items.some(marker => {
-        const el = markers.markerRefs?.get(marker.id)
-        if (!el) {
-          return false
-        }
-        const { left, top, right, bottom } = el.getBoundingClientRect()
-        return e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom
-      })
-      viewport.style.cursor = hit ? 'pointer' : ''
-    }
-    viewport.addEventListener('mousemove', onMove)
-    return () => {
-      viewport.removeEventListener('mousemove', onMove)
-      viewport.style.cursor = ''
-    }
-  }, [markers, interactActive, viewportRef])
+const resolveSymbolProps = (marker, defaults, symbolRegistry, mapStyle, mapSize, isSelected, isActive) => {
+  const symbolDef = resolveSymbolDef(marker, defaults, symbolRegistry)
+  const styleValues = Object.fromEntries(
+    Object.entries(marker).filter(([k]) => !INTERNAL_KEYS.has(k))
+  )
+  let resolvedSvg
+  if (isActive) {
+    resolvedSvg = symbolRegistry.resolveActive(symbolDef, styleValues, mapStyle)
+  } else if (isSelected) {
+    resolvedSvg = symbolRegistry.resolveSelected(symbolDef, styleValues, mapStyle)
+  } else {
+    resolvedSvg = symbolRegistry.resolve(symbolDef, styleValues, mapStyle)
+  }
+  const viewBox = resolveViewBox(marker, defaults, symbolDef)
+  const [,, svgWidth, svgHeight] = viewBox.split(' ').map(Number)
+  const anchor = resolveAnchor(marker, defaults, symbolDef)
+  const shapeId = marker.symbol || defaults.symbol
+  const scale = scaleFactor[mapSize] ?? 1
+  return { resolvedSvg, viewBox, anchor, shapeId, scaledWidth: svgWidth * scale, scaledHeight: svgHeight * scale }
 }
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
@@ -66,16 +58,20 @@ export const Markers = () => {
 
   const [canSelectMarker, setCanSelectMarker] = useState(false)
   const [selectedMarkers, setSelectedMarkers] = useState([])
+  const [activeMarkerId, setActiveMarkerId] = useState(null)
   const viewportRef = useRef(null)
 
   useEffect(() => {
     const handleActive = ({ active, interactionModes = [] }) => setCanSelectMarker(active && interactionModes.includes('selectMarker'))
     const handleSelectionChange = ({ selectedMarkers: next = [] }) => setSelectedMarkers(next)
+    const handleSetActive = ({ id: markerId }) => setActiveMarkerId(markerId)
     eventBus.on('interact:active', handleActive)
     eventBus.on('interact:selectionchange', handleSelectionChange)
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_FEATURE, handleSetActive)
     return () => {
       eventBus.off('interact:active', handleActive)
       eventBus.off('interact:selectionchange', handleSelectionChange)
+      eventBus.off(EVENTS.MAP_SET_ACTIVE_FEATURE, handleSetActive)
     }
   }, [eventBus])
 
@@ -95,47 +91,20 @@ export const Markers = () => {
   return (
     <>
       {markers.items.map(marker => {
-        const symbolDef = resolveSymbolDef(marker, defaults, symbolRegistry)
-        // selectedColor comes from mapStyle — not per-marker; selectedWidth stays in cascade
-        const styleValues = Object.fromEntries(
-          Object.entries(marker).filter(([k]) => !INTERNAL_KEYS.has(k))
-        )
         const isSelected = selectedMarkers.includes(marker.id)
-        const resolvedSvg = isSelected
-          ? symbolRegistry.resolveSelected(symbolDef, styleValues, mapStyle)
-          : symbolRegistry.resolve(symbolDef, styleValues, mapStyle)
-
-        const viewBox = resolveViewBox(marker, defaults, symbolDef)
-        const [,, svgWidth, svgHeight] = viewBox.split(' ').map(Number)
-        const anchor = resolveAnchor(marker, defaults, symbolDef)
-        const shapeId = marker.symbol || defaults.symbol
-        const scale = scaleFactor[mapSize] ?? 1
-        const scaledWidth = svgWidth * scale
-        const scaledHeight = svgHeight * scale
-
-        return (
-          <svg
-            key={marker.id}
-            ref={markerRef(marker.id)}
-            id={`${id}-marker-${marker.id}`}
-            className={[
-              'im-c-marker',
-              `im-c-marker--${stringToKebab(shapeId)}`,
-              isSelected && 'im-c-marker--selected'
-            ].filter(Boolean).join(' ')}
-            width={scaledWidth}
-            height={scaledHeight}
-            viewBox={viewBox}
-            overflow='visible'
-            style={{
-              display: marker.isVisible ? 'block' : 'none',
-              marginLeft: `${-anchor[0] * scaledWidth}px`,
-              marginTop: `${-anchor[1] * scaledHeight}px`
-            }}
-          >
-            <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
-          </svg>
-        )
+        const isActive = marker.id === activeMarkerId
+
+        if (isStandaloneLabel(marker)) {
+          return <LabelMarker key={marker.id} marker={marker} mapId={id} markerRef={markerRef} />
+        }
+
+        const symbolProps = resolveSymbolProps(marker, defaults, symbolRegistry, mapStyle, mapSize, isSelected, isActive)
+
+        if (marker.showLabel && marker.label) {
+          return <SymbolLabelMarker key={marker.id} marker={marker} mapId={id} markerRef={markerRef} isSelected={isSelected} symbolProps={symbolProps} />
+        }
+
+        return <SymbolMarker key={marker.id} marker={marker} mapId={id} markerRef={markerRef} isSelected={isSelected} symbolProps={symbolProps} />
       })}
     </>
   )

package/src/App/components/Markers/Markers.module.scss

@@ -3,6 +3,16 @@
 // ===================================================
 
 // 1. Base styles
+
+// Wrapper for all markers — absolutely positioned at origin so marker children
+// position correctly and parentElement.getBoundingClientRect() matches the viewport origin
+.im-c-markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
 .im-c-marker {
   position: absolute;
   left: 0;
@@ -10,3 +20,51 @@
   pointer-events: none;
 }
 
+// Wrapper used when a marker has an html label, or for standalone labels.
+// Takes the same absolute positioning as .im-c-marker.
+.im-c-marker-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+// SVG inside a wrapper — fills wrapper dimensions, no independent positioning
+.im-c-marker__svg {
+  display: block;
+  pointer-events: none;
+}
+
+// Label rendered above a marker symbol
+.im-c-marker__label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  pointer-events: none;
+
+  color: var(--tooltip-foreground-color);
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  padding: var(--tooltip-padding);
+  font-size: var(--tooltip-font-size);
+  line-height: 1.2;
+}
+
+// Standalone label — no symbol, coordinate is where the arrow points.
+// Label body sits above (x, y); arrow points down to (x, y).
+.im-c-marker__label--standalone {
+  bottom: 0;
+}
+
+.im-c-marker__label--standalone::after {
+  content: '';
+  position: absolute;
+  top: calc(100% - 1px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: calc(var(--tooltip-arrow-size) - 2px) solid transparent;
+  border-top-color: var(--tooltip-background-color);
+}
+