@abi-software/flatmap-viewer 2.3.3-b.3 → 2.3.4

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.3-b.3``
+* ``npm install @abi-software/flatmap-viewer@2.3.4``
 
 Documentation
 -------------

package/package.json

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

package/src/annotation.js

@@ -508,7 +508,7 @@ export class Annotator
             border: '2px solid #080',
             borderRadius: '.5rem',
             panelSize: 'auto auto',
-            position: 'left-top',
+            position: 'left-top 50 70',
             content: panelContent,
             data: features[0].properties,
             closeOnEscape: true,
@@ -588,7 +588,7 @@ export class Annotator
             border: '2px solid #080',
             borderRadius: '.5rem',
             panelSize: '725px auto',
-            position: 'left-top',
+            position: 'left-top 50 70',
             data: {
                 flatmap: this.__flatmap
             },

package/src/controls/info.js

@@ -27,6 +27,7 @@ export const displayedProperties = [
     'class',
     'fc-class',
     'fc-kind',
+    'name',
     ...indexedProperties
 ];
 

package/src/flatmap-viewer.js

@@ -33,7 +33,7 @@ import '../static/css/flatmap-viewer.css';
 
 //==============================================================================
 
-import {MapServer} from './mapserver.js';
+import {MapServer, loadJSON} from './mapserver.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
@@ -77,11 +77,15 @@ class FlatMap
         this.__datasetToFeatureIds = new Map();
         this.__modelToFeatureIds = new Map();
         this.__mapSourceToFeatureIds = new Map();
+        this.__annIdToFeatureId = new Map();
 
         for (const [featureId, annotation] of Object.entries(mapDescription.annotations)) {
             this.__addAnnotation(featureId, annotation);
             this.__searchIndex.indexMetadata(featureId, annotation);
         }
+        if (this.options.annotator) {
+            this.__addAnnotatedComments();
+        }
 
         // Set base of source URLs in map's style
 
@@ -207,6 +211,25 @@ class FlatMap
         });
     }
 
+    async __addAnnotatedComments()
+    //============================
+    {
+        const url = this.makeServerUrl('', 'annotator/')
+        const annotatedFeatures = await loadJSON(url);
+        for (const annotatedId of annotatedFeatures) {
+            const featureId = this.__annIdToFeatureId.get(annotatedId);
+            if (featureId) {
+                const url = this.makeServerUrl(annotatedId, 'annotator/')
+                const annotations = await loadJSON(url);
+                for (const annotation of annotations) {   // In order of most recent to oldest
+                    if ('rdfs:comment' in annotation) {
+                        this.__searchIndex.indexText(featureId, annotation['rdfs:comment']);
+                    }
+                }
+            }
+        }
+    }
+
     async setupUserInteractions_()
     //============================
     {
@@ -498,6 +521,7 @@ class FlatMap
         this.__updateFeatureIdMap('dataset', this.__datasetToFeatureIds, ann);
         this.__updateFeatureIdMap('models', this.__modelToFeatureIds, ann);
         this.__updateFeatureIdMap('source', this.__mapSourceToFeatureIds, ann);
+        this.__annIdToFeatureId.set(ann.id, featureId);
     }
 
     modelFeatureIds(anatomicalId)
@@ -1122,13 +1146,12 @@ class FlatMap
     }
 
     /**
-     * Zoom map to features.
+     * Select features and zoom the map to them.
      *
-     * @param      {Array.<string>}  externalIds   An array of anaotomical terms identifing features
+     * @param      {Array.<string>}  featureIds   An array of feature identifiers
      * @param      {Object}  [options]
-     * @param      {boolean} [options.select=true]  Select the features zoomed to
-     * @param      {boolean} [options.highlight=false]  Highlight the features zoomed to
-     * @param      {number}  [options.padding=100]  Padding around the composite bounding box
+     * @param      {boolean} [options.noZoomIn=false]  Don't zoom in (although zoom out as necessary)
+     * @param      {number}  [options.padding=10]  Padding in pixels around the composite bounding box
      */
     zoomToFeatures(externalIds, options=null)
     //=======================================

package/src/interactions.js

