#12467 Add maximum visible features in current view option for FlatGeobuf layers (#12481)

Fix #12467 Add maximum visible features in current view option for FlatGeobuf

Author: Binabh

docs/developer-guide/maps-configuration.md

@@ -1396,13 +1396,19 @@ See format specifications for more info about FlatGeobuf [here](https://flatgeob
 ```javascript
 {
     "type": "flatgeobuf",
-    "url": "https://host-sample/countries.fgb",    
+    "url": "https://host-sample/countries.fgb",
     "title": "Title",
     "group": "",
-    "visibility": true
+    "visibility": true,
+    "maxFeaturesInView": 1000
 }
 ```
 
+Where:
+
+- `url` is the URL of the FlatGeobuf source.
+- `maxFeaturesInView` (optional) the maximum number of features to load for the current map view. Used to limit rendering when the FlatGeobuf source contains many features.
+
 ## Layer groups
 
 Inside the map configuration, near the `layers` entry, you can find also the `groups` entry. This array contains information about the groups in the TOC.

web/client/api/FlatGeobuf.js

@@ -28,7 +28,12 @@ export const FGB_FEATURE_BATCH_SIZE = 200;
  * when batches arrive faster than the network roundtrip, in cesium plugin
  */
 export const FGB_STREAM_FLUSH_INTERVAL = 500;
+export const FGB_MEANINGFUL_VIEW_RATIO = 0.95;
 
+export const getFlatGeobufMaxFeaturesInView = (options) => {
+    const maxFeaturesInView = Number(options?.maxFeaturesInView);
+    return maxFeaturesInView > 0 ? maxFeaturesInView : undefined;
+};
 export const getFlatGeobufGeojson = () => import('flatgeobuf/lib/mjs/geojson').then(mod => mod);
 export const getFlatGeobufGeneric = () => import('flatgeobuf/lib/mjs/generic').then(mod => mod);
 
@@ -45,7 +50,7 @@ function getTitleFromUrl(url) {
     return nameNoExt || filename;
 }
 
-function extractCapabilities({url}) {
+function extractCapabilities({ url }) {
     const version = FGB_VERSION;
     const format = getFormat(url || '') || FGB;
     return {
@@ -81,7 +86,7 @@ export const getCapabilities = (url) => {
                 crs: getFlatGeobufCrsFromMetadata(metadata)
             };
 
-            const capabilities = extractCapabilities({flatgeobuf, url});
+            const capabilities = extractCapabilities({ flatgeobuf, url });
 
             return {
                 ...capabilities,

web/client/api/__tests__/FlatGeobuf-test.jsx

@@ -12,6 +12,7 @@ import {
     FGB_VERSION,
     getCapabilities,
     createFlatGeobufGeometryTypeResolver,
+    getFlatGeobufMaxFeaturesInView,
     sniffFlatGeobufFirstGeometryType,
     sniffFlatGeobufFirstFeature
 } from '../FlatGeobuf';
@@ -32,6 +33,21 @@ const FGB_FILE_FIRST_FEATURE_PROPS = {
     }
 };
 describe('Test FlatGeobuf API', () => {
+    describe('getFlatGeobufMaxFeaturesInView', () => {
+        it('returns undefined when the option is not configured', () => {
+            expect(getFlatGeobufMaxFeaturesInView()).toBe(undefined);
+            expect(getFlatGeobufMaxFeaturesInView({})).toBe(undefined);
+        });
+        it('returns the positive integer option', () => {
+            expect(getFlatGeobufMaxFeaturesInView({ maxFeaturesInView: 25 })).toBe(25);
+            expect(getFlatGeobufMaxFeaturesInView({ maxFeaturesInView: '25' })).toBe(25);
+        });
+        it('ignores invalid values', () => {
+            expect(getFlatGeobufMaxFeaturesInView({ maxFeaturesInView: 0 })).toBe(undefined);
+            expect(getFlatGeobufMaxFeaturesInView({ maxFeaturesInView: -1 })).toBe(undefined);
+            expect(getFlatGeobufMaxFeaturesInView({ maxFeaturesInView: 'wrong' })).toBe(undefined);
+        });
+    });
     it('getCapabilities from FlatGeobuf file', (done) => {
         getCapabilities(FGB_FILE).then(({ bbox, format, version, title}) => {
             try {

web/client/api/catalog/FlatGeobuf.js

@@ -58,11 +58,14 @@ function validateUrl(serviceUrl) {
  * Converts a FGB record into a layerNode
  * maybe export as util method
  */
-const recordToLayer = (record) => {
+const recordToLayer = (record, {
+    service
+} = {}) => {
     if (!record) {
         return null;
     }
     const { format, properties, bbox } = record;
+    const { layerOptions } = service || {};
     return {
         type: FGB_LAYER_TYPE,
         url: record.url,
@@ -72,7 +75,8 @@ const recordToLayer = (record) => {
         sourceMetadata: record.metadata,
         ...(bbox && { bbox }),
         ...(format && { format }),
-        ...(properties && { properties })
+        ...(properties && { properties }),
+        ...layerOptions
     };
 };
 

web/client/api/catalog/__tests__/FlatGeobuf-test.js

@@ -42,5 +42,20 @@ describe('Test FlatGeobuf API catalog', () => {
         expect(layer.type).toEqual(FGB_LAYER_TYPE);
         expect(layer.url).toEqual(FGB_FILE);
     });
+    it('should merge service layer options into the layer config', () => {
+        const catalogRecord = {
+            serviceType: FGB_LAYER_TYPE,
+            isValid: true,
+            identifier: FGB_FILE,
+            url: FGB_FILE
+        };
+        const layer = getLayerFromRecord(catalogRecord, {
+            service: {
+                layerOptions: {
+                    maxFeaturesInView: 10
+                }
+            }
+        });
+        expect(layer.maxFeaturesInView).toBe(10);
+    });
 });
-

web/client/components/TOC/fragments/settings/Display.jsx

@@ -16,9 +16,10 @@ import {Checkbox, Col, ControlLabel, FormGroup, Glyphicon, Grid, Row, Button as
 
 import tooltip from '../../../misc/enhancers/buttonTooltip';
 const Button = tooltip(ButtonRB);
-import IntlNumberFormControl from '../../../I18N/IntlNumberFormControl';
+import MSIntlNumberFormControl from '../../../I18N/IntlNumberFormControl';
 import Message from '../../../I18N/Message';
 import InfoPopover from '../../../widgets/widget/InfoPopover';
+import localizedProps from '../../../misc/enhancers/localizedProps';
 import Legend from '../../../../plugins/TOC/components/Legend';
 import VisibilityLimitsForm from './VisibilityLimitsForm';
 import { ServerTypes } from '../../../../utils/LayersUtils';
@@ -32,6 +33,8 @@ import StyleBasedWMSJsonLegend from '../../../../plugins/TOC/components/StyleBas
 import VectorLegend from '../../../../plugins/TOC/components/VectorLegend';
 import { isMapServerUrl } from '../../../../utils/ArcGISUtils';
 
+const IntlNumberFormControl = localizedProps('placeholder')(MSIntlNumberFormControl);
+
 export default class extends React.Component {
     static propTypes = {
         opacityText: PropTypes.node,
@@ -124,6 +127,11 @@ export default class extends React.Component {
         });
     }
 
+    onMaxFeaturesInViewChange = (value) => {
+        const maxFeaturesInView = parseInt(value, 10);
+        this.props.onChange("maxFeaturesInView", maxFeaturesInView > 0 ? maxFeaturesInView : undefined);
+    };
+
     getValidationState = (name) =>{
         if (this.state.legendOptions && this.state.legendOptions[name]) {
             return parseInt(this.state.legendOptions[name], 10) < 12 && "error";
@@ -212,6 +220,22 @@ export default class extends React.Component {
                     </Col>
                 </Row>}
 
+                {this.props.element.type === "flatgeobuf" && <Row>
+                    <Col xs={12}>
+                        <FormGroup>
+                            <ControlLabel><Message msgId="layerProperties.maxFeaturesInView" /></ControlLabel>
+                            <IntlNumberFormControl
+                                data-qa="display-max-features-in-view"
+                                type="number"
+                                min={1}
+                                step={1}
+                                placeholder="layerProperties.maxFeaturesInViewPlaceholder"
+                                value={this.props.element.maxFeaturesInView === undefined ? '' : this.props.element.maxFeaturesInView}
+                                onChange={this.onMaxFeaturesInViewChange}/>
+                        </FormGroup>
+                    </Col>
+                </Row>}
+
                 <Row>
                     <Col xs={12}>
                         <FormGroup>

web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx

@@ -53,6 +53,32 @@ describe('test Layer Properties Display module component', () => {
         ReactTestUtils.Simulate.focus(inputs[0]);
         expect(inputs[0].value).toBe('100');
     });
+    it('tests Display component for FlatGeobuf max features in view field', () => {
+        const l = {
+            name: 'layer00',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'flatgeobuf',
+            url: 'fakeurl',
+            maxFeaturesInView: 7
+        };
+        const settings = {
+            options: {opacity: 1}
+        };
+        const handlers = {
+            onChange() {}
+        };
+        const spyOn = expect.spyOn(handlers, 'onChange');
+        ReactDOM.render(<Display element={l} settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
+        const maxFeaturesInView = document.querySelector('[data-qa="display-max-features-in-view"]');
+        expect(maxFeaturesInView).toBeTruthy();
+        expect(maxFeaturesInView.value).toBe('7');
+        ReactTestUtils.Simulate.change(maxFeaturesInView, { target: { value: '15' } });
+        expect(spyOn.calls[0].arguments).toEqual([ 'maxFeaturesInView', 15 ]);
+        ReactTestUtils.Simulate.change(maxFeaturesInView, { target: { value: '' } });
+        expect(spyOn.calls[1].arguments).toEqual([ 'maxFeaturesInView', undefined ]);
+    });
     it('tests Display component for wms for map viewer', () => {
         const l = {
             name: 'layer00',

web/client/components/catalog/editor/AdvancedSettings/CommonAdvancedSettings.jsx

@@ -7,10 +7,18 @@
  */
 import React from 'react';
 import { isNil } from 'lodash';
-import { FormGroup, Checkbox } from "react-bootstrap";
+import { FormGroup, Checkbox, ControlLabel, FormControl } from "react-bootstrap";
 
 import Message from "../../../I18N/Message";
 import InfoPopover from '../../../widgets/widget/InfoPopover';
+import localizedProps from '../../../misc/enhancers/localizedProps';
+
+const LocalizedFormControl = localizedProps('placeholder')(FormControl);
+
+const parseMaxFeaturesInView = (event) => {
+    const maxFeaturesInView = Number(event?.target?.value);
+    return maxFeaturesInView > 0 ? maxFeaturesInView : undefined;
+};
 
 /**
  * Common Advanced settings form WMS/CSW/WMTS/WFS
@@ -55,6 +63,21 @@ export default ({
                     <Message msgId="catalog.fetchMetadata.label" />&nbsp;<InfoPopover text={<Message msgId="catalog.fetchMetadata.tooltip" />} />
                 </Checkbox>
             </FormGroup>}
+            {!isNil(service.type) && service.type === "flatgeobuf" &&
+            <FormGroup className="form-group" controlId="maxFeaturesInView" key="maxFeaturesInView">
+                <ControlLabel><Message msgId="layerProperties.maxFeaturesInView" /></ControlLabel>
+                <LocalizedFormControl
+                    data-qa="catalog-max-features-in-view"
+                    type="number"
+                    min={1}
+                    step={1}
+                    placeholder="layerProperties.maxFeaturesInViewPlaceholder"
+                    value={service.layerOptions?.maxFeaturesInView === undefined ? '' : service.layerOptions?.maxFeaturesInView}
+                    onChange={(e) => onChangeServiceProperty("layerOptions", {
+                        ...service.layerOptions,
+                        maxFeaturesInView: parseMaxFeaturesInView(e)
+                    })} />
+            </FormGroup>}
             {['wfs', 'vector'].includes(service.type) && <FormGroup className="wfs-vector-interactive-legend" controlId="enableInteractiveLegend" key="enableInteractiveLegend">
                 <Checkbox data-qa="display-interactive-legend-option"
                     onChange={(e) => onChangeServiceProperty("layerOptions", { ...service.layerOptions, enableInteractiveLegend: e.target.checked})}

web/client/components/catalog/editor/AdvancedSettings/__tests__/CommonAdvancedSettings-test.js

@@ -105,6 +105,33 @@ describe('Test common advanced settings', () => {
         expect(interactiveLegendLabel).toBeTruthy();
         expect(interactiveLegendLabel.innerHTML).toEqual('layerProperties.enableInteractiveLegendInfo.label');
     });
+    it('test FlatGeobuf max features in view input', () => {
+        const action = {
+            onChangeServiceProperty: () => {}
+        };
+        const spyOn = expect.spyOn(action, 'onChangeServiceProperty');
+        ReactDOM.render(<CommonAdvancedSettings
+            onChangeServiceProperty={action.onChangeServiceProperty}
+            service={{type: "flatgeobuf", layerOptions: { maxFeaturesInView: 7 }}}
+        />, document.getElementById("container"));
+        const maxFeaturesInView = document.querySelector("[data-qa='catalog-max-features-in-view']");
+        expect(maxFeaturesInView).toBeTruthy();
+        expect(maxFeaturesInView.value).toBe('7');
+        TestUtils.Simulate.change(maxFeaturesInView, { "target": { "value": '15' }});
+        expect(spyOn.calls[0].arguments).toEqual([
+            'layerOptions',
+            {
+                maxFeaturesInView: 15
+            }
+        ]);
+        TestUtils.Simulate.change(maxFeaturesInView, { "target": { "value": '' }});
+        expect(spyOn.calls[1].arguments).toEqual([
+            'layerOptions',
+            {
+                maxFeaturesInView: undefined
+            }
+        ]);
+    });
 
     it('test if thumbnail checkbox is checked when globalHideThumbnail is true', () => {
         ReactDOM.render(

web/client/components/map/cesium/__tests__/Layer-test.jsx

@@ -27,12 +27,12 @@ import '../plugins/TerrainLayer';
 import '../plugins/ElevationLayer';
 import '../plugins/ArcGISLayer';
 import '../plugins/ModelLayer';
-import '../plugins/FlatGeobufLayer';
 
 import {setStore} from '../../../../utils/SecurityUtils';
 import ConfigUtils from '../../../../utils/ConfigUtils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '../../../../libs/ajax';
+import { isMeaningfulCappedRectRefinement } from '../../../../utils/FlatGeobufLayerUtils';
 
 const tilesetMock = {
     "asset": {
@@ -1904,6 +1904,33 @@ describe('Cesium layer', () => {
             metadata: { geometryType: 3 } // Polygon
         };
 
+        it('identifies meaningful capped rect refinements', () => {
+            const loadedRect = {
+                capped: true,
+                rect: { minX: 0, minY: 0, maxX: 100, maxY: 100 }
+            };
+            expect(isMeaningfulCappedRectRefinement(
+                loadedRect,
+                { minX: 0, minY: 0, maxX: 100, maxY: 100 }
+            )).toBe(false);
+            expect(isMeaningfulCappedRectRefinement(
+                loadedRect,
+                { minX: 1, minY: 1, maxX: 99, maxY: 99 }
+            )).toBe(false);
+            expect(isMeaningfulCappedRectRefinement(
+                loadedRect,
+                { minX: 25, minY: 25, maxX: 75, maxY: 75 }
+            )).toBe(true);
+            expect(isMeaningfulCappedRectRefinement(
+                loadedRect,
+                { minX: 50, minY: 50, maxX: 150, maxY: 150 }
+            )).toBe(false);
+            expect(isMeaningfulCappedRectRefinement(
+                { ...loadedRect, capped: false },
+                { minX: 25, minY: 25, maxX: 75, maxY: 75 }
+            )).toBe(false);
+        });
+
         it('exposes getStyledFeatures and getInferredGeometryType accessors', () => {
             const cmp = ReactDOM.render(
                 <CesiumLayer
@@ -1947,5 +1974,31 @@ describe('Cesium layer', () => {
             // Same GeoJSONStyledFeatures instance: features stay loaded.
             expect(cmp.layer.getStyledFeatures()).toBe(styledFeaturesBefore);
         });
+
+        it('recreates the layer when maxFeaturesInView changes', () => {
+            const cmp = ReactDOM.render(
+                <CesiumLayer
+                    type="flatgeobuf"
+                    options={{
+                        ...baseOptions,
+                        maxFeaturesInView: 1
+                    }}
+                    map={map}
+                />, document.getElementById('container'));
+            const layerBefore = cmp.layer;
+            expect(layerBefore).toBeTruthy();
+
+            ReactDOM.render(
+                <CesiumLayer
+                    type="flatgeobuf"
+                    options={{
+                        ...baseOptions,
+                        maxFeaturesInView: 2
+                    }}
+                    map={map}
+                />, document.getElementById('container'));
+            expect(cmp.layer).toNotBe(layerBefore);
+            expect(cmp.layer.getStyledFeatures()).toBeTruthy();
+        });
     });
 });