@abi-software/flatmap-viewer 2.3.0-b.1 → 2.3.1-b.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';
@@ -102,8 +104,6 @@ export class UserInteractions
         this._infoControl = null;
         this._tooltip = null;
 
-        this._disabledPathFeatures = false;
-
         this._inQuery = false;
         this._modal = false;
 
@@ -144,25 +144,16 @@ export class UserInteractions
             }
         }
 
-        this.__featureIdToMapId = new Map();
-        this.__setupAnnotation();
+        // Add annotation capability
+        if (flatmap.options.annotator) {
+            this.__setupAnnotation();
+        } else {
+            this.__annotator = null;
+        }
 
         // Note features that are FC systems
 
-        this.__systems = new Map();
-        for (const [id, ann] of this._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 ]
-                    });
-                }
-            }
-        }
+        this.__systemsManager = new SystemsManager(this._flatmap, this);
 
         // Add various controls when running standalone
 
@@ -191,7 +182,7 @@ 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));
             }
         }
@@ -254,14 +245,14 @@ export class UserInteractions
     {
         // Add annotation capability
 
-        this.__annotator = new Annotator(this._flatmap);
+        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);
+            const feature = this.mapFeature(mapId);
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'map-annotation': true });
                 if (annotated_features.indexOf(ann.id) >= 0) {
@@ -274,11 +265,13 @@ export class UserInteractions
     setFeatureAnnotated(featureId)
     //============================
     {
-        // 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 });
+        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 });
+            }
         }
     }
 
@@ -304,34 +297,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);
             }
         }
     }
@@ -348,8 +342,8 @@ export class UserInteractions
         }
     }
 
-    __enableFeature(feature, enable=true)
-    //===================================
+    enableFeature(feature, enable=true)
+    //=================================
     {
         if (feature !== undefined) {
             if (enable) {
@@ -361,8 +355,16 @@ export class UserInteractions
         }
     }
 
-    mapFeature_(featureId)
-    //====================
+    __featureEnabled(feature)
+    //=======================
+    {
+        const state = this._map.getFeatureState(feature);
+        return (state !== undefined
+            && (!('hidden' in state) || !state.hidden));
+    }
+
+    mapFeature(featureId)
+    //===================
     {
         const ann = this._flatmap.annotation(featureId);
         if (ann !== undefined) {
@@ -384,8 +386,8 @@ export class UserInteractions
         return this._selectedFeatureIds.has(+featureId);
     }
 
-    selectFeature_(featureId, dim=true)
-    //=================================
+    selectFeature(featureId, dim=true)
+    //================================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.size === 0) {
@@ -394,7 +396,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);
@@ -402,8 +404,8 @@ export class UserInteractions
         }
     }
 
-    unselectFeature_(featureId)
-    //=========================
+    unselectFeature(featureId)
+    //========================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.has(featureId)) {
@@ -411,7 +413,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);
@@ -423,11 +425,11 @@ export class UserInteractions
         }
     }
 
-    __unselectFeatures()
-    //==================
+    unselectFeatures()
+    //================
     {
         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');
             }
@@ -437,7 +439,7 @@ export class UserInteractions
     }
 
     __activateFeature(feature)
