@abi-software/flatmap-viewer 2.3.1-b.1 → 2.3.2-b.2

package/README.rst

@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
 Package Installation
 ====================
 
-* ``npm install @abi-software/flatmap-viewer@2.3.1-b.1``
+* ``npm install @abi-software/flatmap-viewer@2.3.2-b.2``
 
 Documentation
 -------------

package/package.json

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

package/src/annotation.js

@@ -639,16 +639,21 @@ export class Annotator
     //========================
     {
         const url = this.__flatmap.makeServerUrl('', 'annotator/');
-        const response = await fetch(url, {
-            headers: {
-                "Accept": "application/json; charset=utf-8",
-                "Cache-Control": "no-store"
+        try {
+            const response = await fetch(url, {
+                headers: {
+                    "Accept": "application/json; charset=utf-8",
+                    "Cache-Control": "no-store"
+                }
+            });
+            if (response.ok) {
+                return response.json();
+            } else {
+                console.error(`Annotated features: ${response.status} ${response.statusText}`);
+                return Promise.resolve([]);
             }
-        });
-        if (response.ok) {
-            return response.json();
-        } else {
-            console.error(`Annotated features: ${response.status} ${response.statusText}`);
+        } catch {
+            console.error(`Fetch failed -- is annotator available at ${this.__flatmap._baseUrl} ?`);
             return Promise.resolve([]);
         }
     }

package/src/controls/controls.js

@@ -32,12 +32,15 @@ function standardise_color(str){
 
 //==============================================================================
 
-export class NavigationControl
+export class Control
 {
-    constructor(flatmap)
+    constructor(flatmap, id, name)
     {
-        this._flatmap = flatmap;
-        this._map = undefined;
+        this.__flatmap = flatmap;
+        this.__id = id;
+        this.__name = name;
+        this.__map = undefined;
+        this.__prefix = `${this.__id}-`
     }
 
     getDefaultPosition()
@@ -46,48 +49,140 @@ export class NavigationControl
         return 'top-right';
     }
 
+    _addControlDetails()
+    //==================
+    {
+        return {
+            enabled: 0,
+            total: 0
+        }
+    }
+
+    _enableAll(enable)
+    //================
+    {
+    }
+
+    __setAllCheckedState()
+    //====================
+    {
+        if (this.__checkedCount === 0) {
+            this.__allCheckbox.checked = false;
+            this.__allCheckbox.indeterminate = false;
+        } else if (this.__checkedCount === this.__totalCount) {
+            this.__allCheckbox.checked = true;
+            this.__allCheckbox.indeterminate = false;
+        } else {
+            this.__allCheckbox.indeterminate = true;
+        }
+    }
+
+    _addControlLine(id, name, style=null)
+    //===================================
+    {
+        const label = document.createElement('label');
+        label.setAttribute('for', id);
+        if (style !== null) {
+            label.setAttribute('style', style);
+        }
+        label.textContent = name;
+        this.__control.appendChild(label);
+        const input = document.createElement('input');
+        input.setAttribute('type', 'checkbox');
+        input.id = id;
+        this.__control.appendChild(input);
+        return input;
+    }
+
     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;
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl flatmap-control';
+        this.__control = document.createElement('div');
+        this.__control.className = 'flatmap-control-grid';
+
+        this.__allCheckbox = this._addControlLine(`control-all-${this.__id}`, `ALL ${this.__name.toUpperCase()}:`);
+        const controlDetails = this._addControlDetails();
+        this.__totalCount = controlDetails.total;
+        this.__halfCount = Math.trunc(this.__totalCount/2);
+        this.__checkedCount = controlDetails.enabled;
+        this.__setAllCheckedState();
+
+        /*
+        const innerDetails = this._innerLinesHTML();
+        const innerHTML = innerDetails.html;
+        innerHTML.splice(0, 0, `<label for="control-all-${this.__id}">ALL ${this.__name.toUpperCase()}:</label><input id="control-all-${this.__id}" type="checkbox"/>`);
+        this.__control.innerHTML = innerHTML.join('\n');
+
+        this.__totalCount = innerHTML.length;
+        this.__halfCount = Math.trunc(this.__totalCount/2);
+        this.__checkedCount = innerDetails.enabled;
+        this.__allCheckbox = document.getElementById(`control-all-${this.__id}`);
+        this.__setAllCheckedState();
+        */
+
+        this.__button = document.createElement('button');
+        this.__button.id = `flatmap-${this.__id}-button`;
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', `Show/hide map's ${this.__name}`);
+        this.__button.setAttribute('control-visible', 'false');
+        this.__button.textContent = this.__name.toUpperCase().substring(0, 6);
+        this.__button.title = `Show/hide map's ${this.__name}`;
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        return this.__container;
     }
 
     onRemove()
     //========
     {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
     }
 
-    onClick_(e)
-    //=========
+    onClick_(event)
+    //=============
     {
-        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();
+        if (event.target.id === `flatmap-${this.__id}-button`) {
+            if (this.__button.getAttribute('control-visible') === 'false') {
+                this.__container.appendChild(this.__control);
+                this.__button.setAttribute('control-visible', 'true');
+                this.__control.focus();
+            } else {
+                this.__control = this.__container.removeChild(this.__control);
+                this.__button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === `control-all-${this.__id}`) {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                this.__checkedCount = event.target.checked ? this.__totalCount : 0;
+                this._enableAll(event.target.checked);
+            } else if (event.target.id.startsWith(`${this.__id}-`)) {
+                this.__enableControl(event.target.id.substring(this.__prefix.length),
+                                     event.target.checked);
+                this.__checkedCount += (event.target.checked ? 1 : -1);
+                this.__setAllCheckedState();
+            }
         }
+        event.stopPropagation();
     }
 }
 
 //==============================================================================
 
-export class PathControl
+export class NavigationControl
 {
-    constructor(flatmap, pathTypes)
+    constructor(flatmap)
     {
         this._flatmap = flatmap;
         this._map = undefined;
-        this.__pathTypes = pathTypes;
     }
 
     getDefaultPosition()
@@ -101,41 +196,11 @@ export class PathControl
     {
         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/>`);
-        this.__checkedCount = 0;
-        for (const path of this.__pathTypes) {
-            const checked =  !('enabled' in path) || path.enabled ? 'checked' : '';
-            if (checked != '') {
-                this.__checkedCount += 1;
-            }
-            const colour = path.colour || '#440';
-            const style = path.dashed ? `background: repeating-linear-gradient(to right,${colour} 0,${colour} 6px,transparent 6px,transparent 9px);`
-                                      : `background: ${colour};`;
-
-            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line" style="${style}"></div><input id="path-${path.type}" type="checkbox" ${checked}/>`);
-        }
-        this._legend.innerHTML = innerHTML.join('\n');
-        this.__halfCount = Math.trunc(this.__pathTypes.length/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));
+        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;
     }
 
