@abi-software/flatmap-viewer 2.2.1-beta.8 → 2.2.2-beta.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.2.1-beta.8``
+* ``npm install @abi-software/flatmap-viewer@2.2.2-beta.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.1-beta.8",
+  "version": "2.2.2-beta.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/controls.js

@@ -75,7 +75,7 @@ export class NavigationControl
 
 //==============================================================================
 
-export class NerveKey
+export class PathControl
 {
     constructor(flatmap)
     {
@@ -102,10 +102,13 @@ export class NerveKey
         this._legend.className = 'flatmap-nerve-grid';
 
         const innerHTML = [];
+        innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><input id="path-all-paths" type="checkbox" checked/><div class="nerve-line"></div>`);
         for (const path of pathways.PATH_TYPES) {
-            innerHTML.push(`<div type="${path.type}">${path.label}</div><div type="${path.type}" class="nerve-line nerve-${path.type}"></div>`);
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><input id="path-${path.type}" type="checkbox" checked/><div class="nerve-line nerve-${path.type}"></div>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
+        this.__checkedCount = pathways.PATH_TYPES.length;
+        this.__halfCount = Math.trunc(this.__checkedCount/2);
 
         this._button = document.createElement('button');
         this._button.id = 'nerve-key-button';
@@ -114,7 +117,7 @@ export class NerveKey
         this._button.setAttribute('type', 'button');
         this._button.setAttribute('aria-label', 'Nerve paths legend');
         this._button.setAttribute('legend-visible', 'false');
-        this._button.textContent = 'LGD';
+        this._button.textContent = 'PTH';
         this._container.appendChild(this._button);
 
         this._container.addEventListener('click', this.onClick_.bind(this));
@@ -140,10 +143,42 @@ export class NerveKey
                 this._legend = this._container.removeChild(this._legend);
                 this._button.setAttribute('legend-visible', 'false');
             }
-        } else {
-            const pathType = event.target.getAttribute('type');
-            if (pathType) {
-                this._flatmap.showPaths(pathType);
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'path-all-paths') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = pathways.PATH_TYPES.length;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const path of pathways.PATH_TYPES) {
+                    const pathCheckbox = document.getElementById(`path-${path.type}`);
+                    if (pathCheckbox) {
+                        pathCheckbox.checked = event.target.checked;
+                        this._flatmap.enablePath(path.type, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('path-')) {
+                const pathType = event.target.id.substring(5);
+                this._flatmap.enablePath(pathType, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allPathsCheckbox = document.getElementById('path-all-paths');
+                if (this.__checkedCount === 0) {
+                    allPathsCheckbox.checked = false;
+                    allPathsCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === pathways.PATH_TYPES.length) {
+                    allPathsCheckbox.checked = true;
+                    allPathsCheckbox.indeterminate = false;
+                } else {
+                    allPathsCheckbox.indeterminate = true;
+                }
             }
         }
         event.stopPropagation();
@@ -151,46 +186,3 @@ export class NerveKey
 }
 
 //==============================================================================
-
-export class PathControl
-{
-    constructor(flatmap)
-    {
-        this._flatmap = flatmap;
-        this._map = undefined;
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return 'top-right';
-    }
-
-    onAdd(map)
-    //========
-    {
-        this._map = map;
-        this._container = document.createElement('div');
-        this._container.className = 'maplibregl-ctrl';
-        this._container.id = 'flatmap-path-control';
-        this._container.innerHTML = `<button class="control-button" id="path-control-button"
-                                      type="button" title="Show/hide paths" aria-label="Show/hide paths">PTH</button>`;
-        this._container.onclick = this.onClick_.bind(this);
-        return this._container;
-    }
-
-    onRemove()
-    //========
-    {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
-    }
-
-    onClick_(event)
-    //=============
-    {
-        this._flatmap.togglePaths();
-    }
-}
-
-//==============================================================================

package/src/flatmap-viewer.js

@@ -283,12 +283,27 @@ class FlatMap
         return pathways.PATH_TYPES;
     }
 
+    /**
+     * Hide or show paths of a given type.
+     *
+     * @param      {string}   pathType The path type
+     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
+     *                                       of the type otherwise only hide the paths
+     */
+    enablePath(pathType, enable=true)
+    //===============================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.enablePath(pathType, enable);
+        }
+    }
+
     /**
      * Hide or show all paths except those of the given type.
      *
      * @param      {string|Array.<string>}   pathTypes The path type(s)
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the path
-     *                                       type(s) otherwise only hide the type(s)
+     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
+     *                                       of the type(s) otherwise only hide the paths
      */
     showPaths(pathTypes, enable=true)
     //===============================

package/src/interactions.js

@@ -37,7 +37,7 @@ import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
 import {PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {NerveKey, PathControl} from './controls.js';
+import {PathControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
@@ -152,10 +152,6 @@ export class UserInteractions
             // Add controls to manage our pathways
 
             this._map.addControl(new PathControl(flatmap));
-
-            // Add a key showing nerve types
-
-            this._map.addControl(new NerveKey(flatmap));
         }
 
         // Manage our layers
@@ -649,7 +645,10 @@ export class UserInteractions
                && !('labelled' in properties)) {
                 let tooltip = '';
                 const label = properties.label;
-                tooltips.push((label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>"));
+                const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
+                if (!tooltips.includes(cleanLabel)) {
+                    tooltips.push(cleanLabel);
+                }
             }
         }
         if (tooltips.length === 0) {
@@ -814,11 +813,17 @@ export class UserInteractions
                     }
                     info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
                 }
-                this.activateFeature_(feature);
                 if ('nerveId' in feature.properties) {
+                    if (feature.properties.active) {
+                        this.activateFeature_(feature);
+                    } else {
+                        tooltip = '';
+                    }
                     if (feature.properties.nerveId !== feature.properties.featureId) {
                         this.activateNerveFeatures_(feature.properties.nerveId);
                     }
+                } else {
+                    this.activateFeature_(feature);
                 }
                 if ('hyperlink' in feature.properties) {
                     this._map.getCanvas().style.cursor = 'pointer';
@@ -910,6 +915,12 @@ export class UserInteractions
         }
     }
 
+    enablePath(pathType, enable=true)
+    //===============================
+    {
+        this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
+    }
+
     showPaths(pathTypes, enable=true)
     //===============================
     {
@@ -919,10 +930,10 @@ export class UserInteractions
 
         if (Array.isArray(pathTypes)) {
             for (const pathType of pathTypes) {
-                this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
+                this.enablePath(pathType, enable);
             }
         } else {
-            this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathTypes));
+            this.enablePath(pathTypes, enable);
         }
 
         this._disabledPathFeatures = true;

package/src/styling.js

@@ -263,7 +263,7 @@ export class FeatureLineLayer extends VectorStyleLayer
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['has', 'colour'], ['get', 'colour'],
-                ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
+                ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['==', ['get', 'type'], 'network'], '#AFA202',
                 ['has', 'centreline'], '#888',
                 ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
@@ -454,7 +454,8 @@ export class FeatureNerveLayer extends VectorStyleLayer
                     ['boolean', ['feature-state', 'active'], false], '#222',
                     ['boolean', ['feature-state', 'selected'], false], 'red',
                     ['boolean', ['feature-state', 'hidden'], false], '#CCC',
-                    '#888'
+                    ['boolean', ['get', 'active'], false], '#888',
+                    '#FFF'
                 ],
                 'line-opacity': [
                     'case',

package/static/flatmap-viewer.css

@@ -176,7 +176,7 @@ li.flatmap-contextmenu-item:hover {
 .flatmap-nerve-grid {
     margin-top: 10px;
     display: grid;
-    grid-template-columns: 4fr 1.1fr;
+    grid-template-columns: 3fr 0.2fr 0.8fr;
     column-gap: 10px;
     row-gap: 0.2em;
     width: 300px;
@@ -184,10 +184,16 @@ li.flatmap-contextmenu-item:hover {
     cursor: pointer;
     text-align: left;
 }
-.nerve-line {
-    margin: 5px 0;
+.flatmap-nerve-grid input {
+    height:  1.1em;
+}
+.flatmap-nerve-grid .nerve-line {
+    margin: 8px 0;
     height: 3px;
 }
+label[for=path-all-paths] {
+    font-weight: bold;
+}
 .nerve-cns {
     background: #9B1FC1;
 }