molstar 4.2.0 → 4.4.0

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

@@ -1,8 +1,9 @@
 /**
- * Copyright (c) 2018-2020 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>
+ * @author Neli Fonseca <neli@ebi.ac.uk>
  */
 import * as CCP4 from '../../mol-io/reader/ccp4/parser';
 import { CIF } from '../../mol-io/reader/cif';
@@ -21,8 +22,11 @@ import { ColorNames } from '../../mol-util/color/names';
 import { assertUnreachable } from '../../mol-util/type-helpers';
 import { parsePrmtop } from '../../mol-io/reader/prmtop/parser';
 import { parseTop } from '../../mol-io/reader/top/parser';
+import { ungzip } from '../../mol-util/zip/zip';
+import { utf8Read } from '../../mol-io/common/utf8';
 export { Download };
 export { DownloadBlob };
+export { DeflateData };
 export { RawData };
 export { ReadFile };
 export { ParseBlob };
@@ -128,6 +132,31 @@ const DownloadBlob = PluginStateTransform.BuiltIn({
     //     // return StateTransformer.UpdateResult.Unchanged;
     // }
 });
+const DeflateData = PluginStateTransform.BuiltIn({
+    name: 'defalate-data',
+    display: { name: 'Deflate', description: 'Deflate compressed data' },
+    params: {
+        method: PD.Select('gzip', [['gzip', 'gzip']]), // later on we might have to add say brotli
+        isString: PD.Boolean(false),
+        stringEncoding: PD.Optional(PD.Select('utf-8', [['utf-8', 'UTF8']])),
+        label: PD.Optional(PD.Text(''))
+    },
+    from: [SO.Data.Binary],
+    to: [SO.Data.Binary, SO.Data.String]
+})({
+    apply({ a, params }, plugin) {
+        return Task.create('Gzip', async (ctx) => {
+            const decompressedData = await ungzip(ctx, a.data);
+            const label = params.label ? params.label : a.label;
+            // handle decoding based on stringEncoding param
+            if (params.isString) {
+                const textData = utf8Read(decompressedData, 0, decompressedData.length);
+                return new SO.Data.String(textData, { label });
+            }
+            return new SO.Data.Binary(decompressedData, { label });
+        });
+    }
+});
 const RawData = PluginStateTransform.BuiltIn({
     name: 'raw-data',
     display: { name: 'Raw Data', description: 'Raw data supplied by value.' },

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

@@ -172,6 +172,7 @@ declare const ModelUnitcell3D: StateTransformer<SO.Molecule.Model, SO.Shape.Repr
     flipSided: boolean;
     flatShaded: boolean;
     ignoreLight: boolean;
+    celShaded: boolean;
     xrayShaded: boolean | "inverted";
     transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
@@ -200,6 +201,7 @@ declare const StructureBoundingBox3D: StateTransformer<SO.Molecule.Structure, SO
     flipSided: boolean;
     flatShaded: boolean;
     ignoreLight: boolean;
+    celShaded: boolean;
     xrayShaded: boolean | "inverted";
     transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
@@ -320,6 +322,7 @@ declare const StructureSelectionsAngle3D: StateTransformer<SO.Molecule.Structure
     doubleSided: boolean;
     flipSided: boolean;
     flatShaded: boolean;
+    celShaded: boolean;
     xrayShaded: boolean | "inverted";
     transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
@@ -377,6 +380,7 @@ declare const StructureSelectionsDihedral3D: StateTransformer<SO.Molecule.Struct
     doubleSided: boolean;
     flipSided: boolean;
     flatShaded: boolean;
+    celShaded: boolean;
     xrayShaded: boolean | "inverted";
     transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
@@ -442,6 +446,7 @@ declare const StructureSelectionsOrientation3D: StateTransformer<SO.Molecule.Str
     flipSided: boolean;
     flatShaded: boolean;
     ignoreLight: boolean;
+    celShaded: boolean;
     xrayShaded: boolean | "inverted";
     transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;
@@ -473,6 +478,7 @@ declare const StructureSelectionsPlane3D: StateTransformer<SO.Molecule.Structure
     flipSided: boolean;
     flatShaded: boolean;
     ignoreLight: boolean;
+    celShaded: boolean;
     xrayShaded: boolean | "inverted";
     transparentBackfaces: "on" | "off" | "opaque";
     bumpFrequency: number;

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

@@ -63,10 +63,11 @@ export class CollapsableControls extends PluginUIComponent {
         var _a;
         if (this.state.isHidden)
             return null;
+        const divid = this.state.header.toLowerCase().replace(/\s/g, '');
         const wrapClass = this.state.isCollapsed
             ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
             : 'msp-transform-wrapper';
-        return _jsxs("div", { className: wrapClass, children: [_jsx("div", { className: 'msp-transform-header', children: _jsxs(Button, { icon: this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: this.state.brand ? `msp-transform-header-brand msp-transform-header-brand-${this.state.brand.accent}` : void 0, title: `Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`, children: [_jsx(Icon, { svg: (_a = this.state.brand) === null || _a === void 0 ? void 0 : _a.svg, inline: true }), this.state.header, _jsx("small", { style: { margin: '0 6px' }, children: this.state.isCollapsed ? '' : this.state.description })] }) }), !this.state.isCollapsed && this.renderControls()] });
+        return _jsxs("div", { className: wrapClass, children: [_jsx("div", { id: divid, className: 'msp-transform-header', children: _jsxs(Button, { icon: this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: this.state.brand ? `msp-transform-header-brand msp-transform-header-brand-${this.state.brand.accent}` : void 0, title: `Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`, children: [_jsx(Icon, { svg: (_a = this.state.brand) === null || _a === void 0 ? void 0 : _a.svg, inline: true }), this.state.header, _jsx("small", { style: { margin: '0 6px' }, children: this.state.isCollapsed ? '' : this.state.description })] }) }), !this.state.isCollapsed && this.renderControls()] });
     }
     constructor(props, context) {
         super(props, context);

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

@@ -77,7 +77,12 @@ export declare function SkipPreviousSvg(): import("react/jsx-runtime").JSX.Eleme
 export declare function StopSvg(): import("react/jsx-runtime").JSX.Element;
 export declare function SubscriptionsOutlinedSvg(): import("react/jsx-runtime").JSX.Element;
 export declare function SwapHorizSvg(): import("react/jsx-runtime").JSX.Element;
+export declare function TourSvg(): import("react/jsx-runtime").JSX.Element;
 export declare function TuneSvg(): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipTextSvg(): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipTextOutlineSvg(): import("react/jsx-runtime").JSX.Element;
+export declare function PlusBoxSvg(): import("react/jsx-runtime").JSX.Element;
+export declare function MinusBoxSvg(): import("react/jsx-runtime").JSX.Element;
 export declare function VisibilityOffOutlinedSvg(): import("react/jsx-runtime").JSX.Element;
 export declare function VisibilityOutlinedSvg(): import("react/jsx-runtime").JSX.Element;
 export declare function WarningSvg(): import("react/jsx-runtime").JSX.Element;

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

@@ -141,9 +141,19 @@ const _SubscriptionsOutlined = _jsx("svg", { width: '24px', height: '24px', view
 export function SubscriptionsOutlinedSvg() { return _SubscriptionsOutlined; }
 const _SwapHoriz = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z' }) });
 export function SwapHorizSvg() { return _SwapHoriz; }
+const _Tour = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M21 4H7V2H5v20h2v-8h14l-2-5zm-6 5c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2' }) });
+export function TourSvg() { return _Tour; }
 const _Tune = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z' }) });
 export function TuneSvg() { return _Tune; }
 const _VisibilityOffOutlined = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z' }) });
+const _TooltipText = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M6 9h12v2H6zm8 5H6v-2h8zm4-6H6V6h12z' }) });
+export function TooltipTextSvg() { return _TooltipText; }
+const _TooltipTextOutline = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h8v2H6zm0-3h12v2H6zm0-3h12v2H6z' }) });
+export function TooltipTextOutlineSvg() { return _TooltipTextOutline; }
+const _PlusBox = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4z' }) });
+export function PlusBoxSvg() { return _PlusBox; }
+const _MinusBox = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z' }) });
+export function MinusBoxSvg() { return _MinusBox; }
 export function VisibilityOffOutlinedSvg() { return _VisibilityOffOutlined; }
 const _VisibilityOutlined = _jsx("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z' }) });
 export function VisibilityOutlinedSvg() { return _VisibilityOutlined; }

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

@@ -107,7 +107,7 @@ export declare class LineGraphControl extends React.PureComponent<ParamProps<PD.
     private pointToLabel;
     onHover: (point?: Vec2) => void;
     onDrag: (point: Vec2) => void;
-    onChange: (value: PD.LineGraph['defaultValue']) => void;
+    onChange: (value: PD.LineGraph["defaultValue"]) => void;
     toggleExpanded: (e: React.MouseEvent<HTMLButtonElement>) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
@@ -196,7 +196,7 @@ export declare class ColorListControl extends React.PureComponent<ParamProps<PD.
 }> {
     state: {
         showHelp: boolean;
-        show: "presets" | "edit" | undefined;
+        show: "edit" | "presets" | undefined;
     };
     protected update(value: PD.ColorList['defaultValue']): void;
     toggleEdit: () => void;
@@ -215,7 +215,7 @@ export declare class OffsetColorListControl extends React.PureComponent<ParamPro
 }> {
     state: {
         showHelp: boolean;
-        show: "presets" | "edit" | undefined;
+        show: "edit" | "presets" | undefined;
     };
     protected update(value: PD.ColorList['defaultValue']): void;
     toggleEdit: () => void;

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

@@ -180,7 +180,7 @@ export function ViewportSnapshotDescription() {
     const e = plugin.managers.snapshot.getEntry(current);
     if (!((_a = e === null || e === void 0 ? void 0 : e.description) === null || _a === void 0 ? void 0 : _a.trim()))
         return null;
-    return _jsx("div", { className: 'msp-snapshot-description-wrapper', children: _jsx(Markdown, { skipHtml: true, components: { a: MarkdownAnchor }, children: e.description }) });
+    return _jsx("div", { id: 'snapinfo', className: 'msp-snapshot-description-wrapper', children: _jsx(Markdown, { skipHtml: true, components: { a: MarkdownAnchor }, children: e.description }) });
 }
 function MarkdownAnchor({ href, children, element }) {
     const plugin = React.useContext(PluginReactContext);

package/lib/mol-plugin-ui/left-panel.d.ts

@@ -4,7 +4,6 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-/// <reference types="react" />
 import { LeftPanelTabName } from '../mol-plugin/layout';
 import { PluginUIComponent } from './base';
 export declare class CustomImportControls extends PluginUIComponent<{

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

@@ -200,9 +200,10 @@ export class ControlsWrapper extends PluginUIComponent {
 }
 export class DefaultViewport extends PluginUIComponent {
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || ViewportControls;
-        return _jsxs(_Fragment, { children: [_jsx(Viewport, {}), _jsxs("div", { className: 'msp-viewport-top-left-controls', children: [_jsx(AnimationViewportControls, {}), _jsx(TrajectoryViewportControls, {}), _jsx(StateSnapshotViewportControls, {}), _jsx(ViewportSnapshotDescription, {})] }), _jsx(SelectionViewportControls, {}), _jsx(VPControls, {}), _jsx(BackgroundTaskProgress, {}), _jsxs("div", { className: 'msp-highlight-toast-wrapper', children: [_jsx(LociLabels, {}), _jsx(Toasts, {})] })] });
+        const SnapshotDescription = ((_d = (_c = this.plugin.spec.components) === null || _c === void 0 ? void 0 : _c.viewport) === null || _d === void 0 ? void 0 : _d.snapshotDescription) || ViewportSnapshotDescription;
+        return _jsxs(_Fragment, { children: [_jsx(Viewport, {}), _jsxs("div", { className: 'msp-viewport-top-left-controls', children: [_jsx(AnimationViewportControls, {}), _jsx(TrajectoryViewportControls, {}), _jsx(StateSnapshotViewportControls, {}), _jsx(SnapshotDescription, {})] }), _jsx(SelectionViewportControls, {}), _jsx(VPControls, {}), _jsx(BackgroundTaskProgress, {}), _jsxs("div", { className: 'msp-highlight-toast-wrapper', children: [_jsx(LociLabels, {}), _jsx(Toasts, {})] })] });
     }
 }
 export class Log extends PluginUIComponent {

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

@@ -345,6 +345,12 @@
         text-align: left;
         color: color-lower-contrast($font-color, 15%);
     }
+
+    > p {
+        padding: (math.div($control-spacing, 2)) $control-spacing;
+        text-align: left;
+        color: color-lower-contrast($font-color, 15%);
+    }
 }
 
 .msp-help-description {

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

@@ -1,10 +1,9 @@
 /**
- * Copyright (c) 2018-2021 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>
  */
-/// <reference types="react" />
 import { StateTransformParameters } from '../mol-plugin-ui/state/common';
 import { PluginSpec } from '../mol-plugin/spec';
 import { StateAction, StateTransformer } from '../mol-state';
@@ -14,13 +13,14 @@ interface PluginUISpec extends PluginSpec {
     components?: {
         controls?: PluginUISpec.LayoutControls;
         remoteState?: 'none' | 'default';
-        structureTools?: React.ComponentClass;
+        structureTools?: React.ComponentClass | React.FC;
         viewport?: {
-            view?: React.ComponentClass;
-            controls?: React.ComponentClass;
+            view?: React.ComponentClass | React.FC;
+            controls?: React.ComponentClass | React.FC;
+            snapshotDescription?: React.ComponentClass | React.FC;
         };
         sequenceViewer?: {
-            view?: React.ComponentClass;
+            view?: React.ComponentClass | React.FC;
         };
         hideTaskOverlay?: boolean;
         disableDragOverlay?: boolean;
@@ -28,10 +28,10 @@ interface PluginUISpec extends PluginSpec {
 }
 declare namespace PluginUISpec {
     interface LayoutControls {
-        top?: React.ComponentClass | 'none';
-        left?: React.ComponentClass | 'none';
-        right?: React.ComponentClass | 'none';
-        bottom?: React.ComponentClass | 'none';
+        top?: React.ComponentClass | React.FC | 'none';
+        left?: React.ComponentClass | React.FC | 'none';
+        right?: React.ComponentClass | React.FC | 'none';
+        bottom?: React.ComponentClass | React.FC | 'none';
     }
 }
 export declare const DefaultPluginUISpec: () => PluginUISpec;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 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-ui/state/apply-action.d.ts

@@ -37,7 +37,7 @@ declare class ApplyActionControl extends TransformControlBase<ApplyActionControl
     getTransformerId(): import("../../mol-state").StateTransformer.Id;
     getHeader(): "none" | {
         readonly name: string;
-        readonly description?: string | undefined;
+        readonly description?: string;
     };
     canApply(): boolean;
     canAutoApply(): boolean;

package/lib/mol-plugin-ui/state/update-transform.d.ts

@@ -30,7 +30,7 @@ declare class UpdateTransformControl extends TransformControlBase<UpdateTransfor
     getTransformerId(): StateTransformer.Id;
     getHeader(): "none" | {
         readonly name: string;
-        readonly description?: string | undefined;
+        readonly description?: string;
     };
     canApply(): boolean;
     applyText(): "Update" | "Nothing to Update";

package/lib/mol-plugin-ui/structure/quick-styles.d.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2022-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2022-2024 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 { CollapsableControls, PurePluginUIComponent } from '../base';
 import { MagicWandSvg } from '../controls/icons';

package/lib/mol-plugin-ui/structure/quick-styles.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Copyright (c) 2022-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2022-2024 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 { PresetStructureRepresentations } from '../../mol-plugin-state/builder/structure/representation-preset';
 import { Color } from '../../mol-util/color';
@@ -61,6 +62,7 @@ export class QuickStyles extends PurePluginUIComponent {
                             radius: 5,
                             bias: 0.8,
                             blurKernelSize: 15,
+                            blurDepthBias: 0.5,
                             samples: 32,
                             resolutionScale: 1,
                             color: Color(0x000000),
@@ -97,6 +99,7 @@ export class QuickStyles extends PurePluginUIComponent {
                                 radius: 5,
                                 bias: 0.8,
                                 blurKernelSize: 15,
+                                blurDepthBias: 0.5,
                                 samples: 32,
                                 resolutionScale: 1,
                                 color: Color(0x000000),
@@ -108,6 +111,6 @@ export class QuickStyles extends PurePluginUIComponent {
         }
     }
     render() {
-        return _jsxs("div", { className: 'msp-flex-row', children: [_jsx(Button, { noOverflow: true, title: 'Applies default representation preset. Set outline and occlusion effects to defaults.', onClick: () => this.default(), style: { width: 'auto' }, children: "Default" }), _jsx(Button, { noOverflow: true, title: 'Applies no representation preset. Enables outline and occlusion effects. Enables ignore-light representation parameter.', onClick: () => this.stylized(), style: { width: 'auto' }, children: "Stylized" }), _jsx(Button, { noOverflow: true, title: 'Applies illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.', onClick: () => this.illustrative(), style: { width: 'auto' }, children: "Illustrative" })] });
+        return _jsxs("div", { className: 'msp-flex-row', children: [_jsx(Button, { noOverflow: true, title: 'Applies default representation preset and sets outline and occlusion effects to default', onClick: () => this.default(), style: { width: 'auto' }, children: "Default" }), _jsx(Button, { noOverflow: true, title: 'Applies illustrative representation preset and Stylize it', onClick: () => this.illustrative(), style: { width: 'auto' }, children: "Illustrative" }), _jsx(Button, { noOverflow: true, title: 'Does not change representation, enables outline and occlusion effects, enables ignore-light representation parameter', onClick: () => this.stylized(), style: { width: 'auto' }, children: "Stylize Current" })] });
     }
 }

package/lib/mol-plugin-ui/structure/selection.d.ts

@@ -29,8 +29,8 @@ interface StructureSelectionActionsControlsState {
 }
 export declare class StructureSelectionActionsControls extends PluginUIComponent<{}, StructureSelectionActionsControlsState> {
     state: {
-        action: "help" | "theme" | StructureSelectionModifier | "add-component" | undefined;
-        helper: "residue-list" | undefined;
+        action: StructureSelectionActionsControlsState["action"];
+        helper: StructureSelectionActionsControlsState["helper"];
         isEmpty: boolean;
         isBusy: boolean;
         canUndo: boolean;

package/lib/mol-plugin-ui/viewport/simple-settings.js

@@ -53,6 +53,7 @@ const SimpleSettingsParams = {
         occlusion: Canvas3DParams.postprocessing.params.occlusion,
         shadow: Canvas3DParams.postprocessing.params.shadow,
         outline: Canvas3DParams.postprocessing.params.outline,
+        dof: Canvas3DParams.postprocessing.params.dof,
         fog: Canvas3DParams.cameraFog,
     }, { isFlat: true }),
     clipping: PD.Group({
@@ -126,6 +127,7 @@ const SimpleSettingsMapping = ParamMapping({
                 occlusion: canvas.postprocessing.occlusion,
                 shadow: canvas.postprocessing.shadow,
                 outline: canvas.postprocessing.outline,
+                dof: canvas.postprocessing.dof,
                 fog: canvas.cameraFog,
             },
             clipping: {
@@ -159,6 +161,7 @@ const SimpleSettingsMapping = ParamMapping({
         canvas.multiSample = s.advanced.multiSample;
         canvas.hiZ = s.advanced.hiZ;
         canvas.postprocessing.sharpening = s.advanced.sharpening;
+        canvas.postprocessing.dof = s.lighting.dof;
         props.layout = s.layout;
         props.pixelScale = s.advanced.pixelScale;
         props.transparency = s.advanced.transparency;

package/lib/mol-repr/representation.d.ts

@@ -68,7 +68,7 @@ export declare class RepresentationRegistry<D, S extends Representation.State> {
     private _name;
     get default(): {
         name: string;
-        provider: RepresentationProvider<D, any, any, string>;
+        provider: RepresentationProvider<D, any, any>;
     };
     get types(): [string, string][];
     constructor();
@@ -78,11 +78,11 @@ export declare class RepresentationRegistry<D, S extends Representation.State> {
     get<P extends PD.Params>(name: string): RepresentationProvider<D, P, S>;
     get list(): {
         name: string;
-        provider: RepresentationProvider<D, any, any, string>;
+        provider: RepresentationProvider<D, any, any>;
     }[];
     getApplicableList(data: D): {
         name: string;
-        provider: RepresentationProvider<D, any, any, string>;
+        provider: RepresentationProvider<D, any, any>;
     }[];
     getApplicableTypes(data: D): [string, string][];
     clear(): void;

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

@@ -62,6 +62,7 @@ export declare const AngleParams: {
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;

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

@@ -62,6 +62,7 @@ export declare const DihedralParams: {
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;

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

@@ -18,6 +18,7 @@ export declare const OrientationParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;

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

@@ -17,6 +17,7 @@ export declare const PlaneParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;

package/lib/mol-repr/shape/model/unitcell.d.ts

@@ -20,6 +20,7 @@ export declare const UnitcellParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;

package/lib/mol-repr/structure/complex-visual.d.ts

@@ -48,6 +48,7 @@ export declare const ComplexMeshParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
@@ -85,6 +86,7 @@ export declare const ComplexSpheresParams: {
     sizeFactor: PD.Numeric;
     doubleSided: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     solidInterior: PD.BooleanParam;
@@ -134,6 +136,7 @@ export declare const ComplexCylindersParams: {
     sizeAspectRatio: PD.Numeric;
     doubleSided: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     solidInterior: PD.BooleanParam;
@@ -252,6 +255,7 @@ export declare const ComplexDirectVolumeParams: {
     unitKinds: PD.MultiSelect<"spheres" | "gaussians" | "atomic">;
     includeParent: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     controlPoints: PD.LineGraph;
     stepsPerCell: PD.Numeric;
@@ -290,6 +294,7 @@ export declare const ComplexTextureMeshParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;

package/lib/mol-repr/structure/params.d.ts

@@ -17,6 +17,7 @@ export declare const StructureMeshParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;
@@ -49,6 +50,7 @@ export declare const StructureSpheresParams: {
     sizeFactor: PD.Numeric;
     doubleSided: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     solidInterior: PD.BooleanParam;
@@ -93,6 +95,7 @@ export declare const StructureCylindersParams: {
     sizeAspectRatio: PD.Numeric;
     doubleSided: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     solidInterior: PD.BooleanParam;
@@ -224,6 +227,7 @@ export declare const StructureTextParams: {
 export type StructureTextParams = typeof StructureTextParams;
 export declare const StructureDirectVolumeParams: {
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     controlPoints: PD.LineGraph;
     stepsPerCell: PD.Numeric;
@@ -257,6 +261,7 @@ export declare const StructureTextureMeshParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
+    celShaded: PD.BooleanParam;
     xrayShaded: PD.Select<boolean | "inverted">;
     transparentBackfaces: PD.Select<"on" | "off" | "opaque">;
     bumpFrequency: PD.Numeric;