30:Td61,drawRadialPlot = function(myOutput) { // default parameters ------------------------------------------------------ const height = width; const dc = DOM.context2d(width, height); const canvas = dc.canvas dc.clearRect(0,0,width,height); let mousedown = false; // The main circle parameter ------------------------------------------------------ var lg_rad = (width/2) * 0.85; var lg_circ = 2*Math.PI*lg_rad; var cx = width/2; var cy = height/2; // Orbiting circle parameter ------------------------------------------------------ let nbr_circles = myOutput.MLE.content['0'].length; var sm_rad = (lg_circ / nbr_circles) / 2; // Filling in default circle (background) ------------------------------------------------------ dc.beginPath(); dc.arc(cx, cy, lg_rad, -Math.PI/2, 3*Math.PI/2, false); dc.fillStyle = backgroundColor; dc.fill(); // Stroking main circles ------------------------------------------------------ var circleSizeIncrement = poi.map(d=>fixedCircleOrder.indexOf(d)*0.10); circleSizeIncrement.forEach( increment => { dc.beginPath(); dc.arc(cx, cy, lg_rad*(1-increment), -Math.PI/2, 3*Math.PI/2, false); dc.strokeStyle = defaultColor; dc.stroke(); }) // Angle-sensitive for (let i = 0; i < nbr_circles; ++i) { var angle = i*(2*Math.PI)/nbr_circles - Math.PI/2; var x = cx + Math.cos(angle) * lg_rad; var y = cy + Math.sin(angle) * lg_rad; /// Helper line every 10 codons ------------------------------------------------------ if (i%10==0) { //// Inner tickmark dc.beginPath(); dc.strokeStyle = helperColor; dc.moveTo(width/2, height/2); dc.lineTo(x, y); dc.stroke(); //// Outer Circular Text; help parameter index get +1 because it is displayed on the plot in 1-index. Internally, everything else should be 0-indexed in this function. var xh = cx + Math.cos(angle) * (lg_rad*1.05); var yh = cy + Math.sin(angle) * (lg_rad*1.05); dc.beginPath(); dc.font = '${Math.floor(width/60)}px sans-serif'; dc.fillStyle = defaultColor; dc.textAlign = 'center'; dc.fillText(`${i+1}`, xh, yh); // var xh2 = cx + Math.cos(angle) * (lg_rad*1.10); var yh2 = cy + Math.sin(angle) * (lg_rad*1.10); dc.beginPath(); dc.font = '${Math.floor(width/60)}px sans-serif'; dc.fillStyle = defaultColor; dc.textAlign = 'center'; dc.fillText(`${(i+1)*3-2}`, xh2, yh2); // } /// PRIME-significant Helper line var curColors = checkBoxPInd.map( pInd => summaryColors[pInd][i]); if (curColors.filter(c => c!=defaultColor).length>0) { dc.beginPath(); dc.strokeStyle = atLeastOneSigColor; dc.moveTo(width/2, height/2); dc.lineTo(x, y); dc.stroke(); } /// Draw PRIME-significant orbiting circles ------------------------------------------------------ for (let cbInd=0; cbInd htl.html`

${x.toLocaleString(\"en\")}`,\n genomic: pvalHighlightFormat(),\n // pvalue: pvalHighlightFormat(sigColor), \n qvalue: pvalHighlightFormat(sigColor), \n p1: pvalHighlightFormat(sigColor),\n p2: pvalHighlightFormat(sigColor),\n p3: pvalHighlightFormat(sigColor),\n p4: pvalHighlightFormat(sigColor),\n p5: pvalHighlightFormat(sigColor)\n }});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md`There are a total of **${filteredTable.length}** unique significant sites by the cutoff of **${cutoff}** using **${poi.length}** selected properties.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"md`---\n### Draw Circular Stacked 1-D Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"drawRadialPlot(primeOutput)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"md`---\n### Update Protein Structure`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2477,"value":"legend({\n color: scale,\n title: \"Color legend\",\n width: 1150,\n marginLeft: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"viewport = {\n poi;\n let v = DOM.element(\"div\");\n v.id=\"viewport\";\n v.style.height = \"1000px\"\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2553,"value":"md`\n---\n## Code\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2559,"value":"md`\n### 1-D plot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1901,"value":"primeOutput0 = FileAttachment(\"spike.fas_Atchley.PRIME_onlyPRIME.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2018,"value":"primeOutput = function(){\n var newObj = Object.assign({}, primeOutput0)\n newObj['MLE']['headers'][10] = ['p_adj-value', 'Omnibus q-value (any property is important)'];\n return newObj\n}();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"forTable = primeOutput.MLE.content[\"0\"]\n.map( \n ([alpha, beta, FELalpha, FELbeta, totalBL, numSub, numUniqAA, PRIMELogL, FELLogL, pvalue, qvalue, lambda1, p1, logL1, lambda2, p2, logL2, lambda3, p3, logL3, lambda4, p4, logL4, lambda5, p5, logL5], codon) => \n ({codon, alpha, beta, FELalpha, FELbeta, totalBL, numSub, numUniqAA, PRIMELogL, FELLogL, pvalue, qvalue, lambda1, p1, logL1, lambda2, p2, logL2, lambda3, p3, logL3, lambda4, p4, logL4, lambda5, p5, logL5}))\n.map( d => {return {...d, codon: d.codon+1, genomic: (d.codon+1)*3-2}} );","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"pIndex = function() {\n var pIndex = {};\n for (let i=0; ipIndex[d]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"summary = {\n var summary = {};\n // for each checkbox input\n for (let ind=0; ind {return { 'coor':i+1, 'value':d[pInd], 'lambda':NaN, 'logL':NaN, 'index':i }} );\n } else {\n summary[pInd] = primeOutput.MLE.content['0'].map( (d,i)=> {return { 'coor':i+1, 'value':d[pInd], 'lambda':d[pInd-1], 'logL':d[pInd+1], 'index':i }} );\n }\n }\n return summary\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"cutoff = 0.05;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"summaryColors = {\n var summaryColors = {};\n // for each checkbox input\n for (let ind=0; ind d.value<=cutoff ? sigColor:defaultColor );\n // } \n if (pInd==pIndex['p_adj-value']) {\n summaryColors[pInd] = summary[pInd].map( d => d.value<=cutoff ? sigColor:defaultColor );\n } else {\n let prop = summary[pInd];\n let propSig = Array(prop.length).fill(defaultColor);\n for (let i=0; i 0){\n propSig[i] = conservedSigColor; // conserved\n } // else neutral\n }\n }\n summaryColors[pInd] = propSig;\n }\n }\n return summaryColors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"backgroundColor = 'gainsboro';","pinned":false,"hidden":false,"mode":"ojs"},{"id":1721,"value":"helperColor = \"white\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"sigColor = \"firebrick\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"defaultColor = \"grey\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"changeSigColor = \"magenta\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"conservedSigColor = \"cyan\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"atLeastOneSigColor = \"lightslategrey\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"filteredTable = {\n let chosen = [];\n for (let i=0; i {\n if (primeOutput.MLE.content[\"0\"][i][pInd] {\n filteredTable.push(forTable[pInd]);\n }\n )\n if (filteredTable.length==0) {\n return forTable\n }\n return filteredTable\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"pvalHighlightFormat = function(curSigColor) {\n return x => htl.html`

${x.toLocaleString(\"en\")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2566,"value":"md`\n### PDB Viewer\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2307,"value":"multiColor = 'plum'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2342,"value":"scaleColor = ['yellow',conservedSigColor,changeSigColor,sigColor,multiColor]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2304,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2278,"value":"bubble_string = {\n let filteredSites = filteredTable.map(d=>d.codon);\n return filteredSites.map(s=>\"\"+s+\":A OR \" + s + \":B OR \" + s + \":C\").join (\" OR \"); // A or B or C for Trimers // color is 0-indexed, but the pdb structure accepting the resno is 1-indexed. Hence, +1. \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"tooltip = {\n let tt = document.createElement(\"div\");\n document.body.appendChild(tt);\n Object.assign(tt.style, {\n display: \"none\",\n position: \"absolute\",\n zIndex: 10,\n pointerEvents: \"none\",\n backgroundColor: \"rgba(0, 0, 0, 0.6)\",\n color: \"lightgrey\",\n padding: \"0.5em\",\n fontFamily: \"sans-serif\"\n });\n return tt;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2146,"value":"// scale = d3.scaleOrdinal()\n// .domain([0,1,2,3,4])\n// .range(scaleColor)\nscale = d3.scaleOrdinal()\n .domain([\"not selected\",\"conserved\",\"changing\",\"omnibus by multiple properties\",\"conserved OR changing OR omnibus by multiple properties\"])\n .range(scaleColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"schemeId = {\n return NGL.ColormakerRegistry.addScheme(function (params) {\n this.atomColor = function (atom) {\n if (['A','B','C'].includes(atom.chainname)) {\n // white to red\n return parseInt(d3.color(scale(pdb_color[atom.residue.resno])).formatHex().slice(1), 16);\n }\n else {\n // light blue\n return 0xADD8E6;\n }\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2154,"value":"stage = {\n let s = new NGL.Stage( \"viewport\" ,{ backgroundColor: \"black\" })\n s.mouseControls.remove(\"hoverPick\");\n s.signals.hovered.add(function (pickingProxy) {\n if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)){\n var atom = pickingProxy.atom || pickingProxy.closestBondAtom;\n var mp = pickingProxy.mouse.position;\n let residue = atom.residue;\n tooltip.innerText = residue.index + ' - index\\n' + \n residue.resno + ' - resno\\n' + \n residue.resname + ' - long resname\\n' +\n three_to_one[residue.resname] + ' - short resname\\n' +\n residue.chainname + ' - chain name\\n' + \n pdb_color[residue.resno] + ' - pdb_color\\n';\n tooltip.style.bottom = window.innerHeight - mp.y + 3 + \"px\";\n tooltip.style.left = mp.x + 3 + \"px\";\n tooltip.style.display = \"block\";\n } else {\n tooltip.style.display = \"none\";\n }\n })\n return s\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":2158,"value":"component = { // Where actual protein structure gets imported\n \n const molecule = \"rcsb://6XCM\";\n let str;\n stage.removeAllComponents();\n await stage.loadFile(molecule).then(d=>{\n d.addRepresentation(\"rope\", {color: schemeId});\n if (filteredTable.length != primeOutput.input['number of sites']) {\n d.addRepresentation(\"spacefill\", {sele: bubble_string, color: schemeId});\n }\n stage.autoView();\n stage.setSpin (false);\n str = d;\n })\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2185,"value":"ReactDOM = r('react-dom')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2188,"value":"three_to_one = {\n return {\n \"ALA\": \"A\",\n \"CYS\": \"C\",\n \"ASP\": \"D\",\n \"GLU\": \"E\",\n \"PHE\": \"F\",\n \"GLY\": \"G\",\n \"HIS\": \"H\",\n \"ILE\": \"I\",\n \"LYS\": \"K\",\n \"LEU\": \"L\",\n \"MET\": \"M\",\n \"ASN\": \"N\",\n \"PRO\": \"P\",\n \"GLN\": \"Q\",\n \"ARG\": \"R\",\n \"SER\": \"S\",\n \"THR\": \"T\",\n \"VAL\": \"V\",\n \"TRP\": \"W\",\n \"TYR\": \"Y\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"_ = require(\"underscore\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2166,"value":"NGL = require(\"ngl@2.0.0-dev.38\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"d3=require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"bioseq = require(\"bioseq\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2172,"value":"React = r('react')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2174,"value":"r = require.alias({\n react: \"react@16/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2181,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2192,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"md`\n---\n## Table of PReC Collection\n\n1. [PReC Introduction](https://observablehq.com/@hyphy/prec?collection=@hyphy/prec)\n1. The Poster Example - you are here!\n1. PREI\n1. PROPERTY\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}