molstar 4.2.0 → 4.4.0

package/lib/commonjs/apps/mesoscale-explorer/ui/states.js

@@ -1,18 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SnapshotControls = exports.SessionControls = exports.openState = exports.ExampleControls = exports.LoaderControls = exports.DatabaseControls = exports.LoadModel = exports.LoadExample = exports.LoadDatabase = exports.loadPdbDev = exports.loadPdb = exports.loadUrl = exports.loadExampleEntry = void 0;
+exports.MesoQuickStyles = exports.MesoQuickStylesControls = exports.ExplorerInfo = exports.SnapshotControls = exports.SessionControls = exports.ExampleControls = exports.LoaderControls = exports.DatabaseControls = exports.LoadModel = exports.LoadExample = exports.LoadDatabase = void 0;
+exports.loadExampleEntry = loadExampleEntry;
+exports.loadUrl = loadUrl;
+exports.loadPdb = loadPdb;
+exports.loadPdbDev = loadPdbDev;
+exports.openState = openState;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("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>
  */
+const react_markdown_1 = tslib_1.__importDefault(require("react-markdown"));
 const mmcif_1 = require("../../../mol-model-formats/structure/mmcif");
 const trajectory_1 = require("../../../mol-plugin-state/formats/trajectory");
 const objects_1 = require("../../../mol-plugin-state/objects");
-const base_1 = require("../../../mol-plugin-ui/base");
 const common_1 = require("../../../mol-plugin-ui/controls/common");
 const icons_1 = require("../../../mol-plugin-ui/controls/icons");
+const base_1 = require("../../../mol-plugin-ui/base");
 const apply_action_1 = require("../../../mol-plugin-ui/state/apply-action");
 const snapshots_1 = require("../../../mol-plugin-ui/state/snapshots");
 const commands_1 = require("../../../mol-plugin/commands");
@@ -78,6 +85,7 @@ function adjustPluginProps(ctx) {
                     radius: 5,
                     bias: 1,
                     blurKernelSize: 11,
+                    blurDepthBias: 0.5,
                     resolutionScale: 1,
                     color: (0, color_1.Color)(0x000000),
                 }
@@ -152,7 +160,6 @@ async function loadExampleEntry(ctx, entry) {
         link: entry.link,
     });
 }
