molstar 3.0.1 → 3.0.2

package/lib/commonjs/mol-plugin-ui/controls.js

@@ -0,0 +1,301 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultStructureTools = exports.CustomStructureControls = exports.LociLabels = exports.SelectionViewportControls = exports.AnimationViewportControls = exports.StateSnapshotViewportControls = exports.TrajectoryViewportControls = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var structure_1 = require("../mol-plugin-state/actions/structure");
+var transforms_1 = require("../mol-plugin-state/transforms");
+var commands_1 = require("../mol-plugin/commands");
+var base_1 = require("./base");
+var common_1 = require("./controls/common");
+var icons_1 = require("./controls/icons");
+var animation_1 = require("./state/animation");
+var components_1 = require("./structure/components");
+var measurements_1 = require("./structure/measurements");
+var selection_1 = require("./structure/selection");
+var source_1 = require("./structure/source");
+var volume_1 = require("./structure/volume");
+var config_1 = require("../mol-plugin/config");
+var superposition_1 = require("./structure/superposition");
+var TrajectoryViewportControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(TrajectoryViewportControls, _super);
+    function TrajectoryViewportControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { show: false, label: '' };
+        _this.update = function () {
+            var state = _this.plugin.state.data;
+            var models = state.selectQ(function (q) { return q.ofTransformer(transforms_1.StateTransforms.Model.ModelFromTrajectory); });
+            if (models.length === 0) {
+                _this.setState({ show: false });
+                return;
+            }
+            var label = '', count = 0;
+            var parents = new Set();
+            for (var _i = 0, models_1 = models; _i < models_1.length; _i++) {
+                var m = models_1[_i];
+                if (!m.sourceRef)
+                    continue;
+                var parent_1 = state.cells.get(m.sourceRef).obj;
+                if (!parent_1)
+                    continue;
+                if (parent_1.data.frameCount > 1) {
+                    if (parents.has(m.sourceRef)) {
+                        // do not show the controls if there are 2 models of the same trajectory present
+                        _this.setState({ show: false });
+                        return;
+                    }
+                    parents.add(m.sourceRef);
+                    count++;
+                    if (!label) {
+                        var idx = m.transform.params.modelIndex;
+                        label = "Model ".concat(idx + 1, " / ").concat(parent_1.data.frameCount);
+                    }
+                }
+            }
+            if (count > 1)
+                label = '';
+            _this.setState({ show: count > 0, label: label });
+        };
+        _this.reset = function () { return commands_1.PluginCommands.State.ApplyAction(_this.plugin, {
+            state: _this.plugin.state.data,
+            action: structure_1.UpdateTrajectory.create({ action: 'reset' })
+        }); };
+        _this.prev = function () { return commands_1.PluginCommands.State.ApplyAction(_this.plugin, {
+            state: _this.plugin.state.data,
+            action: structure_1.UpdateTrajectory.create({ action: 'advance', by: -1 })
+        }); };
+        _this.next = function () { return commands_1.PluginCommands.State.ApplyAction(_this.plugin, {
+            state: _this.plugin.state.data,
+            action: structure_1.UpdateTrajectory.create({ action: 'advance', by: 1 })
+        }); };
+        return _this;
+    }
+    TrajectoryViewportControls.prototype.componentDidMount = function () {
+        this.subscribe(this.plugin.state.data.events.changed, this.update);
+        this.subscribe(this.plugin.behaviors.state.isAnimating, this.update);
+    };
+    TrajectoryViewportControls.prototype.render = function () {
+        var isAnimating = this.plugin.behaviors.state.isAnimating.value;
+        if (!this.state.show || (isAnimating && !this.state.label))
+            return null;
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-traj-controls' }, { children: [!isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SkipPreviousSvg, title: 'First Model', onClick: this.reset, disabled: isAnimating }, void 0), !isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateBeforeSvg, title: 'Previous Model', onClick: this.prev, disabled: isAnimating }, void 0), !isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateNextSvg, title: 'Next Model', onClick: this.next, disabled: isAnimating }, void 0), !!this.state.label && (0, jsx_runtime_1.jsx)("span", { children: this.state.label }, void 0)] }), void 0);
+    };
+    return TrajectoryViewportControls;
+}(base_1.PluginUIComponent));
+exports.TrajectoryViewportControls = TrajectoryViewportControls;
+var StateSnapshotViewportControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(StateSnapshotViewportControls, _super);
+    function StateSnapshotViewportControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isBusy: false, show: true };
+        _this.keyUp = function (e) {
+            if (!e.ctrlKey || _this.state.isBusy || e.target !== document.body)
+                return;
+            var snapshots = _this.plugin.managers.snapshot;
+            if (e.keyCode === 37 || e.key === 'ArrowLeft') {
+                if (snapshots.state.isPlaying)
+                    snapshots.stop();
+                _this.prev();
+            }
+            else if (e.keyCode === 38 || e.key === 'ArrowUp') {
+                if (snapshots.state.isPlaying)
+                    snapshots.stop();
+                if (snapshots.state.entries.size === 0)
+                    return;
+                var e_1 = snapshots.state.entries.get(0);
+                _this.update(e_1.snapshot.id);
+            }
+            else if (e.keyCode === 39 || e.key === 'ArrowRight') {
+                if (snapshots.state.isPlaying)
+                    snapshots.stop();
+                _this.next();
+            }
+            else if (e.keyCode === 40 || e.key === 'ArrowDown') {
+                if (snapshots.state.isPlaying)
+                    snapshots.stop();
+                if (snapshots.state.entries.size === 0)
+                    return;
+                var e_2 = snapshots.state.entries.get(snapshots.state.entries.size - 1);
+                _this.update(e_2.snapshot.id);
+            }
+        };
+        _this.change = function (e) {
+            if (e.target.value === 'none')
+                return;
+            _this.update(e.target.value);
+        };
+        _this.prev = function () {
+            var s = _this.plugin.managers.snapshot;
+            var id = s.getNextId(s.state.current, -1);
+            if (id)
+                _this.update(id);
+        };
+        _this.next = function () {
+            var s = _this.plugin.managers.snapshot;
+            var id = s.getNextId(s.state.current, 1);
+            if (id)
+                _this.update(id);
+        };
+        _this.togglePlay = function () {
+            _this.plugin.managers.snapshot.togglePlay();
+        };
+        return _this;
+    }
+    StateSnapshotViewportControls.prototype.componentDidMount = function () {
+        var _this = this;
+        // TODO: this needs to be diabled when the state is updating!
+        this.subscribe(this.plugin.managers.snapshot.events.changed, function () { return _this.forceUpdate(); });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (isBusy) { return _this.setState({ isBusy: isBusy }); });
+        this.subscribe(this.plugin.behaviors.state.isAnimating, function (isBusy) { return _this.setState({ isBusy: isBusy }); });
+        window.addEventListener('keyup', this.keyUp, false);
+    };
+    StateSnapshotViewportControls.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        window.removeEventListener('keyup', this.keyUp, false);
+    };
+    StateSnapshotViewportControls.prototype.update = function (id) {
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            return (0, tslib_1.__generator)(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.setState({ isBusy: true });
+                        return [4 /*yield*/, commands_1.PluginCommands.State.Snapshots.Apply(this.plugin, { id: id })];
+                    case 1:
+                        _a.sent();
+                        this.setState({ isBusy: false });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    StateSnapshotViewportControls.prototype.render = function () {
+        var snapshots = this.plugin.managers.snapshot;
+        var count = snapshots.state.entries.size;
+        if (count < 2 || !this.state.show) {
+            return null;
+        }
+        var current = snapshots.state.current;
+        var isPlaying = snapshots.state.isPlaying;
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-state-snapshot-viewport-controls' }, { children: [(0, jsx_runtime_1.jsxs)("select", (0, tslib_1.__assign)({ className: 'msp-form-control', value: current || 'none', onChange: this.change, disabled: this.state.isBusy || isPlaying }, { children: [!current && (0, jsx_runtime_1.jsx)("option", { value: 'none' }, 'none'), snapshots.state.entries.valueSeq().map(function (e, i) { return (0, jsx_runtime_1.jsxs)("option", (0, tslib_1.__assign)({ value: e.snapshot.id }, { children: ["[".concat(i + 1, "/").concat(count, "]"), " ", e.name || new Date(e.timestamp).toLocaleString()] }), e.snapshot.id); })] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: isPlaying ? icons_1.StopSvg : icons_1.PlayArrowSvg, title: isPlaying ? 'Pause' : 'Cycle States', onClick: this.togglePlay, disabled: isPlaying ? false : this.state.isBusy }, void 0), !isPlaying && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateBeforeSvg, title: 'Previous State', onClick: this.prev, disabled: this.state.isBusy || isPlaying }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateNextSvg, title: 'Next State', onClick: this.next, disabled: this.state.isBusy || isPlaying }, void 0)] }, void 0)] }), void 0);
+    };
+    return StateSnapshotViewportControls;
+}(base_1.PluginUIComponent));
+exports.StateSnapshotViewportControls = StateSnapshotViewportControls;
+var AnimationViewportControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(AnimationViewportControls, _super);
+    function AnimationViewportControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isEmpty: true, isExpanded: false, isBusy: false, isAnimating: false, isPlaying: false };
+        _this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
+        _this.stop = function () {
+            _this.plugin.managers.animation.stop();
+            _this.plugin.managers.snapshot.stop();
+        };
+        return _this;
+    }
+    AnimationViewportControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.managers.snapshot.events.changed, function () {
+            if (_this.plugin.managers.snapshot.state.isPlaying)
+                _this.setState({ isPlaying: true, isExpanded: false });
+            else
+                _this.setState({ isPlaying: false });
+        });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (isBusy) {
+            if (isBusy)
+                _this.setState({ isBusy: true, isExpanded: false, isEmpty: _this.plugin.state.data.tree.transforms.size < 2 });
+            else
+                _this.setState({ isBusy: false, isEmpty: _this.plugin.state.data.tree.transforms.size < 2 });
+        });
+        this.subscribe(this.plugin.behaviors.state.isAnimating, function (isAnimating) {
+            if (isAnimating)
+                _this.setState({ isAnimating: true, isExpanded: false });
+            else
+                _this.setState({ isAnimating: false });
+        });
+    };
+    AnimationViewportControls.prototype.render = function () {
+        var isPlaying = this.plugin.managers.snapshot.state.isPlaying;
+        if (isPlaying || this.state.isEmpty || this.plugin.managers.animation.isEmpty || !this.plugin.config.get(config_1.PluginConfig.Viewport.ShowAnimation))
+            return null;
+        var isAnimating = this.state.isAnimating;
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-animation-viewport-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: isAnimating || isPlaying ? icons_1.StopSvg : icons_1.SubscriptionsOutlinedSvg, transparent: true, title: isAnimating ? 'Stop' : 'Select Animation', onClick: isAnimating || isPlaying ? this.stop : this.toggleExpanded, toggleState: this.state.isExpanded, disabled: isAnimating || isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty }, void 0)] }, void 0), (this.state.isExpanded && !this.state.isBusy) && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-animation-viewport-controls-select' }, { children: (0, jsx_runtime_1.jsx)(animation_1.AnimationControls, { onStart: this.toggleExpanded }, void 0) }), void 0)] }), void 0);
+    };
+    return AnimationViewportControls;
+}(base_1.PluginUIComponent));
+exports.AnimationViewportControls = AnimationViewportControls;
+var SelectionViewportControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(SelectionViewportControls, _super);
+    function SelectionViewportControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onMouseMove = function (e) {
+            // ignore mouse moves when no button is held
+            if (e.buttons === 0)
+                e.stopPropagation();
+        };
+        return _this;
+    }
+    SelectionViewportControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.behaviors.interaction.selectionMode, function () { return _this.forceUpdate(); });
+    };
+    SelectionViewportControls.prototype.render = function () {
+        if (!this.plugin.selectionMode)
+            return null;
+        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-selection-viewport-controls', onMouseMove: this.onMouseMove }, { children: (0, jsx_runtime_1.jsx)(selection_1.StructureSelectionActionsControls, {}, void 0) }), void 0);
+    };
+    return SelectionViewportControls;
+}(base_1.PluginUIComponent));
+exports.SelectionViewportControls = SelectionViewportControls;
+var LociLabels = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(LociLabels, _super);
+    function LociLabels() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { labels: [] };
+        return _this;
+    }
+    LociLabels.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.behaviors.labels.highlight, function (e) { return _this.setState({ labels: e.labels }); });
+    };
+    LociLabels.prototype.render = function () {
+        if (this.state.labels.length === 0) {
+            return null;
+        }
+        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-highlight-info' }, { children: this.state.labels.map(function (e, i) { return (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: e } }, '' + i); }) }), void 0);
+    };
+    return LociLabels;
+}(base_1.PluginUIComponent));
+exports.LociLabels = LociLabels;
+var CustomStructureControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(CustomStructureControls, _super);
+    function CustomStructureControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CustomStructureControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.behaviors.events.changed, function () { return _this.forceUpdate(); });
+    };
+    CustomStructureControls.prototype.render = function () {
+        var _this = this;
+        var controls = [];
+        this.plugin.customStructureControls.forEach(function (Controls, key) {
+            controls.push((0, jsx_runtime_1.jsx)(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
+        });
+        return controls.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }, void 0) : null;
+    };
+    return CustomStructureControls;
+}(base_1.PluginUIComponent));
+exports.CustomStructureControls = CustomStructureControls;
+var DefaultStructureTools = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(DefaultStructureTools, _super);
+    function DefaultStructureTools() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DefaultStructureTools.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-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }, void 0), "Structure Tools"] }), void 0), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}, void 0), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}, void 0), (0, jsx_runtime_1.jsx)(superposition_1.StructureSuperpositionControls, {}, void 0), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}, void 0), this.plugin.config.get(config_1.PluginConfig.VolumeStreaming.Enabled) && (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}, void 0), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}, void 0), (0, jsx_runtime_1.jsx)(CustomStructureControls, {}, void 0)] }, void 0);
+    };
+    return DefaultStructureTools;
+}(base_1.PluginUIComponent));
+exports.DefaultStructureTools = DefaultStructureTools;
+//# sourceMappingURL=controls.js.map

package/lib/commonjs/mol-plugin-ui/custom/volume.js

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VolumeStreamingCustomControls = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+var base_1 = require("../base");
+var behavior_1 = require("../../mol-plugin/behavior/dynamic/volume-streaming/behavior");
+var common_1 = require("../controls/common");
+var param_definition_1 = require("../../mol-util/param-definition");
+var parameters_1 = require("../controls/parameters");
+var slider_1 = require("../controls/slider");
+var volume_1 = require("../../mol-model/volume");
+var linear_algebra_1 = require("../../mol-math/linear-algebra");
+var names_1 = require("../../mol-util/color/names");
+var number_1 = require("../../mol-util/number");
+var mol_state_1 = require("../../mol-state");
+var state_1 = require("../../mol-plugin/behavior/static/state");
+var icons_1 = require("../controls/icons");
+var ChannelParams = {
+    color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.black, { description: 'Display color of the volume.' }),
+    wireframe: param_definition_1.ParamDefinition.Boolean(false, { description: 'Control display of the volume as a wireframe.' }),
+    opacity: param_definition_1.ParamDefinition.Numeric(0.3, { min: 0, max: 1, step: 0.01 }, { description: 'Opacity of the volume.' })
+};
+var Bounds = new Map([
+    ['em', [-5, 5]],
+    ['2fo-fc', [0, 3]],
+    ['fo-fc(+ve)', [1, 5]],
+    ['fo-fc(-ve)', [-5, -1]],
+]);
+var Channel = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Channel, _super);
+    function Channel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.ref = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, _this.props.bCell.transform.ref, _this.props.name);
+        _this.getVisible = function () {
+            var state = _this.plugin.state.data;
+            var ref = _this.ref;
+            if (!ref)
+                return false;
+            return !state.cells.get(ref).state.isHidden;
+        };
+        _this.toggleVisible = function () {
+            var state = _this.plugin.state.data;
+            var ref = _this.ref;
+            if (!ref)
+                return;
+            (0, state_1.setSubtreeVisibility)(state, ref, !state.cells.get(ref).state.isHidden);
+        };
+        return _this;
+    }
+    Channel.prototype.componentDidUpdate = function () {
+        this.ref = mol_state_1.StateSelection.findTagInSubtree(this.plugin.state.data.tree, this.props.bCell.transform.ref, this.props.name);
+    };
+    Channel.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.data.events.cell.stateUpdated, function (e) {
+            if (_this.ref === e.ref)
+                _this.forceUpdate();
+        });
+    };
+    Channel.prototype.render = function () {
+        var props = this.props;
+        var isRelative = props.isRelative, stats = props.stats;
+        var channel = props.channels[props.name];
+        var min = stats.min, max = stats.max, mean = stats.mean, sigma = stats.sigma;
+        var value = Math.round(100 * (channel.isoValue.kind === 'relative' ? channel.isoValue.relativeValue : channel.isoValue.absoluteValue)) / 100;
+        var relMin = (min - mean) / sigma;
+        var relMax = (max - mean) / sigma;
+        if (!this.props.isUnbounded) {
+            var bounds = Bounds.get(this.props.name);
+            if (this.props.name === 'em') {
+                relMin = Math.max(bounds[0], relMin);
+                relMax = Math.min(bounds[1], relMax);
+            }
+            else {
+                relMin = bounds[0];
+                relMax = bounds[1];
+            }
+        }
+        var vMin = mean + sigma * relMin, vMax = mean + sigma * relMax;
+        var step = (0, number_1.toPrecision)(isRelative ? Math.round(((vMax - vMin) / sigma)) / 100 : sigma / 100, 2);
+        var ctrlMin = isRelative ? relMin : vMin;
+        var ctrlMax = isRelative ? relMax : vMax;
+        return (0, jsx_runtime_1.jsx)(common_1.ExpandableControlRow, { label: props.label + (props.isRelative ? ' \u03C3' : ''), colorStripe: channel.color, pivot: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-volume-channel-inline-controls' }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, min: ctrlMin, max: ctrlMax, step: step, onChange: function (v) { return props.changeIso(props.name, v, isRelative); }, disabled: props.params.isDisabled, onEnter: props.params.events.onEnter }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.getVisible() ? icons_1.VisibilityOutlinedSvg : icons_1.VisibilityOffOutlinedSvg, onClick: this.toggleVisible, toggleState: false, disabled: props.params.isDisabled }, void 0)] }), void 0), controls: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: function (_a) {
+                    var name = _a.name, value = _a.value;
+                    return props.changeParams(props.name, name, value);
+                }, params: ChannelParams, values: channel, onEnter: props.params.events.onEnter, isDisabled: props.params.isDisabled }, void 0) }, void 0);
+    };
+    return Channel;
+}(base_1.PluginUIComponent));
+var VolumeStreamingCustomControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(VolumeStreamingCustomControls, _super);
+    function VolumeStreamingCustomControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.changeIso = function (name, value, isRelative) {
+            var _a;
+            var old = _this.props.params;
+            _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+                    name: old.entry.name,
+                    params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params), { channels: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels), (_a = {}, _a[name] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels[name]), { isoValue: isRelative ? volume_1.Volume.IsoValue.relative(value) : volume_1.Volume.IsoValue.absolute(value) }), _a)) })
+                } }));
+        };
+        _this.changeParams = function (name, param, value) {
+            var _a, _b;
+            var old = _this.props.params;
+            _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+                    name: old.entry.name,
+                    params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params), { channels: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels), (_a = {}, _a[name] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels[name]), (_b = {}, _b[param] = value, _b)), _a)) })
+                } }));
+        };
+        _this.changeOption = function (_a) {
+            var name = _a.name, value = _a.value;
+            var old = _this.props.params;
+            if (name === 'entry') {
+                _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+                        name: value,
+                        params: old.entry.params,
+                    } }));
+            }
+            else {
+                var b = _this.props.b.data;
+                var isEM = b.info.kind === 'em';
+                var isRelative = value.params.isRelative;
+                var sampling = b.info.header.sampling[0];
+                var oldChannels = old.entry.params.channels;
+                var oldView = old.entry.params.view.name === value.name
+                    ? old.entry.params.view.params
+                    : _this.props.info.params
+                        .entry.map(old.entry.name)
+                        .params
+                        .view.map(value.name).defaultValue;
+                var viewParams = (0, tslib_1.__assign)({}, oldView);
+                if (value.name === 'selection-box') {
+                    viewParams.radius = value.params.radius;
+                }
+                else if (value.name === 'box') {
+                    viewParams.bottomLeft = value.params.bottomLeft;
+                    viewParams.topRight = value.params.topRight;
+                }
+                else if (value.name === 'auto') {
+                    viewParams.radius = value.params.radius;
+                    viewParams.selectionDetailLevel = value.params.selectionDetailLevel;
+                }
+                viewParams.isUnbounded = !!value.params.isUnbounded;
+                _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+                        name: old.entry.name,
+                        params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params), { view: {
+                                name: value.name,
+                                params: viewParams
+                            }, detailLevel: value.params.detailLevel, channels: isEM
+                                ? { em: _this.convert(oldChannels.em, sampling.valuesInfo[0], isRelative) }
+                                : {
+                                    '2fo-fc': _this.convert(oldChannels['2fo-fc'], sampling.valuesInfo[0], isRelative),
+                                    'fo-fc(+ve)': _this.convert(oldChannels['fo-fc(+ve)'], sampling.valuesInfo[1], isRelative),
+                                    'fo-fc(-ve)': _this.convert(oldChannels['fo-fc(-ve)'], sampling.valuesInfo[1], isRelative)
+                                } })
+                    } }));
+            }
+        };
+        return _this;
+    }
+    VolumeStreamingCustomControls.prototype.areInitial = function (params) {
+        return param_definition_1.ParamDefinition.areEqual(this.props.info.params, params, this.props.info.initialValues);
+    };
+    VolumeStreamingCustomControls.prototype.newParams = function (params) {
+        this.props.events.onChange(params, this.areInitial(params));
+    };
+    VolumeStreamingCustomControls.prototype.convert = function (channel, stats, isRelative) {
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, channel), { isoValue: isRelative
+                ? volume_1.Volume.IsoValue.toRelative(channel.isoValue, stats)
+                : volume_1.Volume.IsoValue.toAbsolute(channel.isoValue, stats) });
+    };
+    VolumeStreamingCustomControls.prototype.render = function () {
+        if (!this.props.b)
+            return null;
+        var b = this.props.b.data;
+        var isEM = b.info.kind === 'em';
+        var pivot = isEM ? 'em' : '2fo-fc';
+        var params = this.props.params;
+        var entry = this.props.info.params
+            .entry.map(params.entry.name);
+        var detailLevel = entry.params.detailLevel;
+        var isRelative = params.entry.params.channels[pivot].isoValue.kind === 'relative';
+        var sampling = b.info.header.sampling[0];
+        var isRelativeParam = param_definition_1.ParamDefinition.Boolean(isRelative, { description: 'Use normalized or absolute isocontour scale.', label: 'Normalized' });
+        var isUnbounded = !!params.entry.params.view.params.isUnbounded;
+        var isUnboundedParam = param_definition_1.ParamDefinition.Boolean(isUnbounded, { description: 'Show full/limited range of iso-values for more fine-grained control.', label: 'Unbounded' });
+        var isOff = params.entry.params.view.name === 'off';
+        // TODO: factor common things out, cache
+        var OptionsParams = {
+            entry: param_definition_1.ParamDefinition.Select(params.entry.name, b.data.entries.map(function (info) { return [info.dataId, info.dataId]; }), { isHidden: isOff, description: 'Which entry with volume data to display.' }),
+            view: param_definition_1.ParamDefinition.MappedStatic(params.entry.params.view.name, {
+                'off': param_definition_1.ParamDefinition.Group({
+                    isRelative: param_definition_1.ParamDefinition.Boolean(isRelative, { isHidden: true }),
+                    isUnbounded: param_definition_1.ParamDefinition.Boolean(isUnbounded, { isHidden: true }),
+                }, { description: 'Display off.' }),
+                'box': param_definition_1.ParamDefinition.Group({
+                    bottomLeft: param_definition_1.ParamDefinition.Vec3(linear_algebra_1.Vec3.zero()),
+                    topRight: param_definition_1.ParamDefinition.Vec3(linear_algebra_1.Vec3.zero()),
+                    detailLevel: detailLevel,
+                    isRelative: isRelativeParam,
+                    isUnbounded: isUnboundedParam,
+                }, { description: 'Static box defined by cartesian coords.' }),
+                'selection-box': param_definition_1.ParamDefinition.Group({
+                    radius: param_definition_1.ParamDefinition.Numeric(5, { min: 0, max: 50, step: 0.5 }, { description: 'Radius in \u212B within which the volume is shown.' }),
+                    detailLevel: detailLevel,
+                    isRelative: isRelativeParam,
+                    isUnbounded: isUnboundedParam,
+                }, { description: 'Box around focused element.' }),
+                'cell': param_definition_1.ParamDefinition.Group({
+                    detailLevel: detailLevel,
+                    isRelative: isRelativeParam,
+                    isUnbounded: isUnboundedParam,
+                }, { description: 'Box around the structure\'s bounding box.' }),
+                'auto': param_definition_1.ParamDefinition.Group({
+                    radius: param_definition_1.ParamDefinition.Numeric(5, { min: 0, max: 50, step: 0.5 }, { description: 'Radius in \u212B within which the volume is shown.' }),
+                    detailLevel: detailLevel,
+                    selectionDetailLevel: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, detailLevel), { label: 'Selection Detail' }),
+                    isRelative: isRelativeParam,
+                    isUnbounded: isUnboundedParam,
+                }, { description: 'Box around focused element.' }),
+                // 'auto': PD.Group({  }), // TODO based on camera distance/active selection/whatever, show whole structure or slice.
+            }, { options: behavior_1.VolumeStreaming.ViewTypeOptions, description: 'Controls what of the volume is displayed. "Off" hides the volume alltogether. "Bounded box" shows the volume inside the given box. "Around Focus" shows the volume around the element/atom last interacted with. "Whole Structure" shows the volume for the whole structure.' })
+        };
+        var options = {
+            entry: params.entry.name,
+            view: {
+                name: params.entry.params.view.name,
+                params: {
+                    detailLevel: params.entry.params.detailLevel,
+                    radius: params.entry.params.view.params.radius,
+                    bottomLeft: params.entry.params.view.params.bottomLeft,
+                    topRight: params.entry.params.view.params.topRight,
+                    selectionDetailLevel: params.entry.params.view.params.selectionDetailLevel,
+                    isRelative: isRelative,
+                    isUnbounded: isUnbounded
+                }
+            }
+        };
+        if (isOff) {
+            return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        }
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isEM && (0, jsx_runtime_1.jsx)(Channel, { label: '2Fo-Fc', name: '2fo-fc', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }, void 0), !isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'Fo-Fc(+ve)', name: 'fo-fc(+ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }, void 0), !isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'Fo-Fc(-ve)', name: 'fo-fc(-ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }, void 0), isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'EM', name: 'em', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+    };
+    return VolumeStreamingCustomControls;
+}(base_1.PluginUIComponent));
+exports.VolumeStreamingCustomControls = VolumeStreamingCustomControls;
+//# sourceMappingURL=volume.js.map

