@defra/interactive-map 0.0.4-alpha → 0.0.6-alpha

package/src/utils/detectBreakpoint.js

@@ -1,106 +1,107 @@
-function createBreakpointDetector ({ maxMobileWidth, minDesktopWidth, containerEl }) {
-  let lastBreakpoint = 'unknown'
-  const listeners = new Set()
-  let cleanup = null
-
-  const getBreakpointType = (width) => {
-    if (width <= maxMobileWidth) {
-      return 'mobile'
-    }
-    if (width >= minDesktopWidth) {
-      return 'desktop'
-    }
-    return 'tablet'
+function getBreakpointType (width, maxMobileWidth, minDesktopWidth) {
+  if (width <= maxMobileWidth) {
+    return 'mobile'
   }
-
-  const notifyListeners = (type) => {
-    if (type !== lastBreakpoint) {
-      lastBreakpoint = type // Set synchronously BEFORE RAF
-      requestAnimationFrame(() => {
-        // Double-check it hasn't changed again
-        if (lastBreakpoint === type) {
-          listeners.forEach(fn => fn(type))
-        }
-      })
-    }
+  if (width >= minDesktopWidth) {
+    return 'desktop'
   }
+  return 'tablet'
+}
 
-  // Container-based detection
-  if (containerEl) {
-    containerEl.style.containerType = 'inline-size'
-
-    // Set initial detection BEFORE observing to prevent double notification
-    const initialWidth = containerEl.getBoundingClientRect().width
-    const initialType = getBreakpointType(initialWidth)
-    containerEl.setAttribute('data-breakpoint', initialType)
-    lastBreakpoint = initialType // Set this directly, don't notify yet
+function createContainerDetector (containerEl, getType, notifyListeners) {
+  containerEl.style.containerType = 'inline-size'
 
-    const observer = new ResizeObserver((entries) => {
-      const width = entries[0]?.borderBoxSize?.[0]?.inlineSize || entries[0]?.contentRect.width
-      const type = getBreakpointType(width)
-      containerEl.setAttribute('data-breakpoint', type)
-      notifyListeners(type)
-    })
+  const initialWidth = containerEl.getBoundingClientRect().width
+  const initialType = getType(initialWidth)
+  containerEl.dataset.breakpoint = initialType
 
-    observer.observe(containerEl)
+  const observer = new window.ResizeObserver((entries) => {
+    const width = entries[0]?.borderBoxSize?.[0]?.inlineSize || entries[0]?.contentRect.width
+    const type = getType(width)
+    containerEl.dataset.breakpoint = type
+    notifyListeners(type)
+  })
 
-    // Now notify listeners after observer is set up
-    notifyListeners(initialType)
+  observer.observe(containerEl)
 
-    cleanup = () => {
+  return {
+    initialType,
+    cleanup: () => {
       observer.disconnect()
       containerEl.style.containerType = ''
-      containerEl.removeAttribute('data-breakpoint')
+      delete containerEl.dataset.breakpoint
     }
-  } else {
-    // Viewport-based fallback
-    const mq = {
-      mobile: window.matchMedia(`(max-width: ${maxMobileWidth}px)`),
-      desktop: window.matchMedia(`(min-width: ${minDesktopWidth}px)`)
-    }
-
-    const detect = () => {
-      let type
+  }
+}
 
-      if (mq.mobile.matches) {
-        type = 'mobile'
-      } else if (mq.desktop.matches) {
-        type = 'desktop'
-      } else {
-        type = 'tablet'
-      }
+function createViewportDetector (maxMobileWidth, minDesktopWidth, notifyListeners) {
+  const mq = {
+    mobile: window.matchMedia(`(max-width: ${maxMobileWidth}px)`),
+    desktop: window.matchMedia(`(min-width: ${minDesktopWidth}px)`)
+  }
 
-      notifyListeners(type)
+  const detect = () => {
+    let type = 'tablet'
+    if (mq.mobile.matches) {
+      type = 'mobile'
+    } else if (mq.desktop.matches) {
+      type = 'desktop'
+    } else {
+      // No action
     }
+    notifyListeners(type)
+  }
 
-    mq.mobile.addEventListener('change', detect)
-    mq.desktop.addEventListener('change', detect)
-    detect()
+  mq.mobile.addEventListener('change', detect)
+  mq.desktop.addEventListener('change', detect)
+  detect()
 
-    cleanup = () => {
+  return {
+    cleanup: () => {
       mq.mobile.removeEventListener('change', detect)
       mq.desktop.removeEventListener('change', detect)
     }
   }
+}
 
-  const subscribe = (fn) => {
-    listeners.add(fn)
-    return () => listeners.delete(fn)
-  }
+function createBreakpointDetector ({ maxMobileWidth, minDesktopWidth, containerEl }) {
+  let lastBreakpoint = 'unknown'
+  const listeners = new Set()
 
-  const getBreakpoint = () => {
-    return lastBreakpoint === 'unknown' ? 'desktop' : lastBreakpoint
+  const notifyListeners = (type) => {
+    if (type !== lastBreakpoint) {
+      lastBreakpoint = type
+      requestAnimationFrame(() => {
+        if (lastBreakpoint === type) {
+          listeners.forEach(fn => fn(type))
+        }
+      })
+    }
   }
 
-  const destroy = () => {
-    cleanup?.()
-    listeners.clear()
+  const getType = (width) => getBreakpointType(width, maxMobileWidth, minDesktopWidth)
+
+  let cleanup
+  if (containerEl) {
+    const detector = createContainerDetector(containerEl, getType, notifyListeners)
+    lastBreakpoint = detector.initialType
+    notifyListeners(detector.initialType)
+    cleanup = detector.cleanup
+  } else {
+    const detector = createViewportDetector(maxMobileWidth, minDesktopWidth, notifyListeners)
+    cleanup = detector.cleanup
   }
 
   return {
-    subscribe,
-    getBreakpoint,
-    destroy
+    subscribe: (fn) => {
+      listeners.add(fn)
+      return () => listeners.delete(fn)
+    },
+    getBreakpoint: () => lastBreakpoint,
+    destroy: () => {
+      cleanup?.()
+      listeners.clear()
+    }
   }
 }
 

package/src/utils/detectBreakpoint.test.js

@@ -12,7 +12,7 @@ let mockedQueries = {}
 
 class MockResizeObserver {
   constructor (callback) { this.callback = callback }
-  observe (el) { MockResizeObserver.instance = this }
+  observe () { MockResizeObserver.instance = this }
   disconnect () { MockResizeObserver.instance = null }
   trigger (width, fallback) {
     this.callback([fallback ? { contentRect: { width } } : { borderBoxSize: [{ inlineSize: width }], contentRect: { width } }])
@@ -35,7 +35,9 @@ const mockMatchMedia = (query) => {
 window.matchMedia = jest.fn(mockMatchMedia)
 
 const triggerMQ = (query, matches) => {
-  if (mockedQueries[query]) mockedQueries[query].matches = matches
+  if (mockedQueries[query]) {
+    mockedQueries[query].matches = matches
+  }
   mediaListeners[query]?.forEach(fn => fn({ matches }))
 }
 
@@ -68,6 +70,46 @@ describe('detectBreakpoint', () => {
     detector.destroy()
   })
 
+  /**
+   * Test to ensure coverage for the concurrency guard (Line 75).
+   * Validates that if multiple breakpoint changes occur before a RAF
+   * frame fires, only the most recent (current) state notifies listeners.
+   */
+  it('does not notify listeners if the breakpoint changed again before RAF fired', () => {
+    const listener = jest.fn()
+    const detector = createBreakpointDetector(cfg)
+    detector.subscribe(listener)
+
+    // 1. Initial flush to clear the "mount" notification
+    flushRAF()
+    listener.mockClear()
+
+    // 2. Trigger 'mobile'.
+    // This sets lastBreakpoint = 'mobile' and queues RAF #1 (type: 'mobile')
+    triggerMQ('(max-width: 768px)', true)
+
+    // 3. IMMEDIATELY switch to 'desktop' before flushing.
+    // IMPORTANT: We must turn mobile OFF so the detector sees 'desktop'.
+    triggerMQ('(max-width: 768px)', false)
+    triggerMQ('(min-width: 1024px)', true)
+
+    // At this point:
+    // - lastBreakpoint is now 'desktop'
+    // - There are 3 callbacks in the RAF queue:
+    //   - RAF #1 from the mobile trigger (type: 'mobile')
+    //   - RAF #2 from the mobile=false trigger (type: 'tablet')
+    //   - RAF #3 from the desktop trigger (type: 'desktop')
+
+    flushRAF()
+
+    // RAF #1: ('mobile' === 'desktop') is false -> skip listener
+    // RAF #2: ('tablet' === 'desktop') is false -> skip listener
+    // RAF #3: ('desktop' === 'desktop') is true -> call listener
+    expect(listener).toHaveBeenCalledTimes(1)
+    expect(listener).toHaveBeenCalledWith('desktop')
+    expect(detector.getBreakpoint()).toBe('desktop')
+  })
+
   describe('viewport mode', () => {
     it.each([
       ['mobile', true, false],
@@ -76,8 +118,12 @@ describe('detectBreakpoint', () => {
     ])('detects %s', (name, mobile, desktop) => {
       window.matchMedia.mockImplementation(q => {
         const mq = mockMatchMedia(q)
-        if (q === '(max-width: 768px)') mq.matches = mobile
-        if (q === '(min-width: 1024px)') mq.matches = desktop
+        if (q === '(max-width: 768px)') {
+          mq.matches = mobile
+        }
+        if (q === '(min-width: 1024px)') {
+          mq.matches = desktop
+        }
         return mq
       })
       const detector = createBreakpointDetector(cfg)

package/src/utils/detectInterfaceType.js

@@ -33,7 +33,7 @@ function notifyListeners (newType) {
 function createInterfaceDetector () {
   const mql = window.matchMedia('(pointer: coarse)')
 
-  // handle DevTools / system pointer type changes
+  // System pointer type changes
   const handleMediaChange = e => {
     notifyListeners(e.matches ? 'touch' : 'mouse')
   }
@@ -53,19 +53,20 @@ function createInterfaceDetector () {
     }
   }
 
-  globalThis.addEventListener('pointerdown', handlePointer, { passive: true })
-  globalThis.addEventListener('keydown', handleKeyDown, { passive: true })
+  window.addEventListener('pointerdown', handlePointer, { passive: true })
+  window.addEventListener('keydown', handleKeyDown, { passive: true })
 
   // cleanup
   return () => {
     mql.removeEventListener('change', handleMediaChange)
-    globalThis.removeEventListener('pointerdown', handlePointer)
-    globalThis.removeEventListener('keydown', handleKeyDown)
+    window.removeEventListener('pointerdown', handlePointer)
+    window.removeEventListener('keydown', handleKeyDown)
   }
 }
 
 function getInterfaceType () {
   if (lastInterfaceType === 'unknown') {
+    lastInterfaceType = 'mouse'
     return 'mouse'
   }
 

package/src/utils/getIsFullscreen.js

@@ -10,7 +10,9 @@
  */
 export const isHybridFullscreen = (config) => {
   const { behaviour, hybridWidth, maxMobileWidth } = config
-  if (behaviour !== 'hybrid') return false
+  if (behaviour !== 'hybrid') {
+    return false
+  }
   const threshold = hybridWidth ?? maxMobileWidth
   return window.matchMedia(`(max-width: ${threshold}px)`).matches
 }

package/src/utils/getSafeZoneInset.js

@@ -1,3 +1,21 @@
+/**
+ * Calculates the safe zone inset — the unobscured region of the map viewport
+ * not hidden behind overlay panels, action bars or the footer. Used as padding
+ * for map operations like setCenter or fitBounds so the full extent is visible.
+ *
+ * The algorithm measures the available space around the inset panel and decides
+ * whether to push the safe area below or beside it, depending on whether the
+ * layout is landscape or portrait oriented.
+ *
+ * @param {Object} refs - React refs for the key layout elements.
+ * @param {React.RefObject} refs.mainRef - The main content area.
+ * @param {React.RefObject} refs.insetRef - The inset panel (e.g. search results).
+ * @param {React.RefObject} refs.rightRef - The right-hand button column.
+ * @param {React.RefObject} refs.actionsRef - The bottom action bar.
+ * @param {React.RefObject} refs.footerRef - The footer (logo, copyright etc).
+ * @returns {{ top: number, right: number, left: number, bottom: number } | undefined}
+ *   Pixel insets from each edge of the main area, or undefined if any ref is missing.
+ */
 export const getSafeZoneInset = ({
   mainRef,
   insetRef,
@@ -5,16 +23,14 @@ export const getSafeZoneInset = ({
   actionsRef,
   footerRef
 }) => {
-  const main = mainRef.current
-  const inset = insetRef.current
-  const right = rightRef.current
-  const actions = actionsRef.current
-  const footer = footerRef.current
+  const refs = [mainRef, insetRef, rightRef, actionsRef, footerRef]
 
-  if (!main || !inset || !right || !actions || !footer) {
-    return
+  if (refs.some(ref => !ref.current)) {
+    return undefined
   }
 
+  const [main, inset, right, actions, footer] = refs.map(ref => ref.current)
+
   const root = document.documentElement
   const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
 

package/src/utils/getSafeZoneInset.test.js

@@ -68,4 +68,22 @@ describe('getSafeZoneInset', () => {
     expect(result.left).toBe(80)
     expect(result.right).toBe(80)
   })
+
+  /**
+   * Test to ensure coverage for the safety guardrail (Line 29).
+   * Validates that the function returns undefined if React refs are
+   * not yet attached to DOM elements.
+   */
+  it('returns undefined if any ref.current is null (unattached)', () => {
+    const unattachedRefs = {
+      mainRef: { current: null },
+      insetRef: { current: null },
+      rightRef: { current: null },
+      actionsRef: { current: null },
+      footerRef: { current: null }
+    }
+
+    const result = getSafeZoneInset(unattachedRefs)
+    expect(result).toBeUndefined()
+  })
 })

package/src/utils/mapStateSync.js

@@ -11,7 +11,7 @@ const getMapStateFromURL = (id, search) => {
   return { center: [lng, lat], zoom }
 }
 
-const setMapStateInURL = (id, state, currentHref = globalThis.location.href) => {
+const setMapStateInURL = (id, state, currentHref = window.location.href) => {
   // Use the passed href or the global one
   const url = new URL(currentHref || 'http://localhost')
   const params = [...new URLSearchParams(url.search)].map(([key, value]) => `${key}=${value}`)
@@ -30,10 +30,10 @@ const setMapStateInURL = (id, state, currentHref = globalThis.location.href) =>
 
   const hash = url.hash || ''
   const newUrl = `${url.origin}${url.pathname}?${[...filteredParams, ...newParams].join('&')}${hash}`
-  globalThis.history.replaceState(globalThis.history.state, '', newUrl)
+  window.history.replaceState(window.history.state, '', newUrl)
 }
 
-const getInitialMapState = ({ id, center, zoom, bounds }, search = globalThis.location.search) => {
+const getInitialMapState = ({ id, center, zoom, bounds }, search = window.location.search) => {
   // Pass search string down to the internal function
   const savedState = getMapStateFromURL(id, search)
   if (savedState) {

package/src/utils/queryString.js

@@ -1,4 +1,4 @@
-export const getQueryParam = (name, search = globalThis.location?.search) => {
+export const getQueryParam = (name, search = window.location?.search) => {
   const urlParams = new URLSearchParams(search)
   return urlParams.get(name)
 }

package/src/utils/stringToKebab.js

@@ -1,3 +1,3 @@
 export function stringToKebab (str) {
-  return str?.replaceAll(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+  return str?.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
 }

package/src/utils/toggleInertElements.js

@@ -1,31 +1,56 @@
+/**
+ * Checks whether a sibling element should be marked as inert.
+ * @param {Element} sibling - The sibling element to evaluate
+ * @param {Element} el - The current element being walked up from
+ * @param {Element|null} containerEl - The container to preserve (not make inert)
+ * @param {Element} boundaryEl - The outermost boundary for the traversal
+ * @returns {boolean}
+ */
+const shouldMakeInert = (sibling, el, containerEl, boundaryEl) =>
+  sibling !== el &&
+  !containerEl?.contains(sibling) &&
+  sibling.matches(':not([aria-hidden]):not([data-fm-inert])') &&
+  boundaryEl.contains(sibling)
+
+/**
+ * Toggles inert state on elements outside a container for fullscreen/modal behaviour.
+ *
+ * When entering fullscreen, walks up from `containerEl` to `boundaryEl`, marking all
+ * sibling branches as `aria-hidden` and flagging them with `data-fm-inert` so they
+ * can be restored later. When exiting fullscreen, restores all previously inerted elements.
+ *
+ * @param {Object} options
+ * @param {Element|null} options.containerEl - The element to keep interactive
+ * @param {boolean} options.isFullscreen - Whether fullscreen mode is active
+ * @param {Element} [options.boundaryEl=document.body] - The outermost ancestor to traverse up to
+ */
 export function toggleInertElements ({ containerEl, isFullscreen, boundaryEl = document.body }) {
+  // Restore any previously inerted elements
   let inertElements = Array.from(boundaryEl.querySelectorAll('[data-fm-inert]'))
 
   if (containerEl) {
-    inertElements = inertElements.filter(el => !containerEl.contains(el))
+    inertElements = inertElements.filter(inertEl => !containerEl.contains(inertEl))
   }
 
-  inertElements.forEach(el => {
-    el.removeAttribute('aria-hidden')
-    el.removeAttribute('data-fm-inert')
+  inertElements.forEach(inertEl => {
+    inertEl.removeAttribute('aria-hidden')
+    delete inertEl.dataset.fmInert
   })
 
-  if (!isFullscreen) return
+  if (!isFullscreen) {
+    return
+  }
 
+  // Entering fullscreen: blur active element and inert all sibling branches
   document.activeElement?.blur()
 
   let el = containerEl
   while (el?.parentNode && el !== boundaryEl && el !== document.body) {
     const parent = el.parentNode
     for (const sibling of parent.children) {
-      if (
-        sibling !== el &&
-        (!containerEl || !containerEl.contains(sibling)) &&
-        sibling.matches(':not([aria-hidden]):not([data-fm-inert])') &&
-        boundaryEl.contains(sibling)
-      ) {
+      if (shouldMakeInert(sibling, el, containerEl, boundaryEl)) {
         sibling.setAttribute('aria-hidden', 'true')
-        sibling.setAttribute('data-fm-inert', '')
+        sibling.dataset.fmInert = ''
       }
     }
     el = parent

package/webpack.dev.mjs

@@ -66,9 +66,8 @@ export default {
         OS_NAMES_URL: JSON.stringify(process.env.OS_NAMES_URL),
         OS_NEAREST_URL: JSON.stringify(process.env.OS_NEAREST_URL),
         // Data services
-        PARCEL_TILE_SERVICE_URL: JSON.stringify(process.env.PARCEL_TILE_SERVICE_URL),
-        GRIDREF_SERVICE_URL: JSON.stringify(process.env.GRIDREF_SERVICE_URL),
-        PARCEL_SERVICE_URL: JSON.stringify(process.env.PARCEL_SERVICE_URL)
+        FARMING_TILE_SERVICE_URL: JSON.stringify(process.env.FARMING_TILE_SERVICE_URL),
+        FARMING_API_URL: JSON.stringify(process.env.FARMING_API_URL)
       }
     })
   ],
@@ -77,7 +76,7 @@ export default {
       {
         test: /\.jsx?$/,
         loader: 'babel-loader',
-        exclude: /node_modules\/(?!(lucide-react))/
+        exclude: /node_modules/
       },{
         test: /\.s[ac]ss$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],

package/plugins/interact/src/utils/turfHelpers.js

@@ -1,30 +0,0 @@
-import { polygon, multiPolygon, lineString, multiLineString, point, multiPoint } from '@turf/helpers'
-
-/**
- * Convert a GeoJSON Feature or geometry-like object into a Turf geometry.
- *
- * @param {Object} featureOrGeom - Either a Feature with a `.geometry` property or a raw GeoJSON geometry object.
- * @returns {Object} Turf geometry (Polygon, LineString, Point, etc.)
- *
- * @throws Will throw if the geometry type is not supported.
- */
-export function toTurfGeometry(featureOrGeom) {
-  const geom = featureOrGeom.geometry || featureOrGeom
-
-  switch (geom.type) {
-    case 'Polygon':
-      return polygon(geom.coordinates);
-    case 'MultiPolygon':
-      return multiPolygon(geom.coordinates);
-    case 'LineString':
-      return lineString(geom.coordinates);
-    case 'MultiLineString':
-      return multiLineString(geom.coordinates);
-    case 'Point':
-      return point(geom.coordinates);
-    case 'MultiPoint':
-      return multiPoint(geom.coordinates);
-    default:
-      throw new Error(`Unsupported geometry type: ${geom.type}`)
-  }
-}

package/plugins/interact/src/utils/turfHelpers.test.js

@@ -1,30 +0,0 @@
-import { toTurfGeometry } from './turfHelpers.js'
-import { polygon, multiPolygon, lineString, multiLineString, point, multiPoint } from '@turf/helpers'
-
-describe('toTurfGeometry', () => {
-  const geomTypes = [
-    { type: 'Polygon', coords: [[[0,0],[1,0],[1,1],[0,0]]], fn: polygon },
-    { type: 'MultiPolygon', coords: [[[[0,0],[1,0],[1,1],[0,0]]]], fn: multiPolygon },
-    { type: 'LineString', coords: [[0,0],[1,1]], fn: lineString },
-    { type: 'MultiLineString', coords: [[[0,0],[1,1]]], fn: multiLineString },
-    { type: 'Point', coords: [0,0], fn: point },
-    { type: 'MultiPoint', coords: [[0,0],[1,1]], fn: multiPoint }
-  ]
-
-  geomTypes.forEach(({ type, coords, fn }) => {
-    it(`converts ${type} Feature`, () => {
-      const feature = { type: 'Feature', geometry: { type, coordinates: coords } }
-      expect(toTurfGeometry(feature)).toEqual(fn(coords))
-    })
-
-    it(`converts raw ${type} geometry`, () => {
-      const geom = { type, coordinates: coords }
-      expect(toTurfGeometry(geom)).toEqual(fn(coords))
-    })
-  })
-
-  it('throws on unsupported geometry', () => {
-    expect(() => toTurfGeometry({ type: 'Feature', geometry: { type: 'Circle', coordinates: [] } }))
-      .toThrow('Unsupported geometry type: Circle')
-  })
-})

package/plugins/search/src/utils/fetchDataset.js

@@ -1,23 +0,0 @@
-// src/plugins/search/utils/fetch.js
-export async function fetchDataset(url, options = {}, transformRequest) {
-  let request = new Request(url, options)
-
-  if (transformRequest) {
-    try {
-      request = await transformRequest(request)
-    } catch (err) {
-      console.error('Error transforming request:', err)
-      return null
-    }
-  }
-
-  const response = await fetch(request)
-
-  if (!response.ok) {
-    console.error('Fetch error', response.status)
-    return null
-  }
-
-  const json = await response.json()
-  return json
-}