@abi-software/flatmap-viewer 2.2.2-beta.4 → 2.2.3

package/README.rst

@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
 Package Installation
 ====================
 
-* ``npm install @abi-software/flatmap-viewer@2.2.2-beta.4``
+* ``npm install @abi-software/flatmap-viewer@2.2.3``
 
 Documentation
 -------------

package/package.json

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

package/src/controls.js

@@ -113,11 +113,11 @@ export class PathControl
         this._button = document.createElement('button');
         this._button.id = 'nerve-key-button';
         this._button.className = 'control-button';
-        this._button.title = 'Nerve paths legend';
         this._button.setAttribute('type', 'button');
         this._button.setAttribute('aria-label', 'Nerve paths legend');
         this._button.setAttribute('legend-visible', 'false');
-        this._button.textContent = 'PTH';
+        this._button.textContent = 'PATHS';
+        this._button.title = 'Show/hide neuron paths';
         this._container.appendChild(this._button);
 
         this._container.addEventListener('click', this.onClick_.bind(this));

package/src/flatmap-viewer.js

@@ -949,11 +949,11 @@ class FlatMap
         }
     }
 
-    showSearchResults(searchResults, padding=100)
-    //===========================================
+    showSearchResults(searchResults)
+    //==============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.zoomToFeatures(searchResults.featureIds, {padding: padding});
+            this._userInteractions.showSearchResults(searchResults.featureIds);
         }
     }
 

package/src/interactions.js

@@ -423,40 +423,6 @@ export class UserInteractions
         this._modal = false;
     }
 
-    enablePaths_(enable, event)
-    //=========================
-    {
-        this._contextMenu.hide();
-        const nodeId = event.target.getAttribute('featureId');
-        this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
-        this.__clearModal();
-    }
-
-    enablePathFeatures_(enable, featureIds)
-    //=====================================
-    {
-        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;
-            }
-        }
-    }
-
-    togglePaths()
-    //===========
-    {
-        if (this._disabledPathFeatures){
-            this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-            this._disabledPathFeatures = false;
-        } else {
-            this.enablePathFeatures_(false, this._pathways.allFeatureIds());
-        }
-    }
-
     reset()
     //=====
     {
@@ -521,6 +487,12 @@ export class UserInteractions
         }
     }
 
+    showSearchResults(featureIds)
+    //===========================
+    {
+        this.zoomToFeatures(featureIds, {highlight: true, noZoomIn: true});
+    }
+
     /**
      * Zoom map to features.
      *
@@ -528,19 +500,23 @@ export class UserInteractions
      * @param      {Object}  [options]
      * @param      {boolean} [options.select=true]  Select the features zoomed to
      * @param      {boolean} [options.highlight=false]  Highlight the features zoomed to
-     * @param      {number}  [options.padding=100]  Padding around the composite bounding box
+     * @param      {boolean} [options.noZoomIn=false]  Don't zoom in (although zoom out as necessary)
+     * @param      {number}  [options.padding=10]  Padding in pixels around the composite bounding box
      */
     zoomToFeatures(featureIds, options=null)
     //======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, padding:100});
+        options = utils.setDefaultOptions(options, {select: true, highlight: false, noZoomIn: false, padding:10});
         const select = (options.select === true);
         const highlight = (options.highlight === true);
-        const padding = options.padding || 100;
         if (featureIds.length) {
             this.unhighlightFeatures_();
             if (select) this.__unselectFeatures();
             let bbox = null;
+            if (options.noZoomIn) {
+                const bounds = this._map.getBounds().toArray();
+                bbox = [...bounds[0], ...bounds[1]];
+            }
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
@@ -565,7 +541,7 @@ export class UserInteractions
             }
             if (bbox !== null) {
                 this._map.fitBounds(bbox, {
-                    padding: padding,
+                    padding: options.padding,
                     animate: false
                 });
             }
@@ -640,14 +616,17 @@ export class UserInteractions
         const tooltips = [];
         for (const lineFeature of lineFeatures) {
             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 (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);
+                    }
                 }
             }
         }
@@ -682,10 +661,13 @@ export class UserInteractions
     __featureEvent(type, feature)
     //===========================
     {
-        if (feature.sourceLayer === PATHWAYS_LAYER) {
-            return this._flatmap.featureEvent(type, this._pathways.pathProperties(feature));
-        } else if ('properties' in feature) {
-            return this._flatmap.featureEvent(type, feature.properties);
+        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);
+            }
         }
         return false;
     }
@@ -754,18 +736,22 @@ export class UserInteractions
             }
             info = this._infoControl.featureInformation(features, event.lngLat);
         }
-        const lineFeatures = features.filter(feature => (('type' in feature.properties
-                                                     && feature.properties.type.startsWith('line'))
-                                                       || 'centreline' in feature.properties));
+        const lineFeatures = features.filter(feature => ('centreline' in feature.properties
+                                                      || ('type' in feature.properties
+                                                        && feature.properties.type.startsWith('line')) ));
         if (lineFeatures.length > 0) {
             tooltip = this.lineTooltip_(lineFeatures);
-            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));
+            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));
+                        }
                     }
                 }
             }
