From 4670afc6773f98ed481ca34a2f1c38e4f3692ea8 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 5 Sep 2024 16:12:54 +1200
Subject: [PATCH 01/28] Add ImageThumbnails component in Sidebar

---
 src/components.d.ts                |   2 +
 src/components/ImageThumbnails.vue | 118 +++++++++++++++++++++++++++++
 src/components/SideBar.vue         |  19 ++++-
 src/components/Tabs.vue            |   2 +-
 4 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ImageThumbnails.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index ba5eedf9..8eeff507 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -27,6 +28,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
+    ImageThumbnails: typeof import('./components/ImageThumbnails.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
new file mode 100644
index 00000000..f01961bf
--- /dev/null
+++ b/src/components/ImageThumbnails.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="dataset-card-container">
+    <div class="dataset-card" v-for="imageThumbnail in imageThumbnails">
+      <div class="card">
+        <div class="card-left">
+          <!-- <ImageGallery
+            v-if="!loading && discoverId"
+            :datasetId="discoverId"
+            :datasetVersion="version"
+            :entry="entry"
+            :envVars="envVars"
+            :label="label"
+            :datasetThumbnail="thumbnail"
+            :dataset-biolucida="biolucidaData"
+            :category="currentCategory"
+            @card-clicked="galleryClicked"
+            @datalink-clicked="galleryDatalinkClicked"
+          /> -->
+        </div>
+        <div class="card-right">
+          <div class="title">
+            {{ imageThumbnail.title }}
+          </div>
+          <!-- TODO: to replace with different data -->
+          <div class="details" v-if="imageThumbnail.details">
+            {{ imageThumbnail.details }}
+          </div>
+          <!-- Copy to clipboard button container -->
+          <div class="float-button-container">
+            <!-- <CopyToClipboard :content="copyContent" /> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CopyToClipboard } from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
+import ImageGallery from './ImageGallery.vue';
+
+  export default {
+    name: 'ImageThumbnails',
+    components: {
+      ImageGallery,
+      CopyToClipboard,
+    },
+    props: {
+      /**
+       * The image thumbnails data to show in sidebar.
+       */
+       imageThumbnails: {
+        type: Array,
+        default: [],
+      },
+    },
+    mounted: function() {
+      console.log('image thumbnail mounted', this.imageThumbnails)
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.dataset-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 1rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.dataset-card {
+  padding-left: 5px;
+  padding-right: 5px;
+  position: relative;
+  min-height: 17rem;
+}
+
+.card {
+  position: relative;
+  display: flex;
+}
+
+.card-left {
+  flex: 1;
+}
+
+.card-right {
+  flex: 1.3;
+  padding-left: 6px;
+}
+
+.title {
+  padding-bottom: 0.75rem;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+  cursor: pointer;
+}
+
+.details {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index ed69cd05..993990d6 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -39,6 +39,13 @@
                 @show-connectivity="showConnectivity"
               />
             </template>
+            <template v-else-if="tab.type === 'images'">
+              <ImageThumbnails
+                v-if="imageThumbnails.length"
+                v-show="tab.id === activeTabId"
+                :imageThumbnails="imageThumbnails"
+              />
+            </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
@@ -68,6 +75,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
+import ImageThumbnails from './ImageThumbnails.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -81,6 +89,7 @@ export default {
     Drawer,
     Icon,
     ConnectivityInfo,
+    ImageThumbnails,
   },
   name: 'SideBar',
   props: {
@@ -108,7 +117,8 @@ export default {
       type: Array,
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
-        { id: 2, title: 'Connectivity', type: 'connectivity' }
+        { id: 2, title: 'Connectivity', type: 'connectivity' },
+        { id: 3, title: 'Images', type: 'images' }, // Temporary
       ],
     },
     /**
@@ -132,6 +142,13 @@ export default {
       type: Object,
       default: null,
     },
+    /**
+     * The image thumbnails data to show in sidebar.
+     */
+     imageThumbnails: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 676a1921..d3c3ba3c 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.type === 'connectivity' || title.type === 'images'"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"

From 64f047788478be2f2f8a9af7e0bef78e9ff92031 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 5 Sep 2024 17:45:12 +1200
Subject: [PATCH 02/28] Show images tab in sidebar for image thumbnails

---
 src/components/SideBar.vue |  4 +++-
 src/components/Tabs.vue    | 21 ++++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 993990d6..f46d8cfa 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -22,9 +22,11 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && connectivityInfo"
+            v-if="tabs.length > 1 && (connectivityInfo || imageThumbnails.length)"
             :tabTitles="tabs"
             :activeId="activeTabId"
+            :hasConnectivityInfo="!!connectivityInfo"
+            :hasImageThumbnails="!!imageThumbnails.length"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index d3c3ba3c..a40dafbb 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -2,7 +2,7 @@
   <div class="tab-container">
     <div
       class="title"
-      v-for="title in tabTitles"
+      v-for="title in titles"
       :key="title.id"
       :class="{ 'active-tab': title.id == activeId }"
     >
@@ -42,6 +42,25 @@ export default {
       type: Number,
       default: 1,
     },
+    hasConnectivityInfo: {
+      type: Boolean,
+      default: true,
+    },
+    hasImageThumbnails: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    titles: function() {
+      if (!this.hasConnectivityInfo) {
+        return this.tabTitles.filter((tab) => tab.type !== 'connectivity');
+      }
+      else if (!this.hasImageThumbnails) {
+        return this.tabTitles.filter((tab) => tab.type !== 'images');
+      }
+      return this.tabTitles;
+    },
   },
   methods: {
     titleClicked: function (id, type) {

From 51a29aa3f6e10c4f85ea7ea7022d08c0b5e81e71 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 6 Sep 2024 13:50:48 +1200
Subject: [PATCH 03/28] Show image thumbnails with species filter

---
 src/components/ImageThumbnails.vue        | 213 +++++++++++++++++++---
 src/components/ImageThumbnailsGallery.vue | 170 +++++++++++++++++
 src/components/SideBar.vue                |   7 +
 src/components/Tabs.vue                   |   1 +
 4 files changed, 365 insertions(+), 26 deletions(-)
 create mode 100644 src/components/ImageThumbnailsGallery.vue

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index f01961bf..f4b0da57 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -1,34 +1,47 @@
 <template>
   <div class="dataset-card-container">
-    <div class="dataset-card" v-for="imageThumbnail in imageThumbnails">
+    <div class="filters">
+      <el-tag
+        v-for="(species, index) in speciesFilterTags"
+        :key="index"
+        type="info"
+        class="tag"
+        :class="{ 'active-tag': species.name === activeSpecies.name }"
+        :closable="species.name === activeSpecies.name"
+        @close="removeSpeciesFilterTag"
+        @click="filterBySpecies(species)"
+      >
+        {{ species.name }} ({{ species.count }})
+      </el-tag>
+    </div>
+    <div class="dataset-card" v-for="imageThumbnail in imageItems">
       <div class="card">
         <div class="card-left">
-          <!-- <ImageGallery
-            v-if="!loading && discoverId"
-            :datasetId="discoverId"
-            :datasetVersion="version"
-            :entry="entry"
-            :envVars="envVars"
-            :label="label"
-            :datasetThumbnail="thumbnail"
-            :dataset-biolucida="biolucidaData"
-            :category="currentCategory"
-            @card-clicked="galleryClicked"
-            @datalink-clicked="galleryDatalinkClicked"
-          /> -->
+          <a :href="imageThumbnail.link" class="card-image">
+            <el-image :src="imageThumbnail.imgSrc" loading="lazy">
+              <template #error>
+                <div class="image-slot">Loading...</div>
+              </template>
+            </el-image>
+          </a>
         </div>
         <div class="card-right">
-          <div class="title">
-            {{ imageThumbnail.title }}
-          </div>
+          <a class="title" :href="imageThumbnail.link">
+            {{ formattedTitle(imageThumbnail) }}
+          </a>
           <!-- TODO: to replace with different data -->
           <div class="details" v-if="imageThumbnail.details">
             {{ imageThumbnail.details }}
           </div>
-          <!-- Copy to clipboard button container -->
-          <div class="float-button-container">
-            <!-- <CopyToClipboard :content="copyContent" /> -->
+          <div class="details">
+            <a class="button el-button" :href="imageThumbnail.link">
+              View {{ imageThumbnail.type }}
+            </a>
           </div>
+          <!-- Copy to clipboard button container -->
+          <!-- <div class="float-button-container">
+            <CopyToClipboard :content="copyContent" />
+          </div> -->
         </div>
       </div>
     </div>
@@ -36,14 +49,18 @@
 </template>
 
 <script>
+import { ElImage } from 'element-plus';
+import { ElTag as Tag } from "element-plus";
 import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
-import ImageGallery from './ImageGallery.vue';
+
+const BASE64PREFIX = 'data:image/png;base64,';
 
   export default {
     name: 'ImageThumbnails',
     components: {
-      ImageGallery,
+      Tag,
+      ElImage,
       CopyToClipboard,
     },
     props: {
@@ -55,18 +72,123 @@ import ImageGallery from './ImageGallery.vue';
         default: [],
       },
     },
-    mounted: function() {
-      console.log('image thumbnail mounted', this.imageThumbnails)
-    }
+    data: function () {
+      return {
+        activeSpecies: { name: "" },
+        speciesFilterTags: [],
+        imageItems: [],
+        showImageGallery: false,
+      };
+    },
+    computed: {
+      imageStyle() {
+        return {
+          width: "180px",
+          height: "135px",
+        };
+      },
+    },
+    mounted: function () {
+      this.imageThumbnails.forEach((imageThumbnail) => {
+        return this.mapImage(imageThumbnail)
+      });
+      this.populateFilterTags();
+      this.imageItems = this.imageThumbnails;
+    },
+    watch: {
+      imageThumbnails: {
+        handler: function (value) {
+          if (value) {
+            this.populateFilterTags();
+            this.imageItems = this.imageThumbnails;
+          }
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      formattedTitle: function(imageThumbnail) {
+        const type = imageThumbnail.mimetype?.split('/')[1];
+        const title = imageThumbnail.title;
+        let formattedTitle = '';
+        if (type !== 'jpg') {
+          formattedTitle = title.replace('.' + type, '');
+        }
+        formattedTitle = formattedTitle.replaceAll('_', ' ');
+        return formattedTitle;
+      },
+      mapImage: async function (image) {
+        const imgSrc = await this.transformedImage(image.thumbnail);
+        if (imgSrc) {
+          image.imgSrc = imgSrc;
+        }
+      },
+      transformedImage: async function(imgUrl) {
+        try {
+          const response = await fetch(imgUrl);
+          if (!response.ok) {
+            return null;
+          }
+          const data = await response.text();
+          return BASE64PREFIX + data;
+        } catch (error) {
+          return null;
+        }
+      },
+      removeSpeciesFilterTag: function () {
+        this.activeSpecies = { name: "" };
+        this.imageItems = this.imageThumbnails;
+      },
+      filterBySpecies: function (tagInfo) {
+        this.activeSpecies = tagInfo;
+        let filteredImageItems = [];
+        this.imageThumbnails.forEach((image) => {
+          if (image.species && image.species.length) {
+            image.species.forEach((species) => {
+              if (species === tagInfo.name) {
+                filteredImageItems.push(image);
+              }
+            });
+          }
+        });
+        this.imageItems = filteredImageItems;
+      },
+      populateFilterTags: function () {
+        let imageObjects = {};
+        this.imageThumbnails.forEach((image) => {
+          if (image.species && image.species.length) {
+            image.species.forEach((species) => {
+              if (!(species in imageObjects)) {
+                imageObjects[species] = {
+                  name: species,
+                  count: 0,
+                };
+              }
+              imageObjects[species].count++;
+            });
+          }
+        });
+        this.speciesFilterTags = Object.values(imageObjects);
+      },
+    },
   }
 </script>
 
 <style lang="scss" scoped>
 .dataset-card-container {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  background-color: #f7faff;
+  border-left: 1px solid var(--el-border-color);
+  border-top: 1px solid var(--el-border-color);
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 1rem;
+  height: 100%;
   overflow-y: auto;
   scrollbar-width: thin;
 }
@@ -75,7 +197,7 @@ import ImageGallery from './ImageGallery.vue';
   padding-left: 5px;
   padding-right: 5px;
   position: relative;
-  min-height: 17rem;
+  min-height: 12rem;
 }
 
 .card {
@@ -92,6 +214,34 @@ import ImageGallery from './ImageGallery.vue';
   padding-left: 6px;
 }
 
+.card-image {
+  display: block;
+  text-decoration: none;
+  outline: none;
+
+  .el-image {
+    display: block;
+    width: 200px;
+    height: 150px;
+
+    :deep(img) {
+      aspect-ratio: 4/3;
+      object-fit: cover;
+    }
+  }
+
+  .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: var(--el-fill-color-light);
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+  }
+}
+
 .title {
   padding-bottom: 0.75rem;
   font-family: Asap;
@@ -115,4 +265,15 @@ import ImageGallery from './ImageGallery.vue';
   letter-spacing: 1.05px;
   color: #484848;
 }
+
+.tag {
+  margin-right: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+
+.active-tag {
+  background-color: $app-primary-color;
+  color: #fff;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/ImageThumbnailsGallery.vue b/src/components/ImageThumbnailsGallery.vue
new file mode 100644
index 00000000..a581e0bf
--- /dev/null
+++ b/src/components/ImageThumbnailsGallery.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="main">
+    <div v-if="imageEntry">
+      <el-tag
+        v-for="(species, index) in speciesFilterTags"
+        :key="index"
+        type="info"
+        class="tag"
+        :class="{ 'active-tag': species.name === activeSpecies.name }"
+        :closable="species.name === activeSpecies.name"
+        @close="removeSpeciesFilterTag"
+        @click="filterBySpecies(species)"
+      >
+        {{ species.name }} ({{ species.count }})
+      </el-tag>
+      <div class="gallery-container">
+        <Gallery :items="imageItems" :imageStyle="imageStyle" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { ElTag as Tag } from "element-plus";
+
+import Gallery from "@abi-software/gallery";
+import "@abi-software/gallery/dist/style.css";
+
+export default {
+  name: "ImageThumbnailsGallery",
+  components: {
+    Tag,
+    Gallery,
+  },
+  props: {
+    imageEntry: {
+      type: Array,
+      default: [],
+    },
+  },
+  data: function () {
+    return {
+      activeSpecies: { name: "" },
+      speciesFilterTags: [],
+      imageItems: [],
+      showImageGallery: false,
+    };
+  },
+  computed: {
+    imageStyle() {
+      return {
+        width: "180px",
+        height: "135px",
+      };
+    },
+  },
+  watch: {
+    imageEntry: {
+      handler: function (value) {
+        if (value) {
+          this.populateFilterTags();
+          this.imageItems = this.imageEntry;
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    removeSpeciesFilterTag: function () {
+      this.activeSpecies = { name: "" };
+      this.imageItems = this.imageEntry;
+    },
+    filterBySpecies: function (tagInfo) {
+      this.activeSpecies = tagInfo;
+      let filteredImageItems = [];
+      this.imageEntry.forEach((image) => {
+        if (image.species && image.species.length) {
+          image.species.forEach((species) => {
+            if (species === tagInfo.name) {
+              filteredImageItems.push(image);
+            }
+          });
+        }
+      });
+      this.imageItems = filteredImageItems;
+    },
+    populateFilterTags: function () {
+      let imageObjects = {};
+      this.imageEntry.forEach((image) => {
+        if (image.species && image.species.length) {
+          image.species.forEach((species) => {
+            if (!(species in imageObjects)) {
+              imageObjects[species] = {
+                name: species,
+                count: 0,
+              };
+            }
+            imageObjects[species].count++;
+          });
+        }
+      });
+      this.speciesFilterTags = Object.values(imageObjects);
+    },
+  },
+  mounted: function () {
+    this.populateFilterTags();
+    this.imageItems = this.imageEntry;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.block {
+  margin-bottom: 0.5em;
+}
+
+.tag {
+  margin-right: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+
+.active-tag {
+  background-color: $app-primary-color;
+  color: #fff;
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  padding: 1em !important;
+  overflow: hidden;
+  min-width: 18rem;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
+.gallery-container {
+  :deep(.gallery) {
+    .gallery-strip {
+      padding: 1rem 0;
+    }
+
+    > div {
+      min-height: max-content !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index f46d8cfa..2c8d7dd3 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -47,6 +47,11 @@
                 v-show="tab.id === activeTabId"
                 :imageThumbnails="imageThumbnails"
               />
+              <!-- <ImageThumbnailsGallery
+                v-if="imageThumbnails.length"
+                v-show="tab.id === activeTabId"
+                :imageEntry="imageThumbnails"
+              /> -->
             </template>
             <template v-else>
             <SidebarContent
@@ -78,6 +83,7 @@ import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
 import ImageThumbnails from './ImageThumbnails.vue'
+import ImageThumbnailsGallery from './ImageThumbnailsGallery.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -92,6 +98,7 @@ export default {
     Icon,
     ConnectivityInfo,
     ImageThumbnails,
+    ImageThumbnailsGallery,
   },
   name: 'SideBar',
   props: {
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index a40dafbb..c2d10fed 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -92,6 +92,7 @@ $tab-height: 30px;
   align-items: center;
   position: relative;
   cursor: pointer;
+  z-index: 1;
 }
 
 .title-text {

From 8736f4e38914e5c8baef453580cbd9be79d5a9a1 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 9 Sep 2024 12:36:24 +1200
Subject: [PATCH 04/28] Emit close event for imageThumbnail Tab

---
 src/components.d.ts                |   2 +
 src/components/ImageThumbnails.vue | 125 ++++++++++++++++++++---------
 src/components/SideBar.vue         |   7 +-
 src/components/Tabs.vue            |   2 +-
 4 files changed, 97 insertions(+), 39 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 8eeff507..9a7122a3 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -29,6 +30,7 @@ declare module 'vue' {
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     ImageThumbnails: typeof import('./components/ImageThumbnails.vue')['default']
+    ImageThumbnailsGallery: typeof import('./components/ImageThumbnailsGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index f4b0da57..4c9e5f0e 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dataset-card-container">
+  <div class="image-thumbnails-container">
     <div class="filters">
       <el-tag
         v-for="(species, index) in speciesFilterTags"
@@ -14,34 +14,38 @@
         {{ species.name }} ({{ species.count }})
       </el-tag>
     </div>
-    <div class="dataset-card" v-for="imageThumbnail in imageItems">
-      <div class="card">
-        <div class="card-left">
-          <a :href="imageThumbnail.link" class="card-image">
-            <el-image :src="imageThumbnail.imgSrc" loading="lazy">
-              <template #error>
-                <div class="image-slot">Loading...</div>
-              </template>
-            </el-image>
-          </a>
-        </div>
-        <div class="card-right">
-          <a class="title" :href="imageThumbnail.link">
-            {{ formattedTitle(imageThumbnail) }}
-          </a>
-          <!-- TODO: to replace with different data -->
-          <div class="details" v-if="imageThumbnail.details">
-            {{ imageThumbnail.details }}
-          </div>
-          <div class="details">
-            <a class="button el-button" :href="imageThumbnail.link">
-              View {{ imageThumbnail.type }}
+    <div class="dataset-card-container">
+      <div class="dataset-card" v-for="imageThumbnail in imageItems">
+        <div class="card" :key="imageThumbnail.link">
+          <div class="card-left">
+            <a :href="imageThumbnail.link" class="card-image card-button-link">
+              <el-image :src="imageThumbnail.imgSrc" loading="lazy">
+                <template #error>
+                  <div class="image-slot">Loading...</div>
+                </template>
+              </el-image>
             </a>
           </div>
-          <!-- Copy to clipboard button container -->
-          <!-- <div class="float-button-container">
-            <CopyToClipboard :content="copyContent" />
-          </div> -->
+          <div class="card-right">
+            <div class="details">
+              <a class="title card-button-link" :href="imageThumbnail.link">
+                {{ formattedTitle(imageThumbnail) }}
+              </a>
+            </div>
+            <!-- TODO: to replace with different data -->
+            <div class="details" v-if="imageThumbnail.details">
+              {{ imageThumbnail.details }}
+            </div>
+            <div class="details">
+              <a class="button el-button card-button-link" :href="imageThumbnail.link">
+                View {{ imageThumbnail.type }}
+              </a>
+            </div>
+            <!-- Copy to clipboard button container -->
+            <!-- <div class="float-button-container">
+              <CopyToClipboard :content="copyContent" />
+            </div> -->
+          </div>
         </div>
       </div>
     </div>
@@ -89,9 +93,7 @@ const BASE64PREFIX = 'data:image/png;base64,';
       },
     },
     mounted: function () {
-      this.imageThumbnails.forEach((imageThumbnail) => {
-        return this.mapImage(imageThumbnail)
-      });
+      this.injectImgSrc();
       this.populateFilterTags();
       this.imageItems = this.imageThumbnails;
     },
@@ -99,6 +101,7 @@ const BASE64PREFIX = 'data:image/png;base64,';
       imageThumbnails: {
         handler: function (value) {
           if (value) {
+            this.injectImgSrc();
             this.populateFilterTags();
             this.imageItems = this.imageThumbnails;
           }
@@ -107,6 +110,11 @@ const BASE64PREFIX = 'data:image/png;base64,';
       },
     },
     methods: {
+      injectImgSrc: function() {
+        this.imageThumbnails.forEach((imageThumbnail) => {
+          return this.mapImage(imageThumbnail);
+        });
+      },
       formattedTitle: function(imageThumbnail) {
         const type = imageThumbnail.mimetype?.split('/')[1];
         const title = imageThumbnail.title;
@@ -175,7 +183,7 @@ const BASE64PREFIX = 'data:image/png;base64,';
 </script>
 
 <style lang="scss" scoped>
-.dataset-card-container {
+.image-thumbnails-container {
   font-size: 14px;
   text-align: left;
   line-height: 1.5em;
@@ -184,13 +192,39 @@ const BASE64PREFIX = 'data:image/png;base64,';
   background-color: #f7faff;
   border-left: 1px solid var(--el-border-color);
   border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  z-index: 1;
+}
+
+.filters {
+  position: sticky;
+  top: 0;
+  padding: 1rem;
+  background-color: #f7faff;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 5px;
+
+  .tag {
+    cursor: pointer;
+  }
+}
+
+.dataset-card-container {
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 1rem;
-  height: 100%;
   overflow-y: auto;
   scrollbar-width: thin;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  border-left: 0;
+  background-color: #ffffff;
 }
 
 .dataset-card {
@@ -212,6 +246,9 @@ const BASE64PREFIX = 'data:image/png;base64,';
 .card-right {
   flex: 1.3;
   padding-left: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .card-image {
@@ -266,14 +303,28 @@ const BASE64PREFIX = 'data:image/png;base64,';
   color: #484848;
 }
 
-.tag {
-  margin-right: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
+.active-tag {
+  background-color: $app-primary-color;
+  color: #fff;
 }
 
-.active-tag {
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
+  & + .button {
+    margin-top: 10px !important;
+  }
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
+.card-button-link {
+  text-decoration: none;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 2c8d7dd3..97b099e4 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -286,7 +286,12 @@ export default {
       this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
-      this.$emit('connectivity-info-close');
+      const closedTab = this.tabs.find((tab) => tab.id === id);
+      if (closedTab.type === 'connectivity') {
+        this.$emit('connectivity-info-close');
+      } else if (closedTab.type === 'images') {
+        this.$emit('image-thumbnail-close');
+      }
     },
   },
   created: function () {
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index c2d10fed..0803dbeb 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -92,7 +92,7 @@ $tab-height: 30px;
   align-items: center;
   position: relative;
   cursor: pointer;
-  z-index: 1;
+  z-index: 2;
 }
 
 .title-text {

From b00644843d0849ecdaea4e1bab943d2f1958d00f Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 9 Sep 2024 16:55:12 +1200
Subject: [PATCH 05/28] Add dataset URL inn imageThumbnails sidebar

---
 src/components/ImageThumbnails.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 4c9e5f0e..2487d78f 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -18,7 +18,7 @@
       <div class="dataset-card" v-for="imageThumbnail in imageItems">
         <div class="card" :key="imageThumbnail.link">
           <div class="card-left">
-            <a :href="imageThumbnail.link" class="card-image card-button-link">
+            <a :href="imageThumbnail.link" class="card-image card-button-link" target="_blank">
               <el-image :src="imageThumbnail.imgSrc" loading="lazy">
                 <template #error>
                   <div class="image-slot">Loading...</div>
@@ -28,17 +28,13 @@
           </div>
           <div class="card-right">
             <div class="details">
-              <a class="title card-button-link" :href="imageThumbnail.link">
+              <a class="title card-button-link" :href="imageThumbnail.link" target="_blank">
                 {{ formattedTitle(imageThumbnail) }}
               </a>
             </div>
-            <!-- TODO: to replace with different data -->
-            <div class="details" v-if="imageThumbnail.details">
-              {{ imageThumbnail.details }}
-            </div>
             <div class="details">
-              <a class="button el-button card-button-link" :href="imageThumbnail.link">
-                View {{ imageThumbnail.type }}
+              <a class="button el-button el-button--large card-button-link" :href="datasetURL(imageThumbnail.id)" target="_blank">
+                View Dataset {{ imageThumbnail.id }}
               </a>
             </div>
             <!-- Copy to clipboard button container -->
@@ -125,6 +121,9 @@ const BASE64PREFIX = 'data:image/png;base64,';
         formattedTitle = formattedTitle.replaceAll('_', ' ');
         return formattedTitle;
       },
+      datasetURL: function(id) {
+        return `https://sparc.science/datasets/${id}?type=dataset`;
+      },
       mapImage: async function (image) {
         const imgSrc = await this.transformedImage(image.thumbnail);
         if (imgSrc) {
@@ -312,8 +311,10 @@ const BASE64PREFIX = 'data:image/png;base64,';
   margin-left: 0px !important;
   margin-top: 0px !important;
   font-size: 14px !important;
+  letter-spacing: initial;
   background-color: $app-primary-color;
   color: #fff;
+
   & + .button {
     margin-top: 10px !important;
   }

From dfa3e15a06f0af4887e889a930dfee51e1ae321f Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 9 Sep 2024 17:44:39 +1200
Subject: [PATCH 06/28] Add view selector in imageThumbnail on sidebar

---
 src/components/ImageThumbnails.vue | 125 ++++++++++++++++++++++++-----
 src/components/SideBar.vue         |   7 --
 2 files changed, 103 insertions(+), 29 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 2487d78f..f9ae14d0 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -1,20 +1,39 @@
 <template>
   <div class="image-thumbnails-container">
-    <div class="filters">
-      <el-tag
-        v-for="(species, index) in speciesFilterTags"
-        :key="index"
-        type="info"
-        class="tag"
-        :class="{ 'active-tag': species.name === activeSpecies.name }"
-        :closable="species.name === activeSpecies.name"
-        @close="removeSpeciesFilterTag"
-        @click="filterBySpecies(species)"
-      >
-        {{ species.name }} ({{ species.count }})
-      </el-tag>
+    <div class="toolbar">
+      <div class="filters">
+        <el-tag
+          v-for="(species, index) in speciesFilterTags"
+          :key="index"
+          type="info"
+          class="tag"
+          :class="{ 'active-tag': species.name === activeSpecies.name }"
+          :closable="species.name === activeSpecies.name"
+          @close="removeSpeciesFilterTag"
+          @click="filterBySpecies(species)"
+        >
+          {{ species.name }} ({{ species.count }})
+        </el-tag>
+      </div>
+      <div class="view-selector">
+        <el-select
+          v-model="viewOption"
+          placeholder="Select view"
+          popper-class="view-selector-select-popper"
+        >
+          <el-option
+            v-for="item in viewOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="gallery-container" v-if="viewOption === 'gallery'">
+      <Gallery :items="imageItems" :imageStyle="imageStyle" />
     </div>
-    <div class="dataset-card-container">
+    <div class="dataset-card-container" v-if="viewOption === 'list'">
       <div class="dataset-card" v-for="imageThumbnail in imageItems">
         <div class="card" :key="imageThumbnail.link">
           <div class="card-left">
@@ -49,18 +68,37 @@
 </template>
 
 <script>
-import { ElImage } from 'element-plus';
-import { ElTag as Tag } from "element-plus";
+import {
+  ElImage,
+  ElTag as Tag,
+  ElOption as Option,
+  ElSelect as Select,
+} from 'element-plus';
 import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
+import Gallery from "@abi-software/gallery";
+import "@abi-software/gallery/dist/style.css";
 
 const BASE64PREFIX = 'data:image/png;base64,';
+const VIEW_OPTIONS = [
+  {
+    value: 'list',
+    label: 'List'
+  },
+  {
+    value: 'gallery',
+    label: 'Gallery'
+  }
+];
 
   export default {
     name: 'ImageThumbnails',
     components: {
       Tag,
+      Option,
+      Select,
       ElImage,
+      Gallery,
       CopyToClipboard,
     },
     props: {
@@ -78,6 +116,8 @@ const BASE64PREFIX = 'data:image/png;base64,';
         speciesFilterTags: [],
         imageItems: [],
         showImageGallery: false,
+        viewOption: 'list',
+        viewOptions: VIEW_OPTIONS,
       };
     },
     computed: {
@@ -197,12 +237,20 @@ const BASE64PREFIX = 'data:image/png;base64,';
   z-index: 1;
 }
 
-.filters {
-  position: sticky;
-  top: 0;
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   padding: 1rem;
+  gap: 1rem;
   background-color: #f7faff;
+  position: sticky;
+  top: 0;
   z-index: 1;
+}
+
+.filters {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -213,10 +261,13 @@ const BASE64PREFIX = 'data:image/png;base64,';
   }
 }
 
+.view-selector .el-select {
+  width: 100px;
+  font-family: inherit;
+}
+
+.gallery-container,
 .dataset-card-container {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
   padding: 1rem;
   overflow-y: auto;
   scrollbar-width: thin;
@@ -226,6 +277,24 @@ const BASE64PREFIX = 'data:image/png;base64,';
   background-color: #ffffff;
 }
 
+.gallery-container {
+  :deep(.gallery) {
+    .gallery-strip {
+      padding: 1rem 0;
+    }
+
+    > div {
+      min-height: max-content !important;
+    }
+  }
+}
+
+.dataset-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
 .dataset-card {
   padding-left: 5px;
   padding-right: 5px;
@@ -328,4 +397,16 @@ const BASE64PREFIX = 'data:image/png;base64,';
 .card-button-link {
   text-decoration: none;
 }
+</style>
+
+<style lang="scss">
+  .view-selector-select-popper {
+    font-family: Asap, sans-serif, Helvetica;
+    font-size: 14px;
+    color: #292b66;
+
+    .el-select-dropdown__item.is-selected {
+      color: $app-primary-color;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 97b099e4..f61e2262 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -47,11 +47,6 @@
                 v-show="tab.id === activeTabId"
                 :imageThumbnails="imageThumbnails"
               />
-              <!-- <ImageThumbnailsGallery
-                v-if="imageThumbnails.length"
-                v-show="tab.id === activeTabId"
-                :imageEntry="imageThumbnails"
-              /> -->
             </template>
             <template v-else>
             <SidebarContent
@@ -83,7 +78,6 @@ import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
 import ImageThumbnails from './ImageThumbnails.vue'
-import ImageThumbnailsGallery from './ImageThumbnailsGallery.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -98,7 +92,6 @@ export default {
     Icon,
     ConnectivityInfo,
     ImageThumbnails,
-    ImageThumbnailsGallery,
   },
   name: 'SideBar',
   props: {

From ceede3718255d2530d0104d790f64677e409d29d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 9 Sep 2024 20:12:03 +1200
Subject: [PATCH 07/28] Update ImageThumbnails on sidebar UI

---
 src/components/ImageThumbnails.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index f9ae14d0..08f1c136 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -233,7 +233,7 @@ const VIEW_OPTIONS = [
   border-top: 1px solid var(--el-border-color);
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% - 30px); // minus tabs height
   z-index: 1;
 }
 
@@ -268,13 +268,16 @@ const VIEW_OPTIONS = [
 
 .gallery-container,
 .dataset-card-container {
+  margin: 1rem;
+  margin-top: 0;
   padding: 1rem;
+  flex-grow: 1;
   overflow-y: auto;
   scrollbar-width: thin;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
   border: solid 1px #e4e7ed;
-  border-left: 0;
   background-color: #ffffff;
+  border-radius: var(--el-border-radius-base);
 }
 
 .gallery-container {
@@ -296,10 +299,12 @@ const VIEW_OPTIONS = [
 }
 
 .dataset-card {
-  padding-left: 5px;
-  padding-right: 5px;
   position: relative;
-  min-height: 12rem;
+
+  + .dataset-card {
+    padding-top: 1rem;
+    border-top: 1px solid var(--el-border-color);
+  }
 }
 
 .card {

From e7cda00f493f34df930657efa854a46aae1cd74d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 10 Sep 2024 10:47:39 +1200
Subject: [PATCH 08/28] Add copy to clipboard feature in image thumbnail
 sidebar

---
 src/components/ImageThumbnails.vue | 74 ++++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 08f1c136..b05567eb 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -57,9 +57,9 @@
               </a>
             </div>
             <!-- Copy to clipboard button container -->
-            <!-- <div class="float-button-container">
-              <CopyToClipboard :content="copyContent" />
-            </div> -->
+            <div class="float-button-container">
+              <CopyToClipboard :content="getCopyContent(imageThumbnail)" />
+            </div>
           </div>
         </div>
       </div>
@@ -217,6 +217,61 @@ const VIEW_OPTIONS = [
         });
         this.speciesFilterTags = Object.values(imageObjects);
       },
+      getCopyContent: function (imageThumbnail) {
+        const contentArray = [];
+
+        // Use <div> instead of <h1>..<h6> or <p>
+        // to avoid default formatting on font size and margin
+
+        // Title
+        if (imageThumbnail.title) {
+          contentArray.push(`<div><strong>${this.formattedTitle(imageThumbnail)}</strong></div>`);
+        }
+
+        // Species
+        if (imageThumbnail.species?.length) {
+          let species = `<div><strong>Species:</strong></div>`;
+          species += `\n`;
+          species += imageThumbnail.species.join(', ');
+          contentArray.push(`<div>${species}</div>`);
+        }
+
+        // Image URL
+        if (imageThumbnail.link) {
+          let thumbnailLink = `<div><strong>Link:</strong></div>`;
+          thumbnailLink += `\n`;
+          thumbnailLink += `<a href="${imageThumbnail.link}">${imageThumbnail.link}</a>`;
+          contentArray.push(`<div>${thumbnailLink}</div>`);
+        }
+
+        // Dataset ID
+        if (imageThumbnail.id) {
+          let datasetIdContent = `<div><strong>Dataset ID:</strong></div>`;
+          datasetIdContent += `\n`;
+          datasetIdContent += `${imageThumbnail.id}`;
+          contentArray.push(`<div>${datasetIdContent}</div>`);
+        }
+
+        // Dataset URL
+        if (imageThumbnail.id) {
+          const datasetURL = this.datasetURL(imageThumbnail.id);
+          let dataLocationContent = `<div><strong>Dataset URL:</strong></div>`;
+          dataLocationContent += `\n`;
+          dataLocationContent += `<a href="${datasetURL}">${datasetURL}</a>`;
+          contentArray.push(`<div>${dataLocationContent}</div>`);
+        }
+
+        // Dataset version
+        if (imageThumbnail.version) {
+          let versionContent = `<div><strong>Dataset version:</strong></div>`;
+          versionContent += `\n`;
+          versionContent += `${imageThumbnail.version}`;
+          contentArray.push(`<div>${versionContent}</div>`);
+        }
+
+        const copyContent = contentArray.join('\n\n<br>');
+        return copyContent;
+      },
     },
   }
 </script>
@@ -402,6 +457,19 @@ const VIEW_OPTIONS = [
 .card-button-link {
   text-decoration: none;
 }
+
+.float-button-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+
+  .dataset-card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>
 
 <style lang="scss">

From 3ac4188e822e390355a83fccbae3bc6a8af38c2f Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 10 Sep 2024 11:53:38 +1200
Subject: [PATCH 09/28] Remove unused file

---
 src/components/ImageThumbnailsGallery.vue | 170 ----------------------
 1 file changed, 170 deletions(-)
 delete mode 100644 src/components/ImageThumbnailsGallery.vue

diff --git a/src/components/ImageThumbnailsGallery.vue b/src/components/ImageThumbnailsGallery.vue
deleted file mode 100644
index a581e0bf..00000000
--- a/src/components/ImageThumbnailsGallery.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div class="main">
-    <div v-if="imageEntry">
-      <el-tag
-        v-for="(species, index) in speciesFilterTags"
-        :key="index"
-        type="info"
-        class="tag"
-        :class="{ 'active-tag': species.name === activeSpecies.name }"
-        :closable="species.name === activeSpecies.name"
-        @close="removeSpeciesFilterTag"
-        @click="filterBySpecies(species)"
-      >
-        {{ species.name }} ({{ species.count }})
-      </el-tag>
-      <div class="gallery-container">
-        <Gallery :items="imageItems" :imageStyle="imageStyle" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import { ElTag as Tag } from "element-plus";
-
-import Gallery from "@abi-software/gallery";
-import "@abi-software/gallery/dist/style.css";
-
-export default {
-  name: "ImageThumbnailsGallery",
-  components: {
-    Tag,
-    Gallery,
-  },
-  props: {
-    imageEntry: {
-      type: Array,
-      default: [],
-    },
-  },
-  data: function () {
-    return {
-      activeSpecies: { name: "" },
-      speciesFilterTags: [],
-      imageItems: [],
-      showImageGallery: false,
-    };
-  },
-  computed: {
-    imageStyle() {
-      return {
-        width: "180px",
-        height: "135px",
-      };
-    },
-  },
-  watch: {
-    imageEntry: {
-      handler: function (value) {
-        if (value) {
-          this.populateFilterTags();
-          this.imageItems = this.imageEntry;
-        }
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    removeSpeciesFilterTag: function () {
-      this.activeSpecies = { name: "" };
-      this.imageItems = this.imageEntry;
-    },
-    filterBySpecies: function (tagInfo) {
-      this.activeSpecies = tagInfo;
-      let filteredImageItems = [];
-      this.imageEntry.forEach((image) => {
-        if (image.species && image.species.length) {
-          image.species.forEach((species) => {
-            if (species === tagInfo.name) {
-              filteredImageItems.push(image);
-            }
-          });
-        }
-      });
-      this.imageItems = filteredImageItems;
-    },
-    populateFilterTags: function () {
-      let imageObjects = {};
-      this.imageEntry.forEach((image) => {
-        if (image.species && image.species.length) {
-          image.species.forEach((species) => {
-            if (!(species in imageObjects)) {
-              imageObjects[species] = {
-                name: species,
-                count: 0,
-              };
-            }
-            imageObjects[species].count++;
-          });
-        }
-      });
-      this.speciesFilterTags = Object.values(imageObjects);
-    },
-  },
-  mounted: function () {
-    this.populateFilterTags();
-    this.imageItems = this.imageEntry;
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.block {
-  margin-bottom: 0.5em;
-}
-
-.tag {
-  margin-right: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
-}
-
-.active-tag {
-  background-color: $app-primary-color;
-  color: #fff;
-}
-
-.main {
-  font-size: 14px;
-  text-align: left;
-  line-height: 1.5em;
-  font-family: Asap, sans-serif, Helvetica;
-  font-weight: 400;
-  /* outline: thin red solid; */
-  padding: 1em !important;
-  overflow: hidden;
-  min-width: 18rem;
-}
-
-.button {
-  margin-left: 0px !important;
-  margin-top: 0px !important;
-  font-size: 14px !important;
-  background-color: $app-primary-color;
-  color: #fff;
-
-  & + .button {
-    margin-top: 10px !important;
-  }
-
-  &:hover {
-    color: #fff !important;
-    background: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
-}
-
-.gallery-container {
-  :deep(.gallery) {
-    .gallery-strip {
-      padding: 1rem 0;
-    }
-
-    > div {
-      min-height: max-content !important;
-    }
-  }
-}
-</style>

From c05ecf3b6fd881ee8a8e084d365838546f78454e Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 10 Sep 2024 11:53:58 +1200
Subject: [PATCH 10/28] Update image thumbnail button links

---
 src/components/ImageThumbnails.vue | 38 ++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index b05567eb..6597a006 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -47,13 +47,18 @@
           </div>
           <div class="card-right">
             <div class="details">
-              <a class="title card-button-link" :href="imageThumbnail.link" target="_blank">
+              <div class="title">
+                <strong>{{ imageThumbnail.type }}</strong>
+              </div>
+            </div>
+            <div class="details">
+              <div>
                 {{ formattedTitle(imageThumbnail) }}
-              </a>
+              </div>
             </div>
             <div class="details">
-              <a class="button el-button el-button--large card-button-link" :href="datasetURL(imageThumbnail.id)" target="_blank">
-                View Dataset {{ imageThumbnail.id }}
+              <a class="button el-button el-button--large card-button-link" :href="imageThumbnail.link" target="_blank">
+                View {{ imageThumbnail.type }}
               </a>
             </div>
             <!-- Copy to clipboard button container -->
@@ -228,6 +233,14 @@ const VIEW_OPTIONS = [
           contentArray.push(`<div><strong>${this.formattedTitle(imageThumbnail)}</strong></div>`);
         }
 
+        // Type
+        if (imageThumbnail.type) {
+          let imageType = `<div><strong>Type:</strong></div>`;
+          imageType += `\n`;
+          imageType += `${imageThumbnail.type}`;
+          contentArray.push(`<div>${imageType}</div>`);
+        }
+
         // Species
         if (imageThumbnail.species?.length) {
           let species = `<div><strong>Species:</strong></div>`;
@@ -281,7 +294,7 @@ const VIEW_OPTIONS = [
   font-size: 14px;
   text-align: left;
   line-height: 1.5em;
-  font-family: Asap, sans-serif, Helvetica;
+  font-family: $font-family;
   font-weight: 400;
   background-color: #f7faff;
   border-left: 1px solid var(--el-border-color);
@@ -318,7 +331,7 @@ const VIEW_OPTIONS = [
 
 .view-selector .el-select {
   width: 100px;
-  font-family: inherit;
+  font-family: $font-family;
 }
 
 .gallery-container,
@@ -350,14 +363,14 @@ const VIEW_OPTIONS = [
 .dataset-card-container {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 1.5rem;
 }
 
 .dataset-card {
   position: relative;
 
   + .dataset-card {
-    padding-top: 1rem;
+    padding-top: 1.5rem;
     border-top: 1px solid var(--el-border-color);
   }
 }
@@ -365,6 +378,7 @@ const VIEW_OPTIONS = [
 .card {
   position: relative;
   display: flex;
+  gap: 1.5rem;
 }
 
 .card-left {
@@ -408,8 +422,7 @@ const VIEW_OPTIONS = [
 }
 
 .title {
-  padding-bottom: 0.75rem;
-  font-family: Asap;
+  font-family: $font-family;
   font-size: 14px;
   font-weight: bold;
   font-stretch: normal;
@@ -417,11 +430,10 @@ const VIEW_OPTIONS = [
   line-height: 1.5;
   letter-spacing: 1.05px;
   color: #484848;
-  cursor: pointer;
 }
 
 .details {
-  font-family: Asap;
+  font-family: $font-family;
   font-size: 14px;
   font-weight: normal;
   font-stretch: normal;
@@ -474,7 +486,7 @@ const VIEW_OPTIONS = [
 
 <style lang="scss">
   .view-selector-select-popper {
-    font-family: Asap, sans-serif, Helvetica;
+    font-family: $font-family;
     font-size: 14px;
     color: #292b66;
 

From 3bad3c6d478fde97e88656930568669b21f3636e Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 10 Sep 2024 12:15:47 +1200
Subject: [PATCH 11/28] Add sample data to show images on sidebar

---
 src/App.vue          | 24 +++++++++++++++++++++++-
 src/data/images.json | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/data/images.json

diff --git a/src/App.vue b/src/App.vue
index 1258c40c..aa1c2a07 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@
       <el-button @click="neuronSearch">open neuron search</el-button>
       <el-button @click="keywordSearch">keyword search</el-button>
       <el-button @click="getFacets">Get facets</el-button>
+      <el-button @click="showImages">Show Images</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -23,10 +24,13 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
+      :imageThumbnails="imageThumbnails"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @actionClick="action"
+      @connectivity-info-close="onConnectivityInfoClose"
+      @image-thumbnail-close="onImageThumbnailClose"
     />
   </div>
 </template>
@@ -37,6 +41,7 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
+import imageThumbnails from './data/images.json';
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -101,7 +106,11 @@ export default {
   data: function () {
     return {
       contextArray: [null, null],
-      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
+      tabArray: [
+        { title: 'Flatmap', id: 1, type: 'search'},
+        { title: 'Connectivity', id: 2, type: 'connectivity' },
+        { title: 'Images', id: 3, type: 'images' },
+      ],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -114,6 +123,7 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
       connectivityInput: exampleConnectivityInput,
+      imageThumbnails: imageThumbnails,
       activeId: 1,
     }
   },
@@ -224,6 +234,18 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
+    showImages: function () {
+      if (this.$refs.sideBar) {
+        this.tabClicked({id: 3, type: 'images'});
+        this.$refs.sideBar.setDrawerOpen(true);
+      }
+    },
+    onConnectivityInfoClose: function () {
+      console.log('connectivity-info-close');
+    },
+    onImageThumbnailClose: function () {
+      console.log('image-thumbnail-close');
+    },
   },
   mounted: function () {
     console.log('mounted app')
diff --git a/src/data/images.json b/src/data/images.json
new file mode 100644
index 00000000..78d53304
--- /dev/null
+++ b/src/data/images.json
@@ -0,0 +1,41 @@
+[
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21567",
+      "resource": "derivative/sub-Pirt-1A/sam-7/2020-01-06_11.26.19_ AAV DRG inj.- Pirt Cre 1A_DRG T2b.jpx",
+      "id": "353",
+      "title": "2020-01-06_11.26.19_ AAV DRG inj.- Pirt Cre 1A_DRG T2b.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21567",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  },
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21568",
+      "resource": "derivative/sub-Pirt-1A/sam-7/2020-01-06_11.36.02_FusionStitcher AAV DRG inj.- Pirt Cre 1A_DRG T4ab.jpx",
+      "id": "353",
+      "title": "2020-01-06_11.36.02_FusionStitcher AAV DRG inj.- Pirt Cre 1A_DRG T4ab.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21568",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  },
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21569",
+      "resource": "derivative/sub-Pirt-2A/2020-01-13_11.16.35_ssxxs_Kim_FusionStitcher vagal ganglia.jpx",
+      "id": "353",
+      "title": "2020-01-13_11.16.35_ssxxs_Kim_FusionStitcher vagal ganglia.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21569",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  }
+]
\ No newline at end of file

From 04a7234545a23a8d10cfa74833ec2dcf12e648a9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 10 Sep 2024 12:46:21 +1200
Subject: [PATCH 12/28] 2.4.2-beta.0

---
 CHANGELOG.md      | 346 +++++++++++++++++++++++++---------------------
 package-lock.json |   4 +-
 package.json      |   2 +-
 3 files changed, 189 insertions(+), 163 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c7bc020..0a9dfd58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,307 +7,333 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [v2.4.1](https://github.com/alan-wu/map-sidebar/compare/v2.4.0...v2.4.1)
+## [v2.4.2-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.5...v2.4.2-beta.0)
 
 ### Merged
 
-- Features alert in connectivity title [`#84`](https://github.com/alan-wu/map-sidebar/pull/84)
+- Features alert in connectivity title [`#84`](https://github.com/akhuoa/map-sidebar/pull/84)
+- Copy button UI fix [`#87`](https://github.com/akhuoa/map-sidebar/pull/87)
+- Feature/copy to clipboard [`#86`](https://github.com/akhuoa/map-sidebar/pull/86)
 
 ### Commits
 
-- Update alert placement in connectivity info [`1bdd362`](https://github.com/alan-wu/map-sidebar/commit/1bdd36279a237b3fbdb4ec69353c6fc0cef897bf)
-- Alert beside connectivity title [`51a8e25`](https://github.com/alan-wu/map-sidebar/commit/51a8e25131b233aeb0f862fa7294cc0b3dad69c9)
-- Fix missing features alert [`0c88e2a`](https://github.com/alan-wu/map-sidebar/commit/0c88e2a2395f7775e6e2c47962a65dd7e892d935)
+- Show image thumbnails with species filter [`51a29aa`](https://github.com/akhuoa/map-sidebar/commit/51a29aa3f6e10c4f85ea7ea7022d08c0b5e81e71)
+- Update changelog [`fafe35b`](https://github.com/akhuoa/map-sidebar/commit/fafe35b1a804dc323b1e194f0f80bbdba1418ce3)
+- Remove unused file [`3ac4188`](https://github.com/akhuoa/map-sidebar/commit/3ac4188e822e390355a83fccbae3bc6a8af38c2f)
 
-## [v2.4.0](https://github.com/alan-wu/map-sidebar/compare/v2.3.1...v2.4.0) - 2024-08-15
+## [v2.3.2-beta.5](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.4...v2.3.2-beta.5) - 2024-08-13
 
-### Merged
+### Commits
 
-- Copy button UI fix [`#87`](https://github.com/alan-wu/map-sidebar/pull/87)
-- Feature/copy to clipboard [`#86`](https://github.com/alan-wu/map-sidebar/pull/86)
-- Replace global variable with markRaw [`#82`](https://github.com/alan-wu/map-sidebar/pull/82)
+- Update changelog [`2071470`](https://github.com/akhuoa/map-sidebar/commit/20714701b210a42cb89a2873df964e60e1e3dbd4)
+- Update map utilities for copy-to-clipboard [`d869656`](https://github.com/akhuoa/map-sidebar/commit/d8696566530482b0b681ab2c4f2c8b2f1de3b8bf)
+
+## [v2.3.2-beta.4](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.3...v2.3.2-beta.4) - 2024-08-12
 
 ### Commits
 
-- Update changelog [`fafe35b`](https://github.com/alan-wu/map-sidebar/commit/fafe35b1a804dc323b1e194f0f80bbdba1418ce3)
-- Update changelog [`2071470`](https://github.com/alan-wu/map-sidebar/commit/20714701b210a42cb89a2873df964e60e1e3dbd4)
-- Update changelog [`566fd87`](https://github.com/alan-wu/map-sidebar/commit/566fd87dcf83e85f97173f2b28e857594e7bfcb1)
+- Update changelog [`566fd87`](https://github.com/akhuoa/map-sidebar/commit/566fd87dcf83e85f97173f2b28e857594e7bfcb1)
+- Refactor code for connectivity info copy to clipboard [`bf65cf5`](https://github.com/akhuoa/map-sidebar/commit/bf65cf5a33d34336f2e1a41a541d8d6fd26bba32)
+- Add uberon information in connectivity copy data [`03aa79e`](https://github.com/akhuoa/map-sidebar/commit/03aa79ed3056eabd864ad0b67e8b9f45a3d7c9e3)
 
-## [v2.3.1](https://github.com/alan-wu/map-sidebar/compare/v2.3.0...v2.3.1) - 2024-07-11
+## [v2.3.2-beta.3](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.2...v2.3.2-beta.3) - 2024-08-09
 
-### Merged
+### Commits
+
+- Update changelog [`ef39a49`](https://github.com/akhuoa/map-sidebar/commit/ef39a49fb083988c87ac454ca9f11170e8d874a9)
+- Update connectivity info copy-to-clipboard button placement [`ac32abd`](https://github.com/akhuoa/map-sidebar/commit/ac32abd8894a7de5921d116b70682d61bc3f4014)
+
+## [v2.3.2-beta.2](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.1...v2.3.2-beta.2) - 2024-08-07
 
-- Fix connectivity tab close button style [`#78`](https://github.com/alan-wu/map-sidebar/pull/78)
+### Commits
+
+- Update changelog [`e057338`](https://github.com/akhuoa/map-sidebar/commit/e05733805ae07d4541f266dd1e71d18d749ed0f6)
+- Update copy clipboard formatting [`2f265a1`](https://github.com/akhuoa/map-sidebar/commit/2f265a134665c5ab3897fba79623ea037d277930)
+- Update formatted copy-to-clipboard content for connectivity [`3162e3c`](https://github.com/akhuoa/map-sidebar/commit/3162e3c3c794192adc8bc73fa2cbe54cd7e8b3a0)
+
+## [v2.3.2-beta.1](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.0...v2.3.2-beta.1) - 2024-08-05
 
 ### Commits
 
-- Update gallery. [`69cb365`](https://github.com/alan-wu/map-sidebar/commit/69cb3655782251730390c148ad7a65b16c5bfc58)
+- Update Changelog [`947446c`](https://github.com/akhuoa/map-sidebar/commit/947446c8fcbac98eb48204808f3c4a0a9a237938)
+- Update dataset card copy clipboard with dataset id and doi [`1716e8d`](https://github.com/akhuoa/map-sidebar/commit/1716e8d89e5360256f6f19baf2912c146a67b7f0)
+- Update copy to clipboard content with computed value [`72acd10`](https://github.com/akhuoa/map-sidebar/commit/72acd10b9361eb9b77f8b386694da34a08176f8a)
 
-## [v2.3.0](https://github.com/alan-wu/map-sidebar/compare/v2.2.0...v2.3.0) - 2024-07-10
+## [v2.3.2-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.2.1-beta.0...v2.3.2-beta.0) - 2024-08-02
 
 ### Merged
 
-- Display connectivity info without obstructing current map view [`#74`](https://github.com/alan-wu/map-sidebar/pull/74)
-- Create cypress testing [`#4`](https://github.com/alan-wu/map-sidebar/pull/4)
-- Connectivity explore buttons now check available facets [`#3`](https://github.com/alan-wu/map-sidebar/pull/3)
-- UI updates [`#73`](https://github.com/alan-wu/map-sidebar/pull/73)
-- Anatomy markers [`#72`](https://github.com/alan-wu/map-sidebar/pull/72)
+- Replace global variable with markRaw [`#82`](https://github.com/akhuoa/map-sidebar/pull/82)
+- Fix connectivity tab close button style [`#78`](https://github.com/akhuoa/map-sidebar/pull/78)
+- Display connectivity info without obstructing current map view [`#74`](https://github.com/akhuoa/map-sidebar/pull/74)
+- Create cypress testing [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Connectivity explore buttons now check available facets [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
+- UI updates [`#73`](https://github.com/akhuoa/map-sidebar/pull/73)
+- Anatomy markers [`#72`](https://github.com/akhuoa/map-sidebar/pull/72)
+
+### Commits
+
+- Install Cypress [`d329c74`](https://github.com/akhuoa/map-sidebar/commit/d329c7481de908fe85f9bed6c229bc86854c1d19)
+- Requires more dev dependencies [`859e578`](https://github.com/akhuoa/map-sidebar/commit/859e578f498fde3e6e6c956f97738b078111380a)
+- Add testing for connectivity info [`9677c3c`](https://github.com/akhuoa/map-sidebar/commit/9677c3c1911121b2528d2cc637dc256c40b76462)
+
+## [v2.2.1-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.2.0...v2.2.1-beta.0) - 2024-06-26
 
 ### Commits
 
-- Install Cypress [`d329c74`](https://github.com/alan-wu/map-sidebar/commit/d329c7481de908fe85f9bed6c229bc86854c1d19)
-- Add provenance info in sidebar [`f65b2fe`](https://github.com/alan-wu/map-sidebar/commit/f65b2fecbadd4afb92a1212cafc545228bd14d31)
-- Requires more dev dependencies [`859e578`](https://github.com/alan-wu/map-sidebar/commit/859e578f498fde3e6e6c956f97738b078111380a)
+- Add provenance info in sidebar [`f65b2fe`](https://github.com/akhuoa/map-sidebar/commit/f65b2fecbadd4afb92a1212cafc545228bd14d31)
+- Move connectivity info tab to top with close button [`d77e018`](https://github.com/akhuoa/map-sidebar/commit/d77e0185283dae36ca851fe48117365b45bde174)
+- Move pubmed button of provenance info into title area [`a3f4ab2`](https://github.com/akhuoa/map-sidebar/commit/a3f4ab2ba9cf74d8fe644c5417f9ea867a17bd55)
 
-## [v2.2.0](https://github.com/alan-wu/map-sidebar/compare/v2.1.0...v2.2.0) - 2024-05-17
+## [v2.2.0](https://github.com/akhuoa/map-sidebar/compare/v2.1.0...v2.2.0) - 2024-05-17
 
 ### Merged
 
-- Hover dataset callback [`#71`](https://github.com/alan-wu/map-sidebar/pull/71)
+- Hover dataset callback [`#71`](https://github.com/akhuoa/map-sidebar/pull/71)
 
 ### Commits
 
-- add hover-changed callback to return anatomy [`d8e94bf`](https://github.com/alan-wu/map-sidebar/commit/d8e94bffa9d3a64c60b0aa46ff3a8e3ae53fe407)
-- add comment [`4921885`](https://github.com/alan-wu/map-sidebar/commit/49218855f4af815af068f9bab976231cd2ca31b1)
+- add hover-changed callback to return anatomy [`d8e94bf`](https://github.com/akhuoa/map-sidebar/commit/d8e94bffa9d3a64c60b0aa46ff3a8e3ae53fe407)
+- add comment [`4921885`](https://github.com/akhuoa/map-sidebar/commit/49218855f4af815af068f9bab976231cd2ca31b1)
 
-## [v2.1.0](https://github.com/alan-wu/map-sidebar/compare/v2.0.1...v2.1.0) - 2024-05-10
+## [v2.1.0](https://github.com/akhuoa/map-sidebar/compare/v2.0.1...v2.1.0) - 2024-05-10
 
 ### Merged
 
-- Add dataset click event [`#70`](https://github.com/alan-wu/map-sidebar/pull/70)
+- Add dataset click event [`#70`](https://github.com/akhuoa/map-sidebar/pull/70)
 
 ### Commits
 
-- Rename dataset click to datalink click [`b7b4411`](https://github.com/alan-wu/map-sidebar/commit/b7b44113adc33e163722a9f7f8235a7168f1757d)
-- Update gallery version for PR #70 [`54a6c69`](https://github.com/alan-wu/map-sidebar/commit/54a6c694c6d5a7cf3edc9b8e3994ab6e211c6d9d)
-- Add dataset click event from gallery [`6cbde23`](https://github.com/alan-wu/map-sidebar/commit/6cbde233626ac689121cebbde402e09315de28b0)
+- Rename dataset click to datalink click [`b7b4411`](https://github.com/akhuoa/map-sidebar/commit/b7b44113adc33e163722a9f7f8235a7168f1757d)
+- Update gallery version for PR #70 [`54a6c69`](https://github.com/akhuoa/map-sidebar/commit/54a6c694c6d5a7cf3edc9b8e3994ab6e211c6d9d)
+- Add dataset click event from gallery [`6cbde23`](https://github.com/akhuoa/map-sidebar/commit/6cbde233626ac689121cebbde402e09315de28b0)
 
-## [v2.0.1](https://github.com/alan-wu/map-sidebar/compare/v2.0.0...v2.0.1) - 2024-04-29
+## [v2.0.1](https://github.com/akhuoa/map-sidebar/compare/v2.0.0...v2.0.1) - 2024-04-29
 
 ### Commits
 
-- Fix an issue with addFilter method. [`854611c`](https://github.com/alan-wu/map-sidebar/commit/854611c9c2b369f57c5afaefffc4acbc0ba2022d)
+- Fix an issue with addFilter method. [`854611c`](https://github.com/akhuoa/map-sidebar/commit/854611c9c2b369f57c5afaefffc4acbc0ba2022d)
 
-## [v2.0.0](https://github.com/alan-wu/map-sidebar/compare/v1.6.0...v2.0.0) - 2024-04-22
+## [v2.0.0](https://github.com/akhuoa/map-sidebar/compare/v1.6.0...v2.0.0) - 2024-04-22
 
 ### Merged
 
-- Filter tags UI updates for space [`#69`](https://github.com/alan-wu/map-sidebar/pull/69)
-- API Documentation [`#68`](https://github.com/alan-wu/map-sidebar/pull/68)
-- Vue3 migration [`#67`](https://github.com/alan-wu/map-sidebar/pull/67)
+- Filter tags UI updates for space [`#69`](https://github.com/akhuoa/map-sidebar/pull/69)
+- API Documentation [`#68`](https://github.com/akhuoa/map-sidebar/pull/68)
+- Vue3 migration [`#67`](https://github.com/akhuoa/map-sidebar/pull/67)
 
 ### Commits
 
-- vue cli to vite [`13f0925`](https://github.com/alan-wu/map-sidebar/commit/13f092578d163420c7e79cc4ca87d527dd80d288)
-- vue2 to vue3 [`b5b9acd`](https://github.com/alan-wu/map-sidebar/commit/b5b9acdb64e241641bb2435dfba3b24c5f048e68)
-- Minor tweaks on the styles. [`39b47a8`](https://github.com/alan-wu/map-sidebar/commit/39b47a89d56173dd2839934fcdc78e559dcacdea)
+- vue cli to vite [`13f0925`](https://github.com/akhuoa/map-sidebar/commit/13f092578d163420c7e79cc4ca87d527dd80d288)
+- vue2 to vue3 [`b5b9acd`](https://github.com/akhuoa/map-sidebar/commit/b5b9acdb64e241641bb2435dfba3b24c5f048e68)
+- Minor tweaks on the styles. [`39b47a8`](https://github.com/akhuoa/map-sidebar/commit/39b47a89d56173dd2839934fcdc78e559dcacdea)
 
-## [v1.6.0](https://github.com/alan-wu/map-sidebar/compare/v1.5.4...v1.6.0) - 2024-01-05
+## [v1.6.0](https://github.com/akhuoa/map-sidebar/compare/v1.5.4...v1.6.0) - 2024-01-05
 
 ### Commits
 
-- Switch to using s3 uri to get the prefix before filepath. [`9fef3b6`](https://github.com/alan-wu/map-sidebar/commit/9fef3b6e73ce5410e35ef53b4e719cec2e477cc0)
+- Switch to using s3 uri to get the prefix before filepath. [`9fef3b6`](https://github.com/akhuoa/map-sidebar/commit/9fef3b6e73ce5410e35ef53b4e719cec2e477cc0)
 
-## [v1.5.4](https://github.com/alan-wu/map-sidebar/compare/v1.5.0...v1.5.4) - 2024-01-05
+## [v1.5.4](https://github.com/akhuoa/map-sidebar/compare/v1.5.0...v1.5.4) - 2024-01-05
 
 ### Merged
 
-- Create the third level of facets and hook it up with algolia: [`#64`](https://github.com/alan-wu/map-sidebar/pull/64)
-- Trim whitespace and set max-width on search pop-up [`#66`](https://github.com/alan-wu/map-sidebar/pull/66)
-- Add in basic but functional search history [`#62`](https://github.com/alan-wu/map-sidebar/pull/62)
-- Drawer control [`#61`](https://github.com/alan-wu/map-sidebar/pull/61)
+- Create the third level of facets and hook it up with algolia: [`#64`](https://github.com/akhuoa/map-sidebar/pull/64)
+- Trim whitespace and set max-width on search pop-up [`#66`](https://github.com/akhuoa/map-sidebar/pull/66)
+- Add in basic but functional search history [`#62`](https://github.com/akhuoa/map-sidebar/pull/62)
+- Drawer control [`#61`](https://github.com/akhuoa/map-sidebar/pull/61)
 
 ### Commits
 
-- Create the third level of facets and hook it up with alolia: [`a0e1d7b`](https://github.com/alan-wu/map-sidebar/commit/a0e1d7b383843b6e0947685ca089ea30d0f0abeb)
-- Added a function to find facets given without full hierchy [`4c3b4ff`](https://github.com/alan-wu/map-sidebar/commit/4c3b4ffc978f1f56a07e614bd1914dda8ffcdd22)
-- Add selector for search history [`a633920`](https://github.com/alan-wu/map-sidebar/commit/a633920312b7e9a51be81ec8e45a29b203e52636)
+- Create the third level of facets and hook it up with alolia: [`a0e1d7b`](https://github.com/akhuoa/map-sidebar/commit/a0e1d7b383843b6e0947685ca089ea30d0f0abeb)
+- Added a function to find facets given without full hierchy [`4c3b4ff`](https://github.com/akhuoa/map-sidebar/commit/4c3b4ffc978f1f56a07e614bd1914dda8ffcdd22)
+- Add selector for search history [`a633920`](https://github.com/akhuoa/map-sidebar/commit/a633920312b7e9a51be81ec8e45a29b203e52636)
 
-## [v1.5.0](https://github.com/alan-wu/map-sidebar/compare/v1.4.0...v1.5.0) - 2023-09-14
+## [v1.5.0](https://github.com/akhuoa/map-sidebar/compare/v1.4.0...v1.5.0) - 2023-09-14
 
 ### Merged
 
-- Mapintegrated context cards [`#60`](https://github.com/alan-wu/map-sidebar/pull/60)
-- Add method for retrieving Algolia facets (for dynamic markers) [`#59`](https://github.com/alan-wu/map-sidebar/pull/59)
+- Mapintegrated context cards [`#60`](https://github.com/akhuoa/map-sidebar/pull/60)
+- Add method for retrieving Algolia facets (for dynamic markers) [`#59`](https://github.com/akhuoa/map-sidebar/pull/59)
 
 ### Commits
 
-- Revert changes in dependencies. [`f39600a`](https://github.com/alan-wu/map-sidebar/commit/f39600ab2068cf2f06f514a8650950a558087333)
-- Update dependencies. [`48bbd2e`](https://github.com/alan-wu/map-sidebar/commit/48bbd2e0a4f5fec0ad820ea3fef9deafb0ca5afe)
-- Merge the label and uberon emits into one object [`739fc6a`](https://github.com/alan-wu/map-sidebar/commit/739fc6ae0c9c9cce81e04c68e8a8ec8769b0f745)
+- Revert changes in dependencies. [`f39600a`](https://github.com/akhuoa/map-sidebar/commit/f39600ab2068cf2f06f514a8650950a558087333)
+- Update dependencies. [`48bbd2e`](https://github.com/akhuoa/map-sidebar/commit/48bbd2e0a4f5fec0ad820ea3fef9deafb0ca5afe)
+- Merge the label and uberon emits into one object [`739fc6a`](https://github.com/akhuoa/map-sidebar/commit/739fc6ae0c9c9cce81e04c68e8a8ec8769b0f745)
 
-## [v1.4.0](https://github.com/alan-wu/map-sidebar/compare/v1.3.38...v1.4.0) - 2023-06-12
+## [v1.4.0](https://github.com/akhuoa/map-sidebar/compare/v1.3.38...v1.4.0) - 2023-06-12
 
 ### Merged
 
-- Update vue to 2.7.14 [`#57`](https://github.com/alan-wu/map-sidebar/pull/57)
-- Fix an issue with JSON parse on plotAnnotation. [`#58`](https://github.com/alan-wu/map-sidebar/pull/58)
-- Support scss. [`#56`](https://github.com/alan-wu/map-sidebar/pull/56)
+- Update vue to 2.7.14 [`#57`](https://github.com/akhuoa/map-sidebar/pull/57)
+- Fix an issue with JSON parse on plotAnnotation. [`#58`](https://github.com/akhuoa/map-sidebar/pull/58)
+- Support scss. [`#56`](https://github.com/akhuoa/map-sidebar/pull/56)
 
 ### Commits
 
-- Add autochangelog to release command. [`c57a6a0`](https://github.com/alan-wu/map-sidebar/commit/c57a6a020c4d3582e2e784e7b808286b22cdeedc)
-- Update package. [`1b2c4b8`](https://github.com/alan-wu/map-sidebar/commit/1b2c4b848375ecf089f1a8e5ff5d8204e1243a3c)
-- Update packages. [`e1a3924`](https://github.com/alan-wu/map-sidebar/commit/e1a3924a11421c35cff3efd1fcb4bb56707bf8af)
+- Add autochangelog to release command. [`c57a6a0`](https://github.com/akhuoa/map-sidebar/commit/c57a6a020c4d3582e2e784e7b808286b22cdeedc)
+- Update package. [`1b2c4b8`](https://github.com/akhuoa/map-sidebar/commit/1b2c4b848375ecf089f1a8e5ff5d8204e1243a3c)
+- Update packages. [`e1a3924`](https://github.com/akhuoa/map-sidebar/commit/e1a3924a11421c35cff3efd1fcb4bb56707bf8af)
 
-## [v1.3.38](https://github.com/alan-wu/map-sidebar/compare/v1.3.37...v1.3.38) - 2023-04-10
+## [v1.3.38](https://github.com/akhuoa/map-sidebar/compare/v1.3.37...v1.3.38) - 2023-04-10
 
 ### Commits
 
-- Replace css with scss. [`5970c81`](https://github.com/alan-wu/map-sidebar/commit/5970c818d705adf468e8bd62c6713fb886a74fa1)
-- Update to use the latest gallery which supports scss. [`1ec6529`](https://github.com/alan-wu/map-sidebar/commit/1ec652935bbd88797f1e46777e217e7a10c1788f)
+- Replace css with scss. [`5970c81`](https://github.com/akhuoa/map-sidebar/commit/5970c818d705adf468e8bd62c6713fb886a74fa1)
+- Update to use the latest gallery which supports scss. [`1ec6529`](https://github.com/akhuoa/map-sidebar/commit/1ec652935bbd88797f1e46777e217e7a10c1788f)
 
-## [v1.3.37](https://github.com/alan-wu/map-sidebar/compare/v1.3.36...v1.3.37) - 2023-04-10
+## [v1.3.37](https://github.com/akhuoa/map-sidebar/compare/v1.3.36...v1.3.37) - 2023-04-10
 
 ### Commits
 
-- Version 1.3.37 release. [`17c88e6`](https://github.com/alan-wu/map-sidebar/commit/17c88e6fbbfd9ad7bdd589290fdf84fd28f2fbf9)
+- Version 1.3.37 release. [`17c88e6`](https://github.com/akhuoa/map-sidebar/commit/17c88e6fbbfd9ad7bdd589290fdf84fd28f2fbf9)
 
-## [v1.3.36](https://github.com/alan-wu/map-sidebar/compare/v1.3.34...v1.3.36) - 2023-03-23
+## [v1.3.36](https://github.com/akhuoa/map-sidebar/compare/v1.3.34...v1.3.36) - 2023-03-23
 
 ### Merged
 
-- Support S3 bucket for all related resources [`#55`](https://github.com/alan-wu/map-sidebar/pull/55)
-- Sidebar feedback sprint 27 [`#54`](https://github.com/alan-wu/map-sidebar/pull/54)
-- Refactoring [`#53`](https://github.com/alan-wu/map-sidebar/pull/53)
+- Support S3 bucket for all related resources [`#55`](https://github.com/akhuoa/map-sidebar/pull/55)
+- Sidebar feedback sprint 27 [`#54`](https://github.com/akhuoa/map-sidebar/pull/54)
+- Refactoring [`#53`](https://github.com/akhuoa/map-sidebar/pull/53)
 
 ### Commits
 
-- Add a mixin for getting s3 information. Support s3 bucket with context card. [`7c9617d`](https://github.com/alan-wu/map-sidebar/commit/7c9617deae781987eab584d8cae08fbdf5044465)
-- Switch to using algolia 'type' facet [`861ee60`](https://github.com/alan-wu/map-sidebar/commit/861ee600e43ef9f371a671a257182dd8c6473e69)
-- Add s3 bucket information [`dc139dd`](https://github.com/alan-wu/map-sidebar/commit/dc139ddb685b4c2f1a40826ce8170e9baff6ffe0)
+- Add a mixin for getting s3 information. Support s3 bucket with context card. [`7c9617d`](https://github.com/akhuoa/map-sidebar/commit/7c9617deae781987eab584d8cae08fbdf5044465)
+- Switch to using algolia 'type' facet [`861ee60`](https://github.com/akhuoa/map-sidebar/commit/861ee600e43ef9f371a671a257182dd8c6473e69)
+- Add s3 bucket information [`dc139dd`](https://github.com/akhuoa/map-sidebar/commit/dc139ddb685b4c2f1a40826ce8170e9baff6ffe0)
 
-## [v1.3.34](https://github.com/alan-wu/map-sidebar/compare/v1.3.33...v1.3.34) - 2023-02-02
+## [v1.3.34](https://github.com/akhuoa/map-sidebar/compare/v1.3.33...v1.3.34) - 2023-02-02
 
 ### Merged
 
-- Fix a bug caused by retracted datasets. [`#52`](https://github.com/alan-wu/map-sidebar/pull/52)
+- Fix a bug caused by retracted datasets. [`#52`](https://github.com/akhuoa/map-sidebar/pull/52)
 
 ### Commits
 
-- Remove unused variables and make sure search is performed correctly when the app is mounted. [`bcc1ec1`](https://github.com/alan-wu/map-sidebar/commit/bcc1ec1e89a9ff1ab012b07f2a22f48c0365ac2d)
-- increment version to 1.3.34. [`b0126a1`](https://github.com/alan-wu/map-sidebar/commit/b0126a1a30a35c0caa6ec8bc5a460f18ec273663)
-- Update .gitignore [`89cfe13`](https://github.com/alan-wu/map-sidebar/commit/89cfe1341627f151f29a227768377d37a8eec9fa)
+- Remove unused variables and make sure search is performed correctly when the app is mounted. [`bcc1ec1`](https://github.com/akhuoa/map-sidebar/commit/bcc1ec1e89a9ff1ab012b07f2a22f48c0365ac2d)
+- increment version to 1.3.34. [`b0126a1`](https://github.com/akhuoa/map-sidebar/commit/b0126a1a30a35c0caa6ec8bc5a460f18ec273663)
+- Update .gitignore [`89cfe13`](https://github.com/akhuoa/map-sidebar/commit/89cfe1341627f151f29a227768377d37a8eec9fa)
 
-## [v1.3.33](https://github.com/alan-wu/map-sidebar/compare/v1.3.18...v1.3.33) - 2022-12-15
+## [v1.3.33](https://github.com/akhuoa/map-sidebar/compare/v1.3.18...v1.3.33) - 2022-12-15
 
 ### Merged
 
-- Change Biolucida Images badge to Images and add a Dataset badge. [`#51`](https://github.com/alan-wu/map-sidebar/pull/51)
-- Tab color change [`#50`](https://github.com/alan-wu/map-sidebar/pull/50)
-- Switch to using markdown and checking for XSS [`#48`](https://github.com/alan-wu/map-sidebar/pull/48)
-- remove hardcoded root url [`#46`](https://github.com/alan-wu/map-sidebar/pull/46)
-- Context card source fix [`#45`](https://github.com/alan-wu/map-sidebar/pull/45)
-- Fix a bug causing filters are not set when the cascader is yet ready. [`#44`](https://github.com/alan-wu/map-sidebar/pull/44)
+- Change Biolucida Images badge to Images and add a Dataset badge. [`#51`](https://github.com/akhuoa/map-sidebar/pull/51)
+- Tab color change [`#50`](https://github.com/akhuoa/map-sidebar/pull/50)
+- Switch to using markdown and checking for XSS [`#48`](https://github.com/akhuoa/map-sidebar/pull/48)
+- remove hardcoded root url [`#46`](https://github.com/akhuoa/map-sidebar/pull/46)
+- Context card source fix [`#45`](https://github.com/akhuoa/map-sidebar/pull/45)
+- Fix a bug causing filters are not set when the cascader is yet ready. [`#44`](https://github.com/akhuoa/map-sidebar/pull/44)
 
 ### Commits
 
-- Switch to using js-xss for sanatization [`f2ee30e`](https://github.com/alan-wu/map-sidebar/commit/f2ee30e338bfc626c6262dde244e8fe2f0d47a6c)
-- Add sidebar data input formatting to the readme [`3006ec0`](https://github.com/alan-wu/map-sidebar/commit/3006ec020e4b11432d9d79a1acbca6db59c19ebd)
-- Create link to the datasetsDetails filePath page [`3af21cb`](https://github.com/alan-wu/map-sidebar/commit/3af21cb457b71a63048d863b2ad70f3bfe04dcf7)
+- Switch to using js-xss for sanatization [`f2ee30e`](https://github.com/akhuoa/map-sidebar/commit/f2ee30e338bfc626c6262dde244e8fe2f0d47a6c)
+- Add sidebar data input formatting to the readme [`3006ec0`](https://github.com/akhuoa/map-sidebar/commit/3006ec020e4b11432d9d79a1acbca6db59c19ebd)
+- Create link to the datasetsDetails filePath page [`3af21cb`](https://github.com/akhuoa/map-sidebar/commit/3af21cb457b71a63048d863b2ad70f3bfe04dcf7)
 
-## [v1.3.18](https://github.com/alan-wu/map-sidebar/compare/v1.3.1...v1.3.18) - 2022-07-22
+## [v1.3.18](https://github.com/akhuoa/map-sidebar/compare/v1.3.1...v1.3.18) - 2022-07-22
 
 ### Merged
 
-- Facets check [`#43`](https://github.com/alan-wu/map-sidebar/pull/43)
-- Remove unused hardcoded keywords [`#42`](https://github.com/alan-wu/map-sidebar/pull/42)
-- Fix css error, add comments [`#41`](https://github.com/alan-wu/map-sidebar/pull/41)
-- Keyword search [`#40`](https://github.com/alan-wu/map-sidebar/pull/40)
-- Keyword search typo fixes [`#39`](https://github.com/alan-wu/map-sidebar/pull/39)
-- Add keyword search [`#38`](https://github.com/alan-wu/map-sidebar/pull/38)
-- Add scrollbar for content overflow on context card [`#37`](https://github.com/alan-wu/map-sidebar/pull/37)
-- Dynamic components [`#36`](https://github.com/alan-wu/map-sidebar/pull/36)
+- Facets check [`#43`](https://github.com/akhuoa/map-sidebar/pull/43)
+- Remove unused hardcoded keywords [`#42`](https://github.com/akhuoa/map-sidebar/pull/42)
+- Fix css error, add comments [`#41`](https://github.com/akhuoa/map-sidebar/pull/41)
+- Keyword search [`#40`](https://github.com/akhuoa/map-sidebar/pull/40)
+- Keyword search typo fixes [`#39`](https://github.com/akhuoa/map-sidebar/pull/39)
+- Add keyword search [`#38`](https://github.com/akhuoa/map-sidebar/pull/38)
+- Add scrollbar for content overflow on context card [`#37`](https://github.com/akhuoa/map-sidebar/pull/37)
+- Dynamic components [`#36`](https://github.com/akhuoa/map-sidebar/pull/36)
 
 ### Commits
 
-- Remove markerLevels.js (not needed) [`bd76e9a`](https://github.com/alan-wu/map-sidebar/commit/bd76e9aabf01adc09bb1cf77ed33c7c3094a750c)
-- Add missing file [`4e98a6e`](https://github.com/alan-wu/map-sidebar/commit/4e98a6ecb62b5ded440d27c3b9213aa304b6bb2b)
-- Add anatomy to the keywords, reformat document [`0f8e867`](https://github.com/alan-wu/map-sidebar/commit/0f8e867a932d74378c07702746656cbc06eaebf5)
+- Remove markerLevels.js (not needed) [`bd76e9a`](https://github.com/akhuoa/map-sidebar/commit/bd76e9aabf01adc09bb1cf77ed33c7c3094a750c)
+- Add missing file [`4e98a6e`](https://github.com/akhuoa/map-sidebar/commit/4e98a6ecb62b5ded440d27c3b9213aa304b6bb2b)
+- Add anatomy to the keywords, reformat document [`0f8e867`](https://github.com/akhuoa/map-sidebar/commit/0f8e867a932d74378c07702746656cbc06eaebf5)
 
-## [v1.3.1](https://github.com/alan-wu/map-sidebar/compare/v1.2.0-beta.11...v1.3.1) - 2022-06-09
+## [v1.3.1](https://github.com/akhuoa/map-sidebar/compare/v1.2.0-beta.11...v1.3.1) - 2022-06-09
 
 ### Merged
 
-- Fix for context card banners [`#35`](https://github.com/alan-wu/map-sidebar/pull/35)
-- Image gallery on sidebar [`#34`](https://github.com/alan-wu/map-sidebar/pull/34)
+- Fix for context card banners [`#35`](https://github.com/akhuoa/map-sidebar/pull/35)
+- Image gallery on sidebar [`#34`](https://github.com/akhuoa/map-sidebar/pull/34)
 
 ### Commits
 
-- Increment version to 1.3.0 [`415916c`](https://github.com/alan-wu/map-sidebar/commit/415916c5ddf0257df5a9b447cf2a37050d2d2765)
-- Set maximum number of downloads in paralle. [`f0d88f4`](https://github.com/alan-wu/map-sidebar/commit/f0d88f413cfbc1aadf4a2c77e3a580efb2ae758b)
-- Update gallery. [`06241ae`](https://github.com/alan-wu/map-sidebar/commit/06241aec4646306d534c9bb3b7faa71720f82217)
+- Increment version to 1.3.0 [`415916c`](https://github.com/akhuoa/map-sidebar/commit/415916c5ddf0257df5a9b447cf2a37050d2d2765)
+- Set maximum number of downloads in paralle. [`f0d88f4`](https://github.com/akhuoa/map-sidebar/commit/f0d88f413cfbc1aadf4a2c77e3a580efb2ae758b)
+- Update gallery. [`06241ae`](https://github.com/akhuoa/map-sidebar/commit/06241aec4646306d534c9bb3b7faa71720f82217)
 
-## [v1.2.0-beta.11](https://github.com/alan-wu/map-sidebar/compare/v1.2.0-beta.10...v1.2.0-beta.11) - 2022-05-23
+## [v1.2.0-beta.11](https://github.com/akhuoa/map-sidebar/compare/v1.2.0-beta.10...v1.2.0-beta.11) - 2022-05-23
 
 ### Commits
 
-- Update to gallery 0.3.0-beta.5 [`76f64a1`](https://github.com/alan-wu/map-sidebar/commit/76f64a1737072e370e659d7219fad6988728179d)
+- Update to gallery 0.3.0-beta.5 [`76f64a1`](https://github.com/akhuoa/map-sidebar/commit/76f64a1737072e370e659d7219fad6988728179d)
 
-## [v1.2.0-beta.10](https://github.com/alan-wu/map-sidebar/compare/1.1.3-fix-0...v1.2.0-beta.10) - 2022-05-18
+## [v1.2.0-beta.10](https://github.com/akhuoa/map-sidebar/compare/1.1.3-fix-0...v1.2.0-beta.10) - 2022-05-18
 
 ### Merged
 
-- Updated the way to detect a simulation dataset [`#33`](https://github.com/alan-wu/map-sidebar/pull/33)
-- Fix package number being out of date [`#32`](https://github.com/alan-wu/map-sidebar/pull/32)
-- Now populate cards from algolia, then add scicrunch data [`#31`](https://github.com/alan-wu/map-sidebar/pull/31)
-- Contex cards via scicrunch [`#30`](https://github.com/alan-wu/map-sidebar/pull/30)
-- Add hardcoded data and ability to display samples: [`#29`](https://github.com/alan-wu/map-sidebar/pull/29)
-- Contex cards via scicrunch - finishing touches [`#28`](https://github.com/alan-wu/map-sidebar/pull/28)
-- Context cards via scicrunch [`#27`](https://github.com/alan-wu/map-sidebar/pull/27)
-- Fix facets not being passed in emit [`#26`](https://github.com/alan-wu/map-sidebar/pull/26)
-- Fix an issue the auto merge caused [`#25`](https://github.com/alan-wu/map-sidebar/pull/25)
-- Switch to using dois for finding datasets as opposed to discover ids [`#24`](https://github.com/alan-wu/map-sidebar/pull/24)
-- Use the latest version of svg which fix a problem with icons on sparc-app. [`#23`](https://github.com/alan-wu/map-sidebar/pull/23)
-- Algolia search [`#22`](https://github.com/alan-wu/map-sidebar/pull/22)
-- Fix sample size text. [`#21`](https://github.com/alan-wu/map-sidebar/pull/21)
-- Fix facet not set correctly with open search [`#20`](https://github.com/alan-wu/map-sidebar/pull/20)
+- Updated the way to detect a simulation dataset [`#33`](https://github.com/akhuoa/map-sidebar/pull/33)
+- Fix package number being out of date [`#32`](https://github.com/akhuoa/map-sidebar/pull/32)
+- Now populate cards from algolia, then add scicrunch data [`#31`](https://github.com/akhuoa/map-sidebar/pull/31)
+- Contex cards via scicrunch [`#30`](https://github.com/akhuoa/map-sidebar/pull/30)
+- Add hardcoded data and ability to display samples: [`#29`](https://github.com/akhuoa/map-sidebar/pull/29)
+- Contex cards via scicrunch - finishing touches [`#28`](https://github.com/akhuoa/map-sidebar/pull/28)
+- Context cards via scicrunch [`#27`](https://github.com/akhuoa/map-sidebar/pull/27)
+- Fix facets not being passed in emit [`#26`](https://github.com/akhuoa/map-sidebar/pull/26)
+- Fix an issue the auto merge caused [`#25`](https://github.com/akhuoa/map-sidebar/pull/25)
+- Switch to using dois for finding datasets as opposed to discover ids [`#24`](https://github.com/akhuoa/map-sidebar/pull/24)
+- Use the latest version of svg which fix a problem with icons on sparc-app. [`#23`](https://github.com/akhuoa/map-sidebar/pull/23)
+- Algolia search [`#22`](https://github.com/akhuoa/map-sidebar/pull/22)
+- Fix sample size text. [`#21`](https://github.com/akhuoa/map-sidebar/pull/21)
+- Fix facet not set correctly with open search [`#20`](https://github.com/akhuoa/map-sidebar/pull/20)
 
 ### Commits
 
-- Initial commit of gallery. [`4f9e96a`](https://github.com/alan-wu/map-sidebar/commit/4f9e96a586a3f1e760331b5c35442552eb2d75bd)
-- Add badges buttons for image gallery filtering. [`a3c2958`](https://github.com/alan-wu/map-sidebar/commit/a3c29580871ff3355ef8897b3e9b4f7b04ae6143)
-- Initial supports for image gallery. [`1a178bd`](https://github.com/alan-wu/map-sidebar/commit/1a178bd86c64b378bd8dbf25574aaa02efe97acf)
+- Initial commit of gallery. [`4f9e96a`](https://github.com/akhuoa/map-sidebar/commit/4f9e96a586a3f1e760331b5c35442552eb2d75bd)
+- Add badges buttons for image gallery filtering. [`a3c2958`](https://github.com/akhuoa/map-sidebar/commit/a3c29580871ff3355ef8897b3e9b4f7b04ae6143)
+- Initial supports for image gallery. [`1a178bd`](https://github.com/akhuoa/map-sidebar/commit/1a178bd86c64b378bd8dbf25574aaa02efe97acf)
 
-## [1.1.3-fix-0](https://github.com/alan-wu/map-sidebar/compare/1.0.12...1.1.3-fix-0) - 2022-01-28
+## [1.1.3-fix-0](https://github.com/akhuoa/map-sidebar/compare/1.0.12...1.1.3-fix-0) - 2022-01-28
 
 ### Merged
 
-- Integrated features [`#19`](https://github.com/alan-wu/map-sidebar/pull/19)
-- Add published year [`#6`](https://github.com/alan-wu/map-sidebar/pull/6)
-- Remove setinterval, use cascader callback [`#4`](https://github.com/alan-wu/map-sidebar/pull/4)
-- Make labels in sidebar cascader clickable [`#3`](https://github.com/alan-wu/map-sidebar/pull/3)
+- Integrated features [`#19`](https://github.com/akhuoa/map-sidebar/pull/19)
+- Add published year [`#6`](https://github.com/akhuoa/map-sidebar/pull/6)
+- Remove setinterval, use cascader callback [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Make labels in sidebar cascader clickable [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
 
 ### Commits
 
-- Updated package-lock.json. [`6cc7a9c`](https://github.com/alan-wu/map-sidebar/commit/6cc7a9cd7092ece505585979fb807ee552597290)
-- Merged in simulation branch changes. [`dfb6245`](https://github.com/alan-wu/map-sidebar/commit/dfb6245221cb0d0d93a980703f173077975f7506)
-- Updates to package-lock.json. [`e401cfc`](https://github.com/alan-wu/map-sidebar/commit/e401cfc3718cf3db65608feb5763fc497fb396ca)
+- Updated package-lock.json. [`6cc7a9c`](https://github.com/akhuoa/map-sidebar/commit/6cc7a9cd7092ece505585979fb807ee552597290)
+- Merged in simulation branch changes. [`dfb6245`](https://github.com/akhuoa/map-sidebar/commit/dfb6245221cb0d0d93a980703f173077975f7506)
+- Updates to package-lock.json. [`e401cfc`](https://github.com/akhuoa/map-sidebar/commit/e401cfc3718cf3db65608feb5763fc497fb396ca)
 
 ## 1.0.12 - 2021-07-15
 
 ### Merged
 
-- Filters and other fixes [`#18`](https://github.com/alan-wu/map-sidebar/pull/18)
-- Emit event [`#17`](https://github.com/alan-wu/map-sidebar/pull/17)
-- Add check for organ labels [`#15`](https://github.com/alan-wu/map-sidebar/pull/15)
-- Add neuron search [`#14`](https://github.com/alan-wu/map-sidebar/pull/14)
-- Tehsurfer add neuron search [`#1`](https://github.com/alan-wu/map-sidebar/pull/1)
-- Fix label 'Genotype' being wrong [`#13`](https://github.com/alan-wu/map-sidebar/pull/13)
-- Fix a bug when there is less than 2 contributors. [`#11`](https://github.com/alan-wu/map-sidebar/pull/11)
-- Change endpoint to pennsieve. [`#10`](https://github.com/alan-wu/map-sidebar/pull/10)
-- Fix sidebar not searching on load [`#9`](https://github.com/alan-wu/map-sidebar/pull/9)
-- Give the mockup label more meaningful name. [`#8`](https://github.com/alan-wu/map-sidebar/pull/8)
-- small clean up [`#7`](https://github.com/alan-wu/map-sidebar/pull/7)
-- Fix search displaying result from previous search input. [`#5`](https://github.com/alan-wu/map-sidebar/pull/5)
-- Fix sizing with information card [`#4`](https://github.com/alan-wu/map-sidebar/pull/4)
-- Fix images and css breaking mapintegratedvuer [`#3`](https://github.com/alan-wu/map-sidebar/pull/3)
-- Merge in upstream changes. [`#1`](https://github.com/alan-wu/map-sidebar/pull/1)
-- Added tabs and context cards to sidebar [`#2`](https://github.com/alan-wu/map-sidebar/pull/2)
-- Tidy up for releases. [`#1`](https://github.com/alan-wu/map-sidebar/pull/1)
+- Filters and other fixes [`#18`](https://github.com/akhuoa/map-sidebar/pull/18)
+- Emit event [`#17`](https://github.com/akhuoa/map-sidebar/pull/17)
+- Add check for organ labels [`#15`](https://github.com/akhuoa/map-sidebar/pull/15)
+- Add neuron search [`#14`](https://github.com/akhuoa/map-sidebar/pull/14)
+- Tehsurfer add neuron search [`#1`](https://github.com/akhuoa/map-sidebar/pull/1)
+- Fix label 'Genotype' being wrong [`#13`](https://github.com/akhuoa/map-sidebar/pull/13)
+- Fix a bug when there is less than 2 contributors. [`#11`](https://github.com/akhuoa/map-sidebar/pull/11)
+- Change endpoint to pennsieve. [`#10`](https://github.com/akhuoa/map-sidebar/pull/10)
+- Fix sidebar not searching on load [`#9`](https://github.com/akhuoa/map-sidebar/pull/9)
+- Give the mockup label more meaningful name. [`#8`](https://github.com/akhuoa/map-sidebar/pull/8)
+- small clean up [`#7`](https://github.com/akhuoa/map-sidebar/pull/7)
+- Fix search displaying result from previous search input. [`#5`](https://github.com/akhuoa/map-sidebar/pull/5)
+- Fix sizing with information card [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Fix images and css breaking mapintegratedvuer [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
+- Merge in upstream changes. [`#1`](https://github.com/akhuoa/map-sidebar/pull/1)
+- Added tabs and context cards to sidebar [`#2`](https://github.com/akhuoa/map-sidebar/pull/2)
+- Tidy up for releases. [`#1`](https://github.com/akhuoa/map-sidebar/pull/1)
 
 ### Commits
 
-- Create map-sidebar repo [`ce887ae`](https://github.com/alan-wu/map-sidebar/commit/ce887aec6cef1cc7ee4786117624c8f143ee4411)
-- Change version to 1.0.0. [`a431eed`](https://github.com/alan-wu/map-sidebar/commit/a431eede106aa604be063ab3c71c8382d5b04757)
-- Clean up and small improvements. [`98d19cd`](https://github.com/alan-wu/map-sidebar/commit/98d19cdb59476b0d7ceb3e725ef14d18b61e67ca)
+- Create map-sidebar repo [`ce887ae`](https://github.com/akhuoa/map-sidebar/commit/ce887aec6cef1cc7ee4786117624c8f143ee4411)
+- Change version to 1.0.0. [`a431eed`](https://github.com/akhuoa/map-sidebar/commit/a431eede106aa604be063ab3c71c8382d5b04757)
+- Clean up and small improvements. [`98d19cd`](https://github.com/akhuoa/map-sidebar/commit/98d19cdb59476b0d7ceb3e725ef14d18b61e67ca)
diff --git a/package-lock.json b/package-lock.json
index 56643954..e78b445c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.1",
+  "version": "2.4.2-beta.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.4.1",
+      "version": "2.4.2-beta.0",
       "dependencies": {
         "@abi-software/gallery": "^1.1.1",
         "@abi-software/map-utilities": "^1.1.0",
diff --git a/package.json b/package.json
index 8b175b3b..3eabe5a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.1",
+  "version": "2.4.2-beta.0",
   "files": [
     "dist/*",
     "src/*",

From 09f708f2567d89be609c1402e7efcab1264d60b6 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 13 Sep 2024 15:03:34 +1200
Subject: [PATCH 13/28] Add dataset view button in image thumbnail card

---
 src/components/ImageThumbnails.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 6597a006..304b0486 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -37,13 +37,20 @@
       <div class="dataset-card" v-for="imageThumbnail in imageItems">
         <div class="card" :key="imageThumbnail.link">
           <div class="card-left">
-            <a :href="imageThumbnail.link" class="card-image card-button-link" target="_blank">
-              <el-image :src="imageThumbnail.imgSrc" loading="lazy">
-                <template #error>
-                  <div class="image-slot">Loading...</div>
-                </template>
-              </el-image>
-            </a>
+            <div>
+              <a :href="imageThumbnail.link" class="card-image card-button-link" target="_blank">
+                <el-image :src="imageThumbnail.imgSrc" loading="lazy">
+                  <template #error>
+                    <div class="image-slot">Loading...</div>
+                  </template>
+                </el-image>
+              </a>
+            </div>
+            <div>
+              <a class="button el-button el-button--large card-button-link" :href="datasetURL(imageThumbnail.id)" target="_blank">
+                View Dataset {{ imageThumbnail.id }}
+              </a>
+            </div>
           </div>
           <div class="card-right">
             <div class="details">
@@ -383,6 +390,10 @@ const VIEW_OPTIONS = [
 
 .card-left {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
 }
 
 .card-right {

From 3acf34f7212b9053c887d5d5a3b7b4d655dd033b Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 16 Sep 2024 15:45:01 +1200
Subject: [PATCH 14/28] Add dataset details in image thumbnail card

---
 src/components/ImageThumbnails.vue | 109 +++++++++++++++++++++++++++--
 src/components/SideBar.vue         |   1 +
 2 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 304b0486..f1f8599c 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -52,17 +52,17 @@
               </a>
             </div>
           </div>
-          <div class="card-right">
+          <div class="card-right" v-loading="imageThumbnail.loadingData">
             <div class="details">
               <div class="title">
-                <strong>{{ imageThumbnail.type }}</strong>
+                <strong>{{ imageThumbnail.name }}</strong>
               </div>
             </div>
             <div class="details">
-              <div>
-                {{ formattedTitle(imageThumbnail) }}
-              </div>
+              {{ imageThumbnail.contributors }}
+              {{ imageThumbnail.publishYear ? `(${imageThumbnail.publishYear})` : '' }}
             </div>
+            <div class="details">{{ imageThumbnail.samples }}</div>
             <div class="details">
               <a class="button el-button el-button--large card-button-link" :href="imageThumbnail.link" target="_blank">
                 View {{ imageThumbnail.type }}
@@ -121,6 +121,10 @@ const VIEW_OPTIONS = [
         type: Array,
         default: [],
       },
+      envVars: {
+        type: Object,
+        default: () => {},
+      },
     },
     data: function () {
       return {
@@ -143,6 +147,7 @@ const VIEW_OPTIONS = [
     mounted: function () {
       this.injectImgSrc();
       this.populateFilterTags();
+      this.populateData();
       this.imageItems = this.imageThumbnails;
     },
     watch: {
@@ -212,6 +217,85 @@ const VIEW_OPTIONS = [
         });
         this.imageItems = filteredImageItems;
       },
+      populateData: function () {
+        this.imageThumbnails.forEach((imageThumbnail) => {
+          const id = imageThumbnail.id;
+          const version = imageThumbnail.version;
+          imageThumbnail['loadingData'] = true;
+
+          this.fetchData(id, version)
+          .then((response) => {
+            const name = response.name;
+            const contributors = response.contributors;
+            const versionPublishedAt = response.versionPublishedAt;
+            const species = imageThumbnail.species;
+            const sample = response.modelCount.find((m) => m.modelName === 'sample');
+            const subject = response.modelCount.find((m) => m.modelName === 'animal_subject');
+            const numberSamples = sample ? sample.count : 0;
+            const numberSubjects = subject ? subject.count : 0;
+            imageThumbnail['name'] = name;
+            imageThumbnail['contributors'] = this.getContributors(contributors);
+            imageThumbnail['publishYear'] = this.getPublishYear(versionPublishedAt);
+            imageThumbnail['samples'] = this.getSamples(species, numberSamples, numberSubjects);
+            imageThumbnail['loadingData'] = false;
+          });
+        });
+      },
+      fetchData: async function (id, version) {
+        const apiLocation = this.envVars.API_LOCATION;
+        const url = apiLocation + `sim/dataset/${id}/versions/${version}`;
+        try {
+          const response = await fetch(url);
+          const json = await response.json();
+          return json;
+        } catch (error) {
+          console.log('data fetching error', error)
+        }
+      },
+      // TODO: This function is from DatasetCard
+      getContributors: function (contributors) {
+        let text = ''
+        if (contributors) {
+          if (contributors.length === 1) {
+            text = contributors[0].lastName;
+          } else if (contributors.length === 2) {
+            text =
+            contributors[0].lastName +
+              ' & ' +
+              contributors[1].lastName
+          } else if (contributors.length > 2) {
+            text = contributors[0].lastName + ' et al.'
+          }
+        }
+        return text;
+      },
+      // TODO: This function is from DatasetCard
+      getSamples: function (species, numberSamples, numberSubjects) {
+        let text = ''
+        if (species) {
+          text = `${species}`
+        }
+        if (numberSamples > 0) {
+          text += ' ('
+          if (numberSamples === 1) {
+            text += `${numberSamples} sample`
+          } else if (numberSamples > 1) {
+            text += `${numberSamples} samples`
+          }
+          if (numberSubjects === 1) {
+            text += ` from ${numberSubjects} subject`
+          } else if (numberSamples > 1) {
+            text += ` from ${numberSubjects} subjects`
+          }
+          text += ')'
+        }
+
+        return text
+      },
+      // TODO: This function is from DatasetCard
+      getPublishYear: function (publishDate) {
+        return publishDate.split('-')[0]
+      },
       populateFilterTags: function () {
         let imageObjects = {};
         this.imageThumbnails.forEach((image) => {
@@ -432,6 +516,21 @@ const VIEW_OPTIONS = [
   }
 }
 
+.loading-icon {
+  z-index: 20;
+  width: 40px;
+  height: 40px;
+  left: 80px;
+}
+
+.loading-icon :deep(.el-loading-mask) {
+  background-color: rgba(117, 190, 218, 0) !important;
+}
+
+.loading-icon :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+
 .title {
   font-family: $font-family;
   font-size: 14px;
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index f61e2262..aa23fd93 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -45,6 +45,7 @@
               <ImageThumbnails
                 v-if="imageThumbnails.length"
                 v-show="tab.id === activeTabId"
+                :envVars="envVars"
                 :imageThumbnails="imageThumbnails"
               />
             </template>

From 77097c28066c1e876c3049db0f4d42a4a54baa89 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 16 Sep 2024 15:57:08 +1200
Subject: [PATCH 15/28] Update image thumbnail links

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

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index f1f8599c..848c4c54 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -46,17 +46,12 @@
                 </el-image>
               </a>
             </div>
-            <div>
-              <a class="button el-button el-button--large card-button-link" :href="datasetURL(imageThumbnail.id)" target="_blank">
-                View Dataset {{ imageThumbnail.id }}
-              </a>
-            </div>
           </div>
           <div class="card-right" v-loading="imageThumbnail.loadingData">
             <div class="details">
-              <div class="title">
+              <a class="title" :href="imageThumbnail.link" target="_blank">
                 <strong>{{ imageThumbnail.name }}</strong>
-              </div>
+              </a>
             </div>
             <div class="details">
               {{ imageThumbnail.contributors }}
@@ -64,8 +59,8 @@
             </div>
             <div class="details">{{ imageThumbnail.samples }}</div>
             <div class="details">
-              <a class="button el-button el-button--large card-button-link" :href="imageThumbnail.link" target="_blank">
-                View {{ imageThumbnail.type }}
+              <a class="button el-button el-button--large card-button-link" :href="datasetURL(imageThumbnail.id)" target="_blank">
+                View Dataset {{ imageThumbnail.id }}
               </a>
             </div>
             <!-- Copy to clipboard button container -->
@@ -539,6 +534,7 @@ const VIEW_OPTIONS = [
   font-style: normal;
   line-height: 1.5;
   letter-spacing: 1.05px;
+  text-decoration: none;
   color: #484848;
 }
 

From dadb12184c5df02f7c3b0b40d1d15453707641a4 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 16 Sep 2024 16:08:51 +1200
Subject: [PATCH 16/28] Update image thumbnail copy content

---
 src/components/ImageThumbnails.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 848c4c54..b92fd9b0 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -315,8 +315,23 @@ const VIEW_OPTIONS = [
         // to avoid default formatting on font size and margin
 
         // Title
-        if (imageThumbnail.title) {
-          contentArray.push(`<div><strong>${this.formattedTitle(imageThumbnail)}</strong></div>`);
+        if (imageThumbnail.name) {
+          contentArray.push(`<div><strong>${imageThumbnail.name}</strong></div>`);
+        }
+
+        // Contributors and Publish Date
+        if (imageThumbnail.contributors) {
+          let details = imageThumbnail.contributors;
+
+          if (imageThumbnail.publishYear) {
+            details += ` (${imageThumbnail.publishYear})`;
+          }
+          contentArray.push(`<div>${details}</div>`);
+        }
+
+        // samples
+        if (imageThumbnail.samples) {
+          contentArray.push(`<div>${imageThumbnail.samples}</div>`);
         }
 
         // Type

From 3d8dd29309f79f107661b717c8832e62ea1fa3d6 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 17 Sep 2024 14:22:19 +1200
Subject: [PATCH 17/28] Update fetching image thumbnails data

---
 src/components/ImageThumbnails.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index b92fd9b0..82014827 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -228,10 +228,14 @@ const VIEW_OPTIONS = [
             const subject = response.modelCount.find((m) => m.modelName === 'animal_subject');
             const numberSamples = sample ? sample.count : 0;
             const numberSubjects = subject ? subject.count : 0;
+            const formattedContributors = this.getContributors(contributors);
+            const publishYear = this.getPublishYear(versionPublishedAt);
+            const samples = this.getSamples(species, numberSamples, numberSubjects);
+
             imageThumbnail['name'] = name;
-            imageThumbnail['contributors'] = this.getContributors(contributors);
-            imageThumbnail['publishYear'] = this.getPublishYear(versionPublishedAt);
-            imageThumbnail['samples'] = this.getSamples(species, numberSamples, numberSubjects);
+            imageThumbnail['contributors'] = formattedContributors;
+            imageThumbnail['publishYear'] = publishYear;
+            imageThumbnail['samples'] = samples;
             imageThumbnail['loadingData'] = false;
           });
         });

From 079f9ac3b62ff5db24d727f862d2f73de222082b Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 17 Sep 2024 14:47:59 +1200
Subject: [PATCH 18/28] Update data fetching for image thumbnnail dataset

---
 src/components/ImageThumbnails.vue | 52 ++++++++++++++++++------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 82014827..26265e91 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -213,33 +213,45 @@ const VIEW_OPTIONS = [
         this.imageItems = filteredImageItems;
       },
       populateData: function () {
+        const requests = [];
         this.imageThumbnails.forEach((imageThumbnail) => {
           const id = imageThumbnail.id;
           const version = imageThumbnail.version;
+          const key = `${id}-${version}`;
           imageThumbnail['loadingData'] = true;
 
-          this.fetchData(id, version)
-          .then((response) => {
-            const name = response.name;
-            const contributors = response.contributors;
-            const versionPublishedAt = response.versionPublishedAt;
-            const species = imageThumbnail.species;
-            const sample = response.modelCount.find((m) => m.modelName === 'sample');
-            const subject = response.modelCount.find((m) => m.modelName === 'animal_subject');
-            const numberSamples = sample ? sample.count : 0;
-            const numberSubjects = subject ? subject.count : 0;
-            const formattedContributors = this.getContributors(contributors);
-            const publishYear = this.getPublishYear(versionPublishedAt);
-            const samples = this.getSamples(species, numberSamples, numberSubjects);
-
-            imageThumbnail['name'] = name;
-            imageThumbnail['contributors'] = formattedContributors;
-            imageThumbnail['publishYear'] = publishYear;
-            imageThumbnail['samples'] = samples;
-            imageThumbnail['loadingData'] = false;
-          });
+          const existingReqest = requests.find((item) => item.key === key);
+          if (existingReqest) {
+            existingReqest.api.then((response) => this.bindData(response, imageThumbnail));
+          } else {
+            const newRequest = {
+              key: key,
+              api: this.fetchData(id, version)
+            };
+            newRequest.api.then((response) => this.bindData(response, imageThumbnail));
+            requests.push(newRequest);
+          }
         });
       },
+      bindData: function (response, imageThumbnail) {
+        const name = response.name;
+        const contributors = response.contributors;
+        const versionPublishedAt = response.versionPublishedAt;
+        const species = imageThumbnail.species;
+        const sample = response.modelCount.find((m) => m.modelName === 'sample');
+        const subject = response.modelCount.find((m) => m.modelName === 'animal_subject');
+        const numberSamples = sample ? sample.count : 0;
+        const numberSubjects = subject ? subject.count : 0;
+        const formattedContributors = this.getContributors(contributors);
+        const publishYear = this.getPublishYear(versionPublishedAt);
+        const samples = this.getSamples(species, numberSamples, numberSubjects);
+
+        imageThumbnail['name'] = name;
+        imageThumbnail['contributors'] = formattedContributors;
+        imageThumbnail['publishYear'] = publishYear;
+        imageThumbnail['samples'] = samples;
+        imageThumbnail['loadingData'] = false;
+      },
       fetchData: async function (id, version) {
         const apiLocation = this.envVars.API_LOCATION;
         const url = apiLocation + `sim/dataset/${id}/versions/${version}`;

From 5edfea2921f0423a525d89c6c2d1f004bc4496ad Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 17 Sep 2024 16:20:56 +1200
Subject: [PATCH 19/28] Update image thumbnail cards UI

---
 src/components/ImageThumbnails.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 26265e91..f72a701a 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -38,7 +38,11 @@
         <div class="card" :key="imageThumbnail.link">
           <div class="card-left">
             <div>
-              <a :href="imageThumbnail.link" class="card-image card-button-link" target="_blank">
+              <a
+                :href="imageThumbnail.link"
+                class="card-image card-button-link"
+                target="_blank"
+              >
                 <el-image :src="imageThumbnail.imgSrc" loading="lazy">
                   <template #error>
                     <div class="image-slot">Loading...</div>
@@ -46,6 +50,15 @@
                 </el-image>
               </a>
             </div>
+            <div>
+              <a
+                :href="datasetURL(imageThumbnail.id)"
+                class="button el-button el-button--large card-button-link"
+                target="_blank"
+              >
+                View Dataset {{ imageThumbnail.id }}
+              </a>
+            </div>
           </div>
           <div class="card-right" v-loading="imageThumbnail.loadingData">
             <div class="details">
@@ -58,11 +71,6 @@
               {{ imageThumbnail.publishYear ? `(${imageThumbnail.publishYear})` : '' }}
             </div>
             <div class="details">{{ imageThumbnail.samples }}</div>
-            <div class="details">
-              <a class="button el-button el-button--large card-button-link" :href="datasetURL(imageThumbnail.id)" target="_blank">
-                View Dataset {{ imageThumbnail.id }}
-              </a>
-            </div>
             <!-- Copy to clipboard button container -->
             <div class="float-button-container">
               <CopyToClipboard :content="getCopyContent(imageThumbnail)" />
@@ -502,7 +510,7 @@ const VIEW_OPTIONS = [
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.5rem;
   align-items: center;
 }
 

From 34851b99e5820ca5d48e37dd693a4796dce02a2a Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 17 Sep 2024 16:38:53 +1200
Subject: [PATCH 20/28] Update image thumbnail links

---
 src/components/ImageThumbnails.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index f72a701a..1ada6519 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -52,17 +52,21 @@
             </div>
             <div>
               <a
-                :href="datasetURL(imageThumbnail.id)"
+                :href="imageThumbnail.link"
                 class="button el-button el-button--large card-button-link"
                 target="_blank"
               >
-                View Dataset {{ imageThumbnail.id }}
+                View {{ imageThumbnail.type }}
               </a>
             </div>
           </div>
           <div class="card-right" v-loading="imageThumbnail.loadingData">
             <div class="details">
-              <a class="title" :href="imageThumbnail.link" target="_blank">
+              <a
+                :href="datasetURL(imageThumbnail.id)"
+                class="title"
+                target="_blank"
+              >
                 <strong>{{ imageThumbnail.name }}</strong>
               </a>
             </div>

From b3dd2d9831e29b81964502450c51d372da9bf95d Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 19 Sep 2024 17:40:12 +1200
Subject: [PATCH 21/28] Update image thumbnail card click for image type

---
 src/components/ImageThumbnails.vue | 71 ++++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 1ada6519..b95b675b 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -38,26 +38,24 @@
         <div class="card" :key="imageThumbnail.link">
           <div class="card-left">
             <div>
-              <a
-                :href="imageThumbnail.link"
-                class="card-image card-button-link"
-                target="_blank"
+              <div
+                class="card-image"
+                @click="cardButtonClick(imageThumbnail)"
               >
                 <el-image :src="imageThumbnail.imgSrc" loading="lazy">
                   <template #error>
                     <div class="image-slot">Loading...</div>
                   </template>
                 </el-image>
-              </a>
+              </div>
             </div>
             <div>
-              <a
-                :href="imageThumbnail.link"
-                class="button el-button el-button--large card-button-link"
-                target="_blank"
+              <button
+                class="button el-button el-button--large"
+                @click="cardButtonClick(imageThumbnail)"
               >
                 View {{ imageThumbnail.type }}
-              </a>
+              </button>
             </div>
           </div>
           <div class="card-right" v-loading="imageThumbnail.loadingData">
@@ -97,6 +95,7 @@ import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 import Gallery from "@abi-software/gallery";
 import "@abi-software/gallery/dist/style.css";
+import EventBus from './EventBus.js'
 
 const BASE64PREFIX = 'data:image/png;base64,';
 const VIEW_OPTIONS = [
@@ -275,6 +274,17 @@ const VIEW_OPTIONS = [
           console.log('data fetching error', error)
         }
       },
+      fetchBiolucidaData: async function (id) {
+        const apiLocation = this.envVars.API_LOCATION;
+        const url = apiLocation + 'image_search/' + id;
+        try {
+          const response = await fetch(url);
+          const json = await response.json();
+          return json;
+        } catch (error) {
+          console.warn('Biolucida data fetching error', error)
+        }
+      },
       // TODO: This function is from DatasetCard
       getContributors: function (contributors) {
         let text = ''
@@ -336,6 +346,43 @@ const VIEW_OPTIONS = [
         });
         this.speciesFilterTags = Object.values(imageObjects);
       },
+      cardButtonClick: function (imageThumbnail) {
+        const id = imageThumbnail.id;
+        const biolucidaData = this.fetchBiolucidaData(id);
+
+        biolucidaData.then((data) => {
+          if (data.status === 'success') {
+            const biolucidaImage = data.dataset_images.find((datasetImg) =>
+              datasetImg.image_id === imageThumbnail.biolucida_id
+            );
+
+            if (biolucidaImage) {
+              // TODO: to update label and name
+              const dataToEmit = {
+                "label": imageThumbnail.name,
+                "name": imageThumbnail.name,
+                "datasetId": id,
+                "title": "View " + imageThumbnail.type,
+                "type": "Biolucida",
+                "resource": {
+                    "share_link": biolucidaImage.share_link,
+                    "id": biolucidaImage.image_id,
+                    "itemId": biolucidaImage.sourcepkg_id,
+                }
+              };
+              this.propogateCardAction(dataToEmit);
+            } else {
+              console.warn('Image not found!', data);
+            }
+
+          }
+        });
+      },
+      // TODO: This function is from DatasetCard
+      propogateCardAction: function (action) {
+        EventBus.emit('PopoverActionClick', action)
+        EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
+      },
       getCopyContent: function (imageThumbnail) {
         const contentArray = [];
 
@@ -615,10 +662,6 @@ const VIEW_OPTIONS = [
   }
 }
 
-.card-button-link {
-  text-decoration: none;
-}
-
 .float-button-container {
   position: absolute;
   bottom: 0;

From 305e44f7204b404b540ed7233fce26d2de933734 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 23 Sep 2024 12:24:05 +1200
Subject: [PATCH 22/28] Add image title and fix data update

---
 src/components/ImageThumbnails.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index b95b675b..a746edb7 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -50,6 +50,7 @@
               </div>
             </div>
             <div>
+              <p>{{ formattedTitle(imageThumbnail) }}</p>
               <button
                 class="button el-button el-button--large"
                 @click="cardButtonClick(imageThumbnail)"
@@ -123,7 +124,7 @@ const VIEW_OPTIONS = [
       /**
        * The image thumbnails data to show in sidebar.
        */
-       imageThumbnails: {
+      imageThumbnails: {
         type: Array,
         default: [],
       },
@@ -151,24 +152,25 @@ const VIEW_OPTIONS = [
       },
     },
     mounted: function () {
-      this.injectImgSrc();
-      this.populateFilterTags();
-      this.populateData();
-      this.imageItems = this.imageThumbnails;
+      this.prepareImages();
     },
     watch: {
       imageThumbnails: {
         handler: function (value) {
           if (value) {
-            this.injectImgSrc();
-            this.populateFilterTags();
-            this.imageItems = this.imageThumbnails;
+            this.prepareImages();
           }
         },
         deep: true,
       },
     },
     methods: {
+      prepareImages: function() {
+        this.imageItems = this.imageThumbnails;
+        this.injectImgSrc();
+        this.populateFilterTags();
+        this.populateData();
+      },
       injectImgSrc: function() {
         this.imageThumbnails.forEach((imageThumbnail) => {
           return this.mapImage(imageThumbnail);
@@ -181,7 +183,7 @@ const VIEW_OPTIONS = [
         if (type !== 'jpg') {
           formattedTitle = title.replace('.' + type, '');
         }
-        formattedTitle = formattedTitle.replaceAll('_', ' ');
+        // formattedTitle = formattedTitle.replaceAll('_', ' ');
         return formattedTitle;
       },
       datasetURL: function(id) {
@@ -563,6 +565,15 @@ const VIEW_OPTIONS = [
   flex-direction: column;
   gap: 1.5rem;
   align-items: center;
+
+  > div {
+    text-align: center;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1em;
+  }
 }
 
 .card-right {

From e4785a59957f65b5a21a1d916f87f1abe4db0eee Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 23 Sep 2024 12:34:35 +1200
Subject: [PATCH 23/28] Remove gallery view from image thumbnails list

---
 src/components/ImageThumbnails.vue | 66 +-----------------------------
 1 file changed, 2 insertions(+), 64 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index a746edb7..fb5eabf7 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -15,25 +15,9 @@
           {{ species.name }} ({{ species.count }})
         </el-tag>
       </div>
-      <div class="view-selector">
-        <el-select
-          v-model="viewOption"
-          placeholder="Select view"
-          popper-class="view-selector-select-popper"
-        >
-          <el-option
-            v-for="item in viewOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </div>
-    </div>
-    <div class="gallery-container" v-if="viewOption === 'gallery'">
-      <Gallery :items="imageItems" :imageStyle="imageStyle" />
     </div>
-    <div class="dataset-card-container" v-if="viewOption === 'list'">
+
+    <div class="dataset-card-container">
       <div class="dataset-card" v-for="imageThumbnail in imageItems">
         <div class="card" :key="imageThumbnail.link">
           <div class="card-left">
@@ -94,21 +78,9 @@ import {
 } from 'element-plus';
 import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
-import Gallery from "@abi-software/gallery";
-import "@abi-software/gallery/dist/style.css";
 import EventBus from './EventBus.js'
 
 const BASE64PREFIX = 'data:image/png;base64,';
-const VIEW_OPTIONS = [
-  {
-    value: 'list',
-    label: 'List'
-  },
-  {
-    value: 'gallery',
-    label: 'Gallery'
-  }
-];
 
   export default {
     name: 'ImageThumbnails',
@@ -117,7 +89,6 @@ const VIEW_OPTIONS = [
       Option,
       Select,
       ElImage,
-      Gallery,
       CopyToClipboard,
     },
     props: {
@@ -138,9 +109,6 @@ const VIEW_OPTIONS = [
         activeSpecies: { name: "" },
         speciesFilterTags: [],
         imageItems: [],
-        showImageGallery: false,
-        viewOption: 'list',
-        viewOptions: VIEW_OPTIONS,
       };
     },
     computed: {
@@ -507,12 +475,6 @@ const VIEW_OPTIONS = [
   }
 }
 
-.view-selector .el-select {
-  width: 100px;
-  font-family: $font-family;
-}
-
-.gallery-container,
 .dataset-card-container {
   margin: 1rem;
   margin-top: 0;
@@ -526,18 +488,6 @@ const VIEW_OPTIONS = [
   border-radius: var(--el-border-radius-base);
 }
 
-.gallery-container {
-  :deep(.gallery) {
-    .gallery-strip {
-      padding: 1rem 0;
-    }
-
-    > div {
-      min-height: max-content !important;
-    }
-  }
-}
-
 .dataset-card-container {
   display: flex;
   flex-direction: column;
@@ -686,15 +636,3 @@ const VIEW_OPTIONS = [
   }
 }
 </style>
-
-<style lang="scss">
-  .view-selector-select-popper {
-    font-family: $font-family;
-    font-size: 14px;
-    color: #292b66;
-
-    .el-select-dropdown__item.is-selected {
-      color: $app-primary-color;
-    }
-  }
-</style>
\ No newline at end of file

From d354bfe2fdca570ff98494a5021b62b36620f733 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 23 Sep 2024 17:33:42 +1200
Subject: [PATCH 24/28] Add segmentation card click in image thumbnail list

---
 src/components/ImageThumbnails.vue | 42 +++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index fb5eabf7..07c196be 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -317,6 +317,28 @@ const BASE64PREFIX = 'data:image/png;base64,';
         this.speciesFilterTags = Object.values(imageObjects);
       },
       cardButtonClick: function (imageThumbnail) {
+        const imageType = imageThumbnail.type.toLowerCase();
+
+        switch (imageType) {
+          case 'image':
+            this.emitBiolucidaData(imageThumbnail);
+            break;
+          case 'segmentation':
+            this.emitSegmentationData(imageThumbnail);
+            break;
+          case 'scaffold':
+          console.log('scaffold')
+            break;
+          case 'plot':
+            console.log('plot')
+            break;
+
+          default:
+            console.warn('Image type not founnd!', imageType)
+            break;
+        }
+      },
+      emitBiolucidaData: function (imageThumbnail) {
         const id = imageThumbnail.id;
         const biolucidaData = this.fetchBiolucidaData(id);
 
@@ -344,10 +366,27 @@ const BASE64PREFIX = 'data:image/png;base64,';
             } else {
               console.warn('Image not found!', data);
             }
-
+          } else {
+            console.warn('Image not found!', data);
           }
         });
       },
+      emitSegmentationData: function (imageThumbnail) {
+        const prefix = this.envVars.NL_LINK_PREFIX;
+        const pathQuery = imageThumbnail.link.split('?')[1];
+        const resource = {
+          share_link: `${prefix}/dataviewer?${pathQuery}`,
+        };
+        let dataToEmit = {
+          label: imageThumbnail.name,
+          resource: resource,
+          datasetId: Number(imageThumbnail.id),
+          s3uri: '', // TODO: to find s3URI
+          title: 'View segmentation',
+          type: 'Segmentation',
+        };
+        this.propogateCardAction(dataToEmit);
+      },
       // TODO: This function is from DatasetCard
       propogateCardAction: function (action) {
         EventBus.emit('PopoverActionClick', action)
@@ -538,6 +577,7 @@ const BASE64PREFIX = 'data:image/png;base64,';
   display: block;
   text-decoration: none;
   outline: none;
+  cursor: pointer;
 
   .el-image {
     display: block;

From ca5cb414326930fb751d5ce61ef483addf164d25 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 24 Sep 2024 11:38:15 +1200
Subject: [PATCH 25/28] Add thumbnnail click emit for scaffold and plot

---
 src/components/ImageThumbnails.vue | 96 ++++++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 07c196be..cdfaaafb 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -226,12 +226,14 @@ const BASE64PREFIX = 'data:image/png;base64,';
         const formattedContributors = this.getContributors(contributors);
         const publishYear = this.getPublishYear(versionPublishedAt);
         const samples = this.getSamples(species, numberSamples, numberSubjects);
+        const s3uri = response.uri;
 
         imageThumbnail['name'] = name;
         imageThumbnail['contributors'] = formattedContributors;
         imageThumbnail['publishYear'] = publishYear;
         imageThumbnail['samples'] = samples;
         imageThumbnail['loadingData'] = false;
+        imageThumbnail['s3uri'] = s3uri;
       },
       fetchData: async function (id, version) {
         const apiLocation = this.envVars.API_LOCATION;
@@ -327,10 +329,10 @@ const BASE64PREFIX = 'data:image/png;base64,';
             this.emitSegmentationData(imageThumbnail);
             break;
           case 'scaffold':
-          console.log('scaffold')
+            this.emitScaffoldData(imageThumbnail);
             break;
           case 'plot':
-            console.log('plot')
+            this.emitPlotData(imageThumbnail);
             break;
 
           default:
@@ -377,16 +379,102 @@ const BASE64PREFIX = 'data:image/png;base64,';
         const resource = {
           share_link: `${prefix}/dataviewer?${pathQuery}`,
         };
-        let dataToEmit = {
+        const dataToEmit = {
           label: imageThumbnail.name,
           resource: resource,
           datasetId: Number(imageThumbnail.id),
-          s3uri: '', // TODO: to find s3URI
+          s3uri: imageThumbnail.s3uri,
           title: 'View segmentation',
           type: 'Segmentation',
         };
         this.propogateCardAction(dataToEmit);
       },
+      emitScaffoldData: function (imageThumbnail) {
+        const s3uri = imageThumbnail.s3uri;
+        const filePath = imageThumbnail.link.split('files/')[1];
+        const resourcePath = `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix(s3uri)}files/${filePath}${this.getS3Args(s3uri)}`;
+        const dataToEmit = {
+          label: imageThumbnail.name,
+          resource: resourcePath,
+          title: "View 3D scaffold",
+          type: "Scaffold",
+          discoverId: Number(imageThumbnail.id),
+          apiLocation: this.envVars.API_LOCATION,
+          version: imageThumbnail.version,
+          banner: imageThumbnail.thumbnail,
+          s3uri: s3uri,
+          contextCardUrl: '', // TODO: to find context card URL
+        };
+        this.propogateCardAction(dataToEmit);
+      },
+      emitPlotData: function (imageThumbnail) {
+        const s3uri = imageThumbnail.s3uri;
+        const filePath = imageThumbnail.link.split('files/')[1];
+        const filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.getS3Prefix(s3uri)}files/`;
+        const sourceUrl = filePathPrefix + filePath + this.getS3Args(s3uri);
+        let metadata = {};
+        // TODO: to find out metadata
+        // try {
+        //   metadata = JSON.parse(
+        //     plotAnnotation.supplemental_json_metadata.description
+        //   )
+        // } catch (error) {
+        //   console.warn(error)
+        // }
+        let supplementalData = [];
+        // TODO: to find out supplementalData
+        // if (plotAnnotation.isDescribedBy) {
+        //   supplementalData.push({
+        //     url: filePathPrefix + plotAnnotation.isDescribedBy.path,
+        //   })
+        // }
+        const resource = {
+          dataSource: { url: sourceUrl },
+          metadata,
+          supplementalData,
+        };
+        const dataToEmit = {
+          label: imageThumbnail.name,
+          resource: resource,
+          s3uri: s3uri,
+          title: 'View plot',
+          type: 'Plot',
+          discoverId: Number(imageThumbnail.id),
+          version: imageThumbnail.version,
+        };
+        this.propogateCardAction(dataToEmit);
+      },
+      // TODO: to combine with s3Bucket mixin
+      getS3Prefix: function (s3uri) {
+        let s3Prefix = '';
+        if (s3uri) {
+          const substring = s3uri.split("//")[1];
+          if (substring) {
+            const n = substring.indexOf('/');
+            s3Prefix = substring.substring(n + 1);
+          }
+        }
+        return s3Prefix;
+      },
+      // TODO: to combine with s3Bucket mixin
+      getS3Args: function(s3uri) {
+        const s3Bucket = this.getS3Bucket(s3uri);
+        if (s3Bucket) {
+          return `?s3BucketName=${s3Bucket}`;
+        }
+        return '';
+      },
+      // TODO: to combine with s3Bucket mixin
+      getS3Bucket: function(s3uri) {
+        let s3Bucket = '';
+        if (s3uri) {
+          const substring = s3uri.split("//")[1];
+          if (substring) {
+            s3Bucket = substring.split("/")[0];
+          }
+        }
+        return s3Bucket;
+      },
       // TODO: This function is from DatasetCard
       propogateCardAction: function (action) {
         EventBus.emit('PopoverActionClick', action)

From 82e0b6272dc9d4b3cd628e6ce3f2f27d5d298913 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 24 Sep 2024 11:57:11 +1200
Subject: [PATCH 26/28] Add search filter UI for image thumbnnails

---
 src/components/ImageThumbnails.vue | 71 +++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index cdfaaafb..a7d9adcd 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -1,5 +1,26 @@
 <template>
   <div class="image-thumbnails-container">
+    <div class="el-card__header">
+      <div class="header">
+        <el-input
+          class="search-input"
+          placeholder="Search"
+          v-model="searchInput"
+          @keyup="searchEvent"
+          clearable
+          @clear="clearSearchClicked"
+        ></el-input>
+        <el-button
+          type="primary"
+          class="button"
+          @click="searchEvent"
+          size="large"
+        >
+          Search
+        </el-button>
+      </div>
+    </div>
+
     <div class="toolbar">
       <div class="filters">
         <el-tag
@@ -106,6 +127,7 @@ const BASE64PREFIX = 'data:image/png;base64,';
     },
     data: function () {
       return {
+        searchInput: '',
         activeSpecies: { name: "" },
         speciesFilterTags: [],
         imageItems: [],
@@ -179,6 +201,24 @@ const BASE64PREFIX = 'data:image/png;base64,';
         this.activeSpecies = { name: "" };
         this.imageItems = this.imageThumbnails;
       },
+      searchEvent: function (event = false) {
+        // TODO: to perform search
+        // if (event.keyCode === 13 || event instanceof MouseEvent) {
+        //   this.resetPageNavigation()
+        //   this.searchAlgolia(this.filters, this.searchInput)
+        //   this.$refs.searchHistory.selectValue = 'Full search history'
+        //   this.$refs.searchHistory.addSearchToHistory(
+        //     this.filters,
+        //     this.searchInput
+        //   )
+        // }
+      },
+      clearSearchClicked: function () {
+        // TODO: to clear search
+        this.searchInput = '';
+        // this.resetPageNavigation()
+        // this.searchAlgolia(this.filters, this.searchInput)
+      },
       filterBySpecies: function (tagInfo) {
         this.activeSpecies = tagInfo;
         let filteredImageItems = [];
@@ -570,14 +610,41 @@ const BASE64PREFIX = 'data:image/png;base64,';
   font-family: $font-family;
   font-weight: 400;
   background-color: #f7faff;
-  border-left: 1px solid var(--el-border-color);
-  border-top: 1px solid var(--el-border-color);
+  box-shadow: var(--el-box-shadow-light);
   display: flex;
   flex-direction: column;
   height: calc(100% - 30px); // minus tabs height
   z-index: 1;
 }
 
+// TODO: to combine with sidebarConntent
+.header {
+  border: solid 1px #292b66;
+  background-color: #292b66;
+  text-align: left;
+
+  .el-button {
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #fff;
+    }
+  }
+}
+// TODO: to combine with sidebarConntent
+.image-thumbnails-container .el-card__header {
+  background-color: #292b66;
+  padding: 1rem;
+}
+// TODO: to combine with sidebarConntent
+.search-input {
+  width: 298px !important;
+  height: 40px;
+  padding-right: 14px;
+  align-items: left;
+}
+
 .toolbar {
   display: flex;
   flex-direction: row;

From 2a560878f3cc5cabc1d102fa691cbcfb6329854c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 24 Sep 2024 14:30:04 +1200
Subject: [PATCH 27/28] Add filters for image thumbnails

---
 src/components/ImageThumbnails.vue | 98 ++++++++++++++++++++++++++++--
 1 file changed, 94 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index a7d9adcd..4d72b497 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -23,7 +23,23 @@
 
     <div class="toolbar">
       <div class="filters">
-        <el-tag
+        <el-cascader
+          :options="speciesFilterOptions"
+          :props="cascaderProps"
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="1"
+          class="cascader"
+          popper-class="sidebar-cascader-popper"
+          ref="cascader"
+          v-model="cascadeSelected"
+          size="large"
+          placeholder="Filters"
+          @change="cascadeEvent($event)"
+          @expand-change="cascadeExpandChange"
+          show-all-levels
+        />
+        <!-- <el-tag
           v-for="(species, index) in speciesFilterTags"
           :key="index"
           type="info"
@@ -34,7 +50,7 @@
           @click="filterBySpecies(species)"
         >
           {{ species.name }} ({{ species.count }})
-        </el-tag>
+        </el-tag> -->
       </div>
     </div>
 
@@ -96,6 +112,7 @@ import {
   ElTag as Tag,
   ElOption as Option,
   ElSelect as Select,
+  ElCascader as Cascader,
 } from 'element-plus';
 import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
@@ -110,6 +127,7 @@ const BASE64PREFIX = 'data:image/png;base64,';
       Option,
       Select,
       ElImage,
+      Cascader,
       CopyToClipboard,
     },
     props: {
@@ -128,8 +146,11 @@ const BASE64PREFIX = 'data:image/png;base64,';
     data: function () {
       return {
         searchInput: '',
+        cascaderProps: { multiple: true },
+        cascadeSelected: [],
         activeSpecies: { name: "" },
         speciesFilterTags: [],
+        speciesFilterOptions: [],
         imageItems: [],
       };
     },
@@ -219,13 +240,29 @@ const BASE64PREFIX = 'data:image/png;base64,';
         // this.resetPageNavigation()
         // this.searchAlgolia(this.filters, this.searchInput)
       },
+      cascadeEvent: function (event) {
+        // TODO: to update cascade event
+        console.log('cascadeEvent', event)
+        this.filterBySpecies();
+      },
+      cascadeExpandChange: function (event) {
+        // TODO: to update cascade event
+      },
       filterBySpecies: function (tagInfo) {
-        this.activeSpecies = tagInfo;
+        let speciesValue = '';
+        if (tagInfo) {
+          this.activeSpecies = tagInfo;
+          speciesValue = tagInfo.name;
+        } else if (this.cascadeSelected.length) {
+          speciesValue = this.cascadeSelected[0][1]; // TODO: to update
+        } else if (!this.cascadeSelected.length) {
+          this.removeSpeciesFilterTag();
+        }
         let filteredImageItems = [];
         this.imageThumbnails.forEach((image) => {
           if (image.species && image.species.length) {
             image.species.forEach((species) => {
-              if (species === tagInfo.name) {
+              if (species === speciesValue) {
                 filteredImageItems.push(image);
               }
             });
@@ -357,6 +394,20 @@ const BASE64PREFIX = 'data:image/png;base64,';
           }
         });
         this.speciesFilterTags = Object.values(imageObjects);
+        const speciesChildren = [];
+        this.speciesFilterTags.forEach((filterTag) => {
+          speciesChildren.push({
+            value: filterTag.name,
+            label: filterTag.name,
+          });
+        });
+        this.speciesFilterOptions = [
+          {
+            value: 'species',
+            label: 'Species',
+            children: speciesChildren
+          }
+        ];
       },
       cardButtonClick: function (imageThumbnail) {
         const imageType = imageThumbnail.type.toLowerCase();
@@ -644,6 +695,38 @@ const BASE64PREFIX = 'data:image/png;base64,';
   padding-right: 14px;
   align-items: left;
 }
+// TODO: to combine with searchFilters
+.cascader {
+  font-family: $font-family;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #292b66;
+  text-align: center;
+  padding-bottom: 6px;
+
+  .el-cascader__tags .el-tag {
+    font-family: $font-family;
+    font-size: 12px;
+    color: #303133 !important;
+    background-color: #fff;
+    border-color: #dcdfe6 !important;
+  }
+
+  .el-input .el-input__inner::placeholder {
+    font-family: $font-family;
+    font-size: 14px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #292b66;
+  }
+}
 
 .toolbar {
   display: flex;
@@ -831,3 +914,10 @@ const BASE64PREFIX = 'data:image/png;base64,';
   }
 }
 </style>
+
+<style lang="scss">
+.sidebar-cascader-popper .el-checkbox__input.is-indeterminate > .el-checkbox__inner {
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
+}
+</style>

From e8adba14275944299eb3d06f039ad7cb4503c7c4 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 24 Sep 2024 16:21:11 +1200
Subject: [PATCH 28/28] Add imageThumbnails component into search area instead
 of separate tab

---
 src/App.vue                        |  5 +++--
 src/components/ImageThumbnails.vue | 26 ++++++++++++++++++--------
 src/components/SideBar.vue         | 14 +++++++++++++-
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index aa1c2a07..2f1afec6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,7 +109,7 @@ export default {
       tabArray: [
         { title: 'Flatmap', id: 1, type: 'search'},
         { title: 'Connectivity', id: 2, type: 'connectivity' },
-        { title: 'Images', id: 3, type: 'images' },
+        // { title: 'Images', id: 3, type: 'images' },
       ],
       sideBarVisibility: true,
       envVars: {
@@ -236,7 +236,8 @@ export default {
     },
     showImages: function () {
       if (this.$refs.sideBar) {
-        this.tabClicked({id: 3, type: 'images'});
+        // this.tabClicked({id: 1, type: 'images'});
+        this.$refs.sideBar.searchType = 'images';
         this.$refs.sideBar.setDrawerOpen(true);
       }
     },
diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
index 4d72b497..812d8039 100644
--- a/src/components/ImageThumbnails.vue
+++ b/src/components/ImageThumbnails.vue
@@ -10,14 +10,14 @@
           clearable
           @clear="clearSearchClicked"
         ></el-input>
-        <el-button
-          type="primary"
-          class="button"
-          @click="searchEvent"
-          size="large"
-        >
-          Search
-        </el-button>
+        <el-dropdown split-button type="primary" class="button" @click="handleDropdownClick" size="large">
+          Search Images
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="switchToDataset">Search Dataset</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
     </div>
 
@@ -113,7 +113,9 @@ import {
   ElOption as Option,
   ElSelect as Select,
   ElCascader as Cascader,
+  ElDropdown as Dropdown,
 } from 'element-plus';
+import { ArrowDown } from '@element-plus/icons-vue'
 import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 import EventBus from './EventBus.js'
@@ -128,6 +130,8 @@ const BASE64PREFIX = 'data:image/png;base64,';
       Select,
       ElImage,
       Cascader,
+      Dropdown,
+      ArrowDown,
       CopyToClipboard,
     },
     props: {
@@ -222,6 +226,12 @@ const BASE64PREFIX = 'data:image/png;base64,';
         this.activeSpecies = { name: "" };
         this.imageItems = this.imageThumbnails;
       },
+      handleDropdownClick: function () {
+
+      },
+      switchToDataset: function () {
+        this.$emit('update-search-type', '');
+      },
       searchEvent: function (event = false) {
         // TODO: to perform search
         // if (event.keyCode === 13 || event instanceof MouseEvent) {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index aa23fd93..77431f81 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -50,7 +50,15 @@
               />
             </template>
             <template v-else>
+            <ImageThumbnails
+              v-if="imageThumbnails.length && searchType === 'images'"
+              v-show="tab.id === activeTabId"
+              :envVars="envVars"
+              :imageThumbnails="imageThumbnails"
+              @update-search-type="onUpdateSearchType"
+            />
             <SidebarContent
+              v-if="searchType !== 'images'"
               class="sidebar-content-container"
               v-show="tab.id === activeTabId"
               :contextCardEntry="tab.contextCard"
@@ -121,7 +129,7 @@ export default {
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
         { id: 2, title: 'Connectivity', type: 'connectivity' },
-        { id: 3, title: 'Images', type: 'images' }, // Temporary
+        // { id: 3, title: 'Images', type: 'images' }, // Temporary
       ],
     },
     /**
@@ -156,6 +164,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
+      searchType: '',
       availableAnatomyFacets: []
     }
   },
@@ -287,6 +296,9 @@ export default {
         this.$emit('image-thumbnail-close');
       }
     },
+    onUpdateSearchType: function () {
+      this.searchType = '';
+    },
   },
   created: function () {
     this.drawerOpen = this.openAtStart