@abi-software/flatmap-viewer 2.3.1-b.1 → 2.3.2-b.2

package/src/flatmap-viewer.js

@@ -180,10 +180,13 @@ class FlatMap
             if (this._userInteractions === null) {
                 this.setupUserInteractions_();
             } else if (this._initialState === null) {
+                this._map.setMinZoom(3.0);
+                this._map.setMaxBounds(null);
+                this._map.setRenderWorldCopies(true);
                 this._bounds = this._map.getBounds();
-                this._map.setMaxBounds(this._bounds);
-                const sw = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[0]);
-                const ne = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[1]);
+                const bounds = this._bounds.toArray();
+                const sw = maplibregl.MercatorCoordinate.fromLngLat(bounds[0]);
+                const ne = maplibregl.MercatorCoordinate.fromLngLat(bounds[1]);
                 this.__normalised_origin = [sw.x, ne.y];
                 this.__normalised_size = [ne.x - sw.x, sw.y - ne.y];
                 if ('state' in this._options) {
@@ -269,7 +272,7 @@ class FlatMap
     //=========
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.pathways.pathTypes();
+            return this._userInteractions.pathManager.pathTypes();
         }
     }
 
@@ -284,7 +287,7 @@ class FlatMap
     //===============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.enablePath(pathType, enable);
+            this._userInteractions.enablePathsByType(pathType, enable);
         }
     }
 
@@ -299,7 +302,7 @@ class FlatMap
     //======================================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.enableSckanPath(sckanState, enable);
+            this._userInteractions.enableSckanPaths(sckanState, enable);
         }
     }
 
@@ -521,7 +524,7 @@ class FlatMap
         }
         if (featureIds.length == 0 && this._userInteractions !== null) {
             // We still haven't found a feature, so check connectivity
-            featureIds.extend(this._userInteractions.pathwaysFeatureIds(anatomicalIds));
+            featureIds.extend(this._userInteractions.pathFeatureIds(anatomicalIds));
         }
         return featureIds;
     }
@@ -805,7 +808,7 @@ class FlatMap
     /**
      * Get a list of a FC flatmap's systems.
      *
-     * @return {Array.Object.<{name: string, colour: string}>}  An array with system details
+     * @return {Array.Object.<{id: string, name: string, colour: string, enabled: boolean}>}  An array with system details
      */
     getSystems()
     //==========
@@ -816,15 +819,15 @@ class FlatMap
     }
 
     /**
-     * @param {string}  systemName  The name of the system to enable
+     * @param {string}  systemId  The identifier of the system to enable
      * @param {boolean}  enable  Show or hide the system. Defaults to ``true`` (show)
      *
      */
-    enableSystem(systemName, enable=true)
+    enableSystem(systemId, enable=true)
     //===================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.enableSystem(systemName, enable);
+            return this._userInteractions.enableSystem(systemId, enable);
         }
     }
 

package/src/interactions.js

@@ -35,17 +35,17 @@ import polylabel from 'polylabel';
 
 import {Annotator} from './annotation';
 import {LayerManager} from './layers';
-import {PATHWAYS_LAYER, Pathways} from './pathways';
-import {COLOUR_ERROR, VECTOR_TILES_SOURCE} from './styling';
+import {PATHWAYS_LAYER, PathManager} from './pathways';
+import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
 import {BackgroundControl, LayerControl, NerveControl,
-        PathControl, SCKANControl} from './controls/controls';
+        SCKANControl} from './controls/controls';
+import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
 import {SystemsControl} from './controls/systems';
 
-import * as pathways from './pathways';
 import * as utils from './utils';
 
 //==============================================================================
@@ -130,18 +130,21 @@ export class UserInteractions
 
         this._layerManager = new LayerManager(flatmap);
 
+        this.__featureEnabledCount = new Map(Array.from(this._flatmap.annotations.keys()).map(k => [+k, 0]));
+
+        const featuresEnabled = flatmap.options.style !== 'functional';
+
         // Path visibility is either controlled externally or by a local control
+        // FC path visiblitity is determined by system visiblity
 
-        this._pathways = new Pathways(flatmap);
+        this.__pathManager = new PathManager(flatmap, this, featuresEnabled);
 
         // The path types in this map
