@abi-software/flatmap-viewer 2.4.2-b.5 → 2.4.4

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.2-b.5``
+* ``npm install @abi-software/flatmap-viewer@2.4.4``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.4.2-b.5",
+  "version": "2.4.4",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -19,14 +19,14 @@
   "dependencies": {
     "@babel/runtime": "^7.10.4",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@turf/area": "^6.0.1",
-    "@turf/bbox": "^6.0.1",
-    "@turf/helpers": "^6.1.4",
+    "@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",
     "html-es6cape": "^2.0.2",
-    "jspanel4": "^4.16.1",
-    "maplibre-gl": ">=3.0.0",
+    "maplibre-gl": ">=3.6.0",
+    "mathjax-full": "^3.2.2",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

package/src/controls/controls.js

@@ -526,73 +526,6 @@ export class NerveControl
 
 //==============================================================================
 
-export class AnnotatedControl
-{
-    constructor(ui, options={excludeAnnotated: false})
-    {
-        this.__ui = ui;
-        this.__map = undefined;
-        this.__exclude = options.excludeAnnotated || false;
-    }
-
-    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.id = 'map-annotated-button';
-        this.__button.className = 'control-button text-button';
-        this.__button.setAttribute('type', 'button');
-        this.__button.setAttribute('aria-label', 'Show/hide annotated paths');
-        this.__button.textContent = 'UNANN';
-        this.__button.title = 'Show/hide annotated paths';
-        this.__container.appendChild(this.__button);
-
-        this.__container.addEventListener('click', this.onClick_.bind(this));
-        this.__setBackground();
-        return this.__container;
-    }
-
-    __setBackground()
-    //===============
-    {
-        if (this.__exclude) {
-            this.__button.setAttribute('style', 'background: red');
-        } else {
-            this.__button.removeAttribute('style');
-        }
-    }
-
-    onRemove()
-    //========
-    {
-        this.__container.parentNode.removeChild(this.__container);
-        this.__map = undefined;
-    }
-
-    onClick_(event)
-    //=============
-    {
-        if (event.target.id === 'map-annotated-button') {
-            this.__exclude = !this.__exclude;
-            this.__setBackground();
-            this.__ui.excludeAnnotated(this.__exclude);
-        }
-        event.stopPropagation();
-    }
-}
-
-//==============================================================================
-
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/flatmap-viewer.js

@@ -95,9 +95,6 @@ class FlatMap
             this.__addAnnotation(featureId, annotation);
             this.__searchIndex.indexMetadata(featureId, annotation);
         }
-        if (this.options.annotator) {
-            this.__addAnnotatedComments();
-        }
 
         // Set base of source URLs in map's style
 
@@ -223,25 +220,6 @@ class FlatMap
         });
     }
 
