@abi-software/flatmap-viewer 2.3.2-b.4 → 2.3.3-b.2

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.2-b.4",
+  "version": "2.3.3-b.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/annotation.js

@@ -475,6 +475,8 @@ export class Annotator
             let label = '';
             if (feature.properties.models) {
                 label = ` -- ${feature.properties.label.split('\n')[0]} (${feature.properties.models})`;
+            } else if (feature.properties.label) {
+                label = ` -- ${feature.properties.label.split('\n')[0]}`;
             }
             featureList.push(`<option value="${feature.id}" ${selected}>${annotated ? '*' : '&nbsp;'} ${feature.properties.id} -- ${feature.properties.kind}${label}</option>`);
             featureProperties.set(+feature.id, feature.properties);

package/src/controls/controls.js

@@ -526,6 +526,73 @@ 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/controls/info.js

@@ -194,8 +194,8 @@ export class InfoControl
             const featureIds = [];
             const displayFeatures = [];
             for (const feat of featureList) {
-                if (featureIds.indexOf(feat['id']) < 0) {
-                    featureIds.push(feat['id']);
+                if (featureIds.indexOf(feat.id) < 0) {
+                    featureIds.push(feat.id);
                     const displayFeat = {};
                     displayProperties.forEach(prop => {
                         if (prop === 'properties') {

package/src/flatmap-viewer.js

@@ -77,6 +77,7 @@ class FlatMap
         this.__datasetToFeatureIds = new Map();
         this.__modelToFeatureIds = new Map();
         this.__mapSourceToFeatureIds = new Map();
+
         for (const [featureId, annotation] of Object.entries(mapDescription.annotations)) {
             this.__addAnnotation(featureId, annotation);
             this.__searchIndex.indexMetadata(featureId, annotation);
@@ -176,7 +177,7 @@ class FlatMap
         this._initialState = null;
         this._minimap = null;
 
-        this._map.on('idle', () => {
+        this._map.on('load', () => {
             if (this._userInteractions === null) {
                 this.setupUserInteractions_();
             } else if (this._initialState === null) {

package/src/interactions.js

@@ -40,7 +40,7 @@ import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
-import {BackgroundControl, LayerControl, NerveControl,
+import {AnnotatedControl, BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
@@ -189,6 +189,7 @@ export class UserInteractions
             if (flatmap.options.style === 'functional') {
                 this._map.addControl(new SystemsControl(flatmap, this.__systemsManager.systems));
                 this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
+                this._map.addControl(new AnnotatedControl(this, flatmap.options.layerOptions));
             }
         }
 
@@ -654,10 +655,11 @@ export class UserInteractions
                 this._currentPopup.remove();
             }
 
-            // Highlight the feature
-
-            this.unselectFeatures();
-            this.selectFeature(featureId);
+            if (!(options && options.preserveSelection)) {
+                // Highlight the feature
+                this.unselectFeatures();
+                this.selectFeature(featureId);
+            }
 
             // Find the pop-up's postion
 
@@ -830,7 +832,7 @@ export class UserInteractions
         let info = '';
         let tooltip = '';
         if (displayInfo) {
-            if (!'tooltip' in features[0].properties) {
+            if (!('tooltip' in features[0].properties)) {
                 this.__activateFeature(features[0]);
             }
             info = this._infoControl.featureInformation(features, event.lngLat);
@@ -854,8 +856,7 @@ export class UserInteractions
             }
         } else {
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
-                                                             || 'label' in feature.properties
-                                                             || 'node' in feature.properties)
+                                                             || 'label' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
                                            .sort((a, b) => (a.properties.area - b.properties.area));
@@ -895,7 +896,9 @@ export class UserInteractions
                         //htmlList.push(`<span class="info-name">Scale:</span>`);
                         //htmlList.push(`<span class="info-value">${feature.properties.scale}</span>`);
                     }
-                    info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
+                    if (!this._flatmap.options.debug) {
+                        info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
+                    }
                 }
                 this.__activateFeature(feature);
                 this.__activateRelatedFeatures(feature);
@@ -905,7 +908,7 @@ export class UserInteractions
             }
         }
 
-        if (displayInfo || this._flatmap.options.debug) {
+        if (info !== '') {
             this._infoControl.show(info);
         }
         this.__showToolTip(tooltip, event.lngLat, tooltipFeature);
@@ -1096,6 +1099,12 @@ export class UserInteractions
         this._layerManager.enableSckanPaths(sckanState, enable);
     }
 
+    excludeAnnotated(exclude=false)
+    //=============================
+    {
+        this._layerManager.setPaint({excludeAnnotated: exclude});
+    }
+
     //==============================================================================
 
     // Marker handling
@@ -1179,6 +1188,9 @@ export class UserInteractions
                 this.__markerIdByMarker.set(marker, markerId);
                 this.__markerIdByFeatureId.set(+featureId, markerId);
                 this.__annotationByMarkerId.set(markerId, annotation);
+                if (!this.__featureEnabled(this.mapFeature(+featureId))) {
+                    markerElement.style.visibility = 'hidden';
+                }
             }
         }
         if (markerId === -1) {

package/src/layers.js

@@ -123,7 +123,6 @@ class MapFeatureLayers extends MapStylingLayers
                 this.__addStyleLayer(style.FeatureLineLayer);
                 this.__addStyleLayer(style.FeatureBorderLayer);
                 this.__addStyleLayer(style.CentrelineNodeFillLayer);
-                this.__addStyleLayer(style.CentrelineNodeBorderLayer);
             }
             this.__addPathwayStyleLayers();
             if (vectorFeatures) {

package/src/styling.js

@@ -35,7 +35,7 @@ const COLOUR_ANNOTATED = '#0F0';
 const COLOUR_SELECTED  = '#0F0';
 const COLOUR_HIDDEN    = '#D8D8D8';
 
-const CENTRELINE_ACTIVE = '#444';
+const CENTRELINE_ACTIVE = '#888';
 const CENTRELINE_COLOUR = '#CCC';
 
 const FEATURE_SELECTED_BORDER = 'black';
@@ -161,7 +161,7 @@ export class FeatureFillLayer extends VectorStyleLayer
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], 0.1,
-                ['boolean', ['feature-state', 'selected'], false], 0.7,
+                ['boolean', ['feature-state', 'selected'], false], 0.5,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.7,
@@ -418,23 +418,24 @@ export class AnnotatedPathLayer extends VectorStyleLayer
 
     paintStyle(options={}, changes=false)
     {
-        const dimmed = 'dimmed' in options && options.dimmed;
+        const exclude = 'excludeAnnotated' in options && options.excludeAnnotated;
         const paintStyle = {
             'line-color': COLOUR_ANNOTATED,
             'line-dasharray': [5, 0.5, 3, 0.5],
             'line-opacity': [
                 'case',
                     ['boolean', ['feature-state', 'hidden'], false], 0.05,
-                        ['boolean', ['feature-state', 'annotated'], false],
-                        (dimmed ? 0.1 : 0.8),
+                    ['boolean', ['feature-state', 'annotated'], false],
+                        (exclude ? 0.05 : 0.8),
                     0.6
                 ],
             'line-width': [
                 'let',
                 'width',
                     ['case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.0,
                     ['boolean', ['feature-state', 'annotated'], false],
-                        ['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
+                        exclude ? 0.0 : (['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]]),
                         0.0
                     ],
                 STROKE_INTERPOLATION
@@ -498,15 +499,20 @@ export class PathLineLayer extends VectorStyleLayer
     paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
+        const exclude = 'excludeAnnotated' in options && options.excludeAnnotated;
         const paintStyle = {
             'line-color': [
-                'case',
-                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
-                ['==', ['get', 'type'], 'bezier'], 'red',
-                ['==', ['get', 'kind'], 'unknown'], '#888',
-                ...PATH_STYLE_RULES,
-                '#888'
+                'let', 'active', ['to-number', ['feature-state', 'active'], 0],
+                [ 'case',
+                    ['all',
+                        ['==', ['var', 'active'], 0],
+                        ['boolean', ['feature-state', 'selected'], false],
+                    ], COLOUR_SELECTED,
+                    ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
+                    ['==', ['get', 'type'], 'bezier'], 'red',
+                    ...PATH_STYLE_RULES,
+                    '#888'
+                ]
             ],
             'line-opacity': this.__highlight ? [
                 'case',
@@ -544,6 +550,7 @@ export class PathLineLayer extends VectorStyleLayer
                         ['boolean', ['feature-state', 'active'], false], 0.0,
                         0.6
                     ],
+                    ['case', ['boolean', ['feature-state', 'annotated'], false], (exclude ? 0.0 : 1.0), 1.0],
                     ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]
                 ],
                 STROKE_INTERPOLATION
@@ -622,7 +629,7 @@ class CentrelineLayer extends VectorStyleLayer
                     ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
-                0.8
+                (this.__type == 'edge') ? 0.4 : 0.8
             ],
             'line-width': [
                 'let',
@@ -648,7 +655,7 @@ class CentrelineLayer extends VectorStyleLayer
             ],
             'paint': this.paintStyle(options),
             'layout': {
-                'line-cap': 'square',
+                'line-cap': 'round',
                 'line-join': 'bevel'
             }
         };
@@ -688,8 +695,13 @@ export class CentrelineNodeFillLayer extends VectorStyleLayer
     {
         const showNodes = options.showCentrelines || false;
         const paintStyle = {
-                'fill-color': '#AFA202',
-                'fill-opacity': showNodes ? 0.7 : 0.01
+                'fill-color': [
+                    'case',
+                    ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                    ['boolean', ['feature-state', 'active'], false], CENTRELINE_ACTIVE,
+                    CENTRELINE_COLOUR
+                ],
+                'fill-opacity': showNodes ? 0.8 : 0.01
             }
         return super.changedPaintStyle(paintStyle, changes);
     }
@@ -723,9 +735,14 @@ export class CentrelineNodeBorderLayer extends VectorStyleLayer
     {
         const showNodes = options.showCentrelines || false;
         const paintStyle = {
-                'line-color': '#AFA202',
-                'line-opacity': showNodes ? 0.7 : 0.01,
-                'line-width': 0.5
+                'line-color': '#000',
+                'line-opacity': showNodes ? 0.1 : 0.01,
+                'line-width': [
+                    'let',
+                    'width',
+                        0.2,
+                        STROKE_INTERPOLATION
+                ]
             }
         return super.changedPaintStyle(paintStyle, changes);
     }
@@ -769,8 +786,8 @@ export class FeatureNerveLayer extends VectorStyleLayer
                 'line-color': [
                     'case',
                     ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
-                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
+                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     '#888'
                 ],
                 'line-opacity': [
@@ -852,7 +869,41 @@ export class NervePolygonFill extends VectorStyleLayer
         super(id, 'nerve-fill', sourceLayer);
     }
 
-    style(options)
+    paintStyle(options={}, changes=false)
+    {
+        const dimmed = 'dimmed' in options && options.dimmed;
+        const paintStyle = {
+            'fill-color': [
+                'let', 'active', ['to-number', ['feature-state', 'active'], 0],
+                [ 'case',
+                    ['all',
+                        ['==', ['var', 'active'], 0],
+                        ['==', ['get', 'type'], 'arrow'],
+                        ['boolean', ['feature-state', 'selected'], false]
+                    ], COLOUR_SELECTED,
+                    ['==', ['get', 'kind'], 'bezier-end'], 'red',
+                    ['==', ['get', 'kind'], 'bezier-control'], 'green',
+                    ...PATH_STYLE_RULES,
+                    'white'
+                ]
+            ],
+            'fill-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                ['boolean', ['feature-state', 'selected'], false], 0.8,
+                ['boolean', ['feature-state', 'active'], false], 0.9,
+                ['==', ['get', 'type'], 'bezier'], 0.9,
+                ['any',
+                    ['==', ['get', 'type'], 'arrow'],
+                    ['==', ['get', 'type'], 'junction']
+                ], dimmed ? 0.1 : 0.5,
+                0.01
+            ]
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options={})
     {
         return {
             ...super.style(),
@@ -861,27 +912,14 @@ export class NervePolygonFill extends VectorStyleLayer
                 'all',
                 ['==', '$type', 'Polygon'],
                 ['any',
+                    ['==', 'type', 'arrow'],
                     ['==', 'type', 'bezier'],
                     ['==', 'type', 'junction'],
                     ['==', 'type', 'nerve'],
                     ['==', 'type', 'nerve-section']
                 ]
             ],
-            'paint': {
-                'fill-color': [
-                    'case',
-                    ['==', ['get', 'kind'], 'bezier-end'], 'red',
-                    ['==', ['get', 'kind'], 'bezier-control'], 'green',
-                    ...PATH_STYLE_RULES,
-                    'white'
-                ],
-                'fill-opacity': [
-                    'case',
-                    ['==', ['get', 'type'], 'bezier'], 0.9,
-                    ['==', ['get', 'type'], 'junction'], 0.4,
-                    0.01
-                ]
-            }
+            'paint': this.paintStyle(options)
         };
     }
 }