mirror of
https://github.com/LCPQ/QUESTDB_website.git
synced 2024-07-03 18:06:06 +02:00
Modernisation of the html
This commit is contained in:
parent
b40223f149
commit
521e085290
|
|
@ -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 >}}
|
||||||
|
|
@ -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)=>{
|
|
||||||
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()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
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
|
sec = $("#meta_sec")
|
||||||
clear()
|
$(sec).empty()
|
||||||
const LatexInline=['\\(','\\)']
|
for (const element of md) {
|
||||||
var md=[];
|
switch (trueTypeOf(element)) {
|
||||||
var els=[];
|
case "string":
|
||||||
var customRenderingProp=["excitations","sourceFile"]
|
$("<h2/>").text(element).appendTo(sec)
|
||||||
for (const key of Object.keys(window.data)) {
|
break;
|
||||||
if (window.data[key]!=null){
|
case "doi":
|
||||||
md.push(key)
|
var publi = await Cite.async(element.string)
|
||||||
for (const prop of Object.keys(window.data[key])) {
|
var output = publi.format('bibliography', {
|
||||||
if(!(customRenderingProp.includes(prop)))
|
format: 'html',
|
||||||
md.push([prop,window.data[key][prop]])
|
template: 'apa',
|
||||||
}
|
lang: 'en-US'
|
||||||
md.push(window.data[key].DOI)
|
})
|
||||||
md.push(window.data[key].sourceFile)
|
$("<a/>", {
|
||||||
}
|
href: element.url,
|
||||||
}
|
target: "_blank"
|
||||||
div=$("#meta_div")
|
}).html(output).appendTo(sec)
|
||||||
$(div).empty()
|
break
|
||||||
for (const element of md) {
|
case "websiteFile":
|
||||||
switch (trueTypeOf(element)) {
|
$("<a/>", {
|
||||||
case "string":
|
href: element.url,
|
||||||
$("<h2/>").text(element).appendTo(div)
|
target: "_blank",
|
||||||
break;
|
href: element.getViewerURL()
|
||||||
case "doi":
|
}).text("Go to file").appendTo(sec)
|
||||||
var publi=await Cite.async(element.string)
|
break
|
||||||
var output = publi.format('bibliography', {
|
case "Array":
|
||||||
format: 'html',
|
k = element[0]
|
||||||
template: 'apa',
|
v = element[1]
|
||||||
lang: 'en-US'
|
k = k.charAt(0).toUpperCase() + k.slice(1)
|
||||||
})
|
$("<div/>").text(k + ': ' + v).appendTo(sec)
|
||||||
$("<a/>",{
|
break;
|
||||||
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>
|
var tb = $("#ex_table > tbody");
|
||||||
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}\)
|
$(tb).empty()
|
||||||
For this select a method for absorption, fluorescence or ZPE
|
for (const el of window.data.excitations) {
|
||||||
</p>
|
row = $("<tr/>")
|
||||||
<div>
|
var rowd = []
|
||||||
<label>Select a molecule<br/>
|
rowd.push(String.raw`${LatexInline[0]} ${el.initial.toLaTeX()} \rightarrow ${el.final.toLaTeX()}${LatexInline[1]}`)
|
||||||
<select id="select_mol" onchange="select_mol_onchange(event)">
|
var e = [el.Eabs, el.Efluo, el.EZPE, el.Eadia, el.Ezz]
|
||||||
<option value="" disabled=true selected=true>Select a molecule</option>
|
e.forEach((val) => rowd.push(noNanPrecision(val, 3)))
|
||||||
</select>
|
for (d of rowd) {
|
||||||
</label>
|
$("<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>
|
||||||
<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 >}}
|
||||||
Loading…
Reference in New Issue
Block a user