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

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@2.2.1-beta.1``
+* ``npm install @abi-software/flatmap-viewer@2.2.1-beta.10``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.1-beta.1",
+  "version": "2.2.1-beta.10",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -21,6 +21,7 @@
     "@turf/area": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/helpers": "^6.1.4",
+    "bezier-js": "^6.1.0",
     "maplibre-gl": ">=1.15.3",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"

package/src/flatmap-viewer.js

@@ -1191,6 +1191,12 @@ export class MapManager
                     mapOptions['pathControls'] = true;
                 }
 
+                // Mapmaker's 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'];
+                }
+
                 // Get details about the map's layers
 
                 let mapLayers = [];
@@ -1259,7 +1265,13 @@ 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?
 

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
 
@@ -205,7 +177,7 @@ export class UserInteractions
         // Display a context menu on right-click
 
         this._lastContextTime = 0;
-        this._contextMenu = new ContextMenu(flatmap, this.clearModal_.bind(this));
+        this._contextMenu = new ContextMenu(flatmap, this.__clearModal.bind(this));
         this._map.on('contextmenu', this.contextMenuEvent_.bind(this));
 
         // Display a context menu with a touch longer than 0.5 second
@@ -332,8 +304,8 @@ export class UserInteractions
         }
     }
 
-    unselectFeatures_()
-    //=================
+    __unselectFeatures()
+    //==================
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature_(featureId);
@@ -449,8 +421,8 @@ export class UserInteractions
         this._modal = true;
     }
 
-    clearModal_(event)
-    //================
+    __clearModal(event)
+    //=================
     {
         this._modal = false;
     }
@@ -461,7 +433,7 @@ export class UserInteractions
         this._contextMenu.hide();
         const nodeId = event.target.getAttribute('featureId');
         this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
-        this.clearModal_();
+        this.__clearModal();
     }
 
     enablePathFeatures_(enable, featureIds)
@@ -492,9 +464,9 @@ export class UserInteractions
     reset()
     //=====
     {
-        this.clearModal_();
+        this.__clearModal();
         this.clearActiveMarker_();
-        this.unselectFeatures_();
+        this.__unselectFeatures();
         this.enablePathFeatures_(true, this._pathways.allFeatureIds());
         this._disabledPathFeatures = false;
     }