@@ -402,19 +402,36 @@ export class UserInteractions
     selectFeature(featureId, dim=true)
     //================================
     {
-        featureId = +featureId;   // Ensure numeric
-        if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setPaint({...this.__colourOptions, dimmed: dim});
+        const ann = this._flatmap.annotation(featureId);
+        if ('sckan' in ann) {
+            const sckanState = this._layerManager.sckanState;
+            if (sckanState === 'none'
+             || sckanState === 'valid' && !ann.sckan
+             || sckanState === 'invalid' && ann.sckan) {
+                return false;
+            }
         }
+        featureId = +featureId;   // Ensure numeric
+        let result = false;
+        const noSelection = (this._selectedFeatureIds.size === 0);
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
+            result = true;
         } else {
             const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'selected': true });
-                this._selectedFeatureIds.set(featureId, 1);
+                const state = this._map.getFeatureState(feature);
+                if (state !== undefined && (!('hidden' in state) || !state.hidden)) {
+                    this._map.setFeatureState(feature, { 'selected': true });
+                    this._selectedFeatureIds.set(featureId, 1);
+                    result = true;
+                }
             }
         }
+        if (result && noSelection) {
+            this._layerManager.setPaint({...this.__colourOptions, dimmed: dim});
+        }
+        return result;
     }
 
     unselectFeature(featureId)
@@ -566,10 +583,11 @@ export class UserInteractions
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
-                    this.selectFeature(featureId);
-                    if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
-                            this.selectFeature(pathFeatureId);
+                    if (this.selectFeature(featureId)) {
+                        if ('type' in annotation && annotation.type.startsWith('line')) {
+                            for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
+                                this.selectFeature(pathFeatureId);
+                            }
                         }
                     }
                 }
@@ -580,16 +598,15 @@ export class UserInteractions
     showSearchResults(featureIds)
     //===========================
     {
-        this.zoomToFeatures(featureIds, {highlight: true, noZoomIn: true});
+        this.unselectFeatures();
+        this.zoomToFeatures(featureIds, {noZoomIn: true});
     }
 
     /**
-     * Zoom map to features.
+     * Select features and zoom the map to them.
      *
      * @param      {Array.<string>}  featureIds   An array of feature identifiers
      * @param      {Object}  [options]
-     * @param      {boolean} [options.select=true]  Select the features zoomed to
-     * @param      {boolean} [options.highlight=false]  Highlight the features zoomed to
      * @param      {boolean} [options.noZoomIn=false]  Don't zoom in (although zoom out as necessary)
      * @param      {number}  [options.padding=10]  Padding in pixels around the composite bounding box
      */
@@ -597,16 +614,11 @@ export class UserInteractions
     //======================================
     {
         options = utils.setDefaults(options, {
-            select: true,
-            highlight:
-            false, noZoomIn:
-            false, padding:10
+            noZoomIn: false,
+            padding: 10
         });
-        const select = (options.select === true);
-        const highlight = (options.highlight === true);
         if (featureIds.length) {
-            this.unhighlightFeatures_();
-            if (select) this.unselectFeatures();
+            this.unselectFeatures();
             let bbox = null;
             if (options.noZoomIn) {
                 const bounds = this._map.getBounds().toArray();
@@ -615,21 +627,15 @@ export class UserInteractions
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
-                    if (select) {
-                        this.selectFeature(featureId);
-                    } else if (highlight) {
-                        this.highlightFeature_(featureId);
-                    }
-                    bbox = expandBounds(bbox, annotation.bounds);
-                    if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
-                            if (select) {
-                                this.selectFeature(pathFeatureId);
-                            } else if (highlight) {
-                                this.highlightFeature_(pathFeatureId);
+                    if (this.selectFeature(featureId)) {
+                        bbox = expandBounds(bbox, annotation.bounds);
+                        if ('type' in annotation && annotation.type.startsWith('line')) {
+                            for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
+                                if (this.selectFeature(pathFeatureId)) {
+                                    const pathAnnotation = this._flatmap.annotation(pathFeatureId)
+                                    bbox = expandBounds(bbox, pathAnnotation.bounds);
+                                }
                             }
-                            const pathAnnotation = this._flatmap.annotation(pathFeatureId)
-                            bbox = expandBounds(bbox, pathAnnotation.bounds);
                         }
                     }
                 }
@@ -652,15 +658,24 @@ export class UserInteractions
             // Remove any existing popup
 
             if (this._currentPopup) {
+                if (options && options.preserveSelection) {
+                    this._currentPopup.options.preserveSelection = options.preserveSelection;
+                }
                 this._currentPopup.remove();
             }
 
-            if (!(options && options.preserveSelection)) {
-                // Highlight the feature
+            // Clear selection if we are not preserving it
+
+            if (options && options.preserveSelection) {
+                delete options.preserveSelection;       // Don't pass to onClose()
+            } else {                                    // via the popup's options
                 this.unselectFeatures();
-                this.selectFeature(featureId);
             }
 
+            // Select the feature
+
+            this.selectFeature(featureId);
+
             // Find the pop-up's postion
 
             let location = null;
@@ -680,7 +695,7 @@ export class UserInteractions
             }
             this.setModal_();
             this._currentPopup = new maplibre.Popup(options).addTo(this._map);
-            this._currentPopup.on('close', this.__clearPopup.bind(this));
+            this._currentPopup.on('close', this.__onCloseCurrentPopup.bind(this));
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
                 this._currentPopup.setDOMContent(content);
@@ -690,11 +705,16 @@ export class UserInteractions
         }
     }
 
