Skip to content

Commit

Permalink
NN-378 Implemented pathways pane
Browse files Browse the repository at this point in the history
-added statistics
-added connections
-added "to term graph"
  • Loading branch information
TripZz committed Nov 2, 2023
1 parent 034717a commit f35036b
Show file tree
Hide file tree
Showing 10 changed files with 271 additions and 142 deletions.
Binary file added frontend/src/assets/pane/follow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/components/enrichment/graph/PathwayGraph.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default {
.then((response) => {
if(response.data){
this.graph_number += 1
if(this.term_graphs.size < 1) this.$store.commit('assign_term_graph', response.data)
this.$store.commit('assign_new_term_graph', {label: `Graph ${this.graph_number}`, graph: response.data})
this.term_graphs.add({ id: this.graph_number, label: `Graph ${this.graph_number}`, graph: response.data});
}
Expand Down
16 changes: 9 additions & 7 deletions frontend/src/components/pane/PaneSystem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,17 @@
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
></NodePane>
</div>
<!-- <div class="main-section">
<TermPane v-show="active_tab === 'term'"
<TermPane v-show="active_tab === 'Pathway'"
:active_term='active_term'
:gephi_data='gephi_data'
@active_item_changed = 'active_item = $event'
@highlight_subset_changed = 'highlight_subset = $event'
></TermPane>
></TermPane>

</div>
<!-- <div class="main-section">
<SubsetPane v-show="active_tab === 'subset'"
:active_subset='active_subset'
:gephi_data='gephi_data'
Expand All @@ -46,7 +48,7 @@
<script>
import NodePane from '@/components/pane/modules/node/NodePane.vue'
// import TermPane from '@/components/pane/modules/TermPane.vue'
import TermPane from '@/components/pane/modules/pathways/TermPane.vue'
// import SubsetPane from '@/components/pane/modules/SubsetPane.vue'
// import DEValuePane from '@/components/pane/modules/DEValuePane.vue'
// import EnrichmentLayerPane from '@/components/pane/modules/EnrichmentLayerPane.vue'
Expand All @@ -57,7 +59,7 @@ export default {
emits:['active_node_changed','active_term_changed', 'active_subset_changed', 'active_combine_changed', 'active_layer_changed', 'active_termlayers_changed'],
components: {
NodePane,
// TermPane,
TermPane,
// SubsetPane,
// DEValuePane,
// EnrichmentLayerPane
Expand Down
131 changes: 0 additions & 131 deletions frontend/src/components/pane/modules/TermPane.vue

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ export default {
}
#statistics .network-results {
height: 67%;
margin-top: 2%;
height: 58%;
overflow: scroll;
}
Expand Down Expand Up @@ -131,6 +132,7 @@ export default {
}
.network-results td:last-child {
font-size: 0.7vw;
margin-bottom: 1%;
color: white;
width: 30%;
align-self: center;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ export default {
}
#connect .network-results {
height: 68%;
margin-top: 2%;
height: 62%;
overflow: scroll;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<template>
<div id="pathway-connect">
<div class="pane-sorting">
<a class="pane_attributes" >nodes</a>
<a class="pane_values">cluster</a>
</div>

<div class="network-results" tabindex="0" @keydown="handleKeyDown">
<table >
<tbody>
<tr v-for="(entry, index) in links" :key="index" class="option">
<td>
<div class="statistics-attr">
<a href="#">{{entry.attributes["Name"]}}</a>
</div>
</td>
<td>
<a class="statistics-val">{{entry.attributes["Modularity Class"]}}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<script>
export default {
name: 'PathwayConnections',
props: ['active_term','gephi_data'],
data() {
return {
links: []
}
},
watch: {
active_term(){
var com = this
const activeTermProteins = new Set(com.active_term.proteins);
com.links = com.gephi_data.nodes.filter(node => activeTermProteins.has(node.id));
}
}
}
</script>

<style>
#pathway-connect {
width: 100%;
height: 100%;
top: 8.35%;
position: absolute;
font-family: 'ABeeZee', sans-serif;
padding: 0% 2% 2% 2%;
}
#pathway-connect .network-results {
margin-top: 2%;
height: 82%;
overflow: scroll;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<template>
<div id="statistics">
<div class="pane-sorting">
<a class="pane_attributes" >values</a>
<a class="pane_values">attributes</a>
</div>

<div class="network-results" tabindex="0" @keydown="handleKeyDown">
<table >
<tbody>
<tr v-for="(key, entry, index) in statistics" :key="index" class="option">
<td>
<div class="statistics-attr">
<a href="#">{{key}}</a>
</div>
</td>
<td>
<a class="statistics-val">{{entry}}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<script>
export default {
name: 'PathwayStatistics',
props: ['active_term'],
data() {
return {
statistics: {}
}
},
watch: {
active_term(){
console.log(this.active_term)
var com = this
if (com.active_term == null) {
return;
}
const { category, id, fdr_rate, p_value } = com.active_term;
com.statistics = { category, id, fdr_rate, p_value }
}
}
}
</script>

<style>
</style>
Loading

0 comments on commit f35036b

Please sign in to comment.