Hover dataset callback

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)
     },

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 => {

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,18 @@ export default {
     }
   },
   methods: {
+    /**
+     * This event is emitted when the mouse hover are changed.
+     * @arg data
+     */
+    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 })
     },
     /**

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;