@@ -146,60 +211,16 @@ export class PathControl
         this._map = undefined;
     }
 
-    onClick_(event)
-    //=============
+    onClick_(e)
+    //=========
     {
-        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');
-                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);
-                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;
-                }
-            }
+        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();
         }
-        event.stopPropagation();
     }
 }
 
@@ -317,123 +338,6 @@ export class LayerControl
 
 //==============================================================================
 
-export class Control
-{
-    constructor(flatmap, id, name)
-    {
-        this.__flatmap = flatmap;
-        this.__id = id;
-        this.__name = name;
-        this.__map = undefined;
-        this.__prefix = `${this.__id}-`
-    }
-
-    getDefaultPosition()
-    //==================
-    {
-        return 'top-right';
-    }
-
-    __innerLinesHTML()
-    //================
-    {
-        return [];
-    }
-
-    __enableAll(enable)
-    //=================
-    {
-
-    }
-
-    onAdd(map)
-    //========
-    {
-        this.__map = map;
-        this.__container = document.createElement('div');
-        this.__container.className = 'maplibregl-ctrl flatmap-control';
-        this.__control = document.createElement('div');
-        this.__control.className = 'flatmap-control-grid';
-
-        const innerHTML = this.__innerLinesHTML();
-        this.__totalCount = innerHTML.length;
-        innerHTML.splice(0, 0, `<label for="control-all-${this.__id}">ALL ${this.__name.toUpperCase()}:</label><input id="control-all-${this.__id}" type="checkbox" checked/>`);
-        this.__control.innerHTML = innerHTML.join('\n');
-
-        this.__checkedCount = this.__totalCount;
-        this.__halfCount = Math.trunc(this.__checkedCount/2);
-
-        this.__button = document.createElement('button');
-        this.__button.id = `flatmap-${this.__id}-button`;
-        this.__button.className = 'control-button text-button';
-        this.__button.setAttribute('type', 'button');
-        this.__button.setAttribute('aria-label', `Show/hide map's ${this.__name}`);
-        this.__button.setAttribute('control-visible', 'false');
-        this.__button.textContent = this.__name.toUpperCase().substring(0, 6);
-        this.__button.title = `Show/hide map's ${this.__name}`;
-        this.__container.appendChild(this.__button);
-
-        this.__container.addEventListener('click', this.onClick_.bind(this));
-        return this.__container;
-    }
-
-    onRemove()
-    //========
-    {
-        this.__container.parentNode.removeChild(this.__container);
-        this.__map = undefined;
-    }
-
-    onClick_(event)
-    //=============
-    {
-        if (event.target.id === `flatmap-${this.__id}-button`) {
-            if (this.__button.getAttribute('control-visible') === 'false') {
-                this.__container.appendChild(this.__control);
-                this.__button.setAttribute('control-visible', 'true');
-                this.__control.focus();
-            } else {
-                this.__control = this.__container.removeChild(this.__control);
-                this.__button.setAttribute('control-visible', 'false');
-            }
-        } else if (event.target.tagName === 'INPUT') {
-            if (event.target.id === `control-all-${this.__id}`) {
-                if (event.target.indeterminate) {
-                    event.target.checked = (this.__checkedCount >= this.__halfCount);
-                    event.target.indeterminate = false;
-                }
-                if (event.target.checked) {
-                    this.__checkedCount = this.__totalCount;
-                } else {
-                    this.__checkedCount = 0;
-                }
-                this.__enableAll(event.target.checked);
-            } else if (event.target.id.startsWith(`${this.__id}-`)) {
-                this.__enableControl(event.target.id.substring(this.__prefix.length),
-                                     event.target.checked);
-                if (event.target.checked) {
-                    this.__checkedCount += 1;
-                } else {
-                    this.__checkedCount -= 1;
-                }
-                const allCheckbox = document.getElementById(`control-all-${this.__id}`);
-                if (this.__checkedCount === 0) {
-                    allCheckbox.checked = false;
-                    allCheckbox.indeterminate = false;
-                } else if (this.__checkedCount === this.__totalCount) {
-                    allCheckbox.checked = true;
-                    allCheckbox.indeterminate = false;
-                } else {
-                    allCheckbox.indeterminate = true;
-                }
-            }
-        }
-        event.stopPropagation();
-    }
-}
-
-//==============================================================================
-
 const SCKAN_STATES = [
     {
         'id': 'VALID',

package/src/controls/info.js

@@ -25,6 +25,8 @@ import { indexedProperties } from '../search.js';
 export const displayedProperties = [
     'id',
     'class',
+    'fc-class',
+    'fc-kind',
     ...indexedProperties
 ];
 

package/src/controls/paths.js

@@ -0,0 +1,143 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023 David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+export class 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/>`);
+        this.__checkedCount = 0;
+        for (const path of this.__pathTypes) {
+            const checked =  !('enabled' in path) || path.enabled ? 'checked' : '';
+            if (checked != '') {
+                this.__checkedCount += 1;
+            }
+            const colour = path.colour || '#440';
+            const style = path.dashed ? `background: repeating-linear-gradient(to right,${colour} 0,${colour} 6px,transparent 6px,transparent 9px);`
+                                      : `background: ${colour};`;
+
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line" style="${style}"></div><input id="path-${path.type}" type="checkbox" ${checked}/>`);
+        }
+        this._legend.innerHTML = innerHTML.join('\n');
+        this.__halfCount = Math.trunc(this.__pathTypes.length/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');
+                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);
+                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();
+    }
+}
+
+//==============================================================================

