@abi-software/flatmapvuer 1.13.4 → 1.13.5-demo.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.13.4",
+  "version": "1.13.5-demo.1",
   "license": "Apache-2.0",
   "files": [
     "dist/*",

package/src/components/FlatmapVuer.vue

@@ -634,6 +634,7 @@ import { capitalise, normaliseAlertToStringArray } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
 import flatmap from '../services/flatmapLoader.js'
+import { attachSomaLocationMarkerMethods } from '../services/somaLocationMarkers.js'
 import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
@@ -1737,6 +1738,9 @@ export default {
             provenanceTaxonomy: taxons,
             alert: featuresAlert
           }]
+          if (eventType === 'mouseenter') {
+            this.lastHoveredFeature = data;
+          }
           if (eventType === 'click') {
             // If multiple paths overlap at the click location,
             // `data` is an object with numeric keys for each feature (e.g., {0: {...}, 1: {...}, ..., mapUUID: '...'}).
@@ -2837,7 +2841,7 @@ export default {
           }
         )
         promise1.then((returnedObject) => {
-          this.mapImp = returnedObject
+          this.mapImp = attachSomaLocationMarkerMethods(returnedObject)
           this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1)
           let mapVersion = this.mapImp.details.version
           this.setFlightPathInfo(mapVersion)
@@ -3153,6 +3157,62 @@ export default {
     setConnectionType: function (type) {
       this.connectionType = type;
     },
+    /**
+     * MutationObserver callback to intercept tooltip popup DOM elements
+     * and customize their content before the browser renders them.
+     */
+    _handleTooltipMutation: function (mutations) {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (node.nodeType === 1) {
+            // Check if the added node itself is the tooltip popup
+            if (node.matches && node.matches('.flatmap-tooltip-popup')) {
+              this._applyCustomTooltipContent(node);
+            } else if (node.querySelector) {
+              // Check if it contains a tooltip popup
+              const popup = node.querySelector('.flatmap-tooltip-popup');
+              if (popup) {
+                this._applyCustomTooltipContent(popup);
+              }
+            }
+          }
+        }
+      }
+    },
+    /**
+     * Replace the default tooltip content with custom content from
+     * the tooltipContentProvider prop, if available.
+     */
+    _applyCustomTooltipContent: function (popupEl) {
+      if (!this.tooltipContentProvider || !this.lastHoveredFeature) return;
+      try {
+        const featureData = this.lastHoveredFeature;
+        // Detect multi-feature data format used by click events when multiple
+        // paths overlap: {0: {...}, 1: {...}, ..., mapUUID: '...'}
+        const isMultiFeature = featureData[0] && typeof featureData[0] === 'object';
+        let customHtml;
+        if (isMultiFeature) {
+          const features = [];
+          const mapUUID = featureData.mapUUID;
+          for (const [key, value] of Object.entries(featureData)) {
+            if (key !== 'mapUUID' && value && typeof value === 'object') {
+              features.push({ ...value, mapUUID });
+            }
+          }
+          customHtml = this.tooltipContentProvider(features.length > 1 ? features : features[0]);
+        } else {
+          customHtml = this.tooltipContentProvider(featureData);
+        }
+        if (customHtml) {
+          const contentEl = popupEl.querySelector('.maplibregl-popup-content');
+          if (contentEl) {
+            contentEl.innerHTML = customHtml;
+          }
+        }
+      } catch (e) {
+        console.warn('[flatmapvuer] Error in tooltipContentProvider:', e);
+      }
+    },
   },
   props: {
     /**
@@ -3393,6 +3453,17 @@ export default {
         return []
       },
     },
+    /**
+     * A function that provides custom tooltip HTML content for path features.
+     * The function receives the feature data from the mouseenter event (including `id`, `label`, etc.)
+     * and should return an HTML string to display in the tooltip, or return null/undefined
+     * to keep the default tooltip.
+     * This is used by mapintegratedvuer to show 'long-label' from connectivity knowledge.
+     */
+    tooltipContentProvider: {
+      type: Function,
+      default: null,
+    },
   },
   provide() {
     return {
@@ -3495,6 +3566,8 @@ export default {
       drawnCreatedEvent: {},
       previousEditEvent: {},
       previousDeletedEvent: {},
+      lastHoveredFeature: null,
+      tooltipObserver: null,
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
       doubleClickedFeature: false,
@@ -3693,6 +3766,27 @@ export default {
       this.createFlatmap()
     }
     refreshFlatmapKnowledgeCache();
+
+    // Set up MutationObserver to customize tooltip content when
+    // tooltipContentProvider prop is provided.
+    if (this.tooltipContentProvider) {
+      this.$nextTick(() => {
+        const container = this.$refs.flatmapContainer || this.$el;
+        if (container) {
+          this.tooltipObserver = new MutationObserver(this._handleTooltipMutation.bind(this));
+          this.tooltipObserver.observe(container, {
+            childList: true,
+            subtree: true,
+          });
+        }
+      });
+    }
+  },
+  beforeUnmount: function () {
+    if (this.tooltipObserver) {
+      this.tooltipObserver.disconnect();
+      this.tooltipObserver = null;
+    }
   },
 }
 </script>

package/src/components/MultiFlatmapVuer.vue

@@ -94,6 +94,7 @@
       :showOpenMapButton="showOpenMapButton"
       :showPathwayFilter="showPathwayFilter"
       :externalLegends="externalLegends"
+      :tooltipContentProvider="tooltipContentProvider"
     />
 
     <!-- multiflatmap-error -->
@@ -893,6 +894,14 @@ export default {
         return []
       },
     },
