From 3297ff0762887923c7120c7ed789414ddfda9243 Mon Sep 17 00:00:00 2001
From: mveril <mika.veril@wanadoo.fr>
Date: Mon, 7 Dec 2020 16:46:13 +0100
Subject: [PATCH] Allow to export table to csv (#9)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix broken link

* Fix bug in indexDB

* Fix sourceFile  for each geometry

* Fix tag stat_table

* First implementation of export table to csv

* Use custom data-csvtext propery to avoid warning emoji

Co-authored-by: Mickaël Véril <mveril@irsamc.ups-tlse.fr>
---
 content/dataset.html    | 20 ++++++++++++++-
 static/js/tableToCSV.js | 56 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 static/js/tableToCSV.js

diff --git a/content/dataset.html b/content/dataset.html
index fae5d552..e20b5271 100644
--- a/content/dataset.html
+++ b/content/dataset.html
@@ -30,6 +30,7 @@ draft: false
 <script src="/js/Geometry.js"></script>
 <script src="/js/GeometriesLoader.js"></script>
 <script src="/js/GeometryParseMetadataExtension.js"></script>
+<script src="/js/tableToCSV.js"></script>
 <script>
   function adjustSticky() {
     const height = $("nav").height()
@@ -581,6 +582,7 @@ draft: false
           $("<h2/>").append($("<a>",{href:publiDat.URL,target:"_blank"}).text(publiDat.title)).appendTo(div)
         }
         var table = $("<table/>").addClass("datatable").appendTo(div)
+        $(table).before($("#stat_table").prevAll("button:first").clone())
         var head = $("<tr/>")
         $("<thead/>").addClass("sticky").append(head).appendTo(table)
         var tbody = $("<tbody/>").appendTo(table)
@@ -650,7 +652,7 @@ draft: false
               if (kv !== undefined) {
                 const [val, unsafe] = kv[1]
                 if (unsafe) {
-                  td.append($("<span/>", { title: "unsafe value", role: "img", "aria-label": "Warning" }).addClass("emoji").text('⚠'))
+                  td.append($("<span/>", { title: "unsafe value", role: "img", "aria-label": "Warning", "data-csvtext":"(Unsafe)"}).addClass("emoji").text('⚠'))
                 }
                 if (unsafe && !filterParams.unsafe) {
                   td.append($("<s/>").append(val.toString()))
@@ -693,11 +695,26 @@ draft: false
     await reloadContent();
   }
 
+  function exportTableToCSV(table,title = null,allowTitleOverride = false) {
+    const tableCaption = $(table).find('caption').text()
+    if (tableCaption !== "" && (title === null || allowTitleOverride)) {
+      title = tableCaption
+    }
+    const csv = tableToCSV(table)
+    const blob = new Blob([csv],{type:"text/csv"})
+    saveAs(blob,`${title}.csv`)
+  }
+  function OnExportTable(event) {
+    const table=$(event.target).nextAll('table:first')
+    exportTableToCSV(table,"table")
+  }
+
   function refreshExportGeoms() {
     const vals=$("#mol_select").val()
     const disable = vals === null || vals.length===0
     $("#btn_export_geoms").prop("disabled",disable)
   }
+  
   async function moleculeSelectionChanged(event) {
     refreshExportGeoms()
     await reloadNextSelect(event)
@@ -871,6 +888,7 @@ draft: false
 <section id="data">
 </section>
 <section>
+  <button onclick="OnExportTable(event)">Export as CSV</button>
   <table id="stat_table" class="datatable">
     <thead class="sticky">
       <th scope="col">Method</th>
diff --git a/static/js/tableToCSV.js b/static/js/tableToCSV.js
new file mode 100644
index 00000000..1824d452
--- /dev/null
+++ b/static/js/tableToCSV.js
@@ -0,0 +1,56 @@
+function tableToCSV(table) {
+  var csv = [];
+  var caption = $(table).find('caption').text()
+  if (caption) {
+    csv.push([`# ${caption}`])
+  }
+  const csvtextKey="csvtext"
+  for (const row of Array.from(table[0].rows)) {
+    const rowArray=[]
+    for (const cell of Array.from(row.cells)) {
+      var copycell=$(cell).clone()
+      if (MathJax) {
+        for (const jax of MathJax.Hub.getAllJax(cell)) {
+          const sourceId = jax.SourceElement().id
+          const txt = jax.originalText
+          const frame = $(copycell).find(`#${sourceId}-Frame`)
+          $(frame).remove()
+          const script = $(copycell).find(`#${sourceId}`)
+          $(script).replaceWith($("<span/>").text(`$${txt}$`))
+        }
+      }
+      for (const replace of Array.from(copycell.find(`[data-${csvtextKey}]`))) {
+        $(replace).replaceWith($("<span/>").text($(replace).data(csvtextKey))) 
+      }
+      var text = copycell.text()
+      var text = copycell.text()
+      if (text !== "" && !checkNumber(text)) {
+        text = text.split('\u2011').join('-')
+        text = `"${text}"`
+      }
+      rowArray.push(text)
+    }
+    csv.push(rowArray)
+  }
+  for (const row of Array.from(table[0].rows)) {
+    for (const cell of Array.from(row.cells)) {
+      const rowspan = cell.rowSpan
+      const columnspan = cell.colSpan
+      const colindex = cell.cellIndex
+      const rowIndex = cell.parentNode.rowIndex
+      if (columnspan>1) {
+        for (let i = 1; i < rowspan; i++) {
+          csv[rowIndex].splice(colindex,0,"")
+        }        
+      }
+      if (rowspan>1) {
+        for (let i = 0; i < columnspan; i++) {
+          for (let j = 1; j < rowspan; j++) {
+            csv[rowIndex+j].splice(colindex,0,"")
+          }
+        }
+      }
+    }
+  }
+  return csv.map(row=>row.join(",")).join("\n")
+}
\ No newline at end of file