#9697: fix spatial filter and widget connection issues

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

@@ -38,4 +38,9 @@ describe('widgets emptyChartState enhancer', () => {
         ReactDOM.render(<Dummy data={[]}/>, document.getElementById("container"));
         expect(document.querySelector(".ms-widget-empty-message")).toExist();
     });
+    it("should render empty chart state in case of data has empty arr item", () => {
+        const Dummy = emptyChartState(() => <div id="dummy"></div>);
+        ReactDOM.render(<Dummy data={[[]]}/>, document.getElementById("container"));
+        expect(document.querySelector(".ms-widget-empty-message")).toExist();
+    });
 });

web/client/components/widgets/enhancers/emptyChartState.js

@@ -2,7 +2,7 @@ import emptyState from '../../misc/enhancers/emptyState';
 import WidgetEmptyMessage from '../widget/WidgetEmptyMessage';
 
 export default emptyState(
-    ({data = []}) => !data || data.length === 0,
+    ({data = []}) => !data || data.length === 0 || data?.flat()?.length === 0,
     ({mapSync, iconFit} = {}) => ({
         iconFit,
         messageId: mapSync ? "widgets.errors.nodatainviewport" : "widgets.errors.nodata",

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

@@ -104,7 +104,7 @@ const CounterView = enhanceCounter(({
     const renderCounter = ({ dataKey } = {}, i) => (<Counter
         key={dataKey}
         uom={get(options, `seriesOptions[${i}].uom`)}
-        value={data[0][dataKey]}
+        value={data[0][dataKey] || 0}
         counterOpts={counterOpts}
         formula={formula}
         style={{ textAlign: "center", ...style }}

web/client/epics/widgetsbuilder.js

@@ -70,6 +70,7 @@ export const initEditorOnNewChart = (action$, {getState = () => {}} = {}) => act
                 charts: [
                     {
                         chartId,
+                        layer,
                         legend: false,
                         cartesian: true,
                         traces: [

web/client/reducers/__tests__/widgets-test.js

@@ -148,6 +148,18 @@ describe('Test the widgets reducer', () => {
                                     name: "layer3",
                                     id: "3"
                                 }
+                            }, {
+                                layer: {
+                                    visibility: false,
+                                    name: "layer3",
+                                    id: "3"
+                                }, traces: [{
+                                    layer: {
+                                        visibility: false,
+                                        name: "layer3",
+                                        id: "3"
+                                    }, id: "traceId"
+                                }]
                             }
                         ]
                     }]
@@ -166,6 +178,8 @@ describe('Test the widgets reducer', () => {
         expect(widgetObjects[3].layer).toEqual(newTargetLayer);
         expect(widgetObjects[4].charts[0].layer).toEqual(newTargetLayer);
         expect(widgetObjects[4].charts[1].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[4].charts[1].layer);
+        expect(widgetObjects[4].charts[2].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[4].charts[1].layer);
+        expect(widgetObjects[4].charts[2].traces[0].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[4].charts[2].traces[0].layer);
     });
     it('deleteWidget', () => {
         const state = {

web/client/reducers/widgets.js

@@ -158,9 +158,16 @@ function widgetsReducer(state = emptyState, action) {
                             // every chart stores the layer object configuration
                             // so we need to loop around them to update correctly the layer properties
                             // including the layerFilter
-                            return set("charts", w.charts.map((chart) =>
-                                get(chart, "layer.id") === action.layer.id ? set("layer", action.layer, chart) : chart
-                            ), w);
+                            let chartsCopy = w?.charts?.length ? [...w.charts] : [];
+                            chartsCopy = chartsCopy.map(chart=>{
+                                let chartItem = {...chart};
+                                chartItem = get(chart, "layer.id") === action.layer.id ? set("layer", action.layer, chart) : chart;
+                                chartItem.traces = chartItem?.traces?.map(trace=>
+                                    get(trace, "layer.id") === action.layer.id ? set("layer", action.layer, trace) : trace
+                                );
+                                return chartItem;
+                            });
+                            return set("charts", chartsCopy, w);
                         }
                         return get(w, "layer.id") === action.layer.id ? set("layer", action.layer, w) : w;
                     }), state);