NN-391 Implement the graph/pathway selection menu

frontend/src/components/enrichment/PathwayTools.vue

@@ -22,6 +22,7 @@
         </div>
         <div class="graph-section">
             <PathwayGraph v-show="tool == 'Termgraph'"
+            :mode = 'mode'
             :gephi_data='gephi_data'
             :filtered_terms = 'filtered_terms'
             :bookmark_off = 'bookmark_off'
@@ -52,6 +53,7 @@ export default {
             favourite_graphs: new Set(),
             bookmark_off: true,
             tool_selecting: false,
+            mode: 'protein',
             tools: [{id: 'Termgraph'}, {id: 'Heatmap'}]
         }
     },

frontend/src/components/enrichment/graph/PathwayGraph.vue

@@ -3,7 +3,7 @@
         <div v-for="(entry, index) in filt_graphs" :key="index" class="graph" v-on:click="switch_graph(entry)" @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>
+                <div class="bookmark-graph" v-on:click.stop="add_graph(entry)" :class="{ checked: favourite_graphs.has(entry.id)}" ref="checkboxStatesGraph"></div>
                 <img  class="remove-graph" src="@/assets/pathwaybar/cross.png" v-on:click.stop="remove_graph(entry)">
                 <div class="graph-name">
                     <input type="text" v-model="entry.label" class="empty" @click.stop />