-    async __addAnnotatedComments()
-    //============================
-    {
-        const url = this.makeServerUrl('', 'annotator/')
-        const annotatedFeatures = await loadJSON(url);
-        for (const annotatedId of annotatedFeatures) {
-            const featureId = this.__annIdToFeatureId.get(annotatedId);
-            if (featureId) {
-                const url = this.makeServerUrl(annotatedId, 'annotator/')
-                const annotations = await loadJSON(url);
-                for (const annotation of annotations) {   // In order of most recent to oldest
-                    if ('rdfs:comment' in annotation) {
-                        this.__searchIndex.indexText(featureId, annotation['rdfs:comment']);
-                    }
-                }
-            }
-        }
-    }
-
     async setupUserInteractions_()
     //============================
     {
@@ -1237,20 +1215,6 @@ class FlatMap
 
     //==========================================================================
 
-    /**
-     * Highlight features on the map.
-     *
-     * @param {Array.<string>}  externalIds  An array of anaotomical terms identifing features to highlight
-     */
-    highlightFeatures(externalIds)
-    //============================
-    {
-        if (this._userInteractions !== null) {
-            const featureIds = this.modelFeatureIdList(externalIds);
-            this._userInteractions.highlightFeatures(featureIds);
-        }
-    }
-
     /**
      * Select features on the map.
      *
@@ -1435,7 +1399,6 @@ export class MapManager
     * @arg options.showPosition {boolean} Show ``position`` of tooltip.
     * @arg options.standalone {boolean} Viewer is running ``standalone``, as opposed to integrated into
     *                                   another application so show a number of controls. Defaults to ``false``.
-    * @arg options.annotator {boolean} Allow interactive annotation of features and paths.
     * @example
     * const humanMap1 = mapManager.loadMap('humanV1', 'div-1');
     *

package/src/interactions.js

@@ -33,19 +33,19 @@ import polylabel from 'polylabel';
 
 //==============================================================================
 
-import {Annotator} from './annotation';
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, PathManager} from './pathways';
 import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
-import {AnnotatedControl, BackgroundControl, LayerControl, NerveControl,
+import {BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 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';
 
@@ -93,6 +93,31 @@ 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;
+}
+
+//==============================================================================
+
 export class UserInteractions
 {
     constructor(flatmap)
@@ -152,13 +177,6 @@ export class UserInteractions
             this.enableCentrelines(this.__pathManager.enabledCentrelines, true);
         }
 
-        // Add annotation capability
-        if (flatmap.options.annotator) {
-            this.__setupAnnotation();
-        } else {
-            this.__annotator = null;
-        }
-
         // Note features that are FC systems
         this.__systemsManager = new SystemsManager(this._flatmap, this, featuresEnabled);
 
@@ -196,11 +214,6 @@ export class UserInteractions
                 // Connectivity taxon control for AC maps
                 this._map.addControl(new TaxonsControl(flatmap));
             }
-
-            if (flatmap.options.annotator) {
-                // Show/hide annotated paths
-                this._map.addControl(new AnnotatedControl(this, flatmap.options.layerOptions));
-            }
         }
 
         // Handle mouse events
@@ -256,41 +269,6 @@ export class UserInteractions
         }
     }
 
-    async __setupAnnotation()
-    //=======================
-    {
-        // Add annotation capability
-
-        this.__annotator = new Annotator(this._flatmap, this);
-        const annotated_features = await this.__annotator.annotated_features();
-
-        // Flag features that have annotations
-        this.__featureIdToMapId = new Map();
-        for (const [mapId, ann] of this._flatmap.annotations) {
-            this.__featureIdToMapId.set(ann.id, mapId);
-            const feature = this.mapFeature(mapId);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'map-annotation': true });
-                if (annotated_features.includes(ann.id)) {
-                    this._map.setFeatureState(feature, { 'annotated': true });
-                }
-            }
-        }
-    }
-
-    setFeatureAnnotated(featureId)
-    //============================
-    {
-        if (this.__annotator) {
-            // featureId v's geoJSON id
-            const mapId = this.__featureIdToMapId.get(featureId);
-            const feature = this.mapFeature(mapId);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'annotated': true });
-            }
-        }
-    }
-
     setPaint(options)
     //===============
     {
@@ -398,9 +376,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)
@@ -495,19 +476,6 @@ export class UserInteractions
         }
     }
 
-    highlightFeature_(featureId)
-    //==========================
-    {
-        featureId = +featureId;   // Ensure numeric
-        this.__activateFeature(this.mapFeature(featureId));
-    }
-
-    unhighlightFeatures_()
-    //====================
-    {
-        this.resetActiveFeatures_();
-    }
-
     smallestAnnotatedPolygonFeature_(features)
     //========================================
     {
@@ -556,30 +524,6 @@ export class UserInteractions
         this.unselectFeatures();
     }
 
-    /**
-     * Highlight features on the map.
-     *
-     * @param {Array.<string>}  featureIds  An array of feature identifiers to highlight
-     */
-    highlightFeatures(featureIds)
-    //===========================
-    {
-        if (featureIds.length) {
-            this.unhighlightFeatures_();
-            for (const featureId of featureIds) {
-                const annotation = this._flatmap.annotation(featureId);
-                if (annotation) {
-                    this.highlightFeature_(featureId);
-                    if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
-                            this.highlightFeature_(pathFeatureId);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     /**
      * Select features on the map.
      *
@@ -753,7 +697,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)) {
@@ -775,19 +718,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) ? ''
@@ -1018,28 +960,6 @@ export class UserInteractions
         }
     }
 
-    __annotationEvent(features)
-    //=========================
-    {
-        if (!this.__annotator) {
-            return;
-        }
-
-        event.preventDefault();
-
-        // Remove any tooltip
-        this.removeTooltip_();
-
-        // Don't respond to mouse events while the dialog is open
-        this.setModal_();
-
-        // The annotation dialog...
-        this.__annotator.annotate(features, () => {
-            this.unselectFeatures();
-            this.__clearModal();
-        });
-    }
-
     clickEvent_(event)
     //================
     {
@@ -1054,14 +974,8 @@ export class UserInteractions
             this.unselectFeatures();
             return;
         }
-        const originalEvent = event.originalEvent;
-        if (originalEvent.altKey) {
-            this.__annotationEvent(clickedFeatures);
-            return;
-        }
-
         const clickedFeature = clickedFeatures[0];
-        this.selectionEvent_(originalEvent, clickedFeature);
+        this.selectionEvent_(event.originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
@@ -1191,13 +1105,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/main.js

@@ -62,7 +62,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showId: true,
         showPosition: false,
         standalone: true,
-        annotator: true,
     }, options);
 
     function loadMap(id, taxon, sex)

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>`);
+}
+
+//==============================================================================