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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.4",
+  "version": "2.5.0-a.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -18,12 +18,16 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.10.4",
+    "@deck.gl/core": "^8.9.33",
+    "@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/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
 

package/src/interactions.js

@@ -22,6 +22,10 @@ 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';
@@ -34,7 +38,7 @@ import polylabel from 'polylabel';
 //==============================================================================
 
 import {LayerManager} from './layers';
-import {PATHWAYS_LAYER, PathManager} from './pathways';
+import {pathColour, PATHWAYS_LAYER, PathManager} from './pathways';
 import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
@@ -116,6 +120,13 @@ 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
@@ -216,6 +227,72 @@ export class UserInteractions
             }
         }
 
+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));
+                }
+            }
+        }
+      },
+      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
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -515,7 +592,6 @@ export class UserInteractions
         this.__clearModal();
         this.__clearActiveMarker();
         this.unselectFeatures();
-        this.__enablePathFeatures(this.__pathManager.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)

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