molstar 3.44.0 → 3.45.0

package/lib/mol-model-formats/shape/ply.d.ts

@@ -37,7 +37,7 @@ export declare const PlyShapeParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -84,7 +84,7 @@ export declare function shapeFromPly(source: PlyFile, params?: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/mol-model-props/computed/representations/interactions-inter-unit-cylinder.d.ts

@@ -22,13 +22,14 @@ export declare const InteractionsInterUnitParams: {
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/mol-model-props/computed/representations/interactions-intra-unit-cylinder.d.ts

@@ -22,13 +22,14 @@ export declare const InteractionsIntraUnitParams: {
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/mol-model-props/computed/representations/interactions.d.ts

@@ -27,12 +27,13 @@ export declare const InteractionsParams: {
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -74,12 +75,13 @@ export declare function getInteractionParams(ctx: ThemeRegistryContext, structur
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -122,12 +124,13 @@ export declare const InteractionsRepresentationProvider: StructureRepresentation
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/mol-model-props/integrative/cross-link-restraint/representation.d.ts

@@ -23,6 +23,7 @@ export declare const CrossLinkRestraintCylinderParams: {
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     includeParent: PD.BooleanParam;
     doubleSided: PD.BooleanParam;
@@ -30,7 +31,7 @@ export declare const CrossLinkRestraintCylinderParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -67,6 +68,7 @@ export declare const CrossLinkRestraintParams: {
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     includeParent: PD.BooleanParam;
     doubleSided: PD.BooleanParam;
@@ -74,7 +76,7 @@ export declare const CrossLinkRestraintParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -110,6 +112,7 @@ export declare function getCrossLinkRestraintParams(ctx: ThemeRegistryContext, s
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     includeParent: PD.BooleanParam;
     doubleSided: PD.BooleanParam;
@@ -117,7 +120,7 @@ export declare function getCrossLinkRestraintParams(ctx: ThemeRegistryContext, s
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -154,6 +157,7 @@ export declare const CrossLinkRestraintRepresentationProvider: StructureRepresen
     dashCap: PD.BooleanParam;
     stubCap: PD.BooleanParam;
     radialSegments: PD.Numeric;
+    colorMode: PD.Select<"default" | "interpolate">;
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     includeParent: PD.BooleanParam;
     doubleSided: PD.BooleanParam;
@@ -161,7 +165,7 @@ export declare const CrossLinkRestraintRepresentationProvider: StructureRepresen
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/mol-plugin/behavior/dynamic/representation.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>

package/lib/mol-plugin/behavior/dynamic/representation.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -267,15 +267,21 @@ export var FocusLoci = PluginBehavior.create({
         class_4.prototype.register = function () {
             var _this = this;
             this.subscribeObservable(this.ctx.behaviors.interaction.click, function (_a) {
-                var _b;
+                var _b, _c, _d, _e, _f;
                 var current = _a.current, button = _a.button, modifiers = _a.modifiers;
-                var _c = _this.params.bindings, clickFocus = _c.clickFocus, clickFocusAdd = _c.clickFocusAdd, clickFocusSelectMode = _c.clickFocusSelectMode, clickFocusAddSelectMode = _c.clickFocusAddSelectMode;
+                var _g = _this.params.bindings, clickFocus = _g.clickFocus, clickFocusAdd = _g.clickFocusAdd, clickFocusSelectMode = _g.clickFocusSelectMode, clickFocusAddSelectMode = _g.clickFocusAddSelectMode;
+                var binding = _this.ctx.selectionMode ? clickFocusSelectMode : clickFocus;
+                var matched = Binding.match(binding, button, modifiers);
+                // Support snapshot key property, in which case ignore the focus functionality
+                var snapshotKey = (_e = (_d = (_c = (_b = current.repr) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.snapshotKey) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : '';
+                if (!_this.ctx.selectionMode && matched && snapshotKey) {
+                    _this.ctx.managers.snapshot.applyKey(snapshotKey);
+                    return;
+                }
                 // only apply structure focus for appropriate granularity
                 var granularity = _this.ctx.managers.interactivity.props.granularity;
                 if (granularity !== 'residue' && granularity !== 'element')
                     return;
-                var binding = _this.ctx.selectionMode ? clickFocusSelectMode : clickFocus;
-                var matched = Binding.match(binding, button, modifiers);
                 var bindingAdd = _this.ctx.selectionMode ? clickFocusAddSelectMode : clickFocusAdd;
                 var matchedAdd = Binding.match(bindingAdd, button, modifiers);
                 if (!matched && !matchedAdd)
@@ -292,7 +298,7 @@ export var FocusLoci = PluginBehavior.create({
                     else {
                         _this.ctx.managers.structure.focus.addFromLoci(loci);
                         // focus-add is not handled in camera behavior, doing it here
-                        var current_1 = (_b = _this.ctx.managers.structure.focus.current) === null || _b === void 0 ? void 0 : _b.loci;
+                        var current_1 = (_f = _this.ctx.managers.structure.focus.current) === null || _f === void 0 ? void 0 : _f.loci;
                         if (current_1)
                             _this.ctx.managers.camera.focusLoci(current_1);
                     }

package/lib/mol-plugin/version.js

@@ -1,2 +1,2 @@
-export var PLUGIN_VERSION = '3.44.0';
-export var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : 1704560431276);
+export var PLUGIN_VERSION = '3.45.0';
+export var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : 1706983325128);

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -156,7 +156,7 @@ declare const ModelUnitcell3D: StateTransformer<SO.Molecule.Model, SO.Shape.Repr
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean | "inverted";
-    transparentBackfaces: string;
+    transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -180,7 +180,7 @@ declare const StructureBoundingBox3D: StateTransformer<SO.Molecule.Structure, SO
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean | "inverted";
-    transparentBackfaces: string;
+    transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -288,7 +288,7 @@ declare const StructureSelectionsAngle3D: StateTransformer<SO.Molecule.Structure
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean | "inverted";
-    transparentBackfaces: string;
+    transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
     bumpAmplitude: number;
     lineSizeAttenuation: boolean;
@@ -341,7 +341,7 @@ declare const StructureSelectionsDihedral3D: StateTransformer<SO.Molecule.Struct
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean | "inverted";
-    transparentBackfaces: string;
+    transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
     bumpAmplitude: number;
     lineSizeAttenuation: boolean;
@@ -353,6 +353,8 @@ type StructureSelectionsLabel3D = typeof StructureSelectionsLabel3D;
 declare const StructureSelectionsLabel3D: StateTransformer<SO.Molecule.Structure.Selections, SO.Shape.Representation3D, PD.Normalize<{
     scaleByRadius: boolean;
     visuals: "text"[];
+    snapshotKey: string;
+    tooltip: string;
     borderWidth: number;
     customText: string;
     textColor: Color;
@@ -400,7 +402,7 @@ declare const StructureSelectionsOrientation3D: StateTransformer<SO.Molecule.Str
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean | "inverted";
-    transparentBackfaces: string;
+    transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -427,7 +429,7 @@ declare const StructureSelectionsPlane3D: StateTransformer<SO.Molecule.Structure
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean | "inverted";
-    transparentBackfaces: string;
+    transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -38,6 +38,7 @@ import { PlaneParams, PlaneRepresentation } from '../../mol-repr/shape/loci/plan
 import { Substance } from '../../mol-theme/substance';
 import { Material } from '../../mol-util/material';
 import { lerp } from '../../mol-math/interpolate';
+import { MarkerAction, MarkerActions } from '../../mol-util/marker-action';
 export { StructureRepresentation3D };
 export { ExplodeStructureRepresentation3D };
 export { SpinStructureRepresentation3D };
@@ -1244,16 +1245,18 @@ var StructureSelectionsLabel3D = PluginStateTransform.BuiltIn({
         var _this = this;
         var a = _a.a, params = _a.params;
         return Task.create('Structure Label', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
-            var data, repr;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var data, repr, pickable;
+            var _a, _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         data = getLabelDataFromStructureSelections(a.data);
                         repr = LabelRepresentation(__assign({ webgl: (_a = plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.webgl }, plugin.representation.structure.themes), function () { return LabelParams; });
                         return [4 /*yield*/, repr.createOrUpdate(params, data).runInContext(ctx)];
                     case 1:
-                        _b.sent();
+                        _d.sent();
+                        pickable = !!(((_b = params.snapshotKey) === null || _b === void 0 ? void 0 : _b.trim()) || ((_c = params.tooltip) === null || _c === void 0 ? void 0 : _c.trim()));
+                        repr.setState({ pickable: pickable, markerActions: pickable ? MarkerActions.Highlighting : MarkerAction.None });
                         return [2 /*return*/, new SO.Shape.Representation3D({ repr: repr, sourceData: data }, { label: "Label" })];
                 }
             });
@@ -1263,16 +1266,19 @@ var StructureSelectionsLabel3D = PluginStateTransform.BuiltIn({
         var _this = this;
         var a = _a.a, b = _a.b, oldParams = _a.oldParams, newParams = _a.newParams;
         return Task.create('Structure Label', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
-            var props, data;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var props, data, pickable;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         props = __assign(__assign({}, b.data.repr.props), newParams);
                         data = getLabelDataFromStructureSelections(a.data);
                         return [4 /*yield*/, b.data.repr.createOrUpdate(props, data).runInContext(ctx)];
                     case 1:
-                        _a.sent();
+                        _c.sent();
                         b.data.sourceData = data;
+                        pickable = !!(((_a = newParams.snapshotKey) === null || _a === void 0 ? void 0 : _a.trim()) || ((_b = newParams.tooltip) === null || _b === void 0 ? void 0 : _b.trim()));
+                        b.data.repr.setState({ pickable: pickable, markerActions: pickable ? MarkerActions.Highlighting : MarkerAction.None });
                         return [2 /*return*/, StateTransformer.UpdateResult.Updated];
                 }
             });

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -123,8 +123,7 @@ export declare class NumberRangeControl extends SimpleParam<PD.Numeric> {
     renderControl(): import("react/jsx-runtime").JSX.Element;
 }
 export declare class TextControl extends SimpleParam<PD.Text> {
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    updateValue: (value: string) => void;
     renderControl(): import("react/jsx-runtime").JSX.Element;
 }
 export declare class PureSelectControl extends React.PureComponent<ParamProps<PD.Select<string | number>> & {

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

@@ -1,7 +1,7 @@
 import { __assign, __extends, __spreadArray } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -224,6 +224,8 @@ function renderSimple(options) {
         _className.push('msp-control-label-short');
     if (props.param.twoColumns)
         _className.push('msp-control-col-2');
+    if (props.param.multiline)
+        _className.push('msp-control-twoline');
     var className = _className.join(' ');
     var label = props.param.label || camelCaseToWords(props.name);
     var help = props.param.help
@@ -366,28 +368,62 @@ var TextControl = /** @class */ (function (_super) {
     __extends(TextControl, _super);
     function TextControl() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onChange = function (e) {
-            var value = e.target.value;
+        _this.updateValue = function (value) {
             if (value !== _this.props.value) {
                 _this.update(value);
             }
         };
-        _this.onKeyPress = function (e) {
-            if ((e.keyCode === 13 || e.charCode === 13 || e.key === 'Enter')) {
-                if (_this.props.onEnter)
-                    _this.props.onEnter();
-            }
-            e.stopPropagation();
-        };
         return _this;
     }
     TextControl.prototype.renderControl = function () {
-        var placeholder = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsx("input", { type: 'text', value: this.props.value || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled });
+        var placeholder = this.props.param.placeholder || this.props.param.label || camelCaseToWords(this.props.name);
+        return _jsx(TextCtrl, { props: this.props, placeholder: placeholder, update: this.updateValue });
     };
     return TextControl;
 }(SimpleParam));
 export { TextControl };
+function TextCtrl(_a) {
+    var props = _a.props, placeholder = _a.placeholder, update = _a.update;
+    var _b = React.useState(props.value), value = _b[0], setValue = _b[1];
+    React.useEffect(function () { return setValue(props.value); }, [props.value]);
+    if (props.param.multiline) {
+        return _jsx("div", { className: 'msp-control-text-area-wrapper', children: _jsx("textarea", { value: props.param.disableInteractiveUpdates ? (value || '') : props.value, placeholder: placeholder, onChange: function (e) {
+                    if (props.param.disableInteractiveUpdates)
+                        setValue(e.target.value);
+                    else
+                        update(e.target.value);
+                }, onBlur: function (e) {
+                    if (props.param.disableInteractiveUpdates)
+                        update(e.target.value);
+                }, onKeyDown: function (e) {
+                    if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+                        e.currentTarget.blur();
+                    }
+                }, disabled: props.isDisabled }) });
+    }
+    return _jsx("input", { type: 'text', value: props.param.disableInteractiveUpdates ? (value || '') : props.value, placeholder: placeholder, onChange: function (e) {
+            if (props.param.disableInteractiveUpdates)
+                setValue(e.target.value);
+            else
+                update(e.target.value);
+        }, onBlur: function (e) {
+            if (props.param.disableInteractiveUpdates)
+                update(e.target.value);
+        }, disabled: props.isDisabled, onKeyDown: function (e) {
+            if (e.key !== 'Enter')
+                return;
+            if (props.onEnter) {
+                e.stopPropagation();
+                props.onEnter();
+            }
+            else if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+                e.currentTarget.blur();
+            }
+            else if (props.param.disableInteractiveUpdates) {
+                update(value);
+            }
+        } });
+}
 var PureSelectControl = /** @class */ (function (_super) {
     __extends(PureSelectControl, _super);
     function PureSelectControl() {

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -68,7 +68,7 @@ export declare class LociLabels extends PluginUIComponent<{}, {
     labels: ReadonlyArray<LociLabel>;
 }> {
     state: {
-        labels: never[];
+        labels: string[];
     };
     componentDidMount(): void;
     render(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,7 +1,7 @@
 import { __awaiter, __extends, __generator } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 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>
@@ -292,7 +292,12 @@ var LociLabels = /** @class */ (function (_super) {
         if (this.state.labels.length === 0) {
             return null;
         }
-        return _jsx("div", { className: 'msp-highlight-info', children: this.state.labels.map(function (e, i) { return _jsx("div", { dangerouslySetInnerHTML: { __html: e } }, '' + i); }) });
+        return _jsx("div", { className: 'msp-highlight-info', children: this.state.labels.map(function (e, i) {
+                if (e.indexOf('\n') > 0) {
+                    return _jsx("div", { className: 'msp-highlight-markdown-row', children: _jsx(Markdown, { skipHtml: true, children: e }) }, '' + i);
+                }
+                return _jsx("div", { className: 'msp-highlight-simple-row', dangerouslySetInnerHTML: { __html: e } }, '' + i);
+            }) });
     };
     return LociLabels;
 }(PluginUIComponent));

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

@@ -71,6 +71,10 @@
     width: 50%;
 }
 
+.msp-control-twoline {
+    height: 2 * $row-height !important;
+}
+
 .msp-control-group {
     position: relative;
 }
@@ -418,9 +422,8 @@
     }
 }
 
-.msp-text-area-wrapper {
+.msp-control-text-area-wrapper, .msp-text-area-wrapper {
     position: relative;
-    height: 3 * $row-height !important;
     textarea {
         border: none;
         width: 100%;
@@ -431,4 +434,12 @@
         font-size: 12px;
         line-height: 16px;
     }
-}
+}
+
+.msp-control-text-area-wrapper {
+    height: 2 * $row-height !important;
+}
+
+.msp-text-area-wrapper {
+    height: 3 * $row-height !important;
+}

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

@@ -142,13 +142,19 @@
     padding: $info-vertical-padding $control-spacing;
     background: $default-background; //$highlight-info-background;
     opacity: 90%;
-
-    // min-height: $row-height;
-    text-align: right;
+    max-width: 400px;
 
     @include non-selectable;
 }
 
+.msp-highlight-markdown-row {
+    padding-left: $control-spacing;
+}
+
+.msp-highlight-simple-row {
+    text-align: right;
+}
+
 .msp-highlight-info-hr {
     margin-inline: 0px;
     margin-block: 3px;

package/lib/mol-repr/shape/loci/angle.d.ts

@@ -59,7 +59,7 @@ export declare const AngleParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     lineSizeAttenuation: PD.BooleanParam;

package/lib/mol-repr/shape/loci/dihedral.d.ts

@@ -59,7 +59,7 @@ export declare const DihedralParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
-    transparentBackfaces: PD.Select<string>;
+    transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     lineSizeAttenuation: PD.BooleanParam;

package/lib/mol-repr/shape/loci/label.d.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-24 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
  */
 import { Loci } from '../../../mol-model/loci';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
@@ -15,6 +16,8 @@ export interface LabelData {
 export declare const LabelParams: {
     scaleByRadius: PD.BooleanParam;
     visuals: PD.MultiSelect<"text">;
+    snapshotKey: PD.Text<string>;
+    tooltip: PD.Text<string>;
     borderWidth: PD.Numeric;
     customText: PD.Text<string>;
     textColor: PD.Color;

package/lib/mol-repr/shape/loci/label.js

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-24 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
  */
 import { __assign } from "tslib";
 import { Loci } from '../../../mol-model/loci';
@@ -16,9 +17,9 @@ import { lociLabel } from '../../../mol-theme/label';
 import { LociLabelTextParams } from './common';
 var TextParams = __assign({}, LociLabelTextParams);
 var LabelVisuals = {
-    'text': function (ctx, getParams) { return ShapeRepresentation(getTextShape, Text.Utils, { modifyState: function (s) { return (__assign(__assign({}, s), { pickable: false })); } }); },
+    'text': function (ctx, getParams) { return ShapeRepresentation(getTextShape, Text.Utils); },
 };
-export var LabelParams = __assign(__assign({}, TextParams), { scaleByRadius: PD.Boolean(true), visuals: PD.MultiSelect(['text'], PD.objectToOptions(LabelVisuals)) });
+export var LabelParams = __assign(__assign({}, TextParams), { scaleByRadius: PD.Boolean(true), visuals: PD.MultiSelect(['text'], PD.objectToOptions(LabelVisuals)), snapshotKey: PD.Text('', { isEssential: true, disableInteractiveUpdates: true, description: 'Activate the snapshot with the provided key when clicking on the label' }), tooltip: PD.Text('', { isEssential: true, multiline: true, disableInteractiveUpdates: true, placeholder: 'Tooltip', description: 'Tooltip text to be displayed when hovering over the label' }) });
 //
 var tmpSphere = Sphere3D();
 function label(info, condensed) {
@@ -44,15 +45,21 @@ function buildText(data, props, text) {
     return builder.getText();
 }
 function getTextShape(ctx, data, props, shape) {
+    var _a, _b;
     var text = buildText(data, props, shape && shape.geometry);
     var name = getLabelName(data);
+    var tooltip = (_b = (_a = props.tooltip) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
     var customLabel = props.customText.trim();
-    var getLabel = customLabel
-        ? function (groupId) {
-            return customLabel;
-        } : function (groupId) {
-        return label(data.infos[groupId]);
-    };
+    var getLabel;
+    if (tooltip) {
+        getLabel = function (_) { return tooltip; };
+    }
+    else if (customLabel) {
+        getLabel = function (_) { return customLabel; };
+    }
+    else {
+        getLabel = function (groupId) { return label(data.infos[groupId]); };
+    }
     return Shape.create(name, data, text, function () { return props.textColor; }, function () { return props.textSize; }, getLabel);
 }
 export function LabelRepresentation(ctx, getParams) {