@abi-software/flatmap-viewer 2.2.11-devel.1 → 2.2.12-b.1

package/src/layers.js

@@ -20,9 +20,6 @@ limitations under the License.
 
 'use strict';
 
-
-// See https://stevage.github.io/map-gl-utils/ for layering ideas...
-
 //==============================================================================
 
 import {PATHWAYS_LAYER} from './pathways.js';
@@ -38,12 +35,13 @@ const RASTER_LAYERS_ID = 'background-image-layer';
 
 class MapStylingLayers
 {
-    constructor(flatmap, layerId, options)
+    constructor(flatmap, layer, options)
     {
         this.__map = flatmap.map;
-        this.__id = layerId;
-        this.__layers = [];
+        this.__id = layer.id;
+        this.__description = layer.description;
         this.__active = true;
+        this.__layers = [];
         this.__layerOptions = options;
         this.__separateLayers = flatmap.options.separateLayers;
     }
@@ -54,6 +52,12 @@ class MapStylingLayers
         return this.__id;
     }
 
+    get description()
+    //===============
+    {
+        return this.__description;
+    }
+
     get active()
     //==========
     {
@@ -88,6 +92,14 @@ class MapStylingLayers
         return this.__separateLayers ? `${this.__id}_${sourceLayer}`
                                      : sourceLayer;
     }
+
+    setPaint(options)
+    {
+    }
+
+    setFilter(options)
+    {
+    }
 }
 
 //==============================================================================
@@ -96,7 +108,7 @@ class MapFeatureLayers extends MapStylingLayers
 {
     constructor(flatmap, layer, options)
     {
-        super(flatmap, layer.id, options);
+        super(flatmap, layer, options);
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
 
@@ -110,8 +122,10 @@ class MapFeatureLayers extends MapStylingLayers
                 this.__addStyleLayer(style.FeatureDashLineLayer);
                 this.__addStyleLayer(style.FeatureLineLayer);
                 this.__addStyleLayer(style.FeatureBorderLayer);
+                this.__addStyleLayer(style.CentrelineNodeFillLayer);
+                this.__addStyleLayer(style.CentrelineNodeBorderLayer);
             }
-            this.__addPathwayStyleLayers(this.__layerOptions);
+            this.__addPathwayStyleLayers();
             if (vectorFeatures) {
                 this.__addStyleLayer(style.FeatureLargeSymbolLayer);
                 if (!flatmap.options.tooltips) {
@@ -120,9 +134,9 @@ class MapFeatureLayers extends MapStylingLayers
             }
         }
 
-        // Make sure our colour options are set properly, in particular raster layer visibility
+        // Make sure our paint options are set properly, in particular raster layer visibility
 
-        this.setColour(this.__layerOptions);
+        this.setPaint(this.__layerOptions);
     }
 
     __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER)
@@ -141,16 +155,20 @@ class MapFeatureLayers extends MapStylingLayers
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
                 .indexOf(pathwaysVectorSource) >= 0) {
+            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
+
             this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER);
             this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER);
+
             this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
             this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
             this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
         }
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         for (const layer of this.__layers) {
             const paintStyle = layer.paintStyle(options, true);
@@ -159,6 +177,17 @@ class MapFeatureLayers extends MapStylingLayers
             }
         }
     }
+
+    setFilter(options)
+    //================
+    {
+        for (const layer of this.__layers) {
+            const filter = layer.makeFilter(options);
+            if (filter !== null) {
+                this.__map.setFilter(layer.id, filter, {validate: true});
+            }
+        }
+    }
 }
 
 //==============================================================================
