@abi-software/flatmap-viewer 2.3.0-a.6 → 2.3.0-b.2

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.6``
+* ``npm install @abi-software/flatmap-viewer@2.3.0-b.2``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.0-a.6",
+  "version": "2.3.0-b.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -38,14 +38,12 @@
     "browser-sync": "^2.26.7",
     "bs-fullscreen-message": "^1.1.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.7.3",
     "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",
-    "url-loader": "^4.1.0",
+    "style-loader": "^3.3.2",
     "webpack": "^5.16.0",
     "webpack-cli": "^4.4.0",
     "webpack-dev-middleware": "^4.1.0",

package/src/annotation.js

@@ -116,12 +116,6 @@ export class Annotator
     async __authorise(panel)
     //======================
     {
-/*
-        const testUser = {name: 'Testing...'};
-        this.__setUser(testUser);
-        callback(testUser);
-
-*/
         const abortController = new AbortController();
         setTimeout((panel) => {
             if (this.user === 'undefined') {
@@ -147,7 +141,7 @@ export class Annotator
             } else {
                 this.__setUser(user_data);
                 this.__authorised = true;
-                return user_data;
+                return Promise.resolve(user_data);
             }
         } else {
             return Promise.resolve({error: `${response.status} ${response.statusText}`});
@@ -174,7 +168,7 @@ export class Annotator
         });
         if (response.ok) {
             this.__authorised = false;
-            return await response.json();
+            return response.json();
         } else {
             return Promise.resolve({error: `${response.status} ${response.statusText}`});
         }
@@ -307,8 +301,8 @@ export class Annotator
                     listValues.push(inputField.value.trim());
                 }
                 const lastValue = field.update ? provenanceData[field.key] || [] : [];
-                const oldValues = lastValue.map(v => v.trim()).filter(v => (v !== '')).sort();
-                const newValues = listValues.map(v => v.trim()).filter(v => (v !== '')).sort();
+                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;
@@ -336,7 +330,7 @@ export class Annotator
             }
         }, UPDATE_TIMEOUT, panel);
 
-        const url = this.__flatmap.addBaseUrl_(`/annotations/${this.__currentFeatureId}`);
+        const url = this.__flatmap.makeServerUrl(this.__currentFeatureId, 'annotator/');
         const response = await fetch(url, {
             headers: { "Content-Type": "application/json; charset=utf-8" },
             method: 'POST',
@@ -344,7 +338,7 @@ export class Annotator
             signal: abortController.signal
         });
         if (response.ok) {
-            return await response.json();
+            return response.json();
         } else {
             return Promise.resolve({error: `${response.status} ${response.statusText}`});
         }
@@ -367,6 +361,7 @@ export class Annotator
             if ('error' in response) {
                 this.__setStatusMessage(response.error);
             } else {
+                this.__flatmap.setFeatureAnnotated(this.__currentFeatureId);
                 panel.close();
             }
         } else {
@@ -490,7 +485,7 @@ export class Annotator
                 '<span id="flatmap-annotation-lock" class="jsPanel-ftr-btn fa fa-lock"></span>',
             ],
             contentFetch: {
-                resource: flatmap.addBaseUrl_(`/annotations/${this.__currentFeatureId}`),
+                resource: flatmap.makeServerUrl(this.__currentFeatureId, 'annotator/'),
                 fetchInit: {
                     method: 'GET',
                     mode: 'cors',
@@ -525,6 +520,24 @@ export class Annotator
         document.addEventListener('jspanelclosed', closedCallback, false);
     }
 
+    async annotated_features()
+    //========================
+    {
+        const url = this.__flatmap.makeServerUrl('', 'annotator/');
+        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([]);
+        }
+    }
+
 }
 
 //==============================================================================

