#9590: COG download metadata by default with abort fetch

build/buildConfig.js

@@ -194,7 +194,8 @@ module.exports = (...args) => mapArgumentsToObject(args, ({
             jsonix: '@boundlessgeo/jsonix',
             // next libs are added because of this issue https://github.com/geosolutions-it/MapStore2/issues/4569
             proj4: '@geosolutions/proj4',
-            "react-joyride": '@geosolutions/react-joyride'
+            "react-joyride": '@geosolutions/react-joyride',
+            "geotiff-remote": path.join(paths.base, "node_modules", "geotiff", "dist-module", "source", "remote")
         }, alias),
         ...(resolveModules && { modules: resolveModules })
     },

build/testConfig.js

@@ -140,7 +140,8 @@ module.exports = ({browsers = [ 'ChromeHeadless' ], files, path, testFile, singl
                 jsonix: '@boundlessgeo/jsonix',
                 // next libs are added because of this issue https://github.com/geosolutions-it/MapStore2/issues/4569
                 proj4: '@geosolutions/proj4',
-                "react-joyride": '@geosolutions/react-joyride'
+                "react-joyride": '@geosolutions/react-joyride',
+                "geotiff-remote": nodePath.join(__dirname, "..", "node_modules", "geotiff", "dist-module", "source", "remote")
             }, alias),
             extensions: ['.js', '.json', '.jsx']
         },

web/client/actions/__tests__/catalog-test.js

@@ -238,6 +238,13 @@ describe('Test correctness of the catalog actions', () => {
         expect(retval).toExist();
         expect(retval.type).toBe(ADD_SERVICE);
     });
+    it('addService with options', () => {
+        const options = {"test": "1"};
+        var retval = addService(options);
+        expect(retval).toExist();
+        expect(retval.type).toBe(ADD_SERVICE);
+        expect(retval.options).toEqual(options);
+    });
     it('addCatalogService', () => {
         var retval = addCatalogService(service);
 

web/client/actions/catalog.js

@@ -170,9 +170,10 @@ export function changeUrl(url) {
         url
     };
 }
-export function addService() {
+export function addService(options) {
     return {
-        type: ADD_SERVICE
+        type: ADD_SERVICE,
+        options
     };
 }
 export function addCatalogService(service) {

web/client/api/catalog/COG.js

@@ -8,8 +8,10 @@
 
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
 import { Observable } from 'rxjs';
-import { fromUrl } from 'geotiff';
+import { GeoTIFF } from 'geotiff';
+import { makeRemoteSource } from 'geotiff-remote';
 
 import { isValidURL } from '../../utils/URLUtils';
 import ConfigUtils from '../../utils/ConfigUtils';
@@ -57,8 +59,22 @@ export const getProjectionFromGeoKeys = (image) => {
 
     return null;
 };
+const abortError = (reject) => reject(new DOMException("Aborted", "AbortError"));
+/**
+ * getImage with abort fetching of data slices
+ */
+const getImage = (geotiff, signal) => {
+    if (signal?.aborted) {
+        return abortError(Promise.reject);
+    }
+    return new Promise((resolve, reject) => {
+        signal?.addEventListener("abort", () => abortError(reject));
+        return geotiff.getImage() // Fetch and read first image to get medatadata of the tif
+            .then((image) => resolve(image))
+            .catch(()=> abortError(reject));
+    });
+};
 let capabilitiesCache = {};
-
 export const getRecords = (_url, startPosition, maxRecords, text, info = {}) => {
     const service = get(info, 'options.service');
     let layers = [];
@@ -73,19 +89,35 @@ export const getRecords = (_url, startPosition, maxRecords, text, info = {}) =>
                 sources: [{url}],
                 options: service.options || {}
             };
-            if (service.fetchMetadata) {
+            const controller = get(info, 'options.controller');
+            const isSave = get(info, 'options.save', false);
+            // Fetch metadata only on saving the service (skip on search)
+            if ((isNil(service.fetchMetadata) || service.fetchMetadata) && isSave) {
                 const cached = capabilitiesCache[url];
                 if (cached && new Date().getTime() < cached.timestamp + (ConfigUtils.getConfigProp('cacheExpire') || 60) * 1000) {
                     return {...cached.data};
                 }
-                return fromUrl(url)
-                    .then(geotiff => geotiff.getImage())
+                const signal = controller?.signal;
+                // geotiff's `fromUrl` & `getImage` function doesn't pass down signal parameter properly. Known issue (https://github.com/geotiffjs/geotiff.js/issues/330)
+                // Hence `fromSource` is called directly with source formulated
+                return GeoTIFF.fromSource(makeRemoteSource(url, {}), {}, signal)
+                    .then(geotiff => getImage(geotiff, signal))
                     .then(image => {
                         const crs = getProjectionFromGeoKeys(image);
                         const extent = image.getBoundingBox();
                         const isProjectionDefined = isProjectionAvailable(crs);
                         layer = {
                             ...layer,
+                            sourceMetadata: {
+                                crs,
+                                extent: extent,
+                                width: image.getWidth(),
+                                height: image.getHeight(),
+                                tileWidth: image.getTileWidth(),
+                                tileHeight: image.getTileHeight(),
+                                origin: image.getOrigin(),
+                                resolution: image.getResolution()
+                            },
                             // skip adding bbox when geokeys or extent is empty
                             ...(!isEmpty(extent) && !isEmpty(crs) && isProjectionDefined && {
                                 bbox: {

web/client/components/catalog/CatalogServiceEditor.jsx

@@ -17,7 +17,20 @@ import Message from "../I18N/Message";
 import AdvancedSettings from './editor/AdvancedSettings';
 import MainForm from './editor/MainForm';
 
-export default ({
+const withAbort = (Component) => {
+    return (props) => {
+        const [abortController, setAbortController] = useState(null);
+        const onSave = () => {
+            // Currently abort request on saving is applicable only for COG service
+            const controller = props.format === 'cog' ? new AbortController() : null;
+            setAbortController(controller);
+            return props.onAddService({save: true, controller});
+        };
+        const onCancel = () => abortController && props.saving ? abortController?.abort() : props.onChangeCatalogMode("view");
+        return <Component {...props} onCancel={onCancel} onSaveService={onSave} disabled={!abortController && props.saving} />;
+    };
+};
+const CatalogServiceEditor = ({
     service = {
         title: "",
         type: "wms",
@@ -39,9 +52,9 @@ export default ({
     onChangeServiceProperty = () => {},
     onToggleTemplate = () => {},
     onToggleThumbnail = () => {},
-    onAddService = () => {},
     onDeleteService = () => {},
-    onChangeCatalogMode = () => {},
+    onCancel = () => {},
+    onSaveService = () => {},
     onFormatOptionsFetch = () => {},
     selectedService,
     isLocalizedLayerStylesEnabled,
@@ -50,7 +63,8 @@ export default ({
     layerOptions = {},
     infoFormatOptions,
     services,
-    autoSetVisibilityLimits = false
+    autoSetVisibilityLimits = false,
+    disabled
 }) => {
     const [valid, setValid] = useState(true);
     return (<BorderLayout
@@ -92,7 +106,7 @@ export default ({
             />
             <FormGroup controlId="buttons" key="buttons">
                 <Col xs={12}>
-                    <Button style={buttonStyle} disabled={saving || !valid} onClick={() => onAddService()} key="catalog_add_service_button">
+                    <Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button">
                         {saving ? <Loader size={12} style={{display: 'inline-block'}} /> : null}
                         <Message msgId="save" />
                     </Button>
@@ -102,11 +116,13 @@ export default ({
                         </Button>
                         : null
                     }
-                    <Button style={buttonStyle} disabled={saving} onClick={() => onChangeCatalogMode("view")} key="catalog_back_view_button">
+                    <Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button">
                         <Message msgId="cancel" />
                     </Button>
                 </Col>
             </FormGroup>
         </Form>
     </BorderLayout>);
 };
+
+export default withAbort(CatalogServiceEditor);

web/client/components/catalog/__tests__/CatalogServiceEditor-test.jsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import expect from 'expect';
+import TestUtils from 'react-dom/test-utils';
 import CatalogServiceEditor from '../CatalogServiceEditor';
 import {defaultPlaceholder} from "../editor/MainFormUtils";
 
@@ -149,4 +150,78 @@ describe('Test CatalogServiceEditor', () => {
         let placeholder = defaultPlaceholder(service);
         expect(placeholder).toBe("e.g. https://mydomain.com/geoserver/wms");
     });
+    it('test saving service for COG type', () => {
+        const actions = {
+            onAddService: () => {}
+        };
+        const spyOnAdd = expect.spyOn(actions, 'onAddService');
+        ReactDOM.render(<CatalogServiceEditor
+            format="cog"
+            onAddService={actions.onAddService}
+        />, document.getElementById("container"));
+        let buttons = document.querySelectorAll('.form-group button');
+        let saveBtn;
+        buttons.forEach(btn => {if (btn.textContent === 'save') saveBtn = btn;});
+        expect(saveBtn).toBeTruthy();
+        TestUtils.Simulate.click(saveBtn);
+        expect(spyOnAdd).toHaveBeenCalled();
+        let arg = spyOnAdd.calls[0].arguments[0];
+        expect(arg.save).toBe(true);
+        expect(arg.controller).toBeTruthy();
+
+        ReactDOM.render(<CatalogServiceEditor
+            format="csw"
+            onAddService={actions.onAddService}
+        />, document.getElementById("container"));
+        buttons = document.querySelectorAll('.form-group button');
+        buttons.forEach(btn => {if (btn.textContent === 'save') saveBtn = btn;});
+        expect(saveBtn).toBeTruthy();
+        TestUtils.Simulate.click(saveBtn);
+        expect(spyOnAdd).toHaveBeenCalled();
+        arg = spyOnAdd.calls[1].arguments[0];
+        expect(arg.save).toBeTruthy();
+        expect(arg.controller).toBeFalsy();
+    });
+    it('test cancel service', () => {
+        const actions = {
+            onChangeCatalogMode: () => {},
+            onAddService: () => {}
+        };
+        const spyOnCancel = expect.spyOn(actions, 'onChangeCatalogMode');
+        ReactDOM.render(<CatalogServiceEditor
+            format="csw"
+            onChangeCatalogMode={actions.onChangeCatalogMode}
+        />, document.getElementById("container"));
+        let buttons = document.querySelectorAll('.form-group button');
+        let cancelBtn;
+        buttons.forEach(btn => {if (btn.textContent === 'cancel') cancelBtn = btn;});
+        expect(cancelBtn).toBeTruthy();
+        TestUtils.Simulate.click(cancelBtn);
+        expect(spyOnCancel).toHaveBeenCalled();
+        let arg = spyOnCancel.calls[0].arguments[0];
+        expect(arg).toBe('view');
+
+        const spyOnAdd = expect.spyOn(actions, 'onAddService');
+        ReactDOM.render(<CatalogServiceEditor
+            format="cog"
+            onChangeCatalogMode={actions.onChangeCatalogMode}
+            onAddService={actions.onAddService}
+        />, document.getElementById("container"));
+        buttons = document.querySelectorAll('.form-group button');
+        let saveBtn;
+        buttons.forEach(btn => {if (btn.textContent === 'save') saveBtn = btn;});
+        TestUtils.Simulate.click(saveBtn);
+        expect(spyOnAdd).toHaveBeenCalled();
+
+        ReactDOM.render(<CatalogServiceEditor
+            format="cog"
+            saving
+            onChangeCatalogMode={actions.onChangeCatalogMode}
+            onAddService={actions.onAddService}
+        />, document.getElementById("container"));
+        buttons = document.querySelectorAll('.form-group button');
+        buttons.forEach(btn => {if (btn.textContent === 'cancel') cancelBtn = btn;});
+        TestUtils.Simulate.click(cancelBtn);
+        expect(spyOnCancel.calls[1]).toBeFalsy();
+    });
 });

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

@@ -58,7 +58,7 @@ export default ({
                 <Col xs={12}>
                     <Checkbox
                         onChange={(e) => onChangeServiceProperty("fetchMetadata", e.target.checked)}
-                        checked={!isNil(service.fetchMetadata) ? service.fetchMetadata : false}>
+                        checked={!isNil(service.fetchMetadata) ? service.fetchMetadata : true}>
                         <Message msgId="catalog.fetchMetadata.label" />&nbsp;<InfoPopover text={<Message msgId="catalog.fetchMetadata.tooltip" />} />
                     </Checkbox>
                 </Col>

web/client/epics/catalog.js

@@ -292,7 +292,7 @@ export default (API) => ({
     */
     newCatalogServiceAdded: (action$, store) =>
         action$.ofType(ADD_SERVICE)
-            .switchMap(() => {
+            .switchMap(({options} = {}) => {
                 const state = store.getState();
                 const newService = newServiceSelector(state);
                 const maxRecords = pageSizeSelector(state);
@@ -310,7 +310,7 @@ export default (API) => ({
                                 startPosition: 1,
                                 maxRecords,
                                 text: "",
-                                options: {service, isNewService: true}
+                                options: {service, isNewService: true, ...options}
                             })
                         );
                     })

web/client/translations/data.de-DE.json

@@ -1553,7 +1553,7 @@
             "tooltip": "Fügen Sie der Karte Ebenen hinzu",
             "autoload": "Suche in Dienstauswahl",
             "fetchMetadata": {
-                "label": "Laden Sie Dateimetadaten bei der Suche herunter",
+                "label": "Dateimetadaten beim Speichern herunterladen",
                 "tooltip": "Diese Option ruft Metadaten ab, um das Zoomen auf Ebene zu unterstützen. Es kann den Suchvorgang verlangsamen, wenn die Bilder zu groß oder zu viele sind."
             },
             "clearValueText": "Auswahl aufheben",

web/client/translations/data.en-US.json

@@ -1514,7 +1514,7 @@
             "tooltip": "Add layers to the map",
             "autoload": "Search on service selection",
             "fetchMetadata": {
-                "label": "Download file metadata on search",
+                "label": "Download file metadata on save",
                 "tooltip": "This option will fetch metadata to support the zoom to layer. It may slow down the search operation if the images are too big or too many."
             },
             "clearValueText": "Clear selection",

web/client/translations/data.es-ES.json

@@ -1515,7 +1515,7 @@
             "tooltip": "agregar capas al mapa",
             "autoload": "Buscar en la selección de servicios",
             "fetchMetadata": {
-                "label": "Descargar metadatos de archivos en la búsqueda",
+                "label": "Descargar metadatos del archivo al guardar",
                 "tooltip": "Esta opción recuperará metadatos para admitir el zoom a la capa. Puede ralentizar la operación de búsqueda si las imágenes son demasiado grandes o demasiadas."
             },
             "clearValueText": "Borrar selección",

web/client/translations/data.fr-FR.json

@@ -1515,7 +1515,7 @@
             "tooltip": "Ajouter des couches à la carte",
             "autoload": "Recherche sur la sélection du service",
             "fetchMetadata": {
-                "label": "Télécharger les métadonnées du fichier lors de la recherche",
+                "label": "Télécharger les métadonnées du fichier lors de l'enregistrement",
                 "tooltip": "Cette option récupérera les métadonnées pour prendre en charge le zoom sur la couche. Cela peut ralentir l'opération de recherche si les images sont trop grandes ou trop nombreuses."
             },
             "clearValueText": "Effacer la sélection",

web/client/translations/data.it-IT.json

@@ -1513,7 +1513,7 @@
             "title": "Catalogo",
             "autoload": "Ricerca alla selezione del servizio",
             "fetchMetadata": {
-                "label": "Scarica i metadati dei file durante la ricerca",
+                "label": "Scarica i metadati del file al salvataggio",
                 "tooltip": "Questa opzione recupererà i metadati per supportare lo zoom a livello. Potrebbe rallentare l'operazione di ricerca se le immagini sono troppo grandi o troppe."
             },
             "clearValueText": "Cancella selezione",