[Backport c040-2026.01.xx] #12431 The background selector does not work in the map widget (#12489)

web/client/components/background/BackgroundSelector.jsx

@@ -82,20 +82,25 @@ function BackgroundSelector({
         }
         return backgroundsProp[0];
     };
+    const addTerrainLayer = (layerToAdd, { activate = true } = {}) => {
+        addLayer(layerToAdd);
+        if (activate) {
+            onPropertiesChange(layerToAdd.id, {visibility: true});
+        }
+    };
     const handleAddEditTerrainLayer = (layerToAdd) => {
         if (showTerrainModal.layer) {
             updateNode(layerToAdd.id, 'layers', layerToAdd);
         } else {
-            addLayer(layerToAdd);
-            onPropertiesChange(layerToAdd.id, {visibility: true});
+            addTerrainLayer(layerToAdd);
         }
     };
     const currentBackground = getCurrentBackground();
     const currentTerrain = getCurrentTerrainLayer();
     // Include the ellipsoidal terrain if missing
     useEffect(() => {
         const hasEllipsoidTerrain = backgroundsProp.some(bg => bg.type === 'terrain' && bg.provider === 'ellipsoid');
-        if (!hasEllipsoidTerrain) {
+        if (enableTerrainList && !hasEllipsoidTerrain) {
             const newEllipsoidLayer = {
                 type: 'terrain',
                 visibility: !currentTerrain, // only visible if no other terrain is active
@@ -104,9 +109,9 @@ function BackgroundSelector({
                 group: 'background',
                 id: "ellipsoid"
             };
-            handleAddEditTerrainLayer(newEllipsoidLayer);
+            addTerrainLayer(newEllipsoidLayer, { activate: !currentTerrain });
         }
-    }, [backgroundsProp, currentTerrain]);
+    }, [backgroundsProp, currentTerrain, enableTerrainList]);
     // handlers
     const onToggleLayer =  (layer) => {
         onPropertiesChange(layer.id ?? "ellipsoid", {visibility: true});

web/client/components/background/__tests__/BackgroundSelector-test.jsx

@@ -292,4 +292,114 @@ describe("test the BackgroundSelector", () => {
         // Even though terrain appears first in the list and is visible
         expect(thumbnailImg.alt).toBe('Another Background');
     });
+
+    it('does not add Ellipsoid terrain when terrain list is disabled', (done) => {
+        const addLayer = expect.createSpy();
+        const onPropertiesChange = expect.createSpy();
+        const layers = [
+            {
+                id: 'regular_background',
+                title: 'Regular Background',
+                type: 'wms',
+                visibility: true,
+                group: 'background'
+            }
+        ];
+
+        ReactDOM.render(
+            <BackgroundSelector
+                alwaysVisible
+                enabled
+                backgrounds={layers}
+                addLayer={addLayer}
+                onPropertiesChange={onPropertiesChange}
+            />,
+            document.getElementById("container")
+        );
+
+        setTimeout(() => {
+            expect(addLayer).toNotHaveBeenCalled();
+            expect(onPropertiesChange).toNotHaveBeenCalled();
+            done();
+        });
+    });
+
+    it('adds Ellipsoid terrain when terrain list is enabled', (done) => {
+        const addLayer = expect.createSpy();
+        const onPropertiesChange = expect.createSpy();
+        const layers = [
+            {
+                id: 'regular_background',
+                title: 'Regular Background',
+                type: 'wms',
+                visibility: true,
+                group: 'background'
+            }
+        ];
+
+        ReactDOM.render(
+            <BackgroundSelector
+                alwaysVisible
+                enabled
+                enableTerrainList
+                backgrounds={layers}
+                addLayer={addLayer}
+                onPropertiesChange={onPropertiesChange}
+            />,
+            document.getElementById("container")
+        );
+
+        setTimeout(() => {
+            expect(addLayer).toHaveBeenCalled();
+            const ellipsoidLayer = addLayer.calls[0].arguments[0];
+            expect(ellipsoidLayer.id).toBe('ellipsoid');
+            expect(ellipsoidLayer.provider).toBe('ellipsoid');
+            expect(ellipsoidLayer.visibility).toBe(true);
+            expect(onPropertiesChange).toHaveBeenCalledWith('ellipsoid', {visibility: true});
+            done();
+        });
+    });
+
+    it('does not auto-select Ellipsoid terrain when another terrain is already active', (done) => {
+        const addLayer = expect.createSpy();
+        const onPropertiesChange = expect.createSpy();
+        const layers = [
+            {
+                id: 'regular_background',
+                title: 'Regular Background',
+                type: 'wms',
+                visibility: true,
+                group: 'background'
+            },
+            {
+                id: 'terrain_layer',
+                title: 'Terrain Layer',
+                type: 'terrain',
+                visibility: true,
+                group: 'background',
+                provider: 'cesium'
+            }
+        ];
+
+        ReactDOM.render(
+            <BackgroundSelector
+                alwaysVisible
+                enabled
+                enableTerrainList
+                backgrounds={layers}
+                addLayer={addLayer}
+                onPropertiesChange={onPropertiesChange}
+            />,
+            document.getElementById("container")
+        );
+
+        setTimeout(() => {
+            expect(addLayer).toHaveBeenCalled();
+            const ellipsoidLayer = addLayer.calls[0].arguments[0];
+            expect(ellipsoidLayer.id).toBe('ellipsoid');
+            expect(ellipsoidLayer.visibility).toBe(false);
+            expect(onPropertiesChange).toNotHaveBeenCalled();
+            done();
+        });
+    });
 });