-        const mapPathTypes = this._pathways.pathTypes();
+        const mapPathTypes = this.__pathManager.pathTypes();
 
-        // Disable paths that are not initially shown
+        // Set initial enabled state of paths
         for (const path of mapPathTypes) {
-            if ('enabled' in path && !path.enabled) {
-                this.enablePath(path.type, false);
-            }
+            this.__pathManager.enablePathsByType(path.type, path.enabled, true);
         }
 
         // Add annotation capability
@@ -153,7 +156,7 @@ export class UserInteractions
 
         // Note features that are FC systems
 
-        this.__systemsManager = new SystemsManager(this._flatmap, this);
+        this.__systemsManager = new SystemsManager(this._flatmap, this, featuresEnabled);
 
         // Add various controls when running standalone
 
@@ -175,9 +178,9 @@ export class UserInteractions
             this._map.addControl(new LayerControl(flatmap, this._layerManager));
 
             // Add a control for nerve centrelines if they are present
-            if (this._pathways.haveCentrelines) {
+            if (this.__pathManager.haveCentrelines) {
                 this._map.addControl(new NerveControl(flatmap, this._layerManager, {showCentrelines: false}));
-                this.enableCentrelines(false);
+                this.enableCentrelines(false, true);
             }
 
             // SCKAN path and SYSTEMS controls for FC maps
@@ -201,10 +204,10 @@ export class UserInteractions
         this.__pan_zoom_enabled = false;
     }
 
-    get pathways()
-    //============
+    get pathManager()
+    //===============
     {
-        return this._pathways;
+        return this.__pathManager;
     }
 
     getState()
@@ -300,32 +303,64 @@ export class UserInteractions
         return this.__systemsManager.systems;
     }
 
-    enableSystem(systemName, enable=true)
-    //===================================
+    enableSystem(systemId, enable=true)
+    //=================================
     {
-        this.__systemsManager.enable(systemName, enable);
+        this.__systemsManager.enable(systemId, enable);
     }
 
-    enableFeatureWithChildren(featureId, enable=true)
-    //===============================================
+    mapFeature(featureId)
+    //===================
+    {
+        const ann = this._flatmap.annotation(featureId);
+        if (ann !== undefined) {
+            return {
+                id: featureId,
+                source: VECTOR_TILES_SOURCE,
+                sourceLayer: (this._flatmap.options.separateLayers
+                             ? `${ann['layer']}_${ann['tile-layer']}`
+                             : ann['tile-layer']).replaceAll('/', '_'),
+                children: ann.children || []
+            };
+        }
+        return undefined;
+    }
+
+    enableMapFeature(feature, enable=true)
+    //====================================
     {
-        const feature = this.mapFeature(featureId);
         if (feature !== undefined) {
-            this.enableFeature(feature, enable);
-            for (const childFeatureId of feature.children) {
-                this.enableFeatureWithChildren(childFeatureId, enable);
+            if (enable) {
+                this._map.removeFeatureState(feature, 'hidden');
+            } else {
+                this._map.setFeatureState(feature, { 'hidden': true });
             }
+            this.__enableFeatureMarker(feature.id, enable);
         }
     }
 
-    __enableFeatureWithParents(featureId, enable=true)
+    enableFeature(featureId, enable=true, force=false)
     //================================================
+    {
+        const enabledCount = this.__featureEnabledCount.get(+featureId)
+        if (force || enable && enabledCount === 0 || !enable && enabledCount == 1) {
+            this.enableMapFeature(this.mapFeature(featureId), enable)
+        }
+        if (force) {
+            this.__featureEnabledCount.set(+featureId, enable ? 1 : 0);
+        } else {
+            this.__featureEnabledCount.set(+featureId, enabledCount + (enable ? 1 : -1));
+        }
+    }
+
+    enableFeatureWithChildren(featureId, enable=true, force=false)
+    //============================================================
     {
         const feature = this.mapFeature(featureId);
         if (feature !== undefined) {
-            this.enableFeature(feature, enable);
-            for (const childFeatureId of feature.parents) {
-                this.__enableFeatureWithParents(childFeatureId, enable);
+            this.enableFeature(featureId, enable, force);
+            for (const childFeatureId of feature.children) {
+                this.enableFeatureWithChildren(childFeatureId, enable, force);
             }
         }
     }
@@ -342,19 +377,6 @@ export class UserInteractions
         }
     }
 
