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

package/src/layers/filter.js

@@ -0,0 +1,310 @@
+/******************************************************************************
+
+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.
+
+******************************************************************************/
+
+import Set from 'core-js-pure/actual/set'
+
+//==============================================================================
+
+export class PropertiesFilter
+{
+    #filter
+
+    constructor(filter=true)
+    //======================
+    {
+        if (filter.constructor !== Object) {    // We allow boolean values
+            this.#filter = filter
+        } else {
+            this.#filter = Object.assign({}, filter)
+        }
+    }
+
+    clear()
+    //=====
+    {
+        if (this.#filter !== true) {
+            this.#filter = true
+        }
+    }
+
+    expand(filter)
+    //============
+    {
+        if (this.#filter === false) {
+            this.#filter = filter
+        } else if (this.#filter !== true) {
+            const copiedFilter = Object.assign({}, filter)
+            this.#filter = { "OR": [this.#filter, copiedFilter] }
+        }
+    }
+
+    invert()
+    //======
+    {
+        if (this.#filter === false) {
+            this.#filter = true
+        } else if (this.#filter === true) {
+            this.#filter = false
+        } else {
+            const copiedFilter = Object.assign({}, filter)
+            this.#filter = { "NOT": copiedFilter }
+        }
+    }
+
+    getFilter()
+    //=========
+    {
+        return this.#filter
+    }
+
+    makeStyleFilter()
+    //===============
+    {
+        return this.#makeStyleFilter(this.#filter)
+    }
+
+    match(properties)
+    //===============
+    {
+        return this.#match(properties, this.#filter)
+    }
+
+    narrow(filter)
+    //============
+    {
+        if (this.#filter === true) {
+            this.#filter = filter
+        } else if (this.#filter !== false) {
+            const copiedFilter = Object.assign({}, filter)
+            this.#filter = { "AND": [this.#filter, copiedFilter] }
+        }
+    }
+
+    setFilter(filter)
+    //===============
+    {
+        if (filter.constructor !== Object) {
+            this.#filter = filter
+        } else {
+            this.#filter = Object.assign({}, filter)
+        }
+    }
+
+    #makeStyleFilter(filter)
+    //======================
+    {
+        if (filter.constructor !== Object) {
+            return !!filter
+        }
+        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 (Array.isArray(filterExpr)) {
+                    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 {
+                    styleFilter.push(!filterExpr)
+                }
+            } else {
+                if (Array.isArray(expr)) {
+                    styleFilter.push('any', ...expr.map(e => ['==', key, e]))
+                } else {
+                    styleFilter.push('==', key, expr)
+                }
+            }
+        }
+        return styleFilter
+    }
+
+    #match(properties, filter)
+    //========================
+    {
+        if (filter.constructor !== Object) {
+            return !!filter
+        }
+        for (const [key, expr] of Object.entries(filter)) {
+            let matched = true
+            if (key === 'AND' || key === 'OR') {
+                if (Array.isArray(expr) && expr.length >= 2) {
+                    const matches = expr.map(e => this.#match(properties, e))
+                    matched = (key === 'AND') ? matches.reduce((result, match) => result && match, true)
+                                              : matches.reduce((result, match) => result || match, false)
+                } else {
+                    console.warn(`makeFilter: Invalid ${key} operands: ${expr}`)
+                }
+            } else if (key === 'HAS') {
+                matched = (expr in properties)
+            } else if (key === 'NOT') {
+                matched = !this.#match(properties, expr)
+            } else if (key in properties) {
+                const value = properties[key]
+                if (Array.isArray(value)) {
+                    if (Array.isArray(expr)) {
+                        matched = !(new Set(value).isDisjointFrom(new Set(expr)))
+                    } else {
+                        matched = value.includes(expr)
+                    }
+                } else if (Array.isArray(expr)) {
+                    matched = expr.includes(value)
+                } else {
+                    matched = (value === expr)
+                }
+            }
+            if (!matched) {
+                return false
+            }
+        }
+        return true
+    }
+}
+
+//==============================================================================
+
+const testProperties = {
+    prop: 1,
+    prop1: 5,
+    prop2: 11,
+}
+
+function testFilter(filter)
+//=========================
+{
+    const featureFilter = new PropertiesFilter(filter)
+    console.log(filter, '--->', featureFilter.makeStyleFilter(), featureFilter.match(testProperties))
+}
+
+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] ] ]
+        ]
+    */
+
+    console.log('test properties', testProperties)
+
+    testFilter({
+        "HAS": "prop"
+    })
+
+    testFilter({
+        "prop": 1
+    })
+
+    testFilter({
+        "NOT": {
+            "prop": 1
+        }
+    })
+
+    testFilter({
+        "prop": [1, 2]
+    })
+
+    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,13 +22,14 @@ limitations under the License.
 
 //==============================================================================
 
-import {FeatureFilter} from './filter'
-
 import {PATHWAYS_LAYER} from '../pathways.js';
 import * as utils from '../utils.js';
 
 import * as style from './styling.js';
 
+import {Paths3DLayer} from './paths3d'
+import {PropertiesFilter} from './filter'
+
 const FEATURES_LAYER = 'features';
 const RASTER_LAYERS_NAME = 'Background image layer';
 const RASTER_LAYERS_ID = 'background-image-layer';
@@ -46,11 +47,6 @@ class MapStylingLayers
         this.__layers = [];
         this.__layerOptions = options;
         this.__separateLayers = flatmap.options.separateLayers;
-
-        const f = new FeatureFilter({
-            "HAS": "prop"
-        })
-        console.log(f.makeStyleFilter())
     }
 
     get id()
@@ -71,6 +67,12 @@ class MapStylingLayers
         return this.__active;
     }
 
+    get map()
+    //=======
+    {
+        return this.__map
+    }
+
     addLayer(styleLayer, options)
     //===========================
     {
@@ -113,6 +115,8 @@ class MapStylingLayers
 
 class MapFeatureLayers extends MapStylingLayers
 {
+    #pathLayers = []
+
     constructor(flatmap, layer, options)
     {
         super(flatmap, layer, options);
@@ -144,35 +148,46 @@ class MapFeatureLayers extends MapStylingLayers
         this.setPaint(this.__layerOptions);
     }
 
-    __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER)
-    //=====================================================
+    __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER, path2dLayer=false)
+    //========================================================================
     {
         const styleLayer = new styleClass(`${this.__id}_${sourceLayer}`,
-                                          this.vectorSourceId(sourceLayer));
-        this.addLayer(styleLayer, this.__layerOptions);
+                                          this.vectorSourceId(sourceLayer))
+        this.addLayer(styleLayer, this.__layerOptions)
+        if (path2dLayer) {
+            this.#pathLayers.push(styleLayer)
+        }
     }
 
     __addPathwayStyleLayers()
     //=======================
     {
-        const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER);
+        const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER)
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
                 .includes(pathwaysVectorSource)) {
-            this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER, true)
 
-            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER)
+            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER)
 
-            this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER, true)
 
-            this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER, true)
 
-            this.__addStyleLayer(style.PathHighlightLayer, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.PathDashHighlightLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathHighlightLayer, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.PathDashHighlightLayer, PATHWAYS_LAYER, true)
+        }
+    }
+
+    enablePaths2dLayer(visible)
+    //=========================
+    {
+        for (const layer of this.#pathLayers) {
+            this.map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none')
         }
     }
 
@@ -250,11 +265,14 @@ class MapRasterLayers extends MapStylingLayers
 
 export class LayerManager
 {
-    constructor(flatmap)
+    #featureLayers = new Map()
+    #paths3dLayer = null
+    #rasterLayer = null
+
+    constructor(flatmap, ui)
     {
         this.__flatmap = flatmap;
         this.__map = flatmap.map;
-        this.__mapLayers = new Map;
         this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
             colour: true,
             outline: true,
@@ -273,28 +291,37 @@ export class LayerManager
 
             // Image layers are below all feature layers
             const bodyLayer = flatmap.layers[0];
-            const rasterLayers = new MapRasterLayers(this.__flatmap,
+            this.#rasterLayer = new MapRasterLayers(this.__flatmap,
                                                      this.__layerOptions,
                                                      bodyLayer.id);  // body layer if not FC??
             for (const layer of flatmap.layers) {
-                rasterLayers.addLayer(layer);
+                this.#rasterLayer.addLayer(layer);
             }
-            this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
         } else {
             this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
-            this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
-                                                                layer,
-                                                                this.__layerOptions));
+            this.#featureLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                                   layer,
+                                                                   this.__layerOptions));
         }
