molstar 4.3.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/base.scss

@@ -1,38 +1,38 @@
-
-@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;
-    }
-
-    .msp-plugin-init-error {
-        white-space: pre;
-        margin: $control-spacing;
-    }
-
-    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;
+    }
+
+    .msp-plugin-init-error {
+        white-space: pre;
+        margin: $control-spacing;
+    }
+
+    background: $default-background;
 }