@@ -167,7 +196,11 @@ class MapRasterLayers extends MapStylingLayers
 {
     constructor(flatmap, options, bodyLayerId=null)
     {
-        super(flatmap, RASTER_LAYERS_ID, options);
+        const rasterLayer = {
+            id: RASTER_LAYERS_ID,
+            description: RASTER_LAYERS_NAME
+        };
+        super(flatmap, rasterLayer, options);
         if (bodyLayerId !== null) {
             const layerId = `${bodyLayerId}_${FEATURES_LAYER}`;
             const source = flatmap.options.separateLayers ? layerId : FEATURES_LAYER;
@@ -175,8 +208,8 @@ class MapRasterLayers extends MapStylingLayers
             this.__map.addLayer(styleLayer.style(this.__layerOptions));
             this.__layers.push(styleLayer);
         }
-        // Make sure our colour options are set properly, in particular raster layer visibility
-        this.setColour(this.__layerOptions);
+        // Make sure our paint options are set properly, in particular raster layer visibility
+        this.setPaint(this.__layerOptions);
     }
 
     addLayer(layer)
@@ -187,12 +220,12 @@ class MapRasterLayers extends MapStylingLayers
             this.__map.addLayer(rasterLayer.style(this.__layerOptions));
             this.__layers.push(rasterLayer);
         }
-        // Make sure our colour options are set properly, in particular raster layer visibility
-        this.setColour(this.__layerOptions);
+        // Make sure our paint options are set properly, in particular raster layer visibility
+        this.setPaint(this.__layerOptions);
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         const coloured = !('colour' in options) || options.colour;
         for (const layer of this.__layers) {
@@ -212,12 +245,12 @@ export class LayerManager
     {
         this.__flatmap = flatmap;
         this.__map = flatmap.map;
-        this.__layers = new Map;
         this.__mapLayers = new Map;
         this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
             colour: true,
-            outline: true
-        });;
+            outline: true,
+            sckan: 'valid'
+        });
         const backgroundLayer = new style.BackgroundLayer();
         if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
@@ -237,44 +270,29 @@ export class LayerManager
             for (const layer of flatmap.layers) {
                 rasterLayers.addLayer(layer);
             }
-            this.__layers.set(RASTER_LAYERS_ID, {
-                id: RASTER_LAYERS_ID,
-                description: RASTER_LAYERS_NAME
-            });
             this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
         } else {
             this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
-           this.__addFeatureLayer(layer);
+            this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                                layer,
+                                                                this.__layerOptions));
         }
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        const activeNames = [];
-        for (const mapLayer of this.__mapLayers.values()) {
-            if (mapLayer.active) {
-                activeNames.push(mapLayer.id);
-            }
-        }
-        return activeNames;
-    }
-
-    __addFeatureLayer(layer)
-    //======================
-    {
-        this.__layers.set(layer.id, layer);
-        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
-                                                            layer,
-                                                            this.__layerOptions));
-    }
-
     get layers()
     //==========
     {
-        return Array.from(this.__layers.values());
+        const layers = [];
+        for (const mapLayer of this.__mapLayers.values()) {
+            layers.push({
+                id: mapLayer.id,
+                description: mapLayer.description,
+                enabled: mapLayer.active
+            });
+        }
+        return layers;
     }
 
     activate(layerId, enable=true)
@@ -287,19 +305,53 @@ export class LayerManager
                 this.__layerOptions.activeRasterLayer = enable;
                 for (const mapLayer of this.__mapLayers.values()) {
                     if (mapLayer.id !== RASTER_LAYERS_ID) {
-                        mapLayer.setColour(this.__layerOptions);
+                        mapLayer.setPaint(this.__layerOptions);
                     }
                 }
             }
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setPaint(options={})
+    //==================
+    {
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
+        for (const mapLayer of this.__mapLayers.values()) {
+            mapLayer.setPaint(this.__layerOptions);
+        }
+    }
+
+    setFilter(options={})
+    //===================
     {
         this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
         for (const mapLayer of this.__mapLayers.values()) {
-            mapLayer.setColour(this.__layerOptions);
+            mapLayer.setFilter(this.__layerOptions);
+        }
+    }
+
+    enableSckanPath(sckanState, enable=true)
+    //======================================
+    {
+        const currentState = this.__layerOptions.sckan;
+        const validEnabled = ['valid', 'all'].indexOf(currentState) >= 0;
+        const invalidEnabled = ['invalid', 'all'].indexOf(currentState) >= 0;
+        let newState = sckanState.toLowerCase();
+        if (newState === 'valid') {
+            if (enable && !validEnabled) {
+                newState = invalidEnabled ? 'all' : 'valid';
+            } else if (!enable && validEnabled) {
+                newState = invalidEnabled ? 'invalid' : 'none';
+            }
+        } else if (newState === 'invalid') {
+            if (enable && !invalidEnabled) {
+                newState = validEnabled ? 'all' : 'invalid';
+            } else if (!enable && invalidEnabled) {
+                newState = validEnabled ? 'valid' : 'none';
+            }
+        }
+        if (newState !== this.__layerOptions.sckan) {
+            this.setFilter({sckan: newState});
         }
     }
 }

