From bb4756e9398709bb4bb746da51dbb563f794e775 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 15 Jul 2026 18:00:53 +1200
Subject: [PATCH 01/20] Show long label for paths on flatmap tooltips

---
 src/components/viewers/Flatmap.vue      | 26 +++++++++++++++++++++++++
 src/components/viewers/MultiFlatmap.vue | 26 +++++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/src/components/viewers/Flatmap.vue b/src/components/viewers/Flatmap.vue
index 909e1879..87b137a4 100644
--- a/src/components/viewers/Flatmap.vue
+++ b/src/components/viewers/Flatmap.vue
@@ -41,6 +41,7 @@
       @pathway-selection-changed="onPathwaySelectionChanged"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      :tooltipContentProvider="tooltipPathLabelProvider"
       @trackEvent="trackEvent"
     />
 
@@ -94,6 +95,31 @@ export default {
     getFlatmapImp() {
       return this.$refs.flatmap?.mapImp;
     },
+    /**
+     * Tooltip content provider for FlatmapVuer.
+     * Looks up the 'long-label' from connectivity knowledge for path features.
+     * Only activates for path IDs (starting with 'ilxtr:' or 'ilx:').
+     * Returns null (default tooltip) for non-path features or when no long-label is found.
+     */
+    tooltipPathLabelProvider: function (featureData) {
+      const featureId = featureData?.id;
+      // Only applies to path features
+      if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
+        return null;
+      }
+
+      // Look up long-label from the connectivity store
+      const uuid = featureData.mapUUID;
+      if (uuid && this.connectivitiesStore?.globalConnectivities?.[uuid]) {
+        const connectivities = this.connectivitiesStore.globalConnectivities[uuid];
+        const match = connectivities.find(c => c.id === featureId);
+        if (match && match['long-label']) {
+          return `<div class='flatmap-feature-label'>${match['long-label']}<hr/>${featureData.label || ''}</div>`;
+        }
+      }
+
+      return null; // Use default tooltip
+    },
     contextRestored(flatmap) {
       this.flatmapReadyForMarkerUpdates(flatmap);
       this.updateViewerSettings();
diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
index 3ddacd8c..aa447440 100644
--- a/src/components/viewers/MultiFlatmap.vue
+++ b/src/components/viewers/MultiFlatmap.vue
@@ -42,6 +42,7 @@
       @open-pubmed-url="onOpenPubmedUrl"
       @mapmanager-loaded="onMapmanagerLoaded"
       :showPathwayFilter="false"
+      :tooltipContentProvider="tooltipPathLabelProvider"
       @trackEvent="trackEvent"
     />
 
@@ -153,6 +154,31 @@ export default {
         });
       }
     },