web/client/components/widgets/enhancers/__tests__/chartWidget-test.jsx

@@ -33,7 +33,9 @@ describe('chartWidget enhancer', () => {
     it('chartWidgetProps default', (done) => {
         const Sink = chartWidgetProps(createSink(props => {
             expect(props).toBeTruthy();
-            expect(props).toEqual({charts: [], selectedChartId: undefined, options: {}});
+            expect(props.charts).toEqual([]);
+            expect(props.selectedChartId).toBeFalsy();
+            expect(props.options).toEqual({});
             done();
         }));
         ReactDOM.render(<Sink/>, document.getElementById("container"));

web/client/components/widgets/widget/MapWidget.jsx

@@ -55,24 +55,37 @@ const LegendView = withHandlers({
     }
 })(LegendViewComponent);
 
+export const updateMapBackgroundLayerVisibility = (map = {}, layerId, properties = {}) => {
+    if (!layerId) {
+        return map;
+    }
+    const selectedLayer = map.layers?.find(layer => layer.id === layerId && layer.group === 'background');
+    if (!selectedLayer) {
+        return map;
+    }
+    const selectedTerrain = selectedLayer.type === 'terrain';
+    const newLayers = map.layers?.map(layer => {
+        if (layer.group === 'background' && (layer.type === 'terrain') === selectedTerrain) {
+            const updatedLayer = { ...layer, visibility: false };
+            // set the selected background layer to visible
+            if (layer.id === layerId) {
+                return { ...updatedLayer, visibility: true, ...properties };
+            }
+            return updatedLayer;
+        }
+        return layer;
+    });
+    if (!isEqual(map.layers, newLayers)) {
+        return { ...map, layers: newLayers };
+    }
+    return map;
+};
+
 const BackgroundSelectorWithHandlers = withHandlers({
     onPropertiesChange: ({ onUpdateMapProperty, map }) => (layerId, properties) => {
-        if (!layerId) {
-            return;
-        }
-        const newLayers = map.layers?.map(layer => {
-            if (layer.group === 'background') {
-                const updatedLayer = { ...layer, visibility: false };
-                // set the selected background layer to visible
-                if (layer.id === layerId) {
-                    return { ...updatedLayer, visibility: true, ...properties };
-                }
-                return updatedLayer;
-            }
-            return layer;
-        });
-        if (!isEqual(map.layers, newLayers)) {
-            onUpdateMapProperty({ ...map, layers: newLayers });
+        const newMap = updateMapBackgroundLayerVisibility(map, layerId, properties);
+        if (newMap !== map) {
+            onUpdateMapProperty(newMap);
         }
     }
 })(BackgroundSelector);

web/client/components/widgets/widget/__tests__/MapWidget-test.jsx

@@ -14,7 +14,7 @@ import {compose, defaultProps} from 'recompose';
 import '../../../../libs/bindings/rxjsRecompose';
 
 import mapWidget from '../../enhancers/mapWidget';
-import MapWidgetComp from '../MapWidget';
+import MapWidgetComp, {updateMapBackgroundLayerVisibility} from '../MapWidget';
 
 const MapWidget = compose(
     defaultProps({
@@ -153,4 +153,48 @@ describe('MapWidget component', () => {
         const container = document.getElementById('container');
         expect(container.querySelector('.custom-top-item')).toBeTruthy();
     });
+    it('does not update background layers on mount when Ellipsoid terrain is missing', (done) => {
+        const onUpdateMapProperty = expect.createSpy();
+        const map = {
+            size: { height: 500, width: 500 },
+            layers: [
+                { id: 'bg1', title: 'Background 1', type: 'wms', group: 'background', visibility: true },
+                { id: 'bg2', title: 'Background 2', type: 'wms', group: 'background', visibility: false }
+            ],
+            showBackgroundSelector: true,
+            mapInfoControl: true
+        };
+
+        ReactDOM.render(<Provider store={{ subscribe: () => { }, getState: () => ({ maptype: { mapType: 'openlayers' } }) }} >
+            <MapWidget id="widget1" map={map} onUpdateMapProperty={onUpdateMapProperty}/>
+        </Provider>, document.getElementById("container"));
+
+        setTimeout(() => {
+            try {
+                expect(onUpdateMapProperty).toNotHaveBeenCalled();
+                done();
+            } catch (e) {
+                done(e);
+            }
+        });
+    });
+    it('selects another background without changing terrain visibility', () => {
+        const map = {
+            size: { height: 500, width: 500 },
+            layers: [
+                { id: 'bg1', title: 'Background 1', type: 'wms', group: 'background', visibility: true },
+                { id: 'bg2', title: 'Background 2', type: 'wms', group: 'background', visibility: false },
+                { id: 'terrain1', title: 'Terrain 1', type: 'terrain', group: 'background', visibility: true },
+                { id: 'layer1', title: 'Overlay 1', type: 'wms', group: 'overlay', visibility: true }
+            ],
+            showBackgroundSelector: true,
+            mapInfoControl: true
+        };
+
+        const updatedMap = updateMapBackgroundLayerVisibility(map, 'bg2', { visibility: true });
+        expect(updatedMap.layers.find(layer => layer.id === 'bg1').visibility).toBe(false);
+        expect(updatedMap.layers.find(layer => layer.id === 'bg2').visibility).toBe(true);
+        expect(updatedMap.layers.find(layer => layer.id === 'terrain1').visibility).toBe(true);
+        expect(updatedMap.layers.find(layer => layer.id === 'layer1').visibility).toBe(true);
+    });
 });

web/client/epics/config.js

@@ -213,7 +213,7 @@ export const storeDetailsInfoEpic = (action$, store) =>
             let details = attributes?.details;
             let detailsSettings;
             try {
-                detailsSettings = JSON.parse(attributes?.detailsSettings);
+                detailsSettings = typeof attributes?.detailsSettings === 'string' ? JSON.parse(attributes?.detailsSettings) : attributes?.detailsSettings;
             } catch (e) {
                 detailsSettings = {};
             }