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

package/package.json

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

package/src/controls.js

@@ -22,6 +22,8 @@ limitations under the License.
 
 //==============================================================================
 
+// Needed for Webpack
+import zoomInButton from '../static/images/zoom-in-button.png'
 
 //==============================================================================
 
@@ -118,6 +120,9 @@ 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 this.__pathTypes) {
+            // need to set style background instead of class...
+            // background: #2A62F6;
+            // background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
             innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line nerve-${path.type}"></div><input id="path-${path.type}" type="checkbox" checked/>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
@@ -316,6 +321,133 @@ 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;
+    }
+
+    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 = [];
+        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" checked/>`);
+        for (const state of SCKAN_STATES) {
+            innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" checked/>`);
+        }
+        this.__sckan.innerHTML = innerHTML.join('\n');
+
+        this.__sckanCount = SCKAN_STATES.length;
+        this.__checkedCount = this.__sckanCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/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');
+                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.__checkedCount = this.__sckanCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const state of SCKAN_STATES) {
+                    const sckanCheckbox = document.getElementById(`sckan-${state.id}`);
+                    if (sckanCheckbox) {
+                        sckanCheckbox.checked = event.target.checked;
+                        this.__flatmap.showSckanPaths(state.id, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('sckan-')) {
+                const sckanId = event.target.id.substring(6);
+                this.__flatmap.showSckanPaths(sckanId, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allLayersCheckbox = document.getElementById('sckan-all-paths');
+                if (this.__checkedCount === 0) {
+                    allLayersCheckbox.checked = false;
+                    allLayersCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__sckanCount) {
+                    allLayersCheckbox.checked = true;
+                    allLayersCheckbox.indeterminate = false;
+                } else {
+                    allLayersCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/editor.js

@@ -0,0 +1,198 @@
+import { Bezier } from "bezier-js";
+
+
+class BezierCurve
+{
+    constructor(id, ...points) {
+        this.__id = id;
+        this.__bezier = new Bezier(...points);
+    }
+
+    asGeoJSON(samples=100)
+    {
+        const coords = [];
+        for (let ts = 0; ts <= samples; ts++) {
+            const pt = this.__bezier.get(float(ts)/float(samples));
+            coords.push([pt.x, pt.y]);
+        }
+        return {
+            'type': 'Feature',
+            'geometry': {
+                'type': 'LineString',
+                'coordinates': coords
+            },
+            'properties': {
+                'bezier': this.__id
+            }
+        };
+    }
+
+    asPoints()
+    {
+        const geojson = [];
+        for (const n of [0, 1, 2, 3]) {
+            const pt = this.__bezier.points[n];
+            geojson.push({
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [pt.x, pt.y]
+                },
+                'properties': {
+                    'bezier': this.__id,
+                    'point': n
+                }
+            });
+        }
+        return geojson;
+    }
+}
+
+
+export class NetworkEditor
+{
+    constructor(flatmap)
+    {
+        this.__map = flatmap.map;
+        this.__canvas = this.__map.getCanvasContainer();
+ 
+        this.__geojson = {  // lines and points as separate sources???
+            'type': 'FeatureCollection',
+            'features': [
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Point',
+                        'coordinates': [0, 0]
+                    },
+                    'properties': {
+                        'id': 0
+                    }
+                }
+            ]
+        };
+
+        // Add a single point to the map
+        this.__map.addSource('curves', {
+            'type': 'geojson',
+            'data': this.__geojson
+        });
+
+        this.__map.addLayer({
+            'id': 'lines',
+            'type': 'line',
+            'source': 'curves',
+            'paint': {
+                'line-color': '#3887be'
+            }
+        });
+        this.__map.addLayer({
+            'id': 'points',
+            'type': 'circle',
+            'source': 'curves',
+            'paint': {
+                'circle-radius': 10,
+                'circle-color': '#3887be'
+            }
+        });
+
+        this.__currentPoint = null;
+
+        this.__map.on('mouseenter', this.mouseEnter.bind(this));
+        this.__map.on('mouseleave', this.mouseLeave.bind(this));
+        this.__map.on('mousedown', this.mouseDown.bind(this));
+        this.__map.on('touchstart', this.touchStart.bind(this));
+    }
+
+    addPoint(coords)
+    {
+         const nextId = this.__geojson.features.length;
+         this.__geojson.features.push({
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Point',
+                'coordinates': coords
+            },
+            'properties': {
+                'id': nextId
+            }
+        });
+        this.__map.getSource('curves').setData(this.__geojson);
+        return nextId;
+    }
+
+    mouseEnter(e) {
+        console.log('Mouse enter...');
+
+        this.__map.setPaintProperty('lines', 'line-color', '#3bb2d0');
+        this.__map.setPaintProperty('points', 'circle-color', '#3bb2d0');
+        this.__canvas.style.cursor = 'move';
+    }
+
+         
+    mouseLeave(e) {
+        this.__map.setPaintProperty('lines', 'line-color', '#3887be');
+        this.__map.setPaintProperty('points', 'circle-color', '#3887be');
+        this.__canvas.style.cursor = '';
+    }
+
+
+    mouseDown(e) {
+        console.log('Mouse down...')
+        // Prevent the default map drag behavior.
+        e.preventDefault();
+
+
+        const features = this.__map.queryRenderedFeatures(e.point, {'layers': ['lines', 'points']});
+        if (features.length === 0) {
+            const coords = e.lngLat;
+            this.__currentPoint = this.addPoint([coords.lng, coords.lat]);
+        } else {
+            const currentPoint = features[0].properties.id;
+            if (this.__currentPoint === null) {
+                this.__currentPoint = currentPoint;
+            } else if (this.__currentPoint === currentPoint) {
+                this.__currentPoint = null;
+            }
+        }
+
+        this.__canvas.style.cursor = 'grab';
+
+        this.__map.on('mousemove', this.onMove.bind(this));
+        this.__map.once('mouseup', this.onUp.bind(this));
+
+    }
+         
+    touchStart(e) {
+        if (e.points.length !== 1) return;
+
+        // Prevent the default map drag behavior.
+        e.preventDefault();
+
+        this.__map.on('touchmove', this.onMove.bind(this));
+        this.__map.once('touchend', this.onUp.bind(this));
+    }
+
+    onMove(e) {
+        console.log('Mouse move...')
+
+        // Set a UI indicator for dragging.
+        this.__canvas.style.cursor = 'grabbing';  // ????
+
+        if (this.__currentPoint !== null) {
+            const coords = e.lngLat;
+            this.__geojson.features[this.__currentPoint].geometry.coordinates = [coords.lng, coords.lat];
+            this.__map.getSource('curves').setData(this.__geojson);
+        }
+    }
+
+    onUp(e) {
+        console.log('End draw at', e.lngLat)
+
+        this.__canvas.style.cursor = '';
+
+        // Unbind mouse/touch events
+        this.__map.off('mousemove', this.onMove.bind(this));
+        this.__map.off('touchmove', this.onMove.bind(this));
+    }
+}

package/src/flatmap-viewer.js

@@ -192,7 +192,8 @@ class FlatMap
                 this._initialState = this.getState();
 
                 // Add a minimap if option set
-
+                // Put this above search, info, etc...
+                // ==> add all controls here (via interactions.js...)
                 if (this.options.minimap) {
                     this._minimap = new MinimapControl(this, this.options.minimap);
                         this._map.addControl(this._minimap);
@@ -314,6 +315,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(validity, enable=true)
+    //===================================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.showSckanPaths(validity, enable);
+        }
+    }
+
     /**
      * Load images and patterns/textures referenced in style rules.
      *
@@ -834,15 +850,24 @@ class FlatMap
             'dataset',
             'kind',
             'label',
+            'markup',
             '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];
+                    }
                 }
             }
         }
@@ -1117,6 +1142,7 @@ export class MapManager
         let latestMap = null;
         let lastCreatedTime = '';
         for (const map of this._mapList) {
+            // We can break/return if we have a UUID match...
             if (('uuid' in map && mapDescribes === map.uuid
              || mapDescribes === map.id
              || 'taxon' in map && mapDescribes === map.taxon

package/src/info.js

@@ -29,6 +29,10 @@ import { indexedProperties } from './search.js';
 export const displayedProperties = [
     'id',
     'class',
+    'featureId',
+    'tile-layer',
+    'layer',
+    'kind',
     ...indexedProperties
 ];
 

package/src/interactions.js

@@ -38,7 +38,7 @@ import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
 import {PATH_TYPES, PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {BackgroundControl, LayerControl, PathControl} from './controls.js';
+import {BackgroundControl, LayerControl, PathControl, SCKANControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
@@ -171,6 +171,8 @@ export class UserInteractions
 
         if (flatmap.options.layerControl) {
             this._map.addControl(new LayerControl(flatmap, this._layerManager));
+            // ************************************
+            //this._map.addControl(new SCKANControl(flatmap));
         }
 
         // Flag features that have annotations
@@ -178,6 +180,9 @@ export class UserInteractions
 
         for (const [id, ann] of flatmap.annotations) {
             const feature = this.mapFeature_(id);
+            if (id == 118) {
+                console.log(feature, ann);
+            }
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'annotated': true });
             }
@@ -556,6 +561,7 @@ export class UserInteractions
                     }
                     bbox = expandBounds(bbox, annotation.bounds);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
+// FC may have lines that are not pathways features, esp. when authoring...
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
                             if (select) {
                                 this.selectFeature_(pathFeatureId);
@@ -777,6 +783,10 @@ export class UserInteractions
                 }
             }
         } else {
+            // Allow tooltip for body but no highlighting/activation??
+            // More generally, only highlight a feature if all "within" the viewport??
+            // -- then as we zoom outermost features wouldn't highlight (but still show tooltip)
+            // -- or highlight in a more subtle way (eg. opacity change and not colour change)??
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
                                                              || 'label' in feature.properties
                                                              || 'node' in feature.properties)
@@ -1022,6 +1032,11 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
+    showSckanPaths(validity, enable=true)
+    //===================================
+    {
+    }
+
     //==============================================================================
 
     // Find where to place a label or popup on a feature

package/src/layers.js

@@ -20,6 +20,9 @@ limitations under the License.
 
 'use strict';
 
+
+// See https://stevage.github.io/map-gl-utils/ for layering ideas...
+
 //==============================================================================
 
 import {PATHWAYS_LAYER} from './pathways.js';

package/src/main.js

@@ -92,6 +92,8 @@ export async function standaloneViewer(map_endpoint=null, options={})
         mapManager.loadMap(id, 'map-canvas', (eventType, ...args) => {
                 if (args[0].type === 'control' && args[0].control === 'background') {
                     mapOptions.background = args[0].value;
+                } else if (eventType === 'click') {
+                    console.log(args);
                 }
             }, mapOptions)
             .then(map => {

package/src/minimap.js

@@ -300,7 +300,7 @@ export class MinimapControl
             const newBounds = this.moveTrackingRect_(offset);
 
             this._map.fitBounds(newBounds, {
-                duration: 80,
+                duration: 80,   // Why these options??
                 noMoveStart: true
             });
         }

package/src/newcontrols.js

@@ -0,0 +1,617 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019  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.
+
+******************************************************************************/
+
+'use strict';
+
+//==============================================================================
+
+// Needed for Webpack
+import zoomInButton from '../static/images/zoom-in-button.png'
+
+//==============================================================================
+
+// Make sure colour string is in `#rrggbb` form.
+// Based on https://stackoverflow.com/a/47355187
+
+function standardise_color(str){
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = str;
+    const colour = ctx.fillStyle;
+    canvas.remove()
+    return colour;
+}
+
+//==============================================================================
+
+export class NavigationControl
+{
+    constructor(flatmap)
+    {
+        this._flatmap = flatmap;
+        this._map = undefined;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl navigation-group';
+        this._container.innerHTML = `<button id="flatmap-zoom-in" class="navigation-zoom-in" type="button" title="Zoom in" aria-label="Zoom in"></button>
+<button id="flatmap-zoom-out" class="navigation-zoom-out" type="button" title="Zoom out" aria-label="Zoom out"></button>
+<button id="flatmap-reset" class="navigation-reset" type="button" title="Reset" aria-label="Reset"></button>`;
+        this._container.onclick = this.onClick_.bind(this);
+        return this._container;
+    }
+
+    onRemove()
+    //========
+    {
+        this._container.parentNode.removeChild(this._container);
+        this._map = undefined;
+    }
+
+    onClick_(e)
+    //=========
+    {
+        if        (e.target.id === 'flatmap-zoom-in') {
+            this._flatmap.zoomIn();
+        } else if (e.target.id === 'flatmap-zoom-out') {
+            this._flatmap.zoomOut();
+        } else if (e.target.id === 'flatmap-reset') {
+            this._flatmap.resetMap();
+        }
+    }
+}
+
+//==============================================================================
+
+export class PathControl
+{
+    constructor(flatmap, pathTypes)
+    {
+        this._flatmap = flatmap;
+        this._map = undefined;
+        this.__pathTypes = pathTypes;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl';
+        this._container.id = 'flatmap-nerve-key';
+
+        this._legend = document.createElement('div');
+        this._legend.id = 'nerve-key-text';
+        this._legend.className = 'flatmap-nerve-grid';
+
+        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 this.__pathTypes) {
+            // need to set style background instead of class...
+            // background: #2A62F6;
+            // background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line nerve-${path.type}"></div><input id="path-${path.type}" type="checkbox" checked/>`);
+        }
+        this._legend.innerHTML = innerHTML.join('\n');
+        this.__checkedCount = this.__pathTypes.length;
+        this.__halfCount = Math.trunc(this.__checkedCount/2);
+
+        this._button = document.createElement('button');
+        this._button.id = 'nerve-key-button';
+        this._button.className = 'control-button text-button';
+        this._button.setAttribute('type', 'button');
+        this._button.setAttribute('aria-label', 'Nerve paths legend');
+        this._button.setAttribute('control-visible', 'false');
+        this._button.textContent = 'PATHS';
+        this._button.title = 'Show/hide neuron 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 === 'nerve-key-button') {
+            if (this._button.getAttribute('control-visible') === 'false') {
+                this._container.appendChild(this._legend);
+                this._button.setAttribute('control-visible', 'true');
+                this._legend.focus();
+            } else {
+                this._legend = this._container.removeChild(this._legend);
+                this._button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'path-all-paths') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = this.__pathTypes.length;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const path of this.__pathTypes) {
+                    const pathCheckbox = document.getElementById(`path-${path.type}`);
+                    if (pathCheckbox) {
+                        pathCheckbox.checked = event.target.checked;
+                        this._flatmap.enablePath(path.type, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('path-')) {
+                const pathType = event.target.id.substring(5);
+                this._flatmap.enablePath(pathType, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allPathsCheckbox = document.getElementById('path-all-paths');
+                if (this.__checkedCount === 0) {
+                    allPathsCheckbox.checked = false;
+                    allPathsCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__pathTypes.length) {
+                    allPathsCheckbox.checked = true;
+                    allPathsCheckbox.indeterminate = false;
+                } else {
+                    allPathsCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
+export class LayerControl
+{
+    constructor(flatmap, layerManager)
+    {
+        this.__flatmap = flatmap;
+        this.__manager = layerManager;
+        this.__map = undefined;
+    }
+
+    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.__layers = document.createElement('div');
+        this.__layers.id = 'layer-control-text';
+        this.__layers.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) {
+            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.__layersCount = this.__manager.layers.length;
+        this.__checkedCount = this.__layersCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/2);
+
+        this.__button = document.createElement('button');
+        this.__button.id = 'map-layers-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide map layers');
+        this.__button.setAttribute('control-visible', 'false');
+        this.__button.textContent = 'LAYERS';
+        this.__button.title = 'Show/hide map layers';
+        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-layers-button') {
+            if (this.__button.getAttribute('control-visible') === 'false') {
+                this.__container.appendChild(this.__layers);
+                this.__button.setAttribute('control-visible', 'true');
+                this.__layers.focus();
+            } else {
+                this.__layers = this.__container.removeChild(this.__layers);
+                this.__button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'layer-all-layers') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = this.__layersCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const layer of this.__manager.layers) {
+                    const layerCheckbox = document.getElementById(`layer-${layer.id}`);
+                    if (layerCheckbox) {
+                        layerCheckbox.checked = event.target.checked;
+                        this.__manager.activate(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);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allLayersCheckbox = document.getElementById('layer-all-layers');
+                if (this.__checkedCount === 0) {
+                    allLayersCheckbox.checked = false;
+                    allLayersCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__layersCount) {
+                    allLayersCheckbox.checked = true;
+                    allLayersCheckbox.indeterminate = false;
+                } else {
+                    allLayersCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
+
+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;
+    }
+
+    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 = [];
+        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" checked/>`);
+        for (const state of SCKAN_STATES) {
+            innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" checked/>`);
+        }
+        this.__sckan.innerHTML = innerHTML.join('\n');
+
+        this.__sckanCount = SCKAN_STATES.length;
+        this.__checkedCount = this.__sckanCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/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');
+                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.__checkedCount = this.__sckanCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const state of SCKAN_STATES) {
+                    const sckanCheckbox = document.getElementById(`sckan-${state.id}`);
+                    if (sckanCheckbox) {
+                        sckanCheckbox.checked = event.target.checked;
+                        this.__flatmap.showSckanPaths(state.id, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('sckan-')) {
+                const sckanId = event.target.id.substring(6);
+                this.__flatmap.showSckanPaths(sckanId, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allLayersCheckbox = document.getElementById('sckan-all-paths');
+                if (this.__checkedCount === 0) {
+                    allLayersCheckbox.checked = false;
+                    allLayersCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__sckanCount) {
+                    allLayersCheckbox.checked = true;
+                    allLayersCheckbox.indeterminate = false;
+                } else {
+                    allLayersCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+
+
+
+class StateControl
+{
+    constructor(id, flatmap, states, controlFunction)
+    {
+        this.__id = id;
+        this.__flatmap = flatmap;
+        this.__states = states;
+        this.__controlFunction = controlFunction;
+        this.__map = undefined;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+        this.__container.id = 'flatmap-state-control';
+
+        this.__control = document.createElement('div');
+        this.__control.id = `${this.__id}-control-text`;
+        this.__control.className = 'flatmap-state-grid';
+
+        const innerHTML = [];
+        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" checked/>`);
+        for (const state of SCKAN_STATES) {
+            innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" checked/>`);
+        }
+        this.__sckan.innerHTML = innerHTML.join('\n');
+
+        this.__sckanCount = SCKAN_STATES.length;
+        this.__checkedCount = this.__sckanCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/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');
+                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.__checkedCount = this.__sckanCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const state of SCKAN_STATES) {
+                    const sckanCheckbox = document.getElementById(`sckan-${state.id}`);
+                    if (sckanCheckbox) {
+                        sckanCheckbox.checked = event.target.checked;
+                        this.__flatmap.showSckanPaths(state.id, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('sckan-')) {
+                const sckanId = event.target.id.substring(6);
+                this.__flatmap.showSckanPaths(sckanId, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allLayersCheckbox = document.getElementById('sckan-all-paths');
+                if (this.__checkedCount === 0) {
+                    allLayersCheckbox.checked = false;
+                    allLayersCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__sckanCount) {
+                    allLayersCheckbox.checked = true;
+                    allLayersCheckbox.indeterminate = false;
+                } else {
+                    allLayersCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
+export class BackgroundControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+        this.__map = undefined;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'bottom-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+        this.__colourDiv = document.createElement('div');
+        this.__colourDiv.setAttribute('aria-label', 'Change background colour');
+        this.__colourDiv.title = 'Change background colour';
+        const background = standardise_color(this.__flatmap.getBackgroundColour());
+        this.__colourDiv.innerHTML = `<input type="color" id="colourPicker" value="${background}">`;
+        this.__container.appendChild(this.__colourDiv);
+        this.__colourDiv.addEventListener('input', this.__updateColour.bind(this), false);
+        this.__colourDiv.addEventListener('change', this.__updateColour.bind(this), false);
+        return this.__container;
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    __updateColour(event)
+    //===================
+    {
+        const colour = event.target.value;
+        this.__flatmap.setBackgroundColour(colour);
+        this.__flatmap.controlEvent('change', 'background', colour)
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================

package/src/pathways.js

@@ -28,6 +28,7 @@ export const PATHWAYS_LAYER = 'pathways';
 
 export const PATH_TYPES = [
     { type: "cns", label: "CNS", colour: "#9B1FC1"},
+    { type: "intracardiac", label: "Local circuit neuron", colour: "#F19E38"},
     { type: "lcn", label: "Local circuit neuron", colour: "#F19E38"},
     { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
     { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
@@ -35,7 +36,9 @@ export const PATH_TYPES = [
     { 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"}
 ];
 
 export const PATH_STYLE_RULES =

package/src/search.js

@@ -29,6 +29,7 @@ import MiniSearch from 'minisearch';
 // The properties of a feature we index and show
 
 export const indexedProperties = [
+    'id',
     'label',
     'models',
     'source'

package/src/styling.js

@@ -134,7 +134,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',
@@ -192,6 +193,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
         lineColour.push('#000');
         lineColour.push(['has', 'node']);
         lineColour.push('#AFA202');
+        // this colour should be complement of background colour...
         lineColour.push('#444');
 
         const lineOpacity = [
@@ -261,7 +263,6 @@ export class FeatureLineLayer extends VectorStyleLayer
         :
             [
                 'any',
-                ['has', 'centreline'],
                 ['==', 'type', 'bezier'],
                 ['==', 'type', `line`]
             ];
@@ -278,7 +279,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': [
@@ -292,7 +292,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,
@@ -358,6 +357,7 @@ export class PathLineLayer extends VectorStyleLayer
             [
                 'any',
                 ['==', 'type', 'bezier'],
+                ['==', 'type', 'centreline'],
                 ['==', 'type', `line`]
             ];
         this.__dashed = dashed;
@@ -372,7 +372,8 @@ 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',
+                ['==', ['get', 'type'], 'centreline'], '#00F',
+                ['has', 'error'], '#FFFE0E',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
                 '#888'
@@ -384,21 +385,23 @@ export class PathLineLayer extends VectorStyleLayer
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
+                // Only dim lines when other lines are selected, not if just features selected??
                 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', 'active'], false], 1.2,
-                    0.8
-                    ], [
-                    'interpolate',
+                        ['boolean', ['feature-state', 'selected'], false], 0.6,
+                        ['boolean', ['feature-state', 'active'], false], 0.9,
+                    0.6
+                    ],
+                    ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
+                    ['interpolate',
                         ['exponential', 2],
                         ['zoom'],
                          2, ["*", ['var', 'width'], ["^", 2, -0.5]],
@@ -408,7 +411,7 @@ export class PathLineLayer extends VectorStyleLayer
             ]
         };
         if (this.__dashed) {
-            paintStyle['line-dasharray'] = [3, 2];
+            paintStyle['line-dasharray'] = [1, 1];
         }
         return super.changedPaintStyle(paintStyle, changes);
     }