625 lines
30 KiB
HTML
625 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<title>Predict</title>
|
|
<style>
|
|
.dbHeader{
|
|
background: rgb(250, 137, 89);
|
|
font-size: 2vh;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: 1vh;
|
|
margin-bottom: 2vh;
|
|
/* text-align: center; */
|
|
|
|
}
|
|
|
|
.tableHeader{
|
|
/* background: rgb(255, 171, 141); */
|
|
/* border-top: solid rgb(255, 171, 141);
|
|
border-bottom: solid rgb(255, 171, 141); */
|
|
font-size: 1.5vh;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
color: black;
|
|
padding: 1vh;
|
|
margin-left: 1vh;
|
|
margin-right: 1vh;
|
|
|
|
}
|
|
|
|
.listEntry{
|
|
margin-left: 1vh;
|
|
margin-right: 1vh;
|
|
/* background: #fcd3b8; */
|
|
border-top: solid black 1px;
|
|
/* border-bottom: solid black; */
|
|
background: #ffffff;
|
|
font-size: 1vh;
|
|
padding: 1vh;
|
|
font-family: sans-serif;
|
|
color: #000;
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: initial;
|
|
width: 1vh;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
display: none;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
display: initial;
|
|
background-color: rgb(206, 206, 206);
|
|
}
|
|
|
|
::-webkit-scrollbar-button {
|
|
display: none;
|
|
background-color: rgb(79, 55, 47);
|
|
}
|
|
ul{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
list-style-type: none;
|
|
/* max-height: 50%;
|
|
overflow-y: scroll; */
|
|
}
|
|
|
|
/*::-webkit-scrollbar-corner {
|
|
background-color: rgb(121, 121, 121);
|
|
}*/
|
|
</style>
|
|
<script>
|
|
if (typeof module === 'object') {window.module = module; module = undefined;}
|
|
</script>
|
|
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
|
|
|
|
<!-- <script type="text/javascript" src="../../../lib/3rdparty/all.js"></script>
|
|
<script type="text/javascript" src="../../../lib/all.js"></script> -->
|
|
|
|
<script src="../lib/3rdparty/jquery.js" charset="utf-8"></script>
|
|
<script src="../lib/3rdparty/keyboard/keyboard.js" charset="utf-8"></script>
|
|
<script src="../lib/3rdparty/keyboard/keyboard-layout.js" charset="utf-8"></script>
|
|
<link rel="stylesheet" href="../lib/3rdparty/keyboard/basic.css" charset="utf-8">
|
|
|
|
<!-- keyboard widget css & script (required) -->
|
|
<link href="../lib/3rdparty/virtual-keyboard/css/keyboard-basic.min.css" rel="stylesheet">
|
|
<script src="../lib/3rdparty/virtual-keyboard/js/jquery.keyboard.js"></script>
|
|
|
|
</head>
|
|
<body style="background: rgb(255, 255, 255)">
|
|
<img id="predictLogo" src="../assets/img/PREDICT_logo_first_draft4_cropped.png" style="height: 10vh; margin: auto; display: block" onclick="reload(event)">
|
|
<!-- <div id="_div" style="background: red; width: 100px; height: 100px; position: absolute"></div> -->
|
|
<div class="keyboard-host">
|
|
|
|
</div>
|
|
<h1 style="font-family: sans-serif; font-size: 3vh"> Search Results:</h1>
|
|
<div id="content" style="width: 100%; height: 80vh; background: rgb(255, 255, 255); overflow: scroll">
|
|
</div>
|
|
<script>
|
|
|
|
let pointerX=0
|
|
let pointery=0
|
|
|
|
window.addEventListener('pointerdown',(e)=>{
|
|
pointerX = e.clientX
|
|
pointerY = e.clientY
|
|
//console.log(e.clientX+" "+e.clientY)
|
|
})
|
|
|
|
window.addEventListener('pointermove',(e)=>{
|
|
pointerX = e.clientX
|
|
pointerY = e.clientY
|
|
//console.log(e.clientX+" "+e.clientY)
|
|
})
|
|
|
|
let content=document.getElementById("content")
|
|
let foundGenes=[]
|
|
let foundVariants=[]
|
|
let lists = []
|
|
|
|
let xhttp = new XMLHttpRequest()
|
|
let url = window.location.href
|
|
let inputFromURL=url.split('?')[1].replace('%20',' ')
|
|
let gene = inputFromURL.split('#')[0]
|
|
let variant = inputFromURL.split('#')[1]
|
|
|
|
inputFromURL="KRAS:c.34G>T"
|
|
inputFromURL.replace(':','3A')
|
|
inputFromURL.replace('>','3E')
|
|
|
|
let searchstring = gene+":"+variant
|
|
searchstring.replace('>','3E')
|
|
|
|
console.log(inputFromURL,searchstring)
|
|
|
|
createResult(searchstring)
|
|
|
|
function createResult(val) {
|
|
|
|
xhttp.open("GET", "https://predict.informatik.hu-berlin.de:4242/variant/"+val+"?api_token=GFkz4ylE40JfkQ1TCTDJTUuGlVCCgS29UbuSeVSmBwmHc9myaOiImZlGzsyT", false)
|
|
xhttp.send()
|
|
|
|
response = JSON.parse(xhttp.responseText)
|
|
|
|
content.addEventListener("scroll", (e)=>{
|
|
let targetElement = document.elementFromPoint(pointerX,pointerY)
|
|
// console.log("scrolling",pointerX,pointerY)
|
|
if(targetElement.className=="listEntry"){
|
|
|
|
// let targetDBHeader = document.getElementById(targetElement.getAttribute("dbHeaderName"))
|
|
// let targetDBHeaderFake = document.getElementById(targetElement.getAttribute("dbHeaderName")+"Fake")
|
|
// let bb = targetDBHeader.getBoundingClientRect()
|
|
// console.log("scrolling", targetDBHeader.id, bb.top)
|
|
// if(bb.top<250)$(targetDBHeaderFake).show()
|
|
// if(bb.top>250)$(targetDBHeaderFake).hide()
|
|
}
|
|
})
|
|
|
|
/*for(var k in response[val].DB){
|
|
// console.log(k)
|
|
}*/
|
|
console.log("response",response)
|
|
for(var m in response) {
|
|
for(var n in response[m].DB) {
|
|
if(response[m].DB[n]!=null){
|
|
if(response[m].DB[n].resultCount){
|
|
foundGenes.push(response[m].symbol)
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*for(var m in response) {
|
|
for(var n in response[m].Variants) {
|
|
if(response[m].Variants[n]!=null){
|
|
//if(response[m].Variants[n].resultCount){
|
|
foundVariants.push(response[m].Variants[n].symbol)
|
|
break;
|
|
//}
|
|
}
|
|
}
|
|
}*/
|
|
|
|
for(var i=0; i<foundGenes.length; i++){
|
|
let mutation=foundGenes[i]
|
|
// console.log(response[mutation].Variants)
|
|
let fieldSet=document.createElement('fieldset')
|
|
content.appendChild(fieldSet)
|
|
|
|
let geneHeader= document.createElement('legend')
|
|
geneHeader.innerHTML="<img src='../assets/icons/unfold_more_black.png' style='height: 1.5vh; margin-right:10px'>"+foundGenes[i]
|
|
geneHeader.setAttribute("show","0")
|
|
geneHeader.setAttribute("mutation",mutation)
|
|
// geneHeader.style.background="#81BEF7"
|
|
// geneHeader.style.border="solid black 1px"
|
|
// geneHeader.style.display="block"
|
|
geneHeader.style.padding="10px"
|
|
geneHeader.style.margin="10px"
|
|
geneHeader.style.fontSize="2vh"
|
|
geneHeader.style.marginBottom="10px"
|
|
geneHeader.style.fontFamily="sans-serif"
|
|
geneHeader.style.fontWeight="bold"
|
|
|
|
/**$("*[id*="+geneHeader.getAttribute("mutation")+"]").show(500)
|
|
// e.target.style.borderBottom="solid black 0px"
|
|
geneHeader.childNodes[0].src='../icons/unfold_less_black.png'
|
|
$("*[id*=List]").hide()
|
|
$("*[id*=Heading]").hide()
|
|
// $("*[id*=Fake]").hide()
|
|
geneHeader.setAttribute("show","1")*/
|
|
|
|
geneHeader.addEventListener('click',(e)=>{
|
|
switch(e.target.getAttribute("show")){
|
|
case "0":
|
|
$("*[id*="+e.target.getAttribute("mutation")+"]").show(500)
|
|
// e.target.style.borderBottom="solid black 0px"
|
|
e.target.childNodes[0].src='../assets/icons/unfold_less_black.png'
|
|
$("*[id*=List]").hide()
|
|
$("*[id*=Heading]").hide()
|
|
// $("*[id*=Fake]").hide()
|
|
e.target.setAttribute("show","1")
|
|
break
|
|
case "1":
|
|
$("*[id*="+e.target.getAttribute("mutation")+"]").hide(500)
|
|
// e.target.style.borderBottom="solid black 1px"
|
|
e.target.childNodes[0].src='../assets/icons/unfold_more_black.png'
|
|
e.target.setAttribute("show","0")
|
|
break
|
|
}
|
|
|
|
// $('#'+mutation+'GeneralHeading').toggle()
|
|
// $('#'+mutation+'GeneralList').toggle()
|
|
})
|
|
fieldSet.appendChild(geneHeader)
|
|
|
|
for(var j in response[mutation].DB){
|
|
|
|
//console.log(j,response[mutation].DB[j])
|
|
|
|
let dbHeader = document.createElement('div')
|
|
dbHeader.id=mutation+j
|
|
// dbHeader.style.position="fixed"
|
|
dbHeader.innerHTML="<img style='height: 2vh'>"+j+"<input id='_input' class='filterText' type='text' value='' placeholder='Filter' oninput='change(this)' style='margin-left: 10px; margin-right: 10px; font-size: 1.5vh'>"
|
|
dbHeader.className="dbHeader"
|
|
dbHeader.setAttribute('mutation',mutation)
|
|
dbHeader.setAttribute('db',j)
|
|
fieldSet.appendChild(dbHeader)
|
|
|
|
/*let dbHeaderFake = document.createElement('div')
|
|
dbHeaderFake.id=mutation+j+"Fake"
|
|
dbHeaderFake.style.position="absolute"
|
|
dbHeaderFake.style.top="250px"
|
|
// dbHeader.style.position="fixed"
|
|
dbHeaderFake.innerHTML="<img style='height: 2vh'>"+j+" FAKE<input id='_input' class='filterText' type='text' value='' placeholder='Filter' oninput='change(this)' style='margin-left: 10px; margin-right: 10px; font-size: 1.5vh'>"
|
|
dbHeaderFake.className="dbHeader"
|
|
dbHeaderFake.setAttribute('mutation',mutation)
|
|
dbHeaderFake.setAttribute('db',j)
|
|
document.body.appendChild(dbHeaderFake)*/
|
|
|
|
lists.push(dbHeader)
|
|
|
|
let imgArrow=document.createElement('img')
|
|
//dbHeader.appendChild(imgArrow)
|
|
|
|
let listHeading = document.createElement('div')
|
|
listHeading.id=mutation+j+"Heading"
|
|
fieldSet.appendChild(listHeading)
|
|
|
|
let list = document.createElement('ul')
|
|
list.id=mutation+j+"List"
|
|
// list.style.overflow="scroll"
|
|
// list.style.maxHeight="400px"
|
|
fieldSet.appendChild(list)
|
|
|
|
}
|
|
// $("*[id*="+mutation+"]").hide()
|
|
|
|
/*for(var i=0; i<foundVariants.length; i++){
|
|
let mutation=foundVariants[i]
|
|
console.log("mutation",mutation)
|
|
}*/
|
|
for(var j in response[mutation].Variants){
|
|
let fieldsetVariant = document.createElement('fieldset')
|
|
content.appendChild(fieldsetVariant)
|
|
let variantHeader=document.createElement('legend')
|
|
variantHeader.innerHTML = j
|
|
variantHeader.setAttribute("show","0")
|
|
variantHeader.className = "tableHeader"
|
|
fieldsetVariant.appendChild(variantHeader)
|
|
// console.log(response[mutation].Variants[j].DB)
|
|
for(v in response[mutation].Variants[j].DB){
|
|
let D=document.createElement('div')
|
|
D.innerHTML = v
|
|
D.setAttribute("show","0")
|
|
D.className = "dbHeader"
|
|
fieldsetVariant.appendChild(D)
|
|
D.addEventListener('click',(e)=>{
|
|
e.stopPropagation()
|
|
switch(e.target.getAttribute("show")){
|
|
case "0":
|
|
console.log((e.target))
|
|
$(e.target).parent().find('.listEntry').show(500)
|
|
e.target.setAttribute("show","1")
|
|
break
|
|
case "1":
|
|
$(e.target).parent().find('.listEntry').hide(500)
|
|
e.target.setAttribute("show","0")
|
|
break
|
|
}
|
|
})
|
|
// console.log(response[mutation].Variants[j].DB[v])
|
|
if(response[mutation].Variants[j].DB[v]!=null){
|
|
D.innerHTML+=" ["+response[mutation].Variants[j].DB[v].resultCount+"]"
|
|
console.log("resultCount",response[mutation].Variants[j].DB[v].resultCount)
|
|
for(w in response[mutation].Variants[j].DB[v].lines){
|
|
|
|
// console.log(response[mutation].Variants[j].DB[v].lines[w].Cited)
|
|
let L=document.createElement('div')
|
|
L.style.display="flex"
|
|
// L.style.width = "100%"
|
|
L.className = "listEntry"
|
|
// L.pading="5px"
|
|
// L.style.background = "grey"
|
|
// L.innerHTML = response[mutation].Variants[j].DB[v].lines[w].Cited
|
|
fieldsetVariant.appendChild(L)
|
|
|
|
for(x in response[mutation].Variants[j].DB[v].lines[w]){
|
|
let entryText=response[mutation].Variants[j].DB[v].lines[w][x]
|
|
if(x=="Cited"){
|
|
// console.log(x,response[mutation].Variants[j].DB[v].lines[w][x])
|
|
let a = document.createElement("a")
|
|
// a.style.width="100px"
|
|
a.style.margin="5px"
|
|
a.target="_blank"
|
|
// a.style.background = "lightblue"
|
|
a.innerHTML=response[mutation].Variants[j].DB[v].lines[w][x]
|
|
a.href = "https://www.ncbi.nlm.nih.gov/pubmed/"+response[mutation].Variants[j].DB[v].lines[w][x]
|
|
// console.log(a.href)
|
|
L.appendChild(a)
|
|
}
|
|
if(x!="Cited"){
|
|
let C=document.createElement('div')
|
|
C.style.margin="5px"
|
|
// C.style.width = "200px"
|
|
// C.style.minWidth = "150px"
|
|
// C.style.background = "lightblue"
|
|
if(entryText!=null){
|
|
C.innerHTML = entryText
|
|
if(entryText.length>50){
|
|
// console.log(entryText)
|
|
C.innerHTML=entryText.substring(0, 50)+"..."
|
|
C.fullText=entryText
|
|
C.addEventListener("click",(e)=>{
|
|
let point = {x: e.clientX, y: e.clientY}
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
Popup.open({"text":e.target.fullText},
|
|
point,
|
|
{ fontSize: "1vh", switchPos: true, maxWidth: '200', autoClose: true})
|
|
})
|
|
}
|
|
}
|
|
// C.innerHTML = response[mutation].Variants[j].DB[v].lines[w][x]
|
|
L.appendChild(C)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
$(fieldsetVariant).find('.dbHeader').hide(500)
|
|
$(fieldsetVariant).find('.listEntry').hide(500)
|
|
fieldsetVariant.addEventListener('click',(e)=>{
|
|
switch(e.target.getAttribute("show")){
|
|
case "0":
|
|
console.log((e.target))
|
|
$(e.target).parent().find('.dbHeader').show(500)
|
|
// $(e.target).parent().find('.listEntry').show(500)
|
|
e.target.setAttribute("show","1")
|
|
break
|
|
case "1":
|
|
$(e.target).parent().find('.dbHeader').hide(500)
|
|
$(e.target).parent().find('.dbHeader').attr("show","0")
|
|
$(e.target).parent().find('.listEntry').hide(500)
|
|
e.target.setAttribute("show","0")
|
|
break
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
for(var m=0; m<lists.length; m++){
|
|
let mutation=lists[m].getAttribute("mutation")
|
|
let nameDB=lists[m].getAttribute("db")
|
|
let listName=lists[m].getAttribute("mutation")+lists[m].getAttribute("db")+"List"
|
|
let headingName=lists[m].getAttribute("mutation")+lists[m].getAttribute("db")+"Heading"
|
|
//console.log(listName)
|
|
if(response[mutation].DB[nameDB]!=null && response[mutation].DB[nameDB].resultCount>0){
|
|
|
|
let headings=[]
|
|
let entries=[]
|
|
for(var k in response[mutation].DB[nameDB].lines[0]){
|
|
entries.push(k)
|
|
headings.push(k)
|
|
}
|
|
document.getElementById(listName).setAttribute("mutation", mutation)
|
|
let query='#'+lists[m].id
|
|
$(query).on("click", toggle)
|
|
$(query).children()[0].src="../assets/icons/unfold_less_black.png"
|
|
$(query).append("["+response[mutation].DB[nameDB].resultCount.toString()+"]")
|
|
if(response[mutation].DB[nameDB].sourceLink!=null)$(query).append('<a href='+response[mutation].DB[nameDB].sourceLink+' target="_blank" style="margin-left: 10px; margin-right:10px">Database Link</a>')
|
|
|
|
//let headings = ["Symbol", "Name", "Description", "Total Alleles", "Pathogenic Alleles"]
|
|
//let entries = ["Symbol", "Name", "Description", "TotalAlleles", "PathogenicAlleles"]
|
|
|
|
fillHeading(document.getElementById(headingName),document.getElementById(listName), nameDB, headings, entries)
|
|
fillList(document.getElementById(listName), nameDB, headings, entries)
|
|
|
|
//$(query+"Heading").slideToggle(500)
|
|
//$(query+"List").slideToggle(500)
|
|
document.getElementById(lists[m].id).childNodes[0].src="../assets/icons/unfold_more_black.png"
|
|
}
|
|
}
|
|
}
|
|
|
|
let inputs = document.getElementsByClassName("filterText")
|
|
let keyboardHost = document.querySelector('.keyboard-host')
|
|
let keyboard = new window.Keyboard(inputs, keyboardHost)
|
|
|
|
function change(n){
|
|
// console.log(n.parentElement.id)
|
|
let list=document.getElementById(n.parentElement.id+"List")
|
|
// console.log(list.childNodes.length)
|
|
let show = false
|
|
for(var i=0; i<list.childNodes.length; i++){
|
|
for(var j=0; j<list.childNodes[i].childNodes.length;j++){
|
|
|
|
if(list.childNodes[i].childNodes[j].innerHTML.toLowerCase().match(n.value.toLowerCase())){
|
|
if(list.childNodes[i].childNodes[j].innerHTML.length<50)show=true
|
|
// console.log(list.childNodes[i].childNodes[j].innerHTML)
|
|
}
|
|
}
|
|
let item=list.childNodes[i]
|
|
if(list.childNodes[i].className!="tableHeader"){
|
|
if(!show)$(item).hide(50)
|
|
if(show)$(item).show(50)
|
|
}
|
|
show=false
|
|
}
|
|
}
|
|
|
|
function reload(e){
|
|
location.reload()
|
|
}
|
|
|
|
function toggle(e){
|
|
let query = e.target.id+"Heading"
|
|
let query2 = "#"+e.target.id+"List"
|
|
$("*[id*="+query+"]").slideToggle()
|
|
// $(query).slideToggle(500)
|
|
$(query2).slideToggle(500,()=>{
|
|
if($(query2).css("display")=="none")e.target.childNodes[0].src="../assets/icons/unfold_more_black.png"
|
|
if($(query2).css("display")=="block")e.target.childNodes[0].src="../assets/icons/unfold_less_black.png"
|
|
})
|
|
}
|
|
|
|
function sortData(data,value,direction){
|
|
if(direction==-1){
|
|
data.sort(function (a, b) {
|
|
|
|
var a1st = 1
|
|
var b1st = -1
|
|
var equal = 0
|
|
|
|
if (b[value] < a[value]) {
|
|
return b1st
|
|
}
|
|
else if (a[value] < b[value]) {
|
|
return a1st
|
|
}
|
|
else {
|
|
return equal
|
|
}
|
|
})
|
|
}
|
|
if(direction==1){
|
|
data.sort(function (a, b) {
|
|
|
|
var a1st = 1
|
|
var b1st = -1
|
|
var equal = 0
|
|
|
|
if (b[value] > a[value]) {
|
|
return b1st
|
|
}
|
|
else if (a[value] > b[value]) {
|
|
return a1st
|
|
}
|
|
else {
|
|
return equal
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function fillHeading(header, list, listName, headings, entries){
|
|
|
|
let heading = document.createElement('li')
|
|
heading.style.display="flex"
|
|
heading.className="tableHeader"
|
|
|
|
for(var j=0;j<headings.length;j++){
|
|
let c = document.createElement("div")
|
|
c.style.paddingLeft = "10px"
|
|
c.style.paddingRight = "10px"
|
|
c.entry=entries[j]
|
|
c.id=list.getAttribute("mutation")+listName+"Heading"+j
|
|
c.setAttribute("order",1)
|
|
// c.style.textAlign="center"
|
|
// c.style.borderLeft="solid 1px black"
|
|
c.style.wordWrap = "break-word"
|
|
let inner=headings[j].replace(/([A-Z])/g, ' $1').trim()
|
|
inner=inner.replace('I I I','III')
|
|
inner=inner.replace('I I','II')
|
|
c.innerHTML = "<img class='sortArrow' src='../assets/icons/arrow-drop-up-down-black.png' style='width: 8px; margin-right: 5px;'>"+inner
|
|
c.style.width=inner.length*15+"px"
|
|
heading.appendChild(c)
|
|
|
|
c.addEventListener('pointerdown',(e)=>{
|
|
$(list).empty()
|
|
let data=response[list.getAttribute("mutation")].DB[listName].lines
|
|
e.target.setAttribute('order',-1*e.target.getAttribute('order'))
|
|
$(".sortArrow").attr("src","../assets/icons/arrow-drop-up-down-black.png")
|
|
if(e.target.getAttribute('order')==1)e.target.childNodes[0].src='../assets/icons/arrow-drop-up-black.png'
|
|
if(e.target.getAttribute('order')==-1)e.target.childNodes[0].src='../assets/icons/arrow-drop-down-black.png'
|
|
sortData(data,e.target.entry,e.target.getAttribute('order'))
|
|
let element = document.getElementById(e.target.parentElement.parentElement.id.split('Heading')[0])
|
|
fillList(list, listName, headings, entries)
|
|
change(element.childNodes[2])
|
|
})
|
|
}
|
|
header.appendChild(heading)
|
|
}
|
|
|
|
function fillList(list, listName, headings, entries){
|
|
for(var i=0; i<response[list.getAttribute("mutation")].DB[listName].lines.length; i++){
|
|
|
|
let entry = document.createElement('li')
|
|
entry.style.display="flex"
|
|
entry.className = "listEntry"
|
|
entry.setAttribute("dbHeaderName", list.getAttribute("mutation")+listName)
|
|
|
|
for(var j=0;j<headings.length;j++){
|
|
let entryText=response[list.getAttribute("mutation")].DB[listName].lines[i][entries[j]]
|
|
|
|
let w=$("#"+list.getAttribute("mutation")+listName+"Heading"+j).css('width')
|
|
// console.log(w)
|
|
if(headings[j]!="Cited"){
|
|
let c = document.createElement("div")
|
|
c.style.padding = "10px"
|
|
c.style.width=w
|
|
// c.style.textAlign="center"
|
|
c.style.fontSize="1vh"
|
|
// c.style.borderLeft="solid 1px black"
|
|
c.style.wordWrap = "break-word"
|
|
if(entryText!=null){
|
|
c.innerHTML = entryText
|
|
if(entryText.length>50){
|
|
c.innerHTML=entryText.substring(0, 50)+"..."
|
|
c.fullText=entryText
|
|
c.addEventListener("click",(e)=>{
|
|
let point = {x: e.clientX, y: e.clientY}
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
Popup.open({"text":e.target.fullText},
|
|
point,
|
|
{ fontSize: "1vh", switchPos: true, maxWidth: '200', autoClose: true})
|
|
})
|
|
}
|
|
}
|
|
entry.appendChild(c)
|
|
|
|
}
|
|
if(headings[j]=="Cited"){
|
|
|
|
let citations = response[list.getAttribute("mutation")].DB[listName].lines[i].Cited
|
|
|
|
let c = document.createElement("div")
|
|
c.style.width=w
|
|
c.style.padding = "10px"
|
|
// c.style.textAlign="center"
|
|
c.style.fontSize="1vh"
|
|
entry.appendChild(c)
|
|
|
|
if(citations!=null){
|
|
citations=citations.split(';')
|
|
// if(citations.length>1)console.log(citations)
|
|
for(var m=0; m<citations.length; m++){
|
|
// if(citations.length>1)console.log(citations[m])
|
|
let a = document.createElement("a")
|
|
a.style.width=w
|
|
a.style.padding = "10px"
|
|
// c.style.textAlign="center"
|
|
a.style.fontSize="1vh"
|
|
a.href = "https://www.ncbi.nlm.nih.gov/pubmed/"+citations[m]
|
|
// c.style.borderLeft="solid 1px black"
|
|
a.target="_blank"
|
|
a.innerHTML = citations[m]+"<br>"+"<br>"
|
|
c.appendChild(a)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
list.appendChild(entry)
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |