@abi-software/flatmap-viewer 2.3.0-a.4 → 2.3.0-a.5

package/README.rst

@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
 Package Installation
 ====================
 
-* ``npm install @abi-software/flatmap-viewer@2.3.0-a.4``
+* ``npm install @abi-software/flatmap-viewer@2.3.0-a.5``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.0-a.4",
+  "version": "2.3.0-a.5",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -41,6 +41,7 @@
     "css-loader": "^6.5.1",
     "eslint": "^8.7.0",
     "express": "^4.17.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
     "strip-ansi": "^7.0.1",
     "style-loader": "^1.0.0",

package/src/annotation.js

@@ -31,9 +31,9 @@ import 'jspanel4/dist/jspanel.css';
 //==============================================================================
 
 const FETCH_TIMEOUT = 3000;   //  3 seconds
-const UPDATE_TIMEOUT = 5000;  //  5 seconds
+const UPDATE_TIMEOUT = 3000;  //  5 seconds
 const LOGIN_TIMEOUT = 30000;  // 30 seconds
-const LOGOUT_TIMEOUT = 5000;  //  5 seconds
+const LOGOUT_TIMEOUT = 3000;  //  5 seconds
 
 const STATUS_MESSAGE_TIMEOUT = 3000;
 
@@ -68,6 +68,18 @@ const ANNOTATION_FIELDS = [
 
 //==============================================================================
 
+function startSpinner(panel)
+{
+    panel.headerlogo.innerHTML = '<span class="fa fa-spinner fa-spin ml-2"></span>';
+}
+
+function stopSpinner(panel)
+{
+    panel.headerlogo.innerHTML = '';
+}
+
+//==============================================================================
+
 export class Annotator
 {
     constructor(flatmap)
@@ -101,61 +113,51 @@ export class Annotator
         this.__setStatusMessage('', 0);
     }
 
-    __authorise(panel, callback)
-    //==========================
+    async __authorise(panel)
+    //======================
     {
+/*
+        const testUser = {name: 'Testing...'};
+        this.__setUser(testUser);
+        callback(testUser);
+
+*/
         const abortController = new AbortController();
-        const url = `${this.__flatmap._baseUrl}login`;
-        panel.headerlogo.innerHTML = '<span class="fa fa-spinner fa-spin ml-2"></span>';
-        fetch(url, {
-            headers: { "Content-Type": "application/json; charset=utf-8" },
-            signal: abortController.signal
-        }).then((response) => {
-            panel.headerlogo.innerHTML = '';
-            if (response.ok) {
-                return response.json();
-            } else {
-                callback({error: `${response.status} ${response.statusText}`});
-            }
-        }).then((response) => {
-            if ('error' in response) {
-                callback({error: response.error});
-            } else {
-                this.__setUser(response);
-                this.__authorised = true;
-                callback(response);
-            }
-        });
         setTimeout((panel) => {
             if (this.user === 'undefined') {
                 console.log("Aborting login...");
                 abortController.abort();
-                panel.headerlogo.innerHTML = '';
+                stopSpinner(panel);
                 this.__setStatusMessage('Unable to login...');
                 }
             },
             LOGIN_TIMEOUT, panel);
-    }
 
-    __unauthorise()
-    //=============
-    {
-        this.__clearUser();
-        const abortController = new AbortController();
-        const url = `${this.__flatmap._baseUrl}logout`;
-        fetch(url, {
+        const url = `${this.__flatmap._baseUrl}login`;
+        startSpinner(panel);
+        const response = await fetch(url, {
             headers: { "Content-Type": "application/json; charset=utf-8" },
             signal: abortController.signal
-        }).then((response) => {
-            if (response.ok) {
-                this.__authorised = false;
-                return response.json();
+        });
+        stopSpinner(panel);
+        if (response.ok) {
+            const user_data = await response.json();
+            if ('error' in user_data) {
+                return Promise.resolve({error: response.error});
             } else {
-                console.log('Annotator logout:', `${response.status} ${response.statusText}`);
+                this.__setUser(user_data);
+                this.__authorised = true;
+                return user_data;
             }
-        }).then((response) => {
-            console.log('Annotator logout:', response);
-        });
+        } else {
+            return Promise.resolve({error: `${response.status} ${response.statusText}`});
+        }
+    }
+
+    async __unauthorise()
+    //===================
+    {
+        const abortController = new AbortController();
         setTimeout(() => {
             if (this.__authorised) {
                 console.log("Aborting logout...");
@@ -164,6 +166,18 @@ export class Annotator
                 }
             },
             LOGOUT_TIMEOUT);
+
+        const url = `${this.__flatmap._baseUrl}logout`;
+        const response = fetch(url, {
+            headers: { "Content-Type": "application/json; charset=utf-8" },
+            signal: abortController.signal
+        });
+        if (response.ok) {
+            this.__authorised = false;
+            return await response.json();
+        } else {
+            return Promise.resolve({error: `${response.status} ${response.statusText}`});
+        }
     }
 
     __setStatusMessage(message, timeout=STATUS_MESSAGE_TIMEOUT)
@@ -223,15 +237,15 @@ export class Annotator
         return html.join('\n');
     }
 
-    __editFormHtml(annotation)
-    //========================
+    __editFormHtml(provenanceData)
+    //============================
     {
         const html = [];
         html.push('<div id="flatmap-annotation-formdata">');
         for (const field of ANNOTATION_FIELDS) {
             html.push('<div class="flatmap-annotation-entry">');
             html.push(`  <label for="${field.key}">${field.prompt}:</label>`);
-            const value = field.update ? annotation[field.key] || '' : '';
+            const value = field.update ? provenanceData[field.key] || '' : '';
             if (field.kind === 'textbox') {
                 html.push(`  <textarea rows="5" cols="40" id="${field.key}" name="${field.key}">${value.trim()}</textarea>`)
             } else if (!('kind' in field) || field.kind !== 'list') {
@@ -251,30 +265,51 @@ export class Annotator
         return html.join('\n');
     }
 
-    __changedAnnotation(lastAnnotation)
+    __provenanceData(annotations)
+    //===========================
+    {
+        const provenanceData = {};
+        for (const annotation of annotations) {   // In order of most recent to oldest
+            if (annotation['rdf:type'] === 'prov:Entity') {
+                for (const field of ANNOTATION_FIELDS) {
+                    if (field.update) {
+                        const value = annotation[field.key];
+                        if (value !== undefined && !(field.key in provenanceData)) {
+                            provenanceData[field.key] = value;
+                        }
+                    }
+                }
+            }
+        }
+        return provenanceData;
+    }
+
+    __changedAnnotation(provenanceData)
     //=================================
     {
         const newProperties = {};
         let propertiesChanged = false;
         for (const field of ANNOTATION_FIELDS) {
-            const lastValue = field.update ? lastAnnotation[field.key] || '' : '';
+            const lastValue = field.update ? provenanceData[field.key] || '' : '';
             if (!('kind' in field) || field.kind !== 'list') {
                 const inputField = document.getElementById(field.key);
-                newProperties[field.key] = inputField.value.trim();
-                if (!propertiesChanged && newProperties[field.key] !== lastValue.trim()) {
+                const newValue = inputField.value.trim();
+                if (newValue !== lastValue.trim()) {
+                    newProperties[field.key] = newValue;
                     propertiesChanged = true;
                 }
             } else {   // field.kind === 'list'
-                newProperties[field.key] = [];
-                const changedList = false;
+                const listValues = [];
                 for (let n = 1; n <= field.size; n++) {
-                    const lastListValue = (n <= lastValue.length) ? lastValue[n-1].trim() : '';
                     const inputField = document.getElementById(`${field.key}_${n}`);
-                    const newListValue = inputField.value.trim();
-                    newProperties[field.key].push(newListValue);
-                    if (!propertiesChanged && newListValue !== lastListValue) {
-                        propertiesChanged = true;
-                    }
+                    listValues.push(inputField.value.trim());
+                }
+                const oldValues = lastValue.map(v => v.trim()).filter(v => (v !== '')).sort();
+                const newValues = listValues.map(v => v.trim()).filter(v => (v !== '')).sort();
+                if (oldValues.length !== newValues.length
+                 || oldValues.filter(v => !newValues.includes(v)).length > 0) {
+                    newProperties[field.key] = newValues;
+                    propertiesChanged = true;
                 }
             }
         }
@@ -284,32 +319,38 @@ export class Annotator
         }
     }
 
-    __updateRemoteAnnotation(annotation, callback)
-    //============================================
+    async __updateRemoteAnnotation(panel, annotation)
+    //===============================================
     {
         const abortController = new AbortController();
+
+        setTimeout((panel) => {
+            if (panel.status !== 'closed') {
+                console.log("Aborting remote update...");
+                abortController.abort();
+                stopSpinner(panel);
+                this.__setStatusMessage('Cannot update annotation...');
+            }
+        }, UPDATE_TIMEOUT, panel);
+
         const url = this.__flatmap.addBaseUrl_(`/annotations/${this.__currentFeatureId}`);
-        fetch(url, {
+        const response = await fetch(url, {
             headers: { "Content-Type": "application/json; charset=utf-8" },
             method: 'POST',
             body: JSON.stringify(annotation),
             signal: abortController.signal
-        }).then((response) => {
-            if (response.ok) {
-                return response.json();
-            } else {
-                callback({error: `${response.status} ${response.statusText}`});
-            }
-        }).then((response) => {
-            callback(response);
         });
-        return abortController;
+        if (response.ok) {
+            return await response.json();
+        } else {
+            return Promise.resolve({error: `${response.status} ${response.statusText}`});
+        }
     }
 
-    __saveAnnotation(panel, lastAnnotation)
-    //=====================================
+    async __saveAnnotation(panel, provenanceData)
+    //===========================================
     {
-        const changedProperties = this.__changedAnnotation(lastAnnotation);
+        const changedProperties = this.__changedAnnotation(provenanceData);
         if (this.__currentFeatureId !== undefined && changedProperties.changed) {
             const annotation = {
                 ...changedProperties.properties,
@@ -317,26 +358,15 @@ export class Annotator
                 'dct:subject': `flatmaps:${this.__flatmap.uuid}/${this.__currentFeatureId}`,
                 'dct:creator': this.user
             }
-            panel.headerlogo.innerHTML = '<span class="fa fa-spinner fa-spin ml-2"></span>';
-            const remoteUpdate = this.__updateRemoteAnnotation(annotation,
-                (response) => {
-                    if ('error' in response) {
-                        panel.headerlogo.innerHTML = response.error;
-                    } else {
-                        panel.headerlogo.innerHTML = '';
-                        panel.close();
-                    }
-                });
-            setTimeout((panel) => {
-                if (panel.status !== 'closed') {
-                    console.log("Aborting remote update...");
-                    remoteUpdate.abort();
-                    panel.headerlogo.innerHTML = '';
-                    this.__setStatusMessage('Cannot update annotation...');
-                }
-            }, UPDATE_TIMEOUT, panel);
+            startSpinner(panel);
+            const response = await this.__updateRemoteAnnotation(panel, annotation);
+            stopSpinner(panel);
+            if ('error' in response) {
+                this.__setStatusMessage(response.error);
+            } else {
+                panel.close();
+            }
         } else {
-            this.__
             this.__setStatusMessage('No changes to save...');
         }
     }
@@ -345,9 +375,9 @@ export class Annotator
     //====================================
     {
         this.__haveAnnotation = true;
+        const provenanceData = this.__provenanceData(response);
         this.__existingAnnotation.innerHTML = this.__annotationHtml(response);
-        const lastAnnotation = response.length ? response[0] : {};
-        this.__annotationForm.innerHTML = this.__editFormHtml(lastAnnotation);
+        this.__annotationForm.innerHTML = this.__editFormHtml(provenanceData);
 
         // Lock focus to focusable elements within the panel
         const inputElements = panel.content.querySelectorAll('input, textarea, button');
@@ -370,16 +400,52 @@ export class Annotator
                 }
             } else if (e.key === 'Enter') {
                 if (e.target === saveButton) {
-                    this.__saveAnnotation(panel, lastAnnotation);
+                    this.__saveAnnotation(panel, provenanceData);
                 }
             }
         }.bind(this));
 
         saveButton.addEventListener('mousedown', function (e) {
-            this.__saveAnnotation(panel, lastAnnotation);
+            this.__saveAnnotation(panel, provenanceData);
         }.bind(this));
     }
 
+    __panelCallback(panel)
+    //====================
+    {
+        this.__annotationForm = document.getElementById('flatmap-annotation-form');
+        // Data entry only once authorised
+        this.__annotationForm.hidden = true;
+
+        // Populate once we have content from server
+        this.__existingAnnotation = document.getElementById('flatmap-annotation-existing');
+        this.__statusMessage = document.getElementById('flatmap-annotation-status');
+
+        this.__authoriseLock = document.getElementById('flatmap-annotation-lock');
+        this.__authoriseLock.addEventListener('click', (e) => {
+            const lockClasses = this.__authoriseLock.classList;
+            if (lockClasses.contains('fa-lock')) {
+                this.__authorise(panel).then((response) => {
+                    if ('error' in response) {
+                        this.__setStatusMessage(response.error);
+                    } else {
+                        this.__annotationForm.hidden = false;
+                        this.__firstInputField.focus();
+                        lockClasses.remove('fa-lock');
+                        lockClasses.add('fa-unlock');
+                    }
+                });
+            } else {
+                this.__unauthorise().then((response) => {
+                    console.log(`Annotator logout: ${response}`);
+                });
+                this.__annotationForm.hidden = true;
+                lockClasses.remove('fa-unlock');
+                lockClasses.add('fa-lock');
+            }
+        });
+    }
+
     annotate(feature, closedCallback)
     //===============================
     {
@@ -399,8 +465,8 @@ export class Annotator
         panelContent.push('  <div id="flatmap-annotation-existing"></div>');
         panelContent.push('</div>');
 
-        const annotator = this;             // To use in panel code
-        const flatmap = this.__flatmap;     // To use in panel code
+        const annotator = this;             // To use in panel creation code
+        const flatmap = this.__flatmap;     // To use in panel creation code
         const contentFetchAbort = new AbortController();
         this.__panel = jsPanel.create({
             theme: 'light',
@@ -433,12 +499,12 @@ export class Annotator
                 },
                 bodyMethod: 'json',
                 beforeSend: (fetchConfig, panel) => {
-                    panel.headerlogo.innerHTML = '<span class="fa fa-spinner fa-spin ml-2"></span>';
+                    startSpinner(panel);
                     setTimeout((panel) => {
                         if (!annotator.__haveAnnotation) {
                             console.log("Aborting content fetch...");
                             contentFetchAbort.abort();
-                            panel.headerlogo.innerHTML = '';
+                            stopSpinner(panel);
                             annotator.__setStatusMessage('Cannot fetch annotation...');
                             annotator.__authoriseLock.className = '';
                         }
@@ -446,45 +512,14 @@ export class Annotator
                 },
                 done: (response, panel) => {
                     annotator.__finishPanelContent(panel, response);
-                    panel.headerlogo.innerHTML = '';
+                    stopSpinner(panel);
                 }
             },
-            callback: (panel) => {
-                annotator.__annotationForm = document.getElementById('flatmap-annotation-form');
-                // Data entry only once authorised
-                annotator.__annotationForm.hidden = true;
-
-                // Populate once we have content from server
-                annotator.__existingAnnotation = document.getElementById('flatmap-annotation-existing');
-                annotator.__statusMessage = document.getElementById('flatmap-annotation-status');
-
-                annotator.__authoriseLock = document.getElementById('flatmap-annotation-lock');
-                annotator.__authoriseLock.addEventListener('click', (e) => {
-                    const lockClasses = annotator.__authoriseLock.classList;
-                    if (lockClasses.contains('fa-lock')) {
-                        annotator.__authorise(panel, (response) => {
-                            if ('error' in response) {
-                                annotator.__setStatusMessage(response.error);
-                            } else {
-                                annotator.__annotationForm.hidden = false;
-                                annotator.__firstInputField.focus();
-                                lockClasses.remove('fa-lock');
-                                lockClasses.add('fa-unlock');
-                            }
-                        });
-                    } else {
-                        annotator.__unauthorise();
-                        annotator.__annotationForm.hidden = true;
-                        lockClasses.remove('fa-unlock');
-                        lockClasses.add('fa-lock');
-                    }
-                });
-
-                // should we warn if unsaved changes when closing??
-                document.addEventListener('jspanelclosed', closedCallback, false);
-            }
+            callback: annotator.__panelCallback.bind(annotator)
         });
 
+        // should we warn if unsaved changes when closing??
+        document.addEventListener('jspanelclosed', closedCallback, false);
     }
 
 }