From 5a21fd195e95c6da315fb66f17a58af6e40a2cfa Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Wed, 20 Nov 2024 12:02:14 -0500 Subject: [PATCH 1/9] phenotype styling --- src/views/PIGEAN/NetworkGraph/Template.vue | 117 +++++++++++++++++++++ src/views/PIGEAN/NetworkGraph/main.js | 2 + 2 files changed, 119 insertions(+) diff --git a/src/views/PIGEAN/NetworkGraph/Template.vue b/src/views/PIGEAN/NetworkGraph/Template.vue index 5bbb6d27c..9c6828521 100644 --- a/src/views/PIGEAN/NetworkGraph/Template.vue +++ b/src/views/PIGEAN/NetworkGraph/Template.vue @@ -9,6 +9,69 @@
+ + + + + +

Mechanism Graph

@@ -23,3 +86,57 @@
+ \ No newline at end of file diff --git a/src/views/PIGEAN/NetworkGraph/main.js b/src/views/PIGEAN/NetworkGraph/main.js index 0b34a4474..ee06c8a10 100644 --- a/src/views/PIGEAN/NetworkGraph/main.js +++ b/src/views/PIGEAN/NetworkGraph/main.js @@ -3,12 +3,14 @@ import Template from "./Template.vue"; import store from "./store"; import NetworkGraph from "@/components/NetworkGraph.vue"; +import SearchHeaderWrapper from "@/components/SearchHeaderWrapper.vue"; import keyParams from "@/utils/keyParams"; import { pageMixin } from "@/mixins/pageMixin.js"; new Vue({ store, components: { NetworkGraph, + SearchHeaderWrapper, }, mixins: [pageMixin], data() { From d300ee77cc2c6d9e1a3c0b2d61c2dfda1b7cd414 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Wed, 20 Nov 2024 13:02:29 -0500 Subject: [PATCH 2/9] changing phenotype at UI level --- src/views/PIGEAN/NetworkGraph/Template.vue | 2 +- src/views/PIGEAN/NetworkGraph/main.js | 41 ++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/src/views/PIGEAN/NetworkGraph/Template.vue b/src/views/PIGEAN/NetworkGraph/Template.vue index 9c6828521..254d49c6c 100644 --- a/src/views/PIGEAN/NetworkGraph/Template.vue +++ b/src/views/PIGEAN/NetworkGraph/Template.vue @@ -66,7 +66,7 @@ id="regionSearchGo" class="btn btn-light btn-sm go" type="button" - @click="$store.dispatch('queryPhenotype')" + @click="$parent.searchPhenotype()" > GO diff --git a/src/views/PIGEAN/NetworkGraph/main.js b/src/views/PIGEAN/NetworkGraph/main.js index ee06c8a10..6f4b59608 100644 --- a/src/views/PIGEAN/NetworkGraph/main.js +++ b/src/views/PIGEAN/NetworkGraph/main.js @@ -16,6 +16,14 @@ new Vue({ data() { return { pigeanPhenotypeMap: {}, + phenotypeSearchKey: null, + newPhenotypeSearchKey: null, + selectedPhenotype: null, + traitGroups: { + portal: "A2F", + gcat_trait:"GWAS Catalog", + rare_v2: "Orphanet" + }, }; }, computed: { @@ -26,10 +34,43 @@ new Vue({ 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(){ + this.$store.dispatch("onPhenotypeChange", this.selectedPhenotype); + } + }, async created() { + await this.$store.dispatch("getPigeanPhenotypes"); this.$store.dispatch("bioPortal/getDiseaseSystems"); this.$store.dispatch("bioPortal/getDiseaseGroups"); this.$store.dispatch("bioPortal/getPhenotypes"); + + console.log(JSON.stringify(this.$store.state.pigeanAllPhenotypes.data)); }, render(createElement) { return createElement(Template); From af5fb82e8d1d75848d09f0e6c6ef53e4240acf77 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Wed, 20 Nov 2024 13:46:18 -0500 Subject: [PATCH 3/9] refreshes upon change --- src/components/NetworkGraph.vue | 4 +++- src/views/PIGEAN/NetworkGraph/Template.vue | 4 ++-- src/views/PIGEAN/NetworkGraph/main.js | 13 +++++++++---- src/views/PIGEAN/NetworkGraph/store.js | 4 +++- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/NetworkGraph.vue b/src/components/NetworkGraph.vue index 0261aa772..8be4c4236 100644 --- a/src/components/NetworkGraph.vue +++ b/src/components/NetworkGraph.vue @@ -111,7 +111,9 @@ export default Vue.component("NetworkGraph", { watch: { phenotype: { handler(newVal, oldVal) { - if (newVal?.name !== oldVal?.name) { + console.log("component received: ", newVal); + if (newVal !== oldVal) { + console.log("should be refreshing"); this.refreshGraph(); } }, diff --git a/src/views/PIGEAN/NetworkGraph/Template.vue b/src/views/PIGEAN/NetworkGraph/Template.vue index 254d49c6c..47abb5aad 100644 --- a/src/views/PIGEAN/NetworkGraph/Template.vue +++ b/src/views/PIGEAN/NetworkGraph/Template.vue @@ -75,9 +75,9 @@

Mechanism Graph

-
diff --git a/src/views/PIGEAN/NetworkGraph/main.js b/src/views/PIGEAN/NetworkGraph/main.js index 91ac570ad..af0dcbea9 100644 --- a/src/views/PIGEAN/NetworkGraph/main.js +++ b/src/views/PIGEAN/NetworkGraph/main.js @@ -4,6 +4,7 @@ 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({ @@ -11,6 +12,7 @@ new Vue({ components: { NetworkGraph, SearchHeaderWrapper, + GenesetSizeSelectPicker, }, mixins: [pageMixin], data() { @@ -58,7 +60,9 @@ new Vue({ return oldStyle; }, searchPhenotype(){ - this.$store.dispatch("onPhenotypeChange", this.selectedPhenotype); + let phenotypeToSearch = this.selectedPhenotype + || this.pigeanPhenotypeMap[keyParams.phenotype]; + this.$store.dispatch("sendSearch", phenotypeToSearch); }, mapPhenotypes(){ let phenotypeMap = {}; @@ -76,7 +80,7 @@ new Vue({ await this.$store.dispatch("getPigeanPhenotypes"); this.pigeanPhenotypeMap = this.mapPhenotypes(); let initialPhenotype = this.pigeanPhenotypeMap[keyParams.phenotype]; - this.$store.dispatch("onPhenotypeChange", initialPhenotype) + 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 edbbce28e..88609c1b1 100644 --- a/src/views/PIGEAN/NetworkGraph/store.js +++ b/src/views/PIGEAN/NetworkGraph/store.js @@ -17,7 +17,8 @@ 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: { @@ -26,9 +27,11 @@ export default new Vuex.Store({ }, }, actions: { - onPhenotypeChange(context, phenotype) { + sendSearch(context, phenotype) { context.state.phenotype = phenotype; keyParams.set({ phenotype: phenotype.name }); + context.state.genesetSize = context.state.genesetSizeToQuery; + keyParams.set({ genesetSize: context.state.genesetSize }); }, async getPigeanPhenotypes(context) { await context.dispatch("pigeanAllPhenotypes/query", { q: 1 }); From 4ccf03dcdb83f590627ef05b477a39b61a7282e5 Mon Sep 17 00:00:00 2001 From: Annie Moriondo Date: Wed, 20 Nov 2024 14:47:01 -0500 Subject: [PATCH 8/9] slightly better way to set up the store --- src/views/PIGEAN/NetworkGraph/store.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/views/PIGEAN/NetworkGraph/store.js b/src/views/PIGEAN/NetworkGraph/store.js index 88609c1b1..cb53fa853 100644 --- a/src/views/PIGEAN/NetworkGraph/store.js +++ b/src/views/PIGEAN/NetworkGraph/store.js @@ -24,14 +24,18 @@ export default new Vuex.Store({ 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: { sendSearch(context, phenotype) { - context.state.phenotype = phenotype; - keyParams.set({ phenotype: phenotype.name }); - context.state.genesetSize = context.state.genesetSizeToQuery; - keyParams.set({ genesetSize: context.state.genesetSize }); + context.commit("setPhenotype", phenotype); + context.commit("setGenesetSize", context.state.genesetSizeToQuery); + }, async getPigeanPhenotypes(context) { await context.dispatch("pigeanAllPhenotypes/query", { q: 1 }); From a3cbf591bc8fd4ddb1f6ab594c81466d83a75b29 Mon Sep 17 00:00:00 2001 From: Quy Date: Wed, 20 Nov 2024 16:31:51 -0500 Subject: [PATCH 9/9] open in new window --- src/views/PIGEAN/Phenotype/Template.vue | 1 + 1 file changed, 1 insertion(+) 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