molstar
Version:
A comprehensive macromolecular library.
289 lines • 15.2 kB
JavaScript
"use strict";
/**
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
require("./index.html");
var canvas3d_1 = require("../../mol-canvas3d/canvas3d");
var cif_1 = require("../../mol-io/reader/cif");
var structure_1 = require("../../mol-model/structure");
var color_1 = require("../../mol-theme/color");
var size_1 = require("../../mol-theme/size");
var cartoon_1 = require("../../mol-repr/structure/representation/cartoon");
var mmcif_1 = require("../../mol-model-formats/structure/mmcif");
var molecular_surface_1 = require("../../mol-repr/structure/representation/molecular-surface");
var ball_and_stick_1 = require("../../mol-repr/structure/representation/ball-and-stick");
var gaussian_surface_1 = require("../../mol-repr/structure/representation/gaussian-surface");
var util_1 = require("../../mol-canvas3d/util");
var representation_1 = require("../../mol-repr/representation");
var operators_1 = require("rxjs/operators");
var marker_action_1 = require("../../mol-util/marker-action");
var loci_1 = require("../../mol-model/loci");
var label_1 = require("../../mol-theme/label");
var interactions_1 = require("../../mol-model-props/computed/representations/interactions");
var interactions_2 = require("../../mol-model-props/computed/interactions");
var secondary_structure_1 = require("../../mol-model-props/computed/secondary-structure");
var synchronous_1 = require("../../mol-task/execution/synchronous");
var assets_1 = require("../../mol-util/assets");
var prop_1 = require("../../extensions/anvil/prop");
var representation_2 = require("../../extensions/anvil/representation");
var parent = document.getElementById('app');
parent.style.width = '100%';
parent.style.height = '100%';
var canvas = document.createElement('canvas');
parent.appendChild(canvas);
(0, util_1.resizeCanvas)(canvas, parent);
var canvas3d = canvas3d_1.Canvas3D.create(canvas3d_1.Canvas3DContext.fromCanvas(canvas));
canvas3d.animate();
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.fontFamily = 'sans-serif';
info.style.fontSize = '16pt';
info.style.bottom = '20px';
info.style.right = '20px';
info.style.color = 'white';
parent.appendChild(info);
var prevReprLoci = representation_1.Representation.Loci.Empty;
canvas3d.input.move.pipe((0, operators_1.throttleTime)(100)).subscribe(function (_a) {
var _b;
var x = _a.x, y = _a.y;
var pickingId = (_b = canvas3d.identify(x, y)) === null || _b === void 0 ? void 0 : _b.id;
var label = '';
if (pickingId) {
var reprLoci = canvas3d.getLoci(pickingId);
label = (0, label_1.lociLabel)(reprLoci.loci);
if (!representation_1.Representation.Loci.areEqual(prevReprLoci, reprLoci)) {
canvas3d.mark(prevReprLoci, marker_action_1.MarkerAction.RemoveHighlight);
canvas3d.mark(reprLoci, marker_action_1.MarkerAction.Highlight);
prevReprLoci = reprLoci;
}
}
else {
canvas3d.mark({ loci: loci_1.EveryLoci }, marker_action_1.MarkerAction.RemoveHighlight);
prevReprLoci = representation_1.Representation.Loci.Empty;
}
info.innerHTML = label;
});
function parseCif(data) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var comp, parsed;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
comp = cif_1.CIF.parse(data);
return [4 /*yield*/, comp.run()];
case 1:
parsed = _a.sent();
if (parsed.isError)
throw parsed;
return [2 /*return*/, parsed.result];
}
});
});
}
function downloadCif(url, isBinary) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var data, _a, _b, _c;
return (0, tslib_1.__generator)(this, function (_d) {
switch (_d.label) {
case 0: return [4 /*yield*/, fetch(url)];
case 1:
data = _d.sent();
_a = parseCif;
if (!isBinary) return [3 /*break*/, 3];
_c = Uint8Array.bind;
return [4 /*yield*/, data.arrayBuffer()];
case 2:
_b = new (_c.apply(Uint8Array, [void 0, _d.sent()]))();
return [3 /*break*/, 5];
case 3: return [4 /*yield*/, data.text()];
case 4:
_b = _d.sent();
_d.label = 5;
case 5: return [2 /*return*/, _a.apply(void 0, [_b])];
}
});
});
}
function downloadFromPdb(pdb) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var parsed;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, downloadCif("https://models.rcsb.org/" + pdb + ".bcif", true)];
case 1:
parsed = _a.sent();
return [2 /*return*/, parsed.blocks[0]];
}
});
});
}
function getModels(frame) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, (0, mmcif_1.trajectoryFromMmCIF)(frame).run()];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
}
function getStructure(model) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
return [2 /*return*/, structure_1.Structure.ofModel(model)];
});
});
}
var reprCtx = {
webgl: canvas3d.webgl,
colorThemeRegistry: color_1.ColorTheme.createRegistry(),
sizeThemeRegistry: size_1.SizeTheme.createRegistry()
};
function getCartoonRepr() {
return cartoon_1.CartoonRepresentationProvider.factory(reprCtx, cartoon_1.CartoonRepresentationProvider.getParams);
}
function getInteractionRepr() {
return interactions_1.InteractionsRepresentationProvider.factory(reprCtx, interactions_1.InteractionsRepresentationProvider.getParams);
}
function getBallAndStickRepr() {
return ball_and_stick_1.BallAndStickRepresentationProvider.factory(reprCtx, ball_and_stick_1.BallAndStickRepresentationProvider.getParams);
}
function getMolecularSurfaceRepr() {
return molecular_surface_1.MolecularSurfaceRepresentationProvider.factory(reprCtx, molecular_surface_1.MolecularSurfaceRepresentationProvider.getParams);
}
function getGaussianSurfaceRepr() {
return gaussian_surface_1.GaussianSurfaceRepresentationProvider.factory(reprCtx, gaussian_surface_1.GaussianSurfaceRepresentationProvider.getParams);
}
function getMembraneOrientationRepr() {
return representation_2.MembraneOrientationRepresentationProvider.factory(reprCtx, representation_2.MembraneOrientationRepresentationProvider.getParams);
}
function init() {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var ctx, cif, models, structure, show, cartoonRepr, interactionRepr, ballAndStickRepr, molecularSurfaceRepr, gaussianSurfaceRepr, membraneOrientationRepr;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
ctx = { runtime: synchronous_1.SyncRuntimeContext, assetManager: new assets_1.AssetManager() };
return [4 /*yield*/, downloadFromPdb('3pqr')];
case 1:
cif = _a.sent();
return [4 /*yield*/, getModels(cif)];
case 2:
models = _a.sent();
return [4 /*yield*/, getStructure(models.representative)];
case 3:
structure = _a.sent();
console.time('compute SecondaryStructure');
return [4 /*yield*/, secondary_structure_1.SecondaryStructureProvider.attach(ctx, structure)];
case 4:
_a.sent();
console.timeEnd('compute SecondaryStructure');
console.time('compute Membrane Orientation');
return [4 /*yield*/, prop_1.MembraneOrientationProvider.attach(ctx, structure)];
case 5:
_a.sent();
console.timeEnd('compute Membrane Orientation');
console.time('compute Interactions');
return [4 /*yield*/, interactions_2.InteractionsProvider.attach(ctx, structure)];
case 6:
_a.sent();
console.timeEnd('compute Interactions');
console.log(interactions_2.InteractionsProvider.get(structure).value);
show = {
cartoon: true,
interaction: true,
ballAndStick: true,
molecularSurface: false,
gaussianSurface: false,
membrane: true
};
cartoonRepr = getCartoonRepr();
interactionRepr = getInteractionRepr();
ballAndStickRepr = getBallAndStickRepr();
molecularSurfaceRepr = getMolecularSurfaceRepr();
gaussianSurfaceRepr = getGaussianSurfaceRepr();
membraneOrientationRepr = getMembraneOrientationRepr();
if (!show.cartoon) return [3 /*break*/, 8];
cartoonRepr.setTheme({
color: reprCtx.colorThemeRegistry.create('element-symbol', { structure: structure }),
size: reprCtx.sizeThemeRegistry.create('uniform', { structure: structure })
});
return [4 /*yield*/, cartoonRepr.createOrUpdate((0, tslib_1.__assign)((0, tslib_1.__assign)({}, cartoon_1.CartoonRepresentationProvider.defaultValues), { quality: 'auto' }), structure).run()];
case 7:
_a.sent();
_a.label = 8;
case 8:
if (!show.interaction) return [3 /*break*/, 10];
interactionRepr.setTheme({
color: reprCtx.colorThemeRegistry.create('interaction-type', { structure: structure }),
size: reprCtx.sizeThemeRegistry.create('uniform', { structure: structure })
});
return [4 /*yield*/, interactionRepr.createOrUpdate((0, tslib_1.__assign)((0, tslib_1.__assign)({}, interactions_1.InteractionsRepresentationProvider.defaultValues), { quality: 'auto' }), structure).run()];
case 9:
_a.sent();
_a.label = 10;
case 10:
if (!show.ballAndStick) return [3 /*break*/, 12];
ballAndStickRepr.setTheme({
color: reprCtx.colorThemeRegistry.create('element-symbol', { structure: structure }),
size: reprCtx.sizeThemeRegistry.create('uniform', { structure: structure }, { value: 1 })
});
return [4 /*yield*/, ballAndStickRepr.createOrUpdate((0, tslib_1.__assign)((0, tslib_1.__assign)({}, ball_and_stick_1.BallAndStickRepresentationProvider.defaultValues), { quality: 'auto' }), structure).run()];
case 11:
_a.sent();
_a.label = 12;
case 12:
if (!show.molecularSurface) return [3 /*break*/, 14];
molecularSurfaceRepr.setTheme({
color: reprCtx.colorThemeRegistry.create('secondary-structure', { structure: structure }),
size: reprCtx.sizeThemeRegistry.create('physical', { structure: structure })
});
console.time('molecular surface');
return [4 /*yield*/, molecularSurfaceRepr.createOrUpdate((0, tslib_1.__assign)((0, tslib_1.__assign)({}, molecular_surface_1.MolecularSurfaceRepresentationProvider.defaultValues), { quality: 'custom', alpha: 0.5, flatShaded: true, doubleSided: true, resolution: 0.3 }), structure).run()];
case 13:
_a.sent();
console.timeEnd('molecular surface');
_a.label = 14;
case 14:
if (!show.gaussianSurface) return [3 /*break*/, 16];
gaussianSurfaceRepr.setTheme({
color: reprCtx.colorThemeRegistry.create('secondary-structure', { structure: structure }),
size: reprCtx.sizeThemeRegistry.create('physical', { structure: structure })
});
console.time('gaussian surface');
return [4 /*yield*/, gaussianSurfaceRepr.createOrUpdate((0, tslib_1.__assign)((0, tslib_1.__assign)({}, gaussian_surface_1.GaussianSurfaceRepresentationProvider.defaultValues), { quality: 'custom', alpha: 1.0, flatShaded: true, doubleSided: true, resolution: 0.3 }), structure).run()];
case 15:
_a.sent();
console.timeEnd('gaussian surface');
_a.label = 16;
case 16:
if (!show.membrane) return [3 /*break*/, 18];
return [4 /*yield*/, membraneOrientationRepr.createOrUpdate((0, tslib_1.__assign)((0, tslib_1.__assign)({}, representation_2.MembraneOrientationRepresentationProvider.defaultValues), { quality: 'auto' }), structure).run()];
case 17:
_a.sent();
_a.label = 18;
case 18:
if (show.cartoon)
canvas3d.add(cartoonRepr);
if (show.interaction)
canvas3d.add(interactionRepr);
if (show.ballAndStick)
canvas3d.add(ballAndStickRepr);
if (show.molecularSurface)
canvas3d.add(molecularSurfaceRepr);
if (show.gaussianSurface)
canvas3d.add(gaussianSurfaceRepr);
if (show.membrane)
canvas3d.add(membraneOrientationRepr);
canvas3d.requestCameraReset();
return [2 /*return*/];
}
});
});
}
init();
//# sourceMappingURL=render-structure.js.map