@abi-software/flatmap-viewer 2.5.9 → 2.6.0-a.1

package/README.rst

@@ -26,7 +26,7 @@ Running
 
 ::
 
-    $ npm start
+    $ npm run dev
 
 Maps can then be viewed at http://localhost:3000
 

package/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.5.9",
+  "version": "2.6.0-a.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AnatomicMaps/flatmap-viewer.git"
   },
   "main": "src/main.js",
+  "type": "module",
   "files": [
     "src",
     "static"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node app",
-    "build": "webpack --mode production",
+    "dev": "vite serve app --port 3000",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "docs": "cd docs; poetry run make html"
   },
   "author": "David Brooks",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.10.4",
     "@deck.gl/core": "^8.9.33",
     "@deck.gl/layers": "^8.9.33",
     "@deck.gl/mapbox": "^8.9.33",
@@ -38,22 +39,8 @@
     "polylabel": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "browser-sync": "^2.26.7",
-    "bs-fullscreen-message": "^1.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^6.7.3",
     "eslint": "^8.7.0",
-    "express": "^4.17.1",
-    "html-webpack-plugin": "^4.5.2",
-    "strip-ansi": "^7.0.1",
-    "style-loader": "^3.3.2",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-middleware": "^4.1.0",
-    "webpack-node-externals": "^1.7.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
   }
 }

package/src/controls/annotation.js

@@ -41,10 +41,9 @@ limitations under the License.
 
 //==============================================================================
 
-import MapboxDraw from "@mapbox/mapbox-gl-draw"
+import MapboxDraw from "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw-unminified.js"
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 
-
 //==============================================================================
 
 const drawStyleIds = MapboxDraw.lib.theme.map(s => s.id)
@@ -222,6 +221,8 @@ export class AnnotationDrawControl
             this.__committedFeatures.set(feature.id, feature)
         }
         this.__uncommittedFeatureIds.delete(feature.id)
+this.__flatmap.showPopup(feature.id, '<div>committed</div>')
+
     }
 
     abortEvent(event)
@@ -269,10 +270,15 @@ export class AnnotationDrawControl
         this.__uncommittedFeatureIds.delete(ids[0])
     }
 
-    refreshGeometry(feature)
+    getFeature(featureId)
+    //===================
+    {
+        return this.__draw.get(featureId) || null
+    }
+
+    selectFeature(featureId)
     //======================
     {
-        return this.__draw.get(feature.id) || null
     }
 }
 

package/src/interactions.js

@@ -102,6 +102,8 @@ function labelPosition(feature)
     if (feature.geometry.type === 'Point') {
         return feature.geometry.coordinates
     }
+    // LineString?
+    // Multi geometries??
     const polygon = feature.geometry.coordinates;
     // Rough heuristic. Area is in km^2; below appears to be good enough.
     const precision = ('area' in feature.properties)
@@ -266,7 +268,6 @@ export class UserInteractions
         this._map.addControl(this.#annotationDrawControl)
 
         // Handle mouse events
-
         this._map.on('click', this.clickEvent_.bind(this));
         this._map.on('touchend', this.clickEvent_.bind(this));
         this._map.on('mousemove', this.mouseMoveEvent_.bind(this));
@@ -385,7 +386,7 @@ export class UserInteractions
     //=======================================
     {
         if (this.#annotationDrawControl) {
-            return this.#annotationDrawControl.refreshGeometry(feature)
+            return this.#annotationDrawControl.getFeature(feature.id)
         }
     }
 
@@ -465,21 +466,37 @@ export class UserInteractions
         this.__systemsManager.enable(systemId, enable);
     }
 
