Pigean hover (#812)

* starting to work on hoverable links * gene page pigean table hover links * fixing this up
broadinstitute · Dec 11, 2024 · 9d6598a · 9d6598a
1 parent 0038f34
commit 9d6598a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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) {