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

package/plugins/map-key/src/reducers/mergeKeyGroupItems.js

@@ -0,0 +1,68 @@
+let _pluginStateRef = {}
+export const attachPluginStateRef = (pluginStateRef) => { _pluginStateRef = pluginStateRef }
+
+let previousRef = null
+let addedKeyGroups = []
+
+const getStateKeyGroups = () => {
+  if (!_pluginStateRef?.current) {
+    return []
+  }
+  if (previousRef === _pluginStateRef.current) {
+    return addedKeyGroups
+  }
+  previousRef = _pluginStateRef.current
+  const { groups = [], keyDefinitions = [] } = _pluginStateRef.current
+
+  addedKeyGroups = groups.map(group => {
+    if (group.type === 'flat') {
+      return {
+        ...group,
+        keyDefinition: keyDefinitions.find(item => item.id === group.id)
+      }
+    }
+
+    return {
+      ...group,
+      keyDefinitions: keyDefinitions.filter(item => item.groupId === group.id)
+    }
+  })
+  return addedKeyGroups
+}
+
+// Merges the state key group items with items provided by another plugin,
+// specifically the datasets plugin
+export const mergeKeyGroupItems = (keyGroupItemsToMerge = []) => {
+  // Clone the current state key groups from the plugin state reference
+  // to avoid mutating the original array
+  const stateKeyGroups = [...getStateKeyGroups()]
+  if (stateKeyGroups.length === 0) {
+    // if there is nothing in the state key groups, just return the items that were passed in
+    return keyGroupItemsToMerge
+  }
+
+  const mergedItems = keyGroupItemsToMerge.map((keyGroupItem) => {
+    const groupIndex = stateKeyGroups.findIndex((_group) => _group.id === keyGroupItem.id)
+    if (groupIndex === -1) {
+      return keyGroupItem
+    }
+    // Splice the matched group from the stateKeyGroups and merge it with the item
+    const group = stateKeyGroups.splice(groupIndex, 1)[0]
+    return {
+      ...keyGroupItem,
+      ...group,
+      keyDefinitions: [
+        ...(group.keyDefinitions || []),
+        ...(keyGroupItem.keyDefinitions || [])
+      ]
+    }
+  })
+
+  // Append any remaining pluginConfigGroups that were not matched with datasetItems
+  // and filter out any groups that have no key definitions
+  const finalMergedItems = [...mergedItems, ...stateKeyGroups]
+    .filter(item =>
+      ((item.type === 'flat' && item.keyDefinition) ||
+      (item.type === 'group' && item.keyDefinitions?.length)))
+  return finalMergedItems
+}

package/plugins/map-key/src/reducers/mergeKeyGroupItems.test.js

