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

package/README.rst

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

package/package.json

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

package/src/annotation.js

@@ -82,9 +82,10 @@ function stopSpinner(panel)
 
 export class Annotator
 {
-    constructor(flatmap)
+    constructor(flatmap, ui)
     {
         this.__flatmap = flatmap;
+        this.__ui = ui;
         this.__haveAnnotation = false;
         this.__user = undefined;
         this.__savedStatusMessage = '';
@@ -444,20 +445,134 @@ export class Annotator
         });
     }
 
-    annotate(feature, closedCallback)
-    //===============================
+    __chooseFeatureProperties(features, callback)
+    //===========================================
+    {
+        this.__ui.selectFeature(features[0].id);
+
+        // Feature chooser is only for multiple selections
+        if (features.length === 1
+         || features[0].properties['cd-class'] !== 'celldl:Connection'
+         || (features.length === 2
+          && features[1].properties['cd-class'] !== 'celldl:Connection')) {
+            callback(features[0].properties);
+            return;
+        }
+        const featureList = [];
+        const featureProperties = new Map();
+        const featureSeen = new Set();
+        let selected = 'selected';    // Select the first entry
+        for (const feature of features) {
+            if (feature.properties['cd-class'] !== 'celldl:Connection'
+             || feature.properties['id'] == undefined
+             || featureSeen.has(feature.properties['id'])) {
+                continue;
+            }
+            const mapFeature = this.__ui.mapFeature(feature.id);
+            const annotated = (mapFeature !== undefined)
+                            ? this.__ui._map.getFeatureState(mapFeature)['annotated']
+                            : false;
+            let label = '';
+            if (feature.properties.models) {
+                label = ` -- ${feature.properties.label.split('\n')[0]} (${feature.properties.models})`;
+            }
+            featureList.push(`<option value="${feature.id}" ${selected}>${annotated ? '*' : '&nbsp;'} ${feature.properties.id} -- ${feature.properties.kind}${label}</option>`);
+            featureProperties.set(+feature.id, feature.properties);
+            featureSeen.add(feature.properties['id']);
+            selected = '';
+        }
+        if (featureList.length == 0) {
+            callback(undefined);
+            return;
+        } else if (featureList.length == 1) {
+            callback(featureProperties.values().next().value);
+            return;
+        }
+        const panelContent = `
+<div id="annotation-feature-selection">
+    <div>
+        <label for="annotation-feature-selector">Select feature:</label>
+        <select id="annotation-feature-selector" size="${Math.min(featureList.length, 7)}">
+            ${featureList.join('\n')}
+        </select>
+    </div>
+    <div id="annotation-feature-buttons">
+        <input id="annotation-feature-cancel" type="button" value="Cancel"/>
+        <input id="annotation-feature-annotate" type="button" value="Annotate"/>
+    </div>
+</div>`;
+        this.__panel = jsPanel.create({
+            theme: 'light',
+            border: '2px solid #080',
+            borderRadius: '.5rem',
+            panelSize: 'auto auto',
+            position: 'left-top',
+            content: panelContent,
+            data: features[0].properties,
+            closeOnEscape: true,
+            closeOnBackdrop: false,
+            headerTitle: 'Select feature to annotate',
+            headerControls: 'closeonly xs',
+            callback: ((panel) => {
+                const selector = document.getElementById('annotation-feature-selector');
+                selector.onchange = (e) => {
+                    if (e.target.value !== '') {
+                        this.__ui.unselectFeatures();
+                        this.__ui.selectFeature(e.target.value);
+                        this.__panel.options.data = featureProperties.get(+e.target.value);
+                    }
+                };
+                selector.ondblclick = (e) => {
+                    if (e.target.value !== '') {
+                        const properties = this.__panel.options.data;
+                        this.__panel.close();
+                        callback(properties);
+                    }
+                }
+                selector.focus();
+                document.getElementById('annotation-feature-cancel')
+                        .onclick = (e) => {
+                            this.__panel.close();
+                            callback(undefined);
+                        };
+                document.getElementById('annotation-feature-annotate')
+                        .onclick = (e) => {
+                            const properties = this.__panel.options.data;
+                            this.__panel.close();
+                            callback(properties);
+                        };
+            }).bind(this)
+        });
+        document.addEventListener('jspanelcloseduser', (e) => { callback(undefined) }, false);
+    }
+
+    annotate(features, closedCallback)
+    //================================
     {
-        this.__currentFeatureId = feature.properties['id']
+        // provide a list of features so dialog needs to first provide selection list
+        // and highlight current one as user scrolls...
+
+        this.__chooseFeatureProperties(features, (featureProperties) => {
+            if (featureProperties) {
+                this.__annotateFeature(featureProperties, closedCallback);
+            } else {
+                closedCallback();
+            }
+        });
+    }
 
+    __annotateFeature(featureProperties, callback)
+    //============================================
+    {
+        this.__currentFeatureId = featureProperties['id'];
         if (this.__currentFeatureId === undefined) {
-            closedCallback();
+            callback();
             return;
         }
-
         const panelContent = [];
         panelContent.push('<div id="flatmap-annotation-panel">');
         panelContent.push('  <div id="flatmap-annotation-feature">');
-        panelContent.push(...this.__featureHtml(feature.properties));
+        panelContent.push(...this.__featureHtml(featureProperties));
         panelContent.push('  </div>');
         panelContent.push('  <form id="flatmap-annotation-form"></form>');
         panelContent.push('  <div id="flatmap-annotation-existing"></div>');
@@ -517,23 +632,28 @@ export class Annotator
         });
 
         // should we warn if unsaved changes when closing??
-        document.addEventListener('jspanelclosed', closedCallback, false);
+        document.addEventListener('jspanelclosed', callback, false);
     }
 
     async annotated_features()
     //========================
     {
         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
 ];