-    __clearPopup()
-    //============
+    __onCloseCurrentPopup()
+    //=====================
     {
-        this.__clearModal();
-        this.unselectFeatures();
+        if (this._currentPopup) {
+            this.__clearModal();
+            if (!(this._currentPopup.options && this._currentPopup.options.preserveSelection)) {
+                this.unselectFeatures();
+            }
+            this._currentPopup = null;
+        }
     }
 
     removeTooltip_()
@@ -918,26 +938,34 @@ export class UserInteractions
     //=======================================
     {
         // Show a tooltip
-        if (html !== '') {
-            this._tooltip = new maplibre.Popup({
-                closeButton: false,
-                closeOnClick: false,
-                maxWidth: 'none',
-                className: 'flatmap-tooltip-popup'
-            });
+        if (html !== '' || this._flatmap.options.showId && feature !== null) {
+            let header = '';
             if (this._flatmap.options.showPosition) {
                 const pt = turf.point(lngLat.toArray());
                 const gps = turfProjection.toMercator(pt);
                 const coords = gps.geometry.coordinates;
-                const header = (feature === null)
+                header = (feature === null)
                              ? JSON.stringify(coords)
-                             : `${JSON.stringify(coords)} (${feature.id} ${feature.properties['id']})`;
+                             : `${JSON.stringify(coords)} (${feature.id})`;
+            }
+            if (this._flatmap.options.showId && feature !== null && 'id' in feature.properties) {
+                header = `${header} ${feature.properties.id}`;
+            }
+            if (header !== '') {
                 html = `<span>${header}</span><br/>${html}`;
             }
-            this._tooltip
-                .setLngLat(lngLat)
-                .setHTML(html)
-                .addTo(this._map);
+            if (html !== '') {
+                this._tooltip = new maplibre.Popup({
+                    closeButton: false,
+                    closeOnClick: false,
+                    maxWidth: 'none',
+                    className: 'flatmap-tooltip-popup'
+                });
+                this._tooltip
+                    .setLngLat(lngLat)
+                    .setHTML(html)
+                    .addTo(this._map);
+            }
         }
     }
 

package/src/layers.js

@@ -298,6 +298,12 @@ export class LayerManager
         return layers;
     }
 
+    get sckanState()
+    //==============
+    {
+        return this.__layerOptions.sckan;
+    }
+
     activate(layerId, enable=true)
     //============================
     {

package/src/main.js

@@ -59,6 +59,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
         background: defaultBackground,
         debug: false,
         minimap: false,
+        showId: true,
         showPosition: false,
         standalone: true,
         annotator: true

package/src/mapserver.js

@@ -22,6 +22,24 @@ limitations under the License.
 
 //==============================================================================
 
+export async function loadJSON(url)
+//=================================
+{
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+            "Accept": "application/json; charset=utf-8",
+            "Cache-Control": "no-store"
+        }
+    });
+    if (!response.ok) {
+        throw new Error(`Cannot access ${url}`);
+    }
+    return response.json();
+}
+
+//==============================================================================
+
 export class MapServer
 {
     constructor(url)
@@ -39,18 +57,7 @@ export class MapServer
     async loadJSON(relativePath)
     //==========================
     {
-        const url = this.url(relativePath);
-        const response = await fetch(url, {
-            method: 'GET',
-            headers: {
-                "Accept": "application/json; charset=utf-8",
-                "Cache-Control": "no-store"
-            }
-        });
-        if (!response.ok) {
-            throw new Error(`Cannot access ${url}`);
-        }
-        return response.json();
+        return loadJSON(this.url(relativePath));
     }
 }
 

