updated basic-wrapper, moved some apps to examples

+ fixed lighting demo

src/apps/basic-wrapper/controls.tsx

@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import { PluginUIComponent } from '../../mol-plugin-ui/base';
-import * as React from 'react';
-import { TransformUpdaterControl } from '../../mol-plugin-ui/state/update-transform';
-
-export class BasicWrapperControls extends PluginUIComponent {
-
-    render() {
-        return <div style={{ overflowY: 'auto', display: 'block', height: '100%' }}>
-            <TransformUpdaterControl nodeRef='asm' />
-            <TransformUpdaterControl nodeRef='seq-visual' header={{ name: 'Sequence Visual' }} />
-            <TransformUpdaterControl nodeRef='het-visual' header={{ name: 'HET Visual' }} />
-            <TransformUpdaterControl nodeRef='water-visual' header={{ name: 'Water Visual' }} initiallyCollapsed={true} />
-            <TransformUpdaterControl nodeRef='ihm-visual' header={{ name: 'I/HM Visual' }} initiallyCollapsed={true} />
-        </div>;
-    }
-}
-
-export class CustomToastMessage extends PluginUIComponent {
-    render() {
-        return <>
-            Custom <i>Toast</i> content. No timeout.
-        </>;
-    }
-}

src/apps/basic-wrapper/helpers.ts

