Allow to export geometries (#6)

* Fix broken link

* Fix bug in indexDB

* Fix sourceFile  for each geometry

* Add function to export geometry as xyz

* Fix bug when printing z

* Fix align with website structures

* Add Export geometries fonctionality

* Better class name for select buttons

* Fix after =

* Enable export button only when it makes sense

Co-authored-by: Mickaël Véril <mveril@irsamc.ups-tlse.fr>

content/dataset.html

@@ -204,6 +204,7 @@ draft: false
     processingIndicator.isActive = false
     reloadSizeSelector()
     reloadSelect("sets")
+    refreshExportGeoms()
   }
   async function clearSelect(BeforeName = null) {
     var selects = ((BeforeName == null) ? getAllSelect() : getAllSelectAfter(BeforeName, true))
@@ -691,6 +692,41 @@ draft: false
     }
     await reloadContent();
   }
+
+  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)
+  }
+
+  async function exportGeoms() {
+    var mols = new Set($("#mol_select").val())
+    
+    if (mols.size!==0) {
+      const zip = JSZip();
+      const geomDic=new Map()
+      for (const geom of window.geoms) {
+        const molecule =geom.parseMetadata().molecule
+        if (mols.has(molecule)) {
+          if (!geomDic.has(molecule)) {
+            geomDic.set(molecule,[])
+          }
+          geomDic.get(molecule).push(geom.toXYZ())
+        }
+      }
+      for (const [molecule,geometries] of geomDic) {
+        const xyz=geometries.join("\n\n")
+        var blob=new Blob([xyz],{type: 'chemical/x-xyz'})
+        zip.file(`${mhchemCE.extract(molecule).toLowerCase().replace(" ","_")}.xyz`,blob)
+      }
+      const zipFile = await zip.generateAsync({type: 'blob'})
+      saveAs(zipFile, "molecules.zip")
+    }
+  }
 </script>
 {{< getDataFilesName >}}
 <noscript>
@@ -732,23 +768,24 @@ draft: false
       </p>
       <div style="display: inline-block;">
         <label for="DOI_select" class="required">Set</label>
-        <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
+        <button class="selectButton" type="button" onclick="selectSelectAll_click(event)">Select all</button>
         <select multiple id="DOI_select" required name="sets" onchange="reloadNextSelect(event)"></select>
       </div>
       <div style="display:inline-block">
         <label for="mol_select" class="required">Molecule</label>
-        <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
+        <button class="selectButton" type="button" onclick="selectSelectAll_click(event)">Select all</button>
-        <select multiple id="mol_select" required name="molecule" onchange="reloadNextSelect(event)"></select>
+        <select multiple id="mol_select" required name="molecule" onchange="moleculeSelectionChanged(event)"></select>
+        <button id="btn_export_geoms" class="selectButton" type="button" disabled onclick="exportGeoms()">Export geometries</button>
       </div>
       <br />
       <div style="display: inline-block;">
         <label for="method_select" class="required">Method</label>
-        <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
+        <button class="selectButton" type="button" onclick="selectSelectAll_click(event)">Select all</button>
         <select multiple id="method_select" required name="method" onchange="reloadNextSelect(event)"></select>
       </div>
       <div style="display: inline-block;">
         <label for="basis_select" class="required">Basis set</label>
-        <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
+        <button class="selectButton" type="button" onclick="selectSelectAll_click(event)">Select all</button>
         <select multiple id="basis_select" required name="basis" onchange="reloadNextSelect(event)"></select>
       </div>
     </fieldset>

content/view.html

@@ -5,7 +5,6 @@ draft: false
 ---
 <script src="/js/getFullDataPath.js" type="text/javascript"></script>
 <script src="/js/getTextFromFile.js" type="text/javascript"></script>
-<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
 <script src="/js/Base64ToBlob.js" type="text/javascript"></script>
 <script>
 

layouts/partials/head_custom.html

@@ -21,4 +21,6 @@ MathJax.Hub.Config({
 <script src="/js/pubUtils.js"></script>
 <script src="https://unpkg.com/simple-statistics@7.0.2/dist/simple-statistics.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bowser@2.5.3/es5.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jszip@3.5.0/dist/jszip.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

static/css/form.css

@@ -8,7 +8,7 @@ ul.nestedCbList {
   list-style-type: none;
   padding-left: 1em;
 }
-form button.SelectAll {
+form button.selectButton {
   display: block;
 }
 form fieldset.main {

static/js/Geometry.js

@@ -3,6 +3,21 @@ class Geometry {
     this.molecule = molecule
     this.comment = comment
   }
+
+  toXYZ() {
+    var lines =[]
+    lines.push(this.molecule.atoms.length)
+    lines.push(this.comment)
+    for (const a of this.molecule.atoms) {
+      var line = a.label.padEnd(4, ' ')
+      line += a.x.toFixed(8).padStart(11,' ')
+      line += a.y.toFixed(8).padStart(22,` `)
+      line += a.z.toFixed(8).padStart(22,` `)
+      lines.push(line)
+    }
+    return lines.join("\n")
+   }
+  
   static async loadXYZAsync(file) {
     switch (trueTypeOf(file)) {
       case String.name: