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

package/README.rst

@@ -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.3.0-a.5``
+* ``npm install @abi-software/flatmap-viewer@2.3.0-b.1``
 
 Documentation
 -------------

package/package.json

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

package/src/annotation.js

@@ -119,8 +119,8 @@ export class Annotator
 /*
         const testUser = {name: 'Testing...'};
         this.__setUser(testUser);
-        callback(testUser);
-
+        this.__authorised = true;
+        return Promise.resolve(testUser);
 */
         const abortController = new AbortController();
         setTimeout((panel) => {
@@ -147,7 +147,7 @@ export class Annotator
             } else {
                 this.__setUser(user_data);
                 this.__authorised = true;
-                return user_data;
+                return Promise.resolve(user_data);
             }
         } else {
             return Promise.resolve({error: `${response.status} ${response.statusText}`});
@@ -174,7 +174,7 @@ export class Annotator
         });
         if (response.ok) {
             this.__authorised = false;
-            return await response.json();
+            return response.json();
         } else {
             return Promise.resolve({error: `${response.status} ${response.statusText}`});
         }
@@ -245,15 +245,17 @@ export class Annotator
         for (const field of ANNOTATION_FIELDS) {
             html.push('<div class="flatmap-annotation-entry">');
             html.push(`  <label for="${field.key}">${field.prompt}:</label>`);
-            const value = field.update ? provenanceData[field.key] || '' : '';
             if (field.kind === 'textbox') {
+                const value = field.update ? provenanceData[field.key] || '' : '';
                 html.push(`  <textarea rows="5" cols="40" id="${field.key}" name="${field.key}">${value.trim()}</textarea>`)
             } else if (!('kind' in field) || field.kind !== 'list') {
+                const value = field.update ? provenanceData[field.key] || '' : '';
                 html.push(`  <input type="text" size="40" id="${field.key}" name="${field.key}" value="${value.trim()}"/>`)
             } else {   // field.kind === 'list'
+                const listValues = field.update ? provenanceData[field.key] || [] : [];
                 html.push('  <div class="multiple">')
                 for (let n = 1; n <= field.size; n++) {
-                    const fieldValue = (n <= value.length) ? value[n-1].trim() : '';
+                    const fieldValue = (n <= listValues.length) ? listValues[n-1].trim() : '';
                     html.push(`    <input type="text" size="40" id="${field.key}_${n}" name="${field.key}" value="${fieldValue}"/>`)
                 }
                 html.push('  </div>')
@@ -290,8 +292,8 @@ export class Annotator
         const newProperties = {};
         let propertiesChanged = false;
         for (const field of ANNOTATION_FIELDS) {
-            const lastValue = field.update ? provenanceData[field.key] || '' : '';
             if (!('kind' in field) || field.kind !== 'list') {
+                const lastValue = field.update ? provenanceData[field.key] || '' : '';
                 const inputField = document.getElementById(field.key);
                 const newValue = inputField.value.trim();
                 if (newValue !== lastValue.trim()) {
@@ -304,8 +306,9 @@ export class Annotator
                     const inputField = document.getElementById(`${field.key}_${n}`);
                     listValues.push(inputField.value.trim());
                 }
-                const oldValues = lastValue.map(v => v.trim()).filter(v => (v !== '')).sort();
-                const newValues = listValues.map(v => v.trim()).filter(v => (v !== '')).sort();
+                const lastValue = field.update ? provenanceData[field.key] || [] : [];
+                const oldValues = lastValue.map(v => v.trim()).filter(v => (v !== '')).sort(Intl.Collator().compare);
+                const newValues = listValues.map(v => v.trim()).filter(v => (v !== '')).sort(Intl.Collator().compare);
                 if (oldValues.length !== newValues.length
                  || oldValues.filter(v => !newValues.includes(v)).length > 0) {
                     newProperties[field.key] = newValues;
@@ -333,7 +336,7 @@ export class Annotator
             }
         }, UPDATE_TIMEOUT, panel);
 
-        const url = this.__flatmap.addBaseUrl_(`/annotations/${this.__currentFeatureId}`);
+        const url = this.__flatmap.makeServerUrl(this.__currentFeatureId, 'annotator/');
         const response = await fetch(url, {
             headers: { "Content-Type": "application/json; charset=utf-8" },
             method: 'POST',
@@ -341,7 +344,7 @@ export class Annotator
             signal: abortController.signal
         });
         if (response.ok) {
-            return await response.json();
+            return response.json();
         } else {
             return Promise.resolve({error: `${response.status} ${response.statusText}`});
         }
@@ -364,6 +367,7 @@ export class Annotator
             if ('error' in response) {
                 this.__setStatusMessage(response.error);
             } else {
+                this.__flatmap.setFeatureAnnotated(this.__currentFeatureId);
                 panel.close();
             }
         } else {
@@ -487,7 +491,7 @@ export class Annotator
                 '<span id="flatmap-annotation-lock" class="jsPanel-ftr-btn fa fa-lock"></span>',
             ],
             contentFetch: {
-                resource: flatmap.addBaseUrl_(`/annotations/${this.__currentFeatureId}`),
+                resource: flatmap.makeServerUrl(this.__currentFeatureId, 'annotator/'),
                 fetchInit: {
                     method: 'GET',
                     mode: 'cors',
@@ -522,6 +526,24 @@ export class Annotator
         document.addEventListener('jspanelclosed', closedCallback, false);
     }
 
+    async annotated_features()
+    //========================
+    {
+        const url = this.__flatmap.makeServerUrl('', 'annotator/');
+        const response = await fetch(url, {
+            headers: {
+                "Accept": "application/json; charset=utf-8",
+                "Cache-Control": "no-store"
+            }
+        });
+        if (response.ok) {
+            return response.json();
+        } else {
+            console.error(`Annotated features: ${response.status} ${response.statusText}`);
+            return Promise.resolve([]);
+        }
+    }
+
 }
 
 //==============================================================================

package/src/flatmap-viewer.js

@@ -85,12 +85,12 @@ class FlatMap
 
         for (const [id, source] of Object.entries(mapDescription.style.sources)) {
             if (source.url) {
-                source.url = this.addBaseUrl_(source.url);
+                source.url = this.makeServerUrl(source.url);
             }
             if (source.tiles) {
                 const tiles = [];
                 for (const tileUrl of source.tiles) {
-                    tiles.push(this.addBaseUrl_(tileUrl));
+                    tiles.push(this.makeServerUrl(tileUrl));
                 }
                 source.tiles = tiles;
             }
@@ -361,21 +361,23 @@ class FlatMap
     {
         if (!this._map.hasImage(id)) {
             const image = await (path.startsWith('data:image') ? this.loadEncodedImage_(path)
-                                                               : this.loadImage_(path.startsWith('/') ? this.addBaseUrl_(path)
+                                                               : this.loadImage_(path.startsWith('/') ? this.makeServerUrl(path)
                                                                                                       : new URL(path, baseUrl)));
             this._map.addImage(id, image, options);
         }
     }
 
-    addBaseUrl_(url)
-    //==============
+    makeServerUrl(url, resource='flatmap/')
+    //=====================================
     {
-        if (url.startsWith('/')) {
-            return `${this._baseUrl}flatmap/${this.__uuid}${url}`; // We don't want embedded `{` and `}` characters escaped
-        } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
-            console.log(`Invalid URL (${url}) in map's sources`);
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            return url;
+        } else if (url.startsWith('/')) {
+            // We don't want embedded `{` and `}` characters escaped
+            return `${this._baseUrl}${resource}${this.__uuid}${url}`;
+        } else {
+            return `${this._baseUrl}${resource}${this.__uuid}/${url}`;
         }
-        return url;
     }
 
     /**
@@ -470,6 +472,19 @@ class FlatMap
         return this.__idToAnnotation.get(featureId.toString());
     }
 
+    /**
+     * Flag the feature as having external annotation.
+     *
+     * @param      {string}  featureId  The feature's identifier
+     */
+    setFeatureAnnotated(featureId)
+    //============================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.setFeatureAnnotated(featureId);
+        }
+    }
+
     __updateFeatureIdMap(property, featureIdMap, annotation)
     //======================================================
     {

package/src/interactions.js

@@ -144,14 +144,13 @@ export class UserInteractions
             }
         }
 
