@abi-software/flatmap-viewer 2.3.4 → 2.4.0-a.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.4``
+* ``npm install @abi-software/flatmap-viewer@2.4.0-a.2``
 
 Documentation
 -------------

package/package.json

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

package/src/controls/info.js

@@ -25,6 +25,7 @@ import { indexedProperties } from '../search.js';
 export const displayedProperties = [
     'id',
     'class',
+    'cd-class',
     'fc-class',
     'fc-kind',
     'name',
@@ -138,6 +139,7 @@ export class InfoControl
                 this._active = true;
                 button.classList.add('control-button-active');
             } else {
+                this.reset();
                 this._active = false;
                 button.classList.remove('control-button-active');
             }
@@ -195,7 +197,7 @@ export class InfoControl
             const featureIds = [];
             const displayFeatures = [];
             for (const feat of featureList) {
-                if (featureIds.indexOf(feat.id) < 0) {
+                if (!featureIds.includes(feat.id)) {
                     featureIds.push(feat.id);
                     const displayFeat = {};
                     displayProperties.forEach(prop => {

package/src/controls/minimap.js

@@ -132,7 +132,7 @@ export class MinimapControl
         let width = DEFAULTS.width;
         if (typeof this._options.width === 'string') {
             width = parseInt(this._options.width);
-            if (this._options.width.indexOf('%') > 0) {
+            if (this._options.width.includes('%')) {
                 width = width*mapCanvasElement.width/100;
             }
         } else if (typeof this._options.width === 'number') {

package/src/flatmap-viewer.js

@@ -60,8 +60,9 @@ class FlatMap
         this._baseUrl = mapBaseUrl;
         this.__id = mapDescription.id;
         this.__uuid = mapDescription.uuid;
-        this._details = mapDescription.details;
-        this._created = mapDescription.created;
+        this.__details = mapDescription.details;
+        this.__provenance = mapDescription.provenance;
+        this.__created = mapDescription.created;
         this.__taxon = mapDescription.taxon;
         this.__biologicalSex = mapDescription.biologicalSex;
         this._mapNumber = mapDescription.number;
@@ -169,7 +170,7 @@ class FlatMap
         if (mapDescription.options.navigationControl) {
             const value = mapDescription.options.navigationControl;
             const position = ((typeof value === 'string')
-                           && (['top-left', 'top-right', 'bottom-right', 'bottom-left'].indexOf(value) >= 0))
+                           && ['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(value))
                            ? value : 'bottom-right';
             this._map.addControl(new NavigationControl(this), position);
         }
@@ -424,7 +425,7 @@ class FlatMap
     get created()
     //===========
     {
-        return this._created;
+        return this.__created;
     }
 
     /**
@@ -460,7 +461,18 @@ class FlatMap
     get details()
     //===========
     {
-        return this._details;
+        return this.__details;
+    }
+
+    /**
+     * The map's provenance as returned from the map server.
+     *
+     * @type Object
+     */
+    get provenance()
+    //==============
+    {
+        return this.__provenance;
     }
 
     /**
@@ -958,6 +970,7 @@ class FlatMap
             'models',
             'nodeId',
             'source',
+            'taxon',
             'hyperlinks'
         ];
         const jsonProperties = [
@@ -967,7 +980,7 @@ class FlatMap
             if (property in properties) {
                 const value = properties[property];
                 if (value !== undefined) {
-                    if (jsonProperties.indexOf(property) >= 0) {
+                    if (jsonProperties.includes(property)) {
                         data[property] = JSON.parse(properties[property])
                     } else {
                         data[property] = properties[property];
@@ -1405,6 +1418,10 @@ export class MapManager
 
                 const annotations = await this._mapServer.loadJSON(`flatmap/${mapId}/annotations`);
 
+                // Get the map's provenance
+
+                const provenance = await this._mapServer.loadJSON(`flatmap/${mapId}/metadata`);
+
                 // Get additional marker details for the map
 
                 const mapMarkers = await this._mapServer.loadJSON(`flatmap/${mapId}/markers`);
@@ -1458,6 +1475,7 @@ export class MapManager
                         annotations: annotations,
                         number: this._mapNumber,
                         pathways: pathways,
+                        provenance, provenance,
                         callback: callback
                     },
                     resolve);

package/src/interactions.js

@@ -261,7 +261,7 @@ export class UserInteractions
             const feature = this.mapFeature(mapId);
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'map-annotation': true });
-                if (annotated_features.indexOf(ann.id) >= 0) {
+                if (annotated_features.includes(ann.id)) {
                     this._map.setFeatureState(feature, { 'annotated': true });
                 }
             }
@@ -902,7 +902,7 @@ export class UserInteractions
                     const htmlList = [];
                     const featureIds = [];
                     for (const feature of labelledFeatures) {
-                        if (featureIds.indexOf(feature.id) < 0) {
+                        if (!featureIds.includes(feature.id)) {
                             featureIds.push(feature.id);
                             for (const prop of debugProperties) {
                                 if (prop in feature.properties) {
@@ -976,7 +976,7 @@ export class UserInteractions
             const clickedFeatureId = feature.id;
             const dim = !('properties' in feature
                        && 'kind' in feature.properties
-                       && ['cell-type', 'scaffold', 'tissue'].indexOf(feature.properties.kind) >= 0);
+                       && ['cell-type', 'scaffold', 'tissue'].includes(feature.properties.kind));
             if (!(event.ctrlKey || event.metaKey)) {
                 let selecting = true;
                 for (const featureId of this._selectedFeatureIds.keys()) {
@@ -1177,7 +1177,7 @@ export class UserInteractions
 
         for (const featureId of featureIds) {
             const annotation = this._flatmap.annotation(featureId);
-            if (annotation.geometry.indexOf('Polygon') < 0) {
+            if (!annotation.geometry.includes('Polygon')) {
                 continue;
             }
             if (!('marker' in annotation)) {
@@ -1258,7 +1258,7 @@ export class UserInteractions
         for (const [marker, id] of this.__markerIdByMarker.entries()) {
             if (visibleBounds.contains(marker.getLngLat())) {
                 const annotation = this.__annotationByMarkerId.get(id);
-                if (anatomicalIds.indexOf(annotation.models) < 0) {
+                if (!anatomicalIds.includes(annotation.models)) {
                     anatomicalIds.push(annotation.models);
                 }
             }
@@ -1275,7 +1275,7 @@ export class UserInteractions
             return;
         }
 
-        if (['mouseenter', 'mouseleave', 'click'].indexOf(event.type) >= 0) {
+        if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
             this.__activeMarker = marker;
 
             // Remove any existing tooltips
@@ -1285,7 +1285,7 @@ export class UserInteractions
             // Reset cursor
             marker.getElement().style.cursor = 'default';
 
-            if (['mouseenter', 'click'].indexOf(event.type) >= 0) {
+            if (['mouseenter', 'click'].includes(event.type)) {
                 const markerId = this.__markerIdByMarker.get(marker);
                 const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature

package/src/layers.js

@@ -115,8 +115,7 @@ class MapFeatureLayers extends MapStylingLayers
         // if no image layers then make feature borders (and lines?) more visible...??
         if (haveVectorLayers) {
             const featuresVectorSource = this.vectorSourceId(FEATURES_LAYER);
-            const vectorFeatures = vectorTileSource.vectorLayerIds
-                                                   .indexOf(featuresVectorSource) >= 0;
+            const vectorFeatures = vectorTileSource.vectorLayerIds.includes(featuresVectorSource);
             if (vectorFeatures) {
                 this.__addStyleLayer(style.FeatureFillLayer);
                 this.__addStyleLayer(style.FeatureDashLineLayer);
@@ -152,7 +151,7 @@ class MapFeatureLayers extends MapStylingLayers
         const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER);
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
-                .indexOf(pathwaysVectorSource) >= 0) {
+                .includes(pathwaysVectorSource)) {
             this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER);
 
             this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
@@ -343,8 +342,8 @@ export class LayerManager
     //=======================================
     {
         const currentState = this.__layerOptions.sckan;
-        const validEnabled = ['valid', 'all'].indexOf(currentState) >= 0;
-        const invalidEnabled = ['invalid', 'all'].indexOf(currentState) >= 0;
+        const validEnabled = ['valid', 'all'].includes(currentState);
+        const invalidEnabled = ['invalid', 'all'].includes(currentState);
         let newState = sckanState.toLowerCase();
         if (newState === 'valid') {
             if (enable && !validEnabled) {

package/src/main.js

@@ -62,7 +62,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showId: true,
         showPosition: false,
         standalone: true,
-        annotator: true
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/search.js

@@ -96,7 +96,7 @@ export class SearchIndex
         const options = {};
         let results = [];
         text = text.trim()
-        if (text.length > 2 && ["'", '"'].indexOf(text.slice(0, 1)) >= 0) {
+        if (text.length > 2 && ["'", '"'].includes(text.slice(0, 1))) {
             text = text.replaceAll(text.slice(0, 1), '');
             results = this._searchEngine.search(text, {prefix: true, combineWith: 'AND'});
         } else if (text.length > 1) {

package/src/systems.js

@@ -16,18 +16,26 @@ 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.
 
-**/
+******************************************************************************/
+
+const FC_KIND = {
+    SYSTEM: ['fc:System', 'fc-class:System'],
+    ORGAN:  ['fc:Organ', 'fc-class:Organ'],
+    FTU:    ['fc:Ftu', 'fc-class:Ftu']
+};
+
 //==============================================================================
 
 export class SystemsManager
 {
     constructor(flatmap, ui, enabled=false)
     {
+        this.__flatmap = flatmap;
         this.__ui = ui;
         this.__systems = new Map();
         this.__enabledChildren = new Map();
-        for (const [id, ann] of flatmap.annotations) {
-            if (ann['fc-class'] === 'fc-class:System') {
+        for (const [_, ann] of flatmap.annotations) {
+            if (FC_KIND.SYSTEM.includes(ann['fc-class'])) {
                 const systemId = ann.name.replaceAll(' ', '_');
                 if (this.__systems.has(systemId)) {
                     this.__systems.get(systemId).featureIds.push(ann.featureId)
@@ -37,7 +45,8 @@ export class SystemsManager
                         colour: ann.colour,
                         featureIds: [ ann.featureId ],
                         enabled: false,
-                        pathIds: ('path-ids' in ann) ? ann['path-ids'] : []
+                        pathIds: ('path-ids' in ann) ? ann['path-ids'] : [],
+                        organs: this.__children(ann.children, FC_KIND.ORGAN)
                     });
                 this.__ui.enableFeature(ann.featureId, false, true);
                 }
@@ -57,6 +66,26 @@ export class SystemsManager
         }
     }
 
+    __children(childFeatureIds, childClass)
+    //=====================================
+    {
+        const children = [];
+        for (const childFeatureId of childFeatureIds || []) {
+            const childAnnotation = this.__flatmap.annotation(childFeatureId);
+            if (childAnnotation !== undefined && childClass.includes(childAnnotation['fc-class'])) {
+                const child = {
+                    label: childAnnotation.label,
+                    models: childAnnotation.models
+                };
+                if (childClass === FC_KIND.ORGAN) {
+                    child.ftus = this.__children(childAnnotation.children, FC_KIND.FTU)
+                };
+                children.push(child);
+            }
+        }
+        return children;
+    }
+
     get systems()
     //===========
     {
@@ -66,7 +95,8 @@ export class SystemsManager
                 id: systemId,
                 name: system.name,
                 colour: system.colour,
-                enabled: system.enabled
+                enabled: system.enabled,
+                organs: system.organs
             });
         }
         return systems;

package/src/utils.js

@@ -35,7 +35,7 @@ export class List extends Array {
     }
 
     contains(element) {
-        return (super.indexOf(element) >= 0);
+        return (super.includes(element));
     }
 
     extend(other) {
@@ -96,12 +96,12 @@ export class Mutex
 
 export function normaliseId(id)
 {
-    if (id.indexOf(':') < 0) {
+    if (!id.includes(':')) {
         return id;
     }
     const parts = id.split(':')
     const lastPart = parts[parts.length - 1]
-    if (['http', 'https', 'urn'].indexOf(parts[0]) >= 0 || '0123456789'.indexOf(lastPart[0]) < 0) {
+    if (['http', 'https', 'urn'].includes(parts[0]) || !'0123456789'.includes(lastPart[0])) {
         return id;
     }
     parts[parts.length - 1] = lastPart.padStart(8, '0');