-exports.loadExampleEntry = loadExampleEntry;
 async function loadUrl(ctx, url, type) {
     if (type === 'molx' || type === 'molj') {
         await commands_1.PluginCommands.State.Snapshots.OpenUrl(ctx, { url, type });
@@ -164,14 +171,12 @@ async function loadUrl(ctx, url, type) {
         await createHierarchy(ctx, data.ref);
     }
 }
-exports.loadUrl = loadUrl;
 async function loadPdb(ctx, id) {
     await reset(ctx);
     const url = `https://models.rcsb.org/${id.toUpperCase()}.bcif`;
     const data = await ctx.builders.data.download({ url, isBinary: true });
     await createHierarchy(ctx, data.ref);
 }
-exports.loadPdb = loadPdb;
 async function loadPdbDev(ctx, id) {
     await reset(ctx);
     const nId = id.toUpperCase().startsWith('PDBDEV_') ? id : `PDBDEV_${id.padStart(8, '0')}`;
@@ -179,7 +184,6 @@ async function loadPdbDev(ctx, id) {
     const data = await ctx.builders.data.download({ url, isBinary: true });
     await createHierarchy(ctx, data.ref);
 }
-exports.loadPdbDev = loadPdbDev;
 //
 exports.LoadDatabase = mol_state_1.StateAction.build({
     display: { name: 'Database', description: 'Load from Database' },
@@ -256,7 +260,7 @@ class DatabaseControls extends base_1.PluginUIComponent {
     componentDidMount() {
     }
     render() {
-        return (0, jsx_runtime_1.jsx)("div", { style: { margin: '5px' }, children: (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: this.plugin.state.data, action: exports.LoadDatabase, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
+        return (0, jsx_runtime_1.jsx)("div", { id: 'database', style: { margin: '5px' }, children: (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: this.plugin.state.data, action: exports.LoadDatabase, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
     }
 }
 exports.DatabaseControls = DatabaseControls;
@@ -264,7 +268,7 @@ class LoaderControls extends base_1.PluginUIComponent {
     componentDidMount() {
     }
     render() {
-        return (0, jsx_runtime_1.jsx)("div", { style: { margin: '5px' }, children: (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: this.plugin.state.data, action: exports.LoadModel, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
+        return (0, jsx_runtime_1.jsx)("div", { id: 'loader', style: { margin: '5px' }, children: (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: this.plugin.state.data, action: exports.LoadModel, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
     }
 }
 exports.LoaderControls = LoaderControls;
@@ -272,7 +276,7 @@ class ExampleControls extends base_1.PluginUIComponent {
     componentDidMount() {
     }
     render() {
-        return (0, jsx_runtime_1.jsx)("div", { style: { margin: '5px' }, children: (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: this.plugin.state.data, action: exports.LoadExample, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
+        return (0, jsx_runtime_1.jsx)("div", { id: 'example', style: { margin: '5px' }, children: (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: this.plugin.state.data, action: exports.LoadExample, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
     }
 }
 exports.ExampleControls = ExampleControls;
@@ -290,7 +294,6 @@ async function openState(ctx, file) {
     customState.stateRef = cell.transform.ref;
     customState.graphicsMode = ((_a = cell.obj) === null || _a === void 0 ? void 0 : _a.data.graphics) || customState.graphicsMode;
 }
-exports.openState = openState;
 class SessionControls extends base_1.PluginUIComponent {
     constructor() {
         super(...arguments);
@@ -306,13 +309,474 @@ class SessionControls extends base_1.PluginUIComponent {
         };
     }
     render() {
-        return (0, jsx_runtime_1.jsx)("div", { style: { margin: '5px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.GetAppSvg, onClick: this.downloadToFileZip, title: 'Download the state.', children: "Download" }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.OpenInBrowserSvg, inline: true }), " Open ", (0, jsx_runtime_1.jsx)("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' })] })] }) });
+        return (0, jsx_runtime_1.jsx)("div", { id: 'session', style: { margin: '5px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.GetAppSvg, onClick: this.downloadToFileZip, title: 'Download the state.', children: "Download" }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.OpenInBrowserSvg, inline: true }), " Open ", (0, jsx_runtime_1.jsx)("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' })] })] }) });
     }
 }
 exports.SessionControls = SessionControls;
 class SnapshotControls extends base_1.PluginUIComponent {
     render() {
-        return (0, jsx_runtime_1.jsxs)("div", { style: { margin: '5px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotList, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshots, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: 'Snapshot Options', initiallyExpanded: false, children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotParams, {}) }) })] });
+        return (0, jsx_runtime_1.jsxs)("div", { style: { margin: '5px' }, children: [(0, jsx_runtime_1.jsx)("div", { id: 'snaplist', style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotList, {}) }), (0, jsx_runtime_1.jsx)("div", { id: 'snap', style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshots, {}) }), (0, jsx_runtime_1.jsx)("div", { id: 'snapoption', style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: 'Snapshot Options', initiallyExpanded: false, children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotParams, {}) }) })] });
     }
 }
 exports.SnapshotControls = SnapshotControls;
+class ExplorerInfo extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isDisabled: false,
+            showHelp: false
+        };
+        this.setupDriver = () => {
+            // setup the tour of the interface
+            const driver = this.plugin.customState.driver;
+            if (!driver)
+                return;
+            driver.setSteps([
+                // Left panel
+                { element: '#explorerinfo', popover: { title: 'Explorer Header Info', description: 'This section displays the explorer header with version information, documentation access, and tour navigation. Use the right and left arrow keys to navigate the tour.', side: 'left', align: 'start' } },
+                { element: '#database', popover: { title: 'Import from PDB', description: 'Load structures directly from PDB and PDB-DEV databases.', side: 'bottom', align: 'start' } },
+                { element: '#loader', popover: { title: 'Import from File', description: 'Load local files (.molx, .molj, .zip, .cif, .bcif) using this option.', side: 'bottom', align: 'start' } },
+                { element: '#example', popover: { title: 'Example Models and Tours', description: 'Select from a range of example models and tours provided.', side: 'left', align: 'start' } },
+                { element: '#session', popover: { title: 'Session Management', description: 'Download the current session in .molx format.', side: 'top', align: 'start' } },
+                { element: '#snaplist', popover: { title: 'Snapshot List', description: 'View and manage the list of snapshots. You can reorder them and edit their titles, keys, and descriptions. Snapshot states cannot be edited.', side: 'right', align: 'start' } },
+                { element: '#snap', popover: { title: 'Add Snapshot', description: 'Save the current state (e.g., camera position, color, visibility, etc.) in a snapshot with an optional title, key, and description.', side: 'right', align: 'start' } },
+                { element: '#snapoption', popover: { title: 'Snapshot Options', description: 'These options are saved in the snapshot. Set them before adding a snapshot to see their effect during animation playback.', side: 'right', align: 'start' } },
+                { element: '#exportanimation', popover: { title: 'Export Animation', description: 'Create movies or scenes with rocking, rotating, or snapshots animations.', side: 'right', align: 'start' } },
+                { element: '#viewportsettings', popover: { title: 'Viewport Settings', description: 'Advanced settings for the renderer and trackball.', side: 'right', align: 'start' } },
+                // Viewport
+                { element: '#snapinfo', popover: { title: 'Snapshot Description', description: 'Save the current state (e.g., camera position, color, visibility, etc.) in a snapshot with an optional title, key, and description.', side: 'right', align: 'start' } },
+                { element: '#snapinfoctrl', popover: { title: 'Snapshot Description Control', description: 'Control the visibility and text size of the snapshot description widget.', side: 'right', align: 'start' } },
+                // Right panel
+                { element: '#modelinfo', popover: { title: 'Model Information', description: 'Summary information about the model, if available.', side: 'right', align: 'start' } },
+                { element: '#selestyle', popover: { title: 'Selection Style', description: 'Choose the rendering style for entity selection accessed via Shift/Ctrl mouse. Options include: Color & Outline, Color, Outline.', side: 'right', align: 'start' } },
+                { element: '#seleinfo', popover: { title: 'Selection List', description: 'View the current list of selected entities.', side: 'right', align: 'start' } },
+                { element: '#measurements', popover: { title: 'Measurements', description: 'Use this widget to create labels, measure distances, angles, dihedral orientations, and planes for the selected entities.', side: 'right', align: 'start' } },
+                { element: '#quickstyles', popover: { title: 'Quick Styles', description: 'Change between a selection of style presets.', side: 'right', align: 'start' } },
+                { element: '#graphicsquality', popover: { title: 'Graphics Quality', description: 'Adjust the overall graphics quality. Lower quality improves performance. Options are: Ultra, Quality (Default), Balanced, Performance, Custom. Custom settings use the Culling & LOD values set in the Tree.', side: 'right', align: 'start' } },
+                { element: '#searchtree', popover: { title: 'Search', description: 'Filter the entity tree based on your queries.', side: 'right', align: 'start' } },
+                { element: '#grouptree', popover: { title: 'Group By', description: 'Change the grouping of the hierarchy tree, e.g., group by instance or by compartment.', side: 'right', align: 'start' } },
+                { element: '#tree', popover: { title: 'Tree Hierarchy', description: 'View the hierarchical tree of entity types in the model.', side: 'right', align: 'start' } },
+                { element: '#focusinfo', popover: { title: 'Selection Description', description: 'Detailed information about the current selection, if present in the loaded file.', side: 'right', align: 'start' } },
+                { popover: { title: 'Happy Exploring!', description: 'That’s all! Go ahead and start exploring or creating mesoscale tours.' } }
+            ]);
+            driver.refresh();
+        };
+        this.openHelp = () => {
+            // open a new page with the documentation
+            window.open('https://molstar.org/me/docs', '_blank');
+        };
+        this.toggleHelp = () => {
+            const driver = this.plugin.customState.driver;
+            if (!driver || !driver.hasNextStep()) {
+                this.setupDriver();
+            }
+            this.setState({ showHelp: !this.state.showHelp }, () => {
+                if (this.state.showHelp && driver) {
+                    driver.drive(); // start at 0
+                }
+            });
+        };
+    }
+    componentDidMount() {
+        this.subscribe(this.plugin.state.data.behaviors.isUpdating, v => {
+            this.setState({ isDisabled: v });
+        });
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
+            if (!this.state.isDisabled && state_1.MesoscaleState.has(this.plugin) && state_1.MesoscaleState.ref(this.plugin) === e.ref) {
+                this.forceUpdate();
+            }
+        });
+    }
+    render() {
+        const driver = this.plugin.customState.driver;
+        if (!driver)
+            return;
+        const legend = `## Welcome to Mol* Mesoscale Explorer`;
+        const help = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: false, small: true, onClick: this.openHelp, title: 'Open the Documentation' });
+        const tour = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TourSvg, toggleState: false, small: true, onClick: this.toggleHelp, title: 'Start the interactive tour' });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { id: 'explorerinfo', style: { paddingLeft: 4 }, className: 'msp-help-text', children: [(0, jsx_runtime_1.jsx)(react_markdown_1.default, { children: legend }), tour, help] }) });
+    }
+}
+exports.ExplorerInfo = ExplorerInfo;
+class MesoQuickStylesControls extends base_1.CollapsableControls {
+    defaultState() {
+        return {
+            isCollapsed: true,
+            header: 'Quick Styles',
+            brand: { accent: 'gray', svg: icons_1.MagicWandSvg }
+        };
+    }
+    renderControls() {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MesoQuickStyles, {}) });
+    }
+}
+exports.MesoQuickStylesControls = MesoQuickStylesControls;
+class MesoQuickStyles extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            celShaded: false,
+        };
+        this.default_color_values = {
+            type: 'group-generate',
+            illustrative: false,
+            value: [1, 1, 1, 1],
+            variability: 20,
+            shift: 0,
+            lightness: 0,
+            alpha: 1,
+            emissive: 0
+        };
+        this.illustrative_color_values = {
+            type: 'group-generate',
+            illustrative: true,
+            value: [1, 1, 1, 1],
+            variability: 20,
+            shift: 0,
+            lightness: 0,
+            alpha: 1,
+            emissive: 0
+        };
+    }
+    async default() {
+        if (!this.plugin.canvas3d)
+            return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: (0, color_1.Color)(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.6,
+                        maxDistance: 80,
+                        steps: 3,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.15,
+                        color: (0, color_1.Color)(0x000000),
+                        includeTransparent: false,
+                    }
+                },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        const loptions = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false, };
+        await this.plugin.managers.structure.component.setOptions(loptions);
+        await (0, state_1.updateColors)(this.plugin, this.default_color_values, options);
+    }
+    async celshading() {
+        if (!this.plugin.canvas3d)
+            return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.5,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.5,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: (0, color_1.Color)(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: { name: 'off', params: {} },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: true, };
+        await this.plugin.managers.structure.component.setOptions(loptions);
+        await (0, state_1.updateColors)(this.plugin, this.default_color_values, options);
+    }
+    async stylizedDof() {
+        if (!this.plugin.canvas3d)
+            return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.3,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: (0, color_1.Color)(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: { name: 'off', params: {} },
+                dof: {
+                    name: 'on',
+                    params: {
+                        blurSize: 9,
+                        blurSpread: 1.0,
+                        inFocus: 0.0,
+                        PPM: 200.0,
+                        center: 'camera-target',
+                        mode: 'sphere',
+                    }
+                }
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false };
+        await this.plugin.managers.structure.component.setOptions(loptions);
+        await (0, state_1.updateColors)(this.plugin, this.default_color_values, options);
+    }
+    async illustrative() {
+        if (!this.plugin.canvas3d)
+            return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.5,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.5,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: (0, color_1.Color)(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.15,
+                        color: (0, color_1.Color)(0x000000),
+                        includeTransparent: false,
+                    }
+                },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false, };
+        await this.plugin.managers.structure.component.setOptions(loptions);
+        await (0, state_1.updateColors)(this.plugin, this.illustrative_color_values, options);
+    }
+    async shiny() {
+        if (!this.plugin.canvas3d)
+            return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.5,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.3,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: (0, color_1.Color)(0x000000),
+                    }
+                },
+                shadow: { name: 'off', params: {} },
+                outline: { name: 'off', params: {} },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false };
+        await this.plugin.managers.structure.component.setOptions(loptions);
+        await (0, state_1.updateColors)(this.plugin, this.default_color_values, options);
+    }
+    async stylized() {
+        if (!this.plugin.canvas3d)
+            return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.3,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: (0, color_1.Color)(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.15,
+                        color: (0, color_1.Color)(0x000000),
+                        includeTransparent: false,
+                    }
+                },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false };
+        await this.plugin.managers.structure.component.setOptions(loptions);
+        await (0, state_1.updateColors)(this.plugin, this.illustrative_color_values, options);
+    }
+    render() {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, title: 'Applies default representation preset and sets outline and occlusion effects to default', onClick: () => this.default(), style: { width: 'auto' }, children: "Default" }), (0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, title: 'Applies celShading', onClick: () => this.celshading(), style: { width: 'auto' }, children: "Cel-shaded" }), (0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, title: 'Applies illustrative colors preset', onClick: () => this.illustrative(), style: { width: 'auto' }, children: "Illustrative" })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, title: 'Apply shiny material to default', onClick: () => this.shiny(), style: { width: 'auto' }, children: "Shiny" }), (0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, title: 'Enable shiny material, outline, and illustrative colors', onClick: () => this.stylized(), style: { width: 'auto' }, children: "Shiny-Illustrative" }), (0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, title: 'Enable DOF and shiny material', onClick: () => this.stylizedDof(), style: { width: 'auto' }, children: "Shiny-DOF" })] })] });
+    }
+}
+exports.MesoQuickStyles = MesoQuickStyles;

