Pigean updates (#962)

moriondo2022 · web-flow · commit 48331297ed60 · 2025-10-24T19:10:47.000Z
* exomes and hpo selectable. need to make phenotype show up

* still need exomes/HPO in phenotype search

* trait groups

* pigean plot is receiving colors

* pigean plot colors are harmonized to the phewas

* harmonized on geneset as well

* phenotype page colors restored

* cleanup
diff --git a/src/components/PigeanPlot.vue b/src/components/PigeanPlot.vue
@@ -26,7 +26,7 @@ export default Vue.component("pigean-plot", {
   },
   props: [
     "pigeanData", "config", "phenotypeMap", "filter", 
-    "genesetSize", "traitGroup", "matchingHoverDots"
+    "genesetSize", "traitGroup", "matchingHoverDots", "pigeanColors"
   ],
   data() {
       return {
@@ -41,7 +41,6 @@ export default Vue.component("pigean-plot", {
         tooltip: null,
         tooltipElement: null,
         tooltipPinned: false,
-        colorMap: this.groupColors(),
         allHoverFields: this.getHoverFields(),
         hoverBoxPosition: this.config.hoverBoxPosition || "left",
         dotOutlineColor: "#00000075"
@@ -257,29 +256,14 @@ export default Vue.component("pigean-plot", {
         this.tooltip.style("opacity", 0);
       }
     },
-    groupColors(){
-      // Based on pigeanData not filtered data. Phenotypes should always match PheWAS
-      let groupsInUse = this.pigeanData.map(d => d.phenotype)
-        .map(p => !!this.phenotypeMap[p] ? this.phenotypeMap[p]["group"] : "")
-        .filter(g => g !== "");
-      let uniqueGroups = [];
-      groupsInUse.forEach(g => {
-        if (!uniqueGroups.includes(g)){
-          uniqueGroups.push(g);
-        }});
-      uniqueGroups.sort();
-      let colorMap = {};
-      let colors = plotUtils.plotColors();
-      for (let i = 0; i < uniqueGroups.length; i++){
-        colorMap[uniqueGroups[i]] = colors[i % colors.length];
-      }
-      return colorMap;
-    },
     dotColor(phenotype){
       if (!this.phenotypeMap[phenotype]){
         return this.dotOutlineColor;
       }
-      return this.colorMap[this.phenotypeMap[phenotype].group];
+      if (this.pigeanColors === null){
+        return "lightgray";
+      }
+      return this.pigeanColors[this.phenotypeMap[phenotype].group];
     },
     phDesc(phenotype){
       if (!this.phenotypeMap[phenotype]){
@@ -320,6 +304,9 @@ export default Vue.component("pigean-plot", {
       this.unHighlightDots();
       let phenotypes = Object.keys(JSON.parse(newDots));
       phenotypes.forEach(phenotype => this.highlightDot(phenotype));
+    },
+    pigeanColors(newColors){
+      this.drawChart();
     }
   }
 });
diff --git a/src/components/TraitGroupSelectPicker.vue b/src/components/TraitGroupSelectPicker.vue
@@ -1,16 +1,17 @@
 <template>
     <select v-model="traitGroup" class="form-control">
         <option value="all">All</option>
-        <option value="portal">A2F</option>
-        <option value="gcat_trait">GWAS Catalog</option>
-        <option value="rare_v2">Orphanet</option>
+        <option v-for="group in groups" :value="group[0]">
+            {{ group[1] }}
+        </option>
     </select>
 </template>
 
 <script>
 import Vue from "vue";
 import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
 import keyParams from "@/utils/keyParams";
+import bioIndexUtils from "@/utils/bioIndexUtils";
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 Vue.use(BootstrapVue);
@@ -27,6 +28,11 @@ export default Vue.component("trait-group-selectpicker", {
         keyParamsTraitGroup() {
             return keyParams.traitGroup;
         },
+        groups(){
+            let bioindexGroups = bioIndexUtils.TRAIT_GROUPS;
+            return Object.keys(bioIndexUtils.TRAIT_GROUPS).map(
+                g => [g, bioindexGroups[g]]);
+        }
     },
     watch: {
         traitGroup(newGroup) {
diff --git a/src/components/researchPortal/ResearchPheWAS.vue b/src/components/researchPortal/ResearchPheWAS.vue
@@ -731,14 +731,15 @@ export default Vue.component("ResearchPhewasPlot", {
                 let groupsArr = Object.keys(groups).sort();
 
                 let dotIndex = 0;
+                let pigeanColors = {};
 
                 if (totalNum > 1) {
                     for (const [key, value] of Object.entries(renderData)) {
                         let keyIndex =
                             groupsArr.indexOf(key) % this.colors.length;
                         let fillColor = this.colors[keyIndex];
                         let strokeColor = "#00000075"; //this.colors[keyIndex];
-
+                        pigeanColors[key] = fillColor;
                         let labelIndex = 0;
                         let labelOrigin = 0;
                         let maxWidthPerGroup =
@@ -905,6 +906,7 @@ export default Vue.component("ResearchPhewasPlot", {
                         let keyIndex =
                             groupsArr.indexOf(key) % this.colors.length;
                         let fillColor = this.colors[keyIndex];
+                        pigeanColors[key] = fillColor;
                         let strokeColor = "#00000075"; //this.colors[keyIndex];
                         value.map((p) => {
                             let xPos = canvasWidth / 2;
@@ -986,6 +988,7 @@ export default Vue.component("ResearchPhewasPlot", {
                         });
                     }
                 }
+                this.$emit("pigeanColors", pigeanColors);
             }
         },
 
diff --git a/src/utils/bioIndexUtils.js b/src/utils/bioIndexUtils.js
@@ -141,7 +141,12 @@ async function processRequest(req, onResolve, onError, onLoad, limitWhile) {
 export const DEFAULT_SIGMA = 2;
 export const DEFAULT_GENESET_SIZE = "small";
 export const DEFAULT_TRAIT_GROUP = "all";
-export const TRAIT_GROUPS = ["portal", "gcat_trait", "rare_v2"];
+export const TRAIT_GROUPS = {
+    "portal": "A2F", 
+    "gcat_trait": "GWAS Catalog",
+    "rare_v2": "Orphanet",
+    "hpo": "HPO",
+    "portal_exomes": "Exomes"};
 
 export default {
     query,
diff --git a/src/views/PIGEAN/Gene/Template.vue b/src/views/PIGEAN/Gene/Template.vue
@@ -149,12 +149,14 @@
                                         :matchingHoverDots="
                                             $parent.hoverDotsToPhewas
                                         "
+                                        @pigeanColors="(colors) => $parent.storeColors(colors)"
                                     >
                                     </research-phewas-plot>
                                 </div>
                                 <div class="col-md-4">
                                     <pigean-plot
                                         v-if="$parent.plotReady"
+                                        :pigeanColors="$parent.pigeanColors"
                                         :pigean-data="
                                             $parent.pigeanFilteredData
                                         "
diff --git a/src/views/PIGEAN/Gene/main.js b/src/views/PIGEAN/Gene/main.js
@@ -93,6 +93,7 @@ new Vue({
                 hoverFields: ["gene", "combined"],
             },
             plotColors: plotUtils.plotColors(),
+            pigeanColors: null,
             renderConfig: {
                 type: "phewas plot",
                 "render by": "phenotype",
@@ -211,6 +212,9 @@ new Vue({
             } else {
                 this.dotsToPhewas = dots;
             }
+        },
+        storeColors(colors){
+            this.pigeanColors = colors;
         }
     },
 
diff --git a/src/views/PIGEAN/GeneSet/Template.vue b/src/views/PIGEAN/GeneSet/Template.vue
@@ -123,12 +123,14 @@
                                         :utils="$parent.utilsBox"
                                         :filter="filter"
                                         :native-dl-btn="false"
+                                        @pigeanColors="(colors) => $parent.storeColors(colors)"
                                     >
                                     </research-phewas-plot>
                                 </div>
                                 <div class="col-md-4">
                                     <pigean-plot
                                         v-if="$parent.plotReady"
+                                        :pigeanColors="$parent.pigeanColors"
                                         :pigean-data="$parent.phewasAllData"
                                         :config="$parent.pigeanPlotConfig"
                                         :phenotype-map="$parent.pigeanMap"
diff --git a/src/views/PIGEAN/GeneSet/main.js b/src/views/PIGEAN/GeneSet/main.js
@@ -88,6 +88,7 @@ new Vue({
                 dotKey: "phenotype",
             },
             plotColors: plotUtils.plotColors(),
+            pigeanColors: null,
             renderConfig: {
                 type: "phewas plot",
                 "render by": "phenotype",
@@ -146,6 +147,11 @@ new Vue({
             return this.$store.state.phewasData;
         }
     },
+    methods: {
+        storeColors(colors){
+            this.pigeanColors = colors;
+        }
+    },
     watch: {
         diseaseGroup(group) {
             this.$store.dispatch("kp4cd/getFrontContents", group.name);
diff --git a/src/views/PIGEAN/Phenotype/Template.vue b/src/views/PIGEAN/Phenotype/Template.vue
@@ -129,6 +129,7 @@
                                 :config="$parent.genePigeanPlotConfig"
                                 :phenotypeMap="$parent.pigeanMap"
                                 :filter="filter"
+                                :pigeanColors="$parent.pigeanColors"
                             >
                             </pigean-plot>
                             <pigean-table
@@ -184,6 +185,7 @@
                                 :pigeanData="$store.state.genesetPhenotype.data"
                                 :config="$parent.genesetPigeanPlotConfig"
                                 :phenotypeMap="$parent.pigeanMap"
+                                :pigeanColors="$parent.pigeanColors"
                                 :filter="filter"
                             >
                             </pigean-plot>
diff --git a/src/views/PIGEAN/Phenotype/main.js b/src/views/PIGEAN/Phenotype/main.js
@@ -13,6 +13,7 @@ import pigeanUtils from "@/utils/pigeanUtils.js";
 import sessionUtils from "@/utils/sessionUtils";
 import sortUtils from "@/utils/sortUtils";
 import dataConvert from "@/utils/dataConvert";
+import bioIndexUtils from "@/utils/bioIndexUtils";
 import SearchHeaderWrapper from "@/components/SearchHeaderWrapper.vue";
 import GenesetSizeSelectPicker from "@/components/GenesetSizeSelectPicker.vue";
 import PigeanTable from "@/components/PigeanTable.vue";
@@ -47,13 +48,7 @@ new Vue({
     mixins: [pageMixin],
     data() {
         return {
-            plotColors: plotUtils.plotColors(),
             pigeanPhenotypeMap: {},
-            traitGroups: {
-                portal: "A2F",
-                gcat_trait:"GWAS Catalog",
-                rare_v2: "Orphanet"
-            },
             phewasPlotLabel: "",
             phenotypeSearchKey: null,
             newPhenotypeSearchKey: null,
@@ -297,6 +292,9 @@ new Vue({
                 return this.$store.state.diseaseInSession;
             }
         },
+        traitGroups(){
+            return bioIndexUtils.TRAIT_GROUPS;
+        },
         phenotypesInSession() {
             if (this.$store.state.phenotypesInSession == null) {
                 return this.$store.state.bioPortal.phenotypes;
@@ -337,6 +335,11 @@ new Vue({
         },
         pigeanMap(){
             return this.pigeanPhenotypeMap;
+        },
+        pigeanColors(){
+            let colors = {};
+            colors[this.$store.state.phenotype.group] = plotUtils.plotColors()[0];
+            return colors;
         }
 
     },

Original file line number	Diff line number	Diff line change
`@@ -149,12 +149,14 @@`
`149`	`149`	`:matchingHoverDots="`
`150`	`150`	`$parent.hoverDotsToPhewas`
`151`	`151`	`"`
	`152`	`+ @pigeanColors="(colors) => $parent.storeColors(colors)"`
`152`	`153`	`>`
`153`	`154`	`</research-phewas-plot>`
`154`	`155`	`</div>`
`155`	`156`	`<div class="col-md-4">`
`156`	`157`	`<pigean-plot`
`157`	`158`	`v-if="$parent.plotReady"`
	`159`	`+ :pigeanColors="$parent.pigeanColors"`
`158`	`160`	`:pigean-data="`
`159`	`161`	`$parent.pigeanFilteredData`
`160`	`162`	`"`