Plot sync (#816)

* located the right place to emit * streamlined a little * narrowing down the problem * emitting from research phewas * dots are being received from phewas to pigean plot * phewas is receiving * can close pigean hover box even when not pinned
broadinstitute · Dec 13, 2024 · 2b255fd · 2b255fd
1 parent fdc91b3
commit 2b255fd
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 16 deletions.
diff --git a/src/components/PigeanPlot.vue b/src/components/PigeanPlot.vue
@@ -24,7 +24,10 @@ Vue.use(BootstrapVueIcons);
 export default Vue.component("pigean-plot", {
   components: {
   },
-  props: ["pigeanData", "config", "phenotypeMap", "filter", "genesetSize", "traitGroup"],
+  props: [
+    "pigeanData", "config", "phenotypeMap", "filter", 
+    "genesetSize", "traitGroup", "matchingHoverDots"
+  ],
   data() {
       return {
         plotId: `pigean-plot-${Math.floor(Math.random() * 10e9)}`,
@@ -147,7 +150,7 @@ export default Vue.component("pigean-plot", {
         .data(this.chartData)
         .enter()
         .append("circle")
-          .attr("class", d => `${d[this.config.dotKey]}`)
+          .attr("class", d => `dot_${d[this.config.dotKey]}`)
           .attr("cx", d => 
             d[this.config.xField] === undefined
               ? this.xScale(0) 
@@ -166,8 +169,6 @@ export default Vue.component("pigean-plot", {
       this.svg.selectAll("circle")
         .on("click", d => {
           if (!this.tooltipPinned){
-            let closeButton = this.tooltip.select("a");
-            closeButton.style("visibility", "visible");
             this.tooltipPinned = true;
           }
         });
@@ -190,6 +191,7 @@ export default Vue.component("pigean-plot", {
         return;
       }
       this.unHoverDot();
+      this.$emit("dotsHovered", dotString)
       let xcoord = d3.event.layerX;
       let ycoord = d3.event.layerY;
 
@@ -222,13 +224,12 @@ export default Vue.component("pigean-plot", {
         : this.hoverBoxPosition === "left";
     },
     getTooltipContent(dotString){
-      console.log(dotString);
       let dot = JSON.parse(dotString);
       let dKey = this.config.dotKey;
       let dKeyContent = dot[dKey]; // Get raw content before formatting
       dot.phenotype = this.phDesc(dot.phenotype);
       let linkAddress = `/pigean/${dKey}.html?${dKey}=${dKeyContent}${this.linkSuffix}`;
-      let tooltipText = '<p class="close-tooltip"><a style="visibility:hidden">';
+      let tooltipText = '<p class="close-tooltip"><a>';
       tooltipText = tooltipText.concat('x</a><p>')
       tooltipText=tooltipText.concat(`${
         Formatters.tissueFormatter(dKey)}: <a href="${linkAddress}">${dot[dKey]}</a>`);
@@ -299,11 +300,26 @@ export default Vue.component("pigean-plot", {
         });
       }
       return fields;
+    },
+    highlightDot(phenotype){
+      let dot = this.svg.select(`circle.dot_${phenotype}`);
+      dot.attr("r", 7)
+          .attr("stroke", "black")
+    },
+    unHighlightDots(){
+      this.svg.selectAll("circle")
+          .attr("r", 5)
+          .attr("stroke", this.dotOutlineColor)
     }
   },
   watch: {
     chartData(){
       this.drawChart();
+    },
+    matchingHoverDots(newDots){
+      this.unHighlightDots();
+      let phenotypes = Object.keys(JSON.parse(newDots));
+      phenotypes.forEach(phenotype => this.highlightDot(phenotype));
     }
   }
 });

diff --git a/src/components/researchPortal/ResearchPheWAS.vue b/src/components/researchPortal/ResearchPheWAS.vue
@@ -31,10 +31,12 @@
                     <span :id="canvasId + 'pheWasInfoBoxContent'"></span>
 
                     <span v-for="(ptValue, ptKey) in hoverItems" :key="ptKey">
-                        <strong v-if="!linkPhenotypes">{{ ptKey }}</strong>
+                        <strong v-if="!linkPhenotypes">
+                            {{ phenotypeMap[ptKey]?.description || ptKey}}
+                        </strong>
                         <strong v-else>
                             <a :href="phenotypeLink(ptKey)">
-                                {{ phenotypeMap[ptKey].description }}
+                                {{ phenotypeMap[ptKey]?.description || ptKey}}
                             </a>
                         </strong>
                         <br />
@@ -182,7 +184,8 @@ export default Vue.component("ResearchPhewasPlot", {
         "plotName",
         "top1500",
         "linkPhenotypes",
-        "isPigean"
+        "isPigean",
+        "matchingHoverDots",
     ],
 
     data() {
@@ -294,6 +297,9 @@ export default Vue.component("ResearchPhewasPlot", {
         renderData(content) {
             this.renderPheWas();
         },
+        matchingHoverDots(newDots){
+            console.log("received by phewas", newDots);
+        }
     },
     created: function () {
         this.renderPheWas();
@@ -422,7 +428,6 @@ export default Vue.component("ResearchPhewasPlot", {
             if (infoBox.getAttribute("class").includes("fixed") == false) {
                 let infoContent = "";
                 this.hoverItems = {};
-
                 if (
                     x >= plotMargin.left / 2 &&
                     x <= rect.width - plotMargin.right / 2
@@ -435,11 +440,7 @@ export default Vue.component("ResearchPhewasPlot", {
                         if (y >= yLoc[0] && y <= yLoc[1]) {
                             yValue.map((xPos) => {
                                 if (x >= xPos.start && x <= xPos.end) {
-                                    if (this.linkPhenotypes){
-                                        this.hoverItems[xPos.id] = xPos;
-                                    } else {
-                                        this.hoverItems[xPos.name] = xPos;
-                                    }
+                                    this.hoverItems[xPos.id] = xPos;
                                     infoContent +=`<strong>${xPos.name}</strong><br />`;
                                     this.renderConfig["hover content"].map(
                                         (h) => {
@@ -457,6 +458,9 @@ export default Vue.component("ResearchPhewasPlot", {
                 }
 
                 if (TYPE == "hover") {
+                    if (Object.keys(this.hoverItems).length > 0 && !!this.isPigean){
+                        this.$emit("dotsHovered", JSON.stringify(this.hoverItems));
+                    }
                     if (infoContent == "") {
                         if (
                             infoBox.getAttribute("class").includes("fixed") ==
@@ -1097,7 +1101,7 @@ export default Vue.component("ResearchPhewasPlot", {
                 destination = `/pigean${destination}${suffix}`;
             }
             return destination;
-        }
+        },
     },
 });
 </script>

diff --git a/src/views/PIGEAN/Gene/Template.vue b/src/views/PIGEAN/Gene/Template.vue
@@ -148,6 +148,8 @@
                                         :utils="$parent.utilsBox"
                                         :filter="filter"
                                         :native-dl-btn="false"
+                                        @dotsHovered="(dots) => $parent.hoverDots(dots, true)"
+                                        :matchingHoverDots="$parent.hoverDotsToPhewas"
                                     >
                                     </research-phewas-plot>
                                 </div>
@@ -162,6 +164,8 @@
                                             $parent.pigeanMap
                                         "
                                         :filter="filter"
+                                        @dotsHovered="(dots) => $parent.hoverDots(dots)"
+                                        :matchingHoverDots="$parent.hoverDotsToPigean"
                                     >
                                     </pigean-plot>
                                 </div>

diff --git a/src/views/PIGEAN/Gene/main.js b/src/views/PIGEAN/Gene/main.js
@@ -112,6 +112,8 @@ new Vue({
                     bottom: 300,
                 },
             },
+            dotsToPhewas: "",
+            dotsToPigean: ""
         };
     },
     computed: {
@@ -169,6 +171,12 @@ new Vue({
         phewasAllData(){
             return this.$store.state.phewasData;
         },
+        hoverDotsToPigean(){
+            return this.dotsToPigean;
+        },
+        hoverDotsToPhewas(){
+            return this.dotsToPhewas;
+        }
     },
     watch: {
         diseaseGroup(group) {
@@ -195,6 +203,13 @@ new Vue({
                 }&start=${r.start - expanded}&end=${r.end + expanded}`;
             }
         },
+        hoverDots(dots, fromPhewas=false){
+            if (fromPhewas){
+                this.dotsToPigean = dots;
+            } else {
+                this.dotsToPhewas = dots;
+            }
+        }
     },
 
     render(createElement, context) {