package/src/pathways.js

@@ -42,7 +42,7 @@ const PATH_TYPES = [
     { 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"}
+    { type: "error", label: "Paths with errors or warnings", colour: "#FF0", enabled: false}
 ];
 
 export const PATH_STYLE_RULES =
@@ -65,12 +65,11 @@ export class PathManager
                 }
             }
         }
-        this.__pathModelPaths = {};                                  // pathModelId: [pathIds]
-        this.__pathToPathModel = {};
-
-        this.__paths = {};
-        const pathLines = {};                                    // pathId: [lineIds]
-        const pathNerves = {};                                   // pathId: [nerveIds]
+        this.__pathModelPaths = {};                             // pathModelId: [pathIds]
+        this.__pathToPathModel = {};                            // pathId: pathModelId
+        this.__paths = {};                                      // pathId: path
+        const pathLines = {};                                   // pathId: [lineIds]
+        const pathNerves = {};                                  // pathId: [nerveIds]
         if ('paths' in flatmap.pathways) {
             for (const [pathId, path] of Object.entries(flatmap.pathways.paths)) {
                 pathLines[pathId] = path.lines;

package/src/search.js

@@ -56,18 +56,19 @@ export class SearchIndex
             if (prop in metadata) {
                 const text = metadata[prop];
                 if (!textSeen.includes(text)) {
-                    this.addTerm_(featureId, text);
+                    this.indexText(featureId, text);
                     textSeen.push(text);
                 }
             }
         }
     }
 
-    addTerm_(featureId, text)
-    //=======================
+    indexText(featureId, text)
+    //========================
     {
         text = text.replace(new RegExp('<br/>', 'g'), ' ')
-                   .replace('\n', ' ');
+                   .replace(new RegExp('\n', 'g'), ' ')
+                   ;
         if (text) {
             this._searchEngine.add({
                 id: this._featureIds.length,

package/src/styling.js

@@ -31,7 +31,7 @@ import {PATH_STYLE_RULES} from './pathways.js';
 //==============================================================================
 
 const COLOUR_ACTIVE    = 'blue';
-const COLOUR_ANNOTATED = '#0F0';
+const COLOUR_ANNOTATED = '#C8F';
 const COLOUR_SELECTED  = '#0F0';
 const COLOUR_HIDDEN    = '#D8D8D8';
 
@@ -418,15 +418,18 @@ export class AnnotatedPathLayer extends VectorStyleLayer
 
     paintStyle(options={}, changes=false)
     {
+        const dimmed = 'dimmed' in options && options.dimmed;
         const exclude = 'excludeAnnotated' in options && options.excludeAnnotated;
         const paintStyle = {
             'line-color': COLOUR_ANNOTATED,
             'line-dasharray': [5, 0.5, 3, 0.5],
             'line-opacity': [
                 'case',
+                    ['boolean', ['feature-state', 'active'], false], 0.8,
+                    ['boolean', ['feature-state', 'selected'], false], 0.8,
                     ['boolean', ['feature-state', 'hidden'], false], 0.05,
                     ['boolean', ['feature-state', 'annotated'], false],
-                        (exclude ? 0.05 : 0.8),
+                        ((exclude || dimmed) ? 0.05 : 0.8),
                     0.6
                 ],
             'line-width': [
@@ -435,7 +438,11 @@ export class AnnotatedPathLayer extends VectorStyleLayer
                     ['case',
                     ['boolean', ['feature-state', 'hidden'], false], 0.0,
                     ['boolean', ['feature-state', 'annotated'], false],
-                        exclude ? 0.0 : (['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]]),
+                        exclude ? 0.0 : (['*', 1.1, ['case',
+                            ['has', 'stroke-width'], ['get', 'stroke-width'],
+                            ['boolean', ['feature-state', 'active'], false], 1.1,
+                            ['boolean', ['feature-state', 'active'], false], 1.1,
+                            1.0]]),
                         0.0
                     ],
                 STROKE_INTERPOLATION
@@ -446,7 +453,6 @@ export class AnnotatedPathLayer extends VectorStyleLayer
 
     style(options)
     {
-        const dimmed = 'dimmed' in options && options.dimmed;
         return {
             ...super.style(),
             'type': 'line',