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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.12-b.4",
+  "version": "2.2.13-b.2",
   "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,6 +797,20 @@ 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);
+        }
+    }
+
     //==========================================================================
 
     /**

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,32 +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']
-                    });
-                }
-            }
-        }
-
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -268,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)
@@ -281,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)
@@ -1058,6 +1119,7 @@ export class UserInteractions
                 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);
@@ -1074,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/pathways.js

@@ -32,6 +32,7 @@ const PATH_TYPES = [
     { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
     { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A", dashed: true},
     { type: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
+    { type: "motor", label: "Somatic lower motor", colour: "#98561D"},
     { type: "somatic", label: "Somatic lower motor", colour: "#98561D"},
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
     { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423", dashed: true},

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);
+            }
+        }
+    }
+
+}