molstar
Version:
A comprehensive macromolecular library.
323 lines • 23.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ViewportComponent = exports.ShowButtons = exports.IllustrativePreset = exports.StructurePreset = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
/**
* Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
var interactions_1 = require("../../mol-model-props/computed/representations/interactions");
var interaction_type_1 = require("../../mol-model-props/computed/themes/interaction-type");
var representation_preset_1 = require("../../mol-plugin-state/builder/structure/representation-preset");
var structure_selection_query_1 = require("../../mol-plugin-state/helpers/structure-selection-query");
var base_1 = require("../../mol-plugin-ui/base");
var controls_1 = require("../../mol-plugin-ui/controls");
var common_1 = require("../../mol-plugin-ui/controls/common");
var task_1 = require("../../mol-plugin-ui/task");
var toast_1 = require("../../mol-plugin-ui/toast");
var viewport_1 = require("../../mol-plugin-ui/viewport");
var commands_1 = require("../../mol-plugin/commands");
var config_1 = require("../../mol-plugin/config");
var builder_1 = require("../../mol-script/language/builder");
var mol_state_1 = require("../../mol-state");
var color_1 = require("../../mol-util/color");
function shinyStyle(plugin) {
return commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
renderer: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer), { style: { name: 'plastic', params: {} } }),
postprocessing: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.postprocessing), { occlusion: { name: 'off', params: {} }, outline: { name: 'off', params: {} } })
} });
}
function occlusionStyle(plugin) {
return commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
renderer: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer), { style: { name: 'flat', params: {} } }),
postprocessing: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.postprocessing), { occlusion: { name: 'on', params: {
samples: 64,
radius: 8,
bias: 1.0,
blurKernelSize: 13
} }, outline: { name: 'on', params: {
scale: 1.0,
threshold: 0.33
} } })
} });
}
var ligandPlusSurroundings = (0, structure_selection_query_1.StructureSelectionQuery)('Surrounding Residues (5 \u212B) of Ligand plus Ligand itself', builder_1.MolScriptBuilder.struct.modifier.union([
builder_1.MolScriptBuilder.struct.modifier.includeSurroundings({
0: structure_selection_query_1.StructureSelectionQueries.ligand.expression,
radius: 5,
'as-whole-residues': true
})
]));
var ligandSurroundings = (0, structure_selection_query_1.StructureSelectionQuery)('Surrounding Residues (5 \u212B) of Ligand', builder_1.MolScriptBuilder.struct.modifier.union([
builder_1.MolScriptBuilder.struct.modifier.exceptBy({
0: ligandPlusSurroundings.expression,
by: structure_selection_query_1.StructureSelectionQueries.ligand.expression
})
]));
var PresetParams = (0, tslib_1.__assign)({}, representation_preset_1.StructureRepresentationPresetProvider.CommonParams);
exports.StructurePreset = (0, representation_preset_1.StructureRepresentationPresetProvider)({
id: 'preset-structure',
display: { name: 'Structure' },
params: function () { return PresetParams; },
apply: function (ref, params, plugin) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var structureCell, components, _a, update, builder, typeParams, representations;
var _b;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
if (!structureCell)
return [2 /*return*/, {}];
_b = {};
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'ligand')];
case 1:
_b.ligand = _c.sent();
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'polymer')];
case 2:
components = (_b.polymer = _c.sent(),
_b);
_a = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _a.update, builder = _a.builder, typeParams = _a.typeParams;
representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { sizeFactor: 0.35 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: (0, tslib_1.__assign)({}, typeParams), color: 'chain-id', colorParams: { palette: plugin.customState.colorPalette } }, { tag: 'polymer' }),
};
return [4 /*yield*/, update.commit({ revertOnError: true })];
case 3:
_c.sent();
return [4 /*yield*/, shinyStyle(plugin)];
case 4:
_c.sent();
plugin.managers.interactivity.setProps({ granularity: 'residue' });
return [2 /*return*/, { components: components, representations: representations }];
}
});
});
}
});
exports.IllustrativePreset = (0, representation_preset_1.StructureRepresentationPresetProvider)({
id: 'preset-illustrative',
display: { name: 'Illustrative' },
params: function () { return PresetParams; },
apply: function (ref, params, plugin) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var structureCell, components, _a, update, builder, typeParams, representations;
var _b;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
if (!structureCell)
return [2 /*return*/, {}];
_b = {};
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'ligand')];
case 1:
_b.ligand = _c.sent();
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'polymer')];
case 2:
components = (_b.polymer = _c.sent(),
_b);
_a = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _a.update, builder = _a.builder, typeParams = _a.typeParams;
representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'spacefill', typeParams: (0, tslib_1.__assign)({}, typeParams), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
polymer: builder.buildRepresentation(update, components.polymer, { type: 'spacefill', typeParams: (0, tslib_1.__assign)({}, typeParams), color: 'illustrative', colorParams: { palette: plugin.customState.colorPalette } }, { tag: 'polymer' }),
};
return [4 /*yield*/, update.commit({ revertOnError: true })];
case 3:
_c.sent();
return [4 /*yield*/, occlusionStyle(plugin)];
case 4:
_c.sent();
plugin.managers.interactivity.setProps({ granularity: 'residue' });
return [2 /*return*/, { components: components, representations: representations }];
}
});
});
}
});
var SurfacePreset = (0, representation_preset_1.StructureRepresentationPresetProvider)({
id: 'preset-surface',
display: { name: 'Surface' },
params: function () { return PresetParams; },
apply: function (ref, params, plugin) {
var _a;
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var structureCell, structure, components, _b, update, builder, typeParams, representations;
var _c;
return (0, tslib_1.__generator)(this, function (_d) {
switch (_d.label) {
case 0:
structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
structure = (_a = structureCell === null || structureCell === void 0 ? void 0 : structureCell.obj) === null || _a === void 0 ? void 0 : _a.data;
if (!structureCell || !structure)
return [2 /*return*/, {}];
_c = {};
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'ligand')];
case 1:
_c.ligand = _d.sent();
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'polymer')];
case 2:
components = (_c.polymer = _d.sent(),
_c);
_b = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _b.update, builder = _b.builder, typeParams = _b.typeParams;
representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { sizeFactor: 0.26 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
polymer: builder.buildRepresentation(update, components.polymer, { type: 'molecular-surface', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { quality: 'custom', resolution: 0.5, doubleSided: true }), color: 'partial-charge' }, { tag: 'polymer' }),
};
return [4 /*yield*/, update.commit({ revertOnError: true })];
case 3:
_d.sent();
return [4 /*yield*/, shinyStyle(plugin)];
case 4:
_d.sent();
plugin.managers.interactivity.setProps({ granularity: 'residue' });
return [2 /*return*/, { components: components, representations: representations }];
}
});
});
}
});
var PocketPreset = (0, representation_preset_1.StructureRepresentationPresetProvider)({
id: 'preset-pocket',
display: { name: 'Pocket' },
params: function () { return PresetParams; },
apply: function (ref, params, plugin) {
var _a;
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var structureCell, structure, components, _b, update, builder, typeParams, representations;
var _c;
return (0, tslib_1.__generator)(this, function (_d) {
switch (_d.label) {
case 0:
structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
structure = (_a = structureCell === null || structureCell === void 0 ? void 0 : structureCell.obj) === null || _a === void 0 ? void 0 : _a.data;
if (!structureCell || !structure)
return [2 /*return*/, {}];
_c = {};
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'ligand')];
case 1:
_c.ligand = _d.sent();
return [4 /*yield*/, plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandSurroundings, "surroundings")];
case 2:
components = (_c.surroundings = _d.sent(),
_c);
_b = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _b.update, builder = _b.builder, typeParams = _b.typeParams;
representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { sizeFactor: 0.26 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }), color: 'partial-charge' }, { tag: 'surroundings' }),
};
return [4 /*yield*/, update.commit({ revertOnError: true })];
case 3:
_d.sent();
return [4 /*yield*/, shinyStyle(plugin)];
case 4:
_d.sent();
plugin.managers.interactivity.setProps({ granularity: 'element' });
return [2 /*return*/, { components: components, representations: representations }];
}
});
});
}
});
var InteractionsPreset = (0, representation_preset_1.StructureRepresentationPresetProvider)({
id: 'preset-interactions',
display: { name: 'Interactions' },
params: function () { return PresetParams; },
apply: function (ref, params, plugin) {
var _a;
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var structureCell, structure, components, _b, update, builder, typeParams, representations;
var _c;
return (0, tslib_1.__generator)(this, function (_d) {
switch (_d.label) {
case 0:
structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
structure = (_a = structureCell === null || structureCell === void 0 ? void 0 : structureCell.obj) === null || _a === void 0 ? void 0 : _a.data;
if (!structureCell || !structure)
return [2 /*return*/, {}];
_c = {};
return [4 /*yield*/, (0, representation_preset_1.presetStaticComponent)(plugin, structureCell, 'ligand')];
case 1:
_c.ligand = _d.sent();
return [4 /*yield*/, plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandSurroundings, "surroundings")];
case 2:
_c.surroundings = _d.sent();
return [4 /*yield*/, plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandPlusSurroundings, "interactions")];
case 3:
components = (_c.interactions = _d.sent(),
_c);
_b = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _b.update, builder = _b.builder, typeParams = _b.typeParams;
representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { sizeFactor: 0.3 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
ballAndStick: builder.buildRepresentation(update, components.surroundings, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { sizeFactor: 0.1, sizeAspectRatio: 1 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ball-and-stick' }),
interactions: builder.buildRepresentation(update, components.interactions, { type: interactions_1.InteractionsRepresentationProvider, typeParams: (0, tslib_1.__assign)({}, typeParams), color: interaction_type_1.InteractionTypeColorThemeProvider }, { tag: 'interactions' }),
label: builder.buildRepresentation(update, components.surroundings, { type: 'label', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { background: false, borderWidth: 0.1 }), color: 'uniform', colorParams: { value: (0, color_1.Color)(0x000000) } }, { tag: 'label' }),
};
return [4 /*yield*/, update.commit({ revertOnError: true })];
case 4:
_d.sent();
return [4 /*yield*/, shinyStyle(plugin)];
case 5:
_d.sent();
plugin.managers.interactivity.setProps({ granularity: 'element' });
return [2 /*return*/, { components: components, representations: representations }];
}
});
});
}
});
exports.ShowButtons = config_1.PluginConfig.item('showButtons', true);
var ViewportComponent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ViewportComponent, _super);
function ViewportComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.set = function (preset) { 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*/, this._set(this.plugin.managers.structure.hierarchy.selection.structures, preset)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
_this.structurePreset = function () { return _this.set(exports.StructurePreset); };
_this.illustrativePreset = function () { return _this.set(exports.IllustrativePreset); };
_this.surfacePreset = function () { return _this.set(SurfacePreset); };
_this.pocketPreset = function () { return _this.set(PocketPreset); };
_this.interactionsPreset = function () { return _this.set(InteractionsPreset); };
return _this;
}
ViewportComponent.prototype._set = function (structures, preset) {
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*/, this.plugin.managers.structure.component.clear(structures)];
case 1:
_a.sent();
return [4 /*yield*/, this.plugin.managers.structure.component.applyPreset(structures, preset)];
case 2:
_a.sent();
return [2 /*return*/];
}
});
});
};
Object.defineProperty(ViewportComponent.prototype, "showButtons", {
get: function () {
return this.plugin.config.get(exports.ShowButtons);
},
enumerable: false,
configurable: true
});
ViewportComponent.prototype.render = function () {
var _a, _b;
var VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || viewport_1.ViewportControls;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}, void 0), this.showButtons && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.structurePreset }, { children: "Structure" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.illustrativePreset }, { children: "Illustrative" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.surfacePreset }, { children: "Surface" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.interactionsPreset }, { children: "Interactions" }), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(VPControls, {}, void 0), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}, void 0), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {}, void 0)] }), void 0)] }, void 0);
};
return ViewportComponent;
}(base_1.PluginUIComponent));
exports.ViewportComponent = ViewportComponent;
//# sourceMappingURL=viewport.js.map