feat: highlight multiple features with same string id (DHIS2-11969)

src/Map.js

@@ -9,6 +9,7 @@ import { transformRequest } from './utils/images'
 import { mapStyle } from './utils/style'
 import { getBoundsFromLayers } from './utils/geometry'
 import syncMaps from './utils/sync'
+import { getFeaturesString } from './utils/core'
 import { OVERLAY_START_POSITION } from './utils/layers'
 import Popup from './ui/Popup'
 import Label from './ui/Label'
@@ -230,9 +231,10 @@ export class MapGL extends Evented {
 
     onMouseMove = evt => {
         const feature = this.getEventFeature(evt)
+        let layer
 
         if (feature) {
-            const layer = this.getLayerFromId(feature.layer.id)
+            layer = this.getLayerFromId(feature.layer.id)
 
             if (layer) {
                 layer.onMouseMove(evt, feature)
@@ -241,35 +243,36 @@ export class MapGL extends Evented {
             this.hideLabel()
         }
 
-        this.setHoverState(feature)
+        this.setHoverState(
+            layer && feature?.properties?.id
+                ? layer.getFeaturesById(feature.properties.id)
+                : null
+        )
 
         this.getMapGL().getCanvas().style.cursor = feature ? 'pointer' : ''
     }
 
-    // Set hover state for source feature
-    setHoverState(feature) {
-        let featureSourceId
-
-        if (feature) {
-            const { id, source } = feature
-            featureSourceId = `${id}-${source}`
-        }
-
-        // Only set hover state when feature is changed
-        if (featureSourceId !== this._hoverId) {
-            // Clear state for existing hover feature
-            if (this._hoverState) {
-                this.setFeatureState(this._hoverState, { hover: false })
-                this._hoverState = null
+    // Set hover state for features
+    setHoverState(features) {
+        // Only set hover state when features are changed
+        if (
+            getFeaturesString(features) !==
+            getFeaturesString(this._hoverFeatures)
+        ) {
+            if (this._hoverFeatures) {
+                // Clear state for existing hover features
+                this._hoverFeatures.forEach(feature =>
+                    this.setFeatureState(feature, { hover: false })
+                )
+                this._hoverFeatures = null
             }
 
-            // Set new feature hover state
-            if (feature) {
-                this._hoverState = feature
-                this.setFeatureState(feature, { hover: true })
+            if (Array.isArray(features)) {
+                this._hoverFeatures = features
+                features.forEach(feature =>
+                    this.setFeatureState(feature, { hover: true })
+                )
             }
-
-            this._hoverId = featureSourceId
         }
     }
 

src/__tests__/Map.spec.js

@@ -32,18 +32,15 @@ describe('DHIS2 Maps-gl Map', () => {
         const feature = { id: 1, source: 'abc' }
 
         mapgl.getSource.mockReturnValue(true)
-        expect(map._hoverId).toBe(undefined)
-        expect(map._hoverState).toBe(undefined)
-        map.setHoverState(feature)
-        expect(map._hoverId).toBe('1-abc')
-        expect(map._hoverState).toBe(feature)
+        expect(map._hoverFeatures).toBe(undefined)
+        map.setHoverState([feature])
+        expect(map._hoverFeatures).toStrictEqual([feature])
         expect(setFeatureStateSpy).toHaveBeenCalled()
         expect(setFeatureStateSpy).lastCalledWith(feature, { hover: true })
         expect(getSourceMock).toHaveBeenCalled()
         expect(mapgl.setFeatureState).lastCalledWith(feature, { hover: true })
         map.setHoverState(null)
-        expect(map._hoverId).toBe(undefined)
-        expect(map._hoverState).toBe(null)
+        expect(map._hoverFeatures).toBe(null)
         expect(setFeatureStateSpy).toHaveBeenCalledTimes(2)
         expect(setFeatureStateSpy).lastCalledWith(feature, { hover: false })
         expect(getSourceMock).toHaveBeenCalledTimes(2)

src/layers/Layer.js

@@ -218,13 +218,14 @@ class Layer extends Evented {
         return this._features
     }
 
-    // Returns a feature from a string or numeric id
-    getFeature(id) {
-        if (typeof id === 'string') {
-            return this._features.find(f => f.properties.id === id)
-        }
+    // Returns all features having a string or numeric id
+    getFeaturesById(id) {
+        const features =
+            typeof id === 'string'
+                ? this._features.filter(f => f.properties.id === id)
+                : this._features.filter(f => f.id === id)
 
-        return this._features.find(f => f.id === id)
+        return features.map(f => ({ ...f, source: this.getId() }))
     }
 
     // Adds integer id for each feature (required by Feature State)
@@ -294,16 +295,7 @@ class Layer extends Evented {
         const map = this.getMap()
 
         if (map) {
-            const feature = id ? this.getFeature(id) : null
-
-            map.setHoverState(
-                feature
-                    ? {
-                          id: feature.id,
-                          source: this.getId(),
-                      }
-                    : null
-            )
+            map.setHoverState(id ? this.getFeaturesById(id) : null)
         }
     }
 

src/layers/LayerGroup.js

@@ -69,6 +69,10 @@ class LayerGroup extends Evented {
         )
     }
 
+    getFeaturesById(id) {
+        return this._layers.map(layer => layer.getFeaturesById(id)).flat()
+    }
+
     setOpacity(opacity) {
         this._layers.forEach(layer => layer.setOpacity(opacity))
     }

src/layers/__tests__/Layer.spec.js

@@ -76,8 +76,10 @@ describe('Layer', () => {
 
         expect(features.length).toBe(data.length)
         expect(features.every(f => typeof f.id === 'number')).toBe(true)
-        expect(layer.getFeature(2)).toBe(layer.getFeature('fdc6uOvgoji'))
-        expect(layer.getFeature(3)).toBe(undefined)
+        expect(layer.getFeaturesById(2)).toStrictEqual(
+            layer.getFeaturesById('fdc6uOvgoji')
+        )
+        expect(layer.getFeaturesById(3)).toStrictEqual([])
     })
     it('Should set feature hover state', () => {
         const layer = new Layer({ data })
@@ -87,12 +89,22 @@ describe('Layer', () => {
         layer.addTo(mockMap)
         layer.highlight('fdc6uOvgoji')
         expect(mockFn).toHaveBeenCalled()
-        expect(mockFn).lastCalledWith({ id: 2, source })
+        expect(mockFn.mock.calls[0][0]).toMatchObject([
+            {
+                id: 2,
+                source,
+            },
+        ])
         layer.highlight(1)
         expect(mockFn).toHaveBeenCalledTimes(2)
-        expect(mockFn).lastCalledWith({ id: 1, source })
+        expect(mockFn.mock.calls[1][0]).toMatchObject([
+            {
+                id: 1,
+                source,
+            },
+        ])
         layer.highlight('abc')
         expect(mockFn).toHaveBeenCalledTimes(3)
-        expect(mockFn).lastCalledWith(null)
+        expect(mockFn).lastCalledWith([])
     })
 })

src/utils/core.js

@@ -1,3 +1,12 @@
 // Replaces {key} with data in a string template
 export const setTemplate = (text, data) =>
     text.replace(/\{ *([\w_-]+) *\}/g, (str, key) => data[key])
+
+// Returns a string representation of an array of features
+export const getFeaturesString = features =>
+    Array.isArray(features)
+        ? features
+              .sort((a, b) => b.id - a.id)
+              .map(({ id, source }) => `${id}-${source}`)
+              .join('-')
+        : ''