package/src/{controls.js → controls/controls.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -18,13 +18,6 @@ limitations under the License.
 
 ******************************************************************************/
 
-'use strict';
-
-//==============================================================================
-
-
-//==============================================================================
-
 // Make sure colour string is in `#rrggbb` form.
 // Based on https://stackoverflow.com/a/47355187
 

package/src/{info.js → controls/info.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -18,11 +18,7 @@ limitations under the License.
 
 ******************************************************************************/
 
-'use strict';
-
-//==============================================================================
-
-import { indexedProperties } from './search.js';
+import { indexedProperties } from '../search.js';
 
 //==============================================================================
 

package/src/{minimap.js → controls/minimap.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -45,10 +45,6 @@ limitations under the License.
 
 //==============================================================================
 
-'use strict';
-
-//==============================================================================
-
 import maplibre from 'maplibre-gl';
 
 //==============================================================================

package/src/controls/search.js

@@ -0,0 +1,113 @@
+/******************************************************************************
+
+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.
+
+**/
+//==============================================================================
+
+export class SearchControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+    }
+
+    onAdd(map)
+    //========
+    {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl search-control';
+
+        this._input = document.createElement('input');
+        this._input.id = 'search-control-input';
+        this._input.setAttribute('type', 'search');
+        this._input.setAttribute('visible', 'false');
+        this._input.setAttribute('placeholder', 'Search...');
+
+        this._button = document.createElement('button');
+        this._button.id = 'search-control-button';
+        this._button.className = 'control-button';
+        this._button.title = 'Search flatmap';
+        this._button.setAttribute('type', 'button');
+        this._button.setAttribute('aria-label', 'Search flatmap');
+        // https://iconmonstr.com/magnifier-6-svg/
+        this._button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="search-control-icon" viewBox="0 0 24 24">
+    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z"/>
+</svg>`;
+        this._container.appendChild(this._button);
+
+        this._container.onclick = this.onClick_.bind(this);
+        return this._container;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onRemove()
+    //========
+    {
+        this._container.parentNode.removeChild(this._container);
+        this._map = undefined;
+    }
+
+    searchMap_(search=true)
+    //=====================
+    {
+        this._input = this._container.removeChild(this._input);
+        this._input.setAttribute('visible', 'false');
+        const text = this._input.value;
+        if (search && text !== '') {
+            const results = this.__flatmap.search(text);
+            this.__flatmap.showSearchResults(results);
+        }
+    }
+
+    onKeyDown_(e)
+    //===========
+    {
+        if (e.key === 'Enter') {
+            this.searchMap_();
+        } else if (e.key === 'Escape') {
+            this.searchMap_(false);
+        }
+    }
+
+    onClick_(e)
+    //=========
+    {
+        const targetId = ('rangeTarget' in e) ? e.rangeTarget.id : e.target.id; // FF has rangeTarget
+        if (['search-control-button', 'search-control-icon'].includes(targetId)) {
+            if (this._input.getAttribute('visible') === 'false') {
+                this._container.appendChild(this._input);
+                this._container.appendChild(this._button);
+                this._input.setAttribute('visible', 'true');
+                this._input.onkeydown = this.onKeyDown_.bind(this);
+                this._input.value = '';
+                this.__flatmap.clearSearchResults();
+                this._input.focus();
+            } else {
+                this.searchMap_();
+            }
+        }
+    }
+}
+
+//==============================================================================

package/src/controls/systems.js

@@ -0,0 +1,66 @@
+/******************************************************************************
+
+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.
+
+**/
+//==============================================================================
+
+import { Control } from './controls';
+
+//==============================================================================
+
+export class SystemsControl extends Control
+{
+    constructor(flatmap, systems)
+    {
+        super(flatmap, 'system', 'systems');
+        this.__systems = systems;
+    }
+
+    __innerLinesHTML()
+    //================
+    {
+        const html = [];
+        for (const system of this.__systems) {
+            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${system.name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+        }
+        return html;
+    }
+
+    __enableAll(enable)
+    //=================
+    {
+        for (const system of this.__systems) {
+            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
+            if (checkbox) {
+                checkbox.checked = enable;
+                this.__flatmap.enableSystem(system.name, enable);
+            }
+        }
+    }
+
+    __enableControl(id, enable)
+    //=========================
+    {
+        for (const system of this.__systems) {
+            if (id === system.id) {
+                this.__flatmap.enableSystem(system.name, enable);
+            }
+        }
+    }
+
+}

package/src/flatmap-viewer.js

@@ -34,11 +34,12 @@ import '../static/css/flatmap-viewer.css';
 //==============================================================================
 
 import {MapServer} from './mapserver.js';
-import {MinimapControl} from './minimap.js';
-import {NavigationControl} from './controls.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
+import {MinimapControl} from './controls/minimap.js';
+import {NavigationControl} from './controls/controls.js';
+
 import * as images from './images.js';
 import * as utils from './utils.js';
 
@@ -85,12 +86,12 @@ class FlatMap
 
         for (const [id, source] of Object.entries(mapDescription.style.sources)) {
             if (source.url) {
-                source.url = this.addBaseUrl_(source.url);
+                source.url = this.makeServerUrl(source.url);
             }
             if (source.tiles) {
                 const tiles = [];
                 for (const tileUrl of source.tiles) {
-                    tiles.push(this.addBaseUrl_(tileUrl));
+                    tiles.push(this.makeServerUrl(tileUrl));
                 }
                 source.tiles = tiles;
             }
@@ -361,21 +362,23 @@ class FlatMap
     {
         if (!this._map.hasImage(id)) {
             const image = await (path.startsWith('data:image') ? this.loadEncodedImage_(path)
-                                                               : this.loadImage_(path.startsWith('/') ? this.addBaseUrl_(path)
+                                                               : this.loadImage_(path.startsWith('/') ? this.makeServerUrl(path)
                                                                                                       : new URL(path, baseUrl)));
             this._map.addImage(id, image, options);
         }
     }
 
-    addBaseUrl_(url)
-    //==============
+    makeServerUrl(url, resource='flatmap/')
+    //=====================================
     {
-        if (url.startsWith('/')) {
-            return `${this._baseUrl}flatmap/${this.__uuid}${url}`; // We don't want embedded `{` and `}` characters escaped
-        } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
-            console.log(`Invalid URL (${url}) in map's sources`);
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            return url;
+        } else if (url.startsWith('/')) {
+            // We don't want embedded `{` and `}` characters escaped
+            return `${this._baseUrl}${resource}${this.__uuid}${url}`;
+        } else {
+            return `${this._baseUrl}${resource}${this.__uuid}/${url}`;
         }
-        return url;
     }
 
     /**
@@ -470,6 +473,19 @@ class FlatMap
         return this.__idToAnnotation.get(featureId.toString());
     }
 
+    /**
+     * Flag the feature as having external annotation.
+     *
+     * @param      {string}  featureId  The feature's identifier
+     */
+    setFeatureAnnotated(featureId)
+    //============================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.setFeatureAnnotated(featureId);
+        }
+    }
+
     __updateFeatureIdMap(property, featureIdMap, annotation)
     //======================================================
     {
@@ -1286,6 +1302,7 @@ 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

@@ -34,14 +34,16 @@ import polylabel from 'polylabel';
 //==============================================================================
 
 import {Annotator} from './annotation';
-import {displayedProperties, InfoControl} from './info';
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, Pathways} from './pathways';
+import {COLOUR_ERROR, VECTOR_TILES_SOURCE} from './styling';
+import {SystemsManager} from './systems';
+
+import {displayedProperties, InfoControl} from './controls/info';
 import {BackgroundControl, LayerControl, NerveControl,
-        PathControl, SCKANControl} from './controls';
-import {SearchControl} from './search';
-import {VECTOR_TILES_SOURCE} from './styling';
-import {SystemsControl, SystemsManager} from './systems';
+        PathControl, SCKANControl} from './controls/controls';
+import {SearchControl} from './controls/search';
+import {SystemsControl} from './controls/systems';
 
 import * as pathways from './pathways';
 import * as utils from './utils';
