From 949cc48c9b0d2bd0cbc1aca1d40759b9f311ba09 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 26 Sep 2025 13:31:39 +1200
Subject: [PATCH 01/14] Fix help mode tooltip position for species

---
 src/components/MultiFlatmapVuer.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index a590da7a..a35ba51a 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -885,6 +885,8 @@ export default {
   left: 16px;
   top: 44px;
   position: absolute;
+  width: fit-content;
+
   :deep(.el-input__inner) {
     color: rgb(48, 49, 51);
     padding-top: 0.25em;

From 4b7004d96274497aeac9ec406d91e51bef6877f5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 6 Oct 2025 14:28:22 +1300
Subject: [PATCH 02/14] Refactor: align with existing code structure

---
 src/components/FlatmapVuer.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 6bbfd198..9b79edcd 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -58,7 +58,10 @@ Please use `const` to assign meaningful names to them...
                 SCKAN </a
               >.
             </p>
-            <p v-else @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
+            <p v-else
+              @mouseover="showTooltip(7)"
+              @mouseout="hideTooltip(7)"
+            >
               This map displays the connectivity of neuron populations.
               Specifically, those from the primarily rat-based
               <a

From e65f1c2dcf4513087ddc99560a817d23d7a1b5da Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 6 Oct 2025 16:29:03 +1300
Subject: [PATCH 03/14] Fix help mode for warning popover

---
 src/components/FlatmapVuer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 9b79edcd..4193f35f 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -18,6 +18,7 @@
       <div class="beta-popovers" v-show="!disableUI">
         <div>
           <el-popover
+            v-if="displayWarning || isLegacy"
             placement="right"
             popper-class="warning-popper flatmap-popper"
             :teleported="false"

From 92f86c10f35fe9920295c52225e3b981b025f629 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 8 Oct 2025 18:39:29 +1300
Subject: [PATCH 04/14] Remove feature dataset tooltip

---
 src/components/FlatmapVuer.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 4193f35f..0876efcd 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -268,7 +268,8 @@ Please use `const` to assign meaningful names to them...
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
               v-popover:checkBoxPopover
             >
-              <el-popover
+              <!-- TODO: move featured dataset popover to dynamic legends -->
+              <!-- <el-popover
                 content="Location of the featured dataset"
                 placement="bottom"
                 :teleported="true"
@@ -284,7 +285,7 @@ Please use `const` to assign meaningful names to them...
                     v-popover:featuredMarkerPopover
                     @mouseover="showTooltip(9)"
                     @mouseout="hideTooltip(9)"
-                  >
+                  > -->
                     <dynamic-legends
                       v-if="legendEntry.length"
                       identifierKey="prompt"
@@ -294,9 +295,9 @@ Please use `const` to assign meaningful names to them...
                       :showStarInLegend="true"
                       class="svg-legends-container"
                     />
-                  </div>
+                  <!-- </div>
                 </template>
-              </el-popover>
+              </el-popover> -->
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
                 content="Find these markers for data. The number inside the markers is the number of datasets available for each marker."

From 105680178245a6545a053d54972338089363c853 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 8 Oct 2025 18:43:38 +1300
Subject: [PATCH 05/14] Refactor: remove trailing space

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

diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index 1678dfd0..610441fb 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -76,7 +76,7 @@ export default {
       let borderColour = item.border ? item.border : "black";
       if (specifiedColour && !item.border) {
         borderColour = colour;
-      } 
+      }
       if (item[this.styleKey] === 'star') {
         let star = starTemplate.replace('<fillColor>', colour);
         star = star.replace('<borderColor>', borderColour);

From 3d1b8a82f079722badba4dd66b915bee0722ada9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 8 Oct 2025 19:11:09 +1300
Subject: [PATCH 06/14] Move legend-item into separate component

---
 src/components/legends/DynamicLegends.vue | 175 ++-----------------
 src/components/legends/LegendItem.vue     | 194 ++++++++++++++++++++++
 2 files changed, 205 insertions(+), 164 deletions(-)
 create mode 100644 src/components/legends/LegendItem.vue

diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index 610441fb..463555a0 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -6,37 +6,25 @@
       :key="item[identifierKey]"
       :label="item[identifierKey]"
     >
-      <div class="legend-item" v-if="legendStyle(item)">
-        <template v-if="clipPathLegends.includes(legendStyle(item))">
-          <div
-            :class="legendStyle(item)"
-            :style="customClipPathStyle(item, true)"
-          >
-            <div
-              :class="legendStyle(item)"
-              :style="customClipPathStyle(item, false)"
-            >
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <div
-          :class="legendStyle(item)"
-          :style="customStyle(item)"
-          >
-          </div>
-        </template>
-        <div class="label">{{ capitalise(item[identifierKey]) }}</div>
-      </div>
+      <LegendItem
+        :item="item"
+        :identifierKey="identifierKey"
+        :styleKey="styleKey"
+        :showStarInLegend="showStarInLegend"
+      />
     </div>
   </div>
 </template>
 
 <script>
-const starTemplate = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="<fillColor>" stroke="<borderColor>" stroke-width="<borderWidth>" d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z"/></svg>'
+import LegendItem from './LegendItem.vue';
+
 /* eslint-disable no-alert, no-console */
 export default {
   name: "DynamicLegends",
+  components: {
+    LegendItem,
+  },
   props: {
     identifierKey: {
       type: String,
@@ -61,59 +49,6 @@ export default {
       default: false,
     },
   },
-  computed: {
-    clipPathLegends: function () {
-      return ['exoid', 'hexagon'];
-    },
-  },
-  methods: {
-    capitalise: function (label) {
-      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
-    },
-    customStyle: function(item) {
-      const specifiedColour = item["color"] ? item["color"] : item["colour"];
-      let colour = specifiedColour ? specifiedColour : "transparent";
-      let borderColour = item.border ? item.border : "black";
-      if (specifiedColour && !item.border) {
-        borderColour = colour;
-      }
-      if (item[this.styleKey] === 'star') {
-        let star = starTemplate.replace('<fillColor>', colour);
-        star = star.replace('<borderColor>', borderColour);
-        star = star.replace('<borderWidth>', borderColour ? '2' : '0');
-        star = 'data:image/svg+xml,' + encodeURIComponent(star);
-        return { 'color': colour, 'background-image': `url(${star})` };
-      } else if (item[this.styleKey] === 'line') {
-        return {'color': colour};
-      } else {
-        return { 'background-color': colour, 'border-color': borderColour};
-      }
-    },
-    customClipPathStyle: function(item, isBorder) {
-      const style = this.customStyle(item);
-      if (isBorder) {
-        style['background-color'] = style['border-color'];
-      } else {
-        style.scale = 0.7;
-      }
-      return style;
-    },
-    legendStyle: function (item) {
-      if (item[this.styleKey] === "star") {
-        if (item[this.identifierKey] === "Featured dataset marker") {
-          if (!this.showStarInLegend) {
-            return;
-          }
-        }
-        return 'star';
-      } else if (this.clipPathLegends.includes(item[this.styleKey])) {
-        return item[this.styleKey];
-      } else if (item[this.styleKey] === 'line') {
-        return [item[this.styleKey], item.dashed ? 'dashed' : '', item.arrow ? 'arrow' : ''];
-      }
-      return [item[this.styleKey], 'shape'];
-    },
-  },
 };
 </script>
 
@@ -125,92 +60,4 @@ export default {
 .legend-container {
   width: max-content;
 }
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  margin: 8px 12.5px;
-}
-
-.line {
-  position: relative;
-  width: 20px;
-  border-top: 2px solid currentColor;
-}
-
-.line.dashed {
-  border-top: 2px dashed currentColor;
-}
-
-.line::after {
-  content: "";
-  position: absolute;
-  right: -2px;
-  top: -5px;
-  width: 0;
-  height: 0;
-  border-left: 7px solid currentColor;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  display: none;
-}
-
-.line.arrow::after {
-  display: block;
-}
-
-.shape {
-  height: 16px;
-  width: 16px;
-  border-color: black;
-  border-style: solid;
-  border-width: 2px;
-  background-color: transparent;
-  display: inline-block;
-}
-
-.circle {
-  border-radius: 50%;
-}
-
-.rounded-square {
-  border-radius: 30%;
-}
-
-.hexagon {
-  width: 20px;
-  height: calc(20px * 0.866);
-  background-color: transparent;
-  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-}
-
-.exoid {
-  width: 20px;
-  height: 25px;
-  background-color: transparent;
-  clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
-  );
-  -webkit-clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
-  );
-}
-
-.star {
-  width: 25px;
-  height: 25px;
-  background-color: transparent !important;
-  background-repeat: no-repeat;
-  background-size: contain;
-  display: inline-block;
-  margin: -3px;
-  padding-right: 2px;
-}
-
-.label {
-  margin-left: 14px;
-  font-size: 12px;
-  color: rgb(48, 49, 51);
-}
 </style>
diff --git a/src/components/legends/LegendItem.vue b/src/components/legends/LegendItem.vue
new file mode 100644
index 00000000..afc1a0e7
--- /dev/null
+++ b/src/components/legends/LegendItem.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="legend-item" v-if="legendStyleValue">
+    <template v-if="clipPathLegends.includes(legendStyleValue)">
+      <div
+        :class="legendStyleValue"
+        :style="customClipPathStyle(true)"
+      >
+        <div
+          :class="legendStyleValue"
+          :style="customClipPathStyle(false)"
+        >
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        :class="legendStyleValue"
+        :style="customStyle"
+      >
+      </div>
+    </template>
+    <div class="label">{{ capitalise(item[identifierKey]) }}</div>
+  </div>
+</template>
+
+<script>
+const starTemplate = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="<fillColor>" stroke="<borderColor>" stroke-width="<borderWidth>" d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z"/></svg>'
+
+/* eslint-disable no-alert, no-console */
+export default {
+  name: "LegendItem",
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    identifierKey: {
+      type: String,
+      default: "id",
+    },
+    styleKey: {
+      type: String,
+      default: "style",
+    },
+    showStarInLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    clipPathLegends: function () {
+      return ['exoid', 'hexagon'];
+    },
+    legendStyleValue: function () {
+      if (this.item[this.styleKey] === "star") {
+        if (this.item[this.identifierKey] === "Featured dataset marker") {
+          if (!this.showStarInLegend) {
+            return;
+          }
+        }
+        return 'star';
+      } else if (this.clipPathLegends.includes(this.item[this.styleKey])) {
+        return this.item[this.styleKey];
+      } else if (this.item[this.styleKey] === 'line') {
+        return [this.item[this.styleKey], this.item.dashed ? 'dashed' : '', this.item.arrow ? 'arrow' : ''];
+      }
+      return [this.item[this.styleKey], 'shape'];
+    },
+    customStyle: function() {
+      const specifiedColour = this.item["color"] ? this.item["color"] : this.item["colour"];
+      let colour = specifiedColour ? specifiedColour : "transparent";
+      let borderColour = this.item.border ? this.item.border : "black";
+      if (specifiedColour && !this.item.border) {
+        borderColour = colour;
+      }
+      if (this.item[this.styleKey] === 'star') {
+        let star = starTemplate.replace('<fillColor>', colour);
+        star = star.replace('<borderColor>', borderColour);
+        star = star.replace('<borderWidth>', borderColour ? '2' : '0');
+        star = 'data:image/svg+xml,' + encodeURIComponent(star);
+        return { 'color': colour, 'background-image': `url(${star})` };
+      } else if (this.item[this.styleKey] === 'line') {
+        return {'color': colour};
+      } else {
+        return { 'background-color': colour, 'border-color': borderColour};
+      }
+    },
+  },
+  methods: {
+    capitalise: function (label) {
+      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+    },
+    customClipPathStyle: function(isBorder) {
+      const style = {...this.customStyle};
+      if (isBorder) {
+        style['background-color'] = style['border-color'];
+      } else {
+        style.scale = 0.7;
+      }
+      return style;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin: 8px 12.5px;
+}
+
+.line {
+  position: relative;
+  width: 20px;
+  border-top: 2px solid currentColor;
+}
+
+.line.dashed {
+  border-top: 2px dashed currentColor;
+}
+
+.line::after {
+  content: "";
+  position: absolute;
+  right: -2px;
+  top: -5px;
+  width: 0;
+  height: 0;
+  border-left: 7px solid currentColor;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  display: none;
+}
+
+.line.arrow::after {
+  display: block;
+}
+
+.shape {
+  height: 16px;
+  width: 16px;
+  border-color: black;
+  border-style: solid;
+  border-width: 2px;
+  background-color: transparent;
+  display: inline-block;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.rounded-square {
+  border-radius: 30%;
+}
+
+.hexagon {
+  width: 20px;
+  height: calc(20px * 0.866);
+  background-color: transparent;
+  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+}
+
+.exoid {
+  width: 20px;
+  height: 25px;
+  background-color: transparent;
+  clip-path: path(
+    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
+  );
+  -webkit-clip-path: path(
+    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
+  );
+}
+
+.star {
+  width: 25px;
+  height: 25px;
+  background-color: transparent !important;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+  margin: -3px;
+  padding-right: 2px;
+}
+
+.label {
+  margin-left: 14px;
+  font-size: 12px;
+  color: rgb(48, 49, 51);
+}
+</style>

From d1d0bd76a0b0047fc2c14bef8fe4b18dd77fd028 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 8 Oct 2025 19:14:06 +1300
Subject: [PATCH 07/14] Separate legend-items

---
 src/components/legends/DynamicLegends.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index 463555a0..e646d50a 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -6,12 +6,22 @@
       :key="item[identifierKey]"
       :label="item[identifierKey]"
     >
-      <LegendItem
-        :item="item"
-        :identifierKey="identifierKey"
-        :styleKey="styleKey"
-        :showStarInLegend="showStarInLegend"
-      />
+      <template v-if="item[identifierKey] === 'Featured dataset marker'">
+        <LegendItem
+          :item="item"
+          :identifierKey="identifierKey"
+          :styleKey="styleKey"
+          :showStarInLegend="showStarInLegend"
+        />
+      </template>
+      <template v-else>
+        <LegendItem
+          :item="item"
+          :identifierKey="identifierKey"
+          :styleKey="styleKey"
+          :showStarInLegend="showStarInLegend"
+        />
+      </template>
     </div>
   </div>
 </template>

From 222631058fb519d12376eee54a6dd4ffa7adb556 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 11:12:00 +1300
Subject: [PATCH 08/14] Add featured dataset marker tooltip

---
 src/components/legends/DynamicLegends.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index e646d50a..878a2ba1 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -7,12 +7,23 @@
       :label="item[identifierKey]"
     >
       <template v-if="item[identifierKey] === 'Featured dataset marker'">
-        <LegendItem
-          :item="item"
-          :identifierKey="identifierKey"
-          :styleKey="styleKey"
-          :showStarInLegend="showStarInLegend"
-        />
+        <el-popover
+          content="Location of the featured dataset"
+          placement="right"
+          :teleported="true"
+          trigger="hover"
+          width="max-content"
+          popper-class="flatmap-popper flatmap-teleport-popper"
+        >
+          <template #reference>
+            <LegendItem
+              :item="item"
+              :identifierKey="identifierKey"
+              :styleKey="styleKey"
+              :showStarInLegend="showStarInLegend"
+            />
+          </template>
+        </el-popover>
       </template>
       <template v-else>
         <LegendItem

From ccc657e2f5cffe8ff37e9ce97d88f2de4de9b370 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 14:38:58 +1300
Subject: [PATCH 09/14] Show featured dataset marker tooltip in help mode

---
 src/components/FlatmapVuer.vue            | 7 ++++++-
 src/components/legends/DynamicLegends.vue | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 0876efcd..58d11879 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -293,6 +293,8 @@ Please use `const` to assign meaningful names to them...
                       styleKey="style"
                       :legends="legendEntry"
                       :showStarInLegend="true"
+                      :showDatasetMarkerTooltip="showDatasetMarkerTooltip"
+                      ref="featuredMarkerPopover"
                       class="svg-legends-container"
                     />
                   <!-- </div>
@@ -3510,7 +3512,10 @@ export default {
     },
     legendEntry: function () {
       return [...this.flatmapLegends, ...this.externalLegends]
-    }
+    },
+    showDatasetMarkerTooltip: function () {
+      return this.hoverVisibilities[9].value;
+    },
   },
   watch: {
     entry: function () {
diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index 878a2ba1..dc2daf2c 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -11,9 +11,10 @@
           content="Location of the featured dataset"
           placement="right"
           :teleported="true"
-          trigger="hover"
+          trigger="manual"
           width="max-content"
           popper-class="flatmap-popper flatmap-teleport-popper"
+          :visible="showDatasetMarkerTooltip"
         >
           <template #reference>
             <LegendItem
@@ -69,6 +70,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showDatasetMarkerTooltip: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

From 21f41f6d4a9f5ee807f731e2fe87ab5093fbfc78 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 14:53:08 +1300
Subject: [PATCH 10/14] Fix featured dataset marker tooltip when show star in
 legend is false

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

diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index dc2daf2c..1e9cbe7f 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -14,7 +14,7 @@
           trigger="manual"
           width="max-content"
           popper-class="flatmap-popper flatmap-teleport-popper"
-          :visible="showDatasetMarkerTooltip"
+          :visible="showDatasetMarkerTooltip && showStarInLegend"
         >
           <template #reference>
             <LegendItem

From 44b9f9c5060bd2eb6c8047180af454fffb7e63a7 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 15:26:45 +1300
Subject: [PATCH 11/14] Add mouse hover event for featured dataset marker
 tooltip

---
 src/components/legends/DynamicLegends.vue | 48 +++++++++++++++++++----
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/legends/DynamicLegends.vue b/src/components/legends/DynamicLegends.vue
index 1e9cbe7f..b133fd2f 100644
--- a/src/components/legends/DynamicLegends.vue
+++ b/src/components/legends/DynamicLegends.vue
@@ -13,16 +13,24 @@
           :teleported="true"
           trigger="manual"
           width="max-content"
+          :offset="0"
           popper-class="flatmap-popper flatmap-teleport-popper"
-          :visible="showDatasetMarkerTooltip && showStarInLegend"
+          :visible="tooltipVisible"
+          ref="featuredMarkerPopover"
         >
           <template #reference>
-            <LegendItem
-              :item="item"
-              :identifierKey="identifierKey"
-              :styleKey="styleKey"
-              :showStarInLegend="showStarInLegend"
-            />
+            <div
+              v-popover:featuredMarkerPopover
+              @mouseover="onMouseOver"
+              @mouseout="onMouseOut"
+            >
+              <LegendItem
+                :item="item"
+                :identifierKey="identifierKey"
+                :styleKey="styleKey"
+                :showStarInLegend="showStarInLegend"
+              />
+            </div>
           </template>
         </el-popover>
       </template>
@@ -75,6 +83,32 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      isHovering: false,
+      hoverTimeout: null,
+    };
+  },
+  computed: {
+    tooltipVisible() {
+      // Show tooltip when either help mode is active OR user is hovering
+      return (this.showDatasetMarkerTooltip && this.showStarInLegend) || this.isHovering;
+    },
+  },
+  methods: {
+    onMouseOver() {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = setTimeout(() => {
+        this.isHovering = true;
+      }, 500);
+    },
+    onMouseOut() {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = setTimeout(() => {
+        this.isHovering = false;
+      }, 500);
+    },
+  },
 };
 </script>
 

From d28f32fc962ec80ebdd44a5e31ed98a6336f7ad9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 15:28:27 +1300
Subject: [PATCH 12/14] Remove comments

---
 src/components/FlatmapVuer.vue | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 58d11879..6f772b6e 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -268,24 +268,6 @@ Please use `const` to assign meaningful names to them...
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
               v-popover:checkBoxPopover
             >
-              <!-- TODO: move featured dataset popover to dynamic legends -->
-              <!-- <el-popover
-                content="Location of the featured dataset"
-                placement="bottom"
-                :teleported="true"
-                trigger="manual"
-                width="max-content"
-                :offset="-10"
-                popper-class="flatmap-popper flatmap-teleport-popper"
-                :visible="hoverVisibilities[9].value && showStarInLegend"
-                ref="featuredMarkerPopover"
-              >
-                <template #reference>
-                  <div
-                    v-popover:featuredMarkerPopover
-                    @mouseover="showTooltip(9)"
-                    @mouseout="hideTooltip(9)"
-                  > -->
                     <dynamic-legends
                       v-if="legendEntry.length"
                       identifierKey="prompt"
@@ -297,9 +279,6 @@ Please use `const` to assign meaningful names to them...
                       ref="featuredMarkerPopover"
                       class="svg-legends-container"
                     />
-                  <!-- </div>
-                </template>
-              </el-popover> -->
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
                 content="Find these markers for data. The number inside the markers is the number of datasets available for each marker."

From e9a5f7e82a26e523c0f5a4e05544605152dcc27c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 15:28:52 +1300
Subject: [PATCH 13/14] Refactor: dynamic-legends

---
 src/components/FlatmapVuer.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 6f772b6e..9992d497 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -268,17 +268,17 @@ Please use `const` to assign meaningful names to them...
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
               v-popover:checkBoxPopover
             >
-                    <dynamic-legends
-                      v-if="legendEntry.length"
-                      identifierKey="prompt"
-                      colourKey="colour"
-                      styleKey="style"
-                      :legends="legendEntry"
-                      :showStarInLegend="true"
-                      :showDatasetMarkerTooltip="showDatasetMarkerTooltip"
-                      ref="featuredMarkerPopover"
-                      class="svg-legends-container"
-                    />
+              <dynamic-legends
+                v-if="legendEntry.length"
+                identifierKey="prompt"
+                colourKey="colour"
+                styleKey="style"
+                :legends="legendEntry"
+                :showStarInLegend="true"
+                :showDatasetMarkerTooltip="showDatasetMarkerTooltip"
+                ref="featuredMarkerPopover"
+                class="svg-legends-container"
+              />
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
                 content="Find these markers for data. The number inside the markers is the number of datasets available for each marker."

From 967f07d052f73dfbf63aeacb256d8461215e2bc5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 9 Oct 2025 16:12:17 +1300
Subject: [PATCH 14/14] Skip pathways filter tooltip in help mode if no
 checkbox

---
 src/components/FlatmapVuer.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 9992d497..450a4708 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -2387,9 +2387,17 @@ export default {
         } else {
           // skip the unavailable tooltips
           this.helpModeActiveIndex += 1;
+          this.setHelpMode(helpMode);
         }
       }
 
+      // Skip checkbox tooltip if pathway filter is not shown
+      const activePopoverObjAfter = this.hoverVisibilities[this.helpModeActiveIndex];
+      if (activePopoverObjAfter?.ref === 'checkBoxPopover' && !this.showPathwayFilter) {
+        this.helpModeActiveIndex += 1;
+        this.setHelpMode(helpMode);
+      }
+
       if (!helpMode) {
         // reset to iniital state
         this.helpModeActiveIndex = this.helpModeInitialIndex;