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" />
<link rel="stylesheet" type="text/css" href="/css/form.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 > 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 = [];
      switch (result) {
        case "abs":
          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)
          break;
        case "zpe":
          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
      reloadFileSelector()
      await reloadSelect()
    })
  }
  function reloadFileSelector() {
    $("#customFiles_input").attr("value", "").attr("disabled", false)
  }

  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)
          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 > fieldset > div > select,#sel_ref').each(function () {
      $(this).find('option[value!=""]').remove()
    })
    $('#form_dat > fieldset > div > select').each(function () {
      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
    await reloadContent()
  }
  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()
    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 = $("<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;"
        })
        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)
        }
        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)
      }
      $(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'
      };
      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 > 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");
    dtb.empty()
    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)
      }).text(d.method).appendTo(sel_ref)
      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])
      }
      tdtemp=$("<td/>", {
          style: "white-space: nowrap;"
        })
      for (const el of tableels) {
        td=$(tdtemp).clone()
        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)
        }
        else {
          $(td).text(el)
        }
        $(row).append(td)
      }
      $(tdtemp).clone().append($("<a/>", {
        target: "_blank",
        href: await d.sourceFile.getViewerURL()
      }).text("Go to file")).appendTo(row)
      $(dtb).append(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 (Absorption, 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>Publication</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>
    <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>
  </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 class="table">
    <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">Publication</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>
      <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>Publication</th>
      <th>File</th>
    </thead>
    <tbody>
    </tbody>
  </table>
</section>
<section>
  <table id="stat_table">
    <thead>
      <th>Method</th>
      <th>Publication</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>
    </tbody>
    <div id="graph_div"></div>
  </table>
</section>
{{< waitModal >}}