---
title: "Multiple dataset"
date: 2019-09-27 16:41
draft: false
---
<script src="/scripts/data.js" type="text/javascript"></script>
<script src="/scripts/loadAllData.js" type="text/javascript"></script>
<script src="/scripts/getFullDataPath.js" type="text/javascript"></script>
<script src="/scripts/getTextFromFile.js" type="text/javascript"></script>
<script src="/scripts/trueTypeOf.js" type="text/javascript"></script>
<script src="/scripts/uniq.js"></script>
<script src="https://cdn.rawgit.com/larsgw/citation.js/archive/citation.js/citation-0.4.0-9.js"
  type="text/javascript"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
  window.onload= async ()=>{
    $('#form input[type=radio]').on('change', async function(event) {
      var result = $(this).val();
      var proms=[];
      switch (result) {
        case "abs":
          proms==getAbsFilesName().map((f) => absDataFile.loadAsync(f));
          break;
        case "fluo":
          proms=getFluoFilesName().map((f) => fluoDataFile.loadAsync(f));
          break;
        case "zpe":
          proms=getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
          break;
      }
      window.dats=await Promise.all(proms)
      reloadSelect()
      reloadContent()
    })
  }
  function reloadSelect(){
    $('#form > 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){
        op=document.createElement("option")
        op.value=val
        op.innerText=val.toString()
        $(this).append(op)
    }
    })
  }
  function reloadContent(){
    var filt=window.dats
    $('#form > select').each(function(){
      const prop=$(this).attr("name")
      const values=$(this).val()
      filt=filt.filter((d)=>{
        if(typeof values=="undefined" || values==null){
         return false 
        }
        return values.map((v)=>JSON.stringify(v)).includes(JSON.stringify(d[prop]))
      })
    })
    var tb=document.getElementById("table_b");
    tb.innerHTML=''
    for (const d of filt) {
      var row=document.createElement("tr")
      var rowd=[]
      var e=[d.molecule,d.comment,d.code,d.method,d.DOI]
      for(el of e){
        td=document.createElement("td")
        td.innerText=el
          row.appendChild(td)
      }
      tb.appendChild(row)
    }
  }
</script>
{{< getDataFilesName >}}
  <form id="form" action="" method="post">
    <legend>Data type</legend>
    <input type="radio" id="abs" value="abs" name="datatype">
    <label for="abs">Absorption</label>
    <input type="radio" id="fluo" value="fluo" name="datatype">
    <label for="fluo">Fluorescence</label>
    <input type="radio" id="zpe" value="zpe" name="datatype">
    <label for="zpe">\(\Delta \text{ZPE}\)</label>
    <br/>
    <select multiple id="mol_select" onchange="reloadContent()" name="molecule"></select>
    <label for="mol_select">Molecule</label>
    <select multiple id="code_select" onchange="reloadContent()" name="code"></select>
    <label for="code_select">Code</label>
    <select multiple id="method_select" onchange="reloadContent()" name="method"></select>
    <label for="method_select">Method</label>
    <select multiple id="DOI_select" onchange="reloadContent()" name="DOI"></select>
    <label for="DOI_select">DOI</label>
  </form>
  <br/>
<div id="data_div">
  <table id="dat_table">
    <thead>
      <th>Molecule</th>
      <th>Comment</th>
      <th>Code</th>
      <th>Method</th>
      <th>DOI</th>
    </thead>
    <tbody id="table_b">
    </tbody>
  </table>
</div>