PTEROSOR/QUESTDB_website
10
0
Fork 0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-07-03 18:06:06 +02:00
Code Releases Activity

Using jquery to build the dynamic UI

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
content/multipledataset.html
View File

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

63
content/onedataset.html
View File

@ -21,10 +21,7 @@ draft: false
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) {
op=document.createElement("option") $("<option/>",{value:el}).text(el).appendTo($("#select_mol"))
op.value=el
op.innerText=el
document.getElementById("select_mol").appendChild(op)
} }
} }
function select_mol_onchange(event){ function select_mol_onchange(event){
@ -42,16 +39,13 @@ draft: false
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=document.getElementById(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){
var op=document.createElement("option") $("<option/>",{value:index}).text(val.method.toString()).appendTo(s)
op.value=index
op.innerText=val.method.toString()
s.appendChild(op)
} }
}) })
} }
@ -70,16 +64,15 @@ draft: false
reload() reload()
} }
async function clear(){ async function clear(){
for(id of ["ex_table_b","data_par"]){ $("#ex_table > tbody,data_par").each(()=>{
document.getElementById(id).innerHTML="" $(this).empty()
} })
} }
async function reload() { async function reload() {
processingIndicator.isActive=true processingIndicator.isActive=true
clear() clear()
const LatexInline=['\\(','\\)'] const LatexInline=['\\(','\\)']
var par=document.getElementById("data_par")
var md=[]; var md=[];
var els=[]; var els=[];
var customRenderingProp=["excitations","sourceFile"] var customRenderingProp=["excitations","sourceFile"]
@ -94,14 +87,12 @@ draft: false
md.push(window.data[key].sourceFile) md.push(window.data[key].sourceFile)
} }
} }
div=document.getElementById("meta_div") div=$("#meta_div")
div.innerHTML="" $(div).empty()
for (const element of md) { for (const element of md) {
var node =null;
switch (trueTypeOf(element)) { switch (trueTypeOf(element)) {
case "string": case "string":
node= document.createElement("h2"); $("<h2/>").text(element).appendTo(div)
node.innerText=element;
break; break;
case "doi": case "doi":
var publi=await Cite.async(element.string) var publi=await Cite.async(element.string)
@ -110,43 +101,39 @@ draft: false
template: 'apa', template: 'apa',
lang: 'en-US' lang: 'en-US'
}) })
node=document.createElement("a") $("<a/>",{
node.innerHTML=output href:element.url,
node.target='_blank' target:"_blank"}).html(output).appendTo(div)
node.href=element.url
break break
case "websiteFile": case "websiteFile":
node=document.createElement("a") $("<a/>",{href:element.url,
node.innerText="Go to file" target:"_blank",
node.target='_blank' href: element.getViewerURL()
node.href= await element.getViewerURL() }).text("Go to file").appendTo(div)
break break
case "Array": case "Array":
k=element[0] k=element[0]
v=element[1] v=element[1]
k=k.charAt(0).toUpperCase() + k.slice(1) k=k.charAt(0).toUpperCase() + k.slice(1)
node = document.createElement("div"); $("<div/>").text(k+': '+v).appendTo(div)
node.innerText= k+': '+v;
break; 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) { for (const el of window.data.excitations) {
var row=document.createElement("tr") row=$("<tr/>")
var rowd=[] var rowd=[]
rowd.push(String.raw`${LatexInline[0]} ${el.initial.toLaTeX()} \rightarrow ${el.final.toLaTeX()}${LatexInline[1]}`) 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] var e=[el.Eabs,el.Efluo,el.EZPE,el.Eadia,el.Ezz]
e.forEach((val)=>rowd.push(noNanPrecision(val,3))) e.forEach((val)=>rowd.push(noNanPrecision(val,3)))
for(d of rowd) { for(d of rowd) {
td=document.createElement("td") $("<td/>").text(d).appendTo(row)
td.innerText=d
row.appendChild(td)
} }
tb.appendChild(row) tb.append(row)
} }
await MathJax.typesetPromise(); await MathJax.typesetPromise();
document.getElementById("ex_div").hidden=false $("#ex_div").attr("hidden",false)
await MathJax.typesetPromise(); await MathJax.typesetPromise();
processingIndicator.isActive=false processingIndicator.isActive=false
} }
@ -194,9 +181,7 @@ draft: false
<th>\(E_\text{adia}\)</th> <th>\(E_\text{adia}\)</th>
<th>\(E_\text{0-0}\)</th> <th>\(E_\text{0-0}\)</th>
</thead> </thead>
<tbody id="ex_table_b"> <tbody></tbody>
</tbody>
</table> </table>
</div> </div>
</p> </p>

77
content/papers.html
View File

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

8
static/css/paper.css
View File

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