From eadad474f60236c0d1c27dee325bd25e6021c260 Mon Sep 17 00:00:00 2001 From: Quy Date: Fri, 15 Nov 2024 13:18:40 -0500 Subject: [PATCH 1/5] setup for vis-network --- babel.config.js | 14 ++++++-------- package.json | 9 +++++---- vue.config.js | 18 +++++++++++++++++- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/babel.config.js b/babel.config.js index 665158ea8..232c6636b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,12 +1,10 @@ -let plugins = [] +let plugins = []; -if (process.env.NODE_ENV === 'production') { - plugins.push('transform-remove-console') +if (process.env.NODE_ENV === "production") { + plugins.push("transform-remove-console"); } module.exports = { - presets: [ - '@vue/app' - ], - plugins -} + presets: ["@vue/app", "@babel/preset-env"], + plugins, +}; diff --git a/package.json b/package.json index 9d6a7c398..f23649b16 100644 --- a/package.json +++ b/package.json @@ -32,8 +32,8 @@ "tabix-reader": "^1.0.1", "trapi-client": "^0.0.3", "url-parse": "^1.5.10", - "vis-data": "^7.1.9", - "vis-network": "^9.1.9", + "vis-data": "7.1.6", + "vis-network": "9.1.6", "vis-util": "^5.0.7", "vue": "^2.7.16", "vue-async-computed": "^3.9.0", @@ -48,11 +48,12 @@ "yaml": "^1.10.2" }, "devDependencies": { - "@babel/preset-env": "^7.23.8", + "@babel/core": "^7.26.0", + "@babel/preset-env": "^7.26.0", "@vue/babel-preset-app": "^4.5.19", "@vue/cli-plugin-babel": "^4.5.19", "@vue/cli-service": "^4.5.19", - "babel-loader": "^8.3.0", + "babel-loader": "^8.4.1", "babel-plugin-transform-remove-console": "^6.9.4", "cache-loader": "^4.1.0", "eslint-config-prettier": "^8.10.0", diff --git a/vue.config.js b/vue.config.js index 86cfb0fba..e03af7b54 100644 --- a/vue.config.js +++ b/vue.config.js @@ -378,7 +378,6 @@ module.exports = { }); // add the transform rule for bioindex - // Helen 2021-06-17 config.module.rules.push({ test: /bioIndexUtils\.js$/, loader: "string-replace-loader", @@ -389,6 +388,23 @@ module.exports = { }, }); + // Add the rule for handling .js files with babel-loader + config.module.rules.push({ + test: /\.js$/, + include: [/node_modules\/vis-network/, /node_modules\/vis-data/], + use: { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env"], + plugins: ["@babel/plugin-transform-runtime"], + }, + }, + }); + config.resolve.alias = { + ...config.resolve.alias, + "vis-network": "vis-network/standalone/umd/vis-network.min.js", + "vis-data": "vis-data/standalone/umd/vis-data.min.js", + }; // create inline maps for dev builds if (process.env.NODE_ENV !== "production") { //config.devtool = "inline-source-map"; From c001c123702de29f44676ced1b395914548e4d6c Mon Sep 17 00:00:00 2001 From: Quy Date: Fri, 15 Nov 2024 13:19:13 -0500 Subject: [PATCH 2/5] suppress error --- src/views/PIGEAN/Phenotype/main.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/views/PIGEAN/Phenotype/main.js b/src/views/PIGEAN/Phenotype/main.js index 971aebdd7..56fcc5b24 100644 --- a/src/views/PIGEAN/Phenotype/main.js +++ b/src/views/PIGEAN/Phenotype/main.js @@ -24,6 +24,7 @@ import FilterEnumeration from "@/components/criterion/FilterEnumeration.vue"; import FilterGreaterLess from "@/components/criterion/FilterGreaterLess.vue"; import FilterPValue from "@/components/criterion/FilterPValue.vue"; import TooltipDocumentation from "@/components/TooltipDocumentation.vue"; +import NetworkGraph from "@/components/NetworkGraph.vue"; import { pageMixin } from "@/mixins/pageMixin.js"; new Vue({ store, @@ -42,6 +43,7 @@ new Vue({ Heatmap, ResearchHeatmap, FilterPValue, + NetworkGraph, }, mixins: [pageMixin], data() { @@ -415,8 +417,8 @@ new Vue({ let data = structuredClone(originalData); let mechanisms = this.mechanismMap; for (let i = 0; i < data.length; i++) { - let label = mechanisms[data[i].factor].label; - let score = mechanisms[data[i].factor].score; + let label = mechanisms[data[i].factor].label || ""; + let score = mechanisms[data[i].factor].score || ""; data[i].mechanism = `${score}___${label}`; } return data; From 281f6bc3eed006d51b6b07d56cb8dc247bb77254 Mon Sep 17 00:00:00 2001 From: Quy Date: Fri, 15 Nov 2024 13:19:47 -0500 Subject: [PATCH 3/5] wip - new graph component --- src/components/NetworkGraph.vue | 169 ++++++++++++++++++++++++ src/views/PIGEAN/Phenotype/Template.vue | 53 ++++---- 2 files changed, 199 insertions(+), 23 deletions(-) create mode 100644 src/components/NetworkGraph.vue diff --git a/src/components/NetworkGraph.vue b/src/components/NetworkGraph.vue new file mode 100644 index 000000000..f8c041d48 --- /dev/null +++ b/src/components/NetworkGraph.vue @@ -0,0 +1,169 @@ + + + + diff --git a/src/views/PIGEAN/Phenotype/Template.vue b/src/views/PIGEAN/Phenotype/Template.vue index 5707634a7..4e9920da8 100644 --- a/src/views/PIGEAN/Phenotype/Template.vue +++ b/src/views/PIGEAN/Phenotype/Template.vue @@ -89,13 +89,18 @@
-