-    //=======================
+    //========================
     {
         if (feature !== undefined) {
             this._map.setFeatureState(feature, { active: true });
@@ -457,7 +459,7 @@ export class UserInteractions
     //==========================
     {
         featureId = +featureId;   // Ensure numeric
-        this.__activateFeature(this.mapFeature_(featureId));
+        this.__activateFeature(this.mapFeature(featureId));
     }
 
     unhighlightFeatures_()
@@ -503,16 +505,15 @@ export class UserInteractions
     //=====
     {
         this.__clearModal();
-        this.clearActiveMarker_();
-        this.__unselectFeatures();
-        this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-        this._disabledPathFeatures = false;
+        this.__clearActiveMarker();
+        this.unselectFeatures();
+        this.__enablePathFeatures(this._pathways.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)
     //============================
     {
-        this.__unselectFeatures();
+        this.unselectFeatures();
     }
 
     /**
@@ -548,14 +549,14 @@ export class UserInteractions
     //========================
     {
         if (featureIds.length) {
-            this.__unselectFeatures();
+            this.unselectFeatures();
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
-                    this.selectFeature_(featureId);
+                    this.selectFeature(featureId);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
-                            this.selectFeature_(pathFeatureId);
+                            this.selectFeature(pathFeatureId);
                         }
                     }
                 }
@@ -592,7 +593,7 @@ export class UserInteractions
         const highlight = (options.highlight === true);
         if (featureIds.length) {
             this.unhighlightFeatures_();
-            if (select) this.__unselectFeatures();
+            if (select) this.unselectFeatures();
             let bbox = null;
             if (options.noZoomIn) {
                 const bounds = this._map.getBounds().toArray();
@@ -602,7 +603,7 @@ export class UserInteractions
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
                     if (select) {
-                        this.selectFeature_(featureId);
+                        this.selectFeature(featureId);
                     } else if (highlight) {
                         this.highlightFeature_(featureId);
                     }
@@ -610,7 +611,7 @@ export class UserInteractions
                     if ('type' in annotation && annotation.type.startsWith('line')) {
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
                             if (select) {
-                                this.selectFeature_(pathFeatureId);
+                                this.selectFeature(pathFeatureId);
                             } else if (highlight) {
                                 this.highlightFeature_(pathFeatureId);
                             }
@@ -643,8 +644,8 @@ export class UserInteractions
 
             // Highlight the feature
 
-            this.__unselectFeatures();
-            this.selectFeature_(featureId);
+            this.unselectFeatures();
+            this.selectFeature(featureId);
 
             // Find the pop-up's postion
 
@@ -679,7 +680,7 @@ export class UserInteractions
     //============
     {
         this.__clearModal();
-        this.__unselectFeatures();
+        this.unselectFeatures();
     }
 
     removeTooltip_()
@@ -789,7 +790,7 @@ export class UserInteractions
 
         // Get all the features at the current point
         const features = this._map.queryRenderedFeatures(event.point)
-                             .filter(feature => this.__enabledFeature(feature));
+                             .filter(feature => this.__featureEnabled(feature));
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
             this._lastFeatureModelsMouse = null;
@@ -833,7 +834,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));
                     }
                 }
             }
@@ -935,42 +936,43 @@ export class UserInteractions
                         break;
                     }
                 }
-                this.__unselectFeatures();
+                this.unselectFeatures();
                 if (selecting) {
                     for (const feature of this._activeFeatures) {
-                        this.selectFeature_(feature.id, dim);
+                        this.selectFeature(feature.id, dim);
                     }
                 }
             } else {
                 const clickedSelected = this.featureSelected_(clickedFeatureId);
                 for (const feature of this._activeFeatures) {
                     if (clickedSelected) {
-                        this.unselectFeature_(feature.id);
+                        this.unselectFeature(feature.id);
                     } else {
-                        this.selectFeature_(feature.id, dim);
+                        this.selectFeature(feature.id, dim);
                     }
                 }
             }
         }
     }
 
-    __annotationEvent(feature)
-    //========================
+    __annotationEvent(features)
+    //=========================
     {
+        if (!this.__annotator) {
+            return;
+        }
+
         event.preventDefault();
 
         // Remove any tooltip
         this.removeTooltip_();
 
-        // Select the feature
-        this.selectFeature_(feature.id);
-
         // Don't respond to mouse events while the dialog is open
         this.setModal_();
 
         // The annotation dialog...
-        this.__annotator.annotate(feature, e => {
-            this.__unselectFeatures();
+        this.__annotator.annotate(features, () => {
+            this.unselectFeatures();
             this.__clearModal();
         });
     }
@@ -982,25 +984,25 @@ export class UserInteractions
             return;
         }
 
-        this.clearActiveMarker_();
+        this.__clearActiveMarker();
         const clickedFeatures = this._map.queryRenderedFeatures(event.point)
-                                    .filter(feature => this.__enabledFeature(feature));
+                                    .filter(feature => this.__featureEnabled(feature));
         if (clickedFeatures.length == 0){
-            this.__unselectFeatures();
+            this.unselectFeatures();
             return;
         }
-        const clickedFeature = clickedFeatures[0];
         const originalEvent = event.originalEvent;
         if (originalEvent.altKey) {
-            this.__annotationEvent(clickedFeature);
+            this.__annotationEvent(clickedFeatures);
             return;
         }
 
+        const clickedFeature = clickedFeatures[0];
         this.selectionEvent_(originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
-            this.__unselectFeatures();
+            this.unselectFeatures();
             this.__clearModal();
         } else if (clickedFeature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
@@ -1016,64 +1018,28 @@ 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));
             }
         }
     }
 
-    __enabledFeature(feature)
-    //=======================
-    {
-        const state = this._map.getFeatureState(feature);
-        return (state !== undefined
-            && (!('hidden' in state) || !state.hidden));
-    }
-
-    enablePaths_(enable, event)
-    //=========================
-    {
-        const nodeId = event.target.getAttribute('featureId');
-        this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
-        this.__clearModal();
-    }
-
-    enablePathFeatures_(enable, featureIds)
-    //=====================================
+    __enablePathFeatures(featureIds, enable)
+    //======================================
     {
         for (const featureId of featureIds) {
-            const feature = this.mapFeature_(featureId);
-            if (feature !== undefined) {
-                if (enable) {
-                    this._map.removeFeatureState(feature, 'hidden');
-                } else {
-                    this._map.setFeatureState(feature, { 'hidden': true });
-                    this._disabledPathFeatures = true;
-                }
-            }
-        }
-    }
-
-    togglePaths()
-    //===========
-    {
-        console.log('Depracated API function called: togglePaths()')
-        if (this._disabledPathFeatures){
-            this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-            this._disabledPathFeatures = false;
-        } else {
-            this.enablePathFeatures_(false, this._pathways.allFeatureIds());
+            this.enableFeature(this.mapFeature(featureId), enable);
         }
     }
 
     enablePath(pathType, enable=true)
     //===============================
     {
-        this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
+        this.__enablePathFeatures(this._pathways.typeFeatureIds(pathType), enable);
     }
 
     pathwaysFeatureIds(externalIds)
@@ -1257,7 +1223,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
@@ -1278,7 +1244,7 @@ export class UserInteractions
         event.stopPropagation();
     }
 
-    clearActiveMarker_()
+    __clearActiveMarker()
     //==================
     {
         if (this.__activeMarker !== null) {
@@ -1292,7 +1258,7 @@ export class UserInteractions
     {
         const marker = this.__activeMarker;
         if (markerId !== this.__markerIdByMarker.get(marker)) {
-            this.clearActiveMarker_();
+            this.__clearActiveMarker();
             return false;
         }
 
@@ -1311,7 +1277,7 @@ export class UserInteractions
             element.innerHTML = content;
         }
 
-        element.addEventListener('click', e => this.clearActiveMarker_());
+        element.addEventListener('click', e => this.__clearActiveMarker());
 
         this._tooltip = new maplibre.Popup({
             closeButton: false,

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/pathways.js

@@ -37,8 +37,8 @@ const PATH_TYPES = [
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
     { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423", dashed: true},
     { type: "other", label: "Other neuron type", colour: "#888"},
-    { type: "arterial", label: "Arterial blood vessel", colour: "#F00"},
-    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA"},
+    { type: "arterial", label: "Arterial blood vessel", colour: "#F00", enabled: false},
+    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA", enabled: false},
     { type: "centreline", label: "Nerve centrelines", colour: "#CCC", enabled: false},
     { type: "error", label: "Paths with errors or warnings", colour: "#FF0"}
 ];

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()