@abi-software/flatmap-viewer 2.6.2 → 2.7.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/lib/index.ts

@@ -0,0 +1,9 @@
+//==============================================================================
+
+import {FlatMap, MapManager} from '../src/flatmap-viewer'
+
+//==============================================================================
+
+export {FlatMap, MapManager}
+
+//==============================================================================

package/package.json

@@ -1,26 +1,28 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.6.2",
+  "version": "2.7.0-a.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AnatomicMaps/flatmap-viewer.git"
   },
+  "type": "module",
   "main": "src/main.js",
   "files": [
+    "lib",
     "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 --p ./tsconfig-build.json && 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.35",
     "@deck.gl/layers": "^8.9.35",
     "@deck.gl/mapbox": "^8.9.35",
@@ -33,28 +35,16 @@
     "colord": "^2.9.3",
     "core-js-pure": "^3.36.1",
     "html-es6cape": "^2.0.2",
-    "maplibre-gl": ">=3.6.0",
+    "maplibre-gl": ">=4.1.0",
     "mathjax-full": "^3.2.2",
     "minisearch": "^2.2.1",
     "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",
+    "@types/node": "^20.12.7",
     "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",
+    "vite-plugin-dts": "^3.8.1"
   }
 }

package/src/controls/annotation.js

@@ -292,7 +292,7 @@ export class AnnotationDrawControl
     }
 
     changeMode(type)
-    //===============
+    //==============
     {
         // Change the mode directly without listening to modes callback
         this.__draw.changeMode(type.mode, type.options)

package/src/flatmap-viewer.js

@@ -33,12 +33,14 @@ import '../static/css/flatmap-viewer.css';
 
 //==============================================================================
 
-import {MapServer, loadJSON} from './mapserver.js';
+import {MapServer} from './mapserver.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
 import {APINATOMY_PATH_PREFIX} from './pathways';
 
+import {loadClusterIcons} from './layers/cluster'
+
 import * as images from './images.js';
 import * as utils from './utils.js';
 
@@ -61,7 +63,7 @@ export const UNCLASSIFIED_TAXON_ID = 'NCBITaxon:2787823';   // unclassified entr
 * Maps are not created directly but instead are created and loaded by
 * :meth:`LoadMap` of :class:`MapManager`.
 */
-class FlatMap
+export class FlatMap
 {
     constructor(container, mapBaseUrl, mapDescription, resolve)
     {
@@ -204,6 +206,9 @@ class FlatMap
             await this.addImage(image.id, image.url, '', image.options);
         }
 
+        // Load icons used for clustered markers
+        await loadClusterIcons(this._map)
+
         // Layers have now loaded so finish setting up
         this._userInteractions = new UserInteractions(this);
     }
@@ -966,6 +971,21 @@ class FlatMap
         return -1;
     }
 
+    addMarkers(anatomicalIds,  options={})
+    //====================================
+    {
+        const markerIds = []
+        for (const anatomicalId of anatomicalIds) {
+            if (this._userInteractions !== null) {
+                markerIds.push(this._userInteractions.addMarker(anatomicalId, options))
+            } else {
+                markerIds.push(-1)
+            }
+        }
+        return markerIds
+    }
+
+
     /**
      * Remove a marker from the map.
      *
@@ -975,7 +995,7 @@ class FlatMap
     removeMarker(markerId)
     //====================
     {
-        if (this._userInteractions !== null) {
+        if (markerId > -1 && this._userInteractions !== null) {
             this._userInteractions.removeMarker(markerId);
         }
     }
@@ -1046,19 +1066,17 @@ class FlatMap
             'alert',
             'biological-sex'
         ];
-        const jsonProperties = [
-            'hyperlinks'
-        ];
         for (const property of exportedProperties) {
             if (property in properties) {
                 const value = properties[property];
                 if (value !== undefined) {
-                    if (jsonProperties.includes(property)) {
-                        data[property] = JSON.parse(properties[property])
+                    if ((Array.isArray(value) && value.length)
+                     || (value.constructor === Object && Object.keys(value).length)) {
+                        data[property] = value
                     } else if (property === 'featureId') {
-                        data[property] = +properties[property];  // Ensure numeric
+                        data[property] = +value;  // Ensure numeric
                     } else {
-                        data[property] = properties[property];
+                        data[property] = value;
                     }
                 }
             }

package/src/interactions.js

@@ -1373,11 +1373,13 @@ export class UserInteractions
                 }
                 const markerPosition = this.__markerPosition(featureId, annotation);
                 if (options.cluster && this._layerManager) {
-                    this._layerManager.addMarkers([markerPosition])
+                    this._layerManager.addMarker(markerId, markerPosition, annotation)
                 } else {
                     const marker = new maplibregl.Marker(markerOptions)
                                                  .setLngLat(markerPosition)
                                                  .addTo(this._map);
+
+
                     markerElement.addEventListener('mouseenter',
                         this.markerMouseEvent_.bind(this, marker, anatomicalId));
                     markerElement.addEventListener('mousemove',
@@ -1441,28 +1443,46 @@ export class UserInteractions
         return anatomicalIds;
     }
 
+    // Separate out MapLibre specific code and result of mouse event (tooltip,
+    // client message, etc) so clustering code can also use this to process
+    // events.
+
     markerMouseEvent_(marker, anatomicalId, event)
     //============================================
     {
         // No tooltip when context menu is open
         if (this._modal
          || (this.__activeMarker !== null && event.type === 'mouseleave')) {
-            return;
+            return
         }
 
         if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
-            this.__activeMarker = marker;
+            this.__activeMarker = marker
 
-            // Remove any existing tooltips
-            this.removeTooltip_();
-            marker.setPopup(null);
+            // Remove any tooltip
+            marker.setPopup(null)
 
             // Reset cursor
             marker.getElement().style.cursor = 'default';
 
+
+            const markerId = this.__markerIdByMarker.get(marker)
+            const annotation = this.__annotationByMarkerId.get(markerId)
+
+            this.markerEvent_(event, markerId, marker.getLngLat(),
+                              anatomicalId, annotation)
+        }
+    }
+
+    markerEvent_(event, markerId, markerPosition, anatomicalId, annotation)
+    //=====================================================================
+    {
+        if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
+
+            // Remove any existing tooltips
+            this.removeTooltip_();
+
             if (['mouseenter', 'click'].includes(event.type)) {
-                const markerId = this.__markerIdByMarker.get(marker);
-                const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
                 const feature = this.mapFeature(annotation.featureId);
                 if (feature !== undefined) {
@@ -1476,13 +1496,12 @@ export class UserInteractions
                 }
                 // Show tooltip
                 const html = this.tooltipHtml_(annotation, true);
-                this.__showToolTip(html, marker.getLngLat());
+                this.__showToolTip(html, markerPosition);
 
                 // Send marker event message
                 this._flatmap.markerEvent(event.type, markerId, anatomicalId);
             }
         }
-        event.stopPropagation();
     }
 
     __clearActiveMarker()
@@ -1531,7 +1550,7 @@ export class UserInteractions
             .setLngLat(location)
             .setDOMContent(element);
 
-        // Set the merker tooltip and show it
+        // Set the marker tooltip and show it
         marker.setPopup(this._tooltip);
         marker.togglePopup();
 

package/src/layers/cluster.js

@@ -0,0 +1,191 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023 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 {SvgManager, SvgTemplateManager} from '../../thirdParty/maplibre-gl-svg/src'
+
+//==============================================================================
+
+const markerLargeCircle = `<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 27 42">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.2;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0
+             C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z"
+          style="fill:{color};stroke:{secondaryColor};stroke-width:1"/>
+    <circle cx="12.5" cy="12.5" r="9" fill="{secondaryColor}"/>
+    <text x="12" y="17.5" style="font-size:14px;fill:#000;text-anchor:middle">{text}</text>
+</svg>`
+
+const markerSmallCircle = `<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 27 42">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.2;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0
+             C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z"
+          style="fill:{color};stroke:{secondaryColor};stroke-width:1"/>
+    <circle cx="12.5" cy="12.5" r="5" fill="{secondaryColor}"/>
+</svg>`
+
+//==============================================================================
+
+export async function loadClusterIcons(map)
+{
+    SvgTemplateManager.addTemplate('marker-large-circle', markerLargeCircle, false)
+    SvgTemplateManager.addTemplate('marker-small-circle', markerSmallCircle, false)
+
+    const svgManager = new SvgManager(map)
+    await svgManager.createFromTemplate('clustered-marker', 'marker-large-circle', '#EE5900', '#fff')
+    await svgManager.createFromTemplate('unclustered-marker', 'marker-small-circle', '#005974', '#fff')
+}
+
+//==============================================================================
+
+export class ClusteredMarkerLayer
+{
+    #flatmap
+    #map
+    #points = {
+       type: 'FeatureCollection',
+       features: []
+    }
+    #ui
+
+    seenmove = false
+
+    constructor(flatmap, ui)
+    {
+        this.#flatmap = flatmap
+        this.#ui = ui
+        this.#map = flatmap.map
+
+        this.#map.addSource('markers', {
+            type: 'geojson',
+            data: this.#points,
+            cluster: true,      // Adds the ``point_count`` property to source data
+            clusterMaxZoom: 9,  // Max zoom to cluster points on
+            clusterRadius: 50   // Radius of each cluster when clustering points (defaults to 50)
+        })
+
+        this.#map.addLayer({
+            id: 'clustered-markers',
+            type: 'symbol',
+            source: 'markers',
+            filter: ['has', 'point_count'],
+            'layout': {
+                'icon-image': 'clustered-marker',
+                'icon-allow-overlap': true,
+                'icon-ignore-placement': true,
+                'icon-offset': [0, -17],
+                'icon-size': 0.8,
+                'text-field': '{point_count_abbreviated}',
+                'text-size': 10,
+                'text-offset': [0, -1.93]
+            }
+        })
+
+        this.#map.addLayer({
+            id: 'single-points',
+            type: 'symbol',
+            source: 'markers',
+            filter: ['!', ['has', 'point_count']],
+            'layout': {
+                'icon-image': 'unclustered-marker',
+                'icon-allow-overlap': true,
+                'icon-ignore-placement': true,
+                'icon-offset': [0, -17],
+                'icon-size': 0.6
+            }
+        })
+
+        // inspect a cluster on click
+        this.#map.on('click', 'clustered-markers', async (e) => {
+            const features = this.#map.queryRenderedFeatures(e.point, {
+                layers: ['clustered-markers']
+            })
+            console.log('Cluster marker', features)
+            const clusterId = features[0].properties.cluster_id
+            const zoom = await this.#map.getSource('markers').getClusterExpansionZoom(clusterId)
+            this.#map.easeTo({
+                center: features[0].geometry.coordinates,
+                zoom
+            })
+        })
+
+        this.#map.on('click', 'single-points', this.singleMarkerEvent.bind(this))
+        this.#map.on('mouseenter', 'single-points', this.singleMarkerEvent.bind(this))
+        this.#map.on('mousemove', 'single-points', this.singleMarkerEvent.bind(this))
+//        this.#map.on('mouseleave', 'single-points', this.singleMarkerEvent.bind(this))
+
+        this.#map.on('mouseenter', 'clustered-markers', () => {
+            this.#map.getCanvas().style.cursor = 'pointer'
+        })
+
+        this.#map.on('mouseleave', 'clustered-markers', () => {
+            this.#map.getCanvas().style.cursor = ''
+        })
+
+        // Also 'mousemove'...
+    }
+
+    singleMarkerEvent(event)
+    //======================
+    {
+        const features = this.#map.queryRenderedFeatures(event.point, {
+            layers: ['single-points']
+        })
+        for (const feature of features) {
+if (event.type === 'mousemove' && !this.seenMove) {
+    console.log('Single marker', event.type, feature)
+    this.seenMove = true
+} else if (event.type !== 'mousemove') {
+    console.log('Single marker', event.type, feature)
+    this.seenMove = false
+}
+
+            const properties = feature.properties
+            const position = properties.markerPosition.slice(1, -1).split(',').map(p => +p)
+            this.#ui.markerEvent_(event, feature.id, position, properties.models, properties)
+        }
+        event.originalEvent.stopPropagation()
+    }
+
+    addMarker(id, position, properties={})
+    //====================================
+    {
+        this.#points.features.push({
+            type: 'Feature',
+            id,
+            properties,
+            geometry: {
+                type: 'Point',
+                coordinates: position
+            }
+        })
+        this.#map.getSource('markers')
+                 .setData(this.#points)
+    }
+
+    clearMarkers()
+    //============
+    {
+        this.#points.features = []
+        this.#map.getSource('markers')
+                 .setData(this.#points)
+    }
+}
+
+//==============================================================================
+

package/src/layers/flightpaths.js

@@ -344,14 +344,12 @@ export class FlightPathLayer
             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,
         }

package/src/layers/index.js

@@ -25,6 +25,7 @@ limitations under the License.
 import {PATHWAYS_LAYER} from '../pathways.js';
 import * as utils from '../utils.js';
 
+import {ClusteredMarkerLayer} from './cluster'
 import * as style from './styling.js';
 
 import {FlightPathLayer} from './flightpaths'
@@ -266,6 +267,7 @@ class MapRasterLayers extends MapStylingLayers
 export class LayerManager
 {
     #featureLayers = new Map()
+    #markerLayer = null
     #flightPathLayer = null
     #rasterLayer = null
 
@@ -308,6 +310,9 @@ export class LayerManager
 
         // Support flight path view
         this.#flightPathLayer = new FlightPathLayer(flatmap, ui)
+
+        // Show clustered markers in a layer
+        this.#markerLayer = new ClusteredMarkerLayer(flatmap, ui)
     }
 
     get layers()
@@ -356,6 +361,18 @@ export class LayerManager
         }
     }
 
+    addMarker(id, position, properties={})
+    //====================================
+    {
+        this.#markerLayer.addMarker(id, position, properties)
+    }
+
+    clearMarkers()
+    //============
+    {
+        this.#markerLayer.clearMarkers()
+    }
+
     featuresAtPoint(point)
     //====================
     {
@@ -408,10 +425,14 @@ export class LayerManager
             mapLayer.setFilter(this.__layerOptions);
         }
         if (this.#flightPathLayer) {
+//    * @arg options.layerOptions.sckan {string} Show neuron paths known to SCKAN: values are ``valid`` (default),
+//    *                                        ``invalid``, ``all`` or ``none``.
+
+
             const sckanState = options.sckan || 'valid'
             const sckanFilter = (sckanState == 'none') ? {NOT: {HAS: 'sckan'}} :
                                 (sckanState == 'valid') ? {sckan: true} :
-                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :
+                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :  // {sckan: false} is different...
                                 true
             const featureFilter = new PropertiesFilter(sckanFilter)
             if ('taxons' in options) {

package/src/main.js

@@ -25,6 +25,41 @@ limitations under the License.
 import { MapManager } from './flatmap-viewer';
 export { MapManager };
 
+const ALL_MARKERS = [
+// Most of these are around the heart
+    'UBERON:0003382',
+    'UBERON:0002348',
+    'UBERON:0002349',
+    'UBERON:0003379',
+    'UBERON:0001986',
+    'UBERON:0001074',
+    'UBERON:0003381',
+    'UBERON:0002165',
+    'UBERON:0002080',
+    'UBERON:0000948',
+    'UBERON:0002084',
+    'UBERON:0002078',
+    'UBERON:0002079',
+    'UBERON:0002349',
+    'UBERON:0002408',
+    'UBERON:0007240',
+    'UBERON:0002359',
+
+    'UBERON:0001508',
+    'UBERON:0037094',
+    'ILX:0738305',
+
+    'UBERON:0000948', // {className: 'heart-marker'}); // Heart
+    'UBERON:0002048', // Lung
+    'UBERON:0000945', // Stomach
+    'UBERON:0001155', // Colon
+    'UBERON:0001255', // Bladder
+    'UBERON:0001759', // Vagus
+
+    'UBERON:0016508', // Pelvic ganglion
+
+]
+
 //==============================================================================
 
 class DrawControl
@@ -110,6 +145,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showPosition: false,
         standalone: true,
         annotator: true,
+        flightPaths: true
     }, options);
 
     function loadMap(id, taxon, sex)
@@ -139,15 +175,20 @@ export async function standaloneViewer(map_endpoint=null, options={})
                     mapOptions.background = args[0].value;
                 } else if (eventType === 'annotation') {
                     drawControl.handleEvent(...args)
+                } else {
+                    //console.log(eventType, ...args)
                 }
             }, mapOptions)
             .then(map => {
+/*
                 map.addMarker('UBERON:0000948', {className: 'heart-marker'}); // Heart
                 map.addMarker('UBERON:0002048'); // Lung
                 map.addMarker('UBERON:0000945'); // Stomach
                 map.addMarker('UBERON:0001155'); // Colon
                 map.addMarker('UBERON:0001255'); // Bladder
                 map.addMarker('UBERON:0001759'); // Vagus
+*/
+                map.addMarkers(ALL_MARKERS, {cluster: true})
                 currentMap = map;
                 drawControl = new DrawControl(map)
             })

package/src/pathways.js

@@ -61,7 +61,7 @@ export function pathColourArray(pathType, alpha=255)
 {
     const rgb = colord(PathTypeMap.has(pathType)
                         ? PathTypeMap.get(pathType).colour
-                        : '#FF0').toRgb()
+                        : PathTypeMap.get('other').colour).toRgb()
     return [rgb.r, rgb.g, rgb.b, alpha]
 }
 

package/src/types.ts

@@ -0,0 +1,26 @@
+/******************************************************************************
+
+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.
+
+******************************************************************************/
+
+export type Constructor<T> = new(...args: any[]) => T
+
+export type ObjectRecord = Record<string, any>
+
+//==============================================================================
+

package/src/utils.js

@@ -120,6 +120,7 @@ export function normaliseId(id)
 
 export function setDefaults(options, defaultOptions)
 {
+// c.f. Object.assign({}, defaultOptions, options)
     if (options === undefined || options === null) {
         return defaultOptions;
     }