@abi-software/flatmap-viewer 2.4.2-b.5 → 2.4.3

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.4.2-b.5``
+* ``npm install @abi-software/flatmap-viewer@2.4.3``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.2-b.5",
+  "version": "2.4.3",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -19,14 +19,13 @@
   "dependencies": {
     "@babel/runtime": "^7.10.4",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@turf/area": "^6.0.1",
-    "@turf/bbox": "^6.0.1",
-    "@turf/helpers": "^6.1.4",
+    "@turf/area": "^6.5.0",
+    "@turf/bbox": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
     "@turf/projection": "^6.5.0",
     "bezier-js": "^6.1.0",
     "html-es6cape": "^2.0.2",
-    "jspanel4": "^4.16.1",
-    "maplibre-gl": ">=3.0.0",
+    "maplibre-gl": ">=3.6.0",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

package/src/controls/controls.js

@@ -526,73 +526,6 @@ export class NerveControl
 
 //==============================================================================
 
-export class AnnotatedControl
-{
-    constructor(ui, options={excludeAnnotated: false})
-    {
-        this.__ui = ui;
-        this.__map = undefined;
-        this.__exclude = options.excludeAnnotated || false;
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return 'top-right';
-    }
-
-    onAdd(map)
-    //========
-    {
-        this.__map = map;
-        this.__container = document.createElement('div');
-        this.__container.className = 'maplibregl-ctrl';
-
-        this.__button = document.createElement('button');
-        this.__button.id = 'map-annotated-button';
-        this.__button.className = 'control-button text-button';
-        this.__button.setAttribute('type', 'button');
-        this.__button.setAttribute('aria-label', 'Show/hide annotated paths');
-        this.__button.textContent = 'UNANN';
-        this.__button.title = 'Show/hide annotated paths';
-        this.__container.appendChild(this.__button);
-
-        this.__container.addEventListener('click', this.onClick_.bind(this));
-        this.__setBackground();
-        return this.__container;
-    }
-
-    __setBackground()
-    //===============
-    {
-        if (this.__exclude) {
-            this.__button.setAttribute('style', 'background: red');
-        } else {
-            this.__button.removeAttribute('style');
-        }
-    }
-
-    onRemove()
-    //========
-    {
-        this.__container.parentNode.removeChild(this.__container);
-        this.__map = undefined;
-    }
-
-    onClick_(event)
-    //=============
-    {
-        if (event.target.id === 'map-annotated-button') {
-            this.__exclude = !this.__exclude;
-            this.__setBackground();
-            this.__ui.excludeAnnotated(this.__exclude);
-        }
-        event.stopPropagation();
-    }
-}
-
-//==============================================================================
-
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/flatmap-viewer.js

@@ -95,9 +95,6 @@ class FlatMap
             this.__addAnnotation(featureId, annotation);
             this.__searchIndex.indexMetadata(featureId, annotation);
         }
-        if (this.options.annotator) {
-            this.__addAnnotatedComments();
-        }
 
         // Set base of source URLs in map's style
 
@@ -223,25 +220,6 @@ class FlatMap
         });
     }
 
