QUESTDB_website/content/multipledataset.html

---
title: "Multiple dataset"
date: 2019-09-27 16:41
draft: false
---
<link rel="stylesheet" type="text/css" href="/css/modal.css" />
<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/uniq.js"></script>
<script src="/js/processingIndicator.js"></script>
<script src="/js/noNan.js"></script>
<script src="/js/websiteFile.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://unpkg.com/simple-statistics@7.0.2/dist/simple-statistics.min.js"></script>
<script>
  window.onload= async ()=>{
    window.Cite = require('citation-js');
    $('#form_dat input[type=radio]').on('change', async function(event) {
      processingIndicator.isActive=true
      document.getElementById("Geom_th").hidden=true
      document.getElementById("GSGeom_th").hidden=true
      document.getElementById("ESGeom_th").hidden=true
      var result = $(this).val();
      var proms=[];
      switch (result) {
        case "abs":
          proms=getAbsFilesName().map((f) => AbsDataFile.loadAsync(f));
          document.getElementById("Geom_th").hidden=false
          break;
        case "fluo":
          proms=getFluoFilesName().map((f) => FluoDataFile.loadAsync(f));
          document.getElementById("Geom_th").hidden=false
          break;
        case "zpe":
          proms=getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
          document.getElementById("GSGeom_th").hidden=false
          document.getElementById("ESGeom_th").hidden=false
          break;
      }
      window.dats=await Promise.all(proms)
      processingIndicator.isActive=false
      reloadFileSelector()
      await reloadSelect()
    })
  }
  function reloadFileSelector(){
    const fsel=document.getElementById("customFiles_input")
    fsel.value=""
    fsel.disabled=false    
  }

  async function reloadSelect(){
    processingIndicator.isActive=true
    radioval=$('#form_dat > input[name=datatype]:checked').val();
    for(file of Array.from(document.getElementById("customFiles_input").files))
    {
      switch (radioval) {
        case "abs":
          var dat=await AbsDataFile.loadAsync(file)
          window.dats.push(dat)
          break;
      
        case "fluo":
          dat=await FluoDataFile.loadAsync(file)
          window.dats.push(dat)
          break;
        case "ZPE":
          dat=await ZPEDataFile.loadAsync(file)
          window.dats.push(dat)
          break;
      }
    }
    $('#form_dat > 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=JSON.stringify(val)
        op.innerText=val.toString()
        $(this).append(op)
    }
    })
    $('#form_dat > input[type="submit"').prop('disabled', false);
    processingIndicator.isActive=false
    await reloadContent()
  }
  async function reloadStat(){
    processingIndicator.isActive=true
    var stb=document.getElementById("stat_table_b");
    document.getElementById("graph_div").inerrHTML=""
    stb.innerHTML=''
    const sel_ref=document.getElementById("sel_ref")
    const refstr=((sel_ref.selectedIndex>=0) ? sel_ref.options[sel_ref.selectedIndex].value : null)
    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())
      }
      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,[])
        }
        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=document.createElement("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=document.createElement("td")
        if(trueTypeOf(el)=="doi"){
          var publipromise=window.Cite.async(el.string)
          var lnkdoi=document.createElement("a")
          lnkdoi.href=el.url
          lnkdoi.target="_blank"
          publi=await publipromise
          lnkdoi.innerHTML=publi.format('citation', {
                format: 'html',
                lang: 'en-US'
          })
          td.appendChild(lnkdoi)
        }
        else{
          td.innerText=el
        }
        row.appendChild(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)]){
        var td=document.createElement("td")
        td.innerText=noNanPrecision(val,3)
        row.appendChild(td)
      }
      stb.appendChild(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'
      };
      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,
             },
    }
    Plotly.newPlot('graph_div', graphdat, layout);
    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 
        }
        return values.includes(JSON.stringify(d[prop]))
      })
    })
    var dtb=document.getElementById("dat_table_b");
    dtb.innerHTML=''
    sel_ref=document.getElementById("sel_ref")
    for (const d of window.filt) {
      var row=document.createElement("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)
      op.value=JSON.stringify(opObjVal)
      op.innerText=d.method
      sel_ref.appendChild(op)
      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])
      }
      for(const el of tableels){
        td=document.createElement("td")
        if(trueTypeOf(el)=="doi"){
          var publipromise=window.Cite.async(el.string)
          var lnkdoi=document.createElement("a")
          lnkdoi.href=el.url
          lnkdoi.target="_blank"
          publi=await publipromise
          lnkdoi.innerHTML=publi.format('citation', {
                format: 'html',
                lang: 'en-US'
              })
          td.appendChild(lnkdoi)
        }
        else{
          td.innerText=el
        }
        row.appendChild(td)
      }
      var lnkfile=document.createElement("a")
      lnkfile.target="_blank"
      lnkfile.innerText="Go to file"
      lnkfile.href=await d.sourceFile.getViewerURL()
      row.appendChild(lnkfile)
      dtb.appendChild(row)
    }
    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">
    <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/>
    <label for="customFiles">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">
  <table id="dat_table">
    <thead>
      <th>Molecule</th>
      <th>Comment</th>
      <th>Code</th>
      <th id="Geom_th" hidden=true>Geometry</th>
      <th id="GSGeom_th" hidden=true>Ground state geometry</th>
      <th id="ESGeom_th" hidden=true>Excited state geometry</th>
      <th>Method</th>
      <th>Paper</th>
      <th>File</th>
    </thead>
    <tbody id="dat_table_b">
    </tbody>
  </table>
</div>
<div id="stat_div">
  <table id="stat_table">
    <thead>
      <th>Method</th>
      <th>Paper</th>
      <th>Min</th>
      <th>Max</th>
      <th>Mean</th>
      <th>Absolute Mean</th>
      <th>Median</th>
      <th>Absolute Median</th>
      <th>RMS</th>
      <th>Variance</th>
      <th>Standard deviation</th>
    </thead>
    <tbody id="stat_table_b">
    </tbody>
    <div id="graph_div"></div>
  </table>
</div>
{{< waitModal >}}