@@ -1,99 +0,0 @@
-/**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
-import { PluginContext } from '../../mol-plugin/context';
-import { PluginStateObject as PSO } from '../../mol-plugin-state/objects';
-import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
-import { StateBuilder } from '../../mol-state';
-import Expression from '../../mol-script/language/expression';
-import { ColorTheme } from '../../mol-theme/color';
-import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
-type SupportedFormats = 'cif' | 'pdb'
-
-export namespace StateHelper {
-    export function download(b: StateBuilder.To<PSO.Root>, url: string, ref?: string) {
-        return b.apply(StateTransforms.Data.Download, { url, isBinary: false }, { ref });
-    }
-
-    export function getModel(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats, modelIndex = 0) {
-        const parsed = format === 'cif'
-            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif)
-            : b.apply(StateTransforms.Model.TrajectoryFromPDB);
-
-        return parsed.apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex });
-    }
-
-    export function structure(b: StateBuilder.To<PSO.Molecule.Model>) {
-        return b.apply(StateTransforms.Model.StructureFromModel, void 0, { tags: 'structure' })
-    };
-
-    export function selectChain(b: StateBuilder.To<PSO.Molecule.Structure>, auth_asym_id: string) {
-        const expression = MS.struct.generator.atomGroups({
-            'chain-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.auth_asym_id(), auth_asym_id])
-        })
-        return b.apply(StateTransforms.Model.StructureSelectionFromExpression, { expression, label: `Chain ${auth_asym_id}` });
-    }
-
-    export function select(b: StateBuilder.To<PSO.Molecule.Structure>, expression: Expression) {
-        return b.apply(StateTransforms.Model.StructureSelectionFromExpression, { expression });
-    }
-
-    export function selectSurroundingsOfFirstResidue(b: StateBuilder.To<PSO.Molecule.Structure>, comp_id: string, radius: number) {
-        const expression = MS.struct.modifier.includeSurroundings({
-            0: MS.struct.filter.first([
-                MS.struct.generator.atomGroups({
-                    'residue-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.label_comp_id(), comp_id]),
-                    'group-by': MS.struct.atomProperty.macromolecular.residueKey()
-                })
-            ]),
-            radius
-        })
-        return b.apply(StateTransforms.Model.StructureSelectionFromExpression, { expression, label: `Surr. ${comp_id} (${radius} ang)` });
-    }
-
-    export function identityTransform(b: StateBuilder.To<PSO.Molecule.Structure>, m: Mat4) {
-        return b.apply(StateTransforms.Model.TransformStructureConformation,
-            { transform: { name: 'components', params: { axis: Vec3.create(1, 0, 0), angle: 0, translation: Vec3.zero() } } },
-            { tags: 'transform' });
-    }
-
-    export function transform(b: StateBuilder.To<PSO.Molecule.Structure>, matrix: Mat4) {
-        return b.apply(StateTransforms.Model.TransformStructureConformation, {
-            transform: { name: 'matrix', params: matrix }
-        }, { tags: 'transform' });
-    }
-
-    export function assemble(b: StateBuilder.To<PSO.Molecule.Model>, id?: string) {
-        const props = {
-            type: {
-                name: 'assembly' as const,
-                params: { id: id || 'deposited' }
-            }
-        }
-        return b.apply(StateTransforms.Model.StructureFromModel, props, { tags: 'asm' })
-    }
-
-    export function visual(ctx: PluginContext, visualRoot: StateBuilder.To<PSO.Molecule.Structure>) {
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(ctx, void 0, { type: 'cartoon' }), { tags: 'seq-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(ctx, void 0, { type: 'ball-and-stick' }), { tags: 'het-visual' });
-        return visualRoot;
-    }
-
-    export function ballsAndSticks(ctx: PluginContext, visualRoot: StateBuilder.To<PSO.Molecule.Structure>, expression: Expression, color?: ColorTheme.BuiltIn) {
-        visualRoot
-            .apply(StateTransforms.Model.StructureSelectionFromExpression, { expression })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(ctx, void 0, { type: 'ball-and-stick', color }), { tags: 'het-visual' });
-        return visualRoot;
-    }
-
-}

src/apps/basic-wrapper/index.ts

@@ -1,219 +0,0 @@
-/**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
-import './index.html'
-import { PluginContext } from '../../mol-plugin/context';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { Color } from '../../mol-util/color';
-import { PluginStateObject as PSO, PluginStateObject } from '../../mol-plugin-state/objects';
-import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in';
-import { StateBuilder, StateTransform } from '../../mol-state';
-import { StripedResidues } from './coloring';
-import { StaticSuperpositionTestData, buildStaticSuperposition, dynamicSuperpositionTest } from './superposition';
-import { PDBeStructureQualityReport } from '../../mol-plugin/behavior/dynamic/custom-props';
-import { CustomToastMessage } from './controls';
-import { EmptyLoci } from '../../mol-model/loci';
-import { StructureSelection } from '../../mol-model/structure';
-import { Script } from '../../mol-script/script';
-import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
-require('mol-plugin-ui/skin/light.scss')
-
-type SupportedFormats = 'cif' | 'pdb'
-type LoadParams = { url: string, format?: SupportedFormats, assemblyId?: string }
-
-class BasicWrapper {
-    plugin: PluginContext;
-
-    init(target: string | HTMLElement) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec,
-            layout: {
-                initial: {
-                    isExpanded: false,
-                    showControls: false
-                },
-                controls: {
-                    // left: 'none',
-                    // right: BasicWrapperControls
-                }
-            },
-            components: {
-                remoteState: 'none'
-            }
-        });
-
-        this.plugin.representation.structure.themes.colorThemeRegistry.add(StripedResidues.colorThemeProvider!);
-        this.plugin.managers.lociLabels.addProvider(StripedResidues.labelProvider!);
-        this.plugin.customModelProperties.register(StripedResidues.propertyProvider, true);
-    }
-
-    private download(b: StateBuilder.To<PSO.Root>, url: string) {
-        return b.apply(StateTransforms.Data.Download, { url, isBinary: false })
-    }
-
-    private parse(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats, assemblyId: string) {
-        const parsed = format === 'cif'
-            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif)
-            : b.apply(StateTransforms.Model.TrajectoryFromPDB);
-
-        const props = {
-            type: {
-                name: 'assembly' as const,
-                params: { id: assemblyId || 'deposited' }
-            }
-        }
-        return parsed
-            .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 })
-            .apply(StateTransforms.Model.CustomModelProperties, { autoAttach: [StripedResidues.propertyProvider.descriptor.name], properties: {} }, { ref: 'props', state: { isGhost: false } })
-            .apply(StateTransforms.Model.StructureFromModel, props, { ref: 'asm' });
-    }
-
-    private visual(visualRoot: StateBuilder.To<PSO.Molecule.Structure>) {
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' }, { ref: 'seq' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(this.plugin, void 0, { type: 'cartoon' }), { ref: 'seq-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(this.plugin, void 0, { type: 'ball-and-stick' }), { ref: 'het-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'water' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(this.plugin, void 0, { type: 'ball-and-stick', typeParams: { alpha: 0.51 } }), { ref: 'water-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'spheres' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(this.plugin, void 0, { type: 'spacefill' }), { ref: 'ihm-visual' });
-        return visualRoot;
-    }
-
-    private loadedParams: LoadParams = { url: '', format: 'cif', assemblyId: '' };
-    async load({ url, format = 'cif', assemblyId = '' }: LoadParams) {
-        let loadType: 'full' | 'update' = 'full';
-
-        const state = this.plugin.state.data;
-
-        if (this.loadedParams.url !== url || this.loadedParams.format !== format) {
-            loadType = 'full';
-        } else if (this.loadedParams.url === url) {
-            if (state.select('asm').length > 0) loadType = 'update';
-        }
-
-        let tree: StateBuilder.Root;
-        if (loadType === 'full') {
-            await PluginCommands.State.RemoveObject(this.plugin, { state, ref: state.tree.root.ref });
-            tree = state.build();
-            this.visual(this.parse(this.download(tree.toRoot(), url), format, assemblyId));
-        } else {
-            const props = {
-                type: {
-                    name: 'assembly' as const,
-                    params: { id: assemblyId || 'deposited' }
-                }
-            }
-
-            tree = state.build();
-            tree.to('asm').update(StateTransforms.Model.StructureFromModel, p => ({ ...p, ...props }));
-        }
-
-        await PluginCommands.State.Update(this.plugin, { state: this.plugin.state.data, tree });
-        this.loadedParams = { url, format, assemblyId };
-        PluginCommands.Camera.Reset(this.plugin, { });
-    }
-
-    setBackground(color: number) {
-        const renderer = this.plugin.canvas3d!.props.renderer;
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: { ...renderer,  backgroundColor: Color(color) } } });
-    }
-
-    toggleSpin() {
-        if (!this.plugin.canvas3d) return;
-
-        const trackball = this.plugin.canvas3d.props.trackball;
-        const spinning = trackball.spin;
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { trackball: { ...trackball, spin: !trackball.spin } } });
-        if (!spinning) PluginCommands.Camera.Reset(this.plugin, { });
-    }
-
-    animate = {
-        modelIndex: {
-            maxFPS: 8,
-            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }) },
-            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }) },
-            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }) },
-            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }) },
-            stop: () => this.plugin.state.animation.stop()
-        }
-    }
-
-    coloring = {
-        applyStripes: async () => {
-            const state = this.plugin.state.data;
-
-            const visuals = state.selectQ(q => q.ofTransformer(StateTransforms.Representation.StructureRepresentation3D));
-            const tree = state.build();
-            const colorTheme = { name: StripedResidues.propertyProvider.descriptor.name, params: this.plugin.representation.structure.themes.colorThemeRegistry.get(StripedResidues.propertyProvider.descriptor.name).defaultValues };
-
-            for (const v of visuals) {
-                tree.to(v).update(old => ({ ...old, colorTheme }));
-            }
-
-            await PluginCommands.State.Update(this.plugin, { state, tree });
-        }
-    }
-
-    interactivity = {
-        highlightOn: () => {
-            const seq_id = 7;
-            const data = (this.plugin.state.data.select('asm')[0].obj as PluginStateObject.Molecule.Structure).data;
-            const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
-                'residue-test': Q.core.rel.eq([Q.struct.atomProperty.macromolecular.label_seq_id(), seq_id]),
-                'group-by': Q.struct.atomProperty.macromolecular.residueKey()
-            }), data);
-            const loci = StructureSelection.toLociWithSourceUnits(sel);
-            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci });
-        },
-        clearHighlight: () => {
-            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: EmptyLoci });
-        }
-    }
-
-    tests = {
-        staticSuperposition: async () => {
-            const state = this.plugin.state.data;
-            const tree = buildStaticSuperposition(this.plugin, StaticSuperpositionTestData);
-            await PluginCommands.State.RemoveObject(this.plugin, { state, ref: StateTransform.RootRef });
-            await PluginCommands.State.Update(this.plugin, { state, tree });
-        },
-        dynamicSuperposition: async () => {
-            await PluginCommands.State.RemoveObject(this.plugin, { state: this.plugin.state.data, ref: StateTransform.RootRef });
-            await dynamicSuperpositionTest(this.plugin, ['1tqn', '2hhb', '4hhb'], 'HEM');
-        },
-        toggleValidationTooltip: async () => {
-            const state = this.plugin.state.behaviors;
-            const tree = state.build().to(PDBeStructureQualityReport.id).update(PDBeStructureQualityReport, p => ({ ...p, showTooltip: !p.showTooltip }));
-            await PluginCommands.State.Update(this.plugin, { state, tree });
-        },
-        showToasts: () => {
-            PluginCommands.Toast.Show(this.plugin, {
-                title: 'Toast 1',
-                message: 'This is an example text, timeout 3s',
-                key: 'toast-1',
-                timeoutMs: 3000
-            });
-            PluginCommands.Toast.Show(this.plugin, {
-                title: 'Toast 2',
-                message: CustomToastMessage,
-                key: 'toast-2'
-            });
-        },
-        hideToasts: () => {
-            PluginCommands.Toast.Hide(this.plugin, { key: 'toast-1' });
-            PluginCommands.Toast.Hide(this.plugin, { key: 'toast-2' });
-        }
-    }
-}
-
-(window as any).BasicMolStarWrapper = new BasicWrapper();

src/apps/basic-wrapper/superposition.ts

@@ -1,108 +0,0 @@
-/**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-// TODO: move to an "example"
-
-import { PluginContext } from '../../mol-plugin/context';
-import { Mat4 } from '../../mol-math/linear-algebra';
-import { StateHelper } from './helpers';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { StateSelection, StateBuilder } from '../../mol-state';
-import { PluginStateObject as PSO } from '../../mol-plugin-state/objects';
-import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
-import { compile } from '../../mol-script/runtime/query/compiler';
-import { StructureSelection, QueryContext } from '../../mol-model/structure';
-import { superposeStructures } from '../../mol-model/structure/structure/util/superposition';
-import Expression from '../../mol-script/language/expression';
-
-export type SuperpositionTestInput = {
-    pdbId: string,
-    auth_asym_id: string,
-    matrix: Mat4
-}[];
-
-// function getAxisAngleTranslation(m: Mat4) {
-//     const translation = Mat4.getTranslation(Vec3.zero(), m);
-//     const axis = Vec3.zero();
-//     const angle = 180 / Math.PI * Quat.getAxisAngle(axis, Mat4.getRotation(Quat.zero(), m));
-//     return { translation, axis, angle };
-// }
-
-export function buildStaticSuperposition(ctx: PluginContext, src: SuperpositionTestInput) {
-    const b = ctx.state.data.build().toRoot();
-    for (const s of src) {
-        StateHelper.visual(ctx,
-            StateHelper.transform(
-                StateHelper.selectChain(
-                    StateHelper.structure(
-                        StateHelper.getModel(StateHelper.download(b, `https://www.ebi.ac.uk/pdbe/static/entry/${s.pdbId}_updated.cif`), 'cif')),
-                    s.auth_asym_id
-                ),
-                s.matrix
-            )
-        );
-    }
-    return b;
-}
-
-export const StaticSuperpositionTestData: SuperpositionTestInput = [
-    { pdbId: '1aj5', auth_asym_id: 'A', matrix: Mat4.identity() },
-    { pdbId: '1df0', auth_asym_id: 'B', matrix: Mat4.ofRows([
-        [0.406, 0.879, 0.248, -200.633],
-        [0.693, -0.473, 0.544, 73.403],
-        [0.596, -0.049, -0.802, -14.209],
-        [0, 0, 0, 1]] )},
-    { pdbId: '1dvi', auth_asym_id: 'A', matrix: Mat4.ofRows([
-        [-0.053, -0.077, 0.996, -45.633],
-        [-0.312, 0.949, 0.057, -12.255],
-        [-0.949, -0.307, -0.074, 53.562],
-        [0, 0, 0, 1]] )}
-];
-
-export async function dynamicSuperpositionTest(ctx: PluginContext, src: string[], comp_id: string) {
-    const state = ctx.state.data;
-
-    const structures = state.build().toRoot();
-    for (const s of src) {
-        StateHelper.structure(
-            StateHelper.getModel(StateHelper.download(structures, `https://www.ebi.ac.uk/pdbe/static/entry/${s}_updated.cif`), 'cif'));
-    }
-
-    await PluginCommands.State.Update(ctx, { state, tree: structures });
-
-    const pivot = MS.struct.filter.first([
-        MS.struct.generator.atomGroups({
-            'residue-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.label_comp_id(), comp_id]),
-            'group-by': MS.struct.atomProperty.macromolecular.residueKey()
-        })
-    ]);
-    const rest = MS.struct.modifier.exceptBy({
-        0: MS.struct.generator.all(),
-        by: pivot
-    });
-
-    const query = compile<StructureSelection>(pivot);
-    const xs = state.select(StateSelection.Generators.rootsOfType(PSO.Molecule.Structure));
-    const selections = xs.map(s => StructureSelection.toLociWithCurrentUnits(query(new QueryContext(s.obj!.data))));
-
-    const transforms = superposeStructures(selections);
-    const visuals = state.build();
-
-    siteVisual(ctx, StateHelper.selectSurroundingsOfFirstResidue(visuals.to(xs[0].transform.ref), 'HEM', 7), pivot, rest);
-    for (let i = 1; i < selections.length; i++) {
-        const root = visuals.to(xs[i].transform.ref);
-        siteVisual(ctx,
-            StateHelper.transform(StateHelper.selectSurroundingsOfFirstResidue(root, 'HEM', 7), transforms[i - 1].bTransform),
-            pivot, rest);
-    }
-
-    await PluginCommands.State.Update(ctx, { state, tree: visuals });
-}
-
-function siteVisual(ctx: PluginContext, b: StateBuilder.To<PSO.Molecule.Structure>, pivot: Expression, rest: Expression) {
-    StateHelper.ballsAndSticks(ctx, b, pivot, 'residue-name');
-    StateHelper.ballsAndSticks(ctx, b, rest, 'uniform');
-}

src/apps/demos/lighting/index.ts

@@ -1,178 +0,0 @@
-/**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import { createPlugin, DefaultPluginSpec } from '../../../mol-plugin';
-import './index.html'
-import { PluginContext } from '../../../mol-plugin/context';
-import { PluginCommands } from '../../../mol-plugin/commands';
-import { StateTransforms } from '../../../mol-plugin-state/transforms';
-import { PluginStateObject as PSO } from '../../../mol-plugin-state/objects';
-import { StateBuilder } from '../../../mol-state';
-import { Canvas3DProps } from '../../../mol-canvas3d/canvas3d';
-import { createStructureRepresentationParams } from '../../../mol-plugin-state/helpers/structure-representation-params';
-require('mol-plugin-ui/skin/light.scss')
-
-type SupportedFormats = 'cif' | 'pdb'
-type LoadParams = { url: string, format?: SupportedFormats, assemblyId?: string }
-
-const Canvas3DPresets = {
-    illustrative: {
-        multiSample: {
-            mode: 'temporal' as Canvas3DProps['multiSample']['mode']
-        },
-        postprocessing: {
-            occlusionEnable: true,
-            occlusionBias: 0.8,
-            occlusionKernelSize: 6,
-            outlineEnable: true,
-        },
-        renderer: {
-            ambientIntensity: 1,
-            lightIntensity: 0,
-        }
-    },
-    occlusion: {
-        multiSample: {
-            mode: 'temporal' as Canvas3DProps['multiSample']['mode']
-        },
-        postprocessing: {
-            occlusionEnable: true,
-            occlusionBias: 0.8,
-            occlusionKernelSize: 6,
-            outlineEnable: false,
-        },
-        renderer: {
-            ambientIntensity: 0.4,
-            lightIntensity: 0.6,
-        }
-    },
-    standard: {
-        multiSample: {
-            mode: 'off' as Canvas3DProps['multiSample']['mode']
-        },
-        postprocessing: {
-            occlusionEnable: false,
-            outlineEnable: false,
-        },
-        renderer: {
-            ambientIntensity: 0.4,
-            lightIntensity: 0.6,
-        }
-    }
-}
-
-type Canvas3DPreset = keyof typeof Canvas3DPresets
-
-function getPreset(preset: Canvas3DPreset) {
-    switch (preset) {
-        case 'illustrative': return Canvas3DPresets['illustrative']
-        case 'standard': return Canvas3DPresets['standard']
-        case 'occlusion': return Canvas3DPresets['occlusion']
-    }
-}
-
-class LightingDemo {
-    plugin: PluginContext;
-
-    init(target: string | HTMLElement) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec,
-            layout: {
-                initial: {
-                    isExpanded: false,
-                    showControls: false
-                },
-                controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' }
-            }
-        });
-
-        this.setPreset('illustrative');
-    }
-
-    setPreset(preset: Canvas3DPreset) {
-        const props = getPreset(preset)
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: {
-            ...props,
-            multiSample: {
-                ...this.plugin.canvas3d!.props.multiSample,
-                ...props.multiSample
-            },
-            renderer: {
-                ...this.plugin.canvas3d!.props.renderer,
-                ...props.renderer
-            },
-            postprocessing: {
-                ...this.plugin.canvas3d!.props.postprocessing,
-                ...props.postprocessing
-            },
-        }});
-    }
-
-    private download(b: StateBuilder.To<PSO.Root>, url: string) {
-        return b.apply(StateTransforms.Data.Download, { url, isBinary: false })
-    }
-
-    private parse(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats, assemblyId: string) {
-        const parsed = format === 'cif'
-            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif)
-            : b.apply(StateTransforms.Model.TrajectoryFromPDB);
-
-        const props = {
-            type: {
-                name: 'assembly' as const,
-                params: { id: assemblyId || 'deposited' }
-            }
-        }
-        return parsed
-            .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 })
-            .apply(StateTransforms.Model.StructureFromModel, props, { ref: 'asm' });
-    }
-
-    private visual(visualRoot: StateBuilder.To<PSO.Molecule.Structure>) {
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(this.plugin, void 0, { type: 'spacefill', color: 'illustrative' }), { ref: 'seq-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                createStructureRepresentationParams(this.plugin, void 0, { type: 'ball-and-stick' }), { ref: 'het-visual' });
-        return visualRoot;
-    }
-
-    private loadedParams: LoadParams = { url: '', format: 'cif', assemblyId: '' };
-    async load({ url, format = 'cif', assemblyId = '' }: LoadParams) {
-        let loadType: 'full' | 'update' = 'full';
-
-        const state = this.plugin.state.data;
-
-        if (this.loadedParams.url !== url || this.loadedParams.format !== format) {
-            loadType = 'full';
-        } else if (this.loadedParams.url === url) {
-            if (state.select('asm').length > 0) loadType = 'update';
-        }
-
-        let tree: StateBuilder.Root;
-        if (loadType === 'full') {
-            await PluginCommands.State.RemoveObject(this.plugin, { state, ref: state.tree.root.ref });
-            tree = state.build();
-            this.visual(this.parse(this.download(tree.toRoot(), url), format, assemblyId));
-        } else {
-            const props = {
-                type: {
-                    name: 'assembly' as const,
-                    params: { id: assemblyId || 'deposited' }
-                }
-            }
-            tree = state.build();
-            tree.to('asm').update(StateTransforms.Model.StructureFromModel, p => ({ ...p, ...props }));
-        }
-
-        await PluginCommands.State.Update(this.plugin, { state: this.plugin.state.data, tree });
-        this.loadedParams = { url, format, assemblyId };
-        PluginCommands.Camera.Reset(this.plugin, { });
-    }
-}
-
-(window as any).LightingDemo = new LightingDemo();

src/examples/basic-wrapper/controls.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { PluginUIComponent } from '../../mol-plugin-ui/base';
+import * as React from 'react';
+
+export class CustomToastMessage extends PluginUIComponent {
+    render() {
+        return <>
+            Custom <i>Toast</i> content. No timeout.
+        </>;
+    }
+}

src/apps/basic-wrapper/index.html → src/examples/basic-wrapper/index.html

@@ -50,7 +50,7 @@
             <input type='text' id='url' placeholder='url' />
             <input type='text' id='assemblyId' placeholder='assembly id' />
             <select id='format'>
-                <option value='cif' selected>CIF</option>
+                <option value='mmcif' selected>mmCIF</option>
                 <option value='pdb'>PDB</option>
             </select>
         </div>
@@ -60,7 +60,7 @@
         
             var pdbId = '1grm', assemblyId= '1';
             var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
-            var format = 'cif';
+            var format = 'mmcif';
             
             $('url').value = url;
             $('url').onchange = function (e) { url = e.target.value; }
@@ -104,6 +104,7 @@
             addHeader('Misc');
 
             addControl('Apply Stripes', () => BasicMolStarWrapper.coloring.applyStripes());
+            addControl('Default Coloring', () => BasicMolStarWrapper.coloring.applyDefault());
 
             addHeader('Interactivity');
             addControl('Highlight seq_id=7', () => BasicMolStarWrapper.interactivity.highlightOn());

src/examples/basic-wrapper/index.ts

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { EmptyLoci } from '../../mol-model/loci';
+import { StructureSelection } from '../../mol-model/structure';
+import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
+import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { PDBeStructureQualityReport } from '../../mol-plugin/behavior/dynamic/custom-props';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginContext } from '../../mol-plugin/context';
+import { Script } from '../../mol-script/script';
+import { Color } from '../../mol-util/color';
+import { StripedResidues } from './coloring';
+import { CustomToastMessage } from './controls';
+import './index.html';
+import { buildStaticSuperposition, dynamicSuperpositionTest, StaticSuperpositionTestData } from './superposition';
+require('mol-plugin-ui/skin/light.scss')
+
+type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
+
+class BasicWrapper {
+    plugin: PluginContext;
+
+    init(target: string | HTMLElement) {
+        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
+            ...DefaultPluginSpec,
+            layout: {
+                initial: {
+                    isExpanded: false,
+                    showControls: false
+                },
+                controls: {
+                    // left: 'none'
+                }
+            },
+            components: {
+                remoteState: 'none'
+            }
+        });
+
+        this.plugin.representation.structure.themes.colorThemeRegistry.add(StripedResidues.colorThemeProvider!);
+        this.plugin.managers.lociLabels.addProvider(StripedResidues.labelProvider!);
+        this.plugin.customModelProperties.register(StripedResidues.propertyProvider, true);
+    }
+
+    async load({ url, format = 'mmcif', isBinary = false, assemblyId = '' }: LoadParams) {
+        await this.plugin.clear();
+
+        const data = await this.plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
+        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format);
+
+        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default', {
+            structure: assemblyId ? { name: 'assembly', params: { id: assemblyId } } : { name: 'deposited', params: { } },
+            showUnitcell: false,
+            representationPreset: 'auto'
+        });
+    }
+
+    setBackground(color: number) {
+        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: props => { props.renderer.backgroundColor = Color(color) } });
+    }
+
+    toggleSpin() {
+        if (!this.plugin.canvas3d) return;
+
+        PluginCommands.Canvas3D.SetSettings(this.plugin, {
+            settings: props => {
+                props.trackball.spin = !props.trackball.spin;
+            }
+        });
+        if (!this.plugin.canvas3d.props.trackball.spin) PluginCommands.Camera.Reset(this.plugin, {});
+    }
+
+    animate = {
+        modelIndex: {
+            maxFPS: 8,
+            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }) },
+            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }) },
+            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }) },
+            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }) },
+            stop: () => this.plugin.state.animation.stop()
+        }
+    }
+
+    coloring = {
+        applyStripes: async () => {
+            this.plugin.dataTransaction(async () => {
+                for (const s of this.plugin.managers.structure.hierarchy.current.structures) {
+                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: StripedResidues.propertyProvider.descriptor.name as any })
+                }
+            });
+        },
+        applyDefault: async () => {
+            this.plugin.dataTransaction(async () => {
+                for (const s of this.plugin.managers.structure.hierarchy.current.structures) {
+                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: 'default' })
+                }
+            });
+        }
+    }
+
+    interactivity = {
+        highlightOn: () => {
+            const seq_id = 7;
+            const data = (this.plugin.state.data.select('asm')[0].obj as PluginStateObject.Molecule.Structure).data;
+            const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
+                'residue-test': Q.core.rel.eq([Q.struct.atomProperty.macromolecular.label_seq_id(), seq_id]),
+                'group-by': Q.struct.atomProperty.macromolecular.residueKey()
+            }), data);
+            const loci = StructureSelection.toLociWithSourceUnits(sel);
+            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci });
+        },
+        clearHighlight: () => {
+            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: EmptyLoci });
+        }
+    }
+
+    tests = {
+        staticSuperposition: async () => {
+            await this.plugin.clear();
+            return buildStaticSuperposition(this.plugin, StaticSuperpositionTestData);
+        },
+        dynamicSuperposition: async () => {
+            await this.plugin.clear();
+            return dynamicSuperpositionTest(this.plugin, ['1tqn', '2hhb', '4hhb'], 'HEM');
+        },
+        toggleValidationTooltip: () => {
+            return this.plugin.state.updateBehavior(PDBeStructureQualityReport, params => { params.showTooltip = !params.showTooltip });
+        },
+        showToasts: () => {
+            PluginCommands.Toast.Show(this.plugin, {
+                title: 'Toast 1',
+                message: 'This is an example text, timeout 3s',
+                key: 'toast-1',
+                timeoutMs: 3000
+            });
+            PluginCommands.Toast.Show(this.plugin, {
+                title: 'Toast 2',
+                message: CustomToastMessage,
+                key: 'toast-2'
+            });
+        },
+        hideToasts: () => {
+            PluginCommands.Toast.Hide(this.plugin, { key: 'toast-1' });
+            PluginCommands.Toast.Hide(this.plugin, { key: 'toast-2' });
+        }
+    }
+}
+
+(window as any).BasicMolStarWrapper = new BasicWrapper();

src/examples/basic-wrapper/superposition.ts

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { Mat4 } from '../../mol-math/linear-algebra';
+import { QueryContext, StructureSelection } from '../../mol-model/structure';
+import { superposeStructures } from '../../mol-model/structure/structure/util/superposition';
+import { PluginStateObject as PSO } from '../../mol-plugin-state/objects';
+import { PluginContext } from '../../mol-plugin/context';
+import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
+import Expression from '../../mol-script/language/expression';
+import { compile } from '../../mol-script/runtime/query/compiler';
+import { StateObjectRef } from '../../mol-state';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { StateTransforms } from '../../mol-plugin-state/transforms';
+
+export type SuperpositionTestInput = {
+    pdbId: string,
+    auth_asym_id: string,
+    matrix: Mat4
+}[];
+
+export function buildStaticSuperposition(plugin: PluginContext, src: SuperpositionTestInput) {
+    return plugin.dataTransaction(async () => {
+        for (const s of src) {
+            const { structure } = await loadStructure(plugin, `https://www.ebi.ac.uk/pdbe/static/entry/${s.pdbId}_updated.cif`, 'mmcif');
+            await transform(plugin, structure, s.matrix);
+            const chain = await plugin.builders.structure.tryCreateComponentFromExpression(structure, chainSelection(s.auth_asym_id), `Chain ${s.auth_asym_id}`);
+            if (chain) await plugin.builders.structure.representation.addRepresentation(chain, { type: 'cartoon' });
+        }
+    })
+}
+
+export const StaticSuperpositionTestData: SuperpositionTestInput = [
+    {
+        pdbId: '1aj5', auth_asym_id: 'A', matrix: Mat4.identity()
+    },
+    {
+        pdbId: '1df0', auth_asym_id: 'B', matrix: Mat4.ofRows([
+            [0.406, 0.879, 0.248, -200.633],
+            [0.693, -0.473, 0.544, 73.403],
+            [0.596, -0.049, -0.802, -14.209],
+            [0, 0, 0, 1]])
+    },
+    {
+        pdbId: '1dvi', auth_asym_id: 'A', matrix: Mat4.ofRows([
+            [-0.053, -0.077, 0.996, -45.633],
+            [-0.312, 0.949, 0.057, -12.255],
+            [-0.949, -0.307, -0.074, 53.562],
+            [0, 0, 0, 1]])
+    }
+];
+
+export function dynamicSuperpositionTest(plugin: PluginContext, src: string[], comp_id: string) {
+    return plugin.dataTransaction(async () => {
+        for (const s of src) {
+            await loadStructure(plugin, `https://www.ebi.ac.uk/pdbe/static/entry/${s}_updated.cif`, 'mmcif');
+        }
+
+        const pivot = MS.struct.filter.first([
+            MS.struct.generator.atomGroups({
+                'residue-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.label_comp_id(), comp_id]),
+                'group-by': MS.struct.atomProperty.macromolecular.residueKey()
+            })
+        ]);
+
+        const rest = MS.struct.modifier.exceptBy({
+            0: MS.struct.modifier.includeSurroundings({
+                0: pivot,
+                radius: 5
+            }),
+            by: pivot
+        });
+
+        const query = compile<StructureSelection>(pivot);
+        const xs = plugin.managers.structure.hierarchy.current.structures;
+        const selections = xs.map(s => StructureSelection.toLociWithCurrentUnits(query(new QueryContext(s.cell.obj!.data))));
+
+        const transforms = superposeStructures(selections);
+
+        await siteVisual(plugin, xs[0].cell, pivot, rest);
+        for (let i = 1; i < selections.length; i++) {
+            await transform(plugin, xs[i].cell, transforms[i - 1].bTransform);
+            await siteVisual(plugin, xs[i].cell, pivot, rest);
+        }
+    });
+}
+
+async function siteVisual(plugin: PluginContext, s: StateObjectRef<PSO.Molecule.Structure>, pivot: Expression, rest: Expression) {
+    const center = await plugin.builders.structure.tryCreateComponentFromExpression(s, pivot, 'pivot');
+    if (center) await plugin.builders.structure.representation.addRepresentation(center, { type: 'ball-and-stick', color: 'residue-name' });
+
+    const surr = await plugin.builders.structure.tryCreateComponentFromExpression(s, rest, 'rest');
+    if (surr) await plugin.builders.structure.representation.addRepresentation(surr, { type: 'ball-and-stick', color: 'uniform', size: 'uniform', sizeParams: { value: 0.33 } });
+}
+
+async function loadStructure(plugin: PluginContext, url: string, format: BuiltInTrajectoryFormat, assemblyId?: string) {
+    const data = await plugin.builders.data.download({ url });
+    const trajectory = await plugin.builders.structure.parseTrajectory(data, format);
+    const model = await plugin.builders.structure.createModel(trajectory);
+    const structure = await plugin.builders.structure.createStructure(model, assemblyId ? { name: 'assembly', params: { id: assemblyId } } : void 0);
+
+    return { data, trajectory, model, structure };
+}
+
+function chainSelection(auth_asym_id: string) {
+    return MS.struct.generator.atomGroups({
+        'chain-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.auth_asym_id(), auth_asym_id])
+    });
+}
+
+function transform(plugin: PluginContext, s: StateObjectRef<PSO.Molecule.Structure>, matrix: Mat4) {
+    const b = plugin.state.data.build().to(s)
+        .insert(StateTransforms.Model.TransformStructureConformation, { transform: { name: 'matrix', params: matrix } });
+    return plugin.runTask(plugin.state.data.updateTree(b));
+}

src/examples/lighting/index.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Canvas3DProps } from '../../mol-canvas3d/canvas3d';
+import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginContext } from '../../mol-plugin/context';
+import './index.html';
+require('mol-plugin-ui/skin/light.scss')
+
+type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
+
+type _Preset = Pick<Canvas3DProps, 'multiSample' | 'postprocessing' | 'renderer'>
+type Preset = { [K in keyof _Preset]: Partial<_Preset[K]> }
+
+const Canvas3DPresets = {
+    illustrative: <Preset> {
+        multiSample: {
+            mode: 'temporal' as Canvas3DProps['multiSample']['mode']
+        },
+        postprocessing: {
+            occlusion: { name: 'on', params: { bias: 0.8, kernelSize: 6, radius: 64 } },
+            outline: { name: 'on', params: { scale: 1, threshold: 0.8 } }
+        },
+        renderer: {
+            ambientIntensity: 1,
+            lightIntensity: 0,
+        }
+    },
+    occlusion: <Preset> {
+        multiSample: {
+            mode: 'temporal' as Canvas3DProps['multiSample']['mode']
+        },
+        postprocessing: {
+            occlusion: { name: 'on', params: { bias: 0.8, kernelSize: 6, radius: 64 } },
+            outline: { name: 'off', params: { } }
+        },
+        renderer: {
+            ambientIntensity: 0.4,
+            lightIntensity: 0.6,
+        }
+    },
+    standard: <Preset> {
+        multiSample: {
+            mode: 'off' as Canvas3DProps['multiSample']['mode']
+        },
+        postprocessing: {
+            occlusion: { name: 'off', params: { } },
+            outline: { name: 'off', params: { } }
+        },
+        renderer: {
+            ambientIntensity: 0.4,
+            lightIntensity: 0.6,
+        }
+    }
+}
+
+type Canvas3DPreset = keyof typeof Canvas3DPresets
+
+class LightingDemo {
+    plugin: PluginContext;
+
+    init(target: string | HTMLElement) {
+        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
+            ...DefaultPluginSpec,
+            layout: {
+                initial: {
+                    isExpanded: false,
+                    showControls: false
+                },
+                controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' }
+            }
+        });
+
+        this.setPreset('illustrative');
+    }
+
+    setPreset(preset: Canvas3DPreset) {
+        const props = Canvas3DPresets[preset]
+        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: {
+            ...props,
+            multiSample: {
+                ...this.plugin.canvas3d!.props.multiSample,
+                ...props.multiSample
+            },
+            renderer: {
+                ...this.plugin.canvas3d!.props.renderer,
+                ...props.renderer
+            },
+            postprocessing: {
+                ...this.plugin.canvas3d!.props.postprocessing,
+                ...props.postprocessing
+            },
+        }});
+    }
+
+    async load({ url, format = 'mmcif', isBinary = false, assemblyId = '' }: LoadParams) {
+        await this.plugin.clear();
+
+        const data = await this.plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
+        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format);
+        const model = await this.plugin.builders.structure.createModel(trajectory);
+        const structure = await this.plugin.builders.structure.createStructure(model, assemblyId ? { name: 'assembly', params: { id: assemblyId } } : { name: 'deposited', params: { } });
+
+        const polymer = await this.plugin.builders.structure.tryCreateComponentStatic(structure, 'polymer');
+        if (polymer) await this.plugin.builders.structure.representation.addRepresentation(polymer, { type: 'spacefill', color: 'illustrative' });
+
+        const ligand = await this.plugin.builders.structure.tryCreateComponentStatic(structure, 'ligand');
+        if (ligand) await this.plugin.builders.structure.representation.addRepresentation(ligand, { type: 'ball-and-stick' });
+    }
+}
+
+(window as any).LightingDemo = new LightingDemo();

src/mol-canvas3d/canvas3d.ts

@@ -35,6 +35,7 @@ import { ImagePass, ImageProps } from './passes/image';
 import { Sphere3D } from '../mol-math/geometry';
 import { isDebugMode } from '../mol-util/debug';
 import { CameraHelperParams } from './helper/camera-helper';
+import { produce } from 'immer';
 
 export const Canvas3DParams = {
     camera: PD.Group({
@@ -93,9 +94,8 @@ interface Canvas3D {
     requestCameraReset(options?: { durationMs?: number, snapshot?: Partial<Camera.Snapshot> }): void
     readonly camera: Camera
     readonly boundingSphere: Readonly<Sphere3D>
-    downloadScreenshot(): void
     getPixelData(variant: GraphicsRenderVariant): PixelData
-    setProps(props: Partial<Canvas3DProps>): void
+    setProps(props: Partial<Canvas3DProps> | ((old: Canvas3DProps) => Partial<Canvas3DProps> | void)): void
     getImagePass(props: Partial<ImageProps>): ImagePass
 
     /** Returns a copy of the current Canvas3D instance props */
