10
0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-12-26 06:14:38 +01:00

Modernisation of the html

This commit is contained in:
Mickaël Véril 2019-10-09 20:10:48 +02:00
parent b40223f149
commit 521e085290
2 changed files with 368 additions and 357 deletions

View File

@ -17,258 +17,258 @@ draft: false
type="text/javascript"></script> type="text/javascript"></script>
<script src="https://unpkg.com/simple-statistics@7.0.2/dist/simple-statistics.min.js"></script> <script src="https://unpkg.com/simple-statistics@7.0.2/dist/simple-statistics.min.js"></script>
<script> <script>
window.onload= async ()=>{ window.onload = async () => {
window.Cite = require('citation-js'); window.Cite = require('citation-js');
$('#form_dat input[type=radio]').on('change', async function(event) { $('#form_dat > fieldset > input[type=radio]').on('change', async function (event) {
processingIndicator.isActive=true processingIndicator.isActive = true
$("#Geom_th,#GSGeom_th,#ESGeom_th").each(function(){ $("#Geom_th,#GSGeom_th,#ESGeom_th").each(function () {
$(this).attr("hidden",true) $(this).attr("hidden", true)
}) })
var result = $(this).val(); var result = $(this).val();
var proms=[]; var proms = [];
switch (result) { switch (result) {
case "abs": case "abs":
proms=getAbsFilesName().map((f) => AbsDataFile.loadAsync(f)); proms = getAbsFilesName().map((f) => AbsDataFile.loadAsync(f));
$("#Geom_th").attr("hidden",false) $("#Geom_th").attr("hidden", false)
break; break;
case "fluo": case "fluo":
proms=getFluoFilesName().map((f) => FluoDataFile.loadAsync(f)); proms = getFluoFilesName().map((f) => FluoDataFile.loadAsync(f));
$("#Geom_th").attr("hidden",false) $("#Geom_th").attr("hidden", false)
break; break;
case "zpe": case "zpe":
proms=getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f)); proms = getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
$("#GSGeom_th,#ESGeom_th").each(function(){ $("#GSGeom_th,#ESGeom_th").each(function () {
$(this).attr("hidden",false) $(this).attr("hidden", false)
}) })
break; break;
} }
window.dats=await Promise.all(proms) window.dats = await Promise.all(proms)
processingIndicator.isActive=false processingIndicator.isActive = false
reloadFileSelector() reloadFileSelector()
await reloadSelect() await reloadSelect()
}) })
} }
function reloadFileSelector(){ function reloadFileSelector() {
$("#customFiles_input").attr("value","").attr("disabled",false) $("#customFiles_input").attr("value", "").attr("disabled", false)
} }
async function reloadSelect(){ async function reloadSelect() {
processingIndicator.isActive=true processingIndicator.isActive = true
radioval=$('#form_dat > input[name=datatype]:checked').val(); radioval = $('#form_dat > fieldset > input[name=datatype]:checked').val();
const files=$("#customFiles_input")[0].files const files = $("#customFiles_input")[0].files
for(file of [...files]) { for (file of [...files]) {
switch (radioval) { switch (radioval) {
case "abs": case "abs":
var dat=await AbsDataFile.loadAsync(file) var dat = await AbsDataFile.loadAsync(file)
window.dats.push(dat) window.dats.push(dat)
break; break;
case "fluo": case "fluo":
dat=await FluoDataFile.loadAsync(file) dat = await FluoDataFile.loadAsync(file)
window.dats.push(dat) window.dats.push(dat)
break; break;
case "ZPE": case "ZPE":
dat=await ZPEDataFile.loadAsync(file) dat = await ZPEDataFile.loadAsync(file)
window.dats.push(dat) window.dats.push(dat)
break; break;
} }
} }
$('#form_dat > select').each(function(){ $('#form_dat > fieldset > div > select').each(function () {
$(this).find('option[value!=""]').remove() $(this).find('option[value!=""]').remove()
const vals=uniq(window.dats.map((d)=>{return d[$(this).attr("name")]})) const vals = uniq(window.dats.map((d) => { return d[$(this).attr("name")] }))
for (const val of vals){ for (const val of vals) {
$("<option/>",{ $("<option/>", {
value: JSON.stringify(val) value: JSON.stringify(val)
}).text(val.toString()).appendTo($(this)) }).text(val.toString()).appendTo($(this))
} }
}) })
$('#form_dat > input[type="submit"').prop('disabled', false); $('#form_dat > input[type="submit"').prop('disabled', false);
processingIndicator.isActive=false processingIndicator.isActive = false
await reloadContent() await reloadContent()
} }
async function reloadStat(){ async function reloadStat() {
processingIndicator.isActive=true processingIndicator.isActive = true
var stb=$("#stat_table > tbody") var stb = $("#stat_table > tbody")
$("#graph_div").empty() $("#graph_div").empty()
$(stb).empty() $(stb).empty()
var refstr=$("#sel_ref option:selected").val() var refstr = $("#sel_ref option:selected").val()
var sdatdic=new Map() var sdatdic = new Map()
for (const d of window.filt) { for (const d of window.filt) {
const key=JSON.stringify([d.code,d.method,d.DOI]) const key = JSON.stringify([d.code, d.method, d.DOI])
if(!(sdatdic.has(key))) if (!(sdatdic.has(key))) {
{ sdatdic.set(key, new Map())
sdatdic.set(key,new Map())
} }
for(const exc of d.excitations){ for (const exc of d.excitations) {
const key2=JSON.stringify([d.molecule,exc.initial,exc.final]) const key2 = JSON.stringify([d.molecule, exc.initial, exc.final])
const keydic=sdatdic.get(key) const keydic = sdatdic.get(key)
if(!(keydic.has(key2))){ if (!(keydic.has(key2))) {
keydic.set(key2,[]) keydic.set(key2, [])
} }
keydic.get(key2).push(exc.value) keydic.get(key2).push(exc.value)
} }
} }
var sdic= new Map() var sdic = new Map()
for(const [key,sdat] of sdatdic){ for (const [key, sdat] of sdatdic) {
for(const [key2,exval] of sdat){ for (const [key2, exval] of sdat) {
if(!(sdic.has(key))){ if (!(sdic.has(key))) {
sdic.set(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) sdic.delete(refstr)
var graphdat=[] var graphdat = []
for(const[keystr,vals] of sdic){ for (const [keystr, vals] of sdic) {
row=$("<tr/>") row = $("<tr/>")
key=JSON.parse(keystr) key = JSON.parse(keystr)
key.shift() key.shift()
Reflect.setPrototypeOf(key[0], method.prototype) Reflect.setPrototypeOf(key[0], method.prototype)
Reflect.setPrototypeOf(key[1], doi.prototype) Reflect.setPrototypeOf(key[1], doi.prototype)
for(const el of key){ for (const el of key) {
var td=$("<td/>",{ var td = $("<td/>", {
style:"white-space: nowrap;" style: "white-space: nowrap;"
}) })
if(trueTypeOf(el)=="doi"){ if (trueTypeOf(el) == "doi") {
var publi=await window.Cite.async(el.string) var publi = await window.Cite.async(el.string)
$("<a/>",{ $("<a/>", {
href: el.url, href: el.url,
target:"_blank" target: "_blank"
}).html(publi.format('citation', { }).html(publi.format('citation', {
format: 'html', format: 'html',
lang: 'en-US' lang: 'en-US'
})).appendTo(td) })).appendTo(td)
} }
else{ else {
$(td).text(el) $(td).text(el)
} }
$(row).append(td) $(row).append(td)
} }
const noNanVals=vals.filter((v)=>!Number.isNaN(v)) const noNanVals = vals.filter((v) => !Number.isNaN(v))
const avals=noNanVals.map(v=>Math.abs(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)]){ 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) $("<td/>").text(noNanPrecision(val, 3)).appendTo(row)
} }
$(stb).append(row) $(stb).append(row)
var box = { var box = {
x: noNanVals, x: noNanVals,
amean: ss.mean(avals).toFixed(3), amean: ss.mean(avals).toFixed(3),
name: key[0].toString() + " MAD : " + ss.mean(avals).toPrecision(4), name: key[0].toString() + " MAD : " + ss.mean(avals).toPrecision(4),
type: 'box', type: 'box',
boxmean: 'sd' boxmean: 'sd'
}; };
graphdat.push(box) graphdat.push(box)
} }
var layout = { var layout = {
paper_bgcolor: 'rgba(0,0,0,0)', paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)',
gap: 0, gap: 0,
legend: { legend: {
traceorder: 'reversed', traceorder: 'reversed',
}, },
xaxis: { xaxis: {
title: { title: {
text: 'Energy (eV)', text: 'Energy (eV)',
} }
}, },
bgcolor:'#E2E2E2', bgcolor: '#E2E2E2',
bordercolor:'#FFFFFF', bordercolor: '#FFFFFF',
borderwidth: 2, borderwidth: 2,
// autosize: false, // autosize: false,
width: 850, width: 850,
height: 500, height: 500,
margin: { margin: {
l: 0, l: 0,
r: 10, r: 10,
b: 15, b: 15,
t: 20, t: 20,
pad: 0, pad: 0,
}, },
} }
Plotly.newPlot('graph_div', graphdat, layout); Plotly.newPlot('graph_div', graphdat, layout);
processingIndicator.isActive=false processingIndicator.isActive = false
} }
async function reloadContent(){ async function reloadContent() {
processingIndicator.isActive=true processingIndicator.isActive = true
const LatexInline=['\\(','\\)'] const LatexInline = ['\\(', '\\)']
window.filt=window.dats window.filt = window.dats
$('#form_dat > select').each(function(){ $('#form_dat > fieldset > div > select').each(function () {
const prop=$(this).attr("name") const prop = $(this).attr("name")
const values=$(this).val() const values = $(this).val()
window.filt=window.filt.filter((d)=>{ window.filt = window.filt.filter((d) => {
if(typeof values=="undefined" || values==null){ if (typeof values == "undefined" || values == null) {
return false return false
} }
return values.includes(JSON.stringify(d[prop])) return values.includes(JSON.stringify(d[prop]))
}) })
}) })
var dtb=$("#dat_table > tbody"); var dtb = $("#dat_table > tbody");
dtb.empty() dtb.empty()
sel_ref=$("#sel_ref") sel_ref = $("#sel_ref")
for (const d of window.filt) { for (const d of window.filt) {
var row=$("<tr/>") var row = $("<tr/>")
var rowd=[] var rowd = []
const els=[d.molecule,d.comment,d.code,d.method,d.DOI] const els = [d.molecule, d.comment, d.code, d.method, d.DOI]
var op=document.createElement("option") var op = document.createElement("option")
var opObjVal=els.slice(2) var opObjVal = els.slice(2)
$("<option/>",{ $("<option/>", {
value:JSON.stringify(opObjVal) value: JSON.stringify(opObjVal)
}).text(d.method).appendTo(sel_ref) }).text(d.method).appendTo(sel_ref)
var tableels=els.slice() var tableels = els.slice()
if(d instanceof oneStateDataFileBase){ if (d instanceof oneStateDataFileBase) {
tableels.splice(3,0,d.geometry) tableels.splice(3, 0, d.geometry)
} }
else if(d instanceof twoStateDataFileBase){ else if (d instanceof twoStateDataFileBase) {
tableels.splice(3,0,[d.GS,d.ES]) tableels.splice(3, 0, [d.GS, d.ES])
} }
for(const el of tableels){ for (const el of tableels) {
td=$("<td/>",{ td = $("<td/>", {
style:"white-space: nowrap;" style: "white-space: nowrap;"
}) })
if(trueTypeOf(el)=="doi"){ if (trueTypeOf(el) == "doi") {
var publi= await window.Cite.async(el.string) var publi = await window.Cite.async(el.string)
$("<a/>",{ $("<a/>", {
href: el.url, href: el.url,
target: "_blank", target: "_blank",
}).html(publi.format('citation', { }).html(publi.format('citation', {
format: 'html', format: 'html',
lang: 'en-US' lang: 'en-US'
})).appendTo(td) })).appendTo(td)
} }
else{ else {
$(td).text(el) $(td).text(el)
} }
$(row).append(td) $(row).append(td)
} }
$("<a/>",{ $("<a/>", {
target:"_blank", target: "_blank",
innerText:"Go to file", innerText: "Go to file",
href: await d.sourceFile.getViewerURL() href: await d.sourceFile.getViewerURL()
}).appendTo($("<td/>")).appendTo(row) }).appendTo($("<td/>")).appendTo(row)
$(dtb).append(row) $(dtb).append(row)
} }
processingIndicator.isActive=true processingIndicator.isActive = true
await reloadStat() await reloadStat()
} }
</script> </script>
{{< getDataFilesName >}} {{< getDataFilesName >}}
<p> <p>
In this page you can compare multiple dataset and have somme statistics to evaluate method or basis accuracy. In this page you can compare multiple dataset and have somme statistics to evaluate method or basis accuracy.
For this follow this steps For this follow this steps
<ol> <ol>
<li>Select a value type (Absorbtion, fluorescence or \(\Delta \text{ZPE}\))</li> <li>Select a value type (Absorbtion, fluorescence or \(\Delta \text{ZPE}\))</li>
<li>You can add custom files if you want</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> <li>Choose each parameters (of course you can select multiples values for each)</li>
<ul> <ul>
<li>Molecule</li> <li>Molecule</li>
<li>Method</li> <li>Method</li>
<li>Paper</li> <li>Paper</li>
</ul> </ul>
<li>Select a reference from already selected data (by default the first is already selected)</li> <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> <li>Now you can see the list of selected data and some statistics about these data</li>
</ol> </ol>
</p> </p>
<form id="form_dat" action="javascript:reloadContent()" method="post"> <form id="form_dat" action="javascript:reloadContent()" method="post">
<fieldset>
<legend>Data type</legend> <legend>Data type</legend>
<input type="radio" id="abs" value="abs" name="datatype"> <input type="radio" id="abs" value="abs" name="datatype">
<label for="abs">Absorption</label> <label for="abs">Absorption</label>
@ -276,26 +276,34 @@ draft: false
<label for="fluo">Fluorescence</label> <label for="fluo">Fluorescence</label>
<input type="radio" id="zpe" value="zpe" name="datatype"> <input type="radio" id="zpe" value="zpe" name="datatype">
<label for="zpe">\(\Delta \text{ZPE}\)</label> <label for="zpe">\(\Delta \text{ZPE}\)</label>
<br/> </fieldset>
<label for="customFiles_input">Add custom data file</label> <fieldset>
<input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input> <div>
<br/> <label for="customFiles_input">Add custom data file</label>
<label for="mol_select">Molecule</label> <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
<select multiple id="mol_select" name="molecule"></select> </div>
<label for="method_select">Method</label> </fieldset>
<select multiple id="method_select" name="method"></select> <fieldset>
<label for="DOI_select">Paper</label> <div>
<select multiple id="DOI_select" name="DOI"></select> <label for="mol_select">Molecule</label>
<br/> <select multiple id="mol_select" name="molecule"></select>
<input type="submit" disabled=true value="Load"></input> </div>
</form> <div>
<form id="form_ref"> <label for="method_select">Method</label>
<label for="sel_ref">Reference</label> <select multiple id="method_select" name="method"></select>
<select id="sel_ref" onchange="reloadStat()"> </div>
</select> <div>
</form> <label for="DOI_select">Paper</label>
<br/> <select multiple id="DOI_select" name="DOI"></select>
<div id="data_div"> </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"> <table id="dat_table">
<thead> <thead>
<th>Molecule</th> <th>Molecule</th>
@ -311,8 +319,8 @@ draft: false
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div> </section>
<div id="stat_div"> <section>
<table id="stat_table"> <table id="stat_table">
<thead> <thead>
<th>Method</th> <th>Method</th>
@ -331,5 +339,5 @@ draft: false
</tbody> </tbody>
<div id="graph_div"></div> <div id="graph_div"></div>
</table> </table>
</div> </section>
{{< waitModal >}} {{< waitModal >}}

View File

@ -3,186 +3,189 @@ title: "One dataset"
date: 2019-08-29 09:00 date: 2019-08-29 09:00
draft: false draft: false
--- ---
<link rel="stylesheet" type="text/css" href="/css/modal.css" /> <link rel="stylesheet" type="text/css" href="/css/modal.css" />
<script src="/js/processingIndicator.js" type="text/javascript"></script> <script src="/js/processingIndicator.js" type="text/javascript"></script>
<script src="/js/data.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/loadAllData.js" type="text/javascript"></script>
<script src="/js/getFullDataPath.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/getTextFromFile.js" type="text/javascript"></script>
<script src="/js/trueTypeOf.js" type="text/javascript"></script> <script src="/js/trueTypeOf.js" type="text/javascript"></script>
<script src="/js/noNan.js"></script> <script src="/js/noNan.js"></script>
<script src="/js/websiteFile.js"></script> <script src="/js/websiteFile.js"></script>
{{< getDataFilesName >}} {{< getDataFilesName >}}
<script> <script>
window.onload=async function() window.onload = async function () {
{ window.Cite = require('citation-js');
window.Cite = require('citation-js'); window.dats = await loadAllData()
window.dats=await loadAllData() window.data = new CombinedData()
window.data=new CombinedData() molecules = new Set(Object.values(window.dats).flat().map((d) => d.molecule))
molecules=new Set(Object.values(window.dats).flat().map((d)=>d.molecule)) for (const el of molecules) {
for (const el of molecules) { $("<option/>", { value: el }).text(el).appendTo($("#select_mol"))
$("<option/>",{value:el}).text(el).appendTo($("#select_mol")) }
} }
} function select_mol_onchange(event) {
function select_mol_onchange(event){ update_mol(event.target.value)
update_mol(event.target.value) }
} function select_abs_onchange(event) {
function select_abs_onchange(event){ update_abs(window.dats["abs"][event.target.value])
update_abs(window.dats["abs"][event.target.value]) }
} function select_fluo_onchange(event) {
function select_fluo_onchange(event){ update_fluo(window.dats["fluo"][event.target.value])
update_fluo(window.dats["fluo"][event.target.value]) }
} function select_ZPE_onchange(event) {
function select_ZPE_onchange(event){ update_ZPE(window.dats["ZPE"][event.target.value])
update_ZPE(window.dats["ZPE"][event.target.value]) }
} async function update_mol(molecule) {
async function update_mol(molecule){ processingIndicator.isActive = true
processingIndicator.isActive=true for (const [key, dat] of Object.entries(window.dats)) {
for (const [key,dat] of Object.entries(window.dats)) { var s = $(String.raw`#select_${key}`)
var s=$(String.raw`#select_${key}`) $(s).find('option[value!=""]').remove()
$(s).find('option[value!=""]').remove() $(s).find('option[value=""]').first().prop('selected', true)
$(s).find('option[value=""]').first().prop('selected', true)
dat.forEach((val,index)=>{ dat.forEach((val, index) => {
if(val.molecule==molecule){ if (val.molecule == molecule) {
$("<option/>",{value:index}).text(val.method.toString()).appendTo(s) $("<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)
}
}
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/>", {
processingIndicator.isActive=false 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;
} }
async function update_abs(abs){ }
window.data.Abs=abs var tb = $("#ex_table > tbody");
reload() $(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)
} }
async function update_fluo(fluo){ tb.append(row)
window.data.Fluo=fluo }
reload() await MathJax.typesetPromise();
} $("#ex_sec").attr("hidden", false)
async function update_ZPE(ZPE){ await MathJax.typesetPromise();
window.data.ZPE=ZPE processingIndicator.isActive = false
reload() }
} </script>
async function clear(){ <p>
$("#ex_table > tbody,data_par").each(()=>{ In this page you can calculate \(E_\text{adia}\) \(E_\text{0-0}\) from \(E_\text{abs}\) \(E_\text{fluo}\) and \(\Delta
$(this).empty() E_\text{ZPE}\)
}) For this select a method for absorption, fluorescence or ZPE
</p>
} <form>
async function reload() { <div>
processingIndicator.isActive=true <label for="select_mol">Select a molecule</label>
clear() <select id="select_mol" onchange="select_mol_onchange(event)">
const LatexInline=['\\(','\\)'] <option value="" disabled=true selected=true>Select a molecule</option>
var md=[]; </select>
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
}
</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>
</div> </div>
<div> <div>
<label>Select an absorption method<br/> <label for="select_abs">Select an absorption method</label>
<select id="select_abs" onchange="select_abs_onchange(event)"> <select id="select_abs" onchange="select_abs_onchange(event)">
<option value="" disabled=true selected=true>Select an absorption method</option> <option value="" disabled=true selected=true>Select an absorption method</option>
</select> </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>
</div> </div>
<h1>Data</h1> <div>
<p id=data_par> <label for="select_fluo">Select a fluorescence method</label>
<div id="meta_div"></div> <select id="select_fluo" onchange="select_fluo_onchange(event)">
<div id="ex_div" hidden=true> <option value="" disabled=true selected=true>Select a fluorescence method</option>
<h2>Excitation</h2> </select>
<table id="ex_table"> </div>
<thead> <div>
<th>Transition</th> <label for="select_ZPE">Select a ZPE method</label>
<th>\(E_\text{abs}\)</th> <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
<th>\(E_\text{fluo}\)</th> <option value="" disabled=true selected=true>Select a ZPE method</option>
<th>\(\Delta E_\text{ZPE}\)</th> </select>
<th>\(E_\text{adia}\)</th> </div>
<th>\(E_\text{0-0}\)</th> </form>
</thead> <h1>Data</h1>
<tbody></tbody> <section id=data>
</table> <section id="meta_sec"></section>
</div> <section id="ex_sec" hidden=true>
</p> <h2>Excitation</h2>
{{< waitModal >}} <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 >}}