@abi-software/flatmap-viewer 2.2.11-devel.1 → 2.2.12-b.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.9``
+* ``npm install @abi-software/flatmap-viewer@2.2.12-b.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.11-devel.1",
+  "version": "2.2.12-b.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -23,7 +23,7 @@
     "@turf/helpers": "^6.1.4",
     "@turf/projection": "^6.5.0",
     "bezier-js": "^6.1.0",
-    "maplibre-gl": ">=1.15.3",
+    "maplibre-gl": ">=2.4.0",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

package/src/controls.js

@@ -22,8 +22,6 @@ limitations under the License.
 
 //==============================================================================
 
-// Needed for Webpack
-import zoomInButton from '../static/images/zoom-in-button.png'
 
 //==============================================================================
 
@@ -119,15 +117,20 @@ export class PathControl
 
         const innerHTML = [];
         innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><div class="nerve-line"></div><input id="path-all-paths" type="checkbox" checked/>`);
+        this.__checkedCount = 0;
         for (const path of this.__pathTypes) {
-            // need to set style background instead of class...
-            // background: #2A62F6;
-            // background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
-            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line nerve-${path.type}"></div><input id="path-${path.type}" type="checkbox" checked/>`);
+            const checked =  !('enabled' in path) || path.enabled ? 'checked' : '';
+            if (checked != '') {
+                this.__checkedCount += 1;
+            }
+            const colour = path.colour || '#440';
+            const style = path.dashed ? `background: repeating-linear-gradient(to right,${colour} 0,${colour} 6px,transparent 6px,transparent 9px);`
+                                      : `background: ${colour};`;
+
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line" style="${style}"></div><input id="path-${path.type}" type="checkbox" ${checked}/>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
-        this.__checkedCount = this.__pathTypes.length;
-        this.__halfCount = Math.trunc(this.__checkedCount/2);
+        this.__halfCount = Math.trunc(this.__pathTypes.length/2);
 
         this._button = document.createElement('button');
         this._button.id = 'nerve-key-button';
