@abi-software/flatmap-viewer 2.4.4 → 2.5.0-a.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.4``
+* ``npm install @abi-software/flatmap-viewer@2.5.0-a.2``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.4",
+  "version": "2.5.0-a.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -18,12 +18,17 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.10.4",
+    "@deck.gl/core": "^8.9.33",
+    "@deck.gl/extensions": "^8.9.34",
+    "@deck.gl/layers": "^8.9.33",
+    "@deck.gl/mapbox": "^8.9.33",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@turf/projection": "^6.5.0",
     "bezier-js": "^6.1.0",
+    "colord": "^2.9.3",
     "html-es6cape": "^2.0.2",
     "maplibre-gl": ">=3.6.0",
     "mathjax-full": "^3.2.2",

package/src/controls/paths3d.js

@@ -0,0 +1,76 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2024 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.
+
+******************************************************************************/
+
+export class Path3DControl
+{
+    #button
+    #container
+    #map = null
+    #flatmap
+
+    constructor(flatmap)
+    {
+        this.#flatmap = flatmap
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right'
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.#map = map
+        this.#container = document.createElement('div')
+        this.#container.className = 'maplibregl-ctrl'
+        this.#button = document.createElement('button')
+        this.#button.className = 'control-button text-button'
+        this.#button.setAttribute('type', 'button')
+        this.#button.setAttribute('aria-label', 'Show 3D paths')
+        this.#button.textContent = '3D'
+        this.#button.title = 'Show/hide 3D paths'
+        this.#container.appendChild(this.#button)
+        this.#container.addEventListener('click', this.onClick.bind(this))
+        return this.#container
+    }
+
+    onRemove()
+    //========
+    {
+        this.#container.parentNode.removeChild(this.#container)
+        this.#map = undefined
+    }
+
+    onClick(_event)
+    //=============
+    {
+        if (this.#button.classList.contains('control-active')) {
+            this.#flatmap.enable3dPaths(false)
+            this.#button.classList.remove('control-active')
+        } else {
+            this.#flatmap.enable3dPaths(true)
+            this.#button.classList.add('control-active')
+        }
+    }
+}
+
+//==============================================================================

package/src/flatmap-viewer.js

@@ -170,8 +170,8 @@ class FlatMap
 
         // Disable map rotation
 
-        this._map.dragRotate.disable();
-        this._map.touchZoomRotate.disableRotation();
+        //this._map.dragRotate.disable();
+        //this._map.touchZoomRotate.disableRotation();
 
         // Add navigation controls if option set
 
@@ -898,6 +898,19 @@ class FlatMap
         }
     }
 
