Allow to export table to csv (#9)

* 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

@@ -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>

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