+
+        // Support 3D path view
+        this.#paths3dLayer = new Paths3DLayer(flatmap, ui)
     }
 
     get layers()
     //==========
     {
-        const layers = [];
-        for (const mapLayer of this.__mapLayers.values()) {
+        const layers = []
+        if (this.#rasterLayer) {
+            layers.push({
+                id: this.#rasterLayer.id,
+                description: this.#rasterLayer.description,
+                enabled: this.#rasterLayer.active
+            })
+        }
+        for (const mapLayer of this.#featureLayers.values()) {
             layers.push({
                 id: mapLayer.id,
                 description: mapLayer.description,
@@ -313,26 +340,63 @@ export class LayerManager
     activate(layerId, enable=true)
     //============================
     {
-        const layer = this.__mapLayers.get(layerId);
-        if (layer !== undefined) {
-            layer.activate(enable);
-            if (layer.id === RASTER_LAYERS_ID) {
-                this.__layerOptions.activeRasterLayer = enable;
-                for (const mapLayer of this.__mapLayers.values()) {
-                    if (mapLayer.id !== RASTER_LAYERS_ID) {
-                        mapLayer.setPaint(this.__layerOptions);
-                    }
+        if (layerId === RASTER_LAYERS_ID) {
+            if (this.#rasterLayer) {
+                this.#rasterLayer.activate(enable)
+                this.__layerOptions.activeRasterLayer = enable
+                for (const mapLayer of this.#featureLayers.values()) {
+                    mapLayer.setPaint(this.__layerOptions)
                 }
             }
+        } else {
+            const layer = this.#featureLayers.get(layerId)
+            if (layer) {
+                layer.activate(enable)
+            }
+        }
+    }
+
+    featuresAtPoint(point)
+    //====================
+    {
+        let features = []
+        if (this.#paths3dLayer) {
+            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
+        }
+        if (features.length === 0) {
+            features = this.__map.queryRenderedFeatures(point)
+        }
+        return features
+    }
+
+    removeFeatureState(feature, key)
+    //==============================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.removeFeatureState(feature.id, key)
+        }
+    }
+
+    setFeatureState(feature, state)
+    //=============================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setFeatureState(feature.id, state)
         }
     }
 
     setPaint(options={})
     //==================
     {
-        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
-        for (const mapLayer of this.__mapLayers.values()) {
-            mapLayer.setPaint(this.__layerOptions);
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions)
+        if (this.#rasterLayer) {
+            this.#rasterLayer.setPaint(this.__layerOptions)
+        }
+        for (const mapLayer of this.#featureLayers.values()) {
+            mapLayer.setPaint(this.__layerOptions)
+        }
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setPaint(options)
         }
     }
 
@@ -340,9 +404,32 @@ export class LayerManager
     //===================
     {
         this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
-        for (const mapLayer of this.__mapLayers.values()) {
+        for (const mapLayer of this.#featureLayers.values()) {
             mapLayer.setFilter(this.__layerOptions);
         }
+        if (this.#paths3dLayer) {
+            const sckanState = options.sckan || 'valid'
+            const sckanFilter = (sckanState == 'none') ? {NOT: {HAS: 'sckan'}} :
+                                (sckanState == 'valid') ? {sckan: true} :
+                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :
+                                true
+            const featureFilter = new PropertiesFilter(sckanFilter)
+            if ('taxons' in options) {
+                featureFilter.narrow({taxons: options.taxons})
+            }
+            this.#paths3dLayer.setFilter(featureFilter)
+        }
+    }
+
+    set3dMode(enable=true)
+    //====================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.enable(enable)
+            for (const mapLayer of this.#featureLayers.values()) {
+                mapLayer.enablePaths2dLayer(!enable)
+            }
+        }
     }
 
     enableSckanPaths(sckanState, enable=true)