@defra/interactive-map 0.0.48-fmp-2 → 0.0.49-alpha

package/plugins/datasets/src/adapters/esri/esriLayerAdapter.js

@@ -65,6 +65,8 @@ export default class EsriLayerAdapter extends LayerAdapter {
         await _add(registryDataset)
       }
     }
+    // Reorder layers after adding the initially visible datasets
+    this._reorderLayers()
     // Add the non-visible datasets next
     for (const registryDataset of topLevelDatasets) {
       if (registryDataset.visibility !== 'visible') {
@@ -87,7 +89,6 @@ export default class EsriLayerAdapter extends LayerAdapter {
 
   _reorderLayers () {
     // Order: baseLayer first, then datasets by their registry order, then sketch layers last
-    // Layers within a group layer are not reordered individually - they keep their existing relative order
     const allLayers = this._map?.allLayers?.items
     if (!allLayers?.length) {
       return
@@ -96,6 +97,20 @@ export default class EsriLayerAdapter extends LayerAdapter {
     const topLevelLayers = allLayers.filter(layer => layer.parent?.type !== 'group')
     const orderedLayers = [...topLevelLayers].sort((a, b) => getLayerSortOrder(a) - getLayerSortOrder(b))
     orderedLayers.forEach((layer, index) => this._map.reorder(layer, index))
+    // Finally reorder the items within the group layers
+    this._reorderGroupLayers()
+  }
+
+  _reorderGroupLayers () {
+    const groupLayers = Object.values(this._groupLayers)
+    groupLayers.forEach((groupLayer) => {
+      const children = groupLayer?.allLayers?.items || []
+      const orderedChildren = [...children]
+        .filter(Boolean)
+        .sort((a, b) => getLayerSortOrder(a) - getLayerSortOrder(b))
+
+      orderedChildren.forEach((layer, index) => groupLayer?.reorder?.(layer, index))
+    })
   }
 
   _addGroupLayer (esriGroupId) {
@@ -272,6 +287,9 @@ export default class EsriLayerAdapter extends LayerAdapter {
 
       // mapLayer could be a VectorTileLayer or a FeatureLayer, depending on the dataset type
       const mapLayer = this._mapVisibilityLayers[isSublayer ? parent.id : id]
+      if (!mapLayer) {
+        return
+      }
       if (registryDataset.type === 'FeatureService') {
         // FeatureLayers don't have style layers, so we don't need to apply style layer visibility or paint properties
         mapLayer.renderer = registryDataset.renderer

package/plugins/datasets/src/adapters/esri/esriLayerAdapter.test.js

@@ -21,10 +21,18 @@ jest.mock('@arcgis/core/layers/GroupLayer.js', () =>
     return {
       ...opts,
       layers,
+      allLayers: { items: layers },
       add: jest.fn(layer => layers.push(layer)),
       remove: jest.fn(layer => {
         const idx = layers.indexOf(layer)
         if (idx !== -1) layers.splice(idx, 1)
+      }),
+      reorder: jest.fn((layer, index) => {
+        const current = layers.indexOf(layer)
+        if (current !== -1) {
+          layers.splice(current, 1)
+        }
+        layers.splice(index, 0, layer)
       })
     }
   })
@@ -349,6 +357,46 @@ describe('esriLayerAdapter', () => {
       expect(map.reorder).toHaveBeenCalledWith(baseLayer, 0)
       expect(map.reorder).toHaveBeenCalledWith(emptyGroupLayer, 1)
     })
+
+    it('reorders the child layers within a group by registry order', () => {
+      datasetRegistry._orderedDatasets = ['roads', 'schools']
+      const roads = { id: 'roads' }
+      const schools = { id: 'schools' }
+      const sketch = { id: 'ketchLayer-0' }
+      const baseLayer = { id: 'baseLayer' }
+      const groupLayer = {
+        id: 'group-1',
+        type: 'group',
+        allLayers: { items: [schools, sketch, roads] },
+        reorder: jest.fn()
+      }
+      adapter._groupLayers[groupLayer.id] = groupLayer
+      map.allLayers = { items: [groupLayer, baseLayer] }
+      map.reorder = jest.fn()
+
+      adapter._reorderLayers()
+
+      expect(groupLayer.reorder).toHaveBeenNthCalledWith(1, roads, 0)
+      expect(groupLayer.reorder).toHaveBeenNthCalledWith(2, schools, 1)
+      expect(groupLayer.reorder).toHaveBeenNthCalledWith(3, sketch, 2)
+    })
+
+    it('Copes when a groupLayer has no items', () => {
+      datasetRegistry._orderedDatasets = ['roads', 'schools']
+      const baseLayer = { id: 'baseLayer' }
+      const groupLayer = {
+        id: 'group-1',
+        type: 'group',
+        reorder: jest.fn()
+      }
+      adapter._groupLayers[groupLayer.id] = groupLayer
+      map.allLayers = { items: [groupLayer, baseLayer] }
+      map.reorder = jest.fn()
+
+      adapter._reorderLayers()
+
+      expect(groupLayer.reorder).not.toHaveBeenCalled()
+    })
   })
 
   // ─── _addFeatureLayers ────────────────────────────────────────────────────────

package/plugins/datasets/src/adapters/maplibre/registry/mapLibreDataset.test.js

@@ -212,12 +212,12 @@ describe('MapLibreDataset', () => {
 
     it('returns a tiles-based id for a tile dataset (array tiles)', () => {
       const dataset = datasetRegistry.getDataset('existing-fields')
-      expect(dataset.sourceId).toBe('tiles-3delfuv')
+      expect(dataset.sourceId).toBe('tiles-35m5lrb')
     })
 
     it('returns a tiles-based id when tiles is a plain string (line 76 non-array branch)', () => {
       const dataset = datasetRegistry.getDataset('existing-fields')
-      expect(dataset.sourceId).toBe('tiles-3delfuv')
+      expect(dataset.sourceId).toBe('tiles-35m5lrb')
     })
 
     it('returns geojson-dynamic-{id} for a dynamic geojson source', () => {
@@ -242,7 +242,7 @@ describe('MapLibreDataset', () => {
     it('returns a vector source for a tile dataset', () => {
       expect(datasetRegistry.getDataset('existing-fields').source).toEqual({
         type: 'vector',
-        tiles: 'https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}',
+        tiles: 'https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges_wgs84/{z}/{x}/{y}',
         minzoom: 10,
         maxzoom: 24
       })
@@ -395,8 +395,8 @@ describe('MapLibreDataset', () => {
       expect(datasetRegistry.getDataset('existing-fields').getFillSource({})).toEqual({
         id: 'existing-fields',
         type: 'fill',
-        source: 'tiles-3delfuv',
-        'source-layer': 'field_parcels_filtered',
+        source: 'tiles-35m5lrb',
+        'source-layer': 'field_parcels_wgs84',
         minzoom: 10,
         maxzoom: 24,
         layout: { visibility: 'visible' },
@@ -413,7 +413,7 @@ describe('MapLibreDataset', () => {
         .toEqual({
           id: 'hedge-control',
           type: 'line',
-          source: 'tiles-3delfuv',
+          source: 'tiles-35m5lrb',
           'source-layer': 'hedge_control',
           minzoom: 10,
           maxzoom: 24,
@@ -428,8 +428,8 @@ describe('MapLibreDataset', () => {
         .toEqual({
           id: 'existing-fields-stroke',
           type: 'line',
-          source: 'tiles-3delfuv',
-          'source-layer': 'field_parcels_filtered',
+          source: 'tiles-35m5lrb',
+          'source-layer': 'field_parcels_wgs84',
           minzoom: 10,
           maxzoom: 24,
           layout: { visibility: 'visible' },

package/plugins/datasets/src/reducers/__data__/demoDatasets.js

@@ -101,8 +101,8 @@ export const datasets = [
     id: 'existing-fields', // NOSONAR
     label: 'Existing fields',
     filter: ['all', ['==', ['get', 'sbi'], '106223377'], ['==', ['get', 'is_dominant_land_cover'], true]],
-    tiles: 'https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}',
-    sourceLayer: 'field_parcels_filtered',
+    tiles: 'https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges_wgs84/{z}/{x}/{y}',
+    sourceLayer: 'field_parcels_wgs84',
     minZoom: 10,
     maxZoom: 24,
     showInKey: true,
@@ -158,7 +158,7 @@ export const datasets = [
   }, {
     id: 'hedge-control', // NOSONAR
     label: 'Hedge control',
-    tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
+    tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges_wgs84/{z}/{x}/{y}'],
     sourceLayer: 'hedge_control',
     minZoom: 10,
     maxZoom: 24,

package/src/App/hooks/useLayoutMeasurements.js

@@ -17,12 +17,12 @@ const symmetricWidth = (left, right) => left || right ? Math.max(left, right) :
 const subSlotMaxHeight = (columnHeight, siblingButtons, gap) => columnHeight - (siblingButtons ? siblingButtons + gap : 0)
 
 // bottomRightHeight is 0 when empty, falling back to the attributions' own height for spacing.
-// clearance is how far docked attributions have pushed .im-o-app__bottom-right up via
-// --bottom-right-clearance (see attributionsBottomRightClearance below) — without adding it
-// here, .im-o-app__right's computed bottom offset stays at the box's un-pushed position and
-// the floating right column overlaps the now-raised bottom-right buttons.
-const rightOffsetBottom = (containerPad, bottomRightHeight, attributionsHeight, clearance, gap) =>
-  containerPad + (bottomRightHeight > 0 ? bottomRightHeight + clearance + gap : attributionsHeight)
+// rise is how far attributions has lifted .im-o-app__bottom-right above .im-o-app__bottom's
+// own bottom edge (see attributionsRise below) — without adding it here, .im-o-app__right's
+// computed bottom offset stays at the box's un-lifted position and the floating right column
+// overlaps the now-raised bottom-right buttons.
+const rightOffsetBottom = (containerPad, bottomRightHeight, attributionsHeight, rise, gap) =>
+  containerPad + (bottomRightHeight > 0 ? bottomRightHeight + rise + gap : attributionsHeight)
 
 // Clears the bottom row's own TOP edge (not just its trailing gap below), so the hint
 // never overlaps the logo/attribution row itself, plus a gap above it. That trivially
@@ -78,13 +78,22 @@ const attributionsNaturalWidth = (attributionsEl) => {
 // longer fits, at its natural width, in the space beside the logo column.
 const isAttributionsStacked = (naturalWidth, availableWidth) => naturalWidth > availableWidth
 
-// Docked, attributions bleeds primaryGap below the row's bottom edge then grows upward from
-// there by its own height — once that height exceeds primaryGap, it creeps back up into the
-// row itself, where .im-o-app__bottom-right shares the same horizontal space. This is how far
-// that needs pushing up to stay clear. Stacked already has its own clearance (the stacked
-// rule's margin-top), so none is needed there.
-const attributionsBottomRightClearance = (isStacked, attributionsHeight, dividerGap, primaryGap) =>
-  isStacked ? 0 : Math.max(0, attributionsHeight + dividerGap - primaryGap)
+// How far attributions lifts .im-o-app__bottom-right above .im-o-app__bottom's own bottom
+// edge. The same figure covers both modes, because both bleed primaryGap past that edge and
+// then take attributionsHeight (plus a dividerGap) back up from there:
+//  - docked: the box grows upward from the bleed into the row itself, where
+//    .im-o-app__bottom-right shares the same horizontal space, so the row needs an explicit
+//    margin-bottom (--bottom-right-clearance) to stay clear of it;
+//  - stacked: the box is an extra flex line *below* the row, so it lifts the row by exactly
+//    that much on its own — no margin needed, hence bottomRightClearance's isStacked branch.
+// Either way .im-o-app__right must clear the lift, so the offsets below use this, not the
+// clearance. Clamped at 0: a box shorter than its own bleed lifts nothing.
+const attributionsRise = (attributionsHeight, dividerGap, primaryGap) =>
+  Math.max(0, attributionsHeight + dividerGap - primaryGap)
+
+// Stacked gets its lift from the extra flex line itself (see attributionsRise above), so only
+// docked needs the row pushed up by a margin.
+const bottomRightClearance = (isStacked, rise) => isStacked ? 0 : rise
 
 // Docks centred between the side columns when there's room, otherwise stacks full-width
 // (mobile always stacks). Sets the banner's own CSS vars and returns what the side-column
@@ -129,9 +138,9 @@ function applyAttributionsLayout ({ appContainer, bottom, attributions, dividerG
   // space-between` gap between the two columns isn't a fixed value (unlike `gap`) to reconstruct.
   const left = attributionsCol ? Math.round(attributionsCol.getBoundingClientRect().left - bottom.getBoundingClientRect().left) : 0
   appContainer.style.setProperty('--attributions-left', `${left}px`)
-  const clearance = attributionsBottomRightClearance(isStacked, attributions.offsetHeight, dividerGap, primaryGap)
-  appContainer.style.setProperty('--bottom-right-clearance', `${clearance}px`)
-  return { clearance }
+  const rise = attributionsRise(attributions.offsetHeight, dividerGap, primaryGap)
+  appContainer.style.setProperty('--bottom-right-clearance', `${bottomRightClearance(isStacked, rise)}px`)
+  return { rise }
 }
 
 /**
@@ -179,7 +188,7 @@ function calculateLayout (layoutRefs, breakpoint) {
     ? bannerTop + bannerHeight + dividerGap
     : colHeight + top.offsetTop
 
-  const { clearance: bottomRightClearance } = applyAttributionsLayout({ appContainer, bottom, attributions, dividerGap, primaryGap })
+  const { rise: attributionsLift } = applyAttributionsLayout({ appContainer, bottom, attributions, dividerGap, primaryGap })
 
   // === Left container offsets ===
   const leftOffsetTop = sideOffsetTop(topLeftCol.offsetHeight)
@@ -192,10 +201,10 @@ function calculateLayout (layoutRefs, breakpoint) {
   const bottomRightHeight = buttonHeight(bottomRightRef)
   const bottomContainerPad = main.offsetHeight - bottom.offsetTop - bottom.offsetHeight
   const rightOffsetTop = sideOffsetTop(topRightCol.offsetHeight)
-  const rightEffectiveBottom = bottom.offsetTop + bottom.offsetHeight - bottomRightHeight - bottomRightClearance
+  const rightEffectiveBottom = bottom.offsetTop + bottom.offsetHeight - bottomRightHeight - attributionsLift
   const rightColumnHeight = rightEffectiveBottom - rightOffsetTop - dividerGap
   appContainer.style.setProperty('--right-offset-top', `${rightOffsetTop}px`)
-  appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom(bottomContainerPad, bottomRightHeight, attributions.offsetHeight, bottomRightClearance, dividerGap)}px`)
+  appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom(bottomContainerPad, bottomRightHeight, attributions.offsetHeight, attributionsLift, dividerGap)}px`)
   appContainer.style.setProperty('--right-top-max-height', `${rightColumnHeight}px`)
 
   // === Keyboard hint bottom offset ===

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

@@ -235,7 +235,7 @@ describe('useLayoutMeasurements', () => {
     appendChild(layoutRefs.attributionsRef.current, { scrollWidth: 250 }) // attribution text, too wide to fit
     renderHook(() => useLayoutMeasurements())
     expect(layoutRefs.attributionsRef.current.classList.contains('im-o-app__attributions--stacked')).toBe(true)
-    // stacked already has its own clearance (the stacked rule's own margin-top), so none needed here
+    // stacked is lifted by its own extra flex line, not a margin, so no clearance is needed here
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--bottom-right-clearance', '0px')
   })
 
@@ -263,27 +263,55 @@ describe('useLayoutMeasurements', () => {
     })
     renderHook(() => useLayoutMeasurements())
     // bottomContainerPad = 500 - 400 - 0 = 100
-    // bottom-right-clearance = 16 (default attributions offsetHeight 16 + dividerGap 8 - primaryGap 8)
+    // attributions lift = 16 (default attributions offsetHeight 16 + dividerGap 8 - primaryGap 8)
     // expected = 100 + (20 + 16 + 8) = 144
     expect(layoutRefs.appContainerRef.current.style.setProperty)
       .toHaveBeenCalledWith('--right-offset-bottom', '144px')
   })
 
-  test('adds bottom-right-clearance into right-offset-bottom so .im-o-app__right does not overlap a bottom-right box pushed up by tall attributions', () => {
+  test('adds the attributions lift into right-offset-bottom so .im-o-app__right does not overlap a bottom-right box pushed up by tall docked attributions', () => {
     const { layoutRefs } = setup({
       refs: {
         bottomRight: { offsetHeight: 20 },
-        attributions: { offsetHeight: 40 } // clearance = 40 + 8 (dividerGap) - 8 (primaryGap) = 40
+        attributions: { offsetHeight: 40 } // lift = 40 + 8 (dividerGap) - 8 (primaryGap) = 40
       }
     })
     renderHook(() => useLayoutMeasurements())
     // bottomContainerPad = 500 - 400 - 0 = 100; expected = 100 + (20 + 40 + 8) = 168
-    // Without the clearance term this regressed to 128px, letting .im-o-app__right's
+    // Without the lift term this regressed to 128px, letting .im-o-app__right's
     // bottom offset sit below the (margin-bottom-raised) bottom-right box's real top edge.
     expect(layoutRefs.appContainerRef.current.style.setProperty)
       .toHaveBeenCalledWith('--right-offset-bottom', '168px')
   })
 
+  // Stacked attributions takes a flex line of its own BELOW the bottom-right row, lifting the
+  // row by the same amount the docked box's margin-bottom does — but as part of
+  // .im-o-app__bottom's own grown height, not as a margin, so --bottom-right-clearance is 0.
+  // Reading the clearance here (rather than the mode-independent lift) left the right column's
+  // bottom offset at the un-lifted position, so a right-bottom scale bar overlapped a
+  // bottom-right draw menu on mobile — the breakpoint where attributions always stacks.
+  test('adds the attributions lift into right-offset-bottom when attributions is stacked, not just docked', () => {
+    const { layoutRefs } = setup({
+      refs: {
+        bottom: { rect: { left: 0 } },
+        bottomRight: { offsetHeight: 20 },
+        attributions: { offsetHeight: 40 } // lift = 40 + 8 (dividerGap) - 8 (primaryGap) = 40
+      }
+    })
+    appendChild(layoutRefs.bottomRef.current, {}) // logo column
+    appendChild(layoutRefs.bottomRef.current, { offsetWidth: 192, rect: { left: 115 } }) // bottom-right column
+    layoutRefs.bottomRef.current.appendChild(layoutRefs.attributionsRef.current) // sibling of both columns
+    appendChild(layoutRefs.attributionsRef.current, { scrollWidth: 250 }) // too wide to fit beside the logo
+    renderHook(() => useLayoutMeasurements())
+    const spy = layoutRefs.appContainerRef.current.style.setProperty
+    expect(layoutRefs.attributionsRef.current.classList.contains('im-o-app__attributions--stacked')).toBe(true)
+    expect(spy).toHaveBeenCalledWith('--bottom-right-clearance', '0px')
+    // Same 168px as the docked case above, despite the 0px clearance.
+    expect(spy).toHaveBeenCalledWith('--right-offset-bottom', '168px')
+    // rightEffectiveBottom = 400 + 0 - 20 - 40 = 340; 340 - 50 (rightOffsetTop) - 8 = 282
+    expect(spy).toHaveBeenCalledWith('--right-top-max-height', '282px')
+  })
+
   test('uses 0 when sub-slot refs have null current', () => {
     const { layoutRefs } = setup()
     layoutRefs.leftTopRef.current = null

package/src/App/layout/layout.module.scss

@@ -266,6 +266,12 @@
   flex-wrap: wrap; // lets a stacked attributions row wrap onto its own line
   justify-content: space-between;
   align-items: flex-end;
+  // No effect on a single line (the common case), only between wrapped lines — covers both
+  // a too-wide .im-o-app__bottom-right dropping below the logo/bottom-left column, and the
+  // stacked attributions row below that (see its own comment further down: this same gap
+  // replaces what used to be its one-off margin-top, so a doubly-wrapped bottom stays evenly
+  // spaced rather than gapping only at the line the margin happened to be declared on).
+  row-gap: var(--divider-gap);
   z-index: -2; // Support masking the viewport
 }
 
@@ -323,7 +329,9 @@
 // (being bottom-pinned) pushes the logo and bottom-right buttons up rather than squeezing
 // the text into an ever-narrower column. The oversized flex-basis plus negative
 // right/bottom/left margin bleeds that row flush to the true edges the same way the docked
-// box's absolute offsets do above.
+// box's absolute offsets do above; the gap above it comes from .im-o-app__bottom's own
+// row-gap (not a margin-top here), so it stays exactly one gap even if .im-o-app__bottom-right
+// has also wrapped onto a line of its own above it.
 
 .im-o-app__attributions:not(:empty) {
   position: absolute;
@@ -337,7 +345,7 @@
 .im-o-app__attributions--stacked:not(:empty) {
   position: static;
   flex-basis: calc(100% + var(--primary-gap) * 2);
-  margin: var(--divider-gap) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1);
+  margin: 0 calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1);
 }
 
 // ---------------------------------------------------