@@ -144,27 +146,17 @@ export class UserInteractions
             }
         }
 
-        // Flag features that have annotations and note which are FC systems
-
-        this.__systems = new Map();
-        for (const [id, ann] of flatmap.annotations) {
-            const feature = this.mapFeature_(id);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'annotated': true });
-            }
-            if (ann['fc-class'] === 'fc-class:System') {
-                if (this.__systems.has(ann.name)) {
-                    this.__systems.get(ann.name).featureIds.push(ann.featureId)
-                } else {
-                    this.__systems.set(ann.name, {
-                        id: ann.name.replaceAll(' ', '_'),
-                        colour: ann.colour,
-                        featureIds: [ ann.featureId ]
-                    });
-                }
-            }
+        // 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);
+
         // Add various controls when running standalone
 
         if (flatmap.options.standalone) {
@@ -192,15 +184,11 @@ export class UserInteractions
 
             // SCKAN path and SYSTEMS controls for FC maps
             if (flatmap.options.style === 'functional') {
-                this._map.addControl(new SystemsControl(flatmap, this.__systems));
+                this._map.addControl(new SystemsControl(flatmap, this.__systemsManager.systems));
                 this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
             }
         }
 
-        // Add annotation capabilities
-
-        this.__annotator = new Annotator(flatmap);
-
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -254,6 +242,41 @@ export class UserInteractions
         }
     }
 
