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

package/package.json

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

package/src/controls.js

@@ -324,6 +324,123 @@ export class LayerControl
 
 //==============================================================================
 
+export class Control
+{
+    constructor(flatmap, id, name)
+    {
+        this.__flatmap = flatmap;
+        this.__id = id;
+        this.__name = name;
+        this.__map = undefined;
+        this.__prefix = `${this.__id}-`
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    __innerLinesHTML()
+    //================
+    {
+        return [];
+    }
+
+    __enableAll(enable)
+    //=================
+    {
+
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl flatmap-control';
+        this.__control = document.createElement('div');
+        this.__control.className = 'flatmap-control-grid';
+
+        const innerHTML = this.__innerLinesHTML();
+        this.__totalCount = innerHTML.length;
+        innerHTML.splice(0, 0, `<label for="control-all-${this.__id}">ALL ${this.__name.toUpperCase()}:</label><input id="control-all-${this.__id}" type="checkbox" checked/>`);
+        this.__control.innerHTML = innerHTML.join('\n');
+
+        this.__checkedCount = this.__totalCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/2);
+
+        this.__button = document.createElement('button');
+        this.__button.id = `flatmap-${this.__id}-button`;
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', `Show/hide map's ${this.__name}`);
+        this.__button.setAttribute('control-visible', 'false');
+        this.__button.textContent = this.__name.toUpperCase().substring(0, 6);
+        this.__button.title = `Show/hide map's ${this.__name}`;
+        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 === `flatmap-${this.__id}-button`) {
+            if (this.__button.getAttribute('control-visible') === 'false') {
+                this.__container.appendChild(this.__control);
+                this.__button.setAttribute('control-visible', 'true');
+                this.__control.focus();
+            } else {
+                this.__control = this.__container.removeChild(this.__control);
+                this.__button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === `control-all-${this.__id}`) {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = this.__totalCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                this.__enableAll(event.target.checked);
+            } else if (event.target.id.startsWith(`${this.__id}-`)) {
+                this.__enableControl(event.target.id.substring(this.__prefix.length),
+                                     event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allCheckbox = document.getElementById(`control-all-${this.__id}`);
+                if (this.__checkedCount === 0) {
+                    allCheckbox.checked = false;
+                    allCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__totalCount) {
+                    allCheckbox.checked = true;
+                    allCheckbox.indeterminate = false;
+                } else {
+                    allCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 const SCKAN_STATES = [
     {
         'id': 'VALID',

package/src/flatmap-viewer.js

@@ -797,24 +797,40 @@ class FlatMap
             return this._userInteractions.getSystems();
         }
     }
+
+    /**
+     * @param {string}  systemName  The name of the system to enable
+     * @param {boolean}  enable  Show or hide the system. Defaults to ``true`` (show)
+     *
+     */
+    enableSystem(systemName, enable=true)
+    //===================================
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.enableSystem(systemName, enable);
+        }
+    }
+
     //==========================================================================
 
     /**
      * Add a marker to the map.
      *
-     * @param      {string}  anatomicalId     The anatomical identifier of the feature on which
-     *                                        to place the marker
-     * @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
+     * @param {string}  anatomicalId  The anatomical identifier of the feature on which
+     *                                to place the marker.
+     * @arg {Object} options          Configurable options for the marker.
+     * @arg {string} options.colour   Colour of the default marker. Defaults to ``'#005974'``
+     *                                (dark blue).
+     * @arg {string} options.element  The DOM element to use as a marker. The default is
+     *                                a dark 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,  htmlElement=null)
-    //========================================
+    addMarker(anatomicalId,  options={})
+    //==================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.addMarker(anatomicalId, htmlElement);
+            return this._userInteractions.addMarker(anatomicalId, options);
         }
         return -1;
     }

package/src/interactions.js

@@ -38,9 +38,11 @@ import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
 import {PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {BackgroundControl, LayerControl, NerveControl, PathControl, SCKANControl} from './controls.js';
+import {BackgroundControl, LayerControl, NerveControl,
+        PathControl, SCKANControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
+import {SystemsControl, SystemsManager} from './systems';
 
 import * as pathways from './pathways.js';
 import * as utils from './utils.js';
@@ -115,6 +117,7 @@ export class UserInteractions
         this.__activeMarker = null;
         this.__lastMarkerId = 900000;
         this.__markerIdByMarker = new Map();
+        this.__markerIdByFeatureId = new Map();
         this.__annotationByMarkerId = new Map();
 
         // Where to put labels and popups on a feature
@@ -142,6 +145,27 @@ export class UserInteractions
             }
         }
 
+        // Flag features that have annotations and note which are FC systems
+
+        this.__systems = new Map();
+        for (const [id, ann] of flatmap.annotations) {
+            const feature = this.mapFeature_(id);
+            if (feature !== undefined) {
+                this._map.setFeatureState(feature, { 'annotated': true });
+            }
+            if (ann['fc-class'] === 'fc-class:System') {
+                if (this.__systems.has(ann.name)) {
+                    this.__systems.get(ann.name).featureIds.push(ann.featureId)
+                } else {
+                    this.__systems.set(ann.name, {
+                        id: ann.name.replaceAll(' ', '_'),
+                        colour: ann.colour,
+                        featureIds: [ ann.featureId ]
+                    });
+                }
+            }
+        }
+
         // Add various controls when running standalone
 
         if (flatmap.options.standalone) {
@@ -167,48 +191,13 @@ export class UserInteractions
                 this.enableCentrelines(false);
             }
 
-            // A SCKAN path control for FC maps
+            // SCKAN path and SYSTEMS controls for FC maps
             if (flatmap.options.style === 'functional') {
+                this._map.addControl(new SystemsControl(flatmap, this.__systems));
                 this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
             }
         }
 
-        // Flag features that have annotations and not which are FC systems
-
-        this.__systems = [];
-        const seenSystems = [];
-        for (const [id, ann] of flatmap.annotations) {
-            const feature = this.mapFeature_(id);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'annotated': true });
-            }
-            if (ann['fc-class'] === 'FC_CLASS.SYSTEM') {
-                if (seenSystems.indexOf(ann['name']) < 0) {
-                    seenSystems.push(ann['name']);
-                    this.__systems.push({
-                        name: ann['name'],
-                        colour: ann['colour']
-                    });
-                }
-            }
-        }
-
-        // Display a context menu on right-click
-
-        this._lastContextTime = 0;
-        this._contextMenu = new ContextMenu(flatmap, this.__clearModal.bind(this));
-        this._map.on('contextmenu', this.contextMenuEvent_.bind(this));
-
-        // Display a context menu with a touch longer than 0.5 second
-
-        this._lastTouchTime = 0;
-        this._map.on('touchstart', (e) => { this._lastTouchTime = Date.now(); });
-        this._map.on('touchend', (e) => {
-            if (Date.now() > (this._lastTouchTime + 500)) {
-                this.contextMenuEvent_(e);
-            }
-        });
-
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -284,7 +273,61 @@ export class UserInteractions
     getSystems()
     //==========
     {
-        return this.__systems;
+        const systems = [];
+        for (const system of this.__systems.values()) {
+            systems.push({
+                name: system.name,
+                colour: system.colour,
+            });
+        }
+        return systems;
+    }
+
+    enableSystem(systemName, enable=true)
+    //===================================
+    {
+        if (this.__systems.has(systemName)) {
+            for (const featureId of this.__systems.get(systemName).featureIds) {
+                this.__enableFeatureWithChildren(featureId, enable);
+            }
+        }
+    }
+
+    __enableFeatureWithChildren(featureId, enable=true)
+    //=================================================
+    {
+        const feature = this.mapFeature_(featureId);
+        if (feature !== undefined) {
+            this.__enableFeature(feature, enable);
+            for (const childFeatureId of feature.children) {
+                this.__enableFeatureWithChildren(childFeatureId, enable);
+            }
+        }
+    }
+
+    __enableFeatureMarker(featureId, enable=true)
+    //===========================================
+    {
+        const markerId = this.__markerIdByFeatureId.get(+featureId);
+        if (markerId !== undefined) {
+            const markerDiv = document.getElementById(`marker-${markerId}`);
+            if (markerDiv) {
+                markerDiv.style.visibility = enable ? 'visible' : 'hidden';
+            }
+        }
+    }
+
+    __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);
+        }
     }
 
     mapFeature_(featureId)
@@ -297,9 +340,11 @@ export class UserInteractions
                 source: VECTOR_TILES_SOURCE,
                 sourceLayer: this._flatmap.options.separateLayers
                              ? `${ann['layer']}_${ann['tile-layer']}`
-                             : ann['tile-layer']
+                             : ann['tile-layer'],
+                children: ann.children || []
             };
         }
+        return undefined;
     }
 
     featureSelected_(featureId)
@@ -424,45 +469,6 @@ export class UserInteractions
         return smallestFeature;
     }
 
-    contextMenuEvent_(event)
-    //======================
-    {
-        event.preventDefault();
-
-        // Chrome on Android sends both touch and contextmenu events
-        // so ignore duplicate
-
-        if (Date.now() < (this._lastContextTime + 100)) {
-            return;
-        }
-        this._lastContextTime = Date.now();
-
-        if (this._activeFeatures.length > 0) {
-            const feature = this._activeFeatures[0];
-
-            // Remove any tooltip
-            this.removeTooltip_();
-
-            const featureId = feature.id;
-            if (this._pathways.isNode(featureId)) {
-                const items = [
-                    {
-                        featureId: featureId,
-                        prompt: 'Show paths',
-                        action: this.enablePaths_.bind(this, true)
-                    },
-                    {
-                        featureId: featureId,
-                        prompt: 'Hide paths',
-                        action: this.enablePaths_.bind(this, false)
-                    }
-                ];
-                this.setModal_();
-                this._contextMenu.show(event.lngLat, items, feature.properties.label);
-            }
-        }
-    }
-
     setModal_(event)
     //==============
     {
@@ -982,7 +988,6 @@ export class UserInteractions
     enablePaths_(enable, event)
     //=========================
     {
-        this._contextMenu.hide();
         const nodeId = event.target.getAttribute('featureId');
         this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
         this.__clearModal();
@@ -1086,8 +1091,8 @@ export class UserInteractions
         return position;
     }
 
-    addMarker(anatomicalId, htmlElement=null)
-    //=======================================
+    addMarker(anatomicalId, options={})
+    //=================================
     {
         const featureIds = this._flatmap.modelFeatureIds(anatomicalId);
         let markerId = -1;
@@ -1106,13 +1111,15 @@ export class UserInteractions
                 // MapLibre dynamically sets a transform on marker elements so in
                 // order to apply a scale transform we need to create marker icons
                 // inside the marker container <div>.
-                const markerHTML = htmlElement ? new maplibre.Marker({element: htmlElement})
-                                               : new maplibre.Marker({color: '#005974'});
+                const colour = options.colour || '#005974';
+                const markerHTML = options.element ? new maplibre.Marker({element: options.element})
+                                                   : new maplibre.Marker({color: colour});
 
                 const markerElement = document.createElement('div');
                 const markerIcon = document.createElement('div');
                 markerIcon.innerHTML = markerHTML.getElement().innerHTML;
                 markerIcon.className = 'flatmap-marker';
+                markerElement.id = `marker-${markerId}`;
                 markerElement.appendChild(markerIcon);
 
                 const markerPosition = this.__markerPosition(featureId, annotation);
@@ -1129,6 +1136,7 @@ export class UserInteractions
                     this.markerMouseEvent_.bind(this, marker, anatomicalId));
 
                 this.__markerIdByMarker.set(marker, markerId);
+                this.__markerIdByFeatureId.set(+featureId, markerId);
                 this.__annotationByMarkerId.set(markerId, annotation);
             }
         }

package/src/layers.js

@@ -65,7 +65,7 @@ class MapStylingLayers
     }
 
     addLayer(styleLayer, options)
-    //==========================
+    //===========================
     {
         this.__map.addLayer(styleLayer.style(options));
         this.__layers.push(styleLayer);
@@ -89,8 +89,8 @@ class MapStylingLayers
     vectorSourceId(sourceLayer)
     //=========================
     {
-        return this.__separateLayers ? `${this.__id}_${sourceLayer}`
-                                     : sourceLayer;
+        return (this.__separateLayers ? `${this.__id}_${sourceLayer}`
+                                      : sourceLayer).replaceAll('/', '_');
     }
 
     setPaint(options)
@@ -144,8 +144,7 @@ class MapFeatureLayers extends MapStylingLayers
     {
         const styleLayer = new styleClass(`${this.__id}_${sourceLayer}`,
                                           this.vectorSourceId(sourceLayer));
-        this.__map.addLayer(styleLayer.style(this.__layerOptions));
-        this.__layers.push(styleLayer);
+        this.addLayer(styleLayer, this.__layerOptions);
     }
 
     __addPathwayStyleLayers()

package/src/styling.js

@@ -123,31 +123,21 @@ export class FeatureFillLayer extends VectorStyleLayer
     {
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
-        const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const paintStyle = {
             'fill-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
-                ['any',
-                      ['==', ['get', 'kind'], 'scaffold']
-                ], 'white',
-                ['has', 'node'], '#AFA202',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
                 'case',
+                ['boolean', ['feature-state', 'hidden'], false], 0.01,
                 ['boolean', ['feature-state', 'selected'], false], 0.7,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.7,
-                ['has', 'node'], 0.3,
-                ['any',
-                      ['==', ['get', 'kind'], 'scaffold'],
-                      ['==', ['get', 'kind'], 'tissue'],
-                      ['==', ['get', 'kind'], 'cell-type'],
-                ], 0.1,
                 (coloured && !dimmed) ? 0.01 : 0.1
             ]
         };
@@ -196,14 +186,12 @@ export class FeatureBorderLayer extends VectorStyleLayer
             lineColour.push('blue');
         }
         lineColour.push(['has', 'colour']);
-        lineColour.push('#000');
-        lineColour.push(['has', 'node']);
-        lineColour.push('#AFA202');
+        lineColour.push(['get', 'colour']);
         lineColour.push('#444');
 
         const lineOpacity = [
             'case',
-            ['boolean', ['get', 'invisible'], false], 0.05,
+            ['boolean', ['feature-state', 'hidden'], false], 0.05,
             ];
         if (coloured && outlined) {
             lineOpacity.push(['boolean', ['feature-state', 'active'], false]);

package/src/systems.js

@@ -0,0 +1,76 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023  David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+
+import { Control } from './controls';
+
+//==============================================================================
+
+export class SystemsManager
+{
+    constructor()
+    {
+
+    }
+}
+
+//==============================================================================
+
+export class SystemsControl extends Control
+{
+    constructor(flatmap, systems)
+    {
+        super(flatmap, 'system', 'systems');
+        this.__systems = systems;
+    }
+
+    __innerLinesHTML()
+    //================
+    {
+        const html = [];
+        for (const [name, system] of this.__systems.entries()) {
+            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+        }
+        return html;
+    }
+
+    __enableAll(enable)
+    //=================
+    {
+        for (const [name, system] of this.__systems.entries()) {
+            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
+            if (checkbox) {
+                checkbox.checked = enable;
+                this.__flatmap.enableSystem(name, enable);
+            }
+        }
+    }
+
+    __enableControl(id, enable)
+    //=========================
+    {
+        for (const [name, system] of this.__systems.entries()) {
+            if (id === system.id) {
+                this.__flatmap.enableSystem(name, enable);
+            }
+        }
+    }
+
+}