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

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,16 @@ class MapStylingLayers
         return this.__separateLayers ? `${this.__id}_${sourceLayer}`
                                      : sourceLayer;
     }
+
+    setColour(options)
+    {
+
+    }
+
+    setFilter(options)
+    {
+
+    }
 }
 
 //==============================================================================
@@ -96,7 +110,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');
 
@@ -111,7 +125,7 @@ class MapFeatureLayers extends MapStylingLayers
                 this.__addStyleLayer(style.FeatureLineLayer);
                 this.__addStyleLayer(style.FeatureBorderLayer);
             }
-            this.__addPathwayStyleLayers(this.__layerOptions);
+            this.__addPathwayStyleLayers();
             if (vectorFeatures) {
                 this.__addStyleLayer(style.FeatureLargeSymbolLayer);
                 if (!flatmap.options.tooltips) {
@@ -141,8 +155,12 @@ 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);
@@ -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;
@@ -212,11 +245,11 @@ 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) {
@@ -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);
-        }
-    }
-
-    get activeLayerNames()
-    //====================
-    {
-        const activeNames = [];
-        for (const mapLayer of this.__mapLayers.values()) {
-            if (mapLayer.active) {
-                activeNames.push(mapLayer.id);
-            }
+            this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                                layer,
+                                                                this.__layerOptions));
         }
-        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)
@@ -294,14 +312,23 @@ export class LayerManager
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setColour(options={})
+    //===================
     {
         this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
         for (const mapLayer of this.__mapLayers.values()) {
             mapLayer.setColour(this.__layerOptions);
         }
     }
+
+    setFilter(options={})
+    //===================
+    {
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
+        for (const mapLayer of this.__mapLayers.values()) {
+            mapLayer.setFilter(this.__layerOptions);
+        }
+    }
 }
 
 //==============================================================================

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

@@ -29,7 +29,6 @@ export const PATHWAYS_LAYER = 'pathways';
 export 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: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
@@ -38,7 +37,8 @@ export const PATH_TYPES = [
     { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423"},
     { 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: "#2F6EBA", enabled: false}
 ];
 
 export const PATH_STYLE_RULES =

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'

package/src/styling.js

@@ -44,6 +44,11 @@ class VectorStyleLayer
         return this.__id;
     }
 
+    makeFilter(options)
+    {
+        return null;
+    }
+
     paintStyle(options, changes=false)
     {
         return {};
@@ -184,7 +189,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push('red');
+        lineColour.push('black');
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
             lineColour.push('blue');
@@ -193,7 +198,6 @@ export class FeatureBorderLayer extends VectorStyleLayer
         lineColour.push('#000');
         lineColour.push(['has', 'node']);
         lineColour.push('#AFA202');
-        // this colour should be complement of background colour...
         lineColour.push('#444');
 
         const lineOpacity = [
@@ -251,25 +255,32 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, options={})
     {
+        const dashed = ('dashed' in options && options.dashed);
         const filterType = dashed ? 'line-dash' : 'line';
         super(id, `feature-${filterType}`, sourceLayer);
-        this.__filter = dashed ?
-            [
-                'any',
-                ['==', 'type', `line-dash`]
-            ]
-        :
+        this.__dashed = dashed;
+    }
+
+    makeFilter(options={})
+    {
+        return this.__dashed ? [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['==', 'type', `line-dash`]
+        ] : [
+            'all',
+            ['==', '$type', 'LineString'],
             [
                 'any',
                 ['==', 'type', 'bezier'],
                 ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+            ]
+        ];
     }
 
-    paintStyle(options)
+    paintStyle(options, changes=false)
     {
         const coloured = !('colour' in options) || options.colour;
         const paintStyle = {
@@ -311,7 +322,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         if (this.__dashed) {
             paintStyle['line-dasharray'] = [3, 2];
         }
-        return paintStyle;
+        return super.changedPaintStyle(paintStyle, changes);
     }
 
     style(options)
@@ -319,12 +330,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         return {
             ...super.style(),
             'type': 'line',
-            'filter': [
-                'all',
-                ['==', '$type', 'LineString'],
-                this.__filter
-                 // not for paths...
-            ],
+            'filter': this.makeFilter(options),
             'paint': this.paintStyle(options)
         };
     }
@@ -336,7 +342,7 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, sourceLayer, {dashed: true});
     }
 }
 
