@abi-software/flatmap-viewer 2.2.7 → 2.3.0-a.1

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.8``
 
 Documentation
 -------------

package/package.json

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

package/src/controls.js

@@ -22,7 +22,6 @@ limitations under the License.
 
 //==============================================================================
 
-import * as pathways from './pathways.js';
 
 //==============================================================================
 
@@ -77,10 +76,11 @@ export class NavigationControl
 
 export class PathControl
 {
-    constructor(flatmap)
+    constructor(flatmap, pathways)
     {
         this._flatmap = flatmap;
         this._map = undefined;
+        this.__pathTypes = pathways.pathTypes;
     }
 
     getDefaultPosition()
@@ -103,11 +103,11 @@ export class PathControl
 
         const innerHTML = [];
         innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><input id="path-all-paths" type="checkbox" checked/><div class="nerve-line"></div>`);
-        for (const path of pathways.PATH_TYPES) {
+        for (const path of this.__pathTypes) {
             innerHTML.push(`<label for="path-${path.type}">${path.label}</label><input id="path-${path.type}" type="checkbox" checked/><div class="nerve-line nerve-${path.type}"></div>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
-        this.__checkedCount = pathways.PATH_TYPES.length;
+        this.__checkedCount = this.__pathTypes.length;
         this.__halfCount = Math.trunc(this.__checkedCount/2);
 
         this._button = document.createElement('button');
@@ -150,11 +150,11 @@ export class PathControl
                     event.target.indeterminate = false;
                 }
                 if (event.target.checked) {
-                    this.__checkedCount = pathways.PATH_TYPES.length;
+                    this.__checkedCount = this.__pathTypes.length;
                 } else {
                     this.__checkedCount = 0;
                 }
