From 61ca87f2888733a91ad948e5b6d1cff741c5c343 Mon Sep 17 00:00:00 2001
From: TripZz <nico.greiner9@gmail.com>
Date: Thu, 21 Dec 2023 12:27:15 +0100
Subject: [PATCH] NN-422 Added the specified selection window to subsets and
 enrichments

TODO: EnrichmentLayers have no specified based selection
---
 .../pane/modules/subset/SubsetPane.vue        | 19 ++++++----
 .../src/components/toolbar/MainToolBar.vue    |  6 ++--
 .../toolbar/modules/SelectionList.vue         | 36 +++++++++++++------
 .../src/components/visualization/MainVis.vue  |  7 ++--
 frontend/src/views/ProteinView.vue            |  2 ++
 5 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/pane/modules/subset/SubsetPane.vue b/frontend/src/components/pane/modules/subset/SubsetPane.vue
index 21e9894b..d7672e3f 100644
--- a/frontend/src/components/pane/modules/subset/SubsetPane.vue
+++ b/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
         },
diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/frontend/src/components/toolbar/MainToolBar.vue
index 7fc9a00d..06f21df8 100644
--- a/frontend/src/components/toolbar/MainToolBar.vue
+++ b/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,
diff --git a/frontend/src/components/toolbar/modules/SelectionList.vue b/frontend/src/components/toolbar/modules/SelectionList.vue
index 597d40cc..27091a31 100644
--- a/frontend/src/components/toolbar/modules/SelectionList.vue
+++ b/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"));
         
     },
diff --git a/frontend/src/components/visualization/MainVis.vue b/frontend/src/components/visualization/MainVis.vue
index 76725d2e..c142731e 100644
--- a/frontend/src/components/visualization/MainVis.vue
+++ b/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()
     }
diff --git a/frontend/src/views/ProteinView.vue b/frontend/src/views/ProteinView.vue
index 1f2b49b4..4b72a45e 100644
--- a/frontend/src/views/ProteinView.vue
+++ b/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'