@defra/interactive-map 0.0.11-alpha → 0.0.14-alpha

package/src/App/renderer/slots.js

@@ -6,9 +6,11 @@ export const layoutSlots = Object.freeze({
   TOP_MIDDLE: 'top-middle',
   TOP_RIGHT: 'top-right',
   INSET: 'inset',
+  LEFT_TOP: 'left-top',
+  LEFT_BOTTOM: 'left-bottom',
+  MIDDLE: 'middle',
   RIGHT_TOP: 'right-top',
   RIGHT_BOTTOM: 'right-bottom',
-  MIDDLE: 'middle',
   FOOTER_RIGHT: 'footer-right',
   BOTTOM: 'bottom',
   ACTIONS: 'actions',
@@ -29,17 +31,21 @@ export const allowedSlots = Object.freeze({
   panel: [
     layoutSlots.SIDE,
     layoutSlots.BANNER,
-    layoutSlots.INSET,
+    layoutSlots.INSET, // Deprecate
+    layoutSlots.LEFT_TOP,
+    layoutSlots.LEFT_BOTTOM,
     layoutSlots.MIDDLE,
-    layoutSlots.BOTTOM,
-    layoutSlots.ACTIONS,
-    layoutSlots.DRAWER,
-    layoutSlots.MODAL
+    layoutSlots.RIGHT_TOP,
+    layoutSlots.RIGHT_BOTTOM,
+    layoutSlots.BOTTOM, // Typicaly on mobile
+    layoutSlots.MODAL // Internal only
   ],
   button: [
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_MIDDLE,
     layoutSlots.TOP_RIGHT,
+    layoutSlots.LEFT_TOP,
+    layoutSlots.LEFT_BOTTOM,
     layoutSlots.RIGHT_TOP,
     layoutSlots.RIGHT_BOTTOM,
     layoutSlots.ACTIONS

package/src/App/store/AppProvider.jsx

@@ -20,8 +20,13 @@ export const AppProvider = ({ options, children }) => {
     topLeftColRef: useRef(null),
     topRightColRef: useRef(null),
     insetRef: useRef(null),
-    rightRef: useRef(null),
+    leftRef: useRef(null),
+    leftTopRef: useRef(null),
+    leftBottomRef: useRef(null),
     middleRef: useRef(null),
+    rightRef: useRef(null),
+    rightTopRef: useRef(null),
+    rightBottomRef: useRef(null),
     bottomRef: useRef(null),
     footerRef: useRef(null),
     actionsRef: useRef(null),

package/src/App/store/appDispatchMiddleware.js

@@ -1,5 +1,7 @@
 // src/App/store/dispatchMiddleware.js
 import { EVENTS as events } from '../../config/events.js'
+import { defaultPanelConfig } from '../../config/appConfig.js'
+import { deepMerge } from '../../utils/deepMerge.js'
 
 /**
  * Determines which panels were implicitly closed when opening a new panel
@@ -78,4 +80,21 @@ export function handleActionSideEffects (action, previousState, panelConfig, eve
       eventBus.emit(events.APP_PANEL_OPENED, { panelId, props })
     })
   }
+
+  if (type === 'ADD_PANEL') {
+    const { id, config } = payload
+    const mergedConfig = deepMerge(defaultPanelConfig, config)
+    const bpConfig = mergedConfig[previousState.breakpoint]
+    if (bpConfig?.open) {
+      queueMicrotask(() => {
+        const slot = bpConfig.slot
+        const { visibleGeometry } = mergedConfig
+        const eventPayload = { panelId: id, slot }
+        if (visibleGeometry) {
+          eventPayload.visibleGeometry = visibleGeometry
+        }
+        eventBus.emit(events.APP_PANEL_OPENED, eventPayload)
+      })
+    }
+  }
 }

package/src/App/store/appDispatchMiddleware.test.js

@@ -177,4 +177,60 @@ describe('appDispatchMiddleware', () => {
       )
     })
   })
+
+  describe('ADD_PANEL', () => {
+    it('emits APP_PANEL_OPENED with slot when panel opens by default', async () => {
+      run(
+        { type: 'ADD_PANEL', payload: { id: 'newPanel', config: {} } },
+        { breakpoint: 'desktop' }
+      )
+
+      await flushMicrotasks()
+
+      expect(eventBus.emit).toHaveBeenCalledWith(
+        events.APP_PANEL_OPENED,
+        { panelId: 'newPanel', slot: 'inset' }
+      )
+    })
+
+    it('emits APP_PANEL_OPENED with visibleGeometry when provided in config', async () => {
+      const visibleGeometry = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 2] }, properties: {} }
+      run(
+        { type: 'ADD_PANEL', payload: { id: 'geoPanel', config: { visibleGeometry } } },
+        { breakpoint: 'desktop' }
+      )
+
+      await flushMicrotasks()
+
+      expect(eventBus.emit).toHaveBeenCalledWith(
+        events.APP_PANEL_OPENED,
+        { panelId: 'geoPanel', slot: 'inset', visibleGeometry }
+      )
+    })
+
+    it('does not emit APP_PANEL_OPENED when breakpoint config sets open: false', async () => {
+      run(
+        { type: 'ADD_PANEL', payload: { id: 'hiddenPanel', config: { desktop: { open: false } } } },
+        { breakpoint: 'desktop' }
+      )
+
+      await flushMicrotasks()
+
+      expect(eventBus.emit).not.toHaveBeenCalled()
+    })
+
+    it('emits APP_PANEL_OPENED with slot for mobile breakpoint', async () => {
+      run(
+        { type: 'ADD_PANEL', payload: { id: 'mobilePanel', config: {} } },
+        { breakpoint: 'mobile' }
+      )
+
+      await flushMicrotasks()
+
+      expect(eventBus.emit).toHaveBeenCalledWith(
+        events.APP_PANEL_OPENED,
+        { panelId: 'mobilePanel', slot: 'bottom' }
+      )
+    })
+  })
 })

package/src/InteractiveMap/InteractiveMap.js

@@ -408,10 +408,10 @@ export default class InteractiveMap {
   /**
    * Fit the map view to a bounding box or GeoJSON geometry, respecting the safe zone padding.
    *
-   * @param {[number, number, number, number] | object} bbox - Bounds as [west, south, east, north] or [minX, minY, maxX, maxY] depending on the crs, or a GeoJSON Feature, FeatureCollection, or geometry.
+   * @param {[number, number, number, number] | object} target - Bounds as [west, south, east, north] or [minX, minY, maxX, maxY] depending on the crs, or a GeoJSON Feature, FeatureCollection, or geometry.
    */
-  fitToBounds (bbox) {
-    this.eventBus.emit(events.MAP_FIT_TO_BOUNDS, bbox)
+  fitToBounds (target) {
+    this.eventBus.emit(events.MAP_FIT_TO_BOUNDS, target)
   }
 
   /**

package/src/types.js

@@ -247,6 +247,10 @@
  *
  * @property {() => void} [clearHighlightedLabel]
  * @experimental Clear any highlighted label.
+ *
+ * @property {(geojson: object, panelRect: DOMRect) => boolean} [isGeometryObscured]
+ * Returns true if the geometry's screen bounding box overlaps the given panel element rectangle.
+ * Used internally by useVisibleGeometry to decide whether to pan/zoom when a panel opens.
  */
 
 /**
@@ -373,6 +377,11 @@
  *
  * @property {PanelBreakpointConfig} tablet
  * Tablet breakpoint configuration.
+ *
+ * @property {object} [visibleGeometry]
+ * GeoJSON Feature, FeatureCollection, or geometry to keep visible when this panel opens.
+ * If any part of the geometry's bounding box is obscured by the safe zone after the panel opens,
+ * the map automatically adjusts: Point or MultiPoint geometry routes to setView(), all other types to fitToBounds().
  */
 
 /**

package/src/utils/getSafeZoneInset.js

@@ -10,6 +10,7 @@
  * @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.leftRef - The left-hand button column.
  * @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).
@@ -19,29 +20,31 @@
 export const getSafeZoneInset = ({
   mainRef,
   insetRef,
+  leftRef,
   rightRef,
   actionsRef,
   footerRef
 }) => {
-  const refs = [mainRef, insetRef, rightRef, actionsRef, footerRef]
+  const refs = [mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef]
 
   if (refs.some(ref => !ref.current)) {
     return undefined
   }
 
-  const [main, inset, right, actions, footer] = refs.map(ref => ref.current)
+  const [main, inset, left, right, actions, footer] = refs.map(ref => ref.current)
 
   const root = document.documentElement
   const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
 
   // === Safe area logic ===
   const availableHeight = actions.offsetTop - inset.offsetTop - dividerGap
-  const rightOffset = inset.offsetLeft + right.offsetWidth + dividerGap
-  const availableWidth = main.offsetWidth - rightOffset * 2
-  const insetOverlapWidth = inset.offsetWidth - rightOffset + inset.offsetLeft
+  const leftOffset = left.offsetLeft + left.offsetWidth + dividerGap
+  const rightOffset = left.offsetLeft + right.offsetWidth + dividerGap
+  const availableWidth = main.offsetWidth - (leftOffset + rightOffset)
+  const insetOverlapWidth = inset.offsetWidth - leftOffset + left.offsetLeft
   const isLandscape = availableWidth - insetOverlapWidth > availableHeight - inset.offsetHeight
-  const topOffset = inset.offsetTop + (!isLandscape && inset.offsetHeight > 0 ? inset.offsetHeight + dividerGap : 0)
-  const leftOffset = isLandscape ? inset.offsetWidth + inset.offsetLeft + dividerGap : rightOffset
+  const topOffset = left.offsetTop + (!isLandscape && inset.offsetHeight > 0 ? inset.offsetHeight + dividerGap : 0)
+  const combinedLeftOffset = isLandscape ? Math.max(inset.offsetWidth, left.offsetWidth) + left.offsetLeft + dividerGap : rightOffset
   const actionsOffset = main.offsetHeight - actions.offsetTop
   const footerOffset = main.offsetHeight - footer.offsetTop
 
@@ -49,8 +52,8 @@ export const getSafeZoneInset = ({
   const hasRoom = insetOverlapWidth < availableWidth / RATIO && inset.offsetHeight < availableHeight / RATIO
 
   const top = hasRoom ? inset.offsetTop : topOffset
-  const left = main.offsetLeft + (hasRoom ? rightOffset : Math.max(leftOffset, rightOffset))
+  const combinedLeft = main.offsetLeft + (hasRoom ? rightOffset : combinedLeftOffset)
   const bottom = Math.max(actionsOffset, footerOffset) + dividerGap
 
-  return { top, right: rightOffset, left, bottom }
+  return { top, right: rightOffset, left: combinedLeft, bottom }
 }

package/src/utils/getSafeZoneInset.test.js

@@ -1,7 +1,7 @@
 import { getSafeZoneInset } from './getSafeZoneInset'
 
 describe('getSafeZoneInset', () => {
-  let mainRef, insetRef, rightRef, footerRef, actionsRef
+  let mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef
   let originalGetComputedStyle
 
   beforeAll(() => { originalGetComputedStyle = window.getComputedStyle })
@@ -10,80 +10,124 @@ describe('getSafeZoneInset', () => {
   beforeEach(() => {
     mainRef = { current: { offsetWidth: 800, offsetHeight: 600, offsetLeft: 0 } }
     insetRef = { current: { offsetWidth: 100, offsetHeight: 50, offsetTop: 50, offsetLeft: 20 } }
-    rightRef = { current: { offsetWidth: 50, offsetLeft: 0 } }
-    footerRef = { current: { offsetTop: 550 } }
+    leftRef = { current: { offsetWidth: 50, offsetLeft: 20, offsetTop: 10 } }
+    rightRef = { current: { offsetWidth: 50, offsetLeft: 730 } }
     actionsRef = { current: { offsetTop: 520 } }
+    footerRef = { current: { offsetTop: 550 } }
 
-    // Mock CSS var --divider-gap = 10
+    // CSS var mock
     window.getComputedStyle = jest.fn().mockReturnValue({ getPropertyValue: () => '10' })
   })
 
-  const runScenario = ({ isLandscape, insetHeight }) => {
-    insetRef.current.offsetHeight = insetHeight
+  it('returns undefined if any ref.current is null', () => {
+    const result = getSafeZoneInset({
+      mainRef: { current: null },
+      insetRef,
+      leftRef,
+      rightRef,
+      actionsRef,
+      footerRef
+    })
+    expect(result).toBeUndefined()
+  })
 
-    // Manipulate dimensions to influence landscape heuristic
-    if (isLandscape) {
-      mainRef.current.offsetWidth = 1000
-      insetRef.current.offsetWidth = 400
-    } else {
-      mainRef.current.offsetWidth = 600
-      insetRef.current.offsetWidth = 100
-    }
+  it('portrait mode shifts inset below itself when it does NOT have enough vertical room', () => {
+    // Mock layout
+    mainRef.current.offsetWidth = 200
+    mainRef.current.offsetHeight = 200
+    insetRef.current.offsetWidth = 100
+    insetRef.current.offsetHeight = 50
+    insetRef.current.offsetTop = 50
+    insetRef.current.offsetLeft = 20
 
-    return getSafeZoneInset({ mainRef, insetRef, rightRef, footerRef, actionsRef })
-  }
+    leftRef.current.offsetWidth = 50
+    leftRef.current.offsetLeft = 10
+    leftRef.current.offsetTop = 10
 
-  it('topOffset adds 0 when portrait and height = 0', () => {
-    const result = runScenario({ isLandscape: false, insetHeight: 0 })
-    expect(result.top).toBe(insetRef.current.offsetTop)
-  })
+    rightRef.current.offsetWidth = 50
+    rightRef.current.offsetLeft = 140
 
-  it('landscape returns left = rightOffset when there is enough room', () => {
-    const result = runScenario({ isLandscape: true, insetHeight: 50 })
-    expect(result.top).toBe(insetRef.current.offsetTop)
-    expect(result.left).toBe(80) // rightOffset = 20 + 50 + 10
-    expect(result.left).toBe(result.right) // left equals returned rightOffset
-  })
+    actionsRef.current.offsetTop = 150
+    footerRef.current.offsetTop = 180
 
-  it('landscape returns left = rightOffset even when inset height = 0', () => {
-    const result = runScenario({ isLandscape: true, insetHeight: 0 })
-    expect(result.top).toBe(insetRef.current.offsetTop)
-    expect(result.left).toBe(80)
-    expect(result.left).toBe(result.right)
+    const dividerGap = 10
+
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+
+    // Compute expected values exactly as function would
+    const availableHeight = actionsRef.current.offsetTop - insetRef.current.offsetTop - dividerGap // 150 - 50 - 10 = 90
+    const leftOffset = leftRef.current.offsetLeft + leftRef.current.offsetWidth + dividerGap // 10 + 50 + 10 = 70
+    const rightOffset = leftRef.current.offsetLeft + rightRef.current.offsetWidth + dividerGap // 10 + 50 + 10 = 70
+    const availableWidth = mainRef.current.offsetWidth - (leftOffset + rightOffset) // 200 - (70+70) = 60
+    const insetOverlapWidth = insetRef.current.offsetWidth - leftOffset + leftRef.current.offsetLeft // 100 - 70 + 10 = 40
+    const isLandscape = availableWidth - insetOverlapWidth > availableHeight - insetRef.current.offsetHeight // 60-40 > 90-50 => 20>40 false
+
+    const topOffset = leftRef.current.offsetTop + (!isLandscape && insetRef.current.offsetHeight > 0 ? insetRef.current.offsetHeight + dividerGap : 0) // 10 + 50 +10 = 70
+    const combinedLeftOffset = isLandscape ? Math.max(insetRef.current.offsetWidth, leftRef.current.offsetWidth) + leftRef.current.offsetLeft + dividerGap : rightOffset // isLandscape=false -> 70
+    const actionsOffset = mainRef.current.offsetHeight - actionsRef.current.offsetTop // 200-150=50
+    const footerOffset = mainRef.current.offsetHeight - footerRef.current.offsetTop // 200-180=20
+    const hasRoom = insetOverlapWidth < availableWidth / 2 && insetRef.current.offsetHeight < availableHeight / 2 // 40 < 60/2? 40<30 false
+
+    const expectedTop = hasRoom ? insetRef.current.offsetTop : topOffset // false -> topOffset = 70
+    const expectedLeft = mainRef.current.offsetLeft + (hasRoom ? rightOffset : combinedLeftOffset) // 0+70=70
+    const expectedRight = rightOffset // 70
+    const expectedBottom = Math.max(actionsOffset, footerOffset) + dividerGap // max(50,20)+10 = 60
+
+    expect(result.top).toBe(expectedTop)
+    expect(result.left).toBe(expectedLeft)
+    expect(result.right).toBe(expectedRight)
+    expect(result.bottom).toBe(expectedBottom)
   })
 
-  it('portrait shifts inset below itself when it does NOT have enough vertical room', () => {
-    // Force a portrait overflow case
-    mainRef.current.offsetWidth = 200
-    insetRef.current.offsetWidth = 100
+  it('landscape mode places inset beside panel when enough room', () => {
+    mainRef.current.offsetWidth = 1000
+    insetRef.current.offsetWidth = 200
     insetRef.current.offsetHeight = 50
-    insetRef.current.offsetTop = 50
-    window.getComputedStyle = jest.fn().mockReturnValue({ getPropertyValue: () => '10' })
 
-    const result = getSafeZoneInset({ mainRef, insetRef, rightRef, footerRef, actionsRef })
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+
+    const dividerGap = 10
+    const leftOffset = leftRef.current.offsetLeft + leftRef.current.offsetWidth + dividerGap
+    const rightOffset = leftRef.current.offsetLeft + rightRef.current.offsetWidth + dividerGap
+    const availableWidth = mainRef.current.offsetWidth - (leftOffset + rightOffset)
+    const insetOverlapWidth = insetRef.current.offsetWidth - leftOffset + leftRef.current.offsetLeft
+    const availableHeight = actionsRef.current.offsetTop - insetRef.current.offsetTop - dividerGap
+    const isLandscape = availableWidth - insetOverlapWidth > availableHeight - insetRef.current.offsetHeight
+
+    const topOffset = leftRef.current.offsetTop + (!isLandscape && insetRef.current.offsetHeight > 0 ? insetRef.current.offsetHeight + dividerGap : 0)
+    const combinedLeftOffset = isLandscape ? Math.max(insetRef.current.offsetWidth, leftRef.current.offsetWidth) + leftRef.current.offsetLeft + dividerGap : rightOffset
+    const actionsOffset = mainRef.current.offsetHeight - actionsRef.current.offsetTop
+    const footerOffset = mainRef.current.offsetHeight - footerRef.current.offsetTop
+    const hasRoom = insetOverlapWidth < availableWidth / 2 && insetRef.current.offsetHeight < availableHeight / 2
+    const top = hasRoom ? insetRef.current.offsetTop : topOffset
+    const combinedLeft = mainRef.current.offsetLeft + (hasRoom ? rightOffset : combinedLeftOffset)
+    const bottom = Math.max(actionsOffset, footerOffset) + dividerGap
 
-    // topOffset = 50 + 50 + 10 = 110
-    expect(result.top).toBe(110)
-    // left = rightOffset = 20 + 50 + 10 = 80
-    expect(result.left).toBe(80)
-    expect(result.right).toBe(80)
+    expect(result.top).toBe(top)
+    expect(result.left).toBe(combinedLeft)
+    expect(result.right).toBe(rightOffset)
+    expect(result.bottom).toBe(bottom)
   })
 
-  /**
-   * 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 }
-    }
+  it('portrait mode with zero inset height leaves top unchanged', () => {
+    insetRef.current.offsetHeight = 0
+    mainRef.current.offsetWidth = 500
+    insetRef.current.offsetWidth = 100
 
-    const result = getSafeZoneInset(unattachedRefs)
-    expect(result).toBeUndefined()
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+    expect(result.top).toBe(insetRef.current.offsetTop)
+  })
+
+  it('calculates correct bottom using max of actions and footer offsets', () => {
+    mainRef.current.offsetHeight = 600
+    actionsRef.current.offsetTop = 500
+    footerRef.current.offsetTop = 550
+
+    const result = getSafeZoneInset({ mainRef, insetRef, leftRef, rightRef, actionsRef, footerRef })
+
+    const dividerGap = 10
+    const expectedBottom = Math.max(mainRef.current.offsetHeight - actionsRef.current.offsetTop,
+      mainRef.current.offsetHeight - footerRef.current.offsetTop) + dividerGap
+    expect(result.bottom).toBe(expectedBottom)
   })
 })