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

package/package.json

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

package/src/controls.js

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

package/src/flatmap-viewer.js

@@ -281,7 +281,9 @@ class FlatMap
     pathTypes()
     //=========
     {
-        return pathways.PATH_TYPES;
+        if (this._userInteractions !== null) {
+            return this._userInteractions.pathTypes();
+        }
     }
 
     /**

package/src/interactions.js

@@ -151,8 +151,7 @@ export class UserInteractions
 
         if (flatmap.options.pathControls) {
             // Add controls to manage our pathways
-
-            this._map.addControl(new PathControl(flatmap));
+            this._map.addControl(new PathControl(flatmap, this._pathways));
         }
 
         // Manage our layers
@@ -966,6 +965,12 @@ export class UserInteractions
         }
     }
 
+    pathTypes()
+    //=========
+    {
+        return this._pathways.pathTypes;
+    }
+
     enablePath(pathType, enable=true)
     //===============================
     {

package/src/pathways.js

@@ -26,17 +26,18 @@ export const PATHWAYS_LAYER = 'pathways';
 
 //==============================================================================
 
-export const PATH_TYPES = [
-    { type: "cns", label: "CNS", colour: "#9B1FC1"},
-    { type: "lcn", label: "Local circuit neuron", colour: "#F19E38"},
-    { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
-    { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
-    { type: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
-    { type: "somatic", label: "Somatic lower motor", colour: "#98561D"},
-    { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
-    { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423"},
-    { type: "other", label: "Other neuron type", colour: "#888"}
-];
+const PATH_TYPES = {
+    "cns": {label: "CNS", colour: "#9B1FC1"},
+    "lcn": {label: "Local circuit neuron", colour: "#F19E38"},
+    "para-pre": {label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
+    "para-post": {label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
+    "sensory": {label: "Sensory (afferent) neuron", colour: "#2A62F6"},
+    "somatic": {label: "Somatic lower motor", colour: "#98561D"},
+    "symp-pre": {label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
+    "symp-post": {label: "Sympathetic post-ganglionic", colour: "#EA3423"},
+    "other": {label: "Other neuron type", colour: "#888"},
+    "centreline": {label: "Nerve centrelines", colour: "#CC0"}
+};
 
 //==============================================================================
 
@@ -121,21 +122,27 @@ 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);
-        }
         // Map unknown path types to ``other``
         this.__typePaths = {};
         this.__typePaths['other'] = [];
+        this.__knownPathTypes = [];
         for (const [pathType, paths] of Object.entries(flatmap.pathways['type-paths'])) {
-            if (pathTypes.indexOf(pathType) >= 0) {
+            if (pathType in PATH_TYPES && pathType !== 'other') {
                 this.__typePaths[pathType] = paths;
+                this.__knownPathTypes.push({'type': pathType, ...PATH_TYPES[pathType]});
             } else {
                 this.__typePaths['other'].push(...paths);
             }
         }
+        if ('other' in this.__typePaths) {
+            this.__knownPathTypes.push({'type': 'other', ...PATH_TYPES['other']});
+        }
+    }
+
+    get pathTypes()
+    //=============
+    {
+        return this.__knownPathTypes;
     }
 
     addPathsToFeatureSet_(paths, featureSet)

package/src/styling.js

@@ -346,7 +346,8 @@ export class PathLineLayer extends VectorStyleLayer
             [
                 'any',
                 ['==', 'type', 'bezier'],
-                ['==', 'type', `line`]
+                ['==', 'kind', 'centreline'],
+                ['==', 'type', 'line']
             ];
         this.__dashed = dashed;
     }
@@ -369,6 +370,7 @@ export class PathLineLayer extends VectorStyleLayer
                 ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
                 ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
                 ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
+                ['==', ['get', 'kind'], 'centreline'], '#CC0',
                 '#888'
             ],
             'line-opacity': [
@@ -378,6 +380,7 @@ export class PathLineLayer extends VectorStyleLayer
                     ['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
             ],
             'line-width': [
@@ -385,6 +388,7 @@ export class PathLineLayer extends VectorStyleLayer
                 '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,
@@ -452,6 +456,7 @@ export class FeatureNerveLayer extends VectorStyleLayer
             'filter': [
                  'all',
                  ['==', '$type', 'LineString'],
+                 ['!=', 'kind', 'centreline'],
                  ['==', 'type', 'nerve']
             ],
             'paint': {

package/static/flatmap-viewer.css

@@ -198,6 +198,9 @@ li.flatmap-contextmenu-item:hover {
 label[for=path-all-paths] {
     font-weight: bold;
 }
+.nerve-centreline {
+    background: #CC0;
+}
 .nerve-cns {
     background: #9B1FC1;
 }