@abi-software/flatmap-viewer 2.2.7 → 2.2.9

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.2.7``
+* ``npm install @abi-software/flatmap-viewer@2.2.9``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/flatmap-viewer.js

@@ -58,7 +58,8 @@ class FlatMap
     constructor(container, mapBaseUrl, mapDescription, resolve)
     {
         this._baseUrl = mapBaseUrl;
-        this._id = mapDescription.id;
+        this.__id = mapDescription.id;
+        this.__uuid = mapDescription.uuid;
         this._details = mapDescription.details;
         this._created = mapDescription.created;
         this.__taxon = mapDescription.taxon;
@@ -75,7 +76,7 @@ class FlatMap
         this.__idToAnnotation = new Map();
         this.__datasetToFeatureIds = new Map();
         this.__modelToFeatureIds = new Map();
-        this.___mapIdToFeatureIds = new Map();
+        this.__mapSourceToFeatureIds = new Map();
         for (const [featureId, annotation] of Object.entries(mapDescription.annotations)) {
             this.__addAnnotation(featureId, annotation);
             this.__searchIndex.indexMetadata(featureId, annotation);
@@ -354,7 +355,7 @@ class FlatMap
     //==============
     {
         if (url.startsWith('/')) {
-            return `${this._baseUrl}flatmap/${this._id}${url}`; // We don't want embedded `{` and `}` characters escaped
+            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`);
         }
@@ -402,7 +403,7 @@ class FlatMap
     get id()
     //======
     {
-        return this._id;
+        return this.__uuid;
     }
 
     /**
@@ -424,7 +425,7 @@ class FlatMap
     get uniqueId()
     //============
     {
-        return `${this._id}-${this._mapNumber}`;
+        return `${this.__uuid}-${this._mapNumber}`;
     }
 
     get activeLayerNames()
@@ -466,7 +467,7 @@ class FlatMap
         this.__idToAnnotation.set(featureId, ann);
         this.__updateFeatureIdMap('dataset', this.__datasetToFeatureIds, ann);
         this.__updateFeatureIdMap('models', this.__modelToFeatureIds, ann);
-        this.__updateFeatureIdMap('source', this.___mapIdToFeatureIds, ann);
+        this.__updateFeatureIdMap('source', this.__mapSourceToFeatureIds, ann);
     }
 
     modelFeatureIds(anatomicalId)
@@ -490,7 +491,7 @@ class FlatMap
         if (featureIds.length == 0) {
             // We couldn't find a feature by anatomical id, so check dataset and source
             featureIds.extend(this.__datasetToFeatureIds.get(anatomicalIds));
-            featureIds.extend(this.___mapIdToFeatureIds.get(anatomicalIds));
+            featureIds.extend(this.__mapSourceToFeatureIds.get(anatomicalIds));
         }
         if (featureIds.length == 0 && this._userInteractions !== null) {
             // We still haven't found a feature, so check connectivity
@@ -634,7 +635,7 @@ class FlatMap
         return {
             taxon: this.__taxon,
             biologicalSex: this.__biologicalSex,
-            id: this._id
+            uuid: this.__uuid
         };
     }
 
@@ -1086,7 +1087,8 @@ export class MapManager
     latestMap_(identifier)
     //====================
     {
-        const mapDescribes = ('uuid' in identifier) ? identifier.uuid
+        const mapDescribes = (identifier.constructor.name === "String") ? identifier
+                           : ('uuid' in identifier) ? identifier.uuid
                            : ('taxon' in identifier) ? identifier.taxon
                            : null;
         if (mapDescribes === null) {
@@ -1300,7 +1302,8 @@ export class MapManager
                 this._mapNumber += 1;
                 const flatmap = new FlatMap(container, this._mapServer.url(),
                     {
-                        id: mapId,
+                        id: map,
+                        uuid: mapId,
                         details: mapIndex,
                         taxon: map.taxon,
                         biologicalSex: map.biologicalSex,

package/src/info.js

@@ -247,13 +247,6 @@ export class InfoControl
             }
 
             const htmlList = [];
-
-            if (this._flatmap.options.showPosition) {
-                const position = location;
-                htmlList.push(`<span class="info-name">Position:</span>`);
-                htmlList.push(`<span class="info-value">(${position.lng}, ${position.lat})</span>`);
-            }
-
             for (const values of displayValues.values()) {
                 for (const prop of displayedProperties) {
                     if (prop in values) {

package/src/interactions.js

@@ -42,6 +42,7 @@ import {PathControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
+import * as pathways from './pathways.js';
 import * as utils from './utils.js';
 
 //==============================================================================
@@ -164,10 +165,8 @@ export class UserInteractions
 
         for (const [id, ann] of flatmap.annotations) {
             const feature = this.mapFeature_(id);
-            this._map.setFeatureState(feature, { 'annotated': true });
-            if ('error' in ann) {
-                this._map.setFeatureState(feature, { 'annotation-error': true });
-                console.log(`Annotation error, ${ann.layer}: ${ann.error} (${ann.text})`);
+            if (feature !== undefined) {
+                this._map.setFeatureState(feature, { 'annotated': true });
             }
         }
 
@@ -251,13 +250,15 @@ export class UserInteractions
     //====================
     {
         const ann = this._flatmap.annotation(featureId);
-        return {
-            id: featureId,
-            source: VECTOR_TILES_SOURCE,
-            sourceLayer: this._flatmap.options.separateLayers
-                         ? `${ann['layer']}_${ann['tile-layer']}`
-                         : ann['tile-layer']
-        };
+        if (ann !== undefined) {
+            return {
+                id: featureId,
+                source: VECTOR_TILES_SOURCE,
+                sourceLayer: this._flatmap.options.separateLayers
+                             ? `${ann['layer']}_${ann['tile-layer']}`
+                             : ann['tile-layer']
+            };
+        }
     }
 
     featureSelected_(featureId)
@@ -277,8 +278,10 @@ export class UserInteractions
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
         } else {
             const feature = this.mapFeature_(featureId);
-            this._map.setFeatureState(feature, { 'selected': true });
-            this._selectedFeatureIds.set(featureId, 1);
+            if (feature !== undefined) {
+                this._map.setFeatureState(feature, { 'selected': true });
+                this._selectedFeatureIds.set(featureId, 1);
+            }
         }
     }
 
@@ -292,8 +295,10 @@ export class UserInteractions
                 this._selectedFeatureIds.set(featureId, references - 1);
             } else {
                 const feature = this.mapFeature_(featureId);
-                this._map.removeFeatureState(feature, 'selected');
-                this._selectedFeatureIds.delete(+featureId);
+                if (feature !== undefined) {
+                    this._map.removeFeatureState(feature, 'selected');
+                    this._selectedFeatureIds.delete(+featureId);
+                }
             }
         }
         if (this._selectedFeatureIds.size === 0) {
@@ -306,7 +311,9 @@ export class UserInteractions
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature_(featureId);
-            this._map.removeFeatureState(feature, 'selected');
+            if (feature !== undefined) {
+                this._map.removeFeatureState(feature, 'selected');
+            }
         }
         this._selectedFeatureIds.clear();
         this._layerManager.setColour({...this.__colourOptions, dimmed: false});
@@ -318,7 +325,8 @@ export class UserInteractions
         // Get the features covering the event's point that are in the active layers
 
         return this._map.queryRenderedFeatures(event.point).filter(f => {
-            return (this.activeLayerNames.indexOf(f.sourceLayer) >= 0)
+            return (this.__enabledFeature(f)
+                && this.activeLayerNames.indexOf(f.sourceLayer) >= 0)
                 && ('featureId' in f.properties);
             }
         );
@@ -327,8 +335,10 @@ export class UserInteractions
     __activateFeature(feature)
     //=======================
     {
-        this._map.setFeatureState(feature, { active: true });
-        this._activeFeatures.push(feature);
+        if (feature !== undefined) {
+            this._map.setFeatureState(feature, { active: true });
+            this._activeFeatures.push(feature);
+        }
     }
 
     resetActiveFeatures_()
@@ -617,17 +627,14 @@ export class UserInteractions
         const tooltips = [];
         for (const lineFeature of lineFeatures) {
             const properties = lineFeature.properties;
-            if (this.__enabledFeature(lineFeature)) {
-                const properties = lineFeature.properties;
-                if ('label' in properties
-                   && (!('tooltip' in properties) || properties.tooltip)
-                   && !('labelled' in properties)) {
-                    let tooltip = '';
-                    const label = properties.label;
-                    const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
-                    if (!tooltips.includes(cleanLabel)) {
-                        tooltips.push(cleanLabel);
-                    }
+            if ('label' in properties
+               && (!('tooltip' in properties) || properties.tooltip)
+               && !('labelled' in properties)) {
+                let tooltip = '';
+                const label = properties.label;
+                const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
+                if (!tooltips.includes(cleanLabel)) {
+                    tooltips.push(cleanLabel);
                 }
             }
         }
@@ -662,13 +669,11 @@ export class UserInteractions
     __featureEvent(type, feature)
     //===========================
     {
-        if (this.__enabledFeature(feature)) {
-            if (feature.sourceLayer === PATHWAYS_LAYER) {  // I suspect this is never true as source layer
-                                                           // names are like `neural_routes_pathways`
-                return this._flatmap.featureEvent(type, this._pathways.pathProperties(feature));
-            } else if ('properties' in feature) {
-                return this._flatmap.featureEvent(type, feature.properties);
-            }
+        if (feature.sourceLayer === PATHWAYS_LAYER) {  // I suspect this is never true as source layer
+                                                       // names are like `neural_routes_pathways`
+            return this._flatmap.featureEvent(type, this._pathways.pathProperties(feature));
+        } else if ('properties' in feature) {
+            return this._flatmap.featureEvent(type, feature.properties);
         }
         return false;
     }
@@ -704,7 +709,8 @@ export class UserInteractions
         }
 
         // Get all the features at the current point
-        const features = this._map.queryRenderedFeatures(event.point);
+        const features = this._map.queryRenderedFeatures(event.point)
+                             .filter(feature => this.__enabledFeature(feature));
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
             this._lastFeatureModelsMouse = null;
@@ -742,17 +748,13 @@ export class UserInteractions
                                                         && feature.properties.type.startsWith('line')) ));
         if (lineFeatures.length > 0) {
             tooltip = this.lineTooltip_(lineFeatures);
-            const enabledFeatures = lineFeatures.filter(feature => this.__enabledFeature(feature));
-            if (enabledFeatures.length > 0) {
-                tooltip = this.lineTooltip_(enabledFeatures);
-                for (const lineFeature of enabledFeatures) {
-                    const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
-                    this.__activateFeature(lineFeature);
-                    const lineIds = new Set(enabledFeatures.map(f => f.properties.featureId));
-                    for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
-                        if (+featureId !== lineFeatureId) {
-                            this.__activateFeature(this.mapFeature_(featureId));
-                        }
+            for (const lineFeature of lineFeatures) {
+                const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
+                this.__activateFeature(lineFeature);
+                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));
                     }
                 }
             }
@@ -841,31 +843,34 @@ export class UserInteractions
     selectionEvent_(event, feature)
     //=============================
     {
-        const multipleSelect = event.ctrlKey || event.metaKey;
-        if (!multipleSelect) {
-            this.__unselectFeatures();
-        }
         if (feature !== undefined) {
-            const featureId = feature.id;
-            const selecting = !this.featureSelected_(featureId);
-            if ('properties' in feature
-             && 'type' in feature.properties
-             && feature.properties.type.startsWith('line')) {
+            const clickedFeatureId = feature.id;
+            const dim = !('properties' in feature
+                       && 'kind' in feature.properties
+                       && ['cell-type', 'scaffold', 'tissue'].indexOf(feature.properties.kind) >= 0);
+            if (!(event.ctrlKey || event.metaKey)) {
+                let selecting = true;
+                for (const featureId of this._selectedFeatureIds.keys()) {
+                    if (featureId === clickedFeatureId) {
+                        selecting = false;
+                        break;
+                    }
+                }
+                this.__unselectFeatures();
+                if (selecting) {
+                    for (const feature of this._activeFeatures) {
+                        this.selectFeature_(feature.id, dim);
+                    }
+                }
+            } else {
+                const clickedSelected = this.featureSelected_(clickedFeatureId);
                 for (const feature of this._activeFeatures) {
-                    const featureId = feature.id;
-                    if (selecting) {
-                        this.selectFeature_(featureId);
+                    if (clickedSelected) {
+                        this.unselectFeature_(feature.id);
                     } else {
-                        this.unselectFeature_(featureId);
+                        this.selectFeature_(feature.id, dim);
                     }
                 }
-            } else if (selecting) {
-                const dim = !('properties' in feature
-                             && 'kind' in feature.properties
-                             && ['cell-type', 'scaffold', 'tissue'].indexOf(feature.properties.kind) >= 0);
-                this.selectFeature_(featureId, dim);
-            } else {
-                this.unselectFeature_(featureId);
             }
         }
     }
@@ -874,19 +879,14 @@ export class UserInteractions
     //================
     {
         this.clearActiveMarker_();
-        const clickedFeature = this._map.queryRenderedFeatures(event.point)[0];
-        const originalEvent = event.originalEvent;
-        if (clickedFeature === undefined || this._activeFeatures.length === 1) {
-            this.selectionEvent_(originalEvent, clickedFeature);
-        } else if (this._activeFeatures.length > 1) {
-            const multipleSelect = originalEvent.ctrlKey || originalEvent.metaKey;
-            if (!multipleSelect) {
-                this.__unselectFeatures();
-            }
-            for (const feature of this._activeFeatures) {
-                this.selectFeature_(feature.id);
-            }
+        const clickedFeatures = this._map.queryRenderedFeatures(event.point);
+        if (clickedFeatures.length == 0){
+            this.__unselectFeatures();
+            return;
         }
+        const clickedFeature = clickedFeatures[0];
+        const originalEvent = event.originalEvent;
+        this.selectionEvent_(originalEvent, clickedFeature);
         if (this._modal) {
            // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
@@ -920,7 +920,8 @@ export class UserInteractions
     //=======================
     {
         const state = this._map.getFeatureState(feature);
-        return true;
+        return (state !== undefined
+            && (!('hidden' in state) || !state.hidden));
     }
 
     enablePaths_(enable, event)
@@ -937,11 +938,13 @@ export class UserInteractions
     {
         for (const featureId of featureIds) {
             const feature = this.mapFeature_(featureId);
-            if (enable) {
-                this._map.removeFeatureState(feature, 'hidden');
-            } else {
-                this._map.setFeatureState(feature, { 'hidden': true });
-                this._disabledPathFeatures = true;
+            if (feature !== undefined) {
+                if (enable) {
+                    this._map.removeFeatureState(feature, 'hidden');
+                } else {
+                    this._map.setFeatureState(feature, { 'hidden': true });
+                    this._disabledPathFeatures = true;
+                }
             }
         }
     }
@@ -967,18 +970,23 @@ export class UserInteractions
     //===============================
     {
         // Disable/enable all paths except those with `pathTypes`
-
-        this.enablePathFeatures_(!enable, this._pathways.allFeatureIds());
-
         if (Array.isArray(pathTypes)) {
-            for (const pathType of pathTypes) {
-                this.enablePath(pathType, enable);
+            for (const pathType of pathways.PATH_TYPES) {
+                if (pathTypes.indexOf(pathType.type) >= 0) {
+                    this.enablePath(pathType.type, enable)
+                } else {
+                    this.enablePath(pathType.type, !enable)
+                }
             }
         } else {
-            this.enablePath(pathTypes, enable);
+            for (const pathType of pathways.PATH_TYPES) {
+                if (pathType.type === pathTypes) {
+                    this.enablePath(pathType.type, enable)
+                } else {
+                    this.enablePath(pathType.type, !enable)
+                }
+            }
         }
-
-        this._disabledPathFeatures = true;
     }
 
     pathwaysFeatureIds(externalIds)
@@ -1149,14 +1157,15 @@ export class UserInteractions
                 const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
                 const feature = this.mapFeature_(annotation.featureId);
-                if (event.type === 'mouseenter') {
-                    // Highlight on mouse enter
-                    this.resetActiveFeatures_();
-                    this.__activateFeature(feature);
-                } else {
-                    this.selectionEvent_(event, feature)
+                if (feature !== undefined) {
+                    if (event.type === 'mouseenter') {
+                        // Highlight on mouse enter
+                        this.resetActiveFeatures_();
+                        this.__activateFeature(feature);
+                    } else {
+                        this.selectionEvent_(event, feature)
+                    }
                 }
-
                 // Show tooltip
                 const html = this.tooltipHtml_(annotation, true);
                 this.__showToolTip(html, marker.getLngLat());

package/src/pathways.js

@@ -34,7 +34,8 @@ export const PATH_TYPES = [
     { type: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
     { type: "somatic", label: "Somatic lower motor", colour: "#98561D"},
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
-    { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423"}
+    { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423"},
+    { type: "other", label: "Other neuron type", colour: "#888"}
 ];
 
 //==============================================================================
@@ -120,7 +121,21 @@ export class Pathways
         }
         this._allFeatureIds = featureIds;
 
-        this._typePaths = flatmap.pathways['type-paths'];            // nerve-type: [pathIds]
+        // Construct a list of path types we know about
+        const pathTypes = [];
+        for (const pathType of PATH_TYPES) {
+            pathTypes.push(pathType.type);
+        }
+        // Map unknown path types to ``other``
+        this.__typePaths = {};
+        this.__typePaths['other'] = [];
+        for (const [pathType, paths] of Object.entries(flatmap.pathways['type-paths'])) {
+            if (pathTypes.indexOf(pathType) >= 0) {
+                this.__typePaths[pathType] = paths;
+            } else {
+                this.__typePaths['other'].push(...paths);
+            }
+        }
     }
 
     addPathsToFeatureSet_(paths, featureSet)
@@ -253,8 +268,8 @@ export class Pathways
     //======================
     {
         const featureIds = new Set();
-        if (pathType in this._typePaths) {
-            this.addPathsToFeatureSet_(this._typePaths[pathType], featureIds);
+        if (pathType in this.__typePaths) {
+            this.addPathsToFeatureSet_(this.__typePaths[pathType], featureIds);
         }
         return featureIds;
     }

package/src/styling.js

@@ -373,12 +373,12 @@ export class PathLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.1,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 0.8,
-                    ['boolean', ['feature-state', 'hidden'], false], 0.1,
-                dimmed ? 0.1 : 0.4
+                dimmed ? 0.1 : 0.5
             ],
             'line-width': [
                 'let',
@@ -457,17 +457,17 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'paint': {
                 'line-color': [
                     'case',
+                    ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                     ['boolean', ['feature-state', 'active'], false], '#222',
                     ['boolean', ['feature-state', 'selected'], false], 'red',
-                    ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                     '#888'
                 ],
                 'line-opacity': [
                     'case',
-                    ['boolean', ['feature-state', 'active'], false], 0.9,
-                    ['boolean', ['feature-state', 'selected'], false], 0.9,
                     ['boolean', ['feature-state', 'hidden'], false], 0.3,
                     ['boolean', ['get', 'invisible'], false], 0.001,
+                    ['boolean', ['feature-state', 'active'], false], 0.9,
+                    ['boolean', ['feature-state', 'selected'], false], 0.9,
                     0.9
                 ],
                 'line-dasharray': [2, 1],

package/static/flatmap-viewer.css

@@ -204,6 +204,9 @@ label[for=path-all-paths] {
 .nerve-lcn {
     background: #F19E38;
 }
+.nerve-other {
+    background: #888;
+}
 .nerve-para-pre {
     background: #3F8F4A;
 }