+    async __setupAnnotation()
+    //=======================
+    {
+        // Add annotation capability
+
+        this.__annotator = new Annotator(this._flatmap);
+        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.indexOf(ann.id) >= 0) {
+                    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)
     //===============
     {
@@ -276,34 +299,35 @@ export class UserInteractions
     getSystems()
     //==========
     {
-        const systems = [];
-        for (const system of this.__systems.values()) {
-            systems.push({
-                name: system.name,
-                colour: system.colour,
-            });
-        }
-        return systems;
+        return this.__systemsManager.systems;
     }
 
     enableSystem(systemName, enable=true)
     //===================================
     {
-        if (this.__systems.has(systemName)) {
-            for (const featureId of this.__systems.get(systemName).featureIds) {
-                this.__enableFeatureWithChildren(featureId, enable);
+        this.__systemsManager.enable(systemName, enable);
+    }
+
+    enableFeatureWithChildren(featureId, enable=true)
+    //===============================================
+    {
+        const feature = this.mapFeature(featureId);
+        if (feature !== undefined) {
+            this.enableFeature(feature, enable);
+            for (const childFeatureId of feature.children) {
+                this.enableFeatureWithChildren(childFeatureId, enable);
             }
         }
     }
 
-    __enableFeatureWithChildren(featureId, enable=true)
-    //=================================================
+    __enableFeatureWithParents(featureId, enable=true)
+    //================================================
     {
-        const feature = this.mapFeature_(featureId);
+        const feature = this.mapFeature(featureId);
         if (feature !== undefined) {
-            this.__enableFeature(feature, enable);
-            for (const childFeatureId of feature.children) {
-                this.__enableFeatureWithChildren(childFeatureId, enable);
+            this.enableFeature(feature, enable);
+            for (const childFeatureId of feature.parents) {
+                this.__enableFeatureWithParents(childFeatureId, enable);
             }
         }
     }
@@ -320,8 +344,8 @@ export class UserInteractions
         }
     }
 
-    __enableFeature(feature, enable=true)
-    //===================================
+    enableFeature(feature, enable=true)
+    //=================================
     {
         if (feature !== undefined) {
             if (enable) {
@@ -333,8 +357,8 @@ export class UserInteractions
         }
     }
 
-    mapFeature_(featureId)
-    //====================
+    mapFeature(featureId)
+    //===================
     {
         const ann = this._flatmap.annotation(featureId);
         if (ann !== undefined) {
@@ -366,7 +390,7 @@ export class UserInteractions
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
         } else {
-            const feature = this.mapFeature_(featureId);
+            const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'selected': true });
                 this._selectedFeatureIds.set(featureId, 1);
@@ -383,7 +407,7 @@ export class UserInteractions
             if (references > 1) {
                 this._selectedFeatureIds.set(featureId, references - 1);
             } else {
-                const feature = this.mapFeature_(featureId);
+                const feature = this.mapFeature(featureId);
                 if (feature !== undefined) {
                     this._map.removeFeatureState(feature, 'selected');
                     this._selectedFeatureIds.delete(+featureId);
@@ -399,7 +423,7 @@ export class UserInteractions
     //==================
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
-            const feature = this.mapFeature_(featureId);
+            const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
                 this._map.removeFeatureState(feature, 'selected');
             }
@@ -429,7 +453,7 @@ export class UserInteractions
     //==========================
     {
         featureId = +featureId;   // Ensure numeric
-        this.__activateFeature(this.mapFeature_(featureId));
+        this.__activateFeature(this.mapFeature(featureId));
     }
 
     unhighlightFeatures_()
@@ -447,7 +471,7 @@ export class UserInteractions
         let smallestFeature = null;
         for (const feature of features) {
             if (feature.geometry.type.includes('Polygon')
-             && this._map.getFeatureState(feature)['annotated']) {
+             && this._map.getFeatureState(feature)['map-annotation']) {
                 const polygon = turf.geometry(feature.geometry.type, feature.geometry.coordinates);
                 const area = turfArea(polygon);
                 if (smallestFeature === null || smallestArea > area) {
@@ -805,7 +829,7 @@ export class UserInteractions
                 const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
                 for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
                     if (+featureId !== lineFeatureId) {
-                        this.__activateFeature(this.mapFeature_(featureId));
+                        this.__activateFeature(this.mapFeature(featureId));
                     }
                 }
             }
@@ -929,6 +953,10 @@ export class UserInteractions
     __annotationEvent(feature)
     //========================
     {
+        if (!this.__annotator) {
+            return;
+        }
+
         event.preventDefault();
 
         // Remove any tooltip
@@ -988,12 +1016,12 @@ export class UserInteractions
     {
         if ('nerveId' in feature.properties) {
             for (const featureId of this._pathways.nerveFeatureIds(feature.properties.nerveId)) {
-                this.__activateFeature(this.mapFeature_(featureId));
+                this.__activateFeature(this.mapFeature(featureId));
             }
         }
         if ('nodeId' in feature.properties) {
             for (const featureId of this._pathways.nodeFeatureIds(feature.properties.nodeId)) {
-                this.__activateFeature(this.mapFeature_(featureId));
+                this.__activateFeature(this.mapFeature(featureId));
             }
         }
     }
@@ -1018,7 +1046,7 @@ export class UserInteractions
     //=====================================
     {
         for (const featureId of featureIds) {
-            const feature = this.mapFeature_(featureId);
+            const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
                 if (enable) {
                     this._map.removeFeatureState(feature, 'hidden');
@@ -1229,7 +1257,7 @@ export class UserInteractions
                 const markerId = this.__markerIdByMarker.get(marker);
                 const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
-                const feature = this.mapFeature_(annotation.featureId);
+                const feature = this.mapFeature(annotation.featureId);
                 if (feature !== undefined) {
                     if (event.type === 'mouseenter') {
                         // Highlight on mouse enter

package/src/layers.js

@@ -154,6 +154,8 @@ class MapFeatureLayers extends MapStylingLayers
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
                 .indexOf(pathwaysVectorSource) >= 0) {
+            this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER);
+
             this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
             this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
 

package/src/main.js

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

package/src/search.js

@@ -36,99 +36,6 @@ export const indexedProperties = [
 
 //==============================================================================
 
-export class SearchControl
-{
-    constructor(flatmap)
-    {
-        this.__flatmap = flatmap;
-    }
-
-    onAdd(map)
-    //========
-    {
-        this._map = map;
-        this._container = document.createElement('div');
-        this._container.className = 'maplibregl-ctrl search-control';
-
-        this._input = document.createElement('input');
-        this._input.id = 'search-control-input';
-        this._input.setAttribute('type', 'search');
-        this._input.setAttribute('visible', 'false');
-        this._input.setAttribute('placeholder', 'Search...');
-
-        this._button = document.createElement('button');
-        this._button.id = 'search-control-button';
-        this._button.className = 'control-button';
-        this._button.title = 'Search flatmap';
-        this._button.setAttribute('type', 'button');
-        this._button.setAttribute('aria-label', 'Search flatmap');
-        // https://iconmonstr.com/magnifier-6-svg/
-        this._button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="search-control-icon" viewBox="0 0 24 24">
-    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z"/>
-</svg>`;
-        this._container.appendChild(this._button);
-
-        this._container.onclick = this.onClick_.bind(this);
-        return this._container;
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return 'top-right';
-    }
-
-    onRemove()
-    //========
-    {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
-    }
-
-    searchMap_(search=true)
-    //=====================
-    {
-        this._input = this._container.removeChild(this._input);
-        this._input.setAttribute('visible', 'false');
-        const text = this._input.value;
-        if (search && text !== '') {
-            const results = this.__flatmap.search(text);
-            this.__flatmap.showSearchResults(results);
-        }
-    }
-
-    onKeyDown_(e)
-    //===========
-    {
-        if (e.key === 'Enter') {
-            this.searchMap_();
-        } else if (e.key === 'Escape') {
-            this.searchMap_(false);
-        }
-    }
-
-    onClick_(e)
-    //=========
-    {
-        const targetId = ('rangeTarget' in e) ? e.rangeTarget.id : e.target.id; // FF has rangeTarget
-        if (['search-control-button', 'search-control-icon'].includes(targetId)) {
-            if (this._input.getAttribute('visible') === 'false') {
-                this._container.appendChild(this._input);
-                this._container.appendChild(this._button);
-                this._input.setAttribute('visible', 'true');
-                this._input.onkeydown = this.onKeyDown_.bind(this);
-                this._input.value = '';
-                this.__flatmap.clearSearchResults();
-                this._input.focus();
-            } else {
-                this.searchMap_();
-            }
-        }
-    }
-}
-
-//==============================================================================
-
 export class SearchIndex
 {
     constructor()

package/src/styling.js

@@ -30,6 +30,20 @@ import {PATH_STYLE_RULES} from './pathways.js';
 
 //==============================================================================
 
+const COLOUR_ACTIVE    = 'blue';
+const COLOUR_ANNOTATED = '#0F0';
+const COLOUR_SELECTED  = '#0F0';
+
+const CENTRELINE_ACTIVE = '#444';
+const CENTRELINE_COLOUR = '#CCC';
+
+const FEATURE_SELECTED_BORDER = 'black';
+
+const NERVE_ACTIVE = '#222';
+const NERVE_SELECTED = 'red';
+
+//==============================================================================
+
 class VectorStyleLayer
 {
     constructor(id, suffix, sourceLayer)
@@ -121,19 +135,21 @@ export class FeatureFillLayer extends VectorStyleLayer
 
     paintStyle(options, changes=false)
     {
+        const ghostColour = '#D8D8D8';       // Function of BG colour?
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
             'fill-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                ['boolean', ['feature-state', 'hidden'], false], ghostColour,
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
                 'case',
-                ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                ['boolean', ['feature-state', 'hidden'], false], 0.1,
                 ['boolean', ['feature-state', 'selected'], false], 0.7,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
@@ -180,11 +196,13 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push('black');
+        lineColour.push(FEATURE_SELECTED_BORDER);
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
-            lineColour.push('blue');
+            lineColour.push(COLOUR_ACTIVE);
         }
+        lineColour.push(['boolean', ['feature-state', 'annotated'], false]);
+        lineColour.push(COLOUR_ANNOTATED);
         lineColour.push(['has', 'colour']);
         lineColour.push(['get', 'colour']);
         lineColour.push('#444');
@@ -199,6 +217,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
         }
         lineOpacity.push(['boolean', ['feature-state', 'selected'], false]);
         lineOpacity.push(0.9);
+        lineOpacity.push(['boolean', ['feature-state', 'annotated'], false]);
+        lineOpacity.push(0.9);
         if (activeRasterLayer) {
             lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
         } else {
@@ -215,6 +235,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
             lineWidth.push(['boolean', ['feature-state', 'active'], false]);
             lineWidth.push(1.5);
         }
+        lineWidth.push(['boolean', ['feature-state', 'annotated'], false]);
+        lineWidth.push(3.5);
         lineWidth.push(['has', 'colour']);
         lineWidth.push(0.7);
         lineWidth.push((coloured && outlined) ? 0.5 : 0.1);
@@ -276,7 +298,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['has', 'colour'], ['get', 'colour'],
                 ['==', ['get', 'type'], 'network'], '#AFA202',
@@ -338,6 +360,104 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 //==============================================================================
 
+function sckanFilter(options)
+{
+    const sckanState = !'sckan' in options ? 'all'
+                     : options.sckan.toLowerCase();
+    const sckanFilter =
+        sckanState == 'none' ? [
+            ['!has', 'sckan']
+        ] :
+        sckanState == 'valid' ? [[
+            'any',
+            ['!has', 'sckan'],
+            [
+                'all',
+                ['has', 'sckan'],
+                ['==', 'sckan', true]
+            ]
+        ]] :
+        sckanState == 'invalid' ? [[
+            'any',
+            ['!has', 'sckan'],
+            [
+                'all',
+                ['has', 'sckan'],
+                ['!=', 'sckan', true]
+            ]
+        ]] :
+        [ ];
+    return sckanFilter;
+}
+
+//==============================================================================
+
+export class AnnotatedPathLayer extends VectorStyleLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'annotated-path', sourceLayer);
+    }
+
+    makeFilter(options={})
+    {
+        return [
+            'all',
+            ['==', '$type', 'LineString'],
+            ...sckanFilter(options)
+        ];
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const dimmed = 'dimmed' in options && options.dimmed;
+        const paintStyle = {
+            'line-color': COLOUR_ANNOTATED,
+            'line-dasharray': [5, 0.5, 3, 0.5],
+            'line-opacity': [
+                'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
+                        ['boolean', ['feature-state', 'annotated'], false],
+                        (dimmed ? 0.1 : 0.8),
+                    0.6
+                ],
+            'line-width': [
+                'let',
+                'width',
+                    ['case',
+                    ['boolean', ['feature-state', 'annotated'], false],
+                        ['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
+                        0.0
+                    ],
+                ['interpolate',
+                    ['exponential', 2],
+                    ['zoom'],
+                     2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+                     7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+                     9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+                ]
+            ]
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        const dimmed = 'dimmed' in options && options.dimmed;
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': this.makeFilter(options),
+            'paint': this.paintStyle(options),
+            'layout': {
+                'line-cap': 'square'
+            }
+        };
+    }
+}
+
+//==============================================================================
+
 export class PathLineLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer, options={})
@@ -350,31 +470,7 @@ export class PathLineLayer extends VectorStyleLayer
 
     makeFilter(options={})
     {
-        const sckanState = !'sckan' in options ? 'all'
-                         : options.sckan.toLowerCase();
-        const sckan_filter =
-            sckanState == 'none' ? [
-                ['!has', 'sckan']
-            ] :
-            sckanState == 'valid' ? [[
-                'any',
-                ['!has', 'sckan'],
-                [
-                    'all',
-                    ['has', 'sckan'],
-                    ['==', 'sckan', true]
-                ]
-            ]] :
-            sckanState == 'invalid' ? [[
-                'any',
-                ['!has', 'sckan'],
-                [
-                    'all',
-                    ['has', 'sckan'],
-                    ['!=', 'sckan', true]
-                ]
-            ]] :
-            [ ];
+        const sckan_filter = sckanFilter(options);
 
         return this.__dashed ? [
             'all',
@@ -402,7 +498,7 @@ export class PathLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
@@ -487,9 +583,9 @@ class CentrelineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': (this.__type == 'edge') ? '#000' : [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
-                ['boolean', ['feature-state', 'active'], false], '#444',
-                '#CCC'
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                ['boolean', ['feature-state', 'active'], false], CENTRELINE_ACTIVE,
+                CENTRELINE_COLOUR
             ],
             'line-opacity': [
                 'case',
@@ -650,8 +746,8 @@ export class FeatureNerveLayer extends VectorStyleLayer
                 'line-color': [
                     'case',
                     ['boolean', ['feature-state', 'hidden'], false], '#CCC',
-                    ['boolean', ['feature-state', 'active'], false], '#222',
-                    ['boolean', ['feature-state', 'selected'], false], 'red',
+                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
+                    ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
                     '#888'
                 ],
                 'line-opacity': [
@@ -702,7 +798,7 @@ export class NervePolygonBorder extends VectorStyleLayer
             'paint': {
                 'line-color': [
                     'case',
-                    ['boolean', ['feature-state', 'active'], false], 'blue',
+                    ['boolean', ['feature-state', 'active'], false], COLOUR_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], 'red',
                     '#444'
                 ],

package/src/systems.js

@@ -16,61 +16,78 @@ 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.
 
-******************************************************************************/
-
-
-import { Control } from './controls';
-
+**/
 //==============================================================================
 
 export class SystemsManager
 {
-    constructor()
-    {
-
-    }
-}
-
-//==============================================================================
-
-export class SystemsControl extends Control
-{
-    constructor(flatmap, systems)
+    constructor(flatmap, ui, enabled=true)
     {
-        super(flatmap, 'system', 'systems');
-        this.__systems = systems;
-    }
-
-    __innerLinesHTML()
-    //================
-    {
-        const html = [];
-        for (const [name, system] of this.__systems.entries()) {
-            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+        this.__ui = ui;
+        this.__systems = new Map();
+        this.__enabledChildren = new Map();
+        for (const [id, ann] of flatmap.annotations) {
+            if (ann['fc-class'] === 'fc-class:System') {
+                if (this.__systems.has(ann.name)) {
+                    this.__systems.get(ann.name).featureIds.push(ann.featureId)
+                } else {
+                    this.__systems.set(ann.name, {
+                        id: ann.name.replaceAll(' ', '_'),
+                        colour: ann.colour,
+                        featureIds: [ ann.featureId ],
+                        enabled: enabled
+                    });
+                }
+                for (const childId of ann['children']) {
+                    if (enabled) {
+                        const enabledCount = (this.__enabledChildren.has(childId))
+                                           ? this.__enabledChildren.get(childId)
+                                           : 0;
+                        this.__enabledChildren.set(childId, enabledCount + 1);
+                    } else {
+                        this.__enabledChildren.set(childId, 0);
+                    }
+                }
+            }
         }
-        return html;
     }
 
-    __enableAll(enable)
-    //=================
+    get systems()
+    //===========
     {
+        const systems = [];
         for (const [name, system] of this.__systems.entries()) {
-            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
-            if (checkbox) {
-                checkbox.checked = enable;
-                this.__flatmap.enableSystem(name, enable);
-            }
+            systems.push({
+                name: name,
+                id: system.id,
+                colour: system.colour,
+                enabled: system.enabled
+            });
         }
+        return systems;
     }
 
-    __enableControl(id, enable)
-    //=========================
+    enable(systemName, enable=true)
+    //=============================
     {
-        for (const [name, system] of this.__systems.entries()) {
-            if (id === system.id) {
-                this.__flatmap.enableSystem(name, enable);
+        const system = this.__systems.get(systemName);
+        if (system !== undefined && enable !== system.enabled) {
+            for (const featureId of system.featureIds) {
+                const feature = this.__ui.mapFeature(featureId);
+                if (feature !== undefined) {
+                    this.__ui.enableFeature(feature, enable);
+                    for (const childFeatureId of feature.children) {
+                        const enabledCount = this.__enabledChildren.get(childFeatureId);
+                        if (enable && enabledCount === 0 || !enable && enabledCount == 1) {
+                            this.__ui.enableFeatureWithChildren(childFeatureId, enable);
+                        }
+                        this.__enabledChildren.set(childFeatureId, enabledCount + (enable ? 1 : -1));
+                    }
+                }
             }
+            system.enabled = enable;
         }
     }
-
 }
+
+//==============================================================================