@abi-software/flatmap-viewer 2.2.11-devel.1 → 2.2.11-devel.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.11-devel.1",
+  "version": "2.2.11-devel.2",
   "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,16 @@ 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;
+            }
+            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}/>`);
         }
         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 +156,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 +213,7 @@ export class LayerControl
     constructor(flatmap, layerManager)
     {
         this.__flatmap = flatmap;
-        this.__manager = layerManager;
+        this.__layers = layerManager.layers;
         this.__map = undefined;
     }
 
@@ -229,18 +231,18 @@ export class LayerControl
         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.__layersControl = document.createElement('div');
+        this.__layersControl.id = 'layer-control-text';
+        this.__layersControl.className = 'flatmap-layer-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 +272,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 +290,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 {
@@ -340,6 +342,7 @@ export class SCKANControl
     {
         this.__flatmap = flatmap;
         this.__map = undefined;
+        this.__state = 'valid';
     }
 
     getDefaultPosition()
@@ -361,15 +364,19 @@ export class SCKANControl
         this.__sckan.className = 'flatmap-layer-grid';
 
         const innerHTML = [];
-        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" checked/>`);
+        let checked = (this.__state === '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.__state.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.__state === 'all') ? this.__sckanCount
+                            : (this.__state === 'none') ? 0
+                            : 1;
+        this.__halfCount = Math.trunc(this.__sckanCount/2);
 
         this.__button = document.createElement('button');
         this.__button.id = 'map-sckan-button';
@@ -399,6 +406,8 @@ 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.__state.toLowerCase().includes('valid');
                 this.__sckan.focus();
             } else {
                 this.__sckan = this.__container.removeChild(this.__sckan);
@@ -411,20 +420,21 @@ 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.showSckanPaths(this.__state);
             } else if (event.target.id.startsWith('sckan-')) {
                 const sckanId = event.target.id.substring(6);
-                this.__flatmap.showSckanPaths(sckanId, event.target.checked);
                 if (event.target.checked) {
                     this.__checkedCount += 1;
                 } else {
@@ -432,14 +442,24 @@ export class SCKANControl
                 }
                 const allLayersCheckbox = document.getElementById('sckan-all-paths');
                 if (this.__checkedCount === 0) {
+                    this.__state = 'none';
                     allLayersCheckbox.checked = false;
                     allLayersCheckbox.indeterminate = false;
                 } else if (this.__checkedCount === this.__sckanCount) {
+                    this.__state = 'all';
                     allLayersCheckbox.checked = true;
                     allLayersCheckbox.indeterminate = false;
                 } else {
+                    if (event.target.checked) {
+                        this.__state = sckanId;
+                    } else if (sckanId === 'VALID') {
+                        this.__state = 'invalid';
+                    } else {
+                        this.__state = 'valid';
+                    }
                     allLayersCheckbox.indeterminate = true;
                 }
+                this.__flatmap.showSckanPaths(this.__state);
             }
         }
         event.stopPropagation();

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);
@@ -322,11 +321,11 @@ class FlatMap
      * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
      *                                       of the type(s) otherwise only hide the paths
      */
-    showSckanPaths(validity, enable=true)
-    //===================================
+    showSckanPaths(state='valid')
+    //===========================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.showSckanPaths(validity, enable);
+            this._userInteractions.showSckanPaths(state);
         }
     }
 
@@ -444,12 +443,6 @@ class FlatMap
         return `${this.__uuid}-${this._mapNumber}`;
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        return this._userInteractions.activeLayerNames;
-    }
-
     get annotations()
     //===============
     {
@@ -755,6 +748,34 @@ 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.
      *
@@ -850,7 +871,6 @@ class FlatMap
             'dataset',
             'kind',
             'label',
-            'markup',
             'models',
             'nodeId',
             'source',
@@ -1142,7 +1162,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 +1213,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 +1229,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 +1269,14 @@ export class MapManager
                     mapOptions['bounds'] = mapIndex['bounds'];
                 }
 
+                // Note the kind of map
+
+                if ('style' in mapIndex) {
+                    mapOptions.style = mapIndex.style;  // Currently ``flatmap`` or ``fcdiagram``
+                } else {
+                    mapOptions.style = '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 +1352,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
 ];
 

package/src/interactions.js

@@ -130,49 +130,47 @@ export class UserInteractions
 
         flatmap.setInitialPosition();
 