+    /**
+     * Tooltip content provider for FlatmapVuer.
+     * Looks up the 'long-label' from connectivity knowledge for path features.
+     * Only activates for path IDs (starting with 'ilxtr:' or 'ilx:').
+     * Returns null (default tooltip) for non-path features or when no long-label is found.
+     */
+    tooltipPathLabelProvider: function (featureData) {
+      const featureId = featureData?.id;
+      // Only applies to path features
+      if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
+        return null;
+      }
+
+      // Look up long-label from the connectivity store
+      const uuid = featureData.mapUUID;
+      if (uuid && this.connectivitiesStore?.globalConnectivities?.[uuid]) {
+        const connectivities = this.connectivitiesStore.globalConnectivities[uuid];
+        const match = connectivities.find(c => c.id === featureId);
+        if (match && match['long-label']) {
+          return `<div class='flatmap-feature-label'>${match['long-label']}<hr/>${featureData.label || ''}</div>`;
+        }
+      }
+
+      return null; // Use default tooltip
+    },
     onPathwaySelectionChanged: function (data) {
       const { label, property, checked, selectionsTitle } = data;
       // GA Tagging

From f2564d9947d490b54624410a720d3ef40b9a7f5c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 16 Jul 2026 10:28:17 +1200
Subject: [PATCH 02/20] Remove existing label for long-label in flatmap tooltip

---
 src/components/viewers/Flatmap.vue      | 2 +-
 src/components/viewers/MultiFlatmap.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/viewers/Flatmap.vue b/src/components/viewers/Flatmap.vue
index 87b137a4..91eade98 100644
--- a/src/components/viewers/Flatmap.vue
+++ b/src/components/viewers/Flatmap.vue
@@ -114,7 +114,7 @@ export default {
         const connectivities = this.connectivitiesStore.globalConnectivities[uuid];
         const match = connectivities.find(c => c.id === featureId);
         if (match && match['long-label']) {
-          return `<div class='flatmap-feature-label'>${match['long-label']}<hr/>${featureData.label || ''}</div>`;
+          return `<div class='flatmap-feature-label'>${match['long-label']}</div>`;
         }
       }
 
diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
index aa447440..a2f4658d 100644
--- a/src/components/viewers/MultiFlatmap.vue
+++ b/src/components/viewers/MultiFlatmap.vue
@@ -173,7 +173,7 @@ export default {
         const connectivities = this.connectivitiesStore.globalConnectivities[uuid];
         const match = connectivities.find(c => c.id === featureId);
         if (match && match['long-label']) {
-          return `<div class='flatmap-feature-label'>${match['long-label']}<hr/>${featureData.label || ''}</div>`;
+          return `<div class='flatmap-feature-label'>${match['long-label']}</div>`;
         }
       }
 

From abe54b39cf43cbc355c2d4cf7e3ff89c3ece4a7d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 16 Jul 2026 12:18:59 +1200
Subject: [PATCH 03/20] Update connectivity tooltip on flatmap with multi lines
 feature

---
 src/components/viewers/Flatmap.vue      | 33 +++++++++++++++---------
 src/components/viewers/MultiFlatmap.vue | 34 ++++++++++++++++---------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/components/viewers/Flatmap.vue b/src/components/viewers/Flatmap.vue
index 91eade98..c4db1622 100644
--- a/src/components/viewers/Flatmap.vue
+++ b/src/components/viewers/Flatmap.vue
@@ -102,22 +102,31 @@ export default {
      * Returns null (default tooltip) for non-path features or when no long-label is found.
      */
     tooltipPathLabelProvider: function (featureData) {
-      const featureId = featureData?.id;
-      // Only applies to path features
-      if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
-        return null;
-      }
+      // Handle both single feature data object and array of feature data (multi-feature case)
+      const features = Array.isArray(featureData) ? featureData : [featureData];
+      const longLabels = [];
+      const uuid = features[0]?.mapUUID;
+      const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
 
-      // Look up long-label from the connectivity store
-      const uuid = featureData.mapUUID;
-      if (uuid && this.connectivitiesStore?.globalConnectivities?.[uuid]) {
-        const connectivities = this.connectivitiesStore.globalConnectivities[uuid];
-        const match = connectivities.find(c => c.id === featureId);
-        if (match && match['long-label']) {
-          return `<div class='flatmap-feature-label'>${match['long-label']}</div>`;
+      for (const feature of features) {
+        const featureId = feature?.id;
+        // Only applies to path features
+        if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
+          continue;
+        }
+        // Look up long-label from the connectivity store
+        if (connectivities) {
+          const match = connectivities.find(c => c.id === featureId);
+          if (match && match['long-label']) {
+            longLabels.push(match['long-label']);
+          }
         }
       }
 
+      if (longLabels.length > 0) {
+        return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
+      }
+
       return null; // Use default tooltip
     },
     contextRestored(flatmap) {
diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
index a2f4658d..6f33ae23 100644
--- a/src/components/viewers/MultiFlatmap.vue
+++ b/src/components/viewers/MultiFlatmap.vue
@@ -161,22 +161,32 @@ export default {
      * Returns null (default tooltip) for non-path features or when no long-label is found.
      */
     tooltipPathLabelProvider: function (featureData) {
-      const featureId = featureData?.id;
-      // Only applies to path features
-      if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
-        return null;
-      }
+      // Handle both single feature data object and array of feature data (multi-feature case)
+      const features = Array.isArray(featureData) ? featureData : [featureData];
+
+      const longLabels = [];
+      const uuid = features[0]?.mapUUID;
+      const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
 
-      // Look up long-label from the connectivity store
-      const uuid = featureData.mapUUID;
-      if (uuid && this.connectivitiesStore?.globalConnectivities?.[uuid]) {
-        const connectivities = this.connectivitiesStore.globalConnectivities[uuid];
-        const match = connectivities.find(c => c.id === featureId);
-        if (match && match['long-label']) {
-          return `<div class='flatmap-feature-label'>${match['long-label']}</div>`;
+      for (const feature of features) {
+        const featureId = feature?.id;
+        // Only applies to path features
+        if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
+          continue;
+        }
+        // Look up long-label from the connectivity store
+        if (connectivities) {
+          const match = connectivities.find(c => c.id === featureId);
+          if (match && match['long-label']) {
+            longLabels.push(match['long-label']);
+          }
         }
       }
 
+      if (longLabels.length > 0) {
+        return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
+      }
+
       return null; // Use default tooltip
     },
     onPathwaySelectionChanged: function (data) {

From ad881d9509a45545c8920cb1a4ba8bafbc750f7d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 16 Jul 2026 12:24:05 +1200
Subject: [PATCH 04/20] Refactor duplicated codes

---
 src/components/viewers/Flatmap.vue      | 34 ------------------------
 src/components/viewers/MultiFlatmap.vue | 35 -------------------------
 src/mixins/ContentMixin.js              | 34 ++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 69 deletions(-)

diff --git a/src/components/viewers/Flatmap.vue b/src/components/viewers/Flatmap.vue
index c4db1622..3a131cc4 100644
--- a/src/components/viewers/Flatmap.vue
+++ b/src/components/viewers/Flatmap.vue
@@ -95,40 +95,6 @@ export default {
     getFlatmapImp() {
       return this.$refs.flatmap?.mapImp;
     },
-    /**
-     * Tooltip content provider for FlatmapVuer.
-     * Looks up the 'long-label' from connectivity knowledge for path features.
-     * Only activates for path IDs (starting with 'ilxtr:' or 'ilx:').
-     * Returns null (default tooltip) for non-path features or when no long-label is found.
-     */
-    tooltipPathLabelProvider: function (featureData) {
-      // Handle both single feature data object and array of feature data (multi-feature case)
-      const features = Array.isArray(featureData) ? featureData : [featureData];
-      const longLabels = [];
-      const uuid = features[0]?.mapUUID;
-      const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
-
-      for (const feature of features) {
-        const featureId = feature?.id;
-        // Only applies to path features
-        if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
-          continue;
-        }
-        // Look up long-label from the connectivity store
-        if (connectivities) {
-          const match = connectivities.find(c => c.id === featureId);
-          if (match && match['long-label']) {
-            longLabels.push(match['long-label']);
-          }
-        }
-      }
-
-      if (longLabels.length > 0) {
-        return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
-      }
-
-      return null; // Use default tooltip
-    },
     contextRestored(flatmap) {
       this.flatmapReadyForMarkerUpdates(flatmap);
       this.updateViewerSettings();
diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
index 6f33ae23..586acf2c 100644
--- a/src/components/viewers/MultiFlatmap.vue
+++ b/src/components/viewers/MultiFlatmap.vue
@@ -154,41 +154,6 @@ export default {
         });
       }
     },
-    /**
-     * Tooltip content provider for FlatmapVuer.
-     * Looks up the 'long-label' from connectivity knowledge for path features.
-     * Only activates for path IDs (starting with 'ilxtr:' or 'ilx:').
-     * Returns null (default tooltip) for non-path features or when no long-label is found.
-     */
-    tooltipPathLabelProvider: function (featureData) {
-      // Handle both single feature data object and array of feature data (multi-feature case)
-      const features = Array.isArray(featureData) ? featureData : [featureData];
-
-      const longLabels = [];
-      const uuid = features[0]?.mapUUID;
-      const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
-
-      for (const feature of features) {
-        const featureId = feature?.id;
-        // Only applies to path features
-        if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
-          continue;
-        }
-        // Look up long-label from the connectivity store
-        if (connectivities) {
-          const match = connectivities.find(c => c.id === featureId);
-          if (match && match['long-label']) {
-            longLabels.push(match['long-label']);
-          }
-        }
-      }
-
-      if (longLabels.length > 0) {
-        return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
-      }
-
-      return null; // Use default tooltip
-    },
     onPathwaySelectionChanged: function (data) {
       const { label, property, checked, selectionsTitle } = data;
       // GA Tagging
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index b08052d0..c7337c9d 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -766,6 +766,40 @@ export default {
     trackEvent: function (data) {
       Tagging.sendEvent(data);
     },
+    /**
+     * Tooltip content provider for FlatmapVuer.
+     * Looks up the 'long-label' from connectivity knowledge for path features.
+     * Only activates for path IDs (starting with 'ilxtr:' or 'ilx:').
+     * Returns null (default tooltip) for non-path features or when no long-label is found.
+     */
+    tooltipPathLabelProvider: function (featureData) {
+      // Handle both single feature data object and array of feature data (multi-feature case)
+      const features = Array.isArray(featureData) ? featureData : [featureData];
+      const longLabels = [];
+      const uuid = features[0]?.mapUUID;
+      const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
+
+      for (const feature of features) {
+        const featureId = feature?.id;
+        // Only applies to path features
+        if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {
+          continue;
+        }
+        // Look up long-label from the connectivity store
+        if (connectivities) {
+          const match = connectivities.find(c => c.id === featureId);
+          if (match && match['long-label']) {
+            longLabels.push(match['long-label']);
+          }
+        }
+      }
+
+      if (longLabels.length > 0) {
+        return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
+      }
+
+      return null; // Use default tooltip
+    },
   },
   data: function () {
     return {

From e569c4381a71c30c8b611fe2e92387ef9973306d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 16 Jul 2026 17:14:37 +1200
Subject: [PATCH 05/20] Add long label truncate toggle for flatmap tooltips

---
 src/App.vue                   |  5 ++++-
 src/components/MapContent.vue |  6 ++++++
 src/mixins/ContentMixin.js    | 20 +++++++++++++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3977e04e..080aa383 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,8 @@
                 <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
-                <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
+                <el-button @click="toggleLongLabel()" size="small">Toggle Long Label (sidebar)</el-button>
+                <el-checkbox v-model="truncateLongLabel" size="small">Truncate Long Label (map)</el-checkbox>
               </div>
             </div>
             <template #reference>
@@ -42,6 +43,7 @@
         :options="options"
         :state="state"
         :showLongLabel="showLongLabel"
+        :truncateLongLabel="truncateLongLabel"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -161,6 +163,7 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
+      truncateLongLabel: false,
     }
   },
   computed: {
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index 79b078e5..823b38a2 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -20,6 +20,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import SplitFlow from './SplitFlow.vue';
 import EventBus from './EventBus';
@@ -64,6 +65,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    truncateLongLabel: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * The options include APIs and Keys.
      */
@@ -133,6 +138,7 @@ export default {
     return {
       showGlobalSettings: this.showGlobalSettings,
       showOpenMapButton: this.showOpenMapButton,
+      truncateLongLabel: computed(() => this.truncateLongLabel),
     };
   },
   data: function () {
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index c7337c9d..3d6aacce 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -41,7 +41,17 @@ export default {
       default: false,
     },
   },
-  inject: ['showGlobalSettings', 'showOpenMapButton'],
+  inject: {
+    showGlobalSettings: {
+      default: true,
+    },
+    showOpenMapButton: {
+      default: true,
+    },
+    truncateLongLabel: {
+      default: false,
+    },
+  },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
     idNamePair() {
@@ -795,6 +805,14 @@ export default {
       }
 
       if (longLabels.length > 0) {
+        const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
+
+        if (truncate) {
+          const truncated = longLabels.map(label =>
+            `<div style="display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;">${label}</div>`
+          );
+          return `<div class='flatmap-feature-label'>${truncated.join('<hr/>')}</div>`;
+        }
         return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
       }
 

From b4feeb5f3373ee469e5cf19b8faea5b81309b127 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jul 2026 10:07:16 +1200
Subject: [PATCH 06/20] Show long labels on map only if showLongLabel is true

---
 src/components/SplitFlow.vue |  9 +++++----
 src/mixins/ContentMixin.js   | 15 +++++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index f2a7bb7d..159737b1 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -67,7 +67,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { provide, markRaw } from 'vue'
+import { provide, markRaw, computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import DialogToolbarContent from "./DialogToolbarContent.vue";
 import EventBus from "./EventBus";
@@ -141,12 +141,13 @@ export default {
     SplitDialog,
     SideBar,
   },
-  setup() {
+  setup(props) {
     const mainStore = useMainStore();
-    provide('userApiKey', mainStore.userToken);
     const settings = useSettingsStore();
     let annotator = markRaw(new AnnotationService(`${settings.flatmapAPI}annotator`));
-    provide('$annotator', annotator)
+    provide('userApiKey', mainStore.userToken);
+    provide('$annotator', annotator);
+    provide('showLongLabel', computed(() => props.showLongLabel));
     return { annotator }
   },
   props: {
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 3d6aacce..26c3ca83 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -48,6 +48,9 @@ export default {
     showOpenMapButton: {
       default: true,
     },
+    showLongLabel: {
+      default: true,
+    },
     truncateLongLabel: {
       default: false,
     },
@@ -777,12 +780,16 @@ export default {
       Tagging.sendEvent(data);
     },
     /**
-     * Tooltip content provider for FlatmapVuer.
-     * Looks up the 'long-label' from connectivity knowledge for path features.
-     * Only activates for path IDs (starting with 'ilxtr:' or 'ilx:').
-     * Returns null (default tooltip) for non-path features or when no long-label is found.
+     * Provides custom tooltip content for FlatmapVuer path features.
+     * Uses connectivity 'long-label' values for IDs starting with 'ilxtr:' or 'ilx:'.
+     * Returns null to use the default tooltip when long labels are disabled or unavailable.
      */
     tooltipPathLabelProvider: function (featureData) {
+      const showLong = this.showLongLabel?.value ?? this.showLongLabel;
+      if (!showLong) {
+        return null;
+      }
+
       // Handle both single feature data object and array of feature data (multi-feature case)
       const features = Array.isArray(featureData) ? featureData : [featureData];
       const longLabels = [];

From 401579b15191bc0ca11d8477f63ce6452154af32 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jul 2026 10:13:00 +1200
Subject: [PATCH 07/20] Capitalise long labels

---
 src/mixins/ContentMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 26c3ca83..9913af04 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -806,7 +806,7 @@ export default {
         if (connectivities) {
           const match = connectivities.find(c => c.id === featureId);
           if (match && match['long-label']) {
-            longLabels.push(match['long-label']);
+            longLabels.push(capitalise(match['long-label']));
           }
         }
       }

From deb25c1310e2c018023e4dafcc00dda2fff9112e Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jul 2026 10:36:24 +1200
Subject: [PATCH 08/20] Update demo app options popup close on button clicks

---
 src/App.vue | 67 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 080aa383..69ab4635 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,35 +4,38 @@
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
       <div class="button-container">
         <el-popover
+          ref="optionsPopover"
           placement="bottom"
           trigger="click"
           width=500
           class="popover"
           :teleported=false
-          >
-            <div class="options-container">
-              <div class="row">
-                <el-button @click="saveSettings()" size="small">Save Settings</el-button>
-                <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
-                <el-button @click="getShareableURL()" size="small">Get Link</el-button>
-              </div>
-              <div class="row">
-                <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
-                <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
-                <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
-                <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
-                <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
-                <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
-                <el-button @click="setSearch()" size="small">Set Search</el-button>
-                <el-button @click="toggleLongLabel()" size="small">Toggle Long Label (sidebar)</el-button>
-                <el-checkbox v-model="truncateLongLabel" size="small">Truncate Long Label (map)</el-checkbox>
-              </div>
+        >
+          <div class="options-container">
+            <div class="row">
+              <el-button @click="saveSettings()" size="small">Save Settings</el-button>
+              <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
+              <el-button @click="getShareableURL()" size="small">Get Link</el-button>
             </div>
-            <template #reference>
-
-                <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
-
-            </template>
+            <div class="row">
+              <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
+              <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
+              <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
+              <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
+              <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
+              <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
+              <el-button @click="setSearch()" size="small">Set Search</el-button>
+            </div>
+            <div class="row">
+              <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
+              <el-checkbox @change="onTruncateLongLabelChange" v-model="truncateLongLabel" size="small">
+                Truncate Long Label (map)
+              </el-checkbox>
+            </div>
+          </div>
+          <template #reference>
+            <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
+          </template>
         </el-popover>
       </div>
     <div class="map-app">
@@ -163,7 +166,7 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
-      truncateLongLabel: false,
+      truncateLongLabel: true,
     }
   },
   computed: {
@@ -185,6 +188,11 @@ export default {
     }
   },
   methods: {
+    closePopover: function() {
+      if (this.$refs.optionsPopover) {
+        this.$refs.optionsPopover.hide();
+      }
+    },
     changeViewingMode: function(modeName) {
       this.$refs.map.changeViewingMode(modeName);
     },
@@ -264,6 +272,7 @@ export default {
           label: "Functional"
         }
       );
+      this.closePopover();
     },
     setLegacyMultiFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -273,6 +282,7 @@ export default {
           uuid: "01fedbf9-d783-509c-a10c-827941ab13da",
         }
       );
+      this.closePopover();
     },
     setMultiFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -284,6 +294,7 @@ export default {
           organ: "UBERON:0018675"
         }
       );
+      this.closePopover();
     },
     setRatFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -292,6 +303,7 @@ export default {
           taxo: "NCBITaxon:10114"
         }
       );
+      this.closePopover();
     },
     setScaffold: function() {
       this.$refs.map.setCurrentEntry(
@@ -302,6 +314,7 @@ export default {
           viewUrl: "colonMouse_Layout1_view.json"
         }
       );
+      this.closePopover();
     },
     setWholebody: function() {
       this.$refs.map.setCurrentEntry(
@@ -311,12 +324,18 @@ export default {
           isBodyScaffold: true
         }
       );
+      this.closePopover();
     },
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
+      this.closePopover();
     },
     toggleLongLabel: function() {
       this.showLongLabel = !this.showLongLabel;
+      this.closePopover();
+    },
+    onTruncateLongLabelChange: function() {
+      this.closePopover();
     },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)

