Counter widget sends double requests, the first one has viewport as undefined #10674 (#10683)

rowheat02 · web-flow · commit a174c99f320b · 2024-11-27T10:37:49.000+01:00
diff --git a/web/client/components/widgets/enhancers/__tests__/wpsCounter-test.js b/web/client/components/widgets/enhancers/__tests__/wpsCounter-test.js
@@ -23,7 +23,7 @@ describe('wpsChart enhancer', () => {
         document.body.innerHTML = '';
         setTimeout(done);
     });
-    it('wpsChart data retrival', (done) => {
+    it('wpsCounter data retrieval', (done) => {
         const Sink = wpsCounter(createSink( ({data, loading} = {}) => {
             if (!loading) {
                 expect(data).toExist();
@@ -44,7 +44,7 @@ describe('wpsChart enhancer', () => {
         };
         ReactDOM.render(<Sink {...props} />, document.getElementById("container"));
     });
-    it('wpsChart error management', (done) => {
+    it('wpsCounter error management', (done) => {
         const Sink = wpsCounter(createSink( ({error, loading} = {}) => {
             if (!loading && error) {
                 expect(error).toExist();
@@ -64,4 +64,28 @@ describe('wpsChart enhancer', () => {
         };
         ReactDOM.render(<Sink {...props} />, document.getElementById("container"));
     });
+    it('wpsCounter with mapSync and dependencies', (done) => {
+        const Sink = wpsCounter(createSink( ({data, loading} = {}) => {
+            if (!loading) {
+                expect(data).toExist();
+                done();
+            }
+        }));
+        const props = {
+            mapSync: true,
+            dependencies: {
+                viewport: "..."
+            },
+            layer: {
+                name: "test",
+                url: 'base/web/client/test-resources/widgetbuilder/aggregate',
+                wpsUrl: 'base/web/client/test-resources/widgetbuilder/aggregate',
+                search: {url: 'base/web/client/test-resources/widgetbuilder/aggregate'}},
+            options: {
+                aggregateFunction: "Count",
+                aggregationAttribute: "test"
+            }
+        };
+        ReactDOM.render(<Sink {...props} />, document.getElementById("container"));
+    });
 });
diff --git a/web/client/components/widgets/enhancers/wfsTable/__tests__/triggerFetch-test.js b/web/client/components/widgets/enhancers/wfsTable/__tests__/triggerFetch-test.js
@@ -55,5 +55,28 @@ describe('triggerFetch stream', () => {
                 }
             );
     });
+    it('triggerFetch with mapSync and dependencies.viewport', (done) => {
+        const base = {
+            layer: { name: "TEST" },
+            mapSync: true
+        };
+        const propsChanges = [
+            base, // does not trigger fetch
+            {...base, dependencies: { viewport: true }}, // triggers fetch (p1)
+            {...base, dependencies: { viewport: false }}, // does not trigger fetch
+            {...base, mapSync: false, filter: "changed"} // triggers fetch (p2) (the filter changes due to the viewport)
+        ];
+        triggerFetch(Rx.Observable.from(propsChanges))
+            .bufferCount(4)
+            .subscribe(
+                ([p1, p2, p3, p4]) => {
+                    expect(p1?.dependencies?.viewport).toBe(true);
+                    expect(p2).toExist();
+                    expect(p3).toNotExist();
+                    expect(p4).toNotExist();
+                    done();
+                }
+            );
+    });
 
 });
diff --git a/web/client/components/widgets/enhancers/wfsTable/triggerFetch.js b/web/client/components/widgets/enhancers/wfsTable/triggerFetch.js
@@ -22,7 +22,15 @@ const sameSortOptions = (o1 = {}, o2 = {}) =>
  * @return {Observable} Stream of props to trigger the data fetch
  */
 export default ($props) =>
-    $props.filter(({ layer = {} }) => layer.name )
+    $props.filter(({ layer = {}, mapSync, dependencies }) => {
+        // Check if mapSync is enabled (true) and dependencies.viewport is null or falsy
+        // If this condition is true, return false to filter out the event.
+        // This prevents an extra API call from being triggered when the viewport is not available.
+        if (mapSync && !dependencies?.viewport) {
+            return false;
+        }
+        return layer.name;
+    } )
         .distinctUntilChanged(
             ({ layer = {}, options = {}, filter, sortOptions }, newProps) =>
             /* getSearchUrl(layer) === getSearchUrl(layer) && */
diff --git a/web/client/components/widgets/enhancers/wpsCounter.js b/web/client/components/widgets/enhancers/wpsCounter.js
@@ -30,7 +30,15 @@ import { getWpsUrl } from '../../../utils/LayersUtils';
  */
 const dataStreamFactory = ($props) =>
     $props
-        .filter(({layer = {}, options}) => layer.name && getWpsUrl(layer) && options && options.aggregateFunction && options.aggregationAttribute)
+        .filter(({layer = {}, options, dependencies, mapSync}) => {
+            // Check if mapSync is enabled (true) and dependencies.viewport is null or falsy
+            // If this condition is true, return false to filter out the event.
+            // This prevents an extra API call from being triggered when the viewport is not available.
+            if (mapSync && !dependencies?.viewport) {
+                return false;
+            }
+            return layer.name && getWpsUrl(layer) && options && options.aggregateFunction && options.aggregationAttribute;
+        })
         .distinctUntilChanged(
             ({layer = {}, options = {}, filter}, newProps) =>
                 (newProps.layer && layer.name === newProps.layer.name && layer.loadingError === newProps.layer.loadingError)
