NN-425 Add function to export edges in gene graph

BackofenLab · Jan 1, 2024 · 848c107 · 848c107
1 parent 7ab2385
commit 848c107
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 3 deletions.
diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/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,

diff --git a/frontend/src/components/toolbar/modules/ExportEdges.vue b/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>
diff --git a/frontend/src/components/toolbar/windows/MenuWindow.vue b/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() {

diff --git a/frontend/src/views/ProteinView.vue b/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];