@abi-software/flatmap-viewer 2.5.0-a.2 → 2.5.2

package/src/layers/paths3d.js

@@ -18,66 +18,133 @@ limitations under the License.
 
 ******************************************************************************/
 
-import {colord} from 'colord'
 import {ArcLayer} from '@deck.gl/layers'
 import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox'
-import {PathStyleExtension} from '@deck.gl/extensions'
+import {Model, Geometry} from '@luma.gl/core'
+import GL from '@luma.gl/constants'
 
 //==============================================================================
 
-import {pathColour} from '../pathways'
+import {pathColourArray} from '../pathways'
 
-// Should this be in `pathways.js` ??
-function pathColourRGB(pathType, alpha=255)
-//=========================================
+//==============================================================================
+
+const transparencyCheck = '|| length(vColor) == 0.0'
+
+class ArcMapLayer extends ArcLayer
 {
-    const rgb = colord(pathColour(pathType)).toRgb()
-    return [rgb.r, rgb.g, rgb.b, alpha]
+    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
+        }
+    }
 }
 
 //==============================================================================
 
- /*
-    TODO:
-
-    *   Dashed paths
-    *   Control by SCKAN status
-    *   Control by taxon visibility
-    *   Control by visible layer
+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'
 
-    Also see https://alasarr.github.io/deck.gl/docs/api-reference/core/layer#updatetriggers
+    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)
+    //===========
     {
-        "featureId": 37,
-        "id": "ilxtr_neuron-type-keast-10",
-        "kind": "sensory",
-        "label": "L6-S1 sensory neuron innervating bladder",
-        "models": "ilxtr:neuron-type-keast-10",
-        "sckan": true,
-        "source": "https://apinatomy.org/uris/models/keast-bladder",
-        "taxons": ["NCBITaxon:10116"],
-        "tile-layer": "pathways",
-        "type": "line",
-        "bounds": [1.5454426659162825, -1.6254174813389017, 1.7478459571498208, -1.3632864333949712],
-        "markerPosition": [1.6466443115330516, -1.4943519573669364],
-        "geometry": "LineString",
-        "layer": "neural-routes",
-        "pathStartPosition": [1.7478459571498208, -1.3632864333949712],
-        "pathEndPosition": [1.5454426659162825, -1.6254174813389017]
+        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)
@@ -86,85 +153,182 @@ export class Paths3DLayer
         this.#map = flatmap.map
         this.#pathManager = ui.pathManager
         this.#pathManager.addWatcher(this.#pathStateChanged.bind(this))
-        this.#pathData = [...flatmap.annotations.values()]
-                 .filter(ann => ann['tile-layer'] === 'pathways'
-                             && ann['geometry'] === 'LineString'
-                             && 'type' in ann && ann['type'].startsWith('line')
-                             && 'kind' in ann // && !ann['kind'].includes('arterial') && !ann['kind'].includes('venous')
-                             && 'pathStartPosition' in ann
-                             && 'pathEndPosition' in ann)
+        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.#setDeckOverlay()
+            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
     }
 
-    #pathStateChanged()
-    //=================
+    queryFeaturesAtPoint(point)
+    //=========================
     {
         if (this.#deckOverlay) {
-            this.#map.removeControl(this.#deckOverlay)
-            this.#setDeckOverlay()
-            this.#map.addControl(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)
         }
     }
 
-    #setDeckOverlay()
+    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)
     //===============
     {
-        this.#deckOverlay = new DeckOverlay({
-            layers: [
-                // Need to have two layers, one with dashed lines, one without
-                //
-                // Better, one layer per pathType and set/clear layer.visible...
-                //
-                new ArcLayer({
-                    id: 'arcs',
-                    data: this.#pathData
-                              .filter(f => this.#pathManager.pathTypeEnabled(f.kind)),
-                    pickable: true,
-                    autoHighlight: true,
-                    numSegments: 100,
-                    onHover: (i, e) => {
-                        //console.log('hover', i, e)
-                        if (i.object) {
-                            const lineFeatureId = +i.object.featureId
-                            this.#ui.activateFeature(this.#ui.mapFeature(lineFeatureId))
-                            for (const featureId of this.#pathManager.lineFeatureIds([lineFeatureId])) {
-                                if (+featureId !== lineFeatureId) {
-                                    this.#ui.activateFeature(this.#ui.mapFeature(featureId))
-                                }
-                            }
-                        }
-                    },
-                    onClick: (i, e) => {
-                        console.log('click', i, e)
-                    },
-                    // Styles
-                    getSourcePosition: f => f.pathStartPosition,
-                    getTargetPosition: f => f.pathEndPosition,
-                    getSourceColor: f => pathColourRGB(f.kind, 160),
-                    getTargetColor: f => pathColourRGB(f.kind, 160),
-                    highlightColor: o => pathColourRGB(o.object.kind),
-                    getWidth: 3,
-                    extensions: [new PathStyleExtension({dash: true})],
-                    getDashArray: [3, 2],
-                    dashJustified: true,
-                    dashGapPickable: true,
+        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()]
                 })
-            ],
-            getTooltip: ({object}) => object && object.label
+            }
+        }
+    }
+
+
+    #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/main.js

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -27,6 +27,52 @@ export { MapManager };
 
 //==============================================================================
 
+class DrawControl
+{
+    constructor(flatmap)
+    {
+        this._flatmap = flatmap
+        this._lastEvent = null
+        this._idField = document.getElementById('drawing-id')
+
+        this._okBtn = document.getElementById('drawing-ok')
+        if (this._okBtn) {
+            this._okBtn.addEventListener('click', e => {
+                if (this._lastEvent) {
+                    const feature = this._flatmap.refreshAnnotationFeatureGeometry(this._lastEvent.feature)
+                    this._flatmap.commitAnnotationEvent(this._lastEvent)
+                    this._idField.innerText = ''
+                    this._lastEvent = null
+                    // Send `feature`, along with user comments, to the annotation service
+                }
+            })
+        }
+
+        this._cancelBtn = document.getElementById('drawing-cancel')
+        if (this._cancelBtn) {
+            this._cancelBtn.addEventListener('click', e => {
+                if (this._lastEvent) {
+                    this._flatmap.rollbackAnnotationEvent(this._lastEvent)
+                    this._idField.innerText = ''
+                    this._lastEvent = null
+                }
+            })
+        }
+    }
+
+    handleEvent(event)
+    //================
+    {
+        console.log(event)
+        if (this._idField) {
+            this._idField.innerText = `Annotation ${event.type}, Id: ${event.feature.id}`
+            this._lastEvent = event
+        }
+    }
+}
+
+//==============================================================================
+
 export async function standaloneViewer(map_endpoint=null, options={})
 {
     const requestUrl = new URL(window.location.href);
@@ -52,6 +98,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
     });
 
     let currentMap = null;
+    let drawControl = null;
     let defaultBackground = localStorage.getItem('flatmap-background-colour') || 'black';
 
     const mapOptions = Object.assign({
@@ -62,6 +109,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showId: true,
         showPosition: false,
         standalone: true,
+        annotator: true,
     }, options);
 
     function loadMap(id, taxon, sex)
@@ -89,6 +137,8 @@ export async function standaloneViewer(map_endpoint=null, options={})
         mapManager.loadMap(id, 'map-canvas', (eventType, ...args) => {
                 if (args[0].type === 'control' && args[0].control === 'background') {
                     mapOptions.background = args[0].value;
+                } else if (eventType === 'annotation') {
+                    drawControl.handleEvent(...args)
                 }
             }, mapOptions)
             .then(map => {
@@ -98,6 +148,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
                 map.addMarker('UBERON:0001155'); // Colon
                 map.addMarker('UBERON:0001255'); // Bladder
                 currentMap = map;
+                drawControl = new DrawControl(map)
             })
             .catch(error => {
                 console.log(error);
@@ -179,3 +230,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
 
     loadMap(mapId, mapTaxon, mapSex);
 }
+
+//==============================================================================
+

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()
     //=========
     {
@@ -335,7 +355,7 @@ export class PathManager
                 this.__ui.enableFeature(featureId, enable, force);
             }
             this.__pathtypeEnabled[pathType] = enable;
-            this.#notifyWatchers()
+            this.#notifyWatchers({pathType})
         }
     }
 
@@ -390,11 +410,11 @@ export class PathManager
         this.#watcherCallbacks.delete(watcherId)
     }
 
-    #notifyWatchers()
-    //===============
+    #notifyWatchers(changes={})
+    //=========================
     {
         for (const callback of this.#watcherCallbacks.values()) {
-            callback()
+            callback(changes)
         }
     }
 }