@abi-software/flatmap-viewer 2.3.0-b.2 → 2.3.1-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.1-b.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.0-b.2",
+  "version": "2.3.1-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.__currentFeatureId = feature.properties['id']
+        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)
+    //================================
+    {
+        // 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,7 +632,7 @@ export class Annotator
         });
 
         // should we warn if unsaved changes when closing??
-        document.addEventListener('jspanelclosed', closedCallback, false);
+        document.addEventListener('jspanelclosed', callback, false);
     }
 
     async annotated_features()

package/src/flatmap-viewer.js

@@ -260,20 +260,6 @@ class FlatMap
         this._map.zoomOut();
     }
 
-    /**
-     * Toggle the visibility of paths on the map.zoomIn
-     *
-     * * If some paths are hidden then all paths are made visible.
-     * * If all paths are visible then they are all hidden.
-     */
-    togglePaths()
-    //===========
-    {
-        if (this._userInteractions !== null) {
-            this._userInteractions.togglePaths();
-        }
-    }
-
     /**
      * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving the path types
      *                                                                  present in the map along with their

package/src/interactions.js

@@ -104,8 +104,6 @@ export class UserInteractions
         this._infoControl = null;
         this._tooltip = null;
 
-        this._disabledPathFeatures = false;
-
         this._inQuery = false;
         this._modal = false;
 
@@ -247,7 +245,7 @@ export class UserInteractions
     {
         // Add annotation capability
 
-        this.__annotator = new Annotator(this._flatmap);
+        this.__annotator = new Annotator(this._flatmap, this);
         const annotated_features = await this.__annotator.annotated_features();
 
         // Flag features that have annotations
@@ -357,6 +355,14 @@ export class UserInteractions
         }
     }
 
+    __featureEnabled(feature)
+    //=======================
+    {
+        const state = this._map.getFeatureState(feature);
+        return (state !== undefined
+            && (!('hidden' in state) || !state.hidden));
+    }
+
     mapFeature(featureId)
     //===================
     {
@@ -380,8 +386,8 @@ export class UserInteractions
         return this._selectedFeatureIds.has(+featureId);
     }
 
-    selectFeature_(featureId, dim=true)
-    //=================================
+    selectFeature(featureId, dim=true)
+    //================================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.size === 0) {
@@ -398,8 +404,8 @@ export class UserInteractions
         }
     }
 
-    unselectFeature_(featureId)
-    //=========================
+    unselectFeature(featureId)
+    //========================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.has(featureId)) {
@@ -419,8 +425,8 @@ export class UserInteractions
         }
     }
 
-    __unselectFeatures()
-    //==================
+    unselectFeatures()
+    //================
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature(featureId);
@@ -433,7 +439,7 @@ export class UserInteractions
     }
 
     __activateFeature(feature)
-    //=======================
+    //========================
     {
         if (feature !== undefined) {
             this._map.setFeatureState(feature, { active: true });
@@ -499,16 +505,15 @@ export class UserInteractions
     //=====
     {
         this.__clearModal();
-        this.clearActiveMarker_();
-        this.__unselectFeatures();
-        this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-        this._disabledPathFeatures = false;
+        this.__clearActiveMarker();
+        this.unselectFeatures();
+        this.__enablePathFeatures(this._pathways.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)
     //============================
     {
-        this.__unselectFeatures();
+        this.unselectFeatures();
     }
 
     /**
@@ -544,14 +549,14 @@ export class UserInteractions
     //========================
     {
         if (featureIds.length) {
-            this.__unselectFeatures();
+            this.unselectFeatures();
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
-                    this.selectFeature_(featureId);
+                    this.selectFeature(featureId);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
-                            this.selectFeature_(pathFeatureId);
+                            this.selectFeature(pathFeatureId);
                         }
                     }
                 }
@@ -588,7 +593,7 @@ export class UserInteractions
         const highlight = (options.highlight === true);
         if (featureIds.length) {
             this.unhighlightFeatures_();
-            if (select) this.__unselectFeatures();
+            if (select) this.unselectFeatures();
             let bbox = null;
             if (options.noZoomIn) {
                 const bounds = this._map.getBounds().toArray();
@@ -598,7 +603,7 @@ export class UserInteractions
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
                     if (select) {
-                        this.selectFeature_(featureId);
+                        this.selectFeature(featureId);
                     } else if (highlight) {
                         this.highlightFeature_(featureId);
                     }
@@ -606,7 +611,7 @@ export class UserInteractions
                     if ('type' in annotation && annotation.type.startsWith('line')) {
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
                             if (select) {
-                                this.selectFeature_(pathFeatureId);
+                                this.selectFeature(pathFeatureId);
                             } else if (highlight) {
                                 this.highlightFeature_(pathFeatureId);
                             }
@@ -639,8 +644,8 @@ export class UserInteractions
 
             // Highlight the feature
 
-            this.__unselectFeatures();
-            this.selectFeature_(featureId);
+            this.unselectFeatures();
+            this.selectFeature(featureId);
 
             // Find the pop-up's postion
 
@@ -675,7 +680,7 @@ export class UserInteractions
     //============
     {
         this.__clearModal();
-        this.__unselectFeatures();
+        this.unselectFeatures();
     }
 
     removeTooltip_()
@@ -785,7 +790,7 @@ export class UserInteractions
 
         // Get all the features at the current point
         const features = this._map.queryRenderedFeatures(event.point)
-                             .filter(feature => this.__enabledFeature(feature));
+                             .filter(feature => this.__featureEnabled(feature));
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
             this._lastFeatureModelsMouse = null;
@@ -931,27 +936,27 @@ export class UserInteractions
                         break;
                     }
                 }
-                this.__unselectFeatures();
+                this.unselectFeatures();
                 if (selecting) {
                     for (const feature of this._activeFeatures) {
-                        this.selectFeature_(feature.id, dim);
+                        this.selectFeature(feature.id, dim);
                     }
                 }
             } else {
                 const clickedSelected = this.featureSelected_(clickedFeatureId);
                 for (const feature of this._activeFeatures) {
                     if (clickedSelected) {
-                        this.unselectFeature_(feature.id);
+                        this.unselectFeature(feature.id);
                     } else {
-                        this.selectFeature_(feature.id, dim);
+                        this.selectFeature(feature.id, dim);
                     }
                 }
             }
         }
     }
 
-    __annotationEvent(feature)
-    //========================
+    __annotationEvent(features)
+    //=========================
     {
         if (!this.__annotator) {
             return;
@@ -962,15 +967,12 @@ export class UserInteractions
         // Remove any tooltip
         this.removeTooltip_();
 
-        // Select the feature
-        this.selectFeature_(feature.id);
-
         // Don't respond to mouse events while the dialog is open
         this.setModal_();
 
         // The annotation dialog...
-        this.__annotator.annotate(feature, e => {
-            this.__unselectFeatures();
+        this.__annotator.annotate(features, () => {
+            this.unselectFeatures();
             this.__clearModal();
         });
     }
@@ -982,25 +984,25 @@ export class UserInteractions
             return;
         }
 
-        this.clearActiveMarker_();
+        this.__clearActiveMarker();
         const clickedFeatures = this._map.queryRenderedFeatures(event.point)
-                                    .filter(feature => this.__enabledFeature(feature));
+                                    .filter(feature => this.__featureEnabled(feature));
         if (clickedFeatures.length == 0){
-            this.__unselectFeatures();
+            this.unselectFeatures();
             return;
         }
-        const clickedFeature = clickedFeatures[0];
         const originalEvent = event.originalEvent;
         if (originalEvent.altKey) {
-            this.__annotationEvent(clickedFeature);
+            this.__annotationEvent(clickedFeatures);
             return;
         }
 
+        const clickedFeature = clickedFeatures[0];
         this.selectionEvent_(originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
-            this.__unselectFeatures();
+            this.unselectFeatures();
             this.__clearModal();
         } else if (clickedFeature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
@@ -1026,54 +1028,18 @@ export class UserInteractions
         }
     }
 
-    __enabledFeature(feature)
-    //=======================
-    {
-        const state = this._map.getFeatureState(feature);
-        return (state !== undefined
-            && (!('hidden' in state) || !state.hidden));
-    }
-
-    enablePaths_(enable, event)
-    //=========================
-    {
-        const nodeId = event.target.getAttribute('featureId');
-        this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
-        this.__clearModal();
-    }
-
-    enablePathFeatures_(enable, featureIds)
-    //=====================================
+    __enablePathFeatures(featureIds, enable)
+    //======================================
     {
         for (const featureId of featureIds) {
-            const feature = this.mapFeature(featureId);
-            if (feature !== undefined) {
-                if (enable) {
-                    this._map.removeFeatureState(feature, 'hidden');
-                } else {
-                    this._map.setFeatureState(feature, { 'hidden': true });
-                    this._disabledPathFeatures = true;
-                }
-            }
-        }
-    }
-
-    togglePaths()
-    //===========
-    {
-        console.log('Depracated API function called: togglePaths()')
-        if (this._disabledPathFeatures){
-            this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-            this._disabledPathFeatures = false;
-        } else {
-            this.enablePathFeatures_(false, this._pathways.allFeatureIds());
+            this.enableFeature(this.mapFeature(featureId), enable);
         }
     }
 
     enablePath(pathType, enable=true)
     //===============================
     {
-        this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
+        this.__enablePathFeatures(this._pathways.typeFeatureIds(pathType), enable);
     }
 
     pathwaysFeatureIds(externalIds)
@@ -1278,7 +1244,7 @@ export class UserInteractions
         event.stopPropagation();
     }
 
-    clearActiveMarker_()
+    __clearActiveMarker()
     //==================
     {
         if (this.__activeMarker !== null) {
@@ -1292,7 +1258,7 @@ export class UserInteractions
     {
         const marker = this.__activeMarker;
         if (markerId !== this.__markerIdByMarker.get(marker)) {
-            this.clearActiveMarker_();
+            this.__clearActiveMarker();
             return false;
         }
 
@@ -1311,7 +1277,7 @@ export class UserInteractions
             element.innerHTML = content;
         }
 
-        element.addEventListener('click', e => this.clearActiveMarker_());
+        element.addEventListener('click', e => this.__clearActiveMarker());
 
         this._tooltip = new maplibre.Popup({
             closeButton: false,

package/src/pathways.js

@@ -37,8 +37,8 @@ const PATH_TYPES = [
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
     { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423", dashed: true},
     { type: "other", label: "Other neuron type", colour: "#888"},
-    { type: "arterial", label: "Arterial blood vessel", colour: "#F00"},
-    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA"},
+    { type: "arterial", label: "Arterial blood vessel", colour: "#F00", enabled: false},
+    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA", enabled: false},
     { type: "centreline", label: "Nerve centrelines", colour: "#CCC", enabled: false},
     { type: "error", label: "Paths with errors or warnings", colour: "#FF0"}
 ];

package/src/styling.js

@@ -33,6 +33,7 @@ import {PATH_STYLE_RULES} from './pathways.js';
 const COLOUR_ACTIVE    = 'blue';
 const COLOUR_ANNOTATED = '#0F0';
 const COLOUR_SELECTED  = '#0F0';
+const COLOUR_HIDDEN    = '#D8D8D8';
 
 const CENTRELINE_ACTIVE = '#444';
 const CENTRELINE_COLOUR = '#CCC';
@@ -135,14 +136,13 @@ export class FeatureFillLayer extends VectorStyleLayer
 
     paintStyle(options, changes=false)
     {
-        const ghostColour = '#D8D8D8';       // Function of BG colour?
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
             'fill-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], ghostColour,
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
@@ -195,6 +195,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const dimmed = 'dimmed' in options && options.dimmed;
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
+        lineColour.push(['boolean', ['feature-state', 'hidden'], false]);
+        lineColour.push(COLOUR_HIDDEN);
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
         lineColour.push(FEATURE_SELECTED_BORDER);
         if (coloured && outlined) {
@@ -298,6 +300,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['has', 'colour'], ['get', 'colour'],
@@ -306,6 +309,7 @@ export class FeatureLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['has', 'colour'], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
@@ -499,7 +503,7 @@ export class PathLineLayer extends VectorStyleLayer
             'line-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], '#CCC',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
@@ -507,7 +511,7 @@ export class PathLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
-                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
                     ['==', ['get', 'kind'], 'error'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
@@ -523,7 +527,7 @@ export class PathLineLayer extends VectorStyleLayer
                         ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
-                        ['boolean', ['feature-state', 'selected'], false], 0.6,
+                        ['boolean', ['feature-state', 'selected'], false], 2.0,
                         ['boolean', ['feature-state', 'active'], false], 0.9,
                     0.6
                     ],
@@ -745,7 +749,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'paint': {
                 'line-color': [
                     'case',
-                    ['boolean', ['feature-state', 'hidden'], false], '#CCC',
+                    ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                     ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
                     '#888'

package/src/systems.js

@@ -35,7 +35,8 @@ export class SystemsManager
                         id: ann.name.replaceAll(' ', '_'),
                         colour: ann.colour,
                         featureIds: [ ann.featureId ],
-                        enabled: enabled
+                        enabled: enabled,
+                        pathIds: ('path-ids' in ann) ? ann['path-ids'] : []
                     });
                 }
                 for (const childId of ann['children']) {
@@ -86,6 +87,11 @@ export class SystemsManager
                 }
             }
             system.enabled = enable;
+
+            // Enable/disable all paths associated with the system
+            for (const pathId of system.pathIds) {
+                this.__ui.enableFeature(this.__ui.mapFeature(pathId), enable);
+            }
         }
     }
 }

package/static/css/flatmap-viewer.css

@@ -342,6 +342,18 @@ label[for=layer-all-layers] {
     background-color: #BBB;
 }
 
+#annotation-feature-selection
+{
+    display: flex;
+}
+
+#annotation-feature-buttons
+{
+    float: right;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
 .jsPanel-title {
     font-size: 1.4em !important;
     font-weight: bold !important;