package/lib/commonjs/apps/viewer/app.d.ts

@@ -3,10 +3,12 @@
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Neli Fonseca <neli@ebi.ac.uk>
  */
 import { loadMVS } from '../../extensions/mvs/load';
 import { MVSData } from '../../extensions/mvs/mvs-data';
 import { SaccharideCompIdMapType } from '../../mol-model/structure/structure/carbohydrates/constants';
+import { Volume } from '../../mol-model/volume';
 import { PresetTrajectoryHierarchy } from '../../mol-plugin-state/builder/structure/hierarchy-preset';
 import { StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
 import { BuiltInCoordinatesFormat } from '../../mol-plugin-state/formats/coordinates';
@@ -41,10 +43,11 @@ export declare const ExtensionMap: {
     'sb-ncbr-partial-charges': PluginSpec.Behavior;
     'wwpdb-chemical-component-dictionary': PluginSpec.Behavior;
     mvs: PluginSpec.Behavior;
+    tunnels: PluginSpec.Behavior;
 };
 declare const DefaultViewerOptions: {
-    customFormats: [string, DataFormatProvider<any, any, any>][];
-    extensions: ("mp4-export" | "backgrounds" | "dnatco-ntcs" | "g3d" | "geo-export" | "model-export" | "mvs" | "pdbe-structure-quality-report" | "sb-ncbr-partial-charges" | "volseg" | "wwpdb-chemical-component-dictionary" | "zenodo-import" | "assembly-symmetry" | "rcsb-validation-report" | "anvil-membrane-orientation" | "ma-quality-assessment")[];
+    customFormats: [string, DataFormatProvider][];
+    extensions: ("mp4-export" | "backgrounds" | "dnatco-ntcs" | "g3d" | "geo-export" | "model-export" | "mvs" | "pdbe-structure-quality-report" | "sb-ncbr-partial-charges" | "volseg" | "wwpdb-chemical-component-dictionary" | "zenodo-import" | "assembly-symmetry" | "rcsb-validation-report" | "anvil-membrane-orientation" | "ma-quality-assessment" | "tunnels")[];
     disabledExtensions: string[];
     layoutIsExpanded: boolean;
     layoutShowControls: boolean;
@@ -147,6 +150,10 @@ export declare class Viewer {
         entryId?: string | string[];
         isLazy?: boolean;
     }): Promise<void>;
+    loadFullResolutionEMDBMap(emdbId: string, options: {
+        isoValue: Volume.IsoValue;
+        color?: Color;
+    }): Promise<void>;
     /**
      * @example
      *  viewer.loadTrajectory({
@@ -289,12 +296,12 @@ export declare const PluginExtensions: {
         MVSData: {
             SupportedVersion: number;
             fromMVSJ(mvsjString: string): MVSData;
-            toMVSJ(mvsData: MVSData, space?: string | number | undefined): string;
+            toMVSJ(mvsData: MVSData, space?: string | number): string;
             isValid(mvsData: MVSData, options?: {
-                noExtra?: boolean | undefined;
+                noExtra?: boolean;
             }): boolean;
             validationIssues(mvsData: MVSData, options?: {
-                noExtra?: boolean | undefined;
+                noExtra?: boolean;
             }): string[] | undefined;
             toPrettyString(mvsData: MVSData): string;
             createBuilder(): import("../../extensions/mvs/tree/mvs/mvs-builder").Root;