@@ -502,7 +474,7 @@ export class UserInteractions
     clearSearchResults(reset=true)
     //============================
     {
-        this.unselectFeatures_();
+        this.__unselectFeatures();
     }
 
     /**
@@ -538,7 +510,7 @@ export class UserInteractions
     //========================
     {
         if (featureIds.length) {
-            this.unselectFeatures_();
+            this.__unselectFeatures();
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
@@ -571,7 +543,7 @@ export class UserInteractions
         const padding = options.padding || 100;
         if (featureIds.length) {
             this.unhighlightFeatures_();
-            if (select) this.unselectFeatures_();
+            if (select) this.__unselectFeatures();
             let bbox = null;
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
@@ -618,7 +590,7 @@ export class UserInteractions
 
             // Highlight the feature
 
-            this.unselectFeatures_();
+            this.__unselectFeatures();
             this.selectFeature_(featureId);
 
             // Find the pop-up's postion
@@ -640,7 +612,7 @@ export class UserInteractions
             }
             this.setModal_();
             this._currentPopup = new maplibre.Popup(options).addTo(this._map);
-            this._currentPopup.on('close', this.clearModal_.bind(this));
+            this._currentPopup.on('close', this.__clearPopup.bind(this));
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
                 this._currentPopup.setDOMContent(content);
@@ -650,6 +622,13 @@ export class UserInteractions
         }
     }
 
+    __clearPopup()
+    //============
+    {
+        this.__clearModal();
+        this.__unselectFeatures();
+    }
+
     removeTooltip_()
     //==============
     {
@@ -659,15 +638,47 @@ export class UserInteractions
         }
     }
 
+    lineTooltip_(lineFeatures)
+    //========================
+    {
+        const tooltips = [];
+        for (const lineFeature of lineFeatures) {
+            const properties = lineFeature.properties;
+            if ('label' in properties
+               && (!('tooltip' in properties) || properties.tooltip)
+               && !('labelled' in properties)) {
+                let tooltip = '';
+                const label = properties.label;
+                const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
+                if (!tooltips.includes(cleanLabel)) {
+                    tooltips.push(cleanLabel);
+                }
+            }
+        }
+        if (tooltips.length === 0) {
+            return '';
+        }
+        return `<div class='flatmap-feature-label'>${tooltips.join('<hr/>')}</div>`;
+    }
+
     tooltipHtml_(properties, forceLabel=false)
     //========================================
     {
-        if ('label' in properties
+        if (('label' in properties || 'hyperlink' in properties)
            && (forceLabel || !('tooltip' in properties) || properties.tooltip)
            && !('labelled' in properties)) {
-            const label = properties.label;
-            const capitalisedLabel = label.substr(0, 1).toUpperCase() + label.substr(1);
-            return `<div class='flatmap-feature-label'>${capitalisedLabel.replaceAll("\n", "<br/>")}</div>`;
+            let tooltip = '';
+            if ('label' in properties) {
+                const label = properties.label;
+                tooltip = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
+            } else {
+                tooltip = properties.hyperlink
+            }
+            if ('hyperlink' in properties) {
+                return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${tooltip}</a></div>`;
+            } else {
+                return `<div class='flatmap-feature-label'>${tooltip}</div>`;
+            }
         }
         return '';
     }
@@ -683,36 +694,37 @@ export class UserInteractions
         return false;
     }
 
-    mouseMoveEvent_(event)
-    //====================
+    __resetFeatureDisplay()
+    //=====================
     {
-        // No tooltip when context menu is open
-
-        if (this._modal) {
-            return;
-        }
-
         // Remove any existing tooltip
-
         this.removeTooltip_();
 
         // Reset cursor
-
         this._map.getCanvas().style.cursor = 'default';
 
         // Reset any active features
-
         this.resetActiveFeatures_();
+    }
 
-        // Reset any info display
+    mouseMoveEvent_(event)
+    //====================
+    {
+        // No tooltip when context menu is open
+        if (this._modal) {
+            return;
+        }
 
+        // Remove tooltip, reset active features, etc
+        this.__resetFeatureDisplay();
+
+        // Reset any info display
         const displayInfo = (this._infoControl && this._infoControl.active);
         if (displayInfo) {
             this._infoControl.reset()
         }
 
         // Get all the features at the current point
-
         const features = this._map.queryRenderedFeatures(event.point);
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
@@ -750,18 +762,20 @@ export class UserInteractions
                                                      && feature.properties.type.startsWith('line'))
                                                        || 'centreline' in feature.properties));
         if (lineFeatures.length > 0) {
-            const lineFeature = lineFeatures[0];
-            const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
-            tooltip = this.tooltipHtml_(lineFeature.properties);
-            this.activateFeature_(lineFeature);
-            const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
-            for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
-                if (+featureId !== lineFeatureId) {
-                    this.activateFeature_(this.mapFeature_(featureId));
+            tooltip = this.lineTooltip_(lineFeatures);
+            for (const lineFeature of lineFeatures) {
+                const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
+                this.activateFeature_(lineFeature);
+                const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
+                for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
+                    if (+featureId !== lineFeatureId) {
+                        this.activateFeature_(this.mapFeature_(featureId));
+                    }
                 }
             }
         } else {
-            let labelledFeatures = features.filter(feature => (('label' in feature.properties
+            let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
+                                                             || 'label' in feature.properties
                                                              || 'node' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
@@ -803,11 +817,20 @@ export class UserInteractions
                     }
                     info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
                 }
-                this.activateFeature_(feature);
                 if ('nerveId' in feature.properties) {
+                    if (feature.properties.active) {
+                        this.activateFeature_(feature);
+                    } else {
+                        tooltip = '';
+                    }
                     if (feature.properties.nerveId !== feature.properties.featureId) {
                         this.activateNerveFeatures_(feature.properties.nerveId);
                     }
+                } else {
+                    this.activateFeature_(feature);
+                }
+                if ('hyperlink' in feature.properties) {
+                    this._map.getCanvas().style.cursor = 'pointer';
                 }
             }
         }
@@ -841,7 +864,7 @@ export class UserInteractions
     {
         const multipleSelect = event.ctrlKey || event.metaKey;
         if (!multipleSelect) {
-            this.unselectFeatures_();
+            this.__unselectFeatures();
         }
         if (feature !== undefined) {
             const featureId = feature.id;
@@ -874,9 +897,17 @@ export class UserInteractions
         this.clearActiveMarker_();
         const feature = this._activeFeatures[0]
         this.selectionEvent_(event.originalEvent, feature);
-        if (feature !== undefined) {
+        if (this._modal) {
+           // Remove tooltip, reset active features, etc
+            this.__resetFeatureDisplay();
+            this.__unselectFeatures();
+            this.__clearModal();
+        } else if (feature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', feature);
+            if ('hyperlink' in feature.properties) {
+                window.open(feature.properties.hyperlink, '_blank');
+            }
         }
     }
 

package/src/layers.js

@@ -33,7 +33,7 @@ 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;
@@ -41,6 +41,7 @@ class MapFeatureLayer
         this.__rasterLayers = [];
         this.__styleLayers = [];
 
+        const layerOptions = flatmap.options.layerOptions;
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
         const featuresVectorLayerId = this.__separateLayers
@@ -48,33 +49,36 @@ class MapFeatureLayer
                                     : FEATURES_LAYER;
         const vectorFeatures = haveVectorLayers
                              && vectorTileSource.vectorLayerIds.indexOf(featuresVectorLayerId) >= 0;
-        if (vectorFeatures) {
-            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);
+        if (background_layers) {
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.BodyLayer, layerOptions);
+            }
+            if (flatmap.details['image-layers']) {
+                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) {
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureFillLayer, options);
-                this.__addStyleLayer(style.FeatureLineLayer, options);
-                this.__addStyleLayer(style.FeatureBorderLayer, options);
+                this.__addStyleLayer(style.FeatureFillLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureDashLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureBorderLayer, layerOptions);
             }
-            this.__addPathwayStyleLayers(options);
+            this.__addPathwayStyleLayers(layerOptions);
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureLargeSymbolLayer, options);
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer, layerOptions);
                 if (!flatmap.options.tooltips) {
-                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, options);
+                    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()
@@ -147,12 +151,31 @@ export class LayerManager
         this.__mapLayers = new Map;
         this.__activeLayers = [];
         this.__activeLayerNames = [];
+        this.__rasterLayers = [];
+        const layerOptions = flatmap.options.layerOptions;
+        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
         const backgroundLayer = new style.BackgroundLayer();
-        if ('background' in flatmap.options) {
+        if (fcDiagram) {
+            this.__map.addLayer(backgroundLayer.style('black', 1));
+        }
+        else 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
+        if (fcDiagram && flatmap.details['image-layers']) {
+            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()
@@ -161,12 +184,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

@@ -117,12 +117,12 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
-                ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['has', 'colour'], ['get', 'colour'],
+                ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 ['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
             ]
         };
@@ -236,68 +236,105 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer)
+    constructor(id, sourceLayer, dashed=false)
     {
-        super(id, 'divider-line', sourceLayer);
+        const filterType = dashed ? 'line-dash' : 'line';
+        super(id, `feature-${filterType}`, sourceLayer);
+        this.__filter = dashed ?
+            [
+                'any',
+                ['==', 'type', `line-dash`]
+            ]
+        :
+            [
+                'any',
+                ['has', 'centreline'],
+                ['==', 'type', 'bezier'],
+                ['==', 'type', `line`]
+            ];
+        this.__dashed = dashed;
     }
 
-    style(options)
+    paintStyle(options)
     {
         const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['has', 'colour'], ['get', 'colour'],
+                ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
+                ['==', ['get', 'type'], 'network'], '#AFA202',
+                ['has', 'centreline'], '#888',
+                ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
+            ],
+            'line-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], 1.0,
+                ['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', 'selected'], false], 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(id, sourceLayer, dashed=false)
     {
         const filterType = dashed ? 'line-dash' : 'line';
-        super(id, filterType, sourceLayer);
+        super(id, `path-${filterType}`, sourceLayer);
         this.__filter = dashed ?
             [
                 'any',
@@ -417,7 +454,8 @@ export class FeatureNerveLayer extends VectorStyleLayer
                     ['boolean', ['feature-state', 'active'], false], '#222',
                     ['boolean', ['feature-state', 'selected'], false], 'red',
                     ['boolean', ['feature-state', 'hidden'], false], '#CCC',
-                    '#888'
+                    ['boolean', ['get', 'active'], false], '#888',
+                    '#FFF'
                 ],
                 'line-opacity': [
                     'case',
@@ -640,14 +678,14 @@ export class BackgroundLayer
         return this.__id;
     }
 
-    style(backgroundColour)
+    style(backgroundColour, opacity=0.1)
     {
         return {
             'id': this.__id,
             'type': 'background',
             'paint': {
                 'background-color': backgroundColour,
-                'background-opacity': 0.1
+                'background-opacity': opacity
             }
         };
     }