@@ -412,6 +412,31 @@ namespace Canvas3D {
             }
         }
 
+        function getProps(): Canvas3DProps {
+            const radius = scene.boundingSphere.radius > 0
+                ? 100 - Math.round((camera.transition.target.radius / scene.boundingSphere.radius) * 100)
+                : 0
+
+            return {
+                camera: {
+                    mode: camera.state.mode,
+                    helper: { ...drawPass.props.cameraHelper }
+                },
+                cameraFog: camera.state.fog > 0
+                    ? { name: 'on' as const, params: { intensity: camera.state.fog } }
+                    : { name: 'off' as const, params: {} },
+                cameraClipping: { far: camera.state.clipFar, radius },
+                cameraResetDurationMs: p.cameraResetDurationMs,
+                transparentBackground: p.transparentBackground,
+
+                postprocessing: { ...postprocessing.props },
+                multiSample: { ...multiSample.props },
+                renderer: { ...renderer.props },
+                trackball: { ...controls.props },
+                debug: { ...debugHelper.props }
+            }
+        }
+
         handleResize()
 
         return {
@@ -463,9 +488,6 @@ namespace Canvas3D {
             },
             camera,
             boundingSphere: scene.boundingSphere,
-            downloadScreenshot: () => {
-                // TODO
-            },
             getPixelData: (variant: GraphicsRenderVariant) => {
                 switch (variant) {
                     case 'color': return webgl.getDrawingBufferPixelData()
@@ -477,7 +499,11 @@ namespace Canvas3D {
             },
             didDraw,
             reprCount,
-            setProps: (props: Partial<Canvas3DProps>) => {
+            setProps: (properties) => {
+                const props: Partial<Canvas3DProps> = typeof properties === 'function'
+                    ? produce(getProps(), properties)
+                    : properties;
+
                 const cameraState: Partial<Camera.Snapshot> = Object.create(null)
                 if (props.camera && props.camera.mode !== undefined && props.camera.mode !== camera.state.mode) {
                     cameraState.mode = props.camera.mode

src/mol-plugin-state/builder/structure.ts

@@ -149,12 +149,12 @@ export class StructureBuilder {
         }, key, params?.tags);
     }
 
-    tryCreateComponentStatic(structure: StateObjectRef<SO.Molecule.Structure>, type: StaticStructureComponentType, key: string, params?: { label?: string, tags?: string[] }) {
+    tryCreateComponentStatic(structure: StateObjectRef<SO.Molecule.Structure>, type: StaticStructureComponentType, params?: { label?: string, tags?: string[] }) {
         return this.tryCreateComponent(structure, {
             type: { name: 'static', params: type },
             nullIfEmpty: true,
             label: (params?.label || '').trim()
-        }, key, params?.tags);
+        },  `static-${type}`, params?.tags);
     }
 
     tryCreateComponentFromSelection(structure: StateObjectRef<SO.Molecule.Structure>, selection: StructureSelectionQuery, key: string, params?: { label?: string, tags?: string[] }): Promise<StateObjectSelector<SO.Molecule.Structure> | undefined> {

src/mol-plugin-state/builder/structure/representation-preset.ts

@@ -245,7 +245,7 @@ const atomicDetail = StructureRepresentationPresetProvider({
 });
 
 export function presetStaticComponent(plugin: PluginContext, structure: StateObjectRef<PluginStateObject.Molecule.Structure>, type: StaticStructureComponentType, params?: { label?: string, tags?: string[] }) {
-    return plugin.builders.structure.tryCreateComponentStatic(structure, type, `static-${type}`, params);
+    return plugin.builders.structure.tryCreateComponentStatic(structure, type, params);
 }
 
 export function presetSelectionComponent(plugin: PluginContext, structure: StateObjectRef<PluginStateObject.Molecule.Structure>, query: keyof typeof Q, params?: { label?: string, tags?: string[] }) {

src/mol-plugin-state/manager/structure/hierarchy.ts

@@ -82,7 +82,7 @@ export class StructureHierarchyManager extends PluginComponent {
     }
 
     private sync(notify: boolean) {
-        if (!notify && this.dataState.behaviors.isUpdating.value) return;
+        if (!notify && this.dataState.inUpdate) return;
 
         if (this.state.syncedTree === this.dataState.tree) {
             if (notify && !this.state.notified) {

src/mol-plugin/behavior/static/misc.ts

@@ -7,14 +7,21 @@
 
 import { PluginContext } from '../../../mol-plugin/context';
 import { PluginCommands } from '../../commands';
+import { DefaultCanvas3DParams } from '../../../mol-canvas3d/canvas3d';
 
 export function registerDefault(ctx: PluginContext) {
     Canvas3DSetSettings(ctx);
 }
 
 export function Canvas3DSetSettings(ctx: PluginContext) {
+    PluginCommands.Canvas3D.ResetSettings.subscribe(ctx, () => {
+        ctx.canvas3d?.setProps(DefaultCanvas3DParams);
+    });
+
     PluginCommands.Canvas3D.SetSettings.subscribe(ctx, e => {
+        if (!ctx.canvas3d) return;
+
         ctx.canvas3d?.setProps(e.settings);
         ctx.events.canvas3d.settingsUpdated.next();
-    })
+    });
 }

src/mol-plugin/commands.ts

@@ -70,6 +70,7 @@ export const PluginCommands = {
         }
     },
     Canvas3D: {
-        SetSettings: PluginCommand<{ settings: Partial<Canvas3DProps> }>()
+        SetSettings: PluginCommand<{ settings: Partial<Canvas3DProps> | ((old: Canvas3DProps) => Partial<Canvas3DProps> | void) }>(),
+        ResetSettings: PluginCommand<{ }>()
     }
 }

src/mol-plugin/context.ts

@@ -8,7 +8,7 @@
 import { setAutoFreeze } from 'immer';
 import { List } from 'immutable';
 import { merge } from 'rxjs';
-import { Canvas3D } from '../mol-canvas3d/canvas3d';
+import { Canvas3D, DefaultCanvas3DParams } from '../mol-canvas3d/canvas3d';
 import { CustomProperty } from '../mol-model-props/common/custom-property';
 import { Model, Structure } from '../mol-model/structure';
 import { DataFormatRegistry } from '../mol-plugin-state/actions/data-format';
@@ -30,7 +30,7 @@ import { StateTransformParameters } from '../mol-plugin-ui/state/common';
 import { Representation } from '../mol-repr/representation';
 import { StructureRepresentationRegistry } from '../mol-repr/structure/registry';
 import { VolumeRepresentationRegistry } from '../mol-repr/volume/registry';
-import { State, StateBuilder, StateTree } from '../mol-state';
+import { State, StateBuilder, StateTree, StateTransform } from '../mol-state';
 import { Progress, Task } from '../mol-task';
 import { ColorTheme } from '../mol-theme/color';
 import { SizeTheme } from '../mol-theme/size';
@@ -234,6 +234,11 @@ export class PluginContext {
         this.tasks.requestAbort(progress, reason);
     }
 
+    clear(resetViewportSettings = false) {
+        if (resetViewportSettings) this.canvas3d?.setProps(DefaultCanvas3DParams);
+        return PluginCommands.State.RemoveObject(this, { state: this.state.data, ref: StateTransform.RootRef });
+    }
+
     dispose() {
         if (this.disposed) return;
         this.commands.dispose();

src/mol-state/state.ts

@@ -218,6 +218,13 @@ class State {
         });
     }
 
+    private _inUpdate = false;
+    /**
+     * Determines whether the state is currently "inside" updateTree function.
+     * This is different from "isUpdating" which wraps entire transactions.
+     */
+    get inUpdate() { return this._inUpdate; }
+
     /**
      * Queues up a reconciliation of the existing state tree.
      *
@@ -233,6 +240,8 @@ class State {
             const removed = await this.updateQueue.enqueue(params);
             if (!removed) return;
 
+            this._inUpdate = true;
+
             const snapshot = options?.canUndo ? this._tree.asImmutable() : void 0;
             let reverted = false;
 
@@ -248,6 +257,7 @@ class State {
 
                 return ret.cell;
             } finally {
+                this._inUpdate = false;
                 this.updateQueue.handled(params);
                 if (!this.inTransaction) {
                     this.behaviors.isUpdating.next(false);

webpack.config.common.js

@@ -91,12 +91,14 @@ function createNodeEntryPoint(name, dir, out) {
 }
 
 function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
+function createExample(name) { return createEntry(`examples/${name}/index`, `examples/${name}`, 'index') }
 function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
 function createNodeApp(name) { return createNodeEntryPoint('index', `apps/${name}`, name) }
 
 module.exports = {
     createApp,
     createEntry,
+    createExample,
     createBrowserTest,
     createNodeEntryPoint,
     createNodeApp

webpack.config.js

@@ -1,20 +1,15 @@
-const common = require('./webpack.config.common.js');
-const createApp = common.createApp; 
-const createEntry = common.createEntry;
-const createBrowserTest = common.createBrowserTest;
+const { createApp, createExample, createBrowserTest } = require('./webpack.config.common.js');
 
-module.exports = [
-    createApp('viewer'),
-    createApp('basic-wrapper'),
-    createEntry('examples/proteopedia-wrapper/index', 'examples/proteopedia-wrapper', 'index'),
-    createEntry('apps/demos/lighting/index', 'demos/lighting', 'index'),
+const apps = ['viewer'];
+const examples = ['proteopedia-wrapper', 'basic-wrapper', 'lighting'];
+const tests = [
+    'font-atlas',
+    'marching-cubes',
+    'render-lines', 'render-mesh', 'render-shape', 'render-spheres', 'render-structure', 'render-text'
+];
 
-    createBrowserTest('font-atlas'),
-    createBrowserTest('marching-cubes'),
-    createBrowserTest('render-lines'),
-    createBrowserTest('render-mesh'),
-    createBrowserTest('render-shape'),
-    createBrowserTest('render-spheres'),
-    createBrowserTest('render-structure'),
-    createBrowserTest('render-text'),
+module.exports = [
+    ...apps.map(createApp),
+    ...examples.map(createExample),
+    ...tests.map(createBrowserTest)
 ]