From 557944ae45c54e3554131e15b3a19eaaece17c9c Mon Sep 17 00:00:00 2001 From: akhuoa Date: Wed, 15 Jul 2026 17:59:42 +1200 Subject: [PATCH 01/14] Add a custom tooltip feature --- src/components/FlatmapVuer.vue | 77 +++++++++++++++++++++++++++++ src/components/MultiFlatmapVuer.vue | 9 ++++ 2 files changed, 86 insertions(+) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 9e28f570..19abd5a2 100644 --- a/src/components/FlatmapVuer.vue +++ b/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: '...'}). @@ -3153,6 +3156,46 @@ 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 customHtml = this.tooltipContentProvider(this.lastHoveredFeature); + 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 +3436,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 +3549,8 @@ export default { drawnCreatedEvent: {}, previousEditEvent: {}, previousDeletedEvent: {}, + lastHoveredFeature: null, + tooltipObserver: null, connectionEntry: {}, existDrawnFeatures: [], // Store all exist drawn features doubleClickedFeature: false, @@ -3693,6 +3749,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; + } }, } diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue index cdfe1450..3e3aa24b 100644 --- a/src/components/MultiFlatmapVuer.vue +++ b/src/components/MultiFlatmapVuer.vue @@ -94,6 +94,7 @@ :showOpenMapButton="showOpenMapButton" :showPathwayFilter="showPathwayFilter" :externalLegends="externalLegends" + :tooltipContentProvider="tooltipContentProvider" /> @@ -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 { From 4a49cf29e274dd32cc2b75acacbbc1f4d7d2ff86 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Thu, 16 Jul 2026 12:17:13 +1200 Subject: [PATCH 02/14] Show multiple lines of long-labels in tooltip --- src/components/FlatmapVuer.vue | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 19abd5a2..591de215 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -3185,7 +3185,23 @@ export default { _applyCustomTooltipContent: function (popupEl) { if (!this.tooltipContentProvider || !this.lastHoveredFeature) return; try { - const customHtml = this.tooltipContentProvider(this.lastHoveredFeature); + 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) { From 3b3ce74d9c25868abe14e93df99727393b9644f2 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 17 Jul 2026 10:26:55 +1200 Subject: [PATCH 03/14] Update padding for tooltip with long label --- src/components/FlatmapVuer.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 591de215..e179e87a 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -4542,4 +4542,7 @@ export default { } } +.flatmap-feature-label { + padding: 6px; +} From 019963e3777b2af4071c4be56643a696460c905a Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 17 Jul 2026 14:39:09 +1200 Subject: [PATCH 04/14] Update flatmap tooltip fonts --- src/components/FlatmapVuer.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index e179e87a..ba6b039f 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -3948,6 +3948,9 @@ export default { :deep(.flatmap-tooltip-popup), :deep(.custom-popup) { + font-family: Asap, sans-serif; + font-size: 14px; + &.maplibregl-popup-anchor-bottom { .maplibregl-popup-content { margin-bottom: 12px; From 07e9319b8db4e4523e03f4d51ff17ed751c2ab47 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 17 Jul 2026 14:39:28 +1200 Subject: [PATCH 05/14] Update flatmap-viewer --- src/services/flatmapLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/flatmapLoader.js b/src/services/flatmapLoader.js index be341d53..35498c75 100644 --- a/src/services/flatmapLoader.js +++ b/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.7.5/+esm'; export default flatmap; From a2e27f5b6c0b8cbae49adc01113ac94a39b8225f Mon Sep 17 00:00:00 2001 From: akhuoa Date: Thu, 23 Jul 2026 15:19:37 +1200 Subject: [PATCH 06/14] Update styles for long label tooltips --- src/components/FlatmapVuer.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index ba6b039f..caea77a0 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -4547,5 +4547,17 @@ export default { .flatmap-feature-label { padding: 6px; + text-align: left; + font-family: Asap, sans-serif; + font-size: 14px; +} + +.id-tag { + color: #444; + background: #e0e0e0; + padding: 2px 4px; + border-radius: 4px; + font-size: .75rem !important; + letter-spacing: 1.05px; } From e3180474e2da46afef92e3a2944f9189b9cffbc0 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Thu, 23 Jul 2026 16:25:42 +1200 Subject: [PATCH 07/14] Update flatmap-viewer beta for long labels --- src/services/flatmapLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/flatmapLoader.js b/src/services/flatmapLoader.js index 35498c75..395e858b 100644 --- a/src/services/flatmapLoader.js +++ b/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.7.5/+esm'; +import * as flatmap from 'https://cdn.jsdelivr.net/npm/@akhuoa/flatmap-viewer@4.4.4-beta.1/+esm'; export default flatmap; From c4ea5916d9511a15d649b4336d6f65a1a8cc0252 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 24 Jul 2026 13:51:39 +1200 Subject: [PATCH 08/14] Add custom tooltip content for search result tooltip --- src/components/FlatmapVuer.vue | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index caea77a0..203836d9 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -3109,10 +3109,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, }) From fe5f42d6be259f131c87402d7cf1ca7760c5f024 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 24 Jul 2026 15:09:15 +1200 Subject: [PATCH 09/14] Clear last hovered feature data after tooltip is closed --- src/components/FlatmapVuer.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 203836d9..bd81f10d 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -1859,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. @@ -2305,6 +2306,7 @@ export default { document.querySelectorAll('.maplibregl-popup').forEach((item) => { item.style.display = 'none' }) + this.lastHoveredFeature = null; }, /** * @public From 10202a59a1a5679459207265f1c6d3a9ebab6bd2 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 24 Jul 2026 15:39:17 +1200 Subject: [PATCH 10/14] Fix connectvity tooltip showing last hovered feature tooltip --- src/components/FlatmapVuer.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index bd81f10d..4e0ed566 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -1903,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); From c9474bb943af74620578c510b7adb9cfcb25db27 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 24 Jul 2026 15:57:57 +1200 Subject: [PATCH 11/14] Fix fonts for connectivity tooltips --- src/components/FlatmapVuer.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 4e0ed566..8f49dbed 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -3965,8 +3965,8 @@ export default { :deep(.flatmap-tooltip-popup), :deep(.custom-popup) { - font-family: Asap, sans-serif; - font-size: 14px; + font-family: Asap, sans-serif !important; + font-size: 14px !important; &.maplibregl-popup-anchor-bottom { .maplibregl-popup-content { @@ -4565,8 +4565,8 @@ export default { .flatmap-feature-label { padding: 6px; text-align: left; - font-family: Asap, sans-serif; - font-size: 14px; + font-family: Asap, sans-serif !important; + font-size: 14px !important; } .id-tag { From 6d7612538d45e5f88d9624eecd07af447babdc48 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 24 Jul 2026 16:18:24 +1200 Subject: [PATCH 12/14] Fix tooltip styles for long label --- src/components/FlatmapVuer.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 8f49dbed..534b47b3 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -4563,10 +4563,14 @@ export default { } .flatmap-feature-label { - padding: 6px; - text-align: left; + 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 { From 9bff41945d2c15514f454a342cb891d0486acf29 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Mon, 27 Jul 2026 16:41:59 +1200 Subject: [PATCH 13/14] Update flatmap-viewer@4.4.4 --- src/services/flatmapLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/flatmapLoader.js b/src/services/flatmapLoader.js index 395e858b..80af6236 100644 --- a/src/services/flatmapLoader.js +++ b/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/@akhuoa/flatmap-viewer@4.4.4-beta.1/+esm'; +import * as flatmap from 'https://cdn.jsdelivr.net/npm/@akhuoa/flatmap-viewer@4.4.4/+esm'; export default flatmap; From 55acc2a5726510c9adb2f356566d4fac744cf2be Mon Sep 17 00:00:00 2001 From: akhuoa Date: Mon, 27 Jul 2026 16:43:29 +1200 Subject: [PATCH 14/14] Update flatmap-viewer@4.4.4 --- src/services/flatmapLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/flatmapLoader.js b/src/services/flatmapLoader.js index 80af6236..695000b8 100644 --- a/src/services/flatmapLoader.js +++ b/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/@akhuoa/flatmap-viewer@4.4.4/+esm'; +import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.4.4/+esm'; export default flatmap;