@@ -19,7 +19,7 @@ import SnapshotGraph from '@/components/enrichment/graph/SnapshotGraph.vue'
 
 export default {
     name: 'PathwayGraphs',
-    props: ['gephi_data','filtered_terms', 'bookmark_off'],
+    props: ['gephi_data','filtered_terms', 'bookmark_off','mode'],
     components: {
         SnapshotGraph,
     },
@@ -31,13 +31,20 @@ export default {
             term_graphs: new Set(),
             favourite_graphs: new Set(),
             activeGraphIndex: -1,
-            graph_number: 0,
+            graph_number: -1,
+            species: null
         }
     },
     mounted(){
-        this.emitter.on("generateGraph", (set) => {
-            this.get_term_data(set)
-        });
+        if(this.mode !='term') {
+            this.emitter.on("generateGraph", (set) => {
+                this.get_term_data(set)
+            });
+        }
+    },
+    activated(){
+            this.term_graphs = new Set(this.$store.state.term_graph_dict)
+            this.favourite_graphs = this.$store.state.favourite_graph_dict
     },
     methods: {
         get_term_data(set) {
@@ -54,32 +61,35 @@ export default {
                     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.$store.commit('assign_new_term_graph', {id: this.graph_number, 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(entry) {
             this.$store.commit('assign_term_graph', entry.graph)
-            this.$router.push("terms")
+            if(this.mode == 'term') this.emitter.emit('graphChanged')
+            else this.$router.push("terms")
+
         },
         remove_graph(entry) {
-            if (!this.favourite_graphs.has(entry)) {
+            if (!this.favourite_graphs.has(entry.id)) {
                 // Checkbox is checked, add its state to the object
-                this.favourite_graphs.delete(entry)
+                this.favourite_graphs.delete(entry.id)
+                this.$store.commit('assign_favourite_graph', this.favourite_graphs)
             }
             this.term_graphs.delete(entry)
             this.$store.commit('remove_snapshotPathway', entry.id)
+            this.$store.commit('remove_term_graph', entry)
         },
         add_graph(entry){
-            if (!this.favourite_graphs.has(entry)) {
-                // Checkbox is checked, add its state to the object
-                this.favourite_graphs.add(entry)
+            if (!this.favourite_graphs.has(entry.id)) {
+                this.favourite_graphs.add(entry.id)
             } else {
-                // Checkbox is unchecked, remove its state from the object
-                this.favourite_graphs.delete(entry)
+                this.favourite_graphs.delete(entry.id)
             }
+            this.$store.commit('assign_favourite_graph', this.favourite_graphs)
         },
     },
     computed: {
@@ -89,7 +99,7 @@ export default {
 
             if (!com.bookmark_off){
                 filtered = filtered.filter(function(term) {
-                    return com.favourite_graphs.has(term)
+                    return com.favourite_graphs.has(term.id)
                 });
             }
 

frontend/src/components/enrichment/graph/SnapshotGraph.vue

@@ -16,6 +16,9 @@ export default {
     updated(){
         if(this.findSnapshot()) this.initializeSnapshot(this.findSnapshot().snapshot)
     },
+    activated(){
+        if(this.findSnapshot()) this.initializeSnapshot(this.findSnapshot().snapshot)
+    },
     mounted(){
         if(!this.findSnapshot()) this.initializeSnapshot(this.getSnapshot(this.propValue.graph))
         else this.initializeSnapshot(this.findSnapshot().snapshot)

frontend/src/components/pathwaytools/PathwayGraphGraphs.vue

@@ -1,96 +1,40 @@
 <template>
     <div id="pathways-graphs">
-        <div id="pathway-tools-filter" v-on:click="handling_filter_menu()" >
-            <span>{{ tool }}</span>s
-        </div>
-        <div id="pathway-tools-filter-categories" v-show="tool_selecting== true">
-            <div class="element" v-for="(entry, index) in tools" :key="index" v-on:click="tool = entry.id; handling_filter_menu()">
-                <a>{{ entry.id }}</a>
-            </div>
-        </div>
-        <div class="generate" v-show="tool == 'Termgraph'">
-            <div class="generate-text" v-on:click="get_term_graph()">Generate term graph</div>
-        </div>
-        <div class="generate" v-show="tool == 'Heatmap'">
-            <div class="generate-text" v-on:click="get_heatmap()">Generate heatmap</div>
-        </div>
-        <div class="bookmark-button-graph" v-on:click="bookmark_off = !bookmark_off">
-            <img class="bookmark-image" src="@/assets/pathwaybar/favorite.png" :class="{recolor_filter: bookmark_off == false}">
-        </div>
-        <div class="export-heatmap" v-show="tool == 'Heatmap'">
-            <div class="generate-text" v-on:click="get_svg()">Export Snapshot</div>
+        <div id="pathway-tools-filter">
+            <span>{{ tool }}</span>
         </div>
         <div class="graph-section">
             <PathwayGraph v-show="tool == 'Termgraph'"
-            :gephi_data='gephi_data'
+            :term_data='term_data'
+            :mode = 'mode'
             :filtered_terms = 'filtered_terms'
             :bookmark_off = 'bookmark_off'
             ></PathwayGraph>
-            <PathwayHeatmap v-show="tool == 'Heatmap'"
-            :bookmark_off = 'bookmark_off'
-            :favourite_pathways = 'favourite_pathways'
-            ></PathwayHeatmap>
         </div>
     </div>
 </template>
 
 <script>
 
 import PathwayGraph from '@/components/enrichment/graph/PathwayGraph.vue'
-import PathwayHeatmap from '@/components/enrichment/heatmap/PathwayHeatmap.vue'
 
 export default {
     name: 'PathwayGraphGraphs',
-    props: ['gephi_data','filtered_terms', 'favourite_pathways'],
+    props: ['term_data','filtered_terms'],
     components: {
         PathwayGraph,
-        PathwayHeatmap
     },
     data() {
         return {
             tool: 'Termgraph',
             favourite_graphs: new Set(),
             bookmark_off: true,
             tool_selecting: false,
-            tools: [{id: 'Termgraph'}, {id: 'Heatmap'}]
+            mode: 'term',
+            tools: [{id: 'Termgraph'}]
         }
     },
     methods: {
-        get_term_graph(){
-            this.emitter.emit("generateGraph");
-        },
-        get_heatmap(){
-            this.emitter.emit("generateHeatmap");
-        },
-        get_svg(){
-            this.emitter.emit("exportHeatmap");
-        },
-        handling_filter_menu() {
-            var com = this;
-            if (!com.tool_selecting) {
-                com.tool_selecting = true;
-
-                // Add the event listener
-                document.addEventListener('mouseup', com.handleMouseUp);
-            }
-            else{
-                com.tool_selecting = false;
-                document.removeEventListener('mouseup', com.handleMouseUp);
-            }
-
-        },
-        handleMouseUp(e) {
-            var com = this;
-
-            var container = document.getElementById('pathway-tools-filter-categories');
-            var container_button = document.getElementById('pathway-tools-filter');
-            if (!container.contains(e.target) && !container_button.contains(e.target)) {
-                com.tool_selecting = false;
-
-                // Remove the event listener
-                document.removeEventListener('mouseup', com.handleMouseUp);
-            }
-        }
     },
 }
 </script>

frontend/src/components/pathwaytools/PathwayGraphMenu.vue

@@ -6,66 +6,34 @@
         <div class="pathwaybar" v-show="pane_hidden === false">
             <PathwayGraphList
             :term_data='term_data'
-            :terms='terms'
-            :await_load = 'await_load'
-            @favourite_pathways_changed = 'favourite_pathways = $event'
-            @filtered_terms_changed = 'filtered_terms = $event'
             ></PathwayGraphList>
+            <PathwayGraphGraphs
+            :gephi_data='gephi_data'
+            :filtered_terms='filtered_terms'
+            :favourite_pathways='favourite_pathways'
+            ></PathwayGraphGraphs>
             <img id="pathway-bg" src="@/assets/pathwaybar/background-dna.png">
         </div>
     </div>
 </template>
 
 <script>
 import PathwayGraphList from '@/components/pathwaytools/PathwayGraphList.vue'
+import PathwayGraphGraphs from '@/components/pathwaytools/PathwayGraphGraphs.vue'
 
 export default {
     name: 'PathwayMenu',
     props: ['term_data','active_term'],
     components: {
         PathwayGraphList,
+        PathwayGraphGraphs
     },
     data() {
         return {
-            api: {
-                subgraph: "api/subgraph/enrichment",
-            },
-            terms: null,
             pane_hidden: false,
-            await_load: false,
-            terms_list: [],
-            favourite_pathways: [],
-            filtered_terms: []
         }
     },
-    methods: {
-        generatePathways(species, genes){
-            var com = this
-
-            //Adding proteins and species to formdata 
-            var formData = new FormData()
-            formData.append('genes', genes)
-            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, { 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);
-            })
-
-        },
-        abort_enrichment() {
-                this.sourceToken.cancel('Request canceled');
-                this.await_load = false 
-            },
+    mounted() {
     },
 }
 </script>

frontend/src/store/index.js

@@ -16,6 +16,7 @@ export const store = createStore({
       test_sample: "Gnai3;Klf6;Xpo6;Gmpr;Trim25;Tbrg4;Mx1;Pdgfb;Zfp385a;Gpcr2;Clcn4-2;Myo18a;Heatr6;Ccl3;Nhp2;Poldip2;Ckb;Smg5;Tubb5;Ell2;Ergic1;Brpf1;Ubl3;Il16;Tcirg1;Rtcb;Rac1;Nfix;Blvra;Celf2;Sf3a1;Ppard;Daxx;Ipo4;Ccdc97;Lcp2;Cse1l;Il17ra;Pnkp;Apoe;Hbp1;Klf4;Ap1m1;Ppp5c;Hck;Keap1;Prkcsh;Ier3;Klc4;Man1a;Nfat5;Stat3;Psap;Ptpn6;Coro1c;Arhgef40;Chn2;Arid3b;Ly9;Cd244;Emr1;Ulk2;Grap;Dtx2;Prkacb;Cstb;Wdr1;Man2b1;Txn2;Hmox1;Por;Trim28;Mef2c;Snx6;Reep5;Nr2c2;Tpr;Dhx34;Inpp5k;Fblim1;Tep1;Tmbim1;Ggt5;Neurl1a;Aprt;Pknox1;B4galnt1;Sod2;M6pr;Tgfbr1;Bcl2l1;Zmiz1;Ctsd;Phax;Snrpb2;Ubc;Sertad1;Vav2;Ubp1;Nuak2;Rassf1;Slc3a2;Tmem86a;Ifi35;Rdm1;Psen2;Vac14;Gltp;Rps5;Etv5;Ptprs;Cacybp;Mertk;Dguok;Csf1;Lrrk1;Actn1;Sirt2;Abca1;Gadd45b;Zdhhc12;Cybb;Atf6b;Hivep2;Nat9;Hspa8;Cers2;Anp32e;Tab2;Rxra;Fcgr1;Ncf1;Cacna1d;Fli1;Slmo2;Slc25a5;Mapkapk2;Lamp2;Pacsin2;Plcg1;Sdc4;Plxdc1;Wsb1;Tha1;Pgs1;Myo1c;Pitpna;Mlx;Ppp2r5c;B4galt5;Med13l;Vmp1;Pmp22;Kansl1;C1qbp;Slc13a3;Kdm6b;Trpv2;Sparc;Ikzf1;Ndel1;Atp5g3;Rars;Arrb1;Ccl4;Ywhah;Fis1;Plod1;Ccl9;BC005537;Rab5c;H13;Ddx39b;Arid3a;Ccdc12;Pcmt1;Aig1;Tnfaip3;Reep3;Ccdc59;Ppp1r12a;Lims1;Rhobtb1;Dusp6;Psen1;Sgk1;Epb4.1l2;Tmcc3;Ccdc53;Srgn;Slc29a3;Vsir;Anapc16;ENSMUSG00000020133;Peli1;Dock2;Cnot2;Nav3;Ncln;Txnrd1;Appl2;Hint1;Stk10;Mdh1;Mgat1;Ppp2ca;Ltc4s;Sar1b;Rtn4;Xbp1;Galnt10;Prpsap2;Srebf1;Tspan13;Rock2;Snx13;Lpin1;Trappc12;Rsad2;Id2;Dnmt3a;Rab10;Itgb3;Adap2;Psmd12;Slc9a3r1;Hn1;Cluh;Trim47;Cpd;Abcc3;Per1;Ctc1;Pik3r5;Nfkbia;Sptlc2;Glrx5;Hif1a;Atp6v1d;Zfp36l1;Susd6;Gtpbp4;Zmynd11;Psmc1;Lgmn;Asb2;Gdi2;Numb;Fos;Tnfaip2;Eif5;Gcnt2;Edn1;Susd3;Eci2;Ly86;Sema4d;Gadd45g;Sptlc1;Ctsl;Rasa1;Golm1;Erap1;Lpcat1;Cd180;Gtf2h2;Hexb;Ap3b1;Scamp1;Erbb2ip;Mrps30;Slc4a7;Il6st;Comtd1;Camk2g;Slmap;Gpr65;Prkcd;Extl3;Atp8a2;Spata13;Lcp1;Bnip3l;Slc39a14;Rcbtb2;Itm2b;Fbxl3;Nipbl;Fyb;Dab2;Slc7a8;Oxct1;Slc22a17;Ngdn;Cct5;Tars;Trio;Fam134b;Pabpc1;Atp6v1c1;Rad21;Mtss1;Sla;Asap1;Fam49b;Syngr1;Csnk1e;Parvg;Myh9;Slc38a2;Nckap1l;Litaf;Zfp263;Fam86;Zbtb20;St3gal6;Tbc1d23;Tomm70a;Dnm1l;Lmln;Itgb5;Hcls1;Senp2;Samsn1;App;Adamts1;Ets2;Cd86;Rcan1;Runx1;Gart;Tmem50b;Ifnar2;Synj1;Sod1;Fmnl3;Dip2b;Atf1;Slc11a2;Prr13;Cdkn1a;Nus1;Rfc2;Denr;Ivns1abp;Vwa5a;Il15ra;Chd1;Tnfrsf12a;Hsp90ab1;Gtpbp2;Tfeb;Trem2;Fgd2;Pim1;Abcg1;Lpin2;Cyp4f13;Man2a1;Vapa;Ralbp1;Srsf7;Dusp1;Fkbp5;Map3k8;Mapre2;Myo1f;Brd2;Tmem173;Hspa9;Bin1;Aif1;Tnf;Riok3;Npc1;Diap1;Gabbr1;Tcerg1;Hsd17b4;Mbd2;Sec11c;Spire1;Snx24;Txnl1;Slc12a2;Psat1;Cyb5a;Fth1;Mrpl16;Lpxn;Ccdc86;Slc15a3;Zfand5;Ehd1;Lipa;Slc25a45;Chka;Pitpnm1;Pold4;Adrbk1;Lrp5;Smarca2;Tcf7l2;Hhex;Xpnpep1;Msr1;Anapc11;Stra13;Slc16a3;Pi4k2a;Scd2;Ldb1;Sat1;Banp;Cd63;Shmt2;Ifitm3;Irf7;Tmc6;Rptor;Cct8;Usp16;Shisa5;Pfkfb4;Sdc3;Nrp1;Pdgfa;Stag2;Hk3;Smad7;Sgk3;Cops5;Tram1;Creb1;Nrp2;Casp8;Ercc5;Il1r2;Stk17b;Stat1;Sema4c;Ptpn18;Dst;Pecr;Atic;Ncl;Ptma;Farsb;Gpr35;Lrrfip1;Hdac4;Cln8;Tnfrsf11a;Ccdc93;Actr3;Ubxn4;Rgs1;Rgs2;Nek7;Srgap2;Adipor1;Ppfia4;Tor1aip1;Glul;Rgl1;Tmem63a;Tagln2;Slamf9;Mpc2;Abl2;Eprs;Batf3;Atf6;Pip4k2a;Plxdc2;Nek6;Pfkfb3;Apbb1ip;Eng;Abl1;Tor1b;Crat;Psmd14;Notch1;Nacc2;Dpp7;Rbms1;Il1rn;Ube2e3;Ssrp1;Itga6;Slc12a6;Commd9;Hsd17b12;Gatm;Zfp106;Vps39;Ehd4;Pcna;Gpcpd1;Spred1;Dusp2;Il1b;Il1a;Rrbp1;Snx5;Sec23b;Cst3;Acss1;Fam110a;Kif3b;Tpd52;Zbp1;Gnas;Ptpn1;Nfatc2;1110008F13Rik;Pik3ca;Actl6a;Ncoa3;Pld1;Ufm1;Mbnl1;Nmd3;Ssr3;Ccnl1;Olfml3;Tpm3;Adar;Tlr2;Gar1;Aimp1;Papss1;Fubp1;Gpatch4;Dapp1;Ppp3ca;Cisd2;Wls;Asph;Pnisr;Ndufaf4;Gbp2;Ube2j1;Akirin2;Ugcg;Snx30;B4galt1;Bag1;Rad23b;Dcaf12;Cd72;Ptplad2;Usp24;Pde4b;Jak1;Nfia;Dyrk2;Slc2a1;Macf1;Ppt1;Fuca1;Pnrc2;Mob3c;Capzb;Eif4g3;Ptp4a2;Ak2;Map7d1;Csf3r;Fgr;Trnau1ap;Sf3a3;Padi2;Pgd;Slc2a5;Fam126a;Mad2l2;Dnajc2;Tprgl;Nadk;Gnb1;Lrpap1;Rnf4;Slc35f6;Tbc1d14;Commd8;Tec;Srd5a3;Aff1;Coq2;Hnrnpdl;Cds1;Ccng2;Rilpl1;Naaa;Slc15a4;Scarb2;Atp2a2;P2rx4;Kdm2b;Ncor2;Sppl3;Psmg3;Tes;Lfng;Tmem106b;Wipi2;Aimp2;Arpc1b;Phf14;Pomp;Cux1;Tsc22d4;Pon3;Exoc4;Tmem176b;Zc3hav1;Zyx;Clec5a;Hpgds;Mkrn1;Tbxas1;Pcyox1;Arhgap25;Cnbp;Foxp1;Arl8b;Ptms;Etv6;Dusp16;Atf7ip;Wbp11;Arhgdib;Ptpro;Strap;Ldhb;Camk1;Itpr2;Cd9;Vasp;Cyfip1;Siglece;Tjp1;Furin;Mef2a;Ctsc;Tyrobp;Nfkbib;Zfand6;Anapc15;Ipo5;Mvp;Fchsd2;Slco2b1;Il21r;Il4ra;Arhgap17;Pak1;Cd37;Stx4a;Rgs10;Mrpl17;Fam53b;Ctbp2;ENSMUSG00000030982;Cask;St5;Slc9a9;Msn;Ophn1;Efnb1;Phka2",
       highlighted_edges: new Set(),
       snapshot_pathways: [],
+      favourite_graph_dict: new Set(),
       snapshot_heatmaps: [],
       node_cluster_index: {},
       node_modul_index: new Set(),
@@ -62,6 +63,13 @@ export const store = createStore({
     assign_new_term_graph(state, value) {
       state.term_graph_dict.push(value)
     },
+    remove_term_graph(state, value) {
+      const index = state.term_graph_dict.indexOf(value)
+      state.term_graph_dict.splice(index,1)
+    },
+    assign_favourite_graph(state, value) {
+      state.favourite_graph_dict = value
+    },
     assign_highlightedSet(state, value) {
       state.highlighted_edges = value
     },

frontend/src/views/ProteinView.vue

@@ -99,7 +99,6 @@ export default {
 
     const term = this.$store.state.enrichment
     const all_terms = this.$store.state.current_enrichment_terms
-    console.log(all_terms)
     if(term != null){
       for (var idx in all_terms) {
         var node = all_terms[idx];

frontend/src/views/TermView.vue

@@ -127,20 +127,7 @@ export default {
 
   },
   activated() {
-
-    this.term_data = this.$store.state.term_graph_data
-    
-    const term_node = this.$store.state.active_node_enrichment
-    if(term_node != null){
-      console.log(this.term_data)
-      for (var idx in this.term_data.nodes) {
-        var node = this.term_data.nodes[idx];
-        if(node.attributes["Ensembl ID"] == term_node.id){
-          this.active_node = this.term_data.nodes[idx]
-        }
-      }
-      this.$store.commit('assign_active_enrichment_node', null)
-      }
+    this.change_graph()
   },
   mounted() {
     const com = this;
@@ -181,6 +168,27 @@ export default {
 
     const maingraph = new Set(com.term_data.subgraph)
     com.unconnected_nodes = com.term_data.nodes.filter(item => !maingraph.has(item.id));
+    
+    this.emitter.on("graphChanged", () => {
+      this.change_graph()
+    });
+
+  },
+  methods:{
+    change_graph(){
+      this.term_data = this.$store.state.term_graph_data
+    
+      const term_node = this.$store.state.active_node_enrichment
+      if(term_node != null){
+        for (var idx in this.term_data.nodes) {
+          var node = this.term_data.nodes[idx];
+          if(node.attributes["Ensembl ID"] == term_node.id){
+            this.active_node = this.term_data.nodes[idx]
+          }
+        }
+        this.$store.commit('assign_active_enrichment_node', null)
+        }
+    }
   }
 }
 </script>