-    enableFeature(feature, enable=true)
-    //=================================
-    {
-        if (feature !== undefined) {
-            if (enable) {
-                this._map.removeFeatureState(feature, 'hidden');
-            } else {
-                this._map.setFeatureState(feature, { 'hidden': true });
-            }
-            this.__enableFeatureMarker(feature.id, enable);
-        }
-    }
-
     __featureEnabled(feature)
     //=======================
     {
@@ -363,23 +385,6 @@ export class UserInteractions
             && (!('hidden' in state) || !state.hidden));
     }
 
-    mapFeature(featureId)
-    //===================
-    {
-        const ann = this._flatmap.annotation(featureId);
-        if (ann !== undefined) {
-            return {
-                id: featureId,
-                source: VECTOR_TILES_SOURCE,
-                sourceLayer: (this._flatmap.options.separateLayers
-                             ? `${ann['layer']}_${ann['tile-layer']}`
-                             : ann['tile-layer']).replaceAll('/', '_'),
-                children: ann.children || []
-            };
-        }
-        return undefined;
-    }
-
     featureSelected_(featureId)
     //=========================
     {
@@ -507,7 +512,7 @@ export class UserInteractions
         this.__clearModal();
         this.__clearActiveMarker();
         this.unselectFeatures();
-        this.__enablePathFeatures(this._pathways.allFeatureIds(), true);
+        this.__enablePathFeatures(this.__pathManager.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)
@@ -531,7 +536,7 @@ export class UserInteractions
                 if (annotation) {
                     this.highlightFeature_(featureId);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
+                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                             this.highlightFeature_(pathFeatureId);
                         }
                     }
@@ -555,7 +560,7 @@ export class UserInteractions
                 if (annotation) {
                     this.selectFeature(featureId);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
+                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                             this.selectFeature(pathFeatureId);
                         }
                     }
@@ -609,7 +614,7 @@ export class UserInteractions
                     }
                     bbox = expandBounds(bbox, annotation.bounds);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
