10
0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-12-25 05:43:46 +01:00

Using jquery to build the dynamic UI

This commit is contained in:
Mickaël Véril 2019-10-09 17:53:10 +02:00
parent 4870e16501
commit 6b121d459e
4 changed files with 123 additions and 150 deletions

View File

@ -21,24 +21,25 @@ draft: false
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
$("#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));
document.getElementById("Geom_th").hidden=false
$("#Geom_th").attr("hidden",false)
break;
case "fluo":
proms=getFluoFilesName().map((f) => FluoDataFile.loadAsync(f));
document.getElementById("Geom_th").hidden=false
$("#Geom_th").attr("hidden",false)
break;
case "zpe":
proms=getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
document.getElementById("GSGeom_th").hidden=false
document.getElementById("ESGeom_th").hidden=false
$("#GSGeom_th,#ESGeom_th").each(function(){
$(this).attr("hidden",false)
})
break;
}
window.dats=await Promise.all(proms)
@ -48,16 +49,14 @@ draft: false
})
}
function reloadFileSelector(){
const fsel=document.getElementById("customFiles_input")
fsel.value=""
fsel.disabled=false
$("#customFiles_input").attr("value","").attr("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))
{
const files=$("#customFiles_input")[0].files
for(file of [...files]) {
switch (radioval) {
case "abs":
var dat=await AbsDataFile.loadAsync(file)
@ -78,11 +77,10 @@ draft: false
$(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)
}
$("<option/>",{
value: JSON.stringify(val)
}).text(val.toString()).appendTo($(this))
}
})
$('#form_dat > input[type="submit"').prop('disabled', false);
processingIndicator.isActive=false
@ -90,11 +88,10 @@ draft: false
}
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 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])
@ -123,38 +120,36 @@ draft: false
sdic.delete(refstr)
var graphdat=[]
for(const[keystr,vals] of sdic){
row=document.createElement("tr")
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=document.createElement("td")
var td=$("<td/>",{
style:"white-space: nowrap;"
})
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', {
var publi=await window.Cite.async(el.string)
$("<a/>",{
href: el.url,
target:"_blank"
}).html(publi.format('citation', {
format: 'html',
lang: 'en-US'
})
td.appendChild(lnkdoi)
})).appendTo(td)
}
else{
td.innerText=el
$(td).text(el)
}
row.appendChild(td)
$(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)]){
var td=document.createElement("td")
td.innerText=noNanPrecision(val,3)
row.appendChild(td)
$("<td/>").text(noNanPrecision(val,3)).appendTo(row)
}
stb.appendChild(row)
$(stb).append(row)
var box = {
x: noNanVals,
amean: ss.mean(avals).toFixed(3),
@ -207,18 +202,18 @@ draft: false
return values.includes(JSON.stringify(d[prop]))
})
})
var dtb=document.getElementById("dat_table_b");
dtb.innerHTML=''
sel_ref=document.getElementById("sel_ref")
var dtb=$("#dat_table > tbody");
dtb.empty()
sel_ref=$("#sel_ref")
for (const d of window.filt) {
var row=document.createElement("tr")
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)
op.value=JSON.stringify(opObjVal)
op.innerText=d.method
sel_ref.appendChild(op)
$("<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)
@ -227,30 +222,30 @@ draft: false
tableels.splice(3,0,[d.GS,d.ES])
}
for(const el of tableels){
td=document.createElement("td")
td=$("<td/>",{
style:"white-space: nowrap;"
})
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', {
var publi= await window.Cite.async(el.string)
$("<a/>",{
href: el.url,
target: "_blank",
}).html(publi.format('citation', {
format: 'html',
lang: 'en-US'
})
td.appendChild(lnkdoi)
})).appendTo(td)
}
else{
td.innerText=el
$(td).text(el)
}
row.appendChild(td)
$(row).append(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)
$("<a/>",{
target:"_blank",
innerText:"Go to file",
href: await d.sourceFile.getViewerURL()
}).appendTo($("<td/>")).appendTo(row)
$(dtb).append(row)
}
processingIndicator.isActive=true
await reloadStat()
@ -282,7 +277,7 @@ draft: false
<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>
<label for="customFiles_input">Add custom data file</label>
<input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
<br/>
<label for="mol_select">Molecule</label>
@ -313,7 +308,7 @@ draft: false
<th>Paper</th>
<th>File</th>
</thead>
<tbody id="dat_table_b">
<tbody>
</tbody>
</table>
</div>
@ -332,7 +327,7 @@ draft: false
<th>Variance</th>
<th>Standard deviation</th>
</thead>
<tbody id="stat_table_b">
<tbody>
</tbody>
<div id="graph_div"></div>
</table>

