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

package/src/App/renderer/mapPanels.js

@@ -1,6 +1,5 @@
 // src/core/renderers/mapPanels.js
 import React from 'react'
-import { stringToKebab } from '../../utils/stringToKebab.js'
 import { withPluginContexts } from './pluginWrapper.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { allowedSlots } from './slots.js'
@@ -12,7 +11,7 @@ import { resolveTargetSlot, isModeAllowed, isConsumerHtml } from './slotHelpers.
  * and ensures only the topmost modal panel is shown.
  */
 const isPanelVisible = (panelId, config, bpConfig, { targetSlot, slot, mode, isFullscreen, allowedModalPanelId }) => {
-  const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
+  const isNextToButton = targetSlot.endsWith('-button')
   if (!allowedSlots.panel.includes(targetSlot) && !isNextToButton) {
     return false
   }

package/src/App/renderer/mapPanels.test.js

@@ -7,7 +7,7 @@ jest.mock('../registry/panelRegistry.js')
 jest.mock('../registry/pluginRegistry.js', () => ({ registeredPlugins: [] }))
 jest.mock('./pluginWrapper.js', () => ({ withPluginContexts: jest.fn((c) => c) }))
 jest.mock('../components/Panel/Panel.jsx', () => ({ Panel: (props) => <div data-testid='panel' {...props} /> }))
-jest.mock('./slots.js', () => ({ allowedSlots: { panel: ['header', 'modal', 'inset'] } }))
+jest.mock('./slots.js', () => ({ allowedSlots: { panel: ['header', 'modal', 'left-top'] } }))
 
 describe('mapPanels', () => {
   const baseConfig = {
@@ -145,7 +145,7 @@ describe('mapPanels', () => {
     expect(map()).toHaveLength(1)
   })
 
-  it('replaces bottom slot with inset on non-mobile breakpoints', () => {
+  it('replaces bottom slot with left-top on non-mobile breakpoints', () => {
     defaultAppState.panelConfig = ({
       p1: {
         desktop: { slot: 'bottom' },
@@ -153,7 +153,7 @@ describe('mapPanels', () => {
       }
     })
 
-    const result = map(defaultAppState, 'inset')
+    const result = map(defaultAppState, 'left-top')
     expect(result).toHaveLength(1)
     expect(result[0].id).toBe('p1')
   })

package/src/App/renderer/slotHelpers.js

@@ -4,14 +4,14 @@ import { allowedSlots } from './slots.js'
 /**
  * Resolves the target slot for a panel based on its breakpoint config.
  * Modal panels always render in the 'modal' slot, and the bottom slot
- * is only available on mobile — tablet and desktop fall back to 'inset'.
+ * is only available on mobile — tablet and desktop fall back to 'left-top'.
  */
 export const resolveTargetSlot = (bpConfig, breakpoint) => {
   if (bpConfig.modal) {
     return 'modal'
   }
   if (bpConfig.slot === 'bottom' && ['tablet', 'desktop'].includes(breakpoint)) {
-    return 'inset'
+    return 'left-top'
   }
   return bpConfig.slot
 }

package/src/App/renderer/slotHelpers.test.js

@@ -7,9 +7,9 @@ describe('resolveTargetSlot', () => {
     expect(resolveTargetSlot({ modal: true, slot: 'side' }, 'desktop')).toBe('modal')
   })
 
-  it('replaces bottom with inset on tablet and desktop', () => {
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'tablet')).toBe('inset')
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'desktop')).toBe('inset')
+  it('replaces bottom with left-top on tablet and desktop', () => {
+    expect(resolveTargetSlot({ slot: 'bottom' }, 'tablet')).toBe('left-top')
+    expect(resolveTargetSlot({ slot: 'bottom' }, 'desktop')).toBe('left-top')
   })
 
   it('keeps bottom on mobile', () => {

package/src/App/renderer/slots.js

@@ -5,10 +5,11 @@ export const layoutSlots = Object.freeze({
   TOP_LEFT: 'top-left',
   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',
@@ -20,7 +21,6 @@ export const allowedSlots = Object.freeze({
     layoutSlots.BANNER,
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_RIGHT,
-    layoutSlots.INSET,
     layoutSlots.MIDDLE,
     layoutSlots.FOOTER_RIGHT,
     layoutSlots.BOTTOM,
@@ -29,17 +29,20 @@ export const allowedSlots = Object.freeze({
   panel: [
     layoutSlots.SIDE,
     layoutSlots.BANNER,
-    layoutSlots.INSET,
-    layoutSlots.RIGHT_BOTTOM,
+    layoutSlots.LEFT_TOP,
+    layoutSlots.LEFT_BOTTOM,
     layoutSlots.MIDDLE,
-    layoutSlots.BOTTOM,
-    layoutSlots.ACTIONS,
-    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

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

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

@@ -189,7 +189,7 @@ describe('appDispatchMiddleware', () => {
 
       expect(eventBus.emit).toHaveBeenCalledWith(
         events.APP_PANEL_OPENED,
-        { panelId: 'newPanel', slot: 'inset' }
+        { panelId: 'newPanel', slot: 'left-top' }
       )
     })
 
@@ -204,7 +204,7 @@ describe('appDispatchMiddleware', () => {
 
       expect(eventBus.emit).toHaveBeenCalledWith(
         events.APP_PANEL_OPENED,
-        { panelId: 'geoPanel', slot: 'inset', visibleGeometry }
+        { panelId: 'geoPanel', slot: 'left-top', visibleGeometry }
       )
     })
 

package/src/config/appConfig.js

@@ -120,14 +120,14 @@ export const defaultPanelConfig = {
     showLabel: true
   },
   tablet: {
-    slot: 'inset',
+    slot: 'left-top',
     open: true,
     dismissible: true,
     modal: false,
     showLabel: true
   },
   desktop: {
-    slot: 'inset',
+    slot: 'left-top',
     open: true,
     dismissible: true,
     modal: false,
@@ -144,10 +144,10 @@ export const defaultControlConfig = {
     slot: 'bottom'
   },
   tablet: {
-    slot: 'inset'
+    slot: 'left-top'
   },
   desktop: {
-    slot: 'inset'
+    slot: 'left-top'
   }
 }
 

package/src/utils/getSafeZoneInset.js

@@ -1,56 +1,156 @@
 /**
  * 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.
+ * not hidden behind overlay panels or structural UI (button columns, footer,
+ * action bar). Used as padding for map operations like fitBounds or setView
+ * so the target location or extent is fully 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.
+ * Each edge inset is driven by:
+ *   - A structural baseline from the button columns, footer, and action bar.
+ *   - A panel contribution when panels on that edge cover more than 1/RATIO
+ *     of the available map dimension along that edge.
+ *   - A cap so no single inset exceeds 1/MAX_RATIO of the map dimension,
+ *     preventing fitBounds from zooming out to a corner when panels are large.
  *
- * @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).
+ * Trigger logic per edge:
+ *   - left / right : combined HEIGHT of panels in that column vs available height
+ *   - top / bottom : WIDTH of panels in that row vs available width
+ *
+ * When a panel individually exceeds BOTH the height and width thresholds it
+ * would otherwise trigger both adjacent edges, pushing the safe zone into the
+ * opposite corner. To prevent this, such panels are classified as either
+ * "column-primary" (h/availableH ≥ w/availableW) or "row-primary" and only
+ * contribute to their dominant edge. Panels that exceed at most one threshold
+ * are never in conflict and contribute to both axes freely.
+ *
+ * @param {Object} refs - React refs from layoutRefs.
+ * @param {React.RefObject}  refs.mainRef          - Main map container.
+ * @param {React.RefObject}  refs.leftRef          - Left button column.
+ * @param {React.RefObject}  refs.rightRef         - Right button column.
+ * @param {React.RefObject}  refs.actionsRef       - Bottom action bar.
+ * @param {React.RefObject}  refs.footerRef        - Footer (logo, copyright, etc).
+ * @param {React.RefObject} [refs.leftTopRef]      - Top-left panel slot.
+ * @param {React.RefObject} [refs.leftBottomRef]   - Bottom-left panel slot.
+ * @param {React.RefObject} [refs.rightTopRef]     - Top-right panel slot.
+ * @param {React.RefObject} [refs.rightBottomRef]  - Bottom-right panel slot.
  * @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.
+ *   Pixel insets from each edge of the main area, or undefined if any required ref is missing.
  */
+
+const RATIO = 2 // panels covering more than 1/RATIO of an edge trigger that edge's inset
+const MAX_RATIO = 3 // each inset is capped at 1/MAX_RATIO of its map dimension
+
+// Query the panel element directly within its slot container.
+// Only the first panel matters, and only when it is also the first element in the slot
+// (i.e. no buttons or other elements precede it — a panel pushed down by buttons is
+// already within the button-column structural inset and should not add extra padding).
+const getPanelDimensions = (slotRef) => {
+  if (!slotRef?.current) {
+    return { offsetWidth: 0, offsetHeight: 0 }
+  }
+  const first = slotRef.current.firstElementChild
+  if (!first?.classList.contains('im-c-panel') || first.offsetWidth === 0 || first.offsetHeight === 0) {
+    return { offsetWidth: 0, offsetHeight: 0 }
+  }
+  return { offsetWidth: first.offsetWidth, offsetHeight: first.offsetHeight }
+}
+
+// Panels are in normal flow inside slot containers, expanding left/right offsetWidth.
+// Query button groups directly to recover the button-only structural column width.
+const getButtonColWidth = (colRef) => {
+  const group = colRef?.current?.querySelector('.im-c-button-group')
+  return group ? group.offsetWidth : 0
+}
+
+// Returns the panel's contribution to column (left/right) and row (top/bottom) edges.
+//
+// A panel can only trigger BOTH adjacent edges simultaneously when it individually
+// exceeds both the height threshold (h > availableH/RATIO) and the width threshold
+// (w > availableW/RATIO). In that case, only the dominant direction is used, preventing
+// a corner panel from pushing the safe zone into the opposite corner.
+// When only one (or neither) threshold is individually exceeded, the panel contributes
+// its dimensions to both axes freely (combined thresholds still apply later).
+const panelContrib = (w, h, availableW, availableH) => {
+  const hFrac = h / availableH
+  const wFrac = w / availableW
+  if (hFrac >= 1 / RATIO && wFrac >= 1 / RATIO) {
+    return hFrac >= wFrac
+      ? { colH: h, colW: w, rowW: 0, rowH: 0 } // column-primary (left/right)
+      : { colH: 0, colW: 0, rowW: w, rowH: h } // row-primary (top/bottom)
+  }
+  return { colH: h, colW: w, rowW: w, rowH: h }
+}
+
+// Determines the column (left/right) inset and the row-axis contributions for both panels.
+//
+// Column coverage uses raw heights so that two panels whose combined height exceeds the
+// threshold always trigger the column inset, even if one is individually row-primary.
+// Exception: a single row-primary panel (no sibling, colH=0) is suppressed so it
+// contributes to top/bottom instead — giving a larger safe zone in the horizontal direction.
+// When triggered, row contributions for both panels are zeroed to prevent double-padding.
+const computeColumn = (panelA, panelB, availableW, availableH, hThreshold, columnLeft, gap) => {
+  const a = panelContrib(panelA.offsetWidth, panelA.offsetHeight, availableW, availableH)
+  const b = panelContrib(panelB.offsetWidth, panelB.offsetHeight, availableW, availableH)
+  const aSingleRowPrimary = panelB.offsetHeight === 0 && a.colH === 0
+  const bSingleRowPrimary = panelA.offsetHeight === 0 && b.colH === 0
+  const coverage = panelA.offsetHeight + panelB.offsetHeight + (panelA.offsetHeight > 0 && panelB.offsetHeight > 0 ? gap : 0)
+  const triggered = coverage > hThreshold && !aSingleRowPrimary && !bSingleRowPrimary
+  return {
+    panelInset: triggered ? columnLeft + Math.max(panelA.offsetWidth, panelB.offsetWidth) + gap : 0,
+    rowA: triggered ? { w: 0, h: 0 } : { w: a.rowW, h: a.rowH },
+    rowB: triggered ? { w: 0, h: 0 } : { w: b.rowW, h: b.rowH }
+  }
+}
+
+// Determines the row-axis (top/bottom) panel inset driven by combined panel width.
+// The combined width test subsumes the individual checks (dimensions are non-negative).
+const computeRow = (leftW, rightW, leftH, rightH, wThreshold, baseInset, gap) =>
+  leftW + rightW > wThreshold ? baseInset + Math.max(leftH, rightH) + gap : 0
+
 export const getSafeZoneInset = ({
-  mainRef,
-  insetRef,
-  rightRef,
-  actionsRef,
-  footerRef
+  mainRef, leftRef, rightRef, actionsRef, footerRef,
+  leftTopRef, leftBottomRef, rightTopRef, rightBottomRef
 }) => {
-  const refs = [mainRef, insetRef, rightRef, actionsRef, footerRef]
-
-  if (refs.some(ref => !ref.current)) {
+  if ([mainRef, leftRef, rightRef, actionsRef, footerRef].some(ref => !ref?.current)) {
     return undefined
   }
 
-  const [main, inset, right, actions, footer] = refs.map(ref => ref.current)
+  const main = mainRef.current; const left = leftRef.current
+  const actions = actionsRef.current; const footer = footerRef.current
+
+  const gap = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--divider-gap'), 10)
+
+  const rawTL = getPanelDimensions(leftTopRef); const rawBL = getPanelDimensions(leftBottomRef)
+  const rawTR = getPanelDimensions(rightTopRef); const rawBR = getPanelDimensions(rightBottomRef)
 
-  const root = document.documentElement
-  const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
+  // Structural base insets — always present, never capped.
+  const colWidth = Math.max(getButtonColWidth(leftRef), getButtonColWidth(rightRef))
+  const baseLeft = main.offsetLeft + left.offsetLeft + colWidth + gap
+  const baseRight = left.offsetLeft + colWidth + gap
+  const baseTop = left.offsetTop
+  const footerInset = main.offsetHeight - footer.offsetTop + gap // mirrors --left/right-offset-bottom CSS var
+  const baseBottom = Math.max(main.offsetHeight - actions.offsetTop + gap, footerInset)
 
-  // === 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 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 actionsOffset = main.offsetHeight - actions.offsetTop
-  const footerOffset = main.offsetHeight - footer.offsetTop
+  const availableH = main.offsetHeight - baseTop - baseBottom
+  const availableW = main.offsetWidth - (baseLeft - main.offsetLeft) - baseRight
 
-  const RATIO = 2 // At what point is there enough room to leave the inset above
-  const hasRoom = insetOverlapWidth < availableWidth / RATIO && inset.offsetHeight < availableHeight / RATIO
+  const leftCol = computeColumn(rawTL, rawBL, availableW, availableH, availableH / RATIO, main.offsetLeft + left.offsetLeft, gap)
+  const rightCol = computeColumn(rawTR, rawBR, availableW, availableH, availableH / RATIO, left.offsetLeft, gap)
 
-  const top = hasRoom ? inset.offsetTop : topOffset
-  const left = main.offsetLeft + (hasRoom ? rightOffset : Math.max(leftOffset, rightOffset))
-  const bottom = Math.max(actionsOffset, footerOffset) + dividerGap
+  const leftPanelInset = leftCol.panelInset
+  const rightPanelInset = rightCol.panelInset
+  const topPanelInset = computeRow(leftCol.rowA.w, rightCol.rowA.w, leftCol.rowA.h, rightCol.rowA.h, availableW / RATIO, baseTop, gap)
+  const bottomPanelInset = computeRow(leftCol.rowB.w, rightCol.rowB.w, leftCol.rowB.h, rightCol.rowB.h, availableW / RATIO, footerInset, gap)
 
-  return { top, right: rightOffset, left, bottom }
+  const usableW = main.offsetWidth - 2 * gap
+  const usableH = main.offsetHeight - 2 * gap
+  const maxL = main.offsetLeft + usableW * (MAX_RATIO - 1) / MAX_RATIO
+  const maxR = usableW * (MAX_RATIO - 1) / MAX_RATIO
+  const maxV = usableH * (MAX_RATIO - 1) / MAX_RATIO
+
+  return {
+    left: Math.max(baseLeft, Math.min(leftPanelInset, maxL)),
+    right: Math.max(baseRight, Math.min(rightPanelInset, maxR)),
+    top: Math.max(baseTop, Math.min(topPanelInset, maxV)),
+    bottom: Math.max(baseBottom, Math.min(bottomPanelInset, maxV))
+  }
 }