From 521e0852900467e0884e68b4239aee91dbbf37ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20V=C3=A9ril?= <mveril@irsamc.ups-tlse.fr>
Date: Wed, 9 Oct 2019 20:10:48 +0200
Subject: [PATCH] Modernisation of the html

---
 content/multipledataset.html | 368 ++++++++++++++++++-----------------
 content/onedataset.html      | 357 ++++++++++++++++-----------------
 2 files changed, 368 insertions(+), 357 deletions(-)

diff --git a/content/multipledataset.html b/content/multipledataset.html
index c60ffd45..93967342 100644
--- a/content/multipledataset.html
+++ b/content/multipledataset.html
@@ -17,258 +17,258 @@ draft: false
   type="text/javascript"></script>
 <script src="https://unpkg.com/simple-statistics@7.0.2/dist/simple-statistics.min.js"></script>
 <script>
-  window.onload= async ()=>{
+  window.onload = async () => {
     window.Cite = require('citation-js');
-    $('#form_dat input[type=radio]').on('change', async function(event) {
-      processingIndicator.isActive=true
-      $("#Geom_th,#GSGeom_th,#ESGeom_th").each(function(){
-        $(this).attr("hidden",true)
+    $('#form_dat > fieldset > input[type=radio]').on('change', async function (event) {
+      processingIndicator.isActive = true
+      $("#Geom_th,#GSGeom_th,#ESGeom_th").each(function () {
+        $(this).attr("hidden", true)
       })
       var result = $(this).val();
-      var proms=[];
+      var proms = [];
       switch (result) {
         case "abs":
-          proms=getAbsFilesName().map((f) => AbsDataFile.loadAsync(f));
-          $("#Geom_th").attr("hidden",false)
+          proms = getAbsFilesName().map((f) => AbsDataFile.loadAsync(f));
+          $("#Geom_th").attr("hidden", false)
           break;
         case "fluo":
-          proms=getFluoFilesName().map((f) => FluoDataFile.loadAsync(f));
-          $("#Geom_th").attr("hidden",false)
+          proms = getFluoFilesName().map((f) => FluoDataFile.loadAsync(f));
+          $("#Geom_th").attr("hidden", false)
           break;
         case "zpe":
-          proms=getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
-          $("#GSGeom_th,#ESGeom_th").each(function(){
-            $(this).attr("hidden",false)
+          proms = getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
+          $("#GSGeom_th,#ESGeom_th").each(function () {
+            $(this).attr("hidden", false)
           })
           break;
       }
-      window.dats=await Promise.all(proms)
-      processingIndicator.isActive=false
+      window.dats = await Promise.all(proms)
+      processingIndicator.isActive = false
       reloadFileSelector()
       await reloadSelect()
     })
   }
-  function reloadFileSelector(){
-    $("#customFiles_input").attr("value","").attr("disabled",false)
+  function reloadFileSelector() {
+    $("#customFiles_input").attr("value", "").attr("disabled", false)
   }
 
-  async function reloadSelect(){
-    processingIndicator.isActive=true
-    radioval=$('#form_dat > input[name=datatype]:checked').val();
-    const files=$("#customFiles_input")[0].files
-    for(file of [...files]) {
+  async function reloadSelect() {
+    processingIndicator.isActive = true
+    radioval = $('#form_dat > fieldset > input[name=datatype]:checked').val();
+    const files = $("#customFiles_input")[0].files
+    for (file of [...files]) {
       switch (radioval) {
         case "abs":
-          var dat=await AbsDataFile.loadAsync(file)
+          var dat = await AbsDataFile.loadAsync(file)
           window.dats.push(dat)
           break;
-      
+
         case "fluo":
-          dat=await FluoDataFile.loadAsync(file)
+          dat = await FluoDataFile.loadAsync(file)
           window.dats.push(dat)
           break;
         case "ZPE":
-          dat=await ZPEDataFile.loadAsync(file)
+          dat = await ZPEDataFile.loadAsync(file)
           window.dats.push(dat)
           break;
       }
     }
-    $('#form_dat > select').each(function(){
+    $('#form_dat > fieldset > div > select').each(function () {
       $(this).find('option[value!=""]').remove()
-      const vals=uniq(window.dats.map((d)=>{return d[$(this).attr("name")]}))
-      for (const val of vals){
-        $("<option/>",{
-        value: JSON.stringify(val)
+      const vals = uniq(window.dats.map((d) => { return d[$(this).attr("name")] }))
+      for (const val of vals) {
+        $("<option/>", {
+          value: JSON.stringify(val)
         }).text(val.toString()).appendTo($(this))
       }
     })
     $('#form_dat > input[type="submit"').prop('disabled', false);
-    processingIndicator.isActive=false
+    processingIndicator.isActive = false
     await reloadContent()
   }
-  async function reloadStat(){
-    processingIndicator.isActive=true
-    var stb=$("#stat_table > tbody")
+  async function reloadStat() {
+    processingIndicator.isActive = true
+    var stb = $("#stat_table > tbody")
     $("#graph_div").empty()
     $(stb).empty()
-    var refstr=$("#sel_ref option:selected").val()
-    var sdatdic=new Map()
+    var refstr = $("#sel_ref option:selected").val()
+    var sdatdic = new Map()
     for (const d of window.filt) {
-      const key=JSON.stringify([d.code,d.method,d.DOI])
-      if(!(sdatdic.has(key)))
-      {
-        sdatdic.set(key,new Map())
+      const key = JSON.stringify([d.code, d.method, d.DOI])
+      if (!(sdatdic.has(key))) {
+        sdatdic.set(key, new Map())
       }
-      for(const exc of d.excitations){
-        const key2=JSON.stringify([d.molecule,exc.initial,exc.final])
-        const keydic=sdatdic.get(key)
-        if(!(keydic.has(key2))){
-          keydic.set(key2,[])
+      for (const exc of d.excitations) {
+        const key2 = JSON.stringify([d.molecule, exc.initial, exc.final])
+        const keydic = sdatdic.get(key)
+        if (!(keydic.has(key2))) {
+          keydic.set(key2, [])
         }
         keydic.get(key2).push(exc.value)
-      } 
+      }
     }
-    var sdic= new Map()
-    for(const [key,sdat] of sdatdic){
-      for(const [key2,exval] of sdat){
-        if(!(sdic.has(key))){
-          sdic.set(key,[])
+    var sdic = new Map()
+    for (const [key, sdat] of sdatdic) {
+      for (const [key2, exval] of sdat) {
+        if (!(sdic.has(key))) {
+          sdic.set(key, [])
         }
-        sdic.get(key).push(exval-((sdatdic.has(refstr)) ? sdatdic.get(refstr).get(key2) : NaN))
+        sdic.get(key).push(exval - ((sdatdic.has(refstr)) ? sdatdic.get(refstr).get(key2) : NaN))
       }
     }
     sdic.delete(refstr)
-    var graphdat=[]
-    for(const[keystr,vals] of sdic){
-      row=$("<tr/>")
-      key=JSON.parse(keystr)
+    var graphdat = []
+    for (const [keystr, vals] of sdic) {
+      row = $("<tr/>")
+      key = JSON.parse(keystr)
       key.shift()
       Reflect.setPrototypeOf(key[0], method.prototype)
       Reflect.setPrototypeOf(key[1], doi.prototype)
-      for(const el of key){
-        var td=$("<td/>",{
-          style:"white-space: nowrap;"
+      for (const el of key) {
+        var td = $("<td/>", {
+          style: "white-space: nowrap;"
         })
-        if(trueTypeOf(el)=="doi"){
-          var publi=await window.Cite.async(el.string)
-          $("<a/>",{
-          href: el.url,
-          target:"_blank"
+        if (trueTypeOf(el) == "doi") {
+          var publi = await window.Cite.async(el.string)
+          $("<a/>", {
+            href: el.url,
+            target: "_blank"
           }).html(publi.format('citation', {
-                format: 'html',
-                lang: 'en-US'
+            format: 'html',
+            lang: 'en-US'
           })).appendTo(td)
         }
-        else{
+        else {
           $(td).text(el)
         }
         $(row).append(td)
       }
-      const noNanVals=vals.filter((v)=>!Number.isNaN(v))
-      const avals=noNanVals.map(v=>Math.abs(v))
-      for(const val of [ss.min(noNanVals),ss.max(noNanVals),ss.mean(noNanVals),ss.mean(avals),ss.median(noNanVals),ss.median(avals),ss.rootMeanSquare(noNanVals),ss.variance(noNanVals),ss.standardDeviation(noNanVals)]){
-        $("<td/>").text(noNanPrecision(val,3)).appendTo(row)
+      const noNanVals = vals.filter((v) => !Number.isNaN(v))
+      const avals = noNanVals.map(v => Math.abs(v))
+      for (const val of [ss.min(noNanVals), ss.max(noNanVals), ss.mean(noNanVals), ss.mean(avals), ss.median(noNanVals), ss.median(avals), ss.rootMeanSquare(noNanVals), ss.variance(noNanVals), ss.standardDeviation(noNanVals)]) {
+        $("<td/>").text(noNanPrecision(val, 3)).appendTo(row)
       }
       $(stb).append(row)
       var box = {
-                    x: noNanVals,
-                    amean: ss.mean(avals).toFixed(3),
-                    name:  key[0].toString() + " MAD : " + ss.mean(avals).toPrecision(4),
-                    type: 'box',
-                    boxmean: 'sd'
+        x: noNanVals,
+        amean: ss.mean(avals).toFixed(3),
+        name: key[0].toString() + " MAD : " + ss.mean(avals).toPrecision(4),
+        type: 'box',
+        boxmean: 'sd'
       };
       graphdat.push(box)
     }
     var layout = {
-            paper_bgcolor: 'rgba(0,0,0,0)',
-            plot_bgcolor: 'rgba(0,0,0,0)',
-            gap: 0,
-            legend: {
-                traceorder: 'reversed',
-            },
-            xaxis: {
-              title: {
-                text: 'Energy (eV)',
-              }
-            },
-            bgcolor:'#E2E2E2',
-            bordercolor:'#FFFFFF',
-            borderwidth: 2,
-            // autosize: false,
-            width: 850,
-            height: 500,
-            margin: {
-                l: 0,
-                r: 10,
-                b: 15,
-                t: 20,
-                pad: 0,
-             },
+      paper_bgcolor: 'rgba(0,0,0,0)',
+      plot_bgcolor: 'rgba(0,0,0,0)',
+      gap: 0,
+      legend: {
+        traceorder: 'reversed',
+      },
+      xaxis: {
+        title: {
+          text: 'Energy (eV)',
+        }
+      },
+      bgcolor: '#E2E2E2',
+      bordercolor: '#FFFFFF',
+      borderwidth: 2,
+      // autosize: false,
+      width: 850,
+      height: 500,
+      margin: {
+        l: 0,
+        r: 10,
+        b: 15,
+        t: 20,
+        pad: 0,
+      },
     }
     Plotly.newPlot('graph_div', graphdat, layout);
-    processingIndicator.isActive=false
+    processingIndicator.isActive = false
   }
-  async function reloadContent(){
-    processingIndicator.isActive=true
-    const LatexInline=['\\(','\\)']
-    window.filt=window.dats
-    $('#form_dat > select').each(function(){
-      const prop=$(this).attr("name")
-      const values=$(this).val()
-      window.filt=window.filt.filter((d)=>{
-        if(typeof values=="undefined" || values==null){
-         return false 
+  async function reloadContent() {
+    processingIndicator.isActive = true
+    const LatexInline = ['\\(', '\\)']
+    window.filt = window.dats
+    $('#form_dat > fieldset > div > select').each(function () {
+      const prop = $(this).attr("name")
+      const values = $(this).val()
+      window.filt = window.filt.filter((d) => {
+        if (typeof values == "undefined" || values == null) {
+          return false
         }
         return values.includes(JSON.stringify(d[prop]))
       })
     })
-    var dtb=$("#dat_table > tbody");
+    var dtb = $("#dat_table > tbody");
     dtb.empty()
-    sel_ref=$("#sel_ref")
+    sel_ref = $("#sel_ref")
     for (const d of window.filt) {
-      var row=$("<tr/>")
-      var rowd=[]
-      const els=[d.molecule,d.comment,d.code,d.method,d.DOI]
-      var op=document.createElement("option")
-      var opObjVal=els.slice(2)
-      $("<option/>",{
-        value:JSON.stringify(opObjVal)
+      var row = $("<tr/>")
+      var rowd = []
+      const els = [d.molecule, d.comment, d.code, d.method, d.DOI]
+      var op = document.createElement("option")
+      var opObjVal = els.slice(2)
+      $("<option/>", {
+        value: JSON.stringify(opObjVal)
       }).text(d.method).appendTo(sel_ref)
-      var tableels=els.slice()
-      if(d instanceof oneStateDataFileBase){
-        tableels.splice(3,0,d.geometry)
+      var tableels = els.slice()
+      if (d instanceof oneStateDataFileBase) {
+        tableels.splice(3, 0, d.geometry)
       }
-      else if(d instanceof twoStateDataFileBase){
-        tableels.splice(3,0,[d.GS,d.ES])
+      else if (d instanceof twoStateDataFileBase) {
+        tableels.splice(3, 0, [d.GS, d.ES])
       }
-      for(const el of tableels){
-        td=$("<td/>",{
-          style:"white-space: nowrap;"
+      for (const el of tableels) {
+        td = $("<td/>", {
+          style: "white-space: nowrap;"
         })
-        if(trueTypeOf(el)=="doi"){
-          var publi= await window.Cite.async(el.string)
-          $("<a/>",{
+        if (trueTypeOf(el) == "doi") {
+          var publi = await window.Cite.async(el.string)
+          $("<a/>", {
             href: el.url,
             target: "_blank",
           }).html(publi.format('citation', {
-                format: 'html',
-                lang: 'en-US'
-              })).appendTo(td)
+            format: 'html',
+            lang: 'en-US'
+          })).appendTo(td)
         }
-        else{
+        else {
           $(td).text(el)
         }
         $(row).append(td)
       }
-      $("<a/>",{
-        target:"_blank",
-        innerText:"Go to file",
+      $("<a/>", {
+        target: "_blank",
+        innerText: "Go to file",
         href: await d.sourceFile.getViewerURL()
       }).appendTo($("<td/>")).appendTo(row)
       $(dtb).append(row)
     }
-    processingIndicator.isActive=true
+    processingIndicator.isActive = true
     await reloadStat()
   }
 </script>
 {{< getDataFilesName >}}
-  <p>
-    In this page you can compare multiple dataset and have somme statistics to evaluate method or basis accuracy.
-    For this follow this steps
-    <ol>
-      <li>Select a value type (Absorbtion, fluorescence or \(\Delta \text{ZPE}\))</li>
-      <li>You can add custom files if you want</li>
-      <li>Choose each parameters (of course you can select multiples values for each)</li>
-        <ul>
-          <li>Molecule</li>
-          <li>Method</li>
-          <li>Paper</li>
-        </ul>
-      <li>Select a reference from already selected data (by default the first is already selected)</li>
-      <li>Now you can see the list of selected data and some statistics about these data</li>
-    </ol>
-  </p>
-  <form id="form_dat" action="javascript:reloadContent()" method="post">
+<p>
+  In this page you can compare multiple dataset and have somme statistics to evaluate method or basis accuracy.
+  For this follow this steps
+  <ol>
+    <li>Select a value type (Absorbtion, fluorescence or \(\Delta \text{ZPE}\))</li>
+    <li>You can add custom files if you want</li>
+    <li>Choose each parameters (of course you can select multiples values for each)</li>
+    <ul>
+      <li>Molecule</li>
+      <li>Method</li>
+      <li>Paper</li>
+    </ul>
+    <li>Select a reference from already selected data (by default the first is already selected)</li>
+    <li>Now you can see the list of selected data and some statistics about these data</li>
+  </ol>
+</p>
+<form id="form_dat" action="javascript:reloadContent()" method="post">
+  <fieldset>
     <legend>Data type</legend>
     <input type="radio" id="abs" value="abs" name="datatype">
     <label for="abs">Absorption</label>
@@ -276,26 +276,34 @@ draft: false
     <label for="fluo">Fluorescence</label>
     <input type="radio" id="zpe" value="zpe" name="datatype">
     <label for="zpe">\(\Delta \text{ZPE}\)</label>
-    <br/>
-    <label for="customFiles_input">Add custom data file</label>
-    <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
-    <br/>
-    <label for="mol_select">Molecule</label>
-    <select multiple id="mol_select" name="molecule"></select>
-    <label for="method_select">Method</label>
-    <select multiple id="method_select" name="method"></select>
-    <label for="DOI_select">Paper</label>
-    <select multiple id="DOI_select" name="DOI"></select>
-    <br/>
-    <input type="submit" disabled=true value="Load"></input>
-  </form>
-  <form id="form_ref">
-    <label for="sel_ref">Reference</label>
-    <select id="sel_ref" onchange="reloadStat()">
-    </select>
-  </form>
-  <br/>
-<div id="data_div">
+  </fieldset>
+  <fieldset>
+    <div>
+      <label for="customFiles_input">Add custom data file</label>
+      <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
+    </div>
+  </fieldset>
+  <fieldset>
+    <div>
+      <label for="mol_select">Molecule</label>
+      <select multiple id="mol_select" name="molecule"></select>
+    </div>
+    <div>
+      <label for="method_select">Method</label>
+      <select multiple id="method_select" name="method"></select>
+    </div>
+    <div>
+      <label for="DOI_select">Paper</label>
+      <select multiple id="DOI_select" name="DOI"></select>
+    </div>
+  </fieldset>
+  <input type="submit" disabled=true value="Load"></input>
+</form>
+<form id="form_ref">
+  <label for="sel_ref">Reference</label>
+  <select id="sel_ref" onchange="reloadStat()"></select>
+</form>
+<section>
   <table id="dat_table">
     <thead>
       <th>Molecule</th>
@@ -311,8 +319,8 @@ draft: false
     <tbody>
     </tbody>
   </table>
-</div>
-<div id="stat_div">
+</section>
+<section>
   <table id="stat_table">
     <thead>
       <th>Method</th>
@@ -331,5 +339,5 @@ draft: false
     </tbody>
     <div id="graph_div"></div>
   </table>
-</div>
+</section>
 {{< waitModal >}}
\ No newline at end of file
diff --git a/content/onedataset.html b/content/onedataset.html
index b6c86575..686f96b6 100644
--- a/content/onedataset.html
+++ b/content/onedataset.html
@@ -3,186 +3,189 @@ title: "One dataset"
 date: 2019-08-29 09:00
 draft: false
 ---
-    <link rel="stylesheet" type="text/css" href="/css/modal.css" />
-    <script src="/js/processingIndicator.js" type="text/javascript"></script>
-    <script src="/js/data.js" type="text/javascript"></script>
-    <script src="/js/loadAllData.js" type="text/javascript"></script>
-    <script src="/js/getFullDataPath.js" type="text/javascript"></script>
-    <script src="/js/getTextFromFile.js" type="text/javascript"></script>
-    <script src="/js/trueTypeOf.js" type="text/javascript"></script>
-    <script src="/js/noNan.js"></script>
-    <script src="/js/websiteFile.js"></script>
-     {{< getDataFilesName >}}
-    <script>
-      window.onload=async function()
-      {
-        window.Cite = require('citation-js');
-        window.dats=await loadAllData()
-        window.data=new CombinedData()
-        molecules=new Set(Object.values(window.dats).flat().map((d)=>d.molecule))
-        for (const el of molecules) {
-          $("<option/>",{value:el}).text(el).appendTo($("#select_mol"))
-        }
-      }
-      function select_mol_onchange(event){
-        update_mol(event.target.value)
-      }
-      function select_abs_onchange(event){
-        update_abs(window.dats["abs"][event.target.value])
-      }
-      function select_fluo_onchange(event){
-        update_fluo(window.dats["fluo"][event.target.value])
-      }
-      function select_ZPE_onchange(event){
-        update_ZPE(window.dats["ZPE"][event.target.value])
-      }
-      async function update_mol(molecule){
-        processingIndicator.isActive=true
-        for (const [key,dat] of Object.entries(window.dats)) {
-          var s=$(String.raw`#select_${key}`)
-          $(s).find('option[value!=""]').remove()
-          $(s).find('option[value=""]').first().prop('selected', true)
-          
-          dat.forEach((val,index)=>{
-            if(val.molecule==molecule){
-              $("<option/>",{value:index}).text(val.method.toString()).appendTo(s)
-            }
-          })
-        }
-        processingIndicator.isActive=false
-      }
-      async function update_abs(abs){
-        window.data.Abs=abs
-        reload()
-      }
-      async function update_fluo(fluo){
-        window.data.Fluo=fluo
-        reload()
-      }
-      async function update_ZPE(ZPE){
-        window.data.ZPE=ZPE
-        reload()
-      }
-      async function clear(){
-        $("#ex_table > tbody,data_par").each(()=>{
-          $(this).empty()
-        })
+<link rel="stylesheet" type="text/css" href="/css/modal.css" />
+<script src="/js/processingIndicator.js" type="text/javascript"></script>
+<script src="/js/data.js" type="text/javascript"></script>
+<script src="/js/loadAllData.js" type="text/javascript"></script>
+<script src="/js/getFullDataPath.js" type="text/javascript"></script>
+<script src="/js/getTextFromFile.js" type="text/javascript"></script>
+<script src="/js/trueTypeOf.js" type="text/javascript"></script>
+<script src="/js/noNan.js"></script>
+<script src="/js/websiteFile.js"></script>
+{{< getDataFilesName >}}
+<script>
+  window.onload = async function () {
+    window.Cite = require('citation-js');
+    window.dats = await loadAllData()
+    window.data = new CombinedData()
+    molecules = new Set(Object.values(window.dats).flat().map((d) => d.molecule))
+    for (const el of molecules) {
+      $("<option/>", { value: el }).text(el).appendTo($("#select_mol"))
+    }
+  }
+  function select_mol_onchange(event) {
+    update_mol(event.target.value)
+  }
+  function select_abs_onchange(event) {
+    update_abs(window.dats["abs"][event.target.value])
+  }
+  function select_fluo_onchange(event) {
+    update_fluo(window.dats["fluo"][event.target.value])
+  }
+  function select_ZPE_onchange(event) {
+    update_ZPE(window.dats["ZPE"][event.target.value])
+  }
+  async function update_mol(molecule) {
+    processingIndicator.isActive = true
+    for (const [key, dat] of Object.entries(window.dats)) {
+      var s = $(String.raw`#select_${key}`)
+      $(s).find('option[value!=""]').remove()
+      $(s).find('option[value=""]').first().prop('selected', true)
 
+      dat.forEach((val, index) => {
+        if (val.molecule == molecule) {
+          $("<option/>", { value: index }).text(val.method.toString()).appendTo(s)
+        }
+      })
+    }
+    processingIndicator.isActive = false
+  }
+  async function update_abs(abs) {
+    window.data.Abs = abs
+    reload()
+  }
+  async function update_fluo(fluo) {
+    window.data.Fluo = fluo
+    reload()
+  }
+  async function update_ZPE(ZPE) {
+    window.data.ZPE = ZPE
+    reload()
+  }
+  async function clear() {
+    $("#ex_table > tbody,data_par").each(() => {
+      $(this).empty()
+    })
+
+  }
+  async function reload() {
+    processingIndicator.isActive = true
+    clear()
+    const LatexInline = ['\\(', '\\)']
+    var md = [];
+    var els = [];
+    var customRenderingProp = ["excitations", "sourceFile"]
+    for (const key of Object.keys(window.data)) {
+      if (window.data[key] != null) {
+        md.push(key)
+        for (const prop of Object.keys(window.data[key])) {
+          if (!(customRenderingProp.includes(prop)))
+            md.push([prop, window.data[key][prop]])
+        }
+        md.push(window.data[key].DOI)
+        md.push(window.data[key].sourceFile)
       }
-      async function reload() {
-        processingIndicator.isActive=true
-        clear()
-        const LatexInline=['\\(','\\)']
-        var md=[];
-        var els=[];
-        var customRenderingProp=["excitations","sourceFile"]
-        for (const key of Object.keys(window.data)) {
-          if (window.data[key]!=null){
-            md.push(key)
-            for (const prop of Object.keys(window.data[key])) {
-              if(!(customRenderingProp.includes(prop)))
-                md.push([prop,window.data[key][prop]])
-            }
-            md.push(window.data[key].DOI)
-            md.push(window.data[key].sourceFile)
-          }
-        }
-        div=$("#meta_div")
-        $(div).empty()
-        for (const element of md) {
-          switch (trueTypeOf(element)) {
-            case "string":
-              $("<h2/>").text(element).appendTo(div)
-              break;
-            case "doi":
-              var publi=await Cite.async(element.string)
-              var output = publi.format('bibliography', {
-                format: 'html',
-                template: 'apa',
-                lang: 'en-US'
-              })
-              $("<a/>",{
-                href:element.url,
-                target:"_blank"}).html(output).appendTo(div)
-              break
-            case "websiteFile":
-              $("<a/>",{href:element.url,
-              target:"_blank",
-              href: element.getViewerURL()
-              }).text("Go to file").appendTo(div)
-              break
-            case "Array":
-              k=element[0]
-              v=element[1]
-              k=k.charAt(0).toUpperCase() + k.slice(1)
-              $("<div/>").text(k+': '+v).appendTo(div)
-              break;
-          }
-        }
-        var tb=$("#ex_table > tbody");
-        $(tb).empty()
-        for (const el of window.data.excitations) {
-          row=$("<tr/>")
-          var rowd=[]
-          rowd.push(String.raw`${LatexInline[0]} ${el.initial.toLaTeX()} \rightarrow ${el.final.toLaTeX()}${LatexInline[1]}`)
-          var e=[el.Eabs,el.Efluo,el.EZPE,el.Eadia,el.Ezz]
-          e.forEach((val)=>rowd.push(noNanPrecision(val,3)))
-          for(d of rowd) {
-            $("<td/>").text(d).appendTo(row)
-          }
-          tb.append(row)
-        }
-        await MathJax.typesetPromise();
-        $("#ex_div").attr("hidden",false)
-        await MathJax.typesetPromise();
-        processingIndicator.isActive=false
+    }
+    sec = $("#meta_sec")
+    $(sec).empty()
+    for (const element of md) {
+      switch (trueTypeOf(element)) {
+        case "string":
+          $("<h2/>").text(element).appendTo(sec)
+          break;
+        case "doi":
+          var publi = await Cite.async(element.string)
+          var output = publi.format('bibliography', {
+            format: 'html',
+            template: 'apa',
+            lang: 'en-US'
+          })
+          $("<a/>", {
+            href: element.url,
+            target: "_blank"
+          }).html(output).appendTo(sec)
+          break
+        case "websiteFile":
+          $("<a/>", {
+            href: element.url,
+            target: "_blank",
+            href: element.getViewerURL()
+          }).text("Go to file").appendTo(sec)
+          break
+        case "Array":
+          k = element[0]
+          v = element[1]
+          k = k.charAt(0).toUpperCase() + k.slice(1)
+          $("<div/>").text(k + ': ' + v).appendTo(sec)
+          break;
       }
-    </script>
-    <p>
-      In this page you can calculate \(E_\text{adia}\) \(E_\text{0-0}\) from \(E_\text{abs}\) \(E_\text{fluo}\) and \(\Delta E_\text{ZPE}\)
-      For this select a method for absorption, fluorescence or ZPE
-    </p> 
-    <div>
-    <label>Select a molecule<br/>
-      <select id="select_mol" onchange="select_mol_onchange(event)">
-        <option value="" disabled=true selected=true>Select a molecule</option>
-      </select>
-    </label>
+    }
+    var tb = $("#ex_table > tbody");
+    $(tb).empty()
+    for (const el of window.data.excitations) {
+      row = $("<tr/>")
+      var rowd = []
+      rowd.push(String.raw`${LatexInline[0]} ${el.initial.toLaTeX()} \rightarrow ${el.final.toLaTeX()}${LatexInline[1]}`)
+      var e = [el.Eabs, el.Efluo, el.EZPE, el.Eadia, el.Ezz]
+      e.forEach((val) => rowd.push(noNanPrecision(val, 3)))
+      for (d of rowd) {
+        $("<td/>").text(d).appendTo(row)
+      }
+      tb.append(row)
+    }
+    await MathJax.typesetPromise();
+    $("#ex_sec").attr("hidden", false)
+    await MathJax.typesetPromise();
+    processingIndicator.isActive = false
+  }
+</script>
+<p>
+  In this page you can calculate \(E_\text{adia}\) \(E_\text{0-0}\) from \(E_\text{abs}\) \(E_\text{fluo}\) and \(\Delta
+  E_\text{ZPE}\)
+  For this select a method for absorption, fluorescence or ZPE
+</p>
+<form>
+  <div>
+    <label for="select_mol">Select a molecule</label>
+    <select id="select_mol" onchange="select_mol_onchange(event)">
+      <option value="" disabled=true selected=true>Select a molecule</option>
+    </select>
   </div>
   <div>
-    <label>Select an absorption method<br/>
-      <select id="select_abs" onchange="select_abs_onchange(event)">
-        <option value="" disabled=true selected=true>Select an absorption method</option>
-      </select>
-    </label>
-  
-    <label>Select a fluorescence method<br/>
-      <select id="select_fluo" onchange="select_fluo_onchange(event)">
-        <option value="" disabled=true selected=true>Select a fluorescence method</option>
-      </select>
-    </label>
-    <label>Select a ZPE method<br/>
-      <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
-        <option value="" disabled=true selected=true>Select a ZPE method</option>
-      </select>
-    </label>
+    <label for="select_abs">Select an absorption method</label>
+    <select id="select_abs" onchange="select_abs_onchange(event)">
+      <option value="" disabled=true selected=true>Select an absorption method</option>
+    </select>
   </div>
-    <h1>Data</h1>
-    <p id=data_par>
-      <div id="meta_div"></div>
-      <div id="ex_div" hidden=true>
-      <h2>Excitation</h2>
-      <table id="ex_table">
-        <thead>
-          <th>Transition</th>
-          <th>\(E_\text{abs}\)</th>
-          <th>\(E_\text{fluo}\)</th>
-          <th>\(\Delta E_\text{ZPE}\)</th>
-          <th>\(E_\text{adia}\)</th>
-          <th>\(E_\text{0-0}\)</th>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
-    </p>
-    {{< waitModal >}}
\ No newline at end of file
+  <div>
+    <label for="select_fluo">Select a fluorescence method</label>
+    <select id="select_fluo" onchange="select_fluo_onchange(event)">
+      <option value="" disabled=true selected=true>Select a fluorescence method</option>
+    </select>
+  </div>
+  <div>
+    <label for="select_ZPE">Select a ZPE method</label>
+    <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
+      <option value="" disabled=true selected=true>Select a ZPE method</option>
+    </select>
+  </div>
+</form>
+<h1>Data</h1>
+<section id=data>
+  <section id="meta_sec"></section>
+  <section id="ex_sec" hidden=true>
+    <h2>Excitation</h2>
+    <table id="ex_table">
+      <thead>
+        <th>Transition</th>
+        <th>\(E_\text{abs}\)</th>
+        <th>\(E_\text{fluo}\)</th>
+        <th>\(\Delta E_\text{ZPE}\)</th>
+        <th>\(E_\text{adia}\)</th>
+        <th>\(E_\text{0-0}\)</th>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</section>
+{{< waitModal >}}
\ No newline at end of file