3.8.2

changelog
package updates
2026-06-04 21:34:23 +08:00 · 2022-05-22 08:36:50 -07:00 · 2022-05-22 08:31:57 -07:00 · 2022-05-22 08:30:15 -07:00 · 2022-05-22 08:22:39 -07:00 · 2022-05-14 11:59:03 -07:00
476 changed files with 43051 additions and 28999 deletions
--- a/.github/workflows/node.yml
+++ b/.github/workflows/node.yml
@@ -9,12 +9,12 @@ jobs:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
-        node-version: 14
+        node-version: 16
    - run: npm ci
    - run: sudo apt-get install xvfb
    - name: Lint
      run: npm run lint
    - name: Test
-      run: xvfb-run --auto-servernum npm run jest
+      run: npm install --no-save "gl@^5.0.0" && xvfb-run --auto-servernum npm run jest
    - name: Build
      run: npm run build
--- a/.npmignore
+++ b/.npmignore
@@ -1 +1,5 @@
-lib/tsconfig.commonjs.tsbuildinfo
+tests
+perf-tests
+_spec
+*.tsbuildinfo
+*.js.map
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,8 @@
        "*.gql.ts": "graphql"
    },
    "eslint.options": {
-        "ignorePattern": ["webpack.config.js", "scripts/*"],
+        "overrideConfig": {
+            "ignorePatterns": ["webpack.config.js", "scripts/*"],
+        },
    }
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,11 +6,280 @@ Note that since we don't clearly distinguish between a public and private interf

 ## [Unreleased]

+## [v3.8.2] - 2022-05-22
+
+- Fix ``Scene.opacityAverage`` not taking xray shaded into account
+
+## [v3.8.1] - 2022-05-14
+
+- Fix issues with marking camera/handle helper (#433)
+- Fix issues with array uniforms when running with headless-gl
+- Fix Polymer Chain Instance coloring
+- Improve performance of scene marker/opacity average calculation
+
+## [v3.8.0] - 2022-04-30
+
+- Add support for outlines around transparent objects
+- Improve per-group transparency when wboit is switched off
+- Improve ``ColorTheme`` typing with ``ColorType`` generic.
+    - Defaults to ``ColorTypeLocation``
+    - Set when using ``ColorTypeDirect`` or ``ColorTypeGrid``
+- Fix case handling of ``struct_conf`` mmCIF enumeration field (#425)
+- Fix ``allowTransparentBackfaces`` for per-group transparency
+- Fix ``FormatRegistry.isApplicable`` returning true for unregistered formats
+- Fix: handle building of ``GridLookup3D`` with zero cell size
+- Fix ``ignoreLight`` for direct-volume rendering with webgl1
+- Fix (non-black) outlines when using transparent background
+
+## [v3.7.0] - 2022-04-13
+
+- Fix ``xrayShaded`` for texture-mesh geometries
+- [Breaking] Change ``allowTransparentBackfaces`` to ``transparentBackfaces`` with options ``off``, ``on``, ``opaque``. This was only added in 3.6.0, so allowing a breaking change here.
+    - ``off``: don't show (default)
+    - ``on``: show with transparency
+    - ``opaque``: show fully opaque
+- Add option to disable file drop overlay.
+
+## [v3.6.2] - 2022-04-05
+
+- ModelServer ligand queries: fixes for alternate locations, additional atoms & UNL ligand
+- React 18 friendly ``useBehavior`` hook.
+
+## [v3.6.1] - 2022-04-03
+
+- Fix React18 related UI regressions.
+
+## [v3.6.0] - 2022-04-03
+
+- Check that model and coordinates have same element count when creating a trajectory
+- Fix aromatic rings assignment: do not mix flags and planarity test
+- Improve bonds assignment of coarse grained models: check for IndexPairBonds and exhaustive StructConn
+- Fix unit mapping in bondedAtomicPairs MolScript query
+- Improve pdb parsing: handle non unique atom and chain names (fixes #156)
+- Fix volume streaming for entries with multiple contour lists
+- Add ``allowTransparentBackfaces`` parameter to support double-sided rendering of transparent geometries
+- Fix handling of case insensitive mmCIF enumeration fields (including entity.type)
+- Fix ``disable-wboit`` Viewer GET param
+- Add support for React 18.
+    - Used by importing ``createPluginUI`` from ``mol-plugin-ui/react18``;
+    - In Mol* 4.0, React 18 will become the default option.
+
+## [v3.5.0] - 2022-03-25
+
+- Fix issues with bounding-sphere & color-smoothing (mostly for small geometries)
+- Support BCIF => CIF conversion in ``cif2bcif`` CLI tool
+
+## [v3.4.0] - 2022-03-13
+
+- Fix handling of mmcif with empty ``label_*`` fields
+- Improve saccharide detection (compare against list from CCD)
+- Fix legend label of hydrophobicity color theme
+- Add ``LoadTrajectory`` action
+- Add ``CustomImportControls`` to left panel
+- Add Zenodo import extension (load structures, trajectories, volumes, and zip files)
+- Fix loading of some compressed files within sessions
+- Fix wrong element assignment for atoms with Charmm ion names
+- Fix handling of empty symmetry cell data
+- Add support for ``trr`` and ``nctraj`` coordinates files
+- Add support for ``prmtop`` and ``top`` topology files
+
+## [v3.3.1] - 2022-02-27
+
+- Fix issue with unit boundary reuse (do at visual level instead)
+- Add option to ignore ions for inter-unit bond computation
+
+## [v3.3.0] - 2022-02-27
+
+- Fix parsing contour-level from emdb v3 header files
+- Fix invalid CSS (#376)
+- Fix "texture not renderable" & "texture not bound" warnings (#319)
+- Fix visual for bonds between two aromatic rings
+- Fix visual for delocalized bonds (parsed from mmcif and mol2)
+- Fix ring computation algorithm
+- Add ``UnitResonance`` property with info about delocalized triplets
+- Resolve marking in main renderer loop to improve overall performance
+- Use ``throttleTime`` instead of ``debounceTime`` in sequence viewer for better responsiveness
+- Change line geometry default ``scaleFactor`` to 2 (3 is too big after fixing line rendering)
+- Trajectory animation performance improvements
+    - Reuse ``Model.CoarseGrained`` for coordinate trajectories
+    - Avoid calculating ``InterUnitBonds`` when ``Structure.parent`` ones are empty
+    - Reuse unit boundary if sphere has not changed too much
+    - Don't show 'inter-bond' and 'element-cross' visuals in line representations of polymerAndLigand preset
+- Fix additional mononucleotides detected as polymer components
+- Fix and improve ``canRemap`` handling in ``IntraUnitBonds``
+- Reuse occlusion for secondary passes during multi-sampling
+- Check if marking passes are needed before doing them
+- Add ``resolutionScale`` parameter to allow trading quality of occlusion for performance
+
+## [v3.2.0] - 2022-02-17
+
+- Rename "best database mapping" to "SIFTS Mapping"
+- Add schema and export support for ``atom_site.pdbx_sifts_xref_*`` fields
+- Add schema export support for ``atom_site.pdbx_label_index`` field
+- Add `traceOnly` parameter to chain/UniProt-based structure alignment
+- Store ``IndexPairBonds`` as a dynamic property.
+
+## [v3.1.0] - 2022-02-06
+
+- Fix ``xrayShaded`` & ``ignoreLight`` params not working at the same time
+- Add ``ignoreLight`` to component params
+- Tweaks for cleaner default representation style
+    - Cartoon: use ``nucleotide-ring`` instead of ``nucleotide-block``
+    - Focus: use ``xrayShaded`` instead of opacity; adjust target size; don't show non-covalent interactions twice
+- Fix representation preset side effects (changing post-processing parameters, see #363)
+- Add Quick Styles panel (default, illustrative, stylized)
+- Fix exported structure missing secondary-structure categories (#364)
+- Fix volume streaming error message: distinguish between missing data and server error (#364)
+
+## [v3.0.2] - 2022-01-30
+
+- Fix color smoothing of elongated structures (by fixing ``Sphere.expand`` for spheres with highly directional extrema)
+- Fix entity label not displayed when multiple instances of the same entity are highlighted
+- Fix empty elements created in ``StructureElement.Loci.extendToAllInstances``
+- Measurement options tweaks (allow larger ``textSize``; make ``customText`` essential)
+- Fix visual visibility sync edge case when changing state snapshots
+
+## [v3.0.1] - 2022-01-27
+
+- Fix marking pass not working with ``transparentBackground``
+- Fix pdbe xray maps url not https
+- Fix entity-id color theme broken for non-IHM models
+- Improve/fix marking of ``InteractionsInterUnitVisual`` (mark when all contact-feature members are given)
+- Add missing "entity-id" and "enity-source" options for carbon coloring to "element-symbol" color theme
+- Fix VolumeServer/query CLI
+- Support automatic iso-value adjustment for VolumeServer data in ``Viewer.loadVolumeFromUrl``
+- Emit drag event whenever started within viewport (not only for non-empty loci)
+
+## [v3.0.0] - 2022-01-23
+
+- Assembly handling tweaks:
+    - Do not include suffix for "identity assembly operators"
+    - Do not include assembly-related categories to export if the structure was composed from an assembly
+    - Special case for ``structAsymMap`` if Mol* asym id operator mapping is present
+- Support for opening ZIP files with multiple entries
+- Add Model Export extension
+- Bugfix: Automatically treat empty string as "non-present" value in BinaryCIF writer.
+- Fix coarse model support in entity-id color theme
+- Fix marking of carbohydrate visuals (whole chain could get marked instead of single residue)
+- Add custom colors to "element-symbol", "molecule-type", "residue-name", and "secondary-structure" themes
+- Support/bugfixes for ``atom_site.pdbx_sifts_xref`` categories
+- Improve/fix marking of ``InteractionsIntraUnitVisual`` (mark when all contact-feature members are given)
+
+## [v3.0.0-dev.10] - 2022-01-17
+
+- Fix ``getOperatorsForIndex``
+- Pass animation info (current frame & count) to state animations
+    - Fix camera stutter for "camera spin" animation
+- Add formal charge parsing support for MOL/SDF files (thanks @ptourlas)
+- [Breaking] Cleaner looking ``MembraneOrientationVisuals`` defaults
+- [Breaking] Add rock animation to trackball controls
+    - Add ``animate`` to ``TrackballControlsParams``, remove ``spin`` and ``spinSpeed``
+    - Add ``animate`` to ``SimpleSettingsParams``, remove ``spin``
+- Add "camera rock" state animation
+- Add support for custom colors to "molecule-type" theme
+- [Breaking] Add style parameter to "illustrative" color theme
+    - Defaults to "entity-id" style instead of "chain-id"
+- Add "illustrative" representation preset
+
+## [v3.0.0-dev.9] - 2022-01-09
+
+- Add PDBj as a ``pdb-provider`` option
+- Move Viewer APP to a separate file to allow use without importing light theme & index.html
+- Add symmetry support for mol2 files (only spacegroup setting 1)
+- Fix mol2 files element symbol assignment
+- Improve bond assignment from ``IndexPairBonds``
+    - Add ``key`` field for mapping to source data
+    - Fix assignment of bonds with unphysical length
+- Fix label/stats of single atom selection in multi-chain units
+
+## [v3.0.0-dev.8] - 2021-12-31
+
+- Add ``PluginFeatureDetection`` and disable WBOIT in Safari 15.
+- Add ``disable-wboit`` Viewer GET param
+- Add ``prefer-webgl1`` Viewer GET param
+- [Breaking] Refactor direct-volume rendering
+    - Remove isosurface render-mode (use GPU MC instead)
+    - Move coloring into theme (like for other geometries/renderables)
+        - Add ``direct`` color type
+        - Remove color from transfer-function (now only alpha)
+        - Add direct-volume color theme support
+        - Add volume-value color theme
+- [Breaking] Use size theme in molecular/gaussian surface & label representations
+    - This is breaking because it was hardcoded to ``physical`` internally but the repr size theme default was ``uniform`` (now ``physical``)
+
+## [v3.0.0-dev.7] - 2021-12-20
+
+- Reduce number of created programs/shaders
+    - Support specifying variants when creating graphics render-items
+    - Change double-side shader param from define to uniform
+    - Remove dMarkerType shader define (use uMarker as needed)
+    - Support to ignore defines depending on the shader variant
+    - Combine pickObject/pickInstance/pickGroup shader variants into one
+    - Combine markingDepth/markingMask shader variants into one
+    - Correctly set shader define flags for overpaint, transparency, substance, clipping
+- [Breaking] Add per-object clip rendering properties (variant/objects)
+    - ``SimpleSettingsParams.clipping.variant/objects`` and ``RendererParams.clip`` were removed
+
+## [v3.0.0-dev.6] - 2021-12-19
+
+- Enable temporal multi-sampling by default
+    - Fix flickering during marking with camera at rest
+- Enable ``aromaticBonds`` in structure representations by default
+- Add ``PluginConfig.Structure.DefaultRepresentationPreset``
+- Add ModelArchive support
+    - schema extensions (e.g., AlphaFold uses it for the pLDDT score)
+    - ModelArchive option in DownloadStructure action
+    - ``model-archive`` GET parameter for Viewer app
+    - ``Viewer.loadModelArchive`` method
+- Improve support for loading AlphaFold structures
+    - Automatic coloring by pLDDT
+    - AlphaFold DB option in DownloadStructure action
+    - ``afdb`` GET parameter for Viewer app
+    - ``Viewer.loadAlphaFoldDb`` method
+- Add QualityAssessment extension (using data from ma_qa_metric_local mmcif category)
+    - pLDDT & qmean score: coloring, repr presets, molql symbol, loci labels (including avg for mutli-residue selections)
+    - pLDDT: selection query
+- Warn about erroneous symmetry operator matrix (instead of throwing an error)
+- Added ``createPluginUI`` to ``mol-plugin-ui``
+    - Support ``onBeforeUIRender`` to make sure initial UI works with custom presets and similar features.
+- [Breaking] Removed ``createPlugin`` and ``createPluginAsync`` from ``mol-plugin-ui``
+    - Please use ``createPluginUI`` instead
+- Improve aromatic bonds handling
+    - Don't detect aromatic bonds for rings < 5 atoms based on planarity
+    - Prefer atoms in aromatic rings as bond reference positions
+
+## [v3.0.0-dev.5] - 2021-12-16
+
+- Fix initial camera reset not triggering for some entries.
+
+## [v3.0.0-dev.4] - 2021-12-14
+
+- Add ``bumpiness`` (per-object and per-group), ``bumpFrequency`` & ``bumpAmplitude`` (per-object) render parameters (#299)
+- Change ``label`` representation defaults: Use text border instead of rectangle background
+- Add outline color option to renderer
+- Fix false positives in Model.isFromPdbArchive
+- Add drag and drop support for loading any file, including multiple at once
+    - If there are session files (.molx or .molj) among the dropped files, only the first session will be loaded
+- Add drag and drop overlay
+- Safari 15.1 - 15.3 WebGL 2 support workaround
+- [Breaking] Move ``react`` and ``react-dom`` to ``peerDependencies``. This might break some builds.
+
+## [v3.0.0-dev.3] - 2021-12-4
+
+- Fix OBJ and USDZ export
+
+## [v3.0.0-dev.2] - 2021-12-1
+
+- Do not include tests and source maps in NPM package
+
 ## [v3.0.0-dev.0] - 2021-11-28

 - Add multiple lights support (with color, intensity, and direction parameters)
 - [Breaking] Add per-object material rendering properties
+    - ``SimpleSettingsParams.lighting.renderStyle`` and ``RendererParams.style`` were removed
 - Add substance theme with per-group material rendering properties
+- ``StructureComponentManager.Options`` state saving support
+- ``ParamDefinition.Group.presets`` support

 ## [v2.4.1] - 2021-11-28

--- a/CITATION.cff
+++ b/CITATION.cff
@@ -0,0 +1,72 @@
+cff-version: 1.2.0
+title: >-
+  Mol* library
+message: >-
+  Please cite this software using the metadata from
+  'preferred-citation'.
+authors:
+  - given-names: Alexander S
+    family-names: Rose
+    orcid: 'https://orcid.org/0000-0002-0893-5551'
+  - given-names: David
+    family-names: Sehnal
+    orcid: 'https://orcid.org/0000-0002-0682-3089'
+  - given-names: Sebastian
+    family-names: Bittrich
+    orcid: 'https://orcid.org/0000-0003-3576-0387'
+  - given-names: Áron Samuel
+    family-names: Kovács
+  - given-names: Ludovic
+    family-names: Autin
+    orcid: 'https://orcid.org/0000-0002-2197-191X'
+  - given-names: Michal
+    family-names: Malý
+  - given-names: Jiří
+    family-names: Černý
+  - given-names: Panagiotis
+    family-names: Tourlas
+type: software
+doi: 10.5281/zenodo.3947306
+preferred-citation:
+  authors:
+    - given-names: David
+      family-names: Sehnal
+      orcid: 'https://orcid.org/0000-0002-0682-3089'
+    - given-names: Sebastian
+      family-names: Bittrich
+      orcid: 'https://orcid.org/0000-0003-3576-0387'
+    - given-names: Mandar
+      family-names: Deshpande
+      orcid: 'https://orcid.org/0000-0002-9043-7665'
+    - given-names: Radka
+      family-names: Svobodová
+      orcid: 'https://orcid.org/0000-0002-3840-8760'
+    - given-names: Karel
+      family-names: Berka
+      orcid: 'https://orcid.org/0000-0001-9472-2589'
+    - given-names: Václav
+      family-names: Bazgier
+      orcid: 'https://orcid.org/0000-0003-3393-3010'
+    - given-names: Sameer
+      family-names: Velankar
+      orcid: 'https://orcid.org/0000-0002-8439-5964'
+    - given-names: Stephen K
+      family-names: Burley
+      orcid: 'https://orcid.org/0000-0002-2487-9713'
+    - given-names: Jaroslav
+      family-names: Koča
+      orcid: 'https://orcid.org/0000-0002-2780-4901'
+    - given-names: Alexander S
+      family-names: Rose
+      orcid: 'https://orcid.org/0000-0002-0893-5551'
+  title: >-
+    Mol* Viewer: modern web app for 3D visualization
+    and analysis of large biomolecular structures
+  type: article
+  doi: 10.1093/nar/gkab314
+  journal: "Nucleic Acids Research"
+  issue: W1
+  volume: 49
+  year: 2021
+  month: 7
+  pages: "W431–W437"
--- a/README.md
+++ b/README.md
@@ -11,6 +11,13 @@ When using Mol*, please cite:

 David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: [Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures](https://doi.org/10.1093/nar/gkab314), *Nucleic Acids Research*, 2021; https://doi.org/10.1093/nar/gkab314.

+### Protein Data Bank Integrations
+
+- The [pdbe-molstar](https://github.com/molstar/pdbe-molstar) library is the Mol* implementation used by EMBL-EBI data resources such as [PDBe](https://pdbe.org/), [PDBe-KB](https://pdbe-kb.org/) and [AlphaFold DB](https://alphafold.ebi.ac.uk/). This implementation can be used as a JS plugin and a Web component and supports property/attribute-based easy customisation. It provides helper methods to facilitate programmatic interactions between the web application and the 3D viewer. It also provides a superposition view for overlaying all the observed ligand molecules on representative protein conformations.
+
+- [rcsb-molstar](https://github.com/molstar/rcsb-molstar) is the Mol* plugin used by [RCSB PDB](https://www.rcsb.org). The project provides additional presets for the visualization of structure alignments and structure motifs such as ligand binding sites. Furthermore, [rcsb-molstar](https://github.com/molstar/rcsb-molstar) allows to interactively add or hide of (parts of) chains, as seen in the [3D Protein Feature View](https://www.rcsb.org/3d-sequence/4hhb).
+
+
 ## Project Structure Overview

 The core of Mol* consists of these modules (see under `src/`):
@@ -68,6 +75,17 @@ If working on just the viewer, ``npm run watch-viewer`` will provide shorter com

 Debug/production mode in browsers can be turned on/off during runtime by calling ``setMolStarDebugMode(true/false, true/false)`` from the dev console.

+### Cleaning and forcing a full rebuild
+    npm run clean
+
+Wipes the `build` and `lib` directories and `.tsbuildinfo` files.
+
+    npm run rebuild
+
+Runs the cleanup script prior to building the project, forcing a full rebuild of the project.
+
+Use these commands to resolve occassional build failures which may arise after some dependency updates. Once done, `npm run build` should work again. Note that full rebuilds take more time to complete.
+
 ### Build for production:
    NODE_ENV=production npm run build

@@ -102,6 +120,9 @@ and navigate to `build/viewer`

    node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-ions.js src/mol-model/structure/model/types/ions.ts

+**Saccharide names**
+
+    node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-saccharides.js src/mol-model/structure/model/types/saccharides.ts

 **GraphQL schemas**

@@ -120,7 +141,7 @@ and navigate to `build/viewer`

    export NODE_PATH="lib"; node build/state-docs

-**Convert any CIF to BinaryCIF**
+**Convert any CIF to BinaryCIF (or vice versa)**

    node lib/commonjs/servers/model/preprocess -i file.cif -ob file.bcif

@@ -130,6 +151,11 @@ Or

    node lib/commonjs/cli/cif2bcif

+E.g.
+ 
+    node lib/commonjs/cli/cif2bcif src.cif out.bcif.gz
+    node lib/commonjs/cli/cif2bcif src.bcif.gz out.cif
+
 ## Development

 ### Installation
--- a/data/cif-field-names/mmcif-field-names.csv
+++ b/data/cif-field-names/mmcif-field-names.csv
@@ -24,6 +24,11 @@ atom_site.auth_asym_id
 atom_site.auth_seq_id
 atom_site.pdbx_PDB_model_num
 atom_site.ihm_model_id
+atom_site.pdbx_label_index
+atom_site.pdbx_sifts_xref_db_name
+atom_site.pdbx_sifts_xref_db_acc
+atom_site.pdbx_sifts_xref_db_num
+atom_site.pdbx_sifts_xref_db_res

 atom_site_anisotrop.id
 atom_site_anisotrop.U
@@ -246,6 +251,14 @@ citation_author.ordinal
 exptl.entry_id
 exptl.method

+software.classification
+software.date
+software.description
+software.name
+software.pdbx_ordinal
+software.type
+software.version
+
 struct.entry_id
 struct.title
 struct.pdbx_descriptor
@@ -802,4 +815,58 @@ ihm_multi_state_modeling.population_fraction_sd
 ihm_multi_state_modeling.state_type
 ihm_multi_state_modeling.state_name
 ihm_multi_state_modeling.experiment_type
-ihm_multi_state_modeling.details
+ihm_multi_state_modeling.details
+
+ma_data.content_type
+ma_data.content_type_other_details
+ma_data.id
+ma_data.name
+
+ma_model_list.data_id
+ma_model_list.model_group_id
+ma_model_list.model_group_name
+ma_model_list.model_id
+ma_model_list.model_name
+ma_model_list.model_type
+ma_model_list.ordinal_id
+
+ma_qa_metric.id
+ma_qa_metric.mode
+ma_qa_metric.name
+ma_qa_metric.software_group_id
+ma_qa_metric.type
+
+ma_qa_metric_global.metric_id
+ma_qa_metric_global.metric_value
+ma_qa_metric_global.model_id
+ma_qa_metric_global.ordinal_id
+
+ma_qa_metric_local.label_asym_id
+ma_qa_metric_local.label_comp_id
+ma_qa_metric_local.label_seq_id
+ma_qa_metric_local.metric_id
+ma_qa_metric_local.metric_value
+ma_qa_metric_local.model_id
+ma_qa_metric_local.ordinal_id
+
+ma_software_group.group_id
+ma_software_group.ordinal_id
+ma_software_group.software_id
+
+ma_target_entity.data_id
+ma_target_entity.entity_id
+ma_target_entity.origin
+
+ma_target_entity_instance.asym_id
+ma_target_entity_instance.details
+ma_target_entity_instance.entity_id
+
+ma_target_ref_db_details.db_accession
+ma_target_ref_db_details.db_code
+ma_target_ref_db_details.db_name
+ma_target_ref_db_details.ncbi_taxonomy_id
+ma_target_ref_db_details.organism_scientific
+ma_target_ref_db_details.seq_db_align_begin
+ma_target_ref_db_details.seq_db_align_end
+ma_target_ref_db_details.seq_db_isoform
+ma_target_ref_db_details.target_entity_id
--- a/docs/file-formats.md
+++ b/docs/file-formats.md
@@ -0,0 +1,44 @@
+
+Support file formats and their extensions.
+
+## Structure
+
+- MMCIF and CIFCORE (mmCIF and coreCIF schemas): cif, bcif, mmcif, mcif
+- GRO: gro
+- MOL: mol
+- MOL2: mol2
+- PDB/PDBQT: pdb, ent, pdbqt
+- SDF: sdf, sd
+- XYZ: xyz
+
+
+## Topology
+
+Need to be loaded together with Coordinates.
+
+- PRMTOP: prmtop, parm7
+- PSF: psf
+- TOP: top
+
+## Coordinates
+
+Need to be loaded together with a Structure or Topology.
+
+- DCD: dcd
+- NCTRAJ: nc, nctraj
+- TRR: trr
+- XTC: xtc
+
+
+## Volume
+
+- CCP4/MRC/MAP: ccp4, mrc, map
+- CUBE (may include a Structure): cub, cube
+- DSN6/BRIX: dsn6, brix
+- DX and DXBIN: dx, dxbin
+- DSCIF (DensityServer CIF schema): cif, bcif
+
+
+## Shape
+
+- PLY
--- a/docs/interesting-pdb-entries.md
+++ b/docs/interesting-pdb-entries.md
@@ -13,6 +13,7 @@
    * DZ has C1 instead of N1 (e.g. 6I4N)
    * DP has N5 instead of C5 and C7 instead of N7 (e.g. 6I4N)
 * Beta & Gamma peptides (e.g. 1GAC, 6PQF)
+* Helices of D-amino acids (e.g. 7QDI)
 * Mixed (heterogeneous) all-atom/trace-only RNA model (1JGQ)
 * Polymers with residues with missing trace atoms (e.g. 2QFJ)
 * Modified RNA bases (1y26, 5L4O)
@@ -29,6 +30,19 @@
 * Long linear sugar chain (4HG6)
 * Anisotropic B-factors/Ellipsoids (1EJG)
 * NOS bridges (LYS-CSO in 7B0L, 6ZWJ, 6ZWH)
+* Non-polymer components in polymer entities
+    * PN2 in 1F80
+    * ACE (many, e.g. 5AGU, 1E1X)
+    * ACY in 7ABY
+    * NH2 (many, e.g. 6Y13)
+* Ligands with many rings
+    * STU (e.g. 1U59) - many fused rings
+    * HT (e.g. 127D) - rings connected by a single bond
+    * J2C (e.g. 7EFJ) - rings connected by a single atom
+    * RBF (e.g. 7QF2) - three linearly fused rings
+    * TA1 (e.g. 1JFF) - many fused rings (incl. a 8-member rings)
+    * BPA (e.g. 1JDG) - many fused rings
+    * CLR (e.g. 3GKI) - four fused rings

 Assembly symmetries
 * 5M30 (Assembly 1, C3 local and pseudo)
--- a/examples/ace2-hit.mol2
+++ b/examples/ace2-hit.mol2
@@ -0,0 +1,86 @@
+@<TRIPOS>MOLECULE
+ace2_r_r2.top2000.poses.plain/3_Z1137565832_1_T2.pdb
+ 37 41 0 0 0
+SMALL
+GASTEIGER
+
+@<TRIPOS>ATOM
+      1  C         64.7720   85.9180   38.1090 C.3     1  LIG1        0.0799
+      2  C         64.6440   84.6900   37.1570 C.3     1  LIG1        0.0306
+      3  C         65.2660   83.4260   37.8080 C.3     1  LIG1        0.0927
+      4  N         66.6560   83.6710   38.1790 N.pl3   1  LIG1       -0.2919
+      5  C         67.7080   82.9280   37.6260 C.ar    1  LIG1        0.1520
+      6  C         69.0970   83.1860   37.8250 C.ar    1  LIG1        0.0393
+      7  C         70.0830   82.4100   37.1810 C.ar    1  LIG1        0.0436
+      8  C         69.6450   81.3740   36.3510 C.ar    1  LIG1        0.1867
+      9  N         70.3370   80.5030   35.6050 N.ar    1  LIG1       -0.1270
+     10  N         69.4700   79.7480   35.0040 N.ar    1  LIG1       -0.1228
+     11  C         68.2200   80.1120   35.3570 C.ar    1  LIG1        0.2583
+     12  N         68.3350   81.1470   36.2040 N.ar    1  LIG1       -0.1866
+     13  N         67.4230   81.8700   36.8030 N.ar    1  LIG1       -0.1473
+     14  C         66.8190   84.7600   39.1350 C.3     1  LIG1        0.0927
+     15  C         66.2560   86.0870   38.5570 C.3     1  LIG1        0.0306
+     16  N         64.4520   87.4670   36.2150 N.am    1  LIG1       -0.2979
+     17  H         64.9740   86.7650   35.7110 H       1  LIG1        0.1498
+     18  C         64.2290   87.1720   37.5220 C.2     1  LIG1        0.2224
+     19  O         63.5690   87.9550   38.2480 O.2     1  LIG1       -0.2751
+     20  C         64.0160   88.6470   35.5420 C.3     1  LIG1        0.1559
+     21  C         65.9650   88.2170   32.5700 C.ar    1  LIG1        0.1629
+     22  N         65.8040   88.0390   33.8860 N.ar    1  LIG1       -0.3232
+     23  H         66.4190   87.5270   34.5040 H       1  LIG1        0.1686
+     24  C         64.6770   88.6690   34.2330 C.ar    1  LIG1        0.1601
+     25  N         64.1890   89.2810   33.1430 N.ar    1  LIG1       -0.1318
+     26  N         64.9640   89.0070   32.1450 N.ar    1  LIG1       -0.1293
+     27  F         69.9260   86.0280   29.3520 F       1  LIG1       -0.2042
+     28  C         68.9880   86.5420   30.0990 C.ar    1  LIG1        0.1401
+     29  C         67.6590   86.0900   29.9830 C.ar    1  LIG1        0.0297
+     30  C         66.6500   86.6450   30.7950 C.ar    1  LIG1        0.0053
+     31  C         66.9590   87.6470   31.7450 C.ar    1  LIG1        0.0359
+     32  C         68.2970   88.0990   31.8400 C.ar    1  LIG1        0.0053
+     33  C         69.3030   87.5560   31.0230 C.ar    1  LIG1        0.0297
+     34  C         66.9850   79.4910   34.8440 C.3     1  LIG1        0.4541
+     35  F         67.3150   78.4110   34.0640 F       1  LIG1       -0.1631
+     36  F         66.2460   80.3690   34.0910 F       1  LIG1       -0.1631
+     37  F         66.1920   79.0650   35.8800 F       1  LIG1       -0.1631
+@<TRIPOS>BOND
+     1     1     2    1
+     2     1    18    1
+     3     1    15    1
+     4     2     3    1
+     5     3     4    1
+     6     4     5    1
+     7     4    14    1
+     8     5    13   ar
+     9     5     6   ar
+    10     6     7   ar
+    11     7     8   ar
+    12     8     9   ar
+    13     8    12   ar
+    14     9    10   ar
+    15    10    11   ar
+    16    11    34    1
+    17    11    12   ar
+    18    12    13   ar
+    19    14    15    1
+    20    16    20    1
+    21    16    17    1
+    22    16    18   am
+    23    18    19    2
+    24    20    24    1
+    25    21    31    1
+    26    21    26   ar
+    27    21    22   ar
+    28    22    24   ar
+    29    22    23    1
+    30    24    25   ar
+    31    25    26   ar
+    32    27    28    1
+    33    28    29   ar
+    34    28    33   ar
+    35    29    30   ar
+    36    30    31   ar
+    37    31    32   ar
+    38    32    33   ar
+    39    34    35    1
+    40    34    36    1
+    41    34    37    1
--- a/examples/ace2.pdbqt
+++ b/examples/ace2.pdbqt
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "molstar",
-  "version": "3.0.0-dev.0",
+  "version": "3.8.2",
  "description": "A comprehensive macromolecular library.",
  "homepage": "https://github.com/molstar/molstar#readme",
  "repository": {
@@ -13,9 +13,11 @@
  "scripts": {
    "lint": "eslint .",
    "lint-fix": "eslint . --fix",
-    "test": "npm run lint && jest",
+    "test": "npm install --no-save \"gl@^5.0.0\" && npm run lint && jest",
    "jest": "jest",
    "build": "npm run build-tsc && npm run build-extra && npm run build-webpack",
+    "clean": "node ./scripts/clean.js",
+    "rebuild": "npm run clean && npm run build",
    "build-viewer": "npm run build-tsc && npm run build-extra && npm run build-webpack-viewer",
    "build-tsc": "concurrently \"tsc --incremental\" \"tsc --build tsconfig.commonjs.json --incremental\"",
    "build-extra": "cpx \"src/**/*.{scss,html,ico}\" lib/",
@@ -36,7 +38,7 @@
    "volume-server-test": "node lib/commonjs/servers/volume/server.js --idMap em 'test/${id}.mdb' --defaultPort 1336",
    "plugin-state": "node lib/commonjs/servers/plugin-state/index.js --working-folder ./build/state --port 1339",
    "preversion": "npm run test",
-    "version": "npm run build",
+    "version": "npm run rebuild && cpx .npmignore lib/",
    "postversion": "git push && git push --tags"
  },
  "files": [
@@ -84,75 +86,77 @@
    "Áron Samuel Kovács <aron.kovacs@mail.muni.cz>",
    "Ludovic Autin <autin@scripps.edu>",
    "Michal Malý <michal.maly@ibt.cas.cz>",
-    "Jiří Černý <jiri.cerny@ibt.cas.cz>"
+    "Jiří Černý <jiri.cerny@ibt.cas.cz>",
+    "Panagiotis Tourlas <panagiot_tourlov@hotmail.com>"
  ],
  "license": "MIT",
  "devDependencies": {
-    "@graphql-codegen/add": "^3.1.0",
-    "@graphql-codegen/cli": "^2.3.0",
-    "@graphql-codegen/time": "^3.1.0",
-    "@graphql-codegen/typescript": "^2.4.1",
-    "@graphql-codegen/typescript-graphql-files-modules": "^2.1.0",
-    "@graphql-codegen/typescript-graphql-request": "^4.3.1",
-    "@graphql-codegen/typescript-operations": "^2.2.1",
+    "@graphql-codegen/add": "^3.1.1",
+    "@graphql-codegen/cli": "^2.6.2",
+    "@graphql-codegen/time": "^3.1.1",
+    "@graphql-codegen/typescript": "^2.4.11",
+    "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
+    "@graphql-codegen/typescript-graphql-request": "^4.4.8",
+    "@graphql-codegen/typescript-operations": "^2.4.0",
    "@types/cors": "^2.8.12",
    "@types/gl": "^4.1.0",
-    "@types/jest": "^27.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@types/jest": "^27.5.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
    "benchmark": "^2.1.4",
-    "concurrently": "^6.4.0",
-    "cpx2": "^4.0.0",
+    "concurrently": "^7.2.0",
+    "cpx2": "^4.2.0",
    "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.5.1",
-    "eslint": "^8.3.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.16.0",
    "extra-watch-webpack-plugin": "^1.0.3",
    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "graphql": "^15.7.2",
-    "http-server": "^14.0.0",
-    "jest": "^27.3.1",
-    "mini-css-extract-plugin": "^2.4.5",
+    "fs-extra": "^10.1.0",
+    "graphql": "^16.5.0",
+    "http-server": "^14.1.0",
+    "jest": "^28.1.0",
+    "mini-css-extract-plugin": "^2.6.0",
    "path-browserify": "^1.0.1",
    "raw-loader": "^4.0.2",
-    "sass": "^1.43.5",
-    "sass-loader": "^12.3.0",
-    "simple-git": "^2.47.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "sass": "^1.52.1",
+    "sass-loader": "^13.0.0",
+    "simple-git": "^3.7.1",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.1",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.5.2",
-    "webpack": "^5.64.4",
-    "webpack-cli": "^4.9.1"
+    "ts-jest": "^28.0.2",
+    "typescript": "^4.6.4",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@types/argparse": "^2.0.10",
    "@types/benchmark": "^2.1.1",
    "@types/compression": "1.7.2",
    "@types/express": "^4.17.13",
-    "@types/node": "^16.11.10",
-    "@types/node-fetch": "^2.5.12",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@types/node": "^16.11.36",
+    "@types/node-fetch": "^2.6.1",
    "@types/swagger-ui-dist": "3.30.1",
    "argparse": "^2.0.1",
-    "body-parser": "^1.19.0",
+    "body-parser": "^1.20.0",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
-    "express": "^4.17.1",
+    "express": "^4.18.1",
    "h264-mp4-encoder": "^1.0.12",
-    "immer": "^9.0.7",
-    "immutable": "^3.8.2",
-    "node-fetch": "^2.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rxjs": "^7.4.0",
-    "swagger-ui-dist": "^4.1.1",
-    "tslib": "^2.3.1",
+    "immer": "^9.0.14",
+    "immutable": "^4.0.0",
+    "node-fetch": "^2.6.7",
+    "rxjs": "^7.5.5",
+    "swagger-ui-dist": "^4.11.1",
+    "tslib": "^2.4.0",
    "util.promisify": "^1.1.1",
    "xhr2": "^0.2.1"
  },
-  "optionalDependencies": {
-    "gl": "^4.9.2"
+  "peerDependencies": {
+    "react": "^18.1.0 || ^17.0.2 || ^16.14.0",
+    "react-dom": "^18.1.0 || ^17.0.2 || ^16.14.0"
  }
 }
--- a/scripts/clean.js
+++ b/scripts/clean.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Michal Malý <malym@ibt.cas.cz>
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+function removeDir(dirPath) {
+    for (const ent of fs.readdirSync(dirPath)) {
+        const entryPath = path.join(dirPath, ent);
+        remove(entryPath);
+    }
+
+    fs.rmdirSync(dirPath);
+}
+
+function remove(entryPath) {
+    const st = fs.statSync(entryPath);
+    if (st.isDirectory())
+        removeDir(entryPath);
+    else
+        fs.unlinkSync(entryPath);
+}
+
+const toClean = [
+    path.resolve(__dirname, '../build'),
+    path.resolve(__dirname, '../lib'),
+    path.resolve(__dirname, '../tsconfig.tsbuildinfo'),
+];
+
+toClean.forEach(ph => {
+    if (fs.existsSync(ph)) {
+        try {
+            remove(ph);
+        } catch (err) {
+            console.warn(`Cleanup failed: ${err}`);
+        }
+    }
+});
--- a/scripts/deploy.js
+++ b/scripts/deploy.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -14,6 +14,9 @@ const buildDir = path.resolve(__dirname, '../build/');
 const deployDir = path.resolve(buildDir, 'deploy/');
 const localPath = path.resolve(deployDir, 'molstar.github.io/');

+const analyticsTag = /<!-- __MOLSTAR_ANALYTICS__ -->/g;
+const analyticsCode = `<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "c414cbae2d284ea995171a81e4a3e721"}'></script><!-- End Cloudflare Web Analytics -->`;
+
 function log(command, stdout, stderr) {
    if (command) {
        console.log('\n###', command);
@@ -22,11 +25,36 @@ function log(command, stdout, stderr) {
    }
 }

+function addAnalytics(path) {
+    const data = fs.readFileSync(path, 'utf8');
+    const result = data.replace(analyticsTag, analyticsCode);
+    fs.writeFileSync(path, result, 'utf8');
+}
+
 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 });
+    addAnalytics(path.resolve(viewerDeployPath, 'index.html'));
+}
+
+function copyDemos() {
+    console.log('\n###', 'copy demos files');
+    const lightingBuildPath = path.resolve(buildDir, '../build/examples/lighting/');
+    const lightingDeployPath = path.resolve(localPath, 'demos/lighting/');
+    fse.copySync(lightingBuildPath, lightingDeployPath, { overwrite: true });
+    addAnalytics(path.resolve(lightingDeployPath, 'index.html'));
+
+    const orbitalsBuildPath = path.resolve(buildDir, '../build/examples/alpha-orbitals/');
+    const orbitalsDeployPath = path.resolve(localPath, 'demos/alpha-orbitals/');
+    fse.copySync(orbitalsBuildPath, orbitalsDeployPath, { overwrite: true });
+    addAnalytics(path.resolve(orbitalsDeployPath, 'index.html'));
+}
+
+function copyFiles() {
+    copyViewer();
+    copyDemos();
 }

 if (!fs.existsSync(localPath)) {
@@ -42,9 +70,9 @@ if (!fs.existsSync(path.resolve(localPath, '.git/'))) {
        .outputHandler(log)
        .clone(remoteUrl, localPath)
        .fetch(['--all'])
-        .exec(copyViewer)
+        .exec(copyFiles)
        .add(['-A'])
-        .commit('updated viewer')
+        .commit('updated viewer & demos')
        .push();
 } else {
    console.log('\n###', 'update repository');
@@ -52,8 +80,8 @@ if (!fs.existsSync(path.resolve(localPath, '.git/'))) {
        .outputHandler(log)
        .fetch(['--all'])
        .reset(['--hard', 'origin/master'])
-        .exec(copyViewer)
+        .exec(copyFiles)
        .add(['-A'])
-        .commit('updated viewer')
+        .commit('updated viewer & demos')
        .push();
 }
--- a/src/apps/docking-viewer/index.html
+++ b/src/apps/docking-viewer/index.html
@@ -19,19 +19,19 @@
        <div id="app"></div>
        <script type="text/javascript" src="./molstar.js"></script>
        <script type="text/javascript">
-            var viewer = new DockingViewer('app', [0x33DD22, 0x1133EE], true);
-
            function getParam(name, regex) {
                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
            }
-            var pdbqt = getParam('pdbqt', '[^&]+').trim();
-            var mol2 = getParam('mol2', '[^&]+').trim();
+            var pdbqt = getParam('pdbqt', '[^&]+').trim() || '../../examples/ace2.pdbqt';
+            var mol2 = getParam('mol2', '[^&]+').trim() || '../../examples/ace2-hit.mol2';

-            viewer.loadStructuresFromUrlsAndMerge([
-                { url: pdbqt, format: 'pdbqt' },
-                { url: mol2, format: 'mol2' }
-            ]);
+            DockingViewer.create('app', [0x33DD22, 0x1133EE], true).then(viewer => {
+                viewer.loadStructuresFromUrlsAndMerge([
+                    { url: pdbqt, format: 'pdbqt' },
+                    { url: mol2, format: 'mol2' }
+                ]);
+            });
        </script>
    </body>
 </html>
--- a/src/apps/docking-viewer/index.ts
+++ b/src/apps/docking-viewer/index.ts
@@ -8,7 +8,7 @@
 import { Structure } from '../../mol-model/structure';
 import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
 import { PluginStateObject as PSO, PluginStateTransform } from '../../mol-plugin-state/objects';
-import { createPlugin } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
 import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
 import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
@@ -54,9 +54,10 @@ const DefaultViewerOptions = {
 };

 class Viewer {
-    plugin: PluginUIContext
+    constructor(public plugin: PluginUIContext) {
+    }

-    constructor(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
+    static async create(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
        const o = { ...DefaultViewerOptions, ...{
            layoutIsExpanded: false,
            layoutShowControls: false,
@@ -125,29 +126,31 @@ class Viewer {
            ? document.getElementById(elementOrId)
            : elementOrId;
        if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
-        this.plugin = createPlugin(element, spec);
+        const plugin = await createPluginUI(element, spec);

-        (this.plugin.customState as any) = {
+        (plugin.customState as any) = {
            colorPalette: {
                name: 'colors',
                params: { list: { colors } }
            }
        };

-        this.plugin.behaviors.canvas3d.initialized.subscribe(v => {
+        plugin.behaviors.canvas3d.initialized.subscribe(v => {
            if (v) {
-                PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: {
+                PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
                    renderer: {
-                        ...this.plugin.canvas3d!.props.renderer,
+                        ...plugin.canvas3d!.props.renderer,
                        backgroundColor: ColorNames.white,
                    },
                    camera: {
-                        ...this.plugin.canvas3d!.props.camera,
+                        ...plugin.canvas3d!.props.camera,
                        helper: { axes: { name: 'off', params: {} } }
                    }
                } });
            }
        });
+
+        return new Viewer(plugin);
    }

    async loadStructuresFromUrlsAndMerge(sources: { url: string, format: BuiltInTrajectoryFormat, isBinary?: boolean }[]) {
--- a/src/apps/docking-viewer/viewport.tsx
+++ b/src/apps/docking-viewer/viewport.tsx
@@ -21,6 +21,7 @@ import { PluginContext } from '../../mol-plugin/context';
 import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { StateObjectRef } from '../../mol-state';
 import { Color } from '../../mol-util/color';
+import { Material } from '../../mol-util/material';

 function shinyStyle(plugin: PluginContext) {
    return PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
@@ -43,14 +44,16 @@ function occlusionStyle(plugin: PluginContext) {
        postprocessing: {
            ...plugin.canvas3d!.props.postprocessing,
            occlusion: { name: 'on', params: {
-                samples: 64,
-                radius: 8,
-                bias: 1.0,
-                blurKernelSize: 13
+                bias: 0.8,
+                blurKernelSize: 15,
+                radius: 5,
+                samples: 32,
+                resolutionScale: 1
            } },
            outline: { name: 'on', params: {
                scale: 1.0,
-                threshold: 0.33
+                threshold: 0.33,
+                color: Color(0x0000),
            } }
        }
    } });
@@ -75,7 +78,7 @@ const PresetParams = {
    ...StructureRepresentationPresetProvider.CommonParams,
 };

-
+const CustomMaterial = Material({ roughness: 0.2, metalness: 0 });

 export const StructurePreset = StructureRepresentationPresetProvider({
    id: 'preset-structure',
@@ -92,8 +95,8 @@ export const StructurePreset = StructureRepresentationPresetProvider({

        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
        const representations = {
-            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, roughness: 0.2, sizeFactor: 0.35 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-            polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: { ...typeParams, roughness: 0.2 }, color: 'chain-id', colorParams: { palette: (plugin.customState as any).colorPalette } }, { tag: 'polymer' }),
+            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.35 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+            polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: { ...typeParams, material: CustomMaterial }, color: 'chain-id', colorParams: { palette: (plugin.customState as any).colorPalette } }, { tag: 'polymer' }),
        };

        await update.commit({ revertOnError: true });
@@ -147,8 +150,8 @@ const SurfacePreset = StructureRepresentationPresetProvider({

        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
        const representations = {
-            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, roughness: 0.2, sizeFactor: 0.26 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-            polymer: builder.buildRepresentation(update, components.polymer, { type: 'molecular-surface', typeParams: { ...typeParams, roughness: 0.2, quality: 'custom', resolution: 0.5, doubleSided: true }, color: 'partial-charge' }, { tag: 'polymer' }),
+            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.26 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+            polymer: builder.buildRepresentation(update, components.polymer, { type: 'molecular-surface', typeParams: { ...typeParams, material: CustomMaterial, quality: 'custom', resolution: 0.5, doubleSided: true }, color: 'partial-charge' }, { tag: 'polymer' }),
        };

        await update.commit({ revertOnError: true });
@@ -175,8 +178,8 @@ const PocketPreset = StructureRepresentationPresetProvider({

        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
        const representations = {
-            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, roughness: 0.2, sizeFactor: 0.26 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-            surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: { ...typeParams, roughness: 0.2, includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }, color: 'partial-charge' }, { tag: 'surroundings' }),
+            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.26 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+            surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: { ...typeParams, material: CustomMaterial, includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }, color: 'partial-charge' }, { tag: 'surroundings' }),
        };

        await update.commit({ revertOnError: true });
@@ -204,10 +207,10 @@ const InteractionsPreset = StructureRepresentationPresetProvider({

        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
        const representations = {
-            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, roughness: 0.2, sizeFactor: 0.3 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-            ballAndStick: builder.buildRepresentation(update, components.surroundings, { type: 'ball-and-stick', typeParams: { ...typeParams, roughness: 0.2, sizeFactor: 0.1, sizeAspectRatio: 1 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ball-and-stick' }),
-            interactions: builder.buildRepresentation(update, components.interactions, { type: InteractionsRepresentationProvider, typeParams: { ...typeParams, roughness: 0.2 }, color: InteractionTypeColorThemeProvider }, { tag: 'interactions' }),
-            label: builder.buildRepresentation(update, components.surroundings, { type: 'label', typeParams: { ...typeParams, roughness: 0.2, background: false, borderWidth: 0.1 }, color: 'uniform', colorParams: { value: Color(0x000000) } }, { tag: 'label' }),
+            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.3 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+            ballAndStick: builder.buildRepresentation(update, components.surroundings, { type: 'ball-and-stick', typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.1, sizeAspectRatio: 1 }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ball-and-stick' }),
+            interactions: builder.buildRepresentation(update, components.interactions, { type: InteractionsRepresentationProvider, typeParams: { ...typeParams, material: CustomMaterial }, color: InteractionTypeColorThemeProvider }, { tag: 'interactions' }),
+            label: builder.buildRepresentation(update, components.surroundings, { type: 'label', typeParams: { ...typeParams, material: CustomMaterial, background: false, borderWidth: 0.1 }, color: 'uniform', colorParams: { value: Color(0x000000) } }, { tag: 'label' }),
        };

        await update.commit({ revertOnError: true });
@@ -228,7 +231,7 @@ export class ViewportComponent extends PluginUIComponent {

    set = async (preset: StructureRepresentationPresetProvider) => {
        await this._set(this.plugin.managers.structure.hierarchy.selection.structures, preset);
-    }
+    };

    structurePreset = () => this.set(StructurePreset);
    illustrativePreset = () => this.set(IllustrativePreset);
--- a/src/apps/viewer/app.ts
+++ b/src/apps/viewer/app.ts
@@ -0,0 +1,494 @@
+/**
+ * Copyright (c) 2018-2022 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 { ANVILMembraneOrientation } from '../../extensions/anvil/behavior';
+import { CellPack } from '../../extensions/cellpack';
+import { DnatcoConfalPyramids } from '../../extensions/dnatco';
+import { G3DFormat, G3dProvider } from '../../extensions/g3d/format';
+import { GeometryExport } from '../../extensions/geo-export';
+import { MAQualityAssessment } from '../../extensions/model-archive/quality-assessment/behavior';
+import { QualityAssessmentPLDDTPreset, QualityAssessmentQmeanPreset } from '../../extensions/model-archive/quality-assessment/behavior';
+import { QualityAssessment } from '../../extensions/model-archive/quality-assessment/prop';
+import { ModelExport } from '../../extensions/model-export';
+import { Mp4Export } from '../../extensions/mp4-export';
+import { PDBeStructureQualityReport } from '../../extensions/pdbe';
+import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
+import { ZenodoImport } from '../../extensions/zenodo';
+import { Volume } from '../../mol-model/volume';
+import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
+import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
+import { PresetTrajectoryHierarchy } from '../../mol-plugin-state/builder/structure/hierarchy-preset';
+import { PresetStructureRepresentations, StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
+import { DataFormatProvider } from '../../mol-plugin-state/formats/provider';
+import { BuiltInTopologyFormat } from '../../mol-plugin-state/formats/topology';
+import { BuiltInCoordinatesFormat } from '../../mol-plugin-state/formats/coordinates';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { BuildInVolumeFormat } from '../../mol-plugin-state/formats/volume';
+import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
+import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { StateTransforms } from '../../mol-plugin-state/transforms';
+import { TrajectoryFromModelAndCoordinates } from '../../mol-plugin-state/transforms/model';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { PluginSpec } from '../../mol-plugin/spec';
+import { PluginState } from '../../mol-plugin/state';
+import { StateObjectRef, StateObjectSelector } from '../../mol-state';
+import { Asset } from '../../mol-util/assets';
+import { Color } from '../../mol-util/color';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+
+export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
+export { setDebugMode, setProductionMode } from '../../mol-util/debug';
+
+const CustomFormats = [
+    ['g3d', G3dProvider] as const
+];
+
+const Extensions = {
+    'cellpack': PluginSpec.Behavior(CellPack),
+    'dnatco-confal-pyramids': PluginSpec.Behavior(DnatcoConfalPyramids),
+    'pdbe-structure-quality-report': PluginSpec.Behavior(PDBeStructureQualityReport),
+    'rcsb-assembly-symmetry': PluginSpec.Behavior(RCSBAssemblySymmetry),
+    'rcsb-validation-report': PluginSpec.Behavior(RCSBValidationReport),
+    'anvil-membrane-orientation': PluginSpec.Behavior(ANVILMembraneOrientation),
+    'g3d': PluginSpec.Behavior(G3DFormat),
+    'model-export': PluginSpec.Behavior(ModelExport),
+    'mp4-export': PluginSpec.Behavior(Mp4Export),
+    'geo-export': PluginSpec.Behavior(GeometryExport),
+    'ma-quality-assessment': PluginSpec.Behavior(MAQualityAssessment),
+    'zenodo-import': PluginSpec.Behavior(ZenodoImport),
+};
+
+const DefaultViewerOptions = {
+    customFormats: CustomFormats as [string, DataFormatProvider][],
+    extensions: ObjectKeys(Extensions),
+    layoutIsExpanded: true,
+    layoutShowControls: true,
+    layoutShowRemoteState: true,
+    layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
+    layoutShowSequence: true,
+    layoutShowLog: true,
+    layoutShowLeftPanel: true,
+    collapseLeftPanel: false,
+    collapseRightPanel: false,
+    disableAntialiasing: PluginConfig.General.DisableAntialiasing.defaultValue,
+    pixelScale: PluginConfig.General.PixelScale.defaultValue,
+    pickScale: PluginConfig.General.PickScale.defaultValue,
+    pickPadding: PluginConfig.General.PickPadding.defaultValue,
+    enableWboit: PluginConfig.General.EnableWboit.defaultValue,
+    preferWebgl1: PluginConfig.General.PreferWebGl1.defaultValue,
+
+    viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
+    viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,
+    viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,
+    viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,
+    viewportShowAnimation: PluginConfig.Viewport.ShowAnimation.defaultValue,
+    pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,
+    volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,
+    volumeStreamingDisabled: !PluginConfig.VolumeStreaming.Enabled.defaultValue,
+    pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,
+    emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
+};
+type ViewerOptions = typeof DefaultViewerOptions;
+
+export class Viewer {
+    constructor(public plugin: PluginUIContext) {
+    }
+
+    static async create(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) {
+        const definedOptions = {} as any;
+        // filter for defined properies only so the default values
+        // are property applied
+        for (const p of Object.keys(options) as (keyof ViewerOptions)[]) {
+            if (options[p] !== void 0) definedOptions[p] = options[p];
+        }
+
+        const o: ViewerOptions = { ...DefaultViewerOptions, ...definedOptions };
+        const defaultSpec = DefaultPluginUISpec();
+
+        const spec: PluginUISpec = {
+            actions: defaultSpec.actions,
+            behaviors: [
+                ...defaultSpec.behaviors,
+                ...o.extensions.map(e => Extensions[e]),
+            ],
+            animations: [...defaultSpec.animations || []],
+            customParamEditors: defaultSpec.customParamEditors,
+            customFormats: o?.customFormats,
+            layout: {
+                initial: {
+                    isExpanded: o.layoutIsExpanded,
+                    showControls: o.layoutShowControls,
+                    controlsDisplay: o.layoutControlsDisplay,
+                    regionState: {
+                        bottom: 'full',
+                        left: o.collapseLeftPanel ? 'collapsed' : 'full',
+                        right: o.collapseRightPanel ? 'hidden' : 'full',
+                        top: 'full',
+                    }
+                },
+            },
+            components: {
+                ...defaultSpec.components,
+                controls: {
+                    ...defaultSpec.components?.controls,
+                    top: o.layoutShowSequence ? undefined : 'none',
+                    bottom: o.layoutShowLog ? undefined : 'none',
+                    left: o.layoutShowLeftPanel ? undefined : 'none',
+                },
+                remoteState: o.layoutShowRemoteState ? 'default' : 'none',
+            },
+            config: [
+                [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],
+                [PluginConfig.General.PixelScale, o.pixelScale],
+                [PluginConfig.General.PickScale, o.pickScale],
+                [PluginConfig.General.PickPadding, o.pickPadding],
+                [PluginConfig.General.EnableWboit, o.enableWboit],
+                [PluginConfig.General.PreferWebGl1, o.preferWebgl1],
+                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
+                [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
+                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
+                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
+                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                [PluginConfig.State.DefaultServer, o.pluginStateServer],
+                [PluginConfig.State.CurrentServer, o.pluginStateServer],
+                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
+                [PluginConfig.VolumeStreaming.Enabled, !o.volumeStreamingDisabled],
+                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
+                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
+                [PluginConfig.Structure.DefaultRepresentationPreset, ViewerAutoPreset.id],
+            ]
+        };
+
+        const element = typeof elementOrId === 'string'
+            ? document.getElementById(elementOrId)
+            : elementOrId;
+        if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
+        const plugin = await createPluginUI(element, spec, {
+            onBeforeUIRender: plugin => {
+                // the preset needs to be added before the UI renders otherwise
+                // "Download Structure" wont be able to pick it up
+                plugin.builders.structure.representation.registerPreset(ViewerAutoPreset);
+            }
+        });
+        return new Viewer(plugin);
+    }
+
+    setRemoteSnapshot(id: string) {
+        const url = `${this.plugin.config.get(PluginConfig.State.CurrentServer)}/get/${id}`;
+        return PluginCommands.State.Snapshots.Fetch(this.plugin, { url });
+    }
+
+    loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
+        return PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
+    }
+
+    loadStructureFromUrl(url: string, format: BuiltInTrajectoryFormat = 'mmcif', isBinary = false, options?: LoadStructureOptions) {
+        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'url',
+                params: {
+                    url: Asset.Url(url),
+                    format: format as any,
+                    isBinary,
+                    options: { ...params.source.params.options, representationParams: options?.representationParams as any },
+                }
+            }
+        }));
+    }
+
+    async loadAllModelsOrAssemblyFromUrl(url: string, format: BuiltInTrajectoryFormat = 'mmcif', isBinary = false, options?: LoadStructureOptions) {
+        const plugin = this.plugin;
+
+        const data = await plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
+        const trajectory = await plugin.builders.structure.parseTrajectory(data, format);
+
+        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'all-models', { useDefaultIfSingleModel: true, representationPresetParams: options?.representationParams });
+    }
+
+    async loadStructureFromData(data: string | number[], format: BuiltInTrajectoryFormat, options?: { dataLabel?: string }) {
+        const _data = await this.plugin.builders.data.rawData({ data, label: options?.dataLabel });
+        const trajectory = await this.plugin.builders.structure.parseTrajectory(_data, format);
+        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
+    }
+
+    loadPdb(pdb: string, options?: LoadStructureOptions) {
+        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
+        const provider = this.plugin.config.get(PluginConfig.Download.DefaultPdbProvider)!;
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'pdb' as const,
+                params: {
+                    provider: {
+                        id: pdb,
+                        server: {
+                            name: provider,
+                            params: PdbDownloadProvider[provider].defaultValue as any
+                        }
+                    },
+                    options: { ...params.source.params.options, representationParams: options?.representationParams as any },
+                }
+            }
+        }));
+    }
+
+    loadPdbDev(pdbDev: string) {
+        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'pdb-dev' as const,
+                params: {
+                    provider: {
+                        id: pdbDev,
+                        encoding: 'bcif',
+                    },
+                    options: params.source.params.options,
+                }
+            }
+        }));
+    }
+
+    loadEmdb(emdb: string, options?: { detail?: number }) {
+        const provider = this.plugin.config.get(PluginConfig.Download.DefaultEmdbProvider)!;
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadDensity, {
+            source: {
+                name: 'pdb-emd-ds' as const,
+                params: {
+                    provider: {
+                        id: emdb,
+                        server: provider,
+                    },
+                    detail: options?.detail ?? 3,
+                }
+            }
+        }));
+    }
+
+    loadAlphaFoldDb(afdb: string) {
+        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'alphafolddb' as const,
+                params: {
+                    id: afdb,
+                    options: {
+                        ...params.source.params.options,
+                        representation: 'preset-structure-representation-ma-quality-assessment-plddt'
+                    },
+                }
+            }
+        }));
+    }
+
+    loadModelArchive(id: string) {
+        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'modelarchive' as const,
+                params: {
+                    id,
+                    options: params.source.params.options,
+                }
+            }
+        }));
+    }
+
+    /**
+     * @example Load X-ray density from volume server
+        viewer.loadVolumeFromUrl({
+            url: 'https://www.ebi.ac.uk/pdbe/densities/x-ray/1tqn/cell?detail=3',
+            format: 'dscif',
+            isBinary: true
+        }, [{
+            type: 'relative',
+            value: 1.5,
+            color: 0x3362B2
+        }, {
+            type: 'relative',
+            value: 3,
+            color: 0x33BB33,
+            volumeIndex: 1
+        }, {
+            type: 'relative',
+            value: -3,
+            color: 0xBB3333,
+            volumeIndex: 1
+        }], {
+            entryId: ['2FO-FC', 'FO-FC'],
+            isLazy: true
+        });
+     * *********************
+     * @example Load EM density from volume server
+        viewer.loadVolumeFromUrl({
+            url: 'https://maps.rcsb.org/em/emd-30210/cell?detail=6',
+            format: 'dscif',
+            isBinary: true
+        }, [{
+            type: 'relative',
+            value: 1,
+            color: 0x3377aa
+        }], {
+            entryId: 'EMD-30210',
+            isLazy: true
+        });
+     */
+    async loadVolumeFromUrl({ url, format, isBinary }: { url: string, format: BuildInVolumeFormat, isBinary: boolean }, isovalues: VolumeIsovalueInfo[], options?: { entryId?: string | string[], isLazy?: boolean }) {
+        const plugin = this.plugin;
+
+        if (!plugin.dataFormats.get(format)) {
+            throw new Error(`Unknown density format: ${format}`);
+        }
+
+        if (options?.isLazy) {
+            const update = this.plugin.build();
+            update.toRoot().apply(StateTransforms.Data.LazyVolume, {
+                url,
+                format,
+                entryId: options?.entryId,
+                isBinary,
+                isovalues: isovalues.map(v => ({ alpha: 1, volumeIndex: 0, ...v }))
+            });
+            return update.commit();
+        }
+
+        return plugin.dataTransaction(async () => {
+            const data = await plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
+
+            const parsed = await plugin.dataFormats.get(format)!.parse(plugin, data, { entryId: options?.entryId });
+            const firstVolume = (parsed.volume || parsed.volumes[0]) as StateObjectSelector<PluginStateObject.Volume.Data>;
+            if (!firstVolume?.isOk) throw new Error('Failed to parse any volume.');
+
+            const repr = plugin.build();
+            for (const iso of isovalues) {
+                const volume: StateObjectSelector<PluginStateObject.Volume.Data> = parsed.volumes?.[iso.volumeIndex ?? 0] ?? parsed.volume;
+                const volumeData = volume.cell!.obj!.data;
+                repr
+                    .to(volume)
+                    .apply(StateTransforms.Representation.VolumeRepresentation3D, createVolumeRepresentationParams(this.plugin, firstVolume.data!, {
+                        type: 'isosurface',
+                        typeParams: { alpha: iso.alpha ?? 1, isoValue: Volume.adjustedIsoValue(volumeData, iso.value, iso.type) },
+                        color: 'uniform',
+                        colorParams: { value: iso.color }
+                    }));
+            }
+
+            await repr.commit();
+        });
+    }
+
+    /**
+     * @example
+     *  viewer.loadTrajectory({
+     *      model: { kind: 'model-url', url: 'villin.gro', format: 'gro' },
+     *      coordinates: { kind: 'coordinates-url', url: 'villin.xtc', format: 'xtc', isBinary: true },
+     *      preset: 'all-models' // or 'default'
+     *  });
+     */
+    async loadTrajectory(params: LoadTrajectoryParams) {
+        const plugin = this.plugin;
+
+        let model: StateObjectSelector, coords: StateObjectSelector;
+
+        if (params.model.kind === 'model-data' || params.model.kind === 'model-url') {
+            const data = params.model.kind === 'model-data'
+                ? await plugin.builders.data.rawData({ data: params.model.data, label: params.modelLabel })
+                : await plugin.builders.data.download({ url: params.model.url, isBinary: params.model.isBinary, label: params.modelLabel });
+
+            const trajectory = await plugin.builders.structure.parseTrajectory(data, params.model.format ?? 'mmcif');
+            model = await plugin.builders.structure.createModel(trajectory);
+        } else {
+            const data = params.model.kind === 'topology-data'
+                ? await plugin.builders.data.rawData({ data: params.model.data, label: params.modelLabel })
+                : await plugin.builders.data.download({ url: params.model.url, isBinary: params.model.isBinary, label: params.modelLabel });
+
+            const provider = plugin.dataFormats.get(params.model.format);
+            model = await provider!.parse(plugin, data);
+        }
+
+        {
+            const data = params.coordinates.kind === 'coordinates-data'
+                ? await plugin.builders.data.rawData({ data: params.coordinates.data, label: params.coordinatesLabel })
+                : await plugin.builders.data.download({ url: params.coordinates.url, isBinary: params.coordinates.isBinary, label: params.coordinatesLabel });
+
+            const provider = plugin.dataFormats.get(params.coordinates.format);
+            coords = await provider!.parse(plugin, data);
+        }
+
+        const trajectory = await plugin.build().toRoot()
+            .apply(TrajectoryFromModelAndCoordinates, {
+                modelRef: model.ref,
+                coordinatesRef: coords.ref
+            }, { dependsOn: [model.ref, coords.ref] })
+            .commit();
+
+        const preset = await plugin.builders.structure.hierarchy.applyPreset(trajectory, params.preset ?? 'default');
+
+        return { model, coords, preset };
+    }
+
+    handleResize() {
+        this.plugin.layout.events.updated.next(void 0);
+    }
+}
+
+export interface LoadStructureOptions {
+    representationParams?: StructureRepresentationPresetProvider.CommonParams
+}
+
+export interface VolumeIsovalueInfo {
+    type: 'absolute' | 'relative',
+    value: number,
+    color: Color,
+    alpha?: number,
+    volumeIndex?: number
+}
+
+export interface LoadTrajectoryParams {
+    model: { kind: 'model-url', url: string, format?: BuiltInTrajectoryFormat /* mmcif */, isBinary?: boolean }
+    | { kind: 'model-data', data: string | number[] | ArrayBuffer | Uint8Array, format?: BuiltInTrajectoryFormat /* mmcif */ }
+    | { kind: 'topology-url', url: string, format: BuiltInTopologyFormat, isBinary?: boolean }
+    | { kind: 'topology-data', data: string | number[] | ArrayBuffer | Uint8Array, format: BuiltInTopologyFormat },
+    modelLabel?: string,
+    coordinates: { kind: 'coordinates-url', url: string, format: BuiltInCoordinatesFormat, isBinary?: boolean }
+    | { kind: 'coordinates-data', data: string | number[] | ArrayBuffer | Uint8Array, format: BuiltInCoordinatesFormat },
+    coordinatesLabel?: string,
+    preset?: keyof PresetTrajectoryHierarchy
+}
+
+export const ViewerAutoPreset = StructureRepresentationPresetProvider({
+    id: 'preset-structure-representation-viewer-auto',
+    display: {
+        name: 'Automatic (w/ Annotation)', group: 'Annotation',
+        description: 'Show standard automatic representation but colored by quality assessment (if available in the model).'
+    },
+    isApplicable(a) {
+        return (
+            !!a.data.models.some(m => QualityAssessment.isApplicable(m, 'pLDDT')) ||
+            !!a.data.models.some(m => QualityAssessment.isApplicable(m, 'qmean'))
+        );
+    },
+    params: () => StructureRepresentationPresetProvider.CommonParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        if (!!structure.models.some(m => QualityAssessment.isApplicable(m, 'pLDDT'))) {
+            return await QualityAssessmentPLDDTPreset.apply(ref, params, plugin);
+        } else if (!!structure.models.some(m => QualityAssessment.isApplicable(m, 'qmean'))) {
+            return await QualityAssessmentQmeanPreset.apply(ref, params, plugin);
+        } else {
+            return await PresetStructureRepresentations.auto.apply(ref, params, plugin);
+        }
+    }
+});
--- a/src/apps/viewer/embedded.html
+++ b/src/apps/viewer/embedded.html
@@ -20,7 +20,7 @@
        <div id="app"></div>
        <script type="text/javascript" src="./molstar.js"></script>
        <script type="text/javascript">
-            var viewer = new molstar.Viewer('app', {
+            molstar.Viewer.create('app', {
                layoutIsExpanded: true,
                layoutShowControls: false,
                layoutShowRemoteState: false,
@@ -34,11 +34,11 @@

                pdbProvider: 'rcsb',
                emdbProvider: 'rcsb',
+            }).then(viewer => {
+                viewer.loadPdb('7bv2');
+                viewer.loadEmdb('EMD-30210', { detail: 6 });
+                // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
            });
-            viewer.loadPdb('7bv2');
-            viewer.loadEmdb('EMD-30210', { detail: 6 });            
-
-            // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
        </script>
    </body>
 </html>
--- a/src/apps/viewer/index.html
+++ b/src/apps/viewer/index.html
@@ -56,7 +56,10 @@
            var pixelScale = getParam('pixel-scale', '[^&]+').trim();
            var pickScale = getParam('pick-scale', '[^&]+').trim();
            var pickPadding = getParam('pick-padding', '[^&]+').trim();
-            var viewer = new molstar.Viewer('app', {
+            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
+            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
+
+            molstar.Viewer.create('app', {
                layoutShowControls: !hideControls,
                viewportShowExpand: false,
                collapseLeftPanel: collapseLeftPanel,
@@ -68,28 +71,37 @@
                pixelScale: parseFloat(pixelScale) || 1,
                pickScale: parseFloat(pickScale) || 0.25,
                pickPadding: isNaN(parseFloat(pickPadding)) ? 1 : parseFloat(pickPadding),
+                enableWboit: disableWboit ? false : void 0, // use default value if disable-wboit is not set
+                preferWebgl1: preferWebgl1,
+            }).then(viewer => {
+                var snapshotId = getParam('snapshot-id', '[^&]+').trim();
+                if (snapshotId) viewer.setRemoteSnapshot(snapshotId);
+
+                var snapshotUrl = getParam('snapshot-url', '[^&]+').trim();
+                var snapshotUrlType = getParam('snapshot-url-type', '[^&]+').toLowerCase().trim() || 'molj';
+                if (snapshotUrl && snapshotUrlType) viewer.loadSnapshotFromUrl(snapshotUrl, snapshotUrlType);
+
+                var structureUrl = getParam('structure-url', '[^&]+').trim();
+                var structureUrlFormat = getParam('structure-url-format', '[a-z]+').toLowerCase().trim();
+                var structureUrlIsBinary = getParam('structure-url-is-binary', '[^&]+').trim() === '1';
+                if (structureUrl) viewer.loadStructureFromUrl(structureUrl, structureUrlFormat, structureUrlIsBinary);
+
+                var pdb = getParam('pdb', '[^&]+').trim();
+                if (pdb) viewer.loadPdb(pdb);
+
+                var pdbDev = getParam('pdb-dev', '[^&]+').trim();
+                if (pdbDev) viewer.loadPdbDev(pdbDev);
+
+                var emdb = getParam('emdb', '[^&]+').trim();
+                if (emdb) viewer.loadEmdb(emdb);
+
+                var afdb = getParam('afdb', '[^&]+').trim();
+                if (afdb) viewer.loadAlphaFoldDb(afdb);
+
+                var modelArchive = getParam('model-archive', '[^&]+').trim();
+                if (modelArchive) viewer.loadModelArchive(modelArchive);
            });
-
-            var snapshotId = getParam('snapshot-id', '[^&]+').trim();
-            if (snapshotId) viewer.setRemoteSnapshot(snapshotId);
-
-            var snapshotUrl = getParam('snapshot-url', '[^&]+').trim();
-            var snapshotUrlType = getParam('snapshot-url-type', '[^&]+').toLowerCase().trim() || 'molj';
-            if (snapshotUrl && snapshotUrlType) viewer.loadSnapshotFromUrl(snapshotUrl, snapshotUrlType);
-
-            var structureUrl = getParam('structure-url', '[^&]+').trim();
-            var structureUrlFormat = getParam('structure-url-format', '[a-z]+').toLowerCase().trim();
-            var structureUrlIsBinary = getParam('structure-url-is-binary', '[^&]+').trim() === '1';
-            if (structureUrl) viewer.loadStructureFromUrl(structureUrl, structureUrlFormat, structureUrlIsBinary);
-
-            var pdb = getParam('pdb', '[^&]+').trim();
-            if (pdb) viewer.loadPdb(pdb);
-
-            var pdbDev = getParam('pdb-dev', '[^&]+').trim();
-            if (pdbDev) viewer.loadPdbDev(pdbDev);
-
-            var emdb = getParam('emdb', '[^&]+').trim();
-            if (emdb) viewer.loadEmdb(emdb);
        </script>
+        <!-- __MOLSTAR_ANALYTICS__ -->
    </body>
 </html>
--- a/src/apps/viewer/index.ts
+++ b/src/apps/viewer/index.ts
@@ -1,412 +1,12 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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 { ANVILMembraneOrientation } from '../../extensions/anvil/behavior';
-import { CellPack } from '../../extensions/cellpack';
-import { DnatcoConfalPyramids } from '../../extensions/dnatco';
-import { G3DFormat, G3dProvider } from '../../extensions/g3d/format';
-import { GeometryExport } from '../../extensions/geo-export';
-import { Mp4Export } from '../../extensions/mp4-export';
-import { PDBeStructureQualityReport } from '../../extensions/pdbe';
-import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
-import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
-import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
-import { PresetTrajectoryHierarchy } from '../../mol-plugin-state/builder/structure/hierarchy-preset';
-import { StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
-import { DataFormatProvider } from '../../mol-plugin-state/formats/provider';
-import { BuildInStructureFormat } from '../../mol-plugin-state/formats/structure';
-import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
-import { BuildInVolumeFormat } from '../../mol-plugin-state/formats/volume';
-import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
-import { PluginStateObject } from '../../mol-plugin-state/objects';
-import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { TrajectoryFromModelAndCoordinates } from '../../mol-plugin-state/transforms/model';
-import { createPlugin } from '../../mol-plugin-ui';
-import { PluginUIContext } from '../../mol-plugin-ui/context';
-import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginConfig } from '../../mol-plugin/config';
-import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
-import { PluginSpec } from '../../mol-plugin/spec';
-import { PluginState } from '../../mol-plugin/state';
-import { StateObjectSelector } from '../../mol-state';
-import { Asset } from '../../mol-util/assets';
-import { Color } from '../../mol-util/color';
-import '../../mol-util/polyfill';
-import { ObjectKeys } from '../../mol-util/type-helpers';
 import './embedded.html';
 import './favicon.ico';
 import './index.html';
-
 require('mol-plugin-ui/skin/light.scss');
-
-export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setDebugMode, setProductionMode } from '../../mol-util/debug';
-
-const CustomFormats = [
-    ['g3d', G3dProvider] as const
-];
-
-const Extensions = {
-    'cellpack': PluginSpec.Behavior(CellPack),
-    'dnatco-confal-pyramids': PluginSpec.Behavior(DnatcoConfalPyramids),
-    'pdbe-structure-quality-report': PluginSpec.Behavior(PDBeStructureQualityReport),
-    'rcsb-assembly-symmetry': PluginSpec.Behavior(RCSBAssemblySymmetry),
-    'rcsb-validation-report': PluginSpec.Behavior(RCSBValidationReport),
-    'anvil-membrane-orientation': PluginSpec.Behavior(ANVILMembraneOrientation),
-    'g3d': PluginSpec.Behavior(G3DFormat),
-    'mp4-export': PluginSpec.Behavior(Mp4Export),
-    'geo-export': PluginSpec.Behavior(GeometryExport)
-};
-
-const DefaultViewerOptions = {
-    customFormats: CustomFormats as [string, DataFormatProvider][],
-    extensions: ObjectKeys(Extensions),
-    layoutIsExpanded: true,
-    layoutShowControls: true,
-    layoutShowRemoteState: true,
-    layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
-    layoutShowSequence: true,
-    layoutShowLog: true,
-    layoutShowLeftPanel: true,
-    collapseLeftPanel: false,
-    collapseRightPanel: false,
-    disableAntialiasing: PluginConfig.General.DisableAntialiasing.defaultValue,
-    pixelScale: PluginConfig.General.PixelScale.defaultValue,
-    pickScale: PluginConfig.General.PickScale.defaultValue,
-    pickPadding: PluginConfig.General.PickPadding.defaultValue,
-    enableWboit: PluginConfig.General.EnableWboit.defaultValue,
-
-    viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
-    viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,
-    viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,
-    viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,
-    viewportShowAnimation: PluginConfig.Viewport.ShowAnimation.defaultValue,
-    pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,
-    volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,
-    volumeStreamingDisabled: !PluginConfig.VolumeStreaming.Enabled.defaultValue,
-    pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,
-    emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
-};
-type ViewerOptions = typeof DefaultViewerOptions;
-
-export class Viewer {
-    plugin: PluginUIContext
-
-    constructor(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) {
-        const o = { ...DefaultViewerOptions, ...options };
-        const defaultSpec = DefaultPluginUISpec();
-
-        const spec: PluginUISpec = {
-            actions: defaultSpec.actions,
-            behaviors: [
-                ...defaultSpec.behaviors,
-                ...o.extensions.map(e => Extensions[e]),
-            ],
-            animations: [...defaultSpec.animations || []],
-            customParamEditors: defaultSpec.customParamEditors,
-            customFormats: o?.customFormats,
-            layout: {
-                initial: {
-                    isExpanded: o.layoutIsExpanded,
-                    showControls: o.layoutShowControls,
-                    controlsDisplay: o.layoutControlsDisplay,
-                    regionState: {
-                        bottom: 'full',
-                        left: o.collapseLeftPanel ? 'collapsed' : 'full',
-                        right: o.collapseRightPanel ? 'hidden' : 'full',
-                        top: 'full',
-                    }
-                },
-            },
-            components: {
-                ...defaultSpec.components,
-                controls: {
-                    ...defaultSpec.components?.controls,
-                    top: o.layoutShowSequence ? undefined : 'none',
-                    bottom: o.layoutShowLog ? undefined : 'none',
-                    left: o.layoutShowLeftPanel ? undefined : 'none',
-                },
-                remoteState: o.layoutShowRemoteState ? 'default' : 'none',
-            },
-            config: [
-                [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],
-                [PluginConfig.General.PixelScale, o.pixelScale],
-                [PluginConfig.General.PickScale, o.pickScale],
-                [PluginConfig.General.PickPadding, o.pickPadding],
-                [PluginConfig.General.EnableWboit, o.enableWboit],
-                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
-                [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
-                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
-                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
-                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
-                [PluginConfig.State.DefaultServer, o.pluginStateServer],
-                [PluginConfig.State.CurrentServer, o.pluginStateServer],
-                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
-                [PluginConfig.VolumeStreaming.Enabled, !o.volumeStreamingDisabled],
-                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
-                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider]
-            ]
-        };
-
-        const element = typeof elementOrId === 'string'
-            ? document.getElementById(elementOrId)
-            : elementOrId;
-        if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
-        this.plugin = createPlugin(element, spec);
-    }
-
-    setRemoteSnapshot(id: string) {
-        const url = `${this.plugin.config.get(PluginConfig.State.CurrentServer)}/get/${id}`;
-        return PluginCommands.State.Snapshots.Fetch(this.plugin, { url });
-    }
-
-    loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
-        return PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
-    }
-
-    loadStructureFromUrl(url: string, format: BuiltInTrajectoryFormat = 'mmcif', isBinary = false, options?: LoadStructureOptions) {
-        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
-        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
-            source: {
-                name: 'url',
-                params: {
-                    url: Asset.Url(url),
-                    format: format as any,
-                    isBinary,
-                    options: { ...params.source.params.options, representationParams: options?.representationParams as any },
-                }
-            }
-        }));
-    }
-
-    async loadAllModelsOrAssemblyFromUrl(url: string, format: BuiltInTrajectoryFormat = 'mmcif', isBinary = false, options?: LoadStructureOptions) {
-        const plugin = this.plugin;
-
-        const data = await plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
-        const trajectory = await plugin.builders.structure.parseTrajectory(data, format);
-
-        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'all-models', { useDefaultIfSingleModel: true, representationPresetParams: options?.representationParams });
-    }
-
-    async loadStructureFromData(data: string | number[], format: BuiltInTrajectoryFormat, options?: { dataLabel?: string }) {
-        const _data = await this.plugin.builders.data.rawData({ data, label: options?.dataLabel });
-        const trajectory = await this.plugin.builders.structure.parseTrajectory(_data, format);
-        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
-    }
-
-    loadPdb(pdb: string, options?: LoadStructureOptions) {
-        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
-        const provider = this.plugin.config.get(PluginConfig.Download.DefaultPdbProvider)!;
-        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
-            source: {
-                name: 'pdb' as const,
-                params: {
-                    provider: {
-                        id: pdb,
-                        server: {
-                            name: provider,
-                            params: PdbDownloadProvider[provider].defaultValue as any
-                        }
-                    },
-                    options: { ...params.source.params.options, representationParams: options?.representationParams as any },
-                }
-            }
-        }));
-    }
-
-    loadPdbDev(pdbDev: string) {
-        const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
-        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
-            source: {
-                name: 'pdb-dev' as const,
-                params: {
-                    provider: {
-                        id: pdbDev,
-                        encoding: 'bcif',
-                    },
-                    options: params.source.params.options,
-                }
-            }
-        }));
-    }
-
-    loadEmdb(emdb: string, options?: { detail?: number }) {
-        const provider = this.plugin.config.get(PluginConfig.Download.DefaultEmdbProvider)!;
-        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadDensity, {
-            source: {
-                name: 'pdb-emd-ds' as const,
-                params: {
-                    provider: {
-                        id: emdb,
-                        server: provider,
-                    },
-                    detail: options?.detail ?? 3,
-                }
-            }
-        }));
-    }
-
-    /**
-     * @example Load X-ray density from volume server
-        viewer.loadVolumeFromUrl({
-            url: 'https://www.ebi.ac.uk/pdbe/densities/x-ray/1tqn/cell?detail=3',
-            format: 'dscif',
-            isBinary: true
-        }, [{
-            type: 'relative',
-            value: 1.5,
-            color: 0x3362B2
-        }, {
-            type: 'relative',
-            value: 3,
-            color: 0x33BB33,
-            volumeIndex: 1
-        }, {
-            type: 'relative',
-            value: -3,
-            color: 0xBB3333,
-            volumeIndex: 1
-        }], {
-            entryId: ['2FO-FC', 'FO-FC'],
-            isLazy: true
-        });
-     * *********************
-     * @example Load EM density from volume server
-        viewer.loadVolumeFromUrl({
-            url: 'https://maps.rcsb.org/em/emd-30210/cell?detail=6',
-            format: 'dscif',
-            isBinary: true
-        }, [{
-            type: 'relative',
-            value: 1,
-            color: 0x3377aa
-        }], {
-            entryId: 'EMD-30210',
-            isLazy: true
-        });
-     */
-    async loadVolumeFromUrl({ url, format, isBinary }: { url: string, format: BuildInVolumeFormat, isBinary: boolean }, isovalues: VolumeIsovalueInfo[], options?: { entryId?: string | string[], isLazy?: boolean }) {
-        const plugin = this.plugin;
-
-        if (!plugin.dataFormats.get(format)) {
-            throw new Error(`Unknown density format: ${format}`);
-        }
-
-        if (options?.isLazy) {
-            const update = this.plugin.build();
-            update.toRoot().apply(StateTransforms.Data.LazyVolume, {
-                url,
-                format,
-                entryId: options?.entryId,
-                isBinary,
-                isovalues: isovalues.map(v => ({ alpha: 1, volumeIndex: 0, ...v }))
-            });
-            return update.commit();
-        }
-
-        return plugin.dataTransaction(async () => {
-            const data = await plugin.builders.data.download({ url, isBinary }, { state: { isGhost: true } });
-
-            const parsed = await plugin.dataFormats.get(format)!.parse(plugin, data, { entryId: options?.entryId });
-            const firstVolume = (parsed.volume || parsed.volumes[0]) as StateObjectSelector<PluginStateObject.Volume.Data>;
-            if (!firstVolume?.isOk) throw new Error('Failed to parse any volume.');
-
-            const repr = plugin.build();
-            for (const iso of isovalues) {
-                repr
-                    .to(parsed.volumes?.[iso.volumeIndex ?? 0] ?? parsed.volume)
-                    .apply(StateTransforms.Representation.VolumeRepresentation3D, createVolumeRepresentationParams(this.plugin, firstVolume.data!, {
-                        type: 'isosurface',
-                        typeParams: { alpha: iso.alpha ?? 1, isoValue: iso.type === 'absolute' ? { kind: 'absolute', absoluteValue: iso.value } : { kind: 'relative', relativeValue: iso.value } },
-                        color: 'uniform',
-                        colorParams: { value: iso.color }
-                    }));
-            }
-
-            await repr.commit();
-        });
-    }
-
-    /**
-     * @example
-     *  viewer.loadTrajectory({
-     *      model: { kind: 'model-url', url: 'villin.gro', format: 'gro' },
-     *      coordinates: { kind: 'coordinates-url', url: 'villin.xtc', format: 'xtc', isBinary: true },
-     *      preset: 'all-models' // or 'default'
-     *  });
-     */
-    async loadTrajectory(params: LoadTrajectoryParams) {
-        const plugin = this.plugin;
-
-        let model: StateObjectSelector, coords: StateObjectSelector;
-
-        if (params.model.kind === 'model-data' || params.model.kind === 'model-url') {
-            const data = params.model.kind === 'model-data'
-                ? await plugin.builders.data.rawData({ data: params.model.data, label: params.modelLabel })
-                : await plugin.builders.data.download({ url: params.model.url, isBinary: params.model.isBinary, label: params.modelLabel });
-
-            const trajectory = await plugin.builders.structure.parseTrajectory(data, params.model.format ?? 'mmcif');
-            model = await plugin.builders.structure.createModel(trajectory);
-        } else {
-            const data = params.model.kind === 'topology-data'
-                ? await plugin.builders.data.rawData({ data: params.model.data, label: params.modelLabel })
-                : await plugin.builders.data.download({ url: params.model.url, isBinary: params.model.isBinary, label: params.modelLabel });
-
-            const provider = plugin.dataFormats.get(params.model.format);
-            model = await provider!.parse(plugin, data);
-        }
-
-        {
-            const data = params.coordinates.kind === 'coordinates-data'
-                ? await plugin.builders.data.rawData({ data: params.coordinates.data, label: params.coordinatesLabel })
-                : await plugin.builders.data.download({ url: params.coordinates.url, isBinary: params.coordinates.isBinary, label: params.coordinatesLabel });
-
-            const provider = plugin.dataFormats.get(params.coordinates.format);
-            coords = await provider!.parse(plugin, data);
-        }
-
-        const trajectory = await plugin.build().toRoot()
-            .apply(TrajectoryFromModelAndCoordinates, {
-                modelRef: model.ref,
-                coordinatesRef: coords.ref
-            }, { dependsOn: [model.ref, coords.ref] })
-            .commit();
-
-        const preset = await plugin.builders.structure.hierarchy.applyPreset(trajectory, params.preset ?? 'default');
-
-        return { model, coords, preset };
-    }
-
-    handleResize() {
-        this.plugin.layout.events.updated.next(void 0);
-    }
-}
-
-export interface LoadStructureOptions {
-    representationParams?: StructureRepresentationPresetProvider.CommonParams
-}
-
-export interface VolumeIsovalueInfo {
-    type: 'absolute' | 'relative',
-    value: number,
-    color: Color,
-    alpha?: number,
-    volumeIndex?: number
-}
-
-export interface LoadTrajectoryParams {
-    model: { kind: 'model-url', url: string, format?: BuiltInTrajectoryFormat /* mmcif */, isBinary?: boolean }
-    | { kind: 'model-data', data: string | number[] | ArrayBuffer | Uint8Array, format?: BuiltInTrajectoryFormat /* mmcif */ }
-    | { kind: 'topology-url', url: string, format: BuildInStructureFormat, isBinary?: boolean }
-    | { kind: 'topology-data', data: string | number[] | ArrayBuffer | Uint8Array, format: BuildInStructureFormat },
-    modelLabel?: string,
-    coordinates: { kind: 'coordinates-url', url: string, format: BuildInStructureFormat, isBinary?: boolean }
-    | { kind: 'coordinates-data', data: string | number[] | ArrayBuffer | Uint8Array, format: BuildInStructureFormat },
-    coordinatesLabel?: string,
-    preset?: keyof PresetTrajectoryHierarchy
-}
+export * from './app';
--- a/src/cli/chem-comp-dict/create-ions.ts
+++ b/src/cli/chem-comp-dict/create-ions.ts
@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Josh McMenemy <josh.mcmenemy@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import * as argparse from 'argparse';
@@ -31,11 +32,11 @@ function extractIonNames(ccd: DatabaseCollection<CCD_Schema>) {

 function writeIonNamesFile(filePath: string, ionNames: string[]) {
    const output = `/**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * Code-generated ion names params file. Names extracted from CCD components.
 *
- * @author molstar/chem-comp-dict/create-table cli
+ * @author molstar/chem-comp-dict/create-ions cli
 */

 export const IonNames = new Set(${JSON.stringify(ionNames).replace(/"/g, "'").replace(/,/g, ', ')});
--- a/src/cli/chem-comp-dict/create-saccharides.ts
+++ b/src/cli/chem-comp-dict/create-saccharides.ts
@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as argparse from 'argparse';
+import * as path from 'path';
+import util from 'util';
+import fs from 'fs';
+require('util.promisify').shim();
+const writeFile = util.promisify(fs.writeFile);
+
+import { DatabaseCollection } from '../../mol-data/db';
+import { CCD_Schema } from '../../mol-io/reader/cif/schema/ccd';
+import { ensureDataAvailable, readCCD } from './util';
+
+function extractSaccharideNames(ccd: DatabaseCollection<CCD_Schema>) {
+    const saccharideNames: string[] = [];
+    for (const k in ccd) {
+        const { chem_comp } = ccd[k];
+        const type = chem_comp.type.value(0).toUpperCase();
+        if (type.includes('SACCHARIDE')) {
+            saccharideNames.push(chem_comp.id.value(0));
+        }
+    }
+    // these are extra saccharides that don't have SACCHARIDE in their type
+    saccharideNames.push(
+        'UMQ', // UNDECYL-MALTOSIDE, via GlyFinder
+        'SQD', // SULFOQUINOVOSYLDIACYLGLYCEROL, via GlyFinder
+    );
+    return saccharideNames;
+}
+
+function writeSaccharideNamesFile(filePath: string, ionNames: string[]) {
+    const output = `/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * Code-generated ion names params file. Names extracted from CCD components.
+ *
+ * @author molstar/cli/chem-comp-dict/create-saccharides
+ */
+
+export const SaccharideNames = new Set(${JSON.stringify(ionNames).replace(/"/g, "'").replace(/,/g, ', ')});
+`;
+    writeFile(filePath, output);
+}
+
+async function run(out: string, forceDownload = false) {
+    await ensureDataAvailable(forceDownload);
+    const ccd = await readCCD();
+    const saccharideNames = extractSaccharideNames(ccd);
+    if (!fs.existsSync(path.dirname(out))) {
+        fs.mkdirSync(path.dirname(out));
+    }
+    writeSaccharideNamesFile(out, saccharideNames);
+}
+
+const parser = new argparse.ArgumentParser({
+    add_help: true,
+    description: 'Extract and save SaccharideNames from CCD.'
+});
+parser.add_argument('out', {
+    help: 'Generated file output path.'
+});
+parser.add_argument('--forceDownload', '-f', {
+    action: 'store_true',
+    help: 'Force download of CCD and PVCD.'
+});
+interface Args {
+    out: string,
+    forceDownload?: boolean,
+}
+const args: Args = parser.parse_args();
+
+run(args.out, args.forceDownload);
--- a/src/cli/cif2bcif/converter.ts
+++ b/src/cli/cif2bcif/converter.ts
@@ -71,7 +71,7 @@ function classify(name: string, field: CifField): CifWriter.Field {
 }

 export function convert(path: string, asText = false, hints?: EncodingStrategyHint[], filter?: string) {
-    return Task.create<Uint8Array>('BinaryCIF', async ctx => {
+    return Task.create<Uint8Array>('Convert CIF', async ctx => {
        const encodingProvider: BinaryEncodingProvider = hints
            ? CifWriter.createEncodingProviderFromJsonConfig(hints)
            : { get: (c, f) => void 0 };
--- a/src/cli/cif2bcif/index.ts
+++ b/src/cli/cif2bcif/index.ts
@@ -18,7 +18,7 @@ async function process(srcPath: string, outPath: string, configPath?: string, fi
    const config = configPath ? JSON.parse(fs.readFileSync(configPath, 'utf8')) : void 0;
    const filter = filterPath ? fs.readFileSync(filterPath, 'utf8') : void 0;

-    const res = await convert(srcPath, false, config, filter);
+    const res = await convert(srcPath, srcPath.toLowerCase().indexOf('.bcif') > 0, config, filter);
    await write(outPath, res);
 }

@@ -38,13 +38,13 @@ function run(args: Args) {

 const parser = new argparse.ArgumentParser({
    add_help: true,
-    description: 'Convert any CIF file to a BCIF file'
+    description: 'Convert any BCIF file to a CIF file or vice versa'
 });
 parser.add_argument('src', {
-    help: 'Source CIF path'
+    help: 'Source file path'
 });
 parser.add_argument('out', {
-    help: 'Output BCIF path'
+    help: 'Output file path'
 });
 parser.add_argument('-c', '--config', {
    help: 'Optional encoding strategy/precision config path',
--- a/src/cli/cifschema/index.ts
+++ b/src/cli/cifschema/index.ts
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * Copyright (c) 2017-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -35,20 +35,16 @@ async function runGenerateSchemaMmcif(name: string, fieldNamesPath: string, type
    const ihmDic = await parseCifText(fs.readFileSync(IHM_DIC_PATH, 'utf8')).run();
    if (ihmDic.isError) throw ihmDic;

-    await ensureCarbBranchDicAvailable();
-    const carbBranchDic = await parseCifText(fs.readFileSync(CARB_BRANCH_DIC_PATH, 'utf8')).run();
-    if (carbBranchDic.isError) throw carbBranchDic;
-
-    await ensureCarbCompDicAvailable();
-    const carbCompDic = await parseCifText(fs.readFileSync(CARB_COMP_DIC_PATH, 'utf8')).run();
-    if (carbCompDic.isError) throw carbCompDic;
+    await ensureMaDicAvailable();
+    const maDic = await parseCifText(fs.readFileSync(MA_DIC_PATH, 'utf8')).run();
+    if (maDic.isError) throw maDic;

    const mmcifDicVersion = getDicVersion(mmcifDic.result.blocks[0]);
    const ihmDicVersion = getDicVersion(ihmDic.result.blocks[0]);
-    const carbDicVersion = 'draft';
-    const version = `Dictionary versions: mmCIF ${mmcifDicVersion}, IHM ${ihmDicVersion}, CARB ${carbDicVersion}.`;
+    const maDicVersion = getDicVersion(maDic.result.blocks[0]);
+    const version = `Dictionary versions: mmCIF ${mmcifDicVersion}, IHM ${ihmDicVersion}, MA ${maDicVersion}.`;

-    const frames: CifFrame[] = [...mmcifDic.result.blocks[0].saveFrames, ...ihmDic.result.blocks[0].saveFrames, ...carbBranchDic.result.blocks[0].saveFrames, ...carbCompDic.result.blocks[0].saveFrames];
+    const frames: CifFrame[] = [...mmcifDic.result.blocks[0].saveFrames, ...ihmDic.result.blocks[0].saveFrames, ...maDic.result.blocks[0].saveFrames];
    const schema = generateSchema(frames);

    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases);
@@ -139,8 +135,7 @@ async function getFieldNamesFilter(fieldNamesPath: string): Promise<Filter> {

 async function ensureMmcifDicAvailable() { await ensureDicAvailable(MMCIF_DIC_PATH, MMCIF_DIC_URL); }
 async function ensureIhmDicAvailable() { await ensureDicAvailable(IHM_DIC_PATH, IHM_DIC_URL); }
-async function ensureCarbBranchDicAvailable() { await ensureDicAvailable(CARB_BRANCH_DIC_PATH, CARB_BRANCH_DIC_URL); }
-async function ensureCarbCompDicAvailable() { await ensureDicAvailable(CARB_COMP_DIC_PATH, CARB_COMP_DIC_URL); }
+async function ensureMaDicAvailable() { await ensureDicAvailable(MA_DIC_PATH, MA_DIC_URL); }
 async function ensureCifCoreDicAvailable() {
    await ensureDicAvailable(CIF_CORE_DIC_PATH, CIF_CORE_DIC_URL);
    await ensureDicAvailable(CIF_CORE_ENUM_PATH, CIF_CORE_ENUM_URL);
@@ -165,10 +160,8 @@ const MMCIF_DIC_PATH = `${DIC_DIR}/mmcif_pdbx_v50.dic`;
 const MMCIF_DIC_URL = 'http://mmcif.wwpdb.org/dictionaries/ascii/mmcif_pdbx_v50.dic';
 const IHM_DIC_PATH = `${DIC_DIR}/ihm-extension.dic`;
 const IHM_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/IHM-dictionary/master/ihm-extension.dic';
-const CARB_BRANCH_DIC_PATH = `${DIC_DIR}/entity_branch-extension.dic`;
-const CARB_BRANCH_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/entity_branch-extension.dic';
-const CARB_COMP_DIC_PATH = `${DIC_DIR}/chem_comp-extension.dic`;
-const CARB_COMP_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/chem_comp-extension.dic';
+const MA_DIC_PATH = `${DIC_DIR}/ma-extension.dic`;
+const MA_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/ModelCIF/master/dist/mmcif_ma.dic';

 const CIF_CORE_DIC_PATH = `${DIC_DIR}/cif_core.dic`;
 const CIF_CORE_DIC_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/cif_core.dic';
--- a/src/cli/cifschema/util/cif-dic.ts
+++ b/src/cli/cifschema/util/cif-dic.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -13,15 +13,17 @@ export function getFieldType(type: string, description: string, values?: string[
    switch (type) {
        // mmCIF
        case 'code':
-        case 'ucode':
        case 'line':
-        case 'uline':
        case 'text':
        case 'char':
-        case 'uchar3':
-        case 'uchar1':
        case 'boolean':
            return values && values.length ? EnumCol(values, 'str', description) : StrCol(description);
+        case 'ucode':
+        case 'uline':
+        case 'uchar3':
+        case 'uchar1':
+            // only force lower-case for enums
+            return values && values.length ? EnumCol(values.map(x => x.toLowerCase()), 'lstr', description) : StrCol(description);
        case 'aliasname':
        case 'name':
        case 'idname':
@@ -49,6 +51,7 @@ export function getFieldType(type: string, description: string, values?: string[
        case 'operation_expression':
        case 'point_symmetry':
        case '4x3_matrix':
+        case '3x4_matrix':
        case '3x4_matrices':
        case 'point_group':
        case 'point_group_helical':
--- a/src/cli/cifschema/util/generate.ts
+++ b/src/cli/cifschema/util/generate.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -10,7 +10,7 @@ import { FieldPath } from '../../../mol-io/reader/cif/schema';

 function header(name: string, info: string, moldataImportPath: string) {
    return `/**
- * Copyright (c) 2017-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * Code-generated '${name}' schema file. ${info}
 *
@@ -35,13 +35,17 @@ function getTypeShorthands(schema: Database, fields?: Filter) {
        const { columns } = schema.tables[table];
        Object.keys(columns).forEach(columnName => {
            if (fields && !fields[table][columnName]) return;
-            types.add(schema.tables[table].columns[columnName].type);
+            const col = schema.tables[table].columns[columnName];
+            if (col.type === 'enum') types.add(col.subType);
+            types.add(col.type);
        });
    });
    const shorthands: string[] = [];
    types.forEach(type => {
        switch (type) {
            case 'str': shorthands.push('const str = Schema.str;'); break;
+            case 'ustr': shorthands.push('const ustr = Schema.ustr;'); break;
+            case 'lstr': shorthands.push('const lstr = Schema.lstr;'); break;
            case 'int': shorthands.push('const int = Schema.int;'); break;
            case 'float': shorthands.push('const float = Schema.float;'); break;
            case 'coord': shorthands.push('const coord = Schema.coord;'); break;
--- a/src/cli/cifschema/util/schema.ts
+++ b/src/cli/cifschema/util/schema.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -29,8 +29,8 @@ export function FloatCol(description: string): FloatCol { return { type: 'float'
 export type CoordCol = { type: 'coord' } & BaseCol
 export function CoordCol(description: string): CoordCol { return { type: 'coord', description }; }

-export type EnumCol = { type: 'enum', subType: 'int' | 'str', values: string[] } & BaseCol
-export function EnumCol(values: string[], subType: 'int' | 'str', description: string): EnumCol {
+export type EnumCol = { type: 'enum', subType: 'int' | 'str' | 'ustr' | 'lstr', values: string[] } & BaseCol
+export function EnumCol(values: string[], subType: 'int' | 'str' | 'ustr' | 'lstr', description: string): EnumCol {
    return { type: 'enum', description, values, subType };
 }

--- a/src/examples/alpha-orbitals/index.html
+++ b/src/examples/alpha-orbitals/index.html
@@ -57,5 +57,6 @@
        <script>
            AlphaOrbitalsExample.init('app')
        </script>
+        <!-- __MOLSTAR_ANALYTICS__ -->
    </body>
 </html>
--- a/src/examples/alpha-orbitals/index.ts
+++ b/src/examples/alpha-orbitals/index.ts
@@ -11,7 +11,7 @@ import { SphericalBasisOrder } from '../../extensions/alpha-orbitals/spherical-f
 import { BasisAndOrbitals, CreateOrbitalDensityVolume, CreateOrbitalRepresentation3D, CreateOrbitalVolume, StaticBasisAndOrbitals } from '../../extensions/alpha-orbitals/transforms';
 import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
-import { createPluginAsync } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
 import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
@@ -54,7 +54,7 @@ export class AlphaOrbitalsExample {

    async init(target: string | HTMLElement) {
        const defaultSpec = DefaultPluginUISpec();
-        this.plugin = await createPluginAsync(typeof target === 'string' ? document.getElementById(target)! : target, {
+        this.plugin = await createPluginUI(typeof target === 'string' ? document.getElementById(target)! : target, {
            ...defaultSpec,
            layout: {
                initial: {
@@ -67,7 +67,7 @@ export class AlphaOrbitalsExample {
            },
            canvas3d: {
                camera: {
-                    helper: { axes: { name: 'off', params: { } } }
+                    helper: { axes: { name: 'off', params: {} } }
                }
            },
            config: [
@@ -80,24 +80,28 @@ export class AlphaOrbitalsExample {

        this.plugin.managers.interactivity.setProps({ granularity: 'element' });

-        if (!canComputeGrid3dOnGPU(this.plugin.canvas3d?.webgl)) {
-            PluginCommands.Toast.Show(this.plugin, {
-                title: 'Error',
-                message: `Browser/device does not support required WebGL extension (OES_texture_float).`
+        this.plugin.behaviors.canvas3d.initialized.subscribe(init => {
+            if (!init) return;
+
+            if (!canComputeGrid3dOnGPU(this.plugin.canvas3d?.webgl)) {
+                PluginCommands.Toast.Show(this.plugin, {
+                    title: 'Error',
+                    message: `Browser/device does not support required WebGL extension (OES_texture_float).`
+                });
+                return;
+            }
+
+            this.load({
+                moleculeSdf: DemoMoleculeSDF,
+                ...DemoOrbitals
            });
-            return;
-        }

-        this.load({
-            moleculeSdf: DemoMoleculeSDF,
-            ...DemoOrbitals
+            mountControls(this, document.getElementById('controls')!);
        });
-
-        mountControls(this, document.getElementById('controls')!);
    }

    readonly params = new BehaviorSubject<ParamDefinition.For<Params>>({} as any);
-    readonly state = new BehaviorSubject<Params>({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: false });
+    readonly state = new BehaviorSubject<Params>({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: true });

    private selectors?: Selectors = void 0;
    private basis?: StateObjectSelector<BasisAndOrbitals> = void 0;
@@ -170,12 +174,11 @@ export class AlphaOrbitalsExample {
        return {
            alpha: 0.85,
            color,
-            directVolume: this.state.value.gpuSurface,
            kind,
            relativeIsovalue: this.state.value.isoValue,
            pickable: false,
            xrayShaded: true,
-            tryUseGpu: false
+            tryUseGpu: true
        };
    }

--- a/src/examples/basic-wrapper/index.html
+++ b/src/examples/basic-wrapper/index.html
@@ -69,8 +69,9 @@
            $('format').value = format;
            $('format').onchange = function (e) { format = e.target.value; }

-            BasicMolStarWrapper.init('app' /** or document.getElementById('app') */);
-            BasicMolStarWrapper.setBackground(0xffffff);
+            BasicMolStarWrapper.init('app' /** or document.getElementById('app') */).then(() => {
+                BasicMolStarWrapper.setBackground(0xffffff);
+            });

            addControl('Load Asym Unit', () => BasicMolStarWrapper.load({ url: url, format: format }));
            addControl('Load Assembly', () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
--- a/src/examples/basic-wrapper/index.ts
+++ b/src/examples/basic-wrapper/index.ts
@@ -9,7 +9,7 @@ import { EmptyLoci } from '../../mol-model/loci';
 import { StructureSelection } from '../../mol-model/structure';
 import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in/model-index';
 import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
-import { createPlugin } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
 import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
@@ -28,8 +28,8 @@ type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: bo
 class BasicWrapper {
    plugin: PluginUIContext;

-    init(target: string | HTMLElement) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
+    async init(target: string | HTMLElement) {
+        this.plugin = await createPluginUI(typeof target === 'string' ? document.getElementById(target)! : target, {
            ...DefaultPluginUISpec(),
            layout: {
                initial: {
@@ -60,7 +60,7 @@ class BasicWrapper {
                params: { id: assemblyId }
            } : {
                name: 'model',
-                params: { }
+                params: {}
            },
            showUnitcell: false,
            representationPreset: 'auto'
@@ -74,12 +74,20 @@ class BasicWrapper {
    toggleSpin() {
        if (!this.plugin.canvas3d) return;

+        const trackball = this.plugin.canvas3d.props.trackball;
        PluginCommands.Canvas3D.SetSettings(this.plugin, {
-            settings: props => {
-                props.trackball.spin = !props.trackball.spin;
+            settings: {
+                trackball: {
+                    ...trackball,
+                    animate: trackball.animate.name === 'spin'
+                        ? { name: 'off', params: {} }
+                        : { name: 'spin', params: { speed: 1 } }
+                }
            }
        });
-        if (!this.plugin.canvas3d.props.trackball.spin) PluginCommands.Camera.Reset(this.plugin, {});
+        if (this.plugin.canvas3d.props.trackball.animate.name !== 'spin') {
+            PluginCommands.Camera.Reset(this.plugin, {});
+        }
    }

    private animateModelIndexTargetFps() {
@@ -95,7 +103,7 @@ class BasicWrapper {
            loop: () => { this.plugin.managers.animation.play(AnimateModelIndex, { duration: { name: 'computed', params: { targetFps: this.animateModelIndexTargetFps() } }, mode: { name: 'loop', params: { direction: 'forward' } } }); },
            stop: () => this.plugin.managers.animation.stop()
        }
-    }
+    };

    coloring = {
        applyStripes: async () => {
@@ -119,7 +127,7 @@ class BasicWrapper {
                }
            });
        }
-    }
+    };

    interactivity = {
        highlightOn: () => {
@@ -137,7 +145,7 @@ class BasicWrapper {
        clearHighlight: () => {
            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: EmptyLoci });
        }
-    }
+    };

    tests = {
        staticSuperposition: async () => {
@@ -168,7 +176,7 @@ class BasicWrapper {
            PluginCommands.Toast.Hide(this.plugin, { key: 'toast-1' });
            PluginCommands.Toast.Hide(this.plugin, { key: 'toast-2' });
        }
-    }
+    };
 }

 (window as any).BasicMolStarWrapper = new BasicWrapper();
--- a/src/examples/lighting/index.html
+++ b/src/examples/lighting/index.html
@@ -45,8 +45,9 @@
        <div id='controls'></div>
        <div id="app"></div>
        <script>
-            LightingDemo.init('app')
-            LightingDemo.load({ url: 'https://models.rcsb.org/4KTC.bcif', assemblyId: '1' }, 5, 1.3)
+            LightingDemo.init('app').then(() => {
+                LightingDemo.load({ url: 'https://models.rcsb.org/4KTC.bcif', assemblyId: '1' }, 5, 1.3);
+            });

            addHeader('Example PDB IDs');
            addControl('4KTC', () => LightingDemo.load({ url: 'https://models.rcsb.org/4KTC.bcif', assemblyId: '1' }, 5, 1.3));
@@ -83,5 +84,6 @@
                $('controls').appendChild(h);
            }
        </script>
+        <!-- __MOLSTAR_ANALYTICS__ -->
    </body>
 </html>
--- a/src/examples/lighting/index.ts
+++ b/src/examples/lighting/index.ts
@@ -1,59 +1,62 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { Canvas3DProps } from '../../mol-canvas3d/canvas3d';
 import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
-import { createPlugin } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
 import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { Asset } from '../../mol-util/assets';
+import { Color } from '../../mol-util/color';
 import './index.html';
 require('mol-plugin-ui/skin/light.scss');

 type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }

-type _Preset = Pick<Canvas3DProps, 'multiSample' | 'postprocessing' | 'renderer'>
+type _Preset = Pick<Canvas3DProps, 'postprocessing' | 'renderer'>
 type Preset = { [K in keyof _Preset]: Partial<_Preset[K]> }

 const Canvas3DPresets = {
-    illustrative: <Preset> {
-        multiSample: {
-            mode: 'temporal' as Canvas3DProps['multiSample']['mode']
-        },
-        postprocessing: {
-            occlusion: { name: 'on', params: { samples: 32, radius: 6, bias: 1.4, blurKernelSize: 15 } },
-            outline: { name: 'on', params: { scale: 1, threshold: 0.1 } }
-        },
-        renderer: {
-            style: { name: 'flat', params: {} }
+    illustrative: {
+        canvas3d: <Preset>{
+            postprocessing: {
+                occlusion: { name: 'on', params: { samples: 32, radius: 6, bias: 1.4, blurKernelSize: 15, resolutionScale: 1 } },
+                outline: { name: 'on', params: { scale: 1, threshold: 0.33, color: Color(0x000000) } }
+            },
+            renderer: {
+                ambientIntensity: 1.0,
+                light: []
+            }
        }
    },
-    occlusion: <Preset> {
-        multiSample: {
-            mode: 'temporal' as Canvas3DProps['multiSample']['mode']
-        },
-        postprocessing: {
-            occlusion: { name: 'on', params: { samples: 32, radius: 6, bias: 1.4, blurKernelSize: 15 } },
-            outline: { name: 'off', params: { } }
-        },
-        renderer: {
-            style: { name: 'matte', params: {} }
+    occlusion: {
+        canvas3d: <Preset>{
+            postprocessing: {
+                occlusion: { name: 'on', params: { samples: 32, radius: 6, bias: 1.4, blurKernelSize: 15, resolutionScale: 1 } },
+                outline: { name: 'off', params: {} }
+            },
+            renderer: {
+                ambientIntensity: 0.4,
+                light: [{ inclination: 180, azimuth: 0, color: Color.fromNormalizedRgb(1.0, 1.0, 1.0),
+                    intensity: 0.6 }]
+            }
        }
    },
-    standard: <Preset> {
-        multiSample: {
-            mode: 'off' as Canvas3DProps['multiSample']['mode']
-        },
-        postprocessing: {
-            occlusion: { name: 'off', params: { } },
-            outline: { name: 'off', params: { } }
-        },
-        renderer: {
-            style: { name: 'matte', params: {} }
+    standard: {
+        canvas3d: <Preset>{
+            postprocessing: {
+                occlusion: { name: 'off', params: {} },
+                outline: { name: 'off', params: {} }
+            },
+            renderer: {
+                ambientIntensity: 0.4,
+                light: [{ inclination: 180, azimuth: 0, color: Color.fromNormalizedRgb(1.0, 1.0, 1.0),
+                    intensity: 0.6 }]
+            }
        }
    }
 };
@@ -68,8 +71,8 @@ class LightingDemo {
    private bias = 1.1;
    private preset: Canvas3DPreset = 'illustrative';

-    init(target: string | HTMLElement) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
+    async init(target: string | HTMLElement) {
+        this.plugin = await createPluginUI(typeof target === 'string' ? document.getElementById(target)! : target, {
            ...DefaultPluginUISpec(),
            layout: {
                initial: {
@@ -87,25 +90,23 @@ class LightingDemo {

    setPreset(preset: Canvas3DPreset) {
        const props = Canvas3DPresets[preset];
-        if (props.postprocessing.occlusion?.name === 'on') {
-            props.postprocessing.occlusion.params.radius = this.radius;
-            props.postprocessing.occlusion.params.bias = this.bias;
+        if (props.canvas3d.postprocessing.occlusion?.name === 'on') {
+            props.canvas3d.postprocessing.occlusion.params.radius = this.radius;
+            props.canvas3d.postprocessing.occlusion.params.bias = this.bias;
        }
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: {
-            ...props,
-            multiSample: {
-                ...this.plugin.canvas3d!.props.multiSample,
-                ...props.multiSample
-            },
-            renderer: {
-                ...this.plugin.canvas3d!.props.renderer,
-                ...props.renderer
-            },
-            postprocessing: {
-                ...this.plugin.canvas3d!.props.postprocessing,
-                ...props.postprocessing
-            },
-        } });
+        PluginCommands.Canvas3D.SetSettings(this.plugin, {
+            settings: {
+                ...props,
+                renderer: {
+                    ...this.plugin.canvas3d!.props.renderer,
+                    ...props.canvas3d.renderer
+                },
+                postprocessing: {
+                    ...this.plugin.canvas3d!.props.postprocessing,
+                    ...props.canvas3d.postprocessing
+                },
+            }
+        });
    }

    async load({ url, format = 'mmcif', isBinary = true, assemblyId = '' }: LoadParams, radius: number, bias: number) {
@@ -114,7 +115,7 @@ class LightingDemo {
        const data = await this.plugin.builders.data.download({ url: Asset.Url(url), isBinary }, { state: { isGhost: true } });
        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format);
        const model = await this.plugin.builders.structure.createModel(trajectory);
-        const structure = await this.plugin.builders.structure.createStructure(model, assemblyId ? { name: 'assembly', params: { id: assemblyId } } : { name: 'model', params: { } });
+        const structure = await this.plugin.builders.structure.createStructure(model, assemblyId ? { name: 'assembly', params: { id: assemblyId } } : { name: 'model', params: {} });

        const polymer = await this.plugin.builders.structure.tryCreateComponentStatic(structure, 'polymer');
        if (polymer) await this.plugin.builders.structure.representation.addRepresentation(polymer, { type: 'spacefill', color: 'illustrative' });
--- a/src/examples/proteopedia-wrapper/index.html
+++ b/src/examples/proteopedia-wrapper/index.html
@@ -103,10 +103,11 @@

            PluginWrapper.init('app' /** or document.getElementById('app') */, {
                customColorList: CustomColors
+            }).then(() => {
+                PluginWrapper.setBackground(0xffffff);
+                loadAndSnapshot({ url: url, format: format, isBinary: isBinary, assemblyId: assemblyId, representationStyle: representationStyle });
+                PluginWrapper.toggleSpin();
            });
-            PluginWrapper.setBackground(0xffffff);
-            loadAndSnapshot({ url: url, format: format, isBinary: isBinary, assemblyId: assemblyId, representationStyle: representationStyle });
-            PluginWrapper.toggleSpin();

            PluginWrapper.events.modelInfo.subscribe(function (info) {
                console.log('Model Info', info);
--- a/src/examples/proteopedia-wrapper/index.ts
+++ b/src/examples/proteopedia-wrapper/index.ts
@@ -10,7 +10,7 @@ import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in/mod
 import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { PluginStateObject, PluginStateObject as PSO } from '../../mol-plugin-state/objects';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { createPlugin } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
 import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { CreateVolumeStreamingInfo, InitVolumeStreaming } from '../../mol-plugin/behavior/dynamic/volume-streaming/transformers';
@@ -43,10 +43,10 @@ class MolStarProteopediaWrapper {

    plugin: PluginUIContext;

-    init(target: string | HTMLElement, options?: {
+    async init(target: string | HTMLElement, options?: {
        customColorList?: number[]
    }) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
+        this.plugin = await createPluginUI(typeof target === 'string' ? document.getElementById(target)! : target, {
            ...DefaultPluginUISpec(),
            animations: [
                AnimateModelIndex
@@ -95,7 +95,7 @@ class MolStarProteopediaWrapper {
                params: { id: assemblyId }
            } : {
                name: 'model' as const,
-                params: { }
+                params: {}
            }
        };

@@ -113,7 +113,7 @@ class MolStarProteopediaWrapper {
        const structure = this.getObj<PluginStateObject.Molecule.Structure>(StateElements.Assembly);
        if (!structure) return;

-        const style = _style || { };
+        const style = _style || {};

        const update = this.state.build();

@@ -229,7 +229,7 @@ class MolStarProteopediaWrapper {
                    params: { id: asmId }
                } : {
                    name: 'model' as const,
-                    params: { }
+                    params: {}
                }
            };
            tree.to(StateElements.Assembly).update(StateTransforms.Model.StructureFromModel, p => ({ ...p, ...props }));
@@ -256,7 +256,16 @@ class MolStarProteopediaWrapper {
    toggleSpin() {
        if (!this.plugin.canvas3d) return;
        const trackball = this.plugin.canvas3d.props.trackball;
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { trackball: { ...trackball, spin: !trackball.spin } } });
+        PluginCommands.Canvas3D.SetSettings(this.plugin, {
+            settings: {
+                trackball: {
+                    ...trackball,
+                    animate: trackball.animate.name === 'spin'
+                        ? { name: 'off', params: {} }
+                        : { name: 'spin', params: { speed: 1 } }
+                }
+            }
+        });
    }

    viewport = {
@@ -269,8 +278,8 @@ class MolStarProteopediaWrapper {

    camera = {
        toggleSpin: () => this.toggleSpin(),
-        resetPosition: () => PluginCommands.Camera.Reset(this.plugin, { })
-    }
+        resetPosition: () => PluginCommands.Camera.Reset(this.plugin, {})
+    };

    private animateModelIndexTargetFps() {
        return Math.max(1, this.animate.modelIndex.targetFps | 0);
@@ -285,7 +294,7 @@ class MolStarProteopediaWrapper {
            loop: () => { this.plugin.managers.animation.play(AnimateModelIndex, { duration: { name: 'computed', params: { targetFps: this.animateModelIndexTargetFps() } }, mode: { name: 'loop', params: { direction: 'forward' } } }); },
            stop: () => this.plugin.managers.animation.stop()
        }
-    }
+    };

    coloring = {
        evolutionaryConservation: async (params?: { sequence?: boolean, het?: boolean, keepStyle?: boolean }) => {
@@ -306,7 +315,7 @@ class MolStarProteopediaWrapper {

            await PluginCommands.State.Update(this.plugin, { state, tree });
        }
-    }
+    };

    private experimentalDataElement?: Element = void 0;
    experimentalData = {
@@ -330,17 +339,17 @@ class MolStarProteopediaWrapper {
                this.experimentalDataElement = void 0;
            }
        }
-    }
+    };

    hetGroups = {
        reset: () => {
            const update = this.state.build().delete(StateElements.HetGroupFocusGroup);
            PluginCommands.State.Update(this.plugin, { state: this.state, tree: update });
-            PluginCommands.Camera.Reset(this.plugin, { });
+            PluginCommands.Camera.Reset(this.plugin, {});
        },
        focusFirst: async (compId: string, options?: { hideLabels: boolean, doNotLabelWaters: boolean }) => {
            if (!this.state.transforms.has(StateElements.Assembly)) return;
-            await PluginCommands.Camera.Reset(this.plugin, { });
+            await PluginCommands.Camera.Reset(this.plugin, {});

            const update = this.state.build();

@@ -397,7 +406,7 @@ class MolStarProteopediaWrapper {
            const snapshot = this.plugin.canvas3d!.camera.getFocus(sphere.center, radius);
            PluginCommands.Camera.SetSnapshot(this.plugin, { snapshot, durationMs: 250 });
        }
-    }
+    };

    snapshot = {
        get: (params?: PluginState.SnapshotParams) => {
@@ -420,7 +429,7 @@ class MolStarProteopediaWrapper {
            }
        }

-    }
+    };
 }

 (window as any).MolStarProteopediaWrapper = MolStarProteopediaWrapper;
--- a/src/extensions/alpha-orbitals/transforms.ts
+++ b/src/extensions/alpha-orbitals/transforms.ts
@@ -166,7 +166,6 @@ export const CreateOrbitalRepresentation3D = PluginStateTransform.BuiltIn({
    from: PluginStateObject.Volume.Data,
    to: PluginStateObject.Volume.Representation3D,
    params: {
-        directVolume: PD.Boolean(false),
        relativeIsovalue: PD.Numeric(1, { min: 0.01, max: 5, step: 0.01 }),
        kind: PD.Select<'positive' | 'negative'>('positive', [['positive', 'Positive'], ['negative', 'Negative']]),
        color: PD.Color(ColorNames.blue),
@@ -217,19 +216,7 @@ function volumeParams(plugin: PluginContext, volume: PluginStateObject.Volume.Da

    const value = isovalues[params.kind];

-    return createVolumeRepresentationParams(plugin, volume.data, params.directVolume ? {
-        type: 'direct-volume',
-        typeParams: {
-            alpha: params.alpha,
-            renderMode: {
-                name: 'isosurface',
-                params: { isoValue: { kind: 'absolute', absoluteValue: (value ?? 1000) * params.relativeIsovalue }, singleLayer: false }
-            },
-            xrayShaded: params.xrayShaded
-        },
-        color: 'uniform',
-        colorParams: { value: params.color }
-    } : {
+    return createVolumeRepresentationParams(plugin, volume.data, {
        type: 'isosurface',
        typeParams: { isoValue: { kind: 'absolute', absoluteValue: (value ?? 1000) * params.relativeIsovalue }, alpha: params.alpha, xrayShaded: params.xrayShaded, tryUseGpu: params.tryUseGpu },
        color: 'uniform',
--- a/src/extensions/anvil/behavior.ts
+++ b/src/extensions/anvil/behavior.ts
@@ -30,7 +30,7 @@ export const ANVILMembraneOrientation = PluginBehavior.create<{ autoAttach: bool
        description: 'Data calculated with ANVIL algorithm.'
    },
    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean }> {
-        private provider = MembraneOrientationProvider
+        private provider = MembraneOrientationProvider;

        register(): void {
            DefaultQueryRuntimeTable.addCustomProp(this.provider.descriptor);
--- a/src/extensions/anvil/representation.ts
+++ b/src/extensions/anvil/representation.ts
@@ -43,9 +43,9 @@ export type BilayerPlanesProps = PD.Values<BilayerPlanesParams>
 const BilayerRimsParams = {
    ...Lines.Params,
    ...SharedParams,
-    lineSizeAttenuation: PD.Boolean(true),
-    linesSize: PD.Numeric(0.3, { min: 0.01, max: 50, step: 0.01 }),
-    dashedLines: PD.Boolean(true),
+    lineSizeAttenuation: PD.Boolean(false),
+    linesSize: PD.Numeric(0.5, { min: 0.01, max: 50, step: 0.01 }),
+    dashedLines: PD.Boolean(false),
 };
 export type BilayerRimsParams = typeof BilayerRimsParams
 export type BilayerRimsProps = PD.Values<BilayerRimsParams>
--- a/src/extensions/cellpack/model.ts
+++ b/src/extensions/cellpack/model.ts
@@ -32,6 +32,7 @@ import { Color } from '../../mol-util/color';
 import { objectForEach } from '../../mol-util/object';
 import { readFromFile } from '../../mol-util/data-source';
 import { ColorNames } from '../../mol-util/color/names';
+import { createBasic } from '../../mol-model-formats/structure/basic/schema';

 function getCellPackModelUrl(fileName: string, baseUrl: string) {
    return `${baseUrl}/results/${fileName}`;
@@ -310,7 +311,8 @@ async function getCurve(plugin: PluginContext, name: string, ingredient: Ingredi
    const cif = getCifCurve(name, transforms, model);
    const curveModelTask = Task.create('Curve Model', async ctx => {
        const format = MmcifFormat.fromFrame(cif);
-        const models = await createModels(format.data.db, format, ctx);
+        const basic = createBasic(format.data.db, true);
+        const models = await createModels(basic, format, ctx);
        return models.representative;
    });

--- a/src/extensions/dnatco/confal-pyramids/behavior.ts
+++ b/src/extensions/dnatco/confal-pyramids/behavior.ts
@@ -66,7 +66,7 @@ export const DnatcoConfalPyramids = PluginBehavior.create<{ autoAttach: boolean,
                /* TODO: Implement this */
                return void 0;
            }
-        }
+        };

        register(): void {
            this.ctx.customModelProperties.register(this.provider, this.params.autoAttach);
--- a/src/extensions/dnatco/confal-pyramids/color.ts
+++ b/src/extensions/dnatco/confal-pyramids/color.ts
@@ -11,149 +11,248 @@ import { Location } from '../../../mol-model/location';
 import { CustomProperty } from '../../../mol-model-props/common/custom-property';
 import { ColorTheme } from '../../../mol-theme/color';
 import { ThemeDataContext } from '../../../mol-theme/theme';
-import { Color } from '../../../mol-util/color';
+import { Color, ColorMap } from '../../../mol-util/color';
+import { getColorMapParams } from '../../../mol-util/color/params';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 import { TableLegend } from '../../../mol-util/legend';
-import { iterableToArray } from '../../../mol-data/util';
+import { ObjectKeys } from '../../../mol-util/type-helpers';

-const DefaultColor = Color(0xCCCCCC);
 const Description = 'Assigns colors to confal pyramids';
+
+const DefaultClassColors = {
+    A: 0xFFC1C1,
+    B: 0xC8CFFF,
+    BII: 0x0059DA,
+    miB: 0x3BE8FB,
+    Z: 0x01F60E,
+    IC: 0xFA5CFB,
+    OPN: 0xE90000,
+    SYN: 0xFFFF01,
+    N: 0xF2F2F2,
+};
 const ErrorColor = Color(0xFFA10A);

-type ConformerClasses = 'A' | 'B' | 'BII' | 'miB' | 'Z' | 'IC' | 'OPN' | 'SYN' | 'N';
+const PyramidsColors = ColorMap({
+    NANT_Upr: DefaultClassColors.N,
+    NANT_Lwr: DefaultClassColors.N,
+    AA00_Upr: DefaultClassColors.A,
+    AA00_Lwr: DefaultClassColors.A,
+    AA02_Upr: DefaultClassColors.A,
+    AA02_Lwr: DefaultClassColors.A,
+    AA03_Upr: DefaultClassColors.A,
+    AA03_Lwr: DefaultClassColors.A,
+    AA04_Upr: DefaultClassColors.A,
+    AA04_Lwr: DefaultClassColors.A,
+    AA08_Upr: DefaultClassColors.A,
+    AA08_Lwr: DefaultClassColors.A,
+    AA09_Upr: DefaultClassColors.A,
+    AA09_Lwr: DefaultClassColors.A,
+    AA01_Upr: DefaultClassColors.A,
+    AA01_Lwr: DefaultClassColors.A,
+    AA05_Upr: DefaultClassColors.A,
+    AA05_Lwr: DefaultClassColors.A,
+    AA06_Upr: DefaultClassColors.A,
+    AA06_Lwr: DefaultClassColors.A,
+    AA10_Upr: DefaultClassColors.A,
+    AA10_Lwr: DefaultClassColors.A,
+    AA11_Upr: DefaultClassColors.A,
+    AA11_Lwr: DefaultClassColors.A,
+    AA07_Upr: DefaultClassColors.A,
+    AA07_Lwr: DefaultClassColors.A,
+    AA12_Upr: DefaultClassColors.A,
+    AA12_Lwr: DefaultClassColors.A,
+    AA13_Upr: DefaultClassColors.A,
+    AA13_Lwr: DefaultClassColors.A,
+    AB01_Upr: DefaultClassColors.A,
+    AB01_Lwr: DefaultClassColors.B,
+    AB02_Upr: DefaultClassColors.A,
+    AB02_Lwr: DefaultClassColors.B,
+    AB03_Upr: DefaultClassColors.A,
+    AB03_Lwr: DefaultClassColors.B,
+    AB04_Upr: DefaultClassColors.A,
+    AB04_Lwr: DefaultClassColors.B,
+    AB05_Upr: DefaultClassColors.A,
+    AB05_Lwr: DefaultClassColors.B,
+    BA01_Upr: DefaultClassColors.B,
+    BA01_Lwr: DefaultClassColors.A,
+    BA05_Upr: DefaultClassColors.B,
+    BA05_Lwr: DefaultClassColors.A,
+    BA09_Upr: DefaultClassColors.B,
+    BA09_Lwr: DefaultClassColors.A,
+    BA08_Upr: DefaultClassColors.BII,
+    BA08_Lwr: DefaultClassColors.A,
+    BA10_Upr: DefaultClassColors.B,
+    BA10_Lwr: DefaultClassColors.A,
+    BA13_Upr: DefaultClassColors.BII,
+    BA13_Lwr: DefaultClassColors.A,
+    BA16_Upr: DefaultClassColors.BII,
+    BA16_Lwr: DefaultClassColors.A,
+    BA17_Upr: DefaultClassColors.BII,
+    BA17_Lwr: DefaultClassColors.A,
+    BB00_Upr: DefaultClassColors.B,
+    BB00_Lwr: DefaultClassColors.B,
+    BB01_Upr: DefaultClassColors.B,
+    BB01_Lwr: DefaultClassColors.B,
+    BB17_Upr: DefaultClassColors.B,
+    BB17_Lwr: DefaultClassColors.B,
+    BB02_Upr: DefaultClassColors.B,
+    BB02_Lwr: DefaultClassColors.B,
+    BB03_Upr: DefaultClassColors.B,
+    BB03_Lwr: DefaultClassColors.B,
+    BB11_Upr: DefaultClassColors.B,
+    BB11_Lwr: DefaultClassColors.B,
+    BB16_Upr: DefaultClassColors.B,
+    BB16_Lwr: DefaultClassColors.B,
+    BB04_Upr: DefaultClassColors.B,
+    BB04_Lwr: DefaultClassColors.BII,
+    BB05_Upr: DefaultClassColors.B,
+    BB05_Lwr: DefaultClassColors.BII,
+    BB07_Upr: DefaultClassColors.BII,
+    BB07_Lwr: DefaultClassColors.BII,
+    BB08_Upr: DefaultClassColors.BII,
+    BB08_Lwr: DefaultClassColors.BII,
+    BB10_Upr: DefaultClassColors.miB,
+    BB10_Lwr: DefaultClassColors.miB,
+    BB12_Upr: DefaultClassColors.miB,
+    BB12_Lwr: DefaultClassColors.miB,
+    BB13_Upr: DefaultClassColors.miB,
+    BB13_Lwr: DefaultClassColors.miB,
+    BB14_Upr: DefaultClassColors.miB,
+    BB14_Lwr: DefaultClassColors.miB,
+    BB15_Upr: DefaultClassColors.miB,
+    BB15_Lwr: DefaultClassColors.miB,
+    BB20_Upr: DefaultClassColors.miB,
+    BB20_Lwr: DefaultClassColors.miB,
+    IC01_Upr: DefaultClassColors.IC,
+    IC01_Lwr: DefaultClassColors.IC,
+    IC02_Upr: DefaultClassColors.IC,
+    IC02_Lwr: DefaultClassColors.IC,
+    IC03_Upr: DefaultClassColors.IC,
+    IC03_Lwr: DefaultClassColors.IC,
+    IC04_Upr: DefaultClassColors.IC,
+    IC04_Lwr: DefaultClassColors.IC,
+    IC05_Upr: DefaultClassColors.IC,
+    IC05_Lwr: DefaultClassColors.IC,
+    IC06_Upr: DefaultClassColors.IC,
+    IC06_Lwr: DefaultClassColors.IC,
+    IC07_Upr: DefaultClassColors.IC,
+    IC07_Lwr: DefaultClassColors.IC,
+    OP01_Upr: DefaultClassColors.OPN,
+    OP01_Lwr: DefaultClassColors.OPN,
+    OP02_Upr: DefaultClassColors.OPN,
+    OP02_Lwr: DefaultClassColors.OPN,
+    OP03_Upr: DefaultClassColors.OPN,
+    OP03_Lwr: DefaultClassColors.OPN,
+    OP04_Upr: DefaultClassColors.OPN,
+    OP04_Lwr: DefaultClassColors.OPN,
+    OP05_Upr: DefaultClassColors.OPN,
+    OP05_Lwr: DefaultClassColors.OPN,
+    OP06_Upr: DefaultClassColors.OPN,
+    OP06_Lwr: DefaultClassColors.OPN,
+    OP07_Upr: DefaultClassColors.OPN,
+    OP07_Lwr: DefaultClassColors.OPN,
+    OP08_Upr: DefaultClassColors.OPN,
+    OP08_Lwr: DefaultClassColors.OPN,
+    OP09_Upr: DefaultClassColors.OPN,
+    OP09_Lwr: DefaultClassColors.OPN,
+    OP10_Upr: DefaultClassColors.OPN,
+    OP10_Lwr: DefaultClassColors.OPN,
+    OP11_Upr: DefaultClassColors.OPN,
+    OP11_Lwr: DefaultClassColors.OPN,
+    OP12_Upr: DefaultClassColors.OPN,
+    OP12_Lwr: DefaultClassColors.OPN,
+    OP13_Upr: DefaultClassColors.OPN,
+    OP13_Lwr: DefaultClassColors.OPN,
+    OP14_Upr: DefaultClassColors.OPN,
+    OP14_Lwr: DefaultClassColors.OPN,
+    OP15_Upr: DefaultClassColors.OPN,
+    OP15_Lwr: DefaultClassColors.OPN,
+    OP16_Upr: DefaultClassColors.OPN,
+    OP16_Lwr: DefaultClassColors.OPN,
+    OP17_Upr: DefaultClassColors.OPN,
+    OP17_Lwr: DefaultClassColors.OPN,
+    OP18_Upr: DefaultClassColors.OPN,
+    OP18_Lwr: DefaultClassColors.OPN,
+    OP19_Upr: DefaultClassColors.OPN,
+    OP19_Lwr: DefaultClassColors.OPN,
+    OP20_Upr: DefaultClassColors.OPN,
+    OP20_Lwr: DefaultClassColors.OPN,
+    OP21_Upr: DefaultClassColors.OPN,
+    OP21_Lwr: DefaultClassColors.OPN,
+    OP22_Upr: DefaultClassColors.OPN,
+    OP22_Lwr: DefaultClassColors.OPN,
+    OP23_Upr: DefaultClassColors.OPN,
+    OP23_Lwr: DefaultClassColors.OPN,
+    OP24_Upr: DefaultClassColors.OPN,
+    OP24_Lwr: DefaultClassColors.OPN,
+    OP25_Upr: DefaultClassColors.OPN,
+    OP25_Lwr: DefaultClassColors.OPN,
+    OP26_Upr: DefaultClassColors.OPN,
+    OP26_Lwr: DefaultClassColors.OPN,
+    OP27_Upr: DefaultClassColors.OPN,
+    OP27_Lwr: DefaultClassColors.OPN,
+    OP28_Upr: DefaultClassColors.OPN,
+    OP28_Lwr: DefaultClassColors.OPN,
+    OP29_Upr: DefaultClassColors.OPN,
+    OP29_Lwr: DefaultClassColors.OPN,
+    OP30_Upr: DefaultClassColors.OPN,
+    OP30_Lwr: DefaultClassColors.OPN,
+    OP31_Upr: DefaultClassColors.OPN,
+    OP31_Lwr: DefaultClassColors.OPN,
+    OPS1_Upr: DefaultClassColors.OPN,
+    OPS1_Lwr: DefaultClassColors.OPN,
+    OP1S_Upr: DefaultClassColors.OPN,
+    OP1S_Lwr: DefaultClassColors.SYN,
+    AAS1_Upr: DefaultClassColors.SYN,
+    AAS1_Lwr: DefaultClassColors.A,
+    AB1S_Upr: DefaultClassColors.A,
+    AB1S_Lwr: DefaultClassColors.SYN,
+    AB2S_Upr: DefaultClassColors.A,
+    AB2S_Lwr: DefaultClassColors.SYN,
+    BB1S_Upr: DefaultClassColors.B,
+    BB1S_Lwr: DefaultClassColors.SYN,
+    BB2S_Upr: DefaultClassColors.B,
+    BB2S_Lwr: DefaultClassColors.SYN,
+    BBS1_Upr: DefaultClassColors.SYN,
+    BBS1_Lwr: DefaultClassColors.B,
+    ZZ01_Upr: DefaultClassColors.Z,
+    ZZ01_Lwr: DefaultClassColors.Z,
+    ZZ02_Upr: DefaultClassColors.Z,
+    ZZ02_Lwr: DefaultClassColors.Z,
+    ZZ1S_Upr: DefaultClassColors.Z,
+    ZZ1S_Lwr: DefaultClassColors.SYN,
+    ZZ2S_Upr: DefaultClassColors.Z,
+    ZZ2S_Lwr: DefaultClassColors.SYN,
+    ZZS1_Upr: DefaultClassColors.SYN,
+    ZZS1_Lwr: DefaultClassColors.Z,
+    ZZS2_Upr: DefaultClassColors.SYN,
+    ZZS2_Lwr: DefaultClassColors.Z,
+});
+type PyramidsColors = typeof PyramidsColors;

-const ColorMapping: ReadonlyMap<ConformerClasses, Color> = new Map([
-    ['A', Color(0xFFC1C1)],
-    ['B', Color(0xC8CFFF)],
-    ['BII', Color(0x0059DA)],
-    ['miB', Color(0x3BE8FB)],
-    ['Z', Color(0x01F60E)],
-    ['IC', Color(0xFA5CFB)],
-    ['OPN', Color(0xE90000)],
-    ['SYN', Color(0xFFFF01)],
-    ['N', Color(0xF2F2F2)],
-]);
+export const ConfalPyramidsColorThemeParams = {
+    colors: PD.MappedStatic('default', {
+        'default': PD.EmptyGroup(),
+        'custom': PD.Group(getColorMapParams(PyramidsColors))
+    }),
+};
+export type ConfalPyramidsColorThemeParams = typeof ConfalPyramidsColorThemeParams;

-const NtCToClasses: ReadonlyMap<string, [ConformerClasses, ConformerClasses]> = new Map([
-    ['NANT', ['N', 'N']],
-    ['AA00', ['A', 'A']],
-    ['AA02', ['A', 'A']],
-    ['AA03', ['A', 'A']],
-    ['AA04', ['A', 'A']],
-    ['AA08', ['A', 'A']],
-    ['AA09', ['A', 'A']],
-    ['AA01', ['A', 'A']],
-    ['AA05', ['A', 'A']],
-    ['AA06', ['A', 'A']],
-    ['AA10', ['A', 'A']],
-    ['AA11', ['A', 'A']],
-    ['AA07', ['A', 'A']],
-    ['AA12', ['A', 'A']],
-    ['AA13', ['A', 'A']],
-    ['AB01', ['A', 'B']],
-    ['AB02', ['A', 'B']],
-    ['AB03', ['A', 'B']],
-    ['AB04', ['A', 'B']],
-    ['AB05', ['A', 'B']],
-    ['BA01', ['B', 'A']],
-    ['BA05', ['B', 'A']],
-    ['BA09', ['B', 'A']],
-    ['BA08', ['BII', 'A']],
-    ['BA10', ['B', 'A']],
-    ['BA13', ['BII', 'A']],
-    ['BA16', ['BII', 'A']],
-    ['BA17', ['BII', 'A']],
-    ['BB00', ['B', 'B']],
-    ['BB01', ['B', 'B']],
-    ['BB17', ['B', 'B']],
-    ['BB02', ['B', 'B']],
-    ['BB03', ['B', 'B']],
-    ['BB11', ['B', 'B']],
-    ['BB16', ['B', 'B']],
-    ['BB04', ['B', 'BII']],
-    ['BB05', ['B', 'BII']],
-    ['BB07', ['BII', 'BII']],
-    ['BB08', ['BII', 'BII']],
-    ['BB10', ['miB', 'miB']],
-    ['BB12', ['miB', 'miB']],
-    ['BB13', ['miB', 'miB']],
-    ['BB14', ['miB', 'miB']],
-    ['BB15', ['miB', 'miB']],
-    ['BB20', ['miB', 'miB']],
-    ['IC01', ['IC', 'IC']],
-    ['IC02', ['IC', 'IC']],
-    ['IC03', ['IC', 'IC']],
-    ['IC04', ['IC', 'IC']],
-    ['IC05', ['IC', 'IC']],
-    ['IC06', ['IC', 'IC']],
-    ['IC07', ['IC', 'IC']],
-    ['OP01', ['OPN', 'OPN']],
-    ['OP02', ['OPN', 'OPN']],
-    ['OP03', ['OPN', 'OPN']],
-    ['OP04', ['OPN', 'OPN']],
-    ['OP05', ['OPN', 'OPN']],
-    ['OP06', ['OPN', 'OPN']],
-    ['OP07', ['OPN', 'OPN']],
-    ['OP08', ['OPN', 'OPN']],
-    ['OP09', ['OPN', 'OPN']],
-    ['OP10', ['OPN', 'OPN']],
-    ['OP11', ['OPN', 'OPN']],
-    ['OP12', ['OPN', 'OPN']],
-    ['OP13', ['OPN', 'OPN']],
-    ['OP14', ['OPN', 'OPN']],
-    ['OP15', ['OPN', 'OPN']],
-    ['OP16', ['OPN', 'OPN']],
-    ['OP17', ['OPN', 'OPN']],
-    ['OP18', ['OPN', 'OPN']],
-    ['OP19', ['OPN', 'OPN']],
-    ['OP20', ['OPN', 'OPN']],
-    ['OP21', ['OPN', 'OPN']],
-    ['OP22', ['OPN', 'OPN']],
-    ['OP23', ['OPN', 'OPN']],
-    ['OP24', ['OPN', 'OPN']],
-    ['OP25', ['OPN', 'OPN']],
-    ['OP26', ['OPN', 'OPN']],
-    ['OP27', ['OPN', 'OPN']],
-    ['OP28', ['OPN', 'OPN']],
-    ['OP29', ['OPN', 'OPN']],
-    ['OP30', ['OPN', 'OPN']],
-    ['OP31', ['OPN', 'OPN']],
-    ['OPS1', ['OPN', 'OPN']],
-    ['OP1S', ['OPN', 'SYN']],
-    ['AAS1', ['SYN', 'A']],
-    ['AB1S', ['A', 'SYN']],
-    ['AB2S', ['A', 'SYN']],
-    ['BB1S', ['B', 'SYN']],
-    ['BB2S', ['B', 'SYN']],
-    ['BBS1', ['SYN', 'B']],
-    ['ZZ01', ['Z', 'Z']],
-    ['ZZ02', ['Z', 'Z']],
-    ['ZZ1S', ['Z', 'SYN']],
-    ['ZZ2S', ['Z', 'SYN']],
-    ['ZZS1', ['SYN', 'Z']],
-    ['ZZS2', ['SYN', 'Z']],
-]);
-
-function getConformerColor(ntc: string, useLower: boolean): Color {
-    const item = NtCToClasses.get(ntc);
-    if (!item) return ErrorColor;
-    return ColorMapping.get(useLower ? item[1] : item[0]) ?? ErrorColor;
-}
-
-export const ConfalPyramidsColorThemeParams = {};
-export type ConfalPyramidsColorThemeParams = typeof ConfalPyramidsColorThemeParams
 export function getConfalPyramidsColorThemeParams(ctx: ThemeDataContext) {
-    return ConfalPyramidsColorThemeParams; // TODO return copy
+    return PD.clone(ConfalPyramidsColorThemeParams);
 }

 export function ConfalPyramidsColorTheme(ctx: ThemeDataContext, props: PD.Values<ConfalPyramidsColorThemeParams>): ColorTheme<ConfalPyramidsColorThemeParams> {
+    const colorMap = props.colors.name === 'default' ? PyramidsColors : props.colors.params;
+
    function color(location: Location, isSecondary: boolean): Color {
        if (CPT.isLocation(location)) {
            const { pyramid, isLower } = location.data;
-            return getConformerColor(pyramid.NtC, isLower);
+            const key = pyramid.NtC + `_${isLower ? 'Lwr' : 'Upr'}` as keyof PyramidsColors;
+            return colorMap[key] ?? ErrorColor;
        }

-        return DefaultColor;
+        return ErrorColor;
    }

    return {
@@ -162,12 +261,7 @@ export function ConfalPyramidsColorTheme(ctx: ThemeDataContext, props: PD.Values
        color,
        props,
        description: Description,
-        legend: TableLegend(iterableToArray(ColorMapping.entries()).map(([conformer, color]) => {
-            return [conformer, color] as [string, Color];
-        }).concat([
-            ['Error', ErrorColor],
-            ['Unknown', DefaultColor]
-        ]))
+        legend: TableLegend(ObjectKeys(colorMap).map(k => [k.replace('_', ' '), colorMap[k]] as [string, Color]).concat([['Error', ErrorColor]])),
    };
 }

--- a/src/extensions/dnatco/confal-pyramids/property.ts
+++ b/src/extensions/dnatco/confal-pyramids/property.ts
@@ -123,10 +123,8 @@ function createPyramidsFromCif(model: Model,

    for (let i = 0; i < _rowCount; i++) {
        const model_num = PDB_model_number.value(i);
-        if (model_num !== model.modelNum) {
+        if (model_num !== model.modelNum)
            hasMultipleModels = true;
-            continue; // We are only interested in data for the current model
-        }

        const { _NtC, _confal_score } = getNtCAndConfalScore(id.value(i), i, stepsSummary);

--- a/src/extensions/dnatco/confal-pyramids/util.ts
+++ b/src/extensions/dnatco/confal-pyramids/util.ts
@@ -7,7 +7,7 @@

 import { ConfalPyramidsProvider } from './property';
 import { ConfalPyramidsTypes as CPT } from './types';
-import { OrderedSet, Segmentation } from '../../../mol-data/int';
+import { Segmentation } from '../../../mol-data/int';
 import { Vec3 } from '../../../mol-math/linear-algebra';
 import { ChainIndex, ElementIndex, ResidueIndex, Structure, StructureElement, StructureProperties, Unit } from '../../../mol-model/structure';

@@ -63,15 +63,12 @@ export namespace ConfalPyramidsUtil {
        return prop.data.hasMultipleModels;
    }

-    function getPossibleAltIdsIndices(eIFirst: ElementIndex, eILast: ElementIndex, structure: Structure, unit: Unit.Atomic): string[] {
-        const loc = StructureElement.Location.create(structure, unit, -1 as ElementIndex);
-
-        const uIFirst = OrderedSet.indexOf(unit.elements, eIFirst);
-        const uILast = OrderedSet.indexOf(unit.elements, eILast);
-
+    function getPossibleAltIds(residue: Residue, structure: Structure, unit: Unit.Atomic): string[] {
        const possibleAltIds: string[] = [];
-        for (let uI = uIFirst; uI <= uILast; uI++) {
-            loc.element = unit.elements[uI];
+
+        const loc = StructureElement.Location.create(structure, unit, -1 as ElementIndex);
+        for (let rI = residue.start; rI <= residue.end - 1; rI++) {
+            loc.element = unit.elements[rI];
            const altId = StructureProperties.atom.label_alt_id(loc);
            if (altId !== '' && !possibleAltIds.includes(altId)) possibleAltIds.push(altId);
        }
@@ -79,10 +76,6 @@ export namespace ConfalPyramidsUtil {
        return possibleAltIds;
    }

-    function getPossibleAltIdsResidue(residue: Residue, structure: Structure, unit: Unit.Atomic): string[] {
-        return getPossibleAltIdsIndices(unit.elements[residue.start], unit.elements[residue.end - 1], structure, unit);
-    }
-
    class Utility {
        protected getPyramidByName(name: string): { pyramid: CPT.Pyramid | undefined, index: number } {
            const index = this.data.names.get(name);
@@ -114,7 +107,7 @@ export namespace ConfalPyramidsUtil {
            this.modelNum = unit.model.modelNum;
        }

-        protected readonly data: CPT.PyramidsData
+        protected readonly data: CPT.PyramidsData;
        protected readonly hasMultipleModels: boolean;
        protected readonly entryId: string;
        protected readonly modelNum: number;
@@ -122,19 +115,22 @@ export namespace ConfalPyramidsUtil {

    export class UnitWalker extends Utility {
        private getAtomIndices(names: string[], residue: Residue): ElementIndex[] {
-            let rI = residue.start;
-            const rILast = residue.end - 1;
            const indices: ElementIndex[] = [];

-            for (; rI !== rILast; rI++) {
-                const eI = this.unit.elements[rI];
-                const loc = StructureElement.Location.create(this.structure, this.unit, eI);
+            const loc = StructureElement.Location.create(this.structure, this.unit, -1 as ElementIndex);
+            for (let rI = residue.start; rI <= residue.end - 1; rI++) {
+                loc.element = this.unit.elements[rI];
                const thisName = StructureProperties.atom.label_atom_id(loc);
-                if (names.includes(thisName)) indices.push(eI);
+                if (names.includes(thisName)) indices.push(loc.element);
            }

-            if (indices.length === 0)
-                throw new Error(`Element ${name} not found on residue ${residue.index}`);
+            if (indices.length === 0) {
+                let namesStr = '';
+                for (const n of names)
+                    namesStr += `${n} `;
+
+                throw new Error(`Element [${namesStr}] not found on residue ${residue.index}`);
+            }

            return indices;
        }
@@ -257,12 +253,12 @@ export namespace ConfalPyramidsUtil {
        }

        private step(residue: Residue): { firstAtoms: FirstResidueAtoms[], secondAtoms: SecondResidueAtoms[] } {
-            const firstPossibleAltIds = getPossibleAltIdsResidue(residue, this.structure, this.unit);
+            const firstPossibleAltIds = getPossibleAltIds(residue, this.structure, this.unit);
            const firstAtoms = this.processFirstResidue(residue, firstPossibleAltIds);

            residue = this.residueIt.move();

-            const secondPossibleAltIds = getPossibleAltIdsResidue(residue, this.structure, this.unit);
+            const secondPossibleAltIds = getPossibleAltIds(residue, this.structure, this.unit);
            const secondAtoms = this.processSecondResidue(residue, secondPossibleAltIds);

            return { firstAtoms, secondAtoms };
--- a/src/extensions/geo-export/controls.ts
+++ b/src/extensions/geo-export/controls.ts
@@ -29,7 +29,7 @@ export const GeometryParams = {
 export class GeometryControls extends PluginComponent {
    readonly behaviors = {
        params: this.ev.behavior<PD.Values<typeof GeometryParams>>(PD.getDefaultValues(GeometryParams))
-    }
+    };

    private getFilename() {
        const models = this.plugin.state.data.select(StateSelection.Generators.rootsOfType(PluginStateObject.Molecule.Model)).map(s => s.obj!.data);
--- a/src/extensions/geo-export/mesh-exporter.ts
+++ b/src/extensions/geo-export/mesh-exporter.ts
@@ -25,7 +25,7 @@ import { sizeDataFactor } from '../../mol-geo/geometry/size-data';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { RuntimeContext } from '../../mol-task';
 import { Color } from '../../mol-util/color/color';
-import { decodeFloatRGB } from '../../mol-util/float-packing';
+import { unpackRGBToInt } from '../../mol-util/number-packing';
 import { RenderObjectExporter, RenderObjectExportData } from './render-object-exporter';
 import { readAlphaTexture, readTexture } from '../../mol-gl/compute/util';

@@ -65,7 +65,7 @@ export abstract class MeshExporter<D extends RenderObjectExportData> implements
        const r = tSize.array[i * 3];
        const g = tSize.array[i * 3 + 1];
        const b = tSize.array[i * 3 + 2];
-        return decodeFloatRGB(r, g, b) / sizeDataFactor;
+        return unpackRGBToInt(r, g, b) / sizeDataFactor;
    }

    private static getSize(values: BaseValues & SizeValues, instanceIndex: number, group: number): number {
@@ -95,9 +95,9 @@ export abstract class MeshExporter<D extends RenderObjectExportData> implements
        const g = groups[i4 + 1];
        const b = groups[i4 + 2];
        if (groups instanceof Float32Array) {
-            return decodeFloatRGB(r * 255 + 0.5, g * 255 + 0.5, b * 255 + 0.5);
+            return unpackRGBToInt(r * 255 + 0.5, g * 255 + 0.5, b * 255 + 0.5);
        }
-        return decodeFloatRGB(r, g, b);
+        return unpackRGBToInt(r, g, b);
    }

    protected static getInterpolatedColors(webgl: WebGLContext, input: { vertices: Float32Array, vertexCount: number, values: BaseValues, stride: 3 | 4, colorType: 'volume' | 'volumeInstance' }) {
--- a/src/extensions/geo-export/obj-exporter.ts
+++ b/src/extensions/geo-export/obj-exporter.ts
@@ -145,7 +145,7 @@ export class ObjExporter extends MeshExporter<ObjData> {
                const color = ObjExporter.getColor(v, geoData, interpolatedColors, interpolatedOverpaint);
                Color.toArray(color, quantizedColors, i);
            }
-            ObjExporter.quantizeColors(quantizedColors, mesh!.vertexCount);
+            ObjExporter.quantizeColors(quantizedColors, vertexCount);

            // face
            for (let i = 0; i < drawCount; i += 3) {
--- a/src/extensions/geo-export/ui.tsx
+++ b/src/extensions/geo-export/ui.tsx
@@ -85,7 +85,7 @@ export class GeometryExporterUI extends CollapsableControls<{}, State> {
        } finally {
            this.setState({ busy: false });
        }
-    }
+    };

    viewInAR = async () => {
        try {
@@ -104,5 +104,5 @@ export class GeometryExporterUI extends CollapsableControls<{}, State> {
        } finally {
            this.setState({ busy: false });
        }
-    }
+    };
 }
--- a/src/extensions/geo-export/usdz-exporter.ts
+++ b/src/extensions/geo-export/usdz-exporter.ts
@@ -149,7 +149,7 @@ def Material "material${materialKey}"
                const color = UsdzExporter.getColor(v, geoData, interpolatedColors, interpolatedOverpaint);
                Color.toArray(color, quantizedColors, i);
            }
-            UsdzExporter.quantizeColors(quantizedColors, mesh!.vertexCount);
+            UsdzExporter.quantizeColors(quantizedColors, vertexCount);

            // material
            const faceIndicesByMaterial = new Map<number, number[]>();
--- a/src/extensions/model-archive/quality-assessment/behavior.ts
+++ b/src/extensions/model-archive/quality-assessment/behavior.ts
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { PluginBehavior } from '../../../mol-plugin/behavior/behavior';
+import { Loci } from '../../../mol-model/loci';
+import { DefaultQueryRuntimeTable } from '../../../mol-script/runtime/query/compiler';
+import { PLDDTConfidenceColorThemeProvider } from './color/plddt';
+import { QualityAssessment, QualityAssessmentProvider } from './prop';
+import { StructureSelectionCategory, StructureSelectionQuery } from '../../../mol-plugin-state/helpers/structure-selection-query';
+import { MolScriptBuilder as MS } from '../../../mol-script/language/builder';
+import { OrderedSet } from '../../../mol-data/int';
+import { cantorPairing } from '../../../mol-data/util';
+import { QmeanScoreColorThemeProvider } from './color/qmean';
+import { PresetStructureRepresentations, StructureRepresentationPresetProvider } from '../../../mol-plugin-state/builder/structure/representation-preset';
+import { StateObjectRef } from '../../../mol-state';
+
+export const MAQualityAssessment = PluginBehavior.create<{ autoAttach: boolean, showTooltip: boolean }>({
+    name: 'ma-quality-assessment-prop',
+    category: 'custom-props',
+    display: {
+        name: 'Quality Assessment',
+        description: 'Data included in Model Archive files.'
+    },
+    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean, showTooltip: boolean }> {
+        private provider = QualityAssessmentProvider;
+
+        private labelProvider = {
+            label: (loci: Loci): string | undefined => {
+                if (!this.params.showTooltip) return;
+                return [
+                    plddtLabel(loci),
+                    qmeanLabel(loci),
+                ].filter(l => !!l).join('</br>');
+            }
+        };
+
+        register(): void {
+            DefaultQueryRuntimeTable.addCustomProp(this.provider.descriptor);
+
+            this.ctx.customModelProperties.register(this.provider, this.params.autoAttach);
+
+            this.ctx.managers.lociLabels.addProvider(this.labelProvider);
+
+            this.ctx.representation.structure.themes.colorThemeRegistry.add(PLDDTConfidenceColorThemeProvider);
+            this.ctx.representation.structure.themes.colorThemeRegistry.add(QmeanScoreColorThemeProvider);
+
+            this.ctx.query.structure.registry.add(confidentPLDDT);
+
+            this.ctx.builders.structure.representation.registerPreset(QualityAssessmentPLDDTPreset);
+            this.ctx.builders.structure.representation.registerPreset(QualityAssessmentQmeanPreset);
+        }
+
+        update(p: { autoAttach: boolean, showTooltip: boolean }) {
+            const updated = this.params.autoAttach !== p.autoAttach;
+            this.params.autoAttach = p.autoAttach;
+            this.params.showTooltip = p.showTooltip;
+            this.ctx.customStructureProperties.setDefaultAutoAttach(this.provider.descriptor.name, this.params.autoAttach);
+            return updated;
+        }
+
+        unregister() {
+            DefaultQueryRuntimeTable.removeCustomProp(this.provider.descriptor);
+
+            this.ctx.customStructureProperties.unregister(this.provider.descriptor.name);
+
+            this.ctx.managers.lociLabels.removeProvider(this.labelProvider);
+
+            this.ctx.representation.structure.themes.colorThemeRegistry.remove(PLDDTConfidenceColorThemeProvider);
+            this.ctx.representation.structure.themes.colorThemeRegistry.remove(QmeanScoreColorThemeProvider);
+
+            this.ctx.query.structure.registry.remove(confidentPLDDT);
+
+            this.ctx.builders.structure.representation.unregisterPreset(QualityAssessmentPLDDTPreset);
+            this.ctx.builders.structure.representation.unregisterPreset(QualityAssessmentQmeanPreset);
+        }
+    },
+    params: () => ({
+        autoAttach: PD.Boolean(false),
+        showTooltip: PD.Boolean(true),
+    })
+});
+
+//
+
+function plddtCategory(score: number) {
+    if (score > 50 && score <= 70) return 'Low';
+    if (score > 70 && score <= 90) return 'Confident';
+    if (score > 90) return 'Very high';
+    return 'Very low';
+}
+
+function plddtLabel(loci: Loci): string | undefined {
+    return metricLabel(loci, 'pLDDT', (scoreAvg: number, countInfo: string) => `pLDDT Score ${countInfo}: ${scoreAvg.toFixed(2)} <small>(${plddtCategory(scoreAvg)})</small>`);
+}
+
+function qmeanLabel(loci: Loci): string | undefined {
+    return metricLabel(loci, 'qmean', (scoreAvg: number, countInfo: string) => `QMEAN Score ${countInfo}: ${scoreAvg.toFixed(2)}`);
+}
+
+function metricLabel(loci: Loci, name: 'qmean' | 'pLDDT', label: (scoreAvg: number, countInfo: string) => string): string | undefined {
+    if (loci.kind === 'element-loci') {
+        if (loci.elements.length === 0) return;
+
+        const seen = new Set<number>();
+        const scoreSeen = new Set<number>();
+        let scoreSum = 0;
+
+        for (const { indices, unit } of loci.elements) {
+            const metric = QualityAssessmentProvider.get(unit.model).value?.[name];
+            if (!metric) continue;
+
+            const residueIndex = unit.model.atomicHierarchy.residueAtomSegments.index;
+            const { elements } = unit;
+
+            OrderedSet.forEach(indices, idx => {
+                const eI = elements[idx];
+                const rI = residueIndex[eI];
+
+                const residueKey = cantorPairing(rI, unit.id);
+                if (!seen.has(residueKey)) {
+                    const score = metric.get(residueIndex[eI]) ?? -1;
+                    if (score !== -1) {
+                        scoreSum += score;
+                        scoreSeen.add(residueKey);
+                    }
+                    seen.add(residueKey);
+                }
+            });
+        }
+
+        if (seen.size === 0) return;
+
+        const summary: string[] = [];
+
+        if (scoreSeen.size) {
+            const countInfo = `<small>(${scoreSeen.size} ${scoreSeen.size > 1 ? 'Residues avg.' : 'Residue'})</small>`;
+            const scoreAvg = scoreSum / scoreSeen.size;
+            summary.push(label(scoreAvg, countInfo));
+        }
+
+        if (summary.length) {
+            return summary.join('</br>');
+        }
+    }
+}
+
+//
+
+const confidentPLDDT = StructureSelectionQuery('Confident pLDDT (> 70)', MS.struct.modifier.union([
+    MS.struct.modifier.wholeResidues([
+        MS.struct.modifier.union([
+            MS.struct.generator.atomGroups({
+                'chain-test': MS.core.rel.eq([MS.ammp('objectPrimitive'), 'atomistic']),
+                'residue-test': MS.core.rel.gr([QualityAssessment.symbols.pLDDT.symbol(), 70]),
+            })
+        ])
+    ])
+]), {
+    description: 'Select residues with a pLDDT > 70 (confident).',
+    category: StructureSelectionCategory.Validation,
+    ensureCustomProperties: async (ctx, structure) => {
+        for (const m of structure.models) {
+            await QualityAssessmentProvider.attach(ctx, m, void 0, true);
+        }
+    }
+});
+
+//
+
+export const QualityAssessmentPLDDTPreset = StructureRepresentationPresetProvider({
+    id: 'preset-structure-representation-ma-quality-assessment-plddt',
+    display: {
+        name: 'Quality Assessment (pLDDT)', group: 'Annotation',
+        description: 'Color structure based on pLDDT Confidence.'
+    },
+    isApplicable(a) {
+        return !!a.data.models.some(m => QualityAssessment.isApplicable(m, 'pLDDT'));
+    },
+    params: () => StructureRepresentationPresetProvider.CommonParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        const colorTheme = PLDDTConfidenceColorThemeProvider.name as any;
+        return await PresetStructureRepresentations.auto.apply(ref, { ...params, theme: { globalName: colorTheme, focus: { name: colorTheme } } }, plugin);
+    }
+});
+
+export const QualityAssessmentQmeanPreset = StructureRepresentationPresetProvider({
+    id: 'preset-structure-representation-ma-quality-assessment-qmean',
+    display: {
+        name: 'Quality Assessment (QMEAN)', group: 'Annotation',
+        description: 'Color structure based on QMEAN Score.'
+    },
+    isApplicable(a) {
+        return !!a.data.models.some(m => QualityAssessment.isApplicable(m, 'qmean'));
+    },
+    params: () => StructureRepresentationPresetProvider.CommonParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        const colorTheme = QmeanScoreColorThemeProvider.name as any;
+        return await PresetStructureRepresentations.auto.apply(ref, { ...params, theme: { globalName: colorTheme, focus: { name: colorTheme } } }, plugin);
+    }
+});
--- a/src/extensions/model-archive/quality-assessment/color/plddt.ts
+++ b/src/extensions/model-archive/quality-assessment/color/plddt.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Mandar Deshpande <mandar@ebi.ac.uk>
+ * @author Sebastian Bittrich <sebastian.bittrich@rcsb.org>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { QualityAssessment, QualityAssessmentProvider } from '../prop';
+import { Location } from '../../../../mol-model/location';
+import { Bond, StructureElement, Unit } from '../../../../mol-model/structure';
+import { ColorTheme, LocationColor } from '../../../../mol-theme/color';
+import { ThemeDataContext } from '../../../../mol-theme/theme';
+import { Color } from '../../../../mol-util/color';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { CustomProperty } from '../../../../mol-model-props/common/custom-property';
+import { TableLegend } from '../../../../mol-util/legend';
+
+const DefaultColor = Color(0xaaaaaa);
+const ConfidenceColors = {
+    'No Score': DefaultColor,
+    'Very Low': Color(0xff7d45),
+    'Low': Color(0xffdb13),
+    'Confident': Color(0x65cbf3),
+    'Very High': Color(0x0053d6)
+};
+
+const ConfidenceColorLegend = TableLegend(Object.entries(ConfidenceColors));
+
+export function getPLDDTConfidenceColorThemeParams(ctx: ThemeDataContext) {
+    return {};
+}
+export type PLDDTConfidenceColorThemeParams = ReturnType<typeof getPLDDTConfidenceColorThemeParams>
+
+export function PLDDTConfidenceColorTheme(ctx: ThemeDataContext, props: PD.Values<PLDDTConfidenceColorThemeParams>): ColorTheme<PLDDTConfidenceColorThemeParams> {
+    let color: LocationColor = () => DefaultColor;
+
+    if (ctx.structure) {
+        const l = StructureElement.Location.create(ctx.structure.root);
+
+        const getColor = (location: StructureElement.Location): Color => {
+            const { unit, element } = location;
+            if (!Unit.isAtomic(unit)) return DefaultColor;
+            const qualityAssessment = QualityAssessmentProvider.get(unit.model).value;
+            const score = qualityAssessment?.pLDDT?.get(unit.model.atomicHierarchy.residueAtomSegments.index[element]) ?? -1;
+            if (score < 0) {
+                return DefaultColor;
+            } else if (score <= 50) {
+                return Color(0xff7d45);
+            } else if (score <= 70) {
+                return Color(0xffdb13);
+            } else if (score <= 90) {
+                return Color(0x65cbf3);
+            } else {
+                return Color(0x0053d6);
+            }
+        };
+
+        color = (location: Location) => {
+            if (StructureElement.Location.is(location)) {
+                return getColor(location);
+            } else if (Bond.isLocation(location)) {
+                l.unit = location.aUnit;
+                l.element = location.aUnit.elements[location.aIndex];
+                return getColor(l);
+            }
+            return DefaultColor;
+        };
+    }
+
+    return {
+        factory: PLDDTConfidenceColorTheme,
+        granularity: 'group',
+        preferSmoothing: true,
+        color,
+        props,
+        description: 'Assigns residue colors according to the pLDDT Confidence score.',
+        legend: ConfidenceColorLegend
+    };
+}
+
+export const PLDDTConfidenceColorThemeProvider: ColorTheme.Provider<PLDDTConfidenceColorThemeParams, 'plddt-confidence'> = {
+    name: 'plddt-confidence',
+    label: 'pLDDT Confidence',
+    category: ColorTheme.Category.Validation,
+    factory: PLDDTConfidenceColorTheme,
+    getParams: getPLDDTConfidenceColorThemeParams,
+    defaultValues: PD.getDefaultValues(getPLDDTConfidenceColorThemeParams({})),
+    isApplicable: (ctx: ThemeDataContext) => !!ctx.structure?.models.some(m => QualityAssessment.isApplicable(m, 'pLDDT')),
+    ensureCustomProperties: {
+        attach: async (ctx: CustomProperty.Context, data: ThemeDataContext) => {
+            if (data.structure) {
+                for (const m of data.structure.models) {
+                    await QualityAssessmentProvider.attach(ctx, m, void 0, true);
+                }
+            }
+        },
+        detach: async (data: ThemeDataContext) => {
+            if (data.structure) {
+                for (const m of data.structure.models) {
+                    QualityAssessmentProvider.ref(m, false);
+                }
+            }
+        }
+    }
+};
--- a/src/extensions/model-archive/quality-assessment/color/qmean.ts
+++ b/src/extensions/model-archive/quality-assessment/color/qmean.ts
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { QualityAssessment, QualityAssessmentProvider } from '../prop';
+import { Location } from '../../../../mol-model/location';
+import { Bond, StructureElement, Unit } from '../../../../mol-model/structure';
+import { ColorTheme, LocationColor } from '../../../../mol-theme/color';
+import { ThemeDataContext } from '../../../../mol-theme/theme';
+import { Color, ColorScale } from '../../../../mol-util/color';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { CustomProperty } from '../../../../mol-model-props/common/custom-property';
+
+const DefaultColor = Color(0xaaaaaa);
+
+export function getQmeanScoreColorThemeParams(ctx: ThemeDataContext) {
+    return {};
+}
+export type QmeanScoreColorThemeParams = ReturnType<typeof getQmeanScoreColorThemeParams>
+
+export function QmeanScoreColorTheme(ctx: ThemeDataContext, props: PD.Values<QmeanScoreColorThemeParams>): ColorTheme<QmeanScoreColorThemeParams> {
+    let color: LocationColor = () => DefaultColor;
+
+    const scale = ColorScale.create({
+        domain: [0, 1],
+        listOrName: [
+            [Color(0xFF5000), 0.5], [Color(0x025AFD), 1.0]
+        ]
+    });
+
+    if (ctx.structure) {
+        const l = StructureElement.Location.create(ctx.structure.root);
+
+        const getColor = (location: StructureElement.Location): Color => {
+            const { unit, element } = location;
+            if (!Unit.isAtomic(unit)) return DefaultColor;
+            const qualityAssessment = QualityAssessmentProvider.get(unit.model).value;
+            const score = qualityAssessment?.qmean?.get(unit.model.atomicHierarchy.residueAtomSegments.index[element]) ?? -1;
+            if (score < 0) {
+                return DefaultColor;
+            } else {
+                return scale.color(score);
+            }
+        };
+
+        color = (location: Location) => {
+            if (StructureElement.Location.is(location)) {
+                return getColor(location);
+            } else if (Bond.isLocation(location)) {
+                l.unit = location.aUnit;
+                l.element = location.aUnit.elements[location.aIndex];
+                return getColor(l);
+            }
+            return DefaultColor;
+        };
+    }
+
+    return {
+        factory: QmeanScoreColorTheme,
+        granularity: 'group',
+        preferSmoothing: true,
+        color,
+        props,
+        description: 'Assigns residue colors according to the QMEAN score.',
+        legend: scale.legend
+    };
+}
+
+export const QmeanScoreColorThemeProvider: ColorTheme.Provider<QmeanScoreColorThemeParams, 'qmean-score'> = {
+    name: 'qmean-score',
+    label: 'QMEAN Score',
+    category: ColorTheme.Category.Validation,
+    factory: QmeanScoreColorTheme,
+    getParams: getQmeanScoreColorThemeParams,
+    defaultValues: PD.getDefaultValues(getQmeanScoreColorThemeParams({})),
+    isApplicable: (ctx: ThemeDataContext) => !!ctx.structure?.models.some(m => QualityAssessment.isApplicable(m, 'qmean')),
+    ensureCustomProperties: {
+        attach: async (ctx: CustomProperty.Context, data: ThemeDataContext) => {
+            if (data.structure) {
+                for (const m of data.structure.models) {
+                    await QualityAssessmentProvider.attach(ctx, m, void 0, true);
+                }
+            }
+        },
+        detach: async (data: ThemeDataContext) => {
+            if (data.structure) {
+                for (const m of data.structure.models) {
+                    QualityAssessmentProvider.ref(m, false);
+                }
+            }
+        }
+    }
+};
--- a/src/extensions/model-archive/quality-assessment/prop.ts
+++ b/src/extensions/model-archive/quality-assessment/prop.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { Unit } from '../../../mol-model/structure';
+import { CustomProperty } from '../../../mol-model-props/common/custom-property';
+import { CustomModelProperty } from '../../../mol-model-props/common/custom-model-property';
+import { Model, ResidueIndex } from '../../../mol-model/structure/model';
+import { QuerySymbolRuntime } from '../../../mol-script/runtime/query/compiler';
+import { CustomPropSymbol } from '../../../mol-script/language/symbol';
+import { Type } from '../../../mol-script/language/type';
+import { CustomPropertyDescriptor } from '../../../mol-model/custom-property';
+import { MmcifFormat } from '../../../mol-model-formats/structure/mmcif';
+
+export { QualityAssessment };
+
+interface QualityAssessment {
+    localMetrics: Map<string, Map<ResidueIndex, number>>
+    pLDDT?: Map<ResidueIndex, number>
+    qmean?: Map<ResidueIndex, number>
+}
+
+namespace QualityAssessment {
+    const Empty = {
+        value: {
+            localMetrics: new Map()
+        }
+    };
+
+    export function isApplicable(model?: Model, localMetricName?: 'pLDDT' | 'qmean'): boolean {
+        if (!model || !MmcifFormat.is(model.sourceData)) return false;
+        const { db } = model.sourceData.data;
+        const hasLocalMetric = (
+            db.ma_qa_metric.id.isDefined &&
+            db.ma_qa_metric_local.ordinal_id.isDefined
+        );
+        if (localMetricName && hasLocalMetric) {
+            for (let i = 0, il = db.ma_qa_metric._rowCount; i < il; i++) {
+                if (db.ma_qa_metric.mode.value(i) !== 'local') continue;
+                if (localMetricName === db.ma_qa_metric.name.value(i)) return true;
+            }
+            return false;
+        } else {
+            return hasLocalMetric;
+        }
+    }
+
+    export async function obtain(ctx: CustomProperty.Context, model: Model, props: QualityAssessmentProps): Promise<CustomProperty.Data<QualityAssessment>> {
+        if (!model || !MmcifFormat.is(model.sourceData)) return Empty;
+        const { ma_qa_metric, ma_qa_metric_local } = model.sourceData.data.db;
+        const { model_id, label_asym_id, label_seq_id, metric_id, metric_value } = ma_qa_metric_local;
+        const { index } = model.atomicHierarchy;
+
+        // for simplicity we assume names in ma_qa_metric for mode 'local' are unique
+        const localMetrics = new Map<string, Map<ResidueIndex, number>>();
+        const localNames = new Map<number, string>();
+
+        for (let i = 0, il = ma_qa_metric._rowCount; i < il; i++) {
+            if (ma_qa_metric.mode.value(i) !== 'local') continue;
+
+            const name = ma_qa_metric.name.value(i);
+            if (localMetrics.has(name)) {
+                console.warn(`local ma_qa_metric with name '${name}' already added`);
+                continue;
+            }
+
+            localMetrics.set(name, new Map());
+            localNames.set(ma_qa_metric.id.value(i), name);
+        }
+
+        for (let i = 0, il = ma_qa_metric_local._rowCount; i < il; i++) {
+            if (model_id.value(i) !== model.modelNum) continue;
+
+            const labelAsymId = label_asym_id.value(i);
+            const entityIndex = index.findEntity(labelAsymId);
+            const rI = index.findResidue(model.entities.data.id.value(entityIndex), labelAsymId, label_seq_id.value(i));
+            const name = localNames.get(metric_id.value(i))!;
+            localMetrics.get(name)!.set(rI, metric_value.value(i));
+        }
+
+        return {
+            value: {
+                localMetrics,
+                pLDDT: localMetrics.get('pLDDT'),
+                qmean: localMetrics.get('qmean'),
+            }
+        };
+    }
+
+    export const symbols = {
+        pLDDT: QuerySymbolRuntime.Dynamic(CustomPropSymbol('ma', 'quality-assessment.pLDDT', Type.Num),
+            ctx => {
+                const { unit, element } = ctx.element;
+                if (!Unit.isAtomic(unit)) return -1;
+                const qualityAssessment = QualityAssessmentProvider.get(unit.model).value;
+                return qualityAssessment?.pLDDT?.get(unit.model.atomicHierarchy.residueAtomSegments.index[element]) ?? -1;
+            }
+        ),
+        qmean: QuerySymbolRuntime.Dynamic(CustomPropSymbol('ma', 'quality-assessment.qmean', Type.Num),
+            ctx => {
+                const { unit, element } = ctx.element;
+                if (!Unit.isAtomic(unit)) return -1;
+                const qualityAssessment = QualityAssessmentProvider.get(unit.model).value;
+                return qualityAssessment?.qmean?.get(unit.model.atomicHierarchy.residueAtomSegments.index[element]) ?? -1;
+            }
+        ),
+    };
+}
+
+export const QualityAssessmentParams = { };
+export type QualityAssessmentParams = typeof QualityAssessmentParams
+export type QualityAssessmentProps = PD.Values<QualityAssessmentParams>
+
+export const QualityAssessmentProvider: CustomModelProperty.Provider<QualityAssessmentParams, QualityAssessment> = CustomModelProperty.createProvider({
+    label: 'QualityAssessment',
+    descriptor: CustomPropertyDescriptor({
+        name: 'ma_quality_assessment',
+        symbols: QualityAssessment.symbols
+    }),
+    type: 'static',
+    defaultParams: QualityAssessmentParams,
+    getParams: (data: Model) => QualityAssessmentParams,
+    isApplicable: (data: Model) => QualityAssessment.isApplicable(data),
+    obtain: async (ctx: CustomProperty.Context, data: Model, props: Partial<QualityAssessmentProps>) => {
+        const p = { ...PD.getDefaultValues(QualityAssessmentParams), ...props };
+        return await QualityAssessment.obtain(ctx, data, p);
+    }
+});
--- a/src/extensions/model-export/export.ts
+++ b/src/extensions/model-export/export.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { utf8ByteCount, utf8Write } from '../../mol-io/common/utf8';
+import { to_mmCIF, Unit } from '../../mol-model/structure';
+import { PluginContext } from '../../mol-plugin/context';
+import { Task } from '../../mol-task';
+import { getFormattedTime } from '../../mol-util/date';
+import { download } from '../../mol-util/download';
+import { zip } from '../../mol-util/zip/zip';
+
+export async function exportHierarchy(plugin: PluginContext, options?: { format?: 'cif' | 'bcif' }) {
+    try {
+        await plugin.runTask(_exportHierarchy(plugin, options), { useOverlay: true });
+    } catch (e) {
+        console.error(e);
+        plugin.log.error(`Model export failed. See console for details.`);
+    }
+}
+
+function _exportHierarchy(plugin: PluginContext, options?: { format?: 'cif' | 'bcif' }) {
+    return Task.create('Export', async ctx => {
+        await ctx.update({ message: 'Exporting...', isIndeterminate: true, canAbort: false });
+
+        const format = options?.format ?? 'cif';
+        const { structures } = plugin.managers.structure.hierarchy.current;
+
+        const files: [name: string, data: string | Uint8Array][] = [];
+        const entryMap = new Map<string, number>();
+
+        for (const _s of structures) {
+            const s = _s.transform?.cell.obj?.data ?? _s.cell.obj?.data;
+            if (!s) continue;
+            if (s.models.length > 1) {
+                plugin.log.warn(`[Export] Skipping ${_s.cell.obj?.label}: Multimodel exports not supported.`);
+                continue;
+            }
+            if (s.units.some(u => !Unit.isAtomic(u))) {
+                plugin.log.warn(`[Export] Skipping ${_s.cell.obj?.label}: Non-atomic model exports not supported.`);
+                continue;
+            }
+
+            const name = entryMap.has(s.model.entryId)
+                ? `${s.model.entryId}_${entryMap.get(s.model.entryId)! + 1}.${format}`
+                : `${s.model.entryId}.${format}`;
+            entryMap.set(s.model.entryId, (entryMap.get(s.model.entryId) ?? 0) + 1);
+
+            await ctx.update({ message: `Exporting ${s.model.entryId}...`, isIndeterminate: true, canAbort: false });
+            if (s.elementCount > 100000) {
+                // Give UI chance to update, only needed for larger structures.
+                await new Promise(res => setTimeout(res, 50));
+            }
+
+            try {
+                files.push([name, to_mmCIF(s.model.entryId, s, format === 'bcif', { copyAllCategories: true })]);
+            } catch (e) {
+                if (format === 'cif' && s.elementCount > 2000000) {
+                    plugin.log.warn(`[Export] The structure might be too big to be exported as Text CIF, consider using the BinaryCIF format instead.`);
+                }
+                throw e;
+            }
+        }
+
+        if (files.length === 1) {
+            download(new Blob([files[0][1]]), files[0][0]);
+        } else if (files.length > 1) {
+            const zipData: Record<string, Uint8Array> = {};
+            for (const [fn, data] of files) {
+                if (data instanceof Uint8Array) {
+                    zipData[fn] = data;
+                } else {
+                    const bytes = new Uint8Array(utf8ByteCount(data));
+                    utf8Write(bytes, 0, data);
+                    zipData[fn] = bytes;
+                }
+            }
+            await ctx.update({ message: `Compressing Data...`, isIndeterminate: true, canAbort: false });
+            const buffer = await zip(ctx, zipData);
+            download(new Blob([new Uint8Array(buffer, 0, buffer.byteLength)]), `structures_${getFormattedTime()}.zip`);
+        }
+
+        plugin.log.info(`[Export] Done.`);
+    });
+}
--- a/src/extensions/model-export/index.ts
+++ b/src/extensions/model-export/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { PluginBehavior } from '../../mol-plugin/behavior/behavior';
+import { ModelExportUI } from './ui';
+
+export const ModelExport = PluginBehavior.create<{}>({
+    name: 'extension-model-export',
+    category: 'misc',
+    display: {
+        name: 'Model Export'
+    },
+    ctor: class extends PluginBehavior.Handler<{}> {
+        register(): void {
+            this.ctx.customStructureControls.set('model-export', ModelExportUI as any);
+        }
+
+        update() {
+            return false;
+        }
+
+        unregister() {
+            this.ctx.customStructureControls.delete('model-export');
+        }
+    },
+    params: () => ({})
+});
--- a/src/extensions/model-export/ui.tsx
+++ b/src/extensions/model-export/ui.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { useState } from 'react';
+import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';
+import { Button } from '../../mol-plugin-ui/controls/common';
+import { GetAppSvg } from '../../mol-plugin-ui/controls/icons';
+import { ParameterControls } from '../../mol-plugin-ui/controls/parameters';
+import { useBehavior } from '../../mol-plugin-ui/hooks/use-behavior';
+import { PluginContext } from '../../mol-plugin/context';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { exportHierarchy } from './export';
+
+export class ModelExportUI extends CollapsableControls<{}, {}> {
+    protected defaultState(): CollapsableState {
+        return {
+            header: 'Export Models',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: GetAppSvg }
+        };
+    }
+    protected renderControls(): JSX.Element | null {
+        return <ExportControls plugin={this.plugin} />;
+    }
+}
+
+const Params = {
+    format: PD.Select<'cif' | 'bcif'>('cif', [['cif', 'mmCIF'], ['bcif', 'Binary mmCIF']])
+};
+const DefaultParams = PD.getDefaultValues(Params);
+
+function ExportControls({ plugin }: { plugin: PluginContext }) {
+    const [params, setParams] = useState(DefaultParams);
+    const [exporting, setExporting] = useState(false);
+    useBehavior(plugin.managers.structure.hierarchy.behaviors.selection); // triggers UI update
+    const isBusy = useBehavior(plugin.behaviors.state.isBusy);
+    const hierarchy = plugin.managers.structure.hierarchy.current;
+
+    let label: string = 'Nothing to Export';
+    if (hierarchy.structures.length === 1) {
+        label = 'Export';
+    } if (hierarchy.structures.length > 1) {
+        label = 'Export (as ZIP)';
+    }
+
+    const onExport = async () => {
+        setExporting(true);
+        try {
+            await exportHierarchy(plugin, { format: params.format });
+        } finally {
+            setExporting(false);
+        }
+    };
+
+    return <>
+        <ParameterControls params={Params} values={params} onChangeValues={setParams} isDisabled={isBusy || exporting} />
+        <Button
+            onClick={onExport}
+            style={{ marginTop: 1 }}
+            disabled={isBusy || hierarchy.structures.length === 0 || exporting}
+            commit={hierarchy.structures.length ? 'on' : 'off'}
+        >
+            {label}
+        </Button>
+    </>;
+}
--- a/src/extensions/mp4-export/controls.ts
+++ b/src/extensions/mp4-export/controls.ts
@@ -31,7 +31,7 @@ export class Mp4Controls extends PluginComponent {
        canApply: this.ev.behavior<PluginStateAnimation.CanApply>({ canApply: false }),
        info: this.ev.behavior<Mp4AnimationInfo>({ width: 0, height: 0 }),
        params: this.ev.behavior<PD.Values<typeof Mp4AnimationParams>>(PD.getDefaultValues(Mp4AnimationParams))
-    }
+    };

    setCurrent(name?: string) {
        const anim = this.animations.find(a => a.name === name);
@@ -125,17 +125,20 @@ export class Mp4Controls extends PluginComponent {
        this.subscribe(this.plugin.canvas3d?.resized!, () => this.syncInfo());
        this.subscribe(this.plugin.helpers.viewportScreenshot?.events.previewed!, () => this.syncInfo());

-        this.subscribe(this.plugin.behaviors.state.isBusy, b => {
-            const anim = this.current;
-            if (!b && anim) {
-                this.behaviors.canApply.next(anim.anim.canApply?.(this.plugin) ?? { canApply: true });
-            }
-        });
+        this.subscribe(this.plugin.behaviors.state.isBusy, b => this.updateCanApply(b));
+        this.subscribe(this.plugin.managers.snapshot.events.changed, b => this.updateCanApply(b));

        this.sync();
        this.syncInfo();
    }

+    private updateCanApply(b?: any) {
+        const anim = this.current;
+        if (!b && anim) {
+            this.behaviors.canApply.next(anim.anim.canApply?.(this.plugin) ?? { canApply: true });
+        }
+    }
+
    constructor(private plugin: PluginContext) {
        super();

--- a/src/extensions/mp4-export/encoder.ts
+++ b/src/extensions/mp4-export/encoder.ts
@@ -73,7 +73,7 @@ export async function encodeMp4Animation<A extends PluginStateAnimation>(plugin:
        await plugin.managers.animation.play(params.animation.definition, params.animation.params);
        stoppedAnimation = false;
        for (let i = 0; i <= N; i++) {
-            await loop.tick(i * dt, { isSynchronous: true, manualDraw: true });
+            await loop.tick(i * dt, { isSynchronous: true, animation: { currentFrame: i, frameCount: N }, manualDraw: true });

            const image = params.pass.getImageData(width, height, normalizedViewport);
            encoder.addFrameRgba(image.data);
--- a/src/extensions/mp4-export/ui.tsx
+++ b/src/extensions/mp4-export/ui.tsx
@@ -108,7 +108,7 @@ export class Mp4EncoderUI extends CollapsableControls<{}, State> {

    save = () => {
        download(new Blob([this.state.data!.movie]), this.state.data!.filename);
-    }
+    };

    generate = async () => {
        try {
@@ -119,5 +119,5 @@ export class Mp4EncoderUI extends CollapsableControls<{}, State> {
            console.error(e);
            this.setState({ busy: false });
        }
-    }
+    };
 }
--- a/src/extensions/pdbe/structure-quality-report/behavior.ts
+++ b/src/extensions/pdbe/structure-quality-report/behavior.ts
@@ -21,7 +21,7 @@ export const PDBeStructureQualityReport = PluginBehavior.create<{ autoAttach: bo
    },
    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean, showTooltip: boolean }> {

-        private provider = StructureQualityReportProvider
+        private provider = StructureQualityReportProvider;

        private labelPDBeValidation = {
            label: (loci: Loci): string | undefined => {
@@ -42,7 +42,7 @@ export const PDBeStructureQualityReport = PluginBehavior.create<{ autoAttach: bo
                    default: return void 0;
                }
            }
-        }
+        };

        register(): void {
            this.ctx.customModelProperties.register(this.provider, this.params.autoAttach);
--- a/src/extensions/pdbe/structure-quality-report/prop.ts
+++ b/src/extensions/pdbe/structure-quality-report/prop.ts
@@ -38,7 +38,7 @@ namespace StructureQualityReport {
    }

    export function isApplicable(model?: Model): boolean {
-        return !!model && Model.isFromPdbArchive(model);
+        return !!model && Model.hasPdbId(model);
    }

    export const Schema = {
--- a/src/extensions/rcsb/assembly-symmetry/behavior.ts
+++ b/src/extensions/rcsb/assembly-symmetry/behavior.ts
@@ -27,7 +27,7 @@ export const RCSBAssemblySymmetry = PluginBehavior.create<{ autoAttach: boolean
        description: 'Assembly Symmetry data calculated with BioJava, obtained via RCSB PDB.'
    },
    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean }> {
-        private provider = AssemblySymmetryProvider
+        private provider = AssemblySymmetryProvider;

        register(): void {
            this.ctx.state.data.actions.add(InitAssemblySymmetry3D);
--- a/src/extensions/rcsb/assembly-symmetry/prop.ts
+++ b/src/extensions/rcsb/assembly-symmetry/prop.ts
@@ -53,7 +53,7 @@ export namespace AssemblySymmetry {
    export function isApplicable(structure?: Structure): boolean {
        return (
            !!structure && structure.models.length === 1 &&
-            Model.isFromPdbArchive(structure.models[0]) &&
+            Model.hasPdbId(structure.models[0]) &&
            isBiologicalAssembly(structure)
        );
    }
--- a/src/extensions/rcsb/assembly-symmetry/ui.tsx
+++ b/src/extensions/rcsb/assembly-symmetry/ui.tsx
@@ -118,7 +118,7 @@ export class AssemblySymmetryControls extends CollapsableControls<{}, AssemblySy

    paramsOnChange = (options: AssemblySymmetryProps) => {
        this.updateAssemblySymmetry(options);
-    }
+    };

    get hasAssemblySymmetry3D() {
        return !this.pivot.cell.parent || !!StateSelection.findTagInSubtree(this.pivot.cell.parent.tree, this.pivot.cell.transform.ref, AssemblySymmetry.Tag.Representation);
--- a/src/extensions/rcsb/graphql/types.ts
+++ b/src/extensions/rcsb/graphql/types.ts
@@ -4,7 +4,7 @@ export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-// Generated on 2021-11-25T14:34:23-08:00
+// Generated on 2022-04-30T15:35:08-07:00

 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
@@ -477,6 +477,8 @@ export type ClustersMembers = {
 export type CoreAssembly = {
  /** Get PDB entry that includes this assembly. */
  readonly entry?: Maybe<CoreEntry>;
+  /** Get all pairwise polymer interfaces for this PDB assembly. */
+  readonly interfaces?: Maybe<ReadonlyArray<Maybe<CoreInterface>>>;
  readonly pdbx_struct_assembly?: Maybe<PdbxStructAssembly>;
  readonly pdbx_struct_assembly_auth_evidence?: Maybe<ReadonlyArray<Maybe<PdbxStructAssemblyAuthEvidence>>>;
  readonly pdbx_struct_assembly_gen?: Maybe<ReadonlyArray<Maybe<PdbxStructAssemblyGen>>>;
@@ -657,6 +659,8 @@ export type CoreEntry = {
  readonly em_staining?: Maybe<ReadonlyArray<Maybe<EmStaining>>>;
  readonly em_vitrification?: Maybe<ReadonlyArray<Maybe<EmVitrification>>>;
  readonly entry?: Maybe<Entry>;
+  /** Get all groups for this PDB entry. */
+  readonly entry_groups?: Maybe<ReadonlyArray<Maybe<GroupEntry>>>;
  readonly exptl?: Maybe<ReadonlyArray<Maybe<Exptl>>>;
  readonly exptl_crystal?: Maybe<ReadonlyArray<Maybe<ExptlCrystal>>>;
  readonly exptl_crystal_grow?: Maybe<ReadonlyArray<Maybe<ExptlCrystalGrow>>>;
@@ -701,6 +705,7 @@ export type CoreEntry = {
  readonly rcsb_associated_holdings?: Maybe<CurrentEntry>;
  readonly rcsb_binding_affinity?: Maybe<ReadonlyArray<Maybe<RcsbBindingAffinity>>>;
  readonly rcsb_entry_container_identifiers: RcsbEntryContainerIdentifiers;
+  readonly rcsb_entry_group_membership?: Maybe<ReadonlyArray<Maybe<RcsbEntryGroupMembership>>>;
  readonly rcsb_entry_info: RcsbEntryInfo;
  readonly rcsb_external_references?: Maybe<ReadonlyArray<Maybe<RcsbExternalReferences>>>;
  /**
@@ -724,6 +729,16 @@ export type CoreEntry = {
  readonly symmetry?: Maybe<Symmetry>;
 };

+export type CoreInterface = {
+  readonly rcsb_id: Scalars['String'];
+  readonly rcsb_interface_container_identifiers: RcsbInterfaceContainerIdentifiers;
+  readonly rcsb_interface_info?: Maybe<RcsbInterfaceInfo>;
+  /** List of operations for each interface partner. */
+  readonly rcsb_interface_operator: ReadonlyArray<Maybe<ReadonlyArray<Maybe<ReadonlyArray<Maybe<Scalars['String']>>>>>>;
+  readonly rcsb_interface_partner: ReadonlyArray<Maybe<RcsbInterfacePartner>>;
+  readonly rcsb_latest_revision?: Maybe<RcsbLatestRevision>;
+};
+
 export type CoreNonpolymerEntity = {
  /** Get PDB entry that contains this non-polymer entity. */
  readonly entry?: Maybe<CoreEntry>;
@@ -839,6 +854,8 @@ export type CorePolymerEntity = {
  readonly pdbx_entity_src_syn?: Maybe<ReadonlyArray<Maybe<PdbxEntitySrcSyn>>>;
  /** Get all unique Pfam annotations associated with this molecular entity. */
  readonly pfams?: Maybe<ReadonlyArray<Maybe<CorePfam>>>;
+  /** Get all groups for this PDB entity. */
+  readonly polymer_entity_groups?: Maybe<ReadonlyArray<Maybe<GroupPolymerEntity>>>;
  /** Get all unique polymer instances (chains) for this molecular entity. */
  readonly polymer_entity_instances?: Maybe<ReadonlyArray<Maybe<CorePolymerEntityInstance>>>;
  /** Get a BIRD chemical components described in this molecular entity. */
@@ -875,6 +892,7 @@ export type CorePolymerEntity = {
  readonly rcsb_polymer_entity_container_identifiers: RcsbPolymerEntityContainerIdentifiers;
  readonly rcsb_polymer_entity_feature?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityFeature>>>;
  readonly rcsb_polymer_entity_feature_summary?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityFeatureSummary>>>;
+  readonly rcsb_polymer_entity_group_membership?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityGroupMembership>>>;
  readonly rcsb_polymer_entity_keywords?: Maybe<RcsbPolymerEntityKeywords>;
  readonly rcsb_polymer_entity_name_com?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityNameCom>>>;
  readonly rcsb_polymer_entity_name_sys?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityNameSys>>>;
@@ -3186,6 +3204,88 @@ export type GeneName = {
  readonly value?: Maybe<Scalars['String']>;
 };

+export type GroupEntry = {
+  /** Get provenance associated with this group. */
+  readonly group_provenance?: Maybe<GroupProvenance>;
+  readonly rcsb_group_accession_info?: Maybe<RcsbGroupAccessionInfo>;
+  readonly rcsb_group_container_identifiers: RcsbGroupContainerIdentifiers;
+  readonly rcsb_group_info: RcsbGroupInfo;
+  readonly rcsb_group_related?: Maybe<ReadonlyArray<Maybe<RcsbGroupRelated>>>;
+  readonly rcsb_group_statistics?: Maybe<RcsbGroupStatistics>;
+  /** A unique textual identifier for a group */
+  readonly rcsb_id: Scalars['String'];
+};
+
+export type GroupMembersAlignmentAlignedRegions = {
+  /** Aligned region length */
+  readonly length: Scalars['Int'];
+  /** Entity seqeunce start position */
+  readonly query_begin: Scalars['Int'];
+  /** NCBI sequence start position */
+  readonly target_begin: Scalars['Int'];
+};
+
+export type GroupMembersAlignmentScores = {
+  readonly query_coverage: Scalars['Int'];
+  readonly query_length: Scalars['Int'];
+  readonly target_coverage: Scalars['Int'];
+  readonly target_length: Scalars['Int'];
+};
+
+export type GroupPolymerEntity = {
+  /** Get provenance associated with this group. */
+  readonly group_provenance?: Maybe<GroupProvenance>;
+  readonly rcsb_group_accession_info?: Maybe<RcsbGroupAccessionInfo>;
+  readonly rcsb_group_container_identifiers: RcsbGroupContainerIdentifiers;
+  readonly rcsb_group_info: RcsbGroupInfo;
+  readonly rcsb_group_related?: Maybe<ReadonlyArray<Maybe<RcsbGroupRelated>>>;
+  readonly rcsb_group_statistics?: Maybe<RcsbGroupStatistics>;
+  /** A unique textual identifier for a group */
+  readonly rcsb_id: Scalars['String'];
+  readonly rcsb_polymer_entity_group_members_rankings?: Maybe<ReadonlyArray<Maybe<RcsbPolymerEntityGroupMembersRankings>>>;
+  readonly rcsb_polymer_entity_group_sequence_alignment?: Maybe<RcsbPolymerEntityGroupSequenceAlignment>;
+};
+
+export type GroupProvenance = {
+  readonly rcsb_group_aggregation_method?: Maybe<RcsbGroupAggregationMethod>;
+  readonly rcsb_group_provenance_container_identifiers?: Maybe<RcsbGroupProvenanceContainerIdentifiers>;
+  /** A unique textual identifier for a group provenance */
+  readonly rcsb_id?: Maybe<Scalars['String']>;
+};
+
+export type InterfacePartnerFeatureAdditionalProperties = {
+  /**
+   * The additional property name.
+   *
+   * Allowable values:
+   * TO_BE_DEFINED
+   *
+   */
+  readonly name?: Maybe<Scalars['String']>;
+  /** The value(s) of the additional property. */
+  readonly values?: Maybe<ReadonlyArray<Maybe<Scalars['ObjectScalar']>>>;
+};
+
+export type InterfacePartnerFeatureFeaturePositions = {
+  /** An identifier for the monomer at which this segment of the feature begins. */
+  readonly beg_seq_id: Scalars['Int'];
+  /** An identifier for the monomer at which this segment of the feature ends. */
+  readonly end_seq_id?: Maybe<Scalars['Int']>;
+  /** The value(s) of the feature over the monomer segment. */
+  readonly values?: Maybe<ReadonlyArray<Maybe<Scalars['Float']>>>;
+};
+
+export type MethodDetails = {
+  /** A description of special aspects of the clustering process */
+  readonly description?: Maybe<Scalars['String']>;
+  /** Defines the name of the description associated with the clustering process */
+  readonly name?: Maybe<Scalars['String']>;
+  /** Defines the type of the description associated with the clustering process */
+  readonly type?: Maybe<Scalars['String']>;
+  /** Defines the value associated with the clustering process */
+  readonly value?: Maybe<Scalars['Float']>;
+};
+
 export type PdbxAuditRevisionCategory = {
  /**
   * The category updated in the pdbx_audit_revision_category record.
@@ -6745,6 +6845,16 @@ export type Query = {
  readonly entries?: Maybe<ReadonlyArray<Maybe<CoreEntry>>>;
  /** Get PDB entry given the PDB id. */
  readonly entry?: Maybe<CoreEntry>;
+  /** Given a group ID get a group object formed by aggregating individual structures that share a degree of similarity */
+  readonly entry_group?: Maybe<GroupEntry>;
+  /** Given a list of group IDs get a list of group objects formed by aggregating structures that share a degree of similarity */
+  readonly entry_groups?: Maybe<ReadonlyArray<Maybe<GroupEntry>>>;
+  /** Given a group provenance ID get an object that describes aggregation method used to create groups */
+  readonly group_provenance?: Maybe<GroupProvenance>;
+  /** Get a pairwise polymeric interface given the PDB ID, ASSEMBLY ID and INTERFACE ID. */
+  readonly interface?: Maybe<CoreInterface>;
+  /** Get a list of pairwise polymeric interfaces given a list of INTERFACE IDs. Here INTERFACE ID is a compound identifier that includes entry_id, assembly_id and interface_id e.g. 1XXX-1.1. */
+  readonly interfaces?: Maybe<ReadonlyArray<Maybe<CoreInterface>>>;
  /** Get a list of PDB non-polymer entities given a list of ENTITY IDs. Here ENTITY ID is a compound identifier that includes entry_id and entity_id separated by '_', e.g. 1XXX_1. */
  readonly nonpolymer_entities?: Maybe<ReadonlyArray<Maybe<CoreNonpolymerEntity>>>;
  /** Get a PDB non-polymer entity, given the PDB ID and ENTITY ID. Here ENTITY ID is a '1', '2', '3', etc. */
@@ -6757,6 +6867,10 @@ export type Query = {
  readonly polymer_entities?: Maybe<ReadonlyArray<Maybe<CorePolymerEntity>>>;
  /** Get a PDB polymer entity, given the PDB ID and ENTITY ID. Here ENTITY ID is a '1', '2', '3', etc. */
  readonly polymer_entity?: Maybe<CorePolymerEntity>;
+  /** Given a group ID get a group object formed by aggregating polymer entities that share a degree of similarity */
+  readonly polymer_entity_group?: Maybe<GroupPolymerEntity>;
+  /** Given a list of group IDs get a list of group objects formed by aggregating polymer entities that share a degree of similarity */
+  readonly polymer_entity_groups?: Maybe<ReadonlyArray<Maybe<GroupPolymerEntity>>>;
  /** Get a PDB polymer entity instance (chain), given the PDB ID and ENTITY INSTANCE ID. Here ENTITY INSTANCE ID identifies structural element in the asymmetric unit, e.g. 'A', 'B', etc. */
  readonly polymer_entity_instance?: Maybe<CorePolymerEntityInstance>;
  /** Get a list of PDB polymer entity instances (chains), given the list of ENTITY INSTANCE IDs. Here ENTITY INSTANCE ID identifies structural element in the asymmetric unit, e.g. 'A', 'B', etc. */
@@ -6831,6 +6945,38 @@ export type QueryEntryArgs = {
 };


+/** Query root */
+export type QueryEntry_GroupArgs = {
+  group_id: Scalars['String'];
+};
+
+
+/** Query root */
+export type QueryEntry_GroupsArgs = {
+  group_ids: ReadonlyArray<InputMaybe<Scalars['String']>>;
+};
+
+
+/** Query root */
+export type QueryGroup_ProvenanceArgs = {
+  group_provenance_id: Scalars['String'];
+};
+
+
+/** Query root */
+export type QueryInterfaceArgs = {
+  assembly_id: Scalars['String'];
+  entry_id: Scalars['String'];
+  interface_id: Scalars['String'];
+};
+
+
+/** Query root */
+export type QueryInterfacesArgs = {
+  interface_ids: ReadonlyArray<Scalars['String']>;
+};
+
+
 /** Query root */
 export type QueryNonpolymer_EntitiesArgs = {
  entity_ids: ReadonlyArray<Scalars['String']>;
@@ -6870,6 +7016,18 @@ export type QueryPolymer_EntityArgs = {
 };


+/** Query root */
+export type QueryPolymer_Entity_GroupArgs = {
+  group_id: Scalars['String'];
+};
+
+
+/** Query root */
+export type QueryPolymer_Entity_GroupsArgs = {
+  group_ids: ReadonlyArray<InputMaybe<Scalars['String']>>;
+};
+
+
 /** Query root */
 export type QueryPolymer_Entity_InstanceArgs = {
  asym_id: Scalars['String'];
@@ -6952,6 +7110,8 @@ export type RcsbAssemblyContainerIdentifiers = {
  readonly assembly_id: Scalars['String'];
  /** Entry identifier for the container. */
  readonly entry_id: Scalars['String'];
+  /** List of binary interface Ids within the assembly (it points to interface id collection). */
+  readonly interface_ids?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
  /**
   * A unique identifier for each object in this assembly container formed by
   *  a dash separated concatenation of entry and assembly identifiers.
@@ -7010,6 +7170,24 @@ export type RcsbAssemblyInfo = {
   *  This is the total count of non-polymer entity instances generated in the assembly coordinate data.
   */
  readonly nonpolymer_entity_instance_count?: Maybe<Scalars['Int']>;
+  /** Number of heterologous (both binding sites are different) interface entities */
+  readonly num_heterologous_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of heteromeric (both partners are different polymeric entities) interface entities */
+  readonly num_heteromeric_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of homomeric (both partners are the same polymeric entity) interface entities */
+  readonly num_homomeric_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of polymer-polymer interface entities, grouping equivalent interfaces at the entity level (i.e. same entity_ids on either side, with similar but not identical binding sites) */
+  readonly num_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of geometrically equivalent (i.e. same asym_ids on either side) polymer-polymer interfaces in the assembly */
+  readonly num_interfaces?: Maybe<Scalars['Int']>;
+  /** Number of isologous (both binding sites are same, i.e. interface is symmetric) interface entities */
+  readonly num_isologous_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of nucleic acid-nucleic acid interface entities */
+  readonly num_na_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of protein-nucleic acid interface entities */
+  readonly num_prot_na_interface_entities?: Maybe<Scalars['Int']>;
+  /** Number of protein-protein interface entities */
+  readonly num_protein_interface_entities?: Maybe<Scalars['Int']>;
  /** The assembly non-hydrogen polymer entity atomic coordinate count. */
  readonly polymer_atom_count?: Maybe<Scalars['Int']>;
  /**
@@ -7085,6 +7263,10 @@ export type RcsbAssemblyInfo = {
   *  This is the total count of solvent entity instances generated in the assembly coordinate data.
   */
  readonly solvent_entity_instance_count?: Maybe<Scalars['Int']>;
+  /** Total buried surface area calculated as the sum of buried surface areas over all interfaces */
+  readonly total_assembly_buried_surface_area?: Maybe<Scalars['Float']>;
+  /** Total number of interfacing residues in the assembly, calculated as the sum of interfacing residues over all interfaces */
+  readonly total_number_interface_residues?: Maybe<Scalars['Int']>;
  /**
   * The number of unmodeled polymer monomers in the assembly coordinate data. This is
   *  the total count of monomers with unreported coordinate data for all polymer
@@ -8590,6 +8772,25 @@ export type RcsbEntryContainerIdentifiers = {
  readonly water_entity_ids?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
 };

+export type RcsbEntryGroupMembership = {
+  /**
+   * Method used to establish group membership
+   *
+   * Allowable values:
+   * matching_deposit_group_id
+   *
+   */
+  readonly aggregation_method: Scalars['String'];
+  /**
+   * A unique identifier for a group of entries
+   *
+   * Examples:
+   * G_1001001
+   *
+   */
+  readonly group_id: Scalars['String'];
+};
+
 export type RcsbEntryInfo = {
  /** The number of assemblies defined for this entry including the deposited assembly. */
  readonly assembly_count?: Maybe<Scalars['Int']>;
@@ -8817,6 +9018,220 @@ export type RcsbGenomicLineage = {
  readonly name?: Maybe<Scalars['String']>;
 };

+export type RcsbGroupAccessionInfo = {
+  /** Identifies the version of the groups solution */
+  readonly version: Scalars['Int'];
+};
+
+export type RcsbGroupAggregationMethod = {
+  /** The details on a method used to calculate cluster solutions */
+  readonly method: RcsbGroupAggregationMethodMethod;
+  readonly similarity_criteria?: Maybe<RcsbGroupAggregationMethodSimilarityCriteria>;
+  /**
+   * Specifies the type of similarity criteria used to aggregate members into higher levels in the hierarchy
+   *
+   * Allowable values:
+   * sequence_identity, matching_uniprot_accession, matching_deposit_group_id
+   *
+   */
+  readonly type: Scalars['String'];
+};
+
+export type RcsbGroupAggregationMethodMethod = {
+  /** Additional details describing the clustering process */
+  readonly details?: Maybe<ReadonlyArray<Maybe<MethodDetails>>>;
+  /**
+   * The name of the software or the method used to calculate cluster solutions
+   *
+   * Allowable values:
+   * mmseqs2, matching_reference_identity
+   *
+   */
+  readonly name: Scalars['String'];
+  /**
+   * The version of the software.
+   *
+   * Examples:
+   * v1.0, 3.1-2, unknown
+   *
+   */
+  readonly version?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupAggregationMethodSimilarityCriteria = {
+  /**
+   * A function or similarity measure that quantifies the similarity between two members
+   *
+   * Allowable values:
+   * rmsd, sequence_identity
+   *
+   */
+  readonly similarity_function?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupContainerIdentifiers = {
+  /** A unique textual identifier for a group */
+  readonly group_id: Scalars['String'];
+  /** Member identifiers representing a group */
+  readonly group_member_ids: ReadonlyArray<Maybe<Scalars['String']>>;
+  /**
+   * A unique group provenance identifier
+   *
+   * Allowable values:
+   * provenance_sequence_identity, provenance_matching_uniprot_accession, provenance_matching_deposit_group_id
+   *
+   */
+  readonly group_provenance_id: Scalars['String'];
+  /** Member identifiers representing a higher level in the groping hierarchy that has parent-child relationship */
+  readonly parent_member_ids?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+};
+
+export type RcsbGroupInfo = {
+  readonly group_description?: Maybe<Scalars['String']>;
+  readonly group_members_count: Scalars['Int'];
+  /**
+   * Granularity of group members identifiers
+   *
+   * Allowable values:
+   * assembly, entry, polymer_entity, polymer_entity_instance
+   *
+   */
+  readonly group_members_granularity: Scalars['String'];
+  readonly group_name?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupProvenanceContainerIdentifiers = {
+  /**
+   * A unique group provenance identifier
+   *
+   * Allowable values:
+   * provenance_sequence_identity, provenance_matching_uniprot_accession, provenance_matching_deposit_group_id
+   *
+   */
+  readonly group_provenance_id: Scalars['String'];
+};
+
+export type RcsbGroupRelated = {
+  /**
+   * A unique code assigned to a reference related the group
+   *
+   * Examples:
+   * P69905
+   *
+   */
+  readonly resource_accession_code?: Maybe<Scalars['String']>;
+  /**
+   * Defines the type of the resource describing related references
+   *
+   * Examples:
+   * UniProt
+   *
+   */
+  readonly resource_name?: Maybe<Scalars['String']>;
+};
+
+export type RcsbGroupStatistics = {
+  /** The desired lower limit for the similarity between two members that belong to the same group */
+  readonly similarity_cutoff?: Maybe<Scalars['Float']>;
+  /** Similarity score between two most similar group members */
+  readonly similarity_score_max?: Maybe<Scalars['Float']>;
+  /** Similarity score between two least similar group members */
+  readonly similarity_score_min?: Maybe<Scalars['Float']>;
+};
+
+export type RcsbInterfaceContainerIdentifiers = {
+  /** This item references an assembly in pdbx_struct_assembly */
+  readonly assembly_id: Scalars['String'];
+  /** Entry identifier for the container. */
+  readonly entry_id: Scalars['String'];
+  /**
+   * Identifier for NCS-equivalent interfaces within the assembly (same entity_ids on both sides)
+   *
+   * Examples:
+   * 1, 2
+   *
+   */
+  readonly interface_entity_id?: Maybe<Scalars['String']>;
+  /**
+   * Identifier for the geometrically equivalent (same asym_ids on either side) interfaces within the assembly
+   *
+   * Examples:
+   * 1, 2
+   *
+   */
+  readonly interface_id: Scalars['String'];
+  /**
+   * Unique identifier for the document
+   *
+   * Examples:
+   * 2UZI-1.A.B?1
+   *
+   */
+  readonly rcsb_id: Scalars['String'];
+};
+
+export type RcsbInterfaceInfo = {
+  /** Total interface buried surface area */
+  readonly interface_area?: Maybe<Scalars['Float']>;
+  /** Allowable values: homo, hetero. */
+  readonly interface_character?: Maybe<Scalars['String']>;
+  /** Number of core interface residues, defined as those that bury >90% accessible surface area with respect to the unbound state */
+  readonly num_core_interface_residues?: Maybe<Scalars['Int']>;
+  /** Number of interface residues, defined as those with burial fraction > 0 */
+  readonly num_interface_residues?: Maybe<Scalars['Int']>;
+  /** Allowable values: Nucleic acid (only), Protein (only), Protein/NA. */
+  readonly polymer_composition?: Maybe<Scalars['String']>;
+  /** The Jaccard score (intersection over union) of interface contacts in homomeric interfaces, comparing contact sets left-right vs right-left. High values indicate isologous (symmetric) interfaces, with value=1 if perfectly symmetric (e.g. crystallographic symmetry) */
+  readonly self_jaccard_contact_score?: Maybe<Scalars['Float']>;
+};
+
+export type RcsbInterfacePartner = {
+  readonly interface_partner_feature?: Maybe<ReadonlyArray<Maybe<RcsbInterfacePartnerInterfacePartnerFeature>>>;
+  readonly interface_partner_identifier?: Maybe<RcsbInterfacePartnerInterfacePartnerIdentifier>;
+};
+
+export type RcsbInterfacePartnerInterfacePartnerFeature = {
+  readonly additional_properties?: Maybe<ReadonlyArray<Maybe<InterfacePartnerFeatureAdditionalProperties>>>;
+  /**
+   * Identifies the version of the feature assignment.
+   *
+   * Examples:
+   * V4_0_2
+   *
+   */
+  readonly assignment_version?: Maybe<Scalars['String']>;
+  /** A description for the feature. */
+  readonly description?: Maybe<Scalars['String']>;
+  /** An identifier for the feature. */
+  readonly feature_id?: Maybe<Scalars['String']>;
+  readonly feature_positions?: Maybe<ReadonlyArray<Maybe<InterfacePartnerFeatureFeaturePositions>>>;
+  /** A name for the feature. */
+  readonly name?: Maybe<Scalars['String']>;
+  /**
+   * Code identifying the individual, organization or program that assigned the feature.
+   *
+   * Examples:
+   * NACCESS
+   *
+   */
+  readonly provenance_source?: Maybe<Scalars['String']>;
+  /**
+   * A type or category of the feature.
+   *
+   * Allowable values:
+   * ASA_UNBOUND, ASA_BOUND
+   *
+   */
+  readonly type?: Maybe<Scalars['String']>;
+};
+
+export type RcsbInterfacePartnerInterfacePartnerIdentifier = {
+  /** Instance identifier for this container. */
+  readonly asym_id: Scalars['String'];
+  /** Polymer entity identifier for the container. */
+  readonly entity_id: Scalars['String'];
+};
+
 export type RcsbLatestRevision = {
  /** The major version number of the latest revision. */
  readonly major_revision?: Maybe<Scalars['Int']>;
@@ -9733,6 +10148,7 @@ export type RcsbPolymerEntity = {
   *
   */
  readonly rcsb_multiple_source_flag?: Maybe<Scalars['String']>;
+  readonly rcsb_polymer_name_combined?: Maybe<RcsbPolymerEntityRcsbPolymerNameCombined>;
  /**
   * The number of biological sources for the polymer entity. Multiple source contributions
   *  may come from the same organism (taxonomy).
@@ -10059,6 +10475,69 @@ export type RcsbPolymerEntityFeatureSummary = {
  readonly type?: Maybe<Scalars['String']>;
 };

+export type RcsbPolymerEntityGroupMembersRankings = {
+  readonly group_members: ReadonlyArray<Maybe<RcsbPolymerEntityGroupMembersRankingsGroupMembers>>;
+  /**
+   * Defines ranking option applicable to group members
+   *
+   * Allowable values:
+   * coverage
+   *
+   */
+  readonly ranking_criteria_type: Scalars['String'];
+};
+
+export type RcsbPolymerEntityGroupMembersRankingsGroupMembers = {
+  readonly member_id: Scalars['String'];
+  /** Quantifies the criteria used for ranking */
+  readonly original_score?: Maybe<Scalars['Float']>;
+  /** Reflects a relationship between group members such that, for any two members the first is ranked higher (smaller rank value) than the second */
+  readonly rank: Scalars['Int'];
+};
+
+export type RcsbPolymerEntityGroupMembership = {
+  /**
+   * Method used to establish group membership
+   *
+   * Allowable values:
+   * sequence_identity, matching_uniprot_accession
+   *
+   */
+  readonly aggregation_method: Scalars['String'];
+  /**
+   * A unique identifier for a group of entities
+   *
+   * Examples:
+   * 1_100, P00003
+   *
+   */
+  readonly group_id: Scalars['String'];
+  /** Degree of similarity expressed as a floating-point number */
+  readonly similarity_cutoff?: Maybe<Scalars['Float']>;
+};
+
+export type RcsbPolymerEntityGroupSequenceAlignment = {
+  /** Abstract reference where group members can be aligned to generate a MSA */
+  readonly abstract_reference: RcsbPolymerEntityGroupSequenceAlignmentAbstractReference;
+  /** List of alignments with core_entity canonical sequences */
+  readonly group_members_alignment: ReadonlyArray<Maybe<RcsbPolymerEntityGroupSequenceAlignmentGroupMembersAlignment>>;
+};
+
+export type RcsbPolymerEntityGroupSequenceAlignmentAbstractReference = {
+  /** Abstract reference length */
+  readonly length: Scalars['Int'];
+  /** Sequence that represents the abstract reference */
+  readonly sequence?: Maybe<Scalars['String']>;
+};
+
+export type RcsbPolymerEntityGroupSequenceAlignmentGroupMembersAlignment = {
+  /** Aligned region */
+  readonly aligned_regions: ReadonlyArray<Maybe<GroupMembersAlignmentAlignedRegions>>;
+  readonly member_id?: Maybe<Scalars['String']>;
+  /** Alignment scores */
+  readonly scores: GroupMembersAlignmentScores;
+};
+
 export type RcsbPolymerEntityInstanceContainerIdentifiers = {
  /** Instance identifier for this container. */
  readonly asym_id: Scalars['String'];
@@ -10177,6 +10656,13 @@ export type RcsbPolymerEntityRcsbMacromolecularNamesCombined = {
  readonly provenance_source?: Maybe<Scalars['String']>;
 };

+export type RcsbPolymerEntityRcsbPolymerNameCombined = {
+  /** Protein name annotated by the UniProtKB or macromolecular name assigned by the PDB */
+  readonly names?: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  /** Allowable values: PDB Preferred Name, PDB Description, UniProt Name. */
+  readonly provenance_source?: Maybe<Scalars['String']>;
+};
+
 export type RcsbPolymerInstanceAnnotation = {
  /** An identifier for the annotation. */
  readonly annotation_id?: Maybe<Scalars['String']>;
@@ -10263,7 +10749,7 @@ export type RcsbPolymerInstanceFeature = {
   * A type or category of the feature.
   *
   * Allowable values:
-   * ANGLE_OUTLIER, BINDING_SITE, BOND_OUTLIER, C-MANNOSYLATION_SITE, CATH, CIS-PEPTIDE, ECOD, HELIX_P, MEMBRANE_SEGMENT, MOGUL_ANGLE_OUTLIER, MOGUL_BOND_OUTLIER, N-GLYCOSYLATION_SITE, O-GLYCOSYLATION_SITE, RAMACHANDRAN_OUTLIER, ROTAMER_OUTLIER, RSCC_OUTLIER, RSRZ_OUTLIER, S-GLYCOSYLATION_SITE, SABDAB_ANTIBODY_HEAVY_CHAIN_SUBCLASS, SABDAB_ANTIBODY_LIGHT_CHAIN_SUBCLASS, SABDAB_ANTIBODY_LIGHT_CHAIN_TYPE, SCOP, SCOP2B_SUPERFAMILY, SCOP2_FAMILY, SCOP2_SUPERFAMILY, SHEET, STEREO_OUTLIER, UNASSIGNED_SEC_STRUCT, UNOBSERVED_ATOM_XYZ, UNOBSERVED_RESIDUE_XYZ, ZERO_OCCUPANCY_ATOM_XYZ, ZERO_OCCUPANCY_RESIDUE_XYZ
+   * ANGLE_OUTLIER, BINDING_SITE, BOND_OUTLIER, C-MANNOSYLATION_SITE, CATH, CIS-PEPTIDE, ECOD, HELIX_P, MEMBRANE_SEGMENT, MOGUL_ANGLE_OUTLIER, MOGUL_BOND_OUTLIER, N-GLYCOSYLATION_SITE, O-GLYCOSYLATION_SITE, RAMACHANDRAN_OUTLIER, ROTAMER_OUTLIER, RSCC_OUTLIER, RSRZ_OUTLIER, S-GLYCOSYLATION_SITE, SABDAB_ANTIBODY_HEAVY_CHAIN_SUBCLASS, SABDAB_ANTIBODY_LIGHT_CHAIN_SUBCLASS, SABDAB_ANTIBODY_LIGHT_CHAIN_TYPE, SCOP, SCOP2B_SUPERFAMILY, SCOP2_FAMILY, SCOP2_SUPERFAMILY, SHEET, STEREO_OUTLIER, UNASSIGNED_SEC_STRUCT, UNOBSERVED_ATOM_XYZ, UNOBSERVED_RESIDUE_XYZ, ZERO_OCCUPANCY_ATOM_XYZ, ZERO_OCCUPANCY_RESIDUE_XYZ, ASA
   *
   */
  readonly type?: Maybe<Scalars['String']>;
@@ -11113,11 +11599,11 @@ export type RcsbUniprotAlignments = {

 export type RcsbUniprotAlignmentsCoreEntityAlignments = {
  /** Aligned region */
-  readonly aligned_regions?: Maybe<ReadonlyArray<Maybe<CoreEntityAlignmentsAlignedRegions>>>;
+  readonly aligned_regions: ReadonlyArray<Maybe<CoreEntityAlignmentsAlignedRegions>>;
  /** core_entity identifiers */
  readonly core_entity_identifiers?: Maybe<CoreEntityAlignmentsCoreEntityIdentifiers>;
  /** Alignment scores */
-  readonly scores?: Maybe<CoreEntityAlignmentsScores>;
+  readonly scores: CoreEntityAlignmentsScores;
 };

 export type RcsbUniprotAnnotation = {
@@ -13145,4 +13631,4 @@ export type AssemblySymmetryQueryVariables = Exact<{
 }>;


-export type AssemblySymmetryQuery = { readonly assembly?: { readonly rcsb_struct_symmetry?: ReadonlyArray<{ readonly kind: string, readonly oligomeric_state: string, readonly stoichiometry: ReadonlyArray<string | null | undefined>, readonly symbol: string, readonly type: string, readonly clusters: ReadonlyArray<{ readonly avg_rmsd?: number | null | undefined, readonly members: ReadonlyArray<{ readonly asym_id: string, readonly pdbx_struct_oper_list_ids?: ReadonlyArray<string | null | undefined> | null | undefined } | null | undefined> } | null | undefined>, readonly rotation_axes?: ReadonlyArray<{ readonly order?: number | null | undefined, readonly start: ReadonlyArray<number | null | undefined>, readonly end: ReadonlyArray<number | null | undefined> } | null | undefined> | null | undefined } | null | undefined> | null | undefined } | null | undefined };
+export type AssemblySymmetryQuery = { readonly assembly?: { readonly rcsb_struct_symmetry?: ReadonlyArray<{ readonly kind: string, readonly oligomeric_state: string, readonly stoichiometry: ReadonlyArray<string | null>, readonly symbol: string, readonly type: string, readonly clusters: ReadonlyArray<{ readonly avg_rmsd?: number | null, readonly members: ReadonlyArray<{ readonly asym_id: string, readonly pdbx_struct_oper_list_ids?: ReadonlyArray<string | null> | null } | null> } | null>, readonly rotation_axes?: ReadonlyArray<{ readonly order?: number | null, readonly start: ReadonlyArray<number | null>, readonly end: ReadonlyArray<number | null> } | null> | null } | null> | null } | null };
--- a/src/extensions/rcsb/validation-report/behavior.ts
+++ b/src/extensions/rcsb/validation-report/behavior.ts
@@ -30,7 +30,7 @@ export const RCSBValidationReport = PluginBehavior.create<{ autoAttach: boolean,
        description: 'Data from wwPDB Validation Report, obtained via RCSB PDB.'
    },
    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean, showTooltip: boolean }> {
-        private provider = ValidationReportProvider
+        private provider = ValidationReportProvider;

        private labelProvider = {
            label: (loci: Loci): string | undefined => {
@@ -41,7 +41,7 @@ export const RCSBValidationReport = PluginBehavior.create<{ autoAttach: boolean,
                    randomCoilIndexLabel(loci)
                ].filter(l => !!l).join('</br>');
            }
-        }
+        };

        register(): void {
            DefaultQueryRuntimeTable.addCustomProp(this.provider.descriptor);
--- a/src/extensions/rcsb/validation-report/prop.ts
+++ b/src/extensions/rcsb/validation-report/prop.ts
@@ -92,7 +92,7 @@ namespace ValidationReport {
    }

    export function isApplicable(model?: Model): boolean {
-        return !!model && Model.isFromPdbArchive(model);
+        return !!model && Model.hasPdbId(model);
    }

    export function fromXml(xml: XMLDocument, model: Model): ValidationReport {
--- a/src/extensions/rcsb/validation-report/representation.ts
+++ b/src/extensions/rcsb/validation-report/representation.ts
@@ -55,7 +55,16 @@ function createIntraUnitClashCylinderMesh(ctx: VisualContext, unit: Unit, struct
        radius: (edgeIndex: number) => magnitude[edgeIndex] * sizeFactor,
    };

-    return createLinkCylinderMesh(ctx, builderProps, props, mesh);
+    const { mesh: m, boundingSphere } = createLinkCylinderMesh(ctx, builderProps, props, mesh);
+
+    if (boundingSphere) {
+        m.setBoundingSphere(boundingSphere);
+    } else if (m.triangleCount > 0) {
+        const sphere = Sphere3D.expand(Sphere3D(), structure.boundary.sphere, 1 * sizeFactor);
+        m.setBoundingSphere(sphere);
+    }
+
+    return m;
 }

 export const IntraUnitClashParams = {
@@ -169,7 +178,16 @@ function createInterUnitClashCylinderMesh(ctx: VisualContext, structure: Structu
        radius: (edgeIndex: number) => edges[edgeIndex].props.magnitude * sizeFactor
    };

-    return createLinkCylinderMesh(ctx, builderProps, props, mesh);
+    const { mesh: m, boundingSphere } = createLinkCylinderMesh(ctx, builderProps, props, mesh);
+
+    if (boundingSphere) {
+        m.setBoundingSphere(boundingSphere);
+    } else {
+        const sphere = Sphere3D.expand(Sphere3D(), structure.boundary.sphere, 1 * sizeFactor);
+        m.setBoundingSphere(sphere);
+    }
+
+    return m;
 }

 export const InterUnitClashParams = {
--- a/src/extensions/zenodo/index.ts
+++ b/src/extensions/zenodo/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { PluginBehavior } from '../../mol-plugin/behavior/behavior';
+import { ZenodoImportUI } from './ui';
+
+export const ZenodoImport = PluginBehavior.create<{ }>({
+    name: 'extension-zenodo-import',
+    category: 'misc',
+    display: {
+        name: 'Zenodo Export'
+    },
+    ctor: class extends PluginBehavior.Handler<{ }> {
+        register(): void {
+            this.ctx.customImportControls.set('zenodo-import', ZenodoImportUI as any);
+        }
+
+        update() {
+            return false;
+        }
+
+        unregister() {
+            this.ctx.customImportControls.delete('zenodo-import');
+        }
+    },
+    params: () => ({ })
+});
--- a/src/extensions/zenodo/ui.tsx
+++ b/src/extensions/zenodo/ui.tsx
@@ -0,0 +1,302 @@
+/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { DownloadFile } from '../../mol-plugin-state/actions/file';
+import { DownloadStructure, LoadTrajectory } from '../../mol-plugin-state/actions/structure';
+import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
+import { CoordinatesFormatCategory } from '../../mol-plugin-state/formats/coordinates';
+import { TopologyFormatCategory } from '../../mol-plugin-state/formats/topology';
+import { TrajectoryFormatCategory } from '../../mol-plugin-state/formats/trajectory';
+import { VolumeFormatCategory } from '../../mol-plugin-state/formats/volume';
+import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';
+import { Button } from '../../mol-plugin-ui/controls/common';
+import { OpenInBrowserSvg } from '../../mol-plugin-ui/controls/icons';
+import { ParameterControls } from '../../mol-plugin-ui/controls/parameters';
+import { PluginContext } from '../../mol-plugin/context';
+import { formatBytes } from '../../mol-util';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+
+type ZenodoFile = {
+    bucket: string
+    checksum: string
+    key: string
+    links: {
+        [key: string]: string
+        self: string
+    }
+    size: number
+    type: string
+}
+
+type ZenodoRecord = {
+    id: number
+    conceptdoi: string
+    conceptrecid: string
+    created: string
+    doi: string
+    files: ZenodoFile[]
+    revision: number
+    updated: string
+    metadata: {
+        title: string
+    }
+}
+
+interface State {
+    busy?: boolean
+    recordValues: PD.Values<typeof ZenodoImportParams>
+    importValues?: PD.Values<ImportParams>
+    importParams?: ImportParams
+    record?: ZenodoRecord
+    files?: ZenodoFile[]
+}
+
+const ZenodoImportParams = {
+    record: PD.Text('', { description: 'Zenodo ID.' })
+};
+
+function createImportParams(files: ZenodoFile[], plugin: PluginContext) {
+    const modelOpts: [string, string][] = [];
+    const topologyOpts: [string, string][] = [];
+    const coordinatesOpts: [string, string][] = [];
+    const volumeOpts: [string, string][] = [];
+    const compressedOpts: [string, string][] = [];
+
+    const structureExts = new Map<string, { format: string, isBinary: boolean }>();
+    const coordinatesExts = new Map<string, { format: string, isBinary: boolean }>();
+    const topologyExts = new Map<string, { format: string, isBinary: boolean }>();
+    const volumeExts = new Map<string, { format: string, isBinary: boolean }>();
+
+    for (const { provider: { category, binaryExtensions, stringExtensions }, name } of plugin.dataFormats.list) {
+        if (category === TrajectoryFormatCategory) {
+            if (binaryExtensions) for (const e of binaryExtensions) structureExts.set(e, { format: name, isBinary: true });
+            if (stringExtensions) for (const e of stringExtensions) structureExts.set(e, { format: name, isBinary: false });
+        } else if (category === VolumeFormatCategory) {
+            if (binaryExtensions) for (const e of binaryExtensions) volumeExts.set(e, { format: name, isBinary: true });
+            if (stringExtensions) for (const e of stringExtensions) volumeExts.set(e, { format: name, isBinary: false });
+        } else if (category === CoordinatesFormatCategory) {
+            if (binaryExtensions) for (const e of binaryExtensions) coordinatesExts.set(e, { format: name, isBinary: true });
+            if (stringExtensions) for (const e of stringExtensions) coordinatesExts.set(e, { format: name, isBinary: false });
+        } else if (category === TopologyFormatCategory) {
+            if (binaryExtensions) for (const e of binaryExtensions) topologyExts.set(e, { format: name, isBinary: true });
+            if (stringExtensions) for (const e of stringExtensions) topologyExts.set(e, { format: name, isBinary: false });
+        }
+    }
+
+    for (const file of files) {
+        const label = `${file.key} (${formatBytes(file.size)})`;
+        if (structureExts.has(file.type)) {
+            const { format, isBinary } = structureExts.get(file.type)!;
+            modelOpts.push([`${file.links.self}|${format}|${isBinary}`, label]);
+            topologyOpts.push([`${file.links.self}|${format}|${isBinary}`, label]);
+        } else if (volumeExts.has(file.type)) {
+            const { format, isBinary } = volumeExts.get(file.type)!;
+            volumeOpts.push([`${file.links.self}|${format}|${isBinary}`, label]);
+        } else if (topologyExts.has(file.type)) {
+            const { format, isBinary } = topologyExts.get(file.type)!;
+            topologyOpts.push([`${file.links.self}|${format}|${isBinary}`, label]);
+        } else if (coordinatesExts.has(file.type)) {
+            const { format, isBinary } = coordinatesExts.get(file.type)!;
+            coordinatesOpts.push([`${file.links.self}|${format}|${isBinary}`, label]);
+        } else if (file.type === 'zip') {
+            compressedOpts.push([`${file.links.self}|${file.type}|true`, label]);
+        }
+    }
+
+    const params: PD.Params = {};
+    let defaultType = '';
+
+    if (modelOpts.length) {
+        defaultType = 'structure';
+        params.structure = PD.Select(modelOpts[0][0], modelOpts);
+    }
+
+    if (topologyOpts.length && coordinatesOpts.length) {
+        if (!defaultType) defaultType = 'trajectory';
+        params.trajectory = PD.Group({
+            topology: PD.Select(topologyOpts[0][0], topologyOpts),
+            coordinates: PD.Select(coordinatesOpts[0][0], coordinatesOpts),
+        }, { isFlat: true });
+    }
+
+    if (volumeOpts.length) {
+        if (!defaultType) defaultType = 'volume';
+        params.volume = PD.Select(volumeOpts[0][0], volumeOpts);
+    }
+
+    if (compressedOpts.length) {
+        if (!defaultType) defaultType = 'compressed';
+        params.compressed = PD.Select(compressedOpts[0][0], compressedOpts);
+    }
+
+    return {
+        type: PD.MappedStatic(defaultType, Object.keys(params).length ? params : { '': PD.EmptyGroup() })
+    };
+}
+type ImportParams = ReturnType<typeof createImportParams>
+
+export class ZenodoImportUI extends CollapsableControls<{}, State> {
+    protected defaultState(): State & CollapsableState {
+        return {
+            header: 'Zenodo Import',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: OpenInBrowserSvg },
+            recordValues: PD.getDefaultValues(ZenodoImportParams),
+            importValues: undefined,
+            importParams: undefined,
+            record: undefined,
+            files: undefined,
+        };
+    }
+
+    private recordParamsOnChange = (values: any) => {
+        this.setState({ recordValues: values });
+    };
+
+    private importParamsOnChange = (values: any) => {
+        this.setState({ importValues: values });
+    };
+
+    private loadRecord = async () => {
+        try {
+            this.setState({ busy: true });
+            const record: ZenodoRecord = await this.plugin.runTask(this.plugin.fetch({ url: `https://zenodo.org/api/records/${this.state.recordValues.record}`, type: 'json' }));
+            const importParams = createImportParams(record.files, this.plugin);
+            this.setState({
+                record,
+                files: record.files,
+                busy: false,
+                importValues: PD.getDefaultValues(importParams),
+                importParams
+            });
+        } catch (e) {
+            console.error(e);
+            this.plugin.log.error(`Failed to load Zenodo record '${this.state.recordValues.record}'`);
+            this.setState({ busy: false });
+        }
+    };
+
+    private loadFile = async (values: PD.Values<ImportParams>) => {
+        try {
+            this.setState({ busy: true });
+
+            const t = values.type;
+            if (t.name === 'structure') {
+                const defaultParams = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
+
+                const [url, format, isBinary] = t.params.split('|');
+
+                await this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+                    source: {
+                        name: 'url',
+                        params: {
+                            url,
+                            format: format as any,
+                            isBinary: isBinary === 'true',
+                            options: defaultParams.source.params.options,
+                        }
+                    }
+                }));
+            } else if (t.name === 'trajectory') {
+                const [topologyUrl, topologyFormat, topologyIsBinary] = t.params.topology.split('|');
+                const [coordinatesUrl, coordinatesFormat, coordinatesIsBinary] = t.params.coordinates.split('|');
+
+                await this.plugin.runTask(this.plugin.state.data.applyAction(LoadTrajectory, {
+                    source: {
+                        name: 'url',
+                        params: {
+                            model: {
+                                url: topologyUrl,
+                                format: topologyFormat as any,
+                                isBinary: topologyIsBinary === 'true',
+                            },
+                            coordinates: {
+                                url: coordinatesUrl,
+                                format: coordinatesFormat as any,
+                                isBinary: coordinatesIsBinary === 'true',
+                            },
+                        }
+                    }
+                }));
+            } else if (t.name === 'volume') {
+                const [url, format, isBinary] = t.params.split('|');
+
+                await this.plugin.runTask(this.plugin.state.data.applyAction(DownloadDensity, {
+                    source: {
+                        name: 'url',
+                        params: {
+                            url,
+                            format: format as any,
+                            isBinary: isBinary === 'true',
+                        }
+                    }
+                }));
+            } else if (t.name === 'compressed') {
+                const [url, format, isBinary] = t.params.split('|');
+
+                await this.plugin.runTask(this.plugin.state.data.applyAction(DownloadFile, {
+                    url,
+                    format: format as any,
+                    isBinary: isBinary === 'true',
+                    visuals: true
+                }));
+            }
+        } catch (e) {
+            console.error(e);
+            this.plugin.log.error(`Failed to load Zenodo file`);
+        } finally {
+            this.setState({ busy: false });
+        }
+    };
+
+    private clearRecord = () => {
+        this.setState({
+            importValues: undefined,
+            importParams: undefined,
+            record: undefined,
+            files: undefined
+        });
+    };
+
+    private renderLoadRecord() {
+        return <div style={{ marginBottom: 10 }}>
+            <ParameterControls params={ZenodoImportParams} values={this.state.recordValues} onChangeValues={this.recordParamsOnChange} isDisabled={this.state.busy} />
+            <Button onClick={this.loadRecord} style={{ marginTop: 1 }} disabled={this.state.busy || !this.state.recordValues.record}>
+                Load Record
+            </Button>
+        </div>;
+    }
+
+    private renderRecordInfo(record: ZenodoRecord) {
+        return <div style={{ marginBottom: 10 }}>
+            <div className='msp-help-text'>
+                <div>Record {`${record.id}`}: <i>{`${record.metadata.title}`}</i></div>
+            </div>
+            <Button onClick={this.clearRecord} style={{ marginTop: 1 }} disabled={this.state.busy}>
+                Clear
+            </Button>
+        </div>;
+    }
+
+    private renderImportFile(params: ImportParams, values: PD.Values<ImportParams>) {
+        return values.type.name ? <div style={{ marginBottom: 10 }}>
+            <ParameterControls params={params} values={this.state.importValues} onChangeValues={this.importParamsOnChange} isDisabled={this.state.busy} />
+            <Button onClick={() => this.loadFile(values)} style={{ marginTop: 1 }} disabled={this.state.busy}>
+                Import File
+            </Button>
+        </div> : <div className='msp-help-text' style={{ marginBottom: 10 }}>
+            <div>No supported files</div>
+        </div>;
+    }
+
+    protected renderControls(): JSX.Element | null {
+        return <>
+            {!this.state.record ? this.renderLoadRecord() : null}
+            {this.state.record ? this.renderRecordInfo(this.state.record) : null}
+            {this.state.importParams && this.state.importValues ? this.renderImportFile(this.state.importParams, this.state.importValues) : null}
+        </>;
+    }
+}
--- a/src/mol-canvas3d/camera.ts
+++ b/src/mol-canvas3d/camera.ts
@@ -10,6 +10,7 @@ import { Viewport, cameraProject, cameraUnproject } from './camera/util';
 import { CameraTransitionManager } from './camera/transition';
 import { BehaviorSubject } from 'rxjs';
 import { Scene } from '../mol-gl/scene';
+import { assertUnreachable } from '../mol-util/type-helpers';

 export { ICamera, Camera };

@@ -37,7 +38,7 @@ class Camera implements ICamera {
    readonly projectionView: Mat4 = Mat4.identity();
    readonly inverseProjectionView: Mat4 = Mat4.identity();

-    private pixelScale: number
+    private pixelScale: number;
    get pixelRatio() {
        const dpr = (typeof window !== 'undefined') ? window.devicePixelRatio : 1;
        return dpr * this.pixelScale;
@@ -47,11 +48,11 @@ class Camera implements ICamera {
    readonly state: Readonly<Camera.Snapshot> = Camera.createDefaultSnapshot();
    readonly viewOffset = Camera.ViewOffset();

-    near = 1
-    far = 10000
-    fogNear = 5000
-    fogFar = 10000
-    zoom = 1
+    near = 1;
+    far = 10000;
+    fogNear = 5000;
+    fogFar = 10000;
+    zoom = 1;

    readonly transition: CameraTransitionManager = new CameraTransitionManager(this);
    readonly stateChanged = new BehaviorSubject<Partial<Camera.Snapshot>>(this.state);
@@ -84,7 +85,7 @@ class Camera implements ICamera {
        switch (this.state.mode) {
            case 'orthographic': updateOrtho(this); break;
            case 'perspective': updatePers(this); break;
-            default: throw new Error('unknown camera mode');
+            default: assertUnreachable(this.state.mode);
        }

        const changed = !Mat4.areEqual(this.projection, this.prevProjection, EPSILON) || !Mat4.areEqual(this.view, this.prevView, EPSILON);
--- a/src/mol-canvas3d/camera/stereo.ts
+++ b/src/mol-canvas3d/camera/stereo.ts
@@ -33,7 +33,7 @@ class StereoCamera {
        return this.parent.viewOffset;
    }

-    private props: StereoCameraProps
+    private props: StereoCameraProps;

    constructor(private parent: Camera, props: Partial<StereoCameraProps> = {}) {
        this.props = { ...DefaultStereoCameraProps, ...props };
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/src/mol-canvas3d/canvas3d.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -39,6 +39,7 @@ import { Helper } from './helper/helper';
 import { Passes } from './passes/passes';
 import { shallowEqual } from '../mol-util';
 import { MarkingParams } from './passes/marking';
+import { GraphicsRenderVariantsBlended, GraphicsRenderVariantsWboit } from '../mol-gl/webgl/render-item';

 export const Canvas3DParams = {
    camera: PD.Group({
@@ -222,7 +223,7 @@ interface Canvas3D {
    clear(): void
    syncVisibility(): void

-    requestDraw(force?: boolean): void
+    requestDraw(): void

    /** Reset the timers, used by "animate" */
    resetTime(t: number): void
@@ -235,7 +236,7 @@ interface Canvas3D {
    /** Sets drawPaused = false without starting the built in animation loop */
    resume(): void
    identify(x: number, y: number): PickData | undefined
-    mark(loci: Representation.Loci, action: MarkerAction, noDraw?: boolean): void
+    mark(loci: Representation.Loci, action: MarkerAction): void
    getLoci(pickingId: PickingId | undefined): Representation.Loci

    notifyDidDraw: boolean,
@@ -296,7 +297,7 @@ namespace Canvas3D {
        let height = 128;
        updateViewport();

-        const scene = Scene.create(webgl);
+        const scene = Scene.create(webgl, passes.draw.wboitEnabled ? GraphicsRenderVariantsWboit : GraphicsRenderVariantsBlended);

        const camera = new Camera({
            position: Vec3.create(0, 0, 100),
@@ -344,24 +345,40 @@ namespace Canvas3D {
            return { loci, repr };
        }

-        function mark(reprLoci: Representation.Loci, action: MarkerAction, noDraw = false) {
-            const { repr, loci } = reprLoci;
+        let markBuffer: [reprLoci: Representation.Loci, action: MarkerAction][] = [];
+
+        function mark(reprLoci: Representation.Loci, action: MarkerAction) {
+            // NOTE: might try to optimize a case with opposite actions for the
+            //       same loci. Tho this might end up being more expensive (and error prone)
+            //       then just applying everything "naively".
+            markBuffer.push([reprLoci, action]);
+        }
+
+        function resolveMarking() {
            let changed = false;
-            if (repr) {
-                changed = repr.mark(loci, action);
-            } else {
-                changed = helper.handle.mark(loci, action);
-                changed = helper.camera.mark(loci, action) || changed;
-                reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed; });
+            for (const [r, l] of markBuffer) {
+                changed = applyMark(r, l) || changed;
            }
-            if (changed && !noDraw) {
+            markBuffer = [];
+            if (changed) {
                scene.update(void 0, true);
                helper.handle.scene.update(void 0, true);
                helper.camera.scene.update(void 0, true);
-                const prevPickDirty = pickHelper.dirty;
-                draw(true);
-                pickHelper.dirty = prevPickDirty; // marking does not change picking buffers
            }
+            return changed;
+        }
+
+        function applyMark(reprLoci: Representation.Loci, action: MarkerAction) {
+            const { repr, loci } = reprLoci;
+            let changed = false;
+            if (repr) {
+                changed = repr.mark(loci, action) || changed;
+            } else {
+                reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed; });
+            }
+            changed = helper.handle.mark(loci, action) || changed;
+            changed = helper.camera.mark(loci, action) || changed;
+            return changed;
        }

        function render(force: boolean) {
@@ -378,6 +395,8 @@ namespace Canvas3D {
                y > gl.drawingBufferHeight || y + height < 0
            ) return false;

+            const markingUpdated = resolveMarking();
+
            let didRender = false;
            controls.update(currentTime);
            const cameraChanged = camera.update();
@@ -385,21 +404,24 @@ namespace Canvas3D {
            const shouldRender = force || cameraChanged || resized || forceNextRender;
            forceNextRender = false;

-            const multiSampleChanged = multiSampleHelper.update(shouldRender, p.multiSample);
+            const multiSampleChanged = multiSampleHelper.update(markingUpdated || shouldRender, p.multiSample);

-            if (shouldRender || multiSampleChanged) {
+            if (shouldRender || multiSampleChanged || markingUpdated) {
                let cam: Camera | StereoCamera = camera;
                if (p.camera.stereo.name === 'on') {
                    stereoCamera.update();
                    cam = stereoCamera;
                }

+                const ctx = { renderer, camera: cam, scene, helper };
                if (MultiSamplePass.isEnabled(p.multiSample)) {
-                    multiSampleHelper.render(renderer, cam, scene, helper, true, p.transparentBackground, p);
+                    const forceOn = !cameraChanged && markingUpdated && !controls.isAnimating;
+                    multiSampleHelper.render(ctx, p, true, forceOn);
                } else {
-                    passes.draw.render(renderer, cam, scene, helper, true, p.transparentBackground, p.postprocessing, p.marking);
+                    passes.draw.render(ctx, p, true);
                }
-                pickHelper.dirty = true;
+                // if only marking has updated, do not set the flag to dirty
+                pickHelper.dirty = pickHelper.dirty || shouldRender;
                didRender = true;
            }

@@ -411,15 +433,15 @@ namespace Canvas3D {
        let currentTime = 0;
        let drawPaused = false;

-        function draw(force?: boolean) {
+        function draw(options?: { force?: boolean }) {
            if (drawPaused) return;
-            if (render(!!force) && notifyDidDraw) {
+            if (render(!!options?.force) && notifyDidDraw) {
                didDraw.next(now() - startTime as now.Timestamp);
            }
        }

-        function requestDraw(force?: boolean) {
-            forceNextRender = forceNextRender || !!force;
+        function requestDraw() {
+            forceNextRender = true;
        }

        let animationFrameHandle = 0;
@@ -433,7 +455,7 @@ namespace Canvas3D {
                return;
            }

-            draw(false);
+            draw();
            if (!camera.transition.inTransition && !webgl.isContextLost) {
                interactionHelper.tick(currentTime);
            }
@@ -473,7 +495,7 @@ namespace Canvas3D {
                resolveCameraReset();
                if (forceDrawAfterAllCommited) {
                    if (helper.debug.isEnabled) helper.debug.update();
-                    draw(true);
+                    draw({ force: true });
                    forceDrawAfterAllCommited = false;
                }
                commited.next(now());
@@ -514,7 +536,7 @@ namespace Canvas3D {

            if (camera.transition.inTransition || nextCameraResetSnapshot) return false;

-            let cameraSphereOverlapsNone = true;
+            let cameraSphereOverlapsNone = true, isEmpty = true;
            Sphere3D.set(cameraSphere, camera.state.target, camera.state.radius);

            // check if any renderable has moved outside of the old bounding sphere
@@ -525,12 +547,13 @@ namespace Canvas3D {
                const b = r.values.boundingSphere.ref.value;
                if (!b.radius) continue;

+                isEmpty = false;
                const cameraDist = Vec3.distance(cameraSphere.center, b.center);
                if ((cameraDist > cameraSphere.radius || cameraDist > b.radius || b.radius > camera.state.radiusMax) && !Sphere3D.includes(oldBoundingSphereVisible, b)) return true;
                if (Sphere3D.overlaps(cameraSphere, b)) cameraSphereOverlapsNone = false;
            }

-            return cameraSphereOverlapsNone;
+            return cameraSphereOverlapsNone || (!isEmpty && cameraSphere.radius <= 0.1);
        }

        const sceneCommitTimeoutMs = 250;
@@ -655,11 +678,11 @@ namespace Canvas3D {

        const contextRestoredSub = contextRestored.subscribe(() => {
            pickHelper.dirty = true;
-            draw(true);
+            draw({ force: true });
            // Unclear why, but in Chrome with wboit enabled the first `draw` only clears
            // the drawingBuffer. Note that in Firefox the drawingBuffer is preserved after
            // context loss so it is unclear if it behaves the same.
-            draw(true);
+            draw({ force: true });
        });

        const resized = new BehaviorSubject<any>(0);
@@ -668,7 +691,7 @@ namespace Canvas3D {
            passes.updateSize();
            updateViewport();
            syncViewport();
-            if (draw) requestDraw(true);
+            if (draw) requestDraw();
            resized.next(+new Date());
        }

@@ -693,7 +716,7 @@ namespace Canvas3D {
                reprRenderObjects.clear();
                scene.clear();
                helper.debug.clear();
-                requestDraw(true);
+                requestDraw();
                reprCount.next(reprRenderObjects.size);
            },
            syncVisibility: () => {
@@ -705,7 +728,7 @@ namespace Canvas3D {
                if (scene.syncVisibility()) {
                    if (helper.debug.isEnabled) helper.debug.update();
                }
-                requestDraw(true);
+                requestDraw();
            },

            requestDraw,
@@ -793,7 +816,7 @@ namespace Canvas3D {
                }

                if (!doNotRequestDraw) {
-                    requestDraw(true);
+                    requestDraw();
                }
            },
            getImagePass: (props: Partial<ImageProps> = {}) => {
@@ -820,6 +843,8 @@ namespace Canvas3D {
            dispose: () => {
                contextRestoredSub.unsubscribe();

+                markBuffer = [];
+
                scene.clear();
                helper.debug.clear();
                controls.dispose();
--- a/src/mol-canvas3d/controls/trackball.ts
+++ b/src/mol-canvas3d/controls/trackball.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -13,7 +13,7 @@ import { Viewport } from '../camera/util';
 import { InputObserver, DragInput, WheelInput, PinchInput, ButtonsType, ModifiersKeys, GestureInput } from '../../mol-util/input/input-observer';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Camera } from '../camera';
-import { absMax } from '../../mol-math/misc';
+import { absMax, degToRad } from '../../mol-math/misc';
 import { Binding } from '../../mol-util/binding';

 const B = ButtonsType;
@@ -40,8 +40,16 @@ export const TrackballControlsParams = {
    zoomSpeed: PD.Numeric(7.0, { min: 1, max: 15, step: 1 }),
    panSpeed: PD.Numeric(1.0, { min: 0.1, max: 5, step: 0.1 }),

-    spin: PD.Boolean(false, { description: 'Spin the 3D scene around the x-axis in view space' }),
-    spinSpeed: PD.Numeric(1, { min: -20, max: 20, step: 1 }),
+    animate: PD.MappedStatic('off', {
+        off: PD.EmptyGroup(),
+        spin: PD.Group({
+            speed: PD.Numeric(1, { min: -20, max: 20, step: 1 }),
+        }, { description: 'Spin the 3D scene around the x-axis in view space' }),
+        rock: PD.Group({
+            speed: PD.Numeric(0.3, { min: -5, max: 5, step: 0.1 }),
+            angle: PD.Numeric(10, { min: 0, max: 90, step: 1 }, { description: 'How many degrees to rotate in each direction.' }),
+        }, { description: 'Rock the 3D scene around the x-axis in view space' })
+    }),

    staticMoving: PD.Boolean(true, { isHidden: true }),
    dynamicDampingFactor: PD.Numeric(0.2, {}, { isHidden: true }),
@@ -72,7 +80,8 @@ export type TrackballControlsProps = PD.Values<typeof TrackballControlsParams>

 export { TrackballControls };
 interface TrackballControls {
-    viewport: Viewport
+    readonly viewport: Viewport
+    readonly isAnimating: boolean

    readonly props: Readonly<TrackballControlsProps>
    setProps: (props: Partial<TrackballControlsProps>) => void
@@ -144,6 +153,11 @@ namespace TrackballControls {
            );
        }

+        function getRotateFactor() {
+            const aspectRatio = input.width / input.height;
+            return p.rotateSpeed * input.pixelRatio * aspectRatio;
+        }
+
        const rotAxis = Vec3();
        const rotQuat = Quat();
        const rotEyeDir = Vec3();
@@ -156,8 +170,7 @@ namespace TrackballControls {
            const dy = _rotCurr[1] - _rotPrev[1];
            Vec3.set(rotMoveDir, dx, dy, 0);

-            const aspectRatio = input.width / input.height;
-            const angle = Vec3.magnitude(rotMoveDir) * p.rotateSpeed * input.pixelRatio * aspectRatio;
+            const angle = Vec3.magnitude(rotMoveDir) * getRotateFactor();

            if (angle) {
                Vec3.sub(_eye, camera.position, camera.target);
@@ -306,7 +319,10 @@ namespace TrackballControls {
        /** Update the object's position, direction and up vectors */
        function update(t: number) {
            if (lastUpdated === t) return;
-            if (p.spin && lastUpdated > 0) spin(t - lastUpdated);
+            if (lastUpdated > 0) {
+                if (p.animate.name === 'spin') spin(t - lastUpdated);
+                else if (p.animate.name === 'rock') rock(t - lastUpdated);
+            }

            Vec3.sub(_eye, camera.position, camera.target);

@@ -345,6 +361,7 @@ namespace TrackballControls {
            if (!isStart && !_isInteracting) return;

            _isInteracting = true;
+            resetRock(); // start rocking from the center after interactions

            const dragRotate = Binding.match(p.bindings.dragRotate, buttons, modifiers);
            const dragRotateZ = Binding.match(p.bindings.dragRotateZ, buttons, modifiers);
@@ -434,11 +451,34 @@ namespace TrackballControls {

        const _spinSpeed = Vec2.create(0.005, 0);
        function spin(deltaT: number) {
-            if (p.spinSpeed === 0) return;
+            if (p.animate.name !== 'spin' || p.animate.params.speed === 0 || _isInteracting) return;

-            const frameSpeed = (p.spinSpeed || 0) / 1000;
+            const frameSpeed = p.animate.params.speed / 1000;
            _spinSpeed[0] = 60 * Math.min(Math.abs(deltaT), 1000 / 8) / 1000 * frameSpeed;
-            if (!_isInteracting) Vec2.add(_rotCurr, _rotPrev, _spinSpeed);
+            Vec2.add(_rotCurr, _rotPrev, _spinSpeed);
+        }
+
+        let _rockPhase = 0;
+        const _rockSpeed = Vec2.create(0.005, 0);
+        function rock(deltaT: number) {
+            if (p.animate.name !== 'rock' || p.animate.params.speed === 0 || _isInteracting) return;
+
+            const dt = deltaT / 1000 * p.animate.params.speed;
+            const maxAngle = degToRad(p.animate.params.angle) / getRotateFactor();
+            const angleA = Math.sin(_rockPhase * Math.PI * 2) * maxAngle;
+            const angleB = Math.sin((_rockPhase + dt) * Math.PI * 2) * maxAngle;
+
+            _rockSpeed[0] = angleB - angleA;
+            Vec2.add(_rotCurr, _rotPrev, _rockSpeed);
+
+            _rockPhase += dt;
+            if (_rockPhase >= 1) {
+                _rockPhase = 0;
+            }
+        }
+
+        function resetRock() {
+            _rockPhase = 0;
        }

        function start(t: number) {
@@ -448,9 +488,13 @@ namespace TrackballControls {

        return {
            viewport,
+            get isAnimating() { return p.animate.name !== 'off'; },

            get props() { return p as Readonly<TrackballControlsProps>; },
            setProps: (props: Partial<TrackballControlsProps>) => {
+                if (props.animate?.name === 'rock' && p.animate.name !== 'rock') {
+                    resetRock(); // start rocking from the center
+                }
                Object.assign(p, props);
            },

--- a/src/mol-canvas3d/helper/bounding-sphere-helper.ts
+++ b/src/mol-canvas3d/helper/bounding-sphere-helper.ts
@@ -18,6 +18,7 @@ import { TransformData } from '../../mol-geo/geometry/transform-data';
 import { sphereVertexCount } from '../../mol-geo/primitive/sphere';
 import { ValueCell } from '../../mol-util';
 import { Geometry } from '../../mol-geo/geometry/geometry';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';

 export const DebugHelperParams = {
    sceneBoundingSpheres: PD.Boolean(false, { description: 'Show full scene bounding spheres.' }),
@@ -31,17 +32,17 @@ export type DebugHelperProps = PD.Values<DebugHelperParams>
 type BoundingSphereData = { boundingSphere: Sphere3D, renderObject: GraphicsRenderObject, mesh: Mesh }

 export class BoundingSphereHelper {
-    readonly scene: Scene
+    readonly scene: Scene;

-    private readonly parent: Scene
-    private _props: DebugHelperProps
-    private objectsData = new Map<GraphicsRenderObject, BoundingSphereData>()
-    private instancesData = new Map<GraphicsRenderObject, BoundingSphereData>()
-    private sceneData: BoundingSphereData | undefined
-    private visibleSceneData: BoundingSphereData | undefined
+    private readonly parent: Scene;
+    private _props: DebugHelperProps;
+    private objectsData = new Map<GraphicsRenderObject, BoundingSphereData>();
+    private instancesData = new Map<GraphicsRenderObject, BoundingSphereData>();
+    private sceneData: BoundingSphereData | undefined;
+    private visibleSceneData: BoundingSphereData | undefined;

    constructor(ctx: WebGLContext, parent: Scene, props: Partial<DebugHelperProps>) {
-        this.scene = Scene.create(ctx);
+        this.scene = Scene.create(ctx, GraphicsRenderVariantsBlended);
        this.parent = parent;
        this._props = { ...PD.getDefaultValues(DebugHelperParams), ...props };
    }
@@ -160,5 +161,5 @@ const instanceMaterialId = getNextMaterialId();

 function createBoundingSphereRenderObject(mesh: Mesh, color: Color, materialId: number, transform?: TransformData) {
    const values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform);
-    return createRenderObject('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false, noClip: false }, materialId);
+    return createRenderObject('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false }, materialId);
 }
--- a/src/mol-canvas3d/helper/camera-helper.ts
+++ b/src/mol-canvas3d/helper/camera-helper.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -14,9 +14,10 @@ import { PickingId } from '../../mol-geo/geometry/picking';
 import { GraphicsRenderObject } from '../../mol-gl/render-object';
 import { Scene } from '../../mol-gl/scene';
 import { WebGLContext } from '../../mol-gl/webgl/context';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';
 import { Sphere3D } from '../../mol-math/geometry';
 import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
-import { DataLoci, EmptyLoci, Loci } from '../../mol-model/loci';
+import { DataLoci, EmptyLoci, isEveryLoci, Loci } from '../../mol-model/loci';
 import { Shape } from '../../mol-model/shape';
 import { Visual } from '../../mol-repr/visual';
 import { ColorNames } from '../../mol-util/color/names';
@@ -49,16 +50,16 @@ export type CameraHelperParams = typeof CameraHelperParams
 export type CameraHelperProps = PD.Values<CameraHelperParams>

 export class CameraHelper {
-    scene: Scene
-    camera: Camera
+    scene: Scene;
+    camera: Camera;
    props: CameraHelperProps = {
        axes: { name: 'off', params: {} }
-    }
+    };

-    private renderObject: GraphicsRenderObject | undefined
+    private renderObject: GraphicsRenderObject | undefined;

    constructor(private webgl: WebGLContext, props: Partial<CameraHelperProps> = {}) {
-        this.scene = Scene.create(webgl);
+        this.scene = Scene.create(webgl, GraphicsRenderVariantsBlended);

        this.camera = new Camera();
        Vec3.set(this.camera.up, 0, 1, 0);
@@ -75,7 +76,6 @@ export class CameraHelper {
                    this.scene.clear();
                    const params = { ...props.axes.params, scale: props.axes.params.scale * this.webgl.pixelRatio };
                    this.renderObject = createAxesRenderObject(params);
-                    this.renderObject.state.noClip = true;
                    this.scene.add(this.renderObject);
                    this.scene.commit();

@@ -109,12 +109,14 @@ export class CameraHelper {
            if (apply(Interval.ofSingleton(idx))) changed = true;
        }
        return changed;
-    }
+    };

    mark(loci: Loci, action: MarkerAction) {
        if (!MarkerActions.is(MarkerActions.Highlighting, action)) return false;
-        if (!isCameraAxesLoci(loci)) return false;
-        if (loci.data !== this) return false;
+        if (!isEveryLoci(loci)) {
+            if (!isCameraAxesLoci(loci)) return false;
+            if (loci.data !== this) return false;
+        }
        return Visual.mark(this.renderObject, loci, action, this.eachGroup);
    }

@@ -201,7 +203,7 @@ function createAxesMesh(scale: number, mesh?: Mesh) {
    const x = Vec3.scale(Vec3(), Vec3.unitX, scale);
    const y = Vec3.scale(Vec3(), Vec3.unitY, scale);
    const z = Vec3.scale(Vec3(), Vec3.unitZ, scale);
-    const cylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments: 32 };
+    const cylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments: 32 };

    state.currentGroup = CameraHelperAxis.None;
    addSphere(state, Vec3.origin, radius, 2);
--- a/src/mol-canvas3d/helper/handle-helper.ts
+++ b/src/mol-canvas3d/helper/handle-helper.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -20,10 +20,11 @@ import produce from 'immer';
 import { Shape } from '../../mol-model/shape';
 import { PickingId } from '../../mol-geo/geometry/picking';
 import { Camera } from '../camera';
-import { DataLoci, EmptyLoci, Loci } from '../../mol-model/loci';
+import { DataLoci, EmptyLoci, isEveryLoci, Loci } from '../../mol-model/loci';
 import { MarkerAction, MarkerActions } from '../../mol-util/marker-action';
 import { Visual } from '../../mol-repr/visual';
 import { Interval } from '../../mol-data/int';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';

 const HandleParams = {
    ...Mesh.Params,
@@ -47,12 +48,12 @@ export type HandleHelperParams = typeof HandleHelperParams
 export type HandleHelperProps = PD.Values<HandleHelperParams>

 export class HandleHelper {
-    scene: Scene
+    scene: Scene;
    props: HandleHelperProps = {
        handle: { name: 'off', params: {} }
-    }
+    };

-    private renderObject: GraphicsRenderObject | undefined
+    private renderObject: GraphicsRenderObject | undefined;

    private _transform = Mat4();
    getBoundingSphere(out: Sphere3D, instanceId: number) {
@@ -72,7 +73,6 @@ export class HandleHelper {
                    this.scene.clear();
                    const params = { ...props.handle.params, scale: props.handle.params.scale * this.webgl.pixelRatio };
                    this.renderObject = createHandleRenderObject(params);
-                    this.renderObject.state.noClip = true;
                    this.scene.add(this.renderObject);
                    this.scene.commit();

@@ -117,17 +117,19 @@ export class HandleHelper {
            if (apply(Interval.ofSingleton(idx))) changed = true;
        }
        return changed;
-    }
+    };

    mark(loci: Loci, action: MarkerAction) {
        if (!MarkerActions.is(MarkerActions.Highlighting, action)) return false;
-        if (!isHandleLoci(loci)) return false;
-        if (loci.data !== this) return false;
+        if (!isEveryLoci(loci)) {
+            if (!isHandleLoci(loci)) return false;
+            if (loci.data !== this) return false;
+        }
        return Visual.mark(this.renderObject, loci, action, this.eachGroup);
    }

    constructor(private webgl: WebGLContext, props: Partial<HandleHelperProps> = {}) {
-        this.scene = Scene.create(webgl);
+        this.scene = Scene.create(webgl, GraphicsRenderVariantsBlended);
        this.setProps(props);
    }
 }
--- a/src/mol-canvas3d/helper/helper.ts
+++ b/src/mol-canvas3d/helper/helper.ts
@@ -23,9 +23,9 @@ export type HelperProps = PD.Values<typeof HelperParams>


 export class Helper {
-    readonly debug: BoundingSphereHelper
-    readonly camera: CameraHelper
-    readonly handle: HandleHelper
+    readonly debug: BoundingSphereHelper;
+    readonly camera: CameraHelper;
+    readonly handle: HandleHelper;

    constructor(webgl: WebGLContext, scene: Scene, props: Partial<HelperProps> = {}) {
        const p = { ...DefaultHelperProps, ...props };
--- a/src/mol-canvas3d/helper/interaction-events.ts
+++ b/src/mol-canvas3d/helper/interaction-events.ts
@@ -71,7 +71,7 @@ export class Canvas3dInteractionHelper {
        const xyChanged = this.startX !== this.endX || this.startY !== this.endY;

        if (e === InputEvent.Drag) {
-            if (xyChanged && !Representation.Loci.isEmpty(this.prevLoci)) {
+            if (xyChanged && !this.outsideViewport(this.startX, this.startY)) {
                this.events.drag.next({ current: this.prevLoci, buttons: this.buttons, button: this.button, modifiers: this.modifiers, pageStart: Vec2.create(this.startX, this.startY), pageEnd: Vec2.create(this.endX, this.endY) });

                this.startX = this.endX;
--- a/src/mol-canvas3d/passes/draw.ts
+++ b/src/mol-canvas3d/passes/draw.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
@@ -11,70 +11,48 @@ import { Renderer } from '../../mol-gl/renderer';
 import { Scene } from '../../mol-gl/scene';
 import { Texture } from '../../mol-gl/webgl/texture';
 import { Camera, ICamera } from '../camera';
-import { QuadSchema, QuadValues } from '../../mol-gl/compute/util';
-import { DefineSpec, TextureSpec, UniformSpec, Values } from '../../mol-gl/renderable/schema';
-import { ComputeRenderable, createComputeRenderable } from '../../mol-gl/renderable';
-import { ShaderCode } from '../../mol-gl/shader-code';
-import { createComputeRenderItem } from '../../mol-gl/webgl/render-item';
 import { ValueCell } from '../../mol-util';
 import { Vec2 } from '../../mol-math/linear-algebra';
 import { Helper } from '../helper/helper';

-import { quad_vert } from '../../mol-gl/shader/quad.vert';
-import { depthMerge_frag } from '../../mol-gl/shader/depth-merge.frag';
 import { StereoCamera } from '../camera/stereo';
 import { WboitPass } from './wboit';
 import { AntialiasingPass, PostprocessingPass, PostprocessingProps } from './postprocessing';
 import { MarkingPass, MarkingProps } from './marking';
 import { CopyRenderable, createCopyRenderable } from '../../mol-gl/compute/util';

-const DepthMergeSchema = {
-    ...QuadSchema,
-    tDepthPrimitives: TextureSpec('texture', 'depth', 'ushort', 'nearest'),
-    tDepthVolumes: TextureSpec('texture', 'depth', 'ushort', 'nearest'),
-    uTexSize: UniformSpec('v2'),
-    dPackedDepth: DefineSpec('boolean'),
-};
-const DepthMergeShaderCode = ShaderCode('depth-merge', quad_vert, depthMerge_frag);
-type DepthMergeRenderable = ComputeRenderable<Values<typeof DepthMergeSchema>>
+type Props = {
+    postprocessing: PostprocessingProps
+    marking: MarkingProps
+    transparentBackground: boolean;
+}

-function getDepthMergeRenderable(ctx: WebGLContext, depthTexturePrimitives: Texture, depthTextureVolumes: Texture, packedDepth: boolean): DepthMergeRenderable {
-    const values: Values<typeof DepthMergeSchema> = {
-        ...QuadValues,
-        tDepthPrimitives: ValueCell.create(depthTexturePrimitives),
-        tDepthVolumes: ValueCell.create(depthTextureVolumes),
-        uTexSize: ValueCell.create(Vec2.create(depthTexturePrimitives.getWidth(), depthTexturePrimitives.getHeight())),
-        dPackedDepth: ValueCell.create(packedDepth),
-    };
-
-    const schema = { ...DepthMergeSchema };
-    const renderItem = createComputeRenderItem(ctx, 'triangles', DepthMergeShaderCode, schema, values);
-
-    return createComputeRenderable(renderItem, values);
+type RenderContext = {
+    renderer: Renderer;
+    camera: Camera | StereoCamera;
+    scene: Scene;
+    helper: Helper;
 }

 export class DrawPass {
-    private readonly drawTarget: RenderTarget
+    private readonly drawTarget: RenderTarget;

-    readonly colorTarget: RenderTarget
-    readonly depthTexture: Texture
-    readonly depthTexturePrimitives: Texture
+    readonly colorTarget: RenderTarget;
+    readonly depthTextureTransparent: Texture;
+    readonly depthTextureOpaque: Texture;

-    readonly packedDepth: boolean
+    readonly packedDepth: boolean;

-    private depthTarget: RenderTarget
-    private depthTargetPrimitives: RenderTarget | null
-    private depthTargetVolumes: RenderTarget | null
-    private depthTextureVolumes: Texture
-    private depthMerge: DepthMergeRenderable
+    private depthTargetTransparent: RenderTarget;
+    private depthTargetOpaque: RenderTarget | null;

-    private copyFboTarget: CopyRenderable
-    private copyFboPostprocessing: CopyRenderable
+    private copyFboTarget: CopyRenderable;
+    private copyFboPostprocessing: CopyRenderable;

-    private wboit: WboitPass | undefined
-    private readonly marking: MarkingPass
-    readonly postprocessing: PostprocessingPass
-    private readonly antialiasing: AntialiasingPass
+    private wboit: WboitPass | undefined;
+    private readonly marking: MarkingPass;
+    readonly postprocessing: PostprocessingPass;
+    private readonly antialiasing: AntialiasingPass;

    get wboitEnabled() {
        return !!this.wboit?.supported;
@@ -88,19 +66,15 @@ export class DrawPass {
        this.colorTarget = webgl.createRenderTarget(width, height, true, 'uint8', 'linear');
        this.packedDepth = !extensions.depthTexture;

-        this.depthTarget = webgl.createRenderTarget(width, height);
-        this.depthTexture = this.depthTarget.texture;
+        this.depthTargetTransparent = webgl.createRenderTarget(width, height);
+        this.depthTextureTransparent = this.depthTargetTransparent.texture;

-        this.depthTargetPrimitives = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
-        this.depthTargetVolumes = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
+        this.depthTargetOpaque = this.packedDepth ? webgl.createRenderTarget(width, height) : null;

-        this.depthTexturePrimitives = this.depthTargetPrimitives ? this.depthTargetPrimitives.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
-        this.depthTextureVolumes = this.depthTargetVolumes ? this.depthTargetVolumes.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
+        this.depthTextureOpaque = this.depthTargetOpaque ? this.depthTargetOpaque.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
        if (!this.packedDepth) {
-            this.depthTexturePrimitives.define(width, height);
-            this.depthTextureVolumes.define(width, height);
+            this.depthTextureOpaque.define(width, height);
        }
-        this.depthMerge = getDepthMergeRenderable(webgl, this.depthTexturePrimitives, this.depthTextureVolumes, this.packedDepth);

        this.wboit = enableWboit ? new WboitPass(webgl, width, height) : undefined;
        this.marking = new MarkingPass(webgl, width, height);
@@ -121,22 +95,14 @@ export class DrawPass {

        if (width !== w || height !== h) {
            this.colorTarget.setSize(width, height);
-            this.depthTarget.setSize(width, height);
+            this.depthTargetTransparent.setSize(width, height);

-            if (this.depthTargetPrimitives) {
-                this.depthTargetPrimitives.setSize(width, height);
+            if (this.depthTargetOpaque) {
+                this.depthTargetOpaque.setSize(width, height);
            } else {
-                this.depthTexturePrimitives.define(width, height);
+                this.depthTextureOpaque.define(width, height);
            }

-            if (this.depthTargetVolumes) {
-                this.depthTargetVolumes.setSize(width, height);
-            } else {
-                this.depthTextureVolumes.define(width, height);
-            }
-
-            ValueCell.update(this.depthMerge.values.uTexSize, Vec2.set(this.depthMerge.values.uTexSize.ref.value, width, height));
-
            ValueCell.update(this.copyFboTarget.values.uTexSize, Vec2.set(this.copyFboTarget.values.uTexSize.ref.value, width, height));
            ValueCell.update(this.copyFboPostprocessing.values.uTexSize, Vec2.set(this.copyFboPostprocessing.values.uTexSize.ref.value, width, height));

@@ -150,20 +116,6 @@ export class DrawPass {
        }
    }

-    private _depthMerge() {
-        const { state, gl } = this.webgl;
-
-        this.depthMerge.update();
-        this.depthTarget.bind();
-        state.disable(gl.BLEND);
-        state.disable(gl.DEPTH_TEST);
-        state.disable(gl.CULL_FACE);
-        state.depthMask(false);
-        state.clearColor(1, 1, 1, 1);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        this.depthMerge.render();
-    }
-
    private _renderWboit(renderer: Renderer, camera: ICamera, scene: Scene, transparentBackground: boolean, postprocessingProps: PostprocessingProps) {
        if (!this.wboit?.supported) throw new Error('expected wboit to be supported');

@@ -171,38 +123,37 @@ export class DrawPass {
        renderer.clear(true);

        // render opaque primitives
-        this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+        this.depthTextureOpaque.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
        this.colorTarget.bind();
        renderer.clearDepth();
        renderer.renderWboitOpaque(scene.primitives, camera, null);

-        // render opaque volumes
-        this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-        this.colorTarget.bind();
-        renderer.clearDepth();
-        renderer.renderWboitOpaque(scene.volumes, camera, this.depthTexturePrimitives);
-
-        // merge depth of opaque primitives and volumes
-        this._depthMerge();
-
        if (PostprocessingPass.isEnabled(postprocessingProps)) {
+            if (PostprocessingPass.isOutlineEnabled(postprocessingProps)) {
+                this.depthTargetTransparent.bind();
+                renderer.clearDepth(true);
+                if (scene.opacityAverage < 1) {
+                    renderer.renderDepthTransparent(scene.primitives, camera, this.depthTextureOpaque);
+                }
+            }
+
            this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
        }

        // render transparent primitives and volumes
-        this.wboit.bind();
-        renderer.renderWboitTransparent(scene.primitives, camera, this.depthTexture);
-        renderer.renderWboitTransparent(scene.volumes, camera, this.depthTexture);
+        if (scene.opacityAverage < 1 || scene.volumes.renderables.length > 0) {
+            this.wboit.bind();
+            renderer.renderWboitTransparent(scene.primitives, camera, this.depthTextureOpaque);
+            renderer.renderWboitTransparent(scene.volumes, camera, this.depthTextureOpaque);

-        // evaluate wboit
-        if (PostprocessingPass.isEnabled(postprocessingProps)) {
-            this.depthTexturePrimitives.attachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
-            this.postprocessing.target.bind();
-        } else {
-            this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-            this.colorTarget.bind();
+            // evaluate wboit
+            if (PostprocessingPass.isEnabled(postprocessingProps)) {
+                this.postprocessing.target.bind();
+            } else {
+                this.colorTarget.bind();
+            }
+            this.wboit.render();
        }
-        this.wboit.render();
    }

    private _renderBlended(renderer: Renderer, camera: ICamera, scene: Scene, toDrawingBuffer: boolean, transparentBackground: boolean, postprocessingProps: PostprocessingProps) {
@@ -211,7 +162,7 @@ export class DrawPass {
        } else {
            this.colorTarget.bind();
            if (!this.packedDepth) {
-                this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+                this.depthTextureOpaque.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
            }
        }

@@ -221,68 +172,62 @@ export class DrawPass {
        if (!toDrawingBuffer) {
            // do a depth pass if not rendering to drawing buffer and
            // extensions.depthTexture is unsupported (i.e. depthTarget is set)
-            if (this.depthTargetPrimitives) {
-                this.depthTargetPrimitives.bind();
-                renderer.clear(false);
-                // TODO: this should only render opaque
-                renderer.renderDepth(scene.primitives, camera, null);
+            if (this.depthTargetOpaque) {
+                this.depthTargetOpaque.bind();
+                renderer.clearDepth(true);
+                renderer.renderDepthOpaque(scene.primitives, camera, null);
                this.colorTarget.bind();
            }

-            // do direct-volume rendering
-            if (!this.packedDepth) {
-                this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-                renderer.clearDepth(); // from previous frame
-            }
-            renderer.renderBlendedVolumeOpaque(scene.volumes, camera, this.depthTexturePrimitives);
-
-            // do volume depth pass if extensions.depthTexture is unsupported (i.e. depthTarget is set)
-            if (this.depthTargetVolumes) {
-                this.depthTargetVolumes.bind();
-                renderer.clear(false);
-                renderer.renderDepth(scene.volumes, camera, this.depthTexturePrimitives);
-                this.colorTarget.bind();
-            }
-
-            // merge depths from primitive and volume rendering
-            this._depthMerge();
-            this.colorTarget.bind();
-
            if (PostprocessingPass.isEnabled(postprocessingProps)) {
-                this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
-            }
-            renderer.renderBlendedVolumeTransparent(scene.volumes, camera, this.depthTexturePrimitives);
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.detachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
+                } else {
+                    this.colorTarget.depthRenderbuffer?.detachFramebuffer(this.postprocessing.target.framebuffer);
+                }

-            const target = PostprocessingPass.isEnabled(postprocessingProps)
-                ? this.postprocessing.target : this.colorTarget;
-            if (!this.packedDepth) {
-                this.depthTexturePrimitives.attachFramebuffer(target.framebuffer, 'depth');
+                if (PostprocessingPass.isOutlineEnabled(postprocessingProps)) {
+                    this.depthTargetTransparent.bind();
+                    renderer.clearDepth(true);
+                    if (scene.opacityAverage < 1) {
+                        renderer.renderDepthTransparent(scene.primitives, camera, this.depthTextureOpaque);
+                    }
+                }
+
+                this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
+
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.attachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
+                } else {
+                    this.colorTarget.depthRenderbuffer?.attachFramebuffer(this.postprocessing.target.framebuffer);
+                }
            }
-            target.bind();
+
+            renderer.renderBlendedVolume(scene.volumes, camera, this.depthTextureOpaque);
        }

        renderer.renderBlendedTransparent(scene.primitives, camera, null);
    }

-    private _render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, postprocessingProps: PostprocessingProps, markingProps: MarkingProps) {
+    private _render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, props: Props) {
        const volumeRendering = scene.volumes.renderables.length > 0;
-        const postprocessingEnabled = PostprocessingPass.isEnabled(postprocessingProps);
-        const antialiasingEnabled = AntialiasingPass.isEnabled(postprocessingProps);
-        const markingEnabled = MarkingPass.isEnabled(markingProps);
+        const postprocessingEnabled = PostprocessingPass.isEnabled(props.postprocessing);
+        const antialiasingEnabled = AntialiasingPass.isEnabled(props.postprocessing);
+        const markingEnabled = MarkingPass.isEnabled(props.marking);

        const { x, y, width, height } = camera.viewport;
        renderer.setViewport(x, y, width, height);
        renderer.update(camera);

-        if (transparentBackground && !antialiasingEnabled && toDrawingBuffer) {
+        if (props.transparentBackground && !antialiasingEnabled && toDrawingBuffer) {
            this.drawTarget.bind();
            renderer.clear(false);
        }

        if (this.wboitEnabled) {
-            this._renderWboit(renderer, camera, scene, transparentBackground, postprocessingProps);
+            this._renderWboit(renderer, camera, scene, props.transparentBackground, props.postprocessing);
        } else {
-            this._renderBlended(renderer, camera, scene, !volumeRendering && !postprocessingEnabled && !antialiasingEnabled && toDrawingBuffer, transparentBackground, postprocessingProps);
+            this._renderBlended(renderer, camera, scene, !volumeRendering && !postprocessingEnabled && !antialiasingEnabled && toDrawingBuffer, props.transparentBackground, props.postprocessing);
        }

        if (postprocessingEnabled) {
@@ -294,19 +239,21 @@ export class DrawPass {
        }

        if (markingEnabled) {
-            const markingDepthTest = markingProps.ghostEdgeStrength < 1;
-            if (markingDepthTest) {
-                this.marking.depthTarget.bind();
-                renderer.clear(false);
-                renderer.renderMarkingDepth(scene.primitives, camera, null);
+            if (scene.markerAverage > 0) {
+                const markingDepthTest = props.marking.ghostEdgeStrength < 1;
+                if (markingDepthTest && scene.markerAverage !== 1) {
+                    this.marking.depthTarget.bind();
+                    renderer.clear(false, true);
+                    renderer.renderMarkingDepth(scene.primitives, camera, null);
+                }
+
+                this.marking.maskTarget.bind();
+                renderer.clear(false, true);
+                renderer.renderMarkingMask(scene.primitives, camera, markingDepthTest ? this.marking.depthTarget.texture : null);
+
+                this.marking.update(props.marking);
+                this.marking.render(camera.viewport, postprocessingEnabled ? this.postprocessing.target : this.colorTarget);
            }
-
-            this.marking.maskTarget.bind();
-            renderer.clear(false);
-            renderer.renderMarkingMask(scene.primitives, camera, markingDepthTest ? this.marking.depthTarget.texture : null);
-
-            this.marking.update(markingProps);
-            this.marking.render(camera.viewport, postprocessingEnabled ? this.postprocessing.target : this.colorTarget);
        }

        if (helper.debug.isEnabled) {
@@ -323,7 +270,7 @@ export class DrawPass {
        }

        if (antialiasingEnabled) {
-            this.antialiasing.render(camera, toDrawingBuffer, postprocessingProps);
+            this.antialiasing.render(camera, toDrawingBuffer, props.postprocessing);
        } else if (toDrawingBuffer) {
            this.drawTarget.bind();

@@ -338,16 +285,17 @@ export class DrawPass {
        this.webgl.gl.flush();
    }

-    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, postprocessingProps: PostprocessingProps, markingProps: MarkingProps) {
-        renderer.setTransparentBackground(transparentBackground);
+    render(ctx: RenderContext, props: Props, toDrawingBuffer: boolean) {
+        const { renderer, camera, scene, helper } = ctx;
+        renderer.setTransparentBackground(props.transparentBackground);
        renderer.setDrawingBufferSize(this.colorTarget.getWidth(), this.colorTarget.getHeight());
        renderer.setPixelRatio(this.webgl.pixelRatio);

        if (StereoCamera.is(camera)) {
-            this._render(renderer, camera.left, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps);
-            this._render(renderer, camera.right, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps);
+            this._render(renderer, camera.left, scene, helper, toDrawingBuffer, props);
+            this._render(renderer, camera.right, scene, helper, toDrawingBuffer, props);
        } else {
-            this._render(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps);
+            this._render(renderer, camera, scene, helper, toDrawingBuffer, props);
        }
    }

--- a/src/mol-canvas3d/passes/fxaa.ts
+++ b/src/mol-canvas3d/passes/fxaa.ts
@@ -28,7 +28,7 @@ export const FxaaParams = {
 export type FxaaProps = PD.Values<typeof FxaaParams>

 export class FxaaPass {
-    private readonly renderable: FxaaRenderable
+    private readonly renderable: FxaaRenderable;

    constructor(private webgl: WebGLContext, input: Texture) {
        this.renderable = getFxaaRenderable(webgl, input);
--- a/src/mol-canvas3d/passes/image.ts
+++ b/src/mol-canvas3d/passes/image.ts
@@ -30,19 +30,19 @@ export const ImageParams = {
 export type ImageProps = PD.Values<typeof ImageParams>

 export class ImagePass {
-    private _width = 0
-    private _height = 0
-    private _camera = new Camera()
+    private _width = 0;
+    private _height = 0;
+    private _camera = new Camera();

-    readonly props: ImageProps
+    readonly props: ImageProps;

-    private _colorTarget: RenderTarget
+    private _colorTarget: RenderTarget;
    get colorTarget() { return this._colorTarget; }

-    private readonly drawPass: DrawPass
-    private readonly multiSamplePass: MultiSamplePass
-    private readonly multiSampleHelper: MultiSampleHelper
-    private readonly helper: Helper
+    private readonly drawPass: DrawPass;
+    private readonly multiSamplePass: MultiSamplePass;
+    private readonly multiSampleHelper: MultiSampleHelper;
+    private readonly helper: Helper;

    get width() { return this._width; }
    get height() { return this._height; }
@@ -83,11 +83,12 @@ export class ImagePass {
        Viewport.set(this._camera.viewport, 0, 0, this._width, this._height);
        this._camera.update();

+        const ctx = { renderer: this.renderer, camera: this._camera, scene: this.scene, helper: this.helper };
        if (MultiSamplePass.isEnabled(this.props.multiSample)) {
-            this.multiSampleHelper.render(this.renderer, this._camera, this.scene, this.helper, false, this.props.transparentBackground, this.props);
+            this.multiSampleHelper.render(ctx, this.props, false);
            this._colorTarget = this.multiSamplePass.colorTarget;
        } else {
-            this.drawPass.render(this.renderer, this._camera, this.scene, this.helper, false, this.props.transparentBackground, this.props.postprocessing, this.props.marking);
+            this.drawPass.render(ctx, this.props, false);
            this._colorTarget = this.drawPass.getColorTarget(this.props.postprocessing);
        }
    }
--- a/src/mol-canvas3d/passes/marking.ts
+++ b/src/mol-canvas3d/passes/marking.ts
@@ -22,7 +22,7 @@ import { Color } from '../../mol-util/color';
 import { edge_frag } from '../../mol-gl/shader/marking/edge.frag';

 export const MarkingParams = {
-    enabled: PD.Boolean(false),
+    enabled: PD.Boolean(true),
    highlightEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(1.0, 0.4, 0.6), 1.0)),
    selectEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(0.2, 1.0, 0.1), 1.0)),
    edgeScale: PD.Numeric(1, { min: 1, max: 3, step: 1 }, { description: 'Thickness of the edge.' }),
@@ -36,12 +36,12 @@ export class MarkingPass {
        return props.enabled;
    }

-    readonly depthTarget: RenderTarget
-    readonly maskTarget: RenderTarget
-    private readonly edgesTarget: RenderTarget
+    readonly depthTarget: RenderTarget;
+    readonly maskTarget: RenderTarget;
+    private readonly edgesTarget: RenderTarget;

-    private readonly edge: EdgeRenderable
-    private readonly overlay: OverlayRenderable
+    private readonly edge: EdgeRenderable;
+    private readonly overlay: OverlayRenderable;

    constructor(private webgl: WebGLContext, width: number, height: number) {
        this.depthTarget = webgl.createRenderTarget(width, height);
--- a/src/mol-canvas3d/passes/multi-sample.ts
+++ b/src/mol-canvas3d/passes/multi-sample.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -50,8 +50,8 @@ function getComposeRenderable(ctx: WebGLContext, colorTexture: Texture): Compose
 }

 export const MultiSampleParams = {
-    mode: PD.Select('off', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
-    sampleLevel: PD.Numeric(2, { min: 0, max: 5, step: 1 }),
+    mode: PD.Select('temporal', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
+    sampleLevel: PD.Numeric(2, { min: 0, max: 5, step: 1 }, { description: 'Take level^2 samples.' }),
 };
 export type MultiSampleProps = PD.Values<typeof MultiSampleParams>

@@ -59,6 +59,14 @@ type Props = {
    multiSample: MultiSampleProps
    postprocessing: PostprocessingProps
    marking: MarkingProps
+    transparentBackground: boolean;
+}
+
+type RenderContext = {
+    renderer: Renderer;
+    camera: Camera | StereoCamera;
+    scene: Scene;
+    helper: Helper;
 }

 export class MultiSamplePass {
@@ -66,11 +74,11 @@ export class MultiSamplePass {
        return props.mode !== 'off';
    }

-    colorTarget: RenderTarget
+    colorTarget: RenderTarget;

-    private composeTarget: RenderTarget
-    private holdTarget: RenderTarget
-    private compose: ComposeRenderable
+    private composeTarget: RenderTarget;
+    private holdTarget: RenderTarget;
+    private compose: ComposeRenderable;

    constructor(private webgl: WebGLContext, private drawPass: DrawPass) {
        const { colorBufferFloat, textureFloat, colorBufferHalfFloat, textureHalfFloat } = webgl.extensions;
@@ -97,12 +105,12 @@ export class MultiSamplePass {
        }
    }

-    render(sampleIndex: number, renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
-        if (props.multiSample.mode === 'temporal') {
-            return this.renderTemporalMultiSample(sampleIndex, renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
+    render(sampleIndex: number, ctx: RenderContext, props: Props, toDrawingBuffer: boolean, forceOn: boolean) {
+        if (props.multiSample.mode === 'temporal' && !forceOn) {
+            return this.renderTemporalMultiSample(sampleIndex, ctx, props, toDrawingBuffer);
        } else {
-            this.renderMultiSample(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
-            return sampleIndex;
+            this.renderMultiSample(ctx, toDrawingBuffer, props);
+            return -2;
        }
    }

@@ -114,7 +122,8 @@ export class MultiSamplePass {
        }
    }

-    private renderMultiSample(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
+    private renderMultiSample(ctx: RenderContext, toDrawingBuffer: boolean, props: Props) {
+        const { camera } = ctx;
        const { compose, composeTarget, drawPass, webgl } = this;
        const { gl, state } = webgl;

@@ -148,7 +157,15 @@ export class MultiSamplePass {
            ValueCell.update(compose.values.uWeight, sampleWeight);

            // render scene
-            drawPass.render(renderer, camera, scene, helper, false, transparentBackground, props.postprocessing, props.marking);
+            if (i === 0) {
+                drawPass.postprocessing.setOcclusionOffset(0, 0);
+            } else {
+                drawPass.postprocessing.setOcclusionOffset(
+                    offset[0] / width,
+                    offset[1] / height
+                );
+            }
+            drawPass.render(ctx, props, false);

            // compose rendered scene with compose target
            composeTarget.bind();
@@ -166,6 +183,8 @@ export class MultiSamplePass {
            compose.render();
        }

+        drawPass.postprocessing.setOcclusionOffset(0, 0);
+
        ValueCell.update(compose.values.uWeight, 1.0);
        ValueCell.update(compose.values.tColor, composeTarget.texture);
        compose.update();
@@ -181,7 +200,8 @@ export class MultiSamplePass {
        camera.update();
    }

-    private renderTemporalMultiSample(sampleIndex: number, renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
+    private renderTemporalMultiSample(sampleIndex: number, ctx: RenderContext, props: Props, toDrawingBuffer: boolean) {
+        const { camera } = ctx;
        const { compose, composeTarget, holdTarget, drawPass, webgl } = this;
        const { gl, state } = webgl;

@@ -198,7 +218,7 @@ export class MultiSamplePass {
        const sampleWeight = 1.0 / offsetList.length;

        if (sampleIndex === -1) {
-            drawPass.render(renderer, camera, scene, helper, false, transparentBackground, props.postprocessing, props.marking);
+            drawPass.render(ctx, props, false);
            ValueCell.update(compose.values.uWeight, 1.0);
            ValueCell.update(compose.values.tColor, drawPass.getColorTarget(props.postprocessing).texture);
            compose.update();
@@ -226,7 +246,15 @@ export class MultiSamplePass {
                camera.update();

                // render scene
-                drawPass.render(renderer, camera, scene, helper, false, transparentBackground, props.postprocessing, props.marking);
+                if (sampleIndex === 0) {
+                    drawPass.postprocessing.setOcclusionOffset(0, 0);
+                } else {
+                    drawPass.postprocessing.setOcclusionOffset(
+                        offset[0] / width,
+                        offset[1] / height
+                    );
+                }
+                drawPass.render(ctx, props, false);

                // compose rendered scene with compose target
                composeTarget.bind();
@@ -248,6 +276,8 @@ export class MultiSamplePass {
            }
        }

+        drawPass.postprocessing.setOcclusionOffset(0, 0);
+
        this.bindOutputTarget(toDrawingBuffer);
        gl.viewport(x, y, width, height);
        gl.scissor(x, y, width, height);
@@ -281,23 +311,23 @@ const JitterVectors = [
        [0, 0]
    ],
    [
-        [4, 4], [-4, -4]
+        [0, 0], [-4, -4]
    ],
    [
-        [-2, -6], [6, -2], [-6, 2], [2, 6]
+        [0, 0], [6, -2], [-6, 2], [2, 6]
    ],
    [
-        [1, -3], [-1, 3], [5, 1], [-3, -5],
+        [0, 0], [-1, 3], [5, 1], [-3, -5],
        [-5, 5], [-7, -1], [3, 7], [7, -7]
    ],
    [
-        [1, 1], [-1, -3], [-3, 2], [4, -1],
+        [0, 0], [-1, -3], [-3, 2], [4, -1],
        [-5, -2], [2, 5], [5, 3], [3, -5],
        [-2, 6], [0, -7], [-4, -6], [-6, 4],
        [-8, 0], [7, -4], [6, 7], [-7, -8]
    ],
    [
-        [-4, -7], [-7, -5], [-3, -5], [-5, -4],
+        [0, 0], [-7, -5], [-3, -5], [-5, -4],
        [-1, -4], [-2, -2], [-6, -1], [-4, 0],
        [-7, 1], [-1, 2], [-6, 3], [-3, 3],
        [-7, 6], [-3, 6], [-5, 7], [-1, 7],
@@ -317,15 +347,17 @@ JitterVectors.forEach(offsetList => {
 });

 export class MultiSampleHelper {
-    private sampleIndex = -2
+    private sampleIndex = -2;

    update(changed: boolean, props: MultiSampleProps) {
        if (changed) this.sampleIndex = -1;
        return props.mode === 'temporal' ? this.sampleIndex !== -2 : false;
    }

-    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
-        this.sampleIndex = this.multiSamplePass.render(this.sampleIndex, renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
+    /** Return `true` while more samples are needed */
+    render(ctx: RenderContext, props: Props, toDrawingBuffer: boolean, forceOn?: boolean) {
+        this.sampleIndex = this.multiSamplePass.render(this.sampleIndex, ctx, props, toDrawingBuffer, !!forceOn);
+        return this.sampleIndex < 0;
    }

    constructor(private multiSamplePass: MultiSamplePass) {
--- a/src/mol-canvas3d/passes/passes.ts
+++ b/src/mol-canvas3d/passes/passes.ts
@@ -10,9 +10,9 @@ import { MultiSamplePass } from './multi-sample';
 import { WebGLContext } from '../../mol-gl/webgl/context';

 export class Passes {
-    readonly draw: DrawPass
-    readonly pick: PickPass
-    readonly multiSample: MultiSamplePass
+    readonly draw: DrawPass;
+    readonly pick: PickPass;
+    readonly multiSample: MultiSamplePass;

    constructor(private webgl: WebGLContext, attribs: Partial<{ pickScale: number, enableWboit: boolean }> = {}) {
        const { gl } = webgl;
--- a/src/mol-canvas3d/passes/pick.ts
+++ b/src/mol-canvas3d/passes/pick.ts
@@ -1,18 +1,17 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */

 import { PickingId } from '../../mol-geo/geometry/picking';
-import { Renderer } from '../../mol-gl/renderer';
+import { PickType, Renderer } from '../../mol-gl/renderer';
 import { Scene } from '../../mol-gl/scene';
 import { WebGLContext } from '../../mol-gl/webgl/context';
-import { GraphicsRenderVariant } from '../../mol-gl/webgl/render-item';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { spiral2d } from '../../mol-math/misc';
-import { decodeFloatRGB, unpackRGBAToDepth } from '../../mol-util/float-packing';
+import { unpackRGBToInt, unpackRGBAToDepth } from '../../mol-util/number-packing';
 import { Camera, ICamera } from '../camera';
 import { StereoCamera } from '../camera/stereo';
 import { cameraUnproject } from '../camera/util';
@@ -25,13 +24,13 @@ const NullId = Math.pow(2, 24) - 2;
 export type PickData = { id: PickingId, position: Vec3 }

 export class PickPass {
-    readonly objectPickTarget: RenderTarget
-    readonly instancePickTarget: RenderTarget
-    readonly groupPickTarget: RenderTarget
-    readonly depthPickTarget: RenderTarget
+    readonly objectPickTarget: RenderTarget;
+    readonly instancePickTarget: RenderTarget;
+    readonly groupPickTarget: RenderTarget;
+    readonly depthPickTarget: RenderTarget;

-    private pickWidth: number
-    private pickHeight: number
+    private pickWidth: number;
+    private pickHeight: number;

    constructor(private webgl: WebGLContext, private drawPass: DrawPass, readonly pickBaseScale: number) {
        const pickScale = pickBaseScale / webgl.pixelRatio;
@@ -64,56 +63,54 @@ export class PickPass {
        }
    }

-    private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: GraphicsRenderVariant) {
-        const depth = this.drawPass.depthTexturePrimitives;
+    private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: 'pick' | 'depth', pickType: number) {
        renderer.clear(false);

        renderer.update(camera);
-        renderer.renderPick(scene.primitives, camera, variant, null);
-        renderer.renderPick(scene.volumes, camera, variant, depth);
-        renderer.renderPick(helper.handle.scene, camera, variant, null);
+        renderer.renderPick(scene.primitives, camera, variant, null, pickType);
+        renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);

        if (helper.camera.isEnabled) {
            helper.camera.update(camera);
            renderer.update(helper.camera.camera);
-            renderer.renderPick(helper.camera.scene, helper.camera.camera, variant, null);
+            renderer.renderPick(helper.camera.scene, helper.camera.camera, variant, null, pickType);
        }
    }

    render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper) {
        this.objectPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pickObject');
+        this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Object);

        this.instancePickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pickInstance');
+        this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Instance);

        this.groupPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pickGroup');
+        this.renderVariant(renderer, camera, scene, helper, 'pick', PickType.Group);
        // printTexture(this.webgl, this.groupPickTarget.texture, { id: 'group' })

        this.depthPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'depth');
+        this.renderVariant(renderer, camera, scene, helper, 'depth', PickType.None);
    }
 }

 export class PickHelper {
-    dirty = true
+    dirty = true;

-    private objectBuffer: Uint8Array
-    private instanceBuffer: Uint8Array
-    private groupBuffer: Uint8Array
-    private depthBuffer: Uint8Array
+    private objectBuffer: Uint8Array;
+    private instanceBuffer: Uint8Array;
+    private groupBuffer: Uint8Array;
+    private depthBuffer: Uint8Array;

-    private viewport = Viewport()
+    private viewport = Viewport();

-    private pickScale: number
-    private pickX: number
-    private pickY: number
-    private pickWidth: number
-    private pickHeight: number
-    private halfPickWidth: number
+    private pickScale: number;
+    private pickX: number;
+    private pickY: number;
+    private pickWidth: number;
+    private pickHeight: number;
+    private halfPickWidth: number;

-    private spiral: [number, number][]
+    private spiral: [number, number][];

    private setupBuffers() {
        const bufferSize = this.pickWidth * this.pickHeight * 4;
@@ -174,7 +171,7 @@ export class PickHelper {

    private getId(x: number, y: number, buffer: Uint8Array) {
        const idx = this.getBufferIdx(x, y);
-        return decodeFloatRGB(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
+        return unpackRGBToInt(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
    }

    private render(camera: Camera | StereoCamera) {
--- a/src/mol-canvas3d/passes/postprocessing.ts
+++ b/src/mol-canvas3d/passes/postprocessing.ts
@@ -1,11 +1,11 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
 */

-import { QuadSchema, QuadValues } from '../../mol-gl/compute/util';
+import { CopyRenderable, createCopyRenderable, QuadSchema, QuadValues } from '../../mol-gl/compute/util';
 import { TextureSpec, Values, UniformSpec, DefineSpec } from '../../mol-gl/renderable/schema';
 import { ShaderCode } from '../../mol-gl/shader-code';
 import { WebGLContext } from '../../mol-gl/webgl/context';
@@ -30,7 +30,8 @@ import { SmaaParams, SmaaPass } from './smaa';

 const OutlinesSchema = {
    ...QuadSchema,
-    tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    uTexSize: UniformSpec('v2'),

    dOrthographic: DefineSpec('number'),
@@ -41,11 +42,15 @@ const OutlinesSchema = {
 };
 type OutlinesRenderable = ComputeRenderable<Values<typeof OutlinesSchema>>

-function getOutlinesRenderable(ctx: WebGLContext, depthTexture: Texture): OutlinesRenderable {
+function getOutlinesRenderable(ctx: WebGLContext, depthTextureOpaque: Texture, depthTextureTransparent: Texture): OutlinesRenderable {
+    const width = depthTextureOpaque.getWidth();
+    const height = depthTextureOpaque.getHeight();
+
    const values: Values<typeof OutlinesSchema> = {
        ...QuadValues,
-        tDepth: ValueCell.create(depthTexture),
-        uTexSize: ValueCell.create(Vec2.create(depthTexture.getWidth(), depthTexture.getHeight())),
+        tDepthOpaque: ValueCell.create(depthTextureOpaque),
+        tDepthTransparent: ValueCell.create(depthTextureTransparent),
+        uTexSize: ValueCell.create(Vec2.create(width, height)),

        dOrthographic: ValueCell.create(0),
        uNear: ValueCell.create(1),
@@ -86,7 +91,7 @@ function getSsaoRenderable(ctx: WebGLContext, depthTexture: Texture): SsaoRender
        tDepth: ValueCell.create(depthTexture),

        uSamples: ValueCell.create([0.0, 0.0, 1.0]),
-        dNSamples: ValueCell.create(1),
+        dNSamples: ValueCell.create(32),

        uProjection: ValueCell.create(Mat4.identity()),
        uInvProjection: ValueCell.create(Mat4.identity()),
@@ -133,7 +138,7 @@ function getSsaoBlurRenderable(ctx: WebGLContext, ssaoDepthTexture: Texture, dir
        uTexSize: ValueCell.create(Vec2.create(ssaoDepthTexture.getWidth(), ssaoDepthTexture.getHeight())),

        uKernel: ValueCell.create([0.0]),
-        dOcclusionKernelSize: ValueCell.create(1),
+        dOcclusionKernelSize: ValueCell.create(15),

        uBlurDirectionX: ValueCell.create(direction === 'horizontal' ? 1 : 0),
        uBlurDirectionY: ValueCell.create(direction === 'vertical' ? 1 : 0),
@@ -183,7 +188,8 @@ const PostprocessingSchema = {
    ...QuadSchema,
    tSsaoDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
-    tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    tOutlines: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
    uTexSize: UniformSpec('v2'),

@@ -193,11 +199,13 @@ const PostprocessingSchema = {
    uFogNear: UniformSpec('f'),
    uFogFar: UniformSpec('f'),
    uFogColor: UniformSpec('v3'),
+    uOutlineColor: UniformSpec('v3'),
    uTransparentBackground: UniformSpec('b'),

    uMaxPossibleViewZDiff: UniformSpec('f'),

    dOcclusionEnable: DefineSpec('boolean'),
+    uOcclusionOffset: UniformSpec('v2'),

    dOutlineEnable: DefineSpec('boolean'),
    dOutlineScale: DefineSpec('number'),
@@ -205,12 +213,13 @@ const PostprocessingSchema = {
 };
 type PostprocessingRenderable = ComputeRenderable<Values<typeof PostprocessingSchema>>

-function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, outlinesTexture: Texture, ssaoDepthTexture: Texture): PostprocessingRenderable {
+function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTextureOpaque: Texture, depthTextureTransparent: Texture, outlinesTexture: Texture, ssaoDepthTexture: Texture): PostprocessingRenderable {
    const values: Values<typeof PostprocessingSchema> = {
        ...QuadValues,
        tSsaoDepth: ValueCell.create(ssaoDepthTexture),
        tColor: ValueCell.create(colorTexture),
-        tDepth: ValueCell.create(depthTexture),
+        tDepthOpaque: ValueCell.create(depthTextureOpaque),
+        tDepthTransparent: ValueCell.create(depthTextureTransparent),
        tOutlines: ValueCell.create(outlinesTexture),
        uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())),

@@ -220,11 +229,13 @@ function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, d
        uFogNear: ValueCell.create(10000),
        uFogFar: ValueCell.create(10000),
        uFogColor: ValueCell.create(Vec3.create(1, 1, 1)),
+        uOutlineColor: ValueCell.create(Vec3.create(0, 0, 0)),
        uTransparentBackground: ValueCell.create(false),

        uMaxPossibleViewZDiff: ValueCell.create(0.5),

-        dOcclusionEnable: ValueCell.create(false),
+        dOcclusionEnable: ValueCell.create(true),
+        uOcclusionOffset: ValueCell.create(Vec2.create(0, 0)),

        dOutlineEnable: ValueCell.create(false),
        dOutlineScale: ValueCell.create(1),
@@ -242,9 +253,10 @@ export const PostprocessingParams = {
    occlusion: PD.MappedStatic('on', {
        on: PD.Group({
            samples: PD.Numeric(32, { min: 1, max: 256, step: 1 }),
-            radius: PD.Numeric(5, { min: 0, max: 10, step: 0.1 }, { description: 'Final radius is 2^x.' }),
+            radius: PD.Numeric(5, { min: 0, max: 10, step: 0.1 }, { description: 'Final occlusion radius is 2^x' }),
            bias: PD.Numeric(0.8, { min: 0, max: 3, step: 0.1 }),
            blurKernelSize: PD.Numeric(15, { min: 1, max: 25, step: 2 }),
+            resolutionScale: PD.Numeric(1, { min: 0.1, max: 1, step: 0.05 }, { description: 'Adjust resolution of occlusion calculation' }),
        }),
        off: PD.Group({})
    }, { cycle: true, description: 'Darken occluded crevices with the ambient occlusion effect' }),
@@ -252,6 +264,7 @@ export const PostprocessingParams = {
        on: PD.Group({
            scale: PD.Numeric(1, { min: 1, max: 5, step: 1 }),
            threshold: PD.Numeric(0.33, { min: 0.01, max: 1, step: 0.01 }),
+            color: PD.Color(Color(0x000000)),
        }),
        off: PD.Group({})
    }, { cycle: true, description: 'Draw outline around 3D objects' }),
@@ -268,49 +281,57 @@ export class PostprocessingPass {
        return props.occlusion.name === 'on' || props.outline.name === 'on';
    }

-    readonly target: RenderTarget
-
-    private readonly outlinesTarget: RenderTarget
-    private readonly outlinesRenderable: OutlinesRenderable
-
-    private readonly randomHemisphereVector: Vec3[]
-    private readonly ssaoFramebuffer: Framebuffer
-    private readonly ssaoBlurFirstPassFramebuffer: Framebuffer
-    private readonly ssaoBlurSecondPassFramebuffer: Framebuffer
-
-    private readonly ssaoDepthTexture: Texture
-    private readonly ssaoDepthBlurProxyTexture: Texture
-
-    private readonly ssaoRenderable: SsaoRenderable
-    private readonly ssaoBlurFirstPassRenderable: SsaoBlurRenderable
-    private readonly ssaoBlurSecondPassRenderable: SsaoBlurRenderable
-
-    private nSamples: number
-    private blurKernelSize: number
-
-    private readonly renderable: PostprocessingRenderable
-
-    private ssaoScale: number
-    private calcSsaoScale() {
-        // downscale ssao for high pixel-ratios
-        return Math.min(1, 1 / this.webgl.pixelRatio);
+    static isOutlineEnabled(props: PostprocessingProps) {
+        return props.outline.name === 'on';
    }

-    constructor(private webgl: WebGLContext, drawPass: DrawPass) {
-        this.ssaoScale = this.calcSsaoScale();
+    readonly target: RenderTarget;

-        const { colorTarget, depthTexture } = drawPass;
+    private readonly outlinesTarget: RenderTarget;
+    private readonly outlinesRenderable: OutlinesRenderable;
+
+    private readonly randomHemisphereVector: Vec3[];
+    private readonly ssaoFramebuffer: Framebuffer;
+    private readonly ssaoBlurFirstPassFramebuffer: Framebuffer;
+    private readonly ssaoBlurSecondPassFramebuffer: Framebuffer;
+
+    private readonly downsampledDepthTarget: RenderTarget;
+    private readonly downsampleDepthRenderable: CopyRenderable;
+
+    private readonly ssaoDepthTexture: Texture;
+    private readonly ssaoDepthBlurProxyTexture: Texture;
+
+    private readonly ssaoRenderable: SsaoRenderable;
+    private readonly ssaoBlurFirstPassRenderable: SsaoBlurRenderable;
+    private readonly ssaoBlurSecondPassRenderable: SsaoBlurRenderable;
+
+    private nSamples: number;
+    private blurKernelSize: number;
+    private downsampleFactor: number;
+
+    private readonly renderable: PostprocessingRenderable;
+
+    private ssaoScale: number;
+    private calcSsaoScale() {
+        // downscale ssao for high pixel-ratios
+        return Math.min(1, 1 / this.webgl.pixelRatio) * this.downsampleFactor;
+    }
+
+    constructor(private webgl: WebGLContext, private drawPass: DrawPass) {
+        const { colorTarget, depthTextureTransparent, depthTextureOpaque } = drawPass;
        const width = colorTarget.getWidth();
        const height = colorTarget.getHeight();

        this.nSamples = 1;
        this.blurKernelSize = 1;
+        this.downsampleFactor = 1;
+        this.ssaoScale = this.calcSsaoScale();

        // needs to be linear for anti-aliasing pass
        this.target = webgl.createRenderTarget(width, height, false, 'uint8', 'linear');

        this.outlinesTarget = webgl.createRenderTarget(width, height, false);
-        this.outlinesRenderable = getOutlinesRenderable(webgl, depthTexture);
+        this.outlinesRenderable = getOutlinesRenderable(webgl, depthTextureOpaque, depthTextureTransparent);

        this.randomHemisphereVector = [];
        for (let i = 0; i < 256; i++) {
@@ -329,20 +350,23 @@ export class PostprocessingPass {
        const sw = Math.floor(width * this.ssaoScale);
        const sh = Math.floor(height * this.ssaoScale);

-        this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+        this.downsampledDepthTarget = webgl.createRenderTarget(sw, sh, false, 'uint8', 'linear');
+        this.downsampleDepthRenderable = createCopyRenderable(webgl, depthTextureOpaque);
+
+        this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
        this.ssaoDepthTexture.define(sw, sh);
        this.ssaoDepthTexture.attachFramebuffer(this.ssaoFramebuffer, 'color0');

-        this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+        this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
        this.ssaoDepthBlurProxyTexture.define(sw, sh);
        this.ssaoDepthBlurProxyTexture.attachFramebuffer(this.ssaoBlurFirstPassFramebuffer, 'color0');

        this.ssaoDepthTexture.attachFramebuffer(this.ssaoBlurSecondPassFramebuffer, 'color0');

-        this.ssaoRenderable = getSsaoRenderable(webgl, depthTexture);
+        this.ssaoRenderable = getSsaoRenderable(webgl, this.downsampleFactor === 1 ? depthTextureOpaque : this.downsampledDepthTarget.texture);
        this.ssaoBlurFirstPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthTexture, 'horizontal');
        this.ssaoBlurSecondPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthBlurProxyTexture, 'vertical');
-        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, this.outlinesTarget.texture, this.ssaoDepthTexture);
+        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTextureOpaque, depthTextureTransparent, this.outlinesTarget.texture, this.ssaoDepthTexture);
    }

    setSize(width: number, height: number) {
@@ -356,11 +380,13 @@ export class PostprocessingPass {
            const sh = Math.floor(height * this.ssaoScale);
            this.target.setSize(width, height);
            this.outlinesTarget.setSize(width, height);
+            this.downsampledDepthTarget.setSize(sw, sh);
            this.ssaoDepthTexture.define(sw, sh);
            this.ssaoDepthBlurProxyTexture.define(sw, sh);

            ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
            ValueCell.update(this.outlinesRenderable.values.uTexSize, Vec2.set(this.outlinesRenderable.values.uTexSize.ref.value, width, height));
+            ValueCell.update(this.downsampleDepthRenderable.values.uTexSize, Vec2.set(this.downsampleDepthRenderable.values.uTexSize.ref.value, sw, sh));
            ValueCell.update(this.ssaoRenderable.values.uTexSize, Vec2.set(this.ssaoRenderable.values.uTexSize.ref.value, sw, sh));
            ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uTexSize, Vec2.set(this.ssaoBlurFirstPassRenderable.values.uTexSize.ref.value, sw, sh));
            ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uTexSize, Vec2.set(this.ssaoBlurSecondPassRenderable.values.uTexSize.ref.value, sw, sh));
@@ -431,6 +457,30 @@ export class PostprocessingPass {
                ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
            }

+            if (this.downsampleFactor !== props.occlusion.params.resolutionScale) {
+                needsUpdateSsao = true;
+
+                this.downsampleFactor = props.occlusion.params.resolutionScale;
+                this.ssaoScale = this.calcSsaoScale();
+
+                const sw = Math.floor(w * this.ssaoScale);
+                const sh = Math.floor(h * this.ssaoScale);
+
+                this.downsampledDepthTarget.setSize(sw, sh);
+                this.ssaoDepthTexture.define(sw, sh);
+                this.ssaoDepthBlurProxyTexture.define(sw, sh);
+
+                if (this.ssaoScale === 1) {
+                    ValueCell.update(this.ssaoRenderable.values.tDepth, this.drawPass.depthTextureTransparent);
+                } else {
+                    ValueCell.update(this.ssaoRenderable.values.tDepth, this.downsampledDepthTarget.texture);
+                }
+
+                ValueCell.update(this.downsampleDepthRenderable.values.uTexSize, Vec2.set(this.downsampleDepthRenderable.values.uTexSize.ref.value, sw, sh));
+                ValueCell.update(this.ssaoRenderable.values.uTexSize, Vec2.set(this.ssaoRenderable.values.uTexSize.ref.value, sw, sh));
+                ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uTexSize, Vec2.set(this.ssaoBlurFirstPassRenderable.values.uTexSize.ref.value, sw, sh));
+                ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uTexSize, Vec2.set(this.ssaoBlurSecondPassRenderable.values.uTexSize.ref.value, sw, sh));
+            }
        }

        if (props.outline.name === 'on') {
@@ -446,6 +496,8 @@ export class PostprocessingPass {
            ValueCell.updateIfChanged(this.outlinesRenderable.values.uFar, camera.far);
            ValueCell.updateIfChanged(this.outlinesRenderable.values.uMaxPossibleViewZDiff, maxPossibleViewZDiff);

+            ValueCell.update(this.renderable.values.uOutlineColor, Color.toVec3Normalized(this.renderable.values.uOutlineColor.ref.value, props.outline.params.color));
+
            ValueCell.updateIfChanged(this.renderable.values.uMaxPossibleViewZDiff, maxPossibleViewZDiff);
            if (this.renderable.values.dOutlineScale.ref.value !== outlineScale) { needsUpdateMain = true; }
            ValueCell.updateIfChanged(this.renderable.values.dOutlineScale, outlineScale);
@@ -489,6 +541,13 @@ export class PostprocessingPass {
        gl.scissor(x, y, width, height);
    }

+    private occlusionOffset: [x: number, y: number] = [0, 0];
+    setOcclusionOffset(x: number, y: number) {
+        this.occlusionOffset[0] = x;
+        this.occlusionOffset[1] = y;
+        ValueCell.update(this.renderable.values.uOcclusionOffset, Vec2.set(this.renderable.values.uOcclusionOffset.ref.value, x, y));
+    }
+
    render(camera: ICamera, toDrawingBuffer: boolean, transparentBackground: boolean, backgroundColor: Color, props: PostprocessingProps) {
        this.updateState(camera, transparentBackground, backgroundColor, props);

@@ -497,14 +556,13 @@ export class PostprocessingPass {
            this.outlinesRenderable.render();
        }

-        if (props.occlusion.name === 'on') {
-            const { x, y, width, height } = camera.viewport;
-            const sx = Math.floor(x * this.ssaoScale);
-            const sy = Math.floor(y * this.ssaoScale);
-            const sw = Math.ceil(width * this.ssaoScale);
-            const sh = Math.ceil(height * this.ssaoScale);
-            this.webgl.gl.viewport(sx, sy, sw, sh);
-            this.webgl.gl.scissor(sx, sy, sw, sh);
+        // don't render occlusion if offset is given,
+        // which will reuse the existing occlusion
+        if (props.occlusion.name === 'on' && this.occlusionOffset[0] === 0 && this.occlusionOffset[1] === 0) {
+            if (this.ssaoScale < 1) {
+                this.downsampledDepthTarget.bind();
+                this.downsampleDepthRenderable.render();
+            }

            this.ssaoFramebuffer.bind();
            this.ssaoRenderable.render();
@@ -514,9 +572,6 @@ export class PostprocessingPass {

            this.ssaoBlurSecondPassFramebuffer.bind();
            this.ssaoBlurSecondPassRenderable.render();
-
-            this.webgl.gl.viewport(x, y, width, height);
-            this.webgl.gl.scissor(x, y, width, height);
        }

        if (toDrawingBuffer) {
@@ -538,9 +593,9 @@ export class AntialiasingPass {
        return props.antialiasing.name !== 'off';
    }

-    readonly target: RenderTarget
-    private readonly fxaa: FxaaPass
-    private readonly smaa: SmaaPass
+    readonly target: RenderTarget;
+    private readonly fxaa: FxaaPass;
+    private readonly smaa: SmaaPass;

    constructor(webgl: WebGLContext, private drawPass: DrawPass) {
        const { colorTarget } = drawPass;
--- a/src/mol-canvas3d/passes/smaa.ts
+++ b/src/mol-canvas3d/passes/smaa.ts
@@ -31,12 +31,12 @@ export const SmaaParams = {
 export type SmaaProps = PD.Values<typeof SmaaParams>

 export class SmaaPass {
-    private readonly edgesTarget: RenderTarget
-    private readonly weightsTarget: RenderTarget
+    private readonly edgesTarget: RenderTarget;
+    private readonly weightsTarget: RenderTarget;

-    private readonly edgesRenderable: EdgesRenderable
-    private readonly weightsRenderable: WeightsRenderable
-    private readonly blendRenderable: BlendRenderable
+    private readonly edgesRenderable: EdgesRenderable;
+    private readonly weightsRenderable: WeightsRenderable;
+    private readonly blendRenderable: BlendRenderable;

    private _supported = false;
    get supported() {
@@ -201,7 +201,7 @@ function getWeightsRenderable(ctx: WebGLContext, edgesTexture: Texture): Weights
        uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)),
        uViewport: ValueCell.create(Vec4()),

-        dMaxSearchSteps: ValueCell.create(8),
+        dMaxSearchSteps: ValueCell.create(16),
    };

    // Note: loading image textures requires `HTMLImageElement` to be available
--- a/src/mol-canvas3d/passes/wboit.ts
+++ b/src/mol-canvas3d/passes/wboit.ts
@@ -45,11 +45,11 @@ function getEvaluateWboitRenderable(ctx: WebGLContext, wboitATexture: Texture, w
 //

 export class WboitPass {
-    private readonly renderable: EvaluateWboitRenderable
+    private readonly renderable: EvaluateWboitRenderable;

-    private readonly framebuffer: Framebuffer
-    private readonly textureA: Texture
-    private readonly textureB: Texture
+    private readonly framebuffer: Framebuffer;
+    private readonly textureA: Texture;
+    private readonly textureB: Texture;

    private _supported = false;
    get supported() {
--- a/src/mol-data/db/_spec/table.spec.ts
+++ b/src/mol-data/db/_spec/table.spec.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 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>
@@ -61,6 +61,29 @@ describe('column', () => {
    });
 });

+describe('string column', () => {
+    const xs = ['A', 'b', null, undefined];
+    const xsArr = xs.map(x => x ?? '');
+    const xsLC = xs.map(x => (x ?? '').toLowerCase());
+    const arr = Column.ofArray({ array: xs as any, schema: Column.Schema.str });
+    const arrLC = Column.ofArray({ array: xs as any, schema: Column.Schema.Str({ transform: 'lowercase' }) });
+    const aliasedLC = Column.ofArray({ array: xs as any, schema: Column.Schema.Aliased<'a' | 'b'>(Column.Schema.lstr) });
+
+    it('value', () => {
+        for (let i = 0; i < xs.length; i++) {
+            expect(arr.value(i)).toBe(xs[i] ?? '');
+            expect(arrLC.value(i)).toBe(xsLC[i] ?? '');
+            expect(aliasedLC.value(i)).toBe(xsLC[i]);
+        }
+    });
+
+    it('array', () => {
+        expect(arr.toArray()).toEqual(xsArr);
+        expect(arrLC.toArray()).toEqual(xsLC);
+        expect(aliasedLC.toArray()).toEqual(xsLC);
+    });
+});
+
 describe('table', () => {
    const schema = {
        x: Column.Schema.int,
--- a/src/mol-data/db/column.ts
+++ b/src/mol-data/db/column.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 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>
@@ -25,38 +25,39 @@ interface Column<T> {
 namespace Column {
    export type ArrayCtor<T> = { new(size: number): ArrayLike<T> }

-    export type Schema<T = any> = Schema.Str | Schema.Int | Schema.Float | Schema.Coordinate | Schema.Aliased<T> | Schema.Tensor | Schema.List<number|string>
+    export type Schema<T = any> = Schema.Str | Schema.Int | Schema.Float | Schema.Coordinate | Schema.Aliased<T> | Schema.Tensor | Schema.List<number | string>

    export namespace Schema {
        // T also serves as a default value for undefined columns

        type Base<T extends string> = { valueType: T }
-        export type Str = { '@type': 'str', T: string } & Base<'str'>
+        export type Str = { '@type': 'str', T: string, transform?: 'uppercase' | 'lowercase' } & Base<'str'>
        export type Int = { '@type': 'int', T: number } & Base<'int'>
        export type Float = { '@type': 'float', T: number } & Base<'float'>
        export type Coordinate = { '@type': 'coord', T: number } & Base<'float'>

        export type Tensor = { '@type': 'tensor', T: Tensors.Data, space: Tensors.Space, baseType: Int | Float } & Base<'tensor'>
-        export type Aliased<T> = { '@type': 'aliased', T: T } & Base<T extends string ? 'str' : 'int'>
-        export type List<T extends number|string> = { '@type': 'list', T: T[], separator: string, itemParse: (x: string) => T } & Base<'list'>
+        export type Aliased<T> = { '@type': 'aliased', T: T, transform?: T extends string ? 'uppercase' | 'lowercase' : never } & Base<T extends string ? 'str' : 'int'>
+        export type List<T extends number | string> = { '@type': 'list', T: T[], separator: string, itemParse: (x: string) => T } & Base<'list'>

        export const str: Str = { '@type': 'str', T: '', valueType: 'str' };
+        export const ustr: Str = { '@type': 'str', T: '', valueType: 'str', transform: 'uppercase' };
+        export const lstr: Str = { '@type': 'str', T: '', valueType: 'str', transform: 'lowercase' };
        export const int: Int = { '@type': 'int', T: 0, valueType: 'int' };
        export const coord: Coordinate = { '@type': 'coord', T: 0, valueType: 'float' };
        export const float: Float = { '@type': 'float', T: 0, valueType: 'float' };

-        export function Str(defaultValue = ''): Str { return { '@type': 'str', T: defaultValue, valueType: 'str' }; };
+        export function Str(options?: { defaultValue?: string, transform?: 'uppercase' | 'lowercase' }): Str { return { '@type': 'str', T: options?.defaultValue ?? '', transform: options?.transform, valueType: 'str' }; };
        export function Int(defaultValue = 0): Int { return { '@type': 'int', T: defaultValue, valueType: 'int' }; };
        export function Float(defaultValue = 0): Float { return { '@type': 'float', T: defaultValue, valueType: 'float' }; };
        export function Tensor(space: Tensors.Space, baseType: Int | Float = float): Tensor { return { '@type': 'tensor', T: space.create(), space, valueType: 'tensor', baseType }; }
        export function Vector(dim: number, baseType: Int | Float = float): Tensor { return Tensor(Tensors.Vector(dim, baseType['@type'] === 'int' ? Int32Array : Float64Array), baseType); }
        export function Matrix(rows: number, cols: number, baseType: Int | Float = float): Tensor { return Tensor(Tensors.ColumnMajorMatrix(rows, cols, baseType['@type'] === 'int' ? Int32Array : Float64Array), baseType); }

-        export function Aliased<T>(t: Str | Int, defaultValue?: T): Aliased<T> {
-            if (typeof defaultValue !== 'undefined') return { ...t, T: defaultValue } as any as Aliased<T>;
+        export function Aliased<T>(t: Str | Int): Aliased<T> {
            return t as any as Aliased<T>;
        }
-        export function List<T extends number|string>(separator: string, itemParse: (x: string) => T, defaultValue: T[] = []): List<T> {
+        export function List<T extends number | string>(separator: string, itemParse: (x: string) => T, defaultValue: T[] = []): List<T> {
            return { '@type': 'list', T: defaultValue, separator, itemParse, valueType: 'list' };
        }
    }
@@ -287,8 +288,13 @@ function lambdaColumn<T extends Column.Schema>({ value, valueKind, areValuesEqua

 function arrayColumn<T extends Column.Schema>({ array, schema, valueKind }: Column.ArraySpec<T>): Column<T['T']> {
    const rowCount = array.length;
+    const defaultValue = schema.T;
    const value: Column<T['T']>['value'] = schema.valueType === 'str'
-        ? row => { const v = array[row]; return typeof v === 'string' ? v : '' + v; }
+        ? (schema as Column.Schema.Str).transform === 'lowercase'
+            ? row => { const v = array[row]; return typeof v === 'string' ? v.toLowerCase() : `${v ?? defaultValue}`.toLowerCase(); }
+            : (schema as Column.Schema.Str).transform === 'uppercase'
+                ? row => { const v = array[row]; return typeof v === 'string' ? v.toUpperCase() : `${v ?? defaultValue}`.toUpperCase(); }
+                : row => { const v = array[row]; return typeof v === 'string' ? v : `${v ?? defaultValue}`; }
        : row => array[row];

    const isTyped = ColumnHelpers.isTypedArray(array);
@@ -300,15 +306,35 @@ function arrayColumn<T extends Column.Schema>({ array, schema, valueKind }: Colu
        value,
        valueKind: valueKind ? valueKind : row => Column.ValueKind.Present,
        toArray: schema.valueType === 'str'
-            ? params => {
-                const { start, end } = ColumnHelpers.getArrayBounds(rowCount, params);
-                const ret = new (params && typeof params.array !== 'undefined' ? params.array : (array as any).constructor)(end - start) as any;
-                for (let i = 0, _i = end - start; i < _i; i++) {
-                    const v = array[start + i];
-                    ret[i] = typeof v === 'string' ? v : '' + v;
+            ? (schema as Column.Schema.Str).transform === 'lowercase'
+                ? params => {
+                    const { start, end } = ColumnHelpers.getArrayBounds(rowCount, params);
+                    const ret = new (params && typeof params.array !== 'undefined' ? params.array : (array as any).constructor)(end - start) as any;
+                    for (let i = 0, _i = end - start; i < _i; i++) {
+                        const v = array[start + i];
+                        ret[i] = typeof v === 'string' ? v.toLowerCase() : `${v ?? defaultValue}`.toLowerCase();
+                    }
+                    return ret;
                }
-                return ret;
-            }
+                : (schema as Column.Schema.Str).transform === 'uppercase'
+                    ? params => {
+                        const { start, end } = ColumnHelpers.getArrayBounds(rowCount, params);
+                        const ret = new (params && typeof params.array !== 'undefined' ? params.array : (array as any).constructor)(end - start) as any;
+                        for (let i = 0, _i = end - start; i < _i; i++) {
+                            const v = array[start + i];
+                            ret[i] = typeof v === 'string' ? v.toUpperCase() : `${v ?? defaultValue}`.toUpperCase();
+                        }
+                        return ret;
+                    }
+                    : params => {
+                        const { start, end } = ColumnHelpers.getArrayBounds(rowCount, params);
+                        const ret = new (params && typeof params.array !== 'undefined' ? params.array : (array as any).constructor)(end - start) as any;
+                        for (let i = 0, _i = end - start; i < _i; i++) {
+                            const v = array[start + i];
+                            ret[i] = typeof v === 'string' ? v : `${v ?? defaultValue}`;
+                        }
+                        return ret;
+                    }
            : isTyped
                ? params => ColumnHelpers.typedArrayWindow(array, params) as any as ReadonlyArray<T>
                : params => {
--- a/src/mol-data/int/sorted-ranges.ts
+++ b/src/mol-data/int/sorted-ranges.ts
@@ -87,9 +87,9 @@ namespace SortedRanges {
    }

    export class Iterator<T extends number = number, I extends number = number> implements _Iterator<Segmentation.Segment<I>> {
-        private value: Segmentation.Segment<I> = { index: 0 as I, start: 0 as T, end: 0 as T }
+        private value: Segmentation.Segment<I> = { index: 0 as I, start: 0 as T, end: 0 as T };

-        private curIndex = 0
+        private curIndex = 0;

        hasNext: boolean = false;

--- a/src/mol-data/util/combination.ts
+++ b/src/mol-data/util/combination.ts
@@ -28,11 +28,11 @@ function nextIndex(n: number) {
 };

 export class CombinationIterator<T> implements Iterator<ReadonlyArray<T>> {
-    private value: T[]
-    private index: number
-    private maxIndex: number
+    private value: T[];
+    private index: number;
+    private maxIndex: number;

-    size: number
+    size: number;
    hasNext: boolean = false;

    move() {
--- a/src/mol-data/util/interval-iterator.ts
+++ b/src/mol-data/util/interval-iterator.ts
@@ -9,10 +9,10 @@ import { OrderedSet, Interval, Segmentation } from '../int';

 /** Emits a segment of length one for each element in the interval that is also in the set */
 export class IntervalIterator<I extends number = number> implements Iterator<Segmentation.Segment<I>> {
-    private value: Segmentation.Segment<I> = { index: 0 as I, start: 0, end: 0 }
+    private value: Segmentation.Segment<I> = { index: 0 as I, start: 0, end: 0 };

-    private curIndex = 0
-    private maxIndex = 0
+    private curIndex = 0;
+    private maxIndex = 0;

    hasNext: boolean = false;

--- a/src/mol-geo/geometry/_spec/marker.spec.ts
+++ b/src/mol-geo/geometry/_spec/marker.spec.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { getMarkersAverage } from '../marker-data';
+
+describe('marker-data', () => {
+    it('getMarkersAverage', () => {
+        expect(getMarkersAverage(new Uint8Array([0, 0, 0, 0]), 3)).toBe(0);
+        expect(getMarkersAverage(new Uint8Array([0, 0, 1, 0]), 3)).toBe(1 / 3);
+        expect(getMarkersAverage(new Uint8Array([0, 0, 0, 0]), 4)).toBe(0);
+        expect(getMarkersAverage(new Uint8Array([0, 0, 1, 0]), 4)).toBe(1 / 4);
+    });
+});
--- a/src/mol-geo/geometry/base.ts
+++ b/src/mol-geo/geometry/base.ts
@@ -17,6 +17,7 @@ import { UniformColorTheme } from '../../mol-theme/color/uniform';
 import { UniformSizeTheme } from '../../mol-theme/size/uniform';
 import { smoothstep } from '../../mol-math/interpolate';
 import { Material } from '../../mol-util/material';
+import { Clip } from '../../mol-util/clip';

 export const VisualQualityInfo = {
    'custom': {},
@@ -81,6 +82,7 @@ export namespace BaseGeometry {
        alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { label: 'Opacity', isEssential: true, description: 'How opaque/transparent the representation is rendered.' }),
        quality: PD.Select<VisualQuality>('auto', VisualQualityOptions, { isEssential: true, description: 'Visual/rendering quality of the representation.' }),
        material: Material.getParam(),
+        clip: PD.Group(Clip.Params),
    };
    export type Params = typeof Params

@@ -97,24 +99,42 @@ export namespace BaseGeometry {
    }

    export function createValues(props: PD.Values<Params>, counts: Counts) {
-        const { metalness, roughness } = Material.toObjectNormalized(props.material);
+        const clip = Clip.getClip(props.clip);
        return {
            alpha: ValueCell.create(props.alpha),
            uAlpha: ValueCell.create(props.alpha),
            uVertexCount: ValueCell.create(counts.vertexCount),
            uGroupCount: ValueCell.create(counts.groupCount),
            drawCount: ValueCell.create(counts.drawCount),
-            uMetalness: ValueCell.create(metalness),
-            uRoughness: ValueCell.create(roughness),
+            uMetalness: ValueCell.create(props.material.metalness),
+            uRoughness: ValueCell.create(props.material.roughness),
+            uBumpiness: ValueCell.create(props.material.bumpiness),
            dLightCount: ValueCell.create(1),
+
+            dClipObjectCount: ValueCell.create(clip.objects.count),
+            dClipVariant: ValueCell.create(clip.variant),
+            uClipObjectType: ValueCell.create(clip.objects.type),
+            uClipObjectInvert: ValueCell.create(clip.objects.invert),
+            uClipObjectPosition: ValueCell.create(clip.objects.position),
+            uClipObjectRotation: ValueCell.create(clip.objects.rotation),
+            uClipObjectScale: ValueCell.create(clip.objects.scale),
        };
    }

    export function updateValues(values: BaseValues, props: PD.Values<Params>) {
-        const { metalness, roughness } = Material.toObjectNormalized(props.material);
        ValueCell.updateIfChanged(values.alpha, props.alpha); // `uAlpha` is set in renderable.render
-        ValueCell.updateIfChanged(values.uMetalness, metalness);
-        ValueCell.updateIfChanged(values.uRoughness, roughness);
+        ValueCell.updateIfChanged(values.uMetalness, props.material.metalness);
+        ValueCell.updateIfChanged(values.uRoughness, props.material.roughness);
+        ValueCell.updateIfChanged(values.uBumpiness, props.material.bumpiness);
+
+        const clip = Clip.getClip(props.clip);
+        ValueCell.update(values.dClipObjectCount, clip.objects.count);
+        ValueCell.update(values.dClipVariant, clip.variant);
+        ValueCell.update(values.uClipObjectType, clip.objects.type);
+        ValueCell.update(values.uClipObjectInvert, clip.objects.invert);
+        ValueCell.update(values.uClipObjectPosition, clip.objects.position);
+        ValueCell.update(values.uClipObjectRotation, clip.objects.rotation);
+        ValueCell.update(values.uClipObjectScale, clip.objects.scale);
    }

    export function createRenderableState(props: Partial<PD.Values<Params>> = {}): RenderableState {
@@ -127,7 +147,6 @@ export namespace BaseGeometry {
            colorOnly: false,
            opaque,
            writeDepth: opaque,
-            noClip: false,
        };
    }

--- a/src/mol-geo/geometry/clipping-data.ts
+++ b/src/mol-geo/geometry/clipping-data.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author Alexander Rose <alexander.rose@weirdbyte.de>
 */
@@ -10,18 +10,13 @@ import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 import { Clipping } from '../../mol-theme/clipping';

 export type ClippingData = {
-    dClipObjectCount: ValueCell<number>,
-    dClipVariant: ValueCell<string>,
-
    tClipping: ValueCell<TextureImage<Uint8Array>>
    uClippingTexDim: ValueCell<Vec2>
    dClipping: ValueCell<boolean>,
 }

 export function applyClippingGroups(array: Uint8Array, start: number, end: number, groups: Clipping.Groups) {
-    for (let i = start; i < end; ++i) {
-        array[i] = groups;
-    }
+    array.fill(groups, start, end);
    return true;
 }

@@ -38,9 +33,6 @@ export function createClipping(count: number, clippingData?: ClippingData): Clip
        return clippingData;
    } else {
        return {
-            dClipObjectCount: ValueCell.create(0),
-            dClipVariant: ValueCell.create('instance'),
-
            tClipping: ValueCell.create(clipping),
            uClippingTexDim: ValueCell.create(Vec2.create(clipping.width, clipping.height)),
            dClipping: ValueCell.create(count > 0),
@@ -53,12 +45,10 @@ export function createEmptyClipping(clippingData?: ClippingData): ClippingData {
    if (clippingData) {
        ValueCell.update(clippingData.tClipping, emptyClippingTexture);
        ValueCell.update(clippingData.uClippingTexDim, Vec2.create(1, 1));
+        ValueCell.updateIfChanged(clippingData.dClipping, false);
        return clippingData;
    } else {
        return {
-            dClipObjectCount: ValueCell.create(0),
-            dClipVariant: ValueCell.create('instance'),
-
            tClipping: ValueCell.create(emptyClippingTexture),
            uClippingTexDim: ValueCell.create(Vec2.create(1, 1)),
            dClipping: ValueCell.create(false),
--- a/src/mol-geo/geometry/color-data.ts
+++ b/src/mol-geo/geometry/color-data.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 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>
@@ -11,11 +11,13 @@ import { Color } from '../../mol-util/color';
 import { Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { LocationIterator } from '../util/location-iterator';
 import { NullLocation } from '../../mol-model/location';
-import { LocationColor, ColorTheme } from '../../mol-theme/color';
-import { Geometry } from './geometry';
+import { LocationColor, ColorTheme, ColorVolume } from '../../mol-theme/color';
 import { createNullTexture, Texture } from '../../mol-gl/webgl/texture';

-export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance'
+export type ColorTypeLocation = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance';
+export type ColorTypeGrid = 'volume' | 'volumeInstance';
+export type ColorTypeDirect = 'direct';
+export type ColorType = ColorTypeLocation | ColorTypeGrid | ColorTypeDirect;

 export type ColorData = {
    uColor: ValueCell<Vec3>,
@@ -29,7 +31,7 @@ export type ColorData = {
    dUsePalette: ValueCell<boolean>,
 }

-export function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
+export function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any, any>, colorData?: ColorData): ColorData {
    const data = _createColors(locationIt, positionIt, colorTheme, colorData);
    if (colorTheme.palette) {
        ValueCell.updateIfChanged(data.dUsePalette, true);
@@ -40,16 +42,20 @@ export function createColors(locationIt: LocationIterator, positionIt: LocationI
    return data;
 }

-function _createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
-    switch (Geometry.getGranularity(locationIt, colorTheme.granularity)) {
+function _createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any, any>, colorData?: ColorData): ColorData {
+    switch (colorTheme.granularity) {
        case 'uniform': return createUniformColor(locationIt, colorTheme.color, colorData);
-        case 'instance': return createInstanceColor(locationIt, colorTheme.color, colorData);
+        case 'instance':
+            return locationIt.nonInstanceable
+                ? createGroupColor(locationIt, colorTheme.color, colorData)
+                : createInstanceColor(locationIt, colorTheme.color, colorData);
        case 'group': return createGroupColor(locationIt, colorTheme.color, colorData);
        case 'groupInstance': return createGroupInstanceColor(locationIt, colorTheme.color, colorData);
        case 'vertex': return createVertexColor(positionIt, colorTheme.color, colorData);
        case 'vertexInstance': return createVertexInstanceColor(positionIt, colorTheme.color, colorData);
-        case 'volume': return createGridColor((colorTheme as any).grid, 'volume', colorData);
-        case 'volumeInstance': return createGridColor((colorTheme as any).grid, 'volumeInstance', colorData);
+        case 'volume': return createGridColor(colorTheme.grid, 'volume', colorData);
+        case 'volumeInstance': return createGridColor(colorTheme.grid, 'volumeInstance', colorData);
+        case 'direct': return createDirectColor(colorData);
    }
 }

@@ -206,12 +212,6 @@ function createVertexInstanceColor(locationIt: LocationIterator, color: Location

 //

-interface ColorVolume {
-    colors: Texture
-    dimension: Vec3
-    transform: Vec4
-}
-
 export function createGridColor(grid: ColorVolume, type: ColorType, colorData?: ColorData): ColorData {
    const { colors, dimension, transform } = grid;
    const width = colors.getWidth();
@@ -237,3 +237,25 @@ export function createGridColor(grid: ColorVolume, type: ColorType, colorData?:
        };
    }
 }
+
+//
+
+/** Creates direct color */
+function createDirectColor(colorData?: ColorData): ColorData {
+    if (colorData) {
+        ValueCell.updateIfChanged(colorData.dColorType, 'direct');
+        return colorData;
+    } else {
+        return {
+            uColor: ValueCell.create(Vec3()),
+            tColor: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            tColorGrid: ValueCell.create(createNullTexture()),
+            tPalette: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            uColorTexDim: ValueCell.create(Vec2.create(1, 1)),
+            uColorGridDim: ValueCell.create(Vec3.create(1, 1, 1)),
+            uColorGridTransform: ValueCell.create(Vec4.create(0, 0, 0, 1)),
+            dColorType: ValueCell.create('direct'),
+            dUsePalette: ValueCell.create(false),
+        };
+    }
+}
--- a/Show More
+++ b/Show More