+    /**
+     * Show/hide 3D path view.
+     *
+     * @param      {boolean}  [enable=true]
+     */
+    enable3dPaths(enable=true)
+    //========================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.enable3dPaths(enable)
+        }
+    }
+
     //==========================================================================
 
     /**

package/src/interactions.js

@@ -35,13 +35,15 @@ import polylabel from 'polylabel';
 
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, PathManager} from './pathways';
-import {VECTOR_TILES_SOURCE} from './styling';
+import {VECTOR_TILES_SOURCE} from './layers/styling';
+import {Paths3DLayer} from './layers/paths3d'
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
 import {BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 import {PathControl} from './controls/paths';
+import {Path3DControl} from './controls/paths3d'
 import {SearchControl} from './controls/search';
 import {SystemsControl} from './controls/systems';
 import {TaxonsControl} from './controls/taxons';
@@ -120,6 +122,8 @@ function getRenderedLabel(properties)
 
 export class UserInteractions
 {
+    #paths3dLayer
+
     constructor(flatmap)
     {
         this._flatmap = flatmap;
@@ -183,6 +187,9 @@ export class UserInteractions
         // All taxons of connectivity paths are enabled by default
         this.__enabledConnectivityTaxons = new Set(this._flatmap.taxonIdentifiers);
 
+        // Support 3D path view
+        this.#paths3dLayer = new Paths3DLayer(flatmap, this)
+
         // Add various controls when running standalone
         if (flatmap.options.standalone) {
             // Add a control to search annotations if option set
@@ -214,6 +221,8 @@ export class UserInteractions
                 // Connectivity taxon control for AC maps
                 this._map.addControl(new TaxonsControl(flatmap));
             }
+
+            this._map.addControl(new Path3DControl(this));
         }
 
         // Handle mouse events
@@ -288,6 +297,12 @@ export class UserInteractions
         this._layerManager.activate(layerId, enable);
     }
 
+    enable3dPaths(enable=true)
+    //========================
+    {
+        this.#paths3dLayer.enable(enable)
+    }
+
     getSystems()
     //==========
     {
@@ -459,8 +474,8 @@ export class UserInteractions
         this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
     }
 
-    __activateFeature(feature)
-    //========================
+    activateFeature(feature)
+    //======================
     {
         if (feature !== undefined) {
             this._map.setFeatureState(feature, { active: true });
@@ -515,7 +530,6 @@ export class UserInteractions
         this.__clearModal();
         this.__clearActiveMarker();
         this.unselectFeatures();
-        this.__enablePathFeatures(this.__pathManager.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)
@@ -809,7 +823,7 @@ export class UserInteractions
         let tooltip = '';
         if (displayInfo) {
             if (!('tooltip' in features[0].properties)) {
-                this.__activateFeature(features[0]);
+                this.activateFeature(features[0]);
             }
             info = this._infoControl.featureInformation(features, event.lngLat);
         }
@@ -822,11 +836,11 @@ export class UserInteractions
             tooltipFeature = lineFeatures[0];
             for (const lineFeature of lineFeatures) {
                 const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
-                this.__activateFeature(lineFeature);
+                this.activateFeature(lineFeature);
                 const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
                 for (const featureId of this.__pathManager.lineFeatureIds(lineIds)) {
                     if (+featureId !== lineFeatureId) {
-                        this.__activateFeature(this.mapFeature(featureId));
+                        this.activateFeature(this.mapFeature(featureId));
                     }
                 }
             }
@@ -876,7 +890,7 @@ export class UserInteractions
                         info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
                     }
                 }
-                this.__activateFeature(feature);
+                this.activateFeature(feature);
                 this.__activateRelatedFeatures(feature);
                 if ('hyperlink' in feature.properties) {
                     this._map.getCanvas().style.cursor = 'pointer';
@@ -996,25 +1010,19 @@ export class UserInteractions
         if ('nerveId' in feature.properties) {
             const nerveId = feature.properties.nerveId;
             if (nerveId !== feature.id) {
-                this.__activateFeature(this.mapFeature(nerveId));
+                this.activateFeature(this.mapFeature(nerveId));
             }
             for (const featureId of this.__pathManager.nerveFeatureIds(nerveId)) {
-                this.__activateFeature(this.mapFeature(featureId));
+                this.activateFeature(this.mapFeature(featureId));
             }
         }
         if ('nodeId' in feature.properties) {
             for (const featureId of this.__pathManager.pathFeatureIds(feature.properties.nodeId)) {
-                this.__activateFeature(this.mapFeature(featureId));
+                this.activateFeature(this.mapFeature(featureId));
             }
         }
     }
 
-    enablePath(pathId, enable=true)
-    //=============================
-    {
-        this.__pathManager.enablePath(pathId, enable);
-    }
-
     enablePathsBySystem(system, enable=true, force=false)
     //===================================================
     {
@@ -1239,7 +1247,7 @@ export class UserInteractions
                     if (event.type === 'mouseenter') {
                         // Highlight on mouse enter
                         this.resetActiveFeatures_();
-                        this.__activateFeature(feature);
+                        this.activateFeature(feature);
                     } else {
                         this.selectionEvent_(event, feature)
                     }

package/src/{layers.js → layers/index.js}

@@ -22,10 +22,10 @@ limitations under the License.
 
 //==============================================================================
 
-import {PATHWAYS_LAYER} from './pathways.js';
+import {PATHWAYS_LAYER} from '../pathways.js';
+import * as utils from '../utils.js';
 
 import * as style from './styling.js';
-import * as utils from './utils.js';
 
 const FEATURES_LAYER = 'features';
 const RASTER_LAYERS_NAME = 'Background image layer';

package/src/layers/paths3d.js

@@ -0,0 +1,170 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2024 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 {colord} from 'colord'
+import {ArcLayer} from '@deck.gl/layers'
+import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox'
+import {PathStyleExtension} from '@deck.gl/extensions'
+
+//==============================================================================
+
+import {pathColour} from '../pathways'
+
+// Should this be in `pathways.js` ??
+function pathColourRGB(pathType, alpha=255)
+//=========================================
+{
+    const rgb = colord(pathColour(pathType)).toRgb()
+    return [rgb.r, rgb.g, rgb.b, alpha]
+}
+
+//==============================================================================
+
+ /*
+    TODO:
+
+    *   Dashed paths
+    *   Control by SCKAN status
+    *   Control by taxon visibility
+    *   Control by visible layer
+
+
+    Also see https://alasarr.github.io/deck.gl/docs/api-reference/core/layer#updatetriggers
+
+
+    {
+        "featureId": 37,
+        "id": "ilxtr_neuron-type-keast-10",
+        "kind": "sensory",
+        "label": "L6-S1 sensory neuron innervating bladder",
+        "models": "ilxtr:neuron-type-keast-10",
+        "sckan": true,
+        "source": "https://apinatomy.org/uris/models/keast-bladder",
+        "taxons": ["NCBITaxon:10116"],
+        "tile-layer": "pathways",
+        "type": "line",
+        "bounds": [1.5454426659162825, -1.6254174813389017, 1.7478459571498208, -1.3632864333949712],
+        "markerPosition": [1.6466443115330516, -1.4943519573669364],
+        "geometry": "LineString",
+        "layer": "neural-routes",
+        "pathStartPosition": [1.7478459571498208, -1.3632864333949712],
+        "pathEndPosition": [1.5454426659162825, -1.6254174813389017]
+    }
+*/
+
+//==============================================================================
+
+export class Paths3DLayer
+{
+    #deckOverlay = null
+    #enabled = false
+    #map
+    #pathData
+    #pathManager
+    #ui
+
+    constructor(flatmap, ui)
+    {
+        this.#ui = ui
+        this.#map = flatmap.map
+        this.#pathManager = ui.pathManager
+        this.#pathManager.addWatcher(this.#pathStateChanged.bind(this))
+        this.#pathData = [...flatmap.annotations.values()]
+                 .filter(ann => ann['tile-layer'] === 'pathways'
+                             && ann['geometry'] === 'LineString'
+                             && 'type' in ann && ann['type'].startsWith('line')
+                             && 'kind' in ann // && !ann['kind'].includes('arterial') && !ann['kind'].includes('venous')
+                             && 'pathStartPosition' in ann
+                             && 'pathEndPosition' in ann)
+    }
+
+    enable(enable=true)
+    //=================
+    {
+        if (enable && !this.#enabled) {
+            this.#setDeckOverlay()
+            this.#map.addControl(this.#deckOverlay)
+        } else if (!enable && this.#enabled) {
+            if (this.#deckOverlay) {
+                this.#map.removeControl(this.#deckOverlay)
+                this.#deckOverlay = null
+            }
+        }
+        this.#enabled = enable
+    }
+
+    #pathStateChanged()
+    //=================
+    {
+        if (this.#deckOverlay) {
+            this.#map.removeControl(this.#deckOverlay)
+            this.#setDeckOverlay()
+            this.#map.addControl(this.#deckOverlay)
+        }
+    }
+
+    #setDeckOverlay()
+    //===============
+    {
+        this.#deckOverlay = new DeckOverlay({
+            layers: [
+                // Need to have two layers, one with dashed lines, one without
+                //
+                // Better, one layer per pathType and set/clear layer.visible...
+                //
+                new ArcLayer({
+                    id: 'arcs',
+                    data: this.#pathData
+                              .filter(f => this.#pathManager.pathTypeEnabled(f.kind)),
+                    pickable: true,
+                    autoHighlight: true,
+                    numSegments: 100,
+                    onHover: (i, e) => {
+                        //console.log('hover', i, e)
+                        if (i.object) {
+                            const lineFeatureId = +i.object.featureId
+                            this.#ui.activateFeature(this.#ui.mapFeature(lineFeatureId))
+                            for (const featureId of this.#pathManager.lineFeatureIds([lineFeatureId])) {
+                                if (+featureId !== lineFeatureId) {
+                                    this.#ui.activateFeature(this.#ui.mapFeature(featureId))
+                                }
+                            }
+                        }
+                    },
+                    onClick: (i, e) => {
+                        console.log('click', i, e)
+                    },
+                    // Styles
+                    getSourcePosition: f => f.pathStartPosition,
+                    getTargetPosition: f => f.pathEndPosition,
+                    getSourceColor: f => pathColourRGB(f.kind, 160),
+                    getTargetColor: f => pathColourRGB(f.kind, 160),
+                    highlightColor: o => pathColourRGB(o.object.kind),
+                    getWidth: 3,
+                    extensions: [new PathStyleExtension({dash: true})],
+                    getDashArray: [3, 2],
+                    dashJustified: true,
+                    dashGapPickable: true,
+                })
+            ],
+            getTooltip: ({object}) => object && object.label
+        })
+    }
+}

