@abi-software/flatmap-viewer 2.3.0-b.1 → 2.3.0-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.3.0-b.1``
+* ``npm install @abi-software/flatmap-viewer@2.3.0-b.2``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.0-b.1",
+  "version": "2.3.0-b.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -38,14 +38,12 @@
     "browser-sync": "^2.26.7",
     "bs-fullscreen-message": "^1.1.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.7.3",
     "eslint": "^8.7.0",
     "express": "^4.17.1",
-    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
     "strip-ansi": "^7.0.1",
-    "style-loader": "^1.0.0",
-    "url-loader": "^4.1.0",
+    "style-loader": "^3.3.2",
     "webpack": "^5.16.0",
     "webpack-cli": "^4.4.0",
     "webpack-dev-middleware": "^4.1.0",

package/src/annotation.js

@@ -116,12 +116,6 @@ export class Annotator
     async __authorise(panel)
     //======================
     {
-/*
-        const testUser = {name: 'Testing...'};
-        this.__setUser(testUser);
-        this.__authorised = true;
-        return Promise.resolve(testUser);
-*/
         const abortController = new AbortController();
         setTimeout((panel) => {
             if (this.user === 'undefined') {

package/src/{controls.js → controls/controls.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -18,13 +18,6 @@ limitations under the License.
 
 ******************************************************************************/
 
-'use strict';
-
-//==============================================================================
-
-
-//==============================================================================
-
 // Make sure colour string is in `#rrggbb` form.
 // Based on https://stackoverflow.com/a/47355187
 

package/src/{info.js → controls/info.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -18,11 +18,7 @@ limitations under the License.
 
 ******************************************************************************/
 
-'use strict';
-
-//==============================================================================
-
-import { indexedProperties } from './search.js';
+import { indexedProperties } from '../search.js';
 
 //==============================================================================
 

package/src/{minimap.js → controls/minimap.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -45,10 +45,6 @@ limitations under the License.
 
 //==============================================================================
 
-'use strict';
-
-//==============================================================================
-
 import maplibre from 'maplibre-gl';
 
 //==============================================================================

package/src/controls/search.js

@@ -0,0 +1,113 @@
+/******************************************************************************
+
+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.
+
+**/
+//==============================================================================
+
+export class SearchControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+    }
+
+    onAdd(map)
+    //========
+    {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl search-control';
+
+        this._input = document.createElement('input');
+        this._input.id = 'search-control-input';
+        this._input.setAttribute('type', 'search');
+        this._input.setAttribute('visible', 'false');
+        this._input.setAttribute('placeholder', 'Search...');
+
+        this._button = document.createElement('button');
+        this._button.id = 'search-control-button';
+        this._button.className = 'control-button';
+        this._button.title = 'Search flatmap';
+        this._button.setAttribute('type', 'button');
+        this._button.setAttribute('aria-label', 'Search flatmap');
+        // https://iconmonstr.com/magnifier-6-svg/
+        this._button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="search-control-icon" viewBox="0 0 24 24">
+    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z"/>
+</svg>`;
+        this._container.appendChild(this._button);
+
+        this._container.onclick = this.onClick_.bind(this);
+        return this._container;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onRemove()
+    //========
+    {
+        this._container.parentNode.removeChild(this._container);
+        this._map = undefined;
+    }
+
+    searchMap_(search=true)
+    //=====================
+    {
+        this._input = this._container.removeChild(this._input);
+        this._input.setAttribute('visible', 'false');
+        const text = this._input.value;
+        if (search && text !== '') {
+            const results = this.__flatmap.search(text);
+            this.__flatmap.showSearchResults(results);
+        }
+    }
+
+    onKeyDown_(e)
+    //===========
+    {
+        if (e.key === 'Enter') {
+            this.searchMap_();
+        } else if (e.key === 'Escape') {
+            this.searchMap_(false);
+        }
+    }
+
+    onClick_(e)
+    //=========
+    {
+        const targetId = ('rangeTarget' in e) ? e.rangeTarget.id : e.target.id; // FF has rangeTarget
+        if (['search-control-button', 'search-control-icon'].includes(targetId)) {
+            if (this._input.getAttribute('visible') === 'false') {
+                this._container.appendChild(this._input);
+                this._container.appendChild(this._button);
+                this._input.setAttribute('visible', 'true');
+                this._input.onkeydown = this.onKeyDown_.bind(this);
+                this._input.value = '';
+                this.__flatmap.clearSearchResults();
+                this._input.focus();
+            } else {
+                this.searchMap_();
+            }
+        }
+    }
+}
+
+//==============================================================================

package/src/controls/systems.js

@@ -0,0 +1,66 @@
+/******************************************************************************
+
+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 SystemsControl extends Control
+{
+    constructor(flatmap, systems)
+    {
+        super(flatmap, 'system', 'systems');
+        this.__systems = systems;
+    }
+
+    __innerLinesHTML()
+    //================
+    {
+        const html = [];
+        for (const system of this.__systems) {
+            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${system.name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+        }
+        return html;
+    }
+
+    __enableAll(enable)
+    //=================
+    {
+        for (const system of this.__systems) {
+            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
+            if (checkbox) {
+                checkbox.checked = enable;
+                this.__flatmap.enableSystem(system.name, enable);
+            }
+        }
+    }
+
+    __enableControl(id, enable)
+    //=========================
+    {
+        for (const system of this.__systems) {
+            if (id === system.id) {
+                this.__flatmap.enableSystem(system.name, enable);
+            }
+        }
+    }
+
+}

package/src/flatmap-viewer.js

@@ -34,11 +34,12 @@ import '../static/css/flatmap-viewer.css';
 //==============================================================================
 
 import {MapServer} from './mapserver.js';
-import {MinimapControl} from './minimap.js';
-import {NavigationControl} from './controls.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
+import {MinimapControl} from './controls/minimap.js';
+import {NavigationControl} from './controls/controls.js';
+
 import * as images from './images.js';
 import * as utils from './utils.js';
 
@@ -1301,6 +1302,7 @@ export class MapManager
     * @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``.
+    * @arg options.annotator {boolean} Allow interactive annotation of features and paths.
     * @example
     * const humanMap1 = mapManager.loadMap('humanV1', 'div-1');
     *

package/src/interactions.js

@@ -34,14 +34,16 @@ import polylabel from 'polylabel';
 //==============================================================================
 
 import {Annotator} from './annotation';
-import {displayedProperties, InfoControl} from './info';
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, Pathways} from './pathways';
+import {COLOUR_ERROR, VECTOR_TILES_SOURCE} from './styling';
+import {SystemsManager} from './systems';
+
+import {displayedProperties, InfoControl} from './controls/info';
 import {BackgroundControl, LayerControl, NerveControl,
-        PathControl, SCKANControl} from './controls';
-import {SearchControl} from './search';
-import {VECTOR_TILES_SOURCE} from './styling';
-import {SystemsControl, SystemsManager} from './systems';
+        PathControl, SCKANControl} from './controls/controls';
+import {SearchControl} from './controls/search';
+import {SystemsControl} from './controls/systems';
 
 import * as pathways from './pathways';
 import * as utils from './utils';
@@ -144,25 +146,16 @@ export class UserInteractions
             }
         }
 
-        this.__featureIdToMapId = new Map();
-        this.__setupAnnotation();
+        // Add annotation capability
+        if (flatmap.options.annotator) {
+            this.__setupAnnotation();
+        } else {
+            this.__annotator = null;
+        }
 
         // Note features that are FC systems
 
-        this.__systems = new Map();
-        for (const [id, ann] of this._flatmap.annotations) {
-            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 ]
-                    });
-                }
-            }
-        }
+        this.__systemsManager = new SystemsManager(this._flatmap, this);
 
         // Add various controls when running standalone
 
@@ -191,7 +184,7 @@ export class UserInteractions
 
             // 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 SystemsControl(flatmap, this.__systemsManager.systems));
                 this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
             }
         }
@@ -258,10 +251,10 @@ export class UserInteractions
         const annotated_features = await this.__annotator.annotated_features();
 
         // Flag features that have annotations
-
+        this.__featureIdToMapId = new Map();
         for (const [mapId, ann] of this._flatmap.annotations) {
             this.__featureIdToMapId.set(ann.id, mapId);
-            const feature = this.mapFeature_(mapId);
+            const feature = this.mapFeature(mapId);
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'map-annotation': true });
                 if (annotated_features.indexOf(ann.id) >= 0) {
@@ -274,11 +267,13 @@ export class UserInteractions
     setFeatureAnnotated(featureId)
     //============================
     {
-        // featureId v's geoJSON id
-        const mapId = this.__featureIdToMapId.get(featureId);
-        const feature = this.mapFeature_(mapId);
-        if (feature !== undefined) {
-            this._map.setFeatureState(feature, { 'annotated': true });
+        if (this.__annotator) {
+            // featureId v's geoJSON id
+            const mapId = this.__featureIdToMapId.get(featureId);
+            const feature = this.mapFeature(mapId);
+            if (feature !== undefined) {
+                this._map.setFeatureState(feature, { 'annotated': true });
+            }
         }
     }
 
@@ -304,34 +299,35 @@ export class UserInteractions
     getSystems()
     //==========
     {
-        const systems = [];
-        for (const system of this.__systems.values()) {
-            systems.push({
-                name: system.name,
-                colour: system.colour,
-            });
-        }
-        return systems;
+        return this.__systemsManager.systems;
     }
 
     enableSystem(systemName, enable=true)
     //===================================
     {
-        if (this.__systems.has(systemName)) {
-            for (const featureId of this.__systems.get(systemName).featureIds) {
-                this.__enableFeatureWithChildren(featureId, enable);
+        this.__systemsManager.enable(systemName, 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);
             }
         }
     }
 
-    __enableFeatureWithChildren(featureId, enable=true)
-    //=================================================
+    __enableFeatureWithParents(featureId, enable=true)
+    //================================================
     {
-        const feature = this.mapFeature_(featureId);
+        const feature = this.mapFeature(featureId);
         if (feature !== undefined) {
-            this.__enableFeature(feature, enable);
-            for (const childFeatureId of feature.children) {
-                this.__enableFeatureWithChildren(childFeatureId, enable);
+            this.enableFeature(feature, enable);
+            for (const childFeatureId of feature.parents) {
+                this.__enableFeatureWithParents(childFeatureId, enable);
             }
         }
     }
@@ -348,8 +344,8 @@ export class UserInteractions
         }
     }
 
-    __enableFeature(feature, enable=true)
-    //===================================
+    enableFeature(feature, enable=true)
+    //=================================
     {
         if (feature !== undefined) {
             if (enable) {
@@ -361,8 +357,8 @@ export class UserInteractions
         }
     }
 
-    mapFeature_(featureId)
-    //====================
+    mapFeature(featureId)
+    //===================
     {
         const ann = this._flatmap.annotation(featureId);
         if (ann !== undefined) {
@@ -394,7 +390,7 @@ export class UserInteractions
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
         } else {
-            const feature = this.mapFeature_(featureId);
+            const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'selected': true });
                 this._selectedFeatureIds.set(featureId, 1);
@@ -411,7 +407,7 @@ export class UserInteractions
             if (references > 1) {
                 this._selectedFeatureIds.set(featureId, references - 1);
             } else {
-                const feature = this.mapFeature_(featureId);
+                const feature = this.mapFeature(featureId);
                 if (feature !== undefined) {
                     this._map.removeFeatureState(feature, 'selected');
                     this._selectedFeatureIds.delete(+featureId);
@@ -427,7 +423,7 @@ export class UserInteractions
     //==================
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
-            const feature = this.mapFeature_(featureId);
+            const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
                 this._map.removeFeatureState(feature, 'selected');
             }
@@ -457,7 +453,7 @@ export class UserInteractions
     //==========================
     {
         featureId = +featureId;   // Ensure numeric
-        this.__activateFeature(this.mapFeature_(featureId));
+        this.__activateFeature(this.mapFeature(featureId));
     }
 
     unhighlightFeatures_()
@@ -833,7 +829,7 @@ export class UserInteractions
                 const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
                 for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
                     if (+featureId !== lineFeatureId) {
-                        this.__activateFeature(this.mapFeature_(featureId));
+                        this.__activateFeature(this.mapFeature(featureId));
                     }
                 }
             }
@@ -957,6 +953,10 @@ export class UserInteractions
     __annotationEvent(feature)
     //========================
     {
+        if (!this.__annotator) {
+            return;
+        }
+
         event.preventDefault();
 
         // Remove any tooltip
@@ -1016,12 +1016,12 @@ export class UserInteractions
     {
         if ('nerveId' in feature.properties) {
             for (const featureId of this._pathways.nerveFeatureIds(feature.properties.nerveId)) {
-                this.__activateFeature(this.mapFeature_(featureId));
+                this.__activateFeature(this.mapFeature(featureId));
             }
         }
         if ('nodeId' in feature.properties) {
             for (const featureId of this._pathways.nodeFeatureIds(feature.properties.nodeId)) {
-                this.__activateFeature(this.mapFeature_(featureId));
+                this.__activateFeature(this.mapFeature(featureId));
             }
         }
     }
@@ -1046,7 +1046,7 @@ export class UserInteractions
     //=====================================
     {
         for (const featureId of featureIds) {
-            const feature = this.mapFeature_(featureId);
+            const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
                 if (enable) {
                     this._map.removeFeatureState(feature, 'hidden');
@@ -1257,7 +1257,7 @@ export class UserInteractions
                 const markerId = this.__markerIdByMarker.get(marker);
                 const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
-                const feature = this.mapFeature_(annotation.featureId);
+                const feature = this.mapFeature(annotation.featureId);
                 if (feature !== undefined) {
                     if (event.type === 'mouseenter') {
                         // Highlight on mouse enter

package/src/main.js

@@ -60,7 +60,8 @@ export async function standaloneViewer(map_endpoint=null, options={})
         debug: false,
         minimap: false,
         showPosition: false,
-        standalone: true
+        standalone: true,
+        annotator: true
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/search.js

@@ -36,99 +36,6 @@ export const indexedProperties = [
 
 //==============================================================================
 
-export class SearchControl
-{
-    constructor(flatmap)
-    {
-        this.__flatmap = flatmap;
-    }
-
-    onAdd(map)
-    //========
-    {
-        this._map = map;
-        this._container = document.createElement('div');
-        this._container.className = 'maplibregl-ctrl search-control';
-
-        this._input = document.createElement('input');
-        this._input.id = 'search-control-input';
-        this._input.setAttribute('type', 'search');
-        this._input.setAttribute('visible', 'false');
-        this._input.setAttribute('placeholder', 'Search...');
-
-        this._button = document.createElement('button');
-        this._button.id = 'search-control-button';
-        this._button.className = 'control-button';
-        this._button.title = 'Search flatmap';
-        this._button.setAttribute('type', 'button');
-        this._button.setAttribute('aria-label', 'Search flatmap');
-        // https://iconmonstr.com/magnifier-6-svg/
-        this._button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="search-control-icon" viewBox="0 0 24 24">
-    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z"/>
-</svg>`;
-        this._container.appendChild(this._button);
-
-        this._container.onclick = this.onClick_.bind(this);
-        return this._container;
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return 'top-right';
-    }
-
-    onRemove()
-    //========
-    {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
-    }
-
-    searchMap_(search=true)
-    //=====================
-    {
-        this._input = this._container.removeChild(this._input);
-        this._input.setAttribute('visible', 'false');
-        const text = this._input.value;
-        if (search && text !== '') {
-            const results = this.__flatmap.search(text);
-            this.__flatmap.showSearchResults(results);
-        }
-    }
-
-    onKeyDown_(e)
-    //===========
-    {
-        if (e.key === 'Enter') {
-            this.searchMap_();
-        } else if (e.key === 'Escape') {
-            this.searchMap_(false);
-        }
-    }
-
-    onClick_(e)
-    //=========
-    {
-        const targetId = ('rangeTarget' in e) ? e.rangeTarget.id : e.target.id; // FF has rangeTarget
-        if (['search-control-button', 'search-control-icon'].includes(targetId)) {
-            if (this._input.getAttribute('visible') === 'false') {
-                this._container.appendChild(this._input);
-                this._container.appendChild(this._button);
-                this._input.setAttribute('visible', 'true');
-                this._input.onkeydown = this.onKeyDown_.bind(this);
-                this._input.value = '';
-                this.__flatmap.clearSearchResults();
-                this._input.focus();
-            } else {
-                this.searchMap_();
-            }
-        }
-    }
-}
-
-//==============================================================================
-
 export class SearchIndex
 {
     constructor()

package/src/styling.js

@@ -135,19 +135,21 @@ export class FeatureFillLayer extends VectorStyleLayer
 
     paintStyle(options, changes=false)
     {
+        const ghostColour = '#D8D8D8';       // Function of BG colour?
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
             'fill-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                ['boolean', ['feature-state', 'hidden'], false], ghostColour,
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
                 'case',
-                ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                ['boolean', ['feature-state', 'hidden'], false], 0.1,
                 ['boolean', ['feature-state', 'selected'], false], 0.7,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
@@ -358,6 +360,38 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 //==============================================================================
 
+function sckanFilter(options)
+{
+    const sckanState = !'sckan' in options ? 'all'
+                     : options.sckan.toLowerCase();
+    const sckanFilter =
+        sckanState == 'none' ? [
+            ['!has', 'sckan']
+        ] :
+        sckanState == 'valid' ? [[
+            'any',
+            ['!has', 'sckan'],
+            [
+                'all',
+                ['has', 'sckan'],
+                ['==', 'sckan', true]
+            ]
+        ]] :
+        sckanState == 'invalid' ? [[
+            'any',
+            ['!has', 'sckan'],
+            [
+                'all',
+                ['has', 'sckan'],
+                ['!=', 'sckan', true]
+            ]
+        ]] :
+        [ ];
+    return sckanFilter;
+}
+
+//==============================================================================
+
 export class AnnotatedPathLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer)
@@ -365,6 +399,15 @@ export class AnnotatedPathLayer extends VectorStyleLayer
         super(id, 'annotated-path', sourceLayer);
     }
 
+    makeFilter(options={})
+    {
+        return [
+            'all',
+            ['==', '$type', 'LineString'],
+            ...sckanFilter(options)
+        ];
+    }
+
     paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
@@ -404,7 +447,7 @@ export class AnnotatedPathLayer extends VectorStyleLayer
         return {
             ...super.style(),
             'type': 'line',
-            'filter': ['==', '$type', 'LineString'],
+            'filter': this.makeFilter(options),
             'paint': this.paintStyle(options),
             'layout': {
                 'line-cap': 'square'
@@ -427,31 +470,7 @@ export class PathLineLayer extends VectorStyleLayer
 
     makeFilter(options={})
     {
-        const sckanState = !'sckan' in options ? 'all'
-                         : options.sckan.toLowerCase();
-        const sckan_filter =
-            sckanState == 'none' ? [
-                ['!has', 'sckan']
-            ] :
-            sckanState == 'valid' ? [[
-                'any',
-                ['!has', 'sckan'],
-                [
-                    'all',
-                    ['has', 'sckan'],
-                    ['==', 'sckan', true]
-                ]
-            ]] :
-            sckanState == 'invalid' ? [[
-                'any',
-                ['!has', 'sckan'],
-                [
-                    'all',
-                    ['has', 'sckan'],
-                    ['!=', 'sckan', true]
-                ]
-            ]] :
-            [ ];
+        const sckan_filter = sckanFilter(options);
 
         return this.__dashed ? [
             'all',

package/src/systems.js

@@ -16,61 +16,78 @@ 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)
+    constructor(flatmap, ui, enabled=true)
     {
-        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/>`);
+        this.__ui = ui;
+        this.__systems = new Map();
+        this.__enabledChildren = new Map();
+        for (const [id, ann] of flatmap.annotations) {
+            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 ],
+                        enabled: enabled
+                    });
+                }
+                for (const childId of ann['children']) {
+                    if (enabled) {
+                        const enabledCount = (this.__enabledChildren.has(childId))
+                                           ? this.__enabledChildren.get(childId)
+                                           : 0;
+                        this.__enabledChildren.set(childId, enabledCount + 1);
+                    } else {
+                        this.__enabledChildren.set(childId, 0);
+                    }
+                }
+            }
         }
-        return html;
     }
 
-    __enableAll(enable)
-    //=================
+    get systems()
+    //===========
     {
+        const systems = [];
         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);
-            }
+            systems.push({
+                name: name,
+                id: system.id,
+                colour: system.colour,
+                enabled: system.enabled
+            });
         }
+        return systems;
     }
 
-    __enableControl(id, enable)
-    //=========================
+    enable(systemName, enable=true)
+    //=============================
     {
-        for (const [name, system] of this.__systems.entries()) {
-            if (id === system.id) {
-                this.__flatmap.enableSystem(name, enable);
+        const system = this.__systems.get(systemName);
+        if (system !== undefined && enable !== system.enabled) {
+            for (const featureId of system.featureIds) {
+                const feature = this.__ui.mapFeature(featureId);
+                if (feature !== undefined) {
+                    this.__ui.enableFeature(feature, enable);
+                    for (const childFeatureId of feature.children) {
+                        const enabledCount = this.__enabledChildren.get(childFeatureId);
+                        if (enable && enabledCount === 0 || !enable && enabledCount == 1) {
+                            this.__ui.enableFeatureWithChildren(childFeatureId, enable);
+                        }
+                        this.__enabledChildren.set(childFeatureId, enabledCount + (enable ? 1 : -1));
+                    }
+                }
             }
+            system.enabled = enable;
         }
     }
-
 }
+
+//==============================================================================