0.2.5

tweaked bottom and top height
improved canvas3d.resetCamera
2026-06-06 06:34:23 +08:00 · 2019-07-19 17:43:32 -07:00 · 2019-07-19 17:41:40 -07:00 · 2019-07-19 14:52:20 -07:00 · 2019-07-19 14:40:45 -07:00 · 2019-07-19 10:12:22 -07:00
148 changed files with 3722 additions and 1940 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,16 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"ms-vscode.vscode-typescript-tslint-plugin",
+		"slevesque.shader",
+		"stpn.vscode-graphql",
+		"wayou.vscode-todo-highlight"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ and navigate to `build/viewer`
 Install CIFTools `npm install ciftools -g`

    cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/mmcif.ts -p mmCIF
-    cifschema -mip ../../../../mol-data-o src/mol-io/reader/cif/schema/ccd.ts -p CCD
+    cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/ccd.ts -p CCD
    cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/bird.ts -p BIRD

 **GraphQL schemas**
@@ -95,7 +95,7 @@ Install CIFTools `npm install ciftools -g`
 ### Other scripts
 **Create chem comp bond table**

-    export NODE_PATH="lib"; node --max-old-space-size=8192 build/src/apps/chem-comp-bond/create-table.js build/data/ccb.bcif -b
+    export NODE_PATH="lib"; node --max-old-space-size=4096 lib/apps/chem-comp-bond/create-table.js build/data/ccb.bcif -b

 **Test model server**

@@ -133,14 +133,17 @@ To get syntax highlighting for shader and graphql files add the following to Vis

 ## Publish

-## Prerelease
+### Prerelease
    npm version prerelease # asumes the current version ends with '-dev.X'
    npm publish --tag next

-## Release
+### Release
    npm version 0.X.0 # provide valid semver string
    npm publish

+## Deploy
+    node ./scripts/deploy.js # currently updates the viewer on molstar.org/viewer
+
 ## Contributing
 Just open an issue or make a pull request. All contributions are welcome.

