From e62452dbd99c698690d932cbba8e1a4b7ebad51e Mon Sep 17 00:00:00 2001 From: Annie Moriondo <104587901+moriondo2022@users.noreply.github.com> Date: Wed, 20 Nov 2024 16:32:09 -0500 Subject: [PATCH] Graph page (#792) * phenotype styling * changing phenotype at UI level * refreshes upon change * cleanup * Getting and displaying phenotype description * remove medium * query small or large geneset size * slightly better way to set up the store * open in new window --------- Co-authored-by: Quy --- src/components/GenesetSizeSelectPicker.vue | 2 +- src/components/NetworkGraph.vue | 2 +- src/views/PIGEAN/NetworkGraph/Template.vue | 133 ++++++++++++++++++++- src/views/PIGEAN/NetworkGraph/main.js | 59 ++++++++- src/views/PIGEAN/NetworkGraph/store.js | 16 ++- src/views/PIGEAN/Phenotype/Template.vue | 1 + 6 files changed, 200 insertions(+), 13 deletions(-) diff --git a/src/components/GenesetSizeSelectPicker.vue b/src/components/GenesetSizeSelectPicker.vue index 05fd03fb2..cfa2ff627 100644 --- a/src/components/GenesetSizeSelectPicker.vue +++ b/src/components/GenesetSizeSelectPicker.vue @@ -1,7 +1,7 @@ diff --git a/src/components/NetworkGraph.vue b/src/components/NetworkGraph.vue index 0261aa772..979ac55cc 100644 --- a/src/components/NetworkGraph.vue +++ b/src/components/NetworkGraph.vue @@ -111,7 +111,7 @@ export default Vue.component("NetworkGraph", { watch: { phenotype: { handler(newVal, oldVal) { - if (newVal?.name !== oldVal?.name) { + if (newVal !== oldVal) { this.refreshGraph(); } }, diff --git a/src/views/PIGEAN/NetworkGraph/Template.vue b/src/views/PIGEAN/NetworkGraph/Template.vue index 5bbb6d27c..b812c63d4 100644 --- a/src/views/PIGEAN/NetworkGraph/Template.vue +++ b/src/views/PIGEAN/NetworkGraph/Template.vue @@ -9,13 +9,84 @@
+ + + + +
+
Number of gene sets included
+ +
+ +
-

Mechanism Graph

- + \ No newline at end of file diff --git a/src/views/PIGEAN/NetworkGraph/main.js b/src/views/PIGEAN/NetworkGraph/main.js index 0b34a4474..af0dcbea9 100644 --- a/src/views/PIGEAN/NetworkGraph/main.js +++ b/src/views/PIGEAN/NetworkGraph/main.js @@ -3,31 +3,84 @@ import Template from "./Template.vue"; import store from "./store"; import NetworkGraph from "@/components/NetworkGraph.vue"; +import SearchHeaderWrapper from "@/components/SearchHeaderWrapper.vue"; +import GenesetSizeSelectPicker from "@/components/GenesetSizeSelectPicker.vue"; import keyParams from "@/utils/keyParams"; import { pageMixin } from "@/mixins/pageMixin.js"; new Vue({ store, components: { NetworkGraph, + SearchHeaderWrapper, + GenesetSizeSelectPicker, }, mixins: [pageMixin], data() { return { pigeanPhenotypeMap: {}, + phenotypeSearchKey: null, + newPhenotypeSearchKey: null, + selectedPhenotype: null, + traitGroups: { + portal: "A2F", + gcat_trait:"GWAS Catalog", + rare_v2: "Orphanet" + }, }; }, computed: { - phenotype() { - return keyParams.phenotype || ""; - }, genesetSize() { return keyParams.genesetSize || "small"; }, }, + methods: { + setSelectedPhenotype(PHENOTYPE) { + let oldStylePhenotype = this.toOldStyle(PHENOTYPE); + this.newPhenotypeSearchKey = oldStylePhenotype.description; + this.phenotypeSearchKey = null; + this.selectedPhenotype = oldStylePhenotype; + }, + ifPhenotypeInSearch(DESCRIPTION) { + let searchKeys = this.phenotypeSearchKey.split(" "); + let isInPhenotype = 0; + + searchKeys.map((w) => { + if (DESCRIPTION.toLowerCase().includes(w.toLowerCase())) { + isInPhenotype++; + } + }); + + return isInPhenotype == searchKeys.length ? true : null; + }, + toOldStyle(newStylePhenotype){ + let oldStyle = structuredClone(newStylePhenotype); + oldStyle.description = newStylePhenotype.phenotype_name; + oldStyle.name = newStylePhenotype.phenotype; + oldStyle.group = newStylePhenotype.display_group; + return oldStyle; + }, + searchPhenotype(){ + let phenotypeToSearch = this.selectedPhenotype + || this.pigeanPhenotypeMap[keyParams.phenotype]; + this.$store.dispatch("sendSearch", phenotypeToSearch); + }, + mapPhenotypes(){ + let phenotypeMap = {}; + let phenotypes = this.$store.state.pigeanAllPhenotypes.data + phenotypes.forEach(item => { + phenotypeMap[item.phenotype] = this.toOldStyle(item); + }); + return phenotypeMap; + }, + }, async created() { this.$store.dispatch("bioPortal/getDiseaseSystems"); this.$store.dispatch("bioPortal/getDiseaseGroups"); this.$store.dispatch("bioPortal/getPhenotypes"); + await this.$store.dispatch("getPigeanPhenotypes"); + this.pigeanPhenotypeMap = this.mapPhenotypes(); + let initialPhenotype = this.pigeanPhenotypeMap[keyParams.phenotype]; + this.$store.dispatch("sendSearch", initialPhenotype) }, render(createElement) { return createElement(Template); diff --git a/src/views/PIGEAN/NetworkGraph/store.js b/src/views/PIGEAN/NetworkGraph/store.js index 388ebf5f1..cb53fa853 100644 --- a/src/views/PIGEAN/NetworkGraph/store.js +++ b/src/views/PIGEAN/NetworkGraph/store.js @@ -17,17 +17,25 @@ export default new Vuex.Store({ }, state: { phenotype: null, - genesetSize: "small", + genesetSize: keyParams.genesetSize || DEFAULT_GENESET_SIZE, + genesetSizeToQuery: keyParams.genesetSize || DEFAULT_GENESET_SIZE, + selectedPhenotype: null, }, mutations: { setGenesetSize(state, genesetSize) { state.genesetSize = genesetSize || state.genesetSize; + keyParams.set({ genesetSize: genesetSize }); + }, + setPhenotype(state, phenotype) { + state.phenotype = phenotype || state.phenotype; + keyParams.set({ phenotype: phenotype.name}); }, }, actions: { - onPhenotypeChange(context, phenotype) { - context.state.selectedPhenotype = phenotype; - keyParams.set({ phenotype: phenotype.name }); + sendSearch(context, phenotype) { + context.commit("setPhenotype", phenotype); + context.commit("setGenesetSize", context.state.genesetSizeToQuery); + }, async getPigeanPhenotypes(context) { await context.dispatch("pigeanAllPhenotypes/query", { q: 1 }); diff --git a/src/views/PIGEAN/Phenotype/Template.vue b/src/views/PIGEAN/Phenotype/Template.vue index 42437195c..fcf3a5ebe 100644 --- a/src/views/PIGEAN/Phenotype/Template.vue +++ b/src/views/PIGEAN/Phenotype/Template.vue @@ -251,6 +251,7 @@ size="sm" variant="outline-primary" :to="`/pigean/network_graph.html?phenotype=${$store.state.phenotype.name}&genesetSize=${$store.state.genesetSize}`" + target="_blank" > View Detailed Graph