@abi-software/flatmap-viewer 2.4.3 → 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.3``
+* ``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.3",
+  "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,14 +18,19 @@
   "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",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

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';
 
@@ -45,6 +49,7 @@ import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
 import {SystemsControl} from './controls/systems';
 import {TaxonsControl} from './controls/taxons';
+import {latex2Svg} from './mathjax';
 
 import * as utils from './utils';
 
@@ -92,6 +97,38 @@ function expandBounds(bbox1, bbox2, padding)
 
 //==============================================================================
 
+function labelPosition(feature)
+{
+    const polygon = feature.geometry.coordinates;
+    // Rough heuristic. Area is in km^2; below appears to be good enough.
+    const precision = ('area' in feature.properties)
+                        ? Math.sqrt(feature.properties.area)/500000
+                        : 0.1;
+    return polylabel(polygon, precision);
+}
+
+//==============================================================================
+
+function getRenderedLabel(properties)
+{
+    if (!('renderedLabel' in properties)) {
+        const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
+                                               + properties.label.substr(1)).replaceAll("\n", "<br/>")
+                                              : '';
+        properties.renderedLabel = label.replaceAll(/`\$([^\$]*)\$`/g, math => latex2Svg(math.slice(2, -2)));
+    }
+    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
 {
     constructor(flatmap)
@@ -190,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));
@@ -350,9 +453,12 @@ export class UserInteractions
     __featureEnabled(feature)
     //=======================
     {
-        const state = this._map.getFeatureState(feature);
-        return (state !== undefined
-            && (!('hidden' in state) || !state.hidden));
+        if (feature.id) {
+            const state = this._map.getFeatureState(feature);
+            return (state !== undefined
+                && (!('hidden' in state) || !state.hidden));
+        }
+        return false;
     }
 
     featureSelected_(featureId)
@@ -486,7 +592,6 @@ export class UserInteractions
         this.__clearModal();
         this.__clearActiveMarker();
         this.unselectFeatures();
-        this.__enablePathFeatures(this.__pathManager.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)
@@ -668,7 +773,6 @@ export class UserInteractions
                 tooltips.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
             }
             if ('label' in properties && (!('tooltip' in properties) || properties.tooltip)) {
-                let tooltip = '';
                 const label = properties.label;
                 const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
                 if (!tooltips.includes(cleanLabel)) {
@@ -690,19 +794,18 @@ export class UserInteractions
         if ('warning' in properties) {
             tooltip.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
         }
+        let renderedLabel;
         if (('label' in properties || 'hyperlink' in properties)
                 && (forceLabel || !('tooltip' in properties) || properties.tooltip)) {
-            const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
-                                                   + properties.label.substr(1)).replaceAll("\n", "<br/>")
-                                                  : '';
+            const renderedLabel = getRenderedLabel(properties);
             if ('hyperlink' in properties) {
-                if (label === '') {
+                if (renderedLabel === '') {
                     tooltip.push(`<a href='${properties.hyperlink}'>${properties.hyperlink}</a>`);
                 } else {
-                    tooltip.push(`<a href='${properties.hyperlink}'>${label}</a></div>`);
+                    tooltip.push(`<a href='${properties.hyperlink}'>${renderedLabel}</a></div>`);
                 }
             } else {
-                tooltip.push(label);
+                tooltip.push(renderedLabel);
             }
         }
         return (tooltip.length === 0) ? ''
@@ -1078,13 +1181,7 @@ export class UserInteractions
                 ]
             });
             if (features.length > 0) {
-                const feature = features[0];
-                const polygon = feature.geometry.coordinates;
-                // Rough heuristic. Area is in km^2; below appears to be good enough.
-                const precision = ('area' in feature.properties)
-                                    ? Math.sqrt(feature.properties.area)/500000
-                                    : 0.1;
-                position = polylabel(polygon, precision);
+                position = labelPosition(features[0]);
             }
         }
         this.__markerPositions.set(featureId, position);

package/src/mathjax.js

@@ -0,0 +1,100 @@
+
+/******************************************************************************
+
+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.
+
+******************************************************************************/
+
+/*************************************************************************
+ *
+ *  direct/tex2svg
+ *
+ *  Uses MathJax v3 to convert a TeX string to an SVG string.
+ *
+ * ----------------------------------------------------------------------
+ *
+ *  Copyright (c) 2018 The MathJax Consortium
+ *
+ *  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.
+ */
+
+//==============================================================================
+
+const EM_SIZE = 16;
+const EX_SIZE = 8;
+
+//==============================================================================
+
+//  Load the packages needed for MathJax
+import {mathjax} from 'mathjax-full/js/mathjax';
+import {TeX} from 'mathjax-full/js/input/tex';
+import {SVG} from 'mathjax-full/js/output/svg';
+import {browserAdaptor} from 'mathjax-full/js/adaptors/browserAdaptor';
+import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html';
+import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages';   // required to load `textmacros`
+
+//==============================================================================
+
+//  Minimal CSS needed for stand-alone image
+export const LatexStyleRules = [
+  'svg a{fill:blue;stroke:blue}',
+  // Round the corners of filled background rectangles
+  '[data-mml-node="mstyle"]>rect[data-bgcolor="true"]{rx: 8%; ry: 12%}',
+  '[data-mml-node="merror"]>g{fill:red;stroke:red}',
+  '[data-mml-node="merror"]>rect[data-background]{fill:yellow;stroke:none}',
+  '[data-frame],[data-line]{stroke-width:70px;fill:none}',
+  '.mjx-dashed{stroke-dasharray:140}',
+  '.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}',
+  'use[data-c]{stroke-width:3px}'
+].join('');
+
+//==============================================================================
+
+//  Create DOM adaptor and register it for HTML documents
+const adaptor = browserAdaptor();
+RegisterHTMLHandler(adaptor);
+
+//==============================================================================
+
+const tex = new TeX({packages: AllPackages}); // ['base', 'textmacros']});
+const svg = new SVG({fontCache: 'local'});
+const html = mathjax.document('', {InputJax: tex, OutputJax: svg});
+
+//==============================================================================
+
+export function latex2Svg(latex)
+{
+    const node = html.convert(latex, {
+      display: false,    // process as inline math
+      em: 2*EM_SIZE,
+      ex: 2*EX_SIZE,
+    });
+    let result = adaptor.innerHTML(node);
+    return result.replace(/<defs>/, `<defs><style>${LatexStyleRules}</style>`);
+}
+
+//==============================================================================

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