1let lineHeight = 28; //px
 2
 3let dnaData = "acggattagaagccgccgagcgggtgacagccctccgaaggaagactctcctccgtgcgtcctcgtcttcaccggtcgcgttcctgaaacgcagatgtgcctcgcgccgcactgctccgaacaataaagattctacaatactagcttttatggttatgaagaggaaaaattggcagtaacctggccccacaaaccttcaaatgaacgaatcaaattaacaaccataggatgataatgcgattagttttttagccttatttctggggtaattaatcagcgaagcgatgatttttgatctattaacagatatataaatgcaaaaactgcataaccactttaactaatactttcaacattttcggtttgtattacttcttattcaaatgtaataaaagtatcaacaaaaaattgttaatatacctctatactttaacgtcaaggagaaaaaaccccggatcggactactagcagccatggaaaaaaatgtctaatttgttgactgttcatcaaaatttgccagctttgccagttgatgcaacgtctgatgaggtaagaaagaatttgatggatatgtttagagatagacaagcattctctgaacatacttggaaaatgttgttgtctgtttgtagatcttgggctgcttggtgtaaattaaataatagaaaatggtttccagctgaaccagaagatgttagagattatttgttgtatttgcaagctagaggtttggctgttaaaactatacaacaacatttgggtcaattaaatatgttgcataggagatctggtttgcctagaccatctgattctaatgctgtatctttggttatgagaaggattagaaaagaaaatgttgatgcaggtgaaagagctaaacaagcattggcgtttgaaagaactgattttgatcaagttagatctttgatggaaaattctgatagatgtcaagatataagaaacttggctttcttgggaattgcttataatacattgttgagaattgctgaaattgctagaattagagttaaagacatttctagaactgatggtggtagaatgttgattcatattggtagaactaaaacattggtttcaactgctggcgttgagaaagcattgtctttgggtgttactaaattggttgaaagatggatttctgtatctggtgtggctgatgacccaaataattatttattttgtagagttagaaagaatggtgttgcggctccatctgctacatctcagctctctacccgtgccttggaaggaatttttgaagcaactcatagattgatttatggtgctaaagatgattctggtcaaagatatttagcatggtctggtcattctgctagagttggtgccgctagagatatggctagagctggggtatctattcctgaaattatgcaagctggtggttggactaatgttaacatcgtcatgaactatattagaaatttggattctgaaactggtgcaatggttagactcttggaagatggtgatcccgggaagcttggtacctatcacataggaagcaacaggcgcgttggacttttaattttcgaggaccgcgaatccttacatcacacccaatcccccacaagtgatcccccacacaccatagcttcaaaatgtttctactccttttttactcttccagattttctcggactccgcgcatcgccgtaccacttcaaaacacccaagcacagcatactaaatttcccctctttcttcctctagggtgtcgttaattacccgtactaaaggtttggaaaagaaaaaagagaccgcctcgtttctttttcttcgtcgaaaaaggcaataaaaatttttatcacgtttctttttcttgaaaatttttttttttgatttttttctctttcgatgacctcccattgatatttaagttaataaacggtcttcaatttctcaagtttcagtttcatttttcttgttctattacaactttttttacttcttgctcattagaaagaaagcatagcaatctaatctaagttttaattacaaaggatccacgattaaaagaATGtttgtttttcttgttttattgccactagtctctagtcagtgtgttaatcttacaaccagaactcaattaccccctgcatacactaattctttcacacgtggtgtttattaccctgacaaagttttcagatcctcagttttacattcaactcaggacttgttcttacctttcttttccaatgttacttggttccatgctatacatgtctctgggaccaatggtactaagaggtttgataaccctgtcctaccatttaatgatggtgtttattttgcttccactgagaagtctaacataataagaggctggatttttggtactactttagattcgaagacccagtccctacttattgttaataacgctactaatgttgttattaaagtctgtgaatttcaattttgtaatgatccatttttgggtgtttattaccacaaaaacaacaaaagttggatggaaagtgagttcagagtttattctagtgcgaataattgcacttttgaatatgtctctcagccttttcttatggaccttgaaggaaaacagggtaatttcaaaaatcttagggaatttgtgtttaagaatattgatggttattttaaaatatattctaagcacacgcctattaatttagtgcgtgatctccctcagggtttttcggctttagaaccattggtagatttgccaataggtattaacatcactaggtttcaaactttacttgctttacatagaagttatttgactcctggtgattcttcttcaggttggacagctggtgctgcagcttattatgtgggttatcttcaacctaggacttttctattaaaatataatgaaaatggaaccattacagatgctgtagactgtgcacttgaccctctctcagaaacaaagtgtacgttgaaatccttcactgtagaaaaaggaatctatcaaacttctaactttagagtccaaccaacagaatctattgttagatttcctaatattacaaacttgtgcccttttggtgaagtttttaacgccaccagatttgcatctgtttatgcttggaacaggaagagaatcagcaactgtgttgctgattattctgtcctatataattccgcatcattttccacttttaagtgttatggagtgtctcctactaaattaaatgatctctgctttactaatgtctatgcagattcatttgtaattagaggtgatgaagtcagacaaatcgctccagggcaaactggaaagattgctgattataattataaattaccagatgattttacaggctgcgttatagcttggaattctaacaatcttgattctaaggttggtggtaattataattacctgtatagattgtttaggaagtctaatctcaaaccttttgagagagatatttcaactgaaatctatcaggccggtagcacaccttgtaatggtgttgaaggttttaattgttactttcctttacaatcatatggtttccaacccactaatggtgttggttaccaaccatacagagtagtagtactttcttttgaacttctacatgcaccagcaactgtttgtggacctaaaaagtctactaatttggttaaaaacaaatgtgtcaatttcaacttcaatggtttaacaggcacaggtgttcttactgagtctaacaaaaagtttctgcctttccaacaatttggcagagacattgctgacactactgatgctgtccgtgatccacagacacttgagattcttgacattacaccatgttcttttggtggtgtcagtgttataacaccaggaacaaatacttctaaccaggttgctgttctttatcaggatgttaactgcacagaagtccctgttgctattcatgcagatcaacttactcctacttggcgtgtttattctacaggttctaatgtttttcaaacacgtgcaggctgtttaataggggctgaacatgtcaacaactcatatgagtgtgacatacccattggtgcaggtatatgcgctagttatcagactcagactaattctcctcggcgggcacgtagtgtagctagtcaatccatcattgcctacactatgtcacttggtgcagaaaattcagttgcttactctaataactctattgccatacccacaaattttactattagtgttaccacagaaattctaccagtgtctatgaccaagacatcagtagattgtacaatgtacatttgtggtgattcaactgaatgcagcaatcttttgttgcaatatggcagtttttgtacacaattaaaccgtgctttaactggaatagctgttgaacaagacaaaaacacccaagaagtttttgcacaagtcaaacaaatttacaaaacaccaccaattaaagattttggtggttttaatttttcacaaatattaccagatccatcaaaaccaagcaagaggtcatttattgaagatctacttttcaacaaagtgacacttgcagatgctggcttcatcaaacaatatggtgattgccttggtgatattgctgctagagacctcatttgtgcacaaaagtttaacggccttactgttttgccacctttgctcacagatgaaatgattgctcaatacacttctgcactgttagcgggtacaatcacttctggttggacctttggtgcaggtgctgcattacaaataccatttgctatgcaaatggcttataggtttaatggtattggagttacacagaatgttctctatgagaaccaaaaattgattgccaaccaatttaatagtgctattggcaaaattcaagactcactttcttccacagcaagtgcacttggaaaacttcaagatgtggtcaaccaaaatgcacaagctttaaacacgcttgttaaacaacttagctccaattttggtgcaatttcaagtgttttaaatgatatcctttcacgtcttgacaaagttgaggctgaagtgcaaattgataggttgatcacaggcagacttcaaagtttgcagacatatgtgactcaacaattaattagagctgcagaaatcagagcttctgctaatcttgctgctactaaaatgtcagagtgtgtacttggacaatcaaaaagagttgatttttgtggaaagggctatcatcttatgtccttccctcagtcagcacctcatggtgtagtcttcttgcatgtgacttatgtccctgcacaagaaaagaacttcacaactgctcctgccatttgtcatgatggaaaagcacactttcctcgtgaaggtgtctttgtttcaaatggcacacactggtttgtaacacaaaggaatttttatgaaccacaaatcattactacagacaacacatttgtgtctggtaactgtgatgttgtaataggaattgtcaacaacacagtttatgatcctttgcaacctgaattagactcattcaaggaggagttagataaatattttaagaatcatacatcaccagatgttgatttaggtgacatctctggcattaatgcttcagttgtaaacattcaaaaagaaattgaccgcctcaatgaggttgccaagaatttaaatgaatctctcatcgatctccaagaacttggaaagtatgagcagtatataaaatggccatggtacatttggctaggttttatagctggcttgattgccatagtaatggtgacaattatgctttgctgtatgaccagttgctgtagttgtctcaagggctgttgttcttgtggatcctgctgcaaatttgatgaagacgactctgagccagtgctcaaaggagtcaaattacattacacataatgatcatgtaattagttatgtcacgcttacattcacgccctccccccacatccgctctaaccgaaaaggaaggagttagacaacctgaagtctaggtccctatttatttttttatagttatgttagtattaagaacgttatttatatttcaaatttttcttttttttctgtacagacgcgtgtacgcatgtaacattatactgaaaaccttgcttgagaaggttttgggacgctcgaaggctttaatttgcggatccactagtaacggccgccagtgtgctggaattctgcagatatccatcacactggcggccgctcgagcatgcatctagagggccgcatcatgtaattagttatgtcacgcttacattcacgccctccccccacatccgctctaaccgaaaaggaaggagttagacaacctgaagtctaggtccctatttatttttttatagttatgttagtattaagaacgttatttatatttcaaatttttcttttttttctgtacagacgcgtgtacgcatgtaacattatactgaaaaccttgcttgagaaggttttgggacgctcgaaggctttaatttgcggccctgcattaatgaatcggccaacgcgcggggagaggcggtttgcgtattgggcgctcttccgcttcctcgctcactgactcgctgcgctcggtcgttcggctgcggcgagcggtatcagctcactcaaaggcggtaatacggttatccacagaatcaggggataacgcaggaaagaacatgtgagcaaaaggccagcaaaagcccaggaaccgtaaaaaggccgcgttgctggcgtttttccataggctccgcccccctgacgagcatcacaaaaatcgacgctcaagtcagaggtggcgaaacccgacaggactataaagataccaggcgtttccccctggaagctccctcgtgcgctctcctgttccgaccctgccgcttaccggatacctgtccgcctttctcccttcgggaagcgtggcgctttctcatagctcacgctgtaggtatctcagttcggtgtaggtcgttcgctccaagctgggctgtgtgcacgaaccccccgttcagcccgaccgctgcgccttatccggtaactatcgtcttgagtccaacccggtaagacacgacttatcgccactggcagcagccactggtaacaggattagcagagcgaggtatgtaggcggtgctacagagttcttgaagtggtggcctaactacggctacactagaaggacagtatttggtatctgcgctctgctgaagccagttaccttcggaaaaagagttggtagctcttgatccggcaaacaaaccaccgctggtagcggtggtttttttgtttgcaagcagcagattacgcgcagaaaaaaaggatctcaagaagatcctttgatcttttctacggggtctgacgctcagtggaacgaaaactcacgttaagggattttggtcatgagattatcaaaaaggatcttcacctagatccttttaaattaaaaatgaagttttaaatcaatctaaagtatatatgagtaaacttggtctgacagttaccaatgcttaatcagtgaggcacctatctcagcgatctgtctatttcgttcatccatagttgcctgactccccgtcgtgtagataactacgatacgggagcgcttaccatctggccccagtgctgcaatgataccgcgagacccacgctcaccggctccagatttatcagcaataaaccagccagccggaagggccgagcgcagaagtggtcctgcaactttatccgcctccattcagtctattaattgttgccgggaagctagagtaagtagttcgccagttaatagtttgcgcaacgttgttggcattgctacaggcatcgtggtgtcactctcgtcgtttggtatggcttcattcagctccggttcccaacgatcaaggcgagttacatgatcccccatgttgtgcaaaaaagcggttagctccttcggtcctccgatcgttgtcagaagtaagttggccgcagtgttatcactcatggttatggcagcactgcataattctcttactgtcatgccatccgtaagatgcttttctgtgactggtgagtactcaaccaagtcattctgagaatagtgtatgcggcgaccgagttgctcttgcccggcgtcaatacgggataatagtgtatcacatagcagaactttaaaagtgctcatcattggaaaacgttcttcggggcgaaaactctcaaggatcttaccgctgttgagatccagttcgatgtaacccactcgtgcacccaactgatcttcagcatcttttactttcaccagcgtttctgggtgagcaaaaacaggaaggcaaaatgccgcaaaaaagggaataagggcgacacggaaatgttgaatactcatactcttcctttttcaatgggtaataactgatataattaaattgaagctctaatttgtgagtttagtatacatgcatttacttataatacagttttttagttttgctggccgcatcttctcaaatatgcttcccagcctgcttttctgtaacgttcaccctctaccttagcatcccttccctttgcaaatagtcctcttccaacaataataatgtcagatcctgtagagaccacatcatccacggttctatactgttgacccaatgcgtctcccttgtcatctaaacccacaccgggtgtcataatcaaccaatcgtaaccttcatctcttccacccatgtctctttgagcaataaagccgataacaaaatctttgtcgctcttcgcaatgtcaacagtacccttagtatattctccagtagatagggagcccttgcatgacaattctgctaacatcaaaaggcctctaggttcctttgttacttcttctgccgcctgcttcaaaccgctaacaatacctgggcccaccacaccgtgtgcattcgtaatgtctgcccattctgctattctgtatacacccgcagagtactgcaatttgactgtattaccaatgtcagcaaattttctgtcttcgaagagtaaaaaattgtacttggcggataatgcctttagcggcttaactgtgccctccatggaaaaatcagtcaagatatccacatgtgtttttagtaaacaaattttgggacctaatgcttcaactaactccagtaattccttggtggtacgaacatccaatgaagcacacaagtttgtttgcttttcgtgcatgatattaaatagcttggcagcaacaggactaggatgagtagcagcacgttccttatatgtagctttcgacatgatttatcttcgtttcctgcaggtttttgttctgtgcagttgggttaagaatactgggcaatttcatgtttcttcaacactacatatgcgtatatataccaatctaagtctgtgctccttccttcgttcttccttctgttcggagattaccgaatcaaaaaaatttcaaagaaaccgaaatcaaaaaaaagaataaaaaaaaaatgatgaattgaattgaaaagctagcttatcgatgataagctgtcaaagatgagaattaattccacggactatagactatactagatactccgtctactgtacgatacacttccgctcaggtccttgtcctttaacgaggccttaccactcttttgttactctattgatccagctcagcaaaggcagtgtgatctaagattctatcttcgcgatgtagtaaaactagctagaccgagaaagagactagaaatgcaaaaggcacttctacaatggctgccatcattattatccgatgtgacgctgcagcttctcaatgatattcgaatacgctttgaggagatacagcctaatatccgacaaactgttttacagatttacgatcgtagataagctgtcaaagatgagaattaattccacggactatagactatactagatactccgtctactgtacgatacacttccgctcaggtccttgtcctttaacgaggccttaccactcttttgttactctattgatccagctcagcaaaggcagtgtgatctaagattctatcttcgcgatgtagtaaaactagctagaccgagaaagagactagaaatgcaaaaggcacttctacaatggctgccatcattattatccgatgtgacgctgcagcttctcaatgatattcgaatacgctttgaggagatacagcctaatatccgacaaactgttttacagatttacgatcgtacttgttacccatcattgaattttgaacatccgaacctgggagttttccctgaaacagatagtatatttgaacctgtataataatatatagtctagcgctttacggaagacaatgtatgtatttcggttcctggagaaactattgcatctattgcataggtaatcttgcacgtcgcatccccggttcattttctgcgtttccatcttgcacttcaatagcatatctttgttaacgaagcatctgtgcttcattttgtagaacaaaaatgcaacgcgagagcgctaatttttcaaacaaagaatctgagctgcatttttacagaacagaaatgcaacgcgaaagcgctattttaccaacgaagaatctgtgcttcatttttgtaaaacaaaaatgcaacgcgacgagagcgctaatttttcaaacaaagaatctgagctgcatttttacagaacagaaatgcaacgcgagagcgctattttaccaacaaagaatctatacttcttttttgttctacaaaaatgcatcccgagagcgctatttttctaacaaagcatcttagattactttttttctcctttgtgcgctctataatgcagtctcttgataactttttgcactgtaggtccgttaaggttagaagaaggctactttggtgtctattttctcttccataaaaaaagcctgactccacttcccgcgtttactgattactagcgaagctgcgggtgcattttttcaagataaaggcatccccgattatattctataccgatgtggattgcgcatactttgtgaacagaaagtgatagcgttgatgattcttcattggtcagaaaattatgaacggtttcttctattttgtctctatatactacgtataggaaatgtttacattttcgtattgttttcgattcactctatgaatagttcttactacaatttttttgtctaaagagtaatactagagataaacataaaaaatgtagaggtcgagtttagatgcaagttcaaggagcgaaaggtggatgggtaggttatatagggatatagcacagagatatatagcaaagagatacttttgagcaatgtttgtggaagcggtattcgcaatgggaagctccaccccggttgataatcagaaaagccccaaaaacaggaagattgtataagcaaatatttaaattgtaaacgttaatattttgttaaaattcgcgttaaatttttgttaaatcagctcattttttaacgaatagcccgaaatcggcaaaatcccttataaatcaaaagaatagaccgagatagggttgagtgttgttccagtttccaacaagagtccactattaaagaacgtggactccaacgtcaaagggcgaaaaagggtctatcagggcgatggcccactacgtgaaccatcaccctaatcaagttttttggggtcgaggtgccgtaaagcagtaaatcggaagggtaaacggatgcccccatttagagcttgacggggaaagccggcgaacgtggcgagaaaggaagggaagaaagcgaaaggagcgggggctagggcggtgggaagtgtaggggtcacgctgggcgtaaccaccacacccgccgcgcttaatggggcgctacagggcgcgtggggatgatccactagt";
 4
 5let annotationData = [{ title: "source", start: 0, end: 11821, color: "#4C3B4D", pdbe: false }, { title: "UAS", start: 1, end: 118, color: "#624B58", pdbe: false }, { title: "GAL1 promoter", start: 1, end: 442, color: "#775A62", pdbe: false }, { title: "GAL", start: 413, end: 436, color: "#A17A78", pdbe: false }, { title: "Tef1 promoter (SacI cut site used)", start: 1530, end: 2040, color: "#CC998D", pdbe: false }, { title: "Kozak sequence", start: 2041, end: 2061, color: "#8FB7A3", pdbe: false }, { title: "SARS-CoV-2 Spike Protein (surface glycoprotein)", start: 2062, end: 5880, color: "#53D6BA", pdbe: true, pdbeID: "6vxx" }, { title: "TGA stop codon", start: 5881, end: 5883, color: "#2CC9BB", pdbe: false }, { title: "CYC1 terminator", start: 5884, end: 6131, color: "#429EA6", pdbe: false }, { title: "CYC1", start: 5900, end: 5918, color: "#153B50", pdbe: false }, { title: "CYC1 terminator", start: 6222, end: 6469, color: "#4C3B4D", pdbe: false }, { title: "CYC1", start: 6238, end: 6256, color: "#624B58", pdbe: false }, { title: "L4440", start: 6539, end: 6556, color: "#775A62", pdbe: false }, { title: "ori", start: 6710, end: 7298, color: "#A17A78", pdbe: false }, { title: "pBR322ori-F", start: 6790, end: 6809, color: "#CC998D", pdbe: false }, { title: "AmpR", start: 7469, end: 8329, color: "#8FB7A3", pdbe: false }, { title: "URA3", start: 8425, end: 9228, color: "#53D6BA", pdbe: false }, { title: "URA3 promoter", start: 9229, end: 9444, color: "#2CC9BB", pdbe: false }, { title: "2u ori", start: 10400, end: 11280, color: "#429EA6", pdbe: false }, { title: "f1 ori", start: 11349, end: 11804, color: "#153B50", pdbe: false }, { title: "F1ori-R", start: 11698, end: 11717, color: "#4C3B4D", pdbe: false }]
 6
 7function displayPDBE(pdbeID) {
 8    document.getElementById("molstar-viewer-window").innerHTML = `<pdbe-molstar molecule-id="${pdbeID}" alphafold-view="true" hide-controls="false"><pdbe-molstar>`
 9}