--- a/data/rcsb-graphql/codegen.js
+++ b/data/rcsb-graphql/codegen.js
@@ -4,7 +4,7 @@ const path = require('path')
 const basePath = path.join(__dirname, '..', '..', 'src', 'mol-model-props', 'rcsb', 'graphql')

 generate({
-    schema: 'http://rest-dev.rcsb.org/graphql',
+    schema: 'http://rest-staging.rcsb.org/graphql',
    documents: {
        [path.join(basePath, 'symmetry.gql.ts')]: {
            loader: path.join(__dirname, 'loader.js')
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "molstar",
-  "version": "0.2.2",
+  "version": "0.2.5",
  "description": "A comprehensive macromolecular library.",
  "homepage": "https://github.com/molstar/molstar#readme",
  "repository": {
@@ -63,52 +63,53 @@
  "devDependencies": {
    "benchmark": "^2.1.4",
    "circular-dependency-plugin": "^5.0.2",
-    "concurrently": "^4.1.0",
+    "concurrently": "^4.1.1",
    "cpx": "^1.5.0",
-    "css-loader": "^2.1.1",
+    "css-loader": "^3.1.0",
    "extra-watch-webpack-plugin": "^1.0.3",
-    "file-loader": "^3.0.1",
+    "file-loader": "^4.1.0",
+    "fs-extra": "^8.1.0",
    "graphql-code-generator": "^0.18.2",
    "graphql-codegen-time": "^0.18.2",
    "graphql-codegen-typescript-template": "^0.18.2",
    "jest": "^24.8.0",
    "jest-raw-loader": "^1.0.1",
-    "mini-css-extract-plugin": "^0.7.0",
+    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
-    "raw-loader": "^2.0.0",
+    "raw-loader": "^3.1.0",
    "resolve-url-loader": "^3.1.0",
    "sass-loader": "^7.1.0",
+    "simple-git": "^1.122.0",
    "style-loader": "^0.23.1",
    "ts-jest": "^24.0.2",
-    "tslint": "^5.17.0",
-    "typescript": "^3.5.1",
-    "uglify-js": "^3.6.0",
-    "util.promisify": "^1.0.0",
-    "webpack": "^4.32.2",
-    "webpack-cli": "^3.3.2"
+    "tslint": "^5.18.0",
+    "typescript": "^3.5.3",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "@types/argparse": "^1.0.36",
    "@types/benchmark": "^1.0.31",
    "@types/compression": "0.0.36",
-    "@types/express": "^4.16.1",
-    "@types/jest": "^24.0.13",
-    "@types/node": "^12.0.4",
-    "@types/node-fetch": "^2.3.4",
-    "@types/react": "^16.8.19",
+    "@types/express": "^4.17.0",
+    "@types/jest": "^24.0.15",
+    "@types/node": "^12.6.8",
+    "@types/node-fetch": "^2.3.7",
+    "@types/react": "^16.8.23",
    "@types/react-dom": "^16.8.4",
    "@types/swagger-ui-dist": "3.0.0",
-    "@types/webgl2": "0.0.4",
+    "@types/webgl2": "0.0.5",
    "argparse": "^1.0.10",
    "compression": "^1.7.4",
    "express": "^4.17.1",
-    "graphql": "^14.3.1",
+    "graphql": "^14.4.2",
    "immutable": "^3.8.2",
    "node-fetch": "^2.6.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "rxjs": "^6.5.2",
-    "swagger-ui-dist": "^3.22.2",
+    "swagger-ui-dist": "^3.23.1",
+    "util.promisify": "^1.0.0",
    "xhr2": "^0.2.0"
  }
 }
--- a/scripts/deploy.js
+++ b/scripts/deploy.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+const git = require('simple-git')
+const path = require('path')
+const fs = require("fs")
+const fse = require("fs-extra")
+
+const remoteUrl = "https://github.com/molstar/molstar.github.io.git"
+const buildDir = path.resolve(__dirname, '../build/')
+const deployDir = path.resolve(buildDir, 'deploy/')
+const localPath = path.resolve(deployDir, 'molstar.github.io/')
+
+function log(command, stdout, stderr) {
+    if (command) {
+        console.log('\n###', command)
+        stdout.pipe(process.stdout)
+        stderr.pipe(process.stderr)
+    }
+}
+
+function copyViewer() {
+    console.log('\n###', 'copy viewer files')
+    const viewerBuildPath = path.resolve(buildDir, '../build/viewer/')
+    const viewerDeployPath = path.resolve(localPath, 'viewer/')
+    fse.copySync(viewerBuildPath, viewerDeployPath, { overwrite: true })
+}
+
+if (!fs.existsSync(localPath)) {
+    console.log('\n###', 'create localPath')
+    fs.mkdirSync(localPath, { recursive: true })
+}
+
+process.chdir(localPath);
+
+if (!fs.existsSync(path.resolve(localPath, '.git/'))) {
+    console.log('\n###', 'clone repository')
+    git()
+        .outputHandler(log)
+        .clone(remoteUrl, localPath)
+        .fetch(['--all'])
+        .exec(copyViewer)
+        .add(['-A'])
+        .commit('updated viewer')
+        .push()
+} else {
+    console.log('\n###', 'update repository')
+    git()
+        .outputHandler(log)
+        .fetch(['--all'])
+        .reset(['--hard', 'origin/master'])
+        .exec(copyViewer)
+        .add(['-A'])
+        .commit('updated viewer')
+        .push()
+}
--- a/src/apps/chem-comp-bond/create-table.ts
+++ b/src/apps/chem-comp-bond/create-table.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -15,12 +15,13 @@ const readFile = util.promisify(fs.readFile)
 const writeFile = util.promisify(fs.writeFile)

 import { Progress } from '../../mol-task'
-import { Database, Table, DatabaseCollection, Column } from '../../mol-data/db'
+import { Database, Table, DatabaseCollection } from '../../mol-data/db'
 import { CIF } from '../../mol-io/reader/cif'
 import { CifWriter } from '../../mol-io/writer/cif'
 import { CCD_Schema } from '../../mol-io/reader/cif/schema/ccd'
 import { SetUtils } from '../../mol-util/set'
 import { DefaultMap } from '../../mol-util/map'
+import { mmCIF_chemCompBond_schema } from '../../mol-io/reader/cif/schema/mmcif-extras';

 export async function ensureAvailable(path: string, url: string) {
    if (FORCE_DOWNLOAD || !fs.existsSync(path)) {
@@ -74,16 +75,6 @@ export function getEncodedCif(name: string, database: Database<Database.Schema>,
 type CCB = Table<CCD_Schema['chem_comp_bond']>
 type CCA = Table<CCD_Schema['chem_comp_atom']>

-const ChemCompBond_Schema = {
-    comp_id: CCD_Schema['chem_comp_bond'].comp_id,
-    atom_id_1: CCD_Schema['chem_comp_bond'].atom_id_1,
-    atom_id_2: CCD_Schema['chem_comp_bond'].atom_id_2,
-    value_order: CCD_Schema['chem_comp_bond'].value_order,
-    pdbx_aromatic_flag: CCD_Schema['chem_comp_bond'].pdbx_aromatic_flag,
-    pdbx_stereo_config: CCD_Schema['chem_comp_bond'].pdbx_stereo_config,
-    molstar_protonation_variant: Column.Schema.Str()
-}
-
 function ccbKey(compId: string, atomId1: string, atomId2: string) {
    return atomId1 < atomId2 ? `${compId}:${atomId1}-${atomId2}` : `${compId}:${atomId2}-${atomId1}`
 }
@@ -202,14 +193,14 @@ async function createBonds() {
        }
    }

-    const bondTable = Table.ofArrays(ChemCompBond_Schema, {
+    const bondTable = Table.ofArrays(mmCIF_chemCompBond_schema, {
        comp_id, atom_id_1, atom_id_2, value_order,
        pdbx_aromatic_flag, pdbx_stereo_config, molstar_protonation_variant
    })

    const bondDatabase =  Database.ofTables(
        TABLE_NAME,
-        { chem_comp_bond: ChemCompBond_Schema },
+        { chem_comp_bond: mmCIF_chemCompBond_schema },
        { chem_comp_bond: bondTable }
    )

@@ -220,12 +211,15 @@ async function run(out: string, binary = false) {
    const bonds = await createBonds()

    const cif = getEncodedCif(TABLE_NAME, bonds, binary)
+    if (!fs.existsSync(path.dirname(out))) {
+        fs.mkdirSync(path.dirname(out));
+    }
    writeFile(out, cif)
 }

 const TABLE_NAME = 'CHEM_COMP_BONDS'

-const DATA_DIR = path.join(__dirname, '..', '..', '..', 'data')
+const DATA_DIR = path.join(__dirname, '..', '..', '..', 'build/data')
 const CCD_PATH = path.join(DATA_DIR, 'components.cif')
 const PVCD_PATH = path.join(DATA_DIR, 'aa-variants-v1.cif')
 const CCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/components.cif'
--- a/src/apps/viewer/index.ts
+++ b/src/apps/viewer/index.ts
@@ -29,6 +29,9 @@ function init() {
            initial: {
                isExpanded: true,
                showControls: !hideControls
+            },
+            controls: {
+                ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls
            }
        }
    };
--- a/src/examples/proteopedia-wrapper/changelog.md
+++ b/src/examples/proteopedia-wrapper/changelog.md
@@ -1,3 +1,12 @@
+== v3.3 ==
+
+* Camera Clipping.
+
+== v3.2 ==
+
+* Fixed assembly loading.
+* Better HET group focus.
+
 == v3.0 ==

 * Fixed initial camera zoom.
--- a/src/examples/proteopedia-wrapper/helpers.ts
+++ b/src/examples/proteopedia-wrapper/helpers.ts
@@ -105,6 +105,8 @@ export enum StateElements {
    ModelProps = 'model-props',
    Assembly = 'assembly',

+    VolumeStreaming = 'volume-streaming',
+
    Sequence = 'sequence',
    SequenceVisual = 'sequence-visual',
    Het = 'het',
@@ -113,5 +115,6 @@ export enum StateElements {
    Water = 'water',
    WaterVisual = 'water-visual',

-    HetGroupFocus = 'het-group-focus'
+    HetGroupFocus = 'het-group-focus',
+    HetGroupFocusGroup = 'het-group-focus-group'
 }
--- a/src/examples/proteopedia-wrapper/index.html
+++ b/src/examples/proteopedia-wrapper/index.html
@@ -40,6 +40,13 @@
                width: 100%;
                display: block;
            }
+
+            #volume-streaming-wrapper {
+                position: absolute;
+                top: 100px;
+                left: 780px;
+                width: 300px;
+            }
        </style>
        <link rel="stylesheet" type="text/css" href="app.css" />
        <script type="text/javascript" src="./index.js"></script>
@@ -55,6 +62,7 @@
            </select>
        </div>
        <div id="app"></div>
+        <div id="volume-streaming-wrapper"></div>
        <script>
            // it might be a good idea to define these colors in a separate script file 
            var CustomColors = [0x00ff00, 0x0000ff];
@@ -66,7 +74,7 @@

            function $(id) { return document.getElementById(id); }
        
-            var pdbId = '1eve', assemblyId= 'preferred';
+            var pdbId = '1cbs', assemblyId= 'preferred';
            var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
            var format = 'cif';
            
@@ -122,7 +130,11 @@
            addSeparator();

            addHeader('Camera');
-            addControl('Toggle Spin', () => PluginWrapper.toggleSpin());
+            addControl('Reset Position', () => PluginWrapper.camera.resetPosition());
+            addControl('Toggle Spin', () => PluginWrapper.camera.toggleSpin());
+            // Same as "wheel icon" and Viewport options
+            addControl('Clip', () => PluginWrapper.viewport.setSettings({ clip: [33, 66] }));
+            addControl('Reset Clip', () => PluginWrapper.viewport.setSettings({ clip: [1, 100] }));
            
            addSeparator();

@@ -141,7 +153,8 @@
            addSeparator();
            addHeader('Misc');

-            addControl('Apply Evo Cons', () => PluginWrapper.coloring.evolutionaryConservation());
+            addControl('Apply Evo Cons Style', () => PluginWrapper.coloring.evolutionaryConservation());
+            addControl('Apply Evo Cons Colors', () => PluginWrapper.coloring.evolutionaryConservation({ sequence: true, het: false, keepStyle: true }));
            addControl('Default Visuals', () => PluginWrapper.updateStyle());

            addSeparator();
@@ -151,6 +164,11 @@
            addHetGroupsContainer();

            addSeparator();
+            addHeader('Exp. Data');
+            addControl('Init', () => PluginWrapper.experimentalData.init($('volume-streaming-wrapper')));
+            addControl('Remove', () => PluginWrapper.experimentalData.remove());
+
+            addSeparator(); 
            addHeader('State');

            var snapshot;
--- a/src/examples/proteopedia-wrapper/index.ts
+++ b/src/examples/proteopedia-wrapper/index.ts
@@ -4,6 +4,7 @@
 * @author David Sehnal <david.sehnal@gmail.com>
 */

+import * as ReactDOM from 'react-dom';
 import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
 import './index.html'
 import { PluginContext } from '../../mol-plugin/context';
@@ -13,11 +14,11 @@ import { StructureRepresentation3DHelpers } from '../../mol-plugin/state/transfo
 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, StateObject } from '../../mol-state';
+import { StateBuilder, StateObject, StateSelection } from '../../mol-state';
 import { EvolutionaryConservation } from './annotation';
 import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo, StateElements } from './helpers';
 import { RxEventHelper } from '../../mol-util/rx-event-helper';
-import { ControlsWrapper } from './ui/controls';
+import { ControlsWrapper, volumeStreamingControls } from './ui/controls';
 import { PluginState } from '../../mol-plugin/state';
 import { Scheduler } from '../../mol-task';
 import { createProteopediaCustomTheme } from './coloring';
@@ -26,6 +27,9 @@ import { BuiltInStructureRepresentations } from '../../mol-repr/structure/regist
 import { BuiltInColorThemes } from '../../mol-theme/color';
 import { BuiltInSizeThemes } from '../../mol-theme/size';
 import { ColorNames } from '../../mol-util/color/tables';
+import { InitVolumeStreaming, CreateVolumeStreamingInfo } from '../../mol-plugin/behavior/dynamic/volume-streaming/transformers';
+import { ParamDefinition } from '../../mol-util/param-definition';
+import { DefaultCanvas3DParams, Canvas3DProps } from '../../mol-canvas3d/canvas3d';
 // import { Vec3 } from 'mol-math/linear-algebra';
 // import { ParamDefinition } from 'mol-util/param-definition';
 // import { Text } from 'mol-geo/geometry/text/text';
@@ -33,7 +37,7 @@ require('../../mol-plugin/skin/light.scss')

 class MolStarProteopediaWrapper {
    static VERSION_MAJOR = 3;
-    static VERSION_MINOR = 1;
+    static VERSION_MINOR = 3;

    private _ev = RxEventHelper.create();

@@ -78,7 +82,7 @@ class MolStarProteopediaWrapper {
        return b.apply(StateTransforms.Data.Download, { url, isBinary: false })
    }

-    private model(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats, assemblyId: string) {
+    private model(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats) {
        const parsed = format === 'cif'
            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif)
            : b.apply(StateTransforms.Model.TrajectoryFromPDB);
@@ -187,7 +191,7 @@ class MolStarProteopediaWrapper {
    }

    private loadedParams: LoadParams = { url: '', format: 'cif', assemblyId: '' };
-    async load({ url, format = 'cif', assemblyId = '', representationStyle }: LoadParams) {
+    async load({ url, format = 'cif', assemblyId = 'deposited', representationStyle }: LoadParams) {
        let loadType: 'full' | 'update' = 'full';

        const state = this.plugin.state.dataState;
@@ -200,14 +204,17 @@ class MolStarProteopediaWrapper {

        if (loadType === 'full') {
            await PluginCommands.State.RemoveObject.dispatch(this.plugin, { state, ref: state.tree.root.ref });
-            const modelTree = this.model(this.download(state.build().toRoot(), url), format, assemblyId);
+            const modelTree = this.model(this.download(state.build().toRoot(), url), format);
            await this.applyState(modelTree);
            const info = await this.doInfo(true);
-            const structureTree = this.structure((assemblyId === 'preferred' && info && info.preferredAssemblyId) || assemblyId);
+            const asmId = (assemblyId === 'preferred' && info && info.preferredAssemblyId) || assemblyId;
+            const structureTree = this.structure(asmId);
            await this.applyState(structureTree);
        } else {
            const tree = state.build();
-            tree.to(StateElements.Assembly).update(StateTransforms.Model.StructureAssemblyFromModel, p => ({ ...p, id: assemblyId || 'deposited' }));
+            const info = await this.doInfo(true);
+            const asmId = (assemblyId === 'preferred' && info && info.preferredAssemblyId) || assemblyId;
+            tree.to(StateElements.Assembly).update(StateTransforms.Model.StructureAssemblyFromModel, p => ({ ...p, id: asmId }));
            await this.applyState(tree);
        }

@@ -235,6 +242,38 @@ class MolStarProteopediaWrapper {
        if (!spinning) PluginCommands.Camera.Reset.dispatch(this.plugin, { });
    }

+    viewport = {
+        setSettings: (settings?: Canvas3DProps) => {
+            PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, {
+                settings: settings || DefaultCanvas3DParams
+            });
+        }
+    };
+
+    camera = {
+        toggleSpin: () => this.toggleSpin(),
+        resetPosition: () => PluginCommands.Camera.Reset.dispatch(this.plugin, { }),
+        // setClip: (options?: { distance?: number, near?: number, far?: number }) => {
+        //     if (!options) {
+        //         PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, {
+        //             settings: {
+        //                 cameraClipDistance: DefaultCanvas3DParams.cameraClipDistance,
+        //                 clip: DefaultCanvas3DParams.clip
+        //             }
+        //         });
+        //         return;
+        //     }
+
+        //     options = options || { };
+        //     const props = this.plugin.canvas3d.props;
+        //     const clipNear = typeof options.near === 'undefined' ? props.clip[0] : options.near;
+        //     const clipFar = typeof options.far === 'undefined' ? props.clip[1] : options.far;
+        //     PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, {
+        //         settings: { cameraClipDistance: options.distance, clip: [clipNear, clipFar] }
+        //     });
+        // }
+    }
+
    animate = {
        modelIndex: {
            maxFPS: 8,
@@ -247,53 +286,83 @@ class MolStarProteopediaWrapper {
    }

    coloring = {
-        evolutionaryConservation: async () => {
-            await this.updateStyle({ sequence: { kind: 'spacefill' } }, true);
+        evolutionaryConservation: async (params?: { sequence?: boolean, het?: boolean, keepStyle?: boolean }) => {
+            if (!params || !params.keepStyle) {
+                await this.updateStyle({ sequence: { kind: 'spacefill' } }, true);
+            }

            const state = this.state;

            // const visuals = state.selectQ(q => q.ofType(PluginStateObject.Molecule.Structure.Representation3D).filter(c => c.transform.transformer === StateTransforms.Representation.StructureRepresentation3D));
-            const tree = state.build();
-            const colorTheme = { name: EvolutionaryConservation.Descriptor.name, params: this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.get(EvolutionaryConservation.Descriptor.name).defaultValues };
-
-            tree.to(StateElements.SequenceVisual).update(StateTransforms.Representation.StructureRepresentation3D, old => ({ ...old, colorTheme }));
            // for (const v of visuals) {
            // }

+            const tree = state.build();
+            const colorTheme = { name: EvolutionaryConservation.Descriptor.name, params: this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.get(EvolutionaryConservation.Descriptor.name).defaultValues };
+
+            if (!params || !!params.sequence) {
+                tree.to(StateElements.SequenceVisual).update(StateTransforms.Representation.StructureRepresentation3D, old => ({ ...old, colorTheme }));
+            }
+            if (params && !!params.het) {
+                tree.to(StateElements.HetVisual).update(StateTransforms.Representation.StructureRepresentation3D, old => ({ ...old, colorTheme }));
+            }
+
            await PluginCommands.State.Update.dispatch(this.plugin, { state, tree });
        }
    }

+    private experimentalDataElement?: Element = void 0;
+    experimentalData = {
+        init: async (parent: Element) => {
+            const asm = this.state.select(StateElements.Assembly)[0].obj!;
+            const params = ParamDefinition.getDefaultValues(InitVolumeStreaming.definition.params!(asm, this.plugin));
+            params.behaviorRef = StateElements.VolumeStreaming;
+            params.defaultView = 'box';
+            await this.plugin.runTask(this.state.applyAction(InitVolumeStreaming, params, StateElements.Assembly));
+            this.experimentalDataElement = parent;
+            volumeStreamingControls(this.plugin, parent);
+        },
+        remove: () => {
+            const r = this.state.select(StateSelection.Generators.ofTransformer(CreateVolumeStreamingInfo))[0];
+            if (!r) return;
+            PluginCommands.State.RemoveObject.dispatch(this.plugin, { state: this.state, ref: r.transform.ref });
+            if (this.experimentalDataElement) {
+                ReactDOM.unmountComponentAtNode(this.experimentalDataElement);
+                this.experimentalDataElement = void 0;
+            }
+        }
+    }
+
    hetGroups = {
        reset: () => {
            const update = this.state.build().delete(StateElements.HetGroupFocus);
            PluginCommands.State.Update.dispatch(this.plugin, { state: this.state, tree: update });
            PluginCommands.Camera.Reset.dispatch(this.plugin, { });
        },
-        focusFirst: async (resn: string) => {
+        focusFirst: async (compId: string) => {
            if (!this.state.transforms.has(StateElements.Assembly)) return;
+            await PluginCommands.Camera.Reset.dispatch(this.plugin, { });

            // const asm = (this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure).data;

            const update = this.state.build();

-            update.delete(StateElements.HetGroupFocus);
+            update.delete(StateElements.HetGroupFocusGroup);

-            const surroundings = 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(), resn]),
-                        'group-by': MS.struct.atomProperty.macromolecular.residueKey()
-                    })
-                ]),
-                radius: 5,
-                'as-whole-residues': true
-            });
+            const core = MS.struct.filter.first([
+                MS.struct.generator.atomGroups({
+                    'residue-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.label_comp_id(), compId]),
+                    'group-by': MS.core.str.concat([MS.struct.atomProperty.core.operatorName(), MS.struct.atomProperty.macromolecular.residueKey()])
+                })
+            ]);
+            const surroundings = MS.struct.modifier.includeSurroundings({ 0: core, radius: 5, 'as-whole-residues': true });

-            const sel = update.to(StateElements.Assembly)
-                .apply(StateTransforms.Model.StructureSelection, { label: resn, query: surroundings }, { ref: StateElements.HetGroupFocus });
+            const group = update.to(StateElements.Assembly).group(StateTransforms.Misc.CreateGroup, { label: compId }, { ref: StateElements.HetGroupFocusGroup });

-            sel.apply(StateTransforms.Representation.StructureRepresentation3D, this.createSurVisualParams());
+            group.apply(StateTransforms.Model.StructureSelection, { label: 'Core', query: core }, { ref: StateElements.HetGroupFocus })
+                .apply(StateTransforms.Representation.StructureRepresentation3D, this.createCoreVisualParams());
+            group.apply(StateTransforms.Model.StructureSelection, { label: 'Surroundings', query: surroundings })
+                .apply(StateTransforms.Representation.StructureRepresentation3D, this.createSurVisualParams());
            // sel.apply(StateTransforms.Representation.StructureLabels3D, {
            //     target: { name: 'residues', params: { } },
            //     options: {
@@ -313,7 +382,7 @@ class MolStarProteopediaWrapper {
            // const position = Vec3.sub(Vec3.zero(), sphere.center, asmCenter);
            // Vec3.normalize(position, position);
            // Vec3.scaleAndAdd(position, sphere.center, position, sphere.radius);
-            const snapshot = this.plugin.canvas3d.camera.getFocus(sphere.center, 0.75 * sphere.radius);
+            const snapshot = this.plugin.canvas3d.camera.getFocus(sphere.center, Math.max(sphere.radius, 5));
            PluginCommands.Camera.SetSnapshot.dispatch(this.plugin, { snapshot, durationMs: 250 });
        }
    }
@@ -327,6 +396,15 @@ class MolStarProteopediaWrapper {
        });
    }

+    private createCoreVisualParams() {
+        const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
+        return StructureRepresentation3DHelpers.createParams(this.plugin, asm.data, {
+            repr: BuiltInStructureRepresentations['ball-and-stick'],
+            // color: [BuiltInColorThemes.uniform, () => ({ value: ColorNames.gray })],
+            // size: [BuiltInSizeThemes.uniform, () => ({ value: 0.33 } )]
+        });
+    }
+
    snapshot = {
        get: () => {
            return this.plugin.state.getSnapshot();
--- a/src/examples/proteopedia-wrapper/ui/controls.tsx
+++ b/src/examples/proteopedia-wrapper/ui/controls.tsx
@@ -5,10 +5,14 @@
 */

 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { PluginUIComponent } from '../../../mol-plugin/ui/base';
-import { CurrentObject } from '../../../mol-plugin/ui/plugin';
+import { CurrentObject, PluginContextContainer } from '../../../mol-plugin/ui/plugin';
 import { AnimationControls } from '../../../mol-plugin/ui/state/animation';
 import { CameraSnapshots } from '../../../mol-plugin/ui/camera';
+import { PluginContext } from '../../../mol-plugin/context';
+import { TransformUpdaterControl } from '../../../mol-plugin/ui/state/update-transform';
+import { StateElements } from '../helpers';

 export class ControlsWrapper extends PluginUIComponent {
    render() {
@@ -18,4 +22,11 @@ export class ControlsWrapper extends PluginUIComponent {
            <CameraSnapshots />
        </div>;
    }
+}
+
+export function volumeStreamingControls(plugin: PluginContext, parent: Element) {
+    ReactDOM.render(<PluginContextContainer plugin={plugin}>
+            <TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} />
+        </PluginContextContainer>,
+        parent);
 }
--- a/src/mol-app/component/parameter/boolean.tsx
+++ b/src/mol-app/component/parameter/boolean.tsx
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-
-export interface BooleanParamComponentProps {
-    label: string
-    param: PD.Boolean
-    value: boolean
-    onChange(v: boolean): void
-}
-
-export interface BooleanParamComponentState {
-    value: boolean
-}
-
-export class BooleanParamComponent extends React.Component<BooleanParamComponentProps, BooleanParamComponentState> {
-    state = {
-        value: this.props.value
-    }
-
-    onChange(value: boolean) {
-        this.setState({ value })
-        this.props.onChange(value)
-    }
-
-    render() {
-        return <div>
-            <span>{this.props.label} </span>
-            <button onClick={e => this.onChange(!this.state.value) }>
-                {this.state.value ? 'Off' : 'On'}
-            </button>
-        </div>;
-    }
-}
--- a/src/mol-app/component/parameter/color.tsx
+++ b/src/mol-app/component/parameter/color.tsx
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-import { ColorNames } from '../../../mol-util/color/tables';
-import { Color } from '../../../mol-util/color';
-
-export interface ColorParamComponentProps {
-    label: string
-    param: PD.Color
-    value: Color
-    onChange(v: Color): void
-}
-
-export interface ColorParamComponentState {
-    value: Color
-}
-
-export class ColorParamComponent extends React.Component<ColorParamComponentProps, ColorParamComponentState> {
-    state = {
-        value: this.props.value
-    }
-
-    onChange(value: Color) {
-        this.setState({ value })
-        this.props.onChange(value)
-    }
-
-    render() {
-        return <div>
-            <span>{this.props.label} </span>
-            <select value={this.state.value} onChange={e => this.onChange(Color(parseInt(e.target.value))) }>
-                {Object.keys(ColorNames).map(name => {
-                    return <option key={name} value={(ColorNames as { [k: string]: Color})[name]}>{name}</option>
-                })}
-            </select>
-        </div>;
-    }
-}
--- a/src/mol-app/component/parameter/multi-select.tsx
+++ b/src/mol-app/component/parameter/multi-select.tsx
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-
-export interface MultiSelectParamComponentProps<T extends string> {
-    label: string
-    param: PD.MultiSelect<T>
-    value: T[]
-    onChange(v: T[]): void
-}
-
-export interface MultiSelectParamComponentState<T extends string> {
-    value: T[]
-}
-
-export class MultiSelectParamComponent<T extends string> extends React.Component<MultiSelectParamComponentProps<T>, MultiSelectParamComponentState<T>> {
-    state = {
-        value: this.props.value
-    }
-
-    onChange(value: T[]) {
-        this.setState({ value })
-        this.props.onChange(value)
-    }
-
-    render() {
-        return <div>
-            <span>{this.props.label} </span>
-            <select multiple value={this.state.value} onChange={e => {
-                const value = Array.from(e.target.options).filter(option => option.selected).map(option => option.value)
-                this.onChange(value as T[])
-            }}>
-                {this.props.param.options.map(v => {
-                    const [value, label] = v
-                    return <option key={label} value={value}>{label}</option>
-                })}
-            </select>
-        </div>;
-    }
-}
--- a/src/mol-app/component/parameter/number.tsx
+++ b/src/mol-app/component/parameter/number.tsx
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-
-export interface NumberParamComponentProps {
-    label: string
-    param: PD.Numeric
-    value: number
-    onChange(v: number): void
-}
-
-export interface NumberParamComponentState {
-    value: number
-}
-
-export class NumberParamComponent extends React.Component<NumberParamComponentProps, NumberParamComponentState> {
-    state = {
-        value: this.props.value
-    }
-
-    onChange(valueStr: string) {
-        const value = this.props.param.step && Number.isInteger(this.props.param.step) ? parseInt(valueStr) : parseFloat(valueStr)
-        this.setState({ value })
-        this.props.onChange(value)
-    }
-
-    render() {
-        return <div>
-            <span>{this.props.label} </span>
-            <input type='range'
-                value={this.state.value}
-                min={this.props.param.min}
-                max={this.props.param.max}
-                step={this.props.param.step}
-                onChange={e => this.onChange(e.currentTarget.value)}
-            >
-            </input>
-        </div>;
-    }
-}
--- a/src/mol-app/component/parameter/select.tsx
+++ b/src/mol-app/component/parameter/select.tsx
@@ -1,42 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-
-export interface SelectParamComponentProps<T extends string> {
-    label: string
-    param: PD.Select<T>
-    value: T
-    onChange(v: T): void
-}
-
-export interface SelectParamComponentState<T extends string> {
-    value: T
-}
-
-export class SelectParamComponent<T extends string> extends React.Component<SelectParamComponentProps<T>, SelectParamComponentState<T>> {
-    state = {
-        value: this.props.value
-    }
-
-    onChange(value: T) {
-        this.setState({ value })
-        this.props.onChange(value)
-    }
-
-    render() {
-        return <div>
-            <span>{this.props.label} </span>
-            <select value={this.state.value} onChange={e => this.onChange(e.target.value as T) }>
-                {this.props.param.options.map(v => {
-                    const [value, label] = v
-                    return <option key={label} value={value}>{label}</option>
-                })}
-            </select>
-        </div>;
-    }
-}
--- a/src/mol-app/component/parameter/text.tsx
+++ b/src/mol-app/component/parameter/text.tsx
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-
-export interface TextParamComponentProps {
-    label: string
-    param: PD.Text
-    value: string
-    onChange(v: string): void
-}
-
-export interface TextParamComponentState {
-    value: string
-}
-
-export class TextParamComponent extends React.Component<TextParamComponentProps, TextParamComponentState> {
-    state = {
-        value: this.props.value
-    }
-
-    onChange(value: string) {
-        this.setState({ value })
-        this.props.onChange(value)
-    }
-
-    render() {
-        return <div>
-            <span>{this.props.label} </span>
-            <input type='text'
-                value={this.state.value}
-                onChange={e => this.onChange(e.currentTarget.value)}
-            >
-            </input>
-        </div>;
-    }
-}
--- a/src/mol-app/component/parameters.tsx
+++ b/src/mol-app/component/parameters.tsx
@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as React from 'react'
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { BooleanParamComponent } from './parameter/boolean';
-import { NumberParamComponent } from './parameter/number';
-import { SelectParamComponent } from './parameter/select';
-import { MultiSelectParamComponent } from './parameter/multi-select';
-import { TextParamComponent } from './parameter/text';
-import { ColorParamComponent } from './parameter/color';
-import { camelCaseToWords } from '../../mol-util/string';
-
-interface ParametersProps<P extends PD.Params> {
-    params: P
-    values: { [k in keyof P]: P[k]['defaultValue'] }
-    onChange<K extends keyof P>(k: K, v: P[K]['defaultValue']): void
-}
-
-type ParametersState = {}
-
-function getParamComponent<P extends PD.Any>(label: string, param: PD.Any, value: P['defaultValue'], onChange: (v: P['defaultValue']) => void) {
-    switch (param.type) {
-        case 'boolean':
-            return <BooleanParamComponent label={label} param={param} value={value} onChange={onChange} />
-        case 'number':
-            return <NumberParamComponent label={label} param={param} value={value} onChange={onChange} />
-        case 'select':
-            return <SelectParamComponent label={label} param={param} value={value} onChange={onChange} />
-        case 'multi-select':
-            return <MultiSelectParamComponent label={label} param={param} value={value} onChange={onChange} />
-        case 'text':
-            return <TextParamComponent label={label} param={param} value={value} onChange={onChange} />
-        case 'color':
-            return <ColorParamComponent label={label} param={param} value={value} onChange={onChange} />
-    }
-    return ''
-}
-
-function getLabel(name: string, param: PD.Base<any>) {
-    return param.label === undefined ? camelCaseToWords(name) : param.label
-}
-
-export class ParametersComponent<P extends PD.Params> extends React.Component<ParametersProps<P>, ParametersState> {
-    onChange(k: string, value: any) {
-        this.props.onChange(k, value)
-    }
-
-    render() {
-        return <div style={{ width: '100%' }}>
-            { Object.keys(this.props.params).map(k => {
-                const param = this.props.params[k]
-                const value = this.props.values[k]
-                const label = getLabel(k, param)
-                return <div key={k}>
-                    {getParamComponent(label, param, value, v => this.onChange(k, v))}
-                </div>
-            })}
-        </div>;
-    }
-}
--- a/src/mol-app/component/sequence.tsx
+++ b/src/mol-app/component/sequence.tsx
@@ -1,81 +0,0 @@
-// /**
-//  * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
-//  *
-//  * @author David Sehnal <david.sehnal@gmail.com>
-//  */
-
-// import * as React from 'react'
-// import { Structure, StructureSequence, Queries, StructureSelection, StructureProperties, StructureQuery } from 'mol-model/structure';
-// import { EmptyLoci } from 'mol-model/loci';
-
-// export class SequenceView extends View<SequenceViewController, {}, {}> {
-//     render() {
-//         const s = this.controller.latestState.structure;
-//         if (!s) return <div className='molstar-sequence-view-wrap'>No structure available.</div>;
-
-//         const seqs = s.models[0].sequence.sequences;
-//         return <div className='molstar-sequence-view-wrap'>
-//             {seqs.map((seq, i) => <EntitySequence key={i} ctx={this.controller.context} seq={seq} structure={s} /> )}
-//         </div>;
-//     }
-// }
-
-// function createQuery(entityId: string, label_seq_id: number) {
-//     return Queries.generators.atoms({
-//         entityTest: ctx => StructureProperties.entity.id(ctx.element) === entityId,
-//         residueTest: ctx => StructureProperties.residue.label_seq_id(ctx.element) === label_seq_id
-//     });
-// }
-
-// // TODO: this is really ineffective and should be done using a canvas.
-// class EntitySequence extends React.Component<{ ctx: Context, seq: StructureSequence.Entity, structure: Structure }> {
-
-//     raiseInteractityEvent(seqId?: number) {
-//         if (typeof seqId === 'undefined') {
-//             InteractivityEvents.HighlightLoci.dispatch(this.props.ctx, EmptyLoci);
-//             return;
-//         }
-
-//         const query = createQuery(this.props.seq.entityId, seqId);
-//         const loci = StructureSelection.toLoci(StructureQuery.run(query, this.props.structure));
-//         if (loci.elements.length === 0) InteractivityEvents.HighlightLoci.dispatch(this.props.ctx, EmptyLoci);
-//         else InteractivityEvents.HighlightLoci.dispatch(this.props.ctx, loci);
-//     }
-
-
-//     render() {
-//         const { ctx, seq } = this.props;
-//         const { offset, sequence } = seq.sequence;
-
-//         const elems: JSX.Element[] = [];
-//         for (let i = 0, _i = sequence.length; i < _i; i++) {
-//             elems[elems.length] = <ResidueView ctx={ctx} seqId={offset + i} letter={sequence[i]} parent={this} key={i} />;
-//         }
-
-//         return <div style={{ wordWrap: 'break-word' }}>
-//             <span style={{ fontWeight: 'bold' }}>{this.props.seq.entityId}:{offset}&nbsp;</span>
-//             {elems}
-//         </div>;
-//     }
-// }
-
-// class ResidueView extends React.Component<{ ctx: Context, seqId: number, letter: string, parent: EntitySequence }, { isHighlighted: boolean }> {
-//     state = { isHighlighted: false }
-
-//     mouseEnter = () => {
-//         this.setState({ isHighlighted: true });
-//         this.props.parent.raiseInteractityEvent(this.props.seqId);
-//     }
-
-//     mouseLeave = () => {
-//         this.setState({ isHighlighted: false });
-//         this.props.parent.raiseInteractityEvent();
-//     }
-
-//     render() {
-//         return <span onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}
-//             style={{ cursor: 'pointer', backgroundColor: this.state.isHighlighted ? 'yellow' : void 0 }}>
-//             {this.props.letter}
-//         </span>;
-//     }
-// }
--- a/src/mol-canvas3d/camera.ts
+++ b/src/mol-canvas3d/camera.ts
@@ -90,25 +90,30 @@ class Camera implements Object3D {
        return ret;
    }

-    getFocus(target: Vec3, radius: number): Partial<Camera.Snapshot> {
+    getFocus(target: Vec3, radius: number, dir?: Vec3): Partial<Camera.Snapshot> {
        const fov = this.state.fov
        const { width, height } = this.viewport
        const aspect = width / height
        const aspectFactor = (height < width ? 1 : aspect)
        const currentDistance = Vec3.distance(this.state.position, target)
        const targetDistance = Math.abs((radius / aspectFactor) / Math.sin(fov / 2))
+
        const deltaDistance = Math.abs(currentDistance - targetDistance)

-        Vec3.sub(this.deltaDirection, this.state.position, target)
-        Vec3.setMagnitude(this.deltaDirection, this.state.direction, deltaDistance)
-        if (currentDistance < targetDistance) Vec3.negate(this.deltaDirection, this.deltaDirection)
-        Vec3.add(this.newPosition, this.state.position, this.deltaDirection)
+        if (dir) {
+            Vec3.setMagnitude(this.deltaDirection, dir, targetDistance)
+            Vec3.add(this.newPosition, target, this.deltaDirection)
+        } else {
+            Vec3.setMagnitude(this.deltaDirection, this.state.direction, deltaDistance)
+            if (currentDistance < targetDistance) Vec3.negate(this.deltaDirection, this.deltaDirection)
+            Vec3.add(this.newPosition, this.state.position, this.deltaDirection)
+        }

        return { target, position: Vec3.clone(this.newPosition) };
    }

-    focus(target: Vec3, radius: number) {
-        this.setState(this.getFocus(target, radius));
+    focus(target: Vec3, radius: number, dir?: Vec3) {
+        if (radius > 0) this.setState(this.getFocus(target, radius, dir));
    }

    // lookAt(target: Vec3) {
@@ -177,8 +182,8 @@ namespace Camera {
        return {
            mode: 'perspective',

-            position: Vec3.zero(),
-            direction: Vec3.create(0, 0, -1),
+            position: Vec3.create(0, 0, 100),
+            direction: Vec3.create(0, 0, 1),
            up: Vec3.create(0, 1, 0),

            target: Vec3.create(0, 0, 0),
@@ -250,7 +255,7 @@ function updateOrtho(camera: Camera) {
    let top = cy + dy
    let bottom = cy - dy

-    if (viewOffset && viewOffset.enabled) {
+    if (viewOffset.enabled) {
        const zoomW = zoom / (viewOffset.width / viewOffset.fullWidth)
        const zoomH = zoom / (viewOffset.height / viewOffset.fullHeight)
        const scaleW = (fullRight - fullLeft) / viewOffset.width
@@ -279,7 +284,7 @@ function updatePers(camera: Camera) {
    let width = aspect * height
    let left = -0.5 * width

-    if (viewOffset && viewOffset.enabled) {
+    if (viewOffset.enabled) {
        left += viewOffset.offsetX * width / viewOffset.fullWidth
        top -= viewOffset.offsetY * height / viewOffset.fullHeight
        width *= viewOffset.width / viewOffset.fullWidth
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/src/mol-canvas3d/canvas3d.ts
@@ -17,7 +17,7 @@ import { Representation } from '../mol-repr/representation';
 import Scene from '../mol-gl/scene';
 import { GraphicsRenderVariant } from '../mol-gl/webgl/render-item';
 import { PickingId } from '../mol-geo/geometry/picking';
-import { MarkerAction } from '../mol-geo/geometry/marker-data';
+import { MarkerAction } from '../mol-util/marker-action';
 import { Loci, EmptyLoci, isEmptyLoci } from '../mol-model/loci';
 import { Camera } from './camera';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
@@ -31,6 +31,7 @@ import { PixelData } from '../mol-util/image';
 import { readTexture } from '../mol-gl/compute/util';
 import { DrawPass } from './passes/draw';
 import { PickPass } from './passes/pick';
+import { Task } from '../mol-task';

 export const Canvas3DParams = {
    // TODO: FPS cap?
@@ -46,6 +47,7 @@ export const Canvas3DParams = {
    trackball: PD.Group(TrackballControlsParams),
    debug: PD.Group(DebugHelperParams)
 }
+export const DefaultCanvas3DParams = PD.getDefaultValues(Canvas3DParams);
 export type Canvas3DProps = PD.Values<typeof Canvas3DParams>

 export { Canvas3D }
@@ -66,6 +68,7 @@ interface Canvas3D {
    getLoci: (pickingId: PickingId) => Representation.Loci

    readonly didDraw: BehaviorSubject<now.Timestamp>
+    readonly reprCount: BehaviorSubject<number>

    handleResize: () => void
    /** Focuses camera on scene's bounding sphere, centered and zoomed. */
@@ -85,12 +88,13 @@ interface Canvas3D {
 }

 const requestAnimationFrame = typeof window !== 'undefined' ? window.requestAnimationFrame : (f: (time: number) => void) => setImmediate(()=>f(Date.now()))
+const DefaultRunTask = (task: Task<unknown>) => task.run()

 namespace Canvas3D {
-    export interface HighlightEvent { current: Representation.Loci, prev: Representation.Loci, modifiers?: ModifiersKeys }
+    export interface HighlightEvent { current: Representation.Loci, modifiers?: ModifiersKeys }
    export interface ClickEvent { current: Representation.Loci, buttons: ButtonsType, modifiers: ModifiersKeys }

-    export function fromCanvas(canvas: HTMLCanvasElement, props: Partial<Canvas3DProps> = {}) {
+    export function fromCanvas(canvas: HTMLCanvasElement, props: Partial<Canvas3DProps> = {}, runTask = DefaultRunTask) {
        const gl = getGLContext(canvas, {
            alpha: false,
            antialias: true,
@@ -99,11 +103,11 @@ namespace Canvas3D {
        })
        if (gl === null) throw new Error('Could not create a WebGL rendering context')
        const input = InputObserver.fromElement(canvas)
-        return Canvas3D.create(gl, input, props)
+        return Canvas3D.create(gl, input, props, runTask)
    }

-    export function create(gl: GLRenderingContext, input: InputObserver, props: Partial<Canvas3DProps> = {}): Canvas3D {
-        const p = { ...PD.getDefaultValues(Canvas3DParams), ...props }
+    export function create(gl: GLRenderingContext, input: InputObserver, props: Partial<Canvas3DProps> = {}, runTask = DefaultRunTask): Canvas3D {
+        const p = { ...DefaultCanvas3DParams, ...props }

        const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>()
        const reprUpdatedSubscriptions = new Map<Representation.Any, Subscription>()
@@ -115,7 +119,7 @@ namespace Canvas3D {
        const camera = new Camera({
            near: 0.1,
            far: 10000,
-            position: Vec3.create(0, 0, 10),
+            position: Vec3.create(0, 0, 100),
            mode: p.cameraMode
        })

@@ -135,8 +139,8 @@ namespace Canvas3D {
        const postprocessing = new PostprocessingPass(webgl, camera, drawPass, p.postprocessing)
        const multiSample = new MultiSamplePass(webgl, camera, drawPass, postprocessing, p.multiSample)

-        let isUpdating = false
        let drawPending = false
+        let cameraResetRequested: boolean | Vec3 = false

        function getLoci(pickingId: PickingId) {
            let loci: Loci = EmptyLoci
@@ -201,7 +205,7 @@ namespace Canvas3D {
        }

        function render(variant: 'pick' | 'draw', force: boolean) {
-            if (isUpdating) return false
+            if (scene.isCommiting) return false

            let didRender = false
            controls.update(currentTime);
@@ -261,8 +265,22 @@ namespace Canvas3D {
            return pickPass.identify(x, y)
        }

+        function commit(renderObjects?: readonly GraphicsRenderObject[]) {
+            scene.update(renderObjects, false)
+
+            runTask(scene.commit()).then(() => {
+                if (cameraResetRequested && !scene.isCommiting) {
+                    const dir = typeof cameraResetRequested === 'boolean' ? undefined : cameraResetRequested
+                    camera.focus(scene.boundingSphere.center, scene.boundingSphere.radius, dir)
+                    cameraResetRequested = false
+                }
+                if (debugHelper.isEnabled) debugHelper.update()
+                requestDraw(true)
+                reprCount.next(reprRenderObjects.size)
+            })
+        }
+
        function add(repr: Representation.Any) {
-            isUpdating = true
            const oldRO = reprRenderObjects.get(repr)
            const newRO = new Set<GraphicsRenderObject>()
            repr.renderObjects.forEach(o => newRO.add(o))
@@ -276,11 +294,7 @@ namespace Canvas3D {
                repr.renderObjects.forEach(o => scene.add(o))
            }
            reprRenderObjects.set(repr, newRO)
-            scene.update(repr.renderObjects, false)
-            if (debugHelper.isEnabled) debugHelper.update()
-            isUpdating = false
-            requestDraw(true)
-            reprCount.next(reprRenderObjects.size)
+            commit(repr.renderObjects)
        }

        handleResize()
@@ -301,14 +315,9 @@ namespace Canvas3D {
                }
                const renderObjects = reprRenderObjects.get(repr)
                if (renderObjects) {
-                    isUpdating = true
                    renderObjects.forEach(o => scene.remove(o))
                    reprRenderObjects.delete(repr)
-                    scene.update(void 0, false)
-                    if (debugHelper.isEnabled) debugHelper.update()
-                    isUpdating = false
-                    requestDraw(true)
-                    reprCount.next(reprRenderObjects.size)
+                    commit()
                }
            },
            update: (repr, keepSphere) => {
@@ -333,9 +342,13 @@ namespace Canvas3D {
            getLoci,

            handleResize,
-            resetCamera: () => {
-                camera.focus(scene.boundingSphere.center, scene.boundingSphere.radius)
-                requestDraw(true);
+            resetCamera: (dir?: Vec3) => {
+                if (scene.isCommiting) {
+                    cameraResetRequested = dir || true
+                } else {
+                    camera.focus(scene.boundingSphere.center, scene.boundingSphere.radius, dir)
+                    requestDraw(true);
+                }
            },
            camera,
            downloadScreenshot: () => {
@@ -351,6 +364,7 @@ namespace Canvas3D {
                }
            },
            didDraw,
+            reprCount,
            setProps: (props: Partial<Canvas3DProps>) => {
                if (props.cameraMode !== undefined && props.cameraMode !== camera.state.mode) {
                    camera.setState({ mode: props.cameraMode })
--- a/src/mol-canvas3d/helper/bounding-sphere-helper.ts
+++ b/src/mol-canvas3d/helper/bounding-sphere-helper.ts
@@ -81,7 +81,8 @@ export class BoundingSphereHelper {
            }
        })

-        this.scene.update(void 0, false);
+        this.scene.update(void 0, false)
+        this.scene.syncCommit()
    }

    syncVisibility() {
--- a/src/mol-canvas3d/helper/interaction-events.ts
+++ b/src/mol-canvas3d/helper/interaction-events.ts
@@ -59,7 +59,7 @@ export class Canvas3dInteractionHelper {

        const loci = this.getLoci(this.id);
        if (!Representation.Loci.areEqual(this.prevLoci, loci)) {
-            this.events.highlight.next({ current: loci, prev: this.prevLoci, modifiers: this.modifiers });
+            this.events.highlight.next({ current: loci, modifiers: this.modifiers });
            this.prevLoci = loci;
        }
    }
@@ -75,9 +75,8 @@ export class Canvas3dInteractionHelper {
    leave() {
        this.inside = false;
        if (this.prevLoci.loci !== EmptyLoci) {
-            const prev = this.prevLoci;
            this.prevLoci = Representation.Loci.Empty;
-            this.events.highlight.next({ current: this.prevLoci, prev });
+            this.events.highlight.next({ current: this.prevLoci });
        }
    }

@@ -99,7 +98,7 @@ export class Canvas3dInteractionHelper {
    modify(modifiers: ModifiersKeys) {
        if (this.prevLoci.loci === EmptyLoci || ModifiersKeys.areEqual(modifiers, this.modifiers)) return;
        this.modifiers = modifiers;
-        this.events.highlight.next({ current: this.prevLoci, prev: this.prevLoci, modifiers: this.modifiers });
+        this.events.highlight.next({ current: this.prevLoci, modifiers: this.modifiers });
    }

    dispose() {
--- a/src/mol-data/int/impl/interval.ts
+++ b/src/mol-data/int/impl/interval.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -17,6 +17,7 @@ export const min = Tuple.fst;
 export function max(i: Tuple) { return Tuple.snd(i) - 1; }
 export function size(i: Tuple) { return Tuple.snd(i) - Tuple.fst(i); }
 export const hashCode = Tuple.hashCode;
+export const toString = Tuple.toString;

 export function has(int: Tuple, v: number) { return Tuple.fst(int) <= v && v < Tuple.snd(int); }
 /** Returns the index of `x` in `set` or -1 if not found. */
--- a/src/mol-data/int/impl/ordered-set.ts
+++ b/src/mol-data/int/impl/ordered-set.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -36,6 +36,8 @@ export function end(set: OrderedSetImpl) { return I.is(set) ? I.end(set) : S.end
 export function hashCode(set: OrderedSetImpl) { return I.is(set) ? I.hashCode(set) : S.hashCode(set); }
 // TODO: possibly add more hash functions to allow for multilevel hashing.

+export function toString(set: OrderedSetImpl) { return I.is(set) ? I.toString(set) : S.toString(set); }
+
 export function areEqual(a: OrderedSetImpl, b: OrderedSetImpl) {
    if (I.is(a)) {
        if (I.is(b)) return I.areEqual(a, b);
--- a/src/mol-data/int/impl/sorted-array.ts
+++ b/src/mol-data/int/impl/sorted-array.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -35,6 +35,11 @@ export function hashCode(xs: Nums) {
    if (s > 2) return hash4(s, xs[0], xs[s - 1], xs[s >> 1]);
    return hash3(s, xs[0], xs[s - 1]);
 }
+export function toString(xs: Nums) {
+    const s = xs.length;
+    if (s > 5) return `[${xs[0]}, ${xs[1]}, ..., ${xs[s - 1]}], length ${s}`;
+    return `[${(xs as number[]).join(', ')}]`;
+}

 /** Returns the index of `x` in `set` or -1 if not found. */
 export function indexOf(xs: Nums, v: number) {
--- a/src/mol-data/int/interval.ts
+++ b/src/mol-data/int/interval.ts
@@ -34,6 +34,8 @@ namespace Interval {
    export const size: <T extends number = number>(interval: Interval<T>) => number = Impl.size as any;
    /** Hash code describing the interval */
    export const hashCode: <T extends number = number>(interval: Interval<T>) => number = Impl.hashCode as any;
+    /** String representation of the interval */
+    export const toString: <T extends number = number>(interval: Interval<T>) => string = Impl.toString as any;

    /** Test if two intervals are identical */
    export const areEqual: <T extends number = number>(a: Interval<T>, b: Interval<T>) => boolean = Impl.areEqual as any;
--- a/src/mol-data/int/ordered-set.ts
+++ b/src/mol-data/int/ordered-set.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -8,7 +8,6 @@ import * as Base from './impl/ordered-set'
 import Interval from './interval'
 import SortedArray from './sorted-array';

-/** test */
 namespace OrderedSet {
    export const Empty: OrderedSet = Base.Empty as any;
    export const ofSingleton: <T extends number = number>(value: T) => OrderedSet<T> = Base.ofSingleton as any;
@@ -38,6 +37,7 @@ namespace OrderedSet {

    export const union: <T extends number = number>(a: OrderedSet<T>, b: OrderedSet<T>) => OrderedSet<T> = Base.union as any;
    export const intersect: <T extends number = number>(a: OrderedSet<T>, b: OrderedSet<T>) => OrderedSet<T> = Base.intersect as any;
+    /** Returns elements of `a` that are not in `b`, i.e `a` - `b` */
    export const subtract: <T extends number = number>(a: OrderedSet<T>, b: OrderedSet<T>) => OrderedSet<T> = Base.subtract as any;

    export const findPredecessorIndex: <T extends number = number>(set: OrderedSet<T>, x: number) => number = Base.findPredecessorIndex as any;
@@ -62,10 +62,12 @@ namespace OrderedSet {
        OrderedSet.forEach(set, v => array.push(v))
        return array
    }
+
+    export function toString<T extends number = number>(set: OrderedSet<T>): string {
+        return Base.toString(set)
+    }
 }

-/** Represents bla */
 type OrderedSet<T extends number = number> = SortedArray<T> | Interval<T>

-
 export default OrderedSet
--- a/src/mol-data/int/sorted-array.ts
+++ b/src/mol-data/int/sorted-array.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -12,9 +12,9 @@ namespace SortedArray {
    export const ofUnsortedArray: <T extends number = number>(xs: ArrayLike<number>) => SortedArray<T> = Impl.ofUnsortedArray as any;
    export const ofSingleton: <T extends number = number>(v: number) => SortedArray<T> = Impl.ofSingleton as any;
    export const ofSortedArray: <T extends number = number>(xs: ArrayLike<number>) => SortedArray<T> = Impl.ofSortedArray as any;
-    // create sorted array [min, max] (it DOES contain the max value)
+    /** create sorted array [min, max] (it DOES contain the max value) */
    export const ofRange: <T extends number = number>(min: T, max: T) => SortedArray<T> = Impl.ofRange as any;
-    // create sorted array [min, max) (it does NOT contain the max value)
+    /** create sorted array [min, max) (it does NOT contain the max value) */
    export const ofBounds: <T extends number = number>(min: T, max: T) => SortedArray<T> = (min, max) => Impl.ofRange(min, max - 1) as any;
    export const is: <T extends number = number>(v: any) => v is SortedArray<T> = Impl.is as any;

@@ -23,14 +23,15 @@ namespace SortedArray {
    export const indexOf: <T extends number = number>(array: SortedArray<T>, x: T) => number = Impl.indexOf as any;
    export const indexOfInInterval: <T extends number = number>(array: SortedArray<T>, x: number, bounds: Interval) => number = Impl.indexOfInInterval as any;

-    // array[0]
+    /** Returns `array[0]` */
    export const start: <T extends number = number>(array: SortedArray<T>) => T = Impl.start as any;
-    // array[array.length - 1] + 1
+    /** Returns `array[array.length - 1] + 1` */
    export const end: <T extends number = number>(array: SortedArray<T>) => T = Impl.end as any;
    export const min: <T extends number = number>(array: SortedArray<T>) => T = Impl.min as any;
    export const max: <T extends number = number>(array: SortedArray<T>) => T = Impl.max as any;
    export const size: <T extends number = number>(array: SortedArray<T>) => number = Impl.size as any;
    export const hashCode: <T extends number = number>(array: SortedArray<T>) => number = Impl.hashCode as any;
+    export const toString: <T extends number = number>(array: SortedArray<T>) => string = Impl.toString as any;

    export const areEqual: <T extends number = number>(a: SortedArray<T>, b: SortedArray<T>) => boolean = Impl.areEqual as any;
    export const areIntersecting: <T extends number = number>(a: SortedArray<T>, b: SortedArray<T>) => boolean = Impl.areIntersecting as any;
--- a/src/mol-data/int/tuple.ts
+++ b/src/mol-data/int/tuple.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 */
@@ -73,6 +73,11 @@ namespace IntTuple {
        _float64[0] = t as any;
        return hash2(_int32[0], _int32[1]);
    }
+
+    export function toString(t: IntTuple) {
+        _float64[0] = t as any;
+        return `(${_int32[0]}, ${_int32[1]})`;
+    }
 }

 export default IntTuple
--- a/src/mol-geo/geometry/marker-data.ts
+++ b/src/mol-geo/geometry/marker-data.ts
@@ -13,57 +13,6 @@ export type MarkerData = {
    uMarkerTexDim: ValueCell<Vec2>
 }

-export enum MarkerAction {
-    Highlight,
-    RemoveHighlight,
-    Select,
-    Deselect,
-    Toggle,
-    Clear
-}
-
-export function applyMarkerAction(array: Uint8Array, start: number, end: number, action: MarkerAction) {
-    let changed = false
-    for (let i = start; i < end; ++i) {
-        let v = array[i]
-        switch (action) {
-            case MarkerAction.Highlight:
-                if (v % 2 === 0) {
-                    v += 1
-                }
-                break
-            case MarkerAction.RemoveHighlight:
-                if (v % 2 !== 0) {
-                    v -= 1
-                }
-                break
-            case MarkerAction.Select:
-                if (v < 2) v += 2
-                // v += 2
-                break
-            case MarkerAction.Deselect:
-                // if (v >= 2) {
-                //     v -= 2
-                // }
-                v = v % 2
-                break
-            case MarkerAction.Toggle:
-                if (v >= 2) {
-                    v -= 2
-                } else {
-                    v += 2
-                }
-                break
-            case MarkerAction.Clear:
-                v = 0
-                break
-        }
-        changed = array[i] !== v || changed
-        array[i] = v
-    }
-    return changed
-}
-
 export function createMarkers(count: number, markerData?: MarkerData): MarkerData {
    const markers = createTextureImage(Math.max(1, count), 1, Uint8Array, markerData && markerData.tMarker.ref.value.array)
    if (markerData) {
--- a/src/mol-geo/geometry/overpaint-data.ts
+++ b/src/mol-geo/geometry/overpaint-data.ts
@@ -24,7 +24,7 @@ export function applyOverpaintColor(array: Uint8Array, start: number, end: numbe
 }

 export function clearOverpaint(array: Uint8Array, start: number, end: number) {
-    array.fill(0, start, end)
+    array.fill(0, start * 4, end * 4)
 }

 export function createOverpaint(count: number, overpaintData?: OverpaintData): OverpaintData {
--- a/src/mol-gl/_spec/renderer.spec.ts
+++ b/src/mol-gl/_spec/renderer.spec.ts
@@ -117,7 +117,7 @@ describe('renderer', () => {
        expect(ctx.gl.getParameter(ctx.gl.VIEWPORT)[3]).toBe(48)
    })

-    it('points', () => {
+    it('points', async () => {
        const [ width, height ] = [ 32, 32 ]
        const gl = createGl(width, height, { preserveDrawingBuffer: true })
        const { ctx } = createRenderer(gl)
@@ -126,6 +126,7 @@ describe('renderer', () => {
        const points = createPoints()

        scene.add(points)
+        await scene.commit().run()
        expect(ctx.stats.bufferCount).toBe(4);
        expect(ctx.stats.textureCount).toBe(5);
        expect(ctx.stats.vaoCount).toBe(5);
@@ -133,6 +134,7 @@ describe('renderer', () => {
        expect(ctx.shaderCache.count).toBe(10);

        scene.remove(points)
+        await scene.commit().run()
        expect(ctx.stats.bufferCount).toBe(0);
        expect(ctx.stats.textureCount).toBe(0);
        expect(ctx.stats.vaoCount).toBe(0);
--- a/src/mol-gl/scene.ts
+++ b/src/mol-gl/scene.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -12,6 +12,8 @@ import { Object3D } from './object3d';
 import { Sphere3D } from '../mol-math/geometry';
 import { Vec3 } from '../mol-math/linear-algebra';
 import { BoundaryHelper } from '../mol-math/geometry/boundary-helper';
+import { RuntimeContext, Task } from '../mol-task';
+import { AsyncQueue } from '../mol-util/async-queue';

 const boundaryHelper = new BoundaryHelper();
 function calculateBoundingSphere(renderables: Renderable<RenderableValues & BaseValues>[], boundingSphere: Sphere3D): Sphere3D {
@@ -40,17 +42,11 @@ function renderableSort(a: Renderable<RenderableValues & BaseValues>, b: Rendera
    const drawProgramIdB = b.getProgram('color').id
    const materialIdA = a.materialId
    const materialIdB = b.materialId
-    const zA = a.values.boundingSphere.ref.value.center[2]
-    const zB = b.values.boundingSphere.ref.value.center[2]

    if (drawProgramIdA !== drawProgramIdB) {
        return drawProgramIdA - drawProgramIdB // sort by program id to minimize gl state changes
    } else if (materialIdA !== materialIdB) {
        return materialIdA - materialIdB // sort by material id to minimize gl state changes
-    } else if (zA !== zB) {
-        return a.state.opaque
-            ? zA - zB // when opaque, draw closer elements first to minimize overdraw
-            : zB - zA // when transparent, draw elements last to maximize partial visibility
    } else {
        return a.id - b.id;
    }
@@ -60,10 +56,13 @@ interface Scene extends Object3D {
    readonly count: number
    readonly renderables: ReadonlyArray<Renderable<RenderableValues & BaseValues>>
    readonly boundingSphere: Sphere3D
+    readonly isCommiting: boolean

    update: (objects: ArrayLike<GraphicsRenderObject> | undefined, keepBoundingSphere: boolean) => void
-    add: (o: GraphicsRenderObject) => Renderable<any>
+    add: (o: GraphicsRenderObject) => void // Renderable<any>
    remove: (o: GraphicsRenderObject) => void
+    syncCommit: () => void
+    commit: () => Task<void>
    has: (o: GraphicsRenderObject) => boolean
    clear: () => void
    forEach: (callbackFn: (value: Renderable<RenderableValues & BaseValues>, key: GraphicsRenderObject) => void) => void
@@ -74,15 +73,63 @@ namespace Scene {
        const renderableMap = new Map<GraphicsRenderObject, Renderable<RenderableValues & BaseValues>>()
        const renderables: Renderable<RenderableValues & BaseValues>[] = []
        const boundingSphere = Sphere3D.zero()
+
        let boundingSphereDirty = true

        const object3d = Object3D.create()

+        const add = (o: GraphicsRenderObject) => {
+            if (!renderableMap.has(o)) {
+                const renderable = createRenderable(ctx, o)
+                renderables.push(renderable)
+                renderableMap.set(o, renderable)
+                boundingSphereDirty = true
+                return renderable;
+            } else {
+                console.warn(`RenderObject with id '${o.id}' already present`)
+                return renderableMap.get(o)!
+            }
+        }
+
+        const remove = (o: GraphicsRenderObject) => {
+            const renderable = renderableMap.get(o)
+            if (renderable) {
+                renderable.dispose()
+                renderables.splice(renderables.indexOf(renderable), 1)
+                renderableMap.delete(o)
+                boundingSphereDirty = true
+            }
+        }
+
+        const commitQueue = new AsyncQueue<any>();
+        const toAdd: GraphicsRenderObject[] = []
+        const toRemove: GraphicsRenderObject[] = []
+
+        type CommitParams = { toAdd: GraphicsRenderObject[], toRemove: GraphicsRenderObject[] }
+
+        const step = 100
+        const handle = async (ctx: RuntimeContext, arr: GraphicsRenderObject[], fn: (o: GraphicsRenderObject) => void, message: string) => {
+            for (let i = 0, il = arr.length; i < il; i += step) {
+                if (ctx.shouldUpdate) await ctx.update({ message, current: i, max: il })
+                for (let j = i, jl = Math.min(i + step, il); j < jl; ++j) {
+                    fn(arr[j])
+                }
+            }
+        }
+
+        const commit = async (ctx: RuntimeContext, p: CommitParams) => {
+            await handle(ctx, p.toRemove, remove, 'Removing GraphicsRenderObjects')
+            await handle(ctx, p.toAdd, add, 'Adding GraphicsRenderObjects')
+            if (ctx.shouldUpdate) await ctx.update({ message: 'Sorting GraphicsRenderObjects' })
+            renderables.sort(renderableSort)
+        }
+
        return {
            get view () { return object3d.view },
            get position () { return object3d.position },
            get direction () { return object3d.direction },
            get up () { return object3d.up },
+            get isCommiting () { return commitQueue.length > 0 },

            update(objects, keepBoundingSphere) {
                Object3D.update(object3d)
@@ -100,27 +147,35 @@ namespace Scene {
                if (!keepBoundingSphere) boundingSphereDirty = true
            },
            add: (o: GraphicsRenderObject) => {
-                if (!renderableMap.has(o)) {
-                    const renderable = createRenderable(ctx, o)
-                    renderables.push(renderable)
-                    renderables.sort(renderableSort)
-                    renderableMap.set(o, renderable)
-                    boundingSphereDirty = true
-                    return renderable;
-                } else {
-                    console.warn(`RenderObject with id '${o.id}' already present`)
-                    return renderableMap.get(o)!
-                }
+                toAdd.push(o)
            },
            remove: (o: GraphicsRenderObject) => {
-                const renderable = renderableMap.get(o)
-                if (renderable) {
-                    renderable.dispose()
-                    renderables.splice(renderables.indexOf(renderable), 1)
-                    renderables.sort(renderableSort)
-                    renderableMap.delete(o)
-                    boundingSphereDirty = true
-                }
+                toRemove.push(o)
+            },
+            syncCommit: () => {
+                for (let i = 0, il = toRemove.length; i < il; ++i) remove(toRemove[i])
+                toRemove.length = 0
+                for (let i = 0, il = toAdd.length; i < il; ++i) add(toAdd[i])
+                toAdd.length = 0
+                renderables.sort(renderableSort)
+            },
+            commit: () => {
+                const params = { toAdd: [ ...toAdd ], toRemove: [ ...toRemove ] }
+                toAdd.length = 0
+                toRemove.length = 0
+
+                return Task.create('Commiting GraphicsRenderObjects', async ctx => {
+                    const removed = await commitQueue.enqueue(params);
+                    if (!removed) return;
+
+                    try {
+                        await commit(ctx, params);
+                    } finally {
+                        commitQueue.handled(params);
+                    }
+                }, () => {
+                    commitQueue.remove(params);
+                })
            },
            has: (o: GraphicsRenderObject) => {
                return renderableMap.has(o)
--- a/src/mol-io/reader/cif/schema/bird.ts
+++ b/src/mol-io/reader/cif/schema/bird.ts
@@ -1,7 +1,7 @@
 /**
 * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
- * Code-generated 'BIRD' schema file. Dictionary versions: mmCIF 5.311, IHM 1.0, CARB draft.
+ * Code-generated 'BIRD' schema file. Dictionary versions: mmCIF 5.312, IHM 1.0, CARB draft.
 *
 * @author molstar/ciftools package
 */
--- a/src/mol-io/reader/cif/schema/ccd.ts
+++ b/src/mol-io/reader/cif/schema/ccd.ts
@@ -1,7 +1,7 @@
 /**
 * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
- * Code-generated 'CCD' schema file. Dictionary versions: mmCIF 5.311, IHM 1.0, CARB draft.
+ * Code-generated 'CCD' schema file. Dictionary versions: mmCIF 5.312, IHM 1.0, CARB draft.
 *
 * @author molstar/ciftools package
 */
--- a/src/mol-io/reader/cif/schema/mmcif-extras.ts
+++ b/src/mol-io/reader/cif/schema/mmcif-extras.ts
@@ -1,10 +1,12 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

- import { mmCIF_Schema } from './mmcif';
+import { mmCIF_Schema } from './mmcif';
+import { Column } from '../../../../mol-data/db';

 export const mmCIF_residueId_schema = {
    label_comp_id: mmCIF_Schema.atom_site.label_comp_id,
@@ -15,4 +17,10 @@ export const mmCIF_residueId_schema = {
    auth_comp_id: mmCIF_Schema.atom_site.auth_atom_id,
    auth_seq_id: mmCIF_Schema.atom_site.auth_seq_id,
    auth_asym_id: mmCIF_Schema.atom_site.auth_asym_id
+}
+
+export const mmCIF_chemCompBond_schema = {
+    ...mmCIF_Schema.chem_comp_bond,
+    /** Indicates if the bond entry was taken from the protonation variant dictionary */
+    molstar_protonation_variant: Column.Schema.Str()
 }
--- a/src/mol-io/reader/cif/schema/mmcif.ts
+++ b/src/mol-io/reader/cif/schema/mmcif.ts
@@ -1,7 +1,7 @@
 /**
 * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
- * Code-generated 'mmCIF' schema file. Dictionary versions: mmCIF 5.311, IHM 1.0, CARB draft.
+ * Code-generated 'mmCIF' schema file. Dictionary versions: mmCIF 5.312, IHM 1.0, CARB draft.
 *
 * @author molstar/ciftools package
 */
@@ -1549,6 +1549,85 @@ export const mmCIF_Schema = {
         */
        program_version: str,
    },
+    /**
+     * Data items in the PDBX_UNOBS_OR_ZERO_OCC_RESIDUES category list the
+     * residues within the entry that are not observed or have zero occupancy.
+     */
+    pdbx_unobs_or_zero_occ_residues: {
+        /**
+         * The value of _pdbx_unobs_or_zero_occ_residues.id must uniquely identify
+         * each item in the PDBX_UNOBS_OR_ZERO_OCC_RESIDUES list.
+         *
+         * This is an integer serial number.
+         */
+        id: int,
+        /**
+         * The value of polymer flag indicates whether the unobserved or
+         * zero occupancy residue is part of a polymer chain or not
+         */
+        polymer_flag: Aliased<'Y' | 'N'>(str),
+        /**
+         * The value of occupancy flag indicates whether the residue
+         * is unobserved (= 1) or the coordinates have an occupancy of zero (=0)
+         */
+        occupancy_flag: Aliased<'1' | '0'>(int),
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.pdbx_PDB_model_num in the
+         * ATOM_SITE category.
+         */
+        PDB_model_num: int,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.auth_asym_id in the
+         * ATOM_SITE category.
+         */
+        auth_asym_id: str,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.auth_comp_id in the
+         * ATOM_SITE category.
+         */
+        auth_comp_id: str,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.auth_seq_id in the
+         * ATOM_SITE category.
+         */
+        auth_seq_id: str,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.pdbx_PDB_ins_code in the
+         * ATOM_SITE category.
+         */
+        PDB_ins_code: str,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.label_asym_id in the
+         * ATOM_SITE category.
+         */
+        label_asym_id: str,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.label_comp_id in the
+         * ATOM_SITE category.
+         */
+        label_comp_id: str,
+        /**
+         * Part of the identifier for the unobserved or zero occupancy residue.
+         *
+         * This data item is a pointer to _atom_site.label_seq_id in the
+         * ATOM_SITE category.
+         */
+        label_seq_id: int,
+    },
    /**
     * Data items in the PDBX_STRUCT_MOD_RESIDUE category list the
     * modified polymer components in the entry and provide some
@@ -2079,10 +2158,10 @@ export const mmCIF_Schema = {
        pdbx_end_seq_num: int,
    },
    /**
-     * Data items in the PDBX_ENTITY_DESCRIPTOR category provide
+     * Data items in the PDBX_ENTITY_BRANCH_DESCRIPTOR category provide
     * string descriptors of entity chemical structure.
     */
-    pdbx_entity_descriptor: {
+    pdbx_entity_branch_descriptor: {
        /**
         * This data item is a pointer to _entity_poly.entity_id in the ENTITY
         * category.
--- a/src/mol-io/reader/mol2/parser.ts
+++ b/src/mol-io/reader/mol2/parser.ts
@@ -84,7 +84,7 @@ function handleMolecule(state: State) {
    molecule.mol_comment = getTokenString(tokenizer)
 }

-function isStatus_bit(aString: String): Boolean {
+function isStatus_bit(aString: string): boolean {
    if (aString.includes('DSPMOD') || aString.includes('TYPECOL') || aString.includes('CAP')
        || aString.includes('BACKBONE') || aString.includes('DICT') || aString.includes('ESSENTIAL')
        || aString.includes('WATER') || aString.includes('DIRECT')) {
--- a/src/mol-io/writer/_spec/cif.spec.ts
+++ b/src/mol-io/writer/_spec/cif.spec.ts
@@ -0,0 +1,183 @@
+import * as Data from '../../reader/cif/data-model'
+import { CifWriter } from '../cif';
+import decodeMsgPack from '../../common/msgpack/decode'
+import { EncodedFile, EncodedCategory } from '../../common/binary-cif';
+import Field from '../../reader/cif/binary/field';
+import * as C from '../cif/encoder';
+
+const cartn_x = Data.CifField.ofNumbers([1.001, 1.002, 1.003, 1.004, 1.005, 1.006, 1.007, 1.008, 1.009]);
+const cartn_y = Data.CifField.ofNumbers([-3.0, -2.666, -2.3333, -2.0, -1.666, -1.333, -1.0, -0.666, -0.333]);
+const cartn_z = Data.CifField.ofNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => Math.sqrt(i)));
+const label_seq_id = Data.CifField.ofNumbers([1, 2, 3, 6, 11, 23, 47, 106, 235]);
+const atom_site = Data.CifCategory.ofFields('atom_site', { 'Cartn_x': cartn_x, 'Cartn_y': cartn_y, 'Cartn_z': cartn_z, 'label_seq_id': label_seq_id });
+const field1 = Data.CifField.ofNumbers([1, 2, 3, 6, 11, 23, 47, 106, 235]);
+const field2 = Data.CifField.ofNumbers([-1, -2, -3, -6, -11, -23, -47, -106, -235]);
+const other_fields = Data.CifCategory.ofFields('other_fields', { 'field1': field1, 'field2': field2 });
+
+const encoding_aware_encoder = CifWriter.createEncoder({
+    binary: true,
+    binaryAutoClassifyEncoding: true,
+    binaryEncodingPovider: CifWriter.createEncodingProviderFromJsonConfig([
+        {
+            'categoryName': 'atom_site',
+            'columnName': 'Cartn_y',
+            'encoding': 'rle',
+            'precision': 0
+        },
+        {
+            'categoryName': 'atom_site',
+            'columnName': 'Cartn_z',
+            'encoding': 'delta',
+            'precision': 1
+        },
+        {
+            'categoryName': 'atom_site',
+            'columnName': 'label_seq_id',
+            'encoding': 'delta-rle'
+        }
+    ])
+});
+
+describe('encoding-config', () => {
+    const decoded = process(encoding_aware_encoder);
+
+    const decoded_atom_site = decoded.blocks[0].categories['atom_site'];
+    const decoded_cartn_x = decoded_atom_site.getField('Cartn_x')!;
+    const decoded_cartn_y = decoded_atom_site.getField('Cartn_y')!;
+    const decoded_cartn_z = decoded_atom_site.getField('Cartn_z')!;
+    const decoded_label_seq_id = decoded_atom_site.getField('label_seq_id')!;
+
+    const delta = 0.001;
+    function assert(e: ArrayLike<number>, a: ArrayLike<number>) {
+        expect(e.length).toBe(a.length);
+        for (let i = 0; i < e.length; i++) {
+            expect(Math.abs(e[i] - a[i])).toBeLessThan(delta);
+        }
+    }
+
+    function join(field: Data.CifField) {
+        return field.binaryEncoding!.map(e => e.kind).join();
+    }
+
+    it('strategy', () => {
+        expect(join(decoded_cartn_x)).toBe('FixedPoint,Delta,IntegerPacking,ByteArray');
+        expect(join(decoded_cartn_y)).toBe('FixedPoint,RunLength,IntegerPacking,ByteArray');
+        expect(join(decoded_cartn_z)).toBe('FixedPoint,Delta,IntegerPacking,ByteArray');
+        expect(join(decoded_label_seq_id)).toBe('Delta,RunLength,IntegerPacking,ByteArray');
+    });
+
+    it('precision', () => {
+        assert(decoded_cartn_x.toFloatArray(), cartn_x.toFloatArray());
+        assert(decoded_cartn_y.toFloatArray(), cartn_y.toFloatArray().map(d => Math.round(d)));
+        assert(decoded_cartn_z.toFloatArray(), cartn_z.toFloatArray().map(d => Math.round(d * 10) / 10));
+        assert(decoded_label_seq_id.toIntArray(), label_seq_id.toIntArray());
+    });
+});
+
+const filter_aware_encoder1 = CifWriter.createEncoder({
+    binary: true,
+    binaryAutoClassifyEncoding: true
+});
+filter_aware_encoder1.setFilter(C.Category.filterOf('atom_site\n' +
+'\n' +
+'atom_site.Cartn_x\n' +
+'atom_site.Cartn_y\n'));
+
+const filter_aware_encoder2 = CifWriter.createEncoder({
+    binary: true
+});
+filter_aware_encoder2.setFilter(C.Category.filterOf('!atom_site\n' +
+'\n' +
+'!other_fields.field2\n'));
+
+describe('filtering-config', () => {
+    const decoded1 = process(filter_aware_encoder1);
+
+    const atom_site1 = decoded1.blocks[0].categories['atom_site'];
+    const cartn_x1 = atom_site1.getField('Cartn_x');
+    const cartn_y1 = atom_site1.getField('Cartn_y');
+    const cartn_z1 = atom_site1.getField('Cartn_z');
+    const label_seq_id1 = atom_site1.getField('label_seq_id');
+    const fields1 = decoded1.blocks[0].categories['other_fields'];
+
+    it('whitelist-filtering', () => {
+        expect(atom_site1).toBeDefined();
+        expect(cartn_x1).toBeDefined();
+        expect(cartn_y1).toBeDefined();
+        expect(cartn_z1).toBeUndefined();
+        expect(label_seq_id1).toBeUndefined();
+        expect(fields1).toBeUndefined();
+    });
+
+    const decoded2 = process(filter_aware_encoder2);
+
+    const atom_site2 = decoded2.blocks[0].categories['atom_site'];
+    const fields2 = decoded2.blocks[0].categories['other_fields'];
+    const field12 = fields2.getField('field1');
+    const field22 = fields2.getField('field2');
+
+    it('blacklist-filtering', () => {
+        expect(atom_site2).toBeUndefined();
+        expect(fields2).toBeDefined();
+        expect(field12).toBeDefined();
+        expect(field22).toBeUndefined();
+    });
+});
+
+function process(encoder: C.Encoder) {
+    encoder.startDataBlock('test');
+
+    for (const cat of [atom_site, other_fields]) {
+        const fields: CifWriter.Field[] = [];
+        for (const f of cat.fieldNames) {
+            fields.push(wrap(f, cat.getField(f)!))
+        }
+        encoder.writeCategory(getCategoryInstanceProvider(cat, fields));
+    }
+
+    const encoded = encoder.getData() as Uint8Array;
+
+    const unpacked = decodeMsgPack(encoded) as EncodedFile;
+    return Data.CifFile(unpacked.dataBlocks.map(block => {
+        const cats = Object.create(null);
+        for (const cat of block.categories) cats[cat.name.substr(1)] = Category(cat);
+        return Data.CifBlock(block.categories.map(c => c.name.substr(1)), cats, block.header);
+    }));
+}
+
+
+function getCategoryInstanceProvider(cat: Data.CifCategory, fields: CifWriter.Field[]): CifWriter.Category {
+    return {
+        name: cat.name,
+        instance: () => CifWriter.categoryInstance(fields, { data: cat, rowCount: cat.rowCount })
+    };
+}
+
+function wrap(name: string, field: Data.CifField): CifWriter.Field {
+    const type = Data.getCifFieldType(field);
+    if (type['@type'] === 'str') {
+        return { name, type: CifWriter.Field.Type.Str, value: field.str, valueKind: field.valueKind };
+    } else if (type['@type'] === 'float') {
+        return { name, type: CifWriter.Field.Type.Float, value: field.float, valueKind: field.valueKind };
+    } else {
+        return { name, type: CifWriter.Field.Type.Int, value: field.int, valueKind: field.valueKind };
+    }
+}
+
+function Category(data: EncodedCategory): Data.CifCategory {
+    const map = Object.create(null);
+    const cache = Object.create(null);
+    for (const col of data.columns) map[col.name] = col;
+    return {
+        rowCount: data.rowCount,
+        name: data.name.substr(1),
+        fieldNames: data.columns.map(c => c.name),
+        getField(name) {
+            const col = map[name];
+            if (!col) return void 0;
+            if (!!cache[name]) return cache[name];
+            cache[name] = Field(col);
+            return cache[name];
+        }
+    }
+}
--- a/src/mol-io/writer/cif.ts
+++ b/src/mol-io/writer/cif.ts
@@ -53,5 +53,64 @@ export namespace CifWriter {
                return ff && ff.binaryEncoding ? ArrayEncoder.fromEncoding(ff.binaryEncoding) : void 0;
            }
        }
+    };
+
+    export function createEncodingProviderFromJsonConfig(hints: EncodingStrategyHint[]): EncodingProvider {
+        return {
+            get(c, f) {
+                for (let i = 0; i < hints.length; i++) {
+                    const hint = hints[i];
+                    if (hint.categoryName === c && hint.columnName === f) {
+                        return resolveEncoding(hint);
+                    }
+                }
+            }
+        }
    }
-}
+
+    function resolveEncoding(hint: EncodingStrategyHint): ArrayEncoder {
+        const precision: number | undefined = hint.precision;
+        if (precision !== void 0) {
+            const multiplier = Math.pow(10, precision);
+            const fixedPoint = E.by(E.fixedPoint(multiplier));
+            switch (hint.encoding) {
+                case 'pack':
+                    return fixedPoint.and(E.integerPacking);
+                case 'rle':
+                    return fixedPoint.and(E.runLength).and(E.integerPacking);
+                case 'delta':
+                    return fixedPoint.and(E.delta).and(E.integerPacking);
+                case 'delta-rle':
+                    return fixedPoint.and(E.delta).and(E.runLength).and(E.integerPacking);
+            };
+        } else {
+            switch (hint.encoding) {
+                case 'pack':
+                    return E.by(E.integerPacking);
+                case 'rle':
+                    return E.by(E.runLength).and(E.integerPacking);
+                case 'delta':
+                    return E.by(E.delta).and(E.integerPacking);
+                case 'delta-rle':
+                    return E.by(E.delta).and(E.runLength).and(E.integerPacking);
+            }
+        }
+        throw new Error('cannot be reached');
+    }
+}
+
+/**
+ * Defines the information needed to encode certain fields: category and column name as well as encoding tag, precision is optional and identifies float columns.
+ */
+export interface EncodingStrategyHint {
+    categoryName: string,
+    columnName: string,
+    // TODO would be nice to infer strategy and precision if needed
+    encoding: EncodingType,
+    /**
+     * number of decimal places to keep - must be specified to float columns
+     */
+    precision?: number
+}
+
+type EncodingType = 'pack' | 'rle' | 'delta' | 'delta-rle'
--- a/src/mol-io/writer/cif/encoder.ts
+++ b/src/mol-io/writer/cif/encoder.ts
@@ -132,6 +132,60 @@ export namespace Category {
        includeField(categoryName: string, fieldName: string): boolean,
    }

+    export function filterOf(directives: string): Filter {
+        const cat_whitelist: string[] = [];
+        const cat_blacklist: string[] = [];
+        const field_whitelist: string[] = [];
+        const field_blacklist: string[] = [];
+
+        for (let d of directives.split(/[\r\n]+/)) {
+            d = d.trim();
+            // allow for empty lines in config
+            if (d.length === 0) continue;
+            // let ! denote blacklisted entries
+            const blacklist = /^!/.test(d);
+            if (blacklist) d = d.substr(1);
+            const split = d.split(/\./);
+            const field = split[1];
+            const list = blacklist ? (field ? field_blacklist : cat_blacklist) : (field ? field_whitelist : cat_whitelist);
+
+            list[list.length] = d;
+
+            // ensure categories are aware about whitelisted columns
+            if (field && !cat_whitelist.includes(split[0])) {
+                cat_whitelist[cat_whitelist.length] = split[0];
+            }
+        }
+
+        const wlcatcol = field_whitelist.map(it => it.split('.')[0]);
+        // blacklist has higher priority
+        return {
+            includeCategory(cat) {
+                // block if category in black
+                if (cat_blacklist.includes(cat)) {
+                    return false;
+                } else {
+                    // if there is a whitelist, the category has to be explicitly allowed
+                    return cat_whitelist.length <= 0 ||
+                            // otherwise include if whitelist contains category
+                            cat_whitelist.indexOf(cat) !== -1;
+                }
+            },
+            includeField(cat, field) {
+                // column names are assumed to follow the pattern 'category_name.column_name'
+                const full = cat + '.' + field;
+                if (field_blacklist.includes(full)) {
+                    return false;
+                } else {
+                    // if for this category no whitelist entries exist
+                    return !wlcatcol.includes(cat) ||
+                            // otherwise must be specifically allowed
+                            field_whitelist.includes(full);
+                }
+            }
+        }
+    }
+
    export const DefaultFilter: Filter = {
        includeCategory(cat) { return true; },
        includeField(cat, field) { return true; }
--- a/src/mol-math/geometry/molecular-surface.ts
+++ b/src/mol-math/geometry/molecular-surface.ts
@@ -291,16 +291,22 @@ export async function calcMolecularSurface(ctx: RuntimeContext, position: Requir
        }
    }

-    async function projectTorii () {
-        for (let i = 0; i < n; ++i) {
+    function projectToriiRange (begI: number, endI: number) {
+        for (let i = begI; i < endI; ++i) {
            const k = OrderedSet.getAt(indices, i)
            lookup3d.find(px[k], py[k], pz[k], radius[k])
            for (let j = 0, jl = neighbours.count; j < jl; ++j) {
                const l = OrderedSet.getAt(indices, neighbours.indices[j])
                if (k < l) projectTorus(k, l)
            }
+        }
+    }

-            if (i % updateChunk === 0 && ctx.shouldUpdate) {
+    async function projectTorii() {
+        for (let i = 0; i < n; i += updateChunk) {
+            projectToriiRange(i, Math.min(i + updateChunk, n))
+
+            if (ctx.shouldUpdate) {
                await ctx.update({ message: 'projecting torii', current: i, max: n })
            }
        }
--- a/src/mol-math/geometry/spacegroup/construction.ts
+++ b/src/mol-math/geometry/spacegroup/construction.ts
@@ -90,7 +90,7 @@ namespace Spacegroup {

    export function getSymmetryOperator(spacegroup: Spacegroup, index: number, i: number, j: number, k: number): SymmetryOperator {
        const operator = updateOperatorMatrix(spacegroup, index, i, j, k, Mat4.zero());
-        return SymmetryOperator.create(`${index + 1}_${5 + i}${5 + j}${5 + k}`, operator, { id: '', operList: [] }, '', Vec3.create(i, j, k));
+        return SymmetryOperator.create(`${index + 1}_${5 + i}${5 + j}${5 + k}`, operator, { id: '', operList: [] }, '', Vec3.create(i, j, k), index);
    }

    function getOperatorMatrix(ids: number[]) {
--- a/src/mol-math/geometry/symmetry-operator.ts
+++ b/src/mol-math/geometry/symmetry-operator.ts
@@ -6,6 +6,7 @@

 import { Vec3, Mat4, Mat3, Quat } from '../linear-algebra/3d'
 import { lerp as scalar_lerp } from '../../mol-math/interpolate';
+import { defaults } from '../../mol-util';

 interface SymmetryOperator {
    readonly name: string,
@@ -21,6 +22,8 @@ interface SymmetryOperator {
    readonly ncsId: string,

    readonly hkl: Vec3,
+    /** spacegroup symmetry operator index, -1 if not applicable */
+    readonly spgrOp: number,

    readonly matrix: Mat4,
    // cache the inverse of the transform
@@ -35,12 +38,13 @@ namespace SymmetryOperator {

    export const RotationTranslationEpsilon = 0.005;

-    export function create(name: string, matrix: Mat4, assembly: SymmetryOperator['assembly'], ncsId?: string, hkl?: Vec3): SymmetryOperator {
+    export function create(name: string, matrix: Mat4, assembly: SymmetryOperator['assembly'], ncsId?: string, hkl?: Vec3, spgrOp?: number): SymmetryOperator {
        const _hkl = hkl ? Vec3.clone(hkl) : Vec3.zero();
+        spgrOp = defaults(spgrOp, -1)
        ncsId = ncsId || ''
-        if (Mat4.isIdentity(matrix)) return { name, assembly, matrix, inverse: Mat4.identity(), isIdentity: true, hkl: _hkl, ncsId };
+        if (Mat4.isIdentity(matrix)) return { name, assembly, matrix, inverse: Mat4.identity(), isIdentity: true, hkl: _hkl, spgrOp, ncsId };
        if (!Mat4.isRotationAndTranslation(matrix, RotationTranslationEpsilon)) throw new Error(`Symmetry operator (${name}) must be a composition of rotation and translation.`);
-        return { name, assembly, matrix, inverse: Mat4.invert(Mat4.zero(), matrix), isIdentity: false, hkl: _hkl, ncsId };
+        return { name, assembly, matrix, inverse: Mat4.invert(Mat4.zero(), matrix), isIdentity: false, hkl: _hkl, spgrOp, ncsId };
    }

    export function checkIfRotationAndTranslation(rot: Mat3, offset: Vec3) {
@@ -106,11 +110,11 @@ namespace SymmetryOperator {

    /**
     * Apply the 1st and then 2nd operator. ( = second.matrix * first.matrix).
-     * Keep `name`, `assembly`, `ncsId` and `hkl` properties from second.
+     * Keep `name`, `assembly`, `ncsId`, `hkl` and `spgrOpId` properties from second.
     */
    export function compose(first: SymmetryOperator, second: SymmetryOperator) {
        const matrix = Mat4.mul(Mat4.zero(), second.matrix, first.matrix);
-        return create(second.name, matrix, second.assembly, second.ncsId, second.hkl);
+        return create(second.name, matrix, second.assembly, second.ncsId, second.hkl, second.spgrOp);
    }

    export interface CoordinateMapper<T extends number> { (index: T, slot: Vec3): Vec3 }
--- a/src/mol-math/linear-algebra/3d/quat.ts
+++ b/src/mol-math/linear-algebra/3d/quat.ts
@@ -435,6 +435,10 @@ namespace Quat {

        return normalize(out, Quat.fromMat3(out, axesTmpMat));
    }
+
+    export function toString(a: Quat, precision?: number) {
+        return `[${a[0].toPrecision(precision)} ${a[1].toPrecision(precision)} ${a[2].toPrecision(precision)}  ${a[3].toPrecision(precision)}]`;
+    }
 }

 export default Quat
--- a/src/mol-math/linear-algebra/3d/vec2.ts
+++ b/src/mol-math/linear-algebra/3d/vec2.ts
@@ -166,6 +166,10 @@ namespace Vec2 {
    export function areEqual(a: Vec2, b: Vec2) {
        return a[0] === b[0] && a[1] === b[1];
    }
+
+    export function toString(a: Vec2, precision?: number) {
+        return `[${a[0].toPrecision(precision)} ${a[1].toPrecision(precision)}}]`;
+    }
 }

 export default Vec2
--- a/src/mol-math/linear-algebra/3d/vec3.ts
+++ b/src/mol-math/linear-algebra/3d/vec3.ts
@@ -19,7 +19,7 @@

 import Mat4 from './mat4';
 import { Quat, Mat3, EPSILON } from '../3d';
-import { spline as _spline, clamp } from '../../interpolate'
+import { spline as _spline, quadraticBezier as _quadraticBezier, clamp } from '../../interpolate'
 import { NumberArray } from '../../../mol-util/type-helpers';

 interface Vec3 extends Array<number> { [d: number]: number, '@type': 'vec3', length: 3 }
@@ -344,6 +344,14 @@ namespace Vec3 {
        return out;
    }

+    export function quadraticBezier(out: Vec3, a: Vec3, b: Vec3, c: Vec3, t: number) {
+        out[0] = _quadraticBezier(a[0], b[0], c[0], t);
+        out[1] = _quadraticBezier(a[1], b[1], c[1], t);
+        out[2] = _quadraticBezier(a[2], b[2], c[2], t);
+
+        return out;
+    }
+
    /**
     * Performs a spline interpolation with two control points and a tension parameter
     */
@@ -525,8 +533,8 @@ namespace Vec3 {
        return normalize(out, cross(out, triangleNormalTmpAB, triangleNormalTmpAC));
    }

-    export function toString(a: Vec3) {
-        return `[${a[0]} ${a[1]} ${a[2]}]`;
+    export function toString(a: Vec3, precision?: number) {
+        return `[${a[0].toPrecision(precision)} ${a[1].toPrecision(precision)} ${a[2].toPrecision(precision)}]`;
    }
 }

--- a/src/mol-math/linear-algebra/3d/vec4.ts
+++ b/src/mol-math/linear-algebra/3d/vec4.ts
@@ -225,6 +225,10 @@ namespace Vec4 {
                Math.abs(a2 - b2) <= EPSILON.Value * Math.max(1.0, Math.abs(a2), Math.abs(b2)) &&
                Math.abs(a3 - b3) <= EPSILON.Value * Math.max(1.0, Math.abs(a3), Math.abs(b3)));
    }
+
+    export function toString(a: Vec4, precision?: number) {
+        return `[${a[0].toPrecision(precision)} ${a[1].toPrecision(precision)} ${a[2].toPrecision(precision)}  ${a[3].toPrecision(precision)}]`;
+    }
 }

 export default Vec4
--- a/src/mol-model-formats/structure/mmcif/parser.ts
+++ b/src/mol-model-formats/structure/mmcif/parser.ts
@@ -12,7 +12,7 @@ import { Tensor, Vec3 } from '../../../mol-math/linear-algebra';
 import { RuntimeContext } from '../../../mol-task';
 import UUID from '../../../mol-util/uuid';
 import { Model } from '../../../mol-model/structure/model/model';
-import { Entities } from '../../../mol-model/structure/model/properties/common';
+import { Entities, ChemicalComponent, MissingResidue } from '../../../mol-model/structure/model/properties/common';
 import { CustomProperties } from '../../../mol-model/structure';
 import { ModelSymmetry } from '../../../mol-model/structure/model/properties/symmetry';
 import { createAssemblies } from './assembly';
@@ -23,7 +23,6 @@ import { getSecondaryStructure } from './secondary-structure';
 import { getSequence } from './sequence';
 import { sortAtomSite } from './sort';
 import { StructConn } from './bonds/struct_conn';
-import { ChemicalComponent } from '../../../mol-model/structure/model/properties/chemical-component';
 import { getMoleculeType, MoleculeType, getEntityType } from '../../../mol-model/structure/model/types';
 import { ModelFormat } from '../format';
 import { SaccharideComponentMap, SaccharideComponent, SaccharidesSnfgMap, SaccharideCompIdMap, UnknownSaccharideComponent } from '../../../mol-model/structure/structure/carbohydrates/constants';
@@ -98,14 +97,36 @@ function getModifiedResidueNameMap(format: mmCIF_Format): Model['properties']['m
    return { parentId, details };
 }

+function getMissingResidues(format: mmCIF_Format): Model['properties']['missingResidues'] {
+    const map = new Map<string, MissingResidue>();
+    const c = format.data.pdbx_unobs_or_zero_occ_residues
+
+    const getKey = (model_num: number, asym_id: string, seq_id: number) => {
+        return `${model_num}|${asym_id}|${seq_id}`
+    }
+
+    for (let i = 0, il = c._rowCount; i < il; ++i) {
+        const key = getKey(c.PDB_model_num.value(i), c.label_asym_id.value(i), c.label_seq_id.value(i))
+        map.set(key, { polymer_flag: c.polymer_flag.value(i), occupancy_flag: c.occupancy_flag.value(i) })
+    }
+
+    return {
+        has: (model_num: number, asym_id: string, seq_id: number) => {
+            return map.has(getKey(model_num, asym_id, seq_id))
+        },
+        get: (model_num: number, asym_id: string, seq_id: number) => {
+            return map.get(getKey(model_num, asym_id, seq_id))
+        },
+        size: map.size
+    }
+}
+
 function getChemicalComponentMap(format: mmCIF_Format): Model['properties']['chemicalComponentMap'] {
    const map = new Map<string, ChemicalComponent>();
    const { chem_comp } = format.data
-    if (chem_comp._rowCount > 0) {
-        const { id } = format.data.chem_comp
-        for (let i = 0, il = id.rowCount; i < il; ++i) {
-            map.set(id.value(i), Table.getRow(format.data.chem_comp, i))
-        }
+    const { id } = chem_comp
+    for (let i = 0, il = id.rowCount; i < il; ++i) {
+        map.set(id.value(i), Table.getRow(chem_comp, i))
    }
    return map
 }
@@ -158,6 +179,7 @@ const getUniqueComponentNames = memoize1((format: mmCIF_Format) => {

 export interface FormatData {
    modifiedResidues: Model['properties']['modifiedResidues']
+    missingResidues: Model['properties']['missingResidues']
    chemicalComponentMap: Model['properties']['chemicalComponentMap']
    saccharideComponentMap: Model['properties']['saccharideComponentMap']
 }
@@ -165,6 +187,7 @@ export interface FormatData {
 function getFormatData(format: mmCIF_Format): FormatData {
    return {
        modifiedResidues: getModifiedResidueNameMap(format),
+        missingResidues: getMissingResidues(format),
        chemicalComponentMap: getChemicalComponentMap(format),
        saccharideComponentMap: getSaccharideComponentMap(format)
    }
@@ -172,11 +195,12 @@ function getFormatData(format: mmCIF_Format): FormatData {

 function createStandardModel(format: mmCIF_Format, atom_site: AtomSite, sourceIndex: Column<number>, entities: Entities, formatData: FormatData, previous?: Model): Model {
    const atomic = getAtomicHierarchyAndConformation(atom_site, sourceIndex, entities, formatData, previous);
+    const modelNum = atom_site.pdbx_PDB_model_num.value(0)
    if (previous && atomic.sameAsPrevious) {
        return {
            ...previous,
            id: UUID.create22(),
-            modelNum: atom_site.pdbx_PDB_model_num.value(0),
+            modelNum,
            atomicConformation: atomic.conformation,
            _dynamicPropertyData: Object.create(null)
        };
@@ -192,7 +216,7 @@ function createStandardModel(format: mmCIF_Format, atom_site: AtomSite, sourceIn
        label,
        entry: label,
        sourceData: format,
-        modelNum: atom_site.pdbx_PDB_model_num.value(0),
+        modelNum,
        entities,
        symmetry: getSymmetry(format),
        sequence: getSequence(format.data, entities, atomic.hierarchy, formatData.modifiedResidues.parentId),
@@ -259,14 +283,16 @@ function getEntities(format: mmCIF_Format): Entities {

    if (!format.data.entity.id.isDefined) {
        const entityIds = new Set<string>()
-        const entityList: Partial<Table.Row<mmCIF_Schema['entity']>>[] = []
+
+        const ids: mmCIF_Schema['entity']['id']['T'][] = []
+        const types: mmCIF_Schema['entity']['type']['T'][] = []

        const { label_entity_id, label_comp_id } = format.data.atom_site;
        for (let i = 0 as ElementIndex, il = format.data.atom_site._rowCount; i < il; i++) {
            const entityId = label_entity_id.value(i);
            if (!entityIds.has(entityId)) {
-                entityList.push({ id: entityId, type: getEntityType(label_comp_id.value(i)) })
-                entityIds.add(entityId)
+                ids.push(entityId)
+                types.push(getEntityType(label_comp_id.value(i)))
            }
        }

@@ -274,8 +300,8 @@ function getEntities(format: mmCIF_Format): Entities {
        for (let i = 0 as ElementIndex, il = format.data.ihm_sphere_obj_site._rowCount; i < il; i++) {
            const entityId = sphere_entity_id.value(i);
            if (!entityIds.has(entityId)) {
-                entityList.push({ id: entityId, type: 'polymer' })
-                entityIds.add(entityId)
+                ids.push(entityId)
+                types.push('polymer')
            }
        }

@@ -283,12 +309,16 @@ function getEntities(format: mmCIF_Format): Entities {
        for (let i = 0 as ElementIndex, il = format.data.ihm_gaussian_obj_site._rowCount; i < il; i++) {
            const entityId = gaussian_entity_id.value(i);
            if (!entityIds.has(entityId)) {
-                entityList.push({ id: entityId, type: 'polymer' })
-                entityIds.add(entityId)
+                ids.push(entityId)
+                types.push('polymer')
            }
        }

-        entityData = Table.ofRows(mmCIF_Schema.entity, entityList)
+        entityData = Table.ofColumns(mmCIF_Schema.entity, {
+            ...format.data.entity,
+            id: Column.ofArray({ array: ids, schema: mmCIF_Schema.entity.id }),
+            type: Column.ofArray({ array: types, schema: mmCIF_Schema.entity.type }),
+        })
    } else {
        entityData = format.data.entity;
    }
--- a/src/mol-model-props/rcsb/assembly-symmetry.ts
+++ b/src/mol-model-props/rcsb/assembly-symmetry.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -18,7 +18,6 @@ import { CifCategory } from '../../mol-io/reader/cif';
 import { PropertyWrapper } from '../../mol-model-props/common/wrapper';
 import { Task, RuntimeContext } from '../../mol-task';
 import { GraphQLClient } from '../../mol-util/graphql-client';
-import { ajaxGet } from '../../mol-util/data-source';

 const { str, int, float, Aliased, Vector, List } = Column.Schema;

@@ -183,13 +182,12 @@ export function AssemblySymmetry(db: AssemblySymmetry.Database): AssemblySymmetr
 type SymmetryKind = 'GLOBAL' | 'LOCAL' | 'PSEUDO'
 type SymmetryType = 'ASYMMETRIC' | 'CYCLIC' | 'DIHEDRAL' | 'HELICAL' | 'ICOSAHEDRAL' | 'OCTAHEDRAL' | 'TETRAHEDRAL'

-const Client = new GraphQLClient(AssemblySymmetry.GraphQLEndpointURL, ajaxGet)
-
 export namespace AssemblySymmetry {
    export function is(x: any): x is AssemblySymmetry {
        return x['@type'] === 'rcsb_assembly_symmetry'
    }
-    export const GraphQLEndpointURL = '//rest-dev.rcsb.org/graphql'
+    export const GraphQLEndpointURL = '//rest-staging.rcsb.org/graphql'
+
    export const Schema = {
        rcsb_assembly_symmetry_info: {
            updated_datetime_utc: Column.Schema.str
@@ -257,7 +255,7 @@ export namespace AssemblySymmetry {

    export const Descriptor = _Descriptor;

-    export async function attachFromCifOrAPI(model: Model, client: GraphQLClient = Client, ctx?: RuntimeContext) {
+    export async function attachFromCifOrAPI(model: Model, client: GraphQLClient, ctx?: RuntimeContext) {
        if (model.customProperties.has(Descriptor)) return true;

        let db: Database
@@ -266,8 +264,10 @@ export namespace AssemblySymmetry {
            db = createDatabaseFromCif(model)
        } else {
            let result: AssemblySymmetryGraphQL.Query
+            console.log('model.label.toLowerCase()', model.label.toLowerCase())
            const variables: AssemblySymmetryGraphQL.Variables = { pdbId: model.label.toLowerCase() };
            try {
+                console.log('foo', client)
                result = await client.request<AssemblySymmetryGraphQL.Query>(ctx || RuntimeContext.Synchronous, query, variables);
            } catch (e) {
                console.error(e)
--- a/src/mol-model-props/wwpdb/chem-comp-bond.ts
+++ b/src/mol-model-props/wwpdb/chem-comp-bond.ts
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Column, Table } from '../../mol-data/db';
+import { toTable } from '../../mol-io/reader/cif/schema';
+import { Model, CustomPropertyDescriptor } from '../../mol-model/structure';
+import { mmCIF_chemCompBond_schema } from '../../mol-io/reader/cif/schema/mmcif-extras';
+import { CifWriter } from '../../mol-io/writer/cif';
+
+export namespace ChemCompBond {
+    export type Property = Table<Schema['chem_comp_bond']>
+
+    export function getFromModel(model: Model): Property {
+        if (model.sourceData.kind !== 'mmCIF') return Table.ofUndefinedColumns(Schema.chem_comp_bond, 0);
+        const { chem_comp_bond } = model.sourceData.data
+        return Table.ofColumns(Schema.chem_comp_bond, {
+            ...chem_comp_bond,
+            molstar_protonation_variant: Column.Undefined(chem_comp_bond._rowCount, Column.Schema.Str())
+        });
+    }
+
+    export function get(model: Model): Property {
+        return model._staticPropertyData.__ChemCompBond__ || getFromModel(model);
+    }
+    function set(model: Model, prop: Property) {
+        (model._staticPropertyData.__ChemCompBond__ as Property) = prop;
+    }
+
+    export const Schema = { chem_comp_bond: mmCIF_chemCompBond_schema };
+    export type Schema = typeof Schema
+
+    export const Descriptor = CustomPropertyDescriptor({
+        isStatic: true,
+        name: 'chem_comp_bond',
+        cifExport: {
+            prefix: '',
+            context(ctx): Property { return get(ctx.firstModel); },
+            categories: [{
+                name: 'chem_comp_bond',
+                instance(ctx: Property) {
+                    return CifWriter.Category.ofTable(ctx);
+                }
+            }]
+        }
+    });
+
+    function fromCifData(model: Model): Table<Schema['chem_comp_bond']> | undefined {
+        if (model.sourceData.kind !== 'mmCIF') return void 0;
+        const cat = model.sourceData.frame.categories.chem_comp_bond;
+        if (!cat) return void 0;
+        return toTable(Schema.chem_comp_bond, cat);
+    }
+
+    export async function attachFromCifOrTable(model: Model, params: {
+        // optional Table source
+        wwPDB_apiSourceTable?: (model: Model) => Promise<Table<Schema['chem_comp_bond']>>
+    }) {
+        if (model.customProperties.has(Descriptor)) return true;
+
+        let chemCompBond: Table<Schema['chem_comp_bond']> | undefined = fromCifData(model);
+        if (chemCompBond === void 0 && params.wwPDB_apiSourceTable) {
+            const data = await params.wwPDB_apiSourceTable(model);
+            if (!data) return false;
+            chemCompBond = chemCompBondFromTable(model, data);
+        } else {
+            return false;
+        }
+
+        if (!chemCompBond) return false;
+
+        model.customProperties.add(Descriptor);
+        set(model, chemCompBond);
+        return true;
+    }
+}
+
+function chemCompBondFromTable(model: Model, table: Table<ChemCompBond.Schema['chem_comp_bond']>): Table<ChemCompBond.Schema['chem_comp_bond']> {
+    return Table.pick(table, ChemCompBond.Schema.chem_comp_bond, (i: number) => {
+        return model.properties.chemicalComponentMap.has(table.comp_id.value(i))
+    })
+}
--- a/src/mol-model/structure/model/model.ts
+++ b/src/mol-model/structure/model/model.ts
@@ -10,12 +10,11 @@ import StructureSequence from './properties/sequence';
 import { AtomicHierarchy, AtomicConformation } from './properties/atomic';
 import { ModelSymmetry } from './properties/symmetry';
 import { CoarseHierarchy, CoarseConformation } from './properties/coarse';
-import { Entities } from './properties/common';
+import { Entities, ChemicalComponentMap, MissingResidues } from './properties/common';
 import { CustomProperties } from '../common/custom-property';
 import { SecondaryStructure } from './properties/seconday-structure';
 import { SaccharideComponentMap } from '../structure/carbohydrates/constants';
 import { ModelFormat } from '../../../mol-model-formats/structure/format';
-import { ChemicalComponentMap } from './properties/chemical-component';

 /**
 * Interface to the "source data" of the molecule.
@@ -49,6 +48,8 @@ export interface Model extends Readonly<{
            parentId: ReadonlyMap<string, string>,
            details: ReadonlyMap<string, string>
        }>,
+        /** map that holds details about unobserved or zero occurrence residues */
+        readonly missingResidues: MissingResidues,
        /** maps residue name to `ChemicalComponent` data */
        readonly chemicalComponentMap: ChemicalComponentMap
        /** maps residue name to `SaccharideComponent` data */
--- a/src/mol-model/structure/model/properties/atomic/hierarchy.ts
+++ b/src/mol-model/structure/model/properties/atomic/hierarchy.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -113,7 +113,8 @@ export interface AtomicData {
 export interface AtomicDerivedData {
    readonly residue: {
        readonly traceElementIndex: ArrayLike<ElementIndex | -1>
-        readonly directionElementIndex: ArrayLike<ElementIndex | -1>
+        readonly directionFromElementIndex: ArrayLike<ElementIndex | -1>
+        readonly directionToElementIndex: ArrayLike<ElementIndex | -1>
        readonly moleculeType: ArrayLike<MoleculeType>
    }
 }
--- a/src/mol-model/structure/model/properties/chemical-component.ts
+++ b/src/mol-model/structure/model/properties/chemical-component.ts
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import { mmCIF_Schema } from '../../../../mol-io/reader/cif/schema/mmcif';
-import { Table } from '../../../../mol-data/db';
-
-export type ChemicalComponent = Table.Row<mmCIF_Schema['chem_comp']>
-export type ChemicalComponentMap = ReadonlyMap<string, ChemicalComponent>
-
-// TODO add data for common chemical components
--- a/src/mol-model/structure/model/properties/common.ts
+++ b/src/mol-model/structure/model/properties/common.ts
@@ -1,13 +1,28 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 * @author David Sehnal <david.sehnal@gmail.com>
 */

-import { mmCIF_Database as mmCIF } from '../../../../mol-io/reader/cif/schema/mmcif'
+import { mmCIF_Database, mmCIF_Schema } from '../../../../mol-io/reader/cif/schema/mmcif'
+import { Table } from '../../../../mol-data/db';
 import { EntityIndex } from '../indexing';

 export interface Entities {
-    data: mmCIF['entity'],
+    data: mmCIF_Database['entity'],
    getEntityIndex(id: string): EntityIndex
+}
+
+export type ChemicalComponent = Table.Row<mmCIF_Schema['chem_comp']>
+export type ChemicalComponentMap = ReadonlyMap<string, ChemicalComponent>
+
+export type MissingResidue = Table.Row<Pick<
+    mmCIF_Schema['pdbx_unobs_or_zero_occ_residues'],
+    'polymer_flag' | 'occupancy_flag'>
+>
+export interface MissingResidues {
+    has(model_num: number, asym_id: string, seq_id: number): boolean
+    get(model_num: number, asym_id: string, seq_id: number): MissingResidue | undefined
+    readonly size: number
 }
--- a/src/mol-model/structure/model/properties/utils/atomic-derived.ts
+++ b/src/mol-model/structure/model/properties/utils/atomic-derived.ts
@@ -5,17 +5,18 @@
 */

 import { AtomicData } from '../atomic';
-import { ChemicalComponentMap } from '../chemical-component';
 import { AtomicIndex, AtomicDerivedData } from '../atomic/hierarchy';
 import { ElementIndex, ResidueIndex } from '../../indexing';
 import { MoleculeType, getMoleculeType, getComponentType } from '../../types';
 import { getAtomIdForAtomRole } from '../../../../../mol-model/structure/util';
+import { ChemicalComponentMap } from '../common';

 export function getAtomicDerivedData(data: AtomicData, index: AtomicIndex, chemicalComponentMap: ChemicalComponentMap): AtomicDerivedData {
    const { label_comp_id, _rowCount: n } = data.residues

    const traceElementIndex = new Int32Array(n)
-    const directionElementIndex = new Int32Array(n)
+    const directionFromElementIndex = new Int32Array(n)
+    const directionToElementIndex = new Int32Array(n)
    const moleculeType = new Uint8Array(n)

    const moleculeTypeMap = new Map<string, MoleculeType>()
@@ -44,14 +45,18 @@ export function getAtomicDerivedData(data: AtomicData, index: AtomicIndex, chemi
        }
        traceElementIndex[i] = traceIndex

-        const directionAtomId = getAtomIdForAtomRole(molType, 'direction')
-        directionElementIndex[i] = index.findAtomsOnResidue(i as ResidueIndex, directionAtomId)
+        const directionFromAtomId = getAtomIdForAtomRole(molType, 'directionFrom')
+        directionFromElementIndex[i] = index.findAtomsOnResidue(i as ResidueIndex, directionFromAtomId)
+
+        const directionToAtomId = getAtomIdForAtomRole(molType, 'directionTo')
+        directionToElementIndex[i] = index.findAtomsOnResidue(i as ResidueIndex, directionToAtomId)
    }

    return {
        residue: {
            traceElementIndex: traceElementIndex as unknown as ArrayLike<ElementIndex | -1>,
-            directionElementIndex: directionElementIndex as unknown as ArrayLike<ElementIndex | -1>,
+            directionFromElementIndex: directionFromElementIndex as unknown as ArrayLike<ElementIndex | -1>,
+            directionToElementIndex: directionToElementIndex as unknown as ArrayLike<ElementIndex | -1>,
            moleculeType: moleculeType as unknown as ArrayLike<MoleculeType>,
        }
    }
--- a/src/mol-model/structure/model/properties/utils/coarse-ranges.ts
+++ b/src/mol-model/structure/model/properties/utils/coarse-ranges.ts
@@ -7,8 +7,8 @@
 import { CoarseRanges, CoarseElementData } from '../coarse/hierarchy';
 import { Segmentation, Interval } from '../../../../../mol-data/int';
 import SortedRanges from '../../../../../mol-data/int/sorted-ranges';
-import { ChemicalComponent } from '../chemical-component';
 import { ElementIndex } from '../../indexing';
+import { ChemicalComponent } from '../common';

 // TODO assumes all coarse elements are part of a polymer
 // TODO add gaps at the ends of the chains by comparing to the polymer sequence data
--- a/src/mol-model/structure/model/types.ts
+++ b/src/mol-model/structure/model/types.ts
@@ -59,33 +59,39 @@ export const enum MoleculeType {
    saccharide
 }

-export type AtomRole = 'trace' | 'direction' | 'backboneStart' | 'backboneEnd' | 'coarseBackbone'
+export type AtomRole = 'trace' | 'directionFrom' | 'directionTo' | 'backboneStart' | 'backboneEnd' | 'coarseBackbone'

 export const MoleculeTypeAtomRoleId: { [k: number]: { [k in AtomRole]: Set<string> } } = {
    [MoleculeType.protein]: {
        trace: new Set(['CA']),
-        direction: new Set(['O', 'OC1', 'O1', 'OX1', 'OXT']),
+        directionFrom: new Set(['C']),
+        directionTo: new Set(['O', 'OC1', 'O1', 'OX1', 'OXT']),
        backboneStart: new Set(['N']),
        backboneEnd: new Set(['C']),
-        coarseBackbone: new Set(['CA', 'BB'])
+        // CA1 is used e.g. in GFP chromophores
+        // BB is often used for coarse grained models
+        coarseBackbone: new Set(['CA', 'BB', 'CA1'])
    },
    [MoleculeType.RNA]: {
        trace: new Set(['C4\'', 'C4*']),
-        direction: new Set(['C3\'', 'C3*']),
+        directionFrom: new Set(['C4\'', 'C4*']),
+        directionTo: new Set(['C3\'', 'C3*']),
        backboneStart: new Set(['P']),
        backboneEnd: new Set(['O3\'', 'O3*']),
        coarseBackbone: new Set(['P'])
    },
    [MoleculeType.DNA]: {
        trace: new Set(['C3\'', 'C3*']),
-        direction: new Set(['C1\'', 'C1*']),
+        directionFrom: new Set(['C3\'', 'C3*']),
+        directionTo: new Set(['C1\'', 'C1*']),
        backboneStart: new Set(['P']),
        backboneEnd: new Set(['O3\'', 'O3*']),
        coarseBackbone: new Set(['P'])
    },
    [MoleculeType.PNA]: {
        trace: new Set(['N4\'', 'N4*']),
-        direction: new Set(['C7\'', 'C7*']),
+        directionFrom: new Set(['N4\'', 'N4*']),
+        directionTo: new Set(['C7\'', 'C7*']),
        backboneStart: new Set(['N1\'', 'N1*']),
        backboneEnd: new Set(['C\'', 'C*']),
        coarseBackbone: new Set(['P'])
--- a/src/mol-model/structure/query/queries/generators.ts
+++ b/src/mol-model/structure/query/queries/generators.ts
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { StructureQuery } from '../query'
@@ -20,11 +21,13 @@ export const none: StructureQuery = ctx => StructureSelection.Sequence(ctx.input
 export const all: StructureQuery = ctx => StructureSelection.Singletons(ctx.inputStructure, ctx.inputStructure);

 export interface AtomsQueryParams {
+    /** Query to be executed for each unit once */
+    unitTest: QueryPredicate,
    /** Query to be executed for each entity once */
    entityTest: QueryPredicate,
    /** Query to be executed for each chain once */
    chainTest: QueryPredicate,
-    /** Query to be executed for each residue once */
+    /** Query to be executed for each residue (or coarse element) once */
    residueTest: QueryPredicate,
    /** Query to be executed for each atom */
    atomTest: QueryPredicate,
@@ -38,10 +41,11 @@ function _true(ctx: QueryContextView) { return true; }
 function _zero(ctx: QueryContextView) { return 0; }

 export function atoms(params?: Partial<AtomsQueryParams>): StructureQuery {
-    if (!params || (!params.atomTest && !params.residueTest && !params.chainTest && !params.entityTest && !params.groupBy)) return all;
-    if (!!params.atomTest && !params.residueTest && !params.chainTest && !params.entityTest && !params.groupBy) return atomGroupsLinear(params.atomTest);
+    if (!params || (!params.atomTest && !params.residueTest && !params.chainTest && !params.entityTest && !params.unitTest && !params.groupBy)) return all;
+    if (!!params.atomTest && !params.residueTest && !params.chainTest && !params.entityTest && !params.unitTest && !params.groupBy) return atomGroupsLinear(params.atomTest);

    const normalized: AtomsQueryParams = {
+        unitTest: params.unitTest || _true,
        entityTest: params.entityTest || _true,
        chainTest: params.chainTest || _true,
        residueTest: params.residueTest || _true,
@@ -78,7 +82,7 @@ function atomGroupsLinear(atomTest: QueryPredicate): StructureQuery {
    };
 }

-function atomGroupsSegmented({ entityTest, chainTest, residueTest, atomTest }: AtomsQueryParams): StructureQuery {
+function atomGroupsSegmented({ unitTest, entityTest, chainTest, residueTest, atomTest }: AtomsQueryParams): StructureQuery {
    return ctx => {
        const { inputStructure } = ctx;
        const { units } = inputStructure;
@@ -86,31 +90,53 @@ function atomGroupsSegmented({ entityTest, chainTest, residueTest, atomTest }: A
        const builder = inputStructure.subsetBuilder(true);

        for (const unit of units) {
-            if (unit.kind !== Unit.Kind.Atomic) continue;
-
            l.unit = unit;
-            const elements = unit.elements;
+            if (!unitTest(ctx)) continue;

+            const { elements, model } = unit;
            builder.beginUnit(unit.id);
-            const chainsIt = Segmentation.transientSegments(unit.model.atomicHierarchy.chainAtomSegments, elements);
-            const residuesIt = Segmentation.transientSegments(unit.model.atomicHierarchy.residueAtomSegments, elements);
-            while (chainsIt.hasNext) {
-                const chainSegment = chainsIt.move();
-                l.element = elements[chainSegment.start];
-                // test entity and chain
-                if (!entityTest(ctx) || !chainTest(ctx)) continue;

-                residuesIt.setSegment(chainSegment);
-                while (residuesIt.hasNext) {
-                    const residueSegment = residuesIt.move();
-                    l.element = elements[residueSegment.start];
+            if (unit.kind === Unit.Kind.Atomic) {
+                const chainsIt = Segmentation.transientSegments(unit.model.atomicHierarchy.chainAtomSegments, elements);
+                const residuesIt = Segmentation.transientSegments(unit.model.atomicHierarchy.residueAtomSegments, elements);

-                    // test residue
-                    if (!residueTest(ctx)) continue;
+                while (chainsIt.hasNext) {
+                    const chainSegment = chainsIt.move();
+                    l.element = elements[chainSegment.start];
+                    // test entity and chain
+                    if (!entityTest(ctx) || !chainTest(ctx)) continue;

-                    for (let j = residueSegment.start, _j = residueSegment.end; j < _j; j++) {
+                    residuesIt.setSegment(chainSegment);
+                    while (residuesIt.hasNext) {
+                        const residueSegment = residuesIt.move();
+                        l.element = elements[residueSegment.start];
+
+                        // test residue
+                        if (!residueTest(ctx)) continue;
+
+                        for (let j = residueSegment.start, _j = residueSegment.end; j < _j; j++) {
+                            l.element = elements[j];
+                            // test atom
+                            if (atomTest(ctx)) {
+                                builder.addElement(l.element);
+                            }
+                        }
+                    }
+                }
+            } else {
+                const { chainElementSegments } = Unit.Kind.Spheres ? model.coarseHierarchy.spheres : model.coarseHierarchy.gaussians
+                const chainsIt = Segmentation.transientSegments(chainElementSegments, elements);
+
+                while (chainsIt.hasNext) {
+                    const chainSegment = chainsIt.move();
+                    l.element = elements[chainSegment.start];
+                    // test entity and chain
+                    if (!entityTest(ctx) || !chainTest(ctx)) continue;
+
+                    for (let j = chainSegment.start, _j = chainSegment.end; j < _j; j++) {
                        l.element = elements[j];
-                        if (atomTest(ctx)) {
+                        // test residue/coarse element
+                        if (residueTest(ctx)) {
                            builder.addElement(l.element);
                        }
                    }
@@ -125,7 +151,7 @@ function atomGroupsSegmented({ entityTest, chainTest, residueTest, atomTest }: A
    };
 }

-function atomGroupsGrouped({ entityTest, chainTest, residueTest, atomTest, groupBy }: AtomsQueryParams): StructureQuery {
+function atomGroupsGrouped({ unitTest, entityTest, chainTest, residueTest, atomTest, groupBy }: AtomsQueryParams): StructureQuery {
    return ctx => {
        const { inputStructure } = ctx;
        const { units } = inputStructure;
@@ -133,30 +159,53 @@ function atomGroupsGrouped({ entityTest, chainTest, residueTest, atomTest, group
        const builder = new LinearGroupingBuilder(inputStructure);

        for (const unit of units) {
-            if (unit.kind !== Unit.Kind.Atomic) continue;
-
            l.unit = unit;
-            const elements = unit.elements;
+            if (!unitTest(ctx)) continue;

-            const chainsIt = Segmentation.transientSegments(unit.model.atomicHierarchy.chainAtomSegments, elements);
-            const residuesIt = Segmentation.transientSegments(unit.model.atomicHierarchy.residueAtomSegments, elements);
-            while (chainsIt.hasNext) {
-                const chainSegment = chainsIt.move();
-                l.element = elements[chainSegment.start];
-                // test entity and chain
-                if (!entityTest(ctx) || !chainTest(ctx)) continue;
+            const { elements, model } = unit;

-                residuesIt.setSegment(chainSegment);
-                while (residuesIt.hasNext) {
-                    const residueSegment = residuesIt.move();
-                    l.element = elements[residueSegment.start];
+            if (unit.kind === Unit.Kind.Atomic) {
+                const chainsIt = Segmentation.transientSegments(model.atomicHierarchy.chainAtomSegments, elements);
+                const residuesIt = Segmentation.transientSegments(model.atomicHierarchy.residueAtomSegments, elements);

-                    // test residue
-                    if (!residueTest(ctx)) continue;
+                while (chainsIt.hasNext) {
+                    const chainSegment = chainsIt.move();
+                    l.element = elements[chainSegment.start];
+                    // test entity and chain
+                    if (!entityTest(ctx) || !chainTest(ctx)) continue;

-                    for (let j = residueSegment.start, _j = residueSegment.end; j < _j; j++) {
+                    residuesIt.setSegment(chainSegment);
+                    while (residuesIt.hasNext) {
+                        const residueSegment = residuesIt.move();
+                        l.element = elements[residueSegment.start];
+
+                        // test residue
+                        if (!residueTest(ctx)) continue;
+
+                        for (let j = residueSegment.start, _j = residueSegment.end; j < _j; j++) {
+                            l.element = elements[j];
+                            // test atom
+                            if (atomTest(ctx)) {
+                                builder.add(groupBy(ctx), unit.id, l.element);
+                            }
+                        }
+                    }
+                }
+            } else {
+                const { chainElementSegments } = Unit.Kind.Spheres ? model.coarseHierarchy.spheres : model.coarseHierarchy.gaussians
+                const chainsIt = Segmentation.transientSegments(chainElementSegments, elements);
+                while (chainsIt.hasNext) {
+                    const chainSegment = chainsIt.move();
+                    l.element = elements[chainSegment.start];
+                    // test entity and chain
+                    if (!entityTest(ctx) || !chainTest(ctx)) continue;
+
+                    for (let j = chainSegment.start, _j = chainSegment.end; j < _j; j++) {
                        l.element = elements[j];
-                        if (atomTest(ctx)) builder.add(groupBy(ctx), unit.id, l.element);
+                        // test residue/coarse element
+                        if (residueTest(ctx)) {
+                            builder.add(groupBy(ctx), unit.id, l.element);
+                        }
                    }
                }
            }
--- a/src/mol-model/structure/structure/element.ts
+++ b/src/mol-model/structure/structure/element.ts
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { UniqueArray } from '../../../mol-data/generic';
@@ -30,6 +31,12 @@ namespace StructureElement {
        return { kind: 'element-location', unit: unit!, element: element || (0 as ElementIndex) };
    }

+    export function set(a: StructureElement, unit?: Unit, element?: ElementIndex): StructureElement {
+        if (unit) a.unit = unit
+        if (element !== undefined) a.element = element
+        return a;
+    }
+
    // TODO: when nominal types are available, make this indexed by UnitIndex
    export type Set = SortedArray<ElementIndex>

@@ -132,6 +139,8 @@ namespace StructureElement {
        }

        export function remap(loci: Loci, structure: Structure): Loci {
+            if (structure === loci.structure) return loci
+
            return Loci(structure, loci.elements.map(e => ({
                unit: structure.unitMap.get(e.unit.id)!,
                indices: e.indices
@@ -150,11 +159,16 @@ namespace StructureElement {
            for (const e of ys.elements) {
                if (map.has(e.unit.id)) {
                    elements[elements.length] = { unit: e.unit, indices: OrderedSet.union(map.get(e.unit.id)!, e.indices) };
+                    map.delete(e.unit.id)
                } else {
                    elements[elements.length] = e;
                }
            }

+            map.forEach((indices, id) => {
+                elements[elements.length] = { unit: xs.structure.unitMap.get(id)!, indices };
+            });
+
            return Loci(xs.structure, elements);
        }

@@ -195,24 +209,65 @@ namespace StructureElement {
            const elements: Loci['elements'][0][] = [];

            for (const lociElement of loci.elements) {
-                if (lociElement.unit.kind !== Unit.Kind.Atomic) elements[elements.length] = lociElement;
+                if (lociElement.unit.kind === Unit.Kind.Atomic) {
+                    const unitElements = lociElement.unit.elements;
+                    const h = lociElement.unit.model.atomicHierarchy;

-                const unitElements = lociElement.unit.elements;
-                const h = lociElement.unit.model.atomicHierarchy;
+                    const { index: residueIndex, offsets: residueOffsets } = h.residueAtomSegments;

-                const { index: residueIndex, offsets: residueOffsets } = h.residueAtomSegments;
+                    const newIndices: UnitIndex[] = [];
+                    const indices = lociElement.indices, len = OrderedSet.size(indices);
+                    let i = 0;
+                    while (i < len) {
+                        const rI = residueIndex[unitElements[OrderedSet.getAt(indices, i)]];
+                        i++;
+                        while (i < len && residueIndex[unitElements[OrderedSet.getAt(indices, i)]] === rI) {
+                            i++;
+                        }

+                        for (let j = residueOffsets[rI], _j = residueOffsets[rI + 1]; j < _j; j++) {
+                            const idx = OrderedSet.indexOf(unitElements, j);
+                            if (idx >= 0) newIndices[newIndices.length] = idx as UnitIndex;
+                        }
+                    }
+
+                    elements[elements.length] = { unit: lociElement.unit, indices: SortedArray.ofSortedArray(newIndices) };
+                } else {
+                    // coarse elements are already by-residue
+                    elements[elements.length] = lociElement;
+                }
+            }
+
+            return Loci(loci.structure, elements);
+        }
+
+        function getChainSegments(unit: Unit) {
+            switch (unit.kind) {
+                case Unit.Kind.Atomic: return unit.model.atomicHierarchy.chainAtomSegments
+                case Unit.Kind.Spheres: return unit.model.coarseHierarchy.spheres.chainElementSegments
+                case Unit.Kind.Gaussians: return unit.model.coarseHierarchy.gaussians.chainElementSegments
+            }
+        }
+
+        export function extendToWholeChains(loci: Loci): Loci {
+            const elements: Loci['elements'][0][] = [];
+
+            for (const lociElement of loci.elements) {
                const newIndices: UnitIndex[] = [];
+                const unitElements = lociElement.unit.elements;
+
+                const { index: chainIndex, offsets: chainOffsets } = getChainSegments(lociElement.unit)
+
                const indices = lociElement.indices, len = OrderedSet.size(indices);
                let i = 0;
                while (i < len) {
-                    const rI = residueIndex[unitElements[OrderedSet.getAt(indices, i)]];
+                    const cI = chainIndex[unitElements[OrderedSet.getAt(indices, i)]];
                    i++;
-                    while (i < len && residueIndex[unitElements[OrderedSet.getAt(indices, i)]] === rI) {
+                    while (i < len && chainIndex[unitElements[OrderedSet.getAt(indices, i)]] === cI) {
                        i++;
                    }

-                    for (let j = residueOffsets[rI], _j = residueOffsets[rI + 1]; j < _j; j++) {
+                    for (let j = chainOffsets[cI], _j = chainOffsets[cI + 1]; j < _j; j++) {
                        const idx = OrderedSet.indexOf(unitElements, j);
                        if (idx >= 0) newIndices[newIndices.length] = idx as UnitIndex;
                    }
--- a/src/mol-model/structure/structure/properties.ts
+++ b/src/mol-model/structure/structure/properties.ts
@@ -111,8 +111,15 @@ const entity = {
 }

 const unit = {
+    id: StructureElement.property(l => l.unit.id),
    operator_name: StructureElement.property(l => l.unit.conformation.operator.name),
-    model_num: StructureElement.property(l => l.unit.model.modelNum)
+    hkl: StructureElement.property(l => l.unit.conformation.operator.hkl),
+    spgrOp: StructureElement.property(l => l.unit.conformation.operator.spgrOp),
+
+    model_num: StructureElement.property(l => l.unit.model.modelNum),
+    pdbx_struct_assembly_id: StructureElement.property(l => l.unit.conformation.operator.assembly.id),
+    pdbx_struct_oper_list_ids: StructureElement.property(l => l.unit.conformation.operator.assembly.operList),
+    struct_ncs_oper_id: StructureElement.property(l => l.unit.conformation.operator.ncsId),
 }

 const StructureProperties = {
--- a/src/mol-model/structure/structure/structure.ts
+++ b/src/mol-model/structure/structure/structure.ts
@@ -5,7 +5,7 @@
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

-import { IntMap, SortedArray, Iterator, Segmentation } from '../../../mol-data/int'
+import { IntMap, SortedArray, Iterator, Segmentation, Interval } from '../../../mol-data/int'
 import { UniqueArray } from '../../../mol-data/generic'
 import { SymmetryOperator } from '../../../mol-math/geometry/symmetry-operator'
 import { Model, ElementIndex } from '../model'
@@ -141,6 +141,7 @@ class Structure {
        return new Structure.ElementLocationIterator(this);
    }

+    /** the root/top-most parent or `undefined` in case this is the root */
    get parent() {
        return this._props.parent;
    }
@@ -240,7 +241,7 @@ class Structure {
    constructor(units: ArrayLike<Unit>, parent: Structure | undefined, coordinateSystem?: SymmetryOperator) {
        this.unitMap = this.initUnits(units);
        this.units = units as ReadonlyArray<Unit>;
-        if (parent) this._props.parent = parent;
+        if (parent) this._props.parent = parent.parent || parent;
        if (coordinateSystem) this._props.coordinateSystem = coordinateSystem;
        else if (parent) this._props.coordinateSystem = parent.coordinateSystem;
    }
@@ -344,6 +345,14 @@ namespace Structure {
        return { kind: 'structure-loci', structure };
    }

+    export function toStructureElementLoci(loci: Loci): StructureElement.Loci {
+        const elements: StructureElement.Loci['elements'][0][] = []
+        for (const unit of loci.structure.units) {
+            elements.push({ unit, indices: Interval.ofBounds(0, unit.elements.length) })
+        }
+        return StructureElement.Loci(loci.structure, elements);
+    }
+
    export function isLoci(x: any): x is Loci {
        return !!x && x.kind === 'structure-loci';
    }
@@ -507,6 +516,16 @@ namespace Structure {
        )
    }

+    /** Check if the structures or their parents are equivalent */
+    export function areParentsEquivalent(a: Structure, b: Structure) {
+        return areEquivalent(a.parent || a, b.parent || b)
+    }
+
+    /** Check if the structures or their parents are equal */
+    export function areParentsEqual(a: Structure, b: Structure) {
+        return (a.parent || a) === (b.parent || b)
+    }
+
    export class ElementLocationIterator implements Iterator<StructureElement> {
        private current = StructureElement.create();
        private unitIndex = 0;
--- a/src/mol-model/structure/structure/symmetry.ts
+++ b/src/mol-model/structure/structure/symmetry.ts
@@ -117,7 +117,7 @@ function getOperators(symmetry: ModelSymmetry, ijkMin: Vec3, ijkMax: Vec3) {
                        for (let u = 0; u < ncsCount; ++u) {
                            const ncsOp = ncsOperators![u]
                            const matrix = Mat4.mul(Mat4.zero(), symOp.matrix, ncsOp.matrix)
-                            const operator = SymmetryOperator.create(`${symOp.name} ${ncsOp.name}`, matrix, symOp.assembly, ncsOp.ncsId, symOp.hkl);
+                            const operator = SymmetryOperator.create(`${symOp.name} ${ncsOp.name}`, matrix, symOp.assembly, ncsOp.ncsId, symOp.hkl, symOp.spgrOp);
                            operators[operators.length] = operator;
                        }
                    } else {
--- a/src/mol-model/structure/structure/unit/links.ts
+++ b/src/mol-model/structure/structure/unit/links.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -8,6 +8,7 @@
 import { Unit, StructureElement } from '../../structure'
 import Structure from '../structure';
 import { LinkType } from '../../model/types';
+import { SortedArray } from '../../../../mol-data/int';

 export * from './links/data'
 export * from './links/intra-compute'
@@ -61,6 +62,33 @@ namespace Link {
        return true
    }

+    export function toStructureElementLoci(loci: Loci): StructureElement.Loci {
+        const elements: StructureElement.Loci['elements'][0][] = []
+        const map = new Map<number, number[]>()
+
+        for (const lociLink of loci.links) {
+            const { aIndex, aUnit, bIndex, bUnit } = lociLink
+            if (aUnit === bUnit) {
+                if (map.has(aUnit.id)) map.get(aUnit.id)!.push(aIndex, bIndex)
+                else map.set(aUnit.id, [aIndex, bIndex])
+            } else {
+                if (map.has(aUnit.id)) map.get(aUnit.id)!.push(aIndex)
+                else map.set(aUnit.id, [aIndex])
+                if (map.has(bUnit.id)) map.get(bUnit.id)!.push(bIndex)
+                else map.set(bUnit.id, [bIndex])
+            }
+        }
+
+        map.forEach((indices: number[], id: number) => {
+            elements.push({
+                unit: loci.structure.unitMap.get(id)!,
+                indices: SortedArray.deduplicate(SortedArray.ofUnsortedArray(indices))
+            })
+        })
+
+        return StructureElement.Loci(loci.structure, elements);
+    }
+
    export function getType(structure: Structure, link: Location<Unit.Atomic>): LinkType {
        if (link.aUnit === link.bUnit) {
            const links = link.aUnit.links;
--- a/src/mol-plugin/behavior/dynamic/camera.ts
+++ b/src/mol-plugin/behavior/dynamic/camera.ts
@@ -14,7 +14,7 @@ export const FocusLociOnSelect = PluginBehavior.create<{ minRadius: number, extr
    category: 'interaction',
    ctor: class extends PluginBehavior.Handler<{ minRadius: number, extraRadius: number }> {
        register(): void {
-            this.subscribeObservable(this.ctx.behaviors.canvas3d.click, ({ current, buttons, modifiers }) => {
+            this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, buttons, modifiers }) => {
                if (!this.ctx.canvas3d || buttons !== ButtonsType.Flag.Primary || !ModifiersKeys.areEqual(modifiers, ModifiersKeys.None)) return;

                const sphere = Loci.getBoundingSphere(current.loci);
@@ -25,7 +25,7 @@ export const FocusLociOnSelect = PluginBehavior.create<{ minRadius: number, extr
    },
    params: () => ({
        minRadius: ParamDefinition.Numeric(8, { min: 1, max: 50, step: 1 }),
-        extraRadius: ParamDefinition.Numeric(4, { min: 1, max: 50, step: 1 }, { description: 'Value added to the boundning sphere radius of the Loci.' })
+        extraRadius: ParamDefinition.Numeric(4, { min: 1, max: 50, step: 1 }, { description: 'Value added to the bounding-sphere radius of the Loci.' })
    }),
    display: { name: 'Focus Loci on Select' }
 });
--- a/src/mol-plugin/behavior/dynamic/representation.ts
+++ b/src/mol-plugin/behavior/dynamic/representation.ts
@@ -5,45 +5,27 @@
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

-import { MarkerAction } from '../../../mol-geo/geometry/marker-data';
-import { EmptyLoci } from '../../../mol-model/loci';
-import { StructureElement } from '../../../mol-model/structure';
+import { MarkerAction } from '../../../mol-util/marker-action';
 import { PluginContext } from '../../../mol-plugin/context';
-import { Representation } from '../../../mol-repr/representation';
+import { PluginStateObject as SO } from '../../state/objects';
 import { labelFirst } from '../../../mol-theme/label';
-import { ButtonsType } from '../../../mol-util/input/input-observer';
 import { PluginBehavior } from '../behavior';
+import { Interactivity } from '../../util/interactivity';
+import { StateTreeSpine } from '../../../mol-state/tree/spine';

 export const HighlightLoci = PluginBehavior.create({
    name: 'representation-highlight-loci',
    category: 'interaction',
    ctor: class extends PluginBehavior.Handler {
-        register(): void {
-            let prev: Representation.Loci = { loci: EmptyLoci, repr: void 0 };
-            const sel = this.ctx.helpers.structureSelection;
-
-            this.subscribeObservable(this.ctx.behaviors.canvas3d.highlight, ({ current, modifiers }) => {
-                if (!this.ctx.canvas3d) return;
-
-                if (StructureElement.isLoci(current.loci)) {
-                    let loci: StructureElement.Loci = current.loci;
-                    if (modifiers && modifiers.shift) {
-                        loci = sel.tryGetRange(loci) || loci;
-                    }
-
-                    this.ctx.canvas3d.mark(prev, MarkerAction.RemoveHighlight);
-                    const toHighlight = { loci, repr: current.repr };
-                    this.ctx.canvas3d.mark(toHighlight, MarkerAction.Highlight);
-                    prev = toHighlight;
-                } else {
-                    if (!Representation.Loci.areEqual(prev, current)) {
-                        this.ctx.canvas3d.mark(prev, MarkerAction.RemoveHighlight);
-                        this.ctx.canvas3d.mark(current, MarkerAction.Highlight);
-                        prev = current;
-                    }
-                }
-
-            });
+        private lociMarkProvider = (interactionLoci: Interactivity.Loci, action: MarkerAction) => {
+            if (!this.ctx.canvas3d) return;
+            this.ctx.canvas3d.mark({ loci: interactionLoci.loci }, action)
+        }
+        register() {
+            this.ctx.interactivity.lociHighlights.addProvider(this.lociMarkProvider)
+        }
+        unregister() {
+            this.ctx.interactivity.lociHighlights.removeProvider(this.lociMarkProvider)
        }
    },
    display: { name: 'Highlight Loci on Canvas' }
@@ -53,52 +35,33 @@ export const SelectLoci = PluginBehavior.create({
    name: 'representation-select-loci',
    category: 'interaction',
    ctor: class extends PluginBehavior.Handler {
-        register(): void {
-            const sel = this.ctx.helpers.structureSelection;
+        private spine: StateTreeSpine.Impl
+        private lociMarkProvider = (interactionLoci: Interactivity.Loci, action: MarkerAction) => {
+            if (!this.ctx.canvas3d) return;
+            this.ctx.canvas3d.mark({ loci: interactionLoci.loci }, action)
+        }
+        register() {
+            this.ctx.interactivity.lociSelections.addProvider(this.lociMarkProvider)

-            const toggleSel = (current: Representation.Loci<StructureElement.Loci>) => {
-                if (sel.has(current.loci)) {
-                    sel.remove(current.loci);
-                    this.ctx.canvas3d.mark(current, MarkerAction.Deselect);
-                } else {
-                    sel.add(current.loci);
-                    this.ctx.canvas3d.mark(current, MarkerAction.Select);
-                }
-            }
-
-            this.subscribeObservable(this.ctx.behaviors.canvas3d.click, ({ current, buttons, modifiers }) => {
-                if (!this.ctx.canvas3d) return;
-
-                if (current.loci.kind === 'empty-loci') {
-                    if (modifiers.control && buttons === ButtonsType.Flag.Secondary) {
-                        // clear the selection on Ctrl + Right-Click on empty
-                        const sels = sel.clear();
-                        for (const s of sels) this.ctx.canvas3d.mark({ loci: s }, MarkerAction.Deselect);
+            this.subscribeObservable(this.ctx.events.state.object.created, ({ ref }) => {
+                const cell = this.ctx.state.dataState.cells.get(ref)
+                if (cell && SO.isRepresentation3D(cell.obj)) {
+                    this.spine.current = cell
+                    const so = this.spine.getRootOfType(SO.Molecule.Structure)
+                    if (so) {
+                        const loci = this.ctx.helpers.structureSelection.get(so.data)
+                        this.lociMarkProvider({ loci }, MarkerAction.Select)
                    }
-                } else if (StructureElement.isLoci(current.loci)) {
-                    if (modifiers.control && buttons === ButtonsType.Flag.Secondary) {
-                        // select only the current element on Ctrl + Right-Click
-                        const old = sel.get(current.loci.structure);
-                        this.ctx.canvas3d.mark({ loci: old }, MarkerAction.Deselect);
-                        sel.set(current.loci);
-                        this.ctx.canvas3d.mark(current, MarkerAction.Select);
-                    } else if (modifiers.control && buttons === ButtonsType.Flag.Primary) {
-                        // toggle current element on Ctrl + Left-Click
-                        toggleSel(current as Representation.Loci<StructureElement.Loci>);
-                    } else if (modifiers.shift && buttons === ButtonsType.Flag.Primary) {
-                        // try to extend sequence on Shift + Left-Click
-                        let loci: StructureElement.Loci = current.loci;
-                        if (modifiers && modifiers.shift) {
-                            loci = sel.tryGetRange(loci) || loci;
-                        }
-                        toggleSel({ loci, repr: current.repr });
-                    }
-                } else {
-                    if (!ButtonsType.has(buttons, ButtonsType.Flag.Secondary)) return;
-                    this.ctx.canvas3d.mark(current, MarkerAction.Toggle);
                }
            });
        }
+        unregister() {
+            this.ctx.interactivity.lociSelections.removeProvider(this.lociMarkProvider)
+        }
+        constructor(ctx: PluginContext, params: {}) {
+            super(ctx, params)
+            this.spine = new StateTreeSpine.Impl(ctx.state.dataState.cells)
+        }
    },
    display: { name: 'Select Loci on Canvas' }
 });
@@ -108,7 +71,7 @@ export const DefaultLociLabelProvider = PluginBehavior.create({
    category: 'interaction',
    ctor: class implements PluginBehavior<undefined> {
        private f = labelFirst;
-        register(): void { this.ctx.lociLabels.addProvider(this.f); }
+        register() { this.ctx.lociLabels.addProvider(this.f); }
        unregister() { this.ctx.lociLabels.removeProvider(this.f); }
        constructor(protected ctx: PluginContext) { }
    },
--- a/src/mol-plugin/behavior/dynamic/selection/structure-representation-interaction.ts
+++ b/src/mol-plugin/behavior/dynamic/selection/structure-representation-interaction.ts
@@ -121,7 +121,7 @@ export class StructureRepresentationInteractionBehavior extends PluginBehavior.W
            }
        });

-        this.subscribeObservable(this.plugin.behaviors.canvas3d.click, ({ current, buttons, modifiers }) => {
+        this.subscribeObservable(this.plugin.behaviors.interaction.click, ({ current, buttons, modifiers }) => {
            if (buttons !== ButtonsType.Flag.Secondary) return;

            if (current.loci.kind === 'empty-loci') {
--- a/src/mol-plugin/behavior/dynamic/volume-streaming/behavior.ts
+++ b/src/mol-plugin/behavior/dynamic/volume-streaming/behavior.ts
@@ -43,13 +43,13 @@ export namespace VolumeStreaming {
        valuesInfo: [{ mean: 0, min: -1, max: 1, sigma: 0.1 }, { mean: 0, min: -1, max: 1, sigma: 0.1 }]
    };

-    export function createParams(data?: VolumeServerInfo.Data) {
+    export function createParams(data?: VolumeServerInfo.Data, defaultView?: ViewTypes) {
        // fake the info
        const info = data || { kind: 'em', header: { sampling: [fakeSampling], availablePrecisions: [{ precision: 0, maxVoxels: 0 }] }, emDefaultContourLevel: VolumeIsoValue.relative(0) };
        const box = (data && data.structure.boundary.box) || Box3D.empty();

        return {
-            view: PD.MappedStatic(info.kind === 'em' ? 'cell' : 'selection-box', {
+            view: PD.MappedStatic(defaultView || (info.kind === 'em' ? 'cell' : 'selection-box'), {
                'box': PD.Group({
                    bottomLeft: PD.Vec3(box.min),
                    topRight: PD.Vec3(box.max),
@@ -76,6 +76,8 @@ export namespace VolumeStreaming {
        };
    }

+    export type ViewTypes = 'box' | 'selection-box' | 'cell'
+
    export type ParamDefinition = typeof createParams extends (...args: any[]) => (infer T) ? T : never
    export type Params = ParamDefinition extends PD.Params ? PD.Values<ParamDefinition> : {}

@@ -193,7 +195,7 @@ export namespace VolumeStreaming {
                }
            });

-            this.subscribeObservable(this.plugin.behaviors.canvas3d.click, ({ current, buttons, modifiers }) => {
+            this.subscribeObservable(this.plugin.behaviors.interaction.click, ({ current, buttons, modifiers }) => {
                if (buttons !== ButtonsType.Flag.Secondary || this.params.view.name !== 'selection-box') return;

                if (current.loci.kind === 'empty-loci') {
--- a/src/mol-plugin/behavior/dynamic/volume-streaming/transformers.ts
+++ b/src/mol-plugin/behavior/dynamic/volume-streaming/transformers.ts
@@ -26,10 +26,13 @@ export const InitVolumeStreaming = StateAction.build({
    display: { name: 'Volume Streaming' },
    from: SO.Molecule.Structure,
    params(a) {
+        const method = getStreamingMethod(a && a.data);
        return {
-            method: PD.Select<VolumeServerInfo.Kind>(getStreamingMethod(a && a.data), [['em', 'EM'], ['x-ray', 'X-Ray']]),
+            method: PD.Select<VolumeServerInfo.Kind>(method, [['em', 'EM'], ['x-ray', 'X-Ray']]),
            id: PD.Text((a && a.data.models.length > 0 && a.data.models[0].label) || ''),
-            serverUrl: PD.Text('https://ds.litemol.org')
+            serverUrl: PD.Text('https://ds.litemol.org'),
+            defaultView: PD.Text<VolumeStreaming.ViewTypes>(method === 'em' ? 'cell' : 'selection-box'),
+            behaviorRef: PD.Text('', { isHidden: true })
        };
    },
    isApplicable: (a) => a.data.models.length === 1
@@ -56,7 +59,8 @@ export const InitVolumeStreaming = StateAction.build({
    const infoObj = await state.updateTree(infoTree).runInContext(taskCtx);

    const behTree = state.build().to(infoTree.ref).apply(CreateVolumeStreamingBehavior,
-        PD.getDefaultValues(VolumeStreaming.createParams(infoObj.data)));
+        PD.getDefaultValues(VolumeStreaming.createParams(infoObj.data, params.defaultView)),
+        { ref: params.behaviorRef ? params.behaviorRef : void 0 });

    if (params.method === 'em') {
        behTree.apply(VolumeStreamingVisual, { channel: 'em' }, { state: { isGhost: true } });
--- a/src/mol-plugin/behavior/static/misc.ts
+++ b/src/mol-plugin/behavior/static/misc.ts
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { PluginContext } from '../../../mol-plugin/context';
@@ -9,6 +10,7 @@ import { PluginCommands } from '../../../mol-plugin/command';

 export function registerDefault(ctx: PluginContext) {
    Canvas3DSetSettings(ctx);
+    InteractivitySetProps(ctx);
 }

 export function Canvas3DSetSettings(ctx: PluginContext) {
@@ -17,3 +19,10 @@ export function Canvas3DSetSettings(ctx: PluginContext) {
        ctx.events.canvas3d.settingsUpdated.next();
    })
 }
+
+export function InteractivitySetProps(ctx: PluginContext) {
+    PluginCommands.Interactivity.SetProps.subscribe(ctx, e => {
+        ctx.interactivity.setProps(e.props);
+        ctx.events.interactivity.propsUpdated.next();
+    })
+}
--- a/src/mol-plugin/behavior/static/representation.ts
+++ b/src/mol-plugin/behavior/static/representation.ts
@@ -18,15 +18,19 @@ export function registerDefault(ctx: PluginContext) {
 export function SyncRepresentationToCanvas(ctx: PluginContext) {
    let reprCount = 0;

+    ctx.events.canvas3d.initialized.subscribe(() => {
+        ctx.canvas3d.reprCount.subscribe(v => {
+            if (reprCount === 0) ctx.canvas3d.resetCamera();
+            reprCount = v;
+        });
+    })
+
    const events = ctx.state.dataState.events;
    events.object.created.subscribe(e => {
        if (!SO.isRepresentation3D(e.obj)) return;
        updateVisibility(e.state.cells.get(e.ref)!, e.obj.data.repr);
        e.obj.data.repr.setState({ syncManually: true });
        ctx.canvas3d.add(e.obj.data.repr);
-
-        if (reprCount === 0) ctx.canvas3d.resetCamera();
-        reprCount++;
    });
    events.object.updated.subscribe(e => {
        if (e.oldObj && SO.isRepresentation3D(e.oldObj)) {
@@ -50,7 +54,6 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) {
        ctx.canvas3d.remove(e.obj.data.repr);
        ctx.canvas3d.requestDraw(true);
        e.obj.data.repr.destroy();
-        reprCount--;
    });
 }

--- a/src/mol-plugin/command.ts
+++ b/src/mol-plugin/command.ts
@@ -11,6 +11,7 @@ import { Canvas3DProps } from '../mol-canvas3d/canvas3d';
 import { PluginLayoutStateProps } from './layout';
 import { StructureElement } from '../mol-model/structure';
 import { PluginState } from './state';
+import { Interactivity } from './util/interactivity';

 export * from './command/base';

@@ -43,6 +44,7 @@ export const PluginCommands = {
        }
    },
    Interactivity: {
+        SetProps: PluginCommand<{ props: Partial<Interactivity.Props> }>(),
        Structure: {
            Highlight: PluginCommand<{ loci: StructureElement.Loci, isOff?: boolean }>(),
            Select: PluginCommand<{ loci: StructureElement.Loci, isOff?: boolean }>()
--- a/src/mol-plugin/component.ts
+++ b/src/mol-plugin/component.ts
@@ -8,7 +8,7 @@ import { shallowMergeArray } from '../mol-util/object';
 import { RxEventHelper } from '../mol-util/rx-event-helper';

 export class PluginComponent<State> {
-    private _ev: RxEventHelper;
+    private _ev: RxEventHelper | undefined;

    protected get ev() {
        return this._ev || (this._ev = RxEventHelper.create());
--- a/src/mol-plugin/context.ts
+++ b/src/mol-plugin/context.ts
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { List } from 'immutable';
@@ -32,10 +33,19 @@ import { TaskManager } from './util/task-manager';
 import { PLUGIN_VERSION, PLUGIN_VERSION_DATE } from './version';
 import { StructureElementSelectionManager } from './util/structure-element-selection';
 import { SubstructureParentHelper } from './util/substructure-parent-helper';
-import { Representation } from '../mol-repr/representation';
 import { ModifiersKeys } from '../mol-util/input/input-observer';
 import { isProductionMode, isDebugMode } from '../mol-util/debug';
 import { Model, Structure } from '../mol-model/structure';
+import { Interactivity } from './util/interactivity';
+
+interface Log {
+    entries: List<LogEntry>
+    readonly entry: (e: LogEntry) => void
+    readonly error: (msg: string) => void
+    readonly message: (msg: string) => void
+    readonly info: (msg: string) => void
+    readonly warn: (msg: string) => void
+}

 export class PluginContext {
    private disposed = false;
@@ -63,42 +73,47 @@ export class PluginContext {
        log: this.ev<LogEntry>(),
        task: this.tasks.events,
        canvas3d: {
+            initialized: this.ev(),
            settingsUpdated: this.ev()
+        },
+        interactivity: {
+            propsUpdated: this.ev()
        }
-    };
+    } as const

    readonly behaviors = {
        state: {
            isAnimating: this.ev.behavior<boolean>(false),
            isUpdating: this.ev.behavior<boolean>(false)
        },
-        canvas3d: {
-            highlight: this.ev.behavior<Canvas3D.HighlightEvent>({ current: Representation.Loci.Empty, prev: Representation.Loci.Empty }),
-            click: this.ev.behavior<Canvas3D.ClickEvent>({ current: Representation.Loci.Empty, modifiers: ModifiersKeys.None, buttons: 0 })
+        interaction: {
+            highlight: this.ev.behavior<Interactivity.HighlightEvent>({ current: Interactivity.Loci.Empty }),
+            click: this.ev.behavior<Interactivity.ClickEvent>({ current: Interactivity.Loci.Empty, modifiers: ModifiersKeys.None, buttons: 0 })
        },
        labels: {
            highlight: this.ev.behavior<{ entries: ReadonlyArray<LociLabelEntry> }>({ entries: [] })
        }
-    };
+    } as const

    readonly canvas3d: Canvas3D;
    readonly layout: PluginLayout = new PluginLayout(this);
+    readonly interactivity: Interactivity;

    readonly lociLabels: LociLabelManager;

    readonly structureRepresentation = {
        registry: new StructureRepresentationRegistry(),
        themeCtx: { colorThemeRegistry: ColorTheme.createRegistry(), sizeThemeRegistry: SizeTheme.createRegistry() } as ThemeRegistryContext
-    }
+    } as const

    readonly volumeRepresentation = {
        registry: new VolumeRepresentationRegistry(),
        themeCtx: { colorThemeRegistry: ColorTheme.createRegistry(), sizeThemeRegistry: SizeTheme.createRegistry() } as ThemeRegistryContext
-    }
+    } as const

    readonly dataFormat = {
        registry: new DataFormatRegistry()
-    }
+    } as const

    readonly customModelProperties = new CustomPropertyRegistry<Model>();
    readonly customStructureProperties = new CustomPropertyRegistry<Structure>();
@@ -107,13 +122,15 @@ export class PluginContext {
    readonly helpers = {
        structureSelection: new StructureElementSelectionManager(this),
        substructureParent: new SubstructureParentHelper(this)
-    };
+    } as const;

    initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement) {
        try {
            this.layout.setRoot(container);
            if (this.spec.layout && this.spec.layout.initial) this.layout.setProps(this.spec.layout.initial);
-            (this.canvas3d as Canvas3D) = Canvas3D.fromCanvas(canvas);
+            (this.canvas3d as Canvas3D) = Canvas3D.fromCanvas(canvas, {}, t => this.runTask(t));
+            this.events.canvas3d.initialized.next()
+            this.events.canvas3d.initialized.isStopped = true // TODO is this a good way?
            const renderer = this.canvas3d.props.renderer;
            PluginCommands.Canvas3D.SetSettings.dispatch(this, { settings: { renderer: { ...renderer, backgroundColor: Color(0xFCFBF9) } } });
            this.canvas3d.animate();
@@ -125,7 +142,7 @@ export class PluginContext {
        }
    }

-    readonly log = {
+    readonly log: Log = {
        entries: List<LogEntry>(),
        entry: (e: LogEntry) => this.events.log.next(e),
        error: (msg: string) => this.events.log.next(LogEntry.error(msg)),
@@ -226,6 +243,7 @@ export class PluginContext {
        this.initAnimations();
        this.initCustomParamEditors();

+        this.interactivity = new Interactivity(this);
        this.lociLabels = new LociLabelManager(this);

        this.log.message(`Mol* Plugin ${PLUGIN_VERSION} [${PLUGIN_VERSION_DATE.toLocaleString()}]`);
--- a/src/mol-plugin/layout.ts
+++ b/src/mol-plugin/layout.ts
@@ -54,7 +54,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
        this.events.updated.next();
    }

-    private root: HTMLElement;
+    private root: HTMLElement | undefined;
    private rootState: RootState | undefined = void 0;
    private expandedViewport: HTMLMetaElement;

@@ -78,7 +78,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
            let body = document.getElementsByTagName('body')[0];
            let head = document.getElementsByTagName('head')[0];

-            if (!body || !head) return;
+            if (!body || !head || !this.root) return;

            if (this.state.isExpanded) {
                let children = head.children;
--- a/src/mol-plugin/skin/base/components/controls.scss
+++ b/src/mol-plugin/skin/base/components/controls.scss
@@ -8,42 +8,42 @@
    select, button, input[type=text] {
        @extend .msp-form-control;
    }
-    
+
    button {
        @extend .msp-btn;
        @extend .msp-btn-block;
    }
 }

-.msp-control-row {    
+.msp-control-row {
    position: relative;
    height: $row-height;
    background: $default-background;
    margin-top: 1px;
-    
+
    > span {
        line-height: $row-height;
        display: block;
        width: $control-label-width + $control-spacing;
        text-align: right;
-        padding: 0 $control-spacing; 
+        padding: 0 $control-spacing;
        color: color-lower-contrast($font-color, 15%);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
-        
-        @include non-selectable;        
+
+        @include non-selectable;
    }
-    
+
    select, button, input[type=text] {
        @extend .msp-form-control;
    }
-    
+
    button {
        @extend .msp-btn;
        @extend .msp-btn-block;
    }
-    
+
    > div:nth-child(2) {
        background: $msp-form-control-background;
        position: absolute;
@@ -58,21 +58,21 @@
    position: relative;
 }

-.msp-toggle-button {    
+.msp-toggle-button {
    .msp-icon {
        display: inline-block;
        margin-right: 6px;
    }
-    
+
    > div > button:hover {
        border-color: color-increase-contrast($msp-form-control-background, 5%) !important;
        border: none;
        outline-offset: -1px  !important;
-        outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;  
+        outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
    }
 }

-.msp-slider {    
+.msp-slider {
    > div:first-child {
        position: absolute;
        top: 0;
@@ -91,14 +91,14 @@
        top: 0;
        bottom: 0;
    }
-    
+
    input[type=text] {
        padding-right: 6px;
        padding-left: 4px;
        font-size: 80%;
        text-align: right;
    }
-    
+
    // input[type=range] {
    //     width: 100%;
    // }
@@ -135,14 +135,14 @@
        bottom: 0;
        font-size: 80%;
    }
-    
+
    input[type=text] {
        padding-right: 4px;
        padding-left: 4px;
        font-size: 80%;
        text-align: center;
    }
-    
+
    // input[type=range] {
    //     width: 100%;
    // }
@@ -154,24 +154,24 @@
        margin: 0;
        text-align: center;
        padding-right: $control-spacing;
-        padding-left: $control-spacing;        
-        
+        padding-left: $control-spacing;
+
        &:hover {
            border-color: color-increase-contrast($msp-form-control-background, 5%) !important;
            border: none;
            outline-offset: -1px  !important;
-            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;  
+            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
        }
    }
-    
+
    .msp-color-picker {
        position: absolute;
        z-index: 100000;
        background: $default-background;
        border-top: 1px solid $default-background;
        padding-bottom: $control-spacing / 2;
-        width: 100%;        
-        
+        width: 100%;
+
        // input[type=text] {
        //     background: $msp-form-control-background !important;
        // }
@@ -217,7 +217,7 @@
        height: 2 * $row-height / 3 !important;
        line-height: 2 * $row-height / 3 !important;
        font-size: 70% !important;
-        background: $default-background !important;        
+        background: $default-background !important;
        color: color-lower-contrast($font-color, 15%) !important;
    }
 }
@@ -231,13 +231,13 @@

 .msp-control-subgroup {
    margin-top: 1px;
-    
+
    .msp-control-row {
        margin-left: $control-spacing !important;
        > span {
            width: $control-label-width !important;
        }
-        
+
        > div:nth-child(2) {
            left: $control-label-width !important;
        }
@@ -254,7 +254,7 @@
    width: $control-label-width + $control-spacing;
    text-align: left;
    background: transparent;
-    
+
    .msp-icon {
        line-height: $row-height - 3;
        width: $row-height - 1;
--- a/src/mol-plugin/skin/base/components/misc.scss
+++ b/src/mol-plugin/skin/base/components/misc.scss
@@ -4,17 +4,17 @@
    background: $default-background;
    text-align: center;
    //font-style: italic;
-    
-    -webkit-user-select: none; /* Chrome/Safari */        
+
+    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
-    
+
    font-weight: light;
-    
+
    cursor: default;
 }

@@ -34,10 +34,10 @@
    top: 0;
    display: table;
    text-align: center;
-    
+
    > div {
        b {
-            font-size: 120%; 
+            font-size: 120%;
        }
        display: table-cell;
        vertical-align: middle;
@@ -68,6 +68,6 @@
    display: block;
 }

-.msp-contols-section {
+.msp-controls-section {
    margin-bottom: $control-spacing;
 }
--- a/src/mol-plugin/skin/base/components/sequence.scss
+++ b/src/mol-plugin/skin/base/components/sequence.scss
@@ -0,0 +1,29 @@
+.msp-sequence {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background: $sequence-background;
+}
+
+.msp-sequence-select {
+    float: left;
+    width: $sequence-select-width;
+}
+
+.msp-sequence-wrapper {
+    word-break: break-word;
+    padding: $info-vertical-padding $control-spacing $info-vertical-padding $control-spacing;
+    user-select: none;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-size: 90%;
+}
+
+.msp-sequence-wrapper {
+    span {
+        cursor: pointer;
+    }
+}
--- a/src/mol-plugin/skin/base/layout/common.scss
+++ b/src/mol-plugin/skin/base/layout/common.scss
@@ -33,34 +33,34 @@
    overflow: hidden;
 }

-.msp-layout-main, .msp-layout-bottom {
-    .msp-layout-static {        
+.msp-layout-top, .msp-layout-main, .msp-layout-bottom {
+    .msp-layout-static {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
-    }    
+    }
 }

-.msp-layout-right {        
-    .msp-layout-static {        
+.msp-layout-right {
+    .msp-layout-static {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0; // height: $row-height + $control-spacing;
    }
-    
+
    .msp-layout-scrollable {
        left: 0;
        right: 0;
        top: $row-height + $control-spacing + 1;
        bottom: 0;
-     }   
-    
+     }
+
 }

-.msp-layout-left {    
-    .msp-layout-static {        
+.msp-layout-left {
+    .msp-layout-static {
        left: 0;
        right: 0;
        bottom: 0;
--- a/src/mol-plugin/skin/base/ui.scss
+++ b/src/mol-plugin/skin/base/ui.scss
@@ -1,12 +1,12 @@

@mixin non-selectable {
-    -webkit-user-select: none; /* Chrome/Safari */        
+    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
-    
+
    cursor: default;
 }

@@ -16,18 +16,18 @@
 }

 ::-webkit-scrollbar-track {
-    //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); 
+    //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
    border-radius: 0;
    background-color: color-lower-contrast($control-background, 4%);
 }

 ::-webkit-scrollbar-thumb {
    border-radius: 0;
-    //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 
+    //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    background-color: color-lower-contrast($control-background, 8%);
 }

-@import 'components/controls-base'; 
+@import 'components/controls-base';
@import 'components/controls';
@import 'components/slider';
@import 'components/panel';
@@ -37,6 +37,7 @@
@import 'components/tasks';
@import 'components/viewport';
@import 'components/log';
+@import 'components/sequence';
@import 'components/transformer';
@import 'components/toast';
@import 'components/help';
--- a/src/mol-plugin/skin/base/variables.scss
+++ b/src/mol-plugin/skin/base/variables.scss
@@ -1,5 +1,5 @@

-// measures 
+// measures

 $control-label-width:   110px;
 $row-height:            32px;
@@ -15,10 +15,10 @@ $expanded-right-width:   300px;
 $expanded-left-width:    300px;

 $expanded-portrait-bottom-height: 10 * ($row-height + 1) + 3 * $control-spacing + 1;
-$expanded-portrait-top-height:    2 * $row-height + 1;
+$expanded-portrait-top-height:    3 * $row-height + 1;

 $standard-bottom-height: 8 * ($row-height + 1) + 3 * $control-spacing + 1;
-$standard-top-height:    2 * $row-height + 1;
+$standard-top-height:    3 * $row-height + 1;

 //////////////////////////////////////////////////
 // ENTITY COLORS
@@ -28,14 +28,14 @@ $standard-top-height:    2 * $row-height + 1;
 // TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Visual' | 'Selection' | 'Action' | 'Behaviour'

 // DO NOT CHANGE THESE!!
-$entity-color-Root:      $default-background;    
-$entity-color-Data:      color-lower-contrast(#95a5a6, 15%); 
-$entity-color-Selection: color-lower-contrast(#e74c3c, 15%); 
-$entity-color-Action:    color-lower-contrast(#34495e, 10%); 
-$entity-color-Object:    color-lower-contrast(#2ecc71, 10%); 
-$entity-color-Behaviour: color-lower-contrast(#9b59b6, 10%);   
-$entity-color-Visual:    color-lower-contrast(#3498db, 5%); 
-$entity-color-Group:     color-lower-contrast(#e67e22, 5%); 
+$entity-color-Root:      $default-background;
+$entity-color-Data:      color-lower-contrast(#95a5a6, 15%);
+$entity-color-Selection: color-lower-contrast(#e74c3c, 15%);
+$entity-color-Action:    color-lower-contrast(#34495e, 10%);
+$entity-color-Object:    color-lower-contrast(#2ecc71, 10%);
+$entity-color-Behaviour: color-lower-contrast(#9b59b6, 10%);
+$entity-color-Visual:    color-lower-contrast(#3498db, 5%);
+$entity-color-Group:     color-lower-contrast(#e67e22, 5%);

 //////////////////////////////////////////////////
 // COLORS and COMPUTED COLORS
@@ -43,8 +43,8 @@ $entity-color-Group:     color-lower-contrast(#e67e22, 5%);
 $slider-disabledColor: #ccc;

 $control-background: color-increase-contrast($default-background, 6.5%);
-$border-color: color-increase-contrast($default-background, 15%);  
-$msp-form-control-background: color-lower-contrast($default-background, 2.5%); 
+$border-color: color-increase-contrast($default-background, 15%);
+$msp-form-control-background: color-lower-contrast($default-background, 2.5%);

 // buttons
 $msp-btn-link-font-color: $font-color;
@@ -72,7 +72,11 @@ $highlight-info-font-color: $hover-font-color;
 $highlight-info-additional-font-color: color-lower-contrast($hover-font-color, 20%);

 // entity state
-$entity-color-fully-visible: $font-color; 
+$entity-color-fully-visible: $font-color;
 $entity-color-not-visible: color-lower-contrast($font-color, 66%);
 $entity-color-partialy-visible: color-lower-contrast($font-color, 33%);
 $entity-tag-color: color-lower-contrast($font-color, 20%);
+
+// sequence
+$sequence-background: $default-background;
+$sequence-select-width: 300px;
--- a/src/mol-plugin/spec.ts
+++ b/src/mol-plugin/spec.ts
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { StateTransformer, StateAction } from '../mol-state';
@@ -18,11 +19,7 @@ interface PluginSpec {
    customParamEditors?: [StateAction | StateTransformer, StateTransformParameters.Class][],
    layout?: {
        initial?: Partial<PluginLayoutStateProps>,
-        controls?: {
-            left?: React.ComponentClass | 'none',
-            right?: React.ComponentClass | 'none',
-            bottom?: React.ComponentClass | 'none'
-        }
+        controls?: PluginSpec.LayoutControls
    }
 }

@@ -47,6 +44,7 @@ namespace PluginSpec {
    }

    export interface LayoutControls {
+        top?: React.ComponentClass | 'none',
        left?: React.ComponentClass | 'none',
        right?: React.ComponentClass | 'none',
        bottom?: React.ComponentClass | 'none'
--- a/src/mol-plugin/state.ts
+++ b/src/mol-plugin/state.ts
@@ -16,6 +16,7 @@ import { PluginCommands } from './command';
 import { PluginAnimationManager } from './state/animation/manager';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { UUID } from '../mol-util';
+import { Interactivity } from './util/interactivity';
 export { PluginState }

 class PluginState {
@@ -53,12 +54,11 @@ class PluginState {
            camera: p.camera ? {
                current: this.plugin.canvas3d.camera.getSnapshot(),
                transitionStyle: p.cameraTranstion.name,
-                transitionDurationInMs: (params && params.cameraTranstion && params.cameraTranstion.name === 'animate' && params.cameraTranstion.params.durationInMs) || void 0
+                transitionDurationInMs: (params && params.cameraTranstion && params.cameraTranstion.name === 'animate') ? params.cameraTranstion.params.durationInMs : undefined
            } : void 0,
            cameraSnapshots: p.cameraSnapshots ? this.cameraSnapshots.getStateSnapshot() : void 0,
-            canvas3d: p.canvas3d ? {
-                props: this.plugin.canvas3d.props
-            } : void 0,
+            canvas3d: p.canvas3d ? { props: this.plugin.canvas3d.props } : void 0,
+            interactivity: p.interactivity ? { props: this.plugin.interactivity.props } : void 0,
            durationInMs: params && params.durationInMs
        };
    }
@@ -69,7 +69,10 @@ class PluginState {
        if (snapshot.behaviour) await this.plugin.runTask(this.behaviorState.setSnapshot(snapshot.behaviour));
        if (snapshot.data) await this.plugin.runTask(this.dataState.setSnapshot(snapshot.data));
        if (snapshot.canvas3d) {
-            if (snapshot.canvas3d.props) await PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: snapshot.canvas3d.props || { } });
+            if (snapshot.canvas3d.props) await PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: snapshot.canvas3d.props });
+        }
+        if (snapshot.interactivity) {
+            if (snapshot.interactivity.props) await PluginCommands.Interactivity.SetProps.dispatch(this.plugin, { props: snapshot.interactivity.props });
        }
        if (snapshot.cameraSnapshots) this.cameraSnapshots.setStateSnapshot(snapshot.cameraSnapshots);
        if (snapshot.animation) {
@@ -125,6 +128,7 @@ namespace PluginState {
        animation: PD.Boolean(true),
        startAnimation: PD.Boolean(false),
        canvas3d: PD.Boolean(true),
+        interactivity: PD.Boolean(true),
        camera: PD.Boolean(true),
        // TODO: make camera snapshots same as the StateSnapshots with "child states?"
        cameraSnapshots: PD.Boolean(false),
@@ -153,6 +157,9 @@ namespace PluginState {
        canvas3d?: {
            props?: Canvas3DProps
        },
+        interactivity?: {
+            props?: Interactivity.Props
+        },
        durationInMs?: number
    }
 }
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -15,7 +15,7 @@ import { camelCaseToWords } from '../../../mol-util/string';
 import * as React from 'react';
 import LineGraphComponent from './line-graph/line-graph-component';
 import { Slider, Slider2 } from './slider';
-import { NumericInput, IconButton } from './common';
+import { NumericInput, IconButton, ControlGroup } from './common';
 import { _Props, _State } from '../base';

 export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
@@ -97,7 +97,7 @@ export abstract class SimpleParam<P extends PD.Any> extends React.PureComponent<
    }
 }

-export class BoolControl extends SimpleParam<PD.Boolean> {
+export class BoolControl extends SimpleParam<PD.BooleanParam> {
    onClick = (e: React.MouseEvent<HTMLButtonElement>) => { this.update(!this.props.value); e.currentTarget.blur(); }
    renderControl() {
        return <button onClick={this.onClick} disabled={this.props.isDisabled}>
@@ -461,8 +461,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>,
            </div>
            {this.state.isExpanded && <div className='msp-control-offset' style={{ display: this.state.isExpanded ? 'block' : 'none' }}>
                {controls}
-            </div>
-            }
+            </div>}
        </div>
    }
 }
@@ -655,9 +654,12 @@ export class ObjectListControl extends React.PureComponent<ParamProps<PD.ObjectL
                    <button onClick={this.toggleExpanded}>{value}</button>
                </div>
            </div>
+
            {this.state.isExpanded && <div className='msp-control-offset'>
                {this.props.value.map((v, i) => <ObjectListItem key={i} param={this.props.param} value={v} index={i} actions={this.actions} />)}
-                <ObjectListEditor params={this.props.param.element} apply={this.add} value={this.props.param.ctor()} isDisabled={this.props.isDisabled} />
+                <ControlGroup header='New Item'>
+                    <ObjectListEditor params={this.props.param.element} apply={this.add} value={this.props.param.ctor()} isDisabled={this.props.isDisabled} />
+                </ControlGroup>
            </div>}
        </>;
    }
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { List } from 'immutable';
@@ -18,7 +19,8 @@ import { StateTree } from './state/tree';
 import { BackgroundTaskProgress } from './task';
 import { Viewport, ViewportControls } from './viewport';
 import { StateTransform } from '../../mol-state';
-import { UpdateTransformContol } from './state/update-transform';
+import { UpdateTransformControl } from './state/update-transform';
+import { SequenceView } from './sequence';

 export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {

@@ -37,27 +39,61 @@ export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
    }
 }

+export class PluginContextContainer extends React.Component<{ plugin: PluginContext }> {
+    render() {
+        return <PluginReactContext.Provider value={this.props.plugin}>
+            <div className='msp-plugin'>
+                {this.props.children}
+            </div>
+        </PluginReactContext.Provider>;
+    }
+}
+
+type RegionKind = 'top' | 'left' | 'right' | 'bottom' | 'main'
+
 class Layout extends PluginUIComponent {
    componentDidMount() {
        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
    }

-    region(kind: 'left' | 'right' | 'bottom' | 'main', Element: React.ComponentClass) {
+    region(kind: RegionKind, Element?: React.ComponentClass) {
        return <div className={`msp-layout-region msp-layout-${kind}`}>
            <div className='msp-layout-static'>
-                <Element />
+                {Element ? <Element /> : null}
            </div>
        </div>;
    }

+    get layoutVisibilityClassName() {
+        const layout = this.plugin.layout.state;
+        const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };
+
+        const classList: string[] = []
+        if (controls.top === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-top')
+        }
+        if (controls.left === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-left')
+        }
+        if (controls.right === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-right')
+        }
+        if (controls.bottom === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-bottom')
+        }
+
+        return classList.join(' ')
+    }
+
    render() {
        const layout = this.plugin.layout.state;
        const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };

        return <div className='msp-plugin'>
            <div className={`msp-plugin-content ${layout.isExpanded ? 'msp-layout-expanded' : 'msp-layout-standard msp-layout-standard-outside'}`}>
-                <div className={layout.showControls ? 'msp-layout-hide-top' : 'msp-layout-hide-top msp-layout-hide-right msp-layout-hide-bottom msp-layout-hide-left'}>
+                <div className={this.layoutVisibilityClassName}>
                    {this.region('main', ViewportWrapper)}
+                    {layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView)}
                    {layout.showControls && controls.left !== 'none' && this.region('left', controls.left || State)}
                    {layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper)}
                    {layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)}
@@ -67,7 +103,6 @@ class Layout extends PluginUIComponent {
    }
 }

-
 export class ControlsWrapper extends PluginUIComponent {
    render() {
        return <div className='msp-scrollable-container msp-right-controls'>
@@ -193,7 +228,7 @@ export class CurrentObject extends PluginUIComponent {
        if (!showActions) return null;

        return <>
-            {(cell.status === 'ok' || cell.status === 'error') && <UpdateTransformContol state={current.state} transform={transform} /> }
+            {(cell.status === 'ok' || cell.status === 'error') && <UpdateTransformControl state={current.state} transform={transform} /> }
            {cell.status === 'ok' && <StateObjectActions state={current.state} nodeRef={ref} initiallyColapsed />}
        </>;
    }
--- a/src/mol-plugin/ui/sequence.tsx
+++ b/src/mol-plugin/ui/sequence.tsx
@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import * as React from 'react'
+import { PluginUIComponent } from './base';
+import { StateTreeSpine } from '../../mol-state/tree/spine';
+import { PluginStateObject as SO } from '../state/objects';
+import { Sequence } from './sequence/sequence';
+import { Structure, StructureElement, StructureProperties as SP } from '../../mol-model/structure';
+import { SequenceWrapper } from './sequence/wrapper';
+import { PolymerSequenceWrapper } from './sequence/polymer';
+import { StructureElementSelectionManager } from '../util/structure-element-selection';
+import { MarkerAction } from '../../mol-util/marker-action';
+import { ParameterControls } from './controls/parameters';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { HeteroSequenceWrapper } from './sequence/hetero';
+
+function opKey(l: StructureElement) {
+    const ids = SP.unit.pdbx_struct_oper_list_ids(l)
+    const ncs = SP.unit.struct_ncs_oper_id(l)
+    const hkl = SP.unit.hkl(l)
+    const spgrOp = SP.unit.spgrOp(l)
+    return `${ids.sort().join(',')}|${ncs}|${hkl}|${spgrOp}`
+}
+
+function getSequenceWrapper(state: SequenceViewState, structureSelection: StructureElementSelectionManager): SequenceWrapper.Any | undefined {
+    const { structure, entityId, invariantUnitId, operatorKey } = state
+    const l = StructureElement.create()
+    for (const unit of structure.units) {
+        StructureElement.set(l, unit, unit.elements[0])
+        if (SP.entity.id(l) !== entityId) continue
+        if (unit.invariantId !== invariantUnitId) continue
+        if (opKey(l) !== operatorKey) continue
+
+        const Wrapper = unit.polymerElements.length ? PolymerSequenceWrapper : HeteroSequenceWrapper
+        const sw = new Wrapper({ structure, unit })
+        sw.markResidue(structureSelection.get(structure), MarkerAction.Select)
+        return sw
+    }
+}
+
+function getEntityOptions(structure: Structure) {
+    const options: [string, string][] = []
+    const l = StructureElement.create()
+    const seen = new Set<string>()
+
+    for (const unit of structure.units) {
+        StructureElement.set(l, unit, unit.elements[0])
+        const id = SP.entity.id(l)
+        if (seen.has(id)) continue
+
+        const label = `${id}: ${SP.entity.pdbx_description(l).join(', ')}`
+        options.push([ id, label ])
+        seen.add(id)
+    }
+
+    if (options.length === 0) options.push(['', 'No entities'])
+    return options
+}
+
+function getChainOptions(structure: Structure, entityId: string) {
+    const options: [number, string][] = []
+    const l = StructureElement.create()
+    const seen = new Set<number>()
+    const water = new Map<string, number>()
+
+    for (const unit of structure.units) {
+        StructureElement.set(l, unit, unit.elements[0])
+        if (SP.entity.id(l) !== entityId) continue
+
+        const id = unit.invariantId
+        if (seen.has(id)) continue
+
+        let label = `${SP.chain.label_asym_id(l)}: ${SP.chain.auth_asym_id(l)}`
+        if (SP.entity.type(l) === 'water') {
+            const count = water.get(label) || 1
+            water.set(label, count + 1)
+            label += ` #${count}`
+        }
+
+        options.push([ id, label ])
+        seen.add(id)
+    }
+
+    if (options.length === 0) options.push([-1, 'No chains'])
+    return options
+}
+
+function getOperatorOptions(structure: Structure, entityId: string, invariantUnitId: number) {
+    const options: [string, string][] = []
+    const l = StructureElement.create()
+    const seen = new Set<string>()
+
+    for (const unit of structure.units) {
+        StructureElement.set(l, unit, unit.elements[0])
+        if (SP.entity.id(l) !== entityId) continue
+        if (unit.invariantId !== invariantUnitId) continue
+
+        const id = opKey(l)
+        if (seen.has(id)) continue
+
+        const label = unit.conformation.operator.name
+        options.push([ id, label ])
+        seen.add(id)
+    }
+
+    if (options.length === 0) options.push(['', 'No operators'])
+    return options
+}
+
+type SequenceViewState = { structure: Structure, entityId: string, invariantUnitId: number, operatorKey: string }
+
+export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
+    private spine: StateTreeSpine.Impl
+
+    state = { structure: Structure.Empty, entityId: '', invariantUnitId: -1, operatorKey: '' }
+
+    constructor(props: {}, context?: any) {
+        super(props, context);
+        this.spine = new StateTreeSpine.Impl(this.plugin.state.dataState.cells);
+    }
+
+    componentDidMount() {
+        this.subscribe(this.plugin.state.behavior.currentObject, o => {
+            const current = this.plugin.state.dataState.cells.get(o.ref)!;
+            this.spine.current = current
+            if (!Structure.areParentsEqual(this.state.structure, this.getStructure())) {
+                this.setState(this.getInitialState())
+            }
+        });
+
+        this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
+            const current = this.spine.current;
+            if (!current || current.sourceRef !== ref || current.state !== state) return;
+            this.setState(this.getInitialState())
+        });
+    }
+
+    private getStructure() {
+        const so = this.spine.getRootOfType(SO.Molecule.Structure)
+        return (so && so.data) || Structure.Empty
+    }
+
+    private getSequenceWrapper() {
+        return getSequenceWrapper(this.state, this.plugin.helpers.structureSelection)
+    }
+
+    private getInitialState(): SequenceViewState {
+        const structure = this.getStructure()
+        const entityId = getEntityOptions(structure)[0][0]
+        const invariantUnitId = getChainOptions(structure, entityId)[0][0]
+        const operatorKey = getOperatorOptions(structure, entityId, invariantUnitId)[0][0]
+        return { structure, entityId, invariantUnitId, operatorKey }
+    }
+
+    private get params() {
+        const { structure, entityId, invariantUnitId } = this.state
+        const entityOptions = getEntityOptions(structure)
+        const chainOptions = getChainOptions(structure, entityId)
+        const operatorOptions = getOperatorOptions(structure, entityId, invariantUnitId)
+        return {
+            entity: PD.Select(entityOptions[0][0], entityOptions),
+            chain: PD.Select(chainOptions[0][0], chainOptions),
+            operator: PD.Select(operatorOptions[0][0], operatorOptions)
+        }
+    }
+
+    private get values(): PD.Values<SequenceView['params']> {
+        return {
+            entity: this.state.entityId,
+            chain: this.state.invariantUnitId,
+            operator: this.state.operatorKey
+        }
+    }
+
+    // TODO try to use selected option from previous state
+    private setParamProps = (p: { param: PD.Base<any>, name: string, value: any }) => {
+        const state = { ...this.state }
+        switch (p.name) {
+            case 'entity':
+                state.entityId = p.value
+                state.invariantUnitId = getChainOptions(state.structure, state.entityId)[0][0]
+                state.operatorKey = getOperatorOptions(state.structure, state.entityId, state.invariantUnitId)[0][0]
+                break
+            case 'chain':
+                state.invariantUnitId = p.value
+                state.operatorKey = getOperatorOptions(state.structure, state.entityId, state.invariantUnitId)[0][0]
+                break
+            case 'operator':
+                state.operatorKey = p.value
+                break
+        }
+        this.setState(state)
+    }
+
+    render() {
+        if (this.state.structure === Structure.Empty) return <div className='msp-sequence'>
+            <div className='msp-sequence-wrapper'>No structure available</div>
+        </div>;
+
+        const sequenceWrapper = this.getSequenceWrapper()
+        return <div className='msp-sequence'>
+            <div className='msp-sequence-select'>
+                <ParameterControls params={this.params} values={this.values} onChange={this.setParamProps} />
+            </div>
+            {sequenceWrapper !== undefined
+                ? <Sequence sequenceWrapper={sequenceWrapper} />
+                : <div className='msp-sequence-wrapper'>No sequence available</div>}
+        </div>;
+    }
+}
--- a/src/mol-plugin/ui/sequence/hetero.ts
+++ b/src/mol-plugin/ui/sequence/hetero.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Structure, StructureElement, ResidueIndex } from '../../../mol-model/structure';
+import { SequenceWrapper, StructureUnit } from './wrapper';
+import { OrderedSet, Segmentation, Interval, SortedArray } from '../../../mol-data/int';
+import { Loci } from '../../../mol-model/loci';
+import { ColorNames } from '../../../mol-util/color/tables';
+
+export class HeteroSequenceWrapper extends SequenceWrapper<StructureUnit> {
+    private readonly sequence: string[]
+    private readonly sequenceIndices: Map<ResidueIndex, number>
+    private readonly residueIndices: Map<number, ResidueIndex>
+
+    residueLabel(seqIdx: number) {
+        return this.sequence[seqIdx]
+    }
+    residueColor(seqIdx: number) {
+        return ColorNames.black
+    }
+
+    eachResidue(loci: Loci, apply: (set: OrderedSet) => boolean) {
+        let changed = false
+        const { structure, unit } = this.data
+        if (StructureElement.isLoci(loci)) {
+            if (!Structure.areParentsEqual(loci.structure, structure)) return false
+
+            for (const e of loci.elements) {
+                if (e.unit.id === unit.id) {
+                    const { index: residueIndex } = e.unit.model.atomicHierarchy.residueAtomSegments
+                    OrderedSet.forEach(e.indices, v => {
+                        const seqIdx = this.sequenceIndices.get(residueIndex[unit.elements[v]])
+                        if (seqIdx !== undefined && apply(Interval.ofSingleton(seqIdx))) changed = true
+                    })
+                }
+            }
+        } else if (Structure.isLoci(loci)) {
+            if (!Structure.areParentsEqual(loci.structure, structure)) return false
+
+            if (apply(Interval.ofBounds(0, this.length))) changed = true
+        }
+        return changed
+    }
+
+    getLoci(seqIdx: number) {
+        const elements: StructureElement.Loci['elements'][0][] = []
+        const rI = this.residueIndices.get(seqIdx)
+        if (rI !== undefined) {
+            const { unit } = this.data
+            const { offsets } = unit.model.atomicHierarchy.residueAtomSegments
+            const start = SortedArray.findPredecessorIndex(unit.elements, offsets[rI])
+            const end = SortedArray.findPredecessorIndex(unit.elements, offsets[rI + 1])
+            elements.push({ unit, indices: Interval.ofBounds(start, end) })
+        }
+        return StructureElement.Loci(this.data.structure, elements)
+    }
+
+    constructor(data: StructureUnit) {
+        const sequence: string[] = []
+        const sequenceIndices = new Map<ResidueIndex, number>()
+        const residueIndices = new Map<number, ResidueIndex>()
+
+        const residueIt = Segmentation.transientSegments(data.unit.model.atomicHierarchy.residueAtomSegments, data.unit.elements)
+        while (residueIt.hasNext) {
+            const { index } = residueIt.move()
+            sequenceIndices.set(index, sequence.length)
+            residueIndices.set(sequence.length, index)
+            sequence.push(data.unit.model.atomicHierarchy.residues.label_comp_id.value(index))
+        }
+
+        const length = sequence.length
+        const markerArray = new Uint8Array(length)
+
+        super(data, markerArray, length)
+
+        this.sequence = sequence
+        this.sequenceIndices = sequenceIndices
+        this.residueIndices = residueIndices
+    }
+}
--- a/src/mol-plugin/ui/sequence/polymer.ts
+++ b/src/mol-plugin/ui/sequence/polymer.ts
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { StructureSelection, StructureQuery, Structure, Queries, StructureProperties as SP, StructureElement, Unit, ElementIndex } from '../../../mol-model/structure';
+import { SequenceWrapper, StructureUnit } from './wrapper';
+import { OrderedSet, Interval, SortedArray } from '../../../mol-data/int';
+import { Loci } from '../../../mol-model/loci';
+import { Sequence } from '../../../mol-model/sequence';
+import { MissingResidues } from '../../../mol-model/structure/model/properties/common';
+import { ColorNames } from '../../../mol-util/color/tables';
+
+export class PolymerSequenceWrapper extends SequenceWrapper<StructureUnit> {
+    private readonly sequence: Sequence
+    private readonly missing: MissingResidues
+    private readonly observed: OrderedSet // sequences indices
+
+    private readonly modelNum: number
+    private readonly asymId: string
+
+    seqId(seqIdx: number) {
+        return this.sequence.offset + seqIdx + 1
+    }
+
+    residueLabel(seqIdx: number) {
+        return this.sequence.sequence[seqIdx]
+    }
+    residueColor(seqIdx: number) {
+        return this.missing.has(this.modelNum, this.asymId, this.seqId(seqIdx))
+            ? ColorNames.grey
+            : ColorNames.black
+    }
+
+    eachResidue(loci: Loci, apply: (set: OrderedSet) => boolean) {
+        let changed = false
+        const { structure, unit } = this.data
+        if (StructureElement.isLoci(loci)) {
+            if (!Structure.areParentsEqual(loci.structure, structure)) return false
+
+            for (const e of loci.elements) {
+                if (e.unit.id === unit.id) {
+                    OrderedSet.forEach(e.indices, v => {
+                        if (apply(getSeqIndices(e.unit, e.unit.elements[v]))) changed = true
+                    })
+                }
+            }
+        } else if (Structure.isLoci(loci)) {
+            if (!Structure.areParentsEqual(loci.structure, structure)) return false
+
+            if (apply(this.observed)) changed = true
+        }
+        return changed
+    }
+
+    getLoci(seqIdx: number) {
+        const query = createResidueQuery(this.data.unit.id, this.seqId(seqIdx));
+        return StructureSelection.toLoci2(StructureQuery.run(query, this.data.structure));
+    }
+
+    constructor(data: StructureUnit) {
+        const l = StructureElement.create(data.unit, data.unit.elements[0])
+        const sequence = data.unit.model.sequence.byEntityKey[SP.entity.key(l)].sequence
+        const length = sequence.sequence.length
+        const markerArray = new Uint8Array(length)
+
+        super(data, markerArray, length)
+
+        this.sequence = sequence
+        this.missing = data.unit.model.properties.missingResidues
+
+        this.modelNum = data.unit.model.modelNum
+        this.asymId = SP.chain.label_asym_id(l)
+
+        const missing: number[] = []
+        for (let i = 0; i < length; ++i) {
+            if (this.missing.has(this.modelNum, this.asymId, this.seqId(i))) missing.push(i)
+        }
+        this.observed = OrderedSet.subtract(Interval.ofBounds(0, length),  SortedArray.ofSortedArray(missing))
+    }
+}
+
+function createResidueQuery(unitId: number, label_seq_id: number) {
+    return Queries.generators.atoms({
+        unitTest: ctx => {
+            return SP.unit.id(ctx.element) === unitId
+        },
+        residueTest: ctx => {
+            if (ctx.element.unit.kind === Unit.Kind.Atomic) {
+                return SP.residue.label_seq_id(ctx.element) === label_seq_id
+            } else {
+                return (
+                    SP.coarse.seq_id_begin(ctx.element) <= label_seq_id &&
+                    SP.coarse.seq_id_end(ctx.element) >= label_seq_id
+                )
+            }
+        }
+    });
+}
+
+function getSeqIndices(unit: Unit, element: ElementIndex): Interval {
+    const { model } = unit
+    switch (unit.kind) {
+        case Unit.Kind.Atomic:
+            const residueIndex = model.atomicHierarchy.residueAtomSegments.index[element]
+            const seqId = model.atomicHierarchy.residues.label_seq_id.value(residueIndex)
+            return Interval.ofSingleton(seqId - 1)
+        case Unit.Kind.Spheres:
+            return Interval.ofRange(
+                model.coarseHierarchy.spheres.seq_id_begin.value(element) - 1,
+                model.coarseHierarchy.spheres.seq_id_end.value(element) - 1
+            )
+        case Unit.Kind.Gaussians:
+            return Interval.ofRange(
+                model.coarseHierarchy.gaussians.seq_id_begin.value(element) - 1,
+                model.coarseHierarchy.gaussians.seq_id_end.value(element) - 1
+            )
+    }
+}
--- a/src/mol-plugin/ui/sequence/residue.tsx
+++ b/src/mol-plugin/ui/sequence/residue.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import * as React from 'react'
+import { PurePluginUIComponent } from '../base';
+import { getButtons, getModifiers } from '../../../mol-util/input/input-observer';
+import { Sequence } from './sequence';
+import { Color } from '../../../mol-util/color';
+
+export class Residue extends PurePluginUIComponent<{ seqIdx: number, label: string, parent: Sequence<any>, marker: number, color: Color }> {
+
+    mouseEnter = (e: React.MouseEvent) => {
+        const modifiers = getModifiers(e.nativeEvent)
+        this.props.parent.highlight(this.props.seqIdx, modifiers);
+    }
+
+    mouseLeave = () => {
+        this.props.parent.highlight();
+    }
+
+    mouseDown = (e: React.MouseEvent) => {
+        const buttons = getButtons(e.nativeEvent)
+        const modifiers = getModifiers(e.nativeEvent)
+        this.props.parent.click(this.props.seqIdx, buttons, modifiers);
+        e.stopPropagation() // so that `parent.mouseDown` is not called
+    }
+
+    get backgroundColor() {
+        // TODO make marker color configurable
+        if (this.props.marker === 0) return ''
+        if (this.props.marker % 2 === 0) return 'rgb(51, 255, 25)' // selected
+        if (this.props.marker === undefined) console.error('unexpected marker value')
+        return 'rgb(255, 102, 153)' // highlighted
+    }
+
+    get margin() {
+        return this.props.label.length > 1 && this.props.seqIdx
+            ? `0px 0px 0px 4px`
+            : undefined
+    }
+
+    render() {
+        return <span
+            onMouseEnter={this.mouseEnter}
+            onMouseLeave={this.mouseLeave}
+            onMouseDown={this.mouseDown}
+            style={{
+                color: Color.toStyle(this.props.color),
+                backgroundColor: this.backgroundColor,
+                margin: this.margin
+            }}>
+            {this.props.label}
+        </span>;
+    }
+}
--- a/src/mol-plugin/ui/sequence/sequence.tsx
+++ b/src/mol-plugin/ui/sequence/sequence.tsx
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import * as React from 'react'
+import { PluginUIComponent } from '../base';
+import { Interactivity } from '../../util/interactivity';
+import { MarkerAction } from '../../../mol-util/marker-action';
+import { ButtonsType, ModifiersKeys, getButtons, getModifiers } from '../../../mol-util/input/input-observer';
+import { ValueBox } from '../../../mol-util';
+import { Residue } from './residue';
+import { SequenceWrapper } from './wrapper';
+
+type SequenceProps = { sequenceWrapper: SequenceWrapper.Any }
+type SequenceState = { markerData: ValueBox<Uint8Array> }
+
+function getState(markerData: ValueBox<Uint8Array>) {
+    return { markerData: ValueBox.withValue(markerData, markerData.value) }
+}
+
+// TODO: this is really inefficient and should be done using a canvas.
+export class Sequence<P extends SequenceProps> extends PluginUIComponent<P, SequenceState> {
+    state = {
+        markerData: ValueBox.create(this.props.sequenceWrapper.markerArray)
+    }
+
+    private setMarkerData(markerData: ValueBox<Uint8Array>) {
+        this.setState(getState(markerData))
+    }
+
+    private lociHighlightProvider = (loci: Interactivity.Loci, action: MarkerAction) => {
+        const changed = this.props.sequenceWrapper.markResidue(loci.loci, action)
+        if (changed) this.setMarkerData(this.state.markerData)
+    }
+
+    private lociSelectionProvider = (loci: Interactivity.Loci, action: MarkerAction) => {
+        const changed = this.props.sequenceWrapper.markResidue(loci.loci, action)
+        if (changed) this.setMarkerData(this.state.markerData)
+    }
+
+    static getDerivedStateFromProps(nextProps: SequenceProps, prevState: SequenceState): SequenceState | null {
+        if (prevState.markerData.value !== nextProps.sequenceWrapper.markerArray) {
+            return getState(ValueBox.create(nextProps.sequenceWrapper.markerArray))
+        }
+        return null
+    }
+
+    componentDidMount() {
+        this.plugin.interactivity.lociHighlights.addProvider(this.lociHighlightProvider)
+        this.plugin.interactivity.lociSelections.addProvider(this.lociSelectionProvider)
+    }
+
+    componentWillUnmount() {
+        this.plugin.interactivity.lociHighlights.removeProvider(this.lociHighlightProvider)
+        this.plugin.interactivity.lociSelections.removeProvider(this.lociSelectionProvider)
+    }
+
+    highlight(seqId?: number, modifiers?: ModifiersKeys) {
+        const ev = { current: Interactivity.Loci.Empty, modifiers }
+        if (seqId !== undefined) {
+            const loci = this.props.sequenceWrapper.getLoci(seqId);
+            if (loci.elements.length > 0) ev.current = { loci };
+        }
+        this.plugin.behaviors.interaction.highlight.next(ev)
+    }
+
+    click(seqId: number | undefined, buttons: ButtonsType, modifiers: ModifiersKeys) {
+        const ev = { current: Interactivity.Loci.Empty, buttons, modifiers }
+        if (seqId !== undefined) {
+            const loci = this.props.sequenceWrapper.getLoci(seqId);
+            if (loci.elements.length > 0) ev.current = { loci };
+        }
+        this.plugin.behaviors.interaction.click.next(ev)
+    }
+
+    contextMenu = (e: React.MouseEvent) => {
+        e.preventDefault()
+    }
+
+    mouseDown = (e: React.MouseEvent) => {
+        const buttons = getButtons(e.nativeEvent)
+        const modifiers = getModifiers(e.nativeEvent)
+        this.click(undefined, buttons, modifiers);
+    }
+
+    render() {
+        const { markerData } = this.state;
+        const sw = this.props.sequenceWrapper
+
+        const elems: JSX.Element[] = [];
+        for (let i = 0, il = sw.length; i < il; ++i) {
+            elems[elems.length] = <Residue
+                seqIdx={i}
+                label={sw.residueLabel(i)}
+                parent={this}
+                marker={markerData.value[i]}
+                color={sw.residueColor(i)}
+                key={i}
+            />;
+        }
+
+        return <div
+            className='msp-sequence-wrapper'
+            onContextMenu={this.contextMenu}
+            onMouseDown={this.mouseDown}
+        >
+            {elems}
+        </div>;
+    }
+}
--- a/src/mol-plugin/ui/sequence/wrapper.ts
+++ b/src/mol-plugin/ui/sequence/wrapper.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { OrderedSet } from '../../../mol-data/int';
+import { Loci } from '../../../mol-model/loci';
+import { MarkerAction, applyMarkerAction } from '../../../mol-util/marker-action';
+import { StructureElement, Structure, Unit } from '../../../mol-model/structure';
+import { Color } from '../../../mol-util/color';
+
+export type StructureUnit = { structure: Structure, unit: Unit }
+
+export { SequenceWrapper }
+
+abstract class SequenceWrapper<D> {
+    abstract residueLabel(seqIdx: number): string
+    abstract residueColor(seqIdx: number): Color
+
+    abstract eachResidue(loci: Loci, apply: (set: OrderedSet) => boolean): boolean
+    abstract getLoci(seqIdx: number): StructureElement.Loci
+
+    markResidue(loci: Loci, action: MarkerAction) {
+        return this.eachResidue(loci, (set: OrderedSet) => {
+            return applyMarkerAction(this.markerArray, set, action)
+        })
+    }
+
+    constructor(readonly data: D, readonly markerArray: Uint8Array, readonly length: number) {
+
+    }
+}
+
+namespace SequenceWrapper {
+    export type Any = SequenceWrapper<any>
+}
--- a/src/mol-plugin/ui/state/actions.tsx
+++ b/src/mol-plugin/ui/state/actions.tsx
@@ -6,7 +6,7 @@

 import * as React from 'react';
 import { PluginUIComponent } from '../base';
-import { ApplyActionContol } from './apply-action';
+import { ApplyActionControl } from './apply-action';
 import { State } from '../../../mol-state';
 import { Icon } from '../controls/common';

@@ -38,7 +38,7 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe

        return <div className='msp-state-actions'>
            {!this.props.hideHeader && <div className='msp-section-header'><Icon name='code' /> {`Actions (${display})`}</div> }
-            {actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} initiallyCollapsed={this.props.initiallyColapsed} />)}
+            {actions.map((act, i) => <ApplyActionControl plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} initiallyCollapsed={this.props.initiallyColapsed} />)}
        </div>;
    }
 }
--- a/src/mol-plugin/ui/state/animation.tsx
+++ b/src/mol-plugin/ui/state/animation.tsx
@@ -13,7 +13,7 @@ export class AnimationControlsWrapper extends PluginUIComponent<{ }> {
    render() {
        const anim = this.plugin.state.animation;
        if (anim.isEmpty) return null;
-        return <div className='msp-contols-section'>
+        return <div className='msp-controls-section'>
            <div className='msp-section-header'><Icon name='code' /> Animations</div>
            <AnimationControls />
        </div>
--- a/src/mol-plugin/ui/state/apply-action.tsx
+++ b/src/mol-plugin/ui/state/apply-action.tsx
@@ -8,12 +8,12 @@ import { PluginCommands } from '../../../mol-plugin/command';
 import { PluginContext } from '../../../mol-plugin/context';
 import { State, StateTransform, StateAction } from '../../../mol-state';
 import { memoizeLatest } from '../../../mol-util/memoize';
-import { StateTransformParameters, TransformContolBase } from './common';
+import { StateTransformParameters, TransformControlBase } from './common';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';

-export { ApplyActionContol };
+export { ApplyActionControl };

-namespace ApplyActionContol {
+namespace ApplyActionControl {
    export interface Props {
        plugin: PluginContext,
        nodeRef: StateTransform.Ref,
@@ -32,7 +32,7 @@ namespace ApplyActionContol {
    }
 }

-class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, ApplyActionContol.ComponentState> {
+class ApplyActionControl extends TransformControlBase<ApplyActionControl.Props, ApplyActionControl.ComponentState> {
    applyAction() {
        return PluginCommands.State.ApplyAction.dispatch(this.plugin, {
            state: this.props.state,
@@ -53,7 +53,7 @@ class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, App

    state = { ref: this.props.nodeRef, version: this.props.state.transforms.get(this.props.nodeRef).version, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };

-    static getDerivedStateFromProps(props: ApplyActionContol.Props, state: ApplyActionContol.ComponentState) {
+    static getDerivedStateFromProps(props: ApplyActionControl.Props, state: ApplyActionControl.ComponentState) {
        if (props.nodeRef === state.ref) return null;
        const version = props.state.transforms.get(props.nodeRef).version;
        if (version === state.version) return null;
@@ -63,7 +63,7 @@ class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, App
            ? PD.getDefaultValues(props.action.definition.params(source, props.plugin))
            : { };

-        const newState: Partial<ApplyActionContol.ComponentState> = {
+        const newState: Partial<ApplyActionControl.ComponentState> = {
            ref: props.nodeRef,
            version,
            params,
--- a/src/mol-plugin/ui/state/common.tsx
+++ b/src/mol-plugin/ui/state/common.tsx
@@ -13,7 +13,7 @@ import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 import { Subject } from 'rxjs';
 import { Icon } from '../controls/common';

-export { StateTransformParameters, TransformContolBase };
+export { StateTransformParameters, TransformControlBase };

 class StateTransformParameters extends PurePluginUIComponent<StateTransformParameters.Props> {
    validate(params: any) {
@@ -89,7 +89,7 @@ namespace StateTransformParameters {
    }
 }

-namespace TransformContolBase {
+namespace TransformControlBase {
    export interface ComponentState {
        params: any,
        error?: string,
@@ -99,7 +99,7 @@ namespace TransformContolBase {
    }
 }

-abstract class TransformContolBase<P, S extends TransformContolBase.ComponentState> extends PurePluginUIComponent<P, S> {
+abstract class TransformControlBase<P, S extends TransformControlBase.ComponentState> extends PurePluginUIComponent<P, S> {
    abstract applyAction(): Promise<void>;
    abstract getInfo(): StateTransformParameters.Props['info'];
    abstract getHeader(): StateTransformer.Definition['display'];
--- a/src/mol-plugin/ui/state/update-transform.tsx
+++ b/src/mol-plugin/ui/state/update-transform.tsx
@@ -6,14 +6,14 @@

 import { State, StateTransform, StateTransformer } from '../../../mol-state';
 import { memoizeLatest } from '../../../mol-util/memoize';
-import { StateTransformParameters, TransformContolBase } from './common';
+import { StateTransformParameters, TransformControlBase } from './common';
 import { Observable } from 'rxjs';
 import * as React from 'react';
 import { PluginUIComponent } from '../base';

-export { UpdateTransformContol, TransformUpdaterControl };
+export { UpdateTransformControl, TransformUpdaterControl };

-namespace UpdateTransformContol {
+namespace UpdateTransformControl {
    export interface Props {
        transform: StateTransform,
        state: State,
@@ -22,12 +22,12 @@ namespace UpdateTransformContol {
        customHeader?: StateTransformer.Definition['display']
    }

-    export interface ComponentState extends TransformContolBase.ComponentState {
+    export interface ComponentState extends TransformControlBase.ComponentState {
        transform: StateTransform
    }
 }

-class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Props, UpdateTransformContol.ComponentState> {
+class UpdateTransformControl extends TransformControlBase<UpdateTransformControl.Props, UpdateTransformControl.ComponentState> {
    applyAction() { return this.plugin.updateTransform(this.props.state, this.props.transform.ref, this.state.params); }
    getInfo() { return this._getInfo(this.props.transform); }
    getTransformerId() { return this.props.transform.transformer.id; }
@@ -70,12 +70,12 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr

    private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, t));

-    state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
+    state: UpdateTransformControl.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };

-    static getDerivedStateFromProps(props: UpdateTransformContol.Props, state: UpdateTransformContol.ComponentState) {
+    static getDerivedStateFromProps(props: UpdateTransformControl.Props, state: UpdateTransformControl.ComponentState) {
        if (props.transform === state.transform) return null;
        const cell = props.state.cells.get(props.transform.ref)!;
-        const newState: Partial<UpdateTransformContol.ComponentState> = {
+        const newState: Partial<UpdateTransformControl.ComponentState> = {
            transform: props.transform,
            params: (cell.params && cell.params.values) || { },
            isInitial: true,
@@ -101,7 +101,6 @@ class TransformUpdaterControl extends PluginUIComponent<{ nodeRef: string, initi
        if (!cell || (cell.status !== 'ok' && cell.status !== 'error')) return null;

        const transform = cell.transform;
-
-        return <UpdateTransformContol state={state} transform={transform} initiallyCollapsed={this.props.initiallyCollapsed} customHeader={this.props.header} />;
+        return <UpdateTransformControl state={state} transform={transform} initiallyCollapsed={this.props.initiallyCollapsed} customHeader={this.props.header} />;
    }
 }
--- a/src/mol-plugin/ui/viewport.tsx
+++ b/src/mol-plugin/ui/viewport.tsx
@@ -14,6 +14,7 @@ import { Canvas3DParams } from '../../mol-canvas3d/canvas3d';
 import { PluginLayoutStateParams } from '../../mol-plugin/layout';
 import { ControlGroup, IconButton } from './controls/common';
 import { resizeCanvas } from '../../mol-canvas3d/util';
+import { Interactivity } from '../util/interactivity';

 interface ViewportState {
    noWebGl: boolean
@@ -49,14 +50,14 @@ export class ViewportControls extends PluginUIComponent<{}, { isSettingsExpanded
        PluginCommands.Layout.Update.dispatch(this.plugin, { state: { [p.name]: p.value } });
    }

-    componentDidMount() {
-        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, e => {
-            this.forceUpdate();
-        });
+    setInteractivityProps = (p: { param: PD.Base<any>, name: string, value: any }) => {
+        PluginCommands.Interactivity.SetProps.dispatch(this.plugin, { props: { [p.name]: p.value } });
+    }

-        this.subscribe(this.plugin.layout.events.updated, () => {
-            this.forceUpdate();
-        });
+    componentDidMount() {
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+        this.subscribe(this.plugin.events.interactivity.propsUpdated, () => this.forceUpdate());
    }

    icon(name: string, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
@@ -75,6 +76,9 @@ export class ViewportControls extends PluginUIComponent<{}, { isSettingsExpanded
                <ControlGroup header='Layout' initialExpanded={true}>
                    <ParameterControls params={PluginLayoutStateParams} values={this.plugin.layout.state} onChange={this.setLayout} />
                </ControlGroup>
+                <ControlGroup header='Interactivity' initialExpanded={true}>
+                    <ParameterControls params={Interactivity.Params} values={this.plugin.interactivity.props} onChange={this.setInteractivityProps} />
+                </ControlGroup>
                <ControlGroup header='Viewport' initialExpanded={true}>
                    <ParameterControls params={Canvas3DParams} values={this.plugin.canvas3d.props} onChange={this.setSettings} />
                </ControlGroup>
@@ -109,8 +113,8 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
        const canvas3d = this.plugin.canvas3d;
        this.subscribe(canvas3d.input.resize, this.handleResize);

-        this.subscribe(canvas3d.interaction.click, e => this.plugin.behaviors.canvas3d.click.next(e));
-        this.subscribe(canvas3d.interaction.highlight, e => this.plugin.behaviors.canvas3d.highlight.next(e));
+        this.subscribe(canvas3d.interaction.click, e => this.plugin.behaviors.interaction.click.next(e));
+        this.subscribe(canvas3d.interaction.highlight, e => this.plugin.behaviors.interaction.highlight.next(e));
        this.subscribe(this.plugin.layout.events.updated, () => {
            setTimeout(this.handleResize, 50);
        });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alexander Rose	ed7a5219bf	0.2.5	2019-07-19 17:43:32 -07:00
Alexander Rose	8b49ccdc08	tweaked bottom and top height	2019-07-19 17:41:40 -07:00
Alexander Rose	04fd3ade5f	improved canvas3d.resetCamera	2019-07-19 14:52:20 -07:00
Alexander Rose	48985cd49d	improved scene commit handling for canvas3d and debug-helper	2019-07-19 14:40:45 -07:00
Alexander Rose	dd0707a8a5	fix renderer.spec test	2019-07-19 10:12:22 -07:00
Alexander Rose	b41ebcbbc8	Merge branch 'master' of https://github.com/molstar/molstar # Conflicts: # src/mol-canvas3d/camera.ts # src/mol-canvas3d/canvas3d.ts	2019-07-19 09:50:03 -07:00
Alexander Rose	991d2e3a57	async gl repr object handling	2019-07-19 09:46:27 -07:00
Alexander Rose	7f4ac6782f	camera tweaks	2019-07-19 09:45:26 -07:00
Alexander Rose	7e7e30a82e	fix: removed useless z-sort	2019-07-19 09:44:11 -07:00
Alexander Rose	08e92f12d3	improved MolecularSurface calc: projectToriiRange	2019-07-19 09:42:09 -07:00
Alexander Rose	d713ea6a76	ModelIndex color theme	2019-07-19 09:41:06 -07:00
Alexander Rose	0924020f24	updated packages	2019-07-19 09:11:53 -07:00
David Sehnal	9f10af3ba6	proteopedia-wrapper: clipping commands; mol-canvas3d: camera.getFocus optional direction	2019-06-26 13:41:53 +02:00
Alexander Rose	f754026cc5	better entity placeholder	2019-06-22 12:26:28 -07:00
Alexander Rose	321d98f4c1	hetero sequence wrapper	2019-06-22 11:35:11 -07:00
Alexander Rose	58a49a8512	fix handling of structure loci selection	2019-06-22 08:12:07 -07:00
Alexander Rose	98bb9575b6	simplified polymer sequence wrapper	2019-06-22 07:45:04 -07:00
Alexander Rose	f10a135dea	sequence view, better handling of missing residues, full structure loci	2019-06-22 07:34:20 -07:00
Alexander Rose	f300e524d1	updated packages	2019-06-21 17:36:38 -07:00
Alexander Rose	87028c0a0b	0.2.4	2019-06-21 17:21:59 -07:00
Alexander Rose	8ea23e6965	Merge branch 'master' into seq	2019-06-21 17:19:26 -07:00
Alexander Rose	f9d8942814	basic support for missing residues	2019-06-21 16:55:28 -07:00
Alexander Rose	b40df2f1e3	sequence, on state tree change improvments	2019-06-21 16:55:12 -07:00
Alexander Rose	884cb0d9a4	sequence widget refactoring	2019-06-21 12:54:22 -07:00
Alexander Rose	ef1ccd4286	cif schema updates	2019-06-21 12:44:28 -07:00
Alexander Rose	898abda373	sequence & interactivity tweaks	2019-06-21 11:06:49 -07:00
Alexander Rose	e42c664a8c	fixes: StructureElement.Loci.union, Structure.parent	2019-06-21 10:56:06 -07:00
Alexander Rose	987bf47827	save interactivity props in state	2019-06-21 09:29:03 -07:00
Alexander Rose	6201dd1d74	improved xtal symmetry support for props & sequence	2019-06-21 09:11:38 -07:00
David Sehnal	5ed17ce4e5	proteopedia-wrapper: evolutionary coloring on current representation	2019-06-21 12:47:14 +02:00
Alexander Rose	e301eca9c2	wip, sequence view, select options	2019-06-20 15:50:31 -07:00
Alexander Rose	8a4ef015a2	added StructureElement.set	2019-06-20 15:42:45 -07:00
Alexander Rose	67f3f3fdbb	improved AtomsQueryParams.unitTest and StructureProperties.unit	2019-06-20 15:42:23 -07:00
Alexander Rose	adc5b559cd	various tweaks	2019-06-20 15:35:55 -07:00
Alexander Rose	bbaa637118	wip, sequence selector	2019-06-19 17:45:50 -07:00
Alexander Rose	a3094b4d19	wip, per-chain sequence widget	2019-06-19 17:03:20 -07:00
Alexander Rose	c3f937e113	sequence widget refactoring	2019-06-19 14:17:49 -07:00
Alexander Rose	04df327939	renamed lociExpansion to granularity	2019-06-19 12:30:19 -07:00
Alexander Rose	b1a0f46ade	improved link loci handling for interactivity	2019-06-19 12:18:53 -07:00
Alexander Rose	389e249862	use PurePluginUIComponent for Residue	2019-06-19 11:48:36 -07:00
Alexander Rose	cfcf9f6818	wip, plugin interactivity	2019-06-18 17:28:57 -07:00
Alexander Rose	bcb8419f37	init repr3d and seq view marker with global selection	2019-06-18 14:31:22 -07:00
Alexander Rose	7d24bcf1dc	tweaked resolution quality settings	2019-06-18 14:24:47 -07:00
Alexander Rose	8d0f7a2dc7	factored-out marker-action	2019-06-18 11:48:59 -07:00
Alexander Rose	a7cb7beaa8	Merge branch 'master' into seq	2019-06-18 09:04:33 -07:00
David Sehnal	3c9b82dc04	proteopedia-plugin: Load asym unit fix	2019-06-18 15:42:29 +02:00
David Sehnal	9dba6d5371	proteopedia-wrapper: tweak	2019-06-18 13:53:04 +02:00
David Sehnal	a65bba0969	proteopedia-wrapper: better HET group focusing	2019-06-18 13:39:23 +02:00
David Sehnal	175e009152	proteopedia-wrapper: fix assembly loading	2019-06-18 13:01:38 +02:00
Alexander Rose	897d17c8ed	0.2.3	2019-06-17 16:53:59 -07:00
Alexander Rose	ca866cfa3a	Merge pull request #17 from JonStargaryen/encoding-config Encoding and precision config	2019-06-17 16:48:55 -07:00
Alexander Rose	f6b2c0b2ba	wip, sequence view	2019-06-17 16:44:38 -07:00
Alexander Rose	ea419c68ae	removed old unused ui code	2019-06-17 15:41:03 -07:00
Alexander Rose	40cf348d40	simple (entity) sequence view	2019-06-17 15:40:51 -07:00
Alexander Rose	93ea759a71	StateTreeSpine.current tweaks	2019-06-17 15:39:12 -07:00
Alexander Rose	3e50377eb8	use `as const` to quickly make class props readonly	2019-06-17 15:29:37 -07:00
Alexander Rose	3fbd1f8dc4	StructureElementSelectionManager.tryGetRange in both directions	2019-06-17 15:27:22 -07:00
Alexander Rose	f03ce68513	plugin interaction helpers refactoring	2019-06-17 14:37:24 -07:00
Alexander Rose	50e2d542df	add getModifiers input helper	2019-06-17 14:33:32 -07:00
Alexander Rose	e53e739d18	ignore non StructureElement loci in StructureElementSelectionManager	2019-06-17 14:32:47 -07:00
Alexander Rose	dfb7f7811f	support coarse elements in atomGroups generator	2019-06-14 18:59:37 -07:00
Sebastian Bittrich	115824bbcf	omits logging in test	2019-06-14 17:38:03 -07:00
Sebastian Bittrich	438de5760d	trim() for safety in filter declaration	2019-06-14 17:37:47 -07:00
Sebastian Bittrich	3f765aedec	removes FilteringDirective	2019-06-14 17:12:07 -07:00
Sebastian Bittrich	96144fb10f	drops json filter definition in favor of text	2019-06-14 17:03:34 -07:00
Alexander Rose	cc34425712	add and use Structure.areParentsEquivalent	2019-06-13 16:36:18 -07:00
Alexander Rose	9d68838893	added OrderedSet.toString	2019-06-13 15:59:50 -07:00
Alexander Rose	6c68cebca0	show gfp chromophore traces	2019-06-13 13:32:34 -07:00
Alexander Rose	b3e784262d	fix typos	2019-06-13 12:00:17 -07:00
Alexander Rose	2fdc22de71	plugin layout config improvements	2019-06-13 09:52:51 -07:00
Alexander Rose	77f0b0033f	more recomended vscode extensions	2019-06-13 09:26:10 -07:00
Alexander Rose	69da5abb88	use staging url for rcsb graphql	2019-06-13 09:25:50 -07:00
Alexander Rose	a827e9a449	Merge branch 'master' of https://github.com/molstar/molstar	2019-06-13 09:08:10 -07:00
Alexander Rose	e74a29ae6a	added recommeded vscode extensions	2019-06-12 23:21:59 -07:00
Alexander Rose	9b3d2f396e	polymer-trace improvements	2019-06-12 23:14:05 -07:00
Alexander Rose	14cf7cc101	direction from/to derived residue prop	2019-06-12 23:10:50 -07:00
Alexander Rose	e5293c4d36	linalg .toString with precision arg	2019-06-12 23:09:24 -07:00
Sebastian Bittrich	3afe21a4c3	fix to whitelist categories when information on fields is present	2019-06-12 14:43:41 -07:00
Alexander Rose	bb50b69bb4	fix typo	2019-06-12 12:33:33 -07:00
Alexander Rose	af7c030338	removed unused HighlightEvent.prev	2019-06-12 12:33:18 -07:00
Alexander Rose	34b1eee876	fix webpack config	2019-06-12 12:32:00 -07:00
Sebastian Bittrich	c9cd1075d3	Merge branch 'master' into encoding-config	2019-06-12 12:22:20 -07:00
Sebastian Bittrich	4fa04f0ff8	changes comment style	2019-06-12 11:42:04 -07:00
Alexander Rose	75f6466fd7	webpack config update	2019-06-11 16:18:16 -07:00
Alexander Rose	503ffd80fd	package updates	2019-06-11 15:04:15 -07:00
Alexander Rose	c8ac64a571	wip, server/model/preprocess	2019-06-10 16:15:14 -07:00
Alexander Rose	bf81b902bd	chemCompBond creation improvements and prop	2019-06-10 15:30:13 -07:00
David Sehnal	b636cdf9cc	Added volume streaming to proteopedia-wrapper example + vol. streaming behavior tweaks	2019-06-10 14:02:12 +02:00
David Sehnal	2d3b85825a	mol-plugin: Allow to mount TransformUpdaterControl outside the main plugin	2019-06-10 13:13:30 +02:00
Alexander Rose	a5a34f39e0	don't use boxed primitives	2019-06-07 19:13:23 -07:00
Sebastian Bittrich	fe7e04f61b	lowercase string parameters, filtering directive object	2019-06-07 16:56:04 -07:00
Sebastian Bittrich	1a14720e35	remove changes from package-lock	2019-06-07 15:45:12 -07:00
Sebastian Bittrich	18bf743ed2	white-/blacklist filtering	2019-06-07 15:39:07 -07:00
Sebastian Bittrich	f8d085a034	white-/blacklist filtering	2019-06-07 15:38:06 -07:00
Alexander Rose	94bf3a136c	added viewer deployment script	2019-06-07 13:17:45 -07:00
Alexander Rose	9e8a8f3e71	updated viewer	2019-06-07 12:36:29 -07:00
Alexander Rose	45f9d93f3a	fixed clearOverpaint	2019-06-07 12:18:29 -07:00
Alexander Rose	44a566fdf3	tweaked ObjectListControl ui	2019-06-07 12:18:16 -07:00
Sebastian Bittrich	d7f7770b7c	drops browser test, creates spec	2019-06-07 11:49:31 -07:00
Sebastian Bittrich	df6b163505	replace encoding string with union type	2019-06-07 09:27:46 -07:00
Sebastian Bittrich	51f88fff71	merge master	2019-06-05 10:04:18 -07:00
Sebastian Bittrich	6b8db5abc6	reverts trygetencoder order to original	2019-06-05 10:01:46 -07:00
Sebastian Bittrich	37a0b07d56	stub for encoding config	2019-06-04 17:52:02 -07:00