molstar
Version:
A comprehensive macromolecular library.
332 lines • 24.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SuperpositionControls = exports.StructureSuperpositionParams = exports.StructureSuperpositionControls = 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 base_1 = require("../base");
var icons_1 = require("../controls/icons");
var common_1 = require("../controls/common");
var structure_1 = require("../../mol-model/structure");
var param_definition_1 = require("../../mol-util/param-definition");
var mol_state_1 = require("../../mol-state");
var transforms_1 = require("../../mol-plugin-state/transforms");
var superposition_1 = require("../../mol-model/structure/structure/util/superposition");
var structure_selection_query_1 = require("../../mol-plugin-state/helpers/structure-selection-query");
var label_1 = require("../../mol-theme/label");
var parameters_1 = require("../controls/parameters");
var string_1 = require("../../mol-util/string");
var selection_1 = require("./selection");
var superposition_db_mapping_1 = require("../../mol-model/structure/structure/util/superposition-db-mapping");
var commands_1 = require("../../mol-plugin/commands");
var best_database_mapping_1 = require("../../mol-model-props/sequence/best-database-mapping");
var StructureSuperpositionControls = /** @class */ (function (_super) {
(0, tslib_1.__extends)(StructureSuperpositionControls, _super);
function StructureSuperpositionControls() {
return _super !== null && _super.apply(this, arguments) || this;
}
StructureSuperpositionControls.prototype.defaultState = function () {
return {
isCollapsed: false,
header: 'Superposition',
brand: { accent: 'gray', svg: icons_1.SuperpositionSvg },
isHidden: true
};
};
StructureSuperpositionControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (sel) {
_this.setState({ isHidden: sel.structures.length < 2 });
});
};
StructureSuperpositionControls.prototype.renderControls = function () {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SuperpositionControls, {}, void 0) }, void 0);
};
return StructureSuperpositionControls;
}(base_1.CollapsableControls));
exports.StructureSuperpositionControls = StructureSuperpositionControls;
exports.StructureSuperpositionParams = {
alignSequences: param_definition_1.ParamDefinition.Boolean(true, { isEssential: true, description: 'Perform a sequence alignment and use the aligned residue pairs to guide the 3D superposition.' }),
};
var DefaultStructureSuperpositionOptions = param_definition_1.ParamDefinition.getDefaultValues(exports.StructureSuperpositionParams);
var SuperpositionTag = 'SuperpositionTransform';
;
;
var SuperpositionControls = /** @class */ (function (_super) {
(0, tslib_1.__extends)(SuperpositionControls, _super);
function SuperpositionControls() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isBusy: false,
canUseDb: false,
action: undefined,
options: DefaultStructureSuperpositionOptions
};
_this.superposeChains = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var query, entries, traceLocis, transforms, eA, i, il, eB, _a, bTransform, rmsd, labelA, labelB;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
query = structure_selection_query_1.StructureSelectionQueries.trace.query;
entries = this.chainEntries;
traceLocis = entries.map(function (e, i) {
var s = structure_1.StructureElement.Loci.toStructure(e.loci);
var loci = structure_1.StructureSelection.toLociWithSourceUnits(query(new structure_1.QueryContext(s)));
return structure_1.StructureElement.Loci.remap(loci, i === 0
? _this.plugin.helpers.substructureParent.get(e.loci.structure.root).obj.data
: loci.structure.root);
});
transforms = this.state.options.alignSequences
? (0, superposition_1.alignAndSuperpose)(traceLocis)
: (0, superposition_1.superpose)(traceLocis);
eA = entries[0];
i = 1, il = traceLocis.length;
_b.label = 1;
case 1:
if (!(i < il)) return [3 /*break*/, 4];
eB = entries[i];
_a = transforms[i - 1], bTransform = _a.bTransform, rmsd = _a.rmsd;
return [4 /*yield*/, this.transform(eB.cell, bTransform)];
case 2:
_b.sent();
labelA = (0, string_1.stripTags)(eA.label);
labelB = (0, string_1.stripTags)(eB.label);
this.plugin.log.info("Superposed [" + labelA + "] and [" + labelB + "] with RMSD " + rmsd.toFixed(2) + ".");
_b.label = 3;
case 3:
++i;
return [3 /*break*/, 1];
case 4: return [2 /*return*/];
}
});
}); };
_this.superposeAtoms = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var entries, atomLocis, transforms, eA, i, il, eB, _a, bTransform, rmsd, labelA, labelB, count;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
entries = this.atomEntries;
atomLocis = entries.map(function (e, i) {
return structure_1.StructureElement.Loci.remap(e.loci, i === 0
? _this.plugin.helpers.substructureParent.get(e.loci.structure.root).obj.data
: e.loci.structure.root);
});
transforms = (0, superposition_1.superpose)(atomLocis);
eA = entries[0];
i = 1, il = atomLocis.length;
_b.label = 1;
case 1:
if (!(i < il)) return [3 /*break*/, 4];
eB = entries[i];
_a = transforms[i - 1], bTransform = _a.bTransform, rmsd = _a.rmsd;
return [4 /*yield*/, this.transform(eB.cell, bTransform)];
case 2:
_b.sent();
labelA = (0, string_1.stripTags)(eA.label);
labelB = (0, string_1.stripTags)(eB.label);
count = entries[i].atoms.length;
this.plugin.log.info("Superposed " + count + " " + (count === 1 ? 'atom' : 'atoms') + " of [" + labelA + "] and [" + labelB + "] with RMSD " + rmsd.toFixed(2) + ".");
_b.label = 3;
case 3:
++i;
return [3 /*break*/, 1];
case 4: return [2 /*return*/];
}
});
}); };
_this.superposeDb = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var input, transforms, rmsd, _i, transforms_2, xform;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
input = this.plugin.managers.structure.hierarchy.behaviors.selection.value.structures;
transforms = (0, superposition_db_mapping_1.alignAndSuperposeWithBestDatabaseMapping)(input.map(function (s) { var _a; return (_a = s.cell.obj) === null || _a === void 0 ? void 0 : _a.data; }));
rmsd = 0;
_i = 0, transforms_2 = transforms;
_a.label = 1;
case 1:
if (!(_i < transforms_2.length)) return [3 /*break*/, 4];
xform = transforms_2[_i];
return [4 /*yield*/, this.transform(input[xform.other].cell, xform.transform.bTransform)];
case 2:
_a.sent();
rmsd += xform.transform.rmsd;
_a.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4:
rmsd /= transforms.length - 1;
this.plugin.log.info("Superposed " + input.length + " structures with avg. RMSD " + rmsd.toFixed(2) + ".");
return [4 /*yield*/, new Promise(function (res) { return requestAnimationFrame(res); })];
case 5:
_a.sent();
commands_1.PluginCommands.Camera.Reset(this.plugin);
return [2 /*return*/];
}
});
}); };
_this.toggleByChains = function () { return _this.setState({ action: _this.state.action === 'byChains' ? void 0 : 'byChains' }); };
_this.toggleByAtoms = function () { return _this.setState({ action: _this.state.action === 'byAtoms' ? void 0 : 'byAtoms' }); };
_this.toggleOptions = function () { return _this.setState({ action: _this.state.action === 'options' ? void 0 : 'options' }); };
_this.setOptions = function (values) {
_this.setState({ options: values });
};
return _this;
}
SuperpositionControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.selection.events.changed, function () {
_this.forceUpdate();
});
this.subscribe(this.selection.events.additionsHistoryUpdated, function () {
_this.forceUpdate();
});
this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
_this.setState({ isBusy: v });
});
this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (sel) {
_this.setState({ canUseDb: sel.structures.every(function (s) { var _a; return !!((_a = s.cell.obj) === null || _a === void 0 ? void 0 : _a.data) && s.cell.obj.data.models.some(function (m) { return best_database_mapping_1.BestDatabaseSequenceMapping.Provider.isApplicable(m); }); }) });
});
};
Object.defineProperty(SuperpositionControls.prototype, "selection", {
get: function () {
return this.plugin.managers.structure.selection;
},
enumerable: false,
configurable: true
});
SuperpositionControls.prototype.transform = function (s, matrix) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var r, o, params, b;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
r = mol_state_1.StateObjectRef.resolveAndCheck(this.plugin.state.data, s);
if (!r)
return [2 /*return*/];
o = mol_state_1.StateSelection.findTagInSubtree(this.plugin.state.data.tree, r.transform.ref, SuperpositionTag);
params = {
transform: {
name: 'matrix',
params: { data: matrix, transpose: false }
}
};
b = o
? this.plugin.state.data.build().to(o).update(params)
: this.plugin.state.data.build().to(s)
.insert(transforms_1.StateTransforms.Model.TransformStructureConformation, params, { tags: SuperpositionTag });
return [4 /*yield*/, this.plugin.runTask(this.plugin.state.data.updateTree(b))];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
SuperpositionControls.prototype.highlight = function (loci) {
this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: loci }, false);
};
SuperpositionControls.prototype.moveHistory = function (e, direction) {
this.plugin.managers.structure.selection.modifyHistory(e, direction, void 0, true);
};
SuperpositionControls.prototype.focusLoci = function (loci) {
this.plugin.managers.camera.focusLoci(loci);
};
SuperpositionControls.prototype.lociEntry = function (e, idx) {
var _this = this;
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0) }), void 0) }), idx);
};
SuperpositionControls.prototype.historyEntry = function (e, idx) {
var _this = this;
var history = this.plugin.managers.structure.selection.additionsHistory;
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [idx, ". ", (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0)] }), void 0), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }, void 0), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' }, void 0)] }), e.id);
};
SuperpositionControls.prototype.atomsLociEntry = function (e, idx) {
var _this = this;
return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-no-overflow', title: e.label }, { children: e.label }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: e.atoms.map(function (h, i) { return _this.historyEntry(h, i); }) }), void 0)] }, idx);
};
Object.defineProperty(SuperpositionControls.prototype, "chainEntries", {
get: function () {
var _this = this;
var location = structure_1.StructureElement.Location.create();
var entries = [];
this.plugin.managers.structure.selection.entries.forEach(function (_a, ref) {
var selection = _a.selection;
var cell = mol_state_1.StateObjectRef.resolveAndCheck(_this.plugin.state.data, ref);
if (!cell || structure_1.StructureElement.Loci.isEmpty(selection))
return;
// only single polymer chain selections
var l = structure_1.StructureElement.Loci.getFirstLocation(selection, location);
if (selection.elements.length > 1 || structure_1.StructureProperties.entity.type(l) !== 'polymer')
return;
var stats = structure_1.StructureElement.Stats.ofLoci(selection);
var counts = (0, label_1.structureElementStatsLabel)(stats, { countsOnly: true });
var chain = (0, label_1.elementLabel)(l, { reverse: true, granularity: 'chain' }).split('|');
var label = counts + " | " + chain[0] + " | " + chain[chain.length - 1];
entries.push({ loci: selection, label: label, cell: cell });
});
return entries;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SuperpositionControls.prototype, "atomEntries", {
get: function () {
var _this = this;
var structureEntries = new Map();
var history = this.plugin.managers.structure.selection.additionsHistory;
for (var i = 0, il = history.length; i < il; ++i) {
var e = history[i];
if (structure_1.StructureElement.Loci.size(e.loci) !== 1)
continue;
var k = e.loci.structure;
if (structureEntries.has(k))
structureEntries.get(k).push(e);
else
structureEntries.set(k, [e]);
}
var entries = [];
structureEntries.forEach(function (atoms, structure) {
var cell = _this.plugin.helpers.substructureParent.get(structure);
var elements = [];
for (var i = 0, il = atoms.length; i < il; ++i) {
// note, we don't do loci union here to keep order of selected atoms
// for atom pairing during superposition
elements.push(atoms[i].loci.elements[0]);
}
var loci = structure_1.StructureElement.Loci(atoms[0].loci.structure, elements);
var label = loci.structure.label.split(' | ')[0];
entries.push({ loci: loci, label: label, cell: cell, atoms: atoms });
});
return entries;
},
enumerable: false,
configurable: true
});
SuperpositionControls.prototype.addByChains = function () {
var _this = this;
var entries = this.chainEntries;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entries.length > 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.lociEntry(e, i); }) }), void 0), entries.length < 2 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }, void 0), "Add 2 or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single polymer chains or residues therein."] }), void 0) }), void 0), entries.length > 1 && (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ title: 'Superpose structures by selected chains.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeChains, style: { marginTop: '1px' } }, { children: "Superpose" }), void 0)] }, void 0);
};
SuperpositionControls.prototype.addByAtoms = function () {
var _this = this;
var entries = this.atomEntries;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entries.length > 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.atomsLociEntry(e, i); }) }), void 0), entries.length < 2 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }, void 0), "Add 1 or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single atoms."] }), void 0) }), void 0), entries.length > 1 && (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ title: 'Superpose structures by selected atoms.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeAtoms, style: { marginTop: '1px' } }, { children: "Superpose" }), void 0)] }, void 0);
};
SuperpositionControls.prototype.superposeByDbMapping = function () {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.SuperposeChainsSvg, title: 'Superpose structures using database mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px' }, disabled: this.state.isBusy }, { children: "DB" }), void 0) }, void 0);
};
SuperpositionControls.prototype.render = function () {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.SuperposeChainsSvg, label: 'Chains', toggle: this.toggleByChains, isSelected: this.state.action === 'byChains', disabled: this.state.isBusy }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.SuperposeAtomsSvg, label: 'Atoms', toggle: this.toggleByAtoms, isSelected: this.state.action === 'byAtoms', disabled: this.state.isBusy }, void 0), this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.action === 'byChains' && this.addByChains(), this.state.action === 'byAtoms' && this.addByAtoms(), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.StructureSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }, void 0) }), void 0)] }, void 0);
};
return SuperpositionControls;
}(base_1.PurePluginUIComponent));
exports.SuperpositionControls = SuperpositionControls;
//# sourceMappingURL=superposition.js.map