package/src/{styling.js → layers/styling.js}

@@ -26,8 +26,8 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 //==============================================================================
 
-import {UNCLASSIFIED_TAXON_ID} from './flatmap-viewer';
-import {PATH_STYLE_RULES} from './pathways';
+import {UNCLASSIFIED_TAXON_ID} from '../flatmap-viewer';
+import {PATH_STYLE_RULES} from '../pathways';
 
 //==============================================================================
 

package/src/pathways.js

@@ -52,6 +52,14 @@ const PATH_TYPES = [
 export const PATH_STYLE_RULES =
     PATH_TYPES.flatMap(pathType => [['==', ['get', 'kind'], pathType.type], pathType.colour]);
 
+export const PATH_COLOURS =
+    Object.fromEntries(PATH_TYPES.flatMap(pathType => [[pathType.type, pathType.colour]]));
+
+export function pathColour(pathType)
+{
+    return PATH_COLOURS[pathType] || '#FF0';
+}
+
 //==============================================================================
 
 export class PathManager
@@ -291,6 +299,7 @@ export class PathManager
     enablePathsBySystem(system, enable, force=false)
     //==============================================
     {
+        let changed = false;
         for (const pathId of system.pathIds) {
             const path = this.__paths[pathId];
             if (this.__pathtypeEnabled[path.pathType]
@@ -303,6 +312,7 @@ export class PathManager
                 for (const featureId of featureIds) {
                     this.__ui.enableFeature(featureId, enable, force);
                 }
+                changed = true
             }
             path.systemCount += (enable ? 1 : -1);
             if (path.systemCount < 0) {
@@ -310,6 +320,9 @@ export class PathManager
             }
             // TODO? Show connectors and parent components of these paths??
         }
+        if (changed) {
+            this.#notifyWatchers()
+        }
     }
 
     enablePathsByType(pathType, enable, force=false)
@@ -322,9 +335,16 @@ export class PathManager
                 this.__ui.enableFeature(featureId, enable, force);
             }
             this.__pathtypeEnabled[pathType] = enable;
+            this.#notifyWatchers()
         }
     }
 
+    pathTypeEnabled(pathType)
+    //=======================
+    {
+        return this.__pathtypeEnabled[pathType] || false
+    }
+
     nodePathModels(nodeId)
     //====================
     {
@@ -352,6 +372,31 @@ export class PathManager
         }
         return nodeIds;
     }
+
+    #lastWatcherId = 0
+    #watcherCallbacks = new Map()
+
+    addWatcher(callback)
+    //==================
+    {
+        this.#lastWatcherId += 1
+        this.#watcherCallbacks.set(this.#lastWatcherId, callback)
+        return this.#lastWatcherId
+    }
+
+    removeWatcher(watcherId)
+    //======================
+    {
+        this.#watcherCallbacks.delete(watcherId)
+    }
+
+    #notifyWatchers()
+    //===============
+    {
+        for (const callback of this.#watcherCallbacks.values()) {
+            callback()
+        }
+    }
 }
 
 //==============================================================================