@abi-software/flatmap-viewer 2.2.10-devel.1 → 2.2.10

package/package.json

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

package/src/controls.js

@@ -22,7 +22,6 @@ limitations under the License.
 
 //==============================================================================
 
-import * as pathways from './pathways.js';
 
 //==============================================================================
 
@@ -91,10 +90,11 @@ export class NavigationControl
 
 export class PathControl
 {
-    constructor(flatmap)
+    constructor(flatmap, pathTypes)
     {
         this._flatmap = flatmap;
         this._map = undefined;
+        this.__pathTypes = pathTypes;
     }
 
     getDefaultPosition()
@@ -117,11 +117,11 @@ export class PathControl
 
         const innerHTML = [];
         innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><div class="nerve-line"></div><input id="path-all-paths" type="checkbox" checked/>`);
-        for (const path of pathways.PATH_TYPES) {
+        for (const path of this.__pathTypes) {
             innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line nerve-${path.type}"></div><input id="path-${path.type}" type="checkbox" checked/>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
-        this.__checkedCount = pathways.PATH_TYPES.length;
+        this.__checkedCount = this.__pathTypes.length;
         this.__halfCount = Math.trunc(this.__checkedCount/2);
 
         this._button = document.createElement('button');
@@ -164,11 +164,11 @@ export class PathControl
                     event.target.indeterminate = false;
                 }
                 if (event.target.checked) {
-                    this.__checkedCount = pathways.PATH_TYPES.length;
+                    this.__checkedCount = this.__pathTypes.length;
                 } else {
                     this.__checkedCount = 0;
                 }
-                for (const path of pathways.PATH_TYPES) {
+                for (const path of this.__pathTypes) {
                     const pathCheckbox = document.getElementById(`path-${path.type}`);
                     if (pathCheckbox) {
                         pathCheckbox.checked = event.target.checked;
@@ -187,7 +187,7 @@ export class PathControl
                 if (this.__checkedCount === 0) {
                     allPathsCheckbox.checked = false;
                     allPathsCheckbox.indeterminate = false;
-                } else if (this.__checkedCount === pathways.PATH_TYPES.length) {
+                } else if (this.__checkedCount === this.__pathTypes.length) {
                     allPathsCheckbox.checked = true;
                     allPathsCheckbox.indeterminate = false;
                 } else {
@@ -327,7 +327,7 @@ export class BackgroundControl
     getDefaultPosition()
     //==================
     {
-        return 'top-right';
+        return 'bottom-right';
     }
 
     onAdd(map)

package/src/flatmap-viewer.js

@@ -658,7 +658,10 @@ class FlatMap
     setColour(options=null)
     //=====================
     {
-        options = utils.setDefaultOptions(options, {colour: true, outline: true});
+        options = utils.setDefaults(options, {
+            colour: true,
+            outline: true
+        });
         if (this._userInteractions !== null) {
             this._userInteractions.setColour(options);
         }
@@ -696,6 +699,8 @@ class FlatMap
     setBackgroundColour(colour)
     //=========================
     {
+        localStorage.setItem('flatmap-background-colour', colour);
+
         this._map.setPaintProperty('background', 'background-color', colour);
 
         if (this._minimap) {
@@ -1023,7 +1028,11 @@ class FlatMap
     zoomToFeatures(externalIds, options=null)
     //=======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, padding:100});
+        options = utils.setDefaults(options, {
+            select: true,
+            highlight: false,
+            padding:100
+        });
         if (this._userInteractions !== null) {
             const featureIds = this.modelFeatureIdList(externalIds);
             this._userInteractions.zoomToFeatures(featureIds, options);
@@ -1216,19 +1225,7 @@ export class MapManager
                     mapOptions['bounds'] = mapIndex['bounds'];
                 }
 
-                // Default is to show path controls
-
-                if (!('pathControls' in mapOptions)) {
-                    mapOptions['pathControls'] = true;
-                }
-
-                // Default is to show layer controls
-
-                if (!('layerControl' in mapOptions)) {
-                    mapOptions['layerControl'] = true;
-                }
-
-                // Mapmaker's changed the name of the field to indicate that indicates if
+                // Mapmaker has changed the name of the field to indicate that indicates if
                 // there are raster layers
                 if (!('image-layers' in mapIndex) && ('image_layer' in mapIndex)) {
                     mapIndex['image-layers'] = mapIndex['image_layer'];

package/src/interactions.js

@@ -37,7 +37,7 @@ import {ContextMenu} from './contextmenu.js';
 import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
-import {PATHWAYS_LAYER, Pathways} from './pathways.js';
+import {PATH_TYPES, PATHWAYS_LAYER, Pathways} from './pathways.js';
 import {BackgroundControl, LayerControl, PathControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
@@ -163,7 +163,8 @@ export class UserInteractions
         // Add a control to manage our pathways
 
         if (flatmap.options.pathControls) {
-            this._map.addControl(new PathControl(flatmap));
+            // Restrict to path types that are on the map...
+            this._map.addControl(new PathControl(flatmap, this._pathways.pathTypes));
         }
 
         // Add a control to manage our layers
@@ -529,7 +530,12 @@ export class UserInteractions
     zoomToFeatures(featureIds, options=null)
     //======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, noZoomIn: false, padding:10});
+        options = utils.setDefaults(options, {
+            select: true,
+            highlight:
+            false, noZoomIn:
+            false, padding:10
+        });
         const select = (options.select === true);
         const highlight = (options.highlight === true);
         if (featureIds.length) {
@@ -667,9 +673,9 @@ export class UserInteractions
                                                   : '';
             if ('hyperlink' in properties) {
                 if (label === '') {
-                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a></div>`;
+                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${properties.hyperlink}</a></div>`;
                 } else {
-                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a><br/>${label}</div>`;
+                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${label}</a></div>`;
                 }
             } else {
                 return `<div class='flatmap-feature-label'>${label}</div>`;

package/src/layers.js

@@ -27,20 +27,21 @@ import {PATHWAYS_LAYER} from './pathways.js';
 import * as style from './styling.js';
 import * as utils from './utils.js';
 
-const FEATURES_LAYER = 'features'
-const RASTER_LAYERS_NAME = 'Background image layer'
+const FEATURES_LAYER = 'features';
+const RASTER_LAYERS_NAME = 'Background image layer';
+const RASTER_LAYERS_ID = 'background-image-layer';
 
 //==============================================================================
 
 class MapStylingLayers
 {
-    constructor(flatmap, layerId)
+    constructor(flatmap, layerId, options)
     {
         this.__map = flatmap.map;
         this.__id = layerId;
         this.__layers = [];
         this.__active = true;
-        this.__layerOptions = flatmap.options.layerOptions;
+        this.__layerOptions = options;
         this.__separateLayers = flatmap.options.separateLayers;
     }
 
@@ -90,9 +91,9 @@ class MapStylingLayers
 
 class MapFeatureLayers extends MapStylingLayers
 {
-    constructor(flatmap, layer)
+    constructor(flatmap, layer, options)
     {
-        super(flatmap, layer.id);
+        super(flatmap, layer.id, options);
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
 
@@ -161,9 +162,9 @@ class MapFeatureLayers extends MapStylingLayers
 
 class MapRasterLayers extends MapStylingLayers
 {
-    constructor(flatmap, bodyLayerId=null)
+    constructor(flatmap, options, bodyLayerId=null)
     {
-        super(flatmap, 'background-image-layer');
+        super(flatmap, RASTER_LAYERS_ID, options);
         if (bodyLayerId !== null) {
             const layerId = `${bodyLayerId}_${FEATURES_LAYER}`;
             const source = flatmap.options.separateLayers ? layerId : FEATURES_LAYER;
@@ -210,7 +211,10 @@ export class LayerManager
         this.__map = flatmap.map;
         this.__layers = new Map;
         this.__mapLayers = new Map;
-        const layerOptions = flatmap.options.layerOptions;
+        this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
+            colour: true,
+            outline: true
+        });;
         const backgroundLayer = new style.BackgroundLayer();
         if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
@@ -220,20 +224,23 @@ export class LayerManager
 
         // Add the map's layers
         if (flatmap.details['image-layers']) {
-            // Image layers are below all feature layers
+            this.__layerOptions.activeRasterLayer = true;
 
+            // Image layers are below all feature layers
             const bodyLayer = flatmap.layers[0];
-
-            const rasterLayers = new MapRasterLayers(this.__flatmap, bodyLayer.id);  // body layer if not FC??
-
+            const rasterLayers = new MapRasterLayers(this.__flatmap,
+                                                     this.__layerOptions,
+                                                     bodyLayer.id);  // body layer if not FC??
             for (const layer of flatmap.layers) {
                 rasterLayers.addLayer(layer);
             }
-            this.__layers.set(RASTER_LAYERS_NAME, {
-                id: RASTER_LAYERS_NAME,
+            this.__layers.set(RASTER_LAYERS_ID, {
+                id: RASTER_LAYERS_ID,
                 description: RASTER_LAYERS_NAME
             });
-            this.__mapLayers.set(RASTER_LAYERS_NAME, rasterLayers);
+            this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
+        } else {
+            this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
            this.__addFeatureLayer(layer);
@@ -256,7 +263,9 @@ export class LayerManager
     //======================
     {
         this.__layers.set(layer.id, layer);
-        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap, layer));
+        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                            layer,
+                                                            this.__layerOptions));
     }
 
     get layers()
@@ -268,18 +277,26 @@ export class LayerManager
     activate(layerId, enable=true)
     //============================
     {
-        const mapLayer = this.__mapLayers.get(layerId);
-        if (mapLayer !== undefined) {
-            mapLayer.activate(enable);
+        const layer = this.__mapLayers.get(layerId);
+        if (layer !== undefined) {
+            layer.activate(enable);
+            if (layer.id === RASTER_LAYERS_ID) {
+                this.__layerOptions.activeRasterLayer = enable;
+                for (const mapLayer of this.__mapLayers.values()) {
+                    if (mapLayer.id !== RASTER_LAYERS_ID) {
+                        mapLayer.setColour(this.__layerOptions);
+                    }
+                }
+            }
         }
     }
 
     setColour(options=null)
     //=====================
     {
-        options = utils.setDefaultOptions(options, {colour: true, outline: true});
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
         for (const mapLayer of this.__mapLayers.values()) {
-            mapLayer.setColour(options)
+            mapLayer.setColour(this.__layerOptions);
         }
     }
 }

package/src/main.js

@@ -52,7 +52,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
     });
 
     let currentMap = null;
-    let defaultBackground = 'black';
+    let defaultBackground = localStorage.getItem('flatmap-background-colour') || 'black';
 
     const mapOptions = Object.assign({
         tooltips: true,
@@ -62,7 +62,9 @@ export async function standaloneViewer(map_endpoint=null, options={})
         minimap: false,
         searchable: true,
         featureInfo: true,
-        showPosition: false
+        showPosition: false,
+        pathControls: true,
+        layerControl: true
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/pathways.js

@@ -38,6 +38,9 @@ export const PATH_TYPES = [
     { type: "other", label: "Other neuron type", colour: "#888"}
 ];
 
+export const PATH_STYLE_RULES =
+    PATH_TYPES.flatMap(pathType => [['==', ['get', 'kind'], pathType.type], pathType.colour]);
+
 //==============================================================================
 
 function reverseMap(mapping)
@@ -138,6 +141,19 @@ export class Pathways
         }
     }
 
+    get pathTypes()
+    //=============
+    {
+        const pathTypes = [];
+        for (const pathType of PATH_TYPES) {
+            if (pathType.type in this.__typePaths
+            && this.__typePaths[pathType.type].length > 0) {
+                pathTypes.push(pathType);
+            }
+        }
+        return pathTypes;
+    }
+
     addPathsToFeatureSet_(paths, featureSet)
     //======================================
     {

package/src/styling.js

@@ -26,6 +26,10 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 //==============================================================================
 
+import {PATH_STYLE_RULES} from './pathways.js';
+
+//==============================================================================
+
 class VectorStyleLayer
 {
     constructor(id, suffix, sourceLayer)
@@ -114,6 +118,7 @@ export class FeatureFillLayer extends VectorStyleLayer
     {
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
+        const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const paintStyle = {
             'fill-color': [
                 'case',
@@ -128,15 +133,15 @@ export class FeatureFillLayer extends VectorStyleLayer
             ],
             'fill-opacity': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], 0.7,
+                ['has', 'colour'], activeRasterLayer ? 0.008 : 1.0,
+                ['boolean', ['feature-state', 'active'], false], 0.7,
+                ['has', 'node'], 0.3,
                 ['any',
                       ['==', ['get', 'kind'], 'scaffold'],
                       ['==', ['get', 'kind'], 'tissue'],
                       ['==', ['get', 'kind'], 'cell-type'],
                 ], 0.1,
-                ['has', 'node'], 0.3,
-                ['boolean', ['feature-state', 'active'], false], 0.8,
-                ['boolean', ['feature-state', 'selected'], false], 0.01,
-                ['has', 'colour'], 0.008,
                 (coloured && !dimmed) ? 0.01 : 0.1
             ]
         };
@@ -175,6 +180,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const coloured = !('colour' in options) || options.colour;
         const outlined = !('outline' in options) || options.outline;
         const dimmed = 'dimmed' in options && options.dimmed;
+        const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
         lineColour.push('red');
@@ -183,7 +189,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
             lineColour.push('blue');
         }
         lineColour.push(['has', 'colour']);
-        lineColour.push(['get', 'colour']);
+        lineColour.push('#000');
         lineColour.push(['has', 'node']);
         lineColour.push('#AFA202');
         lineColour.push('#444');
@@ -198,7 +204,11 @@ export class FeatureBorderLayer extends VectorStyleLayer
         }
         lineOpacity.push(['boolean', ['feature-state', 'selected'], false]);
         lineOpacity.push(0.9);
-        lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
+        if (activeRasterLayer) {
+            lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
+        } else {
+            lineOpacity.push(0.5);
+        }
 
         const lineWidth = [
             'case',
@@ -208,8 +218,10 @@ export class FeatureBorderLayer extends VectorStyleLayer
         lineWidth.push(2.5);
         if (coloured && outlined) {
             lineWidth.push(['boolean', ['feature-state', 'active'], false]);
-            lineWidth.push(1);
+            lineWidth.push(1.5);
         }
+        lineWidth.push(['has', 'colour']);
+        lineWidth.push(0.7);
         lineWidth.push((coloured && outlined) ? 0.5 : 0.1);
 
         return super.changedPaintStyle({
@@ -271,8 +283,9 @@ export class FeatureLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], 1.0,
-                ['boolean', ['feature-state', 'active'], false], 1.0,
+                    ['boolean', ['feature-state', 'selected'], false], 1.0,
+                    ['has', 'colour'], 1.0,
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
                     0.3
                 ],
             'line-width': [
@@ -360,25 +373,18 @@ export class PathLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'error'], '#FFFE0E',
-                ['==', ['get', 'kind'], 'unknown'], '#FFC1DE',
-                ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
-                ['==', ['get', 'kind'], 'lcn'], '#F19E38',
-                ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',
-                ['==', ['get', 'kind'], 'para-pre'], '#3F8F4A',
-                ['==', ['get', 'kind'], 'somatic'], '#98561D',
-                ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
-                ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
-                ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
+                ['==', ['get', 'kind'], 'unknown'], '#888',
+                ...PATH_STYLE_RULES,
                 '#888'
             ],
             'line-opacity': [
                 'case',
-                    ['boolean', ['feature-state', 'hidden'], false], 0.1,
+                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
-                    ['boolean', ['feature-state', 'active'], false], 0.8,
-                dimmed ? 0.1 : 0.5
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                dimmed ? 0.1 : 0.8
             ],
             'line-width': [
                 'let',
@@ -389,7 +395,7 @@ export class PathLineLayer extends VectorStyleLayer
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
-                        ['boolean', ['feature-state', 'active'], false], 0.9,
+                        ['boolean', ['feature-state', 'active'], false], 1.2,
                     0.8
                     ], [
                     'interpolate',
@@ -561,14 +567,7 @@ export class NervePolygonFill extends VectorStyleLayer
                     'case',
                     ['==', ['get', 'kind'], 'bezier-end'], 'red',
                     ['==', ['get', 'kind'], 'bezier-control'], 'green',
-                    ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
-                    ['==', ['get', 'kind'], 'lcn'], '#F19E38',
-                    ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',
-                    ['==', ['get', 'kind'], 'para-pre'], '#3F8F4A',
-                    ['==', ['get', 'kind'], 'somatic'], '#98561D',
-                    ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
-                    ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
-                    ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
+                    ...PATH_STYLE_RULES,
                     'white'
                 ],
                 'fill-opacity': [

package/src/utils.js

@@ -110,7 +110,7 @@ export function normaliseId(id)
 
 //==============================================================================
 
-export function setDefaultOptions(options, defaultOptions)
+export function setDefaults(options, defaultOptions)
 {
     if (options === undefined || options === null) {
         return defaultOptions;