@abi-software/flatmap-viewer 2.4.0-a.2 → 2.4.1-b.2

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.0-a.2",
+  "version": "2.4.1-b.2",
   "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/controls/taxons.js

@@ -0,0 +1,73 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023  David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+**/
+//==============================================================================
+
+import { Control } from './controls';
+
+//==============================================================================
+
+export class TaxonsControl extends Control
+{
+    constructor(flatmap)
+    {
+        super(flatmap, 'taxon', 'taxons');
+        this.__taxonIds = flatmap.taxonIdentifiers.sort();
+    }
+
+    _addControlDetails()
+    //==================
+    {
+        let lines = 0;
+        let enabled = 0;
+        for (const taxonId of this.__taxonIds) {
+            const input = this._addControlLine(`${this.__prefix}${taxonId}`, taxonId);
+            input.checked = true;
+            enabled += 1;
+            lines += 1;
+        }
+        return {
+            enabled: enabled,
+            total: lines
+        };
+    }
+
+    _enableAll(enable)
+    //================
+    {
+        for (const taxonId of this.__taxonIds) {
+            const checkbox = document.getElementById(`${this.__prefix}${taxonId}`);
+            if (checkbox) {
+                checkbox.checked = enable;
+                this.__flatmap.enableConnectivityByTaxonIds(taxonId, enable);
+            }
+        }
+    }
+
+    __enableControl(id, enable)
+    //=========================
+    {
+        for (const taxonId of this.__taxonIds) {
+            if (id === taxonId) {
+                this.__flatmap.enableConnectivityByTaxonIds(taxonId, enable);
+            }
+        }
+    }
+
+}

package/src/flatmap-viewer.js

@@ -49,6 +49,15 @@ const MAP_MAKER_SEPARATE_LAYERS_VERSION = 1.4;
 
 //==============================================================================
 
+/**
+ * The taxon identifier used when none has been given.
+ *
+ * @type       {string}
+ */
+export const UNCLASSIFIED_TAXON_ID = 'NCBITaxon:2787823';   // unclassified entries
+
+//==============================================================================
+
 /**
 * Maps are not created directly but instead are created and loaded by
 * :meth:`LoadMap` of :class:`MapManager`.
@@ -79,6 +88,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 +341,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,17 +541,31 @@ class FlatMap
         }
     }
 
-    __updateFeatureIdMap(property, featureIdMap, annotation)
+    __updateFeatureIdMapEntry(propertyId, featureIdMap, featureId)
     //======================================================
     {
-        if (property in annotation) {
-            const id = utils.normaliseId(annotation[property]);
-            const featureIds = featureIdMap.get(id);
-            if (featureIds) {
-                featureIds.push(annotation.featureId);
+        const featureIds = featureIdMap.get(propertyId);
+        if (featureIds) {
+            featureIds.push(featureId);
+        } else {
+            featureIdMap.set(propertyId, [featureId]);
+        }
+    }
+
+    __updateFeatureIdMap(property, featureIdMap, annotation, missingId=null)
+    //======================================================================
+    {
+        if (property in annotation && annotation[property].length) {
+            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);
             }
+        } else if (missingId !== null) {
+            this.__updateFeatureIdMapEntry(missingId, featureIdMap, annotation.featureId);
         }
     }
 
@@ -533,6 +577,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, UNCLASSIFIED_TAXON_ID);
         this.__annIdToFeatureId.set(ann.id, featureId);
     }
 
@@ -610,6 +655,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 +873,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 +901,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 +1026,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';
@@ -45,6 +45,7 @@ import {AnnotatedControl, BackgroundControl, LayerControl, NerveControl,
 import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
 import {SystemsControl} from './controls/systems';
+import {TaxonsControl} from './controls/taxons';
 
 import * as utils from './utils';
 
@@ -80,12 +81,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)
                               ];
 }
 
@@ -158,11 +160,12 @@ export class UserInteractions
         }
 
         // Note features that are FC systems
-
         this.__systemsManager = new SystemsManager(this._flatmap, this, featuresEnabled);
 
-        // Add various controls when running standalone
+        // All taxons of connectivity paths are enabled by default
+        this.__enabledConnectivityTaxons = new Set(this._flatmap.taxonIdentifiers);
 
+        // Add various controls when running standalone
         if (flatmap.options.standalone) {
             // Add a control to search annotations if option set
             this._map.addControl(new SearchControl(flatmap));
@@ -185,11 +188,14 @@ export class UserInteractions
                 this._map.addControl(new NerveControl(flatmap, this._layerManager, {showCentrelines: false}));
             }
 
-            // SCKAN path and SYSTEMS controls for FC maps
             if (flatmap.options.style === 'functional') {
+                // SCKAN path and SYSTEMS controls for FC maps
                 this._map.addControl(new SystemsControl(flatmap, this.__systemsManager.systems));
                 this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
                 this._map.addControl(new AnnotatedControl(this, flatmap.options.layerOptions));
+            } else {
+                // Connectivity taxon control for AC maps
+                this._map.addControl(new TaxonsControl(flatmap));
             }
         }
 
@@ -615,7 +621,7 @@ export class UserInteractions
     {
         options = utils.setDefaults(options, {
             noZoomIn: false,
-            padding: 10
+            padding: 10        // pixels
         });
         if (featureIds.length) {
             this.unselectFeatures();
@@ -624,16 +630,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 +652,7 @@ export class UserInteractions
             }
             if (bbox !== null) {
                 this._map.fitBounds(bbox, {
-                    padding: options.padding,
+                    padding: 0,
                     animate: false
                 });
             }
@@ -694,7 +704,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 +965,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 +1137,21 @@ export class UserInteractions
         this._layerManager.enableSckanPaths(sckanState, enable);
     }
 
+    enableConnectivityByTaxonIds(taxonIds, enable=true)
+    //=================================================
+    {
+        if (enable) {
+            for (const taxonId of taxonIds) {
+               this.__enabledConnectivityTaxons.add(taxonId);
+            }
+        } else {
+            for (const taxonId of taxonIds) {
+               this.__enabledConnectivityTaxons.delete(taxonId);
+            }
+        }
+        this._layerManager.setFilter({taxons: [...this.__enabledConnectivityTaxons.values()]});
+    }
+
     excludeAnnotated(exclude=false)
     //=============================
     {
@@ -1190,8 +1215,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 +1226,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 +1370,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

@@ -26,7 +26,8 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 //==============================================================================
 
-import {PATH_STYLE_RULES} from './pathways.js';
+import {UNCLASSIFIED_TAXON_ID} from './flatmap-viewer';
+import {PATH_STYLE_RULES} from './pathways';
 
 //==============================================================================
 
@@ -374,24 +375,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 +412,6 @@ export class AnnotatedPathLayer extends VectorStyleLayer
     {
         return [
             'all',
-            ['==', '$type', 'LineString'],
             ...sckanFilter(options)
         ];
     }
@@ -481,22 +481,38 @@ export class PathLineLayer extends VectorStyleLayer
     makeFilter(options={})
     {
         const sckan_filter = sckanFilter(options);
+        let taxonFilter = [];
+        if ('taxons' in options) {
+            if (options.taxons.length) {
+                taxonFilter.push('any');
+                for (const taxon of options.taxons) {
+                    if (taxon !== UNCLASSIFIED_TAXON_ID) {
+                        taxonFilter.push(['in', taxon, ['get', 'taxons']]);
+                    } else {
+                        taxonFilter.push(['case', ['has', 'taxons'], false, true]);
+                    }
+                }
+                taxonFilter = [taxonFilter];
+            } else {
+                taxonFilter.push(false);
+            }
+        }
 
         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');