-        // Flag features that have annotations and note which are FC systems
+        this.__featureIdToMapId = new Map();
+        this.__setupAnnotation();
+
+        // Note features that are FC systems
 
         this.__systems = new Map();
-        for (const [id, ann] of flatmap.annotations) {
-            const feature = this.mapFeature_(id);
-            if (feature !== undefined) {
-                this._map.setFeatureState(feature, { 'annotated': true });
-            }
+        for (const [id, ann] of this._flatmap.annotations) {
             if (ann['fc-class'] === 'fc-class:System') {
                 if (this.__systems.has(ann.name)) {
                     this.__systems.get(ann.name).featureIds.push(ann.featureId)
@@ -197,10 +196,6 @@ export class UserInteractions
             }
         }
 
-        // Add annotation capabilities
-
-        this.__annotator = new Annotator(flatmap);
-
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -254,6 +249,39 @@ export class UserInteractions
         }
     }
 
+    async __setupAnnotation()
+    //=======================
+    {
+        // Add annotation capability
+
+        this.__annotator = new Annotator(this._flatmap);
+        const annotated_features = await this.__annotator.annotated_features();
+
+        // Flag features that have annotations
+
+        for (const [mapId, ann] of this._flatmap.annotations) {
+            this.__featureIdToMapId.set(ann.id, mapId);
+            const feature = this.mapFeature_(mapId);
+            if (feature !== undefined) {
+                this._map.setFeatureState(feature, { 'map-annotation': true });
+                if (annotated_features.indexOf(ann.id) >= 0) {
+                    this._map.setFeatureState(feature, { 'annotated': true });
+                }
+            }
+        }
+    }
+
+    setFeatureAnnotated(featureId)
+    //============================
+    {
+        // featureId v's geoJSON id
+        const mapId = this.__featureIdToMapId.get(featureId);
+        const feature = this.mapFeature_(mapId);
+        if (feature !== undefined) {
+            this._map.setFeatureState(feature, { 'annotated': true });
+        }
+    }
+
     setPaint(options)
     //===============
     {
@@ -447,7 +475,7 @@ export class UserInteractions
         let smallestFeature = null;
         for (const feature of features) {
             if (feature.geometry.type.includes('Polygon')
-             && this._map.getFeatureState(feature)['annotated']) {
+             && this._map.getFeatureState(feature)['map-annotation']) {
                 const polygon = turf.geometry(feature.geometry.type, feature.geometry.coordinates);
                 const area = turfArea(polygon);
                 if (smallestFeature === null || smallestArea > area) {

package/src/layers.js

@@ -154,6 +154,8 @@ class MapFeatureLayers extends MapStylingLayers
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
                 .indexOf(pathwaysVectorSource) >= 0) {
+            this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER);
+
             this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
             this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
 

package/src/styling.js

@@ -30,6 +30,20 @@ import {PATH_STYLE_RULES} from './pathways.js';
 
 //==============================================================================
 
+const COLOUR_ACTIVE    = 'blue';
+const COLOUR_ANNOTATED = '#0F0';
+const COLOUR_SELECTED  = '#0F0';
+
+const CENTRELINE_ACTIVE = '#444';
+const CENTRELINE_COLOUR = '#CCC';
+
+const FEATURE_SELECTED_BORDER = 'black';
+
+const NERVE_ACTIVE = '#222';
+const NERVE_SELECTED = 'red';
+
+//==============================================================================
+
 class VectorStyleLayer
 {
     constructor(id, suffix, sourceLayer)
@@ -126,7 +140,7 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
@@ -180,11 +194,13 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push('black');
+        lineColour.push(FEATURE_SELECTED_BORDER);
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
-            lineColour.push('blue');
+            lineColour.push(COLOUR_ACTIVE);
         }
+        lineColour.push(['boolean', ['feature-state', 'annotated'], false]);
+        lineColour.push(COLOUR_ANNOTATED);
         lineColour.push(['has', 'colour']);
         lineColour.push(['get', 'colour']);
         lineColour.push('#444');
@@ -199,6 +215,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
         }
         lineOpacity.push(['boolean', ['feature-state', 'selected'], false]);
         lineOpacity.push(0.9);
+        lineOpacity.push(['boolean', ['feature-state', 'annotated'], false]);
+        lineOpacity.push(0.9);
         if (activeRasterLayer) {
             lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
         } else {
@@ -215,6 +233,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
             lineWidth.push(['boolean', ['feature-state', 'active'], false]);
             lineWidth.push(1.5);
         }
+        lineWidth.push(['boolean', ['feature-state', 'annotated'], false]);
+        lineWidth.push(3.5);
         lineWidth.push(['has', 'colour']);
         lineWidth.push(0.7);
         lineWidth.push((coloured && outlined) ? 0.5 : 0.1);
@@ -276,7 +296,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['has', 'colour'], ['get', 'colour'],
                 ['==', ['get', 'type'], 'network'], '#AFA202',
@@ -338,6 +358,63 @@ export class FeatureDashLineLayer extends FeatureLineLayer
 
 //==============================================================================
 
+export class AnnotatedPathLayer extends VectorStyleLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'annotated-path', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const dimmed = 'dimmed' in options && options.dimmed;
+        const paintStyle = {
+            'line-color': COLOUR_ANNOTATED,
+            'line-dasharray': [5, 0.5, 3, 0.5],
+            'line-opacity': [
+                'case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.05,
+                        ['boolean', ['feature-state', 'annotated'], false],
+                        (dimmed ? 0.1 : 0.8),
+                    0.6
+                ],
+            'line-width': [
+                'let',
+                'width',
+                    ['case',
+                    ['boolean', ['feature-state', 'annotated'], false],
+                        ['*', 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]]
+                ]
+            ]
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        const dimmed = 'dimmed' in options && options.dimmed;
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': ['==', '$type', 'LineString'],
+            'paint': this.paintStyle(options),
+            'layout': {
+                'line-cap': 'square'
+            }
+        };
+    }
+}
+
+//==============================================================================
+
 export class PathLineLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer, options={})
@@ -402,7 +479,7 @@ export class PathLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
@@ -487,9 +564,9 @@ class CentrelineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': (this.__type == 'edge') ? '#000' : [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
-                ['boolean', ['feature-state', 'active'], false], '#444',
-                '#CCC'
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                ['boolean', ['feature-state', 'active'], false], CENTRELINE_ACTIVE,
+                CENTRELINE_COLOUR
             ],
             'line-opacity': [
                 'case',
@@ -650,8 +727,8 @@ export class FeatureNerveLayer extends VectorStyleLayer
                 'line-color': [
                     'case',
                     ['boolean', ['feature-state', 'hidden'], false], '#CCC',
-                    ['boolean', ['feature-state', 'active'], false], '#222',
-                    ['boolean', ['feature-state', 'selected'], false], 'red',
+                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
+                    ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
                     '#888'
                 ],
                 'line-opacity': [
@@ -702,7 +779,7 @@ export class NervePolygonBorder extends VectorStyleLayer
             'paint': {
                 'line-color': [
                     'case',
-                    ['boolean', ['feature-state', 'active'], false], 'blue',
+                    ['boolean', ['feature-state', 'active'], false], COLOUR_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], 'red',
                     '#444'
                 ],