package/lib/commonjs/mol-plugin-ui/hooks/use-behavior.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2020-21 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+interface Behavior<T> {
+    value: T;
+    subscribe(f: (v: T) => void): {
+        unsubscribe(): void;
+    };
+}
+export declare function useBehavior<T>(s: Behavior<T>): T;
+export declare function useBehavior<T>(s: Behavior<T> | undefined): T | undefined;
+export {};

package/lib/commonjs/mol-plugin-ui/hooks/use-behavior.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * Copyright (c) 2020-21 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBehavior = void 0;
+var react_1 = require("react");
+// eslint-disable-next-line
+function useBehavior(s) {
+    var _a = (0, react_1.useState)({}), next = _a[1];
+    var current = (0, react_1.useRef)();
+    current.current = s === null || s === void 0 ? void 0 : s.value;
+    (0, react_1.useEffect)(function () {
+        if (!s) {
+            return;
+        }
+        var sub = s.subscribe(function (v) {
+            if (current.current !== v)
+                next({});
+        });
+        return function () { return sub.unsubscribe(); };
+    }, [s]);
+    return s === null || s === void 0 ? void 0 : s.value;
+}
+exports.useBehavior = useBehavior;
+//# sourceMappingURL=use-behavior.js.map

package/lib/commonjs/mol-plugin-ui/index.js

@@ -0,0 +1,39 @@
+"use strict";
+/**
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPluginUI = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var ReactDOM = (0, tslib_1.__importStar)(require("react-dom"));
+var plugin_1 = require("./plugin");
+var context_1 = require("./context");
+var spec_1 = require("./spec");
+function createPluginUI(target, spec, options) {
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        var ctx;
+        return (0, tslib_1.__generator)(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    ctx = new context_1.PluginUIContext(spec || (0, spec_1.DefaultPluginUISpec)());
+                    return [4 /*yield*/, ctx.init()];
+                case 1:
+                    _a.sent();
+                    if (!(options === null || options === void 0 ? void 0 : options.onBeforeUIRender)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, options.onBeforeUIRender(ctx)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    ReactDOM.render(React.createElement(plugin_1.Plugin, { plugin: ctx }), target);
+                    return [2 /*return*/, ctx];
+            }
+        });
+    });
+}
+exports.createPluginUI = createPluginUI;
+//# sourceMappingURL=index.js.map