molstar 3.26.0 → 3.28.0

package/lib/mol-plugin-state/manager/structure/component.js

@@ -75,7 +75,8 @@ var StructureComponentManager = /** @class */ (function (_super) {
                                 case 1:
                                     _a.sent();
                                     return [4 /*yield*/, this.plugin.state.updateBehavior(StructureFocusRepresentation, function (p) {
-                                            p.ignoreHydrogens = !options.showHydrogens;
+                                            p.ignoreHydrogens = options.hydrogens !== 'all';
+                                            p.ignoreHydrogensVariant = options.hydrogens === 'only-polar' ? 'non-polar' : 'all';
                                             p.ignoreLight = options.ignoreLight;
                                             p.material = options.materialStyle;
                                             p.clip = options.clipObjects;
@@ -95,16 +96,18 @@ var StructureComponentManager = /** @class */ (function (_super) {
         });
     };
     StructureComponentManager.prototype.updateReprParams = function (update, component) {
-        var _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality, ignoreLight = _a.ignoreLight, material = _a.materialStyle, clip = _a.clipObjects;
-        var ignoreHydrogens = !showHydrogens;
+        var _a = this.state.options, hydrogens = _a.hydrogens, quality = _a.visualQuality, ignoreLight = _a.ignoreLight, material = _a.materialStyle, clip = _a.clipObjects;
+        var ignoreHydrogens = hydrogens !== 'all';
+        var ignoreHydrogensVariant = hydrogens === 'only-polar' ? 'non-polar' : 'all';
         for (var _i = 0, _b = component.representations; _i < _b.length; _i++) {
             var r = _b[_i];
             if (r.cell.transform.transformer !== StructureRepresentation3D)
                 continue;
             var params = r.cell.transform.params;
-            if (!!params.type.params.ignoreHydrogens !== ignoreHydrogens || params.type.params.quality !== quality || params.type.params.ignoreLight !== ignoreLight || !shallowEqual(params.type.params.material, material) || !PD.areEqual(Clip.Params, params.type.params.clip, clip)) {
+            if (!!params.type.params.ignoreHydrogens !== ignoreHydrogens || params.type.params.ignoreHydrogensVariant !== ignoreHydrogensVariant || params.type.params.quality !== quality || params.type.params.ignoreLight !== ignoreLight || !shallowEqual(params.type.params.material, material) || !PD.areEqual(Clip.Params, params.type.params.clip, clip)) {
                 update.to(r.cell).update(function (old) {
                     old.type.params.ignoreHydrogens = ignoreHydrogens;
+                    old.type.params.ignoreHydrogensVariant = ignoreHydrogensVariant;
                     old.type.params.quality = quality;
                     old.type.params.ignoreLight = ignoreLight;
                     old.type.params.material = material;
@@ -380,9 +383,10 @@ var StructureComponentManager = /** @class */ (function (_super) {
         var _this = this;
         if (components.length === 0)
             return;
-        var _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality, ignoreLight = _a.ignoreLight, material = _a.materialStyle, clip = _a.clipObjects;
-        var ignoreHydrogens = !showHydrogens;
-        var typeParams = { ignoreHydrogens: ignoreHydrogens, quality: quality, ignoreLight: ignoreLight, material: material, clip: clip };
+        var _a = this.state.options, hydrogens = _a.hydrogens, quality = _a.visualQuality, ignoreLight = _a.ignoreLight, material = _a.materialStyle, clip = _a.clipObjects;
+        var ignoreHydrogens = hydrogens !== 'all';
+        var ignoreHydrogensVariant = hydrogens === 'only-polar' ? 'non-polar' : 'all';
+        var typeParams = { ignoreHydrogens: ignoreHydrogens, ignoreHydrogensVariant: ignoreHydrogensVariant, quality: quality, ignoreLight: ignoreLight, material: material, clip: clip };
         return this.plugin.dataTransaction(function () { return __awaiter(_this, void 0, void 0, function () {
             var _i, components_9, component;
             return __generator(this, function (_a) {
@@ -443,16 +447,17 @@ var StructureComponentManager = /** @class */ (function (_super) {
             var _this = this;
             return __generator(this, function (_a) {
                 return [2 /*return*/, this.plugin.dataTransaction(function () { return __awaiter(_this, void 0, void 0, function () {
-                        var xs, _a, showHydrogens, quality, ignoreLight, material, clip, ignoreHydrogens, typeParams, componentKey, _i, xs_1, s, component;
+                        var xs, _a, hydrogens, quality, ignoreLight, material, clip, ignoreHydrogens, ignoreHydrogensVariant, typeParams, componentKey, _i, xs_1, s, component;
                         return __generator(this, function (_b) {
                             switch (_b.label) {
                                 case 0:
                                     xs = structures || this.currentStructures;
                                     if (xs.length === 0)
                                         return [2 /*return*/];
-                                    _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality, ignoreLight = _a.ignoreLight, material = _a.materialStyle, clip = _a.clipObjects;
-                                    ignoreHydrogens = !showHydrogens;
-                                    typeParams = { ignoreHydrogens: ignoreHydrogens, quality: quality, ignoreLight: ignoreLight, material: material, clip: clip };
+                                    _a = this.state.options, hydrogens = _a.hydrogens, quality = _a.visualQuality, ignoreLight = _a.ignoreLight, material = _a.materialStyle, clip = _a.clipObjects;
+                                    ignoreHydrogens = hydrogens !== 'all';
+                                    ignoreHydrogensVariant = hydrogens === 'only-polar' ? 'non-polar' : 'all';
+                                    typeParams = { ignoreHydrogens: ignoreHydrogens, ignoreHydrogensVariant: ignoreHydrogensVariant, quality: quality, ignoreLight: ignoreLight, material: material, clip: clip };
                                     componentKey = UUID.create22();
                                     _i = 0, xs_1 = xs;
                                     _b.label = 1;
@@ -625,9 +630,9 @@ var StructureComponentManager = /** @class */ (function (_super) {
 }(StatefulPluginComponent));
 (function (StructureComponentManager) {
     StructureComponentManager.OptionsParams = {
-        showHydrogens: PD.Boolean(true, { description: 'Toggle display of hydrogen atoms in representations' }),
+        hydrogens: PD.Select('all', [['all', 'Show All'], ['hide-all', 'Hide All'], ['only-polar', 'Only Polar']], { description: 'Determine display of hydrogen atoms in representations' }),
         visualQuality: PD.Select('auto', VisualQualityOptions, { description: 'Control the visual/rendering quality of representations' }),
-        ignoreLight: PD.Boolean(false, { description: 'Ignore light for stylized rendering of representtions' }),
+        ignoreLight: PD.Boolean(false, { description: 'Ignore light for stylized rendering of representations' }),
         materialStyle: Material.getParam(),
         clipObjects: PD.Group(Clip.Params),
         interactions: PD.Group(InteractionsProvider.defaultParams, { label: 'Non-covalent Interactions' }),

package/lib/mol-plugin-state/transforms/representation.d.ts

@@ -8,7 +8,6 @@ import { StructureElement } from '../../mol-model/structure';
 import { Volume } from '../../mol-model/volume';
 import { PluginContext } from '../../mol-plugin/context';
 import { VolumeRepresentationRegistry } from '../../mol-repr/volume/registry';
-import { VolumeParams } from '../../mol-repr/volume/representation';
 import { StateTransformer } from '../../mol-state';
 import { ColorTheme } from '../../mol-theme/color';
 import { SizeTheme } from '../../mol-theme/size';
@@ -132,7 +131,7 @@ declare const ThemeStrengthRepresentation3D: StateTransformer<SO.Molecule.Struct
     substanceStrength: number;
 }>>;
 export declare namespace VolumeRepresentation3DHelpers {
-    function getDefaultParams(ctx: PluginContext, name: VolumeRepresentationRegistry.BuiltIn, volume: Volume, volumeParams?: Partial<PD.Values<VolumeParams>>): StateTransformer.Params<VolumeRepresentation3D>;
+    function getDefaultParams(ctx: PluginContext, name: VolumeRepresentationRegistry.BuiltIn, volume: Volume, volumeParams?: Partial<PD.Values<PD.Params>>, colorName?: ColorTheme.BuiltIn, colorParams?: Partial<ColorTheme.Props>, sizeName?: SizeTheme.BuiltIn, sizeParams?: Partial<SizeTheme.Props>): StateTransformer.Params<VolumeRepresentation3D>;
     function getDefaultParamsStatic(ctx: PluginContext, name: VolumeRepresentationRegistry.BuiltIn, volumeParams?: Partial<PD.Values<PD.Params>>, colorName?: ColorTheme.BuiltIn, colorParams?: Partial<ColorTheme.Props>, sizeName?: SizeTheme.BuiltIn, sizeParams?: Partial<SizeTheme.Props>): StateTransformer.Params<VolumeRepresentation3D>;
     function getDescription(props: any): string | undefined;
 }

package/lib/mol-plugin-state/transforms/representation.js

@@ -803,16 +803,15 @@ var ThemeStrengthRepresentation3D = PluginStateTransform.BuiltIn({
 //
 export var VolumeRepresentation3DHelpers;
 (function (VolumeRepresentation3DHelpers) {
-    function getDefaultParams(ctx, name, volume, volumeParams) {
+    function getDefaultParams(ctx, name, volume, volumeParams, colorName, colorParams, sizeName, sizeParams) {
         var type = ctx.representation.volume.registry.get(name);
-        var themeDataCtx = { volume: volume };
-        var colorParams = ctx.representation.volume.themes.colorThemeRegistry.get(type.defaultColorTheme.name).getParams(themeDataCtx);
-        var sizeParams = ctx.representation.volume.themes.sizeThemeRegistry.get(type.defaultSizeTheme.name).getParams(themeDataCtx);
+        var colorType = ctx.representation.volume.themes.colorThemeRegistry.get(colorName || type.defaultColorTheme.name);
+        var sizeType = ctx.representation.volume.themes.sizeThemeRegistry.get(sizeName || type.defaultSizeTheme.name);
         var volumeDefaultParams = PD.getDefaultValues(type.getParams(ctx.representation.volume.themes, volume));
         return ({
             type: { name: name, params: volumeParams ? __assign(__assign({}, volumeDefaultParams), volumeParams) : volumeDefaultParams },
-            colorTheme: { name: type.defaultColorTheme.name, params: PD.getDefaultValues(colorParams) },
-            sizeTheme: { name: type.defaultSizeTheme.name, params: PD.getDefaultValues(sizeParams) }
+            colorTheme: { name: colorType.name, params: colorParams ? __assign(__assign({}, colorType.defaultValues), colorParams) : colorType.defaultValues },
+            sizeTheme: { name: sizeType.name, params: sizeParams ? __assign(__assign({}, sizeType.defaultValues), sizeParams) : sizeType.defaultValues }
         });
     }
     VolumeRepresentation3DHelpers.getDefaultParams = getDefaultParams;

package/lib/mol-plugin-state/transforms/volume.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -13,6 +13,7 @@ export { VolumeFromCube };
 export { VolumeFromDx };
 export { AssignColorVolume };
 export { VolumeFromDensityServerCif };
+export { VolumeFromSegmentationCif };
 type VolumeFromCcp4 = typeof VolumeFromCcp4;
 declare const VolumeFromCcp4: import("../../mol-state/transformer").StateTransformer<SO.Format.Ccp4, SO.Volume.Data, PD.Normalize<{
     voxelSize: Vec3;
@@ -36,6 +37,15 @@ declare const VolumeFromDensityServerCif: import("../../mol-state/transformer").
     blockHeader: string | undefined;
     entryId: string;
 }>>;
+type VolumeFromSegmentationCif = typeof VolumeFromSegmentationCif;
+declare const VolumeFromSegmentationCif: import("../../mol-state/transformer").StateTransformer<SO.Format.Cif, SO.Volume.Data, PD.Normalize<{
+    blockHeader: string | undefined;
+    segmentLabels: PD.Normalize<{
+        id: any;
+        label: any;
+    }>[];
+    ownerId: string;
+}>>;
 type AssignColorVolume = typeof AssignColorVolume;
 declare const AssignColorVolume: import("../../mol-state/transformer").StateTransformer<SO.Volume.Data, SO.Volume.Data, PD.Normalize<{
     ref: string;

package/lib/mol-plugin-state/transforms/volume.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -16,12 +16,14 @@ import { PluginStateObject as SO, PluginStateTransform } from '../objects';
 import { volumeFromCube } from '../../mol-model-formats/volume/cube';
 import { volumeFromDx } from '../../mol-model-formats/volume/dx';
 import { StateSelection } from '../../mol-state';
+import { volumeFromSegmentationData } from '../../mol-model-formats/volume/segmentation';
 export { VolumeFromCcp4 };
 export { VolumeFromDsn6 };
 export { VolumeFromCube };
 export { VolumeFromDx };
 export { AssignColorVolume };
 export { VolumeFromDensityServerCif };
+export { VolumeFromSegmentationCif };
 var VolumeFromCcp4 = PluginStateTransform.BuiltIn({
     name: 'volume-from-ccp4',
     display: { name: 'Volume from CCP4/MRC/MAP', description: 'Create Volume from CCP4/MRC/MAP data' },
@@ -199,6 +201,57 @@ var VolumeFromDensityServerCif = PluginStateTransform.BuiltIn({
         b === null || b === void 0 ? void 0 : b.data.customProperties.dispose();
     }
 });
+var VolumeFromSegmentationCif = PluginStateTransform.BuiltIn({
+    name: 'volume-from-segmentation-cif',
+    display: { name: 'Volume from Segmentation CIF' },
+    from: SO.Format.Cif,
+    to: SO.Volume.Data,
+    params: function (a) {
+        var blocks = a === null || a === void 0 ? void 0 : a.data.blocks.slice(1);
+        var blockHeaderParam = blocks ?
+            PD.Optional(PD.Select(blocks[0] && blocks[0].header, blocks.map(function (b) { return [b.header, b.header]; }), { description: 'Header of the block to parse' }))
+            : PD.Optional(PD.Text(void 0, { description: 'Header of the block to parse. If none is specifed, the 1st data block in the file is used.' }));
+        return {
+            blockHeader: blockHeaderParam,
+            segmentLabels: PD.ObjectList({ id: PD.Numeric(-1), label: PD.Text('') }, function (s) { return "".concat(s.id, " = ").concat(s.label); }, { description: 'Mapping of segment IDs to segment labels' }),
+            ownerId: PD.Text('', { isHidden: true, description: 'Reference to the object which manages this volume' }),
+        };
+    }
+})({
+    isApplicable: function (a) { return a.data.blocks.length > 0; },
+    apply: function (_a) {
+        var _this = this;
+        var a = _a.a, params = _a.params;
+        return Task.create('Parse segmentation CIF', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
+            var header, block, segmentationCif, segmentLabels, _i, _a, segment, volume, _b, x, y, z, props;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        header = params.blockHeader || a.data.blocks[1].header;
+                        block = a.data.blocks.find(function (b) { return b.header === header; });
+                        if (!block)
+                            throw new Error("Data block '".concat([header], "' not found."));
+                        segmentationCif = CIF.schema.segmentation(block);
+                        segmentLabels = {};
+                        for (_i = 0, _a = params.segmentLabels; _i < _a.length; _i++) {
+                            segment = _a[_i];
+                            segmentLabels[segment.id] = segment.label;
+                        }
+                        return [4 /*yield*/, volumeFromSegmentationData(segmentationCif, { segmentLabels: segmentLabels, ownerId: params.ownerId }).runInContext(ctx)];
+                    case 1:
+                        volume = _c.sent();
+                        _b = volume.grid.cells.space.dimensions, x = _b[0], y = _b[1], z = _b[2];
+                        props = { label: segmentationCif.volume_data_3d_info.name.value(0), description: "Segmentation ".concat(x, "\u00D7").concat(y, "\u00D7").concat(z) };
+                        return [2 /*return*/, new SO.Volume.Data(volume, props)];
+                }
+            });
+        }); });
+    },
+    dispose: function (_a) {
+        var b = _a.b;
+        b === null || b === void 0 ? void 0 : b.data.customProperties.dispose();
+    }
+});
 var AssignColorVolume = PluginStateTransform.BuiltIn({
     name: 'assign-color-volume',
     display: { name: 'Assign Color Volume', description: 'Assigns another volume to be available for coloring.' },

package/lib/mol-plugin-ui/controls/line-graph/line-graph-component.d.ts

@@ -34,6 +34,7 @@ export declare class LineGraphComponent extends React.Component<any, LineGraphCo
     private normalizePoint;
     private unNormalizePoint;
     private refCallBack;
+    private renderHistogram;
     private renderPoints;
     private renderLines;
 }

package/lib/mol-plugin-ui/controls/line-graph/line-graph-component.js

@@ -1,13 +1,16 @@
 import { __assign, __extends } from "tslib";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Paul Luna <paulluna0215@gmail.com>
+ * @author David Sehnal <david.sehnal@gmail.com>
  */
 import { PointComponent } from './point-component';
 import * as React from 'react';
 import { Vec2 } from '../../../mol-math/linear-algebra';
+import { Grid } from '../../../mol-model/volume';
+import { arrayMax } from '../../../mol-util/array';
 var LineGraphComponent = /** @class */ (function (_super) {
     __extends(LineGraphComponent, _super);
     function LineGraphComponent(props) {
@@ -106,8 +109,9 @@ var LineGraphComponent = /** @class */ (function (_super) {
     LineGraphComponent.prototype.render = function () {
         var points = this.renderPoints();
         var lines = this.renderLines();
+        var histogram = this.renderHistogram();
         return ([
-            _jsx("div", { children: _jsxs("svg", __assign({ className: "msp-canvas", ref: this.refCallBack, viewBox: "0 0 ".concat(this.width + this.padding, " ").concat(this.height + this.padding), onMouseMove: this.handleDrag, onMouseUp: this.handlePointUpdate, onMouseLeave: this.handleLeave, onMouseEnter: this.handleEnter, tabIndex: 0, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onDoubleClick: this.handleDoubleClick }, { children: [_jsxs("g", __assign({ stroke: "black", fill: "black" }, { children: [lines, points] })), _jsx("g", { className: "ghost-points", stroke: "black", fill: "black" })] })) }, "LineGraph"),
+            _jsx("div", { children: _jsxs("svg", __assign({ className: "msp-canvas", ref: this.refCallBack, viewBox: "0 0 ".concat(this.width + this.padding, " ").concat(this.height + this.padding), onMouseMove: this.handleDrag, onMouseUp: this.handlePointUpdate, onMouseLeave: this.handleLeave, onMouseEnter: this.handleEnter, tabIndex: 0, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onDoubleClick: this.handleDoubleClick }, { children: [_jsxs("g", __assign({ stroke: "black", fill: "black" }, { children: [histogram, lines, points] })), _jsx("g", { className: "ghost-points", stroke: "black", fill: "black" })] })) }, "LineGraph"),
             _jsx("div", { id: "modal-root" }, "modal")
         ]);
     };
@@ -238,11 +242,11 @@ var LineGraphComponent = /** @class */ (function (_super) {
         document.removeEventListener('mouseup', this.handlePointUpdate, true);
     };
     LineGraphComponent.prototype.normalizePoint = function (point) {
-        var min = this.padding / 2;
-        var maxX = this.width + min;
-        var maxY = this.height + min;
-        var normalizedX = (point[0] * (maxX - min)) + min;
-        var normalizedY = (point[1] * (maxY - min)) + min;
+        var offset = this.padding / 2;
+        var maxX = this.width + offset;
+        var maxY = this.height + offset;
+        var normalizedX = (point[0] * (maxX - offset)) + offset;
+        var normalizedY = (point[1] * (maxY - offset)) + offset;
         var reverseY = (this.height + this.padding) - normalizedY;
         var newPoint = Vec2.create(normalizedX, reverseY);
         return newPoint;
@@ -261,6 +265,23 @@ var LineGraphComponent = /** @class */ (function (_super) {
             this.myRef = element;
         }
     };
+    LineGraphComponent.prototype.renderHistogram = function () {
+        if (!this.props.volume)
+            return null;
+        var histogram = Grid.getHistogram(this.props.volume.grid, 40);
+        var bars = [];
+        var N = histogram.counts.length;
+        var w = this.width / N;
+        var offset = this.padding / 2;
+        var max = arrayMax(histogram.counts) || 1;
+        for (var i = 0; i < N; i++) {
+            var x = this.width * i / (N - 1) + offset;
+            var y1 = this.height + offset;
+            var y2 = this.height * (1 - histogram.counts[i] / max) + offset;
+            bars.push(_jsx("line", { x1: x, x2: x, y1: y1, y2: y2, stroke: "#ded9ca", strokeWidth: w }, "histogram".concat(i)));
+        }
+        return bars;
+    };
     LineGraphComponent.prototype.renderPoints = function () {
         var points = [];
         var point;
@@ -275,19 +296,18 @@ var LineGraphComponent = /** @class */ (function (_super) {
     LineGraphComponent.prototype.renderLines = function () {
         var points = [];
         var lines = [];
-        var min;
         var maxX;
         var maxY;
         var normalizedX;
         var normalizedY;
         var reverseY;
+        var o = this.padding / 2;
         for (var _i = 0, _a = this.state.points; _i < _a.length; _i++) {
             var point = _a[_i];
-            min = this.padding / 2;
-            maxX = this.width + min;
-            maxY = this.height + min;
-            normalizedX = (point[0] * (maxX - min)) + min;
-            normalizedY = (point[1] * (maxY - min)) + min;
+            maxX = this.width + o;
+            maxY = this.height + this.padding;
+            normalizedX = (point[0] * (maxX - o)) + o;
+            normalizedY = (point[1] * (maxY - o)) + o;
             reverseY = this.height + this.padding - normalizedY;
             points.push(Vec2.create(normalizedX, reverseY));
         }

package/lib/mol-plugin-ui/controls/parameters.d.ts

@@ -94,6 +94,7 @@ export declare class LineGraphControl extends React.PureComponent<ParamProps<PD.
         isOverPoint: boolean;
         message: string;
     };
+    private pointToLabel;
     onHover: (point?: Vec2) => void;
     onDrag: (point: Vec2) => void;
     onChange: (value: PD.LineGraph['defaultValue']) => void;

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

@@ -277,13 +277,14 @@ var LineGraphControl = /** @class */ (function (_super) {
         _this.onHover = function (point) {
             _this.setState({ isOverPoint: !_this.state.isOverPoint });
             if (point) {
-                _this.setState({ message: "(".concat(point[0].toFixed(2), ", ").concat(point[1].toFixed(2), ")") });
-                return;
+                _this.setState({ message: _this.pointToLabel(point) });
+            }
+            else {
+                _this.setState({ message: "".concat(_this.props.value.length, " points") });
             }
-            _this.setState({ message: "".concat(_this.props.value.length, " points") });
         };
         _this.onDrag = function (point) {
-            _this.setState({ message: "(".concat(point[0].toFixed(2), ", ").concat(point[1].toFixed(2), ")") });
+            _this.setState({ message: _this.pointToLabel(point) });
         };
         _this.onChange = function (value) {
             _this.props.onChange({ name: _this.props.name, param: _this.props.param, value: value });
@@ -294,9 +295,25 @@ var LineGraphControl = /** @class */ (function (_super) {
         };
         return _this;
     }
+    LineGraphControl.prototype.pointToLabel = function (point) {
+        var _a, _b;
+        if (!point)
+            return '';
+        var volume = (_b = (_a = this.props.param).getVolume) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (volume) {
+            var _c = volume.grid.stats, min = _c.min, max = _c.max, mean = _c.mean, sigma = _c.sigma;
+            var v = min + (max - min) * point[0];
+            var s = (v - mean) / sigma;
+            return "(".concat(v.toFixed(2), " | ").concat(s.toFixed(2), "\u03C3, ").concat(point[1].toFixed(2), ")");
+        }
+        else {
+            return "(".concat(point[0].toFixed(2), ", ").concat(point[1].toFixed(2), ")");
+        }
+    };
     LineGraphControl.prototype.render = function () {
+        var _a, _b;
         var label = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: "".concat(this.state.message) })) }), _jsx("div", __assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: _jsx(LineGraphComponent, { data: this.props.param.defaultValue, onChange: this.onChange, onHover: this.onHover, onDrag: this.onDrag }) }))] });
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: "".concat(this.state.message) })) }), _jsx("div", __assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none', marginTop: 1 } }, { children: _jsx(LineGraphComponent, { data: this.props.value, volume: (_b = (_a = this.props.param).getVolume) === null || _b === void 0 ? void 0 : _b.call(_a), onChange: this.onChange, onHover: this.onHover, onDrag: this.onDrag }) }))] });
     };
     return LineGraphControl;
 }(React.PureComponent));

package/lib/mol-plugin-ui/sequence/sequence.d.ts

@@ -5,8 +5,11 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 import * as React from 'react';
-import { StructureElement } from '../../mol-model/structure';
+import { Subject } from 'rxjs';
+import { StructureElement, Unit } from '../../mol-model/structure';
+import { Representation } from '../../mol-repr/representation';
 import { ButtonsType, ModifiersKeys } from '../../mol-util/input/input-observer';
+import { MarkerAction } from '../../mol-util/marker-action';
 import { PluginUIComponent } from '../base';
 import { SequenceWrapper } from './wrapper';
 type SequenceProps = {
@@ -15,12 +18,17 @@ type SequenceProps = {
     hideSequenceNumbers?: boolean;
 };
 export declare class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
-    private parentDiv;
-    private lastMouseOverSeqIdx;
-    private highlightQueue;
-    private lociHighlightProvider;
-    private lociSelectionProvider;
-    private get sequenceNumberPeriod();
+    protected parentDiv: React.RefObject<HTMLDivElement>;
+    protected lastMouseOverSeqIdx: number;
+    protected highlightQueue: Subject<{
+        seqIdx: number;
+        buttons: number;
+        button: number;
+        modifiers: ModifiersKeys;
+    }>;
+    protected lociHighlightProvider: (loci: Representation.Loci, action: MarkerAction) => void;
+    protected lociSelectionProvider: (loci: Representation.Loci, action: MarkerAction) => void;
+    protected get sequenceNumberPeriod(): number;
     componentDidMount(): void;
     componentWillUnmount(): void;
     getLoci(seqIdx: number | undefined): StructureElement.Loci | undefined;
@@ -28,18 +36,18 @@ export declare class Sequence<P extends SequenceProps> extends PluginUIComponent
     hover(loci: StructureElement.Loci | undefined, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys): void;
     click(loci: StructureElement.Loci | undefined, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys): void;
     contextMenu: (e: React.MouseEvent) => void;
-    private mouseDownLoci;
+    protected mouseDownLoci: StructureElement.Loci | undefined;
     mouseDown: (e: React.MouseEvent) => void;
     mouseUp: (e: React.MouseEvent) => void;
-    private getBackgroundColor;
-    private getResidueClass;
-    private residue;
-    private getSequenceNumberClass;
-    private location;
-    private getSequenceNumber;
-    private padSeqNum;
-    private getSequenceNumberSpan;
-    private updateMarker;
+    protected getBackgroundColor(marker: number): "" | "rgb(51, 255, 25)" | "rgb(255, 102, 153)";
+    protected getResidueClass(seqIdx: number, label: string): string;
+    protected residue(seqIdx: number, label: string, marker: number): JSX.Element;
+    protected getSequenceNumberClass(seqIdx: number, seqNum: string, label: string): string;
+    protected location: StructureElement.Location<Unit>;
+    protected getSequenceNumber(seqIdx: number): string;
+    protected padSeqNum(n: string): string;
+    protected getSequenceNumberSpan(seqIdx: number, label: string): JSX.Element;
+    protected updateMarker(): void;
     mouseMove: (e: React.MouseEvent) => void;
     mouseLeave: (e: React.MouseEvent) => void;
     render(): JSX.Element;

package/lib/mol-plugin-ui/sequence.d.ts

@@ -6,7 +6,25 @@
  */
 /// <reference types="react" />
 import { PluginUIComponent } from './base';
-import { Structure } from '../mol-model/structure';
+import { Structure, StructureElement } from '../mol-model/structure';
+import { SequenceWrapper } from './sequence/wrapper';
+import { State } from '../mol-state';
+import { StructureSelectionManager } from '../mol-plugin-state/manager/structure/selection';
+export declare function opKey(l: StructureElement.Location): string;
+export declare function splitModelEntityId(modelEntityId: string): (string | number)[];
+export declare function getSequenceWrapper(state: {
+    structure: Structure;
+    modelEntityId: string;
+    chainGroupId: number;
+    operatorKey: string;
+}, structureSelection: StructureSelectionManager): SequenceWrapper.Any | string;
+export declare function getModelEntityOptions(structure: Structure, polymersOnly?: boolean): [string, string][];
+export declare function getChainOptions(structure: Structure, modelEntityId: string): [number, string][];
+export declare function getOperatorOptions(structure: Structure, modelEntityId: string, chainGroupId: number): [string, string][];
+export declare function getStructureOptions(state: State): {
+    options: [string, string][];
+    all: Structure[];
+};
 export type SequenceViewMode = 'single' | 'polymers' | 'all';
 type SequenceViewState = {
     structureOptions: {

package/lib/mol-plugin-ui/sequence.js

@@ -26,18 +26,18 @@ var MaxDisplaySequenceLength = 5000;
 // TODO: add virtualized Select controls (at best with a search box)?
 var MaxSelectOptionsCount = 1000;
 var MaxSequenceWrappersCount = 30;
-function opKey(l) {
+export function opKey(l) {
     var ids = SP.unit.pdbx_struct_oper_list_ids(l);
     var ncs = SP.unit.struct_ncs_oper_id(l);
     var hkl = SP.unit.hkl(l);
     var spgrOp = SP.unit.spgrOp(l);
     return "".concat(ids.sort().join(','), "|").concat(ncs, "|").concat(hkl, "|").concat(spgrOp);
 }
-function splitModelEntityId(modelEntityId) {
+export function splitModelEntityId(modelEntityId) {
     var _a = modelEntityId.split('|'), modelIdx = _a[0], entityId = _a[1];
     return [parseInt(modelIdx), entityId];
 }
-function getSequenceWrapper(state, structureSelection) {
+export function getSequenceWrapper(state, structureSelection) {
     var structure = state.structure, modelEntityId = state.modelEntityId, chainGroupId = state.chainGroupId, operatorKey = state.operatorKey;
     var l = StructureElement.Location.create(structure);
     var _a = splitModelEntityId(modelEntityId), modelIdx = _a[0], entityId = _a[1];
@@ -96,7 +96,7 @@ function getSequenceWrapper(state, structureSelection) {
         return 'No sequence available';
     }
 }
-function getModelEntityOptions(structure, polymersOnly) {
+export function getModelEntityOptions(structure, polymersOnly) {
     if (polymersOnly === void 0) { polymersOnly = false; }
     var options = [];
     var l = StructureElement.Location.create(structure);
@@ -131,7 +131,7 @@ function getModelEntityOptions(structure, polymersOnly) {
         options.push(['', 'No entities']);
     return options;
 }
-function getChainOptions(structure, modelEntityId) {
+export function getChainOptions(structure, modelEntityId) {
     var options = [];
     var l = StructureElement.Location.create(structure);
     var seen = new Set();
@@ -159,7 +159,7 @@ function getChainOptions(structure, modelEntityId) {
         options.push([-1, 'No chains']);
     return options;
 }
-function getOperatorOptions(structure, modelEntityId, chainGroupId) {
+export function getOperatorOptions(structure, modelEntityId, chainGroupId) {
     var options = [];
     var l = StructureElement.Location.create(structure);
     var seen = new Set();
@@ -187,7 +187,7 @@ function getOperatorOptions(structure, modelEntityId, chainGroupId) {
         options.push(['', 'No operators']);
     return options;
 }
-function getStructureOptions(state) {
+export function getStructureOptions(state) {
     var _a;
     var options = [];
     var all = [];

package/lib/mol-plugin-ui/skin/base/base.scss

@@ -1,33 +1,33 @@
-
-@mixin user-select($select) {
-  -webkit-user-select: $select;
-     -moz-user-select: $select;
-      -ms-user-select: $select; // IE10+
-          user-select: $select;
-}
-
-.msp-plugin {
-    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.42857143;
-
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-
-    @import 'variables';
-
-    @import "normalize";
-
-    @import 'layout';
-    @import 'ui';
-    @import 'logo';
-
-    .msp-plugin-content {
-        color: $font-color;
-    }
-
-    background: $default-background;
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+.msp-plugin {
+    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    @import 'variables';
+
+    @import "normalize";
+
+    @import 'layout';
+    @import 'ui';
+    @import 'logo';
+
+    .msp-plugin-content {
+        color: $font-color;
+    }
+
+    background: $default-background;
 }