@abi-software/flatmap-viewer 2.2.1-alpha.1 → 2.2.1-beta.3

package/README.rst

@@ -2,7 +2,7 @@
 Flatmap Viewer
 ==============
 
-A viewer for anatomical flatmaps generated by `flatmap-maker <https://github.com/dbrnz/flatmap-maker>`_. The viewer is intended to be a component of a larger Javascript web application, although may be used standalone for local flatmap development and testing. Flatmap content is obtained from a `flatmap-server <https://github.com/dbrnz/flatmap-server>`_.
+A viewer for anatomical flatmaps generated by `flatmap-maker <https://github.com/AnatomicMaps/flatmap-maker>`_. The viewer is intended to be a component of a larger Javascript web application, although may be used standalone for local flatmap development and testing. Flatmap content is obtained from a `flatmap-server <https://github.com/AnatomicMaps/flatmap-server>`_.
 
 
 Standalone Use
@@ -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``
+* ``npm install @abi-software/flatmap-viewer@2.2.1-beta.3``
 
 Documentation
 -------------

package/package.json

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

package/src/flatmap-viewer.js

@@ -45,6 +45,10 @@ import * as utils from './utils.js';
 
 //==============================================================================
 
+const MAP_MAKER_SEPARATE_LAYERS_VERSION = 1.4;
+
+//==============================================================================
+
 /**
 * Maps are not created directly but instead are created and loaded by
 * :meth:`LoadMap` of :class:`MapManager`.
@@ -1001,9 +1005,15 @@ export class MapManager
     {
         return await this._initialisingMutex.dispatch(async () => {
             if (!this._initialised) {
-                this._mapList = await this._mapServer.loadJSON('');
+                this._mapList = [];
+                const maps = await this._mapServer.loadJSON('');
                 // Check map schema version (set by mapmaker) and
                 // remove maps we can't view (giving a console warning...)
+                for (const map of maps) {
+                    // Are features in separate vector tile source layers?
+                    map.separateLayers = ('version' in map && map.version >= MAP_MAKER_SEPARATE_LAYERS_VERSION);
+                    this._mapList.push(map);
+                }
                 this._initialised = true;
             }
         });
@@ -1157,7 +1167,7 @@ export class MapManager
             try {
                 const map = await this.findMap_(identifier);
                 if (map === null) {
-                    reject(`Unknown map for ${JSON.stringify(identifier)}`);
+                    reject(`Unknown map: ${JSON.stringify(identifier)}`);
                 };
 
                 // Load the maps index file
@@ -1249,7 +1259,17 @@ export class MapManager
                         outline: true
                     };
                 }
-                mapOptions.layerOptions.authoring = ('authoring' in mapIndex && mapIndex.authoring);
+                if ('authoring' in mapIndex) {
+                    mapOptions.layerOptions.style == 'authoring'
+                } else if ('style' in mapIndex) {
+                    mapOptions.layerOptions.style = mapIndex.style;
+                } else {
+                    mapOptions.layerOptions.style = 'flatmap';
+                }
+
+                // Are features in separate vector tile source layers?
+
+                mapOptions.separateLayers = map.separateLayers;
 
                 // Display the map
 

package/src/interactions.js

@@ -162,34 +162,6 @@ export class UserInteractions
 
         this._layerManager = new LayerManager(flatmap);
 
-        // Add the map's layers
-
-        // Layers have an id, either layer-N or an assigned name
-        // Some layers might have a description. These are the selectable layers,
-        // unless they are flagged as `no-select`
-        // Selectable layers have opacity 0 unless active, in which case they have opacity 1.
-        // `no-select` layers have opacity 0.5
-        // Background layer has opacity 0.2
-
-        const layersById = new Map();
-        const layerBackgroundIds = [];
-        for (const layer of flatmap.layers) {
-            layer.backgroundLayers = [];
-            layersById.set(layer.id, layer);
-        }
-        for (const layer of flatmap.layers) {
-            if (layer.background_for) {
-                const l = layersById.get(layer.background_for);
-                l.backgroundLayers.push(layer);
-                layerBackgroundIds.push(layer.id);
-            }
-        }
-        for (const layer of flatmap.layers) {
-            if (layerBackgroundIds.indexOf(layer.id) < 0) {
-                this._layerManager.addLayer(layer, flatmap.options.layerOptions);
-            }
-        }
-
         // Flag features that have annotations
         // Also flag those features that are models of something
 
@@ -285,7 +257,9 @@ export class UserInteractions
         return {
             id: featureId,
             source: VECTOR_TILES_SOURCE,
-            sourceLayer: ann['tile-layer']
+            sourceLayer: this._flatmap.options.separateLayers
+                         ? `${ann['layer']}_${ann['tile-layer']}`
+                         : ann['tile-layer']
         };
     }
 
@@ -873,6 +847,7 @@ export class UserInteractions
         const feature = this._activeFeatures[0]
         this.selectionEvent_(event.originalEvent, feature);
         if (feature !== undefined) {
+            this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', feature);
         }
     }
@@ -930,7 +905,9 @@ export class UserInteractions
         }
         let position = annotation.centroid;
         const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
-            'sourceLayer': annotation['tile-layer'],
+            'sourceLayer': this._flatmap.options.separateLayers
+                            ? `${annotation['layer']}_${annotation['tile-layer']}`
+                            : annotation['tile-layer'],
             'filter': [
                 'all',
                 [ '==', ['id'], parseInt(featureId) ],

package/src/layers.js

@@ -27,41 +27,58 @@ import {PATHWAYS_LAYER} from './pathways.js';
 import * as style from './styling.js';
 import * as utils from './utils.js';
 
+const FEATURES_LAYER = 'features'
+
 //==============================================================================
 
 class MapFeatureLayer
 {
-    constructor(flatmap, layer, options)
+    constructor(flatmap, layer, background_layers=true)
     {
         this.__map = flatmap.map;
+        this.__separateLayers = flatmap.options.separateLayers;
         this.__id = layer.id;
         this.__rasterLayers = [];
         this.__styleLayers = [];
 
-        const haveVectorLayers = (typeof this.__map.getSource('vector-tiles') !== 'undefined');
-        if (haveVectorLayers) {
-            this.__addStyleLayer(style.BodyLayer, options);
-        }
-        if (flatmap.details['image_layer']) {
-            for (const raster_layer_id of layer['image-layers']) {
-                const layerId = this.__addRasterLayer(raster_layer_id, options);
+        const layerOptions = flatmap.options.layerOptions;
+        const vectorTileSource = this.__map.getSource('vector-tiles');
+        const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
+        const featuresVectorLayerId = this.__separateLayers
+                                    ? `${this.__id}_${FEATURES_LAYER}`
+                                    : FEATURES_LAYER;
+        const vectorFeatures = haveVectorLayers
+                             && vectorTileSource.vectorLayerIds.indexOf(featuresVectorLayerId) >= 0;
+        if (background_layers) {
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.BodyLayer, layerOptions);
+            }
+            if (flatmap.details['image_layer']) {
+                for (const raster_layer_id of layer['image-layers']) {
+                    this.__addRasterLayer(raster_layer_id, layerOptions);
+                }
             }
         }
         // if no image layers then make feature borders (and lines?) more visible...??
         if (haveVectorLayers) {
-            this.__addStyleLayer(style.FeatureFillLayer, options);
-            this.__addStyleLayer(style.FeatureLineLayer, options);
-            this.__addStyleLayer(style.FeatureBorderLayer, options);
-            this.__addPathwayStyleLayers(options);
-            this.__addStyleLayer(style.FeatureLargeSymbolLayer, options);
-            if (!flatmap.options.tooltips) {
-                this.__addStyleLayer(style.FeatureSmallSymbolLayer, options);
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.FeatureFillLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureDashLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureBorderLayer, layerOptions);
+            }
+            this.__addPathwayStyleLayers(layerOptions);
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer, layerOptions);
+                if (!flatmap.options.tooltips) {
+                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, layerOptions);
+                }
             }
         }
 
-        // Make sure our colpur options are set properly, in particular raster layer visibility
+        // Make sure our colour options are set properly, in particular raster layer visibility
 
-        this.setColour(options);
+        this.setColour(layerOptions);
     }
 
     get id()
@@ -81,9 +98,12 @@ class MapFeatureLayer
     __addPathwayStyleLayers(options)
     //==============================
     {
+        const pathwaysVectorLayerId = this.__separateLayers
+                                    ? `${this.__id}_${PATHWAYS_LAYER}`
+                                    : PATHWAYS_LAYER;
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
-                .indexOf(PATHWAYS_LAYER) >= 0) {
+                .indexOf(pathwaysVectorLayerId) >= 0) {
             this.__addStyleLayer(style.PathLineLayer, options, PATHWAYS_LAYER);
             this.__addStyleLayer(style.PathDashlineLayer, options, PATHWAYS_LAYER);
             this.__addStyleLayer(style.NervePolygonBorder, options, PATHWAYS_LAYER);
@@ -92,10 +112,12 @@ class MapFeatureLayer
         }
     }
 
-    __addStyleLayer(styleClass, options, sourceLayer='features')
-    //==========================================================
+    __addStyleLayer(styleClass, options, sourceLayer=FEATURES_LAYER)
+    //==============================================================
     {
-        const styleLayer = new styleClass(this.__id, sourceLayer);
+        const layerId = `${this.__id}_${sourceLayer}`;
+        const source = this.__separateLayers ? layerId : sourceLayer;
+        const styleLayer = new styleClass(layerId, source);
         this.__map.addLayer(styleLayer.style(options));
         this.__styleLayers.push(styleLayer);
     }
@@ -129,12 +151,28 @@ export class LayerManager
         this.__mapLayers = new Map;
         this.__activeLayers = [];
         this.__activeLayerNames = [];
+        this.__rasterLayers = [];
         const backgroundLayer = new style.BackgroundLayer();
         if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
         } else {
             this.__map.addLayer(backgroundLayer.style('white'));
         }
+        // Add the map's layers
+        const layerOptions = flatmap.options.layerOptions;
+        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
+        if (fcDiagram && flatmap.details['image_layer']) {
+            for (const layer of flatmap.layers) {
+                for (const raster_layer_id of layer['image-layers']) {
+                    const rasterLayer = new style.RasterLayer(raster_layer_id);
+                    this.__map.addLayer(rasterLayer.style(layerOptions));
+                    this.__rasterLayers.push(rasterLayer);
+                }
+            }
+        }
+        for (const layer of flatmap.layers) {
+            this.addLayer(layer, !fcDiagram);
+        }
     }
 
     get activeLayerNames()
@@ -143,12 +181,12 @@ export class LayerManager
         return this.__activeLayerNames;
     }
 
-    addLayer(layer, options)
-    //======================
+    addLayer(layer, background_layers=true)
+    //=====================================
     {
         this.__mapLayers.set(layer.id, layer);
 
-        const layers = new MapFeatureLayer(this.__flatmap, layer, options);
+        const layers = new MapFeatureLayer(this.__flatmap, layer, background_layers);
         const layerId = this.__flatmap.mapLayerId(layer.id);
         this.__layers.set(layerId, layers);
     }

package/src/styling.js

@@ -28,9 +28,9 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 class VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer, idPrefix)
+    constructor(id, suffix, sourceLayer)
     {
-        this.__id = `${mapLayerId}_${sourceLayer}_${idPrefix}`;
+        this.__id = `${id}_${suffix}`;
         this.__sourceLayer = sourceLayer;
         this.__lastPaintStyle = {};
     }
@@ -78,9 +78,9 @@ class VectorStyleLayer
 
 export class BodyLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'body');
+        super(id, 'body', sourceLayer);
     }
 
     style(options)
@@ -105,9 +105,9 @@ export class BodyLayer extends VectorStyleLayer
 
 export class FeatureFillLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'fill');
+        super(id, 'fill', sourceLayer);
     }
 
     paintStyle(options, changes=false)
@@ -117,12 +117,12 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
+                ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['any',
                       ['==', ['get', 'kind'], 'scaffold']
                 ], 'white',
-                ['has', 'colour'], ['get', 'colour'],
                 ['has', 'node'], '#AFA202',
                 'white'    // background colour? body colour ??
             ],
@@ -133,10 +133,10 @@ export class FeatureFillLayer extends VectorStyleLayer
                       ['==', ['get', 'kind'], 'tissue'],
                       ['==', ['get', 'kind'], 'cell-type'],
                 ], 0.1,
-                ['has', 'colour'], 0.008,
                 ['has', 'node'], 0.3,
                 ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.8,
+                ['has', 'colour'], 0.008,
                 (coloured && !dimmed) ? 0.01 : 0.5
             ]
         };
@@ -165,9 +165,9 @@ export class FeatureFillLayer extends VectorStyleLayer
 
 export class FeatureBorderLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'border');
+        super(id, 'border', sourceLayer);
     }
 
     paintStyle(options, changes=false)
@@ -236,68 +236,102 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer, dashed=false)
     {
-        super(mapLayerId, sourceLayer, 'divider-line');
+        const filterType = dashed ? 'line-dash' : 'line';
+        super(id, `divider-${filterType}`, sourceLayer);
+        this.__filter = dashed ?
+            [
+                'any',
+                ['==', 'type', `line-dash`]
+            ]
+        :
+            [
+                'any',
+                ['==', 'type', 'bezier'],
+                ['==', 'type', `line`]
+            ];
+        this.__dashed = dashed;
     }
 
-    style(options)
+    paintStyle(options)
     {
         const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': [
+                'case',
+                ['has', 'colour'], ['get', 'colour'],
+                ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['==', ['get', 'type'], 'network'], '#AFA202',
+                ['has', 'centreline'], '#888',
+                ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
+            ],
+            'line-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'active'], false], 1.0,
+                    0.3
+                ],
+            'line-width': [
+                'let',
+                'width', [
+                    'case',
+                        ['has', 'centreline'], 1.2,
+                        ['==', ['get', 'type'], 'network'], 1.2,
+                        ['boolean', ['feature-state', 'active'], false], 1.2,
+                    ('style' in options && options.style === 'authoring') ? 0.7 : 0.5
+                    ], [
+                    '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??
+        };
+        if (this.__dashed) {
+            paintStyle['line-dasharray'] = [3, 2];
+        }
+        return paintStyle;
+    }
+
+    style(options)
+    {
         return {
             ...super.style(),
             'type': 'line',
             'filter': [
-                 'all',
-                 ['==', '$type', 'LineString']
+                'all',
+                ['==', '$type', 'LineString'],
+                this.__filter
                  // not for paths...
             ],
-            'paint': {
-                'line-color': [
-                    'case',
-                    ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
-                    ['boolean', ['feature-state', 'selected'], false], '#0F0',
-                    ['==', ['get', 'type'], 'network'], '#AFA202',
-                    ['has', 'centreline'], '#888',
-                    ('authoring' in options && options.authoring) ? '#C44' : '#444'
-                ],
-                'line-opacity': [
-                    'case',
-                    ['boolean', ['feature-state', 'active'], false], 1.0,
-                        0.3
-                    ],
-                'line-width': [
-                    'let',
-                    'width', [
-                        'case',
-                            ['has', 'centreline'], 1.2,
-                            ['==', ['get', 'type'], 'network'], 1.2,
-                            ['boolean', ['feature-state', 'active'], false], 1.2,
-                        ('authoring' in options && options.authoring) ? 0.7 : 0.1
-                        ], [
-                        '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??
-            }
+            'paint': this.paintStyle(options)
         };
     }
 }
 
 //==============================================================================
 
+export class FeatureDashLineLayer extends FeatureLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, sourceLayer, true);
+    }
+}
+
+//==============================================================================
+
 export class PathLineLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, dashed=false)
     {
         const filterType = dashed ? 'line-dash' : 'line';
-        super(mapLayerId, sourceLayer, filterType);
+        super(id, filterType, sourceLayer);
         this.__filter = dashed ?
             [
                 'any',
@@ -386,9 +420,9 @@ export class PathLineLayer extends VectorStyleLayer
 
 export class PathDashlineLayer extends PathLineLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, true);
+        super(id, sourceLayer, true);
     }
 }
 
@@ -396,9 +430,9 @@ export class PathDashlineLayer extends PathLineLayer
 
 export class FeatureNerveLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'nerve-path');
+        super(id, 'nerve-path', sourceLayer);
     }
 
     style(options)
@@ -449,9 +483,9 @@ export class FeatureNerveLayer extends VectorStyleLayer
 
 export class NervePolygonBorder extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'nerve-border');
+        super(id, 'nerve-border', sourceLayer);
     }
 
     style(options)
@@ -493,9 +527,9 @@ export class NervePolygonBorder extends VectorStyleLayer
 
 export class NervePolygonFill extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'nerve-fill');
+        super(id, 'nerve-fill', sourceLayer);
     }
 
     style(options)
@@ -543,9 +577,9 @@ export class NervePolygonFill extends VectorStyleLayer
 
 export class FeatureLargeSymbolLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'large-symbol');
+        super(id, 'large-symbol', sourceLayer);
     }
 
     style(options)
@@ -587,9 +621,9 @@ export class FeatureLargeSymbolLayer extends VectorStyleLayer
 
 export class FeatureSmallSymbolLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'small-symbol');
+        super(id, 'small-symbol', sourceLayer);
     }
 
     style(options)
@@ -630,7 +664,7 @@ export class FeatureSmallSymbolLayer extends VectorStyleLayer
 
 export class BackgroundLayer
 {
-    constructor(rasterLayerId)
+    constructor()
     {
         this.__id = 'background';
     }
@@ -643,7 +677,7 @@ export class BackgroundLayer
     style(backgroundColour)
     {
         return {
-            'id': 'background',
+            'id': this.__id,
             'type': 'background',
             'paint': {
                 'background-color': backgroundColour,
@@ -657,9 +691,9 @@ export class BackgroundLayer
 
 export class RasterLayer
 {
-    constructor(rasterLayerId)
+    constructor(id)
     {
-        this.__id = rasterLayerId;
+        this.__id = id;
     }
 
     get id()