View File

@ -21,10 +21,7 @@ draft: false
window.data=new CombinedData()
molecules=new Set(Object.values(window.dats).flat().map((d)=>d.molecule))
for (const el of molecules) {
op=document.createElement("option")
op.value=el
op.innerText=el
document.getElementById("select_mol").appendChild(op)
$("<option/>",{value:el}).text(el).appendTo($("#select_mol"))
}
}
function select_mol_onchange(event){
@ -42,16 +39,13 @@ draft: false
async function update_mol(molecule){
processingIndicator.isActive=true
for (const [key,dat] of Object.entries(window.dats)) {
var s=document.getElementById(String.raw`select_${key}`)
var s=$(String.raw`#select_${key}`)
$(s).find('option[value!=""]').remove()
$(s).find('option[value=""]').first().prop('selected', true)
dat.forEach((val,index)=>{
if(val.molecule==molecule){
var op=document.createElement("option")
op.value=index
op.innerText=val.method.toString()
s.appendChild(op)
$("<option/>",{value:index}).text(val.method.toString()).appendTo(s)
}
})
}
@ -70,16 +64,15 @@ draft: false
reload()
}
async function clear(){
for(id of ["ex_table_b","data_par"]){
document.getElementById(id).innerHTML=""
}
$("#ex_table > tbody,data_par").each(()=>{
$(this).empty()
})
}
async function reload() {
processingIndicator.isActive=true
clear()
const LatexInline=['\\(','\\)']
var par=document.getElementById("data_par")
var md=[];
var els=[];
var customRenderingProp=["excitations","sourceFile"]
@ -94,14 +87,12 @@ draft: false
md.push(window.data[key].sourceFile)
}
}
div=document.getElementById("meta_div")
div.innerHTML=""
div=$("#meta_div")
$(div).empty()
for (const element of md) {
var node =null;
switch (trueTypeOf(element)) {
case "string":
node= document.createElement("h2");
node.innerText=element;
$("<h2/>").text(element).appendTo(div)
break;
case "doi":
var publi=await Cite.async(element.string)
@ -110,43 +101,39 @@ draft: false
template: 'apa',
lang: 'en-US'
})
node=document.createElement("a")
node.innerHTML=output
node.target='_blank'
node.href=element.url
$("<a/>",{
href:element.url,
target:"_blank"}).html(output).appendTo(div)
break
case "websiteFile":
node=document.createElement("a")
node.innerText="Go to file"
node.target='_blank'
node.href= await element.getViewerURL()
$("<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)
node = document.createElement("div");
node.innerText= k+': '+v;
$("<div/>").text(k+': '+v).appendTo(div)
break;
}
div.appendChild(node);
}
var tb=document.getElementById("ex_table_b");
var tb=$("#ex_table > tbody");
$(tb).empty()
for (const el of window.data.excitations) {
var row=document.createElement("tr")
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=document.createElement("td")
td.innerText=d
row.appendChild(td)
$("<td/>").text(d).appendTo(row)
}
tb.appendChild(row)
tb.append(row)
}
await MathJax.typesetPromise();
document.getElementById("ex_div").hidden=false
$("#ex_div").attr("hidden",false)
await MathJax.typesetPromise();
processingIndicator.isActive=false
}
@ -194,9 +181,7 @@ draft: false
<th>\(E_\text{adia}\)</th>
<th>\(E_\text{0-0}\)</th>
</thead>
<tbody id="ex_table_b">
</tbody>
<tbody></tbody>
</table>
</div>
</p>

View File