-        // Add a control to search annotations if option set
-
-        if (flatmap.options.searchable) {
-            this._map.addControl(new SearchControl(flatmap));
-        }
-
-        // Show information about features
-
-        if (flatmap.options.featureInfo || flatmap.options.searchable) {
-            this._infoControl = new InfoControl(flatmap);
-            if (flatmap.options.featureInfo) {
-                this._map.addControl(this._infoControl);
-            }
-        }
-
         // Add and manage our layers
 
         this._layerManager = new LayerManager(flatmap);
 
-        // Control background colour (NB. this depends on having map layers created)
+        // Path visibility is either controlled externally or by a local control
 
-        if (flatmap.options.backgroundControl) {
-            this._map.addControl(new BackgroundControl(flatmap));
+        this._pathways = new Pathways(flatmap);
+
+        // The path types in this map
+        const mapPathTypes = this._pathways.pathTypes;
+
+        // Disable paths that are not initially shown
+        for (const path of mapPathTypes) {
+            if ('enabled' in path && !path.enabled) {
+                this.enablePath(path.type, false);
+            }
         }
 
-        // Neural pathways which are either controlled externally
-        // or by our local controls
+        // Add various controls when running standalone
 
-        this._pathways = new Pathways(flatmap);
+        if (flatmap.options.standalone) {
+            // Add a control to search annotations if option set
+            this._map.addControl(new SearchControl(flatmap));
 
-        // Add a control to manage our pathways
+            // Show information about features
+            this._infoControl = new InfoControl(flatmap);
+            this._map.addControl(this._infoControl);
 
-        if (flatmap.options.pathControls) {
-            // Restrict to path types that are on the map...
-            this._map.addControl(new PathControl(flatmap, this._pathways.pathTypes));
-        }
+            // Control background colour (NB. this depends on having map layers created)
+            this._map.addControl(new BackgroundControl(flatmap));
 
-        // Add a control to manage our layers
+            // Add a control to manage our paths
+            this._map.addControl(new PathControl(flatmap, mapPathTypes));
 
-        if (flatmap.options.layerControl) {
+            // Add a control to manage our layers
             this._map.addControl(new LayerControl(flatmap, this._layerManager));
-            // ************************************
-            //this._map.addControl(new SCKANControl(flatmap));
+
+            // A SCKAN path control for FC maps
+            if (flatmap.options.style === 'fcdiagram') {
+                this._map.addControl(new SCKANControl(flatmap));
+            }
         }
 
         // Flag features that have annotations
@@ -180,9 +178,6 @@ export class UserInteractions
 
         for (const [id, ann] of flatmap.annotations) {
             const feature = this.mapFeature_(id);
-            if (id == 118) {
-                console.log(feature, ann);
-            }
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'annotated': true });
             }
@@ -226,7 +221,7 @@ export class UserInteractions
         return {
             center: this._map.getCenter().toArray(),
             zoom: this._map.getZoom(),
-            layers: this.activeLayerNames
+            layers: this.layers
         };
     }
 
@@ -258,10 +253,16 @@ export class UserInteractions
         this._layerManager.setColour(options);
     }
 
-    get activeLayerNames()
-    //====================
+    getLayers()
+    //=========
     {
-        return this._layerManager.activeLayerNames;
+        return this._layerManager.layers;
+    }
+
+    enableLayer(layerId, enable=true)
+    //===============================
+    {
+        this._layerManager.activate(layerId, enable);
     }
 
     mapFeature_(featureId)
@@ -561,7 +562,6 @@ export class UserInteractions
                     }
                     bbox = expandBounds(bbox, annotation.bounds);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-// FC may have lines that are not pathways features, esp. when authoring...
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
                             if (select) {
                                 this.selectFeature_(pathFeatureId);
@@ -783,10 +783,6 @@ export class UserInteractions
                 }
             }
         } else {
-            // Allow tooltip for body but no highlighting/activation??
-            // More generally, only highlight a feature if all "within" the viewport??
-            // -- then as we zoom outermost features wouldn't highlight (but still show tooltip)
-            // -- or highlight in a more subtle way (eg. opacity change and not colour change)??
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
                                                              || 'label' in feature.properties
                                                              || 'node' in feature.properties)
@@ -1032,9 +1028,10 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
-    showSckanPaths(validity, enable=true)
-    //===================================
+    showSckanPaths(state='valid')
+    //===========================
     {
+        this._layerManager.setFilter({sckan: state});
     }
 
     //==============================================================================