@abi-software/flatmap-viewer 2.4.2-b.3 → 2.4.2-b.5

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

package/package.json

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

package/src/controls/info.js

@@ -29,7 +29,8 @@ export const displayedProperties = [
     'fc-class',
     'fc-kind',
     'name',
-    ...indexedProperties
+    ...indexedProperties,
+    'featureId'
 ];
 
 //==============================================================================
@@ -247,18 +248,25 @@ export class InfoControl
                             }
                         }
                     });
-                    displayValues.set(feature.id, values);
+                    if (Object.keys(values).length > 0) {
+                        displayValues.set(feature.id, values);
+                    }
                 }
             }
 
             const htmlList = [];
-            for (const values of displayValues.values()) {
+            let lastId = null;
+            for (const [id, values] of displayValues.entries()) {
+                if (lastId !== null && lastId !== id) {
+                    htmlList.push(`<span><hr/></span><span></span>`);
+                }
                 for (const prop of displayedProperties) {
                     if (prop in values) {
                         htmlList.push(`<span class="info-name">${prop}:</span>`);
                         htmlList.push(`<span class="info-value">${values[prop]}</span>`);
                     }
                 }
+                lastId = id;
             }
             if (htmlList.length > 0) {
                 html = `<div id="info-control-info">${htmlList.join('\n')}</div>`;

package/src/flatmap-viewer.js

@@ -622,6 +622,12 @@ class FlatMap
         return (ann && 'models' in ann) ? utils.normaliseId(ann.models) : null;
     }
 
+    /**
+     * Get model terms of all paths connected to a node.
+     *
+     * @param      {number}  pathId  The local (GeoJSON) identifier of a node
+     * @return     {set<string>}  Model terms of all paths connected to the node
+     */
     nodePathModels(nodeId)
     //====================
     {
@@ -630,6 +636,20 @@ class FlatMap
         }
     }
 
+    /**
+     * Get feature ids of all nodes of a path model.
+     *
+     * @param      {string}  pathId  The path model identifier
+     * @return     {set<number>}  Local (GeoJSON) identifiers of features on the path
+     */
+    pathModelNodes(modelId)
+    //=====================
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.pathModelNodes(modelId);
+        }
+    }
+
     get layers()
     //==========
     {
@@ -936,6 +956,7 @@ class FlatMap
      * @param {string}  anatomicalId  The anatomical identifier of the feature on which
      *                                to place the marker.
      * @arg {Object} options          Configurable options for the marker.
+     * @arg {string} options.className Space-separated CSS class names to add to marker element.
      * @arg {string} options.colour   Colour of the default marker. Defaults to ``'#005974'``
      *                                (dark blue).
      * @arg {string} options.element  The DOM element to use as a marker. The default is
@@ -1012,23 +1033,18 @@ class FlatMap
         return false;
     }
 
-    /**
-     * Generate a callback as a result of some event with a flatmap feature.
-     *
-     * @param      {string}  eventType     The event type
-     * @param      {Object}  properties    Properties associated with the feature
-     */
-    featureEvent(eventType, properties)
-    //=================================
+    __exportedProperties(properties)
+    //==============================
     {
         const data = {};
         const exportedProperties = [
+            'id',
+            'featureId',
             'connectivity',
             'dataset',
             'kind',
             'label',
             'models',
-            'nodeId',
             'source',
             'taxons',
             'hyperlinks'
@@ -1042,6 +1058,8 @@ class FlatMap
                 if (value !== undefined) {
                     if (jsonProperties.includes(property)) {
                         data[property] = JSON.parse(properties[property])
+                    } else if (property === 'featureId') {
+                        data[property] = +properties[property];  // Ensure numeric
                     } else {
                         data[property] = properties[property];
                     }
@@ -1050,12 +1068,41 @@ class FlatMap
         }
         if (Object.keys(data).length > 0) {
             data['type'] = 'feature';
+        }
+        return data;
+    }
+
+    /**
+     * Generate a callback as a result of some event with a flatmap feature.
+     *
+     * @param      {string}  eventType     The event type
+     * @param      {Object}  properties    Properties associated with the feature
+     */
+    featureEvent(eventType, properties)
+    //=================================
+    {
+        const data = this.__exportedProperties(properties);
+
+        if (Object.keys(data).length > 0) {
             this.callback(eventType, data);
             return true;
         }
         return false;
     }
 
+    /**
+     * Return properties associated with a feature.
+     *
+     * @param      {number}  featureId  The feature's internal (GeoJSON) id
+     * @returns    {Object}             Properties associated with the feature
+     */
+    featureProperties(featureId)
+    //==========================
+    {
+        const properties = this.annotation(featureId);
+        return properties ? this.__exportedProperties(properties) : {};
+    }
+
     /**
      * Generate a callback as a result of some event with a marker.
      *

package/src/interactions.js

@@ -1089,7 +1089,7 @@ export class UserInteractions
             }
         }
         if ('nodeId' in feature.properties) {
-            for (const featureId of this.__pathManager.nodeFeatureIds(feature.properties.nodeId)) {
+            for (const featureId of this.__pathManager.pathFeatureIds(feature.properties.nodeId)) {
                 this.__activateFeature(this.mapFeature(featureId));
             }
         }
@@ -1122,6 +1122,12 @@ export class UserInteractions
         return featureIds;
     }
 
+    pathModelNodes(modelId)
+    //=====================
+    {
+        return this.__pathManager.pathModelNodes(modelId);
+    }
+
     nodePathModels(nodeId)
     //====================
     {
@@ -1227,9 +1233,12 @@ export class UserInteractions
                 markerIcon.innerHTML = markerHTML.getElement().innerHTML;
                 markerElement.id = `marker-${markerId}`;
                 markerElement.appendChild(markerIcon);
-
+                const markerOptions = {element: markerElement};
+                if ('className' in options) {
+                    markerOptions.className = options.className;
+                }
                 const markerPosition = this.__markerPosition(featureId, annotation);
-                const marker = new maplibregl.Marker({element: markerElement})
+                const marker = new maplibregl.Marker(markerOptions)
                                              .setLngLat(markerPosition)
                                              .addTo(this._map);
                 markerElement.addEventListener('mouseenter',

package/src/main.js

@@ -93,7 +93,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
                 }
             }, mapOptions)
             .then(map => {
-                map.addMarker('UBERON:0000948'); // Heart
+                map.addMarker('UBERON:0000948', {className: 'heart-marker'}); // Heart
                 map.addMarker('UBERON:0002048'); // Lung
                 map.addMarker('UBERON:0000945'); // Stomach
                 map.addMarker('UBERON:0001155'); // Colon

package/src/pathways.js

@@ -214,16 +214,6 @@ export class PathManager
         return featureIds;
     }
 
-   nodeFeatureIds(nodeId)
-    //===================
-    {
-        const featureIds = new Set();
-        if (nodeId in this._nodePaths) {
-            this.addPathsToFeatureSet_(this._nodePaths[nodeId], featureIds);
-        }
-        return featureIds;
-    }
-
     pathProperties(feature)
     //=====================
     {
@@ -348,6 +338,20 @@ export class PathManager
         }
         return modelIds;
     }
+
+    pathModelNodes(modelId)
+    //=====================
+    {
+        const nodeIds = new Set();
+        if (modelId in this.__pathModelPaths) {
+            for (const pathId of this.__pathModelPaths[modelId]) {
+                for (const nodeId of this.__paths[pathId].nodes) {
+                    nodeIds.add(nodeId);
+                }
+            }
+        }
+        return nodeIds;
+    }
 }
 
 //==============================================================================