@abi-software/flatmap-viewer 2.5.0-a.1 → 2.5.1

package/src/layers/paths3d.js

@@ -0,0 +1,335 @@
+/******************************************************************************
+
+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 {ArcLayer} from '@deck.gl/layers'
+import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox'
+import {Model, Geometry} from '@luma.gl/core'
+import GL from '@luma.gl/constants'
+
+//==============================================================================
+
+import {pathColourArray} from '../pathways'
+
+
+//==============================================================================
+
+const transparencyCheck = '|| length(vColor) == 0.0'
+
+class ArcMapLayer extends ArcLayer
+{
+    static layerName = 'ArcMapLayer'
+
+    #dirty = false
+    #pathData
+
+    constructor(...args)
+    {
+        super(...args)
+        this.#pathData = new Map([...this.props.data].map(ann => [+ann.featureId, ann]))
+        this.#pathData.forEach(ann => delete ann['hidden'])
+    }
+
+    get featureIds()
+    //==============
+    {
+        return [...this.#pathData.keys()]
+    }
+
+    getShaders()
+    //==========
+    {
+        const shaders = super.getShaders()
+        shaders.fs = `#version 300 es\n${shaders.fs}`
+                     .replace('isValid == 0.0', `isValid == 0.0 ${transparencyCheck}`)
+        shaders.vs = `#version 300 es\n${shaders.vs}`
+        return shaders
+    }
+    setDataProperty(featureId, key, enabled)
+    //======================================
+    {
+        const properties = this.#pathData.get(+featureId)
+        if (properties) {
+            if (!(key in properties) || properties[key] !== enabled) {
+                properties[key] = enabled
+                this.#dirty = true
+            }
+        }
+    }
+
+    redraw(force=false)
+    //=================
+    {
+        if (force || this.#dirty) {
+            this.internalState.changeFlags.dataChanged = true
+            this.setNeedsUpdate()
+            this.#dirty = false
+        }
+    }
+}
+
+//==============================================================================
+
+const makeDashedTriangles = `  float alpha = floor(fract(float(gl_VertexID)/12.0)+0.5);
+  if (vColor.a != 0.0) vColor.a *= alpha;
+`
+
+class ArcDashedLayer extends ArcMapLayer
+{
+    static layerName = 'ArcDashedLayer'
+
+    constructor(...args)
+    {
+        super(...args)
+    }
+
+    getShaders()
+    //==========
+    {
+        const shaders = super.getShaders()
+        shaders.vs = shaders.vs.replace('DECKGL_FILTER_COLOR(', `${makeDashedTriangles}\n  DECKGL_FILTER_COLOR(`)
+        return shaders
+    }
+
+    _getModel(gl)
+    //===========
+    {
+        const {numSegments} = this.props
+        let positions = []
+        for (let i = 0; i < numSegments; i++) {
+            positions = positions.concat([i,  1, 0, i,  -1, 0, i+1,  1, 0,
+                                          i, -1, 0, i+1, 1, 0, i+1, -1, 0])
+        }
+        const model = new Model(gl, {
+            ...this.getShaders(),
+            id: this.props.id,
+            geometry: new Geometry({
+                drawMode: GL.TRIANGLES,
+                attributes: {
+                    positions: new Float32Array(positions)
+                }
+            }),
+            isInstanced: true,
+        })
+        model.setUniforms({numSegments: numSegments})
+        return model
+    }
+}
+
+//==============================================================================
+
+export class Paths3DLayer
+{
+    #arcLayers = new Map()
+    #deckOverlay = null
+    #dimmed = false
+    #enabled = false
+    #featureToLayer = new Map()
+    #knownTypes = []
+    #map
+    #pathData
+    #pathManager
+    #pathStyles
+    #ui
+
+    constructor(flatmap, ui)
+    {
+        this.#ui = ui
+        this.#map = flatmap.map
+        this.#pathManager = ui.pathManager
+        this.#pathManager.addWatcher(this.#pathStateChanged.bind(this))
+        this.#pathData = new Map([...flatmap.annotations.values()]
+                                 .filter(ann => ann['tile-layer'] === 'pathways'
+                                             && ann['geometry'] === 'LineString'
+                                             && 'type' in ann && ann['type'].startsWith('line')
+                                             && 'kind' in ann
+                                             && 'pathStartPosition' in ann
+                                             && 'pathEndPosition' in ann)
+                                 .map(ann => [ann.featureId, ann]))
+        this.#pathStyles = new Map(this.#pathManager.pathStyles().map(s => [s.type, s]))
+        this.#knownTypes = [...this.#pathStyles.keys()].filter(t => t !== 'other')
+    }
+
+    enable(enable=true)
+    //=================
+    {
+        if (enable && !this.#enabled) {
+            this.#setupDeckOverlay()
+            this.#map.addControl(this.#deckOverlay)
+        } else if (!enable && this.#enabled) {
+            if (this.#deckOverlay) {
+                this.#map.removeControl(this.#deckOverlay)
+                this.#deckOverlay.finalize()
+                this.#deckOverlay = null
+            }
+            this.#featureToLayer = new Map()
+        }
+        this.#enabled = enable
+    }
+
+    queryFeaturesAtPoint(point)
+    //=========================
+    {
+        if (this.#deckOverlay) {
+            return this.#deckOverlay
+                       .pickMultipleObjects(point)
+                       .map(o => this.#makeMapFeature(o.object))
+        }
+        return []
+    }
+
+    redraw(force=false)
+    //=================
+    {
+        for (const layer of this.#arcLayers.values()) {
+            layer.redraw(force)
+        }
+    }
+
+    removeFeatureState(featureId, key)
+    //================================
+    {
+        const layer = this.#featureToLayer.get(+featureId)
+        if (layer) {
+            layer.setDataProperty(featureId, key, false)
+            layer.redraw()
+        }
+    }
+
+    setFeatureState(featureId, state)
+    //===============================
+    {
+        const layer = this.#featureToLayer.get(+featureId)
+        if (layer) {
+            for (const [key, value] of Object.entries(state)) {
+                layer.setDataProperty(featureId, key, value)
+            }
+            layer.redraw()
+        }
+    }
+
+    setPaint(options)
+    //===============
+    {
+        const dimmed = options.dimmed || false
+        if (this.#dimmed !== dimmed) {
+            this.#dimmed = dimmed
+            this.redraw(true)
+        }
+    }
+
+    #addArcLayer(pathType)
+    //====================
+    {
+        const layer = this.#pathStyles.get(pathType).dashed
+                        ? new ArcDashedLayer(this.#layerOptions(pathType))
+                        : new ArcMapLayer(this.#layerOptions(pathType))
+        layer.featureIds.forEach(id => this.#featureToLayer.set(+id, layer))
+        this.#arcLayers.set(pathType, layer)
+    }
+
+    #removeArcLayer(pathType)
+    //=======================
+    {
+        const layer = this.#arcLayers.get(pathType)
+        if (layer) {
+            layer.featureIds.forEach(id => this.#featureToLayer.delete(+id))
+            this.#arcLayers.delete(pathType)
+        }
+    }
+
+    #pathColour(properties)
+    //=====================
+    {
+        if (properties.hidden) {
+            return [0, 0, 0, 0]
+        }
+        return pathColourArray(properties.kind,
+                               properties.active || properties.selected ? 255
+                                                                        : this.#dimmed ? 20 : 160)
+    }
+
+    #pathStateChanged(changes={})
+    //===========================
+    {
+        if (this.#deckOverlay) {
+            if ('pathType' in changes) {
+                const pathType = changes.pathType
+                const enabled = this.#pathManager.pathTypeEnabled(pathType)
+                if (enabled && !this.#arcLayers.has(pathType)) {
+                    this.#addArcLayer(pathType)
+                } else if (!enabled && this.#arcLayers.has(pathType)) {
+                    this.#removeArcLayer(pathType)
+                }
+                this.#deckOverlay.setProps({
+                    layers:  [...this.#arcLayers.values()]
+                })
+            }
+        }
+    }
+
+
+    #layerOptions(pathType)
+    //=====================
+    {
+        const pathData = [...this.#pathData.values()]
+                                 .filter(ann => (this.#knownTypes.includes(ann.kind) && (ann.kind === pathType)
+                                             || !this.#knownTypes.includes(ann.kind) && (pathType === 'other')))
+        return {
+            id: `arc-${pathType}`,
+            data: pathData,
+            pickable: true,
+            autoHighlight: true,
+            numSegments: 400,
+            // Styles
+            getSourcePosition: f => f.pathStartPosition,
+            getTargetPosition: f => f.pathEndPosition,
+            getSourceColor: this.#pathColour.bind(this),
+            getTargetColor: this.#pathColour.bind(this),
+            highlightColor: o => this.#pathColour(o.object),
+            opacity: 1.0,
+            getWidth: 3,
+        }
+    }
+
+    #makeMapFeature(pickedObject)
+    //===========================
+    {
+        // Mock up a map vector feature
+        return {
+            id: pickedObject.featureId,
+            source: 'vector-tiles',
+            sourceLayer: `${pickedObject.layer}_${pickedObject['tile-layer']}`,
+            properties: pickedObject,
+            arc3dLayer: true
+        }
+    }
+
+    #setupDeckOverlay()
+    //=================
+    {
+        [...this.#pathStyles.values()].filter(style => this.#pathManager.pathTypeEnabled(style.type))
+                                      .forEach(style => this.#addArcLayer(style.type))
+        this.#deckOverlay = new DeckOverlay({
+            layers: [...this.#arcLayers.values()],
+        })
+    }
+}
+
+//==============================================================================

package/src/{styling.js → layers/styling.js}

@@ -26,8 +26,8 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 //==============================================================================
 
-import {UNCLASSIFIED_TAXON_ID} from './flatmap-viewer';
-import {PATH_STYLE_RULES} from './pathways';
+import {UNCLASSIFIED_TAXON_ID} from '../flatmap-viewer';
+import {PATH_STYLE_RULES} from '../pathways';
 
 //==============================================================================
 

package/src/main.js

@@ -62,6 +62,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showId: true,
         showPosition: false,
         standalone: true,
+        annotator: true,
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/pathways.js

@@ -20,6 +20,8 @@ limitations under the License.
 
 'use strict';
 
+import {colord} from 'colord'
+
 //==============================================================================
 
 import { reverseMap } from './utils';
@@ -49,15 +51,18 @@ const PATH_TYPES = [
     { type: "error", label: "Paths with errors or warnings", colour: "#FF0", enabled: false}
 ];
 
+const PathTypeMap = new Map(PATH_TYPES.map(t => [t.type, t]))
+
 export const PATH_STYLE_RULES =
     PATH_TYPES.flatMap(pathType => [['==', ['get', 'kind'], pathType.type], pathType.colour]);
 
-export const PATH_COLOURS =
-    Object.fromEntries(PATH_TYPES.flatMap(pathType => [[pathType.type, pathType.colour]]));
-
-export function pathColour(pathType)
+export function pathColourArray(pathType, alpha=255)
+//==================================================
 {
-    return PATH_COLOURS[pathType] || '#FF0';
+    const rgb = colord(PathTypeMap.has(pathType)
+                        ? PathTypeMap.get(pathType).colour
+                        : '#FF0').toRgb()
+    return [rgb.r, rgb.g, rgb.b, alpha]
 }
 
 //==============================================================================
@@ -162,6 +167,21 @@ export class PathManager
         }
     }
 
+    pathStyles()
+    //==========
+    {
+        const styles = []
+        for (const mapType of this.pathTypes()) {
+            const defn = PathTypeMap.get(mapType.type)
+            styles.push({
+                type: defn.type,
+                colour: defn.colour,
+                dashed: defn.dashed || false
+            })
+        }
+        return styles
+    }
+
     pathTypes()
     //=========
     {
@@ -299,6 +319,7 @@ export class PathManager
     enablePathsBySystem(system, enable, force=false)
     //==============================================
     {
+        let changed = false;
         for (const pathId of system.pathIds) {
             const path = this.__paths[pathId];
             if (this.__pathtypeEnabled[path.pathType]
@@ -311,6 +332,7 @@ export class PathManager
                 for (const featureId of featureIds) {
                     this.__ui.enableFeature(featureId, enable, force);
                 }
+                changed = true
             }
             path.systemCount += (enable ? 1 : -1);
             if (path.systemCount < 0) {
@@ -318,6 +340,9 @@ export class PathManager
             }
             // TODO? Show connectors and parent components of these paths??
         }
+        if (changed) {
+            this.#notifyWatchers()
+        }
     }
 
     enablePathsByType(pathType, enable, force=false)
@@ -330,9 +355,16 @@ export class PathManager
                 this.__ui.enableFeature(featureId, enable, force);
             }
             this.__pathtypeEnabled[pathType] = enable;
+            this.#notifyWatchers({pathType})
         }
     }
 
+    pathTypeEnabled(pathType)
+    //=======================
+    {
+        return this.__pathtypeEnabled[pathType] || false
+    }
+
     nodePathModels(nodeId)
     //====================
     {
@@ -360,6 +392,31 @@ export class PathManager
         }
         return nodeIds;
     }
+
+    #lastWatcherId = 0
+    #watcherCallbacks = new Map()
+
+    addWatcher(callback)
+    //==================
+    {
+        this.#lastWatcherId += 1
+        this.#watcherCallbacks.set(this.#lastWatcherId, callback)
+        return this.#lastWatcherId
+    }
+
+    removeWatcher(watcherId)
+    //======================
+    {
+        this.#watcherCallbacks.delete(watcherId)
+    }
+
+    #notifyWatchers(changes={})
+    //=========================
+    {
+        for (const callback of this.#watcherCallbacks.values()) {
+            callback(changes)
+        }
+    }
 }
 
 //==============================================================================