@abi-software/flatmapvuer 1.14.0 → 1.15.0

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+
+export default [
+  {
+    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+  },
+  js.configs.recommended,
+  ...vue.configs["flat/essential"],
+  {
+    files: ["**/*.{js,vue}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {},
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "license": "Apache-2.0",
   "engines": {
     "node": ">=20"
@@ -20,6 +20,7 @@
     "serve": "vite --host --force",
     "build-bundle": "vite build",
     "build-static": "vite build -c vite.static-build.js",
+    "lint": "eslint .",
     "cypress:open": "cypress open",
     "cypress:component": "cypress run --component",
     "cypress:record": "cypress run --component --record",
@@ -47,56 +48,44 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "1.9.0",
+    "@abi-software/map-utilities": "1.10.0",
     "@abi-software/sparc-annotation": "0.3.2",
-    "@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",
+    "@abi-software/svg-sprite": "1.2.0",
+    "@element-plus/icons-vue": "^2.3.2",
+    "css-element-queries": "^1.2.3",
+    "element-plus": "^2.14.5",
     "mitt": "^3.0.1",
-    "pinia": "^2.1.7",
-    "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.4.21"
+    "pinia": "^4.0.3",
+    "vue": "^3.5.41"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@eslint/js": "^10.0.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "unplugin-vue-components": "^32.1.0",
     "@vuese/markdown-render": "^2.11.3",
-    "auto-changelog": "^2.4.0",
-    "babel-eslint": "^10.1.0",
-    "chokidar": "^3.6.0",
-    "concurrently": "^8.2.2",
-    "cypress": "^13.6.6",
-    "cypress-multi-reporters": "^1.6.4",
-    "cypress-visual-regression": "^5.3.0",
-    "cypress-wait-until": "^2.0.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-vue": "^9.19.2",
-    "mochawesome": "^7.1.3",
-    "sass": "^1.69.5",
-    "vite": "^5.0.10",
-    "vitepress": "^1.0.0-rc.44",
+    "auto-changelog": "^2.6.0",
+    "chokidar": "^5.0.0",
+    "concurrently": "^9.2.4",
+    "cypress": "^15.21.0",
+    "cypress-multi-reporters": "^2.0.5",
+    "cypress-visual-regression": "^6.0.0",
+    "cypress-wait-until": "^3.0.2",
+    "eslint": "^10.9.1",
+    "eslint-plugin-cypress": "^7.0.0",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "mochawesome": "^8.0.1",
+    "sass": "^1.103.1",
+    "vite": "^8.2.1",
+    "vitepress": "^1.6.4",
     "vue-docgen-api": "^4.79.2"
   },
   "optionalDependencies": {
-    "@esbuild/linux-x64": "0.25.3",
-    "@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,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
+    "@esbuild/darwin-arm64": "0.28.2",
+    "@esbuild/linux-x64": "0.28.2",
+    "@rollup/rollup-darwin-arm64": "4.63.0",
+    "@rollup/rollup-linux-x64-gnu": "4.63.0",
+    "@rollup/rollup-win32-x64-msvc": "4.63.0"
   },
   "browserslist": [
     "> 1%",

package/src/assets/styles.scss

@@ -1,4 +1,5 @@
-@import '_variables';
+@use '_variables' as *;
+@forward '_variables';
 
 @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
 

package/src/components/FlatmapVuer.vue

@@ -1737,6 +1737,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: '...'}).
@@ -1856,6 +1859,7 @@ 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.
@@ -1899,6 +1903,9 @@ 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);
@@ -2302,6 +2309,7 @@ export default {
       document.querySelectorAll('.maplibregl-popup').forEach((item) => {
         item.style.display = 'none'
       })
+      this.lastHoveredFeature = null;
     },
     /**
      * @public
@@ -3106,10 +3114,22 @@ 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: 'custom-popup',
+                  className: isPathwayFeature ? 'flatmap-tooltip-popup' : 'custom-popup',
                   positionAtLastClick: false,
                   preserveSelection: true,
                 })
@@ -3153,6 +3173,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 +3469,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 +3582,8 @@ export default {
       drawnCreatedEvent: {},
       previousEditEvent: {},
       previousDeletedEvent: {},
+      lastHoveredFeature: null,
+      tooltipObserver: null,
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
       doubleClickedFeature: false,
@@ -3693,6 +3782,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>
@@ -3855,6 +3965,9 @@ 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;
@@ -4449,4 +4562,23 @@ 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,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/components.d.ts

@@ -1,10 +1,14 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
@@ -31,7 +35,7 @@ declare module 'vue' {
     SelectionsGroup: typeof import('./components/SelectionsGroup.vue')['default']
     SvgLegends: typeof import('./components/legends/SvgLegends.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
     vPopover: typeof import('element-plus/es')['ElPopoverDirective']
   }

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.3/+esm';
+import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.4.5/+esm';
 
 export default flatmap;

package/vite.config.js

@@ -10,7 +10,8 @@ export default defineConfig(({ command, mode }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@use './src/assets/styles' as *;`
+          api: 'modern-compiler',
+          additionalData: `@use '@/assets/styles' as *;`,
         },
       },
     },
@@ -61,6 +62,11 @@ export default defineConfig(({ command, mode }) => {
             "@element-plus/icons-vue": "@element-plus/icons-vue",
             "pinia": "pinia"
           },
+          // keep css output name stable for the "./dist/style.css" export/import paths
+          assetFileNames: (assetInfo) =>
+            assetInfo.name?.endsWith(".css")
+              ? "style.css"
+              : "assets/[name][extname]",
         },
       },
     },