pdbe-molstar-3dbionotes
Version:
Molstar implementation for PDBe
199 lines • 13.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LeftPanelControls = exports.WavesIconSvg = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var canvas3d_1 = require("Molstar/mol-canvas3d/canvas3d");
var commands_1 = require("Molstar/mol-plugin/commands");
var mol_state_1 = require("Molstar/mol-state");
var base_1 = require("Molstar/mol-plugin-ui/base");
var common_1 = require("Molstar/mol-plugin-ui/controls/common");
var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
var actions_1 = require("Molstar/mol-plugin-ui/state/actions");
var snapshots_1 = require("Molstar/mol-plugin-ui/state/snapshots");
var tree_1 = require("Molstar/mol-plugin-ui/state/tree");
var help_1 = require("Molstar/mol-plugin-ui/viewport/help");
var segment_tree_1 = require("./segment-tree");
var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
var help_2 = require("Molstar/mol-plugin-ui/viewport/help");
var _WavesIcon = React.createElement("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24' },
React.createElement("path", { d: "M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z" }));
function WavesIconSvg() { return _WavesIcon; }
exports.WavesIconSvg = WavesIconSvg;
var LeftPanelControls = /** @class */ (function (_super) {
tslib_1.__extends(LeftPanelControls, _super);
function LeftPanelControls() {
var _a;
var _this = _super.apply(this, arguments) || this;
_this.state = { tab: _this.plugin.behaviors.layout.leftPanelTabName.value };
_this.set = function (tab) {
if (_this.state.tab === tab) {
_this.setState({ tab: 'none' }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next('none'); });
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
return;
}
_this.setState({ tab: tab }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next(tab); });
if (_this.plugin.layout.state.regionState.left !== 'full') {
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
}
};
_this.tabs = {
'none': React.createElement(React.Fragment, null),
'root': React.createElement(React.Fragment, null,
React.createElement(common_1.SectionHeader, { icon: icons_1.HomeOutlinedSvg, title: 'Home' }),
React.createElement(actions_1.StateObjectActions, { state: _this.plugin.state.data, nodeRef: mol_state_1.StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }),
((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && React.createElement(snapshots_1.RemoteStateSnapshots, { listOnly: true })),
'data': React.createElement(React.Fragment, null,
React.createElement(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: React.createElement(React.Fragment, null,
React.createElement(RemoveAllButton, null),
" State Tree") }),
React.createElement(tree_1.StateTree, { state: _this.plugin.state.data })),
'segments': React.createElement(React.Fragment, null,
React.createElement(segment_tree_1.SegmentTree, null)),
'states': React.createElement(snapshots_1.StateSnapshots, null),
'settings': React.createElement(React.Fragment, null,
React.createElement(common_1.SectionHeader, { icon: icons_1.TuneSvg, title: 'Plugin Settings' }),
React.createElement(FullSettings, null)),
'help': React.createElement(React.Fragment, null,
React.createElement(common_1.SectionHeader, { icon: icons_1.HelpOutlineSvg, title: 'Help' }),
React.createElement(help_1.HelpContent, null),
React.createElement(SuperpositionHelpContent, null))
};
return _this;
}
LeftPanelControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, function (tab) {
if (_this.state.tab !== tab)
_this.setState({ tab: tab });
if (tab === 'none' && _this.plugin.layout.state.regionState.left !== 'collapsed') {
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
}
});
this.subscribe(this.plugin.state.data.events.changed, function (_a) {
var state = _a.state;
if (_this.state.tab !== 'data')
return;
if (state.cells.size === 1)
_this.set('root');
});
};
LeftPanelControls.prototype.render = function () {
var _this = this;
var tab = this.state.tab;
var customState = this.plugin.customState;
return React.createElement("div", { className: 'msp-left-panel-controls' },
React.createElement("div", { className: 'msp-left-panel-controls-buttons' },
React.createElement(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }),
customState && customState.initParams && customState.initParams.superposition && React.createElement(common_1.IconButton, { svg: WavesIconSvg, toggleState: tab === 'segments', transparent: true, onClick: function () { return _this.set('segments'); }, title: 'Superpose segments' }),
React.createElement("div", { className: 'msp-left-panel-controls-buttons-bottom' },
React.createElement(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }))),
React.createElement("div", { className: 'msp-scrollable-container' }, this.tabs[tab]));
};
return LeftPanelControls;
}(base_1.PluginUIComponent));
exports.LeftPanelControls = LeftPanelControls;
// class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void }, { changed: boolean }> {
// state = { changed: false };
// get tab() {
// return this.plugin.behaviors.layout.leftPanelTabName.value;
// }
// componentDidMount() {
// this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, tab => {
// if (this.tab === 'data') this.setState({ changed: false });
// else this.forceUpdate();
// });
// this.subscribe(this.plugin.state.data.events.changed, state => {
// if (this.tab !== 'data') this.setState({ changed: true });
// });
// }
// render() {
// return <IconButton
// svg={AccountTreeOutlinedSvg} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
// style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
// }
// }
var FullSettings = /** @class */ (function (_super) {
tslib_1.__extends(FullSettings, _super);
function FullSettings() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.setSettings = function (p) {
var _a;
commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: (_a = {}, _a[p.name] = p.value, _a) });
};
return _this;
}
FullSettings.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
this.subscribe(this.plugin.canvas3d.camera.stateChanged, function (state) {
if (state.radiusMax !== undefined || state.radius !== undefined) {
_this.forceUpdate();
}
});
};
FullSettings.prototype.render = function () {
return React.createElement(React.Fragment, null, this.plugin.canvas3d && React.createElement(React.Fragment, null,
React.createElement(common_1.SectionHeader, { title: 'Viewport' }),
React.createElement(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings })));
};
return FullSettings;
}(base_1.PluginUIComponent));
var RemoveAllButton = /** @class */ (function (_super) {
tslib_1.__extends(RemoveAllButton, _super);
function RemoveAllButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.remove = function (e) {
e.preventDefault();
commands_1.PluginCommands.State.RemoveObject(_this.plugin, { state: _this.plugin.state.data, ref: mol_state_1.StateTransform.RootRef });
};
return _this;
}
RemoveAllButton.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.state.events.cell.created, function (e) {
if (e.cell.transform.parent === mol_state_1.StateTransform.RootRef)
_this.forceUpdate();
});
this.subscribe(this.plugin.state.events.cell.removed, function (e) {
if (e.parent === mol_state_1.StateTransform.RootRef)
_this.forceUpdate();
});
};
RemoveAllButton.prototype.render = function () {
var count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
if (count === 0)
return null;
return React.createElement(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true });
};
return RemoveAllButton;
}(base_1.PluginUIComponent));
function HelpSection(props) {
return React.createElement("div", { className: 'msp-simple-help-section' }, props.header);
}
var SuperpositionHelpContent = /** @class */ (function (_super) {
tslib_1.__extends(SuperpositionHelpContent, _super);
function SuperpositionHelpContent() {
return _super !== null && _super.apply(this, arguments) || this;
}
SuperpositionHelpContent.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
};
SuperpositionHelpContent.prototype.render = function () {
return React.createElement("div", null,
React.createElement(HelpSection, { header: 'Superposition' }),
React.createElement(help_2.HelpGroup, { header: 'Segment' },
React.createElement(help_2.HelpText, null,
React.createElement("p", null, "Discrete UniProt sequence range mapped to the structure"))),
React.createElement(help_2.HelpGroup, { header: 'Cluster' },
React.createElement(help_2.HelpText, null,
React.createElement("p", null, "Structural chains that possess significantly close superposition Q-score"))),
React.createElement(help_2.HelpGroup, { header: 'Representative chain' },
React.createElement(help_2.HelpText, null,
React.createElement("p", null, "The best-ranked chain within a cluster chosen based on the model quality, resolution, observed residues ratio and UniProt sequence coverage"))));
};
return SuperpositionHelpContent;
}(base_1.PluginUIComponent));
//# sourceMappingURL=pdbe-left-panel.js.map