+                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                             if (select) {
                                 this.selectFeature(pathFeatureId);
                             } else if (highlight) {
@@ -751,7 +756,7 @@ export class UserInteractions
     {
         if (feature.sourceLayer === PATHWAYS_LAYER) {  // I suspect this is never true as source layer
                                                        // names are like `neural_routes_pathways`
-            return this._flatmap.featureEvent(type, this._pathways.pathProperties(feature));
+            return this._flatmap.featureEvent(type, this.__pathManager.pathProperties(feature));
         } else if ('properties' in feature) {
             return this._flatmap.featureEvent(type, feature.properties);
         }
@@ -826,13 +831,15 @@ export class UserInteractions
         const lineFeatures = features.filter(feature => ('centreline' in feature.properties
                                                       || ('type' in feature.properties
                                                         && feature.properties.type.startsWith('line')) ));
+        let tooltipFeature = null;
         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._pathways.lineFeatureIds(lineIds)) {
+                for (const featureId of this.__pathManager.lineFeatureIds(lineIds)) {
                     if (+featureId !== lineFeatureId) {
                         this.__activateFeature(this.mapFeature(featureId));
                     }
@@ -855,6 +862,7 @@ export class UserInteractions
                 }
                 const feature = labelledFeatures[0];
                 tooltip = this.tooltipHtml_(feature.properties);
+                tooltipFeature = feature;
                 if (this._flatmap.options.debug) {  // Do this when Info on and not debug??
                     const debugProperties = [
                         'featureId',
@@ -893,11 +901,11 @@ export class UserInteractions
         if (displayInfo || this._flatmap.options.debug) {
             this._infoControl.show(info);
         }
-        this.__showToolTip(tooltip, event.lngLat);
+        this.__showToolTip(tooltip, event.lngLat, tooltipFeature);
     }
 
-    __showToolTip(html, lngLat)
-    //=========================
+    __showToolTip(html, lngLat, feature=null)
+    //=======================================
     {
         // Show a tooltip
         if (html !== '') {
@@ -911,7 +919,10 @@ export class UserInteractions
                 const pt = turf.point(lngLat.toArray());
                 const gps = turfProjection.toMercator(pt);
                 const coords = gps.geometry.coordinates;
-                html = `<span>${JSON.stringify(coords)}</span><br/>${html}`;
+                const header = (feature === null)
+                             ? JSON.stringify(coords)
+                             : `${JSON.stringify(coords)} (${feature.id} ${feature.properties['id']})`;
+                html = `<span>${header}</span><br/>${html}`;
             }
             this._tooltip
                 .setLngLat(lngLat)
@@ -1017,57 +1028,65 @@ export class UserInteractions
     //================================
     {
         if ('nerveId' in feature.properties) {
-            for (const featureId of this._pathways.nerveFeatureIds(feature.properties.nerveId)) {
+            const nerveId = feature.properties.nerveId;
+            if (nerveId !== feature.id) {
+                this.__activateFeature(this.mapFeature(nerveId));
+            }
+            for (const featureId of this.__pathManager.nerveFeatureIds(nerveId)) {
                 this.__activateFeature(this.mapFeature(featureId));
             }
         }
         if ('nodeId' in feature.properties) {
-            for (const featureId of this._pathways.nodeFeatureIds(feature.properties.nodeId)) {
+            for (const featureId of this.__pathManager.nodeFeatureIds(feature.properties.nodeId)) {
                 this.__activateFeature(this.mapFeature(featureId));
             }
         }
     }
 
-    __enablePathFeatures(featureIds, enable)
-    //======================================
+    enablePath(pathId, enable=true)
+    //=============================
     {
-        for (const featureId of featureIds) {
-            this.enableFeature(this.mapFeature(featureId), enable);
-        }
+        this.__pathManager.enablePath(pathId, enable);
     }
 
-    enablePath(pathType, enable=true)
-    //===============================
+    enablePathsBySystem(system, enable=true, force=false)
+    //===================================================
     {
-        this.__enablePathFeatures(this._pathways.typeFeatureIds(pathType), enable);
+        this.__pathManager.enablePathsBySystem(system, enable, force);
     }
 
-    pathwaysFeatureIds(externalIds)
-    //=============================
+    enablePathsByType(pathType, enable=true)
+    //======================================
+    {
+        this.__pathManager.enablePathsByType(pathType, enable);
+    }
+
+    pathFeatureIds(externalIds)
+    //=========================
     {
         const featureIds = new utils.List();
-        featureIds.extend(this._pathways.connectivityModelFeatureIds(externalIds));
-        featureIds.extend(this._pathways.pathModelFeatureIds(externalIds));
+        featureIds.extend(this.__pathManager.connectivityModelFeatureIds(externalIds));
+        featureIds.extend(this.__pathManager.pathModelFeatureIds(externalIds));
         return featureIds;
     }
 
     nodePathModels(nodeId)
     //====================
     {
-        return this._pathways.nodePathModels(nodeId);
+        return this.__pathManager.nodePathModels(nodeId);
     }
 
-    enableCentrelines(show=true)
-    //==========================
+    enableCentrelines(enable=true, force=false)
+    //=========================================
     {
-        this.enablePath('centreline', show);
-        this._layerManager.setPaint({showCentrelines: show});
+        this.__pathManager.enablePathsByType('centreline', enable, force);
+        this._layerManager.setPaint({showCentrelines: enable});
     }
 
-    enableSckanPath(sckanState, enable=true)
-    //======================================
+    enableSckanPaths(sckanState, enable=true)
+    //=======================================
     {
-        this._layerManager.enableSckanPath(sckanState, enable);
+        this._layerManager.enableSckanPaths(sckanState, enable);
     }
 
     //==============================================================================

package/src/layers.js

@@ -165,6 +165,9 @@ class MapFeatureLayers extends MapStylingLayers
             this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
             this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
             this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
+
+            this.__addStyleLayer(style.PathHighlightLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathDashHighlightLayer, PATHWAYS_LAYER);
         }
     }
 
@@ -331,8 +334,8 @@ export class LayerManager
         }
     }
 
-    enableSckanPath(sckanState, enable=true)
-    //======================================
+    enableSckanPaths(sckanState, enable=true)
+    //=======================================
     {
         const currentState = this.__layerOptions.sckan;
         const validEnabled = ['valid', 'all'].indexOf(currentState) >= 0;