@abi-software/flatmap-viewer 2.3.0-a.1 → 2.3.0-a.3

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)
@@ -40,6 +44,11 @@ class VectorStyleLayer
         return this.__id;
     }
 
+    makeFilter(options)
+    {
+        return null;
+    }
+
     paintStyle(options, changes=false)
     {
         return {};
@@ -120,23 +129,15 @@ export class FeatureFillLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
-                ['any',
-                      ['==', ['get', 'kind'], 'scaffold']
-                ], 'white',
-                ['has', 'node'], '#AFA202',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
                 'case',
-                ['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,
+                ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                ['boolean', ['feature-state', 'selected'], false], 0.7,
+                ['has', 'opacity'], ['get', 'opacity'],
+                ['has', 'colour'], 1.0,
+                ['boolean', ['feature-state', 'active'], false], 0.7,
                 (coloured && !dimmed) ? 0.01 : 0.1
             ]
         };
@@ -151,7 +152,8 @@ export class FeatureFillLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'Polygon'],
-                ['!=', 'models', 'UBERON:0013702']
+                ['!=', 'models', 'UBERON:0013702'],
+                ['!has', 'node']
             ],
             'layout': {
                 'fill-sort-key': ['get', 'scale']
@@ -175,22 +177,21 @@ 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');
+        lineColour.push('black');
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
             lineColour.push('blue');
         }
         lineColour.push(['has', 'colour']);
         lineColour.push(['get', 'colour']);
-        lineColour.push(['has', 'node']);
-        lineColour.push('#AFA202');
         lineColour.push('#444');
 
         const lineOpacity = [
             'case',
-            ['boolean', ['get', 'invisible'], false], 0.05,
+            ['boolean', ['feature-state', 'hidden'], false], 0.05,
             ];
         if (coloured && outlined) {
             lineOpacity.push(['boolean', ['feature-state', 'active'], false]);
@@ -198,7 +199,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 +213,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({
@@ -227,7 +234,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'Polygon'],
-                ['has', 'id']
+                ['!has', 'node']
             ],
             'paint': this.paintStyle(options)
         };
@@ -238,53 +245,58 @@ 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',
-                ['has', 'centreline'],
                 ['==', 'type', 'bezier'],
                 ['==', 'type', `line`]
-            ];
-        this.__dashed = dashed;
+            ]
+        ];
     }
 
-    paintStyle(options)
+    paintStyle(options, changes=false)
     {
         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',
+                ['has', 'colour'], ['get', 'colour'],
                 ['==', ['get', 'type'], 'network'], '#AFA202',
-                ['has', 'centreline'], '#888',
-                ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
+                options.authoring ? '#C44' : '#444'
             ],
             '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': [
                 '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
+                        options.authoring ? 0.7 : 0.5
                     ], [
                     'interpolate',
                         ['exponential', 2],
@@ -300,7 +312,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         if (this.__dashed) {
             paintStyle['line-dasharray'] = [3, 2];
         }
-        return paintStyle;
+        return super.changedPaintStyle(paintStyle, changes);
     }
 
     style(options)
@@ -308,12 +320,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)
         };
     }
@@ -325,7 +332,7 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, sourceLayer, {dashed: true});
     }
 }
 
@@ -333,70 +340,99 @@ 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'],
-                ['==', 'kind', '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 = {
             'line-color': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['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'], 'centreline'], '#CC0',