-                for (const path of pathways.PATH_TYPES) {
+                for (const path of this.__pathTypes) {
                     const pathCheckbox = document.getElementById(`path-${path.type}`);
                     if (pathCheckbox) {
                         pathCheckbox.checked = event.target.checked;
@@ -173,7 +173,7 @@ export class PathControl
                 if (this.__checkedCount === 0) {
                     allPathsCheckbox.checked = false;
                     allPathsCheckbox.indeterminate = false;
-                } else if (this.__checkedCount === pathways.PATH_TYPES.length) {
+                } else if (this.__checkedCount === this.__pathTypes.length) {
                     allPathsCheckbox.checked = true;
                     allPathsCheckbox.indeterminate = false;
                 } else {

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);
@@ -280,7 +281,9 @@ class FlatMap
     pathTypes()
     //=========
     {
-        return pathways.PATH_TYPES;
+        if (this._userInteractions !== null) {
+            return this._userInteractions.pathTypes();
+        }
     }
 
     /**
@@ -354,7 +357,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 +405,7 @@ class FlatMap
     get id()
     //======
     {
-        return this._id;
+        return this.__uuid;
     }
 
     /**
@@ -424,7 +427,7 @@ class FlatMap
     get uniqueId()
     //============
     {
-        return `${this._id}-${this._mapNumber}`;
+        return `${this.__uuid}-${this._mapNumber}`;
     }
 
     get activeLayerNames()
@@ -466,7 +469,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 +493,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 +637,7 @@ class FlatMap
         return {
             taxon: this.__taxon,
             biologicalSex: this.__biologicalSex,
-            id: this._id
+            uuid: this.__uuid
         };
     }
 
@@ -1086,7 +1089,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 +1304,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

@@ -151,8 +151,7 @@ export class UserInteractions
 
         if (flatmap.options.pathControls) {
             // Add controls to manage our pathways
-
-            this._map.addControl(new PathControl(flatmap));
+            this._map.addControl(new PathControl(flatmap, this._pathways));
         }
 
         // Manage our layers
@@ -164,10 +163,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 +248,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 +276,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 +293,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 +309,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 +323,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 +333,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 +625,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 +667,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 +707,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 +746,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));
                     }
                 }
             }
@@ -874,7 +874,12 @@ export class UserInteractions
     //================
     {
         this.clearActiveMarker_();
-        const clickedFeature = this._map.queryRenderedFeatures(event.point)[0];
+        const clickedFeatures = this._map.queryRenderedFeatures(event.point)
+                                    .filter(feature => this.__enabledFeature(feature));
+        if (clickedFeatures.length == 0){
+            return;
+        }
+        const clickedFeature = clickedFeatures[0];
         const originalEvent = event.originalEvent;
         if (clickedFeature === undefined || this._activeFeatures.length === 1) {
             this.selectionEvent_(originalEvent, clickedFeature);
@@ -920,7 +925,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 +943,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;
+                }
             }
         }
     }
@@ -957,6 +965,12 @@ export class UserInteractions
         }
     }
 
+    pathTypes()
+    //=========
+    {
+        return this._pathways.pathTypes;
+    }
+
     enablePath(pathType, enable=true)
     //===============================
     {
@@ -1149,14 +1163,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

@@ -26,16 +26,18 @@ export const PATHWAYS_LAYER = 'pathways';
 
 //==============================================================================
 
-export const PATH_TYPES = [
-    { type: "cns", label: "CNS", colour: "#9B1FC1"},
-    { type: "lcn", label: "Local circuit neuron", colour: "#F19E38"},
-    { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
-    { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
-    { 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"}
-];
+const PATH_TYPES = {
+    "cns": {label: "CNS", colour: "#9B1FC1"},
+    "lcn": {label: "Local circuit neuron", colour: "#F19E38"},
+    "para-pre": {label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
+    "para-post": {label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
+    "sensory": {label: "Sensory (afferent) neuron", colour: "#2A62F6"},
+    "somatic": {label: "Somatic lower motor", colour: "#98561D"},
+    "symp-pre": {label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
+    "symp-post": {label: "Sympathetic post-ganglionic", colour: "#EA3423"},
+    "other": {label: "Other neuron type", colour: "#888"},
+    "centreline": {label: "Nerve centrelines", colour: "#CC0"}
+};
 
 //==============================================================================
 
@@ -120,7 +122,27 @@ export class Pathways
         }
         this._allFeatureIds = featureIds;
 
-        this._typePaths = flatmap.pathways['type-paths'];            // nerve-type: [pathIds]
+        // Map unknown path types to ``other``
+        this.__typePaths = {};
+        this.__typePaths['other'] = [];
+        this.__knownPathTypes = [];
+        for (const [pathType, paths] of Object.entries(flatmap.pathways['type-paths'])) {
+            if (pathType in PATH_TYPES && pathType !== 'other') {
+                this.__typePaths[pathType] = paths;
+                this.__knownPathTypes.push({'type': pathType, ...PATH_TYPES[pathType]});
+            } else {
+                this.__typePaths['other'].push(...paths);
+            }
+        }
+        if ('other' in this.__typePaths) {
+            this.__knownPathTypes.push({'type': 'other', ...PATH_TYPES['other']});
+        }
+    }
+
+    get pathTypes()
+    //=============
+    {
+        return this.__knownPathTypes;
     }
 
     addPathsToFeatureSet_(paths, featureSet)
@@ -253,8 +275,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

@@ -346,7 +346,8 @@ export class PathLineLayer extends VectorStyleLayer
             [
                 'any',
                 ['==', 'type', 'bezier'],
-                ['==', 'type', `line`]
+                ['==', 'kind', 'centreline'],
+                ['==', 'type', 'line']
             ];
         this.__dashed = dashed;
     }
@@ -369,22 +370,25 @@ export class PathLineLayer extends VectorStyleLayer
                 ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
                 ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
                 ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
+                ['==', ['get', 'kind'], 'centreline'], '#CC0',
                 '#888'
             ],
             '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
+                    ['==', ['get', 'kind'], 'centreline'], 0.2,
+                dimmed ? 0.1 : 0.5
             ],
             'line-width': [
                 'let',
                 'width', [
                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
+                        ['==', ['get', 'kind'], 'centreline'], 2,
                         ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
@@ -452,22 +456,23 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'filter': [
                  'all',
                  ['==', '$type', 'LineString'],
+                 ['!=', 'kind', 'centreline'],
                  ['==', 'type', 'nerve']
             ],
             '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

@@ -198,12 +198,18 @@ li.flatmap-contextmenu-item:hover {
 label[for=path-all-paths] {
     font-weight: bold;
 }
+.nerve-centreline {
+    background: #CC0;
+}
 .nerve-cns {
     background: #9B1FC1;
 }
 .nerve-lcn {
     background: #F19E38;
 }
+.nerve-other {
+    background: #888;
+}
 .nerve-para-pre {
     background: #3F8F4A;
 }