@abi-software/flatmapvuer 1.13.5-demo.8 → 1.14.0

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.13.5-demo.8",
+  "version": "1.14.0",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "files": [
     "dist/*",
     "src/*",
@@ -44,9 +47,9 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "1.8.3",
+    "@abi-software/map-utilities": "1.9.0",
     "@abi-software/sparc-annotation": "0.3.2",
-    "@abi-software/svg-sprite": "1.0.3",
+    "@abi-software/svg-sprite": "1.1.0",
     "@element-plus/icons-vue": "^2.3.1",
     "css-element-queries": "^1.2.2",
     "element-plus": "2.8.4",
@@ -77,7 +80,9 @@
   },
   "optionalDependencies": {
     "@esbuild/linux-x64": "0.25.3",
-    "@rollup/rollup-linux-x64-gnu": "4.23.0"
+    "@rollup/rollup-darwin-arm64": "4.59.0",
+    "@rollup/rollup-linux-x64-gnu": "4.59.0",
+    "@rollup/rollup-win32-x64-msvc": "4.59.0"
   },
   "eslintConfig": {
     "root": true,

package/src/components/FlatmapVuer.vue

@@ -634,7 +634,6 @@ 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'
@@ -1738,9 +1737,6 @@ 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: '...'}).
@@ -1860,7 +1856,6 @@ export default {
       // Fallback: remove any existing toolitp on DOM
       const tooltips = this.$el.querySelectorAll('.flatmap-tooltip-popup');
       tooltips.forEach((tooltip) => tooltip.remove());
-      this.lastHoveredFeature = null;
     },
     /**
      * Function to create tooltip for the provided connectivity data.
@@ -1904,9 +1899,6 @@ export default {
       const connectivityData = [];
       const errorData = [];
 
-      // Remove last hovered feature to avoid showing tooltip for the last hovered feature.
-      this.lastHoveredFeature = null;
-
       // to keep the highlighted path on map
       if (connectivityInfo && connectivityInfo.featureId) {
         featuresToHighlight.push(...connectivityInfo.featureId);
@@ -2310,7 +2302,6 @@ export default {
       document.querySelectorAll('.maplibregl-popup').forEach((item) => {
         item.style.display = 'none'
       })
-      this.lastHoveredFeature = null;
     },
     /**
      * @public
@@ -2846,7 +2837,7 @@ export default {
           }
         )
         promise1.then((returnedObject) => {
-          this.mapImp = attachSomaLocationMarkerMethods(returnedObject)
+          this.mapImp = returnedObject
           this.serverURL = this.mapImp.makeServerUrl('').slice(0, -1)
           let mapVersion = this.mapImp.details.version
           this.setFlightPathInfo(mapVersion)
@@ -3115,22 +3106,10 @@ export default {
                   provenanceTaxonomy: feature.taxons,
                   alert: normaliseAlertToStringArray(feature.alert),
                 }
-
                 // Show popup for all modes
                 this.checkAndCreatePopups([data], mapclick)
-
-                // Check pathway fetures and set lastHoveredFeature for tooltip content replacement.
-                const isPathwayFeature = (feature.id.startsWith('ilxtr:') || feature.id.startsWith('ilx:'));
-                if (isPathwayFeature) {
-                  this.lastHoveredFeature = feature;
-                  this.lastHoveredFeature.mapUUID = this.mapImp.uuid;
-                } else {
-                  this.lastHoveredFeature = null;
-                }
-
-                // flatmap-tooltip-popup is used for custom tooltip content replacement.
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
-                  className: isPathwayFeature ? 'flatmap-tooltip-popup' : 'custom-popup',
+                  className: 'custom-popup',
                   positionAtLastClick: false,
                   preserveSelection: true,
                 })
@@ -3174,62 +3153,6 @@ 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: {
     /**
@@ -3470,17 +3393,6 @@ 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 {
@@ -3583,8 +3495,6 @@ export default {
       drawnCreatedEvent: {},
       previousEditEvent: {},
       previousDeletedEvent: {},
-      lastHoveredFeature: null,
-      tooltipObserver: null,
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
       doubleClickedFeature: false,
@@ -3783,27 +3693,6 @@ 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>
@@ -3966,9 +3855,6 @@ export default {
 
 :deep(.flatmap-tooltip-popup),
 :deep(.custom-popup) {
-  font-family: Asap, sans-serif !important;
-  font-size: 14px !important;
-
   &.maplibregl-popup-anchor-bottom {
     .maplibregl-popup-content {
       margin-bottom: 12px;
@@ -4563,23 +4449,4 @@ export default {
   }
 }
 
-.flatmap-feature-label {
-  padding: 6px !important;
-  font-family: Asap, sans-serif !important;
-  font-size: 14px !important;
-
-  // provided by tooltipContentProvider from mapintegratedvuer
-  &.flatmap-connectivity-label {
-    text-align: left !important;
-  }
-}
-
-.id-tag {
-  color: #444;
-  background: #e0e0e0;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-size: .75rem !important;
-  letter-spacing: 1.05px;
-}
 </style>

package/src/components/MultiFlatmapVuer.vue

@@ -94,7 +94,6 @@
       :showOpenMapButton="showOpenMapButton"
       :showPathwayFilter="showPathwayFilter"
       :externalLegends="externalLegends"
-      :tooltipContentProvider="tooltipContentProvider"
     />
 
     <!-- multiflatmap-error -->
@@ -894,14 +893,6 @@ 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/flatmapLoader.js

@@ -1,6 +1,6 @@
 /**
  * a single source for the flatmap-viewer library import
  */
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.4.4/+esm';
+import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.4.3/+esm';
 
 export default flatmap;

package/src/services/somaLocationMarkers.js

@@ -1,125 +0,0 @@
-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
-}