@@ -0,0 +1,91 @@
+import { attachPluginStateRef, mergeKeyGroupItems } from './mergeKeyGroupItems.js'
+
+describe('mergeKeyGroupItems', () => {
+  afterEach(() => {
+    attachPluginStateRef({ current: null })
+  })
+
+  it('returns the incoming items unchanged when no plugin state is attached', () => {
+    attachPluginStateRef({ current: null })
+    const items = [{ id: 'dataset-1', keyDefinitions: [{ id: 'k1' }] }]
+
+    expect(mergeKeyGroupItems(items)).toBe(items)
+  })
+
+  it('returns dataset items unchanged when plugin state groups are empty', () => {
+    attachPluginStateRef({ current: { groups: [], keyDefinitions: [] } })
+    const items = [{ id: 'dataset-1', keyDefinitions: [{ id: 'k1' }] }]
+
+    expect(mergeKeyGroupItems(items)).toEqual(items)
+  })
+
+  it('uses default empty state values and empty arguments when no groups or items are supplied', () => {
+    attachPluginStateRef({ current: {} })
+
+    expect(mergeKeyGroupItems()).toEqual([])
+  })
+
+  it('merges a matched group even when the state group has no keyDefinitions array', () => {
+    attachPluginStateRef({
+      current: {
+        groups: [{ id: 'dataset-1', type: 'group', groupLabel: 'Dataset 1' }],
+        keyDefinitions: []
+      }
+    })
+
+    const items = [{ id: 'dataset-1', keyDefinitions: [{ id: 'd1' }] }]
+
+    expect(mergeKeyGroupItems(items)).toEqual([
+      { id: 'dataset-1', type: 'group', groupLabel: 'Dataset 1', keyDefinitions: [{ id: 'd1' }] }
+    ])
+  })
+
+  it('reuses the cached plugin-state groups when the ref object is unchanged', () => {
+    const ref = { current: { groups: [{ id: 'group-1', type: 'group', groupLabel: 'Group 1' }], keyDefinitions: [{ id: 'k1', groupId: 'group-1' }] } }
+    attachPluginStateRef(ref)
+
+    const first = mergeKeyGroupItems([{ id: 'dataset-1', keyDefinitions: [{ id: 'd1' }] }])
+    const second = mergeKeyGroupItems([{ id: 'dataset-1', keyDefinitions: [{ id: 'd2' }] }])
+
+    expect(first).toEqual([{ id: 'group-1', type: 'group', groupLabel: 'Group 1', keyDefinitions: [{ id: 'k1', groupId: 'group-1' }] }])
+    expect(second).toEqual(first)
+  })
+
+  it('merges a matching flat group into the dataset item when the key definition matches the same id', () => {
+    attachPluginStateRef({
+      current: {
+        groups: [{ id: 'dataset-1', type: 'flat' }],
+        keyDefinitions: [{ id: 'dataset-1' }]
+      }
+    })
+
+    const items = [{ id: 'dataset-1', keyDefinitions: [{ id: 'dataset-1' }] }]
+
+    expect(mergeKeyGroupItems(items)).toEqual([
+      {
+        id: 'dataset-1',
+        type: 'flat',
+        keyDefinition: { id: 'dataset-1' },
+        keyDefinitions: [{ id: 'dataset-1' }]
+      }
+    ])
+  })
+
+  it('keeps only unmatched state groups that still have key definitions', () => {
+    attachPluginStateRef({
+      current: {
+        groups: [
+          { id: 'group-1', type: 'group', groupLabel: 'Group 1' },
+          { id: 'group-2', type: 'group', groupLabel: 'Group 2' }
+        ],
+        keyDefinitions: [{ id: 'k1', groupId: 'group-1' }]
+      }
+    })
+
+    const items = [{ id: 'dataset-1', keyDefinitions: [{ id: 'd1' }] }]
+
+    expect(mergeKeyGroupItems(items)).toEqual([
+      { id: 'group-1', type: 'group', groupLabel: 'Group 1', keyDefinitions: [{ id: 'k1', groupId: 'group-1' }] }
+    ])
+  })
+})

package/plugins/map-key/src/reducers/pluginState.js

@@ -0,0 +1,68 @@
+const initialState = {
+  keyDefinitions: [],
+  groups: []
+}
+
+const labelToId = (label) => label ? label.toLowerCase().replace(/\s+/g, '-') : null
+const createNewGroup = (id, groupId, groupLabel) => {
+  return groupId
+    ? { id: groupId, type: 'group', groupLabel }
+    : { id, type: 'flat' }
+}
+
+const findGroup = (state, id, groupId) => {
+  return state.groups.find(group => {
+    return (group.type === 'group' && group.id === groupId) ||
+    (group.type === 'flat' && group.id === id)
+  })
+}
+
+const addSymbol = (state, keyDefinition) => {
+  const { id, groupLabel } = keyDefinition
+  const groupId = keyDefinition.groupId || labelToId(groupLabel)
+  // Check for an existingGroup
+  const existingGroup = findGroup(state, id, groupId)
+  // If no existing group is found, create a new one
+  const newGroup = existingGroup ? null : createNewGroup(id, groupId, groupLabel)
+  // Add the new group to the state if it was created
+  const groups = newGroup ? [...state.groups, newGroup] : state.groups
+  // Add the key definition to the state
+  const keyDefinitions = [...state.keyDefinitions, {
+    ...keyDefinition,
+    type: 'manual',
+    ...(groupId ? { groupId } : {})
+  }]
+
+  // Return the updated state with the new key definitions and groups
+  return {
+    ...state,
+    keyDefinitions,
+    groups
+  }
+}
+
+const removeSymbol = (state, keyDefinition) => {
+  const { id } = keyDefinition
+  return {
+    ...state,
+    keyDefinitions: state.keyDefinitions.filter(key => key.id !== id)
+  }
+}
+
+const addKeyGroups = (state, groups) => {
+  return {
+    ...state,
+    groups: [...state.groups, ...groups]
+  }
+}
+
+const actions = {
+  ADD_KEY_SYMBOL: addSymbol,
+  REMOVE_KEY_SYMBOL: removeSymbol,
+  ADD_KEY_GROUPS: addKeyGroups
+}
+
+export {
+  initialState,
+  actions
+}

