stage.viewerControls.getOrientation()
links = {
let links = {};
links.V1 = [
[366, 575],
[479, 490],
[560, 716]
];
links.V2 = [
[417, 501],
[501, 701]
]
links.V3 = [
];
return links;
}
scheme_ids = {
let all_scheme_ids = {};
all_scheme_ids['6JX7'] = NGL.ColormakerRegistry.addScheme(function (params) {
this.atomColor = function (atom) {
if (['A', 'B', 'C'].includes(atom.chainname)) {
// white to red
return parseInt(d3.color(scale(diversity[atom.residue.resno])).formatHex().slice(1), 16);
}
else {
// light blue
return 0xADD8E6;
}
}
})
return all_scheme_ids;
}
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' +
diversity[residue.resno] + ' - diversity\n';
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
};
component = {
const molecule = `rcsb://${pdb}`;
let str;
clade;
stage.removeAllComponents();
await stage.loadFile(molecule).then(d => {
d.addRepresentation("rope", {color: scheme_ids[pdb]})
d.addRepresentation("surface", { sele: selection_string , color: scheme_ids[pdb]});
d.addRepresentation("surface", {
sele: ntd_string,
isolevelType: "value",
isolevel: -0.4,
smooth: 10,
color: "yellow",
opacity: 0.3,
side: "back",
opaqueBack: false
})
stage.autoView();
stage.setSpin(false);
//let shape = new NGL.Shape("shape", { dashedCylinder: true, radialSegments: 10 });
//['A', 'B', 'C'].forEach(chain => {
// links[clade].forEach((link, i) => {
// let point1 = d.getCenter((link[0]) + ":" + chain),
// point2 = d.getCenter((link[1]) + ":" + chain),
// pos1 = [point1.x, point1.y, point1.z],
// pos2 = [point2.x, point2.y, point2.z];
// shape.addCylinder(
// pos1,
// pos2,
// [ 1, 0, 1 ],
// .5,
// "clade " + clade + "link " + i
// )
// });
//});
//var shapeComp = stage.addComponentFromObject(shape)
//shapeComp.addRepresentation("buffer")
//shapeComp.autoView()
//str = d;
});
stage.viewerControls.orient([-204.8139763559188, 6.731640744036107, -213.30921374461087, 0, -213.4148729082723, -7.121326108482309, 204.69069178197176, 0, -0.4771551108963838, 295.6330027137621, 9.78777787091102, 0, -215.96800231933594, -166.1230010986328, -213.31199645996094, 1]);
return str;
}
pdb = {
let pdb = '6JX7';
return pdb;
}
ntd_string = _.map (
Array.from(Array(275).keys()), (i, s) => ['A', 'B', 'C'].map(chain => s + ':' + chain).join(" OR ")
).join (" OR ")
selection_string = _.map (
sitesToTag, (i, s) => ['A', 'B', 'C'].map(chain => s + ':' + chain).join(" OR ")
).join (" OR ")
//diversity = diversity_full.map(row => +row.diversity)
// diversity = {
// let e = _.map (_.range (1465), (d)=>"Neither");
// _.each (sitesToTag, (t,s)=>e[s] = t);
// return e;
// }
sitesToTag = ({33: 'FIPV',
64: 'FIPV',
93: 'FIPV',
95: 'FIPV',
96: 'FIPV',
105: 'FIPV'
})
// sitesToTag = ({33: 'FIPV',
// 64: 'FIPV',
// 93: 'FIPV',
// 95: 'FIPV',
// 96: 'FIPV',
// 105: 'FIPV',
// 516: 'FIPV',
// 567: 'FIPV',
// 617: 'FIPV',
// 1103: 'FIPV',
// 1107: 'FIPV',
// 1134: 'FIPV',
// 1141: 'FIPV',
// 1187: 'FIPV',
// 789: 'CFEL',
// 1046: 'CFEL'
// })
// sitesToTag = {
// let sites = {};
// _.each (_.filter (joint_MEME_list, (d)=>d.coord.split ("/")[0] == "S"), (s)=>{
// let site = +s.coord.split ("/")[1];
// if (s[clade]) {
// if ('meme' in s[clade]) {
// if ('subs' in s[clade]) {
// sites[site] = 'Selected/Convergent';
// } else {
// sites[site] = 'Selected';
// }
// } else {
// if ('subs' in s[clade]) {
// sites[site] = 'Convergent';
// }
// }
// }
// });
// sites[501] = 'N501Y';
// return sites;
// }
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.
