From b45738df65896e48be097cb2f6f2768614ecd2b6 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 22 Sep 2026 14:01:14 +1200
Subject: [PATCH 1/6] Open new view for species

---
 src/components/MultiFlatmapVuer.vue | 72 +++++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 0e91e201..b3659278 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -23,10 +23,21 @@
             @change="setSpecies"
           >
             <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
-              <span class="select-box-icon">
-                <i :class="item.iconClass"></i>
+              <span class="option-label">
+                <span class="option-title">
+                  <span class="select-box-icon">
+                    <i :class="item.iconClass"></i>
+                  </span>
+                  {{ key }}
+                </span>
+                <span
+                  v-if="enableOpenMapUI"
+                  class="open-new-view-chip"
+                  @click.stop="openSpeciesInNewView(key)"
+                >
+                  Open new view
+                </span>
               </span>
-              {{ key }}
             </el-option>
           </el-select>
         </template>
@@ -38,6 +49,13 @@
       @event open-map
       @arg {Object} `$event`
     -->
+    <!--
+      This event is emitted when the user chooses to open a species
+      in a new view/panel from the species select, instead of switching
+      the currently displayed species.
+      @event open-map-species
+      @arg {String} `species`
+    -->
     <FlatmapVuer
       v-for="(item, key) in speciesList"
       :key="key"