From 7df5019569aa98977a1308c3397a58c9d3663390 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jul 2026 10:39:37 +1200
Subject: [PATCH 09/20] Update demo app for show long label buttton

---
 src/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 69ab4635..08cf0f3b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,9 @@
               <el-button @click="setSearch()" size="small">Set Search</el-button>
             </div>
             <div class="row">
-              <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
+              <el-button @click="toggleLongLabel()" size="small">
+                {{ showLongLabel ? 'Show default label' : 'Show long label' }}
+              </el-button>
               <el-checkbox @change="onTruncateLongLabelChange" v-model="truncateLongLabel" size="small">
                 Truncate Long Label (map)
               </el-checkbox>

From d3cd2868476bc5a7d226f5a8ddfefd665497ee4a Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 17 Jul 2026 11:12:52 +1200
Subject: [PATCH 10/20] Update line clamp on long labels

---
 src/mixins/ContentMixin.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 9913af04..be85d2ff 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -815,8 +815,15 @@ export default {
         const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
 
         if (truncate) {
+          const lineClamp = longLabels.length > 1 ? 5 : 10;
+          const styles = [
+            `display: -webkit-box`,
+            `-webkit-line-clamp: ${lineClamp}`,
+            `-webkit-box-orient: vertical`,
+            `overflow: hidden`,
+          ].join(';');
           const truncated = longLabels.map(label =>
-            `<div style="display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden;">${label}</div>`
+            `<div style="${styles}">${label}</div>`
           );
           return `<div class='flatmap-feature-label'>${truncated.join('<hr/>')}</div>`;
         }

From f4fe701aefdede84c7c7d9d7229f1a2492674be2 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 23 Jul 2026 12:42:00 +1200
Subject: [PATCH 11/20] Update long label truncate lines

---
 src/mixins/ContentMixin.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index be85d2ff..757d9097 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -815,7 +815,9 @@ export default {
         const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
 
         if (truncate) {
-          const lineClamp = longLabels.length > 1 ? 5 : 10;
+          const defaultTruncate = 3;
+          const longTruncate = 5;
+          const lineClamp = longLabels.length > 1 ? defaultTruncate : longTruncate;
           const styles = [
             `display: -webkit-box`,
             `-webkit-line-clamp: ${lineClamp}`,

From 3577889bc8473b74e7fd0cd71452411af096f6af Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 23 Jul 2026 15:20:29 +1200
Subject: [PATCH 12/20] Update long labels with id tags

---
 src/mixins/ContentMixin.js | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 757d9097..9386c631 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -805,30 +805,32 @@ export default {
         // Look up long-label from the connectivity store
         if (connectivities) {
           const match = connectivities.find(c => c.id === featureId);
-          if (match && match['long-label']) {
-            longLabels.push(capitalise(match['long-label']));
-          }
-        }
-      }
-
-      if (longLabels.length > 0) {
-        const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
-
-        if (truncate) {
-          const defaultTruncate = 3;
-          const longTruncate = 5;
-          const lineClamp = longLabels.length > 1 ? defaultTruncate : longTruncate;
-          const styles = [
+          const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
+          const lineClamp = 3;
+          const baseStyles = [
+            `margin-bottom: 4px`,
+          ];
+          const truncateStyles = [
             `display: -webkit-box`,
             `-webkit-line-clamp: ${lineClamp}`,
             `-webkit-box-orient: vertical`,
             `overflow: hidden`,
+          ];
+          const styles = [
+            ...baseStyles,
+            ...(truncate ? truncateStyles : [])
           ].join(';');
-          const truncated = longLabels.map(label =>
-            `<div style="${styles}">${label}</div>`
-          );
-          return `<div class='flatmap-feature-label'>${truncated.join('<hr/>')}</div>`;
+
+          if (match && match['long-label']) {
+            let labelTag = []
+            labelTag.push(`<div style="${styles}">${capitalise(match['long-label'])}</div>`);
+            labelTag.push(`<span class="id-tag">${featureId}</span>`);
+            longLabels.push(labelTag.join(''));
+          }
         }
+      }
+
+      if (longLabels.length > 0) {
         return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
       }
 

From 1b6061ddd969a2a055b09d211d5f475f8b7a2406 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 23 Jul 2026 15:34:51 +1200
Subject: [PATCH 13/20] Make ID in tooltip as option

---
 src/App.vue                   |  8 ++++++++
 src/components/MapContent.vue |  5 +++++
 src/mixins/ContentMixin.js    | 11 ++++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 08cf0f3b..c9cd4c35 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,6 +33,9 @@
               <el-checkbox @change="onTruncateLongLabelChange" v-model="truncateLongLabel" size="small">
                 Truncate Long Label (map)
               </el-checkbox>
+              <el-checkbox @change="onShowIdInTooltipChange" v-model="showIdInTooltip" size="small">
+                Show ID in tooltip (map)
+              </el-checkbox>
             </div>
           </div>
           <template #reference>
@@ -49,6 +52,7 @@
         :state="state"
         :showLongLabel="showLongLabel"
         :truncateLongLabel="truncateLongLabel"
+        :showIdInTooltip="showIdInTooltip"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -169,6 +173,7 @@ export default {
       routerIsReady: false,
       showLongLabel: true,
       truncateLongLabel: true,
+      showIdInTooltip: true,
     }
   },
   computed: {
@@ -339,6 +344,9 @@ export default {
     onTruncateLongLabelChange: function() {
       this.closePopover();
     },
+    onShowIdInTooltipChange: function() {
+      this.closePopover();
+    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       // map.changeViewingMode('Annotation')
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index 823b38a2..6da3a610 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -69,6 +69,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showIdInTooltip: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * The options include APIs and Keys.
      */
@@ -139,6 +143,7 @@ export default {
       showGlobalSettings: this.showGlobalSettings,
       showOpenMapButton: this.showOpenMapButton,
       truncateLongLabel: computed(() => this.truncateLongLabel),
+      showIdInTooltip: computed(() => this.showIdInTooltip),
     };
   },
   data: function () {
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 9386c631..8e49f5a6 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -54,6 +54,9 @@ export default {
     truncateLongLabel: {
       default: false,
     },
+    showIdInTooltip: {
+      default: true,
+    },
   },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
@@ -807,7 +810,7 @@ export default {
           const match = connectivities.find(c => c.id === featureId);
           const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
           const lineClamp = 3;
-          const baseStyles = [
+          const withIdStyles = [
             `margin-bottom: 4px`,
           ];
           const truncateStyles = [
@@ -817,14 +820,16 @@ export default {
             `overflow: hidden`,
           ];
           const styles = [
-            ...baseStyles,
+            ...(this.showIdInTooltip ? withIdStyles : []),
             ...(truncate ? truncateStyles : [])
           ].join(';');
 
           if (match && match['long-label']) {
             let labelTag = []
             labelTag.push(`<div style="${styles}">${capitalise(match['long-label'])}</div>`);
-            labelTag.push(`<span class="id-tag">${featureId}</span>`);
+            if (this.showIdInTooltip) {
+              labelTag.push(`<span class="id-tag">${featureId}</span>`);
+            }
             longLabels.push(labelTag.join(''));
           }
         }

From 5bf92f7d6ba01e1bfc1aead52d14009d271ed87c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 23 Jul 2026 15:39:36 +1200
Subject: [PATCH 14/20] Fix mouse over features unique

---
 src/mixins/ContentMixin.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 8e49f5a6..2e235dc8 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -799,7 +799,12 @@ export default {
       const uuid = features[0]?.mapUUID;
       const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
 
-      for (const feature of features) {
+      // Make features unique by it's id.
+      const uniqueFeatures = features.filter((feature, index, self) =>
+        index === self.findIndex((f) => f.id === feature.id)
+      );
+
+      for (const feature of uniqueFeatures) {
         const featureId = feature?.id;
         // Only applies to path features
         if (!featureId || !(featureId.startsWith('ilxtr:') || featureId.startsWith('ilx:'))) {

From 6c072a75b4f5b507a396a27806f8ecde8aff8e34 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 23 Jul 2026 15:54:19 +1200
Subject: [PATCH 15/20] Update demo app options

---
 src/App.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c9cd4c35..da9ea742 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,14 +27,17 @@
               <el-button @click="setSearch()" size="small">Set Search</el-button>
             </div>
             <div class="row">
-              <el-button @click="toggleLongLabel()" size="small">
-                {{ showLongLabel ? 'Show default label' : 'Show long label' }}
-              </el-button>
-              <el-checkbox @change="onTruncateLongLabelChange" v-model="truncateLongLabel" size="small">
-                Truncate Long Label (map)
+              <div style="font-weight: 600">Connectivity tooltip labels:</div>
+            </div>
+            <div class="row">
+              <el-checkbox @change="onShowLongLabelChange" v-model="showLongLabel" size="small">
+                Show long label
+              </el-checkbox>
+              <el-checkbox @change="onTruncateLongLabelChange" :disabled="!showLongLabel" v-model="truncateLongLabel" size="small">
+                Truncate long label
               </el-checkbox>
-              <el-checkbox @change="onShowIdInTooltipChange" v-model="showIdInTooltip" size="small">
-                Show ID in tooltip (map)
+              <el-checkbox @change="onShowIdInTooltipChange" :disabled="!showLongLabel" v-model="showIdInTooltip" size="small">
+                Show ID in tooltip
               </el-checkbox>
             </div>
           </div>
@@ -337,8 +340,7 @@ export default {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
       this.closePopover();
     },
-    toggleLongLabel: function() {
-      this.showLongLabel = !this.showLongLabel;
+    onShowLongLabelChange: function() {
       this.closePopover();
     },
     onTruncateLongLabelChange: function() {

From faf107e5f25f47c659aa1b5bd90e89aff30e7818 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 24 Jul 2026 14:08:55 +1200
Subject: [PATCH 16/20] Fix typo in comment

---
 src/components/viewers/Flatmap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/viewers/Flatmap.vue b/src/components/viewers/Flatmap.vue
index 3a131cc4..099e8d04 100644
--- a/src/components/viewers/Flatmap.vue
+++ b/src/components/viewers/Flatmap.vue
@@ -87,7 +87,7 @@ export default {
     },
     /**
      * Perform a local search on this contentvuer
-     * This is similar to directly clicking onthe map
+     * This is similar to directly clicking on the map
      */
     search: function (term) {
       return this.$refs.flatmap.searchAndShowResult(term, true, true);

From 5fd74d8bce5c2c74489512c03ae2d219278c7fa9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 24 Jul 2026 16:19:53 +1200
Subject: [PATCH 17/20] Update flatmap tooltip for long label

---
 src/mixins/ContentMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 2e235dc8..448ec33c 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -841,7 +841,7 @@ export default {
       }
 
       if (longLabels.length > 0) {
-        return `<div class='flatmap-feature-label'>${longLabels.join('<hr/>')}</div>`;
+        return `<div class='flatmap-feature-label flatmap-connectivity-label'>${longLabels.join('<hr/>')}</div>`;
       }
 
       return null; // Use default tooltip

From 8a7fd1345471511b535905a77e24512c9573683e Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 27 Jul 2026 14:14:11 +1200
Subject: [PATCH 18/20] Make long label in sidebar always available

---
 src/components/SplitFlow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 159737b1..009d23e1 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -30,7 +30,7 @@
           :connectivityKnowledge="connectivityKnowledge"
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
-          :showLongLabel="showLongLabel"
+          :showLongLabel="true"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"

From ae09efb165e3fc60ffba0a38c7128b511de19121 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 5 Aug 2026 10:21:35 +1200
Subject: [PATCH 19/20] Make truncate long label as default

---
 src/components/MapContent.vue | 2 +-
 src/mixins/ContentMixin.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index 6da3a610..03b7fc88 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -67,7 +67,7 @@ export default {
     },
     truncateLongLabel: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     showIdInTooltip: {
       type: Boolean,
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 448ec33c..178606bb 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -52,7 +52,7 @@ export default {
       default: true,
     },
     truncateLongLabel: {
-      default: false,
+      default: true,
     },
     showIdInTooltip: {
       default: true,

From fcf02257b92f8e870b264aeddfb1ec9c6790f59a Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 6 Aug 2026 12:48:21 +1200
Subject: [PATCH 20/20] Update flatmapvuer to 1.14.1

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d0b1ca3..f4efe914 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.20.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@abi-software/flatmapvuer": "1.14.0",
+        "@abi-software/flatmapvuer": "^1.14.1",
         "@abi-software/map-side-bar": "2.16.0",
         "@abi-software/map-utilities": "1.9.0",
         "@abi-software/plotvuer": "1.1.0",
@@ -73,9 +73,9 @@
       }
     },
     "node_modules/@abi-software/flatmapvuer": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmapvuer/-/flatmapvuer-1.14.0.tgz",
-      "integrity": "sha512-Ptca3A1tRAvLMQ37FvsELuOtFaSHmIR5ljNEPpuy2/nEbaSUJnwIq1eYShmfKmQ8mCdVSjS8vgfjLHHURD96qA==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmapvuer/-/flatmapvuer-1.14.1.tgz",
+      "integrity": "sha512-miQ15hK799w1DIijTFVTu28lR4RhIUESLxQpFmfkjTfo0NF4urpqKApFRNn39SwabcPGn496vUtOZ2gm4L2PgA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@abi-software/map-utilities": "1.9.0",
diff --git a/package.json b/package.json
index 39eb5ae2..5472fb82 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.14.0",
+    "@abi-software/flatmapvuer": "^1.14.1",
     "@abi-software/map-side-bar": "2.16.0",
     "@abi-software/map-utilities": "1.9.0",
     "@abi-software/plotvuer": "1.1.0",