NN-420 Added the favourite option to the pathway pane

BackofenLab · Dec 16, 2023 · a0c3b4d · a0c3b4d
1 parent 6f158e8
commit a0c3b4d
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 2 deletions.
diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
@@ -86,6 +86,11 @@ export default {
             selectedIndex: -1
         }
     },
+    mounted(){
+        this.emitter.on("bookmarkPathway", (value) => {
+            this.add_enrichment(value)
+        });
+    },
     watch:{
         terms() {
             this.filter_options(this.terms)

diff --git a/frontend/src/components/enrichment/PathwayMenu.vue b/frontend/src/components/enrichment/PathwayMenu.vue
@@ -51,6 +51,14 @@ export default {
             filtered_terms: []
         }
     },
+    watch:{
+        favourite_pathways: {
+            handler(newList){
+                this.$store.commit('assign_favourite_enrichment', newList)
+            },
+            deep: true
+        },
+    },
     mounted() {
         var com = this
         com.generatePathways(com.gephi_data.nodes[0].species, com.gephi_data.nodes.map(node => node.attributes["Name"]))

diff --git a/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue b/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
@@ -16,7 +16,8 @@
             </div>
             <div id="layer-connections" class="subsection">
                 <div class="subsection-header">
-                    <span>contained proteins</span>
+                    <span>contained nodes</span>
+                    <img src="@/assets/pane/copy.png" v-on:click="copyclipboard()">
                 </div>
                 <div class="subsection-main colortype">
                     <LayerProteins
@@ -83,6 +84,11 @@ export default {
         },
         deep: true,
     },
+    methods: {
+        copyclipboard(){
+            this.emitter.emit("copyLayerConnections");
+        },
+    }
 
     },
     

diff --git a/frontend/src/components/pane/modules/layer/LayerProteins.vue b/frontend/src/components/pane/modules/layer/LayerProteins.vue
@@ -81,6 +81,11 @@ export default {
             for(var link of com.intersectionSet) textToCopy.push(link.label);
             navigator.clipboard.writeText(textToCopy.join("\n"));
         },
+    },
+    mounted(){
+        this.emitter.on("copyLayerConnections", () => {
+            this.copyclipboard()
+        });
     }
 }
 

diff --git a/frontend/src/components/pane/modules/node/NodePane.vue b/frontend/src/components/pane/modules/node/NodePane.vue
@@ -143,6 +143,7 @@ export default {
         transform: translate(50%);
         font-family: 'ABeeZee', sans-serif;
         font-size: 0.9vw;
+        padding: 1%;
     }
     .nodeattributes{
         position: absolute;

diff --git a/frontend/src/components/pane/modules/pathways/TermPane.vue b/frontend/src/components/pane/modules/pathways/TermPane.vue
@@ -1,6 +1,11 @@
 <template>
     <div class="text" v-show="active_term !== null">
         <div id="colorbar-pathway">
+            <div class="favourite-pane-symbol">
+                <label class="custom-checkbox">
+                    <div class="checkbox-image" v-if="favourite_pathways != null" v-on:click="bookmark_pathway()" :class="{ checked: favourite_pathways.has(active_term)}" ></div>
+                </label>
+            </div>
             <div class='colorbar-text' v-if="active_term !== null">
                 {{active_term.name}}
             </div>
@@ -55,7 +60,8 @@ export default {
             term_item: {
                 value: null,
                 imageSrc: require('@/assets/pane/enrichment-icon.png')
-            }
+            },
+            favourite_pathways: this.$store.state.favourite_enrichments
         }
     },
     watch: {
@@ -65,6 +71,11 @@ export default {
                 return;
             }
 
+
+            this.favourite_pathways = this.$store.state.favourite_enrichments
+
+            console.log(this.favourite_pathways)
+
             com.term_item.value = com.active_term
             com.$emit('active_item_changed',{ "Pathway": com.term_item })
 
@@ -87,6 +98,10 @@ export default {
         select_node(value) {
             this.emitter.emit("searchNode", {node: value, mode: this.mode});
         },
+        bookmark_pathway(){
+            this.emitter.emit("bookmarkPathway", this.active_term);
+            this.favourite_pathways = this.$store.state.favourite_enrichments
+        }
     }
 }
 </script>
@@ -105,10 +120,13 @@ export default {
         transform: translate(13.5%);
         font-family: 'ABeeZee', sans-serif;
         font-size: 0.9vw;
+        background-color: darkgreen;
+        border-radius: 5px 0 0 5px;
     }
     .colorbar-text {
         width: 100%;
         background-color: darkgreen;
+        padding: 2%;
         border-radius: 5px 0 0 5px;
     }
     .colorbar-img {
@@ -131,4 +149,24 @@ export default {
         height: 40%;
     }
 
+    .favourite-pane-symbol{
+        height: 100%;
+        width: 10%;
+        left: 2%;
+        justify-content: center;
+        text-align: center;
+        position: relative;
+        display: flex;
+        
+    }
+    .favourite-pane-symbol .custom-checkbox {
+        position: relative;
+        display: inline-block;
+        cursor: default;
+    }
+
+    .checked {
+        background-color: #ffa500;
+    }
+
 </style>
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -17,6 +17,7 @@ export const store = createStore({
       highlighted_edges: new Set(),
       snapshot_pathways: [],
       favourite_graph_dict: new Set(),
+      favourite_enrichments: null,
       snapshot_heatmaps: [],
       node_cluster_index: {},
       node_modul_index: new Set(),
@@ -70,6 +71,9 @@ export const store = createStore({
     assign_favourite_graph(state, value) {
       state.favourite_graph_dict = value
     },
+    assign_favourite_enrichment(state, value) {
+      state.favourite_enrichments = value
+    },
     assign_highlightedSet(state, value) {
       state.highlighted_edges = value
     },