molstar
Version:
A comprehensive macromolecular library.
329 lines • 22.6 kB
JavaScript
import { __assign, __awaiter, __extends, __generator } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
import { CollapsableControls, PurePluginUIComponent } from '../base';
import { Icon, ArrowUpwardSvg, ArrowDownwardSvg, DeleteOutlinedSvg, HelpOutlineSvg, TuneSvg, SuperposeAtomsSvg, SuperposeChainsSvg, SuperpositionSvg } from '../controls/icons';
import { Button, ToggleButton, IconButton } from '../controls/common';
import { StructureElement, StructureSelection, QueryContext, StructureProperties } from '../../mol-model/structure';
import { ParamDefinition as PD } from '../../mol-util/param-definition';
import { StateObjectRef, StateSelection } from '../../mol-state';
import { StateTransforms } from '../../mol-plugin-state/transforms';
import { alignAndSuperpose, superpose } from '../../mol-model/structure/structure/util/superposition';
import { StructureSelectionQueries } from '../../mol-plugin-state/helpers/structure-selection-query';
import { structureElementStatsLabel, elementLabel } from '../../mol-theme/label';
import { ParameterControls } from '../controls/parameters';
import { stripTags } from '../../mol-util/string';
import { ToggleSelectionModeButton } from './selection';
import { alignAndSuperposeWithBestDatabaseMapping } from '../../mol-model/structure/structure/util/superposition-db-mapping';
import { PluginCommands } from '../../mol-plugin/commands';
import { BestDatabaseSequenceMapping } from '../../mol-model-props/sequence/best-database-mapping';
var StructureSuperpositionControls = /** @class */ (function (_super) {
__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: 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 _jsx(_Fragment, { children: _jsx(SuperpositionControls, {}, void 0) }, void 0);
};
return StructureSuperpositionControls;
}(CollapsableControls));
export { StructureSuperpositionControls };
export var StructureSuperpositionParams = {
alignSequences: PD.Boolean(true, { isEssential: true, description: 'Perform a sequence alignment and use the aligned residue pairs to guide the 3D superposition.' }),
};
var DefaultStructureSuperpositionOptions = PD.getDefaultValues(StructureSuperpositionParams);
var SuperpositionTag = 'SuperpositionTransform';
;
;
var SuperpositionControls = /** @class */ (function (_super) {
__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 __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 __generator(this, function (_b) {
switch (_b.label) {
case 0:
query = StructureSelectionQueries.trace.query;
entries = this.chainEntries;
traceLocis = entries.map(function (e, i) {
var s = StructureElement.Loci.toStructure(e.loci);
var loci = StructureSelection.toLociWithSourceUnits(query(new QueryContext(s)));
return 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
? alignAndSuperpose(traceLocis)
: 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 = stripTags(eA.label);
labelB = 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 __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 __generator(this, function (_b) {
switch (_b.label) {
case 0:
entries = this.atomEntries;
atomLocis = entries.map(function (e, i) {
return StructureElement.Loci.remap(e.loci, i === 0
? _this.plugin.helpers.substructureParent.get(e.loci.structure.root).obj.data
: e.loci.structure.root);
});
transforms = 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 = stripTags(eA.label);
labelB = 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 __awaiter(_this, void 0, void 0, function () {
var input, transforms, rmsd, _i, transforms_1, xform;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
input = this.plugin.managers.structure.hierarchy.behaviors.selection.value.structures;
transforms = 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_1 = transforms;
_a.label = 1;
case 1:
if (!(_i < transforms_1.length)) return [3 /*break*/, 4];
xform = transforms_1[_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();
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 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 __awaiter(this, void 0, void 0, function () {
var r, o, params, b;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
r = StateObjectRef.resolveAndCheck(this.plugin.state.data, s);
if (!r)
return [2 /*return*/];
o = 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(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 _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __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: _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 _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __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, ". ", _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0)] }), void 0), history.length > 1 && _jsx(IconButton, { svg: ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }, void 0), history.length > 1 && _jsx(IconButton, { svg: ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }, void 0), _jsx(IconButton, { svg: 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 _jsxs("div", { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsx("div", __assign({ className: 'msp-no-overflow', title: e.label }, { children: e.label }), void 0) }), void 0), _jsx("div", __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 = StructureElement.Location.create();
var entries = [];
this.plugin.managers.structure.selection.entries.forEach(function (_a, ref) {
var selection = _a.selection;
var cell = StateObjectRef.resolveAndCheck(_this.plugin.state.data, ref);
if (!cell || StructureElement.Loci.isEmpty(selection))
return;
// only single polymer chain selections
var l = StructureElement.Loci.getFirstLocation(selection, location);
if (selection.elements.length > 1 || StructureProperties.entity.type(l) !== 'polymer')
return;
var stats = StructureElement.Stats.ofLoci(selection);
var counts = structureElementStatsLabel(stats, { countsOnly: true });
var chain = 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 (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 = 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 _jsxs(_Fragment, { children: [entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.lociEntry(e, i); }) }), void 0), entries.length < 2 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }, void 0), "Add 2 or more selections (toggle ", _jsx(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 && _jsx(Button, __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 _jsxs(_Fragment, { children: [entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.atomsLociEntry(e, i); }) }), void 0), entries.length < 2 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }, void 0), "Add 1 or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single atoms."] }), void 0) }), void 0), entries.length > 1 && _jsx(Button, __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 _jsx(_Fragment, { children: _jsx(Button, __assign({ icon: 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 _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: SuperposeChainsSvg, label: 'Chains', toggle: this.toggleByChains, isSelected: this.state.action === 'byChains', disabled: this.state.isBusy }, void 0), _jsx(ToggleButton, { icon: SuperposeAtomsSvg, label: 'Atoms', toggle: this.toggleByAtoms, isSelected: this.state.action === 'byAtoms', disabled: this.state.isBusy }, void 0), this.state.canUseDb && this.superposeByDbMapping(), _jsx(ToggleButton, { icon: 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' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: StructureSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }, void 0) }), void 0)] }, void 0);
};
return SuperpositionControls;
}(PurePluginUIComponent));
export { SuperpositionControls };
//# sourceMappingURL=superposition.js.map