Skip to content

Commit

Permalink
NN-340 Implemented the base construct of pathway graphs overview
Browse files Browse the repository at this point in the history 
- Implement the generation of new pathway graphs
- Implement the naming of individual pathway graphs
- Implement the favorite system for pathway graphs
- Implement snapshot image of individual pathway graph
  • Loading branch information
@TripZz
TripZz committed Sep 13, 2023
1 parent 6c2e61c commit e18ffb7
Show file tree
Hide file tree
Showing 6 changed files with 293 additions and 57 deletions.
173 changes: 169 additions & 4 deletions frontend/src/components/enrichment/PathwayGraph.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,84 @@
<template>
<div id="pathways-graphs">
<img src="@/assets/pathwaybar/pathway-button.png">
<div class="graph-section"></div>
<div class="generate-graph">
<div class="generate-text" v-on:click="get_term_data()">Generate term graph</div>
</div>
<div class="graph-section">
<div class="slider" tabindex="0">
<div v-for="(entry, index) in term_graphs" :key="index" class="graph" v-on:click="switch_graph()" @mouseover="activeGraphIndex = index" @mouseout="activeGraphIndex = -1">
<SnapshotGraph :propValue="entry" :index="entry.id"/>
<div class="graph-options" v-show="activeGraphIndex == index" >
<div class="bookmark-graph" v-on:click.stop="add_graph(entry)" :class="{ checked: favourite_graphs.has(entry)}" ref="checkboxStatesGraph"></div>
<img class="remove-graph" src="@/assets/pathwaybar/cross.png" v-on:click.stop="remove_graph(entry, index)">
<div class="graph-name">
<input type="text" v-model="entry.label" class="empty" @click.stop />
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import SnapshotGraph from '@/components/enrichment/SnapshotGraph.vue'
export default {
name: 'PathwayGraphs',
props: ['terms'],
components: {
SnapshotGraph,
},
data() {
return {
api: {
termgraph: "api/subgraph/terms",
},
term_graphs: new Set(),
favourite_graphs: new Set(),
activeGraphIndex: -1,
graph_number: 0
}
},
methods: {
get_term_data() {
var com = this
var formData = new FormData()
formData.append('func-terms', JSON.stringify(com.terms))
this.axios
.post(com.api.termgraph, formData)
.then((response) => {
this.$store.commit('assign_term_graph', response.data)
this.graph_number += 1
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});
})
},
switch_graph() {
this.$router.push("terms")
},
remove_graph(entry, index) {
if (!this.favourite_graphs.has(entry)) {
// Checkbox is checked, add its state to the object
this.favourite_graphs.delete(entry)
}
this.term_graphs.delete(entry)
this.$store.commit('remove_snapshotPathway', index)
},
add_graph(entry){
if (!this.favourite_graphs.has(entry)) {
// Checkbox is checked, add its state to the object
this.favourite_graphs.add(entry)
} else {
// Checkbox is unchecked, remove its state from the object
this.favourite_graphs.delete(entry)
}
},
}
}
</script>