-    async __addAnnotatedComments()
-    //============================
-    {
-        const url = this.makeServerUrl('', 'annotator/')
-        const annotatedFeatures = await loadJSON(url);
-        for (const annotatedId of annotatedFeatures) {
-            const featureId = this.__annIdToFeatureId.get(annotatedId);
-            if (featureId) {
-                const url = this.makeServerUrl(annotatedId, 'annotator/')
-                const annotations = await loadJSON(url);
-                for (const annotation of annotations) {   // In order of most recent to oldest
-                    if ('rdfs:comment' in annotation) {
-                        this.__searchIndex.indexText(featureId, annotation['rdfs:comment']);
-                    }
-                }
-            }
-        }
-    }
-
     async setupUserInteractions_()
     //============================
     {
@@ -1237,20 +1215,6 @@ class FlatMap
 
     //==========================================================================
 
-    /**
-     * Highlight features on the map.
-     *
-     * @param {Array.<string>}  externalIds  An array of anaotomical terms identifing features to highlight
-     */
-    highlightFeatures(externalIds)
-    //============================
-    {
-        if (this._userInteractions !== null) {
-            const featureIds = this.modelFeatureIdList(externalIds);
-            this._userInteractions.highlightFeatures(featureIds);
-        }
-    }
-
     /**
      * Select features on the map.
      *
@@ -1435,7 +1399,6 @@ export class MapManager
     * @arg options.showPosition {boolean} Show ``position`` of tooltip.
     * @arg options.standalone {boolean} Viewer is running ``standalone``, as opposed to integrated into
     *                                   another application so show a number of controls. Defaults to ``false``.
-    * @arg options.annotator {boolean} Allow interactive annotation of features and paths.
     * @example
     * const humanMap1 = mapManager.loadMap('humanV1', 'div-1');
     *

package/src/interactions.js

@@ -33,14 +33,13 @@ import polylabel from 'polylabel';
 
 //==============================================================================
 
-import {Annotator} from './annotation';
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, PathManager} from './pathways';
 import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
-import {AnnotatedControl, BackgroundControl, LayerControl, NerveControl,
+import {BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
@@ -152,13 +151,6 @@ export class UserInteractions
             this.enableCentrelines(this.__pathManager.enabledCentrelines, true);
         }
 
-        // Add annotation capability
-        if (flatmap.options.annotator) {
-            this.__setupAnnotation();
-        } else {
-            this.__annotator = null;
-        }
-
         // Note features that are FC systems
         this.__systemsManager = new SystemsManager(this._flatmap, this, featuresEnabled);
 
@@ -196,11 +188,6 @@ export class UserInteractions
                 // Connectivity taxon control for AC maps
                 this._map.addControl(new TaxonsControl(flatmap));
             }
-
-            if (flatmap.options.annotator) {
-                // Show/hide annotated paths
-                this._map.addControl(new AnnotatedControl(this, flatmap.options.layerOptions));
-            }
         }
 
         // Handle mouse events
@@ -256,41 +243,6 @@ export class UserInteractions
         }
     }
 
-    async __setupAnnotation()
-    //=======================
-    {
-        // Add annotation capability
-
-        this.__annotator = new Annotator(this._flatmap, this);
-        const annotated_features = await this.__annotator.annotated_features();
-
-        // Flag features that have annotations
-        this.__featureIdToMapId = new Map();
-        for (const [mapId, ann] of this._flatmap.annotations) {
-            this.__featureIdToMapId.set(ann.id, mapId);
-            const feature = this.mapFeature(mapId);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'map-annotation': true });
-                if (annotated_features.includes(ann.id)) {
-                    this._map.setFeatureState(feature, { 'annotated': true });
-                }
-            }
-        }
-    }
-
-    setFeatureAnnotated(featureId)
-    //============================
-    {
-        if (this.__annotator) {
-            // featureId v's geoJSON id
-            const mapId = this.__featureIdToMapId.get(featureId);
-            const feature = this.mapFeature(mapId);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'annotated': true });
-            }
-        }
-    }
-
     setPaint(options)
     //===============
     {
@@ -495,19 +447,6 @@ export class UserInteractions
         }
     }
 
-    highlightFeature_(featureId)
-    //==========================
-    {
-        featureId = +featureId;   // Ensure numeric
-        this.__activateFeature(this.mapFeature(featureId));
-    }
-
-    unhighlightFeatures_()
-    //====================
-    {
-        this.resetActiveFeatures_();
-    }
-
     smallestAnnotatedPolygonFeature_(features)
     //========================================
     {
@@ -556,30 +495,6 @@ export class UserInteractions
         this.unselectFeatures();
     }
 
-    /**
-     * Highlight features on the map.
-     *
-     * @param {Array.<string>}  featureIds  An array of feature identifiers to highlight
-     */
-    highlightFeatures(featureIds)
-    //===========================
-    {
-        if (featureIds.length) {
-            this.unhighlightFeatures_();
-            for (const featureId of featureIds) {
-                const annotation = this._flatmap.annotation(featureId);
-                if (annotation) {
-                    this.highlightFeature_(featureId);
-                    if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
-                            this.highlightFeature_(pathFeatureId);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     /**
      * Select features on the map.
      *
@@ -1018,28 +933,6 @@ export class UserInteractions
         }
     }
 
-    __annotationEvent(features)
-    //=========================
-    {
-        if (!this.__annotator) {
-            return;
-        }
-
-        event.preventDefault();
-
-        // Remove any tooltip
-        this.removeTooltip_();
-
-        // Don't respond to mouse events while the dialog is open
-        this.setModal_();
-
-        // The annotation dialog...
-        this.__annotator.annotate(features, () => {
-            this.unselectFeatures();
-            this.__clearModal();
-        });
-    }
-
     clickEvent_(event)
     //================
     {
@@ -1054,14 +947,8 @@ export class UserInteractions
             this.unselectFeatures();
             return;
         }
-        const originalEvent = event.originalEvent;
-        if (originalEvent.altKey) {
-            this.__annotationEvent(clickedFeatures);
-            return;
-        }
-
         const clickedFeature = clickedFeatures[0];
-        this.selectionEvent_(originalEvent, clickedFeature);
+        this.selectionEvent_(event.originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();

package/src/main.js

@@ -62,7 +62,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showId: true,
         showPosition: false,
         standalone: true,
-        annotator: true,
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/styling.js

@@ -52,7 +52,7 @@ const STROKE_INTERPOLATION = [
     ['zoom'],
      2, ["*", ['var', 'width'], ["^", 2, -0.5]],
      7, ["*", ['var', 'width'], ["^", 2,  2.5]],
-     9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+     9, ["*", ['var', 'width'], ["^", 2,  3.0]]
 ];
 
 //==============================================================================
@@ -162,7 +162,7 @@ export class FeatureFillLayer extends VectorStyleLayer
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], 0.1,
-                ['boolean', ['feature-state', 'selected'], false], 0.5,
+                ['boolean', ['feature-state', 'selected'], false], 0.2,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.7,
@@ -206,53 +206,37 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const outlined = !('outline' in options) || options.outline;
         const dimmed = 'dimmed' in options && options.dimmed;
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
-        const lineColour = [ 'case' ];
-        lineColour.push(['boolean', ['feature-state', 'hidden'], false]);
-        lineColour.push(COLOUR_HIDDEN);
-        lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push(FEATURE_SELECTED_BORDER);
+        const lineColour = ['case'];
+        lineColour.push(['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN);
+        lineColour.push(['boolean', ['feature-state', 'selected'], false], FEATURE_SELECTED_BORDER);
         if (coloured && outlined) {
-            lineColour.push(['boolean', ['feature-state', 'active'], false]);
-            lineColour.push(COLOUR_ACTIVE);
+            lineColour.push(['boolean', ['feature-state', 'active'], false], COLOUR_ACTIVE);
         }
-        lineColour.push(['boolean', ['feature-state', 'annotated'], false]);
-        lineColour.push(COLOUR_ANNOTATED);
-        lineColour.push(['has', 'colour']);
-        lineColour.push(['get', 'colour']);
+        lineColour.push(['boolean', ['feature-state', 'annotated'], false], COLOUR_ANNOTATED);
+        lineColour.push(['has', 'colour'], ['get', 'colour']);
         lineColour.push('#444');
 
-        const lineOpacity = [
-            'case',
-            ['boolean', ['feature-state', 'hidden'], false], 0.05,
-            ];
+        const lineOpacity = ['case'];
+        lineOpacity.push(['boolean', ['feature-state', 'hidden'], false], 0.05);
         if (coloured && outlined) {
-            lineOpacity.push(['boolean', ['feature-state', 'active'], false]);
-            lineOpacity.push(0.9);
+            lineOpacity.push(['boolean', ['feature-state', 'active'], false], 0.9);
         }
-        lineOpacity.push(['boolean', ['feature-state', 'selected'], false]);
-        lineOpacity.push(0.9);
-        lineOpacity.push(['boolean', ['feature-state', 'annotated'], false]);
-        lineOpacity.push(0.9);
+        lineOpacity.push(['boolean', ['feature-state', 'selected'], false], 0.9);
+        lineOpacity.push(['boolean', ['feature-state', 'annotated'], false], 0.9);
         if (activeRasterLayer) {
             lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
         } else {
             lineOpacity.push(0.5);
         }
 
-        const lineWidth = [
-            'case',
-            ['boolean', ['get', 'invisible'], false], 0.2,
-            ];
-        lineWidth.push(['boolean', ['feature-state', 'selected'], false]);
-        lineWidth.push(2.5);
+        const lineWidth = ['case'];
+        lineWidth.push(['boolean', ['get', 'invisible'], false], 0.2);
+        lineWidth.push(['boolean', ['feature-state', 'selected'], false], 1.5);
         if (coloured && outlined) {
-            lineWidth.push(['boolean', ['feature-state', 'active'], false]);
-            lineWidth.push(1.5);
+            lineWidth.push(['boolean', ['feature-state', 'active'], false], 1.5);
         }
-        lineWidth.push(['boolean', ['feature-state', 'annotated'], false]);
-        lineWidth.push(3.5);
-        lineWidth.push(['has', 'colour']);
-        lineWidth.push(0.7);
+        lineWidth.push(['boolean', ['feature-state', 'annotated'], false], 3.5);
+        lineWidth.push(['has', 'colour'], 0.7);
         lineWidth.push((coloured && outlined) ? 0.5 : 0.1);
 
         return super.changedPaintStyle({
@@ -293,14 +277,14 @@ export class FeatureLineLayer extends VectorStyleLayer
         return this.__dashed ? [
             'all',
             ['==', '$type', 'LineString'],
-            ['==', 'type', `line-dash`]
+            ['==', 'type', 'line-dash']
         ] : [
             'all',
             ['==', '$type', 'LineString'],
             [
                 'any',
                 ['==', 'type', 'bezier'],
-                ['==', 'type', `line`]
+                ['==', 'type', 'line']
             ]
         ];
     }
@@ -328,12 +312,17 @@ export class FeatureLineLayer extends VectorStyleLayer
                 ],
             'line-width': [
                 'let',
-                'width', [
-                    'case',
-                        ['==', ['get', 'type'], 'network'], 1.2,
-                        ['boolean', ['feature-state', 'selected'], false], 1.2,
-                        ['boolean', ['feature-state', 'active'], false], 1.2,
-                        options.authoring ? 0.7 : 0.5
+                'width',  [
+                    '*',
+                        ['case',
+                            ['has', 'stroke-width'], ['get', 'stroke-width'],
+                            1.0
+                        ],
+                        ['case',
+                            ['boolean', ['feature-state', 'selected'], false], 1.2,
+                            ['boolean', ['feature-state', 'active'], false], 1.2,
+                            options.authoring ? 0.7 : 0.5
+                        ]
                     ],
                     STROKE_INTERPOLATION
             ]
@@ -526,10 +515,6 @@ export class PathLineLayer extends VectorStyleLayer
             'line-color': [
                 'let', 'active', ['to-number', ['feature-state', 'active'], 0],
                 [ 'case',
-                    ['all',
-                        ['==', ['var', 'active'], 0],
-                        ['boolean', ['feature-state', 'selected'], false],
-                    ], COLOUR_SELECTED,
                     ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                     ['==', ['get', 'type'], 'bezier'], 'red',
                     ...PATH_STYLE_RULES,
@@ -559,7 +544,9 @@ export class PathLineLayer extends VectorStyleLayer
                     "*",
                     this.__highlight ? ['case',
                         ['boolean', ['get', 'invisible'], false], 0.1,
-                        ['boolean', ['feature-state', 'selected'], false], 0.6,
+                        ['boolean', ['feature-state', 'selected'], false], [
+                            'case', ['boolean', ['feature-state', 'active'], false], 1.2,
+                                0.9],
                         ['boolean', ['feature-state', 'active'], false], 0.9,
                         0.0
                     ] : [

package/src/annotation.js

@@ -1,665 +0,0 @@
-/******************************************************************************
-
-Flatmap viewer and annotation tool
-
-Copyright (c) 2019 - 2023  David Brooks
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-******************************************************************************/
-
-'use strict';
-
-//==============================================================================
-
-// We use Font Awesome icons
-import '@fortawesome/fontawesome-free/css/all.css';
-import escape from 'html-es6cape';
-import { jsPanel } from 'jspanel4';
-import 'jspanel4/dist/jspanel.css';
-
-//==============================================================================
-
-const FETCH_TIMEOUT = 3000;   //  3 seconds
-const UPDATE_TIMEOUT = 3000;  //  5 seconds
-const LOGIN_TIMEOUT = 30000;  // 30 seconds
-const LOGOUT_TIMEOUT = 3000;  //  5 seconds
-
-const STATUS_MESSAGE_TIMEOUT = 3000;
-
-//==============================================================================
-
-const FEATURE_DISPLAY_PROPERTIES = {
-    'id': 'Feature',
-    'label': 'Tooltip',
-    'models': 'Models',
-    'name': 'Name',
-    'sckan': 'SCKAN valid',
-    'fc-class': 'FC class',
-    'fc-kind': 'FC kind',
-    'layer': 'Map layer',
-}
-
-const ANNOTATION_FIELDS = [
-    {
-        prompt: 'Feature derived from',
-        key: 'prov:wasDerivedFrom',
-        update: true,
-        kind: 'list',
-        size: 6
-    },
-    {
-        prompt: 'Comment',
-        key: 'rdfs:comment',
-        update: false,
-        kind: 'textbox'
-    },
-];
-
-//==============================================================================
-
-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, ui)
-    {
-        this.__flatmap = flatmap;
-        this.__ui = ui;
-        this.__haveAnnotation = false;
-        this.__user = undefined;
-        this.__savedStatusMessage = '';
-        this.__authorised = false;
-    }
-
-    get user()
-    {
-        return this.__user;
-    }
-
-    __creatorName(creator)
-    {
-        return creator.name || creator.email || creator.login || creator.company || creator;
-    }
-
-    __setUser(creator)
-    {
-        this.__user = creator;
-        this.__setStatusMessage(`Annotating as ${this.__creatorName(creator)}`, 0)
-    }
-
-    __clearUser()
-    {
-        this.__user = undefined;
-        this.__setStatusMessage('', 0);
-    }
-
-    async __authorise(panel)
-    //======================
-    {
-        const abortController = new AbortController();
-        setTimeout((panel) => {
-            if (this.user === 'undefined') {
-                console.log("Aborting login...");
-                abortController.abort();
-                stopSpinner(panel);
-                this.__setStatusMessage('Unable to login...');
-                }
-            },
-            LOGIN_TIMEOUT, panel);
-
-        const url = `${this.__flatmap._baseUrl}login`;
-        startSpinner(panel);
-        const response = await fetch(url, {
-            headers: { "Content-Type": "application/json; charset=utf-8" },
-            signal: abortController.signal
-        });
-        stopSpinner(panel);
-        if (response.ok) {
-            const user_data = await response.json();
-            if ('error' in user_data) {
-                return Promise.resolve({error: response.error});
-            } else {
-                this.__setUser(user_data);
-                this.__authorised = true;
-                return Promise.resolve(user_data);
-            }
-        } else {
-            return Promise.resolve({error: `${response.status} ${response.statusText}`});
-        }
-    }
-
-    async __unauthorise()
-    //===================
-    {
-        const abortController = new AbortController();
-        setTimeout(() => {
-            if (this.__authorised) {
-                console.log("Aborting logout...");
-                abortController.abort();
-                this.__setStatusMessage('Unable to logout...');
-                }
-            },
-            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 response.json();
-        } else {
-            return Promise.resolve({error: `${response.status} ${response.statusText}`});
-        }
-    }
-
-    __setStatusMessage(message, timeout=STATUS_MESSAGE_TIMEOUT)
-    //=========================================================
-    {
-        if (timeout == 0) {
-            this.__savedStatusMessage = message;
-        }
-        this.__statusMessage.innerHTML = message;
-        if (+timeout > 0) {
-            setTimeout(() => {
-                this.__statusMessage.innerHTML = this.__savedStatusMessage;
-            }, +timeout);
-        }
-    }
-
-    __featureHtml(featureProperties)
-    //==============================
-    {
-        // Feature properties
-        const html = [];
-        for (const [key, prompt] of Object.entries(FEATURE_DISPLAY_PROPERTIES)) {
-            const value = featureProperties[key];
-            if (value !== undefined && value !== '') {
-                const escapedValue = escape(value).replaceAll('\n', '<br/>');
-                html.push(`<div><span class="flatmap-annotation-prompt">${prompt}:</span><span class="flatmap-annotation-value">${escapedValue}</span></div>`)
-            }
-        }
-        return html;
-    }
-
-    __annotationHtml(annotations)
-    //===========================
-    {
-        const html = [];
-        let firstBlock = true;
-        for (const annotation of annotations) {
-            if (firstBlock) {
-                firstBlock = false;
-            } else {
-                html.push('<hr/>')
-            }
-            if (annotation['rdf:type'] === 'prov:Entity') {
-                const annotator = this.__creatorName(annotation['dct:creator']);
-                html.push(`<div><span class="flatmap-annotation-prompt">${annotation['dct:created']}</span><span class="flatmap-annotation-value">${annotator}</span></div>`);
-                for (const field of ANNOTATION_FIELDS) {
-                    const value = annotation[field.key];
-                    if (value !== undefined && value !== '') {
-                        const escapedValue = (field.kind === 'list')
-                                           ? value.filter(v => v.trim()).map(v => escape(v.trim())).join(', ')
-                                           : escape(value).replaceAll('\n', '<br/>');
-                        html.push(`<div><span class="flatmap-annotation-prompt">${field.prompt}:</span><span class="flatmap-annotation-value">${escapedValue}</span></div>`);
-                    }
-                }
-            }
-        }
-        return html.join('\n');
-    }
-
-    __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>`);
-            if (field.kind === 'textbox') {
-                const value = field.update ? provenanceData[field.key] || '' : '';
-                html.push(`  <textarea rows="5" cols="40" id="${field.key}" name="${field.key}">${value.trim()}</textarea>`)
-            } else if (!('kind' in field) || field.kind !== 'list') {
-                const value = field.update ? provenanceData[field.key] || '' : '';
-                html.push(`  <input type="text" size="40" id="${field.key}" name="${field.key}" value="${value.trim()}"/>`)
-            } else {   // field.kind === 'list'
-                const listValues = field.update ? provenanceData[field.key] || [] : [];
-                html.push('  <div class="multiple">')
-                for (let n = 1; n <= field.size; n++) {
-                    const fieldValue = (n <= listValues.length) ? listValues[n-1].trim() : '';
-                    html.push(`    <input type="text" size="40" id="${field.key}_${n}" name="${field.key}" value="${fieldValue}"/>`)
-                }
-                html.push('  </div>')
-            }
-            html.push('</div>');
-        }
-        html.push('  <div><input id="annotation-save-button" type="button" value="Save"/></div>');
-        html.push('</div>');
-        return html.join('\n');
-    }
-
-    __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) {
-            if (!('kind' in field) || field.kind !== 'list') {
-                const lastValue = field.update ? provenanceData[field.key] || '' : '';
-                const inputField = document.getElementById(field.key);
-                const newValue = inputField.value.trim();
-                if (newValue !== lastValue.trim()) {
-                    newProperties[field.key] = newValue;
-                    propertiesChanged = true;
-                }
-            } else {   // field.kind === 'list'
-                const listValues = [];
-                for (let n = 1; n <= field.size; n++) {
-                    const inputField = document.getElementById(`${field.key}_${n}`);
-                    listValues.push(inputField.value.trim());
-                }
-                const lastValue = field.update ? provenanceData[field.key] || [] : [];
-                const oldValues = lastValue.map(v => v.trim()).filter(v => (v !== '')).sort(Intl.Collator().compare);
-                const newValues = listValues.map(v => v.trim()).filter(v => (v !== '')).sort(Intl.Collator().compare);
-                if (oldValues.length !== newValues.length
-                 || oldValues.filter(v => !newValues.includes(v)).length > 0) {
-                    newProperties[field.key] = newValues;
-                    propertiesChanged = true;
-                }
-            }
-        }
-        return {
-            changed: propertiesChanged,
-            properties: newProperties
-        }
-    }
-
-    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.makeServerUrl(this.__currentFeatureId, 'annotator/');
-        const response = await fetch(url, {
-            headers: { "Content-Type": "application/json; charset=utf-8" },
-            method: 'POST',
-            body: JSON.stringify(annotation),
-            signal: abortController.signal
-        });
-        if (response.ok) {
-            return response.json();
-        } else {
-            return Promise.resolve({error: `${response.status} ${response.statusText}`});
-        }
-    }
-
-    async __saveAnnotation(panel, provenanceData)
-    //===========================================
-    {
-        const changedProperties = this.__changedAnnotation(provenanceData);
-        if (this.__currentFeatureId !== undefined && changedProperties.changed) {
-            const annotation = {
-                ...changedProperties.properties,
-                'rdf:type': 'prov:Entity',
-                'dct:subject': `flatmaps:${this.__flatmap.uuid}/${this.__currentFeatureId}`,
-                'dct:creator': this.user
-            }
-            startSpinner(panel);
-            const response = await this.__updateRemoteAnnotation(panel, annotation);
-            stopSpinner(panel);
-            if ('error' in response) {
-                this.__setStatusMessage(response.error);
-            } else {
-                this.__flatmap.setFeatureAnnotated(this.__currentFeatureId);
-                panel.close();
-            }
-        } else {
-            this.__setStatusMessage('No changes to save...');
-        }
-    }
-
-    __finishPanelContent(panel, response)
-    //====================================
-    {
-        this.__haveAnnotation = true;
-        const provenanceData = this.__provenanceData(response);
-        this.__existingAnnotation.innerHTML = this.__annotationHtml(response);
-        this.__annotationForm.innerHTML = this.__editFormHtml(provenanceData);
-
-        // Lock focus to focusable elements within the panel
-        const inputElements = panel.content.querySelectorAll('input, textarea, button');
-        this.__firstInputField = inputElements[0];
-        const lastInput = inputElements[inputElements.length - 1];
-        const saveButton = document.getElementById('annotation-save-button');
-
-        panel.addEventListener('keydown', function (e) {
-            if (e.key === 'Tab') {
-                if ( e.shiftKey ) /* shift + tab */ {
-                    if (document.activeElement === this.__firstInputField) {
-                        lastInput.focus();
-                        e.preventDefault();
-                    }
-                } else /* tab */ {
-                    if (document.activeElement === lastInput) {
-                        this.__firstInputField.focus();
-                        e.preventDefault();
-                    }
-                }
-            } else if (e.key === 'Enter') {
-                if (e.target === saveButton) {
-                    this.__saveAnnotation(panel, provenanceData);
-                }
-            }
-        }.bind(this));
-
-        saveButton.addEventListener('mousedown', function (e) {
-            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');
-            }
-        });
-    }
-
-    __chooseFeatureProperties(features, callback)
-    //===========================================
-    {
-        this.__ui.selectFeature(features[0].id);
-
-        // Feature chooser is only for multiple selections
-        if (features.length === 1
-         || features[0].properties['cd-class'] !== 'celldl:Connection'
-         || (features.length === 2
-          && features[1].properties['cd-class'] !== 'celldl:Connection')) {
-            callback(features[0].properties);
-            return;
-        }
-        const featureList = [];
-        const featureProperties = new Map();
-        const featureSeen = new Set();
-        let selected = 'selected';    // Select the first entry
-        for (const feature of features) {
-            if (feature.properties['cd-class'] !== 'celldl:Connection'
-             || feature.properties['id'] == undefined
-             || featureSeen.has(feature.properties['id'])) {
-                continue;
-            }
-            const mapFeature = this.__ui.mapFeature(feature.id);
-            const annotated = (mapFeature !== undefined)
-                            ? this.__ui._map.getFeatureState(mapFeature)['annotated']
-                            : false;
-            let label = '';
-            if (feature.properties.models) {
-                label = ` -- ${feature.properties.label.split('\n')[0]} (${feature.properties.models})`;
-            } else if (feature.properties.label) {
-                label = ` -- ${feature.properties.label.split('\n')[0]}`;
-            }
-            featureList.push(`<option value="${feature.id}" ${selected}>${annotated ? '*' : '&nbsp;'} ${feature.properties.id} -- ${feature.properties.kind}${label}</option>`);
-            featureProperties.set(+feature.id, feature.properties);
-            featureSeen.add(feature.properties['id']);
-            selected = '';
-        }
-        if (featureList.length == 0) {
-            callback(undefined);
-            return;
-        } else if (featureList.length == 1) {
-            callback(featureProperties.values().next().value);
-            return;
-        }
-        const panelContent = `
-<div id="annotation-feature-selection">
-    <div>
-        <label for="annotation-feature-selector">Select feature:</label>
-        <select id="annotation-feature-selector" size="${Math.min(featureList.length, 7)}">
-            ${featureList.join('\n')}
-        </select>
-    </div>
-    <div id="annotation-feature-buttons">
-        <input id="annotation-feature-cancel" type="button" value="Cancel"/>
-        <input id="annotation-feature-annotate" type="button" value="Annotate"/>
-    </div>
-</div>`;
-        this.__panel = jsPanel.create({
-            theme: 'light',
-            border: '2px solid #080',
-            borderRadius: '.5rem',
-            panelSize: 'auto auto',
-            position: 'left-top 50 70',
-            content: panelContent,
-            data: features[0].properties,
-            closeOnEscape: true,
-            closeOnBackdrop: false,
-            headerTitle: 'Select feature to annotate',
-            headerControls: 'closeonly xs',
-            callback: ((panel) => {
-                const selector = document.getElementById('annotation-feature-selector');
-                selector.onchange = (e) => {
-                    if (e.target.value !== '') {
-                        this.__ui.unselectFeatures();
-                        this.__ui.selectFeature(e.target.value);
-                        this.__panel.options.data = featureProperties.get(+e.target.value);
-                    }
-                };
-                selector.ondblclick = (e) => {
-                    if (e.target.value !== '') {
-                        const properties = this.__panel.options.data;
-                        this.__panel.close();
-                        callback(properties);
-                    }
-                }
-                selector.focus();
-                document.getElementById('annotation-feature-cancel')
-                        .onclick = (e) => {
-                            this.__panel.close();
-                            callback(undefined);
-                        };
-                document.getElementById('annotation-feature-annotate')
-                        .onclick = (e) => {
-                            const properties = this.__panel.options.data;
-                            this.__panel.close();
-                            callback(properties);
-                        };
-            }).bind(this)
-        });
-        document.addEventListener('jspanelcloseduser', (e) => { callback(undefined) }, false);
-    }
-
-    annotate(features, closedCallback)
-    //================================
-    {
-        // provide a list of features so dialog needs to first provide selection list
-        // and highlight current one as user scrolls...
-
-        this.__chooseFeatureProperties(features, (featureProperties) => {
-            if (featureProperties) {
-                this.__annotateFeature(featureProperties, closedCallback);
-            } else {
-                closedCallback();
-            }
-        });
-    }
-
-    __annotateFeature(featureProperties, callback)
-    //============================================
-    {
-        this.__currentFeatureId = featureProperties['id'];
-        if (this.__currentFeatureId === undefined) {
-            callback();
-            return;
-        }
-        const panelContent = [];
-        panelContent.push('<div id="flatmap-annotation-panel">');
-        panelContent.push('  <div id="flatmap-annotation-feature">');
-        panelContent.push(...this.__featureHtml(featureProperties));
-        panelContent.push('  </div>');
-        panelContent.push('  <form id="flatmap-annotation-form"></form>');
-        panelContent.push('  <div id="flatmap-annotation-existing"></div>');
-        panelContent.push('</div>');
-
-        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',
-            border: '2px solid #080',
-            borderRadius: '.5rem',
-            panelSize: '725px auto',
-            position: 'left-top 50 70',
-            data: {
-                flatmap: this.__flatmap
-            },
-            content: panelContent.join('\n'),
-            closeOnEscape: true,
-            closeOnBackdrop: false,
-            headerTitle: 'Feature annotations',
-            headerControls: 'closeonly xs',
-            footerToolbar: [
-                '<span id="flatmap-annotation-status" class="flex-auto"></span>',
-                '<span id="flatmap-annotation-lock" class="jsPanel-ftr-btn fa fa-lock"></span>',
-            ],
-            contentFetch: {
-                resource: flatmap.makeServerUrl(this.__currentFeatureId, 'annotator/'),
-                fetchInit: {
-                    method: 'GET',
-                    mode: 'cors',
-                    headers: {
-                        "Accept": "application/json; charset=utf-8",
-                        "Cache-Control": "no-store"
-                    },
-                    signal: contentFetchAbort.signal
-                },
-                bodyMethod: 'json',
-                beforeSend: (fetchConfig, panel) => {
-                    startSpinner(panel);
-                    setTimeout((panel) => {
-                        if (!annotator.__haveAnnotation) {
-                            console.log("Aborting content fetch...");
-                            contentFetchAbort.abort();
-                            stopSpinner(panel);
-                            annotator.__setStatusMessage('Cannot fetch annotation...');
-                            annotator.__authoriseLock.className = '';
-                        }
-                    }, FETCH_TIMEOUT, panel);
-                },
-                done: (response, panel) => {
-                    annotator.__finishPanelContent(panel, response);
-                    stopSpinner(panel);
-                }
-            },
-            callback: annotator.__panelCallback.bind(annotator)
-        });
-
-        // should we warn if unsaved changes when closing??
-        document.addEventListener('jspanelclosed', callback, false);
-    }
-
-    async annotated_features()
-    //========================
-    {
-        const url = this.__flatmap.makeServerUrl('', 'annotator/');
-        try {
-            const response = await fetch(url, {
-                headers: {
-                    "Accept": "application/json; charset=utf-8",
-                    "Cache-Control": "no-store"
-                }
-            });
-            if (response.ok) {
-                return response.json();
-            } else {
-                console.error(`Annotated features: ${response.status} ${response.statusText}`);
-                return Promise.resolve([]);
-            }
-        } catch {
-            console.error(`Fetch failed -- is annotator available at ${this.__flatmap._baseUrl} ?`);
-            return Promise.resolve([]);
-        }
-    }
-
-}
-
-//==============================================================================