+    #getAnnotationProperties(featureId)
+    //=================================
+    {
+        const properties = this._flatmap.annotation(featureId)
+        if (properties) {
+            return properties
+        } else if (this.#annotationDrawControl) {
+            const drawnFeature = this.#annotationDrawControl.getFeature(featureId)
+            if (drawnFeature) {
+                drawnFeature.properties.user_drawn = true
+                return drawnFeature.properties
+            }
+        }
+        return null
+    }
+
     mapFeature(featureId)
     //===================
     {
-        const ann = this._flatmap.annotation(featureId);
-        if (ann !== undefined) {
+        const properties = this.#getAnnotationProperties(featureId);
+        if (properties && !properties.user_drawn) {
             return {
                 id: featureId,
                 source: VECTOR_TILES_SOURCE,
                 sourceLayer: (this._flatmap.options.separateLayers
-                             ? `${ann['layer']}_${ann['tile-layer']}`
-                             : ann['tile-layer']).replaceAll('/', '_'),
-                children: ann.children || []
+                             ? `${properties['layer']}_${properties['tile-layer']}`
+                             : properties['tile-layer']).replaceAll('/', '_'),
+                children: properties.children || []
             };
         }
-        return undefined;
+        return null;
     }
 
     #getFeatureState(feature)
@@ -509,7 +526,7 @@ export class UserInteractions
     enableMapFeature(feature, enable=true)
     //====================================
     {
-        if (feature !== undefined) {
+        if (feature) {
             const state = this.#getFeatureState(feature);
             if  ('hidden' in state) {
                 if (enable) {
@@ -542,7 +559,7 @@ export class UserInteractions
     //============================================================
     {
         const feature = this.mapFeature(featureId);
-        if (feature !== undefined) {
+        if (feature) {
             this.enableFeature(featureId, enable, force);
             for (const childFeatureId of feature.children) {
                 this.enableFeatureWithChildren(childFeatureId, enable, force);
@@ -554,7 +571,7 @@ export class UserInteractions
     //===========================================
     {
         const markerId = this.__markerIdByFeatureId.get(+featureId);
-        if (markerId !== undefined) {
+        if (markerId) {
             const markerDiv = document.getElementById(`marker-${markerId}`);
             if (markerDiv) {
                 markerDiv.style.visibility = enable ? 'visible' : 'hidden';
@@ -567,7 +584,7 @@ export class UserInteractions
     {
         if (feature.id) {
             const state = this.#getFeatureState(feature);
-            return (state !== undefined
+            return (state
                 && (!('hidden' in state) || !state.hidden));
         }
         return DRAW_ANNOTATION_LAYERS.includes(feature.layer.id)
@@ -582,12 +599,12 @@ export class UserInteractions
     selectFeature(featureId, dim=true)
     //================================
     {
-        const ann = this._flatmap.annotation(featureId);
-        if (ann && 'sckan' in ann) {
+        const properties = this.#getAnnotationProperties(featureId);
+        if (properties && 'sckan' in properties) {
             const sckanState = this._layerManager.sckanState;
             if (sckanState === 'none'
-             || sckanState === 'valid' && !ann.sckan
-             || sckanState === 'invalid' && ann.sckan) {
+             || sckanState === 'valid' && !properties.sckan
+             || sckanState === 'invalid' && properties.sckan) {
                 return false;
             }
         }
@@ -597,11 +614,15 @@ export class UserInteractions
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
             result = true;
+        } else if (properties.user_drawn) {
+            if (this.#annotationDrawControl) {
+                this.#annotationDrawControl.selectFeature(featureId, true)
+            }
         } else {
             const feature = this.mapFeature(featureId);
-            if (feature !== undefined) {
+            if (feature) {
                 const state = this.#getFeatureState(feature);
-                if (state !== undefined && (!('hidden' in state) || !state.hidden)) {
+                if (state && (!('hidden' in state) || !state.hidden)) {
                     this.#setFeatureState(feature, { selected: true });
                     this._selectedFeatureIds.set(featureId, 1);
                     result = true;
@@ -624,7 +645,7 @@ export class UserInteractions
                 this._selectedFeatureIds.set(featureId, references - 1);
             } else {
                 const feature = this.mapFeature(featureId);
-                if (feature !== undefined) {
+                if (feature) {
                     this.#removeFeatureState(feature, 'selected');
                     this._selectedFeatureIds.delete(+featureId);
                 }
@@ -640,7 +661,7 @@ export class UserInteractions
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature(featureId);
-            if (feature !== undefined) {
+            if (feature) {
                 this.#removeFeatureState(feature, 'selected');
             }
         }
@@ -651,7 +672,7 @@ export class UserInteractions
     activateFeature(feature)
     //======================
     {
-        if (feature !== undefined) {
+        if (feature) {
             this.#setFeatureState(feature, { active: true });
             this._activeFeatures.add(feature);
         }
@@ -737,7 +758,7 @@ export class UserInteractions
         if (featureIds.length) {
             this.unselectFeatures();
             for (const featureId of featureIds) {
-                const annotation = this._flatmap.annotation(featureId);
+                const annotation = this.#getAnnotationProperties(featureId);
                 if (annotation) {
                     if (this.selectFeature(featureId)) {
                         if ('type' in annotation && annotation.type.startsWith('line')) {
@@ -785,14 +806,14 @@ export class UserInteractions
             padding.lng -= bbox[0];
             padding.lat = bbox[3] - padding.lat;
             for (const featureId of featureIds) {
-                const annotation = this._flatmap.annotation(featureId);
+                const annotation = this.#getAnnotationProperties(featureId);
                 if (annotation) {
                     if (this.selectFeature(featureId)) {
                         bbox = expandBounds(bbox, annotation.bounds, padding);
                         if ('type' in annotation && annotation.type.startsWith('line')) {
                             for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                                 if (this.selectFeature(pathFeatureId)) {
-                                    const pathAnnotation = this._flatmap.annotation(pathFeatureId)
+                                    const pathAnnotation = this.#getAnnotationProperties(pathFeatureId)
                                     bbox = expandBounds(bbox, pathAnnotation.bounds, padding);
                                 }
                             }
@@ -812,12 +833,11 @@ export class UserInteractions
     showPopup(featureId, content, options={})
     //=======================================
     {
-        const ann = this._flatmap.annotation(featureId);
+        const properties = this.#getAnnotationProperties(featureId);
         const drawn = options && options.annotationFeatureGeometry;
-        if (ann || drawn) {  // The feature exists or it is a drawn annotation
+        if (properties || drawn) {  // The feature exists or it is a drawn annotation
 
             // Remove any existing popup
-
             if (this._currentPopup) {
                 if (options && options.preserveSelection) {
                     this._currentPopup.options.preserveSelection = options.preserveSelection;
@@ -826,7 +846,6 @@ export class UserInteractions
             }
 
             // Clear selection if we are not preserving it
-
             if (options && options.preserveSelection) {
                 delete options.preserveSelection;       // Don't pass to onClose()
             } else {                                    // via the popup's options
@@ -834,10 +853,9 @@ export class UserInteractions
             }
 
             // Select the feature
-
             this.selectFeature(featureId);
 
-            // Find the pop-up's postion
+            // Find the pop-up's position
 
             let location = null;
             if ('positionAtLastClick' in options
@@ -850,7 +868,7 @@ export class UserInteractions
                 location = options.annotationFeatureGeometry;
             } else {
                 // Position popup at the feature's 'centre'
-                location = this.__markerPosition(featureId, ann);
+                location = this.__markerPosition(featureId, properties);
             }
 
             // Make sure the feature is on screen
@@ -866,10 +884,11 @@ export class UserInteractions
             }
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
-                this._currentPopup.setDOMContent(content);
+                this._currentPopup.setDOMContent(content)
             } else {
-                this._currentPopup.setText(content);
+                this._currentPopup.setText(content)
             }
+            this._currentPopup.addTo(this._map)
         }
     }
 
@@ -1147,7 +1166,7 @@ export class UserInteractions
     selectionEvent_(event, feature)
     //=============================
     {
-        if (feature !== undefined) {
+        if (feature) {
             const clickedFeatureId = +feature.id;
             const dim = !('properties' in feature
                        && 'kind' in feature.properties
@@ -1305,26 +1324,33 @@ export class UserInteractions
 
     // Marker handling
 
-    __markerPosition(featureId, annotation)
+    __markerPosition(featureId, properties)
     {
         if (this.__markerPositions.has(featureId)) {
             return this.__markerPositions.get(featureId);
         }
-        let position = annotation.markerPosition || annotation.centroid;
-        if (position === null || position == undefined) {
+        let position = properties.markerPosition || properties.centroid || null;
+        if (!position) {
             // Find where to place a label or popup on a feature
-            const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
-                'sourceLayer': this._flatmap.options.separateLayers
-                                ? `${annotation['layer']}_${annotation['tile-layer']}`
-                                : annotation['tile-layer'],
-                'filter': [
-                    'all',
-                    [ '==', ['id'], parseInt(featureId) ],
-                    [ '==', ['geometry-type'], 'Polygon' ]
-                ]
-            });
-            if (features.length > 0) {
-                position = labelPosition(features[0]);
+            if (properties.user_drawn) {
+                if (this.#annotationDrawControl) {
+                    const feature = this.#annotationDrawControl.getFeature(featureId)
+                    position = labelPosition(feature);
+                }
+            } else {
+                const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
+                    'sourceLayer': this._flatmap.options.separateLayers
+                                    ? `${properties['layer']}_${properties['tile-layer']}`
+                                    : properties['tile-layer'],
+                    'filter': [
+                        'all',
+                        [ '==', ['id'], parseInt(featureId) ],
+                        [ '==', ['geometry-type'], 'Polygon' ]
+                    ]
+                });
+                if (features.length > 0) {
+                    position = labelPosition(features[0]);
+                }
             }
         }
         this.__markerPositions.set(featureId, position);
@@ -1338,7 +1364,7 @@ export class UserInteractions
         let markerId = -1;
 
         for (const featureId of featureIds) {
-            const annotation = this._flatmap.annotation(featureId);
+            const annotation = this.#getAnnotationProperties(featureId);
             if (!('markerPosition' in annotation) && !annotation.geometry.includes('Polygon')) {
                 continue;
             }
@@ -1454,7 +1480,7 @@ export class UserInteractions
                 const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
                 const feature = this.mapFeature(annotation.featureId);
-                if (feature !== undefined) {
+                if (feature) {
                     if (event.type === 'mouseenter') {
                         // Highlight on mouse enter
                         this.resetActiveFeatures_();

package/src/layers/filter.ts

@@ -0,0 +1,187 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2024 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.
+
+******************************************************************************/
+
+type FilterExpression = Record<string, any>
+
+//==============================================================================
+
+export class FeatureFilter
+{
+    #filter: FilterExpression
+
+    constructor(filter: FilterExpression)
+    {
+        this.#filter = filter
+    }
+
+    makeStyleFilter()
+    //===============
+    {
+        return this.#makeStyleFilter(this.#filter)
+    }
+
+    #makeStyleFilter(filter: FilterExpression): Array<any>
+    //====================================================
+    {
+        // We expect an object, so check and warn...
+        if (!filter || filter.constructor !== Object) {
+            console.warn(`makeFilter: Invalid filter expression: ${filter}`)
+            return []
+        }
+
+        const styleFilter = []
+        for (const [key, expr] of Object.entries(filter)) {
+            if (key === 'AND' || key === 'OR') {
+                if (Array.isArray(expr) && expr.length >= 2) {
+                    styleFilter.push((key === 'AND') ? 'all' : 'any',
+                                      ...expr.map(e => this.#makeStyleFilter(e)))
+                } else {
+                    console.warn(`makeFilter: Invalid ${key} operands: ${expr}`)
+                }
+            } else if (key === 'HAS') {
+                styleFilter.push('has', expr)
+            } else if (key === 'NOT') {
+                const filterExpr = this.#makeStyleFilter(expr)
+                if (filterExpr.length === 2 && ['has', '!has'].includes(filterExpr[0])) {
+                    if (filterExpr[0] === 'has') {
+                        styleFilter.push('!has', filterExpr[1])
+                    } else {
+                        styleFilter.push('has', filterExpr[1])
+                    }
+                } else if (filterExpr.length === 3 && ['==', '!='].includes(filterExpr[0])) {
+                    if (filterExpr[0] === '==') {
+                        styleFilter.push('!=', filterExpr[1], filterExpr[2])
+                    } else {
+                        styleFilter.push('==', filterExpr[1], filterExpr[2])
+                    }
+                } else {
+                    styleFilter.push('!', filterExpr)
+                }
+            } else {
+                if (Array.isArray(expr)) {
+                    styleFilter.push('any', ...expr.map(e => ['==', key, e]))
+                } else {
+                    styleFilter.push('==', key, expr)
+                }
+            }
+        }
+        return styleFilter
+    }
+
+}
+
+//==============================================================================
+
+function testFilter(f: FilterExpression)
+//======================================
+{
+    const featureFilter = new FeatureFilter(f)
+    console.log(f, '--->', featureFilter.makeStyleFilter())
+}
+
+export function testFilters()
+//===========================
+{
+    /*
+        { HAS: 'prop' } ---> [ 'has', 'prop' ]
+        { prop: 1 } ---> [ '==', 'prop', 1 ]
+        { NOT: { prop: 1 } } ---> [ '!=', 'prop', 1 ]
+        { NOT: { prop: [ 1, 2 ] } } ---> [ '!', [ 'any', [ '==', 'prop', 1 ], [ '==', 'prop', 2 ] ] ]
+        { OR: [ { prop1: 10 }, { prop2: 11 } ] } ---> [ 'any', [ '==', 'prop1', 10 ], [ '==', 'prop2', 11 ] ]
+        { AND: [ { prop1: 10 }, { prop2: 11 } ] } ---> [ 'all', [ '==', 'prop1', 10 ], [ '==', 'prop2', 11 ] ]
+        { OR: [ { AND: [Array] }, { AND: [Array] } ] } ---> [
+          'any',
+          [ 'all', [ '!=', 'prop1', 10 ], [ '==', 'prop2', 11 ] ],
+          [ 'all', [ '==', 'prop3', 10 ], [ '==', 'prop4', 11 ] ]
+        ]
+        { NOT: { OR: [ [Object], [Object] ] } } ---> [
+          '!',
+          [ 'any', [ 'all', [Array], [Array] ], [ 'all', [Array], [Array] ] ]
+        ]
+    */
+
+    testFilter({
+        "HAS": "prop"
+    })
+
+    testFilter({
+        "prop": 1
+    })
+
+    testFilter({
+        "NOT": {
+            "prop": 1
+        }
+    })
+
+    testFilter({
+        "NOT": {
+            "prop": [1, 2]
+        }
+    })
+
+    testFilter({
+        "OR": [
+            {"prop1": 10},
+            {"prop2": 11}
+        ]
+    })
+
+    testFilter({
+        "AND": [
+            {"prop1": 10},
+            {"prop2": 11}
+        ]
+    })
+
+    testFilter({
+        "OR": [{
+            "AND": [
+                { "NOT": {"prop1": 10}},
+                {"prop2": 11}
+            ]}, {
+            "AND": [
+                {"prop3": 10},
+                {"prop4": 11}
+            ]}
+        ]
+    })
+
+    testFilter({
+        "NOT": {
+            "OR": [{
+                "AND": [
+                    {"prop1": 10},
+                    {"prop2": 11}
+                ]}, {
+                "AND": [
+                    {"prop3": 10},
+                    {"prop4": 11}
+                ]}
+            ]
+        }
+    })
+}
+
+//==============================================================================
+
+//testFilters()
+
+//==============================================================================

package/src/layers/index.js

@@ -22,6 +22,8 @@ limitations under the License.
 
 //==============================================================================
 
+import {FeatureFilter} from './filter'
+
 import {PATHWAYS_LAYER} from '../pathways.js';
 import * as utils from '../utils.js';
 
@@ -44,6 +46,11 @@ class MapStylingLayers
         this.__layers = [];
         this.__layerOptions = options;
         this.__separateLayers = flatmap.options.separateLayers;
+
+        const f = new FeatureFilter({
+            "HAS": "prop"
+        })
+        console.log(f.makeStyleFilter())
     }
 
     get id()

package/src/main.js

@@ -64,6 +64,9 @@ class DrawControl
     //================
     {
         console.log(event)
+
+this._flatmap.showPopup(event.feature.id, '<div>event</div>')
+
         if (this._idField) {
             this._idField.innerText = `Annotation ${event.type}, Id: ${event.feature.id}`
             this._lastEvent = event