- Genes with genetic support -

-
+

Network Graph

+ +
+
+ +
+
+

Genes with genetic support

+
Combined genetic support is composed of direct support - (from GWAS associations near the gene) and indirect support - (membership in gene sets with genetic support). + (from GWAS associations near the gene) and indirect + support (membership in gene sets with genetic support). Units are log-odds of probability.
@@ -146,11 +151,11 @@

Gene sets that affect genetic support

-
- Gene sets affect the log-odds of the probability - that a gene is involved in a trait. Effect sizes are - calculated for the gene set in isolation (marginal) - and in a joint model with all gene sets together (joint). +
+ Gene sets affect the log-odds of the probability that a + gene is involved in a trait. Effect sizes are calculated + for the gene set in isolation (marginal) and in a joint + model with all gene sets together (joint).
- Mechanisms are determined by latent factorization - of the membership matrix of significant genes and gene sets. + Mechanisms are determined by latent factorization of the + membership matrix of significant genes and gene sets.
P-value (<=)
- + v-model.lazy="$parent.heatmapMaxP" + />
+ > - - + +
From 80f17985558970137b7b773c5c975b2cc2123ddc Mon Sep 17 00:00:00 2001 From: Quy Date: Fri, 15 Nov 2024 13:50:08 -0500 Subject: [PATCH 4/5] fit graph --- src/components/NetworkGraph.vue | 53 +++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/src/components/NetworkGraph.vue b/src/components/NetworkGraph.vue index f8c041d48..e3f48e322 100644 --- a/src/components/NetworkGraph.vue +++ b/src/components/NetworkGraph.vue @@ -46,27 +46,34 @@ export default Vue.component("NetworkGraph", { }, methods: { async fetchGraphData() { + this.loading = true; try { - this.loading = true; - //API call to fetch graph data, hardcoded for now but should be passed in as props const response = await fetch( "https://bioindex-dev.hugeamp.org/api/bio/query/pigean-graph?q=T2D,2,small" ); const data = await response.json(); - console.log("data log:", data.data[0]); + this.nodes.clear(); this.edges.clear(); this.nodes.add(data.data[0].nodes); this.edges.add(data.data[0].edges); await this.$nextTick(); - this.initNetwork(); + await this.initNetwork(); + + // Initial fit after data load + if (this.network) { + this.network.fit({ + animation: false, + }); + } } catch (error) { - console.error("Error fetching graph data:", error); + console.error("Error:", error); } finally { this.loading = false; } }, + initNetwork() { if (!this.$refs.networkContainer) return; @@ -77,7 +84,7 @@ export default Vue.component("NetworkGraph", { }; const options = { physics: { - enabled: false, + enabled: true, stabilization: { enabled: true, iterations: 100, @@ -85,28 +92,36 @@ export default Vue.component("NetworkGraph", { fit: true, }, }, - interaction: { - dragNodes: true, - dragView: true, - zoomView: true, - }, }; this.network = new Network(container, data, options); + // Add stabilization events + this.network.on("startStabilizing", () => { + this.stabilizing = true; + }); + + this.network.on("stabilizationProgress", (params) => { + this.stabilizationProgress = + (params.iterations / params.total) * 100; + }); + this.network.on("stabilizationIterationsDone", () => { this.stabilizing = false; this.stabilizationProgress = 100; this.network.setOptions({ physics: false }); - // Add slight delay before fitting + // Final fit after stabilization with animation setTimeout(() => { - this.network.fit({ - animation: { - duration: 1000, - easingFunction: "easeInOutQuad", - }, - }); + if (this.network) { + this.network.fit({ + animation: { + duration: 1000, + easingFunction: "easeInOutQuad", + }, + scale: 1.2, // Zoom out slightly more + }); + } }, 500); }); }, @@ -118,7 +133,7 @@ export default Vue.component("NetworkGraph", { .network-container { position: relative; width: 100%; - height: 600px; + height: 400px; } .stabilization-progress { From 4ad97711f6ec0c200a4ea935ff368d0e66521a85 Mon Sep 17 00:00:00 2001 From: Quy Date: Fri, 15 Nov 2024 13:54:18 -0500 Subject: [PATCH 5/5] notes --- src/components/NetworkGraph.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/NetworkGraph.vue b/src/components/NetworkGraph.vue index e3f48e322..3c3742716 100644 --- a/src/components/NetworkGraph.vue +++ b/src/components/NetworkGraph.vue @@ -25,6 +25,7 @@ import { Network } from "vis-network"; import { DataSet } from "vis-data"; export default Vue.component("NetworkGraph", { + //props: phenotype, sigma and geneset size data() { return { network: null,