@abi-software/flatmap-viewer 2.5.0-a.1 → 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.5.0-a.1``
+* ``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.5.0-a.1",
+  "version": "2.5.0-a.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -19,6 +19,7 @@
   "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",

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

@@ -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

@@ -22,10 +22,6 @@ limitations under the License.
 
 //==============================================================================
 
-import {colord} from "colord";
-
-import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox';
-import {ArcLayer} from '@deck.gl/layers';
 import maplibregl from 'maplibre-gl';
 
 import {default as turfArea} from '@turf/area';
@@ -38,14 +34,16 @@ import polylabel from 'polylabel';
 //==============================================================================
 
 import {LayerManager} from './layers';
-import {pathColour, PATHWAYS_LAYER, PathManager} from './pathways';
-import {VECTOR_TILES_SOURCE} from './styling';
+import {PATHWAYS_LAYER, PathManager} from './pathways';
+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,17 +118,12 @@ function getRenderedLabel(properties)
     return properties.renderedLabel;
 }
 
-// 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];
-}
-
 //==============================================================================
 
 export class UserInteractions
 {
+    #paths3dLayer
+
     constructor(flatmap)
     {
         this._flatmap = flatmap;
@@ -194,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
@@ -225,73 +221,9 @@ export class UserInteractions
                 // Connectivity taxon control for AC maps
                 this._map.addControl(new TaxonsControl(flatmap));
             }
-        }
-
-const 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)
 
- /*
-    {
-        "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]
-    }
-*/
-
-const deckOverlay = new DeckOverlay({
-  layers: [
-    new ArcLayer({
-      id: 'arcs',
-      data: pathData,
-      pickable: true,
-      autoHighlight: true,
-      numSegments: 100,
-      onHover: (i, e) => {
-//console.log('hover', i, e)
-        if (i.object) {
-            const lineFeatureId = +i.object.featureId;
-            this.__activateFeature(this.mapFeature(lineFeatureId));
-            for (const featureId of this.__pathManager.lineFeatureIds([lineFeatureId])) {
-                if (+featureId !== lineFeatureId) {
-                    this.__activateFeature(this.mapFeature(featureId));
-                }
-            }
+            this._map.addControl(new Path3DControl(this));
         }
-      },
-      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
-    })
-  ],
-  getTooltip: ({object}) => object && object.label
-});
-
-this._map.addControl(deckOverlay);
 
         // Handle mouse events
 
@@ -365,6 +297,12 @@ this._map.addControl(deckOverlay);
         this._layerManager.activate(layerId, enable);
     }
 
+    enable3dPaths(enable=true)
+    //========================
+    {
+        this.#paths3dLayer.enable(enable)
+    }
+
     getSystems()
     //==========
     {
@@ -536,8 +474,8 @@ this._map.addControl(deckOverlay);
         this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
     }
 
-    __activateFeature(feature)
-    //========================
+    activateFeature(feature)
+    //======================
     {
         if (feature !== undefined) {
             this._map.setFeatureState(feature, { active: true });
@@ -885,7 +823,7 @@ this._map.addControl(deckOverlay);
         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);
         }
@@ -898,11 +836,11 @@ this._map.addControl(deckOverlay);
             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));
                     }
                 }
             }
@@ -952,7 +890,7 @@ this._map.addControl(deckOverlay);
                         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';
@@ -1072,25 +1010,19 @@ this._map.addControl(deckOverlay);
         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)
     //===================================================
     {
@@ -1315,7 +1247,7 @@ this._map.addControl(deckOverlay);
                     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

@@ -299,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]
@@ -311,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) {
@@ -318,6 +320,9 @@ export class PathManager
             }
             // TODO? Show connectors and parent components of these paths??
         }
+        if (changed) {
+            this.#notifyWatchers()
+        }
     }
 
     enablePathsByType(pathType, enable, force=false)
@@ -330,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)
     //====================
     {
@@ -360,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()
+        }
+    }
 }
 
 //==============================================================================