@abi-software/flatmap-viewer 2.3.1-b.1 → 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';
 
 //==============================================================================
@@ -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

@@ -45,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)
@@ -272,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;
     }
 
@@ -323,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??
@@ -433,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);
@@ -467,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={})
@@ -509,36 +508,45 @@ export class PathLineLayer extends VectorStyleLayer
                 ...PATH_STYLE_RULES,
                 '#888'
             ],
-            'line-opacity': [
+            'line-opacity': this.__highlight ? [
+                'case',
+                    ['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], 2.0,
-                        ['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) {
@@ -573,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)
@@ -602,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??

package/src/systems.js

@@ -21,46 +21,50 @@ limitations under the License.
 
 export class SystemsManager
 {
-    constructor(flatmap, ui, enabled=true)
+    constructor(flatmap, ui, enabled=false)
     {
         this.__ui = ui;
         this.__systems = new Map();
         this.__enabledChildren = new Map();
         for (const [id, ann] of flatmap.annotations) {
             if (ann['fc-class'] === 'fc-class:System') {
-                if (this.__systems.has(ann.name)) {
-                    this.__systems.get(ann.name).featureIds.push(ann.featureId)
+                const systemId = ann.name.replaceAll(' ', '_');
+                if (this.__systems.has(systemId)) {
+                    this.__systems.get(systemId).featureIds.push(ann.featureId)
                 } else {
-                    this.__systems.set(ann.name, {
-                        id: ann.name.replaceAll(' ', '_'),
+                    this.__systems.set(systemId, {
+                        name: ann.name,
                         colour: ann.colour,
                         featureIds: [ ann.featureId ],
-                        enabled: enabled,
+                        enabled: false,
                         pathIds: ('path-ids' in ann) ? ann['path-ids'] : []
                     });
+                this.__ui.enableFeature(ann.featureId, false, true);
                 }
                 for (const childId of ann['children']) {
-                    if (enabled) {
-                        const enabledCount = (this.__enabledChildren.has(childId))
-                                           ? this.__enabledChildren.get(childId)
-                                           : 0;
-                        this.__enabledChildren.set(childId, enabledCount + 1);
-                    } else {
-                        this.__enabledChildren.set(childId, 0);
-                    }
+                    this.__enabledChildren.set(childId, 0);
+                    this.__ui.enableFeatureWithChildren(childId, false, true);
                 }
             }
         }
+        for (const system of this.__systems.values()) {
+            if (enabled) {
+                this.__enableSystem(system, true);
+            } else {
+                // Disable all paths associated with the disabled system
+                this.__ui.enablePathsBySystem(system, false, true);
+            }
+        }
     }
 
     get systems()
     //===========
     {
         const systems = [];
-        for (const [name, system] of this.__systems.entries()) {
+        for (const [systemId, system] of this.__systems.entries()) {
             systems.push({
-                name: name,
-                id: system.id,
+                id: systemId,
+                name: system.name,
                 colour: system.colour,
                 enabled: system.enabled
             });
@@ -68,31 +72,44 @@ export class SystemsManager
         return systems;
     }
 
-    enable(systemName, enable=true)
-    //=============================
+    enable(systemId, enable=true)
+    //===========================
     {
-        const system = this.__systems.get(systemName);
+        const system = this.__systems.get(systemId);
         if (system !== undefined && enable !== system.enabled) {
-            for (const featureId of system.featureIds) {
-                const feature = this.__ui.mapFeature(featureId);
-                if (feature !== undefined) {
-                    this.__ui.enableFeature(feature, enable);
-                    for (const childFeatureId of feature.children) {
-                        const enabledCount = this.__enabledChildren.get(childFeatureId);
-                        if (enable && enabledCount === 0 || !enable && enabledCount == 1) {
-                            this.__ui.enableFeatureWithChildren(childFeatureId, enable);
-                        }
-                        this.__enabledChildren.set(childFeatureId, enabledCount + (enable ? 1 : -1));
+            this.__enableSystem(system, enable);
+        }
+    }
+
+    __enableSystem(system, enable=true)
+    //=================================
+    {
+        for (const featureId of system.featureIds) {
+            const feature = this.__ui.mapFeature(featureId);
+            if (feature !== undefined) {
+                this.__ui.enableMapFeature(feature, enable);
+                for (const childFeatureId of feature.children) {
+                    const enabledCount = this.__enabledChildren.get(childFeatureId);
+                    if (enable && enabledCount === 0 || !enable && enabledCount == 1) {
+                        this.__ui.enableFeatureWithChildren(childFeatureId, enable);
                     }
+                    this.__enabledChildren.set(childFeatureId, enabledCount + (enable ? 1 : -1));
                 }
             }
-            system.enabled = enable;
-
-            // Enable/disable all paths associated with the system
-            for (const pathId of system.pathIds) {
-                this.__ui.enableFeature(this.__ui.mapFeature(pathId), enable);
-            }
         }
+
+        // Enable/disable all paths associated with the system
+        this.__ui.enablePathsBySystem(system, enable);
+
+        // Save system state
+        system.enabled = enable;
+    }
+
+    systemEnabled(systemId)
+    //=====================
+    {
+        const system = this.__systems.get(systemId);
+        return (system !== undefined && system.enabled);
     }
 }
 

package/src/utils.js

@@ -124,3 +124,21 @@ export function setDefaults(options, defaultOptions)
 }
 
 //==============================================================================
+
+export function reverseMap(mapping)
+//=================================
+{
+    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;
+}
+
+//==============================================================================