@abi-software/flatmap-viewer 2.5.0-a.1 → 2.5.1

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,15 +34,19 @@ 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,
+import {AnnotatorControl, BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
+import {AnnotationDrawControl, DRAW_ANNOTATION_LAYERS} from './controls/annotation'
 import {PathControl} from './controls/paths';
+import {Path3DControl} from './controls/paths3d'
 import {SearchControl} from './controls/search';
+import {MinimapControl} from './controls/minimap';
 import {SystemsControl} from './controls/systems';
 import {TaxonsControl} from './controls/taxons';
 import {latex2Svg} from './mathjax';
@@ -112,31 +112,31 @@ function labelPosition(feature)
 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)));
+        const label = ('label' in properties) ? properties.label
+                    : ('user_label' in properties) ? properties.user_label
+                    : ''
+        const uppercaseLabel = (label !== '') ? (label.substr(0, 1).toUpperCase()
+                                               + label.substr(1)).replaceAll("\n", "<br/>")
+                                              : ''
+        properties.renderedLabel = uppercaseLabel.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
 {
+    #annotationDrawControl = null
+    #minimap = null
+    #paths3dLayer = null
+
     constructor(flatmap)
     {
         this._flatmap = flatmap;
         this._map = flatmap.map;
 
-        this._activeFeatures = [];
+        this._activeFeatures = new Set()
         this._selectedFeatureIds = new Map();
         this._currentPopup = null;
         this._infoControl = null;
@@ -146,7 +146,6 @@ export class UserInteractions
         this._modal = false;
 
         // Default colour settings
-
         this.__colourOptions = {colour: true, outline: true};
 
         // Marker placement and interaction
@@ -194,6 +193,29 @@ export class UserInteractions
         // All taxons of connectivity paths are enabled by default
         this.__enabledConnectivityTaxons = new Set(this._flatmap.taxonIdentifiers);
 
+        // Add a minimap if option set
+        if (flatmap.options.minimap) {
+            this.#minimap = new MinimapControl(flatmap, flatmap.options.minimap);
+            this._map.addControl(this.#minimap);
+        }
+
+        // Do we want a fullscreen control?
+        if (flatmap.options.fullscreenControl === true) {
+            this._map.addControl(new maplibregl.FullscreenControl(), 'top-right');
+        }
+
+        // Add navigation controls if option set
+        if (flatmap.options.navigationControl) {
+            const value = flatmap.options.navigationControl;
+            const position = ((typeof value === 'string')
+                           && ['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(value))
+                           ? value : 'bottom-right';
+            this._map.addControl(new NavigationControl(flatmap), position);
+        }
+
+        // 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 +247,17 @@ 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));
-                }
+            if (flatmap.options.annotator) {
+                this._map.addControl(new AnnotatorControl(flatmap));
             }
+
+            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);
+
+        // Add an initially hidden tool for drawing on the map.
+        this.#annotationDrawControl = new AnnotationDrawControl(flatmap, false)
+        this._map.addControl(this.#annotationDrawControl)
 
         // Handle mouse events
 
@@ -307,6 +273,12 @@ this._map.addControl(deckOverlay);
         this.__pan_zoom_enabled = false;
     }
 
+    get minimap()
+    //===========
+    {
+        return this.#minimap
+    }
+
     get pathManager()
     //===============
     {
@@ -346,11 +318,40 @@ this._map.addControl(deckOverlay);
         }
     }
 
+    showAnnotator(visible=true)
+    //=========================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.show(visible)
+        }
+    }
+
+    modifyDrawnAnnotatorFeature(operation, feature)
+    //=============================================
+    {
+        if (this.#annotationDrawControl) {
+            if (operation === 'add') {
+                this.#annotationDrawControl.addFeature(feature)
+            } else if (operation === 'remove') {
+                this.#annotationDrawControl.removeFeature(feature)
+            }
+        }
+    }
+
+    #setPaint(options)
+    //================
+    {
+        this._layerManager.setPaint(options)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setPaint(options)
+        }
+    }
+
     setPaint(options)
     //===============
     {
         this.__colourOptions = options;
-        this._layerManager.setPaint(options);
+        this.#setPaint(options);
     }
 
     getLayers()
@@ -365,6 +366,14 @@ this._map.addControl(deckOverlay);
         this._layerManager.activate(layerId, enable);
     }
 
+    enable3dPaths(enable=true)
+    //========================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.enable(enable)
+        }
+    }
+
     getSystems()
     //==========
     {
@@ -394,19 +403,43 @@ this._map.addControl(deckOverlay);
         return undefined;
     }
 
