@defra/interactive-map 0.0.4-alpha → 0.0.5-alpha

package/providers/maplibre/src/utils/labels.js

@@ -2,8 +2,9 @@ import { spatialNavigate } from './spatial.js'
 import { calculateLinearTextSize } from './calculateLinearTextSize.js'
 
 const HIGHLIGHT_SCALE_FACTOR = 1.5
+const HIGHLIGHT_LABEL_SOURCE = 'highlighted-label'
 
-function getGeometryCenter(geometry) {
+export function getGeometryCenter(geometry) {
   const { type, coordinates } = geometry
   if (type === 'Point') {
     return coordinates
@@ -23,13 +24,12 @@ function getGeometryCenter(geometry) {
   return null
 }
 
-function evalInterpolate(expr, zoom) {
+export function evalInterpolate(expr, zoom) {
   if (typeof expr === 'number') {
     return expr
   }
   if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
     return calculateLinearTextSize(expr, zoom)
-    // throw new Error('Only interpolate expressions supported')
   }
   const [, , input, ...stops] = expr
   if (input[0] !== 'zoom') {
@@ -39,7 +39,7 @@ function evalInterpolate(expr, zoom) {
     const z0 = stops[i]
     const v0 = stops[i + 1]
     const z1 = stops[i + 2]
-    const v1 = stops[i + 3]
+    const v1 = stops[i + 3] // NOSONAR: array index offset for interpolation pairs
     if (zoom <= z0) {
       return v0
     }
@@ -50,166 +50,220 @@ function evalInterpolate(expr, zoom) {
   return stops[stops.length - 1]
 }
 
-export function createMapLabelNavigator(map, mapColorScheme, events, eventBus) {
-  let isDarkStyle = mapColorScheme === 'dark'
-  let labels = []
-  let currentPixel = null
-  let highlightLayerId = null
-  let highlightedExpr = null
-  let highlightedFeature = null
-
-  const colors = {
-    get current() {
-      if (isDarkStyle) {
-        return { text: '#ffffff', halo: '#000000' }
-      }
-      return { text: '#000000', halo: '#ffffff' }
-    }
+export function getHighlightColors(isDarkStyle) {
+  if (isDarkStyle) {
+    return { text: '#ffffff', halo: '#000000' }
   }
+  return { text: '#000000', halo: '#ffffff' }
+}
 
-  const initLabelSource = () => {
-    if (!map.getSource('highlighted-label')) {
-      map.addSource('highlighted-label', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
-    }
+export function extractTextPropertyName(textField) {
+  if (typeof textField === 'string') {
+    return /^{(.+)}$/.exec(textField)?.[1]
   }
+  if (Array.isArray(textField)) {
+    return textField.find(e => Array.isArray(e) && e[0] === 'get')?.[1]
+  }
+  return null
+}
 
-  map.getStyle().layers.filter(l => l.layout?.['symbol-placement'] === 'line').forEach(l => {
-    map.setLayoutProperty(l.id, 'symbol-placement', 'line-center')
-  })
-  initLabelSource()
+export function buildLabelFromFeature(feature, layer, propName, map) {
+  const center = getGeometryCenter(feature.geometry)
+  if (!center) {
+    return null
+  }
+  const projected = map.project({ lng: center[0], lat: center[1] })
+  return { text: feature.properties[propName], x: projected.x, y: projected.y, feature, layer }
+}
 
-  eventBus?.on(events.MAP_SET_STYLE, style => {
-    map.once('styledata', () => map.once('idle', () => {
-      map.getStyle().layers.filter(l => l.layout?.['symbol-placement'] === 'line').forEach(l => {
-        map.setLayoutProperty(l.id, 'symbol-placement', 'line-center')
-      })
-      initLabelSource()
-      isDarkStyle = style?.mapColorScheme === 'dark'
-    }))
+export function buildLabelsFromLayers(map, symbolLayers, features) {
+  return symbolLayers.flatMap(layer => {
+    const textField = layer.layout?.['text-field']
+    const propName = extractTextPropertyName(textField)
+    if (!propName) {
+      return []
+    }
+    return features
+      .filter(f => f.layer.id === layer.id && f.properties?.[propName])
+      .map(f => buildLabelFromFeature(f, layer, propName, map))
+      .filter(Boolean)
   })
+}
 
-  function refreshLabels() {
-    const symbolLayers = map.getStyle().layers.filter(l => l.type === 'symbol')
-    const features = map.queryRenderedFeatures({ layers: symbolLayers.map(l => l.id) })
-    labels = symbolLayers.flatMap(layer => {
-      const textField = layer.layout?.['text-field']
-      const propName = typeof textField === 'string'
-        ? textField.match(/^{(.+)}$/)?.[1]
-        : Array.isArray(textField)
-        ? textField.find(e => Array.isArray(e) && e[0] === 'get')?.[1]
-        : null
-      if (!propName) {
-        return []
-      }
-      return features.filter(f => f.layer.id === layer.id && f.properties?.[propName]).map(f => {
-        const center = getGeometryCenter(f.geometry)
-        if (!center) {
-          return null
-        }
-        const projected = map.project({ lng: center[0], lat: center[1] })
-        return { text: f.properties[propName], x: projected.x, y: projected.y, feature: f, layer }
-      }).filter(Boolean)
-    })
-  }
+export function findClosestLabel(labels, centerPoint) {
+  return labels.reduce((best, label) => {
+    const dist = (label.x - centerPoint.x) ** 2 + (label.y - centerPoint.y) ** 2
+    if (!best || dist < best.dist) {
+      return { label, dist }
+    }
+    return best
+  }, null)?.label
+}
 
-  function removeHighlight() {
-    if (highlightLayerId && map.getLayer(highlightLayerId)) {
-      try {
-        map.removeLayer(highlightLayerId)
-      }
-      catch {}
-      highlightLayerId = null
-      highlightedExpr = null
-      highlightedFeature = null
+export function createHighlightLayerConfig(sourceLayer, highlightSize, colors) {
+  return {
+    id: `highlight-${sourceLayer.id}`,
+    type: sourceLayer.type,
+    source: HIGHLIGHT_LABEL_SOURCE,
+    layout: {
+      ...sourceLayer.layout,
+      'text-size': highlightSize,
+      'text-allow-overlap': true,
+      'text-ignore-placement': true,
+      'text-max-angle': 90
+    },
+    paint: {
+      ...sourceLayer.paint,
+      'text-color': colors.text,
+      'text-halo-color': colors.halo,
+      'text-halo-width': 3,
+      'text-halo-blur': 1,
+      'text-opacity': 1
     }
   }
+}
 
-  function highlight(labelData) {
-    if (!labelData?.feature?.layer) {
-      return
+export function removeHighlightLayer(map, state) {
+  if (state.highlightLayerId && map.getLayer(state.highlightLayerId)) {
+    try {
+      map.removeLayer(state.highlightLayerId)
     }
-    removeHighlight()
-    const { feature, layer } = labelData
-    highlightLayerId = `highlight-${layer.id}`
-
-    const { id, type, properties, geometry } = feature
-    highlightedFeature = { id, type, properties, geometry }
-    map.getSource('highlighted-label').setData(highlightedFeature)
-    highlightedExpr = layer.layout['text-size']
-    const zoom = map.getZoom()
-    const baseSize = evalInterpolate(highlightedExpr, zoom)
-    const highlightSize = baseSize * HIGHLIGHT_SCALE_FACTOR
-    map.addLayer({
-      id: highlightLayerId,
-      type: layer.type,
-      source: 'highlighted-label',
-      layout: { ...layer.layout, 'text-size': highlightSize, 'text-allow-overlap': true, 'text-ignore-placement': true, 'text-max-angle': 90 },
-      paint: { ...layer.paint, 'text-color': colors.current.text, 'text-halo-color': colors.current.halo, 'text-halo-width': 3, 'text-halo-blur': 1, 'text-opacity': 1 }
+    catch {}
+    state.highlightLayerId = null
+    state.highlightedExpr = null
+  }
+}
+
+export function applyHighlight(map, labelData, state) {
+  if (!labelData?.feature?.layer) {
+    return
+  }
+  removeHighlightLayer(map, state)
+  const { feature, layer } = labelData
+  state.highlightLayerId = `highlight-${layer.id}`
+
+  const { id, type, properties, geometry } = feature
+  map.getSource(HIGHLIGHT_LABEL_SOURCE).setData({ id, type, properties, geometry })
+  state.highlightedExpr = layer.layout['text-size']
+
+  const zoom = map.getZoom()
+  const baseSize = evalInterpolate(state.highlightedExpr, zoom)
+  const highlightSize = baseSize * HIGHLIGHT_SCALE_FACTOR
+  const colors = getHighlightColors(state.isDarkStyle)
+  const layerConfig = createHighlightLayerConfig(layer, highlightSize, colors)
+
+  map.addLayer(layerConfig)
+  map.moveLayer(state.highlightLayerId)
+}
+
+export function navigateToNextLabel(direction, state) {
+  if (!state.currentPixel) {
+    return null
+  }
+  const filtered = state.labels
+    .map((l, i) => ({ pixel: [l.x, l.y], index: i }))
+    .filter(l => l.pixel[0] !== state.currentPixel.x || l.pixel[1] !== state.currentPixel.y)
+  if (!filtered.length) {
+    return null
+  }
+  const pixelArray = filtered.map(l => l.pixel)
+  let nextFilteredIndex = spatialNavigate(direction, [state.currentPixel.x, state.currentPixel.y], pixelArray)
+  if (nextFilteredIndex == null || nextFilteredIndex < 0 || nextFilteredIndex >= filtered.length) {
+    nextFilteredIndex = 0
+  }
+  return state.labels[filtered[nextFilteredIndex].index]
+}
+
+function initLabelSource(map) {
+  if (!map.getSource(HIGHLIGHT_LABEL_SOURCE)) {
+    map.addSource(HIGHLIGHT_LABEL_SOURCE, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
+  }
+}
+
+function setLineCenterPlacement(map) {
+  map.getStyle().layers
+    .filter(l => l.layout?.['symbol-placement'] === 'line')
+    .forEach(l => map.setLayoutProperty(l.id, 'symbol-placement', 'line-center'))
+}
+
+function setSymbolTextOpacity(map) {
+  map.getStyle().layers
+    .filter(l => l.type === 'symbol')
+    .forEach(layer => {
+      map.setPaintProperty(layer.id, 'text-opacity', ['case', ['boolean', ['feature-state', 'highlighted'], false], 0, 1])
     })
-    map.moveLayer(highlightLayerId)
+}
+
+export function createMapLabelNavigator(map, mapColorScheme, events, eventBus) {
+  const state = {
+    isDarkStyle: mapColorScheme === 'dark',
+    labels: [],
+    currentPixel: null,
+    highlightLayerId: null,
+    highlightedExpr: null
   }
 
+  setLineCenterPlacement(map)
+  initLabelSource(map)
+
+  eventBus?.on(events.MAP_SET_STYLE, style => {
+    map.once('styledata', () => map.once('idle', () => {
+      setLineCenterPlacement(map)
+      initLabelSource(map)
+      state.isDarkStyle = style?.mapColorScheme === 'dark'
+    }))
+  })
+
   map.on('zoom', () => {
-    if (highlightLayerId && highlightedExpr) {
-      const zoom = map.getZoom()
-      const baseSize = evalInterpolate(highlightedExpr, zoom)
-      map.setLayoutProperty(highlightLayerId, 'text-size', baseSize * HIGHLIGHT_SCALE_FACTOR)
+    if (state.highlightLayerId && state.highlightedExpr) {
+      const baseSize = evalInterpolate(state.highlightedExpr, map.getZoom())
+      map.setLayoutProperty(state.highlightLayerId, 'text-size', baseSize * HIGHLIGHT_SCALE_FACTOR)
     }
   })
 
+  function refreshLabels() {
+    const symbolLayers = map.getStyle().layers.filter(l => l.type === 'symbol')
+    const features = map.queryRenderedFeatures({ layers: symbolLayers.map(l => l.id) })
+    state.labels = buildLabelsFromLayers(map, symbolLayers, features)
+  }
+
   function highlightCenter() {
     refreshLabels()
-    if (!labels.length) {
+    if (!state.labels.length) {
       return null
     }
     const centerPoint = map.project(map.getCenter())
-    const closest = labels.reduce((best, label) => {
-      const dist = (label.x - centerPoint.x) ** 2 + (label.y - centerPoint.y) ** 2
-      if (!best || dist < best.dist) {
-        return { label, dist }
-      }
-      return best
-    }, null)?.label
+    const closest = findClosestLabel(state.labels, centerPoint)
     if (closest) {
-      currentPixel = { x: closest.x, y: closest.y }
+      state.currentPixel = { x: closest.x, y: closest.y }
     }
-    highlight(closest)
+    applyHighlight(map, closest, state)
     return `${closest.text} (${closest.layer.id})`
   }
 
   function highlightNext(direction) {
     refreshLabels()
-    if (!labels.length) {
+    if (!state.labels.length) {
       return null
     }
-    if (!currentPixel) {
+    if (!state.currentPixel) {
       return highlightCenter()
     }
-    const filtered = labels
-      .map((l, i) => ({ pixel: [l.x, l.y], index: i }))
-      .filter(l => l.pixel[0] !== currentPixel.x || l.pixel[1] !== currentPixel.y)
-    if (!filtered.length) {
+    const labelData = navigateToNextLabel(direction, state)
+    if (!labelData) {
       return null
     }
-    const pixelArray = filtered.map(l => l.pixel)
-    let nextFilteredIndex = spatialNavigate(direction, [currentPixel.x, currentPixel.y], pixelArray)
-    if (nextFilteredIndex == null || nextFilteredIndex < 0 || nextFilteredIndex >= filtered.length) {
-      nextFilteredIndex = 0
-    }
-    const labelData = labels[filtered[nextFilteredIndex].index]
-    currentPixel = { x: labelData.x, y: labelData.y }
-    highlight(labelData)
+    state.currentPixel = { x: labelData.x, y: labelData.y }
+    applyHighlight(map, labelData, state)
     return `${labelData.text} (${labelData.layer.id})`
   }
 
-  map.getStyle().layers.filter(l => l.type === 'symbol').forEach(layer => {
-    map.setPaintProperty(layer.id, 'text-opacity', ['case', ['boolean', ['feature-state', 'highlighted'], false], 0, 1])
-  })
+  setSymbolTextOpacity(map)
 
   return {
     refreshLabels,
     highlightNextLabel: highlightNext,
     highlightLabelAtCenter: highlightCenter,
-    clearHighlightedLabel: removeHighlight
+    clearHighlightedLabel: () => removeHighlightLayer(map, state)
   }
 }

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

@@ -13,7 +13,7 @@ export function applyPreventDefaultFix (map) {
   const originalPreventDefault = Event.prototype.preventDefault
 
   // Override preventDefault only for events targeting our map
-  Event.prototype.preventDefault = function () {
+  Event.prototype.preventDefault = function () { // NOSONAR: intentional monkey-patch to fix MapLibre touch event bug
     if ((this.type === 'touchmove' || this.type === 'touchstart') && !this.cancelable) {
       // Check if the event target is within our map container
       const canvas = map.getCanvas()
@@ -21,6 +21,6 @@ export function applyPreventDefaultFix (map) {
         return
       }
     }
-    return originalPreventDefault.call(this)
+    originalPreventDefault.call(this)
   }
 }

package/providers/maplibre/src/utils/queryFeatures.js

@@ -0,0 +1,146 @@
+/**
+ * Calculates the squared distance from a point (p) to a line segment (v to w).
+ */
+const distToSegmentSquared = (p, v, w) => {
+  const l2 = (v.x - w.x) ** 2 + (v.y - w.y) ** 2
+  if (l2 === 0) {
+    return (p.x - v.x) ** 2 + (p.y - v.y) ** 2
+  }
+  let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
+  t = Math.max(0, Math.min(1, t))
+  return (p.x - (v.x + t * (w.x - v.x))) ** 2 + (p.y - (v.y + t * (w.y - v.y))) ** 2
+}
+
+/**
+ * Ray-casting algorithm to determine if a point is inside a polygon.
+ */
+const isPointInPolygon = (point, ring) => {
+  const [px, py] = point
+  let inside = false
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i, i++) {
+    const [xi, yi] = ring[i]
+    const [xj, yj] = ring[j]
+    const isAboveI = yi > py
+    const isAboveJ = yj > py
+
+    if (isAboveI === isAboveJ) {
+      continue
+    }
+    // 2. Calculate horizontal intersection
+    const intersectX = ((xj - xi) * (py - yi)) / (yj - yi) + xi
+
+    if (px < intersectX) {
+      inside = !inside;
+    }
+  }
+  return inside
+}
+
+/**
+ * Calculates minimum squared pixel distance to the geometry.
+ */
+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]))
+      if (d2 < minSqDist) {
+        minSqDist = d2
+      }
+    }
+  }
+  
+  if (type === 'Point') {
+    const p = getScreenPt(coords)
+    minSqDist = (point.x - p.x) ** 2 + (point.y - p.y) ** 2
+  } else if (type === 'LineString' || type === 'MultiPoint') {
+    if (type === 'LineString') {
+      processLine(coords)
+    } else {
+      coords.forEach((pt) => {
+        const p = getScreenPt(pt)
+        const d2 = (point.x - p.x) ** 2 + (point.y - p.y) ** 2
+        if (d2 < minSqDist) {
+          minSqDist = d2
+        }
+      })
+    }
+  } else if (type === 'Polygon' || type === 'MultiLineString') {
+    coords.forEach(processLine)
+  } else if (type === 'MultiPolygon') {
+    coords.forEach((poly) => poly.forEach(processLine))
+  } else {
+    // No action
+  }
+  return minSqDist
+}
+
+/**
+ * Query features prioritizing Layer Order, then Containment for Polygons.
+ */
+export const queryFeatures = (map, point, options = {}) => {
+  const { radius = 10 } = options
+  const queryArea = [[point.x - radius, point.y - radius], [point.x + radius, point.y + radius]]
+  const rawFeatures = map.queryRenderedFeatures(queryArea)
+  if (rawFeatures.length === 0) {
+    return []
+  }
+
+  // Identify layer visual hierarchy
+  const layerStack = []
+  rawFeatures.forEach(f => {
+    if (layerStack.includes(f.layer.id) === false) {
+      layerStack.push(f.layer.id)
+    }
+  })
+
+  // Deduplicate Bottom-Up to favor data layers over highlight layers
+  const seenIds = new Set()
+  const uniqueFeatures = []
+  for (let i = rawFeatures.length - 1; i >= 0; i--) {
+    const f = rawFeatures[i]
+    const featureId = f.id === undefined ? JSON.stringify(f.properties) : f.id
+    if (seenIds.has(featureId) === false) {
+      seenIds.add(featureId)
+      uniqueFeatures.push(f)
+    }
+  }
+
+  const clickLngLat = map.unproject(point)
+  const clickPt = [clickLngLat.lng, clickLngLat.lat]
+
+  return uniqueFeatures
+    .map((f) => {
+      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)
+
+      // PRIORITY 2: CONTAINMENT (Polygon Special Treatment)
+      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
+        } else {
+          // If we are outside a polygon, it loses significantly to anything we ARE inside
+          score += 100000 // NOSONAR - tolerance used only here
+        }
+      }
+
+      // PRIORITY 3: DISTANCE (Final Tie-breaker)
+      score += pixelDistSq
+
+      return { f, score }
+    })
+    .sort((a, b) => a.score - b.score)
+    .map(({ f }) => f)
+}

package/providers/maplibre/src/utils/spatial.js

@@ -123,26 +123,23 @@ const getCardinalMove = (from, to) => {
  * @param {Array<[number, number]>} pixels - Array of pixel coordinates.
  * @returns {number} Index of the closest pixel in the given direction.
  */
+const isInDirection = (direction, dx, dy) => {
+  switch (direction) {
+    case 'ArrowUp': return dy < 0 && Math.abs(dy) >= Math.abs(dx)
+    case 'ArrowDown': return dy > 0 && Math.abs(dy) >= Math.abs(dx)
+    case 'ArrowLeft': return dx < 0 && Math.abs(dx) > Math.abs(dy)
+    case 'ArrowRight': return dx > 0 && Math.abs(dx) > Math.abs(dy)
+    default: return false
+  }
+}
+
 const spatialNavigate = (direction, start, pixels) => {
   const [sx, sy] = start
 
   // Direction filters
-  const candidates = pixels.filter(([x, y]) => {
-    if (x === sx && y === sy) {
-      return false
-    }
-
-    const dx = x - sx
-    const dy = y - sy
-
-    switch (direction) {
-      case 'ArrowUp': return dy < 0 && Math.abs(dy) >= Math.abs(dx)
-      case 'ArrowDown': return dy > 0 && Math.abs(dy) >= Math.abs(dx)
-      case 'ArrowLeft': return dx < 0 && Math.abs(dx) > Math.abs(dy)
-      case 'ArrowRight': return dx > 0 && Math.abs(dx) > Math.abs(dy)
-      default: return false
-    }
-  })
+  const candidates = pixels.filter(([x, y]) =>
+    (x !== sx || y !== sy) && isInDirection(direction, x - sx, y - sy)
+  )
 
   if (!candidates.length) {
     return pixels.findIndex(p => p[0] === sx && p[1] === sy)
@@ -169,7 +166,7 @@ const getResolution = (center, zoom) => {
   const TILE_SIZE = 512
   const lat = center.lat
   const scale = Math.pow(2, zoom)
-  const resolution = (EARTH_CIRCUMFERENCE * Math.cos((lat * Math.PI) / 180)) / (scale * TILE_SIZE)
+  const resolution = (EARTH_CIRCUMFERENCE * Math.cos((lat * Math.PI) / 180)) / (scale * TILE_SIZE) // NOSONAR - 180 is degrees-to-radians conversion
   return resolution
 }
 

package/sonar-project.properties

@@ -16,8 +16,45 @@ sonar.tests=src,plugins,providers
 sonar.test.inclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 sonar.cpd.exclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 
-sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx
+# Ignored rules
+sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx,preferGlobalThisJs,preferGlobalThisJsx,preferAtJs,preferAtJsx,replaceAllJs,replaceAllJsx,stringReplaceAllJs,stringReplaceAllJsx,pascalCaseFunctionsJs,pascalCaseFunctionsJsx,pascalCaseFunctionsTs,pascalCaseFunctionsTsx
+
+# S6774: React props validation - using TypeScript/JSDoc for prop types instead
 sonar.issue.ignore.multicriteria.reactPropsJs.ruleKey=javascript:S6774
 sonar.issue.ignore.multicriteria.reactPropsJs.resourceKey=**/*.js
 sonar.issue.ignore.multicriteria.reactPropsJsx.ruleKey=javascript:S6774
-sonar.issue.ignore.multicriteria.reactPropsJsx.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.reactPropsJsx.resourceKey=**/*.jsx
+
+# S7764: Prefer globalThis over window
+sonar.issue.ignore.multicriteria.preferGlobalThisJs.ruleKey=javascript:S7764
+sonar.issue.ignore.multicriteria.preferGlobalThisJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.preferGlobalThisJsx.ruleKey=javascript:S7764
+sonar.issue.ignore.multicriteria.preferGlobalThisJsx.resourceKey=**/*.jsx
+
+# S7755: Prefer .at() over [index]
+sonar.issue.ignore.multicriteria.preferAtJs.ruleKey=javascript:S7755
+sonar.issue.ignore.multicriteria.preferAtJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.preferAtJsx.ruleKey=javascript:S7755
+sonar.issue.ignore.multicriteria.preferAtJsx.resourceKey=**/*.jsx
+
+# S6316: Array.prototype.replaceAll may not be supported in all browsers
+sonar.issue.ignore.multicriteria.replaceAllJs.ruleKey=javascript:S6316
+sonar.issue.ignore.multicriteria.replaceAllJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.replaceAllJsx.ruleKey=javascript:S6316
+sonar.issue.ignore.multicriteria.replaceAllJsx.resourceKey=**/*.jsx
+
+# S7781: Prefer .replaceAll() over .replace() with global regex
+sonar.issue.ignore.multicriteria.stringReplaceAllJs.ruleKey=javascript:S7781
+sonar.issue.ignore.multicriteria.stringReplaceAllJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.stringReplaceAllJsx.ruleKey=javascript:S7781
+sonar.issue.ignore.multicriteria.stringReplaceAllJsx.resourceKey=**/*.jsx
+
+# S100: Function names should comply with a naming convention (PascalCase for React/Inits) - mustn't pics up React functions
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJs.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJsx.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJsx.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.resourceKey=**/*.ts
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.resourceKey=**/*.tsx

package/src/App/components/Actions/Actions.jsx

@@ -3,7 +3,7 @@ import { useApp } from '../../store/appContext'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Actions = ({ slot, children }) => {
+export const Actions = ({ children }) => {
   const { openPanels, panelConfig, breakpoint } = useApp()
 
   const childArray = React.Children.toArray(children)
@@ -21,7 +21,7 @@ export const Actions = ({ slot, children }) => {
   ].filter(Boolean).join(' ')
 
   return (
-    <div className={className} style={!visibleChild ? { display: 'none' } : undefined}>
+    <div className={className} style={visibleChild ? undefined : { display: 'none' }}>
       {children}
     </div>
   )

package/src/App/components/Actions/Actions.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  gap: var(--divider-gap);
+  gap: calc(var(--divider-gap) / 2);
   padding: var(--panel-margin);
 
   .im-c-button-wrapper--wide {
@@ -22,6 +22,6 @@
 
 .im-o-app--tablet, .im-o-app--desktop {
   .im-c-actions {
-    min-width: 280px;
+    min-width: 0;
   }
 }