Skip to content

Commit

Permalink
NN-391 Adjusted the pathway graph according to the gene graph
Browse files Browse the repository at this point in the history
  • Loading branch information
TripZz committed Nov 20, 2023
1 parent f287985 commit b42484c
Show file tree
Hide file tree
Showing 30 changed files with 960 additions and 367 deletions.
Binary file added frontend/src/assets/toolbar/logout.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/src/components/enrichment/PathwayMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export default {
.post(com.api.subgraph, formData, { cancelToken: com.sourceToken.token })
.then((response) => {
com.terms = response.data.sort((t1, t2) => t1.fdr_rate - t2.fdr_rate)
if (com.terms_list.length == 0) this.$store.commit('assign_current_enrichment_terms', com.terms)
com.terms_list.push(com.terms)
com.await_load = false
this.emitter.emit("generateGraph", com.terms);
Expand All @@ -89,6 +90,7 @@ export default {
this.emitter.on("enrichTerms", (terms) => {
if(terms != null) this.terms = terms;
else this.terms = this.terms_list[0];
this.$store.commit('assign_current_enrichment_terms', this.terms)
});
}
Expand Down
115 changes: 0 additions & 115 deletions frontend/src/components/interface/ModularityClass.vue

This file was deleted.

6 changes: 3 additions & 3 deletions frontend/src/components/interface/NetworkValues.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div id="network-values">
<div class="value-text">nodes: {{ gephi_data.nodes.length }}</div>
<div class="value-text">edges: {{ gephi_data.edges.length }}</div>
<div class="value-text">nodes: {{ data.nodes.length }}</div>
<div class="value-text">edges: {{ data.edges.length }}</div>
</div>
</template>

<script>
export default {
name: 'NetworkValues',
props: ['gephi_data'],
props: ['data'],
data() {
return {
}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/interface/SearchField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div id="search-menu">
<div id="search" class="search-field" :class="{ full: search_raw.length >= 2 }">
<img class="search-field-icon" src="@/assets/toolbar/search.png">
<input type="text" v-model="search_raw" class="empty" placeholder="Find your protein" @keyup.enter="select_node(filt_search[0])"/>
<input type="text" v-model="search_raw" class="empty" placeholder="Find your node" @keyup.enter="select_node(filt_search[0])"/>
</div>
<div class="check-active" v-if="search_raw.length >= 2 && filt_search.length > 0" v-on:click="search_raw=''"></div>
<div class="results" v-if="search_raw.length >= 2 && filt_search.length > 0" >
<div class="result-label">proteins in network</div>
<div class="result-label">nodes in network</div>
<div v-for="(entry, index) in filt_search" :key="index" class="network-search">
<a href="#" v-on:click="select_node(entry)">{{entry.attributes['Name']}}</a>
</div>
Expand All @@ -22,7 +22,7 @@
<script>
export default {
name: 'SearchField',
props: ['gephi_data', 'active_node'],
props: ['data', 'active_node'],
emits: ['active_node_changed'],
data() {
return {
Expand Down Expand Up @@ -50,7 +50,7 @@ export default {
if (com.search_raw.length >= 2) {
var regex = new RegExp(com.regex, 'i');
matches = com.gephi_data.nodes.filter(function(node) {
matches = com.data.nodes.filter(function(node) {
return regex.test(node.label);
});
}
Expand Down
10 changes: 8 additions & 2 deletions frontend/src/components/pane/PaneSystem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,35 @@
</div>
<div class="pane-window">
<NodePane v-show="active_tab === 'Protein'"
:mode = 'mode'
:active_node='active_node'
:node_color_index='node_color_index'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
></NodePane>
<TermPane v-show="active_tab === 'Pathway'"
<TermPane v-show="active_tab === 'Pathway'"
:mode = 'mode'
:active_term='active_term'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
@highlight_subset_changed = 'highlight_subset = $event'
></TermPane>
<SubsetPane v-show="active_tab === 'Subset'"
:mode = 'mode'
:active_subset='active_subset'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
@highlight_subset_changed = 'highlight_subset = $event'
@active_layer_changed = 'active_layer = $event'
></SubsetPane>
<DEValuePane v-show="active_tab === 'Differential expression'"
:mode = 'mode'
:active_decoloumn='active_decoloumn'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
></DEValuePane>
<EnrichmentLayerPane v-show="active_tab === 'Pathway layers'"
:mode = 'mode'
:active_termlayers='active_termlayers'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
Expand Down Expand Up @@ -65,7 +70,8 @@ export default {
active_dict: {},
active_tab: "Protein",
highlight_subset: null,
paneHidden: true
paneHidden: true,
mode: "protein"
}
},
watch: {
Expand Down
97 changes: 97 additions & 0 deletions frontend/src/components/pane/TermPaneSystem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template>
<div v-show="active_node !== null || active_subset !== null ||paneHidden == false">
<div id="attributepane" class="pane">
<div class="headertext">
<span>{{active_tab}}</span>
<img class="pane_close" src="@/assets/pathwaybar/cross.png" v-on:click="close_pane()">
</div>
</div>
<div class="pane-window">
<PathwayPane v-show="active_tab === 'Protein'"
:mode = 'mode'
:active_node='active_node'
:node_color_index='node_color_index'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
></PathwayPane>
<SubsetPane v-show="active_tab === 'Subset'"
:mode = 'mode'
:active_subset='active_subset'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
@highlight_subset_changed = 'highlight_subset = $event'
@active_layer_changed = 'active_layer = $event'
></SubsetPane>
</div>
</div>
</template>

<script>
import PathwayPane from '@/components/pane/modules/pathway/PathwayPane.vue'
import SubsetPane from '@/components/pane/modules/subset/SubsetPane.vue'
export default {
name:"TermPaneSystem",
props:['gephi_data', 'active_subset', 'active_node', 'node_color_index'],
emits:['active_node_changed', 'active_subset_changed', 'active_combine_changed', 'active_layer_changed'],
components: {
PathwayPane,
SubsetPane,
},
data() {
return{
active_item: null,
active_dict: {},
active_tab: "Protein",
highlight_subset: null,
paneHidden: true,
mode: "term"
}
},
watch: {
active_item(val){
this.active_tab = Object.keys(val)[0]
if(val == null){
delete this.active_dict.val;
return
}
Object.assign(this.active_dict, val);
}
},
methods: {
close_pane(){
this.active_dict = {}
this.$emit('active_node_changed', null)
this.$emit('active_subset_changed', null)
this.$emit('active_layer_changed', null)
},
selectTab(name, tab){
if(name == "node"){
this.active_tab = "node"
this.$emit('active_node_changed', null)
this.$emit('active_combine_changed', {value: tab, name: name})
}
if(name == "subset"){
this.active_tab = "subset"
this.$emit('active_subset_changed', null)
this.$emit('active_combine_changed', {value: tab, name: name})
}
}
},
mounted(){
this.emitter.on("reset_protein",(state) => {
this.selectTab("node",state)
})
}
}
</script>

<style>
</style>
3 changes: 0 additions & 3 deletions frontend/src/components/pane/modules/difexp/DEValuePane.vue
Original file line number Diff line number Diff line change
Expand Up @@ -164,9 +164,6 @@ export default {
com.draw_legend();
com.emitter.emit("adjustDE", this.dboundary.value);
},
select_node(value) {
this.emitter.emit("searchNode", value);
},
},
updated() {
if(this.active_decoloumn != null){
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ export default {
com.statistics[dcoloumn] = com.active_node.attributes[dcoloumn]
});
}
console.log(com.statistics)
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/pane/modules/node/NodePane.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ import RoutingNode from '@/components/pane/modules/node/RoutingNode.vue'
export default {
name: 'NodePane',
props: ['active_node','gephi_data','node_color_index',],
props: ['active_node','gephi_data','node_color_index','mode'],
emits: ['active_item_changed'],
components: {
NetworkStatistics,
Expand Down Expand Up @@ -117,7 +117,7 @@ export default {
navigator.clipboard.writeText(textToCopy.join("\n"));
},
select_node(value) {
this.emitter.emit("searchNode", value);
this.emitter.emit("searchNode", {node: value, mode: this.mode});
},
},
Expand Down
Loading

0 comments on commit b42484c

Please sign in to comment.