+    #getFeatureState(feature)
+    //=======================
+    {
+        return this._map.getFeatureState(feature)
+    }
+
+    #removeFeatureState(feature, key)
+    //===============================
+    {
+        this._map.removeFeatureState(feature, key)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.removeFeatureState(feature.id, key)
+        }
+    }
+
+    #setFeatureState(feature, state)
+    //==============================
+    {
+        this._map.setFeatureState(feature, state)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setFeatureState(feature.id, state)
+        }
+    }
+
     enableMapFeature(feature, enable=true)
     //====================================
     {
         if (feature !== undefined) {
-            const state = this._map.getFeatureState(feature);
+            const state = this.#getFeatureState(feature);
             if  ('hidden' in state) {
                 if (enable) {
-                    this._map.removeFeatureState(feature, 'hidden');
+                    this.#removeFeatureState(feature, 'hidden');
                 } else if (!state.hidden) {
-                    this._map.setFeatureState(feature, { 'hidden': true });
+                    this.#setFeatureState(feature, { hidden: true });
                 }
             } else if (!enable) {
-                this._map.setFeatureState(feature, { 'hidden': true });
+                this.#setFeatureState(feature, { hidden: true });
             }
             this.__enableFeatureMarker(feature.id, enable);
         }
@@ -454,11 +487,11 @@ this._map.addControl(deckOverlay);
     //=======================
     {
         if (feature.id) {
-            const state = this._map.getFeatureState(feature);
+            const state = this.#getFeatureState(feature);
             return (state !== undefined
                 && (!('hidden' in state) || !state.hidden));
         }
-        return false;
+        return DRAW_ANNOTATION_LAYERS.includes(feature.layer.id)
     }
 
     featureSelected_(featureId)
@@ -471,7 +504,7 @@ this._map.addControl(deckOverlay);
     //================================
     {
         const ann = this._flatmap.annotation(featureId);
-        if ('sckan' in ann) {
+        if (ann && 'sckan' in ann) {
             const sckanState = this._layerManager.sckanState;
             if (sckanState === 'none'
              || sckanState === 'valid' && !ann.sckan
@@ -488,16 +521,16 @@ this._map.addControl(deckOverlay);
         } else {
             const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
-                const state = this._map.getFeatureState(feature);
+                const state = this.#getFeatureState(feature);
                 if (state !== undefined && (!('hidden' in state) || !state.hidden)) {
-                    this._map.setFeatureState(feature, { 'selected': true });
+                    this.#setFeatureState(feature, { selected: true });
                     this._selectedFeatureIds.set(featureId, 1);
                     result = true;
                 }
             }
         }
         if (result && noSelection) {
-            this._layerManager.setPaint({...this.__colourOptions, dimmed: dim});
+            this.#setPaint({...this.__colourOptions, dimmed: dim});
         }
         return result;
     }
@@ -513,13 +546,13 @@ this._map.addControl(deckOverlay);
             } else {
                 const feature = this.mapFeature(featureId);
                 if (feature !== undefined) {
-                    this._map.removeFeatureState(feature, 'selected');
+                    this.#removeFeatureState(feature, 'selected');
                     this._selectedFeatureIds.delete(+featureId);
                 }
             }
         }
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
+            this.#setPaint({...this.__colourOptions, dimmed: false});
         }
     }
 
@@ -529,28 +562,42 @@ this._map.addControl(deckOverlay);
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
-                this._map.removeFeatureState(feature, 'selected');
+                this.#removeFeatureState(feature, 'selected');
             }
         }
         this._selectedFeatureIds.clear();
-        this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
+        this.#setPaint({...this.__colourOptions, dimmed: false});
     }
 