package/plugins/map-key/src/reducers/pluginState.test.js

@@ -0,0 +1,82 @@
+import { actions, initialState } from './pluginState.js'
+
+describe('pluginState reducer helpers', () => {
+  it('returns the initial state', () => {
+    expect(initialState).toEqual({ keyDefinitions: [], groups: [] })
+  })
+
+  it('adds a flat key item and creates a flat group when needed', () => {
+    const nextState = actions.ADD_KEY_SYMBOL(initialState, { id: 'flat-key', label: 'Flat key' })
+
+    expect(nextState).toEqual({
+      keyDefinitions: [{ id: 'flat-key', label: 'Flat key', type: 'manual' }],
+      groups: [{ id: 'flat-key', type: 'flat' }]
+    })
+  })
+
+  it('adds a grouped key item when the label can be converted to a group id', () => {
+    const nextState = actions.ADD_KEY_SYMBOL(initialState, { id: 'group-key', groupLabel: 'Group Label', label: 'Group key' })
+
+    expect(nextState).toEqual({
+      keyDefinitions: [{
+        id: 'group-key',
+        groupId: 'group-label',
+        groupLabel: 'Group Label',
+        label: 'Group key',
+        type: 'manual'
+      }],
+      groups: [{ id: 'group-label', type: 'group', groupLabel: 'Group Label' }]
+    })
+  })
+
+  it('reuses an existing group when the key item matches a flat group already in state', () => {
+    const state = {
+      keyDefinitions: [{ id: 'existing-item' }],
+      groups: [{ id: 'existing-item', type: 'flat' }]
+    }
+
+    expect(actions.ADD_KEY_SYMBOL(state, { id: 'existing-item', label: 'Existing item' })).toEqual({
+      keyDefinitions: [
+        { id: 'existing-item' },
+        { id: 'existing-item', label: 'Existing item', type: 'manual' }
+      ],
+      groups: [{ id: 'existing-item', type: 'flat' }]
+    })
+  })
+
+  it('reuses an existing grouped definition when the same group id is already present', () => {
+    const state = {
+      keyDefinitions: [{ id: 'existing-group-item', groupId: 'group-1' }],
+      groups: [{ id: 'group-1', type: 'group', groupLabel: 'Group 1' }]
+    }
+
+    expect(actions.ADD_KEY_SYMBOL(state, { id: 'new-item', groupId: 'group-1', groupLabel: 'Group 1', label: 'New item' })).toEqual({
+      keyDefinitions: [
+        { id: 'existing-group-item', groupId: 'group-1' },
+        { id: 'new-item', groupId: 'group-1', groupLabel: 'Group 1', label: 'New item', type: 'manual' }
+      ],
+      groups: [{ id: 'group-1', type: 'group', groupLabel: 'Group 1' }]
+    })
+  })
+
+  it('removes a key definition by id', () => {
+    const state = {
+      keyDefinitions: [{ id: 'a' }, { id: 'b' }],
+      groups: [{ id: 'a', type: 'flat' }]
+    }
+
+    expect(actions.REMOVE_KEY_SYMBOL(state, { id: 'a' })).toEqual({
+      keyDefinitions: [{ id: 'b' }],
+      groups: [{ id: 'a', type: 'flat' }]
+    })
+  })
+
+  it('adds configured groups to state without mutating the source array', () => {
+    const groups = [{ id: 'g1', type: 'group', groupLabel: 'G1' }]
+
+    expect(actions.ADD_KEY_GROUPS(initialState, groups)).toEqual({
+      keyDefinitions: [],
+      groups: [{ id: 'g1', type: 'group', groupLabel: 'G1' }]
+    })
+  })
+})