Expand All @@ -24,18 +93,114 @@ export default {
margin-left: 48.74%;
border-radius: 10px;
z-index: 999;
font-family: 'ABeeZee', sans-serif;
}
#pathways-graphs img {
.generate-graph {
width: 24.20%;
height: 11.16%;
position: absolute;
border-radius: 5px;
background: #0A0A1A;
cursor: default;
}
.generate-graph .generate-text {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.95vw;
}
.graph-section {
width: 100%;
height: 87.65%;
top: 12.35%;
display: flex;
border-radius: 10px;
background: #0A0A1A;
position: absolute;
justify-content: center;
}
.graph-section .slider {
position: absolute;
width: 90.78%;
height: 100%;
display: flex;
align-items: center;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.graph-section .slider .graph{
position: relative;
width: 31.4%;
height: 71.71%;
flex-shrink: 0;
margin: 0% 1% 0% 1%;
border-radius: 5px;
border: 1px solid #FFF;
background: rgba(217, 217, 217, 0.12);
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
display: flex;
}
.bookmark-graph {
display: block;
width: 0.9vw;
height: 0.9vw;
margin: 1% 1% 0 0;
background-color: white;
-webkit-mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
mask: url(@/assets/pathwaybar/star-solid.svg) no-repeat center;
mask-size: 0.9vw;
background-repeat: no-repeat;
}
.remove-graph {
width: 0.9vw;
height: 0.9vw;
-webkit-filter: invert(100%); /* Safari/Chrome */
filter: invert(100%);
margin: 1% 1% 0 0;
}
.graph-options {
position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: end;
}
.graph-name {
position: fixed;
display: flex;
bottom: 5%;
width: 100%;
height: 20%;
border-radius: 0 0 5px 5px;
background-color: #0A0A1A;
text-align-last: center;
justify-content: center;
}
.graph-name input[type=text] {
font-size: 0.85vw;
background: none;
color: white;
cursor: default;
font-family: 'ABeeZee', sans-serif;
border: none;
}
.checked {
background-color: #ffa500;
}
</style>
60 changes: 12 additions & 48 deletions frontend/src/components/enrichment/PathwayList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
<a class="fdr_filter" v-on:click="sort_fdr = (sort_fdr === 'asc') ? 'dsc' : 'asc'; sort_alph = '' " >fdr rate</a>
</div>

<div v-if="await_load == true" class="loading_pane" ></div>
<div class="results" v-if="terms !== null && await_load == false" tabindex="0" @keydown="handleKeyDown" ref="resultsContainer">
<!-- <div v-if="await_load == true" class="loading_pane" ></div> -->
<div class="results" v-if="terms !== null" tabindex="0" @keydown="handleKeyDown" ref="resultsContainer">
<table >
<tbody>
<tr v-for="(entry, index) in filt_terms" :key="index" class="option" :class="{ selected: selectedIndex === index }" v-on:click="select_term(entry,index)">
Expand Down Expand Up @@ -68,36 +68,25 @@
export default {
name: 'PathwayList',
props: ['gephi_data','active_term'],
props: ['gephi_data','terms'],
data() {
return{
api: {
subgraph: "api/subgraph/enrichment",
},
terms: null,
await_load: false,
search_raw: "",
filter_raw: "",
bookmark_off: true,
selectedIndex: -1,
sort_fdr: "",
sort_alph: "",
category: "Filter",
favourite_tab: new Set(),
category_filtering: false,
filter_terms: []
filter_terms: [],
bookmark_off: true,
favourite_tab: new Set(),
selectedIndex: -1,
}
},
mounted() {
var com = this
com.generatePathways(com.gephi_data.nodes[0].species, com.gephi_data.nodes.map(node => node.id))
},
watch: {
watch:{
terms() {
this.filtered_terms = this.terms
},
this.filter_options(this.terms)
}
},
computed: {
regex() {
Expand Down Expand Up @@ -129,50 +118,26 @@ export default {
filtered.sort(function(t1, t2) { return (t2.name.toLowerCase() > t1.name.toLowerCase() ? 1 : (t1.name.toLowerCase() === t2.name.toLowerCase() ? 0 : -1)) })
}
if(com.sort_fdr == "asc"){
filtered.sort((t1, t2) => t2.fdr_rate - t1.fdr_rate)
}else if (com.sort_fdr == "dsc"){
filtered.sort((t1, t2) => t1.fdr_rate - t2.fdr_rate)
}
if (!com.bookmark_off){
filtered = filtered.filter(function(term) {
return com.favourite_tab.has(term)
});
}
return new Set(filtered);
},
},
methods: {
generatePathways(species, proteins){
var com = this
//Adding proteins and species to formdata
var formData = new FormData()
formData.append('proteins', proteins)
formData.append('species_id', species);
//POST request for generating pathways
com.axios
.post(com.api.subgraph, formData)
.then((response) => {
com.$store.commit('assign_enrichment', response.data.sort((t1, t2) => t1.fdr_rate - t2.fdr_rate))
com.terms = com.$store.state.enrichment_terms
// com.get_term_data(formData)
com.filter_options()
com.await_load = false
})
},
filter_options() {
filter_options(terms) {
var com = this
com.filter_terms = []
var remove_duplicates = [...new Set(com.terms.map(term => term.category))]
var remove_duplicates = [...new Set(terms.map(term => term.category))]
remove_duplicates.forEach(term => {
com.filter_terms.push({'label': term})
})
Expand Down Expand Up @@ -605,7 +570,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
padding-left: 5%;
}
.visualize-logo .bookmark-image {
Expand Down
33 changes: 31 additions & 2 deletions frontend/src/components/enrichment/PathwayMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@
<div class="pathwaybar">
<PathwayList
:gephi_data='gephi_data'
:terms='terms'
></PathwayList>
<PathwayGraph></PathwayGraph>
<PathwayGraph
:terms='terms'
></PathwayGraph>
<img id="pathway-bg" src="@/assets/pathwaybar/background-dna.png">
</div>
</div>
Expand All @@ -26,11 +29,37 @@ export default {
},
data() {
return {
api: {
subgraph: "api/subgraph/enrichment",
},
terms: null,
pane_hidden: false
}
},
mounted() {
var com = this
com.generatePathways(com.gephi_data.nodes[0].species, com.gephi_data.nodes.map(node => node.id))
},
methods: {
generatePathways(species, proteins){
var com = this
//Adding proteins and species to formdata
var formData = new FormData()
formData.append('proteins', proteins)
formData.append('species_id', species);
//POST request for generating pathways
com.axios
.post(com.api.subgraph, formData)
.then((response) => {
com.$store.commit('assign_enrichment', response.data.sort((t1, t2) => t1.fdr_rate - t2.fdr_rate))
com.terms = com.$store.state.enrichment_terms
com.await_load = false
})
},
}
}
</script>
Expand Down
Loading

0 comments on commit e18ffb7

Please sign in to comment.