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

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

@@ -63,4 +63,4 @@ describe('applyPreventDefaultFix', () => {
     e.preventDefault()
     expect(spy).toHaveBeenCalled()
   })
-})
+})

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/components/Panel/Panel.module.scss

@@ -14,6 +14,7 @@
     display: flex;
     flex-direction: column;
     max-height: 100vh;
+    min-height: 0;
     min-width: var(--min-panel-width);
     pointer-events: auto;
     background-color: var(--background-color);

package/src/App/hooks/useLayoutMeasurements.js

@@ -12,9 +12,6 @@ const topColWidth = (left, right) =>
 const subSlotMaxHeight = (columnHeight, siblingButtons, gap) =>
   columnHeight - (siblingButtons ? siblingButtons + gap : 0)
 
-const calcOffsetLeft = (bottomOffsetTop, gap, insetBottom, inset) =>
-  bottomOffsetTop - gap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
-
 export function useLayoutMeasurements () {
   const { dispatch, breakpoint, layoutRefs } = useApp()
   const { mapSize, isMapReady } = useMap()
@@ -26,7 +23,6 @@ export function useLayoutMeasurements () {
     topRef,
     topLeftColRef,
     topRightColRef,
-    insetRef,
     footerRef,
     actionsRef,
     leftTopRef,
@@ -44,11 +40,9 @@ export function useLayoutMeasurements () {
     const top = topRef.current
     const topLeftCol = topLeftColRef.current
     const topRightCol = topRightColRef.current
-    const inset = insetRef.current
     const bottom = footerRef.current
-    const actions = actionsRef.current
 
-    if ([main, top, inset, bottom].some(r => !r)) {
+    if ([main, top, bottom].some(r => !r)) {
       return
     }
 
@@ -77,9 +71,6 @@ export function useLayoutMeasurements () {
     appContainer.style.setProperty('--left-bottom-panel-max-height', `${subSlotMaxHeight(leftColumnHeight, buttonHeight(leftTopRef), dividerGap)}px`)
     appContainer.style.setProperty('--right-top-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightBottomRef), dividerGap)}px`)
     appContainer.style.setProperty('--right-bottom-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightTopRef), dividerGap)}px`)
-
-    // === Bottom left offset ===
-    appContainer.style.setProperty('--offset-left', `${calcOffsetLeft(Math.min(bottom.offsetTop, actions.offsetTop), dividerGap, inset.offsetHeight + leftOffsetTop, inset)}px`)
   }
 
   // --------------------------------

package/src/App/hooks/useLayoutMeasurements.test.js

@@ -24,7 +24,6 @@ const refs = (o = {}) => ({
   topRef: { current: o.top === null ? null : el({ offsetTop: 10, ...o.top }) },
   topLeftColRef: { current: el({ offsetHeight: 50, offsetWidth: 200, ...o.topLeftCol }) },
   topRightColRef: { current: el({ offsetHeight: 40, offsetWidth: 180, ...o.topRightCol }) },
-  insetRef: { current: o.inset === null ? null : el({ offsetHeight: 100, offsetLeft: 20, offsetWidth: 300, ...o.inset }) },
   footerRef: { current: o.footer === null ? null : el({ offsetTop: 400, ...o.footer }) },
   actionsRef: { current: el({ offsetTop: 450, ...o.actions }) },
   leftTopRef: { current: el({ offsetHeight: 0, ...o.leftTop }) },
@@ -57,7 +56,7 @@ describe('useLayoutMeasurements', () => {
   })
 
   test('early return when required refs are null', () => {
-    const { layoutRefs } = setup({ refs: { main: null, top: null, inset: null, footer: null } })
+    const { layoutRefs } = setup({ refs: { main: null, top: null, footer: null } })
     renderHook(() => useLayoutMeasurements())
     expect(layoutRefs.appContainerRef.current.style.setProperty).not.toHaveBeenCalled()
   })
@@ -66,13 +65,11 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     const spy = layoutRefs.appContainerRef.current.style.setProperty
-    ;['--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
+    ;['--right-offset-top', '--right-offset-bottom', '--top-col-width']
       .forEach(prop => expect(spy).toHaveBeenCalledWith(prop, expect.any(String)))
   })
 
   test.each([
-    ['offset-left with overlap', { inset: { offsetHeight: 200, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 100 }, actions: { offsetTop: 120 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '180px'],
-    ['offset-left without overlap', { inset: { offsetHeight: 50, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 200 }, actions: { offsetTop: 220 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '0px'],
     ['right-offset-top', { topRightCol: { offsetHeight: 80 }, top: { offsetTop: 15 } }, '95px'],
     ['right-offset-bottom', { main: { offsetHeight: 600 }, footer: { offsetTop: 500 } }, '108px'],
     // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342

package/src/App/hooks/useVisibleGeometry.js

@@ -31,14 +31,8 @@ export const getPointCoordinates = (geojson) => {
   return null
 }
 
-const SLOT_REFS = {
-  inset: 'insetRef',
-  bottom: 'bottomRef',
-  side: 'sideRef'
-}
-
 export const useVisibleGeometry = () => {
-  const { mapProvider, eventBus } = useConfig()
+  const { id, mapProvider, eventBus } = useConfig()
   const { layoutRefs, panelConfig, panelRegistry, breakpoint } = useApp()
 
   const latestRef = useRef({ layoutRefs, panelConfig, panelRegistry, breakpoint })
@@ -49,14 +43,13 @@ export const useVisibleGeometry = () => {
       return undefined
     }
 
-    const handlePanelOpened = ({ panelId, slot: eventSlot, visibleGeometry: eventVisibleGeometry }) => {
-      const { panelConfig: config, panelRegistry: registry, layoutRefs: refs, breakpoint: bp } = latestRef.current
+    const handlePanelOpened = ({ panelId, visibleGeometry: eventVisibleGeometry }) => {
+      const { panelConfig: config, panelRegistry: registry } = latestRef.current
       const resolvedConfig = config?.[panelId] ? config : (registry?.getPanelConfig() ?? config)
       const visibleGeometry = eventVisibleGeometry ?? resolvedConfig?.[panelId]?.visibleGeometry
-      const slot = eventSlot ?? resolvedConfig?.[panelId]?.[bp]?.slot
-      const slotRef = refs[SLOT_REFS[slot]]
+      const panel = layoutRefs.appContainerRef.current?.querySelector(`#${id}-panel-${panelId}`)
 
-      if (!visibleGeometry || !slotRef) {
+      if (!visibleGeometry) {
         return
       }
       if (typeof mapProvider.isGeometryObscured !== 'function') {
@@ -64,7 +57,8 @@ export const useVisibleGeometry = () => {
       }
 
       const waitForPanel = () => {
-        const panelRect = slotRef.current?.getBoundingClientRect()
+        if (!panel) { return }
+        const panelRect = panel.getBoundingClientRect()
 
         if (!panelRect || panelRect.width === 0 || panelRect.height === 0) {
           // Not ready yet, check on the next animation frame

package/src/App/hooks/useVisibleGeometry.test.js

@@ -10,8 +10,16 @@ const pointFeature = { type: 'Feature', geometry: { type: 'Point', coordinates:
 const multiPointFeature = { type: 'Feature', geometry: { type: 'MultiPoint', coordinates: [[1, 51], [2, 52]] }, properties: {} }
 const polygonFeature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
 
-const insetPanelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
-const bottomPanelRect = { left: 0, top: 500, right: 1000, bottom: 800, width: 1000, height: 300 }
+const APP_ID = 'test'
+const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+// Creates a panel DOM element with id matching what useVisibleGeometry queries.
+const makePanelEl = (panelId, rect = panelRect) => {
+  const el = document.createElement('div')
+  el.id = `${APP_ID}-panel-${panelId}`
+  el.getBoundingClientRect = jest.fn(() => rect)
+  return el
+}
 
 const setup = (overrides = {}) => {
   const capturedHandlers = {}
@@ -27,19 +35,18 @@ const setup = (overrides = {}) => {
     ...overrides.eventBus
   }
 
-  const insetEl = document.createElement('div')
-  insetEl.getBoundingClientRect = jest.fn(() => insetPanelRect)
-  const bottomEl = document.createElement('div')
-  bottomEl.getBoundingClientRect = jest.fn(() => bottomPanelRect)
+  // appContainerRef holds panel elements that the hook queries by id
+  const appContainer = document.createElement('div')
+  const myPanelEl = makePanelEl('myPanel')
+  appContainer.appendChild(myPanelEl)
 
   const layoutRefs = {
     mainRef: { current: document.createElement('div') },
-    insetRef: { current: insetEl },
-    bottomRef: { current: bottomEl },
+    appContainerRef: { current: appContainer },
     ...overrides.layoutRefs
   }
   const panelConfig = {
-    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'inset' } },
+    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'left-top' } },
     emptyPanel: {},
     ...overrides.panelConfig
   }
@@ -48,10 +55,10 @@ const setup = (overrides = {}) => {
     ...overrides.panelRegistry
   }
 
-  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
+  useConfig.mockReturnValue({ id: APP_ID, mapProvider, eventBus, ...overrides.config })
   useApp.mockReturnValue({ layoutRefs, panelConfig, panelRegistry, breakpoint: 'desktop', ...overrides.app })
 
-  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, insetEl, bottomEl }
+  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, myPanelEl, appContainer }
 }
 
 describe('useVisibleGeometry', () => {
@@ -102,12 +109,14 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
   })
 
-  test('does nothing when panel has visibleGeometry but no slot config', () => {
+  test('does nothing when panel element is not in the DOM', () => {
+    // Panel has visibleGeometry and slot config but its DOM element is not mounted yet
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { noSlotPanel: { visibleGeometry: polygonFeature } }
+      panelConfig: { noElPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'left-top' } } }
     })
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'noSlotPanel' })
+    capturedHandlers['app:panelopened']({ panelId: 'noElPanel' })
+    jest.runAllTimers()
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
   })
 
@@ -118,19 +127,20 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
   })
 
-  test('does nothing when slot ref has zero dimensions (panel not visible)', () => {
-    const zeroEl = document.createElement('div')
-    zeroEl.getBoundingClientRect = jest.fn(() => ({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }))
+  test('does nothing when panel element has zero dimensions (panel not yet visible)', () => {
+    const zeroRect = { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('myPanel', zeroRect))
     const { mapProvider, capturedHandlers } = setup({
       layoutRefs: {
         mainRef: { current: document.createElement('div') },
-        insetRef: { current: zeroEl }
+        appContainerRef: { current: appContainer }
       }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
 
-    // Run the current pending animation frame
+    // Run only the first pending animation frame — panel has zero size so it reschedules
     jest.runOnlyPendingTimers()
 
     expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
@@ -151,14 +161,17 @@ describe('useVisibleGeometry', () => {
     capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
     jest.runAllTimers()
 
-    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, insetPanelRect)
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, panelRect)
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
     expect(mapProvider.setView).not.toHaveBeenCalled()
   })
 
   test('calls setView with center for Point geometry when obscured', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('pointPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'pointPanel' })
@@ -169,8 +182,11 @@ describe('useVisibleGeometry', () => {
   })
 
   test('calls setView with first coordinate for MultiPoint geometry when obscured', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('mpPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'mpPanel' })
@@ -182,8 +198,11 @@ describe('useVisibleGeometry', () => {
 
   test('calls fitToBounds for a raw non-Feature geometry (e.g. Polygon) when obscured', () => {
     const rawPolygon = { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('geoPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'inset' } } }
+      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'geoPanel' })
@@ -194,8 +213,11 @@ describe('useVisibleGeometry', () => {
 
   test('calls setView for a raw Point geometry (not Feature-wrapped) when obscured', () => {
     const rawPoint = { type: 'Point', coordinates: [1, 51] }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('rawPointPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'inset' } } }
+      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'rawPointPanel' })
@@ -206,8 +228,11 @@ describe('useVisibleGeometry', () => {
 
   test('does not call setView when Point feature has null coordinates', () => {
     const nullCoordsFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: null }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('nullPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'inset' } } }
+      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'left-top' } } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'nullPanel' })
@@ -216,26 +241,14 @@ describe('useVisibleGeometry', () => {
     expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
   })
 
-  test('uses bottom slot ref when panel is in bottom slot', () => {
-    const { mapProvider, capturedHandlers } = setup({
-      panelConfig: { bottomPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'bottom' } } }
-    })
-    renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'bottomPanel' })
-    jest.runAllTimers()
-
-    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, bottomPanelRect)
-    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
-  })
-
   test('uses latest panelConfig via ref when it changes between renders', () => {
-    const { mapProvider, capturedHandlers, insetEl } = setup()
+    const { mapProvider, capturedHandlers, appContainer } = setup()
     const { rerender } = renderHook(() => useVisibleGeometry())
 
     const updatedGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] }, properties: {} }
-    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'inset' } } }
+    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'left-top' } } }
     useApp.mockReturnValue({
-      layoutRefs: { mainRef: { current: document.createElement('div') }, insetRef: { current: insetEl } },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } },
       panelConfig: updatedPanelConfig,
       panelRegistry: { getPanelConfig: jest.fn(() => updatedPanelConfig) },
       breakpoint: 'desktop'
@@ -249,20 +262,26 @@ describe('useVisibleGeometry', () => {
 
   test('uses slot from event payload when registry config lacks slot info', () => {
     const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('freshPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     // Event includes slot (as middleware provides for ADD_PANEL); registry config has no slot info
-    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'inset' })
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'left-top' })
     jest.runAllTimers()
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
   })
 
   test('falls back to panelRegistry for panels not yet in stale panelConfig', () => {
     const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('freshPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'inset' } } })) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'left-top' } } })) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
     capturedHandlers['app:panelopened']({ panelId: 'freshPanel' })
@@ -271,13 +290,16 @@ describe('useVisibleGeometry', () => {
   })
 
   test('falls back to config when panel not in panelConfig and registry returns null', () => {
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('missingPanel'))
     const { mapProvider, capturedHandlers } = setup({
       panelConfig: {}, // panel not present
-      panelRegistry: { getPanelConfig: jest.fn(() => null) } // registry returns null
+      panelRegistry: { getPanelConfig: jest.fn(() => null) }, // registry returns null
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
 
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'inset' })
+    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'left-top' })
     jest.runAllTimers()
     // Should still call fitToBounds using visibleGeometry from event payload
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
@@ -285,11 +307,14 @@ describe('useVisibleGeometry', () => {
 
   test('uses visibleGeometry from event payload directly, bypassing registry (ADD_PANEL first-click case)', () => {
     // Registry is empty — simulates first ADD_PANEL before React has processed the reducer
+    const appContainer = document.createElement('div')
+    appContainer.appendChild(makePanelEl('newPanel'))
     const { mapProvider, capturedHandlers } = setup({
-      panelRegistry: { getPanelConfig: jest.fn(() => ({})) }
+      panelRegistry: { getPanelConfig: jest.fn(() => ({})) },
+      layoutRefs: { mainRef: { current: document.createElement('div') }, appContainerRef: { current: appContainer } }
     })
     renderHook(() => useVisibleGeometry())
-    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'inset', visibleGeometry: polygonFeature })
+    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'left-top', visibleGeometry: polygonFeature })
     jest.runAllTimers()
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
   })

package/src/App/layout/Layout.jsx

@@ -63,9 +63,6 @@ export const Layout = () => {
               <SlotRenderer slot={layoutSlots.TOP_RIGHT} />
             </div>
           </div>
-          <div className='im-o-app__inset' ref={layoutRefs.insetRef}>
-            <SlotRenderer slot={layoutSlots.INSET} />
-          </div>
           <div className='im-o-app__left' ref={layoutRefs.leftRef}>
             <div className='im-o-app__left-top' ref={layoutRefs.leftTopRef}>
               <SlotRenderer slot={layoutSlots.LEFT_TOP} />

package/src/App/layout/Layout.test.jsx

@@ -37,7 +37,6 @@ describe('Layout', () => {
     topRef: React.createRef(),
     topLeftColRef: React.createRef(),
     topRightColRef: React.createRef(),
-    insetRef: React.createRef(),
     rightRef: React.createRef(),
     footerRef: React.createRef(),
     actionsRef: React.createRef()