@@ -344,26 +350,63 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 export class PathLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, options={})
     {
+        const dashed = ('dashed' in options && options.dashed);
         const filterType = dashed ? 'line-dash' : 'line';
         super(id, `path-${filterType}`, sourceLayer);
-        this.__filter = dashed ?
-            [
+        this.__dashed = dashed;
+    }
+
+    makeFilter(options={})
+    {
+        const sckanState = !'sckan' in options ? 'all'
+                         : options.sckan.toLowerCase();
+        const sckan_filter =
+            sckanState == 'none' ? [
+                ['!has', 'sckan']
+            ] :
+            sckanState == 'valid' ? [[
                 'any',
-                ['==', 'type', `line-dash`]
-            ]
-        :
+                ['!has', 'sckan'],
+                [
+                    'all',
+                    ['has', 'sckan'],
+                    ['==', 'sckan', true]
+                ]
+            ]] :
+            sckanState == 'invalid' ? [[
+                'any',
+                ['!has', 'sckan'],
+                [
+                    'all',
+                    ['has', 'sckan'],
+                    ['!=', 'sckan', true]
+                ]
+            ]] :
+            [ ];
+
+        return this.__dashed ? [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['==', 'type', `line-dash`],
+            ...sckan_filter
+        ] : [
+            'all',
+            ['==', '$type', 'LineString'],
             [
                 'any',
                 ['==', 'type', 'bezier'],
-                ['==', 'type', 'centreline'],
-                ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+                [
+                    'all',
+                    ['==', 'type', `line`],
+                    ...sckan_filter
+                ]
+            ]
+        ];
     }
 
-    paintStyle(options, changes=false)
+    paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
@@ -372,7 +415,6 @@ export class PathLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
-                ['==', ['get', 'type'], 'centreline'], '#00F',
                 ['has', 'error'], '#FFFE0E',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
@@ -385,7 +427,6 @@ export class PathLineLayer extends VectorStyleLayer
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
-                // Only dim lines when other lines are selected, not if just features selected??
                 dimmed ? 0.1 : 0.8
             ],
             'line-width': [
@@ -416,16 +457,12 @@ export class PathLineLayer extends VectorStyleLayer
         return super.changedPaintStyle(paintStyle, changes);
     }
 
-    style(options)
+    style(options={})
     {
         return {
             ...super.style(),
             'type': 'line',
-            'filter': [
-                'all',
-                ['==', '$type', 'LineString'],
-                this.__filter
-            ],
+            'filter': this.makeFilter(options),
             'layout': {
                 'line-cap': 'butt'
             },
@@ -440,12 +477,97 @@ export class PathDashlineLayer extends PathLineLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, sourceLayer, {dashed: true});
     }
 }
 
 //==============================================================================
 
+class CentrelineLayer extends VectorStyleLayer
+{
+    constructor(id, type, sourceLayer)
+    {
+        super(id, `centreline-${type}`, sourceLayer);
+        this.__type = type;
+    }
+
+    paintStyle(options, changes=false)
+    {
+        const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': (this.__type == 'edge') ? '#000' : [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'active'], false], '#444',
+                '#CCC'
+            ],
+            'line-opacity': [
+                'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                    ['boolean', ['feature-state', 'selected'], false], 1.0,
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                0.8
+            ],
+            'line-width': [
+                'let',
+                'width',
+                    (this.__type == 'edge') ? 1.6 : 1.2,
+                    [
+                    'interpolate',
+                        ['exponential', 2],
+                        ['zoom'],
+                         2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+                         7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+                         9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+                ]
+            ]
+            // Need to vary width based on zoom??
+            // Or opacity??
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': [
+                'all',
+                ['==', '$type', 'LineString'],
+                ['==', 'kind', 'centreline']
+            ],
+            'paint': this.paintStyle(options),
+            'layout': {
+                'line-cap': 'square',
+                'line-join': 'bevel'
+            }
+        };
+    }
+}
+
+
+export class CentrelineEdgeLayer extends CentrelineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'edge', sourceLayer);
+    }
+
+}
+
+export class CentrelineTrackLayer extends CentrelineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'track', sourceLayer);
+    }
+
+
+}
+
+//==============================================================================
+
 export class FeatureNerveLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer)
@@ -461,6 +583,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'filter': [
                  'all',
                  ['==', '$type', 'LineString'],
+                 ['!=', 'kind', 'centreline'],
                  ['==', 'type', 'nerve']
             ],
             'paint': {

package/static/flatmap-viewer.css

@@ -205,7 +205,7 @@ label[for=path-all-paths] {
 .nerve-cns {
     background: #9B1FC1;
 }
-.nerve-lcn {
+.nerve-intracardiac {
     background: #F19E38;
 }
 .nerve-other {