pdbe-molstar
Version:
Molstar implementation for PDBe
150 lines (149 loc) • 7.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PDBeLeftPanelTabs = exports.CoreLeftPanelTabs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const canvas3d_1 = require("molstar/lib/mol-canvas3d/canvas3d");
const base_1 = require("molstar/lib/mol-plugin-ui/base");
const common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
const icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
const parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
const actions_1 = require("molstar/lib/mol-plugin-ui/state/actions");
const snapshots_1 = require("molstar/lib/mol-plugin-ui/state/snapshots");
const tree_1 = require("molstar/lib/mol-plugin-ui/state/tree");
const help_1 = require("molstar/lib/mol-plugin-ui/viewport/help");
const commands_1 = require("molstar/lib/mol-plugin/commands");
const mol_state_1 = require("molstar/lib/mol-state");
const plugin_custom_state_1 = require("../../plugin-custom-state");
const icons_2 = require("../icons");
const segment_tree_1 = require("../segment-tree");
/** Body of 'root' (aka Home) tab in the left panel */
class HomeTabBody extends base_1.PluginUIComponent {
render() {
var _a;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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' && (0, jsx_runtime_1.jsx)(snapshots_1.RemoteStateSnapshots, { listOnly: true })] });
}
}
/** Header of 'data' (aka State Tree) tab in the left panel */
class DataTabHeader extends base_1.PluginUIComponent {
render() {
return (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RemoveAllButton, {}), " State Tree"] }) });
}
}
/** Body of 'data' (aka State Tree) tab in the left panel */
class DataTabBody extends base_1.PluginUIComponent {
render() {
return (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: this.plugin.state.data });
}
}
/** Button for clearing state tree ("delete" icon) */
class RemoveAllButton extends base_1.PluginUIComponent {
constructor() {
super(...arguments);
this.remove = (e) => {
e.preventDefault();
commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: this.plugin.state.data, ref: mol_state_1.StateTransform.RootRef });
};
}
componentDidMount() {
this.subscribe(this.plugin.state.events.cell.created, e => {
if (e.cell.transform.parent === mol_state_1.StateTransform.RootRef)
this.forceUpdate();
});
this.subscribe(this.plugin.state.events.cell.removed, e => {
if (e.parent === mol_state_1.StateTransform.RootRef)
this.forceUpdate();
});
}
render() {
const count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
if (count === 0)
return null;
return (0, jsx_runtime_1.jsx)(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 });
}
}
function HelpSection(props) {
return (0, jsx_runtime_1.jsx)("div", { className: 'msp-simple-help-section', children: props.header });
}
/** Help section about superposition functionality for the left panel */
class SuperpositionHelpSection extends base_1.PluginUIComponent {
componentDidMount() {
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
}
render() {
return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Superposition' }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, { header: 'Segment', children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Discrete UniProt sequence range mapped to the structure" }) }) }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, { header: 'Cluster', children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Structural chains that possess significantly close superposition Q-score" }) }) }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, { header: 'Representative chain', children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "The best-ranked chain within a cluster chosen based on the model quality, resolution, observed residues ratio and UniProt sequence coverage" }) }) })] });
}
}
/** Body of 'help' tab in the left panel (core help + PDBe-specific help) */
class PDBeHelpContent extends base_1.PluginUIComponent {
render() {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(help_1.HelpContent, {}), (0, jsx_runtime_1.jsx)(SuperpositionHelpSection, {})] });
}
}
/** Body of 'setting' tab in the left panel (excluding Behaviors) */
class FullSettings extends base_1.PluginUIComponent {
constructor() {
super(...arguments);
this.setSettings = (p) => {
commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { [p.name]: p.value } });
};
}
componentDidMount() {
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
this.subscribe(this.plugin.canvas3d.camera.stateChanged, state => {
if (state.radiusMax !== undefined || state.radius !== undefined) {
this.forceUpdate();
}
});
}
render() {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.plugin.canvas3d && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Viewport' }), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings })] }) });
}
}
/** Left panel tabs in core Molstar */
exports.CoreLeftPanelTabs = {
root: {
id: 'root',
title: 'Home',
icon: icons_1.HomeOutlinedSvg,
body: HomeTabBody,
},
data: {
id: 'data',
title: 'State Tree',
icon: icons_1.AccountTreeOutlinedSvg,
header: DataTabHeader,
body: DataTabBody,
dirtyOn: plugin => plugin.state.data.events.changed,
},
states: {
id: 'states',
title: 'Plugin State',
icon: icons_1.SaveOutlinedSvg,
header: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
body: snapshots_1.StateSnapshots,
},
help: {
id: 'help',
title: 'Help',
icon: icons_1.HelpOutlineSvg,
body: PDBeHelpContent,
},
settings: {
id: 'settings',
title: 'Plugin Settings',
icon: icons_1.TuneSvg,
body: FullSettings,
},
};
/** Additional PDBe-specific left panel tabs */
exports.PDBeLeftPanelTabs = {
segments: {
id: 'segments',
title: 'Superpose Segments',
icon: icons_2.WavesIconSvg,
header: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
body: segment_tree_1.SegmentTree,
showWhen: plugin => { var _a; return !!((_a = (0, plugin_custom_state_1.PluginCustomState)(plugin).initParams) === null || _a === void 0 ? void 0 : _a.superposition); },
},
};