package/src/main.js

@@ -57,14 +57,10 @@ export async function standaloneViewer(map_endpoint=null, options={})
     const mapOptions = Object.assign({
         tooltips: true,
         background: defaultBackground,
-        backgroundControl: true,
         debug: false,
         minimap: false,
-        searchable: true,
-        featureInfo: true,
         showPosition: false,
-        pathControls: true,
-        layerControl: true
+        standalone: true
     }, options);
 
     function loadMap(id, taxon, sex)
@@ -92,8 +88,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
         mapManager.loadMap(id, 'map-canvas', (eventType, ...args) => {
                 if (args[0].type === 'control' && args[0].control === 'background') {
                     mapOptions.background = args[0].value;
-                } else if (eventType === 'click') {
-                    console.log(args);
                 }
             }, mapOptions)
             .then(map => {

package/src/minimap.js

@@ -300,7 +300,7 @@ export class MinimapControl
             const newBounds = this.moveTrackingRect_(offset);
 
             this._map.fitBounds(newBounds, {
-                duration: 80,   // Why these options??
+                duration: 80,
                 noMoveStart: true
             });
         }

package/src/pathways.js

@@ -26,19 +26,20 @@ export const PATHWAYS_LAYER = 'pathways';
 
 //==============================================================================
 
-export const PATH_TYPES = [
+const PATH_TYPES = [
     { type: "cns", label: "CNS", colour: "#9B1FC1"},
     { type: "intracardiac", label: "Local circuit neuron", colour: "#F19E38"},
-    { type: "lcn", label: "Local circuit neuron", colour: "#F19E38"},
     { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
-    { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
+    { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A", dashed: true},
     { type: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
     { type: "somatic", label: "Somatic lower motor", colour: "#98561D"},
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
-    { type: "symp-post", label: "Sympathetic post-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: "venous", label: "Venous blood vessel", colour: "#2F6EBA"},
+    { type: "centreline", label: "Nerve centrelines", colour: "#CCC", enabled: false},
+    { type: "error", label: "Paths with errors or warnings", colour: "#FF0"}
 ];
 
 export const PATH_STYLE_RULES =
@@ -142,16 +143,28 @@ export class Pathways
                 this.__typePaths['other'].push(...paths);
             }
         }
+        // Nerve centrelines are a special case with their own controls
+        this.__haveCentrelines = false;
     }
 
-    get pathTypes()
-    //=============
+    get haveCentrelines()
+    //===================
+    {
+        return this.__haveCentrelines;
+    }
+
+    pathTypes()
+    //=========
     {
         const pathTypes = [];
         for (const pathType of PATH_TYPES) {
             if (pathType.type in this.__typePaths
             && this.__typePaths[pathType.type].length > 0) {
-                pathTypes.push(pathType);
+                if (pathType.type === 'centreline') {
+                    this.__haveCentrelines = true;
+                } else {
+                    pathTypes.push(pathType);
+                }
             }
         }
         return pathTypes;

package/src/search.js

@@ -29,7 +29,6 @@ import MiniSearch from 'minisearch';
 // The properties of a feature we index and show
 
 export const indexedProperties = [
-    'id',
     'label',
     'models',
     'source'