@defra/interactive-map 0.0.15-alpha → 0.0.16-alpha

package/providers/maplibre/src/utils/queryFeatures.js

@@ -30,7 +30,7 @@ const isPointInPolygon = (point, ring) => {
     const intersectX = ((xj - xi) * (py - yi)) / (yj - yi) + xi
 
     if (px < intersectX) {
-      inside = !inside;
+      inside = !inside
     }
   }
   return inside
@@ -43,7 +43,7 @@ const getMinDistToGeometry = (map, point, geometry) => {
   const { coordinates: coords, type } = geometry
   let minSqDist = Infinity
   const getScreenPt = (lngLat) => map.project(lngLat)
-  
+
   const processLine = (lineCoords) => {
     for (let i = 0; i < lineCoords.length - 1; i++) {
       const d2 = distToSegmentSquared(point, getScreenPt(lineCoords[i]), getScreenPt(lineCoords[i + 1]))
@@ -52,7 +52,7 @@ const getMinDistToGeometry = (map, point, geometry) => {
       }
     }
   }
-  
+
   if (type === 'Point') {
     const p = getScreenPt(coords)
     minSqDist = (point.x - p.x) ** 2 + (point.y - p.y) ** 2
@@ -117,7 +117,7 @@ export const queryFeatures = (map, point, options = {}) => {
       let score = 0
       const type = f.geometry.type
       const pixelDistSq = getMinDistToGeometry(map, point, f.geometry)
-      
+
       // PRIORITY 1: LAYER ORDER
       const layerRank = layerStack.indexOf(f.layer.id)
       score += (layerRank * 1000000)
@@ -126,7 +126,7 @@ export const queryFeatures = (map, point, options = {}) => {
       if (type.includes('Polygon')) {
         const polys = type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates
         const isInside = polys.some((ring) => isPointInPolygon(clickPt, ring[0]))
-        
+
         if (isInside === true) {
           // Massive boost for polygons if we are actually inside them
           score -= 500000 // NOSONAR - tolerance used only here
@@ -143,4 +143,4 @@ export const queryFeatures = (map, point, options = {}) => {
     })
     .sort((a, b) => a.score - b.score)
     .map(({ f }) => f)
-}
+}

package/providers/maplibre/src/utils/queryFeatures.test.js

@@ -15,12 +15,12 @@ describe('queryFeatures coverage', () => {
     const cases = [
       { type: 'Point', coords: [0, 0], p: { x: 3, y: 4 } },
       { type: 'LineString', coords: [[0, 0], [10, 0]], p: { x: 5, y: 5 } }, // t=0.5
-      { type: 'LineString', coords: [[0, 0], [0, 0]], p: { x: 1, y: 1 } },   // l2=0
+      { type: 'LineString', coords: [[0, 0], [0, 0]], p: { x: 1, y: 1 } }, // l2=0
       { type: 'LineString', coords: [[0, 0], [10, 0]], p: { x: -5, y: 0 } }, // t<0
       { type: 'MultiPoint', coords: [[0, 0], [10, 10]], p: { x: 1, y: 0 } },
       { type: 'MultiLineString', coords: [[[0, 0], [10, 0]]], p: { x: 5, y: 1 } },
       { type: 'Polygon', coords: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]], p: { x: 5, y: 5 } }, // Inside
-      { type: 'MultiPolygon', coords: [[[[0, 0], [10, 0], [10, 10], [0, 0]]]], p: { x: 20, y: 20 } },  // Outside
+      { type: 'MultiPolygon', coords: [[[[0, 0], [10, 0], [10, 10], [0, 0]]]], p: { x: 20, y: 20 } }, // Outside
       { type: 'Unknown', coords: [], p: { x: 0, y: 0 } }
     ]
 
@@ -31,21 +31,21 @@ describe('queryFeatures coverage', () => {
     })
 
     // 3. Hits Line 144 (.sort) and property-based ID fallback
-    const f1 = { 
-      properties: { key: 'a' }, 
-      layer: { id: 'layer-A' }, 
-      geometry: { type: 'Point', coordinates: [10, 10] } 
+    const f1 = {
+      properties: { key: 'a' },
+      layer: { id: 'layer-A' },
+      geometry: { type: 'Point', coordinates: [10, 10] }
     }
-    const f2 = { 
-      id: 'b', 
-      layer: { id: 'layer-B' }, 
-      geometry: { type: 'Point', coordinates: [0, 0] } 
+    const f2 = {
+      id: 'b',
+      layer: { id: 'layer-B' },
+      geometry: { type: 'Point', coordinates: [0, 0] }
     }
-    
+
     // map.queryRenderedFeatures returns multiple items to trigger .sort()
     const sortMap = { ...mockMap, queryRenderedFeatures: () => [f1, f2] }
     const result = queryFeatures(sortMap, { x: 0, y: 0 })
-    
+
     expect(result.length).toBe(2)
     expect(result[0].layer.id).toBe('layer-A') // Sorted by layerStack index
 
@@ -57,4 +57,4 @@ describe('queryFeatures coverage', () => {
     const rayMap = { ...mockMap, queryRenderedFeatures: () => [polyFeat] }
     expect(queryFeatures(rayMap, { x: -1, y: 5 }).length).toBe(1)
   })
-})
+})

package/providers/maplibre/src/utils/spatial.js

@@ -186,7 +186,6 @@ const getPaddedBounds = (LngLatBounds, map) => {
   return new LngLatBounds(swLngLat, neLngLat)
 }
 
-
 /**
  * Get a flat bbox [west, south, east, north] from any GeoJSON object
  * (Feature, FeatureCollection, or geometry).

package/providers/maplibre/src/utils/spatial.test.js

@@ -10,7 +10,6 @@ jest.mock('geodesy/latlon-spherical.js', () =>
 jest.mock('@turf/bbox', () => jest.fn(() => [-1, 50, 1, 52]))
 
 describe('spatial utils', () => {
-
   test('formatDimension hits all branches', () => {
     // < 0.5 miles
     expect(spatial.formatDimension(500)).toMatch(/m$/)
@@ -43,55 +42,55 @@ describe('spatial utils', () => {
   })
 
   test('north/south/east/west moves', () => {
-    expect(spatial.getCardinalMove([0,0],[0,0.5])).toMatch(/north/)
-    expect(spatial.getCardinalMove([0,0],[0,-0.5])).toMatch(/south/)
-    expect(spatial.getCardinalMove([0,0],[0.5,0])).toMatch(/east/)
-    expect(spatial.getCardinalMove([0,0],[-0.5,0])).toMatch(/west/)
-    expect(spatial.getCardinalMove([0,0],[0.5,0.5])).toMatch(/north.*east|east.*north/)
-    expect(spatial.getCardinalMove([0,0],[0.00001,0.00001])).toBe('')
+    expect(spatial.getCardinalMove([0, 0], [0, 0.5])).toMatch(/north/)
+    expect(spatial.getCardinalMove([0, 0], [0, -0.5])).toMatch(/south/)
+    expect(spatial.getCardinalMove([0, 0], [0.5, 0])).toMatch(/east/)
+    expect(spatial.getCardinalMove([0, 0], [-0.5, 0])).toMatch(/west/)
+    expect(spatial.getCardinalMove([0, 0], [0.5, 0.5])).toMatch(/north.*east|east.*north/)
+    expect(spatial.getCardinalMove([0, 0], [0.00001, 0.00001])).toBe('')
   })
 
   test('spatialNavigate all directions and fallback', () => {
-    const pixels = [[0,0],[0,-1],[1,0],[0,1],[-1,0]]
-    expect(spatial.spatialNavigate('ArrowUp',[0,0],pixels)).toBe(1)
-    expect(spatial.spatialNavigate('ArrowDown',[0,0],pixels)).toBe(3)
-    expect(spatial.spatialNavigate('ArrowLeft',[0,0],pixels)).toBe(4)
-    expect(spatial.spatialNavigate('ArrowRight',[0,0],pixels)).toBe(2)
-    expect(spatial.spatialNavigate('InvalidDir',[0,0],pixels)).toBe(0)
+    const pixels = [[0, 0], [0, -1], [1, 0], [0, 1], [-1, 0]]
+    expect(spatial.spatialNavigate('ArrowUp', [0, 0], pixels)).toBe(1)
+    expect(spatial.spatialNavigate('ArrowDown', [0, 0], pixels)).toBe(3)
+    expect(spatial.spatialNavigate('ArrowLeft', [0, 0], pixels)).toBe(4)
+    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(2)
+    expect(spatial.spatialNavigate('InvalidDir', [0, 0], pixels)).toBe(0)
   })
 
   test('spatialNavigate finds closer candidates (hits dist < minDist)', () => {
-    const start = [0,0]
-    const pixels = [[0,0],[10,0],[2,0]] 
+    const start = [0, 0]
+    const pixels = [[0, 0], [10, 0], [2, 0]]
     expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
   })
 
   test('spatialNavigate skips farther candidate (dist >= minDist false branch)', () => {
     // Closer candidate first → second candidate fails dist < minDist
-    const pixels = [[0,0],[2,0],[10,0]]
-    expect(spatial.spatialNavigate('ArrowRight', [0,0], pixels)).toBe(1)
+    const pixels = [[0, 0], [2, 0], [10, 0]]
+    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(1)
   })
 
   test('spatialNavigate diagonal with dx>dy', () => {
-    const start = [0,0]
-    const pixels = [[0,0],[3,1],[1,0]] // dx>dy
+    const start = [0, 0]
+    const pixels = [[0, 0], [3, 1], [1, 0]] // dx>dy
     expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
   })
 
   test('getResolution returns positive value', () => {
-    expect(spatial.getResolution({lat:0},1)).toBeGreaterThan(0)
+    expect(spatial.getResolution({ lat: 0 }, 1)).toBeGreaterThan(0)
   })
 
   test('getPaddedBounds returns bounds', () => {
     const map = {
-      getContainer: () => ({ getBoundingClientRect: () => ({ width:100,height:200 }) }),
-      getPadding: () => ({ top:1,right:2,bottom:3,left:4 }),
-      unproject: p => ({ x:p[0], y:p[1] })
+      getContainer: () => ({ getBoundingClientRect: () => ({ width: 100, height: 200 }) }),
+      getPadding: () => ({ top: 1, right: 2, bottom: 3, left: 4 }),
+      unproject: p => ({ x: p[0], y: p[1] })
     }
-    const LngLatBounds = function(sw,ne){
-      return {sw,ne}
+    const LngLatBounds = function (sw, ne) {
+      return { sw, ne }
     }
-    const bounds = spatial.getPaddedBounds(LngLatBounds,map)
+    const bounds = spatial.getPaddedBounds(LngLatBounds, map)
     expect(bounds.sw).toBeDefined()
     expect(bounds.ne).toBeDefined()
   })
@@ -140,4 +139,4 @@ describe('spatial utils', () => {
       expect(map.project).toHaveBeenCalledTimes(4)
     })
   })
-})
+})

package/src/App/registry/pluginRegistry.js

@@ -1,9 +1,23 @@
 // src/core/registry/pluginRegistry.js
 import { registerIcon } from './iconRegistry.js'
 import { registerKeyboardShortcut } from './keyboardShortcutRegistry.js'
+import { allowedSlots } from '../renderer/slots.js'
+import { logger } from '../../utils/logger.js'
 
 const asArray = (value) => Array.isArray(value) ? value : [value]
 
+const BREAKPOINTS = ['mobile', 'tablet', 'desktop']
+
+function validateSlots (item, type) {
+  const allowed = allowedSlots[type]
+  BREAKPOINTS.forEach(bp => {
+    const slot = item[bp]?.slot
+    if (slot && !allowed.includes(slot) && !(type === 'panel' && slot.endsWith('-button'))) {
+      logger.warn(`${type} "${item.id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowed.join(', ')}.`)
+    }
+  })
+}
+
 export function createPluginRegistry ({ registerButton, registerPanel, registerControl }) {
   const registeredPlugins = []
 
@@ -18,6 +32,7 @@ export function createPluginRegistry ({ registerButton, registerPanel, registerC
 
     if (manifest.buttons) {
       asArray(manifest.buttons).forEach(button => {
+        validateSlots(button, 'button')
         registerButton({ [button.id]: { ...pluginConfig, ...button } })
         // Flat button registry including any menu items (isMenuItem prevents slot rendering)
         button?.menuItems?.forEach(menuItem => {
@@ -28,12 +43,14 @@ export function createPluginRegistry ({ registerButton, registerPanel, registerC
 
     if (manifest.panels) {
       asArray(manifest.panels).forEach(panel => {
+        validateSlots(panel, 'panel')
         registerPanel({ [panel.id]: { ...pluginConfig, ...panel } })
       })
     }
 
     if (manifest.controls) {
       asArray(manifest.controls).forEach(control => {
+        validateSlots(control, 'control')
         registerControl({ [control.id]: { ...pluginConfig, ...control } })
       })
     }

package/src/App/registry/pluginRegistry.test.js

@@ -139,6 +139,39 @@ describe('pluginRegistry', () => {
     expect(pluginRegistry.registeredPlugins).toEqual([pluginA, pluginB])
   })
 
+  describe('slot validation', () => {
+    const INVALID_SLOT = 'invalid-slot'
+
+    beforeEach(() => jest.spyOn(console, 'warn').mockImplementation(() => {}))
+    afterEach(() => jest.restoreAllMocks())
+
+    it('warns when a manifest item has an invalid slot', () => {
+      const plugin = {
+        id: 'bad-plugin',
+        config: {},
+        manifest: {
+          buttons: [{ id: 'btn1', desktop: { slot: INVALID_SLOT } }],
+          panels: [{ id: 'panel1', desktop: { slot: INVALID_SLOT } }],
+          controls: [{ id: 'ctrl1', desktop: { slot: INVALID_SLOT } }]
+        }
+      }
+      pluginRegistry.registerPlugin(plugin)
+      expect(console.warn).toHaveBeenCalledWith('[interactive-map]', expect.stringContaining(INVALID_SLOT))
+    })
+
+    it('does not warn for a panel with a button-adjacent slot', () => {
+      const plugin = {
+        id: 'adj-plugin',
+        config: {},
+        manifest: {
+          panels: [{ id: 'panel1', desktop: { slot: 'left-top-button' } }]
+        }
+      }
+      pluginRegistry.registerPlugin(plugin)
+      expect(console.warn).not.toHaveBeenCalled()
+    })
+  })
+
   it('clears all registered plugins', () => {
     const pluginA = { id: 'A', config: {}, manifest: {} }
     const pluginB = { id: 'B', config: {}, manifest: {} }

package/src/App/renderer/mapButtons.js

@@ -1,6 +1,7 @@
 // src/core/renderers/mapButtons.js
 import { MapButton } from '../components/MapButton/MapButton.jsx'
 import { allowedSlots } from './slots.js'
+import { logger } from '../../utils/logger.js'
 
 function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
   const { breakpoint, mode } = appState
@@ -163,7 +164,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
 
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production' && typeof group === 'string') {
-      console.warn(`[interactive-map] Button "${buttonId}": group should be an object { name, label?, order? } — string groups are deprecated.`)
+      logger.warn(`Button "${buttonId}": group should be an object { name, label?, order? } — string groups are deprecated.`)
     }
 
     const name = resolveGroupName(group)
@@ -174,7 +175,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
       const existing = groupMap.get(name)
       /* istanbul ignore next */
       if (process.env.NODE_ENV !== 'production' && existing.order !== order) {
-        console.warn(`[interactive-map] Group "${name}" has inconsistent order values (${existing.order} vs ${order}). Using the lower value.`)
+        logger.warn(`Group "${name}" has inconsistent order values (${existing.order} vs ${order}). Using the lower value.`)
         existing.order = Math.min(existing.order, order)
       }
     } else {

package/src/App/store/appDispatchMiddleware.js

@@ -1,7 +1,11 @@
 // src/App/store/dispatchMiddleware.js
 import { EVENTS as events } from '../../config/events.js'
-import { defaultPanelConfig } from '../../config/appConfig.js'
+import { defaultPanelConfig, defaultButtonConfig, defaultControlConfig } from '../../config/appConfig.js'
 import { deepMerge } from '../../utils/deepMerge.js'
+import { allowedSlots } from '../renderer/slots.js'
+import { logger } from '../../utils/logger.js'
+
+const BREAKPOINTS = ['mobile', 'tablet', 'desktop']
 
 /**
  * Determines which panels were implicitly closed when opening a new panel
@@ -81,9 +85,37 @@ export function handleActionSideEffects (action, previousState, panelConfig, eve
     })
   }
 
+  if (type === 'ADD_BUTTON') {
+    const { id, config } = payload
+    const mergedConfig = deepMerge(defaultButtonConfig, config)
+    BREAKPOINTS.forEach(bp => {
+      const slot = mergedConfig[bp]?.slot
+      if (slot && !allowedSlots.button.includes(slot)) {
+        logger.warn(`button "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.button.join(', ')}.`)
+      }
+    })
+  }
+
+  if (type === 'ADD_CONTROL') {
+    const { id, config } = payload
+    const mergedConfig = deepMerge(defaultControlConfig, config)
+    BREAKPOINTS.forEach(bp => {
+      const slot = mergedConfig[bp]?.slot
+      if (slot && !allowedSlots.control.includes(slot)) {
+        logger.warn(`control "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.control.join(', ')}.`)
+      }
+    })
+  }
+
   if (type === 'ADD_PANEL') {
     const { id, config } = payload
     const mergedConfig = deepMerge(defaultPanelConfig, config)
+    BREAKPOINTS.forEach(bp => {
+      const slot = mergedConfig[bp]?.slot
+      if (slot && !allowedSlots.panel.includes(slot) && !slot.endsWith('-button')) {
+        logger.warn(`panel "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.panel.join(', ')}.`)
+      }
+    })
     const bpConfig = mergedConfig[previousState.breakpoint]
     if (bpConfig?.open) {
       queueMicrotask(() => {