Merge changes from 'origin/master' into workMalek

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)

frontend/src/components/enrichment/PathwayMenu.vue

@@ -51,6 +51,14 @@ export default {
             filtered_terms: []
         }
     },
+    watch:{
+        favourite_pathways: {
+            handler(newList){
+                this.emitter.emit('updateFavouriteList', newList)
+            },
+            deep: true
+        },
+    },
     mounted() {
         var com = this
         com.generatePathways(com.gephi_data.nodes[0].species, com.gephi_data.nodes.map(node => node.attributes["Name"]))

frontend/src/components/home/InputScreen.vue

@@ -25,6 +25,20 @@
                   <textarea ref="protein_list_input" id="protein-list" v-model="raw_text" rows="10" cols="30" autofocus>
                   </textarea>
                 </div>
+                <h4>Edge score:</h4>
+                    <input
+                        id="scoregraph"
+                        type="range"
+                        v-bind:min="threshold.min" v-bind:max="threshold.max" v-bind:step="threshold.step"
+                        v-model="threshold.value"
+                        v-on:input="valueChanged('scoregraph')"
+                    />
+                    <input
+                        type="number"
+                        v-bind:min="threshold.min" v-bind:max="threshold.max" v-bind:step="threshold.step"
+                        v-model="threshold.value"
+                        v-on:input="valueChanged('scoregraph')"
+                    />
                 <button id="submit-btn" @click="submit()" :class="{'loading': isAddClass}">
                   <span class="button__text" onClick="this.disabled=true;">Submit</span>
                 </button>
@@ -49,16 +63,13 @@ export default {
         subgraph: "api/subgraph/proteins",
       },
       threshold: {
-        value: 0.7,
-        min: 0.4,
-        max: 1.0,
-        step: 0.001,
+        value: 0,
+        min: 0,
+        max: 0.9999,
+        step: 0.01,
       },
       edge_thick: {
         value: 0.2,
-        min: 0,
-        max: 1.0,
-        step: 0.1,
       },
       raw_text: null,
       selected_species: "",
@@ -131,7 +142,12 @@ export default {
       }
 
       return randomElements;
-    }
+    },
+    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}%)`;
+        }
   }
 }
 
@@ -156,5 +172,34 @@ export default {
 
 }
 
+
+.input-form-data input[type=number] { 
+border: none;
+border-radius: 5px;
+text-align: center;
+font-family: 'ABeeZee', sans-serif;
+background: none;
+-moz-appearance: textfield;
+-webkit-appearance: textfield;
+appearance: textfield;
+}
+
+.input-form-data input[type=range]{
+	appearance: none;
+	outline: none;
+    width: 10vw;
+    height: 0.3vw;
+	border-radius: 5px;
+	background-color: #ccc;
+}
+.input-form-data input[type=range]::-webkit-slider-thumb {
+    background: #fafafa;
+    appearance: none;
+    box-shadow: 1px 2px 26px 1px #bdbdbd;
+    width: 0.8vw;
+    height: 0.8vw;
+    border-radius: 50%;
+}
+
 </style>
 

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");
+        },
+    }
 
     },
     

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()
+        });
     }
 }
 

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;

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-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: new Set()
         }
     },
     watch: {
@@ -87,6 +93,16 @@ 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
+        }
+    },
+    mounted(){
+        this.emitter.on("updateFavouriteList", (value) => {
+            this.favourite_pathways = value
+        });
+
     }
 }
 </script>
@@ -105,10 +121,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 +150,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>

frontend/src/components/toolbar/MainToolBar.vue

@@ -25,6 +25,7 @@
         v-on:mouseover="tools_active=true"
         v-on:mouseleave="tools_active=false"
         :gephi_data = 'gephi_data'
+        :ensembl_name_index = 'ensembl_name_index'
         :tools_active = 'tools_active'
         :mode = 'mode'
         @tools_active_changed = 'tools_active = $event'
@@ -51,7 +52,7 @@ import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 export default {
     name: 'MainToolBar',
-    props: ['gephi_data', 'term_data'],
+    props: ['gephi_data', 'term_data','ensembl_name_index'],
     components: {
         MenuWindow,
         ProteinList,

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

@@ -0,0 +1,39 @@
+<template>
+    <div class="tool-item">
+        <span v-on:click="export_edges">Export edges as .csv</span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ExportEdges',
+    props:['gephi_data','ensembl_name_index'],
+    data() {
+        return {
+        }
+    },
+    methods: {
+        export_edges() {
+            var com = this;
+
+            // export proteins as csv
+            var csvTermsData = com.gephi_data.edges;
+            var terms_csv = 'source\tsrc_ensembl\ttarget\ttrg_ensembl\tscore\n';
+
+            csvTermsData.forEach(function(row) {
+                terms_csv += com.ensembl_name_index[row.source] + '\t' + row.source + '\t"'  + com.ensembl_name_index[row.target] + '"\t"' + row.target + '"\t"' + row.attributes["score"] + '"';
+                terms_csv += '\n';   
+            });
+
+
+            //Create html element to hidden download csv file
+            var hiddenElement = document.createElement('a');
+            hiddenElement.target = '_blank';
+            hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(terms_csv);
+            hiddenElement.download = 'Proteins.csv';  
+            hiddenElement.click();
+        },
+    }
+}
+</script>

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

@@ -19,11 +19,10 @@ export default {
 
             // export proteins as csv
             var csvTermsData = com.gephi_data.nodes;
-
-            var terms_csv = 'name\tensembl\tcluster\tdescription\n';
+            var terms_csv = 'name\tensembl\tcluster\tdescription\tBetweenness Centrality\tPageRank\n';
 
             csvTermsData.forEach(function(row) {
-                terms_csv += row.attributes['Name'] + '\t' + row.attributes['Ensembl ID'] + '\t"'  + row.attributes['Modularity Class'] + '"\t"' + row.attributes['Description'] +'"';
+                terms_csv += row.attributes['Name'] + '\t' + row.attributes['Ensembl ID'] + '\t"'  + row.attributes['Modularity Class'] + '"\t"' + row.attributes['Description'] + '"\t"' + row.attributes['Betweenness Centrality'] + '"\t"' + row.attributes['PageRank'] + '"';
                 terms_csv += '\n';   
             });
 

frontend/src/components/toolbar/windows/MenuWindow.vue

@@ -42,6 +42,10 @@
                 <ExportProteins v-if="mode=='protein'"
                 :gephi_data = 'gephi_data'
                 ></ExportProteins>
+                <ExportEdges v-if="mode=='protein'"
+                :gephi_data = 'gephi_data'
+                :ensembl_name_index = 'ensembl_name_index'
+                ></ExportEdges>
             </div>
         </div>
     </div>
@@ -50,6 +54,7 @@
 <script>
 
 import ExportProteins from '@/components/toolbar/modules/ExportProteins.vue'
+import ExportEdges from '@/components/toolbar/modules/ExportEdges.vue'
 import ExportScreen from '@/components/toolbar/modules/ExportScreen.vue'
 import DEValue from '@/components/toolbar/modules/DEValue.vue'
 import FDRValue from '@/components/toolbar/modules/FDRValue.vue'
@@ -62,7 +67,7 @@ import ModuleSelection from '@/components/toolbar/modules/ModuleSelection.vue'
 
 export default {
     name: 'MenuWindow',
-    props: ['tools_active','mode','gephi_data'],
+    props: ['tools_active','mode','gephi_data','ensembl_name_index'],
     emits:['tools_active_changed'],
     components: {
         ExportScreen,
@@ -74,7 +79,8 @@ export default {
         ToggleLabel,
         ModuleSelection,
         FDRValue,
-        ExportProteins
+        ExportProteins,
+        ExportEdges
 
     },
     data() {

frontend/src/views/ProteinView.vue

@@ -31,6 +31,7 @@
         <div class="header-menu">
         <MainToolBar
           :gephi_data='gephi_data'
+          :ensembl_name_index='ensembl_name_index'
         ></MainToolBar>
         <NetworkValues
           :data='gephi_data'
@@ -93,6 +94,7 @@ export default {
       unconnected_nodes: null,
       node_modul_index: null,
       node_cluster_index: null,
+      ensembl_name_index: null,
     }
   },
   activated() {
@@ -112,6 +114,11 @@ export default {
   mounted() {
     var com = this;
 
+    com.ensembl_name_index = {};
+    for (var ele of com.gephi_data.nodes) {
+      com.ensembl_name_index[ele.attributes["Ensembl ID"]] = ele.attributes["Name"]
+    }
+
     com.node_color_index = {};
     for (var idx in com.gephi_data.nodes) {
       var node = com.gephi_data.nodes[idx];