@abi-software/flatmap-viewer 2.4.0-a.2 → 2.4.1-b.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.4.0-a.2``
+* ``npm install @abi-software/flatmap-viewer@2.4.1-b.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.0-a.2",
+  "version": "2.4.1-b.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -26,7 +26,7 @@
     "bezier-js": "^6.1.0",
     "html-es6cape": "^2.0.2",
     "jspanel4": "^4.16.1",
-    "maplibre-gl": ">=2.4.0",
+    "maplibre-gl": ">=3.0.0",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

package/src/contextmenu.js

@@ -22,7 +22,7 @@ limitations under the License.
 
 //==============================================================================
 
-import maplibre from 'maplibre-gl';
+import maplibregl from 'maplibre-gl';
 
 //==============================================================================
 
@@ -64,7 +64,7 @@ export class ContextMenu
         this._flatmap = flatmap;
         this._map = flatmap.map;
         this._closeCallback = closeCallback;
-        this._popup = new maplibre.Popup({
+        this._popup = new maplibregl.Popup({
             closeButton: true,
             closeOnClick: true,
             className: 'flatmap-contextmenu-popup',

package/src/controls/minimap.js

@@ -45,7 +45,7 @@ limitations under the License.
 
 //==============================================================================
 
-import maplibre from 'maplibre-gl';
+import maplibregl from 'maplibre-gl';
 
 //==============================================================================
 
@@ -146,7 +146,7 @@ export class MinimapControl
 
         // Create the actual minimap
 
-        this._miniMap = new maplibre.Map({
+        this._miniMap = new maplibregl.Map({
             attributionControl: false,
             container: container,
             style: map.getStyle(),

package/src/controls/systems.js

@@ -32,7 +32,7 @@ export class SystemsControl extends Control
     }
 
     _addControlDetails()
-    //===============
+    //==================
     {
         let lines = 0;
         let enabled = 0;

package/src/flatmap-viewer.js

@@ -79,6 +79,7 @@ class FlatMap
         this.__modelToFeatureIds = new Map();
         this.__mapSourceToFeatureIds = new Map();
         this.__annIdToFeatureId = new Map();
+        this.__taxonToFeatureIds = new Map();
 
         for (const [featureId, annotation] of Object.entries(mapDescription.annotations)) {
             this.__addAnnotation(featureId, annotation);
@@ -331,6 +332,26 @@ class FlatMap
         }
     }
 
+    /**
+     * Show or hide connectivity features observed in particular species.
+     *
+     * @param {string | Array.<string>}   taxonId(s)  A single taxon identifier
+     *                                                or an array of identifiers.
+     * @param {boolean}  enable  Show or hide connectivity paths and features.
+     *                           Defaults to ``true`` (show)
+     */
+    enableConnectivityByTaxonIds(taxonIds, enable=true)
+    //=================================================
+    {
+        if (this._userInteractions !== null) {
+            if (Array.isArray(taxonIds)) {
+                this._userInteractions.enableConnectivityByTaxonIds(taxonIds, enable);
+            } else {
+                this._userInteractions.enableConnectivityByTaxonIds([taxonIds], enable);
+            }
+        }
+    }
+
     /**
      * Hide or show centrelines and nodes.
      *
@@ -511,16 +532,28 @@ class FlatMap
         }
     }
 
+    __updateFeatureIdMapEntry(propertyId, featureIdMap, featureId)
+    //======================================================
+    {
+        const featureIds = featureIdMap.get(propertyId);
+        if (featureIds) {
+            featureIds.push(featureId);
+        } else {
+            featureIdMap.set(propertyId, [featureId]);
+        }
+    }
+
     __updateFeatureIdMap(property, featureIdMap, annotation)
     //======================================================
     {
         if (property in annotation) {
-            const id = utils.normaliseId(annotation[property]);
-            const featureIds = featureIdMap.get(id);
-            if (featureIds) {
-                featureIds.push(annotation.featureId);
+            const propertyId = annotation[property];
+            if (Array.isArray(propertyId)) {
+                for (const id of propertyId) {
+                    this.__updateFeatureIdMapEntry(id, featureIdMap, annotation.featureId);
+                }
             } else {
-                featureIdMap.set(id, [annotation.featureId]);
+                this.__updateFeatureIdMapEntry(propertyId, featureIdMap, annotation.featureId)
             }
         }
     }
@@ -533,6 +566,7 @@ class FlatMap
         this.__updateFeatureIdMap('dataset', this.__datasetToFeatureIds, ann);
         this.__updateFeatureIdMap('models', this.__modelToFeatureIds, ann);
         this.__updateFeatureIdMap('source', this.__mapSourceToFeatureIds, ann);
+        this.__updateFeatureIdMap('taxons', this.__taxonToFeatureIds, ann);
         this.__annIdToFeatureId.set(ann.id, featureId);
     }
 
@@ -610,6 +644,17 @@ class FlatMap
         return [...this.__modelToFeatureIds.keys()]
     }
 
+    /**
+     * The taxon identifiers of species which the map's connectivity has been observed in.
+     *
+     * @type {string|Array.<string>}
+     */
+    get taxonIdentifiers()
+    //====================
+    {
+        return [...this.__taxonToFeatureIds.keys()]
+    }
+
     /**
      * Datasets associated with the map.
      *
@@ -817,7 +862,7 @@ class FlatMap
     /**
      * Get a list of the flatmap's layers.
      *
-     * @return {Array.Object.<{id: string, description: string, enabled: boolean}>}  An array with layer details
+     * @return {Array.<{id: string, description: string, enabled: boolean}>}  An array with layer details
      */
     getLayers()
     //=========
@@ -845,7 +890,7 @@ class FlatMap
     /**
      * Get a list of a FC flatmap's systems.
      *
-     * @return {Array.Object.<{id: string, name: string, colour: string, enabled: boolean}>}  An array with system details
+     * @return {Array.<{id: string, name: string, colour: string, enabled: boolean}>}  An array with system details
      */
     getSystems()
     //==========
@@ -970,7 +1015,7 @@ class FlatMap
             'models',
             'nodeId',
             'source',
-            'taxon',
+            'taxons',
             'hyperlinks'
         ];
         const jsonProperties = [

package/src/interactions.js

@@ -22,7 +22,7 @@ limitations under the License.
 
 //==============================================================================
 
-import maplibre from 'maplibre-gl';
+import maplibregl from 'maplibre-gl';
 
 import {default as turfArea} from '@turf/area';
 import {default as turfBBox} from '@turf/bbox';
@@ -80,12 +80,13 @@ function bounds(feature)
 
 //==============================================================================
 
-function expandBounds(bbox1, bbox2)
-//=================================
+function expandBounds(bbox1, bbox2, padding)
+//==========================================
 {
-    return (bbox1 === null) ? bbox2
-                            : [Math.min(bbox1[0], bbox2[0]), Math.min(bbox1[1], bbox2[1]),
-                               Math.max(bbox1[2], bbox2[2]), Math.max(bbox1[3], bbox2[3])
+    return (bbox1 === null) ? [bbox2[0]-padding.lng, bbox2[1]-padding.lat,
+                               bbox2[2]+padding.lng, bbox2[3]+padding.lat]
+                            : [Math.min(bbox1[0], bbox2[0]-padding.lng), Math.min(bbox1[1], bbox2[1]-padding.lat),
+                               Math.max(bbox1[2], bbox2[2]+padding.lng), Math.max(bbox1[3], bbox2[3]+padding.lat)
                               ];
 }
 
@@ -615,7 +616,7 @@ export class UserInteractions
     {
         options = utils.setDefaults(options, {
             noZoomIn: false,
-            padding: 10
+            padding: 10        // pixels
         });
         if (featureIds.length) {
             this.unselectFeatures();
@@ -624,16 +625,20 @@ export class UserInteractions
                 const bounds = this._map.getBounds().toArray();
                 bbox = [...bounds[0], ...bounds[1]];
             }
+            // Convert pixel padding to LngLat and apply it to a feature's bounds
+            const padding = this._map.unproject({x: options.padding, y: options.padding});
+            padding.lng -= bbox[0];
+            padding.lat = bbox[3] - padding.lat;
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
                     if (this.selectFeature(featureId)) {
-                        bbox = expandBounds(bbox, annotation.bounds);
+                        bbox = expandBounds(bbox, annotation.bounds, padding);
                         if ('type' in annotation && annotation.type.startsWith('line')) {
                             for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                                 if (this.selectFeature(pathFeatureId)) {
                                     const pathAnnotation = this._flatmap.annotation(pathFeatureId)
-                                    bbox = expandBounds(bbox, pathAnnotation.bounds);
+                                    bbox = expandBounds(bbox, pathAnnotation.bounds, padding);
                                 }
                             }
                         }
@@ -642,7 +647,7 @@ export class UserInteractions
             }
             if (bbox !== null) {
                 this._map.fitBounds(bbox, {
-                    padding: options.padding,
+                    padding: 0,
                     animate: false
                 });
             }
@@ -694,7 +699,7 @@ export class UserInteractions
                 this._map.panTo(location);
             }
             this.setModal_();
-            this._currentPopup = new maplibre.Popup(options).addTo(this._map);
+            this._currentPopup = new maplibregl.Popup(options).addTo(this._map);
             this._currentPopup.on('close', this.__onCloseCurrentPopup.bind(this));
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
@@ -955,7 +960,7 @@ export class UserInteractions
                 html = `<span>${header}</span><br/>${html}`;
             }
             if (html !== '') {
-                this._tooltip = new maplibre.Popup({
+                this._tooltip = new maplibregl.Popup({
                     closeButton: false,
                     closeOnClick: false,
                     maxWidth: 'none',
@@ -1127,6 +1132,16 @@ export class UserInteractions
         this._layerManager.enableSckanPaths(sckanState, enable);
     }
 
+    enableConnectivityByTaxonIds(taxonIds, enable=true)
+    //=================================================
+    {
+        if (enable) {
+            this._layerManager.setFilter({taxons: taxonIds});
+        } else {
+            this._layerManager.setFilter({taxons: []});
+        }
+    }
+
     excludeAnnotated(exclude=false)
     //=============================
     {
@@ -1190,8 +1205,8 @@ export class UserInteractions
                 // order to apply a scale transform we need to create marker icons
                 // inside the marker container <div>.
                 const colour = options.colour || '#005974';
-                const markerHTML = options.element ? new maplibre.Marker({element: options.element})
-                                                   : new maplibre.Marker({color: colour});
+                const markerHTML = options.element ? new maplibregl.Marker({element: options.element})
+                                                   : new maplibregl.Marker({color: colour});
 
                 const markerElement = document.createElement('div');
                 const markerIcon = document.createElement('div');
@@ -1201,9 +1216,9 @@ export class UserInteractions
                 markerElement.appendChild(markerIcon);
 
                 const markerPosition = this.__markerPosition(featureId, annotation);
-                const marker = new maplibre.Marker(markerElement)
-                                           .setLngLat(markerPosition)
-                                           .addTo(this._map);
+                const marker = new maplibregl.Marker(markerElement)
+                                             .setLngLat(markerPosition)
+                                             .addTo(this._map);
                 markerElement.addEventListener('mouseenter',
                     this.markerMouseEvent_.bind(this, marker, anatomicalId));
                 markerElement.addEventListener('mousemove',
@@ -1345,7 +1360,7 @@ export class UserInteractions
 
         element.addEventListener('click', e => this.__clearActiveMarker());
 
-        this._tooltip = new maplibre.Popup({
+        this._tooltip = new maplibregl.Popup({
             closeButton: false,
             closeOnClick: false,
             maxWidth: 'none',

package/src/styling.js

@@ -374,24 +374,24 @@ function sckanFilter(options)
                      : options.sckan.toLowerCase();
     const sckanFilter =
         sckanState == 'none' ? [
-            ['!has', 'sckan']
+            ['!', ['has', 'sckan']]
         ] :
         sckanState == 'valid' ? [[
             'any',
-            ['!has', 'sckan'],
+            ['!', ['has', 'sckan']],
             [
                 'all',
                 ['has', 'sckan'],
-                ['==', 'sckan', true]
+                ['==', ['get', 'sckan'], true]
             ]
         ]] :
         sckanState == 'invalid' ? [[
             'any',
-            ['!has', 'sckan'],
+            ['!', ['has', 'sckan']],
             [
                 'all',
                 ['has', 'sckan'],
-                ['!=', 'sckan', true]
+                ['!=', ['get', 'sckan'], true]
             ]
         ]] :
         [ ];
@@ -411,7 +411,6 @@ export class AnnotatedPathLayer extends VectorStyleLayer
     {
         return [
             'all',
-            ['==', '$type', 'LineString'],
             ...sckanFilter(options)
         ];
     }
@@ -481,22 +480,33 @@ export class PathLineLayer extends VectorStyleLayer
     makeFilter(options={})
     {
         const sckan_filter = sckanFilter(options);
+        let taxonFilter = [];
+        if ('taxons' in options) {
+            taxonFilter.push('all');
+            taxonFilter.push(['has', 'taxons']);
+            const filterList = ['any'];
+            for (const taxon of options.taxons) {
+                filterList.push(['in', taxon, ['get', 'taxons']]);
+            }
+            taxonFilter.push(filterList);
+            taxonFilter = [taxonFilter];
+        }
 
         return this.__dashed ? [
             'all',
-            ['==', '$type', 'LineString'],
-            ['==', 'type', `line-dash`],
-            ...sckan_filter
+            ['==', ['get', 'type'], 'line-dash'],
+            ...sckan_filter,
+            ...taxonFilter
         ] : [
             'all',
-            ['==', '$type', 'LineString'],
             [
                 'any',
-                ['==', 'type', 'bezier'],
+                ['==', ['get', 'type'], 'bezier'],
                 [
                     'all',
-                    ['==', 'type', `line`],
-                    ...sckan_filter
+                    ['==', ['get', 'type'], 'line'],
+                    ...sckan_filter,
+                    ...taxonFilter
                 ]
             ]
         ];

package/src/utils.js

@@ -22,6 +22,10 @@ limitations under the License.
 
 //==============================================================================
 
+const NO_NORMALISATION = ['http', 'https', 'urn', 'NCBITaxon'];
+
+//==============================================================================
+
 export class List extends Array {
     constructor(iterable=null) {
         super();
@@ -101,7 +105,7 @@ export function normaliseId(id)
     }
     const parts = id.split(':')
     const lastPart = parts[parts.length - 1]
-    if (['http', 'https', 'urn'].includes(parts[0]) || !'0123456789'.includes(lastPart[0])) {
+    if (NO_NORMALISATION.includes(parts[0]) || !'0123456789'.includes(lastPart[0])) {
         return id;
     }
     parts[parts.length - 1] = lastPart.padStart(8, '0');