From 9d6598aaf3e3550d8a21f194108889bb7063389b Mon Sep 17 00:00:00 2001
From: Annie Moriondo <104587901+moriondo2022@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:39:21 -0500
Subject: [PATCH] Pigean hover (#812)

* starting to work on hoverable links

* gene page pigean table hover links

* fixing this up
---
 src/components/PigeanPlot.vue      |  1 +
 src/views/PIGEAN/Gene/Template.vue | 13 +++++++++++++
 src/views/PIGEAN/Gene/main.js      | 16 ++++++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/src/components/PigeanPlot.vue b/src/components/PigeanPlot.vue
index 366066b75..80a22942f 100644
--- a/src/components/PigeanPlot.vue
+++ b/src/components/PigeanPlot.vue
@@ -168,6 +168,7 @@ export default Vue.component("pigean-plot", {
     hoverDot(dotString) {
       this.unHoverDot();
 
+      this.$emit("dotHovered", dotString);
       let xcoord = d3.event.layerX;
       let ycoord = d3.event.layerY;
 
diff --git a/src/views/PIGEAN/Gene/Template.vue b/src/views/PIGEAN/Gene/Template.vue
index e3ff41702..cc320aa85 100644
--- a/src/views/PIGEAN/Gene/Template.vue
+++ b/src/views/PIGEAN/Gene/Template.vue
@@ -160,8 +160,17 @@
                                             $parent.pigeanMap
                                         "
                                         :filter="filter"
+                                        @dotHovered="(dot) => $parent.showLink(dot)"
                                     >
                                     </pigean-plot>
+                                    <div id="pigean-hover-link">
+                                        <p v-if="!!$parent.phenotypeLinkAddress">
+                                            View phenotype:
+                                            <a :href="$parent.phenotypeLinkAddress"
+                                                v-html="$parent.phenotypeLinkText">
+                                            </a>
+                                        </p>
+                                    </div>
                                 </div>
                             </div>
                             <div class="card-body pigean-table">
@@ -247,4 +256,8 @@
 .card-body.pigean-table {
     padding-top: 0;
 }
+
+#pigean-hover-link{
+    padding-left: 25px;
+}
 </style>
diff --git a/src/views/PIGEAN/Gene/main.js b/src/views/PIGEAN/Gene/main.js
index f7ea36220..4d5f5c99f 100644
--- a/src/views/PIGEAN/Gene/main.js
+++ b/src/views/PIGEAN/Gene/main.js
@@ -43,6 +43,7 @@ new Vue({
     data() {
         return {
             pigeanPhenotypeMap: {},
+            hoverPhenotype: "",
             filterFields: [
                 { key: "combined", label: "Combined genetic support" },
                 { key: "huge_score", label: "Direct support w/o gene sets" },
@@ -168,6 +169,17 @@ new Vue({
         },
         phewasAllData(){
             return this.$store.state.phewasData;
+        },
+        phenotypeLinkAddress(){
+            if (!this.hoverPhenotype){
+                return "";
+            }
+            return `/pigean/phenotype.html?phenotype=${this.hoverPhenotype
+                }&genesetSize=${this.$store.state.genesetSize}&traitGroup=${
+                    this.$store.state.traitGroup}`;
+        },
+        phenotypeLinkText(){
+            return this.pigeanMap[this.hoverPhenotype]?.description || this.hoverPhenotype;
         }
     },
     watch: {
@@ -195,6 +207,10 @@ new Vue({
                 }&start=${r.start - expanded}&end=${r.end + expanded}`;
             }
         },
+        showLink(dot){
+            let dotObject = JSON.parse(dot);
+            this.hoverPhenotype = dotObject.phenotype;
+        }
     },
 
     render(createElement, context) {