From fca0ed6a27a04348875b66cff3847fe8f25319ef Mon Sep 17 00:00:00 2001
From: Corey Cox <69321580+amc-corey-cox@users.noreply.github.com>
Date: Wed, 15 May 2024 17:15:32 -0500
Subject: [PATCH] Add Taxon, adjust positioning (#692)

### Related issues

- Closes #688

### Summary

- adds Taxon to gene search results
- changes spacing and flow of Title components on search results page
- fixes Users unable to identify gene differences without clicking
through or decoding curies

### Checks

- [ ] All tests have passed (or issues created for failing tests)
---
 frontend/src/pages/explore/TabSearch.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/explore/TabSearch.vue b/frontend/src/pages/explore/TabSearch.vue
index 6c4ebf284..47173a357 100644
--- a/frontend/src/pages/explore/TabSearch.vue
+++ b/frontend/src/pages/explore/TabSearch.vue
@@ -59,6 +59,16 @@
           :state="{ fromSearch: search }"
           class="title-name"
         />
+        <AppButton
+          v-if="result.in_taxon_label"
+          v-tooltip="'Taxon Name'"
+          class="title-taxon"
+          :text="result.in_taxon_label || ''"
+          icon=""
+          design="small"
+          :copy="true"
+          color="none"
+        />
         <AppButton
           v-tooltip="'Node ID (click to copy)'"
           class="title-id"
@@ -398,20 +408,29 @@ watch(from, () => runGetSearch(false));
 <style lang="scss" scoped>
 .title {
   display: flex;
+  position: relative;
   align-items: center;
+  justify-content: space-between;
   gap: 15px;
   text-align: left;
 }
 
 .title-name {
-  flex-grow: 1;
-  flex-shrink: 0;
+  flex-grow: 0;
 }
 
 .title-name > :deep(svg) {
   font-size: 2rem;
 }
 
+.title-taxon {
+  position: absolute;
+  margin-left: 40%;
+  color: $dark-gray;
+  font-size: 0.9rem;
+  text-align: left;
+}
+
 .title-id {
   font-size: 0.9rem;
 }