From d8e94bffa9d3a64c60b0aa46ff3a8e3ae53fe407 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Tue, 14 May 2024 10:28:00 +1200
Subject: [PATCH 1/2] add hover-changed callback to return anatomy

---
 src/App.vue                       |  4 ++++
 src/algolia/algolia.js            |  2 ++
 src/components/SideBar.vue        | 12 ++++++++----
 src/components/SidebarContent.vue | 19 +++++++++++++++++--
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6b930851..f241f5e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,7 @@
       :activeId="activeId"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
+      @hover-changed="hoverChanged($event)"
       @actionClick="action"
     />
   </div>
@@ -110,6 +111,9 @@ export default {
     }
   },
   methods: {
+    hoverChanged: function (data) {
+      console.log('hoverChanged', data)
+    },
     searchChanged: function (data) {
       console.log(data)
     },
diff --git a/src/algolia/algolia.js b/src/algolia/algolia.js
index ec9586cf..c50c4157 100644
--- a/src/algolia/algolia.js
+++ b/src/algolia/algolia.js
@@ -100,6 +100,7 @@ export class AlgoliaClient {
     for (let res of results) {
       newResult = { ...res }
       newResult = {
+        anatomy: res.anatomy ? res.anatomy.organ.map((organ => organ.curie)) : undefined,
         doi: res.item.curie.split(':')[1],
         name: res.item.name,
         description: res.item.description,
@@ -167,6 +168,7 @@ export class AlgoliaClient {
             'item.name',
             'item.description',
             'objectID',
+            'anatomy.organ.curie'
           ],
         })
         .then(response => {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 35b7943b..5a195e41 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -35,6 +35,7 @@
               :envVars="envVars"
               :ref="tab.id"
               @search-changed="searchChanged(tab.id, $event)"
+              @hover-changed="hoverChanged($event)"
             />
           </template>
         </div>
@@ -113,11 +114,14 @@ export default {
     }
   },
   methods: {
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
+    /**
+     * This event is emitted when the search filters are changed.
+     * @arg `obj` {data, id}
+     */
     searchChanged: function (id, data) {
-      /**
-       * This event is emitted when the search filters are changed.
-       * @arg `obj` {data, id}
-       */
       this.$emit('search-changed', { ...data, id: id })
     },
     /**
diff --git a/src/components/SidebarContent.vue b/src/components/SidebarContent.vue
index d9662ad6..455b7fba 100644
--- a/src/components/SidebarContent.vue
+++ b/src/components/SidebarContent.vue
@@ -39,7 +39,13 @@
         No results found - Please change your search / filter criteria.
       </div>
       <div v-for="result in results" :key="result.doi" class="step-item">
-        <DatasetCard :entry="result" :envVars="envVars"></DatasetCard>
+        <DatasetCard
+          class="dataset-card"
+          :entry="result" 
+          :envVars="envVars" 
+          @mouseenter="hoverChanged(result)" 
+          @mouseleave="hoverChanged(undefined)"
+        />
       </div>
       <el-pagination
         class="pagination"
@@ -154,6 +160,9 @@ export default {
     },
   },
   methods: {
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
     resetSearch: function () {
       this.numberOfHits = 0
       this.discoverIds = []
@@ -449,6 +458,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.dataset-card:hover {
+  border-style: solid;
+  border-color: var(--el-color-primary);
+  border-radius: 5px;
+}
+
 .content-card {
   height: 100%;
   flex-flow: column;
@@ -527,7 +542,7 @@ export default {
 }
 
 .content :deep(.step-item:not(:first-child) .seperator-path) {
-  width: 486px;
+  width: 455px;
   height: 0px;
   border: solid 1px #e4e7ed;
   background-color: #e4e7ed;

From 49218855f4af815af068f9bab976231cd2ca31b1 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Tue, 14 May 2024 16:39:52 +1200
Subject: [PATCH 2/2] add comment

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

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 5a195e41..87f223db 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -114,6 +114,10 @@ export default {
     }
   },
   methods: {
+    /**
+     * This event is emitted when the mouse hover are changed.
+     * @arg data
+     */
     hoverChanged: function (data) {
       this.$emit('hover-changed', data)
     },