The avatar for @stephenshank
Stephen Shank
Published
Edited
Jan 28, 2022
Fork of SARS-CoV-2 ACE2/protein interaction and evolution for Omicron variant
•
1 fork
2
Insert cell
Insert cell
viewport = {
let v = DOM.element("div");
v.id="viewport";
v.style.height = "500px"
return v;
}
Insert cell
tooltip = {
let tt = document.createElement("div");
document.body.appendChild(tt);
Object.assign(tt.style, {
display: "none",
position: "absolute",
zIndex: 10,
pointerEvents: "none",
backgroundColor: "rgba(0, 0, 0, 0.6)",
color: "lightgrey",
padding: "0.5em",
fontFamily: "sans-serif"
});
return tt;
}
Insert cell
schemeId = {
return NGL.ColormakerRegistry.addScheme(function (params) {
this.atomColor = function (atom) {
if (['B','C', 'D'].includes(atom.chainname)) {
if(atom.residue.resno < 100) {
console.log(atom.residue.resno)
console.log(omicronsites[atom.residue.resno])
}
if(omicronsites[atom.residue.resno]) {
return color_hash[omicronsites[atom.residue.resno].color];
}
return 0xEEEEEE;
}
else {
// light blue
return 0xB19CD9;
}
}
})
}
Insert cell
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;
var mp = pickingProxy.mouse.position;
let residue = atom.residue;
tooltip.innerText = residue.index + ' - index\n' +
residue.resno + ' - resno\n' +
residue.resname + ' - long resname\n' +
three_to_one[residue.resname] + ' - short resname\n' +
residue.chainname + ' - chain name\n' +
(omicronsites[residue.resno] ? omicronsites[residue.resno].annotation : '');
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
};
Insert cell
component = {
const molecule = "rcsb://7DF4";
let str;
stage.removeAllComponents();
await stage.loadFile(molecule).then(d=>{
d.addRepresentation("rope", {color: schemeId})
d.addRepresentation("spacefill", { sele: selection_string , color: schemeId});

stage.autoView();
stage.setSpin (false);
str = d;
})
return str;
}
Insert cell
html`<div id='alignment_div'>`
Insert cell
NGL = require("ngl@2.0.0-dev.38")
Insert cell
d3=require("d3")
Insert cell
bioseq = require("bioseq")
Insert cell
React = r('react')
Insert cell
r = require.alias({
react: "react@16/umd/react.production.min.js",
"react-dom": "react-dom@16/umd/react-dom.production.min.js"
})
Insert cell
html`<link type="text/css" href="https://stephenshank.com/alignment.css" rel="stylesheet">`
Insert cell
ReactDOM = r('react-dom')
Insert cell
three_to_one = {
return {
"ALA": "A",
"CYS": "C",
"ASP": "D",
"GLU": "E",
"PHE": "F",
"GLY": "G",
"HIS": "H",
"ILE": "I",
"LYS": "K",
"LEU": "L",
"MET": "M",
"ASN": "N",
"PRO": "P",
"GLN": "Q",
"ARG": "R",
"SER": "S",
"THR": "T",
"VAL": "V",
"TRP": "W",
"TYR": "Y"
}
}
Insert cell
component.defaultParameters
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
omicronsites = {
let site_table = await FileAttachment("omicronsites@3.csv").csv();
let site_hash = {};
site_table.forEach(site_datum => site_hash[+site_datum.site] = site_datum);
return site_hash;
}
Insert cell
color_hash = {
return {
green: 0x008000,
cyan: 0x00FFFF,
yellow: 0xFFFF00,
grey: 0xBBBBBB
};
}
Insert cell
_ = require ("lodash")
Insert cell
selection_string = _.map (
Object.keys(omicronsites), (i, s) => ['B', 'C', 'D'].map(chain => i + ':' + chain).join(" OR ")
).join (" OR ")
Insert cell

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.
Learn more