10
11function loadDNA() {
12    for (let i in dnaData) {
13        let bpDiv = document.createElement("div");
14        bpDiv.id = "base-pair-" + i
15        bpDiv.className = "base-pair"
16        bpDiv.innerHTML = dnaData[i]
17        // add the text node to the newly created div
18        document.getElementById("base-pair-container").appendChild(bpDiv);
19    }
20    let maxAnnotationCount = 0
21    for (let i in annotationData) {
22        let currentAnnotationData = annotationData[i]
23        let currentAnnotationDataTitle = " " + currentAnnotationData.title + " •"
24        for (let j = 0; j < currentAnnotationData.end - currentAnnotationData.start + 1; j++) {
25            let anDiv = document.createElement("div");
26            anDiv.className = "annotation"
27            anDiv.innerHTML = currentAnnotationDataTitle[j % currentAnnotationDataTitle.length].replace(" ", "&nbsp;")
28            let parentElement = document.getElementById("base-pair-" + (currentAnnotationData.start + j))
29            let borderRadius = "0px";
30            if (j == 0) {
31                borderRadius = "8px 0px 0px 8px"
32            }
33            if (j == currentAnnotationData.end - currentAnnotationData.start) {
34                borderRadius = "0px 8px 8px 0px"
35                anDiv.innerHTML = "&nbsp;"
36            }
37            if (currentAnnotationData.pdbe) {
38                anDiv.setAttribute('onclick', `displayPDBE("${currentAnnotationData.pdbeID}");`)
39            }
40            anDiv.style = `top: ${lineHeight + parentElement.children.length * lineHeight}px;` + `height: ${lineHeight}px;` + `background: ${currentAnnotationData.color};` + `border-radius: ${borderRadius};`
41            // add the text node to the newly created div
42            parentElement.appendChild(anDiv);
43            if (parentElement.children.length > maxAnnotationCount) {
44                maxAnnotationCount = parentElement.children.length
45            }
46        }
47    }
48    let styleSheet = document.createElement("style");
49    styleSheet.innerHTML = `.base-pair {height: ${3 * lineHeight + maxAnnotationCount * lineHeight}px;}`
50    document.head.appendChild(styleSheet)
51}
52
53loadDNA()