+    /**
+     * A function that provides custom tooltip HTML content for path features.
+     * Passed through to each FlatmapVuer instance.
+     */
+    tooltipContentProvider: {
+      type: Function,
+      default: null,
+    },
   },
   data: function () {
     return {

package/src/services/somaLocationMarkers.js

@@ -0,0 +1,125 @@
+const SOMA_MARKER_COLOUR = '#1b7f6b'
+const SOMA_MARKER_SECONDARY_COLOUR = '#f4f1de'
+const SOMA_MARKER_TEXT_COLOUR = '#12312b'
+const SOMA_MARKER_MAX_COUNT_LABEL = '99+'
+
+const normalizeSomaLocations = function (somaLocations) {
+  return (Array.isArray(somaLocations) ? somaLocations : [])
+    .map((item) => ({
+      label: String(item?.label || '').trim(),
+      curie: String(item?.curie || '').trim(),
+      count: Number(item?.count || 0),
+    }))
+    .filter((item) => item.curie && item.count > 0)
+}
+
+const formatCount = function (count) {
+  if (count > 99) return SOMA_MARKER_MAX_COUNT_LABEL
+  return String(count)
+}
+
+const createSomaLocationMarkerElement = function (somaLocation) {
+  const wrapper = document.createElement('div')
+  wrapper.className = 'flatmapvuer-soma-location-marker'
+  wrapper.title = somaLocation.label || somaLocation.curie
+  wrapper.style.width = '34px'
+  wrapper.style.height = '48px'
+  wrapper.style.display = 'flex'
+  wrapper.style.alignItems = 'center'
+  wrapper.style.justifyContent = 'center'
+  wrapper.style.transform = 'translate(-50%, -100%)'
+
+  const countLabel = formatCount(somaLocation.count)
+  wrapper.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 27 42" width="34" height="48" aria-hidden="true">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.18;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494
+             c0 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:${SOMA_MARKER_COLOUR};stroke:${SOMA_MARKER_SECONDARY_COLOUR};stroke-width:1.1"/>
+    <circle cx="12.5" cy="12.5" r="8" fill="${SOMA_MARKER_SECONDARY_COLOUR}"/>
+    <text x="12.5" y="16.1" text-anchor="middle" style="font-size:7.5px;font-weight:700;fill:${SOMA_MARKER_TEXT_COLOUR};font-family:Arial, sans-serif">${countLabel}</text>
+  </svg>`
+
+  return wrapper
+}
+
+const resolveMarkerPlacement = function (mapImp, curie) {
+  const featureIds = Array.isArray(mapImp?.modelFeatureIds?.(curie)) ? mapImp.modelFeatureIds(curie) : []
+  const placements = []
+  const seenFeatureUris = new Set()
+
+  for (const featureId of featureIds) {
+    const annotation = mapImp.annotation(featureId)
+    const featureUri = String(annotation?.uri || '').trim()
+    if (featureUri && !seenFeatureUris.has(featureUri)) {
+      seenFeatureUris.add(featureUri)
+      placements.push({
+        type: 'feature-uri',
+        value: featureUri,
+      })
+    }
+  }
+
+  // Fall back to model placement only when no feature URI can be resolved.
+  if (!placements.length && featureIds.length) {
+    placements.push({
+      type: 'model',
+      value: curie,
+    })
+  }
+
+  return placements
+}
+
+export const attachSomaLocationMarkerMethods = function (mapImp) {
+  if (!mapImp || mapImp.addSomaLocationMarkers) {
+    return mapImp
+  }
+
+  let markerIds = []
+
+  mapImp.clearSomaLocationMarkers = function () {
+    markerIds.forEach((markerId) => {
+      mapImp.removeMarker(markerId)
+    })
+    markerIds = []
+  }
+
+  mapImp.addSomaLocationMarkers = function (somaLocations) {
+    const normalizedSomaLocations = normalizeSomaLocations(somaLocations)
+    const placedSomaLocations = []
+
+    mapImp.clearSomaLocationMarkers()
+
+    normalizedSomaLocations.forEach((somaLocation) => {
+      const placements = resolveMarkerPlacement(mapImp, somaLocation.curie)
+      if (!placements.length) return
+
+      let somaLocationPlaced = false
+      placements.forEach((placement) => {
+        const markerElement = createSomaLocationMarkerElement(somaLocation)
+        let addedMarkerIds = []
+
+        if (placement.type === 'feature-uri') {
+          addedMarkerIds = mapImp.addMarkerByFeatureUri(placement.value, { element: markerElement })
+        } else if (placement.type === 'model') {
+          const markerId = mapImp.addMarker(placement.value, { element: markerElement })
+          addedMarkerIds = markerId > -1 ? [markerId] : []
+        }
+
+        if (!addedMarkerIds.length) return
+
+        markerIds.push(...addedMarkerIds)
+        somaLocationPlaced = true
+      })
+
+      if (somaLocationPlaced) {
+        placedSomaLocations.push(somaLocation)
+      }
+    })
+
+    return placedSomaLocations
+  }
+
+  return mapImp
+}