NN-402 Added a function to window menu for exporting proteins as csv

BackofenLab · Nov 30, 2023 · d141c5f · d141c5f
1 parent a41d57b
commit d141c5f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/frontend/src/components/toolbar/MainToolBar.vue
@@ -24,6 +24,7 @@
         <MenuWindow v-show="tools_active"
         v-on:mouseover="tools_active=true"
         v-on:mouseleave="tools_active=false"
+        :gephi_data = 'gephi_data'
         :tools_active = 'tools_active'
         :mode = 'mode'
         @tools_active_changed = 'tools_active = $event'

diff --git a/frontend/src/components/toolbar/modules/ExportProteins.vue b/frontend/src/components/toolbar/modules/ExportProteins.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="tool-item">
+        <span v-on:click="export_proteins">Export proteins as .csv</span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ExportProteins',
+    props:['gephi_data'],
+    data() {
+        return {
+        }
+    },
+    methods: {
+        export_proteins() {
+            var com = this;
+
+            // export proteins as csv
+            var csvTermsData = com.gephi_data.nodes;
+
+            var terms_csv = 'name\tensembl\tcluster\tdescription\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 += '\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
@@ -39,13 +39,17 @@
                 ></ExportScreen>
                 <ExportGraph v-if="mode=='protein'"
                 ></ExportGraph>
+                <ExportProteins v-if="mode=='protein'"
+                :gephi_data = 'gephi_data'
+                ></ExportProteins>
             </div>
         </div>
     </div>
 </template>
 
 <script>
 
+import ExportProteins from '@/components/toolbar/modules/ExportProteins.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'
@@ -58,7 +62,7 @@ import ModuleSelection from '@/components/toolbar/modules/ModuleSelection.vue'
 
 export default {
     name: 'MenuWindow',
-    props: ['tools_active','mode'],
+    props: ['tools_active','mode','gephi_data'],
     emits:['tools_active_changed'],
     components: {
         ExportScreen,
@@ -69,7 +73,8 @@ export default {
         ConnectedGraph,
         ToggleLabel,
         ModuleSelection,
-        FDRValue
+        FDRValue,
+        ExportProteins
 
     },
     data() {