package/src/controls/systems.js

@@ -31,24 +31,33 @@ export class SystemsControl extends Control
         this.__systems = systems;
     }
 
-    __innerLinesHTML()
-    //================
+    _addControlDetails()
+    //===============
     {
-        const html = [];
+        let lines = 0;
+        let enabled = 0;
         for (const system of this.__systems) {
-            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${system.name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+            const input = this._addControlLine(`${this.__prefix}${system.id}`, system.name, `background: ${system.colour};`);
+            if (system.enabled) {
+                input.checked = true;
+                enabled += 1;
+            }
+            lines += 1;
         }
-        return html;
+        return {
+            enabled: enabled,
+            total: lines
+        };
     }
 
-    __enableAll(enable)
-    //=================
+    _enableAll(enable)
+    //================
     {
         for (const system of this.__systems) {
             const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
             if (checkbox) {
                 checkbox.checked = enable;
-                this.__flatmap.enableSystem(system.name, enable);
+                this.__flatmap.enableSystem(system.id, enable);
             }
         }
     }
@@ -58,7 +67,7 @@ export class SystemsControl extends Control
     {
         for (const system of this.__systems) {
             if (id === system.id) {
-                this.__flatmap.enableSystem(system.name, enable);
+                this.__flatmap.enableSystem(system.id, enable);
             }
         }
     }