NN-340 Add the apply/revert function and adjusted some parts

-adjusted code structure -added load screen
BackofenLab · Sep 15, 2023 · 8864874 · 8864874
1 parent 1bb1283
commit 8864874
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
@@ -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" tabindex="0" @keydown="handleKeyDown" ref="resultsContainer">
+            <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">
                 <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)">
@@ -68,7 +68,7 @@
 
 export default {
     name: 'PathwayList',
-    props: ['gephi_data','terms'],
+    props: ['gephi_data','terms', 'await_load'],
     data() {
         return{
             search_raw: "",

diff --git a/frontend/src/components/enrichment/PathwayMenu.vue b/frontend/src/components/enrichment/PathwayMenu.vue
@@ -3,10 +3,11 @@
         <div class="minimize-bar" v-on:click="pane_hidden = !pane_hidden" >
             <img src="@/assets/pathwaybar/arrows.png" :style="{ transform: pane_hidden ? 'rotate(-90deg)' : 'rotate(90deg)' }">
         </div>
-        <div class="pathwaybar">
+        <div class="pathwaybar" v-show="pane_hidden === false">
             <PathwayList
             :gephi_data='gephi_data'
             :terms='terms'
+            :await_load = 'await_load'
             ></PathwayList>
             <PathwayGraph
             :terms='terms'
@@ -33,7 +34,9 @@ export default {
                 subgraph: "api/subgraph/enrichment",
             },
             terms: null,
-            pane_hidden: false
+            pane_hidden: false,
+            await_load: false,
+            terms_list: []
         }
     },
     mounted() {
@@ -50,18 +53,51 @@ export default {
             formData.append('proteins', proteins)
             formData.append('species_id', species);
                 
+            this.await_load = true
+
             //POST request for generating pathways
+            com.sourceToken = this.axios.CancelToken.source();
             com.axios
-            .post(com.api.subgraph, formData)
+            .post(com.api.subgraph, formData, { cancelToken: com.sourceToken.token })
             .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.terms = response.data.sort((t1, t2) => t1.fdr_rate - t2.fdr_rate)
+                com.terms_list.push(com.terms)
                 com.await_load = false
             })
 
         },
-        }
+        apply_layer(subset) {
+            var com = this;
+            com.generatePathways(com.gephi_data.nodes[0].species, subset)
+        },
+        revert_layer() {
+            var com = this;
+
+            if(com.await_load){
+                com.abort_enrichment()
+                return
+            }
+
+            if(com.terms_list.length > 1) {
+                com.terms_list.pop()
+                com.terms = com.terms_list[com.terms_list.length - 1 ];
+            }
+
+        },
+        abort_enrichment() {
+                this.sourceToken.cancel('Request canceled');
+                this.await_load = false 
+            },
+    },
+    created() {
+
+        this.emitter.on("enrichTerms", (subset) => {
+            if(subset != null) this.apply_layer(subset);
+            else this.revert_layer();
+        });
+
     }
+}
 </script>
 
 

diff --git a/frontend/src/components/pane/SubsetPane.vue b/frontend/src/components/pane/SubsetPane.vue
@@ -135,8 +135,8 @@ export default {
         * @param {boolean} state - functional enrichment gets reverted or applied.
         */
         apply_func(state) {
-            if (state) this.emitter.emit("enrichSubset", this.active_subset.map(node => node.attributes["Ensembl ID"]));
-            else this.emitter.emit("enrichSubset", null);
+            if (state) this.emitter.emit("enrichTerms", this.active_subset.map(node => node.attributes["Ensembl ID"]));
+            else this.emitter.emit("enrichTerms", null);
         },
 
         /**

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -3,8 +3,6 @@ import { createStore } from 'vuex'
 export const store = createStore({
   state: {
       gephi_json: null,
-      enrichment_terms: null,
-      enrichment_set: [],
       term_graph_data: null,
       term_graph_dict: [],
       filter_terms: [
@@ -30,18 +28,9 @@ export const store = createStore({
     assign(state, value) {
         state.gephi_json = value
     },
-    assign_enrichment(state, value) {
-      state.enrichment_terms = value
-    },
     assign_colorpalette(state, value) {
       state.colorpalette = value
     },
-    assign_new_enrichment(state, value) {
-      state.enrichment_set.push(value)
-    },
-    pop_old_enrichment(state) {
-      state.enrichment_set.pop()
-    },
     assign_term_graph(state, value) {
       state.term_graph_data = value
     },