@@ -157,6 +160,9 @@ export class PathControl
             if (this._button.getAttribute('control-visible') === 'false') {
                 this._container.appendChild(this._legend);
                 this._button.setAttribute('control-visible', 'true');
+                const allPathsCheckbox = document.getElementById('path-all-paths');
+                allPathsCheckbox.indeterminate = this.__checkedCount < this.__pathTypes.length
+                                              && this.__checkedCount > 0;
                 this._legend.focus();
             } else {
                 this._legend = this._container.removeChild(this._legend);
@@ -211,7 +217,7 @@ export class LayerControl
     constructor(flatmap, layerManager)
     {
         this.__flatmap = flatmap;
-        this.__manager = layerManager;
+        this.__layers = layerManager.layers;
         this.__map = undefined;
     }
 
@@ -226,21 +232,18 @@ export class LayerControl
     {
         this.__map = map;
         this.__container = document.createElement('div');
-        this.__container.className = 'maplibregl-ctrl';
-        this.__container.id = 'flatmap-layer-control';
-
-        this.__layers = document.createElement('div');
-        this.__layers.id = 'layer-control-text';
-        this.__layers.className = 'flatmap-layer-grid';
+        this.__container.className = 'maplibregl-ctrl flatmap-control';
+        this.__layersControl = document.createElement('div');
+        this.__layersControl.className = 'flatmap-control-grid';
 
         const innerHTML = [];
         innerHTML.push(`<label for="layer-all-layers">ALL LAYERS:</label><input id="layer-all-layers" type="checkbox" checked/>`);
-        for (const layer of this.__manager.layers) {
+        for (const layer of this.__layers) {
             innerHTML.push(`<label for="layer-${layer.id}">${layer.description}</label><input id="layer-${layer.id}" type="checkbox" checked/>`);
         }
-        this.__layers.innerHTML = innerHTML.join('\n');
+        this.__layersControl.innerHTML = innerHTML.join('\n');
 
-        this.__layersCount = this.__manager.layers.length;
+        this.__layersCount = this.__layers;
         this.__checkedCount = this.__layersCount;
         this.__halfCount = Math.trunc(this.__checkedCount/2);
 
@@ -270,11 +273,11 @@ export class LayerControl
     {
         if (event.target.id === 'map-layers-button') {
             if (this.__button.getAttribute('control-visible') === 'false') {
-                this.__container.appendChild(this.__layers);
+                this.__container.appendChild(this.__layersControl);
                 this.__button.setAttribute('control-visible', 'true');
-                this.__layers.focus();
+                this.__layersControl.focus();
             } else {
-                this.__layers = this.__container.removeChild(this.__layers);
+                this.__layersControl = this.__container.removeChild(this.__layersControl);
                 this.__button.setAttribute('control-visible', 'false');
             }
         } else if (event.target.tagName === 'INPUT') {
@@ -288,16 +291,16 @@ export class LayerControl
                 } else {
                     this.__checkedCount = 0;
                 }
-                for (const layer of this.__manager.layers) {
+                for (const layer of this.__layers) {
                     const layerCheckbox = document.getElementById(`layer-${layer.id}`);
                     if (layerCheckbox) {
                         layerCheckbox.checked = event.target.checked;
-                        this.__manager.activate(layer.id, event.target.checked);
+                        this.__flatmap.enableLayer(layer.id, event.target.checked);
                     }
                 }
             } else if (event.target.id.startsWith('layer-')) {
                 const layerId = event.target.id.substring(6);
-                this.__manager.activate(layerId, event.target.checked);
+                this.__flatmap.enableLayer(layerId, event.target.checked);
                 if (event.target.checked) {
                     this.__checkedCount += 1;
                 } else {
@@ -321,7 +324,6 @@ export class LayerControl
 
 //==============================================================================
 
-
 const SCKAN_STATES = [
     {
         'id': 'VALID',
@@ -336,10 +338,11 @@ const SCKAN_STATES = [
 
 export class SCKANControl
 {
-    constructor(flatmap)
+    constructor(flatmap, options={sckan: 'valid'})
     {
         this.__flatmap = flatmap;
         this.__map = undefined;
+        this.__initialState = options.sckan || 'valid';
     }
 
     getDefaultPosition()
@@ -353,23 +356,24 @@ export class SCKANControl
     {
         this.__map = map;
         this.__container = document.createElement('div');
-        this.__container.className = 'maplibregl-ctrl';
-        this.__container.id = 'flatmap-layer-control';
-
+        this.__container.className = 'maplibregl-ctrl flatmap-control';
         this.__sckan = document.createElement('div');
-        this.__sckan.id = 'sckan-control-text';
-        this.__sckan.className = 'flatmap-layer-grid';
+        this.__sckan.className = 'flatmap-control-grid';
 
         const innerHTML = [];
-        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" checked/>`);
+        let checked = (this.__initialState === 'all') ? 'checked' : '';
+        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" ${checked}/>`);
         for (const state of SCKAN_STATES) {
-            innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" checked/>`);
+            checked = (this.__initialState.toUpperCase() === state.id) ? 'checked' : '';
+            innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" ${checked}/>`);
         }
         this.__sckan.innerHTML = innerHTML.join('\n');
 
         this.__sckanCount = SCKAN_STATES.length;
-        this.__checkedCount = this.__sckanCount;
-        this.__halfCount = Math.trunc(this.__checkedCount/2);
+        this.__checkedCount = (this.__initialState === 'all') ? this.__sckanCount
+                            : (this.__initialState === 'none') ? 0
+                            : 1;
+        this.__halfCount = Math.trunc(this.__sckanCount/2);
 
         this.__button = document.createElement('button');
         this.__button.id = 'map-sckan-button';
@@ -399,6 +403,9 @@ export class SCKANControl
             if (this.__button.getAttribute('control-visible') === 'false') {
                 this.__container.appendChild(this.__sckan);
                 this.__button.setAttribute('control-visible', 'true');
+                const allLayersCheckbox = document.getElementById('sckan-all-paths');
+                allLayersCheckbox.indeterminate = (this.__checkedCount > 0)
+                                               && (this.__checkedCount < this.__sckanCount);
                 this.__sckan.focus();
             } else {
                 this.__sckan = this.__container.removeChild(this.__sckan);
@@ -411,20 +418,22 @@ export class SCKANControl
                     event.target.indeterminate = false;
                 }
                 if (event.target.checked) {
+                    this.__state = 'all';
                     this.__checkedCount = this.__sckanCount;
                 } else {
+                    this.__state = 'none';
                     this.__checkedCount = 0;
                 }
                 for (const state of SCKAN_STATES) {
                     const sckanCheckbox = document.getElementById(`sckan-${state.id}`);
                     if (sckanCheckbox) {
                         sckanCheckbox.checked = event.target.checked;
-                        this.__flatmap.showSckanPaths(state.id, event.target.checked);
+                        this.__flatmap.enableSckanPath(state.id, event.target.checked);
                     }
                 }
             } else if (event.target.id.startsWith('sckan-')) {
                 const sckanId = event.target.id.substring(6);
-                this.__flatmap.showSckanPaths(sckanId, event.target.checked);
+                this.__flatmap.enableSckanPath(sckanId, event.target.checked);
                 if (event.target.checked) {
                     this.__checkedCount += 1;
                 } else {
@@ -448,6 +457,61 @@ export class SCKANControl
 
 //==============================================================================
 
+export class NerveControl
+{
+    constructor(flatmap, options={showCentrelines: false})
+    {
+        this.__flatmap = flatmap;
+        this.__map = undefined;
+        this.__visible = options.showCentrelines || 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-nerve-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide nerve centrelines');
+        this.__button.textContent = 'NERVES';
+        this.__button.title = 'Show/hide nerve centrelines';
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        return this.__container;
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'map-nerve-button') {
+            this.__visible = !this.__visible;
+            this.__flatmap.enableCentrelines(this.__visible);
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/flatmap-viewer.js

@@ -192,8 +192,7 @@ class FlatMap
                 this._initialState = this.getState();
 
                 // Add a minimap if option set
-                // Put this above search, info, etc...
-                // ==> add all controls here (via interactions.js...)
+
                 if (this.options.minimap) {
                     this._minimap = new MinimapControl(this, this.options.minimap);
                         this._map.addControl(this._minimap);
@@ -276,21 +275,24 @@ class FlatMap
     }
 
     /**
-     * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving path types
-     *                                                                  with their descriptions and colours
+     * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving the path types
+     *                                                                  present in the map along with their
+     *                                                                  descriptions and colours
      */
     pathTypes()
     //=========
     {
-        return pathways.PATH_TYPES;
+        if (this._userInteractions !== null) {
+            return this._userInteractions.pathways.pathTypes();
+        }
     }
 
     /**
      * 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
+     * @param {string}   pathType The path type
+     * @param {boolean}  enable  Show or hide paths of that type. Defaults to
+     *                           ``true`` (show)
      */
     enablePath(pathType, enable=true)
     //===============================
@@ -301,32 +303,31 @@ class FlatMap
     }
 
     /**
-     * Hide or show all paths except those of the given type.
+     * Hide or show all paths valid in SCKAN.
      *
-     * @param      {string|Array.<string>}   pathTypes The path type(s)
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type(s) otherwise only hide the paths
+     * @param {string}   sckanState  Either ``valid`` or ``invalid``
+     * @param {boolean}  enable  Show or hide paths with that SCKAN state.
+     *                           Defaults to ``true`` (show)
      */
-    showPaths(pathTypes, enable=true)
-    //===============================
+    enableSckanPath(sckanState, enable=true)
+    //======================================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.showPaths(pathTypes, enable);
+            this._userInteractions.enableSckanPath(sckanState, enable);
         }
     }
 
     /**
-     * Hide or show all paths valid in SCKAN.
+     * Hide or show centrelines and nodes.
      *
-     * @param      {string}   validity Either ``VALID`` or ``INVALID``
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type(s) otherwise only hide the paths
+     * @param {boolean}  enable  Show or centrelines and associated nodes.
+     *                           Defaults to ``true`` (show)
      */
-    showSckanPaths(validity, enable=true)
-    //===================================
+    enableCentrelines(enable=true)
+    //============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.showSckanPaths(validity, enable);
+            this._userInteractions.enableCentrelines(enable);
         }
     }
 
@@ -444,12 +445,6 @@ class FlatMap
         return `${this.__uuid}-${this._mapNumber}`;
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        return this._userInteractions.activeLayerNames;
-    }
-
     get annotations()
     //===============
     {
@@ -671,18 +666,25 @@ class FlatMap
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setPaint(options=null)
+    //====================
     {
         options = utils.setDefaults(options, {
             colour: true,
             outline: true
         });
         if (this._userInteractions !== null) {
-            this._userInteractions.setColour(options);
+            this._userInteractions.setPaint(options);
         }
     }
 
+    setColour(options=null)
+    //=====================
+    {
+        console.log('`setColour()` is deprecated; please use `setPaint()` instead.')
+        this.setPaint(options);
+    }
+
     //==========================================================================
 
     /**
@@ -755,22 +757,50 @@ class FlatMap
 
     //==========================================================================
 
+    /**
+     * Get a list of the flatmap's layers.
+     *
+     * @return {Array.Object.<{id: string, description: string, enabled: boolean}>}  An array with layer details
+     */
+    getLayers()
+    //=========
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.getLayers();
+        }
+    }
+
+    /**
+     * @param {string}  layerId  The layer identifier to enable
+     * @param {boolean}  enable  Show or hide the layer. Defaults to ``true`` (show)
+     *
+     */
+    enableLayer(layerId, enable=true)
+    //===============================
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.enableLayer(layerId, enable);
+        }
+    }
+
+    //==========================================================================
+
     /**
      * Add a marker to the map.
      *
      * @param      {string}  anatomicalId     The anatomical identifier of the feature on which
      *                                        to place the marker
-     * @param      {string}  [markerType='']  An optional parameter giving the type of marker
-     *                                        to use. Apart from the default, the only marker
-     *                                        type recognised is ``simulation``
+     * @param      {string}  [htmlElement=null]  An optional parameter giving the DOM element to
+     *                                           use as a marker. The default is a light blue,
+     *                                           droplet-shaped SVG marker.
      * @return     {integer}  The identifier for the resulting marker. -1 is returned if the
      *                        map doesn't contain a feature with the given anatomical identifier
      */
-    addMarker(anatomicalId, markerType='')
-    //====================================
+    addMarker(anatomicalId,  htmlElement=null)
+    //========================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.addMarker(anatomicalId, markerType);
+            return this._userInteractions.addMarker(anatomicalId, htmlElement);
         }
         return -1;
     }
@@ -850,7 +880,6 @@ class FlatMap
             'dataset',
             'kind',
             'label',
-            'markup',
             'models',
             'nodeId',
             'source',
@@ -1142,7 +1171,6 @@ export class MapManager
         let latestMap = null;
         let lastCreatedTime = '';
         for (const map of this._mapList) {
-            // We can break/return if we have a UUID match...
             if (('uuid' in map && mapDescribes === map.uuid
              || mapDescribes === map.id
              || 'taxon' in map && mapDescribes === map.taxon
@@ -1194,13 +1222,12 @@ export class MapManager
     * @arg options {Object} Configurable options for the map.
     * @arg options.background {string} Background colour of flatmap. Defaults to ``white``.
     * @arg options.debug {boolean} Enable debugging mode.
-    * @arg options.featureInfo {boolean} Show information about features as a tooltip. The tooltip is active
-    *                                    on selected features and, for non-selected features, when the
-    *                                    ``info`` control is enabled. More details are shown in debug mode.
     * @arg options.fullscreenControl {boolean} Add a ``Show full screen`` button to the map.
     * @arg options.layerOptions {Object} Options to control colour and outlines of features
     * @arg options.layerOptions.colour {boolean} Use colour fill (if available) for features. Defaults to ``true``.
     * @arg options.layerOptions.outline {boolean} Show the border of features. Defaults to ``true``.
+    * @arg options.layerOptions.sckan {string} Show neuron paths known to SCKAN: values are ``valid`` (default),
+    *                                        ``invalid``, ``all`` or ``none``.
     * @arg options.minimap {boolean|Object} Display a MiniMap of the flatmap. Defaults to ``false``.
     * @arg options.minimap.position {string} The minimap's position: ``bottom-left`` (default), ``bottom-right``,
     *                                        ``top-left`` or ``top-right``.
@@ -1211,9 +1238,9 @@ export class MapManager
     * @arg options.maxZoom {number} The maximum zoom level of the map.
     * @arg options.minZoom {number} The minimum zoom level of the map.
     * @arg options.navigationControl {boolean} Add navigation controls (zoom buttons) to the map.
-    * @arg options.pathControl {boolean} Add buttons to control pathways including via a color-coded legend.
-    * @arg options.searchable {boolean} Add a control to search for features on a map.
     * @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``.
     * @example
     * const humanMap1 = mapManager.loadMap('humanV1', 'div-1');
     *
@@ -1251,6 +1278,14 @@ export class MapManager
                     mapOptions['bounds'] = mapIndex['bounds'];
                 }
 
+                // Note the kind of map
+
+                if ('style' in mapIndex) {
+                    mapOptions.style = mapIndex.style;  // Currently ``anatomical`` or ``functional``
+                } else {
+                    mapOptions.style = 'flatmap';       // Default is a generic ``flatmap``
+                }
+
                 // Mapmaker has changed the name of the field to indicate that indicates if
                 // there are raster layers
                 if (!('image-layers' in mapIndex) && ('image_layer' in mapIndex)) {
@@ -1326,11 +1361,6 @@ export class MapManager
                     };
                 }
                 mapOptions.layerOptions.authoring = ('authoring' in mapIndex) ? mapIndex.authoring : false;
-                if ('style' in mapIndex) {
-                    mapOptions.layerOptions.style = mapIndex.style;
-                } else {
-                    mapOptions.layerOptions.style = 'flatmap';
-                }
 
                 // Are features in separate vector tile source layers?
 

package/src/info.js

@@ -29,10 +29,6 @@ import { indexedProperties } from './search.js';
 export const displayedProperties = [
     'id',
     'class',
-    'featureId',
-    'tile-layer',
-    'layer',
-    'kind',
     ...indexedProperties
 ];
 
@@ -242,7 +238,11 @@ export class InfoControl
                         if (prop in feature.properties) {
                             const value = feature.properties[prop];
                             if (value !== undefined) {
-                                values[prop] = value;
+                                if (prop === 'label') {
+                                    values[prop] = value.replaceAll("\n", "<br/>");
+                                } else {
+                                    values[prop] = value;
+                                }
                             }
                         }
                     });