+                ['==', ['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,
+                    ['==', ['get', 'kind'], 'error'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
-                    ['boolean', ['feature-state', 'active'], false], 0.8,
-                    ['==', ['get', 'kind'], 'centreline'], 0.2,
-                dimmed ? 0.1 : 0.5
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                dimmed ? 0.1 : 0.8
             ],
             'line-width': [
                 'let',
-                'width', [
+                'width', ["*", [
                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
-                        ['==', ['get', 'kind'], 'centreline'], 2,
                         ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
-                        ['boolean', ['feature-state', 'selected'], false], 1.2,
+                        ['boolean', ['feature-state', 'selected'], false], 0.6,
                         ['boolean', ['feature-state', 'active'], false], 0.9,
-                    0.8
-                    ], [
-                    'interpolate',
+                    0.6
+                    ],
+                    ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
+                    ['interpolate',
                         ['exponential', 2],
                         ['zoom'],
                          2, ["*", ['var', 'width'], ["^", 2, -0.5]],
@@ -406,11 +442,81 @@ export class PathLineLayer extends VectorStyleLayer
             ]
         };
         if (this.__dashed) {
-            paintStyle['line-dasharray'] = [3, 2];
+            paintStyle['line-dasharray'] = [1, 1];
         }
         return super.changedPaintStyle(paintStyle, changes);
     }
 
+    style(options={})
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': this.makeFilter(options),
+            'layout': {
+                'line-cap': 'butt'
+            },
+            'paint': this.paintStyle(options)
+        };
+    }
+}
+
+//==============================================================================
+
+export class PathDashlineLayer extends PathLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        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 {
@@ -419,23 +525,104 @@ export class PathLineLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'LineString'],
-                this.__filter
+                ['==', 'kind', 'centreline']
             ],
+            'paint': this.paintStyle(options),
             'layout': {
-                'line-cap': 'butt'
-            },
-            'paint': this.paintStyle(options)
+                '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 PathDashlineLayer extends PathLineLayer
+export class CentrelineNodeFillLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer)
     {
-        super(id, sourceLayer, true);
+        super(id, 'node-fill', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const showNodes = options.showCentrelines || false;
+        const paintStyle = {
+                'fill-color': '#AFA202',
+                'fill-opacity': showNodes ? 0.7 : 0.01
+            }
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'fill',
+            'filter': [
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'node']
+            ],
+            'layout': {
+                'fill-sort-key': ['get', 'scale']
+            },
+            'paint': this.paintStyle(options)
+        };
+    }
+}
+
+export class CentrelineNodeBorderLayer extends VectorStyleLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'node-border', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const showNodes = options.showCentrelines || false;
+        const paintStyle = {
+                'line-color': '#AFA202',
+                'line-opacity': showNodes ? 0.7 : 0.01,
+                'line-width': 0.5
+            }
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': [
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'node']
+            ],
+            'paint':  this.paintStyle(options)
+        };
     }
 }
 
@@ -566,14 +753,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': [
@@ -688,7 +868,7 @@ export class BackgroundLayer
         return this.__id;
     }
 
-    style(backgroundColour, opacity=0.1)
+    style(backgroundColour, opacity=1.0)
     {
         return {
             'id': this.__id,

package/src/systems.js

@@ -0,0 +1,76 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023  David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+
+import { Control } from './controls';
+
+//==============================================================================
+
+export class SystemsManager
+{
+    constructor()
+    {
+
+    }
+}
+
+//==============================================================================
+
+export class SystemsControl extends Control
+{
+    constructor(flatmap, systems)
+    {
+        super(flatmap, 'system', 'systems');
+        this.__systems = systems;
+    }
+
+    __innerLinesHTML()
+    //================
+    {
+        const html = [];
+        for (const [name, system] of this.__systems.entries()) {
+            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+        }
+        return html;
+    }
+
+    __enableAll(enable)
+    //=================
+    {
+        for (const [name, system] of this.__systems.entries()) {
+            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
+            if (checkbox) {
+                checkbox.checked = enable;
+                this.__flatmap.enableSystem(name, enable);
+            }
+        }
+    }
+
+    __enableControl(id, enable)
+    //=========================
+    {
+        for (const [name, system] of this.__systems.entries()) {
+            if (id === system.id) {
+                this.__flatmap.enableSystem(name, enable);
+            }
+        }
+    }
+
+}

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;