@@ -816,12 +802,8 @@ export class UserInteractions
                 if ('nerveId' in feature.properties) {
                     if (feature.properties.active) {
                         this.activateFeature_(feature);
-                    } else {
-                        tooltip = '';
-                    }
-                    if (feature.properties.nerveId !== feature.properties.featureId) {
-                        this.activateNerveFeatures_(feature.properties.nerveId);
                     }
+                    this.activateNerveFeatures_(feature.properties.nerveId);
                 } else {
                     this.activateFeature_(feature);
                 }
@@ -855,8 +837,8 @@ export class UserInteractions
         }
     }
 
-    selectionEvent_(domEvent, feature)
-    //================================
+    selectionEvent_(event, feature)
+    //=============================
     {
         const multipleSelect = event.ctrlKey || event.metaKey;
         if (!multipleSelect) {
@@ -891,18 +873,29 @@ export class UserInteractions
     //================
     {
         this.clearActiveMarker_();
-        const feature = this._activeFeatures[0]
-        this.selectionEvent_(event.originalEvent, feature);
+        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);
+            }
+        }
         if (this._modal) {
            // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
             this.__unselectFeatures();
             this.__clearModal();
-        } else if (feature !== undefined) {
+        } else if (clickedFeature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
-            this.__featureEvent('click', feature);
-            if ('hyperlink' in feature.properties) {
-                window.open(feature.properties.hyperlink, '_blank');
+            this.__featureEvent('click', clickedFeature);
+            if ('properties' in clickedFeature && 'hyperlink' in clickedFeature.properties) {
+                window.open(clickedFeature.properties.hyperlink, '_blank');
             }
         }
     }
@@ -915,6 +908,47 @@ export class UserInteractions
         }
     }
 
+    __enabledFeature(feature)
+    //=======================
+    {
+        const state = this._map.getFeatureState(feature);
+        return !(('hidden' in state && state.hidden));
+    }
+
+    enablePaths_(enable, event)
+    //=========================
+    {
+        this._contextMenu.hide();
+        const nodeId = event.target.getAttribute('featureId');
+        this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
+        this.__clearModal();
+    }
+
+    enablePathFeatures_(enable, featureIds)
+    //=====================================
+    {
+        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;
+            }
+        }
+    }
+
+    togglePaths()
+    //===========
+    {
+        if (this._disabledPathFeatures){
+            this.enablePathFeatures_(true, this._pathways.allFeatureIds());
+            this._disabledPathFeatures = false;
+        } else {
+            this.enablePathFeatures_(false, this._pathways.allFeatureIds());
+        }
+    }
+
     enablePath(pathType, enable=true)
     //===============================
     {

package/src/styling.js

@@ -117,7 +117,6 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 ['any',
@@ -134,10 +133,10 @@ export class FeatureFillLayer extends VectorStyleLayer
                       ['==', ['get', 'kind'], 'cell-type'],
                 ], 0.1,
                 ['has', 'node'], 0.3,
-                ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.8,
+                ['boolean', ['feature-state', 'selected'], false], 0.01,
                 ['has', 'colour'], 0.008,
-                (coloured && !dimmed) ? 0.01 : 0.5
+                (coloured && !dimmed) ? 0.01 : 0.1
             ]
         };
         return super.changedPaintStyle(paintStyle, changes);
@@ -198,18 +197,18 @@ export class FeatureBorderLayer extends VectorStyleLayer
         }
         lineOpacity.push(['boolean', ['feature-state', 'selected'], false]);
         lineOpacity.push(0.9);
-        lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.01);
+        lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
 
         const lineWidth = [
             'case',
             ['boolean', ['get', 'invisible'], false], 0.2,
             ];
+        lineWidth.push(['boolean', ['feature-state', 'selected'], false]);
+        lineWidth.push(2.5);
         if (coloured && outlined) {
             lineWidth.push(['boolean', ['feature-state', 'active'], false]);
             lineWidth.push(1);
         }
-        lineWidth.push(['boolean', ['feature-state', 'selected'], false]);
-        lineWidth.push(1.5);
         lineWidth.push((coloured && outlined) ? 0.5 : 0.1);
 
         return super.changedPaintStyle({
@@ -359,6 +358,8 @@ export class PathLineLayer extends VectorStyleLayer
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
+                ['==', ['get', 'kind'], 'error'], '#FFFE0E',
+                ['==', ['get', 'kind'], 'unknown'], '#FFC1DE',
                 ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
                 ['==', ['get', 'kind'], 'lcn'], '#F19E38',
                 ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',
@@ -383,6 +384,8 @@ export class PathLineLayer extends VectorStyleLayer
                 'width', [
                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
+                        ['==', ['get', 'kind'], 'error'], 1,
+                        ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
                         ['boolean', ['feature-state', 'active'], false], 0.9,
@@ -456,8 +459,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
                     ['boolean', ['feature-state', 'active'], false], '#222',
                     ['boolean', ['feature-state', 'selected'], false], 'red',
                     ['boolean', ['feature-state', 'hidden'], false], '#CCC',
-                    ['boolean', ['get', 'active'], false], '#888',
-                    '#FFF'
+                    '#888'
                 ],
                 'line-opacity': [
                     'case',