-    __activateFeature(feature)
-    //========================
+    activateFeature(feature)
+    //======================
     {
         if (feature !== undefined) {
-            this._map.setFeatureState(feature, { active: true });
-            this._activeFeatures.push(feature);
+            this.#setFeatureState(feature, { active: true });
+            this._activeFeatures.add(feature);
+        }
+    }
+
+    activateLineFeatures(lineFeatures)
+    //================================
+    {
+        for (const lineFeature of lineFeatures) {
+            const lineFeatureId = +lineFeature.properties.featureId  // Ensure numeric
+            this.activateFeature(lineFeature)
+            const lineIds = new Set(lineFeatures.map(f => f.properties.featureId))
+            for (const featureId of this.__pathManager.lineFeatureIds(lineIds)) {
+                this.activateFeature(this.mapFeature(featureId))
+            }
         }
     }
 
     resetActiveFeatures_()
     //====================
     {
-        while (this._activeFeatures.length > 0) {
-            this._map.removeFeatureState(this._activeFeatures.pop(), 'active');
+        for (const feature of this._activeFeatures) {
+            this.#removeFeatureState(feature, 'active');
         }
+        this._activeFeatures.clear()
     }
 
     smallestAnnotatedPolygonFeature_(features)
@@ -562,7 +609,7 @@ this._map.addControl(deckOverlay);
         let smallestFeature = null;
         for (const feature of features) {
             if (feature.geometry.type.includes('Polygon')
-             && this._map.getFeatureState(feature)['map-annotation']) {
+             && this.#getFeatureState(feature)['map-annotation']) {
                 const polygon = turf.geometry(feature.geometry.type, feature.geometry.coordinates);
                 const area = turfArea(polygon);
                 if (smallestFeature === null || smallestArea > area) {
@@ -795,7 +842,9 @@ this._map.addControl(deckOverlay);
             tooltip.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
         }
         let renderedLabel;
-        if (('label' in properties || 'hyperlink' in properties)
+        if (('label' in properties
+          || 'hyperlink' in properties
+          || 'user_label' in properties)
                 && (forceLabel || !('tooltip' in properties) || properties.tooltip)) {
             const renderedLabel = getRenderedLabel(properties);
             if ('hyperlink' in properties) {
@@ -837,6 +886,19 @@ this._map.addControl(deckOverlay);
         this.resetActiveFeatures_();
     }
 
+    #renderedFeatures(point)
+    //======================
+    {
+        let features = []
+        if (this.#paths3dLayer) {
+            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
+        }
+        if (features.length === 0) {
+            features = this._map.queryRenderedFeatures(point)
+        }
+        return features.filter(feature => this.__featureEnabled(feature));
+    }
+
     mouseMoveEvent_(event)
     //====================
     {
@@ -855,8 +917,7 @@ this._map.addControl(deckOverlay);
         }
 
         // Get all the features at the current point
-        const features = this._map.queryRenderedFeatures(event.point)
-                             .filter(feature => this.__featureEnabled(feature));
+        const features = this.#renderedFeatures(event.point)
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
             this._lastFeatureModelsMouse = null;
@@ -885,7 +946,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);
         }
@@ -896,19 +957,11 @@ this._map.addControl(deckOverlay);
         if (lineFeatures.length > 0) {
             tooltip = this.lineTooltip_(lineFeatures);
             tooltipFeature = lineFeatures[0];
-            for (const lineFeature of lineFeatures) {
-                const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
-                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.activateLineFeatures(lineFeatures)
         } else {
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
-                                                             || 'label' in feature.properties)
+                                                             || 'label' in feature.properties
+                                                             || 'user_label' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
                                            .sort((a, b) => (a.properties.area - b.properties.area));
@@ -921,6 +974,9 @@ this._map.addControl(deckOverlay);
                     labelledFeatures = groupFeatures;
                 }
                 const feature = labelledFeatures[0];
+                if (feature.properties.user_drawn) {
+                    feature.id = feature.properties.id
+                }
                 tooltip = this.tooltipHtml_(feature.properties);
                 tooltipFeature = feature;
                 if (this._flatmap.options.debug) {  // Do this when Info on and not debug??
@@ -952,7 +1008,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';
@@ -1005,7 +1061,7 @@ this._map.addControl(deckOverlay);
     //=============================
     {
         if (feature !== undefined) {
-            const clickedFeatureId = feature.id;
+            const clickedFeatureId = +feature.id;
             const dim = !('properties' in feature
                        && 'kind' in feature.properties
                        && ['cell-type', 'scaffold', 'tissue'].includes(feature.properties.kind));
@@ -1044,9 +1100,9 @@ this._map.addControl(deckOverlay);
         }
 
         this.__clearActiveMarker();
-        const clickedFeatures = this._map.queryRenderedFeatures(event.point)
-                                    .filter(feature => this.__featureEnabled(feature));
-        if (clickedFeatures.length == 0){
+
+        const clickedFeatures = this.#renderedFeatures(event.point)
+        if (clickedFeatures.length == 0) {
             this.unselectFeatures();
             return;
         }
@@ -1072,25 +1128,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)
     //===================================================
     {
@@ -1128,7 +1178,7 @@ this._map.addControl(deckOverlay);
     //=========================================
     {
         this.__pathManager.enablePathsByType('centreline', enable, force);
-        this._layerManager.setPaint({showCentrelines: enable});
+        this.#setPaint({showCentrelines: enable});
     }
 
     enableSckanPaths(sckanState, enable=true)
@@ -1155,7 +1205,7 @@ this._map.addControl(deckOverlay);
     excludeAnnotated(exclude=false)
     //=============================
     {
-        this._layerManager.setPaint({excludeAnnotated: exclude});
+        this.#setPaint({excludeAnnotated: exclude});
     }
 
     //==============================================================================
@@ -1315,7 +1365,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';