fix: ensure icon layer render with the latest geometry (#3259)

* fix: ensure icon layer render with the latest geometry

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* fix tests

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

---------

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

src/layers/src/icon-layer/icon-layer.ts

@@ -111,6 +111,7 @@ export default class IconLayer extends Layer {
   getIconAccessor: (dataContainer: DataContainerInterface) => (d: any) => any;
   _layerInfoModal: () => JSX.Element;
   iconGeometry: IconGeometry;
+  iconGeometryVersion: number;
 
   declare visConfigSettings: IconLayerVisConfigSettings;
   declare config: IconLayerConfig;
@@ -131,6 +132,7 @@ export default class IconLayer extends Layer {
 
     this._layerInfoModal = IconInfoModalFactory(props.svgIcons);
     this.iconGeometry = props.iconGeometry || null;
+    this.iconGeometryVersion = 0;
 
     if (isTest()) {
       return;
@@ -222,10 +224,12 @@ export default class IconLayer extends Layer {
           console.error('Error fetching or parsing svg-icons.json:', err);
           // Fallback to empty geometry to allow default icon rendering
           this.iconGeometry = {};
+          this.iconGeometryVersion += 1;
         });
     } else {
       // No fetch available; set empty geometry so layer can render default icons
       this.iconGeometry = {};
+      this.iconGeometryVersion += 1;
     }
   }
 
@@ -238,6 +242,9 @@ export default class IconLayer extends Layer {
       {}
     );
 
+    // Increment version when SVG icons are loaded to trigger layer re-render
+    this.iconGeometryVersion += 1;
+
     this._layerInfoModal = IconInfoModalFactory(svgIcons);
   }
 
@@ -402,9 +409,14 @@ export default class IconLayer extends Layer {
       cullFace: GL.FRONT
     };
 
+    // Append geometry version to layer id so deck.gl treats it as new layer when geometry changes
+    const baseLayerId = defaultLayerProps.id || this.id;
+    const layerIdWithVersion = `${baseLayerId}_${this.iconGeometryVersion}`;
+
     return [
       new SvgIconLayer({
         ...defaultLayerProps,
+        id: layerIdWithVersion,
         ...brushingProps,
         ...layerProps,
         ...data,
@@ -422,6 +434,7 @@ export default class IconLayer extends Layer {
             // @ts-expect-error SvgIconLayerProps needs getIcon Field
             new SvgIconLayer({
               ...this.getDefaultHoverLayerProps(),
+              id: `${layerIdWithVersion}-hover`,
               ...layerProps,
               visible: defaultLayerProps.visible,
               data: [hoveredObject],

test/browser/layer-tests/icon-layer-specs.js

@@ -300,7 +300,11 @@ test('#IconLayer -> renderLayer', t => {
           3,
           'Should create 3 deck.gl layer when icon geometry is provided'
         );
-        const expectedLayerIds = ['test_layer_1', 'test_layer_1-accel', 'test_layer_1-attach'];
+        const expectedLayerIds = [
+          'test_layer_1_0',
+          'test_layer_1_0-accel',
+          'test_layer_1_0-attach'
+        ];
 
         t.deepEqual(
           deckLayers.map(l => l.id),
@@ -357,7 +361,11 @@ test('#IconLayer -> renderLayer', t => {
           3,
           'Should create 3 deck.gl layer when icon geometry is provided'
         );
-        const expectedLayerIds = ['test_layer_1', 'test_layer_1-accel', 'test_layer_1-attach'];
+        const expectedLayerIds = [
+          'test_layer_1_0',
+          'test_layer_1_0-accel',
+          'test_layer_1_0-attach'
+        ];
 
         t.deepEqual(
           deckLayers.map(l => l.id),
@@ -417,9 +425,9 @@ test('#IconLayer -> renderLayer', t => {
         t.deepEqual(
           deckLayers.map(l => l.id),
           [
-            'test_layer_1',
-            'test_layer_1-accel',
-            'test_layer_1-attach',
+            'test_layer_1_0',
+            'test_layer_1_0-accel',
+            'test_layer_1_0-attach',
             'test_layer_1-label-types',
             'test_layer_1-label-types-characters',
             'test_layer_1-label-has_result',