package/src/App/hooks/useLayoutMeasurements.js

@@ -17,8 +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.
-const rightOffsetBottom = (containerPad, bottomRightHeight, attributionsHeight, gap) =>
-  containerPad + (bottomRightHeight > 0 ? bottomRightHeight + gap : attributionsHeight)
+// 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)
 
 // 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
@@ -127,6 +131,7 @@ function applyAttributionsLayout ({ appContainer, bottom, attributions, dividerG
   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 }
 }
 
 /**
@@ -174,7 +179,7 @@ function calculateLayout (layoutRefs, breakpoint) {
     ? bannerTop + bannerHeight + dividerGap
     : colHeight + top.offsetTop
 
-  applyAttributionsLayout({ appContainer, bottom, attributions, dividerGap, primaryGap })
+  const { clearance: bottomRightClearance } = applyAttributionsLayout({ appContainer, bottom, attributions, dividerGap, primaryGap })
 
   // === Left container offsets ===
   const leftOffsetTop = sideOffsetTop(topLeftCol.offsetHeight)
@@ -187,10 +192,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
+  const rightEffectiveBottom = bottom.offsetTop + bottom.offsetHeight - bottomRightHeight - bottomRightClearance
   const rightColumnHeight = rightEffectiveBottom - rightOffsetTop - dividerGap
   appContainer.style.setProperty('--right-offset-top', `${rightOffsetTop}px`)
-  appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom(bottomContainerPad, bottomRightHeight, attributions.offsetHeight, dividerGap)}px`)
+  appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom(bottomContainerPad, bottomRightHeight, attributions.offsetHeight, bottomRightClearance, dividerGap)}px`)
   appContainer.style.setProperty('--right-top-max-height', `${rightColumnHeight}px`)
 
   // === Keyboard hint bottom offset ===

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

@@ -88,9 +88,11 @@ describe('useLayoutMeasurements', () => {
   test.each([
     ['right-offset-top', { topRightCol: { offsetHeight: 80 }, top: { offsetTop: 15 } }, '95px'],
     ['right-offset-bottom', { main: { offsetHeight: 600 }, bottom: { offsetTop: 500 } }, '116px'],
-    // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342
+    // leftColumnHeight = 400 - (50+10) - 8 = 332
+    // rightColumnHeight: rightEffectiveBottom = 400 - 0 (bottomRightHeight) - 16 (bottom-right-clearance,
+    // since default attributions offsetHeight 16 + dividerGap 8 - primaryGap 8 = 16) = 384; 384 - 50 - 8 = 326
     ['left-top-max-height', {}, '332px'],
-    ['right-top-max-height', {}, '342px']
+    ['right-top-max-height', {}, '326px']
   ])('calculates %s correctly', (name, refOverrides, expected) => {
     const { layoutRefs } = setup({ refs: refOverrides })
     renderHook(() => useLayoutMeasurements())
@@ -103,10 +105,11 @@ describe('useLayoutMeasurements', () => {
     ['--left-top-panel-max-height', { leftBottom: { offsetHeight: 50 } }, '274px'], // 332 - 50 - 8
     ['--left-bottom-panel-max-height', {}, '332px'],
     ['--left-bottom-panel-max-height', { leftTop: { offsetHeight: 40 } }, '284px'], // 332 - 40 - 8
-    ['--right-top-panel-max-height', {}, '342px'],
-    ['--right-top-panel-max-height', { rightBottom: { offsetHeight: 60 } }, '274px'], // 342 - 60 - 8
-    ['--right-bottom-panel-max-height', {}, '342px'],
-    ['--right-bottom-panel-max-height', { rightTop: { offsetHeight: 30 } }, '304px'] // 342 - 30 - 8
+    // rightColumnHeight is 326 by default here (see the right-top-max-height case above)
+    ['--right-top-panel-max-height', {}, '326px'],
+    ['--right-top-panel-max-height', { rightBottom: { offsetHeight: 60 } }, '258px'], // 326 - 60 - 8
+    ['--right-bottom-panel-max-height', {}, '326px'],
+    ['--right-bottom-panel-max-height', { rightTop: { offsetHeight: 30 } }, '288px'] // 326 - 30 - 8
   ])('calculates %s with sibling buttons=%o correctly', (varName, refOverrides, expected) => {
     const { layoutRefs } = setup({ refs: refOverrides })
     renderHook(() => useLayoutMeasurements())
@@ -260,9 +263,25 @@ describe('useLayoutMeasurements', () => {
     })
     renderHook(() => useLayoutMeasurements())
     // bottomContainerPad = 500 - 400 - 0 = 100
-    // expected = 100 + (20 + 8) = 128
+    // bottom-right-clearance = 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', '128px')
+      .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', () => {
+    const { layoutRefs } = setup({
+      refs: {
+        bottomRight: { offsetHeight: 20 },
+        attributions: { offsetHeight: 40 } // clearance = 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
+    // 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')
   })
 
   test('uses 0 when sub-slot refs have null current', () => {
@@ -274,7 +293,7 @@ describe('useLayoutMeasurements', () => {
     renderHook(() => useLayoutMeasurements())
     // With all sub-slot refs null, buttons = 0 ?? 0 = 0, so max-heights equal full column height
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--left-top-panel-max-height', '332px')
-    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--right-bottom-panel-max-height', '342px')
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--right-bottom-panel-max-height', '326px')
   })
 
   test('dispatches safe zone inset on desktop (post-batch RAF read only)', () => {

package/plugins/map-key/src/utils/mergeKeyGroupItems.js

@@ -1,12 +0,0 @@
-export const mergeKeyGroupItems = (groups, items) => {
-  if (!groups) {
-    return items
-  }
-  return items.map((item) => {
-    const { id } = item
-    if (groups[id]) {
-      return { ...item, ...groups[id] }
-    }
-    return item
-  })
-}

package/plugins/map-key/src/utils/mergeKeyGroupItems.test.js

@@ -1,53 +0,0 @@
-import { mergeKeyGroupItems } from './mergeKeyGroupItems'
-
-describe('mergeKeyGroupItems', () => {
-  it('returns items unchanged when groups is not provided', () => {
-    const items = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]
-
-    expect(mergeKeyGroupItems(undefined, items)).toBe(items)
-  })
-
-  it('returns items unchanged when groups is null', () => {
-    const items = [{ id: 'a', label: 'A' }]
-
-    expect(mergeKeyGroupItems(null, items)).toBe(items)
-  })
-
-  it('merges matching group data into an item', () => {
-    const items = [{ id: 'a', label: 'A' }]
-    const groups = { a: { group: 'Group 1' } }
-
-    expect(mergeKeyGroupItems(groups, items)).toEqual([
-      { id: 'a', label: 'A', group: 'Group 1' }
-    ])
-  })
-
-  it('overrides item properties with matching group properties', () => {
-    const items = [{ id: 'a', label: 'A' }]
-    const groups = { a: { label: 'Overridden' } }
-
-    expect(mergeKeyGroupItems(groups, items)).toEqual([
-      { id: 'a', label: 'Overridden' }
-    ])
-  })
-
-  it('leaves items without a matching group unchanged', () => {
-    const items = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]
-    const groups = { a: { group: 'Group 1' } }
-
-    expect(mergeKeyGroupItems(groups, items)).toEqual([
-      { id: 'a', label: 'A', group: 'Group 1' },
-      { id: 'b', label: 'B' }
-    ])
-  })
-
-  it('returns an empty array when items is empty', () => {
-    expect(mergeKeyGroupItems({ a: { group: 'Group 1' } }, [])).toEqual([])
-  })
-
-  it('handles an empty groups object as no matches', () => {
-    const items = [{ id: 'a', label: 'A' }]
-
-    expect(mergeKeyGroupItems({}, items)).toEqual(items)
-  })
-})