molstar
Version:
A comprehensive macromolecular library.
123 lines • 12.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.HelpContent = exports.ViewportHelpContent = exports.HelpGroup = exports.HelpText = exports.BindingsHelp = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
/**
* Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
var React = (0, tslib_1.__importStar)(require("react"));
var binding_1 = require("../../mol-util/binding");
var base_1 = require("../base");
var mol_state_1 = require("../../mol-state");
var representation_1 = require("../../mol-plugin/behavior/dynamic/representation");
var representation_2 = require("../../mol-plugin/behavior/dynamic/representation");
var icons_1 = require("../controls/icons");
var common_1 = require("../controls/common");
function getBindingsList(bindings) {
return Object.keys(bindings).map(function (k) { return [k, bindings[k]]; });
}
var BindingsHelp = /** @class */ (function (_super) {
(0, tslib_1.__extends)(BindingsHelp, _super);
function BindingsHelp() {
return _super !== null && _super.apply(this, arguments) || this;
}
BindingsHelp.prototype.getBindingComponents = function () {
var bindingsList = getBindingsList(this.props.bindings);
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: bindingsList.map(function (value) {
var name = value[0], binding = value[1];
return !binding_1.Binding.isEmpty(binding)
? (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: binding.action }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: binding_1.Binding.format(binding, name) } }, void 0)] }), name)
: null;
}) }, void 0);
};
BindingsHelp.prototype.render = function () {
return (0, jsx_runtime_1.jsx)(HelpText, { children: this.getBindingComponents() }, void 0);
};
return BindingsHelp;
}(React.PureComponent));
exports.BindingsHelp = BindingsHelp;
var HelpText = /** @class */ (function (_super) {
(0, tslib_1.__extends)(HelpText, _super);
function HelpText() {
return _super !== null && _super.apply(this, arguments) || this;
}
HelpText.prototype.render = function () {
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-help-text' }, { children: (0, jsx_runtime_1.jsx)("div", { children: this.props.children }, void 0) }), void 0);
};
return HelpText;
}(React.PureComponent));
exports.HelpText = HelpText;
var HelpGroup = /** @class */ (function (_super) {
(0, tslib_1.__extends)(HelpGroup, _super);
function HelpGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
header: _this.props.header,
isExpanded: !!_this.props.initiallyExpanded
};
_this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
return _this;
}
HelpGroup.prototype.render = function () {
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.toggleExpanded }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), this.props.header] }), void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: this.props.children }), void 0)] }), void 0);
};
return HelpGroup;
}(React.PureComponent));
exports.HelpGroup = HelpGroup;
function HelpSection(props) {
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-simple-help-section' }, { children: props.header }), void 0);
}
var ViewportHelpContent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ViewportHelpContent, _super);
function ViewportHelpContent() {
return _super !== null && _super.apply(this, arguments) || this;
}
ViewportHelpContent.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
};
ViewportHelpContent.prototype.render = function () {
var interactionBindings = {};
this.plugin.spec.behaviors.forEach(function (b) {
var bindings = b.defaultParams.bindings;
if (bindings)
Object.assign(interactionBindings, bindings);
});
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!this.props.selectOnly && this.plugin.canvas3d) && (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Moving in 3D' }, { children: (0, jsx_runtime_1.jsx)(BindingsHelp, { bindings: this.plugin.canvas3d.props.trackball.bindings }, void 0) }), 'trackball'), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Mouse Controls' }, { children: (0, jsx_runtime_1.jsx)(BindingsHelp, { bindings: interactionBindings }, void 0) }), 'interactions')] }, void 0);
};
return ViewportHelpContent;
}(base_1.PluginUIComponent));
exports.ViewportHelpContent = ViewportHelpContent;
var HelpContent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(HelpContent, _super);
function HelpContent() {
return _super !== null && _super.apply(this, arguments) || this;
}
HelpContent.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
};
HelpContent.prototype.formatTriggers = function (binding) {
return binding.triggers.map(function (t) { return binding_1.Binding.Trigger.format(t); }).join(' or ');
};
HelpContent.prototype.getTriggerFor = function (transformer, name) {
var state = this.plugin.state.behaviors;
var selections = state.select(mol_state_1.StateSelection.Generators.ofTransformer(transformer));
var params = selections.length === 1 ? selections[0].params : undefined;
var bindings = params ? params.values.bindings : {};
var binding = name in bindings ? bindings[name] : binding_1.Binding.Empty;
return this.formatTriggers(binding);
};
HelpContent.prototype.render = function () {
var selectToggleTriggers = this.getTriggerFor(representation_1.SelectLoci, 'clickSelectToggle');
var focusTriggers = this.getTriggerFor(representation_2.FocusLoci, 'clickFocus');
// TODO: interactive help, for example for density
return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Interface Controls' }, void 0), (0, jsx_runtime_1.jsxs)(HelpGroup, (0, tslib_1.__assign)({ header: 'Inline Help' }, { children: [(0, jsx_runtime_1.jsx)(HelpText, { children: "Many user interface elements show a little questionmark icon when hovered over. Clicking the icon toggles the display of an inline help text." }, void 0), (0, jsx_runtime_1.jsx)(HelpText, { children: "Tooltips may provide additional information on a user interface element and are shown when hovering over it with the mouse." }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Selections' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["The viewer allows changing colors and representations for selections of atoms, residues or chains. Selections can be created by", (0, jsx_runtime_1.jsxs)("ul", (0, tslib_1.__assign)({ style: { paddingLeft: '20px' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["picking elements on the 3D canvas or the sequence view using the mouse, e.g. toggle selection using ", selectToggleTriggers, " (for more see help section on ", (0, jsx_runtime_1.jsx)("i", { children: "Mouse Controls" }, void 0), ")"] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: ["using the ", (0, jsx_runtime_1.jsx)("i", { children: "Add" }, void 0), ", ", (0, jsx_runtime_1.jsx)("i", { children: "Remove" }, void 0), " and ", (0, jsx_runtime_1.jsx)("i", { children: "Only" }, void 0), " dropdown buttons in the ", (0, jsx_runtime_1.jsx)("i", { children: "Manage Selection" }, void 0), " panel which allow modifing the current selection by predefined sets"] }, void 0)] }), void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Coloring' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["There are two ways to color structures. Every representation (e.g. cartoon or spacefill) has a color theme which can be changed using the dropdown for each representation in the ", (0, jsx_runtime_1.jsx)("i", { children: "Structure Settings" }, void 0), " panel. Additionally any selection atoms, residues or chains can by given a custom color. For that, first select the parts of the structure to be colored (see help section on ", (0, jsx_runtime_1.jsx)("i", { children: "Selections" }, void 0), ") and, second, choose a color from the color dropdown botton in the ", (0, jsx_runtime_1.jsx)("i", { children: "Selection" }, void 0), " row of the ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }, void 0), " panel. The theme color can be seen as a base color that is overpainted by the custom color. Custom colors can be removed for a selection with the 'Clear' option in the color dropdown."] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Representations' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["Structures can be shown with many different representations (e.g. cartoon or spacefill). The ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }, void 0), " panel offers a collection of predefined styles which can be applied using the ", (0, jsx_runtime_1.jsx)("i", { children: "Preset" }, void 0), " dropdown button. Additionally any selection atoms, residues or chains can by shown with a custom representation. For that, first select the parts of the structure to be mofified (see help section on ", (0, jsx_runtime_1.jsx)("i", { children: "Selections" }, void 0), ") and, second, choose a representation to hide or show from the ", (0, jsx_runtime_1.jsx)("i", { children: "Show" }, void 0), " and ", (0, jsx_runtime_1.jsx)("i", { children: "Hide" }, void 0), " dropdown bottons in the ", (0, jsx_runtime_1.jsx)("i", { children: "Selection" }, void 0), " row of the ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }, void 0), " panel. The ", (0, jsx_runtime_1.jsx)("i", { children: "Everything" }, void 0), " row applies the action to the whole structure instead of the current selection."] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Surroundings' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["To show the surroundings of a residue or ligand, click it in the 3D scene or in the sequence widget using ", focusTriggers, "."] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpSection, { header: 'How-to Guides' }, void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Create an Image' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Use the ", (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.CameraSvg }, void 0), " icon in the viewport to bring up the screenshot controls."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["To adjust the size of the image, use the ", (0, jsx_runtime_1.jsx)("i", { children: "Resolution" }, void 0), " dropdown."] }, void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpSection, { header: 'Mouse Controls' }, void 0), (0, jsx_runtime_1.jsx)(ViewportHelpContent, {}, void 0)] }, void 0);
};
return HelpContent;
}(base_1.PluginUIComponent));
exports.HelpContent = HelpContent;
//# sourceMappingURL=help.js.map