@abi-software/flatmap-viewer 2.3.0-b.2 → 2.3.2-b.1

package/src/pathways.js

@@ -22,6 +22,8 @@ limitations under the License.
 
 //==============================================================================
 
+import { reverseMap } from './utils';
+
 export const PATHWAYS_LAYER = 'pathways';
 
 //==============================================================================
@@ -37,8 +39,8 @@ const PATH_TYPES = [
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
     { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423", dashed: true},
     { type: "other", label: "Other neuron type", colour: "#888"},
-    { type: "arterial", label: "Arterial blood vessel", colour: "#F00"},
-    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA"},
+    { type: "arterial", label: "Arterial blood vessel", colour: "#F00", enabled: false},
+    { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA", enabled: false},
     { type: "centreline", label: "Nerve centrelines", colour: "#CCC", enabled: false},
     { type: "error", label: "Paths with errors or warnings", colour: "#FF0"}
 ];
@@ -48,28 +50,11 @@ export const PATH_STYLE_RULES =
 
 //==============================================================================
 
-function reverseMap(mapping)
-//==========================
+export class PathManager
 {
-    const reverse = {};
-    for (const [key, values] of Object.entries(mapping)) {
-        for (const value of values) {
-            if (value in reverse) {
-                reverse[value].add(key);
-            } else {
-                reverse[value] = new Set([key]);
-            }
-        }
-    }
-    return reverse;
-}
-
-//==============================================================================
-
-export class Pathways
-{
-    constructor(flatmap)
+    constructor(flatmap, ui, enabled=true)
     {
+        this.__ui = ui;
         this.__connectivityModelPaths = {};                          // modelId: [pathIds]
         this.__pathToConnectivityModel = {};
         if ('models' in flatmap.pathways) {
@@ -82,14 +67,19 @@ export class Pathways
         }
         this.__pathModelPaths = {};                                  // pathModelId: [pathIds]
         this.__pathToPathModel = {};
+
+        this.__paths = {};
+        const pathLines = {};                                    // pathId: [lineIds]
+        const pathNerves = {};                                   // pathId: [nerveIds]
         if ('paths' in flatmap.pathways) {
-            this._pathLines = {};                                    // pathId: [lineIds]
-            this._pathNerves = {};                                   // pathId: [nerveIds]
-            this._pathNodes = {};                                    // pathId: [nodeIds]
             for (const [pathId, path] of Object.entries(flatmap.pathways.paths)) {
-                this._pathLines[pathId] = path.lines;
-                this._pathNerves[pathId] = path.nerves;
-                this._pathNodes[pathId] = path.nodes;
+                pathLines[pathId] = path.lines;
+                pathNerves[pathId] = path.nerves;
+                this.__paths[pathId] = path;
+                for (const lineId of path.lines) {
+                    this.__ui.enableFeature(lineId, enabled, true);
+                }
+                this.__paths[pathId].systemCount = 0;
                 if ('models' in path) {
                     const modelId = path['models'];
                     if (!(modelId in this.__pathModelPaths)) {
@@ -99,30 +89,12 @@ export class Pathways
                     this.__pathToPathModel[pathId] = modelId;
                 }
             }
-        } else {
-            // To be deprecated...
-            this._pathLines = flatmap.pathways['path-lines'];        // pathId: [lineIds]
-            this._pathNerves = flatmap.pathways['path-nerves'];      // pathId: [nerveIds]
-            if ('path-nodes' in flatmap.pathways) {
-                this._pathNodes = flatmap.pathways['path-nodes'];    // pathId: [nodeIds]
-            } else {
-                this._pathNodes = {};
-                for (const path of Object.keys(this._pathLines)) {
-                    this._pathNodes[path] = [];
-                }
-            }
         }
-        this._linePaths = reverseMap(this._pathLines);               // lineId: [pathIds]
-        this._nervePaths = reverseMap(this._pathNerves);             // nerveId: [pathIds]
+        this.__pathsByLine = reverseMap(pathLines);               // lineId: [pathIds]
+        this.__pathsByNerve = reverseMap(pathNerves);             // nerveId: [pathIds]
 
         const nodePaths = flatmap.pathways['node-paths'];
-        if (!('start-paths' in nodePaths)) {
-            this._nodePaths = nodePaths;                             // nodeId: [pathIds]
-        } else {   // Original format, deprecated
-            this._nodePaths = nodePaths['start-paths'];
-            this.extendNodePaths_(nodePaths['through-paths']);
-            this.extendNodePaths_(nodePaths['end-paths']);
-        }
+        this._nodePaths = nodePaths;                                 // nodeId: [pathIds]
         const featureIds = new Set();
         for (const paths of Object.values(this._nodePaths)) {
             this.addPathsToFeatureSet_(paths, featureIds);
@@ -130,20 +102,28 @@ export class Pathways
         this._allFeatureIds = featureIds;
 
         // Construct a list of path types we know about
-        const pathTypes = [];
-        for (const pathType of PATH_TYPES) {
-            pathTypes.push(pathType.type);
+        const pathTypes = {};
+        this.__pathtypeEnabled = {};
+        for (const pathTypeDefn of PATH_TYPES) {
+            pathTypes[pathTypeDefn.type] = pathTypeDefn;
+            this.__pathtypeEnabled[pathTypeDefn.type] = !('enabled' in pathTypeDefn) || pathTypeDefn.enabled;
         }
-        // Map unknown path types to ``other``
-        this.__typePaths = {};
-        this.__typePaths['other'] = [];
+
+        // Set path types, mapping unknown path types to ``other``
+        this.__pathsByType = {};
+        this.__pathsByType['other'] = [];
         for (const [pathType, paths] of Object.entries(flatmap.pathways['type-paths'])) {
-            if (pathTypes.indexOf(pathType) >= 0) {
-                this.__typePaths[pathType] = paths;
+            if (pathType in pathTypes) {
+                this.__pathsByType[pathType] = paths;
+                const pathDefn = pathTypes[pathType];
             } else {
-                this.__typePaths['other'].push(...paths);
+                this.__pathsByType['other'].push(...paths);
+                this.__pathtypeEnabled[pathType] = false;
             }
         }
+        // Assign types to individual paths
+        this.__assignPathTypes();
+
         // Nerve centrelines are a special case with their own controls
         this.__haveCentrelines = false;
     }
@@ -154,44 +134,44 @@ export class Pathways
         return this.__haveCentrelines;
     }
 
+    __assignPathTypes()
+    //=================
+    {
+        for (const [pathType, paths] of Object.entries(this.__pathsByType)) {
+            for (const pathId of paths) {
+                this.__paths[pathId].pathType = pathType;
+            }
+        }
+    }
+
     pathTypes()
     //=========
     {
         const pathTypes = [];
-        for (const pathType of PATH_TYPES) {
-            if (pathType.type in this.__typePaths
-            && this.__typePaths[pathType.type].length > 0) {
-                if (pathType.type === 'centreline') {
+        for (const pathTypeDefn of PATH_TYPES) {
+            if (pathTypeDefn.type in this.__pathsByType
+            && this.__pathsByType[pathTypeDefn.type].length > 0) {
+                if (pathTypeDefn.type === 'centreline') {
                     this.__haveCentrelines = true;
                 } else {
-                    pathTypes.push(pathType);
+                    pathTypes.push({
+                        ...pathTypeDefn,
+                        enabled: this.__pathtypeEnabled[pathTypeDefn.type]
+                    });
                 }
             }
         }
         return pathTypes;
     }
 
-    addPathsToFeatureSet_(paths, featureSet)
+    addPathsToFeatureSet_(pathIds, featureSet)
     //======================================
     {
-        for (const path of paths) {
-            if (path in this._pathLines) {
-                this._pathLines[path].forEach(lineId => featureSet.add(lineId));
-                this._pathNerves[path].forEach(nerveId => featureSet.add(nerveId));
-                this._pathNodes[path].forEach(nodeId => featureSet.add(nodeId));
-            }
-        }
-    }
-
-    extendNodePaths_(nodePaths)
-    //=========================
-    {
-        for (const [key, values] of Object.entries(nodePaths)) {
-            if (key in this._nodePaths) {
-                this._nodePaths[key].push(...values);
-            } else {
-                this._nodePaths[key] = values;
-            }
+        for (const pathId of pathIds) {
+            const path = this.__paths[pathId];
+            path.lines.forEach(lineId => featureSet.add(lineId));
+            path.nerves.forEach(nerveId => featureSet.add(nerveId));
+            path.nodes.forEach(nodeId => featureSet.add(nodeId));
         }
     }
 
@@ -206,8 +186,8 @@ export class Pathways
     {
         const featureIds = new Set();
         for (const lineId of lineIds) {
-            if (lineId in this._linePaths) {
-                this.addPathsToFeatureSet_(this._linePaths[lineId], featureIds);
+            if (lineId in this.__pathsByLine) {
+                this.addPathsToFeatureSet_(this.__pathsByLine[lineId], featureIds);
             }
         }
         return featureIds;
@@ -217,8 +197,8 @@ export class Pathways
     //======================
     {
         const featureIds = new Set();
-        if (nerveId in this._nervePaths) {
-            this.addPathsToFeatureSet_(this._nervePaths[nerveId], featureIds);
+        if (nerveId in this.__pathsByNerve) {
+            this.addPathsToFeatureSet_(this.__pathsByNerve[nerveId], featureIds);
         }
         return featureIds;
     }
@@ -237,8 +217,8 @@ export class Pathways
     //=====================
     {
         const properties = Object.assign({}, feature.properties);
-        if (feature.id in this._linePaths) {
-            for (const pathId of this._linePaths[feature.id]) {
+        if (feature.id in this.__pathsByLine) {
+            for (const pathId of this.__pathsByLine[feature.id]) {
                 // There should only be a single path for a line
                 if (pathId in this.__pathToConnectivityModel) {
                     properties['connectivity'] = this.__pathToConnectivityModel[pathId];
@@ -249,7 +229,7 @@ export class Pathways
             }
 /*
             if (!('connectivity' in properties)) {
-                for (const pathId of this._nervePaths[feature.id]) {
+                for (const pathId of this.__pathsByNerve[feature.id]) {
                     if (pathId in this.__pathToConnectivityModel) {
                         properties['connectivity'] = this.__pathToConnectivityModel[pathId];
                         break;
@@ -297,16 +277,53 @@ export class Pathways
         return featureIds;
     }
 
-    typeFeatureIds(pathType)
-    //======================
+    __typeFeatureIds(pathType)
+    //========================
     {
         const featureIds = new Set();
-        if (pathType in this.__typePaths) {
-            this.addPathsToFeatureSet_(this.__typePaths[pathType], featureIds);
+        if (pathType in this.__pathsByType) {
+            this.addPathsToFeatureSet_(this.__pathsByType[pathType], featureIds);
         }
         return featureIds;
     }
 
+    enablePathsBySystem(system, enable, force=false)
+    //==============================================
+    {
+        for (const pathId of system.pathIds) {
+            const path = this.__paths[pathId];
+            if (this.__pathtypeEnabled[path.pathType]
+              && (force
+               || enable && path.systemCount === 0
+               || !enable && path.systemCount == 1)) {
+                // and type(pathId) is enabled...
+                const featureIds = new Set();
+                this.addPathsToFeatureSet_([pathId], featureIds)
+                for (const featureId of featureIds) {
+                    this.__ui.enableFeature(featureId, enable, force);
+                }
+            }
+            path.systemCount += (enable ? 1 : -1);
+            if (path.systemCount < 0) {
+                path.systemCount = 0;
+            }
+            // TODO? Show connectors and parent components of these paths??
+        }
+    }
+
+    enablePathsByType(pathType, enable, force=false)
+    //==============================================
+    {
+        if (force
+         || enable && !this.__pathtypeEnabled[pathType]
+         || !enable && this.__pathtypeEnabled[pathType]) {
+            for (const featureId of this.__typeFeatureIds(pathType)) {
+                this.__ui.enableFeature(featureId, enable, force);
+            }
+            this.__pathtypeEnabled[pathType] = enable;
+        }
+    }
+
     nodePathModels(nodeId)
     //====================
     {

package/src/styling.js

@@ -33,6 +33,7 @@ import {PATH_STYLE_RULES} from './pathways.js';
 const COLOUR_ACTIVE    = 'blue';
 const COLOUR_ANNOTATED = '#0F0';
 const COLOUR_SELECTED  = '#0F0';
+const COLOUR_HIDDEN    = '#D8D8D8';
 
 const CENTRELINE_ACTIVE = '#444';
 const CENTRELINE_COLOUR = '#CCC';
@@ -44,6 +45,17 @@ const NERVE_SELECTED = 'red';
 
 //==============================================================================
 
+const STROKE_INTERPOLATION = [
+    'interpolate',
+    ['exponential', 2],
+    ['zoom'],
+     2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+     7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+     9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+];
+
+//==============================================================================
+
 class VectorStyleLayer
 {
     constructor(id, suffix, sourceLayer)
@@ -135,14 +147,13 @@ export class FeatureFillLayer extends VectorStyleLayer
 
     paintStyle(options, changes=false)
     {
-        const ghostColour = '#D8D8D8';       // Function of BG colour?
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
         const paintStyle = {
             'fill-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], ghostColour,
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
@@ -195,6 +206,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const dimmed = 'dimmed' in options && options.dimmed;
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
+        lineColour.push(['boolean', ['feature-state', 'hidden'], false]);
+        lineColour.push(COLOUR_HIDDEN);
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
         lineColour.push(FEATURE_SELECTED_BORDER);
         if (coloured && outlined) {
@@ -270,8 +283,7 @@ export class FeatureLineLayer extends VectorStyleLayer
     constructor(id, sourceLayer, options={})
     {
         const dashed = ('dashed' in options && options.dashed);
-        const filterType = dashed ? 'line-dash' : 'line';
-        super(id, `feature-${filterType}`, sourceLayer);
+        super(id, `feature-${dashed ? 'line-dash' : 'line'}`, sourceLayer);
         this.__dashed = dashed;
     }
 
@@ -298,6 +310,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['has', 'colour'], ['get', 'colour'],
@@ -306,6 +319,7 @@ export class FeatureLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['has', 'colour'], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
@@ -319,14 +333,8 @@ export class FeatureLineLayer extends VectorStyleLayer
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
                         ['boolean', ['feature-state', 'active'], false], 1.2,
                         options.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]]
-                    ]
+                    ],
+                    STROKE_INTERPOLATION
             ]
             // Need to vary width based on zoom??
             // Or opacity??
@@ -429,13 +437,7 @@ export class AnnotatedPathLayer extends VectorStyleLayer
                         ['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
                         0.0
                     ],
-                ['interpolate',
-                    ['exponential', 2],
-                    ['zoom'],
-                     2, ["*", ['var', 'width'], ["^", 2, -0.5]],
-                     7, ["*", ['var', 'width'], ["^", 2,  2.5]],
-                     9, ["*", ['var', 'width'], ["^", 2,  4.0]]
-                ]
+                STROKE_INTERPOLATION
             ]
         };
         return super.changedPaintStyle(paintStyle, changes);
@@ -463,9 +465,10 @@ export class PathLineLayer extends VectorStyleLayer
     constructor(id, sourceLayer, options={})
     {
         const dashed = ('dashed' in options && options.dashed);
-        const filterType = dashed ? 'line-dash' : 'line';
-        super(id, `path-${filterType}`, sourceLayer);
+        const highlight = ('highlight' in options && options.highlight);
+        super(id, `path${highlight ? '-highlight' : ''}-${dashed ? 'line-dash' : 'line'}`, sourceLayer);
         this.__dashed = dashed;
+        this.__highlight = highlight;
     }
 
     makeFilter(options={})
@@ -499,42 +502,51 @@ export class PathLineLayer extends VectorStyleLayer
             'line-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], '#CCC',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
                 '#888'
             ],
-            'line-opacity': [
+            'line-opacity': this.__highlight ? [
                 'case',
-                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
+                    ['boolean', ['feature-state', 'hidden'], false], 0.0,
+                    ['boolean', ['get', 'invisible'], false], 0.0,
+                    ['boolean', ['feature-state', 'selected'], false], 1.0,
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
+                0.0
+            ] : [
+                'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['==', ['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], 1.0,
+                    ['boolean', ['feature-state', 'selected'], false], 0.0,
+                    ['boolean', ['feature-state', 'active'], false], 0.0,
                 dimmed ? 0.1 : 0.8
             ],
             'line-width': [
                 'let',
-                'width', ["*", [
-                    'case',
+                'width', [
+                    "*",
+                    this.__highlight ? ['case',
+                        ['boolean', ['get', 'invisible'], false], 0.1,
+                        ['boolean', ['feature-state', 'selected'], false], 0.6,
+                        ['boolean', ['feature-state', 'active'], false], 0.9,
+                        0.0
+                    ] : [
+                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
                         ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
-                        ['boolean', ['feature-state', 'selected'], false], 0.6,
-                        ['boolean', ['feature-state', 'active'], false], 0.9,
-                    0.6
+                        ['boolean', ['feature-state', 'selected'], false], 0.0,
+                        ['boolean', ['feature-state', 'active'], false], 0.0,
+                        0.6
                     ],
-                    ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
-                    ['interpolate',
-                        ['exponential', 2],
-                        ['zoom'],
-                         2, ["*", ['var', 'width'], ["^", 2, -0.5]],
-                         7, ["*", ['var', 'width'], ["^", 2,  2.5]],
-                         9, ["*", ['var', 'width'], ["^", 2,  4.0]]
-                    ]
+                    ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]
+                ],
+                STROKE_INTERPOLATION
             ]
         };
         if (this.__dashed) {
@@ -569,6 +581,24 @@ export class PathDashlineLayer extends PathLineLayer
 
 //==============================================================================
 
+export class PathHighlightLayer extends PathLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, sourceLayer, {highlight: true});
+    }
+}
+
+export class PathDashHighlightLayer extends PathLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, sourceLayer, {dashed: true, highlight: true});
+    }
+}
+
+//==============================================================================
+
 class CentrelineLayer extends VectorStyleLayer
 {
     constructor(id, type, sourceLayer)
@@ -598,14 +628,7 @@ class CentrelineLayer extends VectorStyleLayer
                 '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]]
-                ]
+                    STROKE_INTERPOLATION
             ]
             // Need to vary width based on zoom??
             // Or opacity??
@@ -745,7 +768,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'paint': {
                 'line-color': [
                     'case',
-                    ['boolean', ['feature-state', 'hidden'], false], '#CCC',
+                    ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
                     ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
                     '#888'