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

package/package.json

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

package/src/controls.js

@@ -22,7 +22,6 @@ limitations under the License.
 
 //==============================================================================
 
-import * as pathways from './pathways.js';
 
 //==============================================================================
 
@@ -91,10 +90,11 @@ export class NavigationControl
 
 export class PathControl
 {
-    constructor(flatmap)
+    constructor(flatmap, pathTypes)
     {
         this._flatmap = flatmap;
         this._map = undefined;
+        this.__pathTypes = pathTypes;
     }
 
     getDefaultPosition()
@@ -117,12 +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/>`);
-        for (const path of pathways.PATH_TYPES) {
-            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.__checkedCount = 0;
+        for (const path of this.__pathTypes) {
+            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 = pathways.PATH_TYPES.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';
@@ -152,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);
@@ -164,11 +171,11 @@ export class PathControl
                     event.target.indeterminate = false;
                 }
                 if (event.target.checked) {
-                    this.__checkedCount = pathways.PATH_TYPES.length;
+                    this.__checkedCount = this.__pathTypes.length;
                 } else {
                     this.__checkedCount = 0;
                 }
-                for (const path of pathways.PATH_TYPES) {
+                for (const path of this.__pathTypes) {
                     const pathCheckbox = document.getElementById(`path-${path.type}`);
                     if (pathCheckbox) {
                         pathCheckbox.checked = event.target.checked;
@@ -187,7 +194,7 @@ export class PathControl
                 if (this.__checkedCount === 0) {
                     allPathsCheckbox.checked = false;
                     allPathsCheckbox.indeterminate = false;
-                } else if (this.__checkedCount === pathways.PATH_TYPES.length) {
+                } else if (this.__checkedCount === this.__pathTypes.length) {
                     allPathsCheckbox.checked = true;
                     allPathsCheckbox.indeterminate = false;
                 } else {
@@ -206,7 +213,7 @@ export class LayerControl
     constructor(flatmap, layerManager)
     {
         this.__flatmap = flatmap;
-        this.__manager = layerManager;
+        this.__layers = layerManager.layers;
         this.__map = undefined;
     }
 
@@ -224,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);
 
@@ -265,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') {
@@ -283,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 {
@@ -316,6 +323,151 @@ export class LayerControl
 
 //==============================================================================
 
+
+const SCKAN_STATES = [
+    {
+        'id': 'VALID',
+        'description': 'Path consistent with SCKAN'
+    },
+    {
+        'id': 'INVALID',
+        'description': 'Path inconsistent with SCKAN'
+    }
+];
+
+
+export class SCKANControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+        this.__map = undefined;
+        this.__state = 'valid';
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+        this.__container.id = 'flatmap-layer-control';
+
+        this.__sckan = document.createElement('div');
+        this.__sckan.id = 'sckan-control-text';
+        this.__sckan.className = 'flatmap-layer-grid';
+
+        const innerHTML = [];
+        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) {
+            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.__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';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide valid SCKAN paths');
+        this.__button.setAttribute('control-visible', 'false');
+        this.__button.textContent = 'SCKAN';
+        this.__button.title = 'Show/hide valid SCKAN paths';
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        return this.__container;
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'map-sckan-button') {
+            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);
+                this.__button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'sckan-all-paths') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    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(this.__state);
+            } else if (event.target.id.startsWith('sckan-')) {
+                const sckanId = event.target.id.substring(6);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                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();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/flatmap-viewer.js

@@ -314,6 +314,21 @@ class FlatMap
         }
     }
 
+    /**
+     * Hide or show all paths valid in SCKAN.
+     *
+     * @param      {string}   validity Either ``VALID`` or ``INVALID``
+     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
+     *                                       of the type(s) otherwise only hide the paths
+     */
+    showSckanPaths(state='valid')
+    //===========================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.showSckanPaths(state);
+        }
+    }
+
     /**
      * Load images and patterns/textures referenced in style rules.
      *
@@ -428,12 +443,6 @@ class FlatMap
         return `${this.__uuid}-${this._mapNumber}`;
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        return this._userInteractions.activeLayerNames;
-    }
-
     get annotations()
     //===============
     {
@@ -739,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.
      *
@@ -836,13 +873,21 @@ class FlatMap
             'label',
             'models',
             'nodeId',
-            'source'
+            'source',
+            'hyperlinks'
+        ];
+        const jsonProperties = [
+            'hyperlinks'
         ];
         for (const property of exportedProperties) {
             if (property in properties) {
                 const value = properties[property];
                 if (value !== undefined) {
-                    data[property] = properties[property];
+                    if (jsonProperties.indexOf(property) >= 0) {
+                        data[property] = JSON.parse(properties[property])
+                    } else {
+                        data[property] = properties[property];
+                    }
                 }
             }
         }
@@ -1168,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``.
@@ -1185,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');
     *
@@ -1225,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)) {
@@ -1300,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/interactions.js

@@ -37,8 +37,8 @@ import {ContextMenu} from './contextmenu.js';
 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, PathControl} from './controls.js';
+import {PATH_TYPES, PATHWAYS_LAYER, Pathways} from './pathways.js';
+import {BackgroundControl, LayerControl, PathControl, SCKANControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
@@ -130,46 +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) {
-            this._map.addControl(new PathControl(flatmap));
-        }
+            // 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));
+
+            // A SCKAN path control for FC maps
+            if (flatmap.options.style === 'fcdiagram') {
+                this._map.addControl(new SCKANControl(flatmap));
+            }
         }
 
         // Flag features that have annotations
@@ -220,7 +221,7 @@ export class UserInteractions
         return {
             center: this._map.getCenter().toArray(),
             zoom: this._map.getZoom(),
-            layers: this.activeLayerNames
+            layers: this.layers
         };
     }
 
@@ -252,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)
@@ -672,9 +679,9 @@ export class UserInteractions
                                                   : '';
             if ('hyperlink' in properties) {
                 if (label === '') {
-                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a></div>`;
+                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${properties.hyperlink}</a></div>`;
                 } else {
-                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a><br/>${label}</div>`;
+                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${label}</a></div>`;
                 }
             } else {
                 return `<div class='flatmap-feature-label'>${label}</div>`;
@@ -1021,6 +1028,12 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
+    showSckanPaths(state='valid')
+    //===========================
+    {
+        this._layerManager.setFilter({sckan: state});
+    }
+
     //==============================================================================
 
     // Find where to place a label or popup on a feature

package/src/layers.js

@@ -35,12 +35,13 @@ const RASTER_LAYERS_ID = 'background-image-layer';
 
 class MapStylingLayers
 {
-    constructor(flatmap, layerId, options)
+    constructor(flatmap, layer, options)
     {
         this.__map = flatmap.map;
-        this.__id = layerId;
-        this.__layers = [];
+        this.__id = layer.id;
+        this.__description = layer.description;
         this.__active = true;
+        this.__layers = [];
         this.__layerOptions = options;
         this.__separateLayers = flatmap.options.separateLayers;
     }
@@ -51,6 +52,12 @@ class MapStylingLayers
         return this.__id;
     }
 
+    get description()
+    //===============
+    {
+        return this.__description;
+    }
+
     get active()
     //==========
     {
@@ -85,6 +92,16 @@ class MapStylingLayers
         return this.__separateLayers ? `${this.__id}_${sourceLayer}`
                                      : sourceLayer;
     }
+
+    setColour(options)
+    {
+
+    }
+
+    setFilter(options)
+    {
+
+    }
 }
 
 //==============================================================================
@@ -93,7 +110,7 @@ class MapFeatureLayers extends MapStylingLayers
 {
     constructor(flatmap, layer, options)
     {
-        super(flatmap, layer.id, options);
+        super(flatmap, layer, options);
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
 
@@ -108,7 +125,7 @@ class MapFeatureLayers extends MapStylingLayers
                 this.__addStyleLayer(style.FeatureLineLayer);
                 this.__addStyleLayer(style.FeatureBorderLayer);
             }
-            this.__addPathwayStyleLayers(this.__layerOptions);
+            this.__addPathwayStyleLayers();
             if (vectorFeatures) {
                 this.__addStyleLayer(style.FeatureLargeSymbolLayer);
                 if (!flatmap.options.tooltips) {
@@ -138,8 +155,12 @@ class MapFeatureLayers extends MapStylingLayers
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
                 .indexOf(pathwaysVectorSource) >= 0) {
+            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
+
             this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER);
             this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER);
+
             this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
             this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
             this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
@@ -156,6 +177,17 @@ class MapFeatureLayers extends MapStylingLayers
             }
         }
     }
+
+    setFilter(options)
+    //================
+    {
+        for (const layer of this.__layers) {
+            const filter = layer.makeFilter(options);
+            if (filter !== null) {
+                this.__map.setFilter(layer.id, filter, {validate: true});
+            }
+        }
+    }
 }
 
 //==============================================================================
@@ -164,7 +196,11 @@ class MapRasterLayers extends MapStylingLayers
 {
     constructor(flatmap, options, bodyLayerId=null)
     {
-        super(flatmap, RASTER_LAYERS_ID, options);
+        const rasterLayer = {
+            id: RASTER_LAYERS_ID,
+            description: RASTER_LAYERS_NAME
+        };
+        super(flatmap, rasterLayer, options);
         if (bodyLayerId !== null) {
             const layerId = `${bodyLayerId}_${FEATURES_LAYER}`;
             const source = flatmap.options.separateLayers ? layerId : FEATURES_LAYER;
@@ -209,11 +245,11 @@ export class LayerManager
     {
         this.__flatmap = flatmap;
         this.__map = flatmap.map;
-        this.__layers = new Map;
         this.__mapLayers = new Map;
         this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
             colour: true,
-            outline: true
+            outline: true,
+            sckan: 'valid'
         });;
         const backgroundLayer = new style.BackgroundLayer();
         if ('background' in flatmap.options) {
@@ -234,44 +270,29 @@ export class LayerManager
             for (const layer of flatmap.layers) {
                 rasterLayers.addLayer(layer);
             }
-            this.__layers.set(RASTER_LAYERS_ID, {
-                id: RASTER_LAYERS_ID,
-                description: RASTER_LAYERS_NAME
-            });
             this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
         } else {
             this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
-           this.__addFeatureLayer(layer);
+            this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                                layer,
+                                                                this.__layerOptions));
         }
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        const activeNames = [];
-        for (const mapLayer of this.__mapLayers.values()) {
-            if (mapLayer.active) {
-                activeNames.push(mapLayer.id);
-            }
-        }
-        return activeNames;
-    }
-
-    __addFeatureLayer(layer)
-    //======================
-    {
-        this.__layers.set(layer.id, layer);
-        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
-                                                            layer,
-                                                            this.__layerOptions));
-    }
-
     get layers()
     //==========
     {
-        return Array.from(this.__layers.values());
+        const layers = [];
+        for (const mapLayer of this.__mapLayers.values()) {
+            layers.push({
+                id: mapLayer.id,
+                description: mapLayer.description,
+                enabled: mapLayer.active
+            });
+        }
+        return layers;
     }
 
     activate(layerId, enable=true)
@@ -291,14 +312,23 @@ export class LayerManager
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setColour(options={})
+    //===================
     {
         this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
         for (const mapLayer of this.__mapLayers.values()) {
             mapLayer.setColour(this.__layerOptions);
         }
     }
+
+    setFilter(options={})
+    //===================
+    {
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
+        for (const mapLayer of this.__mapLayers.values()) {
+            mapLayer.setFilter(this.__layerOptions);
+        }
+    }
 }
 
 //==============================================================================

package/src/main.js

@@ -57,14 +57,10 @@ export async function standaloneViewer(map_endpoint=null, options={})
     const mapOptions = Object.assign({
         tooltips: true,
         background: defaultBackground,
-        backgroundControl: true,
         debug: false,
         minimap: false,
-        searchable: true,
-        featureInfo: true,
         showPosition: false,
-        pathControls: true,
-        layerControl: true
+        standalone: true
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/pathways.js

@@ -28,16 +28,22 @@ export const PATHWAYS_LAYER = 'pathways';
 
 export const PATH_TYPES = [
     { type: "cns", label: "CNS", colour: "#9B1FC1"},
-    { type: "lcn", label: "Local circuit neuron", colour: "#F19E38"},
+    { type: "intracardiac", label: "Local circuit neuron", colour: "#F19E38"},
     { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
     { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
     { type: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
     { 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"},
-    { type: "other", label: "Other neuron type", colour: "#888"}
+    { type: "other", label: "Other neuron type", colour: "#888"},
+    { type: "arterial", label: "Arterial blood vessel", colour: "#F00"},
+    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA"},
+    { type: "centreline", label: "Nerve centrelines", colour: "#2F6EBA", enabled: false}
 ];
 
+export const PATH_STYLE_RULES =
+    PATH_TYPES.flatMap(pathType => [['==', ['get', 'kind'], pathType.type], pathType.colour]);
+
 //==============================================================================
 
 function reverseMap(mapping)
@@ -138,6 +144,19 @@ export class Pathways
         }
     }
 
+    get pathTypes()
+    //=============
+    {
+        const pathTypes = [];
+        for (const pathType of PATH_TYPES) {
+            if (pathType.type in this.__typePaths
+            && this.__typePaths[pathType.type].length > 0) {
+                pathTypes.push(pathType);
+            }
+        }
+        return pathTypes;
+    }
+
     addPathsToFeatureSet_(paths, featureSet)
     //======================================
     {

package/src/styling.js

@@ -26,6 +26,10 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 //==============================================================================
 
+import {PATH_STYLE_RULES} from './pathways.js';
+
+//==============================================================================
+
 class VectorStyleLayer
 {
     constructor(id, suffix, sourceLayer)
@@ -40,6 +44,11 @@ class VectorStyleLayer
         return this.__id;
     }
 
+    makeFilter(options)
+    {
+        return null;
+    }
+
     paintStyle(options, changes=false)
     {
         return {};
@@ -130,7 +139,8 @@ export class FeatureFillLayer extends VectorStyleLayer
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], 0.7,
-                ['has', 'colour'], activeRasterLayer ? 0.008 : 1.0,
+                ['has', 'opacity'], ['get', 'opacity'],
+                ['has', 'colour'], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.7,
                 ['has', 'node'], 0.3,
                 ['any',
@@ -179,7 +189,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push('red');
+        lineColour.push('black');
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
             lineColour.push('blue');
@@ -245,26 +255,32 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, options={})
     {
+        const dashed = ('dashed' in options && options.dashed);
         const filterType = dashed ? 'line-dash' : 'line';
         super(id, `feature-${filterType}`, sourceLayer);
-        this.__filter = dashed ?
-            [
-                'any',
-                ['==', 'type', `line-dash`]
-            ]
-        :
+        this.__dashed = dashed;
+    }
+
+    makeFilter(options={})
+    {
+        return this.__dashed ? [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['==', 'type', `line-dash`]
+        ] : [
+            'all',
+            ['==', '$type', 'LineString'],
             [
                 'any',
-                ['has', 'centreline'],
                 ['==', 'type', 'bezier'],
                 ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+            ]
+        ];
     }
 
-    paintStyle(options)
+    paintStyle(options, changes=false)
     {
         const coloured = !('colour' in options) || options.colour;
         const paintStyle = {
@@ -274,7 +290,6 @@ export class FeatureLineLayer extends VectorStyleLayer
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['==', ['get', 'type'], 'network'], '#AFA202',
-                ['has', 'centreline'], '#888',
                 options.authoring ? '#C44' : '#444'
             ],
             'line-opacity': [
@@ -288,7 +303,6 @@ export class FeatureLineLayer extends VectorStyleLayer
                 'let',
                 'width', [
                     'case',
-                        ['has', 'centreline'], 1.2,
                         ['==', ['get', 'type'], 'network'], 1.2,
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
                         ['boolean', ['feature-state', 'active'], false], 1.2,
@@ -308,7 +322,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         if (this.__dashed) {
             paintStyle['line-dasharray'] = [3, 2];
         }
-        return paintStyle;
+        return super.changedPaintStyle(paintStyle, changes);
     }
 
     style(options)
@@ -316,12 +330,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         return {
             ...super.style(),
             'type': 'line',
-            'filter': [
-                'all',
-                ['==', '$type', 'LineString'],
-                this.__filter
-                 // not for paths...
-            ],
+            'filter': this.makeFilter(options),
             'paint': this.paintStyle(options)
         };
     }
@@ -333,7 +342,7 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, sourceLayer, {dashed: true});
     }
 }
 
@@ -341,25 +350,63 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 export class PathLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, options={})
     {
+        const dashed = ('dashed' in options && options.dashed);
         const filterType = dashed ? 'line-dash' : 'line';
         super(id, `path-${filterType}`, sourceLayer);
-        this.__filter = dashed ?
-            [
+        this.__dashed = dashed;
+    }
+
+    makeFilter(options={})
+    {
+        const sckanState = !'sckan' in options ? 'all'
+                         : options.sckan.toLowerCase();
+        const sckan_filter =
+            sckanState == 'none' ? [
+                ['!has', 'sckan']
+            ] :
+            sckanState == 'valid' ? [[
                 'any',
-                ['==', 'type', `line-dash`]
-            ]
-        :
+                ['!has', 'sckan'],
+                [
+                    'all',
+                    ['has', 'sckan'],
+                    ['==', 'sckan', true]
+                ]
+            ]] :
+            sckanState == 'invalid' ? [[
+                'any',
+                ['!has', 'sckan'],
+                [
+                    'all',
+                    ['has', 'sckan'],
+                    ['!=', 'sckan', true]
+                ]
+            ]] :
+            [ ];
+
+        return this.__dashed ? [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['==', 'type', `line-dash`],
+            ...sckan_filter
+        ] : [
+            'all',
+            ['==', '$type', 'LineString'],
             [
                 'any',
                 ['==', 'type', 'bezier'],
-                ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+                [
+                    'all',
+                    ['==', 'type', `line`],
+                    ...sckan_filter
+                ]
+            ]
+        ];
     }
 
-    paintStyle(options, changes=false)
+    paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
@@ -368,40 +415,34 @@ export class PathLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
-                ['==', ['get', 'kind'], 'error'], '#FFFE0E',
+                ['has', 'error'], '#FFFE0E',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
-                ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
-                ['==', ['get', 'kind'], 'lcn'], '#F19E38',
-                ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',
-                ['==', ['get', 'kind'], 'para-pre'], '#3F8F4A',
-                ['==', ['get', 'kind'], 'somatic'], '#98561D',
-                ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
-                ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
-                ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
+                ...PATH_STYLE_RULES,
                 '#888'
             ],
             'line-opacity': [
                 'case',
-                    ['boolean', ['feature-state', 'hidden'], false], 0.1,
+                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
-                    ['boolean', ['feature-state', 'active'], false], 0.8,
-                dimmed ? 0.1 : 0.5
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                dimmed ? 0.1 : 0.8
             ],
             'line-width': [
                 'let',
-                'width', [
+                'width', ["*", [
                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
-                        ['==', ['get', 'kind'], 'error'], 1,
+                        ['has', 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
-                        ['boolean', ['feature-state', 'selected'], false], 1.2,
+                        ['boolean', ['feature-state', 'selected'], false], 0.6,
                         ['boolean', ['feature-state', 'active'], false], 0.9,
-                    0.8
-                    ], [
-                    'interpolate',
+                    0.6
+                    ],
+                    ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
+                    ['interpolate',
                         ['exponential', 2],
                         ['zoom'],
                          2, ["*", ['var', 'width'], ["^", 2, -0.5]],
@@ -411,21 +452,17 @@ export class PathLineLayer extends VectorStyleLayer
             ]
         };
         if (this.__dashed) {
-            paintStyle['line-dasharray'] = [3, 2];
+            paintStyle['line-dasharray'] = [1, 1];
         }
         return super.changedPaintStyle(paintStyle, changes);
     }
 
-    style(options)
+    style(options={})
     {
         return {
             ...super.style(),
             'type': 'line',
-            'filter': [
-                'all',
-                ['==', '$type', 'LineString'],
-                this.__filter
-            ],
+            'filter': this.makeFilter(options),
             'layout': {
                 'line-cap': 'butt'
             },
@@ -440,8 +477,93 @@ export class PathDashlineLayer extends PathLineLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, sourceLayer, {dashed: true});
+    }
+}
+
+//==============================================================================
+
+class CentrelineLayer extends VectorStyleLayer
+{
+    constructor(id, type, sourceLayer)
+    {
+        super(id, `centreline-${type}`, sourceLayer);
+        this.__type = type;
+    }
+
+    paintStyle(options, changes=false)
+    {
+        const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': (this.__type == 'edge') ? '#000' : [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'active'], false], '#444',
+                '#CCC'
+            ],
+            'line-opacity': [
+                'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                    ['boolean', ['feature-state', 'selected'], false], 1.0,
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                0.8
+            ],
+            'line-width': [
+                'let',
+                'width',
+                    (this.__type == 'edge') ? 1.6 : 1.2,
+                    [
+                    'interpolate',
+                        ['exponential', 2],
+                        ['zoom'],
+                         2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+                         7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+                         9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+                ]
+            ]
+            // Need to vary width based on zoom??
+            // Or opacity??
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': [
+                'all',
+                ['==', '$type', 'LineString'],
+                ['==', 'kind', 'centreline']
+            ],
+            'paint': this.paintStyle(options),
+            'layout': {
+                'line-cap': 'square',
+                'line-join': 'bevel'
+            }
+        };
+    }
+}
+
+
+export class CentrelineEdgeLayer extends CentrelineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'edge', sourceLayer);
+    }
+
+}
+
+export class CentrelineTrackLayer extends CentrelineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'track', sourceLayer);
     }
+
+
 }
 
 //==============================================================================
@@ -461,6 +583,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'filter': [
                  'all',
                  ['==', '$type', 'LineString'],
+                 ['!=', 'kind', 'centreline'],
                  ['==', 'type', 'nerve']
             ],
             'paint': {
@@ -570,14 +693,7 @@ export class NervePolygonFill extends VectorStyleLayer
                     'case',
                     ['==', ['get', 'kind'], 'bezier-end'], 'red',
                     ['==', ['get', 'kind'], 'bezier-control'], 'green',
-                    ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
-                    ['==', ['get', 'kind'], 'lcn'], '#F19E38',
-                    ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',
-                    ['==', ['get', 'kind'], 'para-pre'], '#3F8F4A',
-                    ['==', ['get', 'kind'], 'somatic'], '#98561D',
-                    ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
-                    ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
-                    ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
+                    ...PATH_STYLE_RULES,
                     'white'
                 ],
                 'fill-opacity': [

package/static/flatmap-viewer.css

@@ -205,7 +205,7 @@ label[for=path-all-paths] {
 .nerve-cns {
     background: #9B1FC1;
 }
-.nerve-lcn {
+.nerve-intracardiac {
     background: #F19E38;
 }
 .nerve-other {