@ -20,65 +20,50 @@ draft: false
const publiscite = await Cite.async(dois)
const publis=publiscite.format('data', {format: 'object'})
for (const publi of publis){
const art=document.createElement("article")
const art=$("<article/>").addClass("paper")
art.className="paper"
const titlelink=document.createElement("a")
const titleh=document.createElement("h1")
titleh.innerText=publi.title
titlelink.appendChild(titleh)
titlelink.href=publi.URL
art.appendChild(titlelink)
$("<a/>",{
href:publi.URL,
target:"_blank"
}).html($("<h1/>").text(publi.title)).appendTo(art)
const authors=publi.author
const ulauths=document.createElement("ul")
ulauths.className="authors-list"
const ulauthors=$("<ul/>").addClass("authors-list").appendTo(art)
for(const author of authors){
const liauth=document.createElement("li")
liauth.className="author-item"
const spanAuth=document.createElement("span")
spanAuth.innerText=String.raw`${author.given} ${author.family}`
liauth.appendChild(spanAuth)
const liauth=$("<li/>").addClass("author-item")
const spanAuth=$("<span/>").text(String.raw`${author.given} ${author.family}`).appendTo(liauth)
if(author.sequence==="first"){
star=document.createElement("strong")
star.innerText="*"
liauth.appendChild(star)
$(spanAuth).after($("<strong/>").text("*"))
}
var notifycontent=document.createElement("div")
notifycontent.className="author-info"
const notifyhead=document.createElement("h1")
notifyhead.innerText=String.raw`${author.given} ${author.family}`
notifycontent.appendChild(notifyhead)
const ulaff=document.createElement("ul")
ulaff.className="affiliation-list"
notifycontent.appendChild(ulaff)
var notifycontent=$("<div/>").addClass("author-info")
$("<h1/>").text(String.raw`${author.given} ${author.family}`).appendTo(notifycontent)
ulaff=$("<ul/>").addClass("affiliation-list").appendTo(notifycontent)
for(const a of author.affiliation){
const liaff=document.createElement("li")
liaff.innerText=a.name
ulaff.appendChild(liaff)
$("<li/>").text(a.name).appendTo(ulaff)
}
if(author["authenticated-orcid"]){
const html=$.parseHTML(String.raw`<div class="orcid-id"><a href="https://orcid.org" target="_blank"><img alt="ORCID logo" src="https://orcid.org/sites/default/files/images/orcid_16x16.png" width="16" height="16"/></a> <a href="${author.ORCID}" target="_blank">${author.ORCID} </a></div>`)
notifycontent.appendChild(html[0])
const html=String.raw`<div class="orcid-id"><a href="https://orcid.org" target="_blank"><img alt="ORCID logo" src="https://orcid.org/sites/default/files/images/orcid_16x16.png" width="16" height="16"/></a> <a href="${author.ORCID}" target="_blank">${author.ORCID} </a></div>`
notifycontent.append(html)
}
tippy(spanAuth, {
content: notifycontent,
tippy(spanAuth[0], {
content: notifycontent[0],
theme: 'light',
interactive: true,
});
ulauths.appendChild(liauth)
ulauthors.append(liauth)
}
art.appendChild(ulauths)
const journaldiv=document.createElement("div")
journaldiv.innerText=(("container-title-short" in publi) ? publi["container-title-short"] : publi["container-title"])
journaldiv.innerText+=publi.issued["date-parts"][0][0]
journaldiv.innerHTML+=String.raw` ${publi.volume}(${publi.issue}), ${publi.page}`
art.appendChild(journaldiv)
const doilink=document.createElement("a")
doilink.href=publi.URL
doilink.innerText=String.raw`DOI: ${publi.DOI}`
art.appendChild(doilink)
const lipub=document.createElement("li")
lipub.appendChild(art)
document.getElementById("papers_ul").appendChild(lipub)
journalpar=$("<div/>").appendTo(art)
$("<span/>").text((("container-title-short" in publi) ? publi["container-title-short"] : publi["container-title"])).appendTo(journalpar)
$("<span/>").text(publi.issued["date-parts"][0][0]).appendTo(journalpar)
journalpar.append(" ")
$("<span/>").text(publi.volume).appendTo(journalpar)
$("<span/>").addClass("issue").text(publi.issue).appendTo(journalpar)
journalpar.append(", ")
$("<span/>").text(publi.page).appendTo(journalpar)
$("<a/>",{
href:publi.URL,
target:"_blank"
}).text(String.raw`DOI: ${publi.DOI}`).appendTo(art)
$(art).appendTo("<li/>").appendTo("#papers_ul")
}
}
</script>

View File

@ -33,6 +33,14 @@ ul.papers-list{
content: ""
}
.paper .issue::before{
content: "("
}
.paper .issue::after{
content: ")"
}
.orcid-id img {
vertical-align: middle;
float: left;