@@ -329,6 +347,20 @@ export default {
     getCurrentFlatmap: function () {
       return this.$refs[this.activeSpecies][0];
     },
+    /**
+     * @public
+     * Function to request opening the given species in a new view/panel,
+     * leaving the currently displayed species unchanged.
+     * @arg {String} `species`
+     */
+    openSpeciesInNewView: function (species) {
+      /**
+       * This event is emitted when the user chooses to open a species
+       * in a new view/panel instead of switching the current one.
+       * @arg species
+       */
+      this.$emit('open-map-species', species);
+    },
     /**
      * @public
      * Function to emit ``pan-zoom-callback`` event
@@ -963,8 +995,40 @@ export default {
   }
 }
 
+.option-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  &:hover {
+    .open-new-view-chip {
+      opacity: 1;
+    }
+  }
+}
+
+.open-new-view-chip {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: $app-primary-color;
+  color: #fff;
+  font-size: 10px;
+  line-height: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    background-color: #ac76c5;
+  }
+}
+
 .flatmap-dropdown {
-  min-width: 160px !important;
+  min-width: 220px !important;
   .el-select-dropdown__item {
     white-space: nowrap;
     text-align: left;

From 39ed2f85baf742b75d9d8970cd45435389d2f397 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 28 Sep 2026 12:15:44 +1300
Subject: [PATCH 2/6] Add species open new view and tooltips

---
 src/components/MultiFlatmapVuer.vue | 118 ++++++++++++++++++++++------
 1 file changed, 92 insertions(+), 26 deletions(-)

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index b3659278..50afd55e 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -15,6 +15,7 @@
         <template #reference>
           <el-select
             id="flatmap-select"
+            ref="speciesSelect"
             :teleported="false"
             v-model="activeSpecies"
             placeholder="Select"
@@ -24,19 +25,53 @@
           >
             <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
               <span class="option-label">
-                <span class="option-title">
-                  <span class="select-box-icon">
-                    <i :class="item.iconClass"></i>
+                <el-tooltip
+                  :content="
+                    activeSpecies === key ? `Currently viewing ${key}` : `Change species to ${key}`
+                  "
+                  placement="top"
+                  effect="light"
+                  :show-after="200"
+                  popper-class="flatmap-species-option-tooltip"
+                >
+                  <span class="option-title">
+                    <span class="select-box-icon">
+                      <i :class="item.iconClass"></i>
+                    </span>
+                    {{ key }}
                   </span>
-                  {{ key }}
-                </span>
-                <span
+                </el-tooltip>
+                <el-tooltip
                   v-if="enableOpenMapUI"
-                  class="open-new-view-chip"
-                  @click.stop="openSpeciesInNewView(key)"
+                  :content="`Open ${key} in a new view`"
+                  placement="top"
+                  effect="light"
+                  :show-after="200"
+                  popper-class="flatmap-open-new-view-tooltip"
                 >
-                  Open new view
-                </span>
+                  <button
+                    type="button"
+                    class="open-new-view-button"
+                    :aria-label="`Open ${key} in a new view`"
+                    @click.stop="openSpeciesInNewView(key)"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="14"
+                      height="14"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                    >
+                      <rect x="8" y="8" width="13" height="13" rx="2" />
+                      <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                      <path d="M14.5 11.5v6M11.5 14.5h6" />
+                    </svg>
+                  </button>
+                </el-tooltip>
               </span>
             </el-option>
           </el-select>
@@ -354,6 +389,8 @@ export default {
      * @arg {String} `species`
      */
     openSpeciesInNewView: function (species) {
+      // Close the dropdown as the species opens in another view
+      this.$refs.speciesSelect?.blur();
       /**
        * This event is emitted when the user chooses to open a species
        * in a new view/panel instead of switching the current one.
@@ -1000,30 +1037,43 @@ export default {
   align-items: center;
   gap: 8px;
   width: 100%;
+}
 
-  &:hover {
-    .open-new-view-chip {
-      opacity: 1;
-    }
-  }
+.option-title {
+  flex: 1;
+  min-width: 0;
 }
 
-.open-new-view-chip {
+.open-new-view-button {
   flex-shrink: 0;
   margin-left: auto;
-  padding: 2px 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid transparent;
   border-radius: 4px;
-  background-color: $app-primary-color;
-  color: #fff;
-  font-size: 10px;
-  line-height: 14px;
-  white-space: nowrap;
+  background-color: transparent;
+  color: #909399;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s ease;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+
+  .el-select-dropdown__item.is-hovering &,
+  .el-select-dropdown__item:hover & {
+    color: $app-primary-color;
+  }
 
-  &:hover {
-    background-color: #ac76c5;
+  &:hover,
+  &:focus-visible {
+    color: $app-primary-color;
+    background-color: #f3ecf6;
+    border-color: $app-primary-color;
+    outline: none;
   }
 }
 
@@ -1067,4 +1117,20 @@ export default {
 .multi-container {
   --el-color-primary: #8300bf;
 }
+
+.el-popper.flatmap-open-new-view-tooltip,
+.el-popper.flatmap-species-option-tooltip {
+  padding: 6px 8px;
+  font-size: 12px;
+  color: rgb(48, 49, 51);
+  background-color: #f3ecf6;
+  border: 1px solid $app-primary-color;
+  white-space: nowrap;
+  font-family: $font-family;
+
+  .el-popper__arrow::before {
+    background-color: #f3ecf6;
+    border-color: $app-primary-color;
+  }
+}
 </style>

From 92353e80ef1978b9e410580fac691c80d942aa69 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 28 Sep 2026 12:49:00 +1300
Subject: [PATCH 3/6] Update change species dropdown styles

---
 src/components/MultiFlatmapVuer.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 50afd55e..40dec7bb 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -1035,13 +1035,15 @@ export default {
 .option-label {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
   width: 100%;
 }
 
 .option-title {
   flex: 1;
   min-width: 0;
+  padding: 0 8px;
+  cursor: pointer;
 }
 
 .open-new-view-button {
@@ -1053,6 +1055,7 @@ export default {
   width: 24px;
   height: 24px;
   padding: 0;
+  margin-right: 8px;
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: transparent;
@@ -1063,11 +1066,6 @@ export default {
     background-color 0.2s ease,
     border-color 0.2s ease;
 
-  .el-select-dropdown__item.is-hovering &,
-  .el-select-dropdown__item:hover & {
-    color: $app-primary-color;
-  }
-
   &:hover,
   &:focus-visible {
     color: $app-primary-color;
@@ -1077,11 +1075,18 @@ export default {
   }
 }
 
-.flatmap-dropdown {
-  min-width: 220px !important;
+:deep(.flatmap-dropdown) {
   .el-select-dropdown__item {
     white-space: nowrap;
     text-align: left;
+    padding: 0;
+
+    &.is-hovering,
+    &:hover {
+      color: $app-primary-color;
+      cursor: default;
+    }
+
     &.selected {
       color: $app-primary-color;
       font-weight: normal;

From 639d1a13b007824dd8a63cba91db49b0304770b5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 28 Sep 2026 14:48:03 +1300
Subject: [PATCH 4/6] Remove tooltip for current active species

---
 src/components/MultiFlatmapVuer.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 40dec7bb..74f18411 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -26,9 +26,8 @@
             <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
               <span class="option-label">
                 <el-tooltip
-                  :content="
-                    activeSpecies === key ? `Currently viewing ${key}` : `Change species to ${key}`
-                  "
+                  v-if="activeSpecies !== key"
+                  :content="`Change species to ${key}`"
                   placement="top"
                   effect="light"
                   :show-after="200"
@@ -41,6 +40,12 @@
                     {{ key }}
                   </span>
                 </el-tooltip>
+                <span v-else class="option-title">
+                  <span class="select-box-icon">
+                    <i :class="item.iconClass"></i>
+                  </span>
+                  {{ key }}
+                </span>
                 <el-tooltip
                   v-if="enableOpenMapUI"
                   :content="`Open ${key} in a new view`"

From d41e688206958aaedbc6cb819f78d3f1053bb161 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 29 Sep 2026 10:54:01 +1300
Subject: [PATCH 5/6] Update cursor style for active species in select dropdown

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

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 74f18411..f4351f77 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -40,7 +40,7 @@
                     {{ key }}
                   </span>
                 </el-tooltip>
-                <span v-else class="option-title">
+                <span v-else class="option-title active-species">
                   <span class="select-box-icon">
                     <i :class="item.iconClass"></i>
                   </span>
@@ -1049,6 +1049,10 @@ export default {
   min-width: 0;
   padding: 0 8px;
   cursor: pointer;
+
+  &.active-species {
+    cursor: default;
+  }
 }
 
 .open-new-view-button {

From 66dada0ce689798148cf0d1121e47dfac0455cd5 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 2 Oct 2026 12:01:11 +1300
Subject: [PATCH 6/6] Update map-utilities to latest version to fix
 connectivity references bug

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

diff --git a/package-lock.json b/package-lock.json
index 9e47c599..56eca0ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.17.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@abi-software/map-utilities": "1.11.0",
+        "@abi-software/map-utilities": "1.12.0",
         "@abi-software/sparc-annotation": "0.3.2",
         "@abi-software/svg-sprite": "1.4.0",
         "@element-plus/icons-vue": "^2.3.2",
@@ -57,9 +57,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.11.0.tgz",
-      "integrity": "sha512-ojjba8Ur1/rG7Va5C1opwBL+rKprhxNQclEZ+7hePZXk333YEInG66GkhRO1/+/UUE/1njwjdINDy9v16FoYVw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.12.0.tgz",
+      "integrity": "sha512-Fzvy8bL/QnlN301SBRbydb7n2ukuoPaqP1etTt61Zdx/u5kQlCW+Jj0lvWcc1+KgcVTFDDMjdNjezgG2TyBrBw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@abi-software/svg-sprite": "1.4.0",
diff --git a/package.json b/package.json
index 73303d75..59275985 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "1.11.0",
+    "@abi-software/map-utilities": "1.12.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",
@@ -63,7 +63,6 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^6.0.8",
-    "unplugin-vue-components": "^32.1.0",
     "@vuese/markdown-render": "^2.11.3",
     "auto-changelog": "^2.6.0",
     "chokidar": "^5.0.0",
@@ -74,14 +73,15 @@
     "cypress-wait-until": "^3.0.2",
     "eslint": "^10.9.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-cypress": "^7.0.0",
+    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
     "mochawesome": "^8.0.1",
     "prettier": "3.9.6",
     "sass": "^1.103.1",
     "unplugin-auto-import": "^21.1.0",
+    "unplugin-vue-components": "^32.1.0",
     "vite": "^8.2.1",
     "vitepress": "^1.6.4",
     "vue-docgen-api": "^4.79.2"