NN-422 Added the specified selection window to subsets and enrichments

TODO: EnrichmentLayers have no specified based selection

frontend/src/components/pane/modules/subset/SubsetPane.vue

@@ -17,7 +17,7 @@
                 </div>
                 <div class="subsection-main colortype">
                     <SubsetConnections
-                    :active_subset='active_subset' 
+                    :active_subset='subset' 
                     ></SubsetConnections>
                 </div>
             </div>
@@ -49,6 +49,7 @@ export default {
     },
     data() {
         return {
+            subset: null,
             hide: true,
             expand_proteins: false,
             subset_item: {
@@ -73,16 +74,20 @@ export default {
                 return;
             }
 
-            com.subset_item.value = com.active_subset
+            com.subset = com.active_subset.selection ? com.active_subset.genes: com.active_subset
+            // if (com.active_subset.selection) com.subset = com.active_subset.genes
+            // else com.subset = com.active_subset
+
+            com.subset_item.value = com.subset
 
             com.contained_edges = [];
             com.export_edges = [];
             com.subset_ids = [];
 
             var id_dict = {};
-            for (var idX in com.active_subset){
-                id_dict[com.active_subset[idX].id] = com.active_subset[idX].label;
-                com.subset_ids.push(com.active_subset[idX].id);
+            for (var idX in com.subset){
+                id_dict[com.subset[idX].id] = com.subset[idX].label;
+                com.subset_ids.push(com.subset[idX].id);
             }
             var subset_proteins = new Set(com.subset_ids);
             for (var idx in com.gephi_data.edges) {
@@ -112,13 +117,13 @@ export default {
             var com = this;
 
             var textToCopy = [];
-            for(var link of com.active_subset) textToCopy.push(link.label);
+            for(var link of com.subset) textToCopy.push(link.label);
             navigator.clipboard.writeText(textToCopy.join("\n"));
         },
         show_layer(){
             var com = this;
 
-            var subset_check = this.hide ? com.active_subset.map(node => node.attributes["Name"]) : null
+            var subset_check = this.hide ? com.subset.map(node => node.attributes["Name"]) : null
             this.emitter.emit("hideSubset", {subset: subset_check, mode: this.mode});
             com.hide = !com.hide
         },

frontend/src/components/toolbar/MainToolBar.vue

@@ -29,8 +29,10 @@
         :mode = 'mode'
         @tools_active_changed = 'tools_active = $event'
         ></MenuWindow>
-        <SelectionList v-show="selection_active"
+        <SelectionList v-if="selection_active"
         :data = 'gephi_data'
+        :active_subset = 'active_subset'
+        :active_term = 'active_term'
         :mode = 'mode'
         @selection_active_changed = 'selection_active = $event'>
         </SelectionList>
@@ -51,7 +53,7 @@ import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 export default {
     name: 'MainToolBar',
-    props: ['gephi_data', 'term_data'],
+    props: ['gephi_data', 'term_data','active_subset', 'active_term'],
     components: {
         MenuWindow,
         ProteinList,

frontend/src/components/toolbar/modules/SelectionList.vue

@@ -90,11 +90,12 @@
 <script>
 export default {
     name: 'SelectionList',
-    props: ['data','mode'],
+    props: ['data','mode','active_subset', 'active_term'],
     emits: ['selection_active_changed'],
     data() {
         return {
             once: true,
+            search_data: null,
 			degree_boundary: {
 				value: 0,
 				min: 0,
@@ -121,6 +122,14 @@ export default {
 			},
         }
     },
+    watch: {
+        active_subset(){
+            if(!this.active_subset.selection) this.unactive_proteinlist()
+        },
+        active_term(){
+            this.unactive_proteinlist()
+        }
+    },
     methods: {
         dragElement(elmnt) {
 
@@ -244,38 +253,45 @@ export default {
         searchSubset() {
             var com = this
 
-            var dataForm = com.data;
+            var dataForm = com.search_data;
+            console.log(dataForm)
             // filter hubs
 			var finalNodes = [];
 			var nodes = [];
 			// degree filtering
-			for (var idz in dataForm.nodes){
-                console.log(dataForm.nodes[idz])
-				if(parseInt(dataForm.nodes[idz].attributes["Degree"]) >= this.degree_boundary.value &&
-                   parseFloat(dataForm.nodes[idz].attributes["PageRank"]) >= this.pr_boundary.value &&
-                   parseFloat(dataForm.nodes[idz].attributes["Betweenness Centrality"]) >= this.bc_boundary.value
+			for (var element of dataForm){
+				if(parseInt(element.attributes["Degree"]) >= this.degree_boundary.value &&
+                   parseFloat(element.attributes["PageRank"]) >= this.pr_boundary.value &&
+                   parseFloat(element.attributes["Betweenness Centrality"]) >= this.bc_boundary.value
                    ){
                     if(com.mode=='term'){
-                        if(Math.abs(Math.log10(dataForm.nodes[idz].attributes["FDR"])) >= com.padj_boundary.value) nodes.push(dataForm.nodes[idz])
+                        if(Math.abs(Math.log10(element.attributes["FDR"])) >= com.padj_boundary.value) nodes.push(element)
                     }
                     else{
-                        nodes.push(dataForm.nodes[idz])
+                        nodes.push(element)
                     }
 				}
 			}
 			finalNodes = nodes;
-			this.emitter.emit("searchSubset", {subset:finalNodes, mode:this.mode});
+			this.emitter.emit("searchSubset", {subset:{selection: true, genes:finalNodes}, mode:this.mode});
         },
         unactive_proteinlist(){
             this.$emit("selection_active_changed", false);
+            this.emitter.emit("searchSubset", {subset:this.search_data, mode:this.mode});
         },
         valueChanged(id){
             var target = document.getElementById(id)
             let a = (target.value / target.max)* 100;
             target.style.background = `linear-gradient(to right,#0A0A1A,#0A0A1A ${a}%,#ccc ${a}%)`;
+        },
+        term_genes(list){
+            var term_genes = new Set(list)
+            var termlist = this.data.nodes.filter(element => term_genes.has(element.attributes["Name"]))
+            return termlist
         }
 	},
     mounted(){
+        this.search_data = this.active_term ? this.term_genes(this.active_term.symbols) : (this.active_subset ? this.active_subset : this.data.nodes);
         this.dragElement(document.getElementById("selection_highlight"));
         
     },

frontend/src/components/visualization/MainVis.vue

@@ -240,16 +240,16 @@ export default {
       var com = this
       var proteins = null;
 
+      
       if (subset == null) {
         com.reset();
         this.$store.commit('assign_active_subset', null)
         return
       }else {
+        if(subset.selection) subset = subset.genes
         proteins = new Set(subset.map(node => node.attributes["Ensembl ID"]));
         this.$store.commit('assign_active_subset', subset.map(node => node.attributes["Name"]))
       }
-      
-
 
       const highlighted_edges = new Set()
 
@@ -945,7 +945,8 @@ export default {
 
     var nodeSet = []
     if(this.active_subset) {
-      nodeSet.push(...com.active_subset)
+      if(this.active_subset.selection) nodeSet.push(...com.active_subset.genes)
+      else nodeSet.push(...com.active_subset)
     }else {
       com.clusterDict = new Set()
     }

frontend/src/views/ProteinView.vue

@@ -31,6 +31,8 @@
         <div class="header-menu">
         <MainToolBar
           :gephi_data='gephi_data'
+          :active_subset='active_subset'
+          :active_term='active_term'
         ></MainToolBar>
         <NetworkValues
           :data='gephi_data'