NN-274 Keep the first generated color for layer based visualization

- Added a global dictionary for the terms
- Fixed a bug caused by watcher not recognized change in sets

frontend/src/components/enrichment/EnrichmentTool.vue

@@ -247,6 +247,7 @@
             },
             visualize_layers(){
                 var com = this;
+                console.log(com.favourite_tab)
                 com.$emit("active_termlayers_changed", com.favourite_tab);
             }
                         

frontend/src/components/pane/PaneSystem.vue

@@ -77,6 +77,7 @@ export default {
     },
     watch: {
         active_item(val){
+            console.log(this.active_item)
             this.active_tab = Object.keys(val)[0]
             if(val == null){
                 delete this.active_dict.val;
@@ -160,7 +161,6 @@ export default {
             }
             if(name == "layers"){
                 this.active_tab = "layers"
-                console.log(name, tab)
                 this.$emit('active_termlayers_changed', null)
                 this.$emit('active_combine_changed', {value: tab, name: name})
             }

frontend/src/components/visualization/MainVis.vue

@@ -64,6 +64,7 @@ export default {
       }, 
       label_active_dict: {},
       special_label: false,
+      colorPalette: {}
     }
   },
   watch: {
@@ -327,48 +328,45 @@ export default {
       sigma_instance.refresh();
 
     },
-    active_termlayers(list) {
+    active_termlayers: {
+      handler(newList) {
+        console.log(newList)
 
-      if(this.active_termlayers == null){
-        this.reset()
-        return
-      }
-
-      const colorPalette = {};
-
-      for (const terms of list){
-
-      colorPalette[terms.name] = randomColorRGB()
+        if (newList == null) {
+          this.reset();
+          return;
+        }
 
-      }
+        for (const terms of newList) {
+          if (!this.colorPalette[terms.name])
+            this.colorPalette[terms.name] = randomColorRGB();
+        }
 
-      sigma_instance.graph.nodes().forEach(n =>{
-        let count = 0;
-        n.color = "rgb(50,50,50)"
-        for (const terms of list) {
-          // Check if the element exists in the proteins list
-          if (terms.proteins.includes(n.attributes["Ensembl ID"])) {
-            count++;
-            n.color = colorPalette[terms.name]
-            if (count == list.size) {
-              n.color = "rgb(255,255,255)"
-              // Element exists in more than one list
-              break;
+        sigma_instance.graph.nodes().forEach((n) => {
+          let count = 0;
+          n.color = "rgb(50,50,50)";
+          for (const terms of newList) {
+            if (terms.proteins.includes(n.attributes["Ensembl ID"])) {
+              count++;
+              n.color = this.colorPalette[terms.name];
+              if (count === newList.size) {
+                n.color = "rgb(255,255,255)";
+                break;
+              }
             }
           }
-        }
-      });
-      sigma_instance.graph.edges().forEach(function (e) {
-          // Nodes
-          var source = sigma_instance.graph.getNodeFromIndex(e.source);
-          // var target = sigma_instance.graph.getNodeFromIndex(e.target);
+        });
 
-          e.color = source.color.replace(')', ', 0.5)').replace('rgb', 'rgba');
-              
-      });
+        sigma_instance.graph.edges().forEach((e) => {
+          var source = sigma_instance.graph.getNodeFromIndex(e.source);
+          e.color = source.color.replace(")", ", 0.5)").replace("rgb", "rgba");
+        });
 
-      sigma_instance.refresh()
+        sigma_instance.refresh();
+      },
+      deep: true,
     },
+    
     active_combine(val){
       if(val.name == "node") this.$emit('active_node_changed', val.value)
       if(val.name == "term") this.$emit('active_term_changed', val.value)