viewport.style.height = "400px"
tooltip = document.createElement("div")
document.body.appendChild(tooltip)
Object.assign(tooltip.style, {
display: "none",
position: "absolute",
zIndex: 10,
pointerEvents: "none",
backgroundColor: "rgba(0, 0, 0, 0.6)",
color: "lightgrey",
padding: "0.5em",
fontFamily: "sans-serif"
});
schemeId = {
return NGL.ColormakerRegistry.addScheme(function (params) {
this.atomColor = function (atom) {
if (atom.chainname == 'A') {
// ACE2
return 0x0000FF // blue
}
if (s_mutations_good[''+(atom.resno-333)]) {
return 0x00FF00 // green
//return 0xffA500 // orange
}
if (s_mutations_bad[''+(atom.resno-333)]) {
return 0xFF0000 // red
//return 0xffA500 // orange
} else {
//return 0x0000FF // blue
return 0x000000 //blacck
}
}
})
}
str = {
const molecule = "rcsb://7C8D";
let str;
stage.removeAllComponents();
await stage.loadFile(molecule).then(d=>{
d.addRepresentation("rope", {color: schemeId})
//d.addRepresentation( "surface", { sele: ":B and (" + Object.keys(s_mutations).map(key=>""+(+key+333)).join (", ")+")", color: "orange"});
//d.addRepresentation( "label", { labelType: "atomname", sele: "400-500"});
stage.autoView();
stage.setSpin (false);
str = d;
})
return str;
}
stage = {
let s = new NGL.Stage( "viewport" ,{ backgroundColor: "white" })
s.mouseControls.remove("hoverPick")
s.signals.hovered.add(function (pickingProxy) {
if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)){
var atom = pickingProxy.atom || pickingProxy.closestBondAtom;
if (atom.chainname == 'A') {
tooltip.style.display = "none";
return;
}
var mp = pickingProxy.mouse.position
var mutation_data = s_mutations_good[atom.resno-333];
if(mutation_data) {
tooltip.innerText = mutation_data.map(md => {
return md.Amino_Acid_Change + ',' + md.Article;
}).join('\n');
} else {
tooltip.innerText = three_to_one[atom.resname] + ' '+ atom.resno;
}
tooltip.style.bottom = window.innerHeight - mp.y + 3 + "px"
tooltip.style.left = mp.x + 3 + "px"
tooltip.style.display = "block"
} else {
tooltip.style.display = "none";
}
})
return s
};
NGL = require("https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.37/dist/ngl.js")
import {text} from "@jashkenas/inputs"
s_mutations_good = {
return {
"84": [
{
"Amino_Acid_Change": "K417N, K417T",
"Article" : "Beta, Gamma"
}
],
"119": [
{
"Amino_Acid_Change": "L452R",
"Article" : "Kappa"
}
],
"151": [
{
"Amino_Acid_Change": "E484K, E484Q",
"Article" : "Beta, Kappa"
}
],
"168": [
{
"Amino_Acid_Change": "N501Y",
"Article" : "Alpha"
}
],
}
}
s_mutations_bad = {
return {
"119": [
{
"Amino_Acid_Change": "L452R, L452Q",
"Article" : "Delta, Lambda"
}
],
"145": [
{
"Amino_Acid_Change": "T478K",
"Article" : "Delta"
}
],
"157": [
{
"Amino_Acid_Change": "F490S",
"Article" : "Lambda"
}
]
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
