molstar 4.3.0 → 4.4.1

package/lib/apps/mesoscale-explorer/ui/states.d.ts

@@ -1,10 +1,11 @@
 /**
- * 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>
  */
 import { PluginStateObject } from '../../../mol-plugin-state/objects';
-import { PluginUIComponent } from '../../../mol-plugin-ui/base';
+import { MagicWandSvg } from '../../../mol-plugin-ui/controls/icons';
+import { CollapsableControls, PluginUIComponent } from '../../../mol-plugin-ui/base';
 import { PluginContext } from '../../../mol-plugin/context';
 import { StateAction } from '../../../mol-state';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
@@ -44,3 +45,60 @@ export declare class SessionControls extends PluginUIComponent {
 export declare class SnapshotControls extends PluginUIComponent<{}> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
+export declare class ExplorerInfo extends PluginUIComponent<{}, {
+    isDisabled: boolean;
+    showHelp: boolean;
+}> {
+    state: {
+        isDisabled: boolean;
+        showHelp: boolean;
+    };
+    componentDidMount(): void;
+    setupDriver: () => void;
+    openHelp: () => void;
+    toggleHelp: () => void;
+    render(): import("react/jsx-runtime").JSX.Element | undefined;
+}
+export declare class MesoQuickStylesControls extends CollapsableControls {
+    defaultState(): {
+        isCollapsed: boolean;
+        header: string;
+        brand: {
+            accent: "gray";
+            svg: typeof MagicWandSvg;
+        };
+    };
+    renderControls(): import("react/jsx-runtime").JSX.Element;
+}
+export declare class MesoQuickStyles extends PluginUIComponent {
+    state: {
+        celShaded: boolean;
+    };
+    default_color_values: {
+        type: string;
+        illustrative: boolean;
+        value: number[];
+        variability: number;
+        shift: number;
+        lightness: number;
+        alpha: number;
+        emissive: number;
+    };
+    illustrative_color_values: {
+        type: string;
+        illustrative: boolean;
+        value: number[];
+        variability: number;
+        shift: number;
+        lightness: number;
+        alpha: number;
+        emissive: number;
+    };
+    default(): Promise<void>;
+    celshading(): Promise<void>;
+    stylizedDof(): Promise<void>;
+    illustrative(): Promise<void>;
+    shiny(): Promise<void>;
+    stylized(): Promise<void>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

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

@@ -1,15 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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>
  */
+import Markdown from 'react-markdown';
 import { MmcifFormat } from '../../../mol-model-formats/structure/mmcif';
 import { MmcifProvider } from '../../../mol-plugin-state/formats/trajectory';
 import { PluginStateObject } from '../../../mol-plugin-state/objects';
-import { PluginUIComponent } from '../../../mol-plugin-ui/base';
-import { Button, ExpandGroup } from '../../../mol-plugin-ui/controls/common';
-import { GetAppSvg, Icon, OpenInBrowserSvg } from '../../../mol-plugin-ui/controls/icons';
+import { Button, ExpandGroup, IconButton } from '../../../mol-plugin-ui/controls/common';
+import { GetAppSvg, HelpOutlineSvg, MagicWandSvg, TourSvg, Icon, OpenInBrowserSvg } from '../../../mol-plugin-ui/controls/icons';
+import { CollapsableControls, PluginUIComponent } from '../../../mol-plugin-ui/base';
 import { ApplyActionControl } from '../../../mol-plugin-ui/state/apply-action';
 import { LocalStateSnapshotList, LocalStateSnapshotParams, LocalStateSnapshots } from '../../../mol-plugin-ui/state/snapshots';
 import { PluginCommands } from '../../../mol-plugin/commands';
@@ -22,7 +23,7 @@ import { createCellpackHierarchy } from '../data/cellpack/preset';
 import { createGenericHierarchy } from '../data/generic/preset';
 import { createMmcifHierarchy } from '../data/mmcif/preset';
 import { createPetworldHierarchy } from '../data/petworld/preset';
-import { MesoscaleState, MesoscaleStateObject, setGraphicsCanvas3DProps } from '../data/state';
+import { MesoscaleState, MesoscaleStateObject, setGraphicsCanvas3DProps, updateColors } from '../data/state';
 function adjustPluginProps(ctx) {
     var _a;
     ctx.managers.interactivity.setProps({ granularity: 'chain' });
@@ -75,6 +76,7 @@ function adjustPluginProps(ctx) {
                     radius: 5,
                     bias: 1,
                     blurKernelSize: 11,
+                    blurDepthBias: 0.5,
                     resolutionScale: 1,
                     color: Color(0x000000),
                 }
@@ -249,21 +251,21 @@ export class DatabaseControls extends PluginUIComponent {
     componentDidMount() {
     }
     render() {
-        return _jsx("div", { style: { margin: '5px' }, children: _jsx(ApplyActionControl, { state: this.plugin.state.data, action: LoadDatabase, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
+        return _jsx("div", { id: 'database', style: { margin: '5px' }, children: _jsx(ApplyActionControl, { state: this.plugin.state.data, action: LoadDatabase, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
     }
 }
 export class LoaderControls extends PluginUIComponent {
     componentDidMount() {
     }
     render() {
-        return _jsx("div", { style: { margin: '5px' }, children: _jsx(ApplyActionControl, { state: this.plugin.state.data, action: LoadModel, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
+        return _jsx("div", { id: 'loader', style: { margin: '5px' }, children: _jsx(ApplyActionControl, { state: this.plugin.state.data, action: LoadModel, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
     }
 }
 export class ExampleControls extends PluginUIComponent {
     componentDidMount() {
     }
     render() {
-        return _jsx("div", { style: { margin: '5px' }, children: _jsx(ApplyActionControl, { state: this.plugin.state.data, action: LoadExample, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
+        return _jsx("div", { id: 'example', style: { margin: '5px' }, children: _jsx(ApplyActionControl, { state: this.plugin.state.data, action: LoadExample, nodeRef: this.plugin.state.data.tree.root.ref, applyLabel: 'Load', hideHeader: true }) });
     }
 }
 export async function openState(ctx, file) {
@@ -295,11 +297,469 @@ export class SessionControls extends PluginUIComponent {
         };
     }
     render() {
-        return _jsx("div", { style: { margin: '5px' }, children: _jsxs("div", { className: 'msp-flex-row', children: [_jsx(Button, { icon: GetAppSvg, onClick: this.downloadToFileZip, title: 'Download the state.', children: "Download" }), _jsxs("div", { className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', children: [_jsx(Icon, { svg: OpenInBrowserSvg, inline: true }), " Open ", _jsx("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' })] })] }) });
+        return _jsx("div", { id: 'session', style: { margin: '5px' }, children: _jsxs("div", { className: 'msp-flex-row', children: [_jsx(Button, { icon: GetAppSvg, onClick: this.downloadToFileZip, title: 'Download the state.', children: "Download" }), _jsxs("div", { className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', children: [_jsx(Icon, { svg: OpenInBrowserSvg, inline: true }), " Open ", _jsx("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' })] })] }) });
     }
 }
 export class SnapshotControls extends PluginUIComponent {
     render() {
-        return _jsxs("div", { style: { margin: '5px' }, children: [_jsx("div", { style: { marginBottom: '10px' }, children: _jsx(LocalStateSnapshotList, {}) }), _jsx("div", { style: { marginBottom: '10px' }, children: _jsx(LocalStateSnapshots, {}) }), _jsx("div", { style: { marginBottom: '10px' }, children: _jsx(ExpandGroup, { header: 'Snapshot Options', initiallyExpanded: false, children: _jsx(LocalStateSnapshotParams, {}) }) })] });
+        return _jsxs("div", { style: { margin: '5px' }, children: [_jsx("div", { id: 'snaplist', style: { marginBottom: '10px' }, children: _jsx(LocalStateSnapshotList, {}) }), _jsx("div", { id: 'snap', style: { marginBottom: '10px' }, children: _jsx(LocalStateSnapshots, {}) }), _jsx("div", { id: 'snapoption', style: { marginBottom: '10px' }, children: _jsx(ExpandGroup, { header: 'Snapshot Options', initiallyExpanded: false, children: _jsx(LocalStateSnapshotParams, {}) }) })] });
+    }
+}
+export class ExplorerInfo extends 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 && MesoscaleState.has(this.plugin) && 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 = _jsx(IconButton, { svg: HelpOutlineSvg, toggleState: false, small: true, onClick: this.openHelp, title: 'Open the Documentation' });
+        const tour = _jsx(IconButton, { svg: TourSvg, toggleState: false, small: true, onClick: this.toggleHelp, title: 'Start the interactive tour' });
+        return _jsx(_Fragment, { children: _jsxs("div", { id: 'explorerinfo', style: { paddingLeft: 4 }, className: 'msp-help-text', children: [_jsx(Markdown, { children: legend }), tour, help] }) });
+    }
+}
+export class MesoQuickStylesControls extends CollapsableControls {
+    defaultState() {
+        return {
+            isCollapsed: true,
+            header: 'Quick Styles',
+            brand: { accent: 'gray', svg: MagicWandSvg }
+        };
+    }
+    renderControls() {
+        return _jsx(_Fragment, { children: _jsx(MesoQuickStyles, {}) });
+    }
+}
+export class MesoQuickStyles extends 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: 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: 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 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: 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 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: 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 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: 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: 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 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: 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 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: 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: 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 updateColors(this.plugin, this.illustrative_color_values, options);
+    }
+    render() {
+        return _jsxs(_Fragment, { children: [_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 celShading', onClick: () => this.celshading(), style: { width: 'auto' }, children: "Cel-shaded" }), _jsx(Button, { noOverflow: true, title: 'Applies illustrative colors preset', onClick: () => this.illustrative(), style: { width: 'auto' }, children: "Illustrative" })] }), _jsxs("div", { className: 'msp-flex-row', children: [_jsx(Button, { noOverflow: true, title: 'Apply shiny material to default', onClick: () => this.shiny(), style: { width: 'auto' }, children: "Shiny" }), _jsx(Button, { noOverflow: true, title: 'Enable shiny material, outline, and illustrative colors', onClick: () => this.stylized(), style: { width: 'auto' }, children: "Shiny-Illustrative" }), _jsx(Button, { noOverflow: true, title: 'Enable DOF and shiny material', onClick: () => this.stylizedDof(), style: { width: 'auto' }, children: "Shiny-DOF" })] })] });
     }
 }

package/lib/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';
@@ -44,7 +46,7 @@ export declare const ExtensionMap: {
     tunnels: PluginSpec.Behavior;
 };
 declare const DefaultViewerOptions: {
-    customFormats: [string, DataFormatProvider<any, any, any>][];
+    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;
@@ -148,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({
@@ -290,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;