4.4.0

Mesoscale Explorer Driver tour

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/*
+build/*
+docs/site/*
+lib/*

.eslintrc.json

@@ -0,0 +1,122 @@
+{
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "impliedStrict": true
+        }
+    },
+    "rules": {
+        "indent": "off",
+        "arrow-parens": [
+            "off",
+            "as-needed"
+        ],
+        "brace-style": "off",
+        "comma-spacing": "off",
+        "space-infix-ops": "off",
+        "comma-dangle": "off",
+        "eqeqeq": [
+            "error",
+            "smart"
+        ],
+        "import/order": "off",
+        "no-eval": "warn",
+        "no-new-wrappers": "warn",
+        "no-trailing-spaces": "error",
+        "no-unsafe-finally": "warn",
+        "no-var": "error",
+        "spaced-comment": "error",
+        "semi": "warn",
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "ExportDefaultDeclaration",
+                "message": "Default exports are not allowed"
+            }
+        ],
+        "no-throw-literal": "error",
+        "key-spacing": "error",
+        "object-curly-spacing": ["error", "always"],
+        "array-bracket-spacing": "error",
+        "space-in-parens": "error",
+        "computed-property-spacing": "error",
+        "prefer-const": ["error", {
+            "destructuring": "all",
+            "ignoreReadBeforeAssign": false
+        }],
+        "space-before-function-paren": "off",
+        "func-call-spacing": "off",
+        "no-multi-spaces": "error",
+        "block-spacing": "error",
+        "keyword-spacing": "off",
+        "space-before-blocks": "error",
+        "semi-spacing": "error",
+        "no-constant-binary-expression": "error"
+    },
+    "overrides": [
+        {
+            "files": ["**/*.ts", "**/*.tsx"],
+            "parser": "@typescript-eslint/parser",
+            "parserOptions": {
+                "project": ["tsconfig.json", "tsconfig.commonjs.json"],
+                "sourceType": "module"
+            },
+            "plugins": [
+                "@typescript-eslint"
+            ],
+            "rules": {
+                "@typescript-eslint/ban-types": "off",
+                "@typescript-eslint/class-name-casing": "off",
+                "@typescript-eslint/indent": [
+                    "error",
+                    4
+                ],
+                "@typescript-eslint/member-delimiter-style": [
+                    "off",
+                    {
+                        "multiline": {
+                            "delimiter": "none",
+                            "requireLast": true
+                        },
+                        "singleline": {
+                            "delimiter": "semi",
+                            "requireLast": false
+                        }
+                    }
+                ],
+                "@typescript-eslint/prefer-namespace-keyword": "warn",
+                "@typescript-eslint/quotes": [
+                    "error",
+                    "single",
+                    {
+                        "avoidEscape": true,
+                        "allowTemplateLiterals": true
+                    }
+                ],
+                "@typescript-eslint/semi": [
+                    "off",
+                    null
+                ],
+                "@typescript-eslint/type-annotation-spacing": "error",
+                "@typescript-eslint/brace-style": [
+                    "error",
+                    "1tbs", { "allowSingleLine": true }
+                ],
+                "@typescript-eslint/comma-spacing": "error",
+                "@typescript-eslint/space-infix-ops": "error",
+                "@typescript-eslint/space-before-function-paren": ["error", {
+                    "anonymous": "always",
+                    "named": "never",
+                    "asyncArrow": "always"
+                }],
+                "@typescript-eslint/func-call-spacing": ["error"],
+                "@typescript-eslint/keyword-spacing": ["error"]
+            }
+        }
+    ]
+}

.github/pull_request_template.md

@@ -0,0 +1,11 @@
+<!-- Thank you for contributing to Mol* -->
+
+# Description
+
+
+## Actions
+
+- [ ] Added description of changes to the `[Unreleased]` section of `CHANGELOG.md`
+- [ ] Updated headers of modified files
+- [ ] Added my name to `package.json`'s `contributors`
+- [ ] (Optional but encouraged) Improved documentation in `docs`

.github/workflows/docs.yml

@@ -0,0 +1,62 @@
+name: Build & Deploy Docs
+
+on:
+  push:
+    branches: master
+    paths:
+      - docs/**
+      - ".github/workflows/docs.yml"
+  pull_request:
+    branches: master
+    paths:
+      - docs/**
+      - ".github/workflows/docs.yml"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 👨🏼‍💻 checkout
+        uses: actions/checkout@v4
+
+      - name: 🐍 python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+
+      - name: ⛓️ dependencies
+        run: |
+          pip install mkdocs-material
+      - name: 🔧 build site
+        run: |
+          cd docs
+          mkdocs build
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/master'
+    steps:
+      - name: 👨🏼‍💻 checkout
+        uses: actions/checkout@v4
+
+      - name: 🐍 python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+
+      - name: ⛓️ dependencies
+        run: |
+          pip install mkdocs-material
+      - name: 🔧 build site
+        run: |
+          cd docs
+          mkdocs build
+
+      - name: 🚢 deploy docs
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          deploy_key: ${{ secrets.DOCS_DEPLOY_KEY }}
+          external_repository: molstar/docs
+          publish_branch: gh-pages
+          publish_dir: ./docs/site

.github/workflows/node.yml

@@ -0,0 +1,24 @@
+name: Build
+
+on:
+  push:
+    branches: master
+  pull_request:
+    branches: master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: 18
+    - run: npm ci
+    - run: sudo apt-get install xvfb
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm install --no-save "gl@^6.0.2" && xvfb-run --auto-servernum npm run jest
+    - name: Build
+      run: npm run build

.gitignore

@@ -1,10 +1,14 @@
 build/
 lib/
+docs/site/
 
 node_modules/
 debug.log
 npm-debug.log
 tsconfig.tsbuildinfo
+tsconfig.commonjs.tsbuildinfo
 
 *.sublime-workspace
 .idea
+
+.DS_Store

.npmignore

@@ -0,0 +1,5 @@
+tests
+perf-tests
+_spec
+*.tsbuildinfo
+*.js.map

.travis.yml

@@ -1,19 +0,0 @@
-language: node_js
-os: linux
-sudo: required
-dist: trusty
-before_install:
-  - sudo apt-get install -y mesa-utils
-  - sudo apt-get install -y xvfb
-  - sudo apt-get install -y libgl1-mesa-dri
-  - sudo apt-get install -y libglapi-mesa
-  - sudo apt-get install -y libosmesa6
-  - sudo apt-get install -y gcc-4.9
-  - sudo apt-get install -y libstdc++6
-  - sudo apt-get install -y libxi-dev
-node_js:
-  - "12"
-  - "10"
-  - "8"
-before_script:
-  - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start

.vscode/extensions.json

@@ -0,0 +1,17 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"firsttris.vscode-jest-runner",
+		"slevesque.shader",
+		"stpn.vscode-graphql",
+		"wayou.vscode-todo-highlight"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Mol* Viewer",
+            "url": "http://localhost:1338/build/viewer/index.html",
+            "sourceMaps": true,
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

.vscode/settings.json

@@ -6,4 +6,9 @@
         "*.vert.ts": "glsl",
         "*.gql.ts": "graphql"
     },
+    "eslint.options": {
+        "overrideConfig": {
+            "ignorePatterns": ["webpack.config.js", "scripts/*"],
+        },
+    }
 }

.vscode/tasks.json

@@ -9,6 +9,20 @@
             "problemMatcher": [
                 "$tsc"
             ]
+        },
+        {
+            "type": "npm",
+            "script": "build-tsc",
+            "problemMatcher": [
+                "$tsc"
+            ]
+        },
+        {
+            "type": "npm",
+            "script": "watch",
+            "problemMatcher": [
+                "$tsc"
+            ]
         }
     ]
 }

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"

README.md

@@ -1,44 +1,53 @@
 [![License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](./LICENSE)
 [![npm version](https://badge.fury.io/js/molstar.svg)](https://www.npmjs.com/package/molstar)
-[![Build Status](https://travis-ci.org/molstar/molstar.svg?branch=master)](https://travis-ci.org/molstar/molstar)
+[![Build](https://github.com/molstar/molstar/actions/workflows/node.yml/badge.svg)](https://github.com/molstar/molstar/actions/workflows/node.yml)
 [![Gitter](https://badges.gitter.im/molstar/Lobby.svg)](https://gitter.im/molstar/Lobby)
 
 # Mol*
 
-The goal of **Mol\*** (*/'mol-star/*) is to provide a technology stack that will serve as basis for the next-generation data delivery and analysis tools for macromolecular structure data. This is a collaboration between PDBe and RCSB PDB teams and the development will be open source and available to anyone who wants to use it for developing visualisation tools for macromolecular structure data available from [PDB](https://www.wwpdb.org/) and other institutions.
+The goal of **Mol\*** (*/'mol-star/*) is to provide a technology stack that serves as a basis for the next-generation data delivery and analysis tools for (not only) macromolecular structure data. Mol* development was jointly initiated by PDBe and RCSB PDB to combine and build on the strengths of [LiteMol](https://litemol.org) (developed by PDBe) and [NGL](https://nglviewer.org) (developed by RCSB PDB) viewers.
 
-This particular project is the implementation of this technology (still under development).
+When using Mol*, please cite:
 
-*If you are looking for the "MOLeculAR structure annoTator", that package is now available on NPM as [MolArt](https://www.npmjs.com/package/molart).*
+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.
 
-## Project Overview
+### Protein Data Bank Integrations
 
-The core of Mol* currently consists of these modules (see under `src/`):
+- 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/`):
 
 - `mol-task` Computation abstraction with progress tracking and cancellation support.
-- `mol-data` Collections (integer based sets, interface to columns/tables, etc.)
+- `mol-data` Collections (integer-based sets, interface to columns/tables, etc.)
 - `mol-math` Math related (loosely) algorithms and data structures.
 - `mol-io` Parsing library. Each format is parsed into an interface that corresponds to the data stored by it. Support for common coordinate, experimental/map, and annotation data formats.
 - `mol-model` Data structures and algorithms (such as querying) for representing molecular data (including coordinate, experimental/map, and annotation data).
 - `mol-model-formats` Data format parsers for `mol-model`.
 - `mol-model-props` Common "custom properties".
-- `mol-script` A scriting language for creating representations/scenes and querying (includes the [MolQL query language](https://molql.github.io)).
+- `mol-script` A scripting language for creating representations/scenes and querying (includes the [MolQL query language](https://molql.github.io)).
 - `mol-geo` Creating (molecular) geometries.
 - `mol-theme` Theming for structure, volume and shape representations.
 - `mol-repr` Molecular representations for structures, volumes and shapes.
 - `mol-gl` A wrapper around WebGL.
-- `mol-canvas3d` A low level 3d view component. Uses `mol-geo` to generate geometries.
+- `mol-canvas3d` A low-level 3d view component. Uses `mol-geo` to generate geometries.
 - `mol-state` State representation tree with state saving and automatic updates.
-- `mol-app` Components for builduing UIs.
 - `mol-plugin` Allow to define modular Mol* plugin instances utilizing `mol-state` and `mol-canvas3d`.
+- `mol-plugin-state` State transformations, builders, and managers.
+- `mol-plugin-ui` React-based user interface for the Mol* plugin. Some components of the UI are usable outside the main plugin and can be integrated into 3rd party solutions.
 - `mol-util` Useful things that do not fit elsewhere.
 
-Moreover, the project contains the imlementation of `servers`, including
+Moreover, the project contains the implementation of `servers`, including
 
 - `servers/model` A tool for accessing coordinate and annotation data of molecular structures.
 - `servers/volume` A tool for accessing volumetric experimental data related to molecular structures.
+- `servers/plugin-state` A basic server to store Mol* Plugin states.
 
-The project also contains performance tests (`perf-tests`), `examples`, and basic proof of concept `apps` (CIF to BinaryCIF converter and JSON domain annotation to CIF converter).
+The project also contains performance tests (`perf-tests`), `examples`, and `cli` apps (CIF to BinaryCIF converter and JSON domain annotation to CIF converter).
 
 ## Previous Work
 This project builds on experience from previous solutions:
@@ -59,9 +68,24 @@ This project builds on experience from previous solutions:
 ### Build automatically on file save:
     npm run watch
 
+If working on just the viewer, ``npm run watch-viewer`` will provide shorter compile times.
+
 ### Build with debug mode enabled:
     DEBUG=molstar npm run watch
 
+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
 
@@ -82,20 +106,28 @@ and navigate to `build/viewer`
 
 ### Code generation
 **CIF schemas**
-Install CIFTools `npm install ciftools -g`
 
-    cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/mmcif.ts -p mmCIF
-    cifschema -mip ../../../../mol-data-o src/mol-io/reader/cif/schema/ccd.ts -p CCD
-    cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/bird.ts -p BIRD
+    node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/mmcif.ts -p mmCIF
+    node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/ccd.ts -p CCD
+    node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/bird.ts -p BIRD
+    node ./lib/commonjs/cli/cifschema -mip ../../../../mol-data -o src/mol-io/reader/cif/schema/cif-core.ts -p CifCore -aa
 
-**GraphQL schemas**
+**Lipid names**
 
-    node data/rcsb-graphql/codegen.js
+    node lib/commonjs/cli/lipid-params -o src/mol-model/structure/model/types/lipids.ts
+
+**Ion names**
+
+    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
 
 ### Other scripts
 **Create chem comp bond table**
 
-    export NODE_PATH="lib"; node --max-old-space-size=8192 build/src/apps/chem-comp-bond/create-table.js build/data/ccb.bcif -b
+    node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-table.js build/data/ccb.bcif -b
 
 **Test model server**
 
@@ -105,50 +137,61 @@ Install CIFTools `npm install ciftools -g`
 
     export NODE_PATH="lib"; node build/state-docs
 
-**Convert any CIF to BinaryCIF**
+**Convert any CIF to BinaryCIF (or vice versa)**
 
-    node build/model-server/preprocess -i file.cif -ob file.bcif
+    node lib/commonjs/servers/model/preprocess -i file.cif -ob file.bcif
 
-To see all available commands, use ``node build/model-server/preprocess -h``.
+To see all available commands, use ``node lib/commonjs/servers/model/preprocess -h``.
+
+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
 
-### Intallation
+### Installation
 
-If node complains about a missine acorn peer dependency, run the following commands
+If node complains about a missing acorn peer dependency, run the following commands
 
     npm update acorn --depth 20
     npm dedupe
 
 ### Editor
 
-To get syntax highlighting for shader and graphql files add the following to Visual Code's settings files and make sure relevant extanesions are installed in the editor.
+To get syntax highlighting for shader files add the following to Visual Code's settings files and make sure relevant extensions are installed in the editor.
 
     "files.associations": {
         "*.glsl.ts": "glsl",
         "*.frag.ts": "glsl",
-        "*.vert.ts": "glsl",
-        "*.gql.ts": "graphql"
+        "*.vert.ts": "glsl"
     },
 
 ## Publish
 
-## Prerelease
-    npm version prerelease # asumes the current version ends with '-dev.X'
+### Prerelease
+    npm version prerelease # assumes the current version ends with '-dev.X'
     npm publish --tag next
 
-## Release
+### Release
     npm version 0.X.0 # provide valid semver string
     npm publish
 
+## Deploy
+    npm run test
+    npm run build
+    node ./scripts/deploy.js # currently updates the viewer on molstar.org/viewer
+
 ## Contributing
 Just open an issue or make a pull request. All contributions are welcome.
 
-## Roadmap
-Continually develop this prototype project. As individual modules become stable, make them into standalone libraries.
-
 ## Funding
 Funding sources include but are not limited to:
 * [RCSB PDB](https://www.rcsb.org) funding by a grant [DBI-1338415; PI: SK Burley] from the NSF, the NIH, and the US DoE
 * [PDBe, EMBL-EBI](https://pdbe.org)
-* [CEITEC](https://www.ceitec.eu/)
+* [CEITEC](https://www.ceitec.eu/)
+* [EntosAI](https://www.entos.ai)

data/cif-field-names/bird-field-names.csv

@@ -0,0 +1,88 @@
+pdbx_reference_molecule.prd_id
+pdbx_reference_molecule.name
+pdbx_reference_molecule.represent_as
+pdbx_reference_molecule.type
+pdbx_reference_molecule.type_evidence_code
+pdbx_reference_molecule.class
+pdbx_reference_molecule.class_evidence_code
+pdbx_reference_molecule.formula
+pdbx_reference_molecule.chem_comp_id
+pdbx_reference_molecule.formula_weight
+pdbx_reference_molecule.release_status
+pdbx_reference_molecule.replaces
+pdbx_reference_molecule.replaced_by
+pdbx_reference_molecule.compound_details
+pdbx_reference_molecule.description
+pdbx_reference_molecule.representative_PDB_id_code
+
+pdbx_reference_entity_list.prd_id
+pdbx_reference_entity_list.ref_entity_id
+pdbx_reference_entity_list.component_id
+pdbx_reference_entity_list.type
+pdbx_reference_entity_list.details
+
+pdbx_reference_entity_nonpoly.prd_id
+pdbx_reference_entity_nonpoly.ref_entity_id
+pdbx_reference_entity_nonpoly.name
+pdbx_reference_entity_nonpoly.chem_comp_id
+
+pdbx_reference_entity_link.prd_id
+pdbx_reference_entity_link.link_id
+pdbx_reference_entity_link.link_class
+pdbx_reference_entity_link.ref_entity_id_1
+pdbx_reference_entity_link.entity_seq_num_1
+pdbx_reference_entity_link.comp_id_1
+pdbx_reference_entity_link.atom_id_1
+pdbx_reference_entity_link.ref_entity_id_2
+pdbx_reference_entity_link.entity_seq_num_2
+pdbx_reference_entity_link.comp_id_2
+pdbx_reference_entity_link.atom_id_2
+pdbx_reference_entity_link.value_order
+pdbx_reference_entity_link.component_1
+pdbx_reference_entity_link.component_2
+pdbx_reference_entity_link.details
+
+pdbx_reference_entity_poly_link.prd_id
+pdbx_reference_entity_poly_link.ref_entity_id
+pdbx_reference_entity_poly_link.link_id
+pdbx_reference_entity_poly_link.atom_id_1
+pdbx_reference_entity_poly_link.comp_id_1
+pdbx_reference_entity_poly_link.entity_seq_num_1
+pdbx_reference_entity_poly_link.atom_id_2
+pdbx_reference_entity_poly_link.comp_id_2
+pdbx_reference_entity_poly_link.entity_seq_num_2
+pdbx_reference_entity_poly_link.value_order
+pdbx_reference_entity_poly_link.component_id
+
+pdbx_reference_entity_poly.prd_id
+pdbx_reference_entity_poly.ref_entity_id
+pdbx_reference_entity_poly.db_code
+pdbx_reference_entity_poly.db_name
+pdbx_reference_entity_poly.type
+
+pdbx_reference_entity_sequence.prd_id
+pdbx_reference_entity_sequence.ref_entity_id
+pdbx_reference_entity_sequence.type
+pdbx_reference_entity_sequence.NRP_flag
+pdbx_reference_entity_sequence.one_letter_codes
+
+pdbx_reference_entity_poly_seq.prd_id
+pdbx_reference_entity_poly_seq.ref_entity_id
+pdbx_reference_entity_poly_seq.num
+pdbx_reference_entity_poly_seq.mon_id
+pdbx_reference_entity_poly_seq.parent_mon_id
+pdbx_reference_entity_poly_seq.hetero
+pdbx_reference_entity_poly_seq.observed
+
+pdbx_reference_entity_src_nat.prd_id
+pdbx_reference_entity_src_nat.ref_entity_id
+pdbx_reference_entity_src_nat.ordinal
+pdbx_reference_entity_src_nat.taxid
+pdbx_reference_entity_src_nat.organism_scientific
+pdbx_reference_entity_src_nat.db_code
+pdbx_reference_entity_src_nat.db_name
+
+pdbx_prd_audit.prd_id
+pdbx_prd_audit.date
+pdbx_prd_audit.processing_site
+pdbx_prd_audit.action_type

data/cif-field-names/ccd-field-names.csv

@@ -0,0 +1,60 @@
+chem_comp.id
+chem_comp.name
+chem_comp.type
+chem_comp.pdbx_type
+chem_comp.formula
+chem_comp.mon_nstd_parent_comp_id
+chem_comp.pdbx_synonyms
+chem_comp.pdbx_formal_charge
+chem_comp.pdbx_initial_date
+chem_comp.pdbx_modified_date
+chem_comp.pdbx_ambiguous_flag
+chem_comp.pdbx_release_status
+chem_comp.pdbx_replaced_by
+chem_comp.pdbx_replaces
+chem_comp.formula_weight
+chem_comp.one_letter_code
+chem_comp.three_letter_code
+chem_comp.pdbx_model_coordinates_details
+chem_comp.pdbx_model_coordinates_missing_flag
+chem_comp.pdbx_ideal_coordinates_details
+chem_comp.pdbx_ideal_coordinates_missing_flag
+chem_comp.pdbx_model_coordinates_db_code
+chem_comp.pdbx_processing_site
+
+chem_comp_atom.comp_id
+chem_comp_atom.atom_id
+chem_comp_atom.alt_atom_id
+chem_comp_atom.type_symbol
+chem_comp_atom.charge
+chem_comp_atom.pdbx_align
+chem_comp_atom.pdbx_aromatic_flag
+chem_comp_atom.pdbx_leaving_atom_flag
+chem_comp_atom.pdbx_stereo_config
+chem_comp_atom.model_Cartn_x
+chem_comp_atom.model_Cartn_y
+chem_comp_atom.model_Cartn_z
+chem_comp_atom.pdbx_model_Cartn_x_ideal
+chem_comp_atom.pdbx_model_Cartn_y_ideal
+chem_comp_atom.pdbx_model_Cartn_z_ideal
+chem_comp_atom.pdbx_ordinal
+
+chem_comp_bond.comp_id
+chem_comp_bond.atom_id_1
+chem_comp_bond.atom_id_2
+chem_comp_bond.value_order
+chem_comp_bond.pdbx_aromatic_flag
+chem_comp_bond.pdbx_stereo_config
+chem_comp_bond.pdbx_ordinal
+
+pdbx_chem_comp_descriptor.comp_id
+pdbx_chem_comp_descriptor.type
+pdbx_chem_comp_descriptor.program
+pdbx_chem_comp_descriptor.program_version
+pdbx_chem_comp_descriptor.descriptor
+
+pdbx_chem_comp_identifier.comp_id
+pdbx_chem_comp_identifier.type
+pdbx_chem_comp_identifier.program
+pdbx_chem_comp_identifier.program_version
+pdbx_chem_comp_identifier.identifier

data/cif-field-names/cif-core-field-names.csv

@@ -0,0 +1,69 @@
+audit.block_doi
+
+database_code.depnum_ccdc_archive
+database_code.depnum_ccdc_fiz
+database_code.icsd
+database_code.mdf
+database_code.nbs
+database_code.csd
+database_code.cod
+
+chemical.name_systematic
+chemical.name_common
+chemical.melting_point
+
+chemical_formula.moiety
+chemical_formula.sum
+chemical_formula.weight
+
+atom_type.symbol
+atom_type.description
+
+atom_type_scat.dispersion_real
+atom_type_scat.dispersion_imag
+atom_type_scat.source
+
+space_group.crystal_system
+space_group.name_h-m_full
+space_group.it_number
+space_group_symop.operation_xyz
+
+cell.length_a
+cell.length_b
+cell.length_c
+cell.angle_alpha
+cell.angle_beta
+cell.angle_gamma
+cell.volume
+cell.formula_units_z
+
+atom_site.label
+atom_site.type_symbol
+atom_site.fract_x
+atom_site.fract_y
+atom_site.fract_z
+atom_site.u_iso_or_equiv
+atom_site.adp_type
+atom_site.occupancy
+atom_site.calc_flag
+atom_site.refinement_flags
+atom_site.disorder_assembly
+atom_site.disorder_group
+atom_site.site_symmetry_multiplicity
+
+atom_site_aniso.label
+atom_site_aniso.u
+atom_site_aniso.u_11
+atom_site_aniso.u_22
+atom_site_aniso.u_33
+atom_site_aniso.u_23
+atom_site_aniso.u_13
+atom_site_aniso.u_12
+
+geom_bond.atom_site_label_1
+geom_bond.atom_site_label_2
+geom_bond.distance
+geom_bond.site_symmetry_1
+geom_bond.site_symmetry_2
+geom_bond.publ_flag
+geom_bond.valence

data/cif-field-names/mmcif-field-names.csv

@@ -0,0 +1,873 @@
+atom_sites.entry_id
+atom_sites.fract_transf_matrix
+atom_sites.fract_transf_vector
+
+atom_site.group_PDB
+atom_site.id
+atom_site.type_symbol
+atom_site.label_atom_id
+atom_site.label_alt_id
+atom_site.label_comp_id
+atom_site.label_asym_id
+atom_site.label_entity_id
+atom_site.label_seq_id
+atom_site.pdbx_PDB_ins_code
+atom_site.pdbx_formal_charge
+atom_site.Cartn_x
+atom_site.Cartn_y
+atom_site.Cartn_z
+atom_site.occupancy
+atom_site.B_iso_or_equiv
+atom_site.auth_atom_id
+atom_site.auth_comp_id
+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
+atom_site_anisotrop.U_esd
+atom_site_anisotrop.pdbx_PDB_ins_code
+atom_site_anisotrop.pdbx_auth_asym_id
+atom_site_anisotrop.pdbx_auth_atom_id
+atom_site_anisotrop.pdbx_auth_comp_id
+atom_site_anisotrop.pdbx_auth_seq_id
+atom_site_anisotrop.pdbx_label_alt_id
+atom_site_anisotrop.pdbx_label_asym_id
+atom_site_anisotrop.pdbx_label_atom_id
+atom_site_anisotrop.pdbx_label_comp_id
+atom_site_anisotrop.pdbx_label_seq_id
+atom_site_anisotrop.type_symbol
+
+chem_comp.id
+chem_comp.type
+chem_comp.mon_nstd_flag
+chem_comp.name
+chem_comp.pdbx_synonyms
+chem_comp.formula
+chem_comp.formula_weight
+
+chem_comp_bond.comp_id
+chem_comp_bond.pdbx_stereo_config
+chem_comp_bond.pdbx_ordinal
+chem_comp_bond.pdbx_aromatic_flag
+chem_comp_bond.atom_id_1
+chem_comp_bond.atom_id_2
+chem_comp_bond.value_order
+
+pdbx_chem_comp_identifier.comp_id
+pdbx_chem_comp_identifier.type
+pdbx_chem_comp_identifier.program
+pdbx_chem_comp_identifier.program_version
+pdbx_chem_comp_identifier.identifier
+
+pdbx_chem_comp_related.comp_id
+pdbx_chem_comp_related.related_comp_id
+pdbx_chem_comp_related.relationship_type
+pdbx_chem_comp_related.details
+
+pdbx_chem_comp_synonyms.comp_id
+pdbx_chem_comp_synonyms.name
+pdbx_chem_comp_synonyms.provenance
+
+cell.entry_id
+cell.length_a
+cell.length_b
+cell.length_c
+cell.angle_alpha
+cell.angle_beta
+cell.angle_gamma
+cell.Z_PDB
+cell.pdbx_unique_axis
+
+pdbx_database_related.db_name
+pdbx_database_related.details
+pdbx_database_related.db_id
+pdbx_database_related.content_type
+
+pdbx_database_status.status_code
+pdbx_database_status.status_code_sf
+pdbx_database_status.status_code_mr
+pdbx_database_status.entry_id
+pdbx_database_status.recvd_initial_deposition_date
+pdbx_database_status.SG_entry
+pdbx_database_status.deposit_site
+pdbx_database_status.process_site
+pdbx_database_status.status_code_cs
+pdbx_database_status.methods_development_category
+pdbx_database_status.pdb_format_compatible
+
+entity.id
+entity.type
+entity.src_method
+entity.pdbx_description
+entity.pdbx_parent_entity_id
+entity.formula_weight
+entity.pdbx_number_of_molecules
+entity.details
+entity.pdbx_mutation
+entity.pdbx_fragment
+entity.pdbx_ec
+
+entity_poly.entity_id
+entity_poly.type
+entity_poly.nstd_linkage
+entity_poly.nstd_monomer
+entity_poly.pdbx_seq_one_letter_code
+entity_poly.pdbx_seq_one_letter_code_can
+entity_poly.pdbx_strand_id
+entity_poly.pdbx_target_identifier
+
+entity_poly_seq.entity_id
+entity_poly_seq.num
+entity_poly_seq.mon_id
+entity_poly_seq.hetero
+
+entity_src_gen.entity_id
+entity_src_gen.pdbx_src_id
+entity_src_gen.pdbx_beg_seq_num
+entity_src_gen.pdbx_end_seq_num
+entity_src_gen.pdbx_gene_src_gene
+entity_src_gen.pdbx_gene_src_scientific_name
+entity_src_gen.plasmid_name
+
+entity_src_nat.entity_id
+entity_src_nat.pdbx_src_id
+entity_src_nat.pdbx_beg_seq_num
+entity_src_nat.pdbx_end_seq_num
+entity_src_nat.pdbx_organism_scientific
+entity_src_nat.pdbx_plasmid_name
+
+pdbx_entity_instance_feature.ordinal
+pdbx_entity_instance_feature.feature_type
+pdbx_entity_instance_feature.details
+pdbx_entity_instance_feature.asym_id
+pdbx_entity_instance_feature.comp_id
+pdbx_entity_instance_feature.seq_num
+pdbx_entity_instance_feature.auth_asym_id
+pdbx_entity_instance_feature.auth_comp_id
+pdbx_entity_instance_feature.auth_seq_num
+
+pdbx_entity_src_syn.entity_id
+pdbx_entity_src_syn.pdbx_src_id
+pdbx_entity_src_syn.pdbx_beg_seq_num
+pdbx_entity_src_syn.pdbx_end_seq_num
+pdbx_entity_src_syn.organism_scientific
+
+pdbx_entity_branch.entity_id
+pdbx_entity_branch.type
+
+pdbx_entity_branch_list.entity_id
+pdbx_entity_branch_list.comp_id
+pdbx_entity_branch_list.num
+pdbx_entity_branch_list.hetero
+
+pdbx_entity_branch_link.link_id
+pdbx_entity_branch_link.entity_id
+pdbx_entity_branch_link.entity_branch_list_num_1
+pdbx_entity_branch_link.comp_id_1
+pdbx_entity_branch_link.atom_id_1
+pdbx_entity_branch_link.leaving_atom_id_1
+pdbx_entity_branch_link.atom_stereo_config_1
+pdbx_entity_branch_link.entity_branch_list_num_2
+pdbx_entity_branch_link.comp_id_2
+pdbx_entity_branch_link.atom_id_2
+pdbx_entity_branch_link.leaving_atom_id_2
+pdbx_entity_branch_link.atom_stereo_config_2
+pdbx_entity_branch_link.value_order
+pdbx_entity_branch_link.details
+
+pdbx_branch_scheme.asym_id
+pdbx_branch_scheme.entity_id
+pdbx_branch_scheme.mon_id
+pdbx_branch_scheme.num
+pdbx_branch_scheme.auth_asym_id
+pdbx_branch_scheme.auth_mon_id
+pdbx_branch_scheme.auth_seq_num
+pdbx_branch_scheme.hetero
+pdbx_branch_scheme.pdb_mon_id
+pdbx_branch_scheme.pdb_asym_id
+pdbx_branch_scheme.pdb_seq_num
+
+pdbx_entity_branch_descriptor.ordinal
+pdbx_entity_branch_descriptor.entity_id
+pdbx_entity_branch_descriptor.descriptor
+pdbx_entity_branch_descriptor.type
+pdbx_entity_branch_descriptor.program
+pdbx_entity_branch_descriptor.program_version
+
+pdbx_entity_nonpoly.entity_id
+pdbx_entity_nonpoly.name
+pdbx_entity_nonpoly.comp_id
+
+pdbx_nonpoly_scheme.asym_id
+pdbx_nonpoly_scheme.entity_id
+pdbx_nonpoly_scheme.mon_id
+pdbx_nonpoly_scheme.ndb_seq_num
+pdbx_nonpoly_scheme.pdb_seq_num
+pdbx_nonpoly_scheme.auth_seq_num
+pdbx_nonpoly_scheme.pdb_mon_id
+pdbx_nonpoly_scheme.auth_mon_id
+pdbx_nonpoly_scheme.pdb_strand_id
+pdbx_nonpoly_scheme.pdb_ins_code
+
+entry.id
+
+audit_conform.dict_name
+audit_conform.dict_version
+audit_conform.dict_location
+
+database_2.database_id
+database_2.database_code
+
+audit_author.name
+audit_author.pdbx_ordinal
+audit_author.identifier_ORCID
+
+citation.id
+citation.title
+citation.journal_abbrev
+citation.journal_volume
+citation.page_first
+citation.page_last
+citation.year
+citation.journal_id_ASTM
+citation.country
+citation.journal_id_ISSN
+citation.journal_id_CSD
+citation.book_publisher
+citation.pdbx_database_id_PubMed
+citation.pdbx_database_id_DOI
+
+citation_author.citation_id
+citation_author.name
+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
+
+struct_asym.id
+struct_asym.pdbx_blank_PDB_chainid_flag
+struct_asym.pdbx_modified
+struct_asym.entity_id
+struct_asym.details
+
+struct_conf.conf_type_id
+struct_conf.id
+struct_conf.pdbx_PDB_helix_id
+struct_conf.beg_label_comp_id
+struct_conf.beg_label_asym_id
+struct_conf.beg_label_seq_id
+struct_conf.pdbx_beg_PDB_ins_code
+struct_conf.end_label_comp_id
+struct_conf.end_label_asym_id
+struct_conf.end_label_seq_id
+struct_conf.pdbx_end_PDB_ins_code
+struct_conf.beg_auth_comp_id
+struct_conf.beg_auth_asym_id
+struct_conf.beg_auth_seq_id
+struct_conf.end_auth_comp_id
+struct_conf.end_auth_asym_id
+struct_conf.end_auth_seq_id
+struct_conf.pdbx_PDB_helix_class
+struct_conf.details
+struct_conf.pdbx_PDB_helix_length
+
+struct_conn.id
+struct_conn.conn_type_id
+struct_conn.pdbx_PDB_id
+struct_conn.ptnr1_label_asym_id
+struct_conn.ptnr1_label_comp_id
+struct_conn.ptnr1_label_seq_id
+struct_conn.ptnr1_label_atom_id
+struct_conn.pdbx_ptnr1_label_alt_id
+struct_conn.pdbx_ptnr1_PDB_ins_code
+struct_conn.pdbx_ptnr1_standard_comp_id
+struct_conn.ptnr1_symmetry
+struct_conn.ptnr2_label_asym_id
+struct_conn.ptnr2_label_comp_id
+struct_conn.ptnr2_label_seq_id
+struct_conn.ptnr2_label_atom_id
+struct_conn.pdbx_ptnr2_label_alt_id
+struct_conn.pdbx_ptnr2_PDB_ins_code
+struct_conn.ptnr1_auth_asym_id
+struct_conn.ptnr1_auth_comp_id
+struct_conn.ptnr1_auth_seq_id
+struct_conn.ptnr2_auth_asym_id
+struct_conn.ptnr2_auth_comp_id
+struct_conn.ptnr2_auth_seq_id
+struct_conn.ptnr2_symmetry
+struct_conn.pdbx_ptnr3_label_atom_id
+struct_conn.pdbx_ptnr3_label_seq_id
+struct_conn.pdbx_ptnr3_label_comp_id
+struct_conn.pdbx_ptnr3_label_asym_id
+struct_conn.pdbx_ptnr3_label_alt_id
+struct_conn.pdbx_ptnr3_PDB_ins_code
+struct_conn.details
+struct_conn.pdbx_dist_value
+struct_conn.pdbx_value_order
+
+struct_conn_type.id
+struct_conn_type.criteria
+struct_conn_type.reference
+
+struct_keywords.entry_id
+struct_keywords.pdbx_keywords
+struct_keywords.text
+
+struct_ncs_oper.id
+struct_ncs_oper.code
+struct_ncs_oper.matrix
+struct_ncs_oper.vector
+struct_ncs_oper.details
+
+struct_sheet_range.sheet_id
+struct_sheet_range.id
+struct_sheet_range.beg_label_comp_id
+struct_sheet_range.beg_label_asym_id
+struct_sheet_range.beg_label_seq_id
+struct_sheet_range.pdbx_beg_PDB_ins_code
+struct_sheet_range.end_label_comp_id
+struct_sheet_range.end_label_asym_id
+struct_sheet_range.end_label_seq_id
+struct_sheet_range.pdbx_end_PDB_ins_code
+struct_sheet_range.beg_auth_comp_id
+struct_sheet_range.beg_auth_asym_id
+struct_sheet_range.beg_auth_seq_id
+struct_sheet_range.end_auth_comp_id
+struct_sheet_range.end_auth_asym_id
+struct_sheet_range.end_auth_seq_id
+
+struct_site.id
+struct_site.pdbx_evidence_code
+struct_site.pdbx_auth_asym_id
+struct_site.pdbx_auth_comp_id
+struct_site.pdbx_auth_seq_id
+struct_site.pdbx_auth_ins_code
+struct_site.pdbx_num_residues
+struct_site.details
+
+struct_site_gen.id
+struct_site_gen.site_id
+struct_site_gen.pdbx_num_res
+struct_site_gen.label_comp_id
+struct_site_gen.label_asym_id
+struct_site_gen.label_seq_id
+struct_site_gen.pdbx_auth_ins_code
+struct_site_gen.auth_comp_id
+struct_site_gen.auth_asym_id
+struct_site_gen.auth_seq_id
+struct_site_gen.label_atom_id
+struct_site_gen.label_alt_id
+struct_site_gen.symmetry
+struct_site_gen.details
+
+symmetry.entry_id
+symmetry.cell_setting
+symmetry.Int_Tables_number
+symmetry.space_group_name_Hall
+symmetry.space_group_name_H-M
+
+pdbx_molecule.instance_id
+pdbx_molecule.prd_id
+pdbx_molecule.asym_id
+
+pdbx_molecule_features.prd_id
+pdbx_molecule_features.name
+pdbx_molecule_features.type
+pdbx_molecule_features.class
+pdbx_molecule_features.details
+
+pdbx_reference_entity_link.prd_id
+pdbx_reference_entity_link.link_id
+pdbx_reference_entity_link.link_class
+pdbx_reference_entity_link.ref_entity_id_1
+pdbx_reference_entity_link.entity_seq_num_1
+pdbx_reference_entity_link.comp_id_1
+pdbx_reference_entity_link.atom_id_1
+pdbx_reference_entity_link.ref_entity_id_2
+pdbx_reference_entity_link.entity_seq_num_2
+pdbx_reference_entity_link.comp_id_2
+pdbx_reference_entity_link.atom_id_2
+pdbx_reference_entity_link.value_order
+pdbx_reference_entity_link.component_1
+pdbx_reference_entity_link.component_2
+pdbx_reference_entity_link.details
+
+pdbx_reference_entity_list.prd_id
+pdbx_reference_entity_list.ref_entity_id
+pdbx_reference_entity_list.component_id
+pdbx_reference_entity_list.type
+pdbx_reference_entity_list.details
+
+pdbx_reference_entity_poly_link.prd_id
+pdbx_reference_entity_poly_link.ref_entity_id
+pdbx_reference_entity_poly_link.link_id
+pdbx_reference_entity_poly_link.atom_id_1
+pdbx_reference_entity_poly_link.comp_id_1
+pdbx_reference_entity_poly_link.entity_seq_num_1
+pdbx_reference_entity_poly_link.atom_id_2
+pdbx_reference_entity_poly_link.comp_id_2
+pdbx_reference_entity_poly_link.entity_seq_num_2
+pdbx_reference_entity_poly_link.value_order
+pdbx_reference_entity_poly_link.component_id
+
+pdbx_struct_assembly.id
+pdbx_struct_assembly.details
+pdbx_struct_assembly.method_details
+pdbx_struct_assembly.oligomeric_details
+pdbx_struct_assembly.oligomeric_count
+
+pdbx_struct_assembly_gen.assembly_id
+pdbx_struct_assembly_gen.oper_expression
+pdbx_struct_assembly_gen.asym_id_list
+
+pdbx_struct_oper_list.id
+pdbx_struct_oper_list.type
+pdbx_struct_oper_list.name
+pdbx_struct_oper_list.symmetry_operation
+pdbx_struct_oper_list.matrix
+pdbx_struct_oper_list.vector
+
+pdbx_struct_mod_residue.id
+pdbx_struct_mod_residue.label_asym_id
+pdbx_struct_mod_residue.label_seq_id
+pdbx_struct_mod_residue.label_comp_id
+pdbx_struct_mod_residue.auth_asym_id
+pdbx_struct_mod_residue.auth_seq_id
+pdbx_struct_mod_residue.auth_comp_id
+pdbx_struct_mod_residue.PDB_ins_code
+pdbx_struct_mod_residue.parent_comp_id
+pdbx_struct_mod_residue.details
+
+pdbx_unobs_or_zero_occ_residues.id
+pdbx_unobs_or_zero_occ_residues.PDB_model_num
+pdbx_unobs_or_zero_occ_residues.polymer_flag
+pdbx_unobs_or_zero_occ_residues.occupancy_flag
+pdbx_unobs_or_zero_occ_residues.auth_asym_id
+pdbx_unobs_or_zero_occ_residues.auth_comp_id
+pdbx_unobs_or_zero_occ_residues.auth_seq_id
+pdbx_unobs_or_zero_occ_residues.PDB_ins_code
+pdbx_unobs_or_zero_occ_residues.label_asym_id
+pdbx_unobs_or_zero_occ_residues.label_comp_id
+pdbx_unobs_or_zero_occ_residues.label_seq_id
+
+ihm_struct_assembly.id
+ihm_struct_assembly.name
+ihm_struct_assembly.description
+
+ihm_struct_assembly_details.id
+ihm_struct_assembly_details.assembly_id
+ihm_struct_assembly_details.parent_assembly_id
+ihm_struct_assembly_details.entity_description
+ihm_struct_assembly_details.entity_id
+ihm_struct_assembly_details.asym_id
+ihm_struct_assembly_details.entity_poly_segment_id
+
+ihm_model_representation.id
+ihm_model_representation.name
+ihm_model_representation.details
+
+ihm_model_representation_details.id
+ihm_model_representation_details.representation_id
+ihm_model_representation_details.entity_id
+ihm_model_representation_details.entity_description
+ihm_model_representation_details.entity_asym_id
+ihm_model_representation_details.entity_poly_segment_id
+ihm_model_representation_details.model_object_primitive
+ihm_model_representation_details.starting_model_id
+ihm_model_representation_details.model_mode
+ihm_model_representation_details.model_granularity
+ihm_model_representation_details.model_object_count
+
+ihm_external_reference_info.reference_id
+ihm_external_reference_info.reference_provider
+ihm_external_reference_info.reference_type
+ihm_external_reference_info.reference
+ihm_external_reference_info.refers_to
+ihm_external_reference_info.associated_url
+
+ihm_external_files.id
+ihm_external_files.reference_id
+ihm_external_files.file_path
+ihm_external_files.content_type
+ihm_external_files.file_size_bytes
+ihm_external_files.details
+
+ihm_dataset_list.id
+ihm_dataset_list.data_type
+ihm_dataset_list.database_hosted
+
+ihm_dataset_group.id
+ihm_dataset_group.name
+ihm_dataset_group.application
+ihm_dataset_group.details
+
+ihm_dataset_group_link.group_id
+ihm_dataset_group_link.dataset_list_id
+
+ihm_dataset_external_reference.id
+ihm_dataset_external_reference.dataset_list_id
+ihm_dataset_external_reference.file_id
+
+ihm_dataset_related_db_reference.id
+ihm_dataset_related_db_reference.dataset_list_id
+ihm_dataset_related_db_reference.db_name
+ihm_dataset_related_db_reference.accession_code
+ihm_dataset_related_db_reference.version
+ihm_dataset_related_db_reference.details
+
+ihm_related_datasets.dataset_list_id_derived
+ihm_related_datasets.dataset_list_id_primary
+
+ihm_poly_residue_feature.ordinal_id
+ihm_poly_residue_feature.feature_id
+ihm_poly_residue_feature.entity_id
+ihm_poly_residue_feature.asym_id
+ihm_poly_residue_feature.seq_id_begin
+ihm_poly_residue_feature.comp_id_begin
+ihm_poly_residue_feature.seq_id_end
+ihm_poly_residue_feature.comp_id_end
+
+ihm_feature_list.feature_id
+ihm_feature_list.feature_type
+ihm_feature_list.entity_type
+
+ihm_cross_link_list.id
+ihm_cross_link_list.group_id
+ihm_cross_link_list.entity_description_1
+ihm_cross_link_list.entity_id_1
+ihm_cross_link_list.seq_id_1
+ihm_cross_link_list.comp_id_1
+ihm_cross_link_list.entity_description_2
+ihm_cross_link_list.entity_id_2
+ihm_cross_link_list.seq_id_2
+ihm_cross_link_list.comp_id_2
+ihm_cross_link_list.linker_type
+ihm_cross_link_list.dataset_list_id
+
+ihm_cross_link_restraint.id
+ihm_cross_link_restraint.group_id
+ihm_cross_link_restraint.entity_id_1
+ihm_cross_link_restraint.asym_id_1
+ihm_cross_link_restraint.seq_id_1
+ihm_cross_link_restraint.atom_id_1
+ihm_cross_link_restraint.comp_id_1
+ihm_cross_link_restraint.entity_id_2
+ihm_cross_link_restraint.asym_id_2
+ihm_cross_link_restraint.seq_id_2
+ihm_cross_link_restraint.atom_id_2
+ihm_cross_link_restraint.comp_id_2
+ihm_cross_link_restraint.restraint_type
+ihm_cross_link_restraint.conditional_crosslink_flag
+ihm_cross_link_restraint.model_granularity
+ihm_cross_link_restraint.distance_threshold
+ihm_cross_link_restraint.psi
+ihm_cross_link_restraint.sigma_1
+ihm_cross_link_restraint.sigma_2
+
+ihm_cross_link_result_parameters.id
+ihm_cross_link_result_parameters.restraint_id
+ihm_cross_link_result_parameters.model_id
+ihm_cross_link_result_parameters.psi
+ihm_cross_link_result_parameters.sigma_1
+ihm_cross_link_result_parameters.sigma_2
+
+ihm_sas_restraint.id
+ihm_sas_restraint.dataset_list_id
+ihm_sas_restraint.model_id
+ihm_sas_restraint.struct_assembly_id
+ihm_sas_restraint.profile_segment_flag
+ihm_sas_restraint.fitting_atom_type
+ihm_sas_restraint.fitting_method
+ihm_sas_restraint.fitting_state
+ihm_sas_restraint.radius_of_gyration
+ihm_sas_restraint.chi_value
+ihm_sas_restraint.details
+
+ihm_derived_distance_restraint.id
+ihm_derived_distance_restraint.group_id
+ihm_derived_distance_restraint.feature_id_1
+ihm_derived_distance_restraint.feature_id_2
+ihm_derived_distance_restraint.group_conditionality
+ihm_derived_distance_restraint.restraint_type
+ihm_derived_distance_restraint.distance_upper_limit
+ihm_derived_distance_restraint.random_exclusion_fraction
+ihm_derived_distance_restraint.dataset_list_id
+
+ihm_2dem_class_average_restraint.id
+ihm_2dem_class_average_restraint.dataset_list_id
+ihm_2dem_class_average_restraint.number_raw_micrographs
+ihm_2dem_class_average_restraint.pixel_size_width
+ihm_2dem_class_average_restraint.pixel_size_height
+ihm_2dem_class_average_restraint.image_resolution
+ihm_2dem_class_average_restraint.image_segment_flag
+ihm_2dem_class_average_restraint.number_of_projections
+ihm_2dem_class_average_restraint.struct_assembly_id
+ihm_2dem_class_average_restraint.details
+
+ihm_2dem_class_average_fitting.id
+ihm_2dem_class_average_fitting.restraint_id
+ihm_2dem_class_average_fitting.model_id
+ihm_2dem_class_average_fitting.cross_correlation_coefficient
+ihm_2dem_class_average_fitting.rot_matrix
+ihm_2dem_class_average_fitting.tr_vector
+
+ihm_3dem_restraint.id
+ihm_3dem_restraint.dataset_list_id
+ihm_3dem_restraint.fitting_method
+ihm_3dem_restraint.struct_assembly_id
+ihm_3dem_restraint.number_of_gaussians
+ihm_3dem_restraint.model_id
+ihm_3dem_restraint.cross_correlation_coefficient
+
+ihm_predicted_contact_restraint.id
+ihm_predicted_contact_restraint.group_id
+ihm_predicted_contact_restraint.entity_id_1
+ihm_predicted_contact_restraint.asym_id_1
+ihm_predicted_contact_restraint.seq_id_1
+ihm_predicted_contact_restraint.comp_id_1
+ihm_predicted_contact_restraint.rep_atom_1
+ihm_predicted_contact_restraint.entity_id_2
+ihm_predicted_contact_restraint.asym_id_2
+ihm_predicted_contact_restraint.seq_id_2
+ihm_predicted_contact_restraint.comp_id_2
+ihm_predicted_contact_restraint.rep_atom_2
+ihm_predicted_contact_restraint.restraint_type
+ihm_predicted_contact_restraint.distance_lower_limit
+ihm_predicted_contact_restraint.distance_upper_limit
+ihm_predicted_contact_restraint.probability
+ihm_predicted_contact_restraint.model_granularity
+ihm_predicted_contact_restraint.dataset_list_id
+ihm_predicted_contact_restraint.software_id
+
+ihm_starting_model_details.starting_model_id
+ihm_starting_model_details.entity_id
+ihm_starting_model_details.entity_description
+ihm_starting_model_details.asym_id
+ihm_starting_model_details.entity_poly_segment_id
+ihm_starting_model_details.starting_model_source
+ihm_starting_model_details.starting_model_auth_asym_id
+ihm_starting_model_details.starting_model_sequence_offset
+ihm_starting_model_details.dataset_list_id
+
+ihm_starting_comparative_models.id
+ihm_starting_comparative_models.starting_model_id
+ihm_starting_comparative_models.starting_model_auth_asym_id
+ihm_starting_comparative_models.starting_model_seq_id_begin
+ihm_starting_comparative_models.starting_model_seq_id_end
+ihm_starting_comparative_models.template_auth_asym_id
+ihm_starting_comparative_models.template_seq_id_begin
+ihm_starting_comparative_models.template_seq_id_end
+ihm_starting_comparative_models.template_sequence_identity
+ihm_starting_comparative_models.template_sequence_identity_denominator
+ihm_starting_comparative_models.template_dataset_list_id
+ihm_starting_comparative_models.alignment_file_id
+
+ihm_starting_model_coord.starting_model_id
+ihm_starting_model_coord.group_PDB
+ihm_starting_model_coord.id
+ihm_starting_model_coord.type_symbol
+ihm_starting_model_coord.atom_id
+ihm_starting_model_coord.comp_id
+ihm_starting_model_coord.entity_id
+ihm_starting_model_coord.asym_id
+ihm_starting_model_coord.seq_id
+ihm_starting_model_coord.Cartn_x
+ihm_starting_model_coord.Cartn_y
+ihm_starting_model_coord.Cartn_z
+ihm_starting_model_coord.B_iso_or_equiv
+ihm_starting_model_coord.ordinal_id
+
+ihm_starting_model_seq_dif.id
+ihm_starting_model_seq_dif.entity_id
+ihm_starting_model_seq_dif.asym_id
+ihm_starting_model_seq_dif.seq_id
+ihm_starting_model_seq_dif.comp_id
+ihm_starting_model_seq_dif.starting_model_id
+ihm_starting_model_seq_dif.db_asym_id
+ihm_starting_model_seq_dif.db_seq_id
+ihm_starting_model_seq_dif.db_comp_id
+ihm_starting_model_seq_dif.details
+
+ihm_modeling_protocol.id
+ihm_modeling_protocol.protocol_name
+ihm_modeling_protocol.num_steps
+
+ihm_modeling_protocol_details.id
+ihm_modeling_protocol_details.protocol_id
+ihm_modeling_protocol_details.step_id
+ihm_modeling_protocol_details.struct_assembly_id
+ihm_modeling_protocol_details.dataset_group_id
+ihm_modeling_protocol_details.struct_assembly_description
+ihm_modeling_protocol_details.step_name
+ihm_modeling_protocol_details.step_method
+ihm_modeling_protocol_details.num_models_begin
+ihm_modeling_protocol_details.num_models_end
+ihm_modeling_protocol_details.multi_scale_flag
+ihm_modeling_protocol_details.multi_state_flag
+ihm_modeling_protocol_details.ordered_flag
+ihm_modeling_protocol_details.software_id
+ihm_modeling_protocol_details.script_file_id
+
+ihm_modeling_post_process.id
+ihm_modeling_post_process.protocol_id
+ihm_modeling_post_process.analysis_id
+ihm_modeling_post_process.step_id
+ihm_modeling_post_process.type
+ihm_modeling_post_process.feature
+ihm_modeling_post_process.num_models_begin
+ihm_modeling_post_process.num_models_end
+
+ihm_ensemble_info.ensemble_id
+ihm_ensemble_info.ensemble_name
+ihm_ensemble_info.post_process_id
+ihm_ensemble_info.model_group_id
+ihm_ensemble_info.ensemble_clustering_method
+ihm_ensemble_info.ensemble_clustering_feature
+ihm_ensemble_info.num_ensemble_models
+ihm_ensemble_info.num_ensemble_models_deposited
+ihm_ensemble_info.ensemble_precision_value
+ihm_ensemble_info.ensemble_file_id
+
+ihm_localization_density_files.id
+ihm_localization_density_files.file_id
+ihm_localization_density_files.ensemble_id
+ihm_localization_density_files.entity_id
+ihm_localization_density_files.asym_id
+ihm_localization_density_files.entity_poly_segment_id
+
+ihm_model_list.model_id
+ihm_model_list.model_name
+ihm_model_list.assembly_id
+ihm_model_list.protocol_id
+ihm_model_list.representation_id
+
+ihm_model_group.id
+ihm_model_group.name
+ihm_model_group.details
+
+ihm_model_group_link.group_id
+ihm_model_group_link.model_id
+
+ihm_model_representative.id
+ihm_model_representative.model_group_id
+ihm_model_representative.model_id
+ihm_model_representative.selection_criteria
+
+ihm_sphere_obj_site.id
+ihm_sphere_obj_site.entity_id
+ihm_sphere_obj_site.seq_id_begin
+ihm_sphere_obj_site.seq_id_end
+ihm_sphere_obj_site.asym_id
+ihm_sphere_obj_site.Cartn_x
+ihm_sphere_obj_site.Cartn_y
+ihm_sphere_obj_site.Cartn_z
+ihm_sphere_obj_site.object_radius
+ihm_sphere_obj_site.rmsf
+ihm_sphere_obj_site.model_id
+
+ihm_gaussian_obj_site.id
+ihm_gaussian_obj_site.entity_id
+ihm_gaussian_obj_site.seq_id_begin
+ihm_gaussian_obj_site.seq_id_end
+ihm_gaussian_obj_site.asym_id
+ihm_gaussian_obj_site.mean_Cartn_x
+ihm_gaussian_obj_site.mean_Cartn_y
+ihm_gaussian_obj_site.mean_Cartn_z
+ihm_gaussian_obj_site.weight
+ihm_gaussian_obj_site.covariance_matrix
+ihm_gaussian_obj_site.model_id
+
+ihm_gaussian_obj_ensemble.id
+ihm_gaussian_obj_ensemble.entity_id
+ihm_gaussian_obj_ensemble.seq_id_begin
+ihm_gaussian_obj_ensemble.seq_id_end
+ihm_gaussian_obj_ensemble.asym_id
+ihm_gaussian_obj_ensemble.mean_Cartn_x
+ihm_gaussian_obj_ensemble.mean_Cartn_y
+ihm_gaussian_obj_ensemble.mean_Cartn_z
+ihm_gaussian_obj_ensemble.weight
+ihm_gaussian_obj_ensemble.covariance_matrix
+ihm_gaussian_obj_ensemble.ensemble_id
+
+ihm_multi_state_modeling.state_id
+ihm_multi_state_modeling.state_group_id
+ihm_multi_state_modeling.population_fraction
+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
+
+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

data/cif-field-names/mmtf-filter.csv

@@ -0,0 +1,76 @@
+cell.length_a
+cell.length_b
+cell.length_c
+cell.angle_alpha
+cell.angle_beta
+cell.angle_gamma
+
+symmetry.space_group_name_H-M
+
+entry.id
+
+struct.title
+
+pdbx_database_status.recvd_initial_deposition_date
+
+pdbx_audit_revision_history.revision_date
+
+struct_ncs_oper
+
+pdbx_struct_assembly_gen
+
+pdbx_struct_oper_list
+
+entity.id
+entity.type
+entity.pdbx_description
+
+entity_poly.entity_id
+entity_poly.pdbx_seq_one_letter_code
+entity_poly.pdbx_strand_id
+
+exptl.method
+
+refine.ls_d_res_low
+refine.ls_R_factor_R_free
+refine.ls_R_factor_R_work
+
+atom_site.pdbx_formal_charge
+atom_site.label_atom_id
+atom_site.type_symbol
+
+chem_comp.id
+chem_comp.type
+chem_comp.name
+
+chem_comp_bond
+
+atom_site.Cartn_x
+atom_site.Cartn_y
+atom_site.Cartn_z
+atom_site.B_iso_or_equiv
+atom_site.id
+atom_site.label_alt_id
+atom_site.occupancy
+atom_site.label_seq_id
+atom_site.label_comp_id
+
+struct_sheet_range.id
+struct_sheet_range.beg_label_asym_id
+struct_sheet_range.beg_label_seq_id
+struct_sheet_range.pdbx_beg_PDB_ins_code
+struct_sheet_range.end_label_asym_id
+struct_sheet_range.end_label_seq_id
+struct_sheet_range.pdbx_end_PDB_ins_code
+struct_conf.conf_type_id
+struct_conf.id
+struct_conf.beg_label_asym_id
+struct_conf.beg_label_seq_id
+struct_conf.pdbx_beg_PDB_ins_code
+struct_conf.end_label_asym_id
+struct_conf.end_label_seq_id
+struct_conf.pdbx_end_PDB_ins_code
+
+atom_site.pdbx_PDB_ins_code
+atom_site.label_asym_id
+atom_site.auth_asym_id

data/rcsb-graphql/codegen.js

@@ -1,22 +0,0 @@
-const { generate } = require('graphql-code-generator')
-const path = require('path')
-
-const basePath = path.join(__dirname, '..', '..', 'src', 'mol-model-props', 'rcsb', 'graphql')
-
-generate({
-    schema: 'http://rest-dev.rcsb.org/graphql',
-    documents: {
-        [path.join(basePath, 'symmetry.gql.ts')]: {
-            loader: path.join(__dirname, 'loader.js')
-        },
-    },
-    generates: {
-        [path.join(basePath, 'types.ts')]: {
-            plugins: ['time', 'typescript-common', 'typescript-client']
-        }
-    },
-    overwrite: true,
-    config: path.join(__dirname, 'codegen.json')
-}, true).then(
-    () => console.log('done')
-).catch(e => console.error(e))

data/rcsb-graphql/codegen.json

@@ -1,6 +0,0 @@
-{
-    "flattenTypes": true,
-    "generatorConfig": {
-        "immutableTypes": true
-    }
-}

data/rcsb-graphql/loader.js

@@ -1,14 +0,0 @@
-const { parse } = require('graphql');
-const { readFileSync } = require('fs');
-
-module.exports = function(docString, config) {
-    const str = readFileSync(docString, { encoding: 'utf-8' }).trim()
-                    .replace(/^export default `/, '')
-                    .replace(/`$/, '')
-    return [
-        {
-            filePath: docString,
-            content: parse(str)
-        }
-    ];
-};

docs/README.md

@@ -0,0 +1,11 @@
+# Mol* Developer Documentation
+
+Contributions to the documentations are highly welcome! Please make a pull request with your changes.
+
+Requires Python 3.x to build. From this directory:
+
+```
+pip install mkdocs-material
+mkdocs serve
+```
+

docs/docs/data-access-tools/convert-to-bcif.md

@@ -0,0 +1,41 @@
+# Convert CIF to BinaryCIF
+BinaryCIF is an efficient, binary flavor of the CIF format. See [specification](https://github.com/molstar/BinaryCIF) and [publication](https://doi.org/10.1371/journal.pcbi.1008247) for further details.
+
+This script reads data in CIF format and converts it lossless to a BinaryCIF file that can be read by Mol* or other 
+applications.
+
+## Example
+```sh
+node lib/commonjs/cli/cif2bcif/index.js file.cif file.bcif
+```
+
+## Usage
+| Argument | Description |
+| --- | --- |
+| `src` | Source CIF to convert (can be gzipped) |
+| `out` | Generated BinaryCIF output path |
+| `-c` | Path to optional config file |
+| `-f` | Path to optional filter file |
+
+```sh
+index.js [-h] [-c CONFIG] [-f FILTER] src out
+```
+
+### Config file
+Controls how certain columns will be encoded. This is a JSON array of instructions:
+```ts
+interface EncodingStrategyHint {
+    categoryName: string,
+    columnName: string,
+    encoding: 'pack' | 'rle' | 'delta' | 'delta-rle',
+    precision?: number
+}
+```
+Identify a particular CIF columns by its name and override the encoding by Integer Packing, Run-Length Encoding, Delta 
+Encoding, or Delta & Run-Length Encoding. You can optionally control the precision if dealing with float values.
+
+### Filter file
+Specifies which categories and columns will be written. This is a plain text file, each line represents one entry. 
+You can specify explicitly which categories or columns to include by adding `category_name` or 
+`category_name.field_name`. You can also choose to ignore some categories or columns by adding `!category_name` or 
+`!category_name.field_name`.

docs/docs/data-access-tools/create-ccd-table.md

@@ -0,0 +1,25 @@
+# Create Table from CCD
+The [Chemical Component Dictionary (CCD)](https://www.wwpdb.org/data/ccd) is as an external reference file describing 
+all residue and small molecule components found in PDB entries. The 
+[Protonation Variants Companion Dictionary (PVCD)](https://www.wwpdb.org/data/ccd) enumerates protonation variants of
+canonical amino acids.
+
+This script bundles all `chem_comp_bond` information from the CCD and the PVCD into a single file for later use.
+Optionally, it can also generate a second output file that contains all `chem_comp_atom` information.
+
+## Example
+```sh
+node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-table.js build/data/ccb.bcif -b
+```
+
+## Usage
+| Argument | Description |
+| --- | --- |
+| `out` | Generated file output path |
+| `--forceDownload`, `-f` | Force download of CCD and PVCD |
+| `--binary`, `-b` | Output as BinaryCIF |
+| `--ccaOut`, `-a` | File output path of optionally generated chem_comp_atom |
+
+```sh
+create-table.js [-h] [--forceDownload] [--binary] [--ccaOut CCAOUT] out
+```

docs/docs/data-access-tools/extract-ccd-ions.md

@@ -0,0 +1,20 @@
+# Extract Ions from CCD
+The [Chemical Component Dictionary (CCD)](https://www.wwpdb.org/data/ccd) is as an external reference file describing 
+all residue and small molecule components found in PDB entries.
+
+This script extracts all ions from the CCD and provides their names as TypeScript set.
+
+## Example
+```sh
+node --max-old-space-size=4096 lib/commonjs/cli/chem-comp-dict/create-ions.js src/mol-model/structure/model/types/ions.ts
+```
+
+## Usage
+| Argument | Description |
+| --- | --- |
+| `out` | Generated file output path |
+| `--forceDownload`, `-f` | Force download of CCD |
+
+```sh
+create-ions.js [-h] [--forceDownload] out
+```

docs/docs/data-access-tools/model-server.md

@@ -0,0 +1,119 @@
+# Model Server
+
+Provides access to molecular 1D, 2D, and 3D (sub-)structure models of molecules. Substructures are described by the 
+mol-script (MolQL) language. It has the ability to include additional data to mmCIF “on the fly”, e.g. integrate 
+primary PDB archival data from [Chemical Component Dictionary (CCD)](https://www.wwpdb.org/data/ccd), 
+[Protonation Variants Companion Dictionary (PVCD)](https://www.wwpdb.org/data/ccd) and 
+[Biologically Interesting moleculeReference Dictionary (BIRD)](https://www.wwpdb.org/data/bird). 
+
+## Example
+```sh
+node lib/commonjs/servers/model/server --sourceMap pdb-bcif '/opt/data/bcif/${id}.bcif'
+```
+
+## Usage
+| Argument | Description |
+| --- | --- |
+| `--version`, `-v` | Show program's version number and exit. |
+| `--cfg` | JSON config file path. If a property is not specified, cmd line param/OS variable/default value are used. |
+| `--printCfg` | Print current config for validation and exit. |
+| `--cfgTemplate` | Prints default JSON config template to be modified and exit. |
+| `--apiPrefix` | Specify the prefix of the API, i.e. <host>/<apiPrefix>/<API queries> |
+| `--defaultPort` | Specify the port the server is running on |
+| `--cacheMaxSizeInBytes` | Read structures are cached, this specifies the cache size, 0 for off. |
+| `--cacheEntryTimeoutMs` | Specify in ms how long to keep entries in cache. |
+| `--requestTimeoutMs` | The maximum number of ms the server spends on a request. |
+| `--queryTimeoutMs` | The maximum time the server dedicates to executing a query in ms. Does not include the time it takes to read and export the data. |
+| `--shutdownTimeoutMinutes` | Server will shut down after this amount of minutes, 0 for off. |
+| `--shutdownTimeoutVarianceMinutes` | Modifies the shutdown timer by +/- `timeoutVarianceMinutes` (to avoid multiple instances shutting at the same time) |
+| `--maxQueryManyQueries` | Maximum number of queries allowed by the query-many at a time |
+| `--defaultSource` | modifies which 'sourceMap' source to use by default |
+| `--sourceMap` | Map `id`s for a `source` to a file path. Example: `pdb-bcif '../../data/bcif/${id}.bcif'` - JS expressions can be used inside `${}`, e.g. `${id.substr(1, 2)}/${id}.mdb` Can be specified multiple times. The `SOURCE` variable (e.g. `pdb-bcif`) is arbitrary and depends on how you plan to use the server. Supported formats: cif, bcif, cif.gz, bcif.gz |
+| `--sourceMapUrl` | Same as `--sourceMap` but for URL. `--sourceMapUrl src url format` Example: `pdb-cif "https://www.ebi.ac.uk/pdbe/entry-files/download/${id}_updated.cif" cif` Supported formats: cif, bcif, cif.gz, bcif.gz |
+
+```sh
+node lib/commonjs/servers/model/server [-h] [-v]
+        [--cfg CFG]
+        [--printCfg]
+        [--cfgTemplate]
+        [--apiPrefix PREFIX]
+        [--defaultPort PORT]
+        [--cacheMaxSizeInBytes CACHE_SIZE]
+        [--cacheEntryTimeoutMs CACHE_TIMEOUT]
+        [--requestTimeoutMs REQUEST_TIMEOUT]
+        [--queryTimeoutMs QUERY_TIMEOUT]
+        [--shutdownTimeoutMinutes TIME]
+        [--shutdownTimeoutVarianceMinutes VARIANCE]
+        [--maxQueryManyQueries QUERY_MANY_LIMIT]
+        [--defaultSource DEFAULT_SOURCE]
+        [--sourceMap SOURCE PATH]
+        [--sourceMapUrl SOURCE PATH SOURCE_MAP_FORMAT]
+```
+
+### Production Use
+In production, it is required to use a service that will keep the server running, such as [forever.js](https://github.com/foreverjs/forever).
+
+### Memory Issues
+Sometimes nodejs might run into problems with memory. This is usually resolved by adding the ``--max-old-space-size=8192`` parameter.
+
+### Preprocessor Example
+The preprocessor application allows addiing custom data to CIF files and/or 
+[convert CIF to BinaryCIF](./convert-to-bcif.md).
+```sh
+node lib/commonjs/servers/model/preprocess
+```
+
+### Preprocessor Usage
+| Argument | Description |
+| --- | --- |
+| `--input`, `-i` | Input filename |
+| `--outCIF`, `-oc` | Output CIF filename |
+| `--outBCIF`, `-ob` | Output BinaryCIF filename |
+| `--cfg`, `-c` | Config file path |
+| `--folderIn`, `-fin` | Convert folder |
+| `--folderOutCIF`, `-foc` | Convert folder text output |
+| `--folderOutBCIF`, `-fob` | Convert folder binary output |
+| `--folderNumProcesses`, `-fp` | Convert folder number processes |
+
+Example cfg.json:
+```ts                       
+{ 
+    "numProcesses": 1, 
+    "customProperties": { 
+        "sources": [ "wwpdb" ], 
+        "params": { 
+            "wwPDB": { 
+                "chemCompBondTablePath": "./build/data/ccb.bcif"
+            }
+        }
+    }
+}
+```
+
+### Local Mode
+The server can be run in local/file based mode using
+```sh
+node lib/commonjs/servers/model/query
+```
+
+### Custom Properties
+This feature is still in development.
+
+It is possible to provide property descriptors that transform data to internal representation and define how it should 
+be exported into one or mode CIF categories. Examples of this are located in the ``mol-model-props`` module and are 
+linked to the server in the config and ``servers/model/properties``.
+
+## From NPM
+
+```
+npm install --production molstar
+cd ./model-server 
+```
+
+(or ``node node_modules\.bin\model-server`` in Windows).
+
+The NPM package contains all the tools mentioned in the previous sections as "binaries":
+
+- ``model-server``
+- ``model-server-query``
+- ``model-server-preprocess``

docs/docs/data-access-tools/plugin-state-server.md

@@ -0,0 +1,22 @@
+# Plugin State Server
+
+Provides a simple backend for online storing and sharing of Mol* sessions used by 
+[``mol-plugin``](https://github.com/molstar/molstar/tree/master/src/mol-plugin) and 
+[``mol-state``](https://github.com/molstar/molstar/tree/master/src/mol-state) modules.
+
+## Example
+```sh
+node lib/commonjs/servers/plugin-state --workding-folder ~
+```
+
+## Usage
+| Argument | Description |
+| --- | --- |
+| `--working-folder` | Working folder path |
+| `--port` | Server port. Alternatively, use ENV variable PORT. |
+| `--api-prefix` | Server API prefix |
+| `--max-states` | Maximum number of states to save |
+
+```sh
+node lib/commonjs/servers/plugin-state [-h] --working-folder WORKING_FOLDER [--port PORT] [--api-prefix API_PREFIX] [--max-states MAX_STATES]
+```

docs/docs/data-access-tools/volume-server/examples.md

@@ -1,9 +1,9 @@
-Zika Virus
-==========
+# VolumeServer Examples
+
+## Zika Virus
 
 ![Zika Virus](img/zika_downsampled.png)
 
-1TQN
-====
+## 1TQN
 
 ![1tqn](img/1tqn_downsampled.png)

docs/docs/data-access-tools/volume-server/how-it-works.md

@@ -1,5 +1,4 @@
-How it works
-============
+## VolumeServer: How it works
 
 This document provides a high level overview of how the DensityServer works.
 

docs/docs/data-access-tools/volume-server/index.md

@@ -0,0 +1,126 @@
+# VolumeServer
+
+## What is VolumeServer
+
+Provides near-instantaneous access to volumetric data including density maps (for instance, from X-ray crystallography 
+or cryo-electron microscopy experiments), spatial distribution data, output from electrostatic calculations. It works by
+utilizing adaptive downsampling (similar to how Google Earth works). 
+
+It uses the text based CIF and BinaryCIF formats to deliver the data to the client. 
+
+For quick info about the benefits of using the server, check out the [examples](examples.md).
+
+## Installing and Running
+
+Requires nodejs 8+.
+
+### From GitHub
+
+```
+git clone https://github.com/molstar/molstar
+npm install
+```
+
+Afterwards, build the project source:
+
+```
+npm run build-tsc
+```
+
+and run the server by 
+
+```
+node lib/commonjs/servers/volume/server
+```
+
+### From NPM
+
+```
+npm install --production molstar
+./volume-server 
+```
+
+(or ``node node_modules\.bin\volume-server`` in Windows).
+
+The NPM package contains all the tools mentioned here as "binaries":
+
+- ``volume-server``
+- ``volume-server-pack``
+- ``volume-server-query``
+
+
+#### Production use
+
+In production it is required to use a service that will keep the server running, such as [forever.js](https://github.com/foreverjs/forever).
+
+
+#### Memory issues
+
+Sometimes nodejs might run into problems with memory. This is usually resolved by adding the ``--max-old-space-size=8192`` parameter.
+
+
+### Preparing the Data
+
+For the server to work, CCP4/MAP (models 0, 1, 2 are supported) input data need to be converted into a custom block format. 
+To achieve this, use the ``pack`` application (``node lib/commonjs/servers/volume/pack`` or ``volume-server-pack`` binary from the NPM package).
+
+### Local Mode
+
+The program  ``lib/commonjs/servers/volume/pack`` (``volume-server-query`` in NPM package) can be used to query the data without running a http server.
+
+### Navigating the Source Code
+
+The source code is split into 2 mains parts: ``pack`` and ``server``:
+
+- The ``pack`` part provides the means of converting CCP4 files into the internal block format.
+- The ``server`` includes
+  - ``query``: the main part of the server that handles a query. ``execute.ts`` is the "entry point".
+  - ``algebra``: linear, "coordinate", and "box" algebra provides the means for calculations necessary to concent a user query into a menaningful response.
+  - API wrapper that handles the requests.
+
+## Consuming the Data 
+
+
+The data can be consumed in any (modern) browser using the [ciftools library](https://github.com/molstar/ciftools) (or any other piece of code that can read text or binary CIF).
+
+The [Data Format](./response-data-format.md) document gives a detailed description of the server response format.
+
+As a reference/example of the server usage is available in Mol* ``mol-plugin`` module.
+
+## Hosting the server
+
+### Example
+
+```sh
+node lib/commonjs/servers/volume/server --idMap x-ray '/opt/data/xray/${id}.mdb'
+```
+
+### Usage
+| Argument= | Description |
+| --- | --- |
+| `--cfg` | JSON config file path. If a property is not specified, cmd line param/OS variable/default value are used. |
+| `--printCfg` | Print current config for validation and exit. |
+| `--cfgTemplate` | Prints default JSON config template to be modified and exit. |
+| `--apiPrefix` | Specify the prefix of the API, i.e. <host>/<apiPrefix>/<API queries> |
+| `--defaultPort` | Specify the port the server is running on |
+| `--shutdownTimeoutMinutes` | Server will shut down after this amount of minutes, 0 for off. |
+| `--shutdownTimeoutVarianceMinutes` | Modifies the shutdown timer by +/- `timeoutVarianceMinutes` (to avoid multiple instances shutting at the same time) |
+| `--idMap` | Map `id`s for a `type` to a file path. Example: `x-ray '../../data/mdb/xray/${id}-ccp4.mdb'` - JS expressions can be used inside `${}`, e.g. `${id.substr(1, 2)}/${id}.mdb` - Can be specified multiple times. - The `TYPE` variable (e.g. `x-ray`) is arbitrary and depends on how you plan to use the server. By default, Mol* Viewer uses `x-ray` and `em`, but any particular use case may vary. |
+| `--maxRequestBlockCount` | Maximum number of blocks that could be read in 1 query. This is somewhat tied to the ``maxOutputSizeInVoxelCountByPrecisionLevel`` in that the `<maximum number of voxel> = maxRequestBlockCount * <block size>^3`. The default block size is 96 which corresponds to 28,311,552 voxels with 32 max blocks. |
+| `--maxFractionalBoxVolume` | The maximum fractional volume of the query box (to prevent queries that are too big). |
+| `--maxOutputSizeInVoxelCountByPrecisionLevel` | What is the (approximate) maximum desired size in voxel count by precision level - Rule of thumb: `<response gzipped size>` in `[<voxel count> / 8, <voxel count> / 4]`. The maximum number of voxels is tied to maxRequestBlockCount. |
+
+```sh
+node lib/commonjs/servers/volume/server [-h] [-v]
+        [--cfg CFG]
+        [--printCfg] 
+        [--cfgTemplate]
+        [--apiPrefix PREFIX]
+        [--defaultPort PORT]
+        [--shutdownTimeoutMinutes TIME]
+        [--shutdownTimeoutVarianceMinutes VARIANCE] 
+        [--idMap TYPE PATH]
+        [--maxRequestBlockCount COUNT] 
+        [--maxFractionalBoxVolume VOLUME]
+        [--maxOutputSizeInVoxelCountByPrecisionLevel LEVEL [LEVEL ...]]
+```

docs/docs/data-access-tools/volume-server/response-data-format.md

@@ -1,10 +1,8 @@
-Data Format
-===========
+# VolumeServer: Response Data Format
 
 This document describes the CIF categories and fields generated by the server.
 
-Query info
-----------
+## Query info
 
 The reponse always contains a data block called ``SERVER`` with this format:
 
@@ -28,8 +26,7 @@ _density_server_result.query_box_b[1]     35.737
 _density_server_result.query_box_b[2]     32.037001 
 ```
 
-Query data
-----------
+## Query data
 
 If the query completed successfully with a non-empty result the response will contain one or more data blocks that correpond to the
 "channels" present in the data (e.g. for x-ray data there will be ``2Fo-Fc`` and ``Fo-Fc``) channels.
@@ -41,6 +38,7 @@ data_2FO-FC
 #
 _volume_data_3d_info.name                         2Fo-Fc 
 ```
+
 ### Axis order
 
 Axis order determines the order of axes of ``origin``, ``dimensions`` and ``sample_count`` fields. It also specifies

docs/docs/extensions/mvs/index.md

@@ -0,0 +1,3 @@
+# MolViewSpec
+
+Please see the [standalone MolViewSpec documentation](https://molstar.org/mol-view-spec-docs/).

docs/docs/extensions/mvs/integration-examples.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Replace "latest" by the specific version you want to use, e.g. "4.0.0" -->
+    <script src="https://cdn.jsdelivr.net/npm/molstar@latest/build/viewer/molstar.js"></script>
+    <!-- Replace "latest" by the specific version you want to use, e.g. "4.0.0" -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/molstar@latest/build/viewer/molstar.css" />
+</head>
+
+<body>
+    <h1>Integration of Mol* with MolViewSpec Extension</h1>
+    <p>
+        This page demonstrates several methods to integrate Mol* Viewer in a web page and use MolViewSpec functionality.
+        See the source HTML to see the actual code.
+    </p>
+
+
+    <h2>Method 1: Get MVS view from a server and pass to the viewer</h2>
+    <p>
+        The recommended method is to serve the MVS view files by your server (either as static files or generated by the
+        server on-demand) and call the <code>loadMvsFromUrl</code> method to retrieve and load them.
+        This example uses a MVS view file from the address specified in the <code>sourceUrl</code> variable.
+        If the MVS view file contains relative references, they will be resolved as relative to <code>sourceUrl</code>.
+    </p>
+
+    <div id="viewer1" style="position: relative; width: 500px; height: 500px;"></div>
+    <script>
+        const sourceUrl = 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1h9t_domain_labels.mvsj';
+        molstar.Viewer.create('viewer1', { layoutIsExpanded: false, layoutShowControls: false })
+            .then(viewer => viewer.loadMvsFromUrl(sourceUrl, 'mvsj'));
+    </script>
+
+
+    <p>
+        A variation of this method uses <code>molstar.PluginExtensions.mvs.loadMVS</code> instead of
+        <code>loadMvsFromUrl</code> and allows replacing the MVS view after it has been loaded.
+    </p>
+
+    <div id="viewer1b" style="position: relative; width: 500px; height: 500px;"></div>
+    <button onclick="loadView1();">View 1</button>
+    <button onclick="loadView2();">View 2</button>
+    <script>
+        let theViewer;
+        function load(viewer, url, replace) {
+            fetch(url)
+                .then(response => response.text())
+                .then(text => molstar.PluginExtensions.mvs.MVSData.fromMVSJ(text))
+                .then(mvsData => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: url, sanityChecks: true, replaceExisting: replace }));
+        }
+        function loadView1() {
+            load(theViewer, 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1cbs.mvsj', true);
+        }
+        function loadView2() {
+            load(theViewer, 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1cbs-focus.mvsj', true);
+        }
+        molstar.Viewer.create('viewer1b', { layoutIsExpanded: false, layoutShowControls: false })
+            .then(viewer => {
+                theViewer = viewer;
+                loadView1();
+            });
+    </script>
+
+
+    <h2>Method 2: Construct MVS view on frontend and pass to the viewer</h2>
+    <p>
+        Another option is to utilize the MVS builder provided by the extension to build the view on frontend and then
+        pass it to the viewer. This example builds the view in plain JavaScript, directly in a &lt;script&gt; tag in
+        HTML. However, for a better developer experience consider writing the code in TypeScript.
+        If the built MVS view contains relative references, they will be resolved as relative to the URL of this HTML
+        page.
+    </p>
+
+    <div id="viewer2" style="position: relative; width: 500px; height: 500px;"></div>
+    <script>
+        // Build an ad-hoc MVS view
+        const builder = molstar.PluginExtensions.mvs.MVSData.createBuilder();
+        const structure = builder
+            .download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/1cbs.bcif' })
+            .parse({ format: 'bcif' })
+            .modelStructure({});
+        structure
+            .component({ selector: 'polymer' })
+            .representation({ type: 'cartoon' })
+            .color({ color: 'green' });
+        structure
+            .component({ selector: 'ligand' })
+            .label({ text: 'Retinoic acid' })
+            .focus({})
+            .representation({ type: 'ball_and_stick' })
+            .color({ color: '#cc3399' });
+        const mvsData = builder.getState();
+
+        // Initialize viewer and load MVSJ
+        const mvsj = molstar.PluginExtensions.mvs.MVSData.toMVSJ(mvsData);
+        molstar.Viewer.create('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
+            .then(viewer => viewer.loadMvsData(mvsj, 'mvsj'));
+
+        // // Alternative initialization and loading (avoids encoding and again decoding the data, allows changing the view by using `replaceExisting: true`):
+        // molstar.Viewer.create('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
+        //     .then(viewer => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: undefined, sanityChecks: true, replaceExisting: false }));
+    </script>
+
+
+    <p>
+        Again, there is variation with using <code>molstar.PluginExtensions.mvs.loadMVS</code> instead of
+        <code>loadMvsData</code>.
+    </p>
+
+</body>
+
+</html>

docs/docs/extensions/struct-conn.md

@@ -0,0 +1,118 @@
+# wwPDB StructConn extension
+
+The STRUCT_CONN category in the mmCIF file format contains details about the connections between portions of the structure. These can be hydrogen bonds, salt bridges, disulfide bridges and so on (see more at <https://mmcif.wwpdb.org/dictionaries/mmcif_pdbx_v40.dic/Categories/struct_conn.html>).
+
+**wwPDB StructConn extension** in Mol* provides functionality to retrieve and visualize these connections.
+
+The extension exposes three functions, located in `src/extensions/wwpdb/struct-conn/index.ts`. 
+
+- `getStructConns` - to retrieve struct_conn records from a loaded structure
+- `inspectStructConn` - to visualize a struct_conn
+- `clearStructConnInspections` - to remove visulizations created by `inspectStructConn`
+
+
+## Example 1
+
+The following example is a minimal HTML using this functionality:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="./favicon.ico" type="image/x-icon">
+        <title>Mol* Viewer</title>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <body style="margin: 0px;">
+        <div style="position: absolute; width: 100%; height: 10%; padding-block: 10px;">
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'disulf1');">disulf1</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'disulf2');">disulf2</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'covale1');">covale1</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'covale2');">covale2</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'covale3');">covale3</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'covale4');">covale4</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'metalc1');">metalc1</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'metalc2');">metalc2</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'metalc3');">metalc3</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, '5elb', 'metalc4');">metalc4</button>
+            <button onclick="molstar.PluginExtensions.wwPDBStructConn.clearStructConnInspections(molstarViewer.plugin, '5elb');">CLEAR</button>
+        </div>
+        <div id="app" style="position: absolute; top: 10%; width: 100%; height: 90%;"></div>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            var molstarViewer;
+            molstar.Viewer.create('app', { layoutIsExpanded: false }).then(viewer => {
+                molstarViewer = viewer;
+                viewer.loadPdb('5elb');
+            });
+        </script>
+    </body>
+</html>
+```
+
+The PDB ID (`'5elb'`) can be replaced be `undefined`, in which case the functions will apply to the first loaded structure.
+
+
+## Example 2
+
+This is a more elaborated example, which automatically loads `5elb` (or any PDB entry given in the URL after `?pdb=`), retrieves the list of struct_conns, and creates a button for each struct_conn. 
+
+Be aware that some of the struct_conns may be present in the deposited model but not in the preferred assembly (default view). The presented example will raise a dialog window with error message in such cases, e.g. `disulf6` in entry `5elb`.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="./favicon.ico" type="image/x-icon">
+        <title>Mol* Viewer - StructConn Extension Demo</title>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <style>
+        body { margin: 0px; }
+        #app { position: absolute; width: 85%; height: 100%; }
+        #controls { position: absolute; right: 0; width: 15%; height: 100%; display: flex; flex-direction: column; overflow-y: scroll; }
+        h1 { text-align: center; margin: 12px; font-weight: bold; font-size: 120%; }
+        button { margin: 4px; margin-top: 0px; }
+    </style>
+    <body>
+        <div id="app"></div>
+        <div id="controls">
+            <h1 id="pdb-id">Loading...</h1>
+            <button onclick="clearInspections();">CLEAR</button>
+        </div>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            var pdbId = window.location.search.match(/[?&]pdb=(\w+)/i)?.[1]?.toLowerCase() ?? '5elb';
+            var molstarViewer;
+            function inspect(structConnId) {
+                if (molstarViewer?.plugin) {
+                    molstar.PluginExtensions.wwPDBStructConn.inspectStructConn(molstarViewer.plugin, pdbId, structConnId).then(nSelectedAtoms => {
+                        if (nSelectedAtoms < 2) alert('Some of the interacting atoms were not found :(\n(maybe not present in the viewed assembly)');
+                    });
+                }
+            }
+            function clearInspections() {
+                if (molstarViewer?.plugin) {
+                    molstar.PluginExtensions.wwPDBStructConn.clearStructConnInspections(molstarViewer.plugin, pdbId);
+                }
+            }
+            molstar.Viewer.create('app', { layoutIsExpanded: false }).then(viewer => {
+                molstarViewer = viewer;
+                return viewer.loadPdb(pdbId);
+            }).then(() => {
+                const structConns = molstar.PluginExtensions.wwPDBStructConn.getStructConns(molstarViewer.plugin, pdbId);
+                const controls = document.getElementById('controls');
+                for (const structConnId in structConns) {
+                    const button = document.createElement('button');
+                    button.innerText = structConnId;
+                    button.addEventListener('click', () => inspect(structConnId));
+                    controls.appendChild(button);
+                };
+                document.getElementById('pdb-id').innerHTML = pdbId;
+            });
+        </script>
+    </body>
+</html>
+```

docs/docs/extensions/tunnels.md

@@ -0,0 +1,118 @@
+# Tunnel Visualization Extension
+This documentation outlines the usage of the Mol* extension for visualizing tunnels in molecular structures. The extension integrates with Mol* to render 3D representations of tunnels using specified data sources and properties.
+
+The extension is a key component in ChannelsDB (https://channelsdb2.biodata.ceitec.cz/), enabling users to visualize tunnels within molecules directly from the database. While it is used with ChannelsDB, users can also input their own data or connect to different databases, ensuring versatility across various research environments.
+
+## Data Types
+The primary data types involved in tunnel visualization are:
+
+### Tunnel
+A Tunnel object contains the actual tunnel data necessary for visualization. It consists of:
+
+- `data`: An array of `Profile` objects that describe the tunnel at various points.
+- `props`: Properties such as the tunnel's type, ID, and optional labels or descriptions.
+
+### Profile
+A `Profile` object in a `Tunnel` holds detailed geometric and physical properties of a tunnel at specific points along its length. These properties include:
+
+- `Charge`: The electric charge at a specific point in the tunnel.
+- `Radius`: The overall radius of the tunnel at this point.
+- `FreeRadius`: The radius of the tunnel not obstructed by any molecular elements.
+- `T`: Temperature factor or a similar property related to the point.
+- `Distance`: Distance along the tunnel's path from the start.
+- `X`, `Y`, `Z`: Coordinates of the point in 3D space.
+
+These profiles are crucial for understanding the physical and chemical environment inside the tunnel, allowing for detailed analysis and visualization.
+
+Example:
+```json
+"Profile": [
+    {
+        "Radius": 1.49,
+        "FreeRadius": 1.49,
+        "T": 0,
+        "Distance": 0,
+        "X": -19.152,
+        "Y": -22.654,
+        "Z": -13.034,
+        "Charge": 0
+    },
+    {
+        "Radius": 1.524,
+        "FreeRadius": 1.524,
+        "T": 0.00625,
+        "Distance": 0.087,
+        "X": -19.162,
+        "Y": -22.596,
+        "Z": -12.969,
+        "Charge": 0
+    },
+    {
+        "Radius": 1.56,
+        "FreeRadius": 1.56,
+        "T": 0.0125,
+        "Distance": 0.174,
+        "X": -19.171,
+        "Y": -22.539,
+        "Z": -12.905,
+        "Charge": 0
+    }
+]
+```
+## Transformers Usage
+The extension uses several transformations to process and visualize tunnel data:
+
+### Tunnels Data Transformer
+- `Purpose`: Converts a collection of Tunnel data into a state object.
+- `Usage`:
+    ```typescript
+    update.toRoot().apply(TunnelsFromRawData, { data: tunnels });
+    ```
+
+### Tunnel Data Provider
+- `Purpose`: Converts single Tunnel data into a state object for individual processing.
+- `Usage`:
+    ```typescript
+    update.toRoot().apply(TunnelFromRawData, {
+        data: {
+            data: tunnel.Profile,
+            props: { id: tunnel.Id, type: tunnel.Type }
+        }
+    });
+    ```
+
+### Tunnel Shape Provider
+- `Purpose`: Provides the shapes for rendering the tunnel based on WebGL context and shape parameters.
+- `Usage`:
+    ```typescript
+    update.apply(TunnelShapeProvider, {
+        webgl,
+    }).apply(StateTransforms.Representation.ShapeRepresentation3D);
+    ```
+
+## Visualization Examples
+To help users understand how to use these transformations in practice, include detailed examples:
+
+### Visualizing Multiple Tunnels
+This example ([runVisualizeTunnels](../../../src/extensions/sb-ncbr/tunnels/examples.ts#L19)) demonstrates how to visualize multiple tunnels from a fetched dataset.
+```typescript
+update.toRoot()
+        .apply(TunnelsFromRawData, { data: tunnels })
+        .apply(SelectTunnel)
+        .apply(TunnelShapeProvider, { webgl })
+        .apply(StateTransforms.Representation.ShapeRepresentation3D);
+```
+
+### Visualizing a Single Tunnel
+This example ([runVisualizeTunnel](../../../src/extensions/sb-ncbr/tunnels/examples.ts#L46)) shows how to visualize a single tunnel.
+```typescript
+update.toRoot()
+        .apply(TunnelFromRawData, {
+            data: {
+                data: tunnel.Profile,
+                props: { id: tunnel.Id, type: tunnel.Type }
+            }
+        })
+        .apply(TunnelShapeProvider, { webgl })
+        .apply(StateTransforms.Representation.ShapeRepresentation3D);
+```

docs/docs/index.md

@@ -0,0 +1,43 @@
+# Installation
+
+## NPM Package
+
+```
+yarn add molstar
+```
+
+or
+
+```
+npm install molstar
+```
+
+Mol* code can then be imported from the ``molstar/lib/...`` namespace, e.g.
+
+```ts
+import { PluginContext } from 'molstar/lib/mol-plugin/context';
+```
+
+## Clone from GitHub
+
+
+```
+git clone https://github.com/molstar/molstar.git
+cd molstar
+npm install
+npm build
+```
+
+--------------------
+
+For a watch task to automatically rebuild the source code on changes, run
+
+```
+npm run watch
+```
+
+or if working just with the Viewer app for better performance
+
+```
+npm run watch-viewer
+```

docs/docs/misc/interesting-pdb-entries.md

@@ -0,0 +1,51 @@
+# Interesting PDB Entries
+
+* Cyclic polymers (1sfi, 6dny, 1HVZ)
+* B-DNA (1bna)
+* Missing carbonyl oxygen (1gfl)
+* Mono-saccharides with alt locs (1B5F)
+* Microheterogeneity
+    * Protein (1EJG, 3NIR)
+    * DNA (3VOK)
+* PNA: peptide nucleic acid (5eme, 1xj9)
+* Peptide derived residues
+    * GFP chromophores (5Z6Y)
+* Nucleotides that don’t have a parent base set, i.e. detect purine/pyrimidine from geometry (THX in 1AUL, OMC in e.g. 5D3G)
+* Bases with modified ring atoms
+    * 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)
+* Discontinuous chains, i.e. gaps in the sequence (3sn6)
+* Lots of sheets (1cbs)
+* DNA (2np2, 1d66)
+* C-alpha only (2rcj)
+* Not cyclic, but termini are backbone-only and within distance but seqIds are not compatible (6SW3)
+* Close backbone atoms but not linked (e.g. 4HIV)
+* Non-standard residues
+    * Protein (1BRR, 5Z6Y)
+    * DNA (5D3G)
+    * Collagen (6JEC)
+* Multiple models with different sets of ligands or missing ligands (1J6T, 1VRC, 2ICY, 1O2F)
+* 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)
+    * 1RB8 (Assembly 1, I global)

docs/docs/plugin/data-state.md

@@ -23,7 +23,7 @@ interface Snapshot {
 
 When defining the state object, all components are optional, i.e., it is possible to define just the ``data`` component.
 
-Example state is available [here](example-state.json). In the plugin, it is possible to create and load these objects using ``Download JSON`` 
+Example state is available [here](./example-state.json). In the plugin, it is possible to create and load these objects using ``Download JSON`` 
 and ``Open JSON`` buttons in the ``State Snapshots`` section.
 
 # State Tree
@@ -69,7 +69,7 @@ interface Transform.Props {
 }
 ```
 
-"Built-in" data state transforms and description of their parameters are defined in ``mol-plugin/state/transforms``. Behavior transforms are defined in ``mol-plugin/behavior``. Auto-generated documentation for the transforms is also [available](transforms.md).
+"Built-in" data state transforms and description of their parameters are defined in ``mol-plugin/state/transforms``. Behavior transforms are defined in ``mol-plugin/behavior``.
 
 # Animation State
 

docs/docs/plugin/examples.md

@@ -0,0 +1,3 @@
+# Plugin Examples
+
+Refer to Mol* [Apps](https://github.com/molstar/molstar/tree/master/src/apps) and [Examples](https://github.com/molstar/molstar/tree/master/src/examples).

docs/docs/plugin/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

docs/docs/plugin/instance.md

@@ -0,0 +1,274 @@
+# Creating Plugin Instance
+
+
+## Intro
+
+What is a plugin? A plugin is a collection of modules that provide functionality to the `Mol*` UI. The plugin is responsible for managing the state of the viewer, internal and user interactions. It has been a previous point of confusion for new users of `Mol*` to associate the __viewer__ part of the library with what is further referred to as the __plugin__. These two are closely connected in the `molstar-plugin-ui` module, which is the user-facing part of the library and ultimately provides the viewer, but they are ultimately distinct. 
+
+
+It is recommended that you inspect the general class structure of [`PluginInitWrapper`](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-ui/plugin.tsx#L41), [`PluginUIContext`](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin/context.ts#L71) and [`PluginUIComponent`](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-ui/base.tsx#L16) to better understand the flow of data and events in the plugin. 
+A passing analogy is that a [ `PluginContext` ](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin/context.ts#L71) is the engine that powers computation, rendering, events and subscriptions inside the molstar UI. All UI components depend on `PluginContext`. 
+
+
+
+There are 4 basic ways of instantiating the Mol* plugin.
+
+## ``Viewer`` wrapper
+
+- The most basic usage is to use the ``Viewer`` wrapper. This is best suited for use cases that do not require much custom behavior and are mostly about just displaying a structure.
+- See ``Viewer`` class is defined in [src/apps/viewer/app.ts](https://github.com/molstar/molstar/blob/master/src/apps/viewer/app.ts) for available methods and options.
+
+Example usage without using WebPack:
+
+```HTML
+<style>
+    #app {
+        position: absolute;
+        left: 100px;
+        top: 100px;
+        width: 800px;
+        height: 600px;
+    }
+</style>
+<!-- 
+    molstar.js and .css are obtained from
+    - the folder build/viewer after cloning and building the molstar package 
+    - from the build/viewer folder in the Mol* NPM package
+-->
+<link rel="stylesheet" type="text/css" href="molstar.css" />
+<script type="text/javascript" src="./molstar.js"></script>
+
+<div id="app"></div>
+
+<script type="text/javascript">
+    molstar.Viewer.create('app', {
+        layoutIsExpanded: false,
+        layoutShowControls: false,
+        layoutShowRemoteState: false,
+        layoutShowSequence: true,
+        layoutShowLog: false,
+        layoutShowLeftPanel: true,
+
+        viewportShowExpand: true,
+        viewportShowSelectionMode: false,
+        viewportShowAnimation: false,
+
+        pdbProvider: 'rcsb',
+        emdbProvider: 'rcsb',
+    }).then(viewer => {
+        viewer.loadPdb('7bv2');
+        viewer.loadEmdb('EMD-30210', { detail: 6 });
+    });
+</script>
+```
+
+When using WebPack (or possibly other build tool) with the Mol* NPM package installed, the viewer class can be imported using 
+
+```ts
+import { Viewer } from 'molstar/build/viewer/molstar'
+
+function initViewer(target: string | HTMLElement) {
+    return new Viewer(target, { /* options */})
+}
+```
+
+## ``PluginContext`` with built-in React UI
+
+- For more customization options it is possible to use the [``PluginContext``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/context.ts) directly.
+- When creating the plugin instance it is possible to customize the [``PluginSpec``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/spec.ts).
+- The default [``PluginSpec``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/spec.ts) is available [here](https://github.com/molstar/molstar/blob/master/src/mol-plugin/spec.ts).
+- [``PluginConfig``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/config.ts) object provides additional customization options.
+- See the [Viewer State Management](viewer-state.md) section for more information on customizing things like background.
+- See the [Data State Management](data-state.md) section for more information on build the state.
+
+```ts
+import { DefaultPluginUISpec, PluginUISpec } from 'molstar/lib/mol-plugin-ui/spec';
+import { createPluginUI } from 'molstar/lib/mol-plugin-ui';
+import { renderReact18 } from 'molstar/lib/mol-plugin-ui/react18';
+import { PluginConfig } from 'molstar/lib/mol-plugin/config';
+
+const MySpec: PluginUISpec = {
+    ...DefaultPluginUISpec(),
+    config: [
+        [PluginConfig.VolumeStreaming.Enabled, false]
+    ]
+}
+
+async function createPlugin(parent: HTMLElement) {
+    const plugin = await createPluginUI({
+      target: parent,
+      spec: MySpec,
+      render: renderReact18
+    });
+
+    const data = await plugin.builders.data.download({ url: '...' }, { state: { isGhost: true } });
+    const trajectory = await plugin.builders.structure.parseTrajectory(data, format);
+    await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
+
+    return plugin;
+}
+
+createPlugin(document.getElementById('app')!); // app is a <div> element with position: relative
+```
+
+To use the plugin (with the React UI) inside another React app:
+
+A single-plugin setup is shown the example below. In order to initialize multiple
+plugins, each with its own context and viewport, some extra steps are required (docs section to be added).
+
+```ts
+import { useEffect, createRef } from "react";
+import { createPluginUI } from "molstar/lib/mol-plugin-ui";
+import { renderReact18 } from "molstar/lib/mol-plugin-ui/react18";
+import { PluginUIContext } from "molstar/lib/mol-plugin-ui/context";
+/*  Might require extra configuration,
+see https://webpack.js.org/loaders/sass-loader/ for example.
+create-react-app should support this natively. */
+import "molstar/lib/mol-plugin-ui/skin/light.scss";
+
+declare global {
+  interface Window {
+    molstar?: PluginUIContext;
+  }
+}
+
+
+export function MolStarWrapper() {
+  const parent = createRef<HTMLDivElement>();
+
+  // In debug mode of react's strict mode, this code will
+  // be called twice in a row, which might result in unexpected behavior.
+  useEffect(() => {
+    async function init() {
+        window.molstar = await createPluginUI({
+          target: parent.current as HTMLDivElement,
+          render: renderReact18
+        });
+
+        const data = await window.molstar.builders.data.download(
+          { url: "https://files.rcsb.org/download/3PTB.pdb" }, /* replace with your URL */
+          { state: { isGhost: true } }
+        );
+        const trajectory =
+          await window.molstar.builders.structure.parseTrajectory(data, "pdb");
+        await window.molstar.builders.structure.hierarchy.applyPreset(
+          trajectory,
+          "default"
+        );
+    }
+    init();
+    return () => {
+      window.molstar?.dispose();
+      window.molstar = undefined;
+    };
+  }, []);
+
+  return <div ref={parent} style={{ width: 640, height: 480 }}/>;
+}
+
+```
+
+
+Furthermore, if it is desirable in your project to use the `molstar`'s React UI components, but you wish to alter or rearrange the layout, you should take a look at the signatures of [ `PluginUIComponent` ](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-ui/base.tsx#L16) which every "control" subclasses. 
+
+
+[ `SequenceView` ](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-ui/sequence.tsx#L221C4-L221C4), for example, can be used separately from the `PluginUI`. Yet you would need to pass the `PluginUIContext` to it in order for it to observe the changes in the state of the plugin. This can be done via a `PluginContextContainer`:
+```typescript
+// your_app.plugin: PluginUIContext
+...
+<div className="your_custom_ui">
+  <PluginContextContainer plugin={your_app.plugin}>
+    <SequenceView />
+  </PluginContextContainer>
+</div>
+```
+
+## Directly using Mol* React UI
+
+```ts
+class MolStarWrapper {
+  private resolveInit: () => void;
+  initialized = new Promise<boolean>(res => { this.resolveInit = () => res(true); });
+
+  private initCalled = false;
+  plugin: PluginUIContext;
+  async init() {
+    if (this.initCalled) return;
+    this.initCalled = true;
+    this.plugin = ...;
+    await this.plugin.init();
+    this.resolveInit();
+  }
+}
+
+function MolStar({ model }: { model: MolStarWrapper }) {
+  const [initialized, setInitialized] = useState(false);
+  useEffect(() => {
+     async function init() {
+       await model.init();
+       setInitialized(true);
+     }
+     init();
+  }, [model]);
+
+  if (!initialized) return <>Loading</>;
+  return <div style={{ ..., position: 'relative' }}>
+    <Plugin plugin={model.plugin} />
+  </div>;
+}
+```
+
+## ``PluginContext`` without built-in React UI
+
+- The [``PluginContext``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/context.ts) can be instantiated without using the default React UI.
+
+```HTML
+<div id='molstar-parent' style='position: absolute; top: 0; left: 0; right: 0; bottom: 0'>
+    <canvas id='molstar-canvas' style='position: absolute; top: 0; left: 0; right: 0; bottom: 0'></canvas>
+</div>
+```
+
+```ts
+import { DefaultPluginSpec, PluginSpec } from 'molstar/lib/mol-plugin/spec';
+import { PluginContext  } from 'molstar/lib/mol-plugin/context';
+import { PluginConfig } from 'molstar/lib/mol-plugin/config';
+
+const MySpec: PluginSpec = {
+    ...DefaultPluginSpec(),
+    config: [
+        [PluginConfig.VolumeStreaming.Enabled, false]
+    ]
+}
+
+async function init() {
+    const plugin = new PluginContext(MySpec);
+    await plugin.init();
+
+    const canvas = <HTMLCanvasElement> document.getElementById('molstar-canvas');
+    const parent = <HTMLDivElement> document.getElementById('molstar-parent');
+
+    if (!plugin.initViewer(canvas, parent)) {
+        console.error('Failed to init Mol*');
+        return;
+    }
+
+    // Example url:"https://files.rcsb.org/download/3j7z.pdb" 
+    // Example url:"https://files.rcsb.org/download/5AFI.cif" 
+    const data = await plugin.builders.data.download({ url: '...' }, { state: { isGhost: true } });
+    const trajectory = await plugin.builders.structure.parseTrajectory(data, format); //format is 'mmcif' or 'pdb' etc.
+    await plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
+}
+
+```
+
+## ``Canvas3D`` without built-in state management
+
+- The ``PluginContext`` object from the above examples can be completely omitted.
+- See [Browser Tests](https://github.com/molstar/molstar/tree/master/src/tests/browser) for example usage.
+
+```ts
+const canvas = document.getElementById('canvas'); // parent <canvas> element
+const canvas3d = Canvas3D.create(Canvas3DContext.fromCanvas(canvas));
+canvas3d.animate();
+// use the canvas3d object here
+```

docs/docs/plugin/selections.md

@@ -0,0 +1,110 @@
+# Selections
+
+
+Assuming you have a model already loaded into the plugin (see [Creating Plugin Instance](./instance.md)), these are some of the following method you can select structural data.
+
+### Selecting directly from the `hierarchy` manager
+
+One can select a subcomponent's data directly from the plugin manager.
+
+```typescript 
+import { Structure } from '../mol-model/structure';
+
+const ligandData = plugin.managers.structure.hierarchy.selection.structures[0]?.components[0]?.cell.obj?.data;
+const ligandLoci = Structure.toStructureElementLoci(ligandData as any);
+
+plugin.managers.camera.focusLoci(ligandLoci);
+plugin.managers.interactivity.lociSelects.select({ loci: ligandLoci });
+```
+
+## Selection callbacks
+If you want to subscribe to selection events (e.g. to change external state in your application based on a user selection), you can use: `plugin.behaviors.interaction.click.subscribe`
+
+Here's an example of passing in a React "set" function to update selected residue positions.
+```typescript
+import {
+  Structure,
+  StructureProperties,
+} from "molstar/lib/mol-model/structure"
+// setSelected is assumed to be a "set" function returned by useState
+// (selected: any[]) => void
+plugin.behaviors.interaction.click.subscribe(
+  (event: InteractivityManager.ClickEvent) => {
+    const selections = Array.from(
+      plugin.managers.structure.selection.entries.values()
+    );
+    // This bit can be customized to record any piece information you want
+    const localSelected: any[] = [];
+    for (const { structure } of selections) {
+      if (!structure) continue;
+      Structure.eachAtomicHierarchyElement(structure, {
+        residue: (loc) => {
+          const position = StructureProperties.residue.label_seq_id(loc);
+          localSelected.push({ position });
+        },
+      });
+    }
+    setSelected(localSelected);
+  }
+)
+```
+
+### `Molscript` language
+
+Molscript is a language for addressing crystallographic structures and is a part of the Mol* library found at `https://github.com/molstar/molstar/tree/master/src/mol-script`. It can be used against the Molstar plugin as a query language and transpiled against multiple external molecular visualization libraries(see [here](https://github.com/molstar/molstar/tree/master/src/mol-script/transpilers)).
+
+### Querying a structure for a specific chain and residue range (select residues with 12<res_id<200 of chain with auth_asym_id==A) :
+
+```typescript
+import { compileIdListSelection } from 'molstar/lib/mol-script/util/id-list'
+
+const query = compileIdListSelection('A 12-200', 'auth');
+window.molstar?.managers.structure.selection.fromCompiledQuery('add',query);
+```
+
+## Selection Queries
+
+Another way to create a selection is via a `SelectionQuery` object. This is a more programmatic way to create a selection. The following example shows how to select a chain and a residue range using a `SelectionQuery` object.
+This relies on the concept of `Expression` which is basically a intermediate representation between a Molscript statement and a selection query. 
+ 
+### Select residues 10-15 of chains A and F in a structure using a `SelectionQuery` object:
+
+```typescript
+
+import { MolScriptBuilder as MS, MolScriptBuilder } from 'molstar/lib/mol-script/language/builder';
+import { Expression } from 'molstar/lib/mol-script/language/expression';
+import {  StructureSelectionQuery } from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query'
+
+
+export function select_multiple() {
+
+ const args = [['A', 10, 15], ['F', 10, 15]]
+ const groups: Expression[] = [];
+ for (var chain of args) {
+   groups.push(MS.struct.generator.atomGroups({
+     "chain-test": MS.core.rel.eq([MolScriptBuilder.struct.atomProperty.macromolecular.auth_asym_id(), chain[0]]),
+     "residue-test": MS.core.rel.inRange([MolScriptBuilder.struct.atomProperty.macromolecular.label_seq_id(), chain[1], chain[2]])
+   }));
+ }
+ var sq = StructureSelectionQuery('residue_range_10_15_in_A_and_F', MS.struct.combinator.merge(groups))
+ mstar.managers.structure.selection.fromSelectionQuery('set', sq)
+}
+```
+
+Complex queries can be constructed by combining primitive queries at the level of [`chain-test`, `residue-test`, `entity-test`, etc] (https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-script/language/symbol-table/structure-query.ts#L88C4-L94C112) by combining them via logical connectives provided in the `MolscriptBuilder.core.rel` as above.
+
+Inspect these examples to get a better feeling for this syntax: `https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-state/helpers/structure-selection-query.ts#L88-L580`
+
+
+Furthermore, a query made this way can be converted to a `Loci` object which is important in many parts of the libary:
+```typescript
+
+// Select residue 124 of chain A and convert to Loci
+const Q = MolScriptBuilder;
+var sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
+                'chain-test'  : Q.core.rel.eq([Q.struct.atomProperty.macromolecular.auth_asym_id(), A]),
+                "residue-test": Q.core.rel.eq([Q.struct.atomProperty.macromolecular.label_seq_id(), 124]),
+              }), objdata)
+
+let loci = StructureSelection.toLociWithSourceUnits(sel);
+```

docs/docs/plugin/transforms/custom-trajectory.md

@@ -0,0 +1,72 @@
+# Load Trajectory from a Custom Format
+
+This section shows a high level example for loading trajectory from custom data in specialized plugin instances. A more complete solution is available for example in form of the [G3D format extension](https://github.com/molstar/molstar/tree/master/src/extensions/g3d).
+
+## Defining and Using a Custom Transformer
+
+```ts
+import { StateTransformer } from 'molstar/lib/mol-state';
+
+const CreateTransformer = StateTransformer.builderFactory('custom-namespace');
+
+export interface CustomTrajectoryData {
+    // ...
+}
+
+export const TrajectoryFromCustomData = CreateTransformer({
+    name: 'trajectory-from-custom-data',
+    display: 'Trajectory',
+    from: PluginStateObject.Root,
+    to: PluginStateObject.Molecule.Trajectory,
+    params: {
+        data: PD.Value<CustomTrajectoryData>(void 0 as any, { isHidden: true }),
+    },
+})({
+    apply({ params }) {
+        return Task.create('Trajectory', async (ctx) => {
+            const models = await customParse(params.data, ctx);
+            return new PluginStateObject.Molecule.Trajectory(models, {
+                label: 'Trajectory',
+            });
+        });
+    },
+});
+```
+
+The ``customParse`` function can usually be implemented 
+by modifying/extending an [existing parser already available in Mol*](https://github.com/molstar/molstar/tree/master/src/mol-model-formats/structure).
+
+To use the transformer:
+
+```ts
+const data: CustomTrajectoryData = await (await fetch(url)).json();
+const trajectory = await plugin.build().toRoot().apply(TrajectoryFromCustomData, { data }).commit();
+// Create the representation
+await plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
+```
+
+## Using Mol* to Download the Data
+
+```ts
+export const TrajectoryFromCustomData = CreateTransformer({
+    name: 'trajectory-from-custom-data',
+    display: 'Trajectory',
+    from: PluginStateObject.Data.String, // or PluginStateObject.Data.Binary
+    to: PluginStateObject.Molecule.Trajectory,
+})({
+    apply({ a }) {
+        return Task.create('Trajectory', async (ctx) => {
+            const models = await customParse(a.data, ctx);
+            return new PluginStateObject.Molecule.Trajectory(models, {
+                label: 'Trajectory',
+            });
+        });
+    },
+});
+
+//////////////
+
+const data = await plugin.builders.data.download({ url, isBinary });
+const trajectory = await plugin.build().to(data).apply(TrajectoryFromCustomData, { data }).commit();
+await plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
+```

docs/docs/plugin/viewer-state.md

@@ -0,0 +1,132 @@
+# Viewer State Management
+
+## ``Canvas3D`` Properties
+Properties of the [``Canvas3D``](https://github.com/molstar/molstar/blob/master/src/mol-canvas3d/canvas3d.ts) can be 
+changed using [``PluginCommands``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/commands.ts).  
+
+
+### Change background, highlight, or select color
+```ts
+import { ColorNames } from 'molstar/lib/mol-util/color/names';
+import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
+
+const renderer = plugin.canvas3d!.props.renderer;
+PluginCommands.Canvas3D.SetSettings(plugin, { settings: { renderer: { ...renderer, backgroundColor: ColorNames.red /* or: 0xff0000 as Color */ } } });
+```
+Similarly, `highlightColor` and `selectColor` can be updated.
+
+
+## Interactivity
+
+Interactivity in Mol* is based on the concept of ``Loci``. A ``Loci`` usually references a collection of objects and can be created by a [``Selection``](selections.md). For example, the
+``Loci`` captures all atoms in the chain with label_asym_id B of a protein:
+```ts
+import { Script } from 'molstar/lib/mol-script/script';
+import { StructureSelection } from 'molstar/lib/mol-model/structure/query';
+
+const data = plugin.managers.structure.hierarchy.current.structures[0]?.cell.obj?.data;
+if (!data) return;
+
+const selection = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
+    'chain-test': Q.core.rel.eq(['B', Q.ammp('label_asym_id')])
+}), data);
+const loci = StructureSelection.toLociWithSourceUnits(selection);
+```
+A ``Loci`` can be used to trigger custom [``Behaviors``](#behaviors).
+
+
+### Log message to Mol* console
+The built-in console in the bottom center of the plugin shows log entries.
+```ts
+plugin.log.message('This message will appear in the Mol* console');
+```
+Other log levels are: `info`, `warn`, and `error`.
+
+
+### Show toast message
+Toast messages will appear in the bottom right of the plugin and will linger for a limited time before disappearing.
+```ts
+import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
+
+PluginCommands.Toast.Show(plugin, {
+    title: 'Custom Message',
+    message: 'A custom toast message that will disappear after 2 seconds.',
+    key: 'toast-custom',
+    timeoutMs: 2000
+});
+```
+
+## Behaviors
+
+The state of the Mol* plugin is usually governed by dynamic behaviors which can be set up in initial plugin specification or updated during the plugin runtime. This allows for high modularity and customizability of individual plugin instances.
+
+
+### Highlight ``Loci``
+Highlighting adds a transient overpaint to a representation that will linger until the mouse enters hovers over another 
+object. Highlights can be applied to a previously defined ``Loci`` by:
+```ts
+plugin.managers.interactivity.lociHighlights.highlightOnly({ loci }); // loci: Loci
+```
+Reset all highlights by:
+```ts
+plugin.managers.interactivity.clearHighlights();
+```
+
+
+### Select ``Loci``
+
+Selected elements will appear with distinct visuals and, if applicable, the corresponding sequence positions will be 
+shown in the Sequence Viewer panel. Selections persist until removed, for example by clicking the background. A ``Loci``
+is selected by:
+```ts
+plugin.managers.interactivity.lociSelects.select({ loci }); // loci: Loci
+```
+
+Deselect a specific ``Loci`` by:
+```ts
+plugin.managers.interactivity.lociSelects.deselect({ loci }); // loci: Loci
+```
+To deselect everything:
+```ts
+plugin.managers.interactivity.lociSelects.deselectAll();
+```
+
+
+### Focus ``Loci``
+The focus representation shows a ``Loci`` in ball-and-stick representation and, additionally, visualizes non-covalent
+interactions between atoms of the ``Loci`` as well as interactions with surrounding residues (default: 5 Å).
+```ts
+plugin.managers.structure.focus.setFromLoci(loci);
+```
+Extend an existing focus representation by:
+```ts
+plugin.managers.structure.focus.addFromLoci(loci); // loci: Loci
+```
+Reset by:
+```ts
+plugin.managers.structure.focus.clear();
+```
+
+
+### Zoom ``Loci``
+A ``Loci`` can also be used to manipulate the camera. Zoom in by:
+```ts
+plugin.managers.camera.focusLoci(loci); // loci: Loci
+```
+
+Restore the default camera position by:
+```ts
+plugin.managers.camera.reset();
+```
+
+### Turn off view resetting on new representations
+A new representation via something like
+```ts
+.apply(StateTransforms.Representation.VolumeRepresentation3D, ...)
+```
+can reset the view to make the whole representation visible.
+When one wants to keep the view the same instead of having the rep reset the view,
+keep the view constant by:
+```ts
+plugin.canvas3d?.setProps({ camera: { manualReset: true } });
+```

docs/mkdocs.yml

@@ -0,0 +1,59 @@
+site_name: Mol* Developer Documentation
+theme:
+  name: material
+
+  # 404 page
+  static_templates:
+    - 404.html
+
+  # Necessary for search to work properly
+  include_search_page: false
+  search_index_only: true
+
+  # Default values, taken from mkdocs_theme.yml
+  language: en
+  font:
+    text: Roboto
+    code: Roboto Mono
+  favicon: assets/favicon.png
+  icon:
+    logo: logo
+markdown_extensions:
+  - pymdownx.highlight
+  - pymdownx.superfences
+  - pymdownx.arithmatex:
+      generic: true
+# Scripts for rendering Latex equations (in addition to pymdownx.arithmatex):
+extra_javascript:
+  - https://polyfill.io/v3/polyfill.min.js?features=es6
+  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
+nav:
+  - 'index.md'
+  - Plugin:
+    - Creating Instance: 'plugin/instance.md'
+    - Examples: plugin/examples.md
+    - Selections: 'plugin/selections.md'
+    - Viewer State: 'plugin/viewer-state.md'
+    - Data State: 'plugin/data-state.md'
+    - File Formats: 'plugin/file-formats.md'
+    - CIF Schemas: 'plugin/cif-schemas.md'
+    - State Transforms:
+      - Custom Trajectory: 'plugin/transforms/custom-trajectory.md'
+  - Data Access Tools:
+    - 'data-access-tools/model-server.md'
+    - Volume Server:
+      - Overview: 'data-access-tools/volume-server/index.md'
+      - Examples: 'data-access-tools/volume-server/examples.md'
+      - How it Works: 'data-access-tools/volume-server/how-it-works.md'
+      - Data Format: 'data-access-tools/volume-server/response-data-format.md'
+    - 'data-access-tools/plugin-state-server.md'
+    - 'data-access-tools/convert-to-bcif.md'
+    - 'data-access-tools/create-ccd-table.md'
+    - 'data-access-tools/extract-ccd-ions.md'
+  - Extensions:
+    - MolViewSpec: 'extensions/mvs/index.md'
+    - wwPDB StructConn: 'extensions/struct-conn.md'
+    - Tunnels: 'extensions/tunnels.md'
+  - Misc:
+    - Interesting PDB entries: misc/interesting-pdb-entries.md
+repo_url: https://github.com/molstar/docs

docs/model-server/readme.md

@@ -1,138 +0,0 @@
-Model Server
-============
-
-Model Server is a tool for preprocessing and querying macromolecular structure data.
-
-Installing and Running
-=====================
-
-Getting the code (use node 8+):
-```
-git clone https://github.com/molstar/molstar
-npm install
-```
-
-Customize configuration at ``src/server/model/config.ts`` to point to your data and which custom properties to include (see the [Custom Properties](#custom-properties) section). Alternatively, the config can be edited in the compiled version in ``build/node_modules/servers/model/config.js``.
-
-Afterwards, build the project:
-
-```
-npm run build
-```
-
-(or run watch mode for automatic rebuilds: ``npm run watch``)
-
-Running the server locally for testing:
-```
-npm run model-server
-```
-or
-```
-node build/node_modules/servers/model/server
-```
-
-In production it is a good idea to use a service that will keep the server running, such as [forever.js](https://github.com/foreverjs/forever).
-
-
-## Memory issues
-
-Sometimes nodejs might run into problems with memory. This is usually resolved by adding the ``--max-old-space-size=8192`` parameter.
-
-Preprocessor
-============
-
-The preprocessor application allows to add custom data to CIF files and/or convert CIF to BinaryCIF. See the [Custom Properties](#custom-properties) section for providing custom properties.
-
-## Usage
-
-The app works in two modes: single files and folders.
-
-Single files:
-
-```
-node build\node_modules\servers\model\preprocess -i input.cif [-oc output.cif] [-ob output.bcif] [--cfg config.json]
-```
-
-Folder:
-```
-node build\node_modules\servers\model\preprocess -fin input_folder [-foc output_cif_folder] [-fob output_bcif_folder] [--cfg config.json]
-```
-
-## Config
-
-The config speficies the maximum number of processes to use (in case of folder processing) and defines sources and parameters for custom properties.
-
-Example:
-```json
-{
-    "numProcesses": 4,
-    "customProperties": {
-        "sources": [
-            "./properties/pdbe"
-        ],
-        "params": {
-            "PDBe": {
-                "UseFileSource": false,
-                "API": {
-                    "residuewise_outlier_summary": "https://www.ebi.ac.uk/pdbe/api/validation/residuewise_outlier_summary/entry",
-                    "preferred_assembly": "https://www.ebi.ac.uk/pdbe/api/pdb/entry/summary",
-                    "struct_ref_domain": "https://www.ebi.ac.uk/pdbe/api/mappings/sequence_domains"
-                }
-            }
-        }
-    }
-}
-```
-
-Custom Properties
-=================
-
-It is possible to provide property descriptors that transform data to internal representation and define how it should be exported into one or mode CIF categories. Examples of this are located in the ``mol-model-props`` module and are linked to the server in the config and ``servers/model/properties``.
-
-Local Mode
-==========
-
-The server can be run in local/file based mode:
-
-```
-node build/node_modules/servers/model/server jobs.json
-```
-
-where ``jobs.json`` is an array of
-
-```ts
-type LocalInput = {
-    input: string,
-    output: string,
-    query: QueryName,
-    modelNums?: number[],
-    params?: any,
-    binary?: boolean
-}[]
-```
-
-For example
-
-```json
-[
-  {
-    "input": "c:/test/quick/1tqn.cif",
-    "output": "c:/test/quick/localapi/1tqn_full.cif",
-    "query": "full"
-  },
-  {
-    "input": "c:/test/quick/1tqn.cif",
-    "output": "c:/test/quick/localapi/1tqn_full.bcif",
-    "query": "full",
-    "params": {}
-  },
-  {
-    "input": "c:/test/quick/1cbs_updated.cif",
-    "output": "c:/test/quick/localapi/1cbs_ligint.cif",
-    "query": "residueInteraction",
-    "params": {
-      "atom_site": { "label_comp_id": "REA" }
-    }
-  }
-]
-```

docs/state/transforms.md

@@ -1,738 +0,0 @@
-# Mol* Plugin State Transformer Reference
-
-* [build-in.root](#build-in-root)
-* [ms-plugin.download](#ms-plugin-download)
-* [ms-plugin.read-file](#ms-plugin-read-file)
-* [ms-plugin.parse-cif](#ms-plugin-parse-cif)
-* [ms-plugin.parse-ccp4](#ms-plugin-parse-ccp4)
-* [ms-plugin.parse-dsn6](#ms-plugin-parse-dsn6)
-* [ms-plugin.trajectory-from-mmcif](#ms-plugin-trajectory-from-mmcif)
-* [ms-plugin.trajectory-from-pdb](#ms-plugin-trajectory-from-pdb)
-* [ms-plugin.model-from-trajectory](#ms-plugin-model-from-trajectory)
-* [ms-plugin.structure-from-model](#ms-plugin-structure-from-model)
-* [ms-plugin.structure-assembly-from-model](#ms-plugin-structure-assembly-from-model)
-* [ms-plugin.structure-symmetry-from-model](#ms-plugin-structure-symmetry-from-model)
-* [ms-plugin.structure-selection](#ms-plugin-structure-selection)
-* [ms-plugin.structure-complex-element](#ms-plugin-structure-complex-element)
-* [ms-plugin.custom-model-properties](#ms-plugin-custom-model-properties)
-* [ms-plugin.volume-from-ccp4](#ms-plugin-volume-from-ccp4)
-* [ms-plugin.volume-from-dsn6](#ms-plugin-volume-from-dsn6)
-* [ms-plugin.representation-highlight-loci](#ms-plugin-representation-highlight-loci)
-* [ms-plugin.representation-select-loci](#ms-plugin-representation-select-loci)
-* [ms-plugin.default-loci-label-provider](#ms-plugin-default-loci-label-provider)
-* [ms-plugin.structure-representation-3d](#ms-plugin-structure-representation-3d)
-* [ms-plugin.explode-structure-representation-3d](#ms-plugin-explode-structure-representation-3d)
-* [ms-plugin.volume-representation-3d](#ms-plugin-volume-representation-3d)
-* [ms-plugin.focus-loci-on-select](#ms-plugin-focus-loci-on-select)
-* [ms-plugin.pdbe-structure-quality-report-prop](#ms-plugin-pdbe-structure-quality-report-prop)
-* [ms-plugin.rcsb-assembly-symmetry-prop](#ms-plugin-rcsb-assembly-symmetry-prop)
-* [ms-plugin.structure-animation](#ms-plugin-structure-animation)
-* [ms-plugin.scene-labels](#ms-plugin-scene-labels)
-
-----------------------------
-## <a name="build-in-root"></a>build-in.root :: () -> ()
-*For internal use.*
-
-----------------------------
-## <a name="ms-plugin-download"></a>ms-plugin.download :: Root -> String | Binary
-*Download string or binary data from the specified URL*
-
-### Parameters
-- **url**: String *(Resource URL. Must be the same domain or support CORS.)*
-- **label**?: String
-- **isBinary**?: true/false *(If true, download data as binary (string otherwise))*
-
-### Default Parameters
-```js
-{
-  "url": "https://www.ebi.ac.uk/pdbe/static/entry/1cbs_updated.cif"
-}
-```
-----------------------------
-## <a name="ms-plugin-read-file"></a>ms-plugin.read-file :: Root -> String | Binary
-*Read string or binary data from the specified file*
-
-### Parameters
-- **file**: JavaScript File Handle
-- **label**?: String
-- **isBinary**?: true/false *(If true, open file as as binary (string otherwise))*
-
-### Default Parameters
-```js
-{}
-```
-----------------------------
-## <a name="ms-plugin-parse-cif"></a>ms-plugin.parse-cif :: String | Binary -> Cif
-*Parse CIF from String or Binary data*
-
-----------------------------
-## <a name="ms-plugin-parse-ccp4"></a>ms-plugin.parse-ccp4 :: Binary -> Ccp4
-*Parse CCP4/MRC/MAP from Binary data*
-
-----------------------------
-## <a name="ms-plugin-parse-dsn6"></a>ms-plugin.parse-dsn6 :: Binary -> Dsn6
-*Parse CCP4/BRIX from Binary data*
-
-----------------------------
-## <a name="ms-plugin-trajectory-from-mmcif"></a>ms-plugin.trajectory-from-mmcif :: Cif -> Trajectory
-*Identify and create all separate models in the specified CIF data block*
-
-### Parameters
-- **blockHeader**?: String *(Header of the block to parse. If none is specifed, the 1st data block in the file is used.)*
-
-### Default Parameters
-```js
-{}
-```
-----------------------------
-## <a name="ms-plugin-trajectory-from-pdb"></a>ms-plugin.trajectory-from-pdb :: String -> Trajectory
-
-----------------------------
-## <a name="ms-plugin-model-from-trajectory"></a>ms-plugin.model-from-trajectory :: Trajectory -> Model
-*Create a molecular structure from the specified model.*
-
-### Parameters
-- **modelIndex**: Numeric value *(Zero-based index of the model)*
-
-### Default Parameters
-```js
-{
-  "modelIndex": 0
-}
-```
-----------------------------
-## <a name="ms-plugin-structure-from-model"></a>ms-plugin.structure-from-model :: Model -> Structure
-*Create a molecular structure from the specified model.*
-
-----------------------------
-## <a name="ms-plugin-structure-assembly-from-model"></a>ms-plugin.structure-assembly-from-model :: Model -> Structure
-*Create a molecular structure assembly.*
-
-### Parameters
-- **id**?: String *(Assembly Id. Value 'deposited' can be used to specify deposited asymmetric unit.)*
-
-### Default Parameters
-```js
-{}
-```
-----------------------------
-## <a name="ms-plugin-structure-symmetry-from-model"></a>ms-plugin.structure-symmetry-from-model :: Model -> Structure
-*Create a molecular structure symmetry.*
-
-### Parameters
-- **ijkMin**: 3D vector [x, y, z]
-- **ijkMax**: 3D vector [x, y, z]
-
-### Default Parameters
-```js
-{
-  "ijkMin": [
-    -1,
-    -1,
-    -1
-  ],
-  "ijkMax": [
-    1,
-    1,
-    1
-  ]
-}
-```
-----------------------------
-## <a name="ms-plugin-structure-selection"></a>ms-plugin.structure-selection :: Structure -> Structure
-*Create a molecular structure from the specified query expression.*
-
-### Parameters
-- **query**: Value
-- **label**?: String
-
-### Default Parameters
-```js
-{}
-```
-----------------------------
-## <a name="ms-plugin-structure-complex-element"></a>ms-plugin.structure-complex-element :: Structure -> Structure
-*Create a molecular structure from the specified model.*
-
-### Parameters
-- **type**: One of 'atomic-sequence', 'water', 'atomic-het', 'spheres'
-
-### Default Parameters
-```js
-{
-  "type": "atomic-sequence"
-}
-```
-----------------------------
-## <a name="ms-plugin-custom-model-properties"></a>ms-plugin.custom-model-properties :: Model -> Model
-
-### Parameters
-- **properties**: Array of  *(A list of property descriptor ids.)*
-
-### Default Parameters
-```js
-{
-  "properties": []
-}
-```
-----------------------------
-## <a name="ms-plugin-volume-from-ccp4"></a>ms-plugin.volume-from-ccp4 :: Ccp4 -> Data
-*Create Volume from CCP4/MRC/MAP data*
-
-### Parameters
-- **voxelSize**: 3D vector [x, y, z]
-
-### Default Parameters
-```js
-{
-  "voxelSize": [
-    1,
-    1,
-    1
-  ]
-}
-```
-----------------------------
-## <a name="ms-plugin-volume-from-dsn6"></a>ms-plugin.volume-from-dsn6 :: Dsn6 -> Data
-*Create Volume from DSN6/BRIX data*
-
-### Parameters
-- **voxelSize**: 3D vector [x, y, z]
-
-### Default Parameters
-```js
-{
-  "voxelSize": [
-    1,
-    1,
-    1
-  ]
-}
-```
-----------------------------
-## <a name="ms-plugin-representation-highlight-loci"></a>ms-plugin.representation-highlight-loci :: Root -> Behavior
-
-----------------------------
-## <a name="ms-plugin-representation-select-loci"></a>ms-plugin.representation-select-loci :: Root -> Behavior
-
-----------------------------
-## <a name="ms-plugin-default-loci-label-provider"></a>ms-plugin.default-loci-label-provider :: Root -> Behavior
-
-----------------------------
-## <a name="ms-plugin-structure-representation-3d"></a>ms-plugin.structure-representation-3d :: Structure -> Representation3D
-
-### Parameters
-- **type**: Object { name: string, params: object } where name+params are:
-  - **cartoon**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **sizeFactor**: Numeric value
-      - **linearSegments**: Numeric value
-      - **radialSegments**: Numeric value
-      - **aspectRatio**: Numeric value
-      - **arrowFactor**: Numeric value
-      - **visuals**: Array of 'polymer-trace', 'polymer-gap', 'nucleotide-block', 'direction-wedge'
-
-  - **ball-and-stick**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **sizeFactor**: Numeric value
-      - **detail**: Numeric value
-      - **linkScale**: Numeric value
-      - **linkSpacing**: Numeric value
-      - **radialSegments**: Numeric value
-      - **sizeAspectRatio**: Numeric value
-      - **visuals**: Array of 'element-sphere', 'intra-link', 'inter-link'
-
-  - **carbohydrate**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **detail**: Numeric value
-      - **sizeFactor**: Numeric value
-      - **linkScale**: Numeric value
-      - **linkSpacing**: Numeric value
-      - **radialSegments**: Numeric value
-      - **linkSizeFactor**: Numeric value
-      - **visuals**: Array of 'carbohydrate-symbol', 'carbohydrate-link', 'carbohydrate-terminal-link'
-
-  - **distance-restraint**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **linkScale**: Numeric value
-      - **linkSpacing**: Numeric value
-      - **radialSegments**: Numeric value
-      - **sizeFactor**: Numeric value
-
-  - **molecular-surface**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **resolution**: Numeric value
-      - **radiusOffset**: Numeric value
-      - **smoothness**: Numeric value
-      - **useGpu**: true/false
-      - **ignoreCache**: true/false
-      - **sizeFactor**: Numeric value
-      - **lineSizeAttenuation**: true/false
-      - **visuals**: Array of 'gaussian-surface', 'gaussian-wireframe'
-
-  - **molecular-volume**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **isoValueNorm**: Numeric value *(Normalized Isolevel Value)*
-      - **renderMode**: One of 'isosurface', 'volume'
-      - **controlPoints**: A list of 2d vectors [xi, yi][]
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **resolution**: Numeric value
-      - **radiusOffset**: Numeric value
-      - **smoothness**: Numeric value
-
-  - **point**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **sizeFactor**: Numeric value
-      - **pointSizeAttenuation**: true/false
-      - **pointFilledCircle**: true/false
-      - **pointEdgeBleach**: Numeric value
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-
-  - **spacefill**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **unitKinds**: Array of 'atomic', 'spheres', 'gaussians'
-      - **sizeFactor**: Numeric value
-      - **detail**: Numeric value
-
-
-- **colorTheme**: Object { name: string, params: object } where name+params are:
-  - **carbohydrate-symbol**:
-Object with:
-
-  - **chain-id**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **cross-link**:
-Object with:
-      - **domain**: Interval [min, max]
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **element-index**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **element-symbol**:
-Object with:
-
-  - **molecule-type**:
-Object with:
-
-  - **polymer-id**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **polymer-index**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **residue-name**:
-Object with:
-
-  - **secondary-structure**:
-Object with:
-
-  - **sequence-id**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **shape-group**:
-Object with:
-
-  - **unit-index**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **uniform**:
-Object with:
-      - **value**: Color as 0xrrggbb
-
-
-- **sizeTheme**: Object { name: string, params: object } where name+params are:
-  - **physical**:
-Object with:
-
-  - **shape-group**:
-Object with:
-
-  - **uniform**:
-Object with:
-      - **value**: Numeric value
-
-
-
-### Default Parameters
-```js
-{
-  "type": {
-    "name": "cartoon",
-    "params": {
-      "alpha": 1,
-      "useFog": true,
-      "highlightColor": 16737945,
-      "selectColor": 3407641,
-      "quality": "auto",
-      "doubleSided": false,
-      "flipSided": false,
-      "flatShaded": false,
-      "unitKinds": [
-        "atomic",
-        "spheres"
-      ],
-      "sizeFactor": 0.2,
-      "linearSegments": 8,
-      "radialSegments": 16,
-      "aspectRatio": 5,
-      "arrowFactor": 1.5,
-      "visuals": [
-        "polymer-trace"
-      ]
-    }
-  },
-  "colorTheme": {
-    "name": "polymer-id",
-    "params": {
-      "list": "RedYellowBlue"
-    }
-  },
-  "sizeTheme": {
-    "name": "uniform",
-    "params": {
-      "value": 1
-    }
-  }
-}
-```
-----------------------------
-## <a name="ms-plugin-explode-structure-representation-3d"></a>ms-plugin.explode-structure-representation-3d :: Representation3D -> Obj
-
-### Parameters
-- **t**: Numeric value
-
-### Default Parameters
-```js
-{
-  "t": 0
-}
-```
-----------------------------
-## <a name="ms-plugin-volume-representation-3d"></a>ms-plugin.volume-representation-3d :: Data -> Representation3D
-
-### Parameters
-- **type**: Object { name: string, params: object } where name+params are:
-  - **isosurface**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **doubleSided**: true/false
-      - **flipSided**: true/false
-      - **flatShaded**: true/false
-      - **isoValue**:       - **absolute**: Numeric value
-      - **relative**: Numeric value
-
-      - **sizeFactor**: Numeric value
-      - **lineSizeAttenuation**: true/false
-      - **visuals**: Array of 'solid', 'wireframe'
-
-  - **direct-volume**:
-Object with:
-      - **alpha**: Numeric value
-      - **useFog**: true/false
-      - **highlightColor**: Color as 0xrrggbb
-      - **selectColor**: Color as 0xrrggbb
-      - **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-      - **isoValueNorm**: Numeric value *(Normalized Isolevel Value)*
-      - **renderMode**: One of 'isosurface', 'volume'
-      - **controlPoints**: A list of 2d vectors [xi, yi][]
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-
-- **colorTheme**: Object { name: string, params: object } where name+params are:
-  - **carbohydrate-symbol**:
-Object with:
-
-  - **chain-id**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **cross-link**:
-Object with:
-      - **domain**: Interval [min, max]
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **element-index**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **element-symbol**:
-Object with:
-
-  - **molecule-type**:
-Object with:
-
-  - **polymer-id**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **polymer-index**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **residue-name**:
-Object with:
-
-  - **secondary-structure**:
-Object with:
-
-  - **sequence-id**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **shape-group**:
-Object with:
-
-  - **unit-index**:
-Object with:
-      - **list**: One of 'OrangeRed', 'PurpleBlue', 'BluePurple', 'Oranges', 'BlueGreen', 'YellowOrangeBrown', 'YellowGreen', 'Reds', 'RedPurple', 'Greens', 'YellowGreenBlue', 'Purples', 'GreenBlue', 'Greys', 'YellowOrangeRed', 'PurpleRed', 'Blues', 'PurpleBlueGreen', 'Spectral', 'RedYellowGreen', 'RedBlue', 'PinkYellowGreen', 'PurpleGreen', 'RedYellowBlue', 'BrownWhiteGreen', 'RedGrey', 'PurpleOrange', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1', 'Magma', 'Inferno', 'Plasma', 'Viridis', 'Cividis', 'Twilight', 'Rainbow', 'RedWhiteBlue'
-
-  - **uniform**:
-Object with:
-      - **value**: Color as 0xrrggbb
-
-
-- **sizeTheme**: Object { name: string, params: object } where name+params are:
-  - **physical**:
-Object with:
-
-  - **shape-group**:
-Object with:
-
-  - **uniform**:
-Object with:
-      - **value**: Numeric value
-
-
-
-### Default Parameters
-```js
-{
-  "type": {
-    "name": "isosurface",
-    "params": {
-      "alpha": 1,
-      "useFog": true,
-      "highlightColor": 16737945,
-      "selectColor": 3407641,
-      "quality": "auto",
-      "doubleSided": false,
-      "flipSided": false,
-      "flatShaded": false,
-      "isoValue": {
-        "kind": "relative",
-        "stats": {
-          "min": 0,
-          "max": 0,
-          "mean": 0,
-          "sigma": 0
-        },
-        "relativeValue": 2
-      },
-      "sizeFactor": 1,
-      "lineSizeAttenuation": false,
-      "visuals": [
-        "solid"
-      ]
-    }
-  },
-  "colorTheme": {
-    "name": "uniform",
-    "params": {
-      "value": 13421772
-    }
-  },
-  "sizeTheme": {
-    "name": "uniform",
-    "params": {
-      "value": 1
-    }
-  }
-}
-```
-----------------------------
-## <a name="ms-plugin-focus-loci-on-select"></a>ms-plugin.focus-loci-on-select :: Root -> Behavior
-
-### Parameters
-- **minRadius**: Numeric value
-- **extraRadius**: Numeric value *(Value added to the boundning sphere radius of the Loci.)*
-
-### Default Parameters
-```js
-{
-  "minRadius": 10,
-  "extraRadius": 4
-}
-```
-----------------------------
-## <a name="ms-plugin-pdbe-structure-quality-report-prop"></a>ms-plugin.pdbe-structure-quality-report-prop :: Root -> Behavior
-
-### Parameters
-- **autoAttach**: true/false
-
-### Default Parameters
-```js
-{
-  "autoAttach": false
-}
-```
-----------------------------
-## <a name="ms-plugin-rcsb-assembly-symmetry-prop"></a>ms-plugin.rcsb-assembly-symmetry-prop :: Root -> Behavior
-
-### Parameters
-- **autoAttach**: true/false
-
-### Default Parameters
-```js
-{
-  "autoAttach": false
-}
-```
-----------------------------
-## <a name="ms-plugin-structure-animation"></a>ms-plugin.structure-animation :: Root -> Behavior
-
-### Parameters
-- **rotate**: true/false
-- **rotateValue**: Numeric value
-- **explode**: true/false
-- **explodeValue**: Numeric value
-
-### Default Parameters
-```js
-{
-  "rotate": false,
-  "rotateValue": 0,
-  "explode": false,
-  "explodeValue": 0
-}
-```
-----------------------------
-## <a name="ms-plugin-scene-labels"></a>ms-plugin.scene-labels :: Root -> Behavior
-
-### Parameters
-- **alpha**: Numeric value
-- **useFog**: true/false
-- **highlightColor**: Color as 0xrrggbb
-- **selectColor**: Color as 0xrrggbb
-- **quality**: One of 'custom', 'auto', 'highest', 'higher', 'high', 'medium', 'low', 'lower', 'lowest'
-- **fontFamily**: One of 'sans-serif', 'monospace', 'serif', 'cursive'
-- **fontQuality**: One of '0', '1', '2', '3', '4'
-- **fontStyle**: One of 'normal', 'italic', 'oblique'
-- **fontVariant**: One of 'normal', 'small-caps'
-- **fontWeight**: One of 'normal', 'bold'
-- **sizeFactor**: Numeric value
-- **borderWidth**: Numeric value
-- **borderColor**: Color as 0xrrggbb
-- **offsetX**: Numeric value
-- **offsetY**: Numeric value
-- **offsetZ**: Numeric value
-- **background**: true/false
-- **backgroundMargin**: Numeric value
-- **backgroundColor**: Color as 0xrrggbb
-- **backgroundOpacity**: Numeric value
-- **attachment**: One of 'bottom-left', 'bottom-center', 'bottom-right', 'middle-left', 'middle-center', 'middle-right', 'top-left', 'top-center', 'top-right'
-- **levels**: Array of 'structure', 'polymer', 'ligand'
-
-### Default Parameters
-```js
-{
-  "alpha": 1,
-  "useFog": true,
-  "highlightColor": 16737945,
-  "selectColor": 3407641,
-  "quality": "auto",
-  "fontFamily": "sans-serif",
-  "fontQuality": 3,
-  "fontStyle": "normal",
-  "fontVariant": "normal",
-  "fontWeight": "normal",
-  "sizeFactor": 1,
-  "borderWidth": 0,
-  "borderColor": 8421504,
-  "offsetX": 0,
-  "offsetY": 0,
-  "offsetZ": 0,
-  "background": true,
-  "backgroundMargin": 0.2,
-  "backgroundColor": 16775930,
-  "backgroundOpacity": 0.9,
-  "attachment": "middle-center",
-  "levels": []
-}
-```
-----------------------------

docs/volume-server/README.md

@@ -1,129 +0,0 @@
-What is VolumeServer
-=====================
-
-VolumeServer is a service for accessing subsets of volumetric density data. It automatically downsamples the data depending on the volume of the requested region to reduce the bandwidth requirements and provide near-instant access to even the largest data sets.
-
-It uses the text based CIF and BinaryCIF formats to deliver the data to the client. 
-
-For quick info about the benefits of using the server, check out the [examples](examples.md).
-
-Installing the Server 
-=====================
-
-- Install [Node.js](https://nodejs.org/en/) (tested on Node 6.* and 7.*; x64 version is strongly preferred).
-- Get the code.
-- Prepare the data.
-- Run the server.
-
-Preparing the Data
-------------------
-
-For the server to work, CCP4/MAP (models 0, 1, 2 are supported) input data need to be converted into a custom block format. 
-To achieve this, use the ``pack`` application.
-
-- To prepare data from x-ray based methods, use: 
-
-    ```
-    node pack -xray main.ccp4 diff.ccp4 out.mdb
-    ```
-
-- For EM data, use:
-
-    ```
-    node pack -em em.map out.mdb
-    ```
-
-Running the Server
-------------------
-
-- Install production dependencies:
-
-   ```
-   npm install --only=production
-   ```
-
-- Update ``server-config.js`` to link to your data and optionally tweak the other parameters.
-
-- Run it:
-
-    ```
-    node server
-    ```
-
-    In production it is a good idea to use a service that will keep the server running, such as [forever.js](https://github.com/foreverjs/forever).
-
-### Local Mode
-
-The program ``local`` in the build folder can be used to query the data without running a http server.
-
-- ``node local`` prints the program usage.
-- ``node local jobs.json`` takes a list of jobs to execute in JSON format. A job entry is defined by this interface:
-
-    ```TypeScript
-    interface JobEntry {
-        source: {
-            filename: string,    
-            name: string,
-            id: string
-        },
-        query: {
-            kind: 'box' | 'cell',
-            space?: 'fractional' | 'cartesian',
-            bottomLeft?: number[],
-            topRight?: number[],
-        }
-        params: {
-            /** Determines the detail level as specified in server-config */
-            detail?: number,
-            /** 
-             * Determines the sampling level:
-             * 1: Original data
-             * 2: Downsampled by factor 1/2
-             * ...
-             * N: downsampled 1/2^(N-1)
-             */
-            forcedSamplingLevel?: number,
-            asBinary: boolean,
-        },
-        outputFolder: string
-    }
-    ```
-
-    Example ``jobs.json`` file content:
-
-    ```TypeScript
-    [{
-        source: {
-            filename: `g:/test/mdb/emd-8116.mdb`,
-            name: 'em',
-            id: '8116',
-        },
-        query: {
-            kind: 'cell'
-        },
-        params: {
-            detail: 4,
-            asBinary: true
-        },
-        outputFolder: 'g:/test/local-test'
-    }]
-    ```
-
-## Navigating the Source Code
-
-The source code is split into 2 mains parts: ``pack`` and ``server``:
-
-- The ``pack`` part provides the means of converting CCP4 files into the internal block format.
-- The ``server`` includes
-  - ``query``: the main part of the server that handles a query. ``execute.ts`` is the "entry point".
-  - ``algebra``: linear, "coordinate", and "box" algebra provides the means for calculations necessary to concent a user query into a menaningful response.
-  - API wrapper that handles the requests.
-
-Consuming the Data 
-==================
-
-The data can be consumed in any (modern) browser using the [CIFTools.js library](https://github.com/dsehnal/CIFTools.js) (or any other piece of code that can read text or binary CIF).
-
-The [Data Format](DataFormat.md) document gives a detailed description of the server response format.
-
-As a reference/example of the server usage, please see the implementation in [LiteMol](https://github.com/dsehnal/LiteMol) ([CIF.ts + Data.ts](https://github.com/dsehnal/LiteMol/tree/master/src/lib/Core/Formats/Density), [UI](https://github.com/dsehnal/LiteMol/tree/master/src/Viewer/Extensions/DensityStreaming)) or in Mol*.

examples/867861-core.cif

@@ -0,0 +1,884 @@
+####################################################################### 
+# 
+# This file contains crystal structure data downloaded from the 
+# Cambridge Structural Database (CSD) hosted by the Cambridge 
+# Crystallographic Data Centre (CCDC).
+# 
+# Full information about CCDC data access policies and citation 
+# guidelines are available at http://www.ccdc.cam.ac.uk/access/V1 
+# 
+# Audit and citation data items may have been added by the CCDC. 
+# Please retain this information to preserve the provenance of 
+# this file and to allow appropriate attribution of the data. 
+# 
+#######################################################################
+
+data_n1379
+_audit_block_doi                 10.5517/ccy42jn
+_database_code_depnum_ccdc_archive 'CCDC 867861'
+loop_
+_citation_id
+_citation_doi
+_citation_year
+1 10.1002/chem.201202070 2012
+_audit_update_record             
+;
+2012-02-20 deposited with the CCDC.
+2016-10-08 downloaded from the CCDC.
+;
+
+_audit_creation_method           SHELXL-97
+_chemical_name_systematic        
+;
+?
+;
+_chemical_name_common            ?
+_chemical_melting_point          ?
+_chemical_formula_moiety         'C76 H90 N10 O14 4(C2 F3 O2) 4(C2 H3 N)'
+_chemical_formula_sum            'C92 H102 F12 N14 O22'
+_chemical_formula_weight         1983.88
+
+loop_
+_atom_type_symbol
+_atom_type_description
+_atom_type_scat_dispersion_real
+_atom_type_scat_dispersion_imag
+_atom_type_scat_source
+C C 0.0181 0.0091 'International Tables Vol C Tables 4.2.6.8 and 6.1.1.4'
+H H 0.0000 0.0000 'International Tables Vol C Tables 4.2.6.8 and 6.1.1.4'
+N N 0.0311 0.0180 'International Tables Vol C Tables 4.2.6.8 and 6.1.1.4'
+O O 0.0492 0.0322 'International Tables Vol C Tables 4.2.6.8 and 6.1.1.4'
+F F 0.0727 0.0534 'International Tables Vol C Tables 4.2.6.8 and 6.1.1.4'
+
+_symmetry_cell_setting           Triclinic
+_symmetry_space_group_name_H-M   P-1
+
+loop_
+_symmetry_equiv_pos_as_xyz
+'x, y, z'
+'-x, -y, -z'
+
+_cell_length_a                   11.0829(8)
+_cell_length_b                   14.6829(10)
+_cell_length_c                   16.8532(17)
+_cell_angle_alpha                105.728(6)
+_cell_angle_beta                 100.310(6)
+_cell_angle_gamma                110.620(4)
+_cell_volume                     2353.3(3)
+_cell_formula_units_Z            1
+_cell_measurement_temperature    100(2)
+_cell_measurement_reflns_used    5934
+_cell_measurement_theta_min      2.86
+_cell_measurement_theta_max      64.30
+
+_exptl_crystal_description       plate
+_exptl_crystal_colour            violet
+_exptl_crystal_size_max          0.57
+_exptl_crystal_size_mid          0.18
+_exptl_crystal_size_min          0.05
+_exptl_crystal_density_meas      ?
+_exptl_crystal_density_diffrn    1.400
+_exptl_crystal_density_method    ?
+_exptl_crystal_F_000             1036
+_exptl_absorpt_coefficient_mu    0.995
+_exptl_absorpt_correction_type   integration
+_exptl_absorpt_correction_T_min  0.6022
+_exptl_absorpt_correction_T_max  0.9482
+_exptl_absorpt_process_details   'XPREP, face-indexed'
+
+_exptl_special_details           
+;
+?
+;
+
+_diffrn_ambient_temperature      100(2)
+_diffrn_radiation_wavelength     1.54178
+_diffrn_radiation_type           CuK\a
+_diffrn_radiation_source         microsource
+_diffrn_radiation_monochromator  'Quazar optics'
+_diffrn_measurement_device_type  'Bruker APEX-II CCD'
+_diffrn_measurement_method       '\f and \w scans'
+_diffrn_detector_area_resol_mean ?
+_diffrn_reflns_number            16613
+_diffrn_reflns_av_R_equivalents  0.1477
+_diffrn_reflns_av_sigmaI/netI    0.1112
+_diffrn_reflns_limit_h_min       -12
+_diffrn_reflns_limit_h_max       8
+_diffrn_reflns_limit_k_min       -17
+_diffrn_reflns_limit_k_max       17
+_diffrn_reflns_limit_l_min       -19
+_diffrn_reflns_limit_l_max       19
+_diffrn_reflns_theta_min         2.86
+_diffrn_reflns_theta_max         64.94
+_reflns_number_total             7680
+_reflns_number_gt                5560
+_reflns_threshold_expression     >2sigma(I)
+
+_computing_data_collection       'Bruker APEX2'
+_computing_cell_refinement       'Bruker SAINT'
+_computing_data_reduction        'Bruker SAINT'
+_computing_structure_solution    'SHELXS-97 (Sheldrick, 2008)'
+_computing_structure_refinement  'SHELXL-97 (Sheldrick, 2008)'
+_computing_molecular_graphics    'Bruker SHELXTL'
+_computing_publication_material  'Bruker SHELXTL'
+
+_refine_special_details          
+;
+Refinement of F^2^ against ALL reflections. The weighted R-factor wR and
+goodness of fit S are based on F^2^, conventional R-factors R are based
+on F, with F set to zero for negative F^2^. The threshold expression of
+F^2^ > 2sigma(F^2^) is used only for calculating R-factors(gt) etc. and is
+not relevant to the choice of reflections for refinement. R-factors based
+on F^2^ are statistically about twice as large as those based on F, and R-
+factors based on ALL data will be even larger.
+Rigid bond restraints (esd 0.002) were imposed on the displacement parameters,
+as well as restraints on similar amplitudes (esd 0.002) separated by less
+than 1.7 Ang. on C27, C29, and N102.
+Distance restraints were refined on the bond between C28 and C29.
+;
+
+_refine_ls_structure_factor_coef Fsqd
+_refine_ls_matrix_type           full
+_refine_ls_weighting_scheme      calc
+_refine_ls_weighting_details     
+'calc w=1/[\s^2^(Fo^2^)+(0.1912P)^2^+4.8134P] where P=(Fo^2^+2Fc^2^)/3'
+_atom_sites_solution_primary     direct
+_atom_sites_solution_secondary   difmap
+_atom_sites_solution_hydrogens   geom
+_refine_ls_hydrogen_treatment    mixed
+_refine_ls_extinction_method     none
+_refine_ls_extinction_coef       ?
+_refine_ls_number_reflns         7680
+_refine_ls_number_parameters     633
+_refine_ls_number_restraints     1
+_refine_ls_R_factor_all          0.1349
+_refine_ls_R_factor_gt           0.1101
+_refine_ls_wR_factor_ref         0.3402
+_refine_ls_wR_factor_gt          0.3102
+_refine_ls_goodness_of_fit_ref   1.089
+_refine_ls_restrained_S_all      1.096
+_refine_ls_shift/su_max          0.000
+_refine_ls_shift/su_mean         0.000
+
+loop_
+_atom_site_label
+_atom_site_type_symbol
+_atom_site_fract_x
+_atom_site_fract_y
+_atom_site_fract_z
+_atom_site_U_iso_or_equiv
+_atom_site_adp_type
+_atom_site_occupancy
+_atom_site_symmetry_multiplicity
+_atom_site_calc_flag
+_atom_site_refinement_flags
+_atom_site_disorder_assembly
+_atom_site_disorder_group
+C1 C -0.3373(4) -0.2086(3) -0.2547(3) 0.0229(10) Uani 1 1 d . . .
+H1 H -0.3820 -0.2827 -0.2795 0.027 Uiso 1 1 calc R . .
+C2 C -0.1956(4) -0.0511(3) -0.2602(3) 0.0215(10) Uani 1 1 d . . .
+H2 H -0.1401 -0.0147 -0.2886 0.026 Uiso 1 1 calc R . .
+C3 C -0.3583(4) -0.1574(3) -0.1814(3) 0.0213(9) Uani 1 1 d . . .
+H3 H -0.4168 -0.1960 -0.1558 0.026 Uiso 1 1 calc R . .
+C4 C -0.2146(4) 0.0039(3) -0.1873(3) 0.0180(9) Uani 1 1 d . . .
+H4 H -0.1736 0.0780 -0.1660 0.022 Uiso 1 1 calc R . .
+C5 C -0.2943(4) -0.0488(3) -0.1440(3) 0.0163(9) Uani 1 1 d . . .
+C6 C -0.3053(4) 0.0091(3) -0.0600(3) 0.0170(9) Uani 1 1 d . . .
+C7 C -0.3538(4) -0.0444(3) -0.0071(3) 0.0193(9) Uani 1 1 d . . .
+H7 H -0.3850 -0.1181 -0.0264 0.023 Uiso 1 1 calc R . .
+C8 C -0.2620(4) 0.1168(3) -0.0291(3) 0.0194(9) Uani 1 1 d . . .
+H8 H -0.2304 0.1553 -0.0640 0.023 Uiso 1 1 calc R . .
+C9 C -0.3563(4) 0.0094(3) 0.0725(3) 0.0218(10) Uani 1 1 d . . .
+H9 H -0.3904 -0.0276 0.1077 0.026 Uiso 1 1 calc R . .
+C10 C -0.2648(4) 0.1679(3) 0.0515(3) 0.0190(9) Uani 1 1 d . . .
+H10 H -0.2340 0.2416 0.0724 0.023 Uiso 1 1 calc R . .
+C11 C -0.3024(4) 0.1707(4) 0.1919(3) 0.0227(10) Uani 1 1 d . . .
+H11A H -0.3772 0.1277 0.2088 0.027 Uiso 1 1 calc R . .
+H11B H -0.3094 0.2371 0.1964 0.027 Uiso 1 1 calc R . .
+C12 C -0.1670(4) 0.1920(3) 0.2509(2) 0.0184(9) Uani 1 1 d . . .
+C13 C -0.1547(5) 0.1179(4) 0.2849(3) 0.0223(10) Uani 1 1 d . . .
+H13 H -0.2328 0.0589 0.2788 0.027 Uiso 1 1 calc R . .
+C14 C -0.0541(4) 0.2821(3) 0.2667(2) 0.0204(9) Uani 1 1 d . . .
+H14 H -0.0631 0.3352 0.2475 0.024 Uiso 1 1 calc R . .
+C15 C -0.0272(5) 0.1313(4) 0.3277(3) 0.0231(10) Uani 1 1 d . . .
+H15 H -0.0192 0.0806 0.3506 0.028 Uiso 1 1 calc R . .
+C16 C 0.0731(4) 0.2946(3) 0.3110(2) 0.0195(9) Uani 1 1 d . . .
+C17 C 0.0890(4) 0.2163(3) 0.3381(2) 0.0204(10) Uani 1 1 d . . .
+C18 C 0.2252(5) 0.2149(4) 0.3687(3) 0.0273(11) Uani 1 1 d . . .
+H18A H 0.2965 0.2872 0.3968 0.033 Uiso 1 1 calc R . .
+H18B H 0.2237 0.1802 0.4116 0.033 Uiso 1 1 calc R . .
+C19 C 0.2862(4) 0.4582(4) 0.3974(3) 0.0247(10) Uani 1 1 d . . .
+H19 H 0.3032 0.4532 0.4530 0.030 Uiso 1 1 calc R . .
+C20 C 0.3577(5) 0.5371(4) 0.3739(3) 0.0279(11) Uani 1 1 d . . .
+C21 C 0.4805(5) 0.6358(4) 0.4267(3) 0.0333(12) Uani 1 1 d . . .
+H21A H 0.4882 0.6869 0.3975 0.040 Uiso 1 1 calc R . .
+H21B H 0.4699 0.6656 0.4837 0.040 Uiso 1 1 calc R . .
+C22 C 0.6303(6) 0.5857(4) 0.3599(3) 0.0374(12) Uani 1 1 d . . .
+H22A H 0.6523 0.6416 0.3355 0.045 Uiso 1 1 calc R . .
+H22B H 0.5494 0.5242 0.3176 0.045 Uiso 1 1 calc R . .
+C23 C 0.7460(6) 0.5575(5) 0.3762(4) 0.0413(13) Uani 1 1 d . . .
+H23A H 0.7730 0.5406 0.3231 0.050 Uiso 1 1 calc R . .
+H23B H 0.8246 0.6169 0.4226 0.050 Uiso 1 1 calc R . .
+C24 C 0.7952(6) 0.4206(5) 0.3967(4) 0.0496(16) Uani 1 1 d . . .
+H24A H 0.8893 0.4743 0.4264 0.060 Uiso 1 1 calc R . .
+H24B H 0.7870 0.3874 0.3353 0.060 Uiso 1 1 calc R . .
+C25 C 0.7663(11) 0.3428(7) 0.4361(4) 0.074(3) Uani 1 1 d . . .
+H25A H 0.8372 0.3165 0.4378 0.089 Uiso 1 1 calc R . .
+H25B H 0.7691 0.3754 0.4965 0.089 Uiso 1 1 calc R . .
+C26 C 0.6441(8) 0.1838(7) 0.4342(5) 0.071(2) Uani 1 1 d . . .
+H26A H 0.7153 0.1600 0.4249 0.085 Uiso 1 1 calc R . .
+H26B H 0.6577 0.2137 0.4970 0.085 Uiso 1 1 calc R . .
+C27 C 0.5204(10) 0.1080(8) 0.3921(7) 0.125(5) Uani 1 1 d . . .
+H27A H 0.5220 0.0408 0.3913 0.150 Uiso 1 1 calc R . .
+H27B H 0.4964 0.1039 0.3313 0.150 Uiso 1 1 calc R . .
+C28 C 0.3730(9) 0.0886(7) 0.4988(5) 0.097(4) Uani 1 1 d D . .
+H28A H 0.4284 0.0506 0.5097 0.116 Uiso 1 1 calc R . .
+H28B H 0.4078 0.1526 0.5510 0.116 Uiso 1 1 calc R . .
+C29 C 0.2559(11) 0.033(2) 0.4964(8) 0.281(16) Uani 1 1 d D . .
+H29A H 0.2452 0.0690 0.5518 0.337 Uiso 1 1 calc R . .
+H29B H 0.2589 -0.0322 0.5000 0.337 Uiso 1 1 calc R . .
+C30 C 0.0569(12) -0.1026(9) 0.4169(5) 0.089(3) Uani 1 1 d . . .
+H30A H 0.0442 -0.1134 0.4708 0.107 Uiso 1 1 calc R . .
+H30B H 0.1035 -0.1448 0.3928 0.107 Uiso 1 1 calc R . .
+C31 C -0.0702(10) -0.1360(6) 0.3569(6) 0.083(3) Uani 1 1 d . . .
+H31A H -0.1307 -0.2064 0.3530 0.100 Uiso 1 1 calc R . .
+H31B H -0.1113 -0.0878 0.3776 0.100 Uiso 1 1 calc R . .
+C32 C -0.1964(9) -0.1774(5) 0.2168(5) 0.067(2) Uani 1 1 d . . .
+H32A H -0.2564 -0.2441 0.2195 0.080 Uiso 1 1 calc R . .
+H32B H -0.2342 -0.1258 0.2343 0.080 Uiso 1 1 calc R . .
+C33 C -0.1881(7) -0.1926(5) 0.1297(4) 0.0593(19) Uani 1 1 d . . .
+H33A H -0.2803 -0.2327 0.0880 0.071 Uiso 1 1 calc R . .
+H33B H -0.1354 -0.2340 0.1169 0.071 Uiso 1 1 calc R . .
+C34 C -0.0909(4) -0.0989(4) 0.0440(3) 0.0231(10) Uani 1 1 d . . .
+C35 C -0.1178(5) -0.1907(4) -0.0206(3) 0.0290(11) Uani 1 1 d . . .
+H35 H -0.1660 -0.2560 -0.0162 0.035 Uiso 1 1 calc R . .
+C36 C -0.0214(4) -0.0005(3) 0.0371(3) 0.0182(9) Uani 1 1 d . . .
+C37 C 0.0055(4) 0.0950(3) 0.1019(3) 0.0212(10) Uani 1 1 d . . .
+H37 H -0.0240 0.0948 0.1515 0.025 Uiso 1 1 calc R . .
+C38 C 0.0734(4) 0.1868(4) 0.0931(3) 0.0249(10) Uani 1 1 d . . .
+H38 H 0.0914 0.2503 0.1372 0.030 Uiso 1 1 calc R . .
+N1 N -0.2553(3) -0.1567(3) -0.2921(2) 0.0202(8) Uani 1 1 d . . .
+N2 N -0.3112(3) 0.1137(3) 0.1013(2) 0.0181(8) Uani 1 1 d . . .
+N3 N 0.1854(4) 0.3880(3) 0.3242(2) 0.0221(8) Uani 1 1 d . . .
+N4 N 0.1947(4) 0.4236(3) 0.2574(2) 0.0281(9) Uani 1 1 d . . .
+N5 N 0.2991(4) 0.5136(3) 0.2881(3) 0.0315(10) Uani 1 1 d . . .
+O1 O 0.6028(3) 0.6210(3) 0.4395(2) 0.0301(8) Uani 1 1 d . . .
+O2 O 0.7045(4) 0.4689(3) 0.4018(2) 0.0429(10) Uani 1 1 d . . .
+O3 O 0.6381(7) 0.2580(4) 0.3907(4) 0.0743(17) Uani 1 1 d . . .
+O4 O 0.4041(4) 0.1218(3) 0.4321(2) 0.0412(10) Uani 1 1 d . . .
+O5 O 0.1363(5) 0.0023(6) 0.4355(3) 0.0786(19) Uani 1 1 d . . .
+O6 O -0.0597(6) -0.1394(4) 0.2749(3) 0.0757(17) Uani 1 1 d . . .
+O7 O -0.1244(3) -0.0939(3) 0.1185(2) 0.0320(8) Uani 1 1 d . . .
+C101 C 0.6294(5) 0.3676(4) 0.1211(3) 0.0286(11) Uani 1 1 d . . .
+C102 C 0.5798(8) 0.4458(5) 0.1022(5) 0.066(2) Uani 1 1 d . . .
+C103 C 0.5077(5) 0.8961(4) 0.2466(3) 0.0342(12) Uani 1 1 d . . .
+C104 C 0.3819(8) 0.8078(6) 0.2433(5) 0.077(3) Uani 1 1 d . . .
+C105 C 0.0707(7) 0.4215(5) 0.0313(4) 0.0516(16) Uani 1 1 d . . .
+C106 C 0.2104(7) 0.4969(6) 0.0645(5) 0.066(2) Uani 1 1 d . . .
+H10A H 0.2627 0.4718 0.0303 0.099 Uiso 1 1 calc R . .
+H10B H 0.2471 0.5066 0.1251 0.099 Uiso 1 1 calc R . .
+H10C H 0.2161 0.5637 0.0606 0.099 Uiso 1 1 calc R . .
+C107 C 0.0569(7) 0.6249(7) 0.2999(5) 0.071(2) Uani 1 1 d . . .
+C108 C 0.0316(8) 0.5978(7) 0.2128(5) 0.077(2) Uani 1 1 d . . .
+H10D H 0.0994 0.5753 0.1954 0.115 Uiso 1 1 calc R . .
+H10E H 0.0360 0.6581 0.1969 0.115 Uiso 1 1 calc R . .
+H10F H -0.0588 0.5404 0.1833 0.115 Uiso 1 1 calc R . .
+O101 O 0.5421(4) 0.2774(3) 0.0882(3) 0.0463(10) Uani 1 1 d . . .
+O102 O 0.7472(4) 0.4014(3) 0.1666(3) 0.0485(11) Uani 1 1 d . . .
+O103 O 0.4882(4) 0.9389(3) 0.1955(2) 0.0356(9) Uani 1 1 d . . .
+O104 O 0.6107(4) 0.9176(3) 0.3029(3) 0.0517(11) Uani 1 1 d . . .
+F101 F 0.4877(8) 0.4530(7) 0.1408(4) 0.148(3) Uani 1 1 d . . .
+F102 F 0.5188(6) 0.4177(4) 0.0191(3) 0.105(2) Uani 1 1 d . . .
+F103 F 0.6733(8) 0.5407(3) 0.1298(5) 0.160(4) Uani 1 1 d . . .
+F104 F 0.2811(5) 0.7655(4) 0.1734(3) 0.098(2) Uani 1 1 d . . .
+F105 F 0.3328(8) 0.8406(9) 0.3070(4) 0.233(7) Uani 1 1 d . . .
+F106 F 0.4002(9) 0.7351(6) 0.2617(7) 0.224(6) Uani 1 1 d . . .
+N101 N -0.0392(7) 0.3613(5) 0.0045(4) 0.0715(19) Uani 1 1 d . . .
+N102 N 0.0774(10) 0.6479(13) 0.3716(6) 0.185(7) Uani 1 1 d . . .
+
+loop_
+_atom_site_aniso_label
+_atom_site_aniso_U_11
+_atom_site_aniso_U_22
+_atom_site_aniso_U_33
+_atom_site_aniso_U_23
+_atom_site_aniso_U_13
+_atom_site_aniso_U_12
+C1 0.015(2) 0.023(2) 0.022(2) -0.0003(18) -0.0032(18) 0.0097(17)
+C2 0.021(2) 0.032(2) 0.012(2) 0.0047(17) -0.0022(17) 0.0168(19)
+C3 0.0099(19) 0.030(2) 0.021(2) 0.0059(18) -0.0007(17) 0.0104(17)
+C4 0.017(2) 0.027(2) 0.0111(19) 0.0045(16) -0.0012(16) 0.0157(18)
+C5 0.0087(18) 0.025(2) 0.0134(19) 0.0028(16) -0.0032(15) 0.0121(16)
+C6 0.0075(18) 0.031(2) 0.014(2) 0.0067(17) -0.0017(15) 0.0130(17)
+C7 0.0074(18) 0.029(2) 0.019(2) 0.0047(17) 0.0003(16) 0.0093(17)
+C8 0.0135(19) 0.028(2) 0.013(2) 0.0039(17) -0.0035(16) 0.0120(17)
+C9 0.013(2) 0.031(2) 0.020(2) 0.0072(18) 0.0012(17) 0.0105(18)
+C10 0.0112(19) 0.029(2) 0.018(2) 0.0066(17) 0.0025(16) 0.0122(17)
+C11 0.019(2) 0.038(2) 0.014(2) 0.0056(18) 0.0059(17) 0.0178(19)
+C12 0.019(2) 0.029(2) 0.0068(18) -0.0007(16) 0.0013(16) 0.0169(18)
+C13 0.024(2) 0.030(2) 0.013(2) 0.0023(17) 0.0047(18) 0.0159(19)
+C14 0.027(2) 0.027(2) 0.0079(19) -0.0015(16) 0.0012(17) 0.0200(19)
+C15 0.030(2) 0.034(2) 0.012(2) 0.0056(17) 0.0059(18) 0.023(2)
+C16 0.023(2) 0.028(2) 0.0057(18) -0.0018(16) 0.0027(16) 0.0154(19)
+C17 0.024(2) 0.032(2) 0.0063(18) -0.0012(16) 0.0008(16) 0.0209(19)
+C18 0.028(2) 0.040(3) 0.010(2) -0.0024(18) -0.0038(18) 0.025(2)
+C19 0.023(2) 0.034(2) 0.012(2) -0.0015(18) -0.0024(17) 0.017(2)
+C20 0.024(2) 0.031(2) 0.019(2) 0.0008(19) -0.0030(19) 0.011(2)
+C21 0.027(3) 0.034(3) 0.028(3) -0.001(2) 0.001(2) 0.014(2)
+C22 0.038(3) 0.046(3) 0.027(3) 0.011(2) 0.010(2) 0.018(2)
+C23 0.039(3) 0.054(3) 0.033(3) 0.012(3) 0.015(2) 0.022(3)
+C24 0.051(3) 0.061(4) 0.034(3) -0.002(3) 0.006(3) 0.038(3)
+C25 0.145(8) 0.082(5) 0.039(4) 0.023(4) 0.042(5) 0.090(6)
+C26 0.068(5) 0.096(6) 0.055(4) 0.020(4) 0.007(4) 0.053(5)
+C27 0.105(7) 0.115(7) 0.120(8) -0.033(6) -0.051(6) 0.106(7)
+C28 0.082(6) 0.105(6) 0.049(4) 0.052(4) -0.036(4) -0.012(5)
+C29 0.074(7) 0.62(4) 0.114(10) 0.252(18) 0.001(7) 0.029(14)
+C30 0.149(9) 0.141(9) 0.054(5) 0.065(5) 0.057(6) 0.113(8)
+C31 0.110(7) 0.062(5) 0.082(6) 0.050(4) 0.030(5) 0.021(5)
+C32 0.094(6) 0.046(4) 0.061(4) 0.021(3) 0.040(4) 0.021(4)
+C33 0.056(4) 0.048(4) 0.046(4) 0.013(3) 0.018(3) -0.007(3)
+C34 0.014(2) 0.035(2) 0.014(2) 0.0059(18) -0.0019(17) 0.0096(18)
+C35 0.025(2) 0.032(2) 0.021(2) 0.0050(19) -0.0033(19) 0.010(2)
+C36 0.0082(18) 0.030(2) 0.0130(19) 0.0013(17) -0.0030(15) 0.0125(17)
+C37 0.017(2) 0.032(2) 0.013(2) -0.0004(17) -0.0039(16) 0.0181(19)
+C38 0.024(2) 0.029(2) 0.016(2) -0.0031(18) -0.0035(18) 0.017(2)
+N1 0.0187(18) 0.032(2) 0.0087(16) -0.0003(14) -0.0050(14) 0.0193(16)
+N2 0.0109(16) 0.033(2) 0.0095(16) 0.0031(14) -0.0003(13) 0.0141(15)
+N3 0.0216(18) 0.030(2) 0.0120(17) -0.0001(15) -0.0016(14) 0.0163(16)
+N4 0.029(2) 0.029(2) 0.0150(18) 0.0034(16) -0.0032(16) 0.0089(17)
+N5 0.033(2) 0.032(2) 0.021(2) 0.0036(17) -0.0041(17) 0.0140(18)
+O1 0.0235(17) 0.0363(18) 0.0205(16) 0.0026(14) 0.0003(13) 0.0105(14)
+O2 0.054(2) 0.060(2) 0.031(2) 0.0152(18) 0.0199(18) 0.040(2)
+O3 0.137(5) 0.064(3) 0.083(4) 0.044(3) 0.084(4) 0.073(4)
+O4 0.0309(19) 0.049(2) 0.043(2) 0.0191(18) -0.0025(16) 0.0215(17)
+O5 0.045(3) 0.155(6) 0.048(3) 0.062(3) 0.024(2) 0.031(3)
+O6 0.093(4) 0.048(3) 0.058(3) 0.026(2) -0.016(3) 0.012(3)
+O7 0.0255(17) 0.045(2) 0.0179(16) 0.0091(14) 0.0051(14) 0.0090(15)
+C101 0.033(3) 0.030(3) 0.021(2) 0.0047(19) 0.011(2) 0.014(2)
+C102 0.082(5) 0.053(4) 0.047(4) 0.000(3) -0.010(4) 0.039(4)
+C103 0.041(3) 0.035(3) 0.021(2) 0.008(2) -0.002(2) 0.017(2)
+C104 0.073(5) 0.069(5) 0.048(4) 0.042(4) -0.023(4) -0.012(4)
+C105 0.055(4) 0.045(3) 0.055(4) 0.018(3) 0.001(3) 0.028(3)
+C106 0.057(4) 0.060(4) 0.070(5) 0.018(4) 0.001(4) 0.026(4)
+C107 0.041(4) 0.113(7) 0.059(5) 0.035(4) 0.016(3) 0.028(4)
+C108 0.057(4) 0.081(5) 0.061(5) 0.019(4) 0.011(4) 0.003(4)
+O101 0.033(2) 0.038(2) 0.060(3) 0.0192(19) 0.0048(19) 0.0098(17)
+O102 0.041(2) 0.038(2) 0.053(2) 0.0099(18) -0.0001(19) 0.0125(18)
+O103 0.038(2) 0.043(2) 0.0269(18) 0.0176(16) 0.0086(15) 0.0154(17)
+O104 0.043(2) 0.055(2) 0.045(2) 0.023(2) -0.0085(19) 0.0130(19)
+F101 0.159(6) 0.220(8) 0.099(4) 0.007(5) 0.016(4) 0.166(7)
+F102 0.148(5) 0.067(3) 0.074(3) 0.030(2) -0.031(3) 0.045(3)
+F103 0.177(7) 0.030(2) 0.180(6) 0.007(3) -0.087(5) 0.030(3)
+F104 0.073(3) 0.084(3) 0.072(3) 0.054(2) -0.037(2) -0.028(2)
+F105 0.132(6) 0.291(12) 0.076(4) 0.035(6) 0.034(4) -0.108(8)
+F106 0.161(7) 0.104(5) 0.286(11) 0.146(7) -0.127(7) -0.041(5)
+N101 0.063(4) 0.050(3) 0.082(4) 0.025(3) -0.013(3) 0.018(3)
+N102 0.077(6) 0.35(2) 0.072(6) 0.079(9) 0.015(5) 0.027(9)
+
+_geom_special_details            
+;
+All esds (except the esd in the dihedral angle between two l.s. planes)
+are estimated using the full covariance matrix. The cell esds are taken
+into account individually in the estimation of esds in distances, angles
+and torsion angles; correlations between esds in cell parameters are only
+used when they are defined by crystal symmetry. An approximate (isotropic)
+treatment of cell esds is used for estimating esds involving l.s. planes.
+;
+
+loop_
+_geom_bond_atom_site_label_1
+_geom_bond_atom_site_label_2
+_geom_bond_distance
+_geom_bond_site_symmetry_2
+_geom_bond_publ_flag
+C1 N1 1.334(6) . ?
+C1 C3 1.367(6) . ?
+C1 H1 0.9500 . ?
+C2 N1 1.353(6) . ?
+C2 C4 1.371(6) . ?
+C2 H2 0.9500 . ?
+C3 C5 1.394(6) . ?
+C3 H3 0.9500 . ?
+C4 C5 1.403(6) . ?
+C4 H4 0.9500 . ?
+C5 C6 1.490(6) . ?
+C6 C8 1.390(6) . ?
+C6 C7 1.397(6) . ?
+C7 C9 1.371(6) . ?
+C7 H7 0.9500 . ?
+C8 C10 1.375(6) . ?
+C8 H8 0.9500 . ?
+C9 N2 1.342(6) . ?
+C9 H9 0.9500 . ?
+C10 N2 1.352(6) . ?
+C10 H10 0.9500 . ?
+C11 N2 1.497(5) . ?
+C11 C12 1.517(6) . ?
+C11 H11A 0.9900 . ?
+C11 H11B 0.9900 . ?
+C12 C14 1.382(6) . ?
+C12 C13 1.396(6) . ?
+C13 C15 1.384(6) . ?
+C13 H13 0.9500 . ?
+C14 C16 1.395(6) . ?
+C14 H14 0.9500 . ?
+C15 C17 1.383(7) . ?
+C15 H15 0.9500 . ?
+C16 C17 1.400(6) . ?
+C16 N3 1.418(6) . ?
+C17 C18 1.515(6) . ?
+C18 N1 1.505(5) 2 ?
+C18 H18A 0.9900 . ?
+C18 H18B 0.9900 . ?
+C19 N3 1.356(5) . ?
+C19 C20 1.357(7) . ?
+C19 H19 0.9500 . ?
+C20 N5 1.366(6) . ?
+C20 C21 1.491(6) . ?
+C21 O1 1.435(6) . ?
+C21 H21A 0.9900 . ?
+C21 H21B 0.9900 . ?
+C22 O1 1.429(6) . ?
+C22 C23 1.484(8) . ?
+C22 H22A 0.9900 . ?
+C22 H22B 0.9900 . ?
+C23 O2 1.431(7) . ?
+C23 H23A 0.9900 . ?
+C23 H23B 0.9900 . ?
+C24 O2 1.420(7) . ?
+C24 C25 1.442(11) . ?
+C24 H24A 0.9900 . ?
+C24 H24B 0.9900 . ?
+C25 O3 1.416(11) . ?
+C25 H25A 0.9900 . ?
+C25 H25B 0.9900 . ?
+C26 C27 1.331(12) . ?
+C26 O3 1.481(9) . ?
+C26 H26A 0.9900 . ?
+C26 H26B 0.9900 . ?
+C27 O4 1.605(11) . ?
+C27 H27A 0.9900 . ?
+C27 H27B 0.9900 . ?
+C28 C29 1.252(12) . ?
+C28 O4 1.391(8) . ?
+C28 H28A 0.9900 . ?
+C28 H28B 0.9900 . ?
+C29 O5 1.361(11) . ?
+C29 H29A 0.9900 . ?
+C29 H29B 0.9900 . ?
+C30 O5 1.388(12) . ?
+C30 C31 1.407(13) . ?
+C30 H30A 0.9900 . ?
+C30 H30B 0.9900 . ?
+C31 O6 1.396(10) . ?
+C31 H31A 0.9900 . ?
+C31 H31B 0.9900 . ?
+C32 C33 1.449(9) . ?
+C32 O6 1.464(10) . ?
+C32 H32A 0.9900 . ?
+C32 H32B 0.9900 . ?
+C33 O7 1.453(7) . ?
+C33 H33A 0.9900 . ?
+C33 H33B 0.9900 . ?
+C34 O7 1.362(5) . ?
+C34 C35 1.377(7) . ?
+C34 C36 1.425(7) . ?
+C35 C38 1.404(7) 2 ?
+C35 H35 0.9500 . ?
+C36 C36 1.417(9) 2 ?
+C36 C37 1.417(6) . ?
+C37 C38 1.356(7) . ?
+C37 H37 0.9500 . ?
+C38 C35 1.404(7) 2 ?
+C38 H38 0.9500 . ?
+N1 C18 1.505(5) 2 ?
+N3 N4 1.370(5) . ?
+N4 N5 1.300(6) . ?
+C101 O101 1.227(6) . ?
+C101 O102 1.232(6) . ?
+C101 C102 1.518(9) . ?
+C102 F103 1.301(9) . ?
+C102 F102 1.318(8) . ?
+C102 F101 1.324(11) . ?
+C103 O104 1.224(6) . ?
+C103 O103 1.227(6) . ?
+C103 C104 1.512(9) . ?
+C104 F106 1.260(10) . ?
+C104 F104 1.290(7) . ?
+C104 F105 1.341(14) . ?
+C105 N101 1.139(9) . ?
+C105 C106 1.443(10) . ?
+C106 H10A 0.9800 . ?
+C106 H10B 0.9800 . ?
+C106 H10C 0.9800 . ?
+C107 N102 1.118(11) . ?
+C107 C108 1.360(11) . ?
+C108 H10D 0.9800 . ?
+C108 H10E 0.9800 . ?
+C108 H10F 0.9800 . ?
+
+loop_
+_geom_angle_atom_site_label_1
+_geom_angle_atom_site_label_2
+_geom_angle_atom_site_label_3
+_geom_angle
+_geom_angle_site_symmetry_1
+_geom_angle_site_symmetry_3
+_geom_angle_publ_flag
+N1 C1 C3 121.3(4) . . ?
+N1 C1 H1 119.3 . . ?
+C3 C1 H1 119.3 . . ?
+N1 C2 C4 120.4(4) . . ?
+N1 C2 H2 119.8 . . ?
+C4 C2 H2 119.8 . . ?
+C1 C3 C5 120.4(4) . . ?
+C1 C3 H3 119.8 . . ?
+C5 C3 H3 119.8 . . ?
+C2 C4 C5 120.4(4) . . ?
+C2 C4 H4 119.8 . . ?
+C5 C4 H4 119.8 . . ?
+C3 C5 C4 116.9(4) . . ?
+C3 C5 C6 121.8(4) . . ?
+C4 C5 C6 121.2(4) . . ?
+C8 C6 C7 117.6(4) . . ?
+C8 C6 C5 122.4(4) . . ?
+C7 C6 C5 119.9(4) . . ?
+C9 C7 C6 120.1(4) . . ?
+C9 C7 H7 120.0 . . ?
+C6 C7 H7 120.0 . . ?
+C10 C8 C6 120.4(4) . . ?
+C10 C8 H8 119.8 . . ?
+C6 C8 H8 119.8 . . ?
+N2 C9 C7 120.9(4) . . ?
+N2 C9 H9 119.5 . . ?
+C7 C9 H9 119.5 . . ?
+N2 C10 C8 120.3(4) . . ?
+N2 C10 H10 119.8 . . ?
+C8 C10 H10 119.8 . . ?
+N2 C11 C12 107.7(3) . . ?
+N2 C11 H11A 110.2 . . ?
+C12 C11 H11A 110.2 . . ?
+N2 C11 H11B 110.2 . . ?
+C12 C11 H11B 110.2 . . ?
+H11A C11 H11B 108.5 . . ?
+C14 C12 C13 119.9(4) . . ?
+C14 C12 C11 120.0(4) . . ?
+C13 C12 C11 120.0(4) . . ?
+C15 C13 C12 119.2(4) . . ?
+C15 C13 H13 120.4 . . ?
+C12 C13 H13 120.4 . . ?
+C12 C14 C16 119.7(4) . . ?
+C12 C14 H14 120.2 . . ?
+C16 C14 H14 120.2 . . ?
+C17 C15 C13 122.1(4) . . ?
+C17 C15 H15 118.9 . . ?
+C13 C15 H15 118.9 . . ?
+C14 C16 C17 121.1(4) . . ?
+C14 C16 N3 117.0(4) . . ?
+C17 C16 N3 121.8(4) . . ?
+C15 C17 C16 117.5(4) . . ?
+C15 C17 C18 119.0(4) . . ?
+C16 C17 C18 123.2(4) . . ?
+N1 C18 C17 109.0(3) 2 . ?
+N1 C18 H18A 109.9 2 . ?
+C17 C18 H18A 109.9 . . ?
+N1 C18 H18B 109.9 2 . ?
+C17 C18 H18B 109.9 . . ?
+H18A C18 H18B 108.3 . . ?
+N3 C19 C20 105.0(4) . . ?
+N3 C19 H19 127.5 . . ?
+C20 C19 H19 127.5 . . ?
+C19 C20 N5 108.7(4) . . ?
+C19 C20 C21 129.7(4) . . ?
+N5 C20 C21 121.6(5) . . ?
+O1 C21 C20 113.0(4) . . ?
+O1 C21 H21A 109.0 . . ?
+C20 C21 H21A 109.0 . . ?
+O1 C21 H21B 109.0 . . ?
+C20 C21 H21B 109.0 . . ?
+H21A C21 H21B 107.8 . . ?
+O1 C22 C23 109.1(4) . . ?
+O1 C22 H22A 109.9 . . ?
+C23 C22 H22A 109.9 . . ?
+O1 C22 H22B 109.9 . . ?
+C23 C22 H22B 109.9 . . ?
+H22A C22 H22B 108.3 . . ?
+O2 C23 C22 108.0(5) . . ?
+O2 C23 H23A 110.1 . . ?
+C22 C23 H23A 110.1 . . ?
+O2 C23 H23B 110.1 . . ?
+C22 C23 H23B 110.1 . . ?
+H23A C23 H23B 108.4 . . ?
+O2 C24 C25 110.9(6) . . ?
+O2 C24 H24A 109.5 . . ?
+C25 C24 H24A 109.5 . . ?
+O2 C24 H24B 109.5 . . ?
+C25 C24 H24B 109.5 . . ?
+H24A C24 H24B 108.0 . . ?
+O3 C25 C24 112.1(6) . . ?
+O3 C25 H25A 109.2 . . ?
+C24 C25 H25A 109.2 . . ?
+O3 C25 H25B 109.2 . . ?
+C24 C25 H25B 109.2 . . ?
+H25A C25 H25B 107.9 . . ?
+C27 C26 O3 98.8(7) . . ?
+C27 C26 H26A 112.0 . . ?
+O3 C26 H26A 112.0 . . ?
+C27 C26 H26B 112.0 . . ?
+O3 C26 H26B 112.0 . . ?
+H26A C26 H26B 109.7 . . ?
+C26 C27 O4 114.9(7) . . ?
+C26 C27 H27A 108.5 . . ?
+O4 C27 H27A 108.5 . . ?
+C26 C27 H27B 108.5 . . ?
+O4 C27 H27B 108.5 . . ?
+H27A C27 H27B 107.5 . . ?
+C29 C28 O4 124.1(6) . . ?
+C29 C28 H28A 106.3 . . ?
+O4 C28 H28A 106.3 . . ?
+C29 C28 H28B 106.3 . . ?
+O4 C28 H28B 106.3 . . ?
+H28A C28 H28B 106.4 . . ?
+C28 C29 O5 128.7(9) . . ?
+C28 C29 H29A 105.1 . . ?
+O5 C29 H29A 105.1 . . ?
+C28 C29 H29B 105.1 . . ?
+O5 C29 H29B 105.1 . . ?
+H29A C29 H29B 105.9 . . ?
+O5 C30 C31 110.9(6) . . ?
+O5 C30 H30A 109.5 . . ?
+C31 C30 H30A 109.5 . . ?
+O5 C30 H30B 109.5 . . ?
+C31 C30 H30B 109.5 . . ?
+H30A C30 H30B 108.1 . . ?
+O6 C31 C30 111.7(8) . . ?
+O6 C31 H31A 109.3 . . ?
+C30 C31 H31A 109.3 . . ?
+O6 C31 H31B 109.3 . . ?
+C30 C31 H31B 109.3 . . ?
+H31A C31 H31B 107.9 . . ?
+C33 C32 O6 108.1(6) . . ?
+C33 C32 H32A 110.1 . . ?
+O6 C32 H32A 110.1 . . ?
+C33 C32 H32B 110.1 . . ?
+O6 C32 H32B 110.1 . . ?
+H32A C32 H32B 108.4 . . ?
+C32 C33 O7 111.8(5) . . ?
+C32 C33 H33A 109.3 . . ?
+O7 C33 H33A 109.3 . . ?
+C32 C33 H33B 109.3 . . ?
+O7 C33 H33B 109.3 . . ?
+H33A C33 H33B 107.9 . . ?
+O7 C34 C35 124.0(4) . . ?
+O7 C34 C36 115.2(4) . . ?
+C35 C34 C36 120.8(4) . . ?
+C34 C35 C38 119.3(5) . 2 ?
+C34 C35 H35 120.4 . . ?
+C38 C35 H35 120.4 2 . ?
+C36 C36 C37 119.6(5) 2 . ?
+C36 C36 C34 118.4(5) 2 . ?
+C37 C36 C34 121.9(4) . . ?
+C38 C37 C36 119.9(4) . . ?
+C38 C37 H37 120.1 . . ?
+C36 C37 H37 120.1 . . ?
+C37 C38 C35 122.0(4) . 2 ?
+C37 C38 H38 119.0 . . ?
+C35 C38 H38 119.0 2 . ?
+C1 N1 C2 120.4(4) . . ?
+C1 N1 C18 120.5(4) . 2 ?
+C2 N1 C18 119.1(4) . 2 ?
+C9 N2 C10 120.6(4) . . ?
+C9 N2 C11 119.3(4) . . ?
+C10 N2 C11 119.9(4) . . ?
+C19 N3 N4 110.0(4) . . ?
+C19 N3 C16 130.4(4) . . ?
+N4 N3 C16 119.3(3) . . ?
+N5 N4 N3 107.0(3) . . ?
+N4 N5 C20 109.4(4) . . ?
+C22 O1 C21 112.0(4) . . ?
+C24 O2 C23 111.2(5) . . ?
+C25 O3 C26 101.1(6) . . ?
+C28 O4 C27 123.6(7) . . ?
+C29 O5 C30 109.4(11) . . ?
+C31 O6 C32 107.8(7) . . ?
+C34 O7 C33 116.5(4) . . ?
+O101 C101 O102 129.2(5) . . ?
+O101 C101 C102 113.1(5) . . ?
+O102 C101 C102 117.7(5) . . ?
+F103 C102 F102 108.6(7) . . ?
+F103 C102 F101 104.9(7) . . ?
+F102 C102 F101 105.0(7) . . ?
+F103 C102 C101 114.3(6) . . ?
+F102 C102 C101 112.4(5) . . ?
+F101 C102 C101 111.0(7) . . ?
+O104 C103 O103 130.2(5) . . ?
+O104 C103 C104 115.4(5) . . ?
+O103 C103 C104 114.3(5) . . ?
+F106 C104 F104 107.4(7) . . ?
+F106 C104 F105 99.1(9) . . ?
+F104 C104 F105 105.1(9) . . ?
+F106 C104 C103 115.6(8) . . ?
+F104 C104 C103 117.1(5) . . ?
+F105 C104 C103 110.5(7) . . ?
+N101 C105 C106 179.3(9) . . ?
+C105 C106 H10A 109.5 . . ?
+C105 C106 H10B 109.5 . . ?
+H10A C106 H10B 109.5 . . ?
+C105 C106 H10C 109.5 . . ?
+H10A C106 H10C 109.5 . . ?
+H10B C106 H10C 109.5 . . ?
+N102 C107 C108 179.3(14) . . ?
+C107 C108 H10D 109.5 . . ?
+C107 C108 H10E 109.5 . . ?
+H10D C108 H10E 109.5 . . ?
+C107 C108 H10F 109.5 . . ?
+H10D C108 H10F 109.5 . . ?
+H10E C108 H10F 109.5 . . ?
+
+loop_
+_geom_torsion_atom_site_label_1
+_geom_torsion_atom_site_label_2
+_geom_torsion_atom_site_label_3
+_geom_torsion_atom_site_label_4
+_geom_torsion
+_geom_torsion_site_symmetry_1
+_geom_torsion_site_symmetry_2
+_geom_torsion_site_symmetry_3
+_geom_torsion_site_symmetry_4
+_geom_torsion_publ_flag
+N1 C1 C3 C5 0.3(6) . . . . ?
+N1 C2 C4 C5 1.1(6) . . . . ?
+C1 C3 C5 C4 3.1(6) . . . . ?
+C1 C3 C5 C6 -174.6(4) . . . . ?
+C2 C4 C5 C3 -3.8(5) . . . . ?
+C2 C4 C5 C6 173.9(3) . . . . ?
+C3 C5 C6 C8 -168.8(4) . . . . ?
+C4 C5 C6 C8 13.6(5) . . . . ?
+C3 C5 C6 C7 14.7(5) . . . . ?
+C4 C5 C6 C7 -162.9(4) . . . . ?
+C8 C6 C7 C9 -0.6(5) . . . . ?
+C5 C6 C7 C9 176.0(3) . . . . ?
+C7 C6 C8 C10 1.4(5) . . . . ?
+C5 C6 C8 C10 -175.2(3) . . . . ?
+C6 C7 C9 N2 -0.7(6) . . . . ?
+C6 C8 C10 N2 -0.8(6) . . . . ?
+N2 C11 C12 C14 88.4(5) . . . . ?
+N2 C11 C12 C13 -87.7(5) . . . . ?
+C14 C12 C13 C15 -5.7(6) . . . . ?
+C11 C12 C13 C15 170.4(4) . . . . ?
+C13 C12 C14 C16 4.9(6) . . . . ?
+C11 C12 C14 C16 -171.2(4) . . . . ?
+C12 C13 C15 C17 0.2(6) . . . . ?
+C12 C14 C16 C17 1.4(6) . . . . ?
+C12 C14 C16 N3 179.1(3) . . . . ?
+C13 C15 C17 C16 5.9(6) . . . . ?
+C13 C15 C17 C18 -167.5(4) . . . . ?
+C14 C16 C17 C15 -6.7(6) . . . . ?
+N3 C16 C17 C15 175.7(4) . . . . ?
+C14 C16 C17 C18 166.4(4) . . . . ?
+N3 C16 C17 C18 -11.2(6) . . . . ?
+C15 C17 C18 N1 83.8(5) . . . 2 ?
+C16 C17 C18 N1 -89.3(5) . . . 2 ?
+N3 C19 C20 N5 0.2(5) . . . . ?
+N3 C19 C20 C21 -179.5(5) . . . . ?
+C19 C20 C21 O1 78.8(7) . . . . ?
+N5 C20 C21 O1 -100.9(6) . . . . ?
+O1 C22 C23 O2 66.1(5) . . . . ?
+O2 C24 C25 O3 65.4(6) . . . . ?
+O3 C26 C27 O4 -86.2(9) . . . . ?
+O4 C28 C29 O5 -7(4) . . . . ?
+O5 C30 C31 O6 69.5(9) . . . . ?
+O6 C32 C33 O7 -71.5(8) . . . . ?
+O7 C34 C35 C38 -177.1(4) . . . 2 ?
+C36 C34 C35 C38 1.4(6) . . . 2 ?
+O7 C34 C36 C36 177.6(4) . . . 2 ?
+C35 C34 C36 C36 -1.1(7) . . . 2 ?
+O7 C34 C36 C37 -2.5(6) . . . . ?
+C35 C34 C36 C37 178.9(4) . . . . ?
+C36 C36 C37 C38 -0.8(7) 2 . . . ?
+C34 C36 C37 C38 179.2(4) . . . . ?
+C36 C37 C38 C35 0.5(6) . . . 2 ?
+C3 C1 N1 C2 -3.1(6) . . . . ?
+C3 C1 N1 C18 175.3(4) . . . 2 ?
+C4 C2 N1 C1 2.4(6) . . . . ?
+C4 C2 N1 C18 -176.0(3) . . . 2 ?
+C7 C9 N2 C10 1.4(6) . . . . ?
+C7 C9 N2 C11 -173.8(3) . . . . ?
+C8 C10 N2 C9 -0.6(6) . . . . ?
+C8 C10 N2 C11 174.5(3) . . . . ?
+C12 C11 N2 C9 85.7(4) . . . . ?
+C12 C11 N2 C10 -89.6(4) . . . . ?
+C20 C19 N3 N4 -0.2(5) . . . . ?
+C20 C19 N3 C16 -174.0(4) . . . . ?
+C14 C16 N3 C19 129.4(5) . . . . ?
+C17 C16 N3 C19 -52.9(6) . . . . ?
+C14 C16 N3 N4 -43.9(5) . . . . ?
+C17 C16 N3 N4 133.8(4) . . . . ?
+C19 N3 N4 N5 0.2(5) . . . . ?
+C16 N3 N4 N5 174.8(4) . . . . ?
+N3 N4 N5 C20 -0.1(5) . . . . ?
+C19 C20 N5 N4 -0.1(6) . . . . ?
+C21 C20 N5 N4 179.7(4) . . . . ?
+C23 C22 O1 C21 -171.9(4) . . . . ?
+C20 C21 O1 C22 63.3(6) . . . . ?
+C25 C24 O2 C23 170.3(5) . . . . ?
+C22 C23 O2 C24 164.7(4) . . . . ?
+C24 C25 O3 C26 170.9(5) . . . . ?
+C27 C26 O3 C25 177.5(7) . . . . ?
+C29 C28 O4 C27 -129(2) . . . . ?
+C26 C27 O4 C28 -85.6(11) . . . . ?
+C28 C29 O5 C30 136(3) . . . . ?
+C31 C30 O5 C29 177.4(11) . . . . ?
+C30 C31 O6 C32 178.6(7) . . . . ?
+C33 C32 O6 C31 -173.5(6) . . . . ?
+C35 C34 O7 C33 2.2(7) . . . . ?
+C36 C34 O7 C33 -176.4(5) . . . . ?
+C32 C33 O7 C34 169.3(6) . . . . ?
+O101 C101 C102 F103 -174.2(7) . . . . ?
+O102 C101 C102 F103 6.5(10) . . . . ?
+O101 C101 C102 F102 -49.8(9) . . . . ?
+O102 C101 C102 F102 130.9(7) . . . . ?
+O101 C101 C102 F101 67.5(7) . . . . ?
+O102 C101 C102 F101 -111.9(7) . . . . ?
+O104 C103 C104 F106 -34.8(12) . . . . ?
+O103 C103 C104 F106 149.3(9) . . . . ?
+O104 C103 C104 F104 -163.1(8) . . . . ?
+O103 C103 C104 F104 21.0(11) . . . . ?
+O104 C103 C104 F105 76.7(10) . . . . ?
+O103 C103 C104 F105 -99.2(8) . . . . ?
+
+_diffrn_measured_fraction_theta_max 0.961
+_diffrn_reflns_theta_full        64.94
+_diffrn_measured_fraction_theta_full 0.961
+_refine_diff_density_max         1.693
+_refine_diff_density_min         -0.992
+_refine_diff_density_rms         0.109
+
+# start Validation Reply Form
+_vrf_PLAT213_I                   
+;
+PROBLEM: Atom C5 has ADP max/min Ratio ..... 5.1 oblat
+RESPONSE: The atoms of the glycol chain and of the CBPQT4+ ring showed elongated
+displacement parameters. Attempts to model this disorder did not significantly
+improve the refinement.
+;
+_vrf_PLAT222_I                   
+;
+PROBLEM: Large Non-Solvent H Uiso(max)/Uiso(min) .. 10.0 Ratio
+RESPONSE: Hydrogen atoms were refined as riding models with their isotropic
+displacement parameters linked to their parent atoms.
+In this case the parent atom exhibits disorder with an elongated
+displacement parameter and therefore the riding hydrogen atom is also large.
+;
+_vrf_PLAT241_I                   
+;
+PROBLEM: Check High Ueq as Compared to Neighbors for C27
+RESPONSE: C27 and C29 are part of the disordered glycol chain, however they
+are bonded to C26 and O5 which are relatively well-ordered parts of the
+structure.
+;
+
+# end Validation Reply Form
+
+
+

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

examples/mvs/1cbs-focus.mvsj

@@ -0,0 +1,115 @@
+{
+ "metadata": {
+  "title": "Example MolViewSpec - 1cbs with labelled and zoomed ligand",
+  "version": "1",
+  "timestamp": "2023-11-24T10:45:49.873Z"
+ },
+ "root": {
+  "kind": "root",
+  "children": [
+   {
+    "kind": "download",
+    "params": {
+     "url": "https://www.ebi.ac.uk/pdbe/entry-files/1cbs.bcif"
+    },
+    "children": [
+     {
+      "kind": "parse",
+      "params": {
+       "format": "bcif"
+      },
+      "children": [
+       {
+        "kind": "structure",
+        "params": {
+         "type": "model"
+        },
+        "children": [
+         {
+          "kind": "component",
+          "params": {
+           "selector": "polymer"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "cartoon"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "color": "green"
+              }
+             },
+             {
+              "kind": "color",
+              "params": {
+               "selector": {
+                "label_asym_id": "A",
+                "end_label_seq_id": 50
+               },
+               "color": "#6688ff"
+              }
+             }
+            ]
+           },
+           {
+            "kind": "label",
+            "params": {
+             "text": "Protein"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": "ligand"
+          },
+          "children": [
+           {
+            "kind": "focus",
+            "params": {
+             "direction": [0.5, 0, -1],
+             "up": [0.365, 0.913, 0.183]
+            }
+           },
+           {
+            "kind": "representation",
+            "params": {
+             "type": "ball_and_stick"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "color": "#cc3399"
+              }
+             }
+            ]
+           },
+           {
+            "kind": "label",
+            "params": {
+             "text": "Retinoic Acid"
+            }
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   },
+   {
+    "kind": "canvas",
+    "params": {
+     "background_color": "#ffffee"
+    }
+   }
+  ]
+ }
+}

examples/mvs/1cbs.mvsj

@@ -0,0 +1,117 @@
+{
+ "metadata": {
+  "title": "Example MolViewSpec - 1cbs with labelled protein and ligand",
+  "version": "1",
+  "timestamp": "2023-11-24T10:38:17.483Z"
+ },
+ "root": {
+  "kind": "root",
+  "children": [
+   {
+    "kind": "download",
+    "params": {
+     "url": "https://www.ebi.ac.uk/pdbe/entry-files/1cbs.bcif"
+    },
+    "children": [
+     {
+      "kind": "parse",
+      "params": {
+       "format": "bcif"
+      },
+      "children": [
+       {
+        "kind": "structure",
+        "params": {
+         "type": "model"
+        },
+        "children": [
+         {
+          "kind": "component",
+          "params": {
+           "selector": "polymer"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "cartoon"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "color": "green"
+              }
+             },
+             {
+              "kind": "color",
+              "params": {
+               "selector": {
+                "label_asym_id": "A",
+                "beg_label_seq_id": 1,
+                "end_label_seq_id": 50
+               },
+               "color": "#6688ff"
+              }
+             }
+            ]
+           },
+           {
+            "kind": "label",
+            "params": {
+             "text": "Protein"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": "ligand"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "ball_and_stick"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "color": "#cc3399"
+              }
+             }
+            ]
+           },
+           {
+            "kind": "label",
+            "params": {
+             "text": "Retinoic Acid"
+            }
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   },
+   {
+    "kind": "canvas",
+    "params": {
+     "background_color": "#ffffee"
+    }
+   },
+   {
+    "kind": "camera",
+    "params": {
+     "target": [17, 21, 27],
+     "position": [41, 34, 69],
+     "up": [-0.129,0.966,-0.224]
+    }
+   }
+  ]
+ }
+}

examples/mvs/1h9t_domain_colors.mvsj

@@ -0,0 +1,67 @@
+{
+ "metadata": {
+  "title": "Example MolViewSpec - 1h9t colored by external annotation",
+  "version": "1",
+  "timestamp": "2023-11-24T10:47:33.182Z"
+ },
+ "root": {
+  "kind": "root",
+  "children": [
+   {
+    "kind": "download",
+    "params": {
+     "url": "https://www.ebi.ac.uk/pdbe/entry-files/1h9t.bcif"
+    },
+    "children": [
+     {
+      "kind": "parse",
+      "params": {
+       "format": "bcif"
+      },
+      "children": [
+       {
+        "kind": "structure",
+        "params": {
+         "type": "model"
+        },
+        "children": [
+         {
+          "kind": "component",
+          "params": {
+           "selector": "polymer"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "cartoon"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "selector": "all",
+               "color": "white"
+              }
+             },
+             {
+              "kind": "color_from_uri",
+              "params": {
+               "uri": "./1h9t_domains.json",
+               "format": "json",
+               "schema": "all_atomic"
+              }
+             }
+            ]
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   }
+  ]
+ }
+}

examples/mvs/1h9t_domain_labels.mvsj

@@ -0,0 +1,583 @@
+{
+ "metadata": {
+  "title": "Example MolViewSpec - 1h9t colored and labelled by external annotation",
+  "version": "1",
+  "timestamp": "2023-11-24T10:48:28.677Z"
+ },
+ "root": {
+  "kind": "root",
+  "children": [
+   {
+    "kind": "download",
+    "params": {
+     "url": "https://www.ebi.ac.uk/pdbe/entry-files/1h9t.bcif"
+    },
+    "children": [
+     {
+      "kind": "parse",
+      "params": {
+       "format": "bcif"
+      },
+      "children": [
+       {
+        "kind": "structure",
+        "params": {
+         "type": "model"
+        },
+        "children": [
+         {
+          "kind": "component",
+          "params": {
+           "selector": "protein"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "cartoon"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "selector": "all",
+               "color": "white"
+              }
+             },
+             {
+              "kind": "color_from_uri",
+              "params": {
+               "uri": "./1h9t_domains.json",
+               "format": "json",
+               "schema": "all_atomic"
+              }
+             }
+            ]
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": "nucleic"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "ball_and_stick"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "selector": "all",
+               "color": "white"
+              }
+             },
+             {
+              "kind": "color_from_uri",
+              "params": {
+               "uri": "./1h9t_domains.json",
+               "format": "json",
+               "schema": "all_atomic"
+              }
+             }
+            ]
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": "ion"
+          },
+          "children": [
+           {
+            "kind": "representation",
+            "params": {
+             "type": "surface"
+            },
+            "children": [
+             {
+              "kind": "color_from_uri",
+              "params": {
+               "uri": "./1h9t_domains.json",
+               "format": "json",
+               "schema": "all_atomic"
+              }
+             }
+            ]
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "beg_label_seq_id": 9,
+            "end_label_seq_id": 83
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "DNA-binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "beg_label_seq_id": 9,
+            "end_label_seq_id": 83
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "DNA-binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "beg_label_seq_id": 84,
+            "end_label_seq_id": 231
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Acyl-CoA\nbinding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "beg_label_seq_id": 84,
+            "end_label_seq_id": 231
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Acyl-CoA binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "C"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "DNA X"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "D"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "DNA Y"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "D",
+            "atom_id": 4016
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "DNA Y O5'"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "D",
+            "atom_id": 4391
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "DNA Y O3'"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "E"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Gold"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "H"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Gold"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "F"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Chloride"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "G"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Chloride"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "I"
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Chloride"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "label_seq_id": 57
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "label_seq_id": 67
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "label_seq_id": 121
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "label_seq_id": 125
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "label_seq_id": 129
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "label_seq_id": 178
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "A",
+            "beg_label_seq_id": 203,
+            "end_label_seq_id": 205
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "label_seq_id": 67
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "label_seq_id": 121
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "label_seq_id": 125
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "label_seq_id": 129
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "label_seq_id": 178
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": {
+            "label_asym_id": "B",
+            "beg_label_seq_id": 203,
+            "end_label_seq_id": 205
+           }
+          },
+          "children": [
+           {
+            "kind": "label",
+            "params": {
+             "text": "Ligand binding"
+            }
+           }
+          ]
+         },
+         {
+          "kind": "component",
+          "params": {
+           "selector": "all"
+          },
+          "children": [
+           {
+            "kind": "focus",
+            "params": {
+             "direction": [-0.3, -0.1, -1]
+            }
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   },
+   {
+    "kind": "canvas",
+    "params": {
+     "background_color": "#eeffee"
+    }
+   }
+  ]
+ }
+}

examples/mvs/1h9t_domains.json

@@ -0,0 +1,155 @@
+[
+    {
+        "label_asym_id": "A",
+        "beg_label_seq_id": 9,
+        "end_label_seq_id": 83,
+        "color": "#dd6600",
+        "tooltip": "DNA-binding"
+    },
+    {
+        "label_asym_id": "A",
+        "beg_label_seq_id": 84,
+        "end_label_seq_id": 231,
+        "color": "#008800",
+        "tooltip": "Acyl-CoA binding"
+    },
+    {
+        "label_asym_id": "B",
+        "beg_label_seq_id": 9,
+        "end_label_seq_id": 83,
+        "color": "#cc8800",
+        "tooltip": "DNA-binding"
+    },
+    {
+        "label_asym_id": "B",
+        "beg_label_seq_id": 84,
+        "end_label_seq_id": 231,
+        "color": "#008888",
+        "tooltip": "Acyl-CoA binding"
+    },
+    {
+        "label_asym_id": "C",
+        "color": "#1100aa",
+        "tooltip": "DNA X"
+    },
+    {
+        "label_asym_id": "D",
+        "color": "#dddddd",
+        "tooltip": "DNA Y"
+    },
+    {
+        "label_asym_id": "D",
+        "atom_id": 4016,
+        "color": "#ff0044",
+        "tooltip": "DNA Y - O5'"
+    },
+    {
+        "label_asym_id": "D",
+        "atom_id": 4391,
+        "color": "#4400ff",
+        "tooltip": "DNA Y - O3'"
+    },
+    
+
+    {
+        "label_asym_id": "E",
+        "color": "#ffff00",
+        "tooltip": "Gold"
+    },
+    {
+        "label_asym_id": "H",
+        "color": "#ffff00",
+        "tooltip": "Gold"
+    },
+    {
+        "label_asym_id": "F",
+        "color": "#00dd00",
+        "tooltip": "Chloride"
+    },
+    {
+        "label_asym_id": "G",
+        "color": "#00dd00",
+        "tooltip": "Chloride"
+    },
+    {
+        "label_asym_id": "I",
+        "color": "#00dd00",
+        "tooltip": "Chloride"
+    },
+
+    {
+        "label_asym_id": "A",
+        "label_seq_id": 57,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "A",
+        "label_seq_id": 67,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "A",
+        "label_seq_id": 121,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "A",
+        "label_seq_id": 125,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "A",
+        "label_seq_id": 129,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "A",
+        "label_seq_id": 178,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "A",
+        "beg_label_seq_id": 203,
+        "end_label_seq_id": 205,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+
+    {
+        "label_asym_id": "B",
+        "label_seq_id": 67,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "B",
+        "label_seq_id": 121,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "B",
+        "label_seq_id": 125,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "B",
+        "label_seq_id": 129,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    },
+    {
+        "label_asym_id": "B",
+        "beg_label_seq_id": 203,
+        "end_label_seq_id": 205,
+        "color": "#ff0000",
+        "tooltip": "Ligand binding site"
+    }
+]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "molstar",
-  "version": "0.2.2",
+  "version": "4.4.0",
   "description": "A comprehensive macromolecular library.",
   "homepage": "https://github.com/molstar/molstar#readme",
   "repository": {
@@ -11,25 +11,53 @@
     "url": "https://github.com/molstar/molstar/issues"
   },
   "scripts": {
-    "lint": "tslint src/**/*.ts",
-    "test": "npm run lint && jest",
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix",
+    "test": "npm install --no-save \"gl@^6.0.2\" && npm run lint && jest",
+    "jest": "jest",
     "build": "npm run build-tsc && npm run build-extra && npm run build-webpack",
-    "build-tsc": "tsc",
-    "build-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html}\" lib/",
-    "build-webpack": "webpack --mode production",
-    "watch": "concurrently --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack\"",
-    "watch-tsc": "tsc -watch",
-    "watch-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html}\" lib/ --watch",
-    "watch-webpack": "webpack -w --mode development --display minimal",
-    "model-server": "node lib/servers/model/server.js",
-    "model-server-watch": "nodemon --watch lib lib/servers/model/server.js",
+    "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,jpg}\" lib/",
+    "build-webpack": "webpack --mode production --config ./webpack.config.production.js",
+    "build-webpack-viewer": "webpack --mode production --config ./webpack.config.viewer.js",
+    "watch": "concurrently -c \"green,green,gray,gray\" --names \"tsc,srv,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-servers\" \"npm:watch-extra\" \"npm:watch-webpack\"",
+    "watch-viewer": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer\"",
+    "watch-viewer-debug": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer-debug\"",
+    "watch-tsc": "tsc --watch --incremental",
+    "watch-servers": "tsc --build tsconfig.commonjs.json --watch --incremental",
+    "watch-extra": "cpx \"src/**/*.{scss,html,ico,jpg}\" lib/ --watch",
+    "watch-webpack": "webpack -w --mode development --stats minimal",
+    "watch-webpack-viewer": "webpack -w --mode development --stats minimal --config ./webpack.config.viewer.js",
+    "watch-webpack-viewer-debug": "webpack -w --mode development --stats minimal --config ./webpack.config.viewer.debug.js",
+    "serve": "http-server -p 1338 -g",
+    "model-server": "node lib/commonjs/servers/model/server.js",
+    "model-server-watch": "nodemon --watch lib lib/commonjs/servers/model/server.js",
+    "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",
-    "postversion": "git push && git push --tags",
-    "prepublishOnly": "npm run test && npm run build"
+    "version": "npm run rebuild && cpx .npmignore lib/",
+    "postversion": "git push && git push --tags"
   },
   "files": [
-    "lib/"
+    "lib/",
+    "build/viewer/"
   ],
+  "bin": {
+    "cif2bcif": "lib/commonjs/cli/cif2bcif/index.js",
+    "cifschema": "lib/commonjs/cli/cifschema/index.js",
+    "mvs-validate": "lib/commonjs/cli/mvs/mvs-validate.js",
+    "mvs-render": "lib/commonjs/cli/mvs/mvs-render.js",
+    "mvs-print-schema": "lib/commonjs/cli/mvs/mvs-print-schema.js",
+    "model-server": "lib/commonjs/servers/model/server.js",
+    "model-server-query": "lib/commonjs/servers/model/query.js",
+    "model-server-preprocess": "lib/commonjs/servers/model/preprocess.js",
+    "volume-server": "lib/commonjs/servers/volume/server.js",
+    "volume-server-query": "lib/commonjs/servers/volume/query.js",
+    "volume-server-pack": "lib/commonjs/servers/volume/pack.js"
+  },
   "nodemonConfig": {
     "ignoreRoot": [
       "./node_modules",
@@ -50,65 +78,120 @@
       "node_modules",
       "lib"
     ],
-    "testURL": "http://localhost/",
+    "testEnvironmentOptions": {
+      "url": "http://localhost/"
+    },
     "testRegex": "\\.spec\\.ts$"
   },
   "author": "Mol* Contributors",
   "contributors": [
     "Alexander Rose <alexander.rose@weirdbyte.de>",
     "David Sehnal <david.sehnal@gmail.com>",
-    "Sebastian Bittrich <sebastian.bittrich@rcsb.org>"
+    "Sebastian Bittrich <sebastian.bittrich@rcsb.org>",
+    "Á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>",
+    "Panagiotis Tourlas <panagiot_tourlov@hotmail.com>",
+    "Adam Midlik <midlik@gmail.com>",
+    "Koya Sakuma <koya.sakuma.work@gmail.com>",
+    "Gianluca Tomasello <giagitom@gmail.com>",
+    "Ke Ma <mark.ma@rcsb.org>",
+    "Jason Pattle <jpattle@exscientia.co.uk>",
+    "David Williams <dwilliams@nobiastx.com>",
+    "Zhenyu Zhang <jump2cn@gmail.com>",
+    "Russell Parker <russell@benchling.com>",
+    "Dominik Tichy <tichydominik451@gmail.com>",
+    "Yana Rose <yana.v.rose@gmail.com>",
+    "Yakov Pechersky <ffxen158@gmail.com>",
+    "Christian Dominguez <christian.99dominguez@gmail.com>",
+    "Cai Huiyu <szmun.caihy@gmail.com>",
+    "Ryan DiRisio <rjdiris@gmail.com>",
+    "Dušan Veľký <dvelky@mail.muni.cz>",
+    "Neli Fonseca <neli@ebi.ac.uk>"
   ],
   "license": "MIT",
   "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/gl": "^6.0.5",
+    "@types/pngjs": "^6.0.5",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "benchmark": "^2.1.4",
-    "circular-dependency-plugin": "^5.0.2",
-    "concurrently": "^4.1.0",
-    "cpx": "^1.5.0",
-    "css-loader": "^2.1.1",
+    "concurrently": "^8.2.2",
+    "cpx2": "^7.0.1",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.57.0",
     "extra-watch-webpack-plugin": "^1.0.3",
-    "file-loader": "^3.0.1",
-    "graphql-code-generator": "^0.18.2",
-    "graphql-codegen-time": "^0.18.2",
-    "graphql-codegen-typescript-template": "^0.18.2",
-    "jest": "^24.8.0",
-    "jest-raw-loader": "^1.0.1",
-    "mini-css-extract-plugin": "^0.7.0",
-    "node-sass": "^4.12.0",
-    "raw-loader": "^2.0.0",
-    "resolve-url-loader": "^3.1.0",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "ts-jest": "^24.0.2",
-    "tslint": "^5.17.0",
-    "typescript": "^3.5.1",
-    "uglify-js": "^3.6.0",
-    "util.promisify": "^1.0.0",
-    "webpack": "^4.32.2",
-    "webpack-cli": "^3.3.2"
+    "file-loader": "^6.2.0",
+    "fs-extra": "^11.2.0",
+    "http-server": "^14.1.1",
+    "jest": "^29.7.0",
+    "jpeg-js": "^0.4.4",
+    "mini-css-extract-plugin": "^2.9.0",
+    "path-browserify": "^1.0.1",
+    "raw-loader": "^4.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.6",
+    "sass-loader": "^14.2.1",
+    "simple-git": "^3.25.0",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.1.5",
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@types/argparse": "^1.0.36",
-    "@types/benchmark": "^1.0.31",
-    "@types/compression": "0.0.36",
-    "@types/express": "^4.16.1",
-    "@types/jest": "^24.0.13",
-    "@types/node": "^12.0.4",
-    "@types/node-fetch": "^2.3.4",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.4",
-    "@types/swagger-ui-dist": "3.0.0",
-    "@types/webgl2": "0.0.4",
-    "argparse": "^1.0.10",
+    "@types/argparse": "^2.0.16",
+    "@types/benchmark": "^2.1.5",
+    "@types/compression": "1.7.5",
+    "@types/express": "^4.17.21",
+    "@types/node": "^18.19.39",
+    "@types/node-fetch": "^2.6.11",
+    "@types/swagger-ui-dist": "3.30.5",
+    "argparse": "^2.0.1",
+    "body-parser": "^1.20.2",
     "compression": "^1.7.4",
-    "express": "^4.17.1",
-    "graphql": "^14.3.1",
-    "immutable": "^3.8.2",
-    "node-fetch": "^2.6.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "rxjs": "^6.5.2",
-    "swagger-ui-dist": "^3.22.2",
-    "xhr2": "^0.2.0"
+    "cors": "^2.8.5",
+    "express": "^4.19.2",
+    "h264-mp4-encoder": "^1.0.12",
+    "immer": "^10.1.1",
+    "immutable": "^4.3.6",
+    "io-ts": "^2.2.21",
+    "node-fetch": "^2.7.0",
+    "react-markdown": "^9.0.1",
+    "rxjs": "^7.8.1",
+    "swagger-ui-dist": "^5.17.14",
+    "tslib": "^2.6.3",
+    "util.promisify": "^1.1.2",
+    "xhr2": "^0.2.1"
+  },
+  "peerDependencies": {
+    "canvas": "^2.11.2",
+    "gl": "^6.0.2",
+    "jpeg-js": "^0.4.4",
+    "pngjs": "^6.0.0",
+    "react": "^18.1.0 || ^17.0.2 || ^16.14.0",
+    "react-dom": "^18.1.0 || ^17.0.2 || ^16.14.0"
+  },
+  "peerDependenciesMeta": {
+    "canvas": {
+      "optional": true
+    },
+    "gl": {
+      "optional": true
+    },
+    "jpeg-js": {
+      "optional": true
+    },
+    "pngjs": {
+      "optional": true
+    }
   }
 }

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}`);
+        }
+    }
+});

scripts/deploy.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2019-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+const git = require('simple-git');
+const path = require('path');
+const fs = require("fs");
+const fse = require("fs-extra");
+
+const remoteUrl = "https://github.com/molstar/molstar.github.io.git";
+const buildDir = path.resolve(__dirname, '../build/');
+const deployDir = path.resolve(buildDir, 'deploy/');
+const localPath = path.resolve(deployDir, 'molstar.github.io/');
+
+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 --><iframe src="https://web3dsurvey.com/collector-iframe.html" style="width: 1px; height: 1px;"></iframe>`;
+
+function log(command, stdout, stderr) {
+    if (command) {
+        console.log('\n###', command);
+        stdout.pipe(process.stdout);
+        stderr.pipe(process.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 copyMe() {
+    console.log('\n###', 'copy me files');
+    const meBuildPath = path.resolve(buildDir, '../build/mesoscale-explorer/');
+    const meDeployPath = path.resolve(localPath, 'me/');
+    fse.copySync(meBuildPath, meDeployPath, { overwrite: true });
+    addAnalytics(path.resolve(meDeployPath, '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();
+    copyMe();
+    copyDemos();
+}
+
+if (!fs.existsSync(localPath)) {
+    console.log('\n###', 'create localPath');
+    fs.mkdirSync(localPath, { recursive: true });
+}
+
+process.chdir(localPath);
+
+if (!fs.existsSync(path.resolve(localPath, '.git/'))) {
+    console.log('\n###', 'clone repository');
+    git()
+        .outputHandler(log)
+        .clone(remoteUrl, localPath)
+        .fetch(['--all'])
+        .exec(copyFiles)
+        .add(['-A'])
+        .commit('updated viewer & demos')
+        .push();
+} else {
+    console.log('\n###', 'update repository');
+    git()
+        .outputHandler(log)
+        .fetch(['--all'])
+        .reset(['--hard', 'origin/master'])
+        .exec(copyFiles)
+        .add(['-A'])
+        .commit('updated viewer & demos')
+        .push();
+}

src/apps/basic-wrapper/controls.tsx

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

src/apps/basic-wrapper/helpers.ts

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

src/apps/basic-wrapper/index.ts

@@ -1,159 +0,0 @@
-/**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
-import './index.html'
-import { PluginContext } from '../../mol-plugin/context';
-import { PluginCommands } from '../../mol-plugin/command';
-import { StateTransforms } from '../../mol-plugin/state/transforms';
-import { StructureRepresentation3DHelpers } from '../../mol-plugin/state/transforms/representation';
-import { Color } from '../../mol-util/color';
-import { PluginStateObject as PSO } from '../../mol-plugin/state/objects';
-import { AnimateModelIndex } from '../../mol-plugin/state/animation/built-in';
-import { StateBuilder, StateTransform } from '../../mol-state';
-import { StripedResidues } from './coloring';
-// import { BasicWrapperControls } from './controls';
-import { StaticSuperpositionTestData, buildStaticSuperposition, dynamicSuperpositionTest } from './superposition';
-require('mol-plugin/skin/light.scss')
-
-type SupportedFormats = 'cif' | 'pdb'
-type LoadParams = { url: string, format?: SupportedFormats, assemblyId?: string }
-
-class BasicWrapper {
-    plugin: PluginContext;
-
-    init(target: string | HTMLElement) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec,
-            layout: {
-                initial: {
-                    isExpanded: false,
-                    showControls: false
-                },
-                controls: {
-                    // left: 'none',
-                    // right: BasicWrapperControls
-                }
-            }
-        });
-
-        this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.add(StripedResidues.Descriptor.name, StripedResidues.colorTheme!);
-        this.plugin.lociLabels.addProvider(StripedResidues.labelProvider);
-        this.plugin.customModelProperties.register(StripedResidues.propertyProvider);
-    }
-
-    private download(b: StateBuilder.To<PSO.Root>, url: string) {
-        return b.apply(StateTransforms.Data.Download, { url, isBinary: false })
-    }
-
-    private parse(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats, assemblyId: string) {
-        const parsed = format === 'cif'
-            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif)
-            : b.apply(StateTransforms.Model.TrajectoryFromPDB);
-
-        return parsed
-            .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 })
-            .apply(StateTransforms.Model.CustomModelProperties, { properties: [StripedResidues.Descriptor.name] }, { ref: 'props', state: { isGhost: false } })
-            .apply(StateTransforms.Model.StructureAssemblyFromModel, { id: assemblyId || 'deposited' }, { ref: 'asm' });
-    }
-
-    private visual(visualRoot: StateBuilder.To<PSO.Molecule.Structure>) {
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsStatic(this.plugin, 'cartoon'), { ref: 'seq-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsStatic(this.plugin, 'ball-and-stick'), { ref: 'het-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'water' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsStatic(this.plugin, 'ball-and-stick', { alpha: 0.51 }), { ref: 'water-visual' });
-        visualRoot.apply(StateTransforms.Model.StructureComplexElement, { type: 'spheres' })
-            .apply(StateTransforms.Representation.StructureRepresentation3D,
-                StructureRepresentation3DHelpers.getDefaultParamsStatic(this.plugin, 'spacefill'), { ref: 'ihm-visual' });
-        return visualRoot;
-    }
-
-    private loadedParams: LoadParams = { url: '', format: 'cif', assemblyId: '' };
-    async load({ url, format = 'cif', assemblyId = '' }: LoadParams) {
-        let loadType: 'full' | 'update' = 'full';
-
-        const state = this.plugin.state.dataState;
-
-        if (this.loadedParams.url !== url || this.loadedParams.format !== format) {
-            loadType = 'full';
-        } else if (this.loadedParams.url === url) {
-            if (state.select('asm').length > 0) loadType = 'update';
-        }
-
-        let tree: StateBuilder.Root;
-        if (loadType === 'full') {
-            await PluginCommands.State.RemoveObject.dispatch(this.plugin, { state, ref: state.tree.root.ref });
-            tree = state.build();
-            this.visual(this.parse(this.download(tree.toRoot(), url), format, assemblyId));
-        } else {
-            tree = state.build();
-            tree.to('asm').update(StateTransforms.Model.StructureAssemblyFromModel, p => ({ ...p, id: assemblyId || 'deposited' }));
-        }
-
-        await PluginCommands.State.Update.dispatch(this.plugin, { state: this.plugin.state.dataState, tree });
-        this.loadedParams = { url, format, assemblyId };
-        PluginCommands.Camera.Reset.dispatch(this.plugin, { });
-    }
-
-    setBackground(color: number) {
-        const renderer = this.plugin.canvas3d.props.renderer;
-        PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { renderer: { ...renderer,  backgroundColor: Color(color) } } });
-    }
-
-    toggleSpin() {
-        const trackball = this.plugin.canvas3d.props.trackball;
-        const spinning = trackball.spin;
-        PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { trackball: { ...trackball, spin: !trackball.spin } } });
-        if (!spinning) PluginCommands.Camera.Reset.dispatch(this.plugin, { });
-    }
-
-    animate = {
-        modelIndex: {
-            maxFPS: 8,
-            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }) },
-            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }) },
-            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }) },
-            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }) },
-            stop: () => this.plugin.state.animation.stop()
-        }
-    }
-
-    coloring = {
-        applyStripes: async () => {
-            const state = this.plugin.state.dataState;
-
-            const visuals = state.selectQ(q => q.ofTransformer(StateTransforms.Representation.StructureRepresentation3D));
-            const tree = state.build();
-            const colorTheme = { name: StripedResidues.Descriptor.name, params: this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.get(StripedResidues.Descriptor.name).defaultValues };
-
-            for (const v of visuals) {
-                tree.to(v).update(old => ({ ...old, colorTheme }));
-            }
-
-            await PluginCommands.State.Update.dispatch(this.plugin, { state, tree });
-        }
-    }
-
-    tests = {
-        staticSuperposition: async () => {
-            const state = this.plugin.state.dataState;
-            const tree = buildStaticSuperposition(this.plugin, StaticSuperpositionTestData);
-            await PluginCommands.State.RemoveObject.dispatch(this.plugin, { state, ref: StateTransform.RootRef });
-            await PluginCommands.State.Update.dispatch(this.plugin, { state, tree });
-        },
-        dynamicSuperposition: async () => {
-            await PluginCommands.State.RemoveObject.dispatch(this.plugin, { state: this.plugin.state.dataState, ref: StateTransform.RootRef });
-            await dynamicSuperpositionTest(this.plugin, ['1tqn', '2hhb', '4hhb'], 'HEM');
-        }
-    }
-}
-
-(window as any).BasicMolStarWrapper = new BasicWrapper();

src/apps/basic-wrapper/superposition.ts

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

src/apps/chem-comp-bond/create-table.ts

@@ -1,258 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import * as argparse from 'argparse'
-import * as util from 'util'
-import * as path from 'path'
-import * as fs from 'fs'
-import * as zlib from 'zlib'
-import fetch from 'node-fetch'
-require('util.promisify').shim()
-const readFile = util.promisify(fs.readFile)
-const writeFile = util.promisify(fs.writeFile)
-
-import { Progress } from '../../mol-task'
-import { Database, Table, DatabaseCollection, Column } from '../../mol-data/db'
-import { CIF } from '../../mol-io/reader/cif'
-import { CifWriter } from '../../mol-io/writer/cif'
-import { CCD_Schema } from '../../mol-io/reader/cif/schema/ccd'
-import { SetUtils } from '../../mol-util/set'
-import { DefaultMap } from '../../mol-util/map'
-
-export async function ensureAvailable(path: string, url: string) {
-    if (FORCE_DOWNLOAD || !fs.existsSync(path)) {
-        console.log(`downloading ${url}...`)
-        const data = await fetch(url)
-        if (!fs.existsSync(DATA_DIR)) {
-            fs.mkdirSync(DATA_DIR);
-        }
-        if (url.endsWith('.gz')) {
-            await writeFile(path, zlib.gunzipSync(await data.buffer()))
-        } else {
-            await writeFile(path, await data.text())
-        }
-        console.log(`done downloading ${url}`)
-    }
-}
-
-export async function ensureDataAvailable() {
-    await ensureAvailable(CCD_PATH, CCD_URL)
-    await ensureAvailable(PVCD_PATH, PVCD_URL)
-}
-
-export async function readFileAsCollection<S extends Database.Schema>(path: string, schema: S) {
-    const parsed = await parseCif(await readFile(path, 'utf8'))
-    return CIF.toDatabaseCollection(schema, parsed.result)
-}
-
-export async function readCCD() {
-    return readFileAsCollection(CCD_PATH, CCD_Schema)
-}
-
-export async function readPVCD() {
-    return readFileAsCollection(PVCD_PATH, CCD_Schema)
-}
-
-async function parseCif(data: string | Uint8Array) {
-    const comp = CIF.parse(data);
-    console.time('parse cif');
-    const parsed = await comp.run(p => console.log(Progress.format(p)), 250);
-    console.timeEnd('parse cif');
-    if (parsed.isError) throw parsed;
-    return parsed
-}
-
-export function getEncodedCif(name: string, database: Database<Database.Schema>, binary = false) {
-    const encoder = CifWriter.createEncoder({ binary, encoderName: 'mol*' });
-    CifWriter.Encoder.writeDatabase(encoder, name, database)
-    return encoder.getData();
-}
-
-type CCB = Table<CCD_Schema['chem_comp_bond']>
-type CCA = Table<CCD_Schema['chem_comp_atom']>
-
-const ChemCompBond_Schema = {
-    comp_id: CCD_Schema['chem_comp_bond'].comp_id,
-    atom_id_1: CCD_Schema['chem_comp_bond'].atom_id_1,
-    atom_id_2: CCD_Schema['chem_comp_bond'].atom_id_2,
-    value_order: CCD_Schema['chem_comp_bond'].value_order,
-    pdbx_aromatic_flag: CCD_Schema['chem_comp_bond'].pdbx_aromatic_flag,
-    pdbx_stereo_config: CCD_Schema['chem_comp_bond'].pdbx_stereo_config,
-    molstar_protonation_variant: Column.Schema.Str()
-}
-
-function ccbKey(compId: string, atomId1: string, atomId2: string) {
-    return atomId1 < atomId2 ? `${compId}:${atomId1}-${atomId2}` : `${compId}:${atomId2}-${atomId1}`
-}
-
-function addChemCompBondToSet(set: Set<string>, ccb: CCB) {
-    for (let i = 0, il = ccb._rowCount; i < il; ++i) {
-        set.add(ccbKey(ccb.comp_id.value(i), ccb.atom_id_1.value(i), ccb.atom_id_2.value(i)))
-    }
-    return set
-}
-
-function addChemCompAtomToSet(set: Set<string>, cca: CCA) {
-    for (let i = 0, il = cca._rowCount; i < il; ++i) {
-        set.add(cca.atom_id.value(i))
-    }
-    return set
-}
-
-function checkAddingBondsFromPVCD(pvcd: DatabaseCollection<CCD_Schema>) {
-    const ccbSetByParent = DefaultMap<string, Set<string>>(() => new Set())
-
-    for (const k in pvcd) {
-        const { chem_comp, chem_comp_bond } = pvcd[k]
-        if (chem_comp_bond._rowCount) {
-            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0)
-            if (parentIds.length === 0) {
-                const set = ccbSetByParent.getDefault(chem_comp.id.value(0))
-                addChemCompBondToSet(set, chem_comp_bond)
-            } else {
-                for (let i = 0, il = parentIds.length; i < il; ++i) {
-                    const parentId = parentIds[i]
-                    const set = ccbSetByParent.getDefault(parentId)
-                    addChemCompBondToSet(set, chem_comp_bond)
-                }
-            }
-        }
-    }
-
-    for (const k in pvcd) {
-        const { chem_comp, chem_comp_atom, chem_comp_bond } = pvcd[k]
-        if (chem_comp_bond._rowCount) {
-            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0)
-            if (parentIds.length > 0) {
-                for (let i = 0, il = parentIds.length; i < il; ++i) {
-                    const entryBonds = addChemCompBondToSet(new Set<string>(), chem_comp_bond)
-                    const entryAtoms = addChemCompAtomToSet(new Set<string>(), chem_comp_atom)
-                    const extraBonds = SetUtils.difference(ccbSetByParent.get(parentIds[i])!, entryBonds)
-                    extraBonds.forEach(bk => {
-                        const [a1, a2] = bk.split('|')
-                        if (entryAtoms.has(a1) && entryAtoms.has(a2)) {
-                            console.error(`Adding all PVCD bonds would wrongly add bond ${bk} for ${k}`)
-                        }
-                    })
-                }
-            }
-        }
-    }
-}
-
-async function createBonds() {
-    await ensureDataAvailable()
-    const ccd = await readCCD()
-    const pvcd = await readPVCD()
-
-    const ccbSet = new Set<string>()
-
-    const comp_id: string[] = []
-    const atom_id_1: string[] = []
-    const atom_id_2: string[] = []
-    const value_order: string[] = []
-    const pdbx_aromatic_flag: string[] = []
-    const pdbx_stereo_config: string[] = []
-    const molstar_protonation_variant: string[] = []
-
-    function addBonds(compId: string, ccb: CCB, protonationVariant: boolean) {
-        for (let i = 0, il = ccb._rowCount; i < il; ++i) {
-            const atomId1 = ccb.atom_id_1.value(i)
-            const atomId2 = ccb.atom_id_2.value(i)
-            const k = ccbKey(compId, atomId1, atomId2)
-            if (!ccbSet.has(k)) {
-                atom_id_1.push(atomId1)
-                atom_id_2.push(atomId2)
-                comp_id.push(compId)
-                value_order.push(ccb.value_order.value(i))
-                pdbx_aromatic_flag.push(ccb.pdbx_aromatic_flag.value(i))
-                pdbx_stereo_config.push(ccb.pdbx_stereo_config.value(i))
-                molstar_protonation_variant.push(protonationVariant ? 'Y' : 'N')
-                ccbSet.add(k)
-            }
-        }
-    }
-
-    // check adding bonds from PVCD
-    checkAddingBondsFromPVCD(pvcd)
-
-    // add bonds from PVCD
-    for (const k in pvcd) {
-        const { chem_comp, chem_comp_bond } = pvcd[k]
-        if (chem_comp_bond._rowCount) {
-            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0)
-            if (parentIds.length === 0) {
-                addBonds(chem_comp.id.value(0), chem_comp_bond, false)
-            } else {
-                for (let i = 0, il = parentIds.length; i < il; ++i) {
-                    addBonds(parentIds[i], chem_comp_bond, true)
-                }
-            }
-        }
-    }
-
-    // add bonds from CCD
-    for (const k in ccd) {
-        const { chem_comp, chem_comp_bond } = ccd[k]
-        if (chem_comp_bond._rowCount) {
-            addBonds(chem_comp.id.value(0), chem_comp_bond, false)
-        }
-    }
-
-    const bondTable = Table.ofArrays(ChemCompBond_Schema, {
-        comp_id, atom_id_1, atom_id_2, value_order,
-        pdbx_aromatic_flag, pdbx_stereo_config, molstar_protonation_variant
-    })
-
-    const bondDatabase =  Database.ofTables(
-        TABLE_NAME,
-        { chem_comp_bond: ChemCompBond_Schema },
-        { chem_comp_bond: bondTable }
-    )
-
-    return bondDatabase
-}
-
-async function run(out: string, binary = false) {
-    const bonds = await createBonds()
-
-    const cif = getEncodedCif(TABLE_NAME, bonds, binary)
-    writeFile(out, cif)
-}
-
-const TABLE_NAME = 'CHEM_COMP_BONDS'
-
-const DATA_DIR = path.join(__dirname, '..', '..', '..', 'data')
-const CCD_PATH = path.join(DATA_DIR, 'components.cif')
-const PVCD_PATH = path.join(DATA_DIR, 'aa-variants-v1.cif')
-const CCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/components.cif'
-const PVCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/aa-variants-v1.cif'
-
-const parser = new argparse.ArgumentParser({
-  addHelp: true,
-  description: 'Create a cif file with one big table of all chem_comp_bond entries from the CCD and PVCD.'
-});
-parser.addArgument('out', {
-    help: 'Generated file output path.'
-});
-parser.addArgument([ '--forceDownload', '-f' ], {
-    action: 'storeTrue',
-    help: 'Force download of CCD and PVCD.'
-});
-parser.addArgument([ '--binary', '-b' ], {
-    action: 'storeTrue',
-    help: 'Output as BinaryCIF.'
-});
-interface Args {
-    out: string
-    forceDownload?: boolean
-    binary?: boolean
-}
-const args: Args = parser.parseArgs();
-
-const FORCE_DOWNLOAD = args.forceDownload
-
-run(args.out, args.binary)

src/apps/docking-viewer/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <title>Mol* Docking Viewer</title>
+        <style>
+            #app {
+                position: absolute;
+                left: 100px;
+                top: 100px;
+                width: 800px;
+                height: 600px;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            function getParam(name, regex) {
+                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
+                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
+            }
+            var pdbqt = getParam('pdbqt', '[^&]+').trim() || '../../examples/ace2.pdbqt';
+            var mol2 = getParam('mol2', '[^&]+').trim() || '../../examples/ace2-hit.mol2';
+
+            DockingViewer.create('app', [0x33DD22, 0x1133EE], true).then(viewer => {
+                viewer.loadStructuresFromUrlsAndMerge([
+                    { url: pdbqt, format: 'pdbqt' },
+                    { url: mol2, format: 'mol2' }
+                ]);
+            });
+        </script>
+    </body>
+</html>

src/apps/docking-viewer/index.ts

@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2018-2020 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 { Structure } from '../../mol-model/structure';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { PluginStateObject as PSO, PluginStateTransform } from '../../mol-plugin-state/objects';
+import { createPluginUI } from '../../mol-plugin-ui';
+import { renderReact18 } 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';
+import { PluginBehaviors } from '../../mol-plugin/behavior';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
+import { PluginSpec } from '../../mol-plugin/spec';
+import { StateObject } from '../../mol-state';
+import { Task } from '../../mol-task';
+import { Color } from '../../mol-util/color';
+import { ColorNames } from '../../mol-util/color/names';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+import './index.html';
+import { ShowButtons, StructurePreset, ViewportComponent } from './viewport';
+
+require('mol-plugin-ui/skin/light.scss');
+
+export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
+export { setDebugMode, setProductionMode } from '../../mol-util/debug';
+export { Viewer as DockingViewer };
+
+const DefaultViewerOptions = {
+    extensions: ObjectKeys({}),
+    layoutIsExpanded: true,
+    layoutShowControls: true,
+    layoutShowRemoteState: true,
+    layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
+    layoutShowSequence: true,
+    layoutShowLog: true,
+    layoutShowLeftPanel: true,
+
+    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,
+    pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,
+    emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
+};
+
+class Viewer {
+    constructor(public plugin: PluginUIContext) {
+    }
+
+    static async create(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
+        const o = {
+            ...DefaultViewerOptions, ...{
+                layoutIsExpanded: false,
+                layoutShowControls: false,
+                layoutShowRemoteState: false,
+                layoutShowSequence: true,
+                layoutShowLog: false,
+                layoutShowLeftPanel: true,
+
+                viewportShowExpand: true,
+                viewportShowControls: false,
+                viewportShowSettings: false,
+                viewportShowSelectionMode: false,
+                viewportShowAnimation: false,
+            }
+        };
+        const defaultSpec = DefaultPluginUISpec();
+
+        const spec: PluginUISpec = {
+            actions: defaultSpec.actions,
+            behaviors: [
+                PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { mark: false }),
+                PluginSpec.Behavior(PluginBehaviors.Representation.DefaultLociLabelProvider),
+                PluginSpec.Behavior(PluginBehaviors.Camera.FocusLoci),
+
+                PluginSpec.Behavior(PluginBehaviors.CustomProps.StructureInfo),
+                PluginSpec.Behavior(PluginBehaviors.CustomProps.Interactions),
+                PluginSpec.Behavior(PluginBehaviors.CustomProps.SecondaryStructure),
+            ],
+            animations: defaultSpec.animations,
+            customParamEditors: defaultSpec.customParamEditors,
+            layout: {
+                initial: {
+                    isExpanded: o.layoutIsExpanded,
+                    showControls: o.layoutShowControls,
+                    controlsDisplay: o.layoutControlsDisplay,
+                },
+            },
+            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',
+                viewport: {
+                    view: ViewportComponent
+                }
+            },
+            config: [
+                [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.Download.DefaultPdbProvider, o.pdbProvider],
+                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
+                [ShowButtons, showButtons]
+            ]
+        };
+
+        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({ target: element, spec, render: renderReact18 });
+
+        (plugin.customState as any) = {
+            colorPalette: {
+                name: 'colors',
+                params: { list: { colors } }
+            }
+        };
+
+        PluginCommands.Canvas3D.SetSettings(plugin, {
+            settings: {
+                renderer: {
+                    ...plugin.canvas3d!.props.renderer,
+                    backgroundColor: ColorNames.white,
+                },
+                camera: {
+                    ...plugin.canvas3d!.props.camera,
+                    helper: { axes: { name: 'off', params: {} } }
+                }
+            }
+        });
+
+        return new Viewer(plugin);
+    }
+
+    async loadStructuresFromUrlsAndMerge(sources: { url: string, format: BuiltInTrajectoryFormat, isBinary?: boolean }[]) {
+        const structures: { ref: string }[] = [];
+        for (const { url, format, isBinary } of sources) {
+            const data = await this.plugin.builders.data.download({ url, isBinary });
+            const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format);
+            const model = await this.plugin.builders.structure.createModel(trajectory);
+            const modelProperties = await this.plugin.builders.structure.insertModelProperties(model);
+            const structure = await this.plugin.builders.structure.createStructure(modelProperties || model);
+            const structureProperties = await this.plugin.builders.structure.insertStructureProperties(structure);
+
+            structures.push({ ref: structureProperties?.ref || structure.ref });
+        }
+
+        // remove current structures from hierarchy as they will be merged
+        // TODO only works with using loadStructuresFromUrlsAndMerge once
+        //      need some more API metho to work with the hierarchy
+        this.plugin.managers.structure.hierarchy.updateCurrent(this.plugin.managers.structure.hierarchy.current.structures, 'remove');
+
+        const dependsOn = structures.map(({ ref }) => ref);
+        const data = this.plugin.state.data.build().toRoot().apply(MergeStructures, { structures }, { dependsOn });
+        const structure = await data.commit();
+        const structureProperties = await this.plugin.builders.structure.insertStructureProperties(structure);
+        this.plugin.behaviors.canvas3d.initialized.subscribe(async v => {
+            await this.plugin.builders.structure.representation.applyPreset(structureProperties || structure, StructurePreset);
+        });
+    }
+}
+
+type MergeStructures = typeof MergeStructures
+const MergeStructures = PluginStateTransform.BuiltIn({
+    name: 'merge-structures',
+    display: { name: 'Merge Structures', description: 'Merge Structure' },
+    from: PSO.Root,
+    to: PSO.Molecule.Structure,
+    params: {
+        structures: PD.ObjectList({
+            ref: PD.Text('')
+        }, ({ ref }) => ref, { isHidden: true })
+    }
+})({
+    apply({ params, dependencies }) {
+        return Task.create('Merge Structures', async ctx => {
+            if (params.structures.length === 0) return StateObject.Null;
+
+            const first = dependencies![params.structures[0].ref].data as Structure;
+            const builder = Structure.Builder({ masterModel: first.models[0] });
+            for (const { ref } of params.structures) {
+                const s = dependencies![ref].data as Structure;
+                for (const unit of s.units) {
+                    // TODO invariantId
+                    builder.addUnit(unit.kind, unit.model, unit.conformation.operator, unit.elements, unit.traits);
+                }
+            }
+
+            const structure = builder.getStructure();
+            return new PSO.Molecule.Structure(structure, { label: 'Merged Structure' });
+        });
+    }
+});
+
+(window as any).DockingViewer = Viewer;

src/apps/docking-viewer/viewport.tsx

@@ -0,0 +1,282 @@
+/**
+ * Copyright (c) 2020-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { InteractionsRepresentationProvider } from '../../mol-model-props/computed/representations/interactions';
+import { InteractionTypeColorThemeProvider } from '../../mol-model-props/computed/themes/interaction-type';
+import { presetStaticComponent, StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
+import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-plugin-state/helpers/structure-selection-query';
+import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
+import { PluginUIComponent } from '../../mol-plugin-ui/base';
+import { LociLabels } from '../../mol-plugin-ui/controls';
+import { Button } from '../../mol-plugin-ui/controls/common';
+import { BackgroundTaskProgress } from '../../mol-plugin-ui/task';
+import { Toasts } from '../../mol-plugin-ui/toast';
+import { Viewport, ViewportControls } from '../../mol-plugin-ui/viewport';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
+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: {
+        renderer: {
+            ...plugin.canvas3d!.props.renderer,
+        },
+        postprocessing: {
+            ...plugin.canvas3d!.props.postprocessing,
+            occlusion: { name: 'off', params: {} },
+            shadow: { name: 'off', params: {} },
+            outline: { name: 'off', params: {} },
+        }
+    } });
+}
+
+function occlusionStyle(plugin: PluginContext) {
+    return PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
+        renderer: {
+            ...plugin.canvas3d!.props.renderer,
+        },
+        postprocessing: {
+            ...plugin.canvas3d!.props.postprocessing,
+            occlusion: { name: 'on', params: {
+                blurKernelSize: 15,
+                blurDepthBias: 0.5,
+                multiScale: { name: 'off', params: {} },
+                radius: 5,
+                bias: 0.8,
+                samples: 32,
+                resolutionScale: 1,
+                color: Color(0x000000),
+            } },
+            outline: { name: 'on', params: {
+                scale: 1.0,
+                threshold: 0.33,
+                color: Color(0x0000),
+                includeTransparent: true,
+            } },
+            shadow: { name: 'off', params: {} },
+        }
+    } });
+}
+
+const ligandPlusSurroundings = StructureSelectionQuery('Surrounding Residues (5 \u212B) of Ligand plus Ligand itself', MS.struct.modifier.union([
+    MS.struct.modifier.includeSurroundings({
+        0: StructureSelectionQueries.ligand.expression,
+        radius: 5,
+        'as-whole-residues': true
+    })
+]));
+
+const ligandSurroundings = StructureSelectionQuery('Surrounding Residues (5 \u212B) of Ligand', MS.struct.modifier.union([
+    MS.struct.modifier.exceptBy({
+        0: ligandPlusSurroundings.expression,
+        by: StructureSelectionQueries.ligand.expression
+    })
+]));
+
+const PresetParams = {
+    ...StructureRepresentationPresetProvider.CommonParams,
+};
+
+const CustomMaterial = Material({ roughness: 0.2, metalness: 0 });
+
+export const StructurePreset = StructureRepresentationPresetProvider({
+    id: 'preset-structure',
+    display: { name: 'Structure' },
+    params: () => PresetParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        if (!structureCell) return {};
+
+        const components = {
+            ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
+            polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),
+        };
+
+        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
+        const representations = {
+            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 });
+        await shinyStyle(plugin);
+        plugin.managers.interactivity.setProps({ granularity: 'residue' });
+
+        return { components, representations };
+    }
+});
+
+export const IllustrativePreset = StructureRepresentationPresetProvider({
+    id: 'preset-illustrative',
+    display: { name: 'Illustrative' },
+    params: () => PresetParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        if (!structureCell) return {};
+
+        const components = {
+            ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
+            polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),
+        };
+
+        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
+        const representations = {
+            ligand: builder.buildRepresentation(update, components.ligand, { type: 'spacefill', typeParams: { ...typeParams, ignoreLight: true }, color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+            polymer: builder.buildRepresentation(update, components.polymer, { type: 'spacefill', typeParams: { ...typeParams, ignoreLight: true }, color: 'illustrative', colorParams: { palette: (plugin.customState as any).colorPalette } }, { tag: 'polymer' }),
+        };
+
+        await update.commit({ revertOnError: true });
+        await occlusionStyle(plugin);
+        plugin.managers.interactivity.setProps({ granularity: 'residue' });
+
+        return { components, representations };
+    }
+});
+
+const SurfacePreset = StructureRepresentationPresetProvider({
+    id: 'preset-surface',
+    display: { name: 'Surface' },
+    params: () => PresetParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        const components = {
+            ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
+            polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),
+        };
+
+        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
+        const representations = {
+            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 });
+        await shinyStyle(plugin);
+        plugin.managers.interactivity.setProps({ granularity: 'residue' });
+
+        return { components, representations };
+    }
+});
+
+const PocketPreset = StructureRepresentationPresetProvider({
+    id: 'preset-pocket',
+    display: { name: 'Pocket' },
+    params: () => PresetParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        const components = {
+            ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
+            surroundings: await plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandSurroundings, `surroundings`),
+        };
+
+        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
+        const representations = {
+            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 });
+        await shinyStyle(plugin);
+        plugin.managers.interactivity.setProps({ granularity: 'element' });
+
+        return { components, representations };
+    }
+});
+
+const InteractionsPreset = StructureRepresentationPresetProvider({
+    id: 'preset-interactions',
+    display: { name: 'Interactions' },
+    params: () => PresetParams,
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        const components = {
+            ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
+            surroundings: await plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandSurroundings, `surroundings`),
+            interactions: await presetStaticComponent(plugin, structureCell, 'ligand'),
+        };
+
+        const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
+        const representations = {
+            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, includeParent: true, parentDisplay: 'between' }, 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 });
+        await shinyStyle(plugin);
+        plugin.managers.interactivity.setProps({ granularity: 'element' });
+
+        return { components, representations };
+    }
+});
+
+export const ShowButtons = PluginConfig.item('showButtons', true);
+
+export class ViewportComponent extends PluginUIComponent {
+    async _set(structures: readonly StructureRef[], preset: StructureRepresentationPresetProvider) {
+        await this.plugin.managers.structure.component.clear(structures);
+        await this.plugin.managers.structure.component.applyPreset(structures, preset);
+    }
+
+    set = async (preset: StructureRepresentationPresetProvider) => {
+        await this._set(this.plugin.managers.structure.hierarchy.selection.structures, preset);
+    };
+
+    structurePreset = () => this.set(StructurePreset);
+    illustrativePreset = () => this.set(IllustrativePreset);
+    surfacePreset = () => this.set(SurfacePreset);
+    pocketPreset = () => this.set(PocketPreset);
+    interactionsPreset = () => this.set(InteractionsPreset);
+
+    get showButtons() {
+        return this.plugin.config.get(ShowButtons);
+    }
+
+    render() {
+        const VPControls = this.plugin.spec.components?.viewport?.controls || ViewportControls;
+
+        return <>
+            <Viewport />
+            {this.showButtons && <div className='msp-viewport-top-left-controls'>
+                <div style={{ marginBottom: '4px' }}>
+                    <Button onClick={this.structurePreset} >Structure</Button>
+                </div>
+                <div style={{ marginBottom: '4px' }}>
+                    <Button onClick={this.illustrativePreset}>Illustrative</Button>
+                </div>
+                <div style={{ marginBottom: '4px' }}>
+                    <Button onClick={this.surfacePreset}>Surface</Button>
+                </div>
+                {/* <div style={{ marginBottom: '4px' }}>
+                    <Button onClick={this.pocketPreset}>Pocket</Button>
+                </div> */}
+                <div style={{ marginBottom: '4px' }}>
+                    <Button onClick={this.interactionsPreset}>Interactions</Button>
+                </div>
+            </div>}
+            <VPControls />
+            <BackgroundTaskProgress />
+            <div className='msp-highlight-toast-wrapper'>
+                <LociLabels />
+                <Toasts />
+            </div>
+        </>;
+    }
+}

src/apps/mesoscale-explorer/app.ts

@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) 2022-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Mp4Export } from '../../extensions/mp4-export';
+import { DataFormatProvider } from '../../mol-plugin-state/formats/provider';
+import { createPluginUI } from '../../mol-plugin-ui';
+import { renderReact18 } from '../../mol-plugin-ui/react18';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginConfig } from '../../mol-plugin/config';
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { PluginSpec } from '../../mol-plugin/spec';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+import { SaccharideCompIdMapType } from '../../mol-model/structure/structure/carbohydrates/constants';
+import { Backgrounds } from '../../extensions/backgrounds';
+import { LeftPanel, RightPanel } from './ui/panels';
+import { Color } from '../../mol-util/color';
+import { SpacefillRepresentationProvider } from '../../mol-repr/structure/representation/spacefill';
+import { PluginBehaviors } from '../../mol-plugin/behavior';
+import { MesoFocusLoci } from './behavior/camera';
+import { GraphicsMode, MesoscaleState } from './data/state';
+import { MesoSelectLoci } from './behavior/select';
+import { Transparency } from '../../mol-gl/webgl/render-item';
+import { LoadModel, loadExampleEntry, loadPdb, loadPdbDev, loadUrl, openState } from './ui/states';
+import { Asset } from '../../mol-util/assets';
+import { AnimateCameraSpin } from '../../mol-plugin-state/animation/built-in/camera-spin';
+import { AnimateCameraRock } from '../../mol-plugin-state/animation/built-in/camera-rock';
+import { AnimateStateSnapshots } from '../../mol-plugin-state/animation/built-in/state-snapshots';
+import { MesoViewportSnapshotDescription } from './ui/entities';
+
+export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
+export { setDebugMode, setProductionMode, setTimingMode, consoleStats } from '../../mol-util/debug';
+
+export type ExampleEntry = {
+    id: string,
+    label: string,
+    url: string,
+    type: 'molx' | 'molj' | 'cif' | 'bcif',
+    description?: string,
+    link?: string,
+}
+
+export type MesoscaleExplorerState = {
+    examples?: ExampleEntry[],
+    graphicsMode: GraphicsMode,
+    stateRef?: string,
+    driver?: any,
+    stateCache: { [k: string]: any },
+}
+
+//
+
+const Extensions = {
+    'backgrounds': PluginSpec.Behavior(Backgrounds),
+    'mp4-export': PluginSpec.Behavior(Mp4Export),
+};
+
+const DefaultMesoscaleExplorerOptions = {
+    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,
+    transparency: 'blended' as Transparency,
+    preferWebgl1: PluginConfig.General.PreferWebGl1.defaultValue,
+    allowMajorPerformanceCaveat: PluginConfig.General.AllowMajorPerformanceCaveat.defaultValue,
+    powerPreference: PluginConfig.General.PowerPreference.defaultValue,
+
+    viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
+    viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,
+    viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,
+    viewportShowSelectionMode: false,
+    viewportShowAnimation: false,
+    viewportShowTrajectoryControls: false,
+    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,
+    saccharideCompIdMapType: 'default' as SaccharideCompIdMapType,
+
+    graphicsMode: 'quality' as GraphicsMode,
+    driver: undefined
+};
+type MesoscaleExplorerOptions = typeof DefaultMesoscaleExplorerOptions;
+
+export class MesoscaleExplorer {
+    constructor(public plugin: PluginUIContext) {
+    }
+
+    async loadExample(id: string) {
+        const entries = (this.plugin.customState as MesoscaleExplorerState).examples || [];
+        const entry = entries.find(e => e.id === id);
+        if (entry !== undefined) {
+            await loadExampleEntry(this.plugin, entry);
+        }
+    }
+
+    async loadUrl(url: string, type: 'molx' | 'molj' | 'cif' | 'bcif') {
+        await loadUrl(this.plugin, url, type);
+    }
+
+    async loadPdb(id: string) {
+        await loadPdb(this.plugin, id);
+    }
+
+    async loadPdbDev(id: string) {
+        await loadPdbDev(this.plugin, id);
+    }
+
+    static async create(elementOrId: string | HTMLElement, options: Partial<MesoscaleExplorerOptions> = {}) {
+        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 MesoscaleExplorerOptions)[]) {
+            if (options[p] !== void 0) definedOptions[p] = options[p];
+        }
+
+        const o: MesoscaleExplorerOptions = { ...DefaultMesoscaleExplorerOptions, ...definedOptions };
+        const defaultSpec = DefaultPluginUISpec();
+
+        const spec: PluginUISpec = {
+            actions: defaultSpec.actions,
+            behaviors: [
+                PluginSpec.Behavior(PluginBehaviors.Camera.CameraAxisHelper),
+                PluginSpec.Behavior(PluginBehaviors.Camera.CameraControls),
+
+                PluginSpec.Behavior(MesoFocusLoci),
+                PluginSpec.Behavior(MesoSelectLoci),
+
+                ...o.extensions.map(e => Extensions[e]),
+            ],
+            animations: [
+                AnimateCameraSpin,
+                AnimateCameraRock,
+                AnimateStateSnapshots,
+            ],
+            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: 'none',
+                    bottom: 'none',
+                    left: LeftPanel,
+                    right: RightPanel,
+                },
+                remoteState: 'none',
+                viewport: {
+                    snapshotDescription: MesoViewportSnapshotDescription,
+                }
+            },
+            config: [
+                [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],
+                [PluginConfig.General.PixelScale, o.pixelScale],
+                [PluginConfig.General.PickScale, o.pickScale],
+                [PluginConfig.General.Transparency, o.transparency],
+                [PluginConfig.General.PreferWebGl1, o.preferWebgl1],
+                [PluginConfig.General.AllowMajorPerformanceCaveat, o.allowMajorPerformanceCaveat],
+                [PluginConfig.General.PowerPreference, o.powerPreference],
+                [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.Viewport.ShowTrajectoryControls, o.viewportShowTrajectoryControls],
+                [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.SaccharideCompIdMapType, o.saccharideCompIdMapType],
+            ]
+        };
+
+        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({
+            target: element,
+            spec,
+            render: renderReact18,
+            onBeforeUIRender: async plugin => {
+                let examples: MesoscaleExplorerState['examples'] = undefined;
+                try {
+                    examples = await plugin.fetch({ url: './examples/list.json', type: 'json' }).run();
+                    // extend the array with file tour.json if it exists
+                    const tour = await plugin.fetch({ url: './examples/tour.json', type: 'json' }).run();
+                    if (tour) {
+                        examples = examples?.concat(tour);
+                    }
+                } catch (e) {
+                    console.log(e);
+                }
+
+                (plugin.customState as MesoscaleExplorerState) = {
+                    examples,
+                    graphicsMode: o.graphicsMode,
+                    driver: o.driver,
+                    stateCache: {},
+                };
+
+                await MesoscaleState.init(plugin);
+            }
+        });
+
+        plugin.canvas3d?.setProps({
+            renderer: {
+                backgroundColor: Color(0x101010),
+            },
+            cameraFog: { name: 'off', params: {} },
+            hiZ: { enabled: true },
+        });
+
+        plugin.representation.structure.registry.clear();
+        plugin.representation.structure.registry.add(SpacefillRepresentationProvider);
+
+        plugin.state.setSnapshotParams({
+            image: true,
+            componentManager: false,
+            structureSelection: true,
+            behavior: true,
+        });
+
+        plugin.managers.lociLabels.clearProviders();
+
+        plugin.managers.dragAndDrop.addHandler('mesoscale-explorer', (files) => {
+            const sessions = files.filter(f => {
+                const fn = f.name.toLowerCase();
+                return fn.endsWith('.molx') || fn.endsWith('.molj');
+            });
+
+            if (sessions.length > 0) {
+                openState(plugin, sessions[0]);
+            } else {
+                plugin.runTask(plugin.state.data.applyAction(LoadModel, {
+                    files: files.map(f => Asset.File(f)),
+                }));
+            }
+
+            return true;
+        });
+
+        plugin.state.events.object.created.subscribe(e => {
+            (plugin.customState as MesoscaleExplorerState).stateCache = {};
+        });
+
+        plugin.state.events.object.removed.subscribe(e => {
+            (plugin.customState as MesoscaleExplorerState).stateCache = {};
+        });
+
+        return new MesoscaleExplorer(plugin);
+    }
+
+    handleResize() {
+        this.plugin.layout.events.updated.next(void 0);
+    }
+
+    dispose() {
+        this.plugin.dispose();
+    }
+}

src/apps/mesoscale-explorer/behavior/camera.ts

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Loci } from '../../../mol-model/loci';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { PluginBehavior } from '../../../mol-plugin/behavior';
+import { ButtonsType, ModifiersKeys } from '../../../mol-util/input/input-observer';
+import { Binding } from '../../../mol-util/binding';
+import { PluginCommands } from '../../../mol-plugin/commands';
+import { Sphere3D } from '../../../mol-math/geometry';
+import { StructureElement } from '../../../mol-model/structure';
+
+const B = ButtonsType;
+const M = ModifiersKeys;
+const Trigger = Binding.Trigger;
+const Key = Binding.TriggerKey;
+
+const DefaultMesoFocusLociBindings = {
+    clickCenter: Binding([
+        Trigger(B.Flag.Primary, M.create()),
+    ], 'Camera center', 'Click element using ${triggers}'),
+    clickCenterFocus: Binding([
+        Trigger(B.Flag.Secondary, M.create()),
+    ], 'Camera center and focus', 'Click element using ${triggers}'),
+    keyCenterOnly: Binding([Key('C')], 'Center Only Toggle', 'Press ${triggers}'),
+};
+
+export const MesoFocusLociParams = {
+    minRadius: PD.Numeric(8, { min: 1, max: 50, step: 1 }),
+    extraRadius: PD.Numeric(4, { min: 1, max: 50, step: 1 }, { description: 'Value added to the bounding-sphere radius of the Loci' }),
+    durationMs: PD.Numeric(250, { min: 0, max: 1000, step: 1 }, { description: 'Camera transition duration' }),
+    centerOnly: PD.Boolean(true, { description: 'Keep current camera distance' }),
+    bindings: PD.Value(DefaultMesoFocusLociBindings, { isHidden: true }),
+};
+type MesoFocusLociProps = PD.Values<typeof MesoFocusLociParams>
+
+export const MesoFocusLoci = PluginBehavior.create<MesoFocusLociProps>({
+    name: 'camera-meso-focus-loci',
+    category: 'interaction',
+    ctor: class extends PluginBehavior.Handler<MesoFocusLociProps> {
+        register(): void {
+            this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, button, modifiers }) => {
+                const { canvas3d } = this.ctx;
+                if (!canvas3d) return;
+
+                const loci = Loci.normalize(current.loci, this.ctx.managers.interactivity.props.granularity);
+                const sphere = Loci.getBoundingSphere(loci) || Sphere3D();
+
+                const { clickCenter, clickCenterFocus } = this.params.bindings;
+                const { durationMs, extraRadius, minRadius, centerOnly } = this.params;
+                const radius = Math.max(sphere.radius + extraRadius, minRadius);
+
+                if (Binding.match(clickCenter, button, modifiers)) {
+                    // left mouse button
+                    if (Loci.isEmpty(current.loci)) {
+                        PluginCommands.Camera.Reset(this.ctx, { });
+                        return;
+                    }
+                    if (StructureElement.Loci.is(current.loci)) {
+                        if (centerOnly) {
+                            const snapshot = canvas3d.camera.getCenter(sphere.center);
+                            canvas3d.requestCameraReset({ durationMs, snapshot });
+                        } else {
+                            this.ctx.managers.camera.focusSphere(sphere, this.params);
+                        }
+                    }
+                } else if (Binding.match(clickCenterFocus, button, modifiers)) {
+                    // right mouse button
+                    if (Loci.isEmpty(current.loci)) {
+                        PluginCommands.Camera.Reset(this.ctx, { });
+                        return;
+                    }
+                    if (centerOnly) {
+                        const snapshot = canvas3d.camera.getCenter(sphere.center, radius);
+                        canvas3d.requestCameraReset({ durationMs, snapshot });
+                    } else {
+                        this.ctx.managers.camera.focusSphere(sphere, this.params);
+                    }
+                }
+            });
+
+            this.subscribeObservable(this.ctx.behaviors.interaction.key, ({ code, key, modifiers }) => {
+                if (!this.ctx.canvas3d) return;
+                const b = { ...DefaultMesoFocusLociBindings, ...this.params.bindings };
+                const { centerOnly } = this.params;
+
+                if (Binding.matchKey(b.keyCenterOnly, code, modifiers, key)) {
+                    this.params.centerOnly = !centerOnly;
+                }
+            });
+        }
+    },
+    params: () => MesoFocusLociParams,
+    display: { name: 'Camera Meso Focus Loci on Canvas' }
+});

src/apps/mesoscale-explorer/behavior/select.ts

@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { EveryLoci, Loci } from '../../../mol-model/loci';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { PluginBehavior } from '../../../mol-plugin/behavior';
+import { ButtonsType, ModifiersKeys } from '../../../mol-util/input/input-observer';
+import { Binding } from '../../../mol-util/binding';
+import { PluginStateObject as SO } from '../../../mol-plugin-state/objects';
+import { Structure, StructureElement } from '../../../mol-model/structure';
+import { StateSelection } from '../../../mol-state';
+import { StateTreeSpine } from '../../../mol-state/tree/spine';
+import { Representation } from '../../../mol-repr/representation';
+import { MarkerAction } from '../../../mol-util/marker-action';
+import { PluginContext } from '../../../mol-plugin/context';
+import { MesoscaleState, expandAllGroups, getCellDescription, getEveryEntity } from '../data/state';
+
+const B = ButtonsType;
+const M = ModifiersKeys;
+const Trigger = Binding.Trigger;
+
+const DefaultMesoSelectLociBindings = {
+    click: Binding([
+        Trigger(B.Flag.Primary, M.create())
+    ], 'Click', 'Click element using ${triggers}'),
+    clickToggleSelect: Binding([
+        Trigger(B.Flag.Primary, M.create({ shift: true })),
+        Trigger(B.Flag.Primary, M.create({ control: true })),
+    ], 'Toggle select', 'Click element using ${triggers}'),
+    hoverHighlightOnly: Binding([
+        Trigger(B.Flag.None, M.create({ shift: true })),
+        Trigger(B.Flag.None, M.create({ control: true })),
+    ], 'Highlight', 'Hover element using ${triggers}'),
+};
+const MesoSelectLociParams = {
+    bindings: PD.Value(DefaultMesoSelectLociBindings, { isHidden: true }),
+};
+type MesoSelectLociProps = PD.Values<typeof MesoSelectLociParams>
+
+export const MesoSelectLoci = PluginBehavior.create<MesoSelectLociProps>({
+    name: 'camera-meso-select-loci',
+    category: 'interaction',
+    ctor: class extends PluginBehavior.Handler<MesoSelectLociProps> {
+        private spine: StateTreeSpine.Impl;
+        private lociMarkProvider = (interactionLoci: Representation.Loci, action: MarkerAction) => {
+            if (!this.ctx.canvas3d) return;
+            this.ctx.canvas3d.mark(interactionLoci, action);
+        };
+        private applySelectMark(ref: string, clear?: boolean) {
+            const cell = this.ctx.state.data.cells.get(ref);
+            if (cell && SO.isRepresentation3D(cell.obj)) {
+                this.spine.current = cell;
+                const so = this.spine.getRootOfType(SO.Molecule.Structure);
+                if (so) {
+                    if (clear) {
+                        this.lociMarkProvider({ loci: Structure.Loci(so.data) }, MarkerAction.Deselect);
+                    }
+                    const loci = this.ctx.managers.structure.selection.getLoci(so.data);
+                    this.lociMarkProvider({ loci }, MarkerAction.Select);
+                }
+            }
+        }
+        register(): void {
+            this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, button, modifiers }) => {
+                if (!this.ctx.canvas3d || this.ctx.isBusy) return;
+
+                const { click, clickToggleSelect } = this.params.bindings;
+                if (Binding.match(clickToggleSelect, button, modifiers)) {
+                    if (Loci.isEmpty(current.loci)) {
+                        this.ctx.managers.interactivity.lociSelects.deselectAll();
+                        return;
+                    }
+                    const loci = Loci.normalize(current.loci, modifiers.control ? 'entity' : 'chain');
+                    this.ctx.managers.interactivity.lociSelects.toggle({ loci }, false);
+                    if (StructureElement.Loci.is(current.loci)) {
+                        const cell = this.ctx.helpers.substructureParent.get(current.loci.structure);
+                        const d = getCellDescription(cell!);
+                        MesoscaleState.set(this.ctx, { focusInfo: `${d}` });
+                    }
+                }
+                if (Binding.match(click, button, modifiers)) {
+                    if (Loci.isEmpty(current.loci)) {
+                        MesoscaleState.set(this.ctx, { focusInfo: '', filter: '' });
+                        return;
+                    }
+                    const snapshotKey = current.repr?.props?.snapshotKey?.trim() ?? '';
+                    if (snapshotKey) {
+                        this.ctx.managers.snapshot.applyKey(snapshotKey);
+                    } else {
+                        if (StructureElement.Loci.is(current.loci)) {
+                            const cell = this.ctx.helpers.substructureParent.get(current.loci.structure);
+                            const d = getCellDescription(cell!);
+                            MesoscaleState.set(this.ctx, { focusInfo: `${d}`, filter: `${cell?.obj?.label}` });
+                            expandAllGroups(this.ctx);
+                        }
+                    }
+                }
+            });
+            this.ctx.managers.interactivity.lociSelects.addProvider(this.lociMarkProvider);
+
+            this.subscribeObservable(this.ctx.behaviors.interaction.hover, ({ current, button, modifiers }) => {
+                if (!this.ctx.canvas3d || this.ctx.isBusy) return;
+
+                const pointerLock = !!this.ctx.canvas3dContext?.input.pointerLock;
+                const { hoverHighlightOnly } = this.params.bindings;
+
+                if (!pointerLock && Binding.match(hoverHighlightOnly, button, modifiers)) {
+                    if (Loci.isEmpty(current.loci)) {
+                        this.ctx.managers.interactivity.lociHighlights.clearHighlights();
+                        return;
+                    }
+                    if (StructureElement.Loci.is(current.loci)) {
+                        if (modifiers.control) {
+                            this.ctx.managers.interactivity.lociHighlights.highlightOnly({ repr: current.repr, loci: EveryLoci }, false);
+                        } else {
+                            const loci = Loci.normalize(current.loci, 'chain');
+                            this.ctx.managers.interactivity.lociHighlights.highlightOnly({ repr: current.repr, loci }, false);
+                        }
+                    }
+                }
+
+                if (Loci.isEmpty(current.loci)) {
+                    this.ctx.behaviors.labels.highlight.next({ labels: [] });
+                    this.ctx.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);
+                } else {
+                    const labels: string[] = [];
+                    if (StructureElement.Loci.is(current.loci)) {
+                        const cell = this.ctx.helpers.substructureParent.get(current.loci.structure);
+                        const d = getCellDescription(cell!);
+                        labels.push(d);
+                    } else {
+                        const loci = Loci.normalize(current.loci, this.ctx.managers.interactivity.props.granularity);
+                        if (loci.kind === 'group-loci') {
+                            if ('shape' in current.loci && current.loci.shape.geometry.kind === 'text') {
+                                const qname = current.repr?.props.customText;
+                                // highlight protein with same name
+                                const entities = getEveryEntity(this.ctx, qname);
+                                for (const r of entities) {
+                                    const repr = r.obj?.data.repr;
+                                    if (repr) {
+                                        this.ctx.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);
+                                    }
+                                }
+                            }
+                            labels.push(loci.shape.getLabel(0, 0));
+                        }
+                    }
+                    this.ctx.behaviors.labels.highlight.next({ labels });
+                }
+            });
+            this.ctx.managers.interactivity.lociHighlights.addProvider(this.lociMarkProvider);
+
+            let dimDisabled = false;
+
+            this.subscribeObservable(this.ctx.behaviors.interaction.keyReleased, ({ code, modifiers }) => {
+                if (!this.ctx.canvas3d) return;
+
+                if ((code.startsWith('Shift') && !modifiers.control) || (code.startsWith('Control') && !modifiers.shift)) {
+                    if (dimDisabled) {
+                        dimDisabled = false;
+                        this.ctx.canvas3d?.setProps({ renderer: { dimStrength: 1 } }, true);
+                    }
+                    this.ctx.managers.interactivity.lociHighlights.clearHighlights();
+                }
+            });
+
+            this.subscribeObservable(this.ctx.behaviors.interaction.key, ({ modifiers }) => {
+                if (!this.ctx.canvas3d) return;
+
+                if (!dimDisabled && modifiers.control && modifiers.shift) {
+                    dimDisabled = true;
+                    this.ctx.canvas3d?.setProps({ renderer: { dimStrength: 0 } });
+                }
+            });
+
+            this.subscribeObservable(this.ctx.state.events.object.created, ({ ref }) => this.applySelectMark(ref));
+
+            // re-apply select-mark to all representation of an updated structure
+            this.subscribeObservable(this.ctx.state.events.object.updated, ({ ref, obj, oldObj, oldData, action }) => {
+                const cell = this.ctx.state.data.cells.get(ref);
+                if (cell && SO.Molecule.Structure.is(cell.obj)) {
+                    const structure: Structure = obj.data;
+                    const oldStructure: Structure | undefined = action === 'recreate' ? oldObj?.data :
+                        action === 'in-place' ? oldData : undefined;
+                    if (oldStructure &&
+                        Structure.areEquivalent(structure, oldStructure) &&
+                        Structure.areHierarchiesEqual(structure, oldStructure)) return;
+
+                    const reprs = this.ctx.state.data.select(StateSelection.children(ref).ofType(SO.Molecule.Structure.Representation3D));
+                    for (const repr of reprs) this.applySelectMark(repr.transform.ref, true);
+                }
+            });
+        }
+        unregister() {
+            this.ctx.managers.interactivity.lociSelects.removeProvider(this.lociMarkProvider);
+            this.ctx.managers.interactivity.lociHighlights.removeProvider(this.lociMarkProvider);
+        }
+        constructor(ctx: PluginContext, params: MesoSelectLociProps) {
+            super(ctx, params);
+            this.spine = new StateTreeSpine.Impl(ctx.state.data.cells);
+        }
+    },
+    params: () => MesoSelectLociParams,
+    display: { name: 'Camera Meso Select Loci on Canvas' }
+});

src/apps/mesoscale-explorer/data/cellpack/model.ts

@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2019-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Ludovic Autin <ludovic.autin@gmail.com>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { SortedArray } from '../../../../mol-data/int';
+import { SymmetryOperator } from '../../../../mol-math/geometry';
+import { Mat4 } from '../../../../mol-math/linear-algebra';
+import { ModelSymmetry } from '../../../../mol-model-formats/structure/property/symmetry';
+import { CustomStructureProperty } from '../../../../mol-model-props/common/custom-structure-property';
+import { ElementIndex, EntityIndex, Model, Structure, Unit } from '../../../../mol-model/structure';
+import { Assembly, Symmetry } from '../../../../mol-model/structure/model/properties/symmetry';
+import { PluginStateObject as PSO, PluginStateTransform } from '../../../../mol-plugin-state/objects';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { Task } from '../../../../mol-task';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+
+function createModelChainMap(model: Model) {
+    const builder = new Structure.StructureBuilder();
+    const units = new Map<string, Unit>();
+
+    const { label_asym_id, _rowCount } = model.atomicHierarchy.chains;
+    const { offsets } = model.atomicHierarchy.chainAtomSegments;
+
+    for (let i = 0; i < _rowCount; i++) {
+        const elements = SortedArray.ofBounds(offsets[i] as ElementIndex, offsets[i + 1] as ElementIndex);
+        const unit = builder.addUnit(Unit.Kind.Atomic, model, SymmetryOperator.Default, elements, Unit.Trait.FastBoundary);
+        units.set(label_asym_id.value(i), unit);
+    }
+
+    return units;
+}
+
+function buildCellpackAssembly(model: Model, assembly: Assembly) {
+    const coordinateSystem = SymmetryOperator.create(assembly.id, Mat4.identity(), { assembly: { id: assembly.id, operId: 0, operList: [] } });
+    const assembler = Structure.Builder({
+        coordinateSystem,
+        label: model.label,
+    });
+
+    const units = createModelChainMap(model);
+
+    for (const g of assembly.operatorGroups) {
+        for (const oper of g.operators) {
+            for (const id of g.asymIds!) {
+                const u = units.get(id);
+                if (u) {
+                    assembler.addWithOperator(u, oper);
+                } else {
+                    console.log(`missing asymId '${id}'`);
+                }
+            }
+        }
+    }
+
+    return assembler.getStructure();
+}
+
+export { CellpackAssembly };
+type CellpackAssembly = typeof CellpackAssembly
+const CellpackAssembly = PluginStateTransform.BuiltIn({
+    name: 'cellpack-assembly',
+    display: { name: 'Cellpack Assembly' },
+    from: PSO.Molecule.Model,
+    to: PSO.Molecule.Structure,
+    params: {
+        id: PD.Text('', { label: 'Asm Id', description: 'Assembly Id (use empty for the 1st assembly)' }),
+    }
+})({
+    canAutoUpdate({ newParams }) {
+        return true;
+    },
+    apply({ a, params }, plugin: PluginContext) {
+        return Task.create('Build Structure', async ctx => {
+            const model = a.data;
+
+            let id = params.id;
+            let asm: Assembly | undefined = void 0;
+            const symmetry = ModelSymmetry.Provider.get(model);
+
+            // if no id is specified, use the 1st assembly.
+            if (!id && symmetry && symmetry.assemblies.length !== 0) {
+                id = symmetry.assemblies[0].id;
+            }
+
+            if (!symmetry || symmetry.assemblies.length === 0) {
+                plugin.log.warn(`Model '${model.entryId}' has no assembly, returning model structure.`);
+            } else {
+                asm = Symmetry.findAssembly(model, id || '');
+                if (!asm) {
+                    plugin.log.warn(`Model '${model.entryId}' has no assembly called '${id}', returning model structure.`);
+                }
+            }
+
+            const base = Structure.ofModel(model);
+            if (!asm) {
+                const label = { label: 'Model', description: Structure.elementDescription(base) };
+                return new PSO.Molecule.Structure(base, label);
+            }
+
+            const s = buildCellpackAssembly(model, asm);
+
+            const objProps = { label: `Assembly ${id}`, description: Structure.elementDescription(s) };
+            return new PSO.Molecule.Structure(s, objProps);
+        });
+    },
+    dispose({ b }) {
+        b?.data.customPropertyDescriptors.dispose();
+    }
+});
+
+type UnitsByEntity = Map<EntityIndex, Unit[]>;
+const UnitsByEntity = CustomStructureProperty.createSimple<UnitsByEntity>('units_by_entity', 'root');
+
+function getUnitsByEntity(structure: Structure): UnitsByEntity {
+    if (UnitsByEntity.get(structure).value) {
+        return UnitsByEntity.get(structure).value!;
+    }
+
+    const atomicIndex = structure.model.atomicHierarchy.index;
+    const map: UnitsByEntity = new Map();
+    for (const ug of structure.unitSymmetryGroups) {
+        const u = ug.units[0] as Unit.Atomic;
+        const e = atomicIndex.getEntityFromChain(u.chainIndex[u.elements[0]]);
+
+        if (!map.has(e)) map.set(e, []);
+        const entityUnits = map.get(e)!;
+
+        for (let i = 0, il = ug.units.length; i < il; ++i) {
+            entityUnits.push(ug.units[i]);
+        }
+    }
+
+    UnitsByEntity.set(structure, { value: map }, map);
+    return map;
+}
+
+export { CellpackStructure };
+type CellpackStructure = typeof CellpackStructure
+const CellpackStructure = PluginStateTransform.BuiltIn({
+    name: 'cellpack-structure',
+    display: { name: 'Cellpack Structure' },
+    from: PSO.Root,
+    to: PSO.Molecule.Structure,
+    params: {
+        structureRef: PD.Text(''),
+        entityId: PD.Text('')
+    }
+})({
+    canAutoUpdate({ newParams }) {
+        return true;
+    },
+    apply({ a, params, dependencies }) {
+        return Task.create('Build Structure', async ctx => {
+            const parent = dependencies![params.structureRef].data as Structure;
+            const { entities } = parent.model;
+            const idx = entities.getEntityIndex(params.entityId);
+
+            const unitsByEntity = getUnitsByEntity(parent);
+            const units = unitsByEntity.get(idx) || [];
+
+            const structure = Structure.create(units);
+            const description_label = entities.data.pdbx_description.value(idx)[0] || 'model';
+            const label = description_label.split('.').at(-1) || a.label;
+            const description = entities.data.pdbx_parent_entity_id.value(idx) || label;
+            return new PSO.Molecule.Structure(structure, { label, description: description }); // `${a.description}`
+        });
+    },
+    dispose({ b }) {
+        b?.data.customPropertyDescriptors.dispose();
+    }
+});

src/apps/mesoscale-explorer/data/cellpack/preset.ts

@@ -0,0 +1,230 @@
+/**
+ * Copyright (c) 2019-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Ludovic Autin <ludovic.autin@gmail.com>
+ */
+
+import { PluginStateObject } from '../../../../mol-plugin-state/objects';
+import { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill';
+import { StateObjectRef, StateObjectSelector, StateBuilder } from '../../../../mol-state';
+import { Color } from '../../../../mol-util/color';
+import { ColorNames } from '../../../../mol-util/color/names';
+import { GraphicsMode, MesoscaleGroup, MesoscaleState, getDistinctBaseColors, getDistinctGroupColors, getGraphicsModeProps, getMesoscaleGroupParams, updateColors } from '../state';
+import { CellpackAssembly, CellpackStructure } from './model';
+
+function getSpacefillParams(color: Color, sizeFactor: number, graphics: GraphicsMode, merge?: boolean) {
+    const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);
+    return {
+        type: {
+            name: 'spacefill',
+            params: {
+                ...SpacefillRepresentationProvider.defaultValues,
+                ignoreHydrogens: false,
+                instanceGranularity: true,
+                ignoreLight: true,
+                lodLevels: gmp.lodLevels,
+                quality: 'lowest', // avoid 'auto', triggers boundary calc
+                sizeFactor,
+                clip: {
+                    variant: merge ? 'pixel' : 'instance',
+                    objects: [],
+                },
+                clipPrimitive: true,
+                approximate: gmp.approximate,
+                alphaThickness: gmp.alphaThickness,
+                visuals: [merge ? 'structure-element-sphere' : 'element-sphere'],
+            },
+        },
+        colorTheme: {
+            name: 'uniform',
+            params: {
+                value: color,
+                saturation: 0,
+                lightness: 0,
+            }
+        },
+        sizeTheme: {
+            name: 'physical',
+            params: {
+                value: 1,
+            }
+        },
+    };
+}
+
+function getSizeFactor(name: string): number {
+    switch (name) {
+        case 'dLDL':
+            return 2.5;
+        case 'iLDL':
+            return 5;
+        case 'NP_CA':
+        case 'POL_CA':
+        case 'FactorH1':
+        case 'iIgM_Antibody_5mer':
+        // case 'MG_271_272_273_274_192MER': // has a coarse and an atomic part
+            return 2;
+        default: return 1;
+    }
+}
+
+export async function createCellpackHierarchy(plugin: PluginContext, trajectory: StateObjectRef<PluginStateObject.Molecule.Trajectory>) {
+    const builder = plugin.builders.structure;
+    const state = plugin.state.data;
+
+    const model = await builder.createModel(trajectory, { modelIndex: 0 });
+    const entities = model.data!.entities.data;
+
+    const compGroups = new Map<string, StateObjectSelector>();
+    const compIds = new Map<string, { idx: number, members: Map<string, number> }>();
+    const compColors = new Map<string, Color[]>();
+
+    const funcGroups = new Map<string, StateObjectSelector>();
+    const funcIds = new Map<string, { idx: number, size: number }>();
+    const funcColors = new Map<string, Color[]>();
+
+    const graphicsMode = MesoscaleState.get(plugin).graphics;
+    const groupParams = getMesoscaleGroupParams(graphicsMode);
+
+    const base = await state.build()
+        .to(model)
+        .apply(CellpackAssembly, { id: '' })
+        .commit();
+
+    const compRoot = await state.build()
+        .toRoot()
+        .applyOrUpdateTagged('group:comp:', MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `comp:`, label: 'compartment', color: { type: 'custom', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'group:comp:', state: { isCollapsed: false, isHidden: groupParams.hidden } })
+        .commit();
+
+    const funcRoot = await state.build()
+        .toRoot()
+        .applyOrUpdateTagged('group:func:', MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `func:`, label: 'function', color: { type: 'custom', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'group:func:', state: { isCollapsed: false, isHidden: groupParams.hidden } })
+        .commit();
+
+    if (entities._rowCount > 1) {
+        for (let i = 0; i < entities._rowCount; i++) {
+            const description = entities.pdbx_description.value(i)[0] || 'unknown compartment';
+            const d = description.split('.');
+            const n = d.slice(0, -1).join('.');
+            const l = d.at(-1)!;
+            if (!compIds.has(n)) {
+                compIds.set(n, { idx: compIds.size, members: new Map() });
+            }
+            const cm = compIds.get(n)!;
+            cm.members.set(l, cm.members.size);
+
+            const f = entities.details.value(i) || 'unknown function';
+            if (!funcIds.has(f)) {
+                funcIds.set(f, { idx: funcIds.size, size: 0 });
+            }
+            funcIds.get(f)!.size += 1;
+        }
+
+        //
+
+        const baseCompColors = getDistinctBaseColors(compIds.size, 0);
+        const compIdEntries = Array.from(compIds.entries());
+        for (let i = 0; i < compIdEntries.length; ++i) {
+            const [n, m] = compIdEntries[i];
+            const groupColors = getDistinctGroupColors(m.members.size, baseCompColors[i], 20, 0);
+            compColors.set(n, groupColors);
+        }
+
+        //
+
+        const baseFuncColors = getDistinctBaseColors(funcIds.size, 0);
+        const funcIdEntries = Array.from(funcIds.entries());
+        for (let i = 0; i < funcIdEntries.length; ++i) {
+            const [n, m] = funcIdEntries[i];
+            const groupColors = getDistinctGroupColors(m.size, baseFuncColors[i], 20, 0);
+            funcColors.set(n, groupColors);
+        }
+
+        //
+
+        for (let i = 0; i < entities._rowCount; i++) {
+            const description = entities.pdbx_description.value(i)[0] || 'unknown compartment';
+            const nodes = description.split('.');
+            for (let j = 0, jl = nodes.length - 1; j < jl; ++j) {
+                const n = nodes.slice(0, j + 1).join('.');
+                const p = nodes.slice(0, j).join('.');
+                if (!compGroups.has(n)) {
+                    const colorIdx = compIds.get(n)?.idx;
+                    const color = colorIdx !== undefined ? baseCompColors[colorIdx] : ColorNames.white;
+                    const label = nodes[j];
+                    const parent = compGroups.get(p) ?? compRoot;
+                    parent.cell!.state.isCollapsed = false;
+                    const group = await state.build()
+                        .to(parent)
+                        .applyOrUpdateTagged(`group:comp:${n}`, MesoscaleGroup, { ...groupParams, root: parent === compRoot, index: colorIdx, tag: `comp:${n}`, label, color: { type: 'generate', illustrative: false, value: color, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: `comp:${p}`, state: { isCollapsed: true, isHidden: groupParams.hidden } })
+                        .commit({ revertOnError: true });
+                    compGroups.set(n, group);
+                }
+            }
+
+            const f = entities.details.value(i) || 'unknown function';
+            if (!funcGroups.has(f)) {
+                const colorIdx = funcIds.get(f)?.idx;
+                const color = colorIdx !== undefined ? baseFuncColors[colorIdx] : ColorNames.white;
+                const group = await state.build()
+                    .to(funcRoot)
+                    .applyOrUpdateTagged(`group:func:${f}`, MesoscaleGroup, { ...groupParams, index: colorIdx, tag: `func:${f}`, label: f, color: { type: 'custom', illustrative: false, value: color, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'func:', state: { isCollapsed: true, isHidden: groupParams.hidden } })
+                    .commit({ revertOnError: true });
+                funcGroups.set(f, group);
+            }
+        }
+
+        //
+
+        await state.transaction(async () => {
+            try {
+                const dependsOn = [base.ref];
+                plugin.animationLoop.stop({ noDraw: true });
+                let build: StateBuilder.Root | StateBuilder.To<any> = state.build();
+                for (let i = 0; i < entities._rowCount; i++) {
+                    const description = entities.pdbx_description.value(i)[0] || 'model';
+                    const d = description.split('.');
+                    const n = d.slice(0, -1).join('.');
+                    const l = d.at(-1)!;
+
+                    const f = entities.details.value(i) || 'unknown function';
+
+                    const color = compColors.get(n)![compIds.get(n)!.members.get(l)!];
+                    const sizeFactor = getSizeFactor(l);
+
+                    build = build
+                        .toRoot()
+                        .apply(CellpackStructure, { structureRef: base.ref, entityId: entities.id.value(i) }, { dependsOn })
+                        .apply(StructureRepresentation3D, getSpacefillParams(color, sizeFactor, graphicsMode), { tags: [`comp:${n}`, `func:${f}`] });
+                }
+                await build.commit();
+                const values = { type: 'group-generate', value: ColorNames.white, lightness: 0, alpha: 1 };
+                const options = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 }, celShaded: true, };
+                await updateColors(plugin, values, options);
+            } catch (e) {
+                console.error(e);
+                plugin.log.error(e);
+            } finally {
+                plugin.animationLoop.start();
+            }
+        }).run();
+    } else {
+        const dependsOn = [base.ref];
+
+        const merge = (
+            base.data &&
+            base.data.model.entities.data._rowCount === 1 &&
+            base.data.unitSymmetryGroups.length > 100 &&
+            base.data.unitSymmetryGroups.some(usg => usg.units.length > 1)
+        );
+
+        await state.build()
+            .toRoot()
+            .apply(CellpackStructure, { structureRef: base.ref, entityId: entities.id.value(0) }, { dependsOn })
+            .apply(StructureRepresentation3D, getSpacefillParams(ColorNames.lightgray, 1, graphicsMode, merge), { tags: [`comp:`, `func:`] })
+            .commit();
+    }
+}

src/apps/mesoscale-explorer/data/generic/model.ts

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Mat4 } from '../../../../mol-math/linear-algebra/3d/mat4';
+import { ElementIndex, Model, Structure, Unit } from '../../../../mol-model/structure';
+import { PluginStateObject as SO, PluginStateTransform } from '../../../../mol-plugin-state/objects';
+import { Task } from '../../../../mol-task';
+import { StateObject, StateTransformer } from '../../../../mol-state';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { SymmetryOperator } from '../../../../mol-math/geometry';
+import { mergeUnits, partitionUnits } from '../util';
+import { Assembly, Symmetry } from '../../../../mol-model/structure/model/properties/symmetry';
+import { ModelSymmetry } from '../../../../mol-model-formats/structure/property/symmetry';
+import { SortedArray } from '../../../../mol-data/int';
+import { GenericInstances, getTransforms } from './preset';
+import { Asset } from '../../../../mol-util/assets';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { deepEqual } from '../../../../mol-util';
+
+function createModelChainMap(model: Model) {
+    const builder = new Structure.StructureBuilder();
+    const units = new Map<string, Unit>();
+
+    const { label_asym_id, _rowCount } = model.atomicHierarchy.chains;
+    const { offsets } = model.atomicHierarchy.chainAtomSegments;
+
+    for (let i = 0; i < _rowCount; i++) {
+        const elements = SortedArray.ofBounds(offsets[i] as ElementIndex, offsets[i + 1] as ElementIndex);
+        const unit = builder.addUnit(Unit.Kind.Atomic, model, SymmetryOperator.Default, elements, Unit.Trait.FastBoundary);
+        units.set(label_asym_id.value(i), unit);
+    }
+
+    return units;
+}
+
+function buildAssembly(model: Model, assembly: Assembly) {
+    const coordinateSystem = SymmetryOperator.create(assembly.id, Mat4.identity(), { assembly: { id: assembly.id, operId: 0, operList: [] } });
+    const assembler = Structure.Builder({
+        coordinateSystem,
+        label: model.label,
+    });
+
+    const units = createModelChainMap(model);
+
+    for (const g of assembly.operatorGroups) {
+        for (const oper of g.operators) {
+            for (const id of g.asymIds!) {
+                const u = units.get(id);
+                if (u) {
+                    assembler.addWithOperator(u, oper);
+                } else {
+                    console.log(`missing asymId '${id}'`);
+                }
+            }
+        }
+    }
+
+    return assembler.getStructure();
+}
+
+const EmptyInstances: GenericInstances<Asset> = {
+    positions: { data: [] },
+    rotations: { variant: 'euler', data: [] }
+};
+
+export { StructureFromGeneric };
+type StructureFromGeneric = typeof StructureFromGeneric
+const StructureFromGeneric = PluginStateTransform.BuiltIn({
+    name: 'structure-from-generic',
+    display: { name: 'Structure from Generic', description: 'Create a molecular structure from Generic models.' },
+    from: SO.Molecule.Model,
+    to: SO.Molecule.Structure,
+    params: {
+        instances: PD.Value<GenericInstances<Asset>>(EmptyInstances),
+        label: PD.Optional(PD.Text('')),
+        description: PD.Optional(PD.Text('')),
+        cellSize: PD.Numeric(500, { min: 0, max: 10000, step: 100 }),
+    }
+})({
+    apply({ a, params }, plugin: PluginContext) {
+        return Task.create('Build Structure', async ctx => {
+            const transforms = await getTransforms(plugin, params.instances);
+            if (transforms.length === 0) return StateObject.Null;
+
+            const model = a.data;
+            const label = params.label || model.label;
+
+            const base = Structure.ofModel(a.data);
+
+            let structure: Structure;
+            if (transforms.length === 1 && Mat4.isIdentity(transforms[0])) {
+                const symmetry = ModelSymmetry.Provider.get(model);
+                const id = symmetry?.assemblies[0]?.id;
+                const asm = Symmetry.findAssembly(model, id || '');
+                if (asm) {
+                    structure = buildAssembly(model, asm);
+                } else {
+                    const mergedUnits = partitionUnits(base.units, params.cellSize);
+                    structure = Structure.create(mergedUnits, { label });
+                }
+            } else {
+                const assembler = Structure.Builder({ label });
+                const unit = mergeUnits(base.units, 0);
+                for (let i = 0, il = transforms.length; i < il; ++i) {
+                    const t = transforms[i];
+                    const op = SymmetryOperator.create(`op-${i}`, t);
+                    assembler.addWithOperator(unit, op);
+                }
+                structure = assembler.getStructure();
+            }
+
+            const props = { label, description: params.description || Structure.elementDescription(structure) };
+            return new SO.Molecule.Structure(structure, props);
+        });
+    },
+    update({ newParams, oldParams }, plugin: PluginContext) {
+        if (deepEqual(newParams, oldParams)) {
+            return StateTransformer.UpdateResult.Unchanged;
+        }
+
+        if (oldParams.instances) releaseInstances(plugin, oldParams.instances);
+        return StateTransformer.UpdateResult.Recreate;
+    },
+    dispose({ b, params }, plugin: PluginContext) {
+        b?.data.customPropertyDescriptors.dispose();
+        if (params?.instances) releaseInstances(plugin, params.instances);
+    }
+});
+
+function releaseInstances(plugin: PluginContext, instances: GenericInstances<Asset>) {
+    if (!Array.isArray(instances.positions.data)) {
+        plugin.managers.asset.release(instances.positions.data.file);
+    }
+    if (!Array.isArray(instances.rotations.data)) {
+        plugin.managers.asset.release(instances.rotations.data.file);
+    }
+}

src/apps/mesoscale-explorer/data/generic/preset.ts

@@ -0,0 +1,582 @@
+/**
+ * Copyright (c) 2023-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Mat4 } from '../../../../mol-math/linear-algebra/3d/mat4';
+import { StateBuilder, StateObjectSelector } from '../../../../mol-state';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill';
+import { Color } from '../../../../mol-util/color';
+import { utf8Read } from '../../../../mol-io/common/utf8';
+import { Mat3, Quat, Vec3 } from '../../../../mol-math/linear-algebra';
+import { GraphicsMode, MesoscaleGroup, MesoscaleState, getGraphicsModeProps, getMesoscaleGroupParams, updateColors } from '../state';
+import { ColorNames } from '../../../../mol-util/color/names';
+import { ShapeRepresentation3D, StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation';
+import { ParseCif, ParsePly, ReadFile } from '../../../../mol-plugin-state/transforms/data';
+import { ModelFromTrajectory, ShapeFromPly, TrajectoryFromGRO, TrajectoryFromMOL, TrajectoryFromMOL2, TrajectoryFromMmCif, TrajectoryFromPDB, TrajectoryFromSDF, TrajectoryFromXYZ } from '../../../../mol-plugin-state/transforms/model';
+import { Euler } from '../../../../mol-math/linear-algebra/3d/euler';
+import { Asset } from '../../../../mol-util/assets';
+import { Clip } from '../../../../mol-util/clip';
+import { StructureFromGeneric } from './model';
+import { getFileNameInfo } from '../../../../mol-util/file-info';
+import { NumberArray } from '../../../../mol-util/type-helpers';
+import { BaseGeometry } from '../../../../mol-geo/geometry/base';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+
+function getSpacefillParams(color: Color, sizeFactor: number, graphics: GraphicsMode, clipVariant: Clip.Variant) {
+    const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);
+    return {
+        type: {
+            name: 'spacefill',
+            params: {
+                ...SpacefillRepresentationProvider.defaultValues,
+                ignoreHydrogens: true,
+                instanceGranularity: true,
+                ignoreLight: true,
+                lodLevels: gmp.lodLevels.map(l => {
+                    return {
+                        ...l,
+                        stride: Math.max(1, Math.round(l.stride / Math.pow(sizeFactor, l.scaleBias)))
+                    };
+                }),
+                quality: 'lowest', // avoid 'auto', triggers boundary calc
+                sizeFactor,
+                clip: {
+                    variant: clipVariant,
+                    objects: [],
+                },
+                clipPrimitive: true,
+                approximate: gmp.approximate,
+                alphaThickness: gmp.alphaThickness,
+            },
+        },
+        colorTheme: {
+            name: 'uniform',
+            params: {
+                value: color,
+                saturation: 0,
+                lightness: 0,
+            }
+        },
+        sizeTheme: {
+            name: 'physical',
+            params: {
+                scale: 1,
+            }
+        },
+    };
+}
+
+function getPlyShapeParams(color: Color, clipVariant: Clip.Variant) {
+    return {
+        ...PD.getDefaultValues(BaseGeometry.Params),
+        instanceGranularity: true,
+        ignoreLight: true,
+        clip: {
+            variant: clipVariant,
+            objects: [],
+        },
+        quality: 'custom',
+        doubleSided: true,
+        coloring: {
+            name: 'uniform',
+            params: { color }
+        },
+        grouping: {
+            name: 'none',
+            params: {}
+        },
+        material: {
+            metalness: 0.0,
+            roughness: 1.0,
+            bumpiness: 1.0,
+        },
+        bumpAmplitude: 0.1,
+        bumpFrequency: 0.1 / 10,
+    };
+}
+
+export async function createGenericHierarchy(plugin: PluginContext, file: Asset.File) {
+    const asset = await plugin.runTask(plugin.managers.asset.resolve(file, 'zip'));
+    let manifest: GenericManifest;
+    // TODO: remove special handling for martini prototype
+    if (asset.data['instanced_structure.json']) {
+        const d = asset.data['instanced_structure.json'];
+        const t = utf8Read(d, 0, d.length);
+        const martini = JSON.parse(t) as { model: string, positions: Vec3[], rotations: Vec3[], function: string }[];
+        console.log(martini);
+        manifest = martiniToGeneric(martini);
+    } else if (asset.data['manifest.json']) {
+        const d = asset.data['manifest.json'];
+        const t = utf8Read(d, 0, d.length);
+        manifest = JSON.parse(t) as GenericManifest;
+    } else {
+        throw new Error('no manifest found');
+    }
+    console.log(manifest);
+
+    const state = plugin.state.data;
+    const graphicsMode = MesoscaleState.get(plugin).graphics;
+    const groupParams = getMesoscaleGroupParams(graphicsMode);
+
+    async function addGroup(g: GenericGroup, cell: StateObjectSelector, parent: string) {
+        const group = await state.build()
+            .to(cell)
+            .apply(MesoscaleGroup, { ...groupParams, index: undefined, tag: `${g.root}:${g.id}`, label: g.label || g.id, description: g.description, color: { type: 'custom', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: [`group:${g.root}:${g.id}`, g.root === parent ? `${g.root}:` : `${g.root}:${parent}`], state: { isCollapsed: true, isHidden: groupParams.hidden } })
+            .commit();
+
+        if (g.children) {
+            for (const c of g.children) {
+                await addGroup(c, group, g.id);
+            }
+        }
+    }
+
+    for (const r of manifest.roots) {
+        const root = await state.build()
+            .toRoot()
+            .apply(MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `${r.id}:`, label: r.label || r.id, description: r.description, color: { type: 'custom', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: `group:${r.id}:`, state: { isCollapsed: false, isHidden: groupParams.hidden } })
+            .commit();
+
+        if (r.children) {
+            for (const c of r.children!) {
+                await addGroup(c, root, r.id);
+            }
+        }
+    }
+
+    const transformAssets = new Map<string, Asset>();
+    const getTransformAsset = (file: string) => {
+        if (!transformAssets.has(file)) {
+            const d = asset.data[file];
+            transformAssets.set(file, Asset.File(new File([d], file)));
+        }
+        return transformAssets.get(file)!;
+    };
+
+    const getAssetInstances = (instances: GenericInstances<string>): GenericInstances<Asset> => {
+        return {
+            positions: {
+                data: Array.isArray(instances.positions.data)
+                    ? instances.positions.data
+                    : {
+                        file: getTransformAsset(instances.positions.data.file),
+                        view: instances.positions.data.view,
+                    },
+                type: instances.positions.type,
+            },
+            rotations: {
+                data: Array.isArray(instances.rotations.data)
+                    ? instances.rotations.data
+                    : {
+                        file: getTransformAsset(instances.rotations.data.file),
+                        view: instances.rotations.data.view,
+                    },
+                variant: instances.rotations.variant,
+                type: instances.rotations.type,
+            }
+        };
+    };
+
+    await state.transaction(async () => {
+        try {
+            plugin.animationLoop.stop({ noDraw: true });
+            let build: StateBuilder.Root | StateBuilder.To<any> = state.build();
+            for (const ent of manifest.entities) {
+                const d = asset.data[ent.file];
+                const info = getFileNameInfo(ent.file);
+                const isBinary = ['bcif'].includes(info.ext);
+
+                const t = isBinary ? d : utf8Read(d, 0, d.length);
+                const file = Asset.File(new File([t], ent.file));
+
+                const color = ColorNames.skyblue;
+
+                const sizeFactor = ent.sizeFactor || 1;
+                const tags = ent.groups.map(({ id, root }) => `${root}:${id}`);
+                const instances = ent.instances && getAssetInstances(ent.instances);
+                const description = ent.description;
+                const label = ent.label || ent.file.split('.')[0];
+                build = build
+                    .toRoot()
+                    .apply(ReadFile, { file, label, isBinary });
+
+                if (['gro', 'cif', 'mmcif', 'mcif', 'bcif', 'pdb', 'ent', 'xyz', 'mol', 'sdf', 'sd', 'mol2'].includes(info.ext)) {
+                    if (['gro'].includes(info.ext)) {
+                        build = build.apply(TrajectoryFromGRO);
+                    } else if (['cif', 'mmcif', 'mcif', 'bcif'].includes(info.ext)) {
+                        build = build.apply(ParseCif).apply(TrajectoryFromMmCif);
+                    } else if (['pdb', 'ent'].includes(info.ext)) {
+                        build = build.apply(TrajectoryFromPDB);
+                    } else if (['xyz'].includes(info.ext)) {
+                        build = build.apply(TrajectoryFromXYZ);
+                    } else if (['mol'].includes(info.ext)) {
+                        build = build.apply(TrajectoryFromMOL);
+                    } else if (['sdf', 'sd'].includes(info.ext)) {
+                        build = build.apply(TrajectoryFromSDF);
+                    } else if (['mol2'].includes(info.ext)) {
+                        build = build.apply(TrajectoryFromMOL2);
+                    }
+
+                    let clipVariant: Clip.Variant = 'pixel';
+                    if (ent.instances) {
+                        if (Array.isArray(ent.instances.positions.data)) {
+                            clipVariant = ent.instances.positions.data.length <= 3 ? 'pixel' : 'instance';
+                        } else {
+                            const byteLength = ent.instances.positions.data.view
+                                ? ent.instances.positions.data.view.byteLength
+                                : asset.data[ent.instances.positions.data.file].length;
+                            clipVariant = byteLength <= 3 * 4 ? 'pixel' : 'instance';
+                        }
+                    }
+
+                    build = build
+                        .apply(ModelFromTrajectory, { modelIndex: 0 })
+                        .apply(StructureFromGeneric, { instances, label, description })
+                        .apply(StructureRepresentation3D, getSpacefillParams(color, sizeFactor, graphicsMode, clipVariant), { tags });
+                } else if (['ply'].includes(info.ext)) {
+                    if (['ply'].includes(info.ext)) {
+                        const transforms = await getTransforms(plugin, instances);
+                        const clipVariant = transforms.length === 1 ? 'pixel' : 'instance';
+                        build = build
+                            .apply(ParsePly)
+                            .apply(ShapeFromPly, { label, transforms })
+                            .apply(ShapeRepresentation3D, getPlyShapeParams(color, clipVariant), { tags });
+                    }
+                } else {
+                    console.warn(`unknown file format '${info.ext}'`);
+                }
+            }
+            await build.commit();
+
+            const values = { type: 'group-generate', value: ColorNames.white, lightness: 0, alpha: 1 };
+            const options = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 }, celShaded: true, };
+            await updateColors(plugin, values, options);
+        } catch (e) {
+            console.error(e);
+            plugin.log.error(e);
+        } finally {
+            plugin.animationLoop.start();
+        }
+    }).run();
+
+    asset.dispose();
+}
+
+//
+
+type GenericRoot = {
+    id: string
+    label?: string
+    description?: string
+    children: GenericGroup[]
+}
+
+type GenericGroup = {
+    id: string
+    /** reference to `${GenericRoot.id}` */
+    root: string
+    label?: string
+    description?: string
+    children?: GenericGroup[]
+}
+
+type GenericEntity = {
+    /**
+     * the entity file name
+     *
+     * the following extensions/formats are supported
+     *
+     * structures
+     * - gro
+     * - cif, mmcif, mcif, bcif
+     * - pdb, ent
+     * - xyz
+     * - mol
+     * - sdf, sd
+     * - mol2
+     *
+     * meshes
+     * - ply
+     */
+    file: string
+    label?: string
+    description?: string
+    groups: {
+        /** reference to `${GenericGroup.id}` */
+        id: string,
+        /** reference to `${GenericGroup.root}` */
+        root: string
+    }[]
+    /**
+     * defaults to a single, untransformed instance
+     */
+    instances?: GenericInstances<string>
+    /**
+     * defaults to 1 (assuming fully atomic structures)
+     * for C-alpha only structures set to 2
+     * for Martini coarse-grained set to 1.5
+     */
+    sizeFactor?: number
+}
+
+type BinaryData<T extends string | Asset> = {
+    file: T,
+    view?: {
+        byteOffset: number,
+        byteLength: number
+    }
+}
+
+export type GenericInstances<T extends string | Asset> = {
+    /**
+     * translation vectors in Angstrom
+     * [x0, y0, z0, ..., xn, yn, zn] with n = count - 1
+     */
+    positions: {
+        /**
+         * either the data itself or a pointer to binary data
+         */
+        data: number[] | BinaryData<T>
+        /**
+         * how to interpret the data
+         * defaults to `{ kind: 'Array', type: 'Float32' }`
+         */
+        type?: { kind: 'Array', type: 'Float32' }
+        // TODO: maybe worthwhile in the future, mirroring encoders from BinaryCIF
+        // | { kind: 'IntegerPackedFixedPoint', byteCount: number, srcSize: number, factor: number, srcType: 'Float32' }
+    }
+    /**
+     * euler angles in XYZ order
+     * [x0, y0, z0, ..., xn, yn, zn] with n = count - 1
+     *
+     * quaternion rotations in XYZW order
+     * [x0, y0, z0, w0, ..., xn, yn, zn, wn] with n = count - 1
+     *
+     * rotation matrices in row-major order
+     * [m00_0, m01_0, m02_0, ..., m20_n, m21_n, m22_n] with n = count - 1
+     */
+    rotations: {
+        variant: 'euler' | 'quaternion' | 'matrix',
+        /**
+         * either the data itself or a pointer to binary data
+         */
+        data: number[] | BinaryData<T>
+        /**
+         * how to interpret the data
+         * defaults to `{ kind: 'Array', type: 'Float32' }`
+         */
+        type?: { kind: 'Array', type: 'Float32' }
+    }
+}
+
+type GenericFrame = {
+    time: number
+    entities: {
+        file: string
+        instances: GenericInstances<string>
+    }[]
+}
+
+type GenericTrajectory = {
+    label?: string
+    description?: string
+    frames: GenericFrame[]
+}
+
+type GenericManifest = {
+    label?: string
+    description?: string
+    roots: GenericRoot[]
+    entities: GenericEntity[]
+    trajectories?: GenericTrajectory[]
+}
+
+//
+
+const p = Vec3();
+const q = Quat();
+const m = Mat3();
+const e = Euler();
+
+async function getPositions(plugin: PluginContext, p: GenericInstances<Asset>['positions']): Promise<NumberArray> {
+    if (Array.isArray(p.data)) {
+        return p.data;
+    } else {
+        const a = await plugin.runTask(plugin.managers.asset.resolve(p.data.file, 'binary'));
+        const o = p.data.view?.byteOffset || 0;
+        const l = p.data.view?.byteLength || a.data.byteLength;
+        return new Float32Array(a.data.buffer, o + a.data.byteOffset, l / 4);
+    }
+};
+
+async function getRotations(plugin: PluginContext, r: GenericInstances<Asset>['rotations']): Promise<NumberArray> {
+    if (Array.isArray(r.data)) {
+        return r.data;
+    } else {
+        const a = await plugin.runTask(plugin.managers.asset.resolve(r.data.file, 'binary'));
+        const o = r.data.view?.byteOffset || 0;
+        const l = r.data.view?.byteLength || a.data.byteLength;
+        return new Float32Array(a.data.buffer, o + a.data.byteOffset, l / 4);
+    }
+};
+
+export async function getTransforms(plugin: PluginContext, instances?: GenericInstances<Asset>) {
+    const transforms: Mat4[] = [];
+    if (instances) {
+        const positions = await getPositions(plugin, instances.positions);
+        const rotations = await getRotations(plugin, instances.rotations);
+
+        for (let i = 0, il = positions.length / 3; i < il; ++i) {
+            Vec3.fromArray(p, positions, i * 3);
+            if (instances.rotations.variant === 'matrix') {
+                Mat3.fromArray(m, rotations, i * 9);
+                const t = Mat4.fromMat3(Mat4(), m);
+                Mat4.setTranslation(t, p);
+                transforms.push(t);
+            } else if (instances.rotations.variant === 'quaternion') {
+                Quat.fromArray(q, rotations, i * 4);
+                const t = Mat4.fromQuat(Mat4(), q);
+                Mat4.setTranslation(t, p);
+                transforms.push(t);
+            } else if (instances.rotations.variant === 'euler') {
+                Euler.fromArray(e, rotations, i * 3);
+                Quat.fromEuler(q, e, 'XYZ');
+                const t = Mat4.fromQuat(Mat4(), q);
+                Mat4.setTranslation(t, p);
+                transforms.push(t);
+            }
+        }
+    } else {
+        transforms.push(Mat4.identity());
+    }
+
+    return transforms;
+}
+
+//
+
+type MartiniManifest = {
+    model: string,
+    positions: Vec3[],
+    rotations: Vec3[],
+    function: string
+}[]
+
+function martiniToGeneric(martini: MartiniManifest): GenericManifest {
+    const functionRoot: GenericRoot = {
+        id: 'function',
+        label: 'Function',
+        description: 'Functional classification',
+        children: [],
+    };
+    const entities: GenericEntity[] = [];
+
+    const seenGroups = new Set<string>();
+
+    const membraneGroup = {
+        id: 'membane',
+        root: 'function',
+        label: 'Membrane',
+        children: [] as GenericGroup[],
+    };
+    functionRoot.children!.push(membraneGroup);
+    seenGroups.add(membraneGroup.id);
+
+    const lipidsGroup = {
+        id: 'lipid',
+        root: 'function',
+        label: 'Lipid',
+        children: [] as GenericGroup[],
+    };
+    membraneGroup.children!.push(lipidsGroup);
+    seenGroups.add(lipidsGroup.id);
+
+    const upperGroup = {
+        id: 'upper',
+        root: 'function',
+        label: 'Upper Leaflet',
+    };
+    lipidsGroup.children!.push(upperGroup);
+    seenGroups.add(upperGroup.id);
+
+    const lowerGroup = {
+        id: 'lower',
+        root: 'function',
+        label: 'Lower Leaflet',
+    };
+    lipidsGroup.children!.push(lowerGroup);
+    seenGroups.add(lowerGroup.id);
+
+    const memprotGroup = {
+        id: 'memprot',
+        root: 'function',
+        label: 'Transmembrane Protein',
+    };
+    membraneGroup.children!.push(memprotGroup);
+    seenGroups.add(memprotGroup.id);
+
+    for (const e of martini) {
+        const label = e.model.split('.')[0];
+        const group = e.function || 'Metabolite';
+
+        const positions = {
+            data: e.positions.flat().map(x => Math.round((x * 10) * 100) / 100)
+        };
+        const rotations = {
+            data: e.rotations.flat().map(x => Math.round(x * 100) / 100),
+            variant: 'euler' as const,
+        };
+
+        if (group.includes('lower leaflet')) {
+            entities.push({
+                file: e.model,
+                label: label.substring(15),
+                groups: [{ root: 'function', id: 'lower' }],
+                instances: { positions, rotations },
+                sizeFactor: 1.5,
+            });
+        } else if (group.includes('upper leaflet')) {
+            entities.push({
+                file: e.model,
+                label: label.substring(15),
+                groups: [{ root: 'function', id: 'upper' }],
+                instances: { positions, rotations },
+                sizeFactor: 1.5,
+            });
+        } else if (group.length === 4) {
+            entities.push({
+                file: e.model,
+                label: label.substring(17),
+                groups: [{ root: 'function', id: 'memprot' }],
+                instances: { positions, rotations },
+                sizeFactor: 1.5,
+            });
+        } else {
+            if (!seenGroups.has(group)) {
+                functionRoot.children!.push({
+                    id: group,
+                    root: 'function',
+                    label: group,
+                });
+                seenGroups.add(group);
+            }
+            entities.push({
+                file: e.model,
+                label,
+                groups: [{ root: 'function', id: group }],
+                instances: { positions, rotations },
+                sizeFactor: 1.5,
+            });
+        }
+    }
+
+    return {
+        label: 'Martini',
+        description: 'Martini coarse-grained model',
+        roots: [functionRoot],
+        entities,
+    };
+}

src/apps/mesoscale-explorer/data/mmcif/model.ts

@@ -0,0 +1,203 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { SortedArray } from '../../../../mol-data/int';
+import { SymmetryOperator } from '../../../../mol-math/geometry';
+import { Mat4 } from '../../../../mol-math/linear-algebra';
+import { ModelSymmetry } from '../../../../mol-model-formats/structure/property/symmetry';
+import { CustomStructureProperty } from '../../../../mol-model-props/common/custom-structure-property';
+import { ElementIndex, EntityIndex, Model, Structure, Unit } from '../../../../mol-model/structure';
+import { Assembly, Symmetry } from '../../../../mol-model/structure/model/properties/symmetry';
+import { PluginStateObject as PSO, PluginStateTransform } from '../../../../mol-plugin-state/objects';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { StateTransformer } from '../../../../mol-state/transformer';
+import { Task } from '../../../../mol-task';
+import { deepEqual } from '../../../../mol-util';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { partitionUnits } from '../util';
+
+function createModelChainMap(model: Model) {
+    const builder = new Structure.StructureBuilder();
+    const units = new Map<string, Unit>();
+
+    const { label_asym_id, _rowCount } = model.atomicHierarchy.chains;
+    const { offsets } = model.atomicHierarchy.chainAtomSegments;
+
+    for (let i = 0; i < _rowCount; i++) {
+        const elements = SortedArray.ofBounds(offsets[i] as ElementIndex, offsets[i + 1] as ElementIndex);
+        const unit = builder.addUnit(Unit.Kind.Atomic, model, SymmetryOperator.Default, elements, Unit.Trait.FastBoundary);
+        units.set(label_asym_id.value(i), unit);
+    }
+
+    return units;
+}
+
+function buildAssembly(model: Model, assembly: Assembly) {
+    const coordinateSystem = SymmetryOperator.create(assembly.id, Mat4.identity(), { assembly: { id: assembly.id, operId: 0, operList: [] } });
+    const assembler = Structure.Builder({
+        coordinateSystem,
+        label: model.label,
+    });
+
+    const units = createModelChainMap(model);
+
+    for (const g of assembly.operatorGroups) {
+        for (const oper of g.operators) {
+            for (const id of g.asymIds!) {
+                const u = units.get(id);
+                if (u) {
+                    assembler.addWithOperator(u, oper);
+                } else {
+                    console.log(`missing asymId '${id}'`);
+                }
+            }
+        }
+    }
+
+    return assembler.getStructure();
+}
+
+export { MmcifAssembly };
+type MmcifAssembly = typeof MmcifAssembly
+const MmcifAssembly = PluginStateTransform.BuiltIn({
+    name: 'mmcif-assembly',
+    display: { name: 'Mmcif Assembly' },
+    from: PSO.Molecule.Model,
+    to: PSO.Molecule.Structure,
+    params: {
+        id: PD.Text('', { label: 'Asm Id', description: 'Assembly Id (use empty for the 1st assembly)' }),
+    }
+})({
+    canAutoUpdate({ newParams }) {
+        return true;
+    },
+    apply({ a, params }, plugin: PluginContext) {
+        return Task.create('Build Structure', async ctx => {
+            const model = a.data;
+
+            let id = params.id;
+            let asm: Assembly | undefined = void 0;
+            const symmetry = ModelSymmetry.Provider.get(model);
+
+            // if no id is specified, use the 1st assembly.
+            if (!id && symmetry && symmetry.assemblies.length !== 0) {
+                id = symmetry.assemblies[0].id;
+            }
+
+            if (!symmetry || symmetry.assemblies.length === 0) {
+                plugin.log.warn(`Model '${model.entryId}' has no assembly, returning model structure.`);
+            } else {
+                asm = Symmetry.findAssembly(model, id || '');
+                if (!asm) {
+                    plugin.log.warn(`Model '${model.entryId}' has no assembly called '${id}', returning model structure.`);
+                }
+            }
+
+            const base = Structure.ofModel(model);
+            if (!asm) {
+                const label = { label: 'Model', description: Structure.elementDescription(base) };
+                return new PSO.Molecule.Structure(base, label);
+            }
+
+            const s = buildAssembly(model, asm);
+
+            const objProps = { label: `Assembly ${id}`, description: Structure.elementDescription(s) };
+            return new PSO.Molecule.Structure(s, objProps);
+        });
+    },
+    update({ newParams, oldParams }) {
+        return deepEqual(newParams, oldParams)
+            ? StateTransformer.UpdateResult.Unchanged
+            : StateTransformer.UpdateResult.Recreate;
+    },
+    dispose({ b }) {
+        b?.data.customPropertyDescriptors.dispose();
+    }
+});
+
+type UnitsByEntity = Map<EntityIndex, Unit[]>;
+const UnitsByEntity = CustomStructureProperty.createSimple<UnitsByEntity>('units_by_entity', 'root');
+
+function getUnitsByEntity(structure: Structure): UnitsByEntity {
+    if (UnitsByEntity.get(structure).value) {
+        return UnitsByEntity.get(structure).value!;
+    }
+
+    const atomicIndex = structure.model.atomicHierarchy.index;
+    const spheresIndex = structure.model.coarseHierarchy.spheres;
+    const map: UnitsByEntity = new Map();
+    for (const ug of structure.unitSymmetryGroups) {
+        const u = ug.units[0];
+        let e: EntityIndex;
+        if (Unit.isAtomic(u)) {
+            e = atomicIndex.getEntityFromChain(u.chainIndex[u.elements[0]]);
+        } else if (Unit.isSpheres(u)) {
+            e = spheresIndex.getEntityFromChain(u.coarseElements.chainElementSegments.index[u.elements[0]]);
+        } else {
+            continue;
+        }
+
+        if (!map.has(e)) map.set(e, []);
+        const entityUnits = map.get(e)!;
+
+        for (let i = 0, il = ug.units.length; i < il; ++i) {
+            entityUnits.push(ug.units[i]);
+        }
+    }
+
+    UnitsByEntity.set(structure, { value: map }, map);
+    return map;
+}
+
+export { MmcifStructure };
+type MmcifStructure = typeof MmcifStructure
+const MmcifStructure = PluginStateTransform.BuiltIn({
+    name: 'mmcif-structure',
+    display: { name: 'Mmcif Structure' },
+    from: PSO.Root,
+    to: PSO.Molecule.Structure,
+    params: {
+        structureRef: PD.Text(''),
+        entityId: PD.Text(''),
+        cellSize: PD.Numeric(500, { min: 0, max: 10000, step: 100 }),
+    }
+})({
+    canAutoUpdate({ newParams }) {
+        return true;
+    },
+    apply({ a, params, dependencies }) {
+        return Task.create('Build Structure', async ctx => {
+            const parent = dependencies![params.structureRef].data as Structure;
+            const { entities } = parent.model;
+            const idx = entities.getEntityIndex(params.entityId);
+
+            const unitsByEntity = getUnitsByEntity(parent);
+            const units = unitsByEntity.get(idx) || [];
+            const unitCount = units.length;
+
+            let structure: Structure;
+            if (unitCount > 1 && units.every(u => u.conformation.operator.isIdentity)) {
+                const mergedUnits = partitionUnits(units, params.cellSize);
+                structure = Structure.create(mergedUnits);
+            } else {
+                structure = Structure.create(units);
+            }
+            // could also use _struct_ref.pdbx_db_accession to point to uniprot with _struct_ref.db_name == UNP
+            const label = entities.data.pdbx_description.value(idx).join(', ') || 'model';
+            const description = `*Entity id* ${entities.data.id.value(idx)} *src_method* ${entities.data.src_method.value(idx)} *type* ${entities.data.type.value(idx)}`;
+            return new PSO.Molecule.Structure(structure, { label, description: description });
+        });
+    },
+    update({ newParams, oldParams }) {
+        return deepEqual(newParams, oldParams)
+            ? StateTransformer.UpdateResult.Unchanged
+            : StateTransformer.UpdateResult.Recreate;
+    },
+    dispose({ b }) {
+        b?.data.customPropertyDescriptors.dispose();
+    }
+});

src/apps/mesoscale-explorer/data/mmcif/preset.ts

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif';
+import { PluginStateObject } from '../../../../mol-plugin-state/objects';
+import { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill';
+import { StateObjectRef, StateObjectSelector, StateBuilder } from '../../../../mol-state';
+import { Clip } from '../../../../mol-util/clip';
+import { Color } from '../../../../mol-util/color';
+import { ColorNames } from '../../../../mol-util/color/names';
+import { GraphicsMode, MesoscaleGroup, MesoscaleState, getDistinctBaseColors, getDistinctGroupColors, getGraphicsModeProps, getMesoscaleGroupParams, updateColors } from '../state';
+import { MmcifAssembly, MmcifStructure } from './model';
+
+function getSpacefillParams(color: Color, scaleFactor: number, graphics: GraphicsMode, clipVariant: Clip.Variant) {
+    const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);
+    return {
+        type: {
+            name: 'spacefill',
+            params: {
+                ...SpacefillRepresentationProvider.defaultValues,
+                ignoreHydrogens: false,
+                instanceGranularity: false,
+                ignoreLight: true,
+                lodLevels: gmp.lodLevels.map(l => {
+                    return {
+                        ...l,
+                        stride: Math.max(1, Math.round(l.stride / Math.pow(scaleFactor, l.scaleBias)))
+                    };
+                }),
+                quality: 'lowest', // avoid 'auto', triggers boundary calc
+                clip: {
+                    variant: clipVariant,
+                    objects: [],
+                },
+                clipPrimitive: true,
+                approximate: gmp.approximate,
+                alphaThickness: gmp.alphaThickness,
+            },
+        },
+        colorTheme: {
+            name: 'uniform',
+            params: {
+                value: color,
+                saturation: 0,
+                lightness: 0,
+            }
+        },
+        sizeTheme: {
+            name: 'physical',
+            params: {
+                value: 1,
+            }
+        },
+    };
+}
+
+export async function createMmcifHierarchy(plugin: PluginContext, trajectory: StateObjectRef<PluginStateObject.Molecule.Trajectory>) {
+    const builder = plugin.builders.structure;
+    const state = plugin.state.data;
+
+    const model = await builder.createModel(trajectory, { modelIndex: 0 });
+    const { data: entities, subtype } = model.data!.entities;
+
+    const sd = model.data?.sourceData;
+    if (MmcifFormat.is(sd)) {
+        const pdbId = sd.data.db.struct.entry_id.value(0);
+        MesoscaleState.set(plugin, {
+            description: sd.data.db.struct.title.value(0),
+            link: pdbId ? `https://www.rcsb.org/structure/${pdbId}` : ''
+        });
+    }
+
+    const spheresAvgRadius = new Map<string, number>();
+    if (model.data!.coarseHierarchy.isDefined) {
+        const spheresCount = new Map<string, number>();
+        const spheresEntity_id = model.data!.coarseHierarchy.spheres.entity_id;
+        const spheresRadius = model.data!.coarseConformation.spheres.radius;
+        for (let i = 0, il = spheresEntity_id.rowCount; i < il; ++i) {
+            const entitiId = spheresEntity_id.value(i);
+            const radius = spheresRadius[i];
+            if (!spheresCount.has(entitiId)) {
+                spheresCount.set(entitiId, 1);
+                spheresAvgRadius.set(entitiId, radius);
+            } else {
+                spheresCount.set(entitiId, spheresCount.get(entitiId)! + 1);
+                spheresAvgRadius.set(entitiId, spheresAvgRadius.get(entitiId)! + radius);
+            }
+        }
+        spheresAvgRadius.forEach((v, k) => {
+            spheresAvgRadius.set(k, v / spheresCount.get(k)!);
+        });
+    }
+
+    const entGroups = new Map<string, StateObjectSelector>();
+    const entIds = new Map<string, { idx: number, members: Map<number, number> }>();
+    const entColors = new Map<string, Color[]>();
+
+    const graphicsMode = MesoscaleState.get(plugin).graphics;
+    const groupParams = getMesoscaleGroupParams(graphicsMode);
+
+    const base = await state.build()
+        .to(model)
+        .apply(MmcifAssembly, { id: '' })
+        .commit();
+
+    const units = base.data!.units;
+    const willBeMerged = units.length > 1 && units.every(u => u.conformation.operator.isIdentity);
+    const clipVariant = willBeMerged ? 'pixel' : 'instance';
+
+    const entRoot = await state.build()
+        .toRoot()
+        .applyOrUpdateTagged('group:ent:', MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `ent:`, label: 'entity', color: { type: 'custom', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'group:ent:', state: { isCollapsed: false, isHidden: groupParams.hidden } })
+        .commit();
+
+    const getEntityType = (i: number) => {
+        if (entities.type.value(i) === 'water') return 'water' as const;
+        return subtype.value(i) || 'unknown type';
+    };
+
+    for (let i = 0; i < entities._rowCount; i++) {
+        const t = getEntityType(i);
+        if (!entIds.has(t)) {
+            entIds.set(t, { idx: entIds.size, members: new Map() });
+        }
+        const cm = entIds.get(t)!;
+        cm.members.set(i, cm.members.size);
+    }
+
+    //
+
+    const baseEntColors = getDistinctBaseColors(entIds.size, 0);
+    const entIdEntries = Array.from(entIds.entries());
+    for (let i = 0; i < entIdEntries.length; ++i) {
+        const [t, m] = entIdEntries[i];
+        const groupColors = getDistinctGroupColors(m.members.size, baseEntColors[i], 20, 0);
+        entColors.set(t, groupColors);
+    }
+
+    for (let i = 0; i < entities._rowCount; i++) {
+        const t = getEntityType(i);
+        if (!entGroups.has(t)) {
+            const colorIdx = entIds.get(t)?.idx;
+            const color = colorIdx !== undefined ? baseEntColors[colorIdx] : ColorNames.white;
+            const group = await state.build()
+                .to(entRoot)
+                .applyOrUpdateTagged(`group:ent:${t}`, MesoscaleGroup, { ...groupParams, index: colorIdx, tag: `ent:${t}`, label: t, color: { type: 'generate', illustrative: false, value: color, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: `ent:`, state: { isCollapsed: true, isHidden: groupParams.hidden } })
+                .commit({ revertOnError: true });
+            entGroups.set(t, group);
+        }
+    }
+
+    //
+
+    await state.transaction(async () => {
+        try {
+            const dependsOn = [base.ref];
+            plugin.animationLoop.stop({ noDraw: true });
+            let build: StateBuilder.Root | StateBuilder.To<any> = state.build();
+            for (let i = 0; i < entities._rowCount; i++) {
+                const t = getEntityType(i);
+                const color = entColors.get(t)![entIds.get(t)!.members.get(i)!];
+                const scaleFactor = spheresAvgRadius.get(entities.id.value(i)) || 1;
+
+                build = build
+                    .toRoot()
+                    .apply(MmcifStructure, { structureRef: base.ref, entityId: entities.id.value(i) }, { dependsOn })
+                    .apply(StructureRepresentation3D, getSpacefillParams(color, scaleFactor, graphicsMode, clipVariant), { tags: [`ent:${t}`] });
+            }
+            await build.commit();
+            const values = { type: 'group-generate', value: ColorNames.white, lightness: 0, alpha: 1 };
+            const options = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 }, celShaded: true, };
+            await updateColors(plugin, values, options);
+        } catch (e) {
+            console.error(e);
+            plugin.log.error(e);
+        } finally {
+            plugin.animationLoop.start();
+        }
+    }).run();
+}

src/apps/mesoscale-explorer/data/petworld/model.ts

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2022-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Mat4 } from '../../../../mol-math/linear-algebra/3d/mat4';
+import { getMatrices, operatorGroupsProvider } from '../../../../mol-model-formats/structure/property/assembly';
+import { Structure, StructureElement, StructureProperties, Trajectory, Unit } from '../../../../mol-model/structure';
+import { Assembly } from '../../../../mol-model/structure/model/properties/symmetry';
+import { PluginStateObject as SO, PluginStateTransform } from '../../../../mol-plugin-state/objects';
+import { Task } from '../../../../mol-task';
+import { Table } from '../../../../mol-data/db';
+import { mmCIF_Schema } from '../../../../mol-io/reader/cif/schema/mmcif';
+import { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif';
+import { arrayFind } from '../../../../mol-data/util';
+import { StateObject, StateTransformer } from '../../../../mol-state';
+import { CifField } from '../../../../mol-io/reader/cif';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { mergeUnits } from '../util';
+import { deepEqual } from '../../../../mol-util';
+
+export { StructureFromPetworld };
+type StructureFromPetworld = typeof StructureFromPetworld
+const StructureFromPetworld = PluginStateTransform.BuiltIn({
+    name: 'structure-from-petworld',
+    display: { name: 'Structure from PetWorld', description: 'Create a molecular structure from PetWorld models.' },
+    from: SO.Molecule.Trajectory,
+    to: SO.Molecule.Structure,
+    params: {
+        modelIndex: PD.Numeric(0),
+        entityIds: PD.Value<string[]>([]),
+    }
+})({
+    apply({ a, params }) {
+        return Task.create('Build Structure', async ctx => {
+            const s = await buildModelsAssembly(a.data, '1', params.modelIndex, params.entityIds).runInContext(ctx);
+            if (!s || !MmcifFormat.is(s.model.sourceData)) return StateObject.Null;
+
+            const { frame } = s.model.sourceData.data;
+            const pdbx_model = frame.categories.pdbx_model.getField('name')!;
+            const pdbx_description = frame.categories.pdbx_model.getField('description')!;
+            const description = pdbx_description ? pdbx_description.str(params.modelIndex) : Structure.elementDescription(s);
+            const label = pdbx_model.str(params.modelIndex);
+            const props = { label, description: description };
+            return new SO.Molecule.Structure(s, props);
+        });
+    },
+    update({ newParams, oldParams }) {
+        return deepEqual(newParams, oldParams)
+            ? StateTransformer.UpdateResult.Unchanged
+            : StateTransformer.UpdateResult.Recreate;
+    },
+    dispose({ b }) {
+        b?.data.customPropertyDescriptors.dispose();
+    }
+});
+
+function buildModelsAssembly(trajectory: Trajectory, asmName: string, modelIndex: number, entitiyIds: string[]) {
+    return Task.create('Build Models Assembly', async ctx => {
+        const model = await Task.resolveInContext(trajectory.getFrameAtIndex(modelIndex), ctx);
+        if (!MmcifFormat.is(model.sourceData)) return;
+
+        const { db, frame } = model.sourceData.data;
+        const PDB_model_num = frame.categories.pdbx_struct_assembly_gen.getField('PDB_model_num')!;
+
+        // hack to cache models assemblies
+        if (!(trajectory as any).__modelsAssemblies) {
+            (trajectory as any).__modelsAssemblies = createModelsAssemblies(db.pdbx_struct_assembly, db.pdbx_struct_assembly_gen as StructAssemblyGen, db.pdbx_struct_oper_list, PDB_model_num);
+        }
+        const modelsAssemblies = (trajectory as any).__modelsAssemblies as ModelsAssembly[];
+
+        const modelsAssembly = arrayFind(modelsAssemblies, ma => ma.assembly.id.toLowerCase() === asmName);
+        if (!modelsAssembly) throw new Error(`Models Assembly '${asmName}' is not defined.`);
+
+        const { assembly } = modelsAssembly;
+        const assembler = Structure.Builder();
+        const g = assembly.operatorGroups[modelIndex];
+
+        const structure = Structure.ofModel(model);
+        const l = StructureElement.Location.create(structure);
+        const units = structure.units.filter(u => {
+            l.unit = u;
+            l.element = u.elements[0];
+            return entitiyIds.includes(StructureProperties.entity.id(l));
+        });
+        const unit = mergeUnits(units, 0);
+
+        for (const oper of g.operators) {
+            assembler.addUnit(unit.kind, unit.model, oper, unit.elements, unit.traits | Unit.Trait.FastBoundary, unit.invariantId);
+        }
+
+        return assembler.getStructure();
+    });
+}
+
+//
+
+type StructAssembly = Table<mmCIF_Schema['pdbx_struct_assembly']>
+type StructAssemblyGen = Table<mmCIF_Schema['pdbx_struct_assembly_gen']>
+type StructOperList = Table<mmCIF_Schema['pdbx_struct_oper_list']>
+
+type ModelsAssembly = { assembly: Assembly, modelNums: number[] };
+
+function createModelsAssemblies(pdbx_struct_assembly: StructAssembly, pdbx_struct_assembly_gen: StructAssemblyGen, pdbx_struct_oper_list: StructOperList, PDB_model_num: CifField): ReadonlyArray<ModelsAssembly> {
+    if (!pdbx_struct_assembly._rowCount) return [];
+
+    const matrices = getMatrices(pdbx_struct_oper_list);
+    const assemblies: ModelsAssembly[] = [];
+    for (let i = 0; i < pdbx_struct_assembly._rowCount; i++) {
+        assemblies[assemblies.length] = createModelsAssembly(pdbx_struct_assembly, pdbx_struct_assembly_gen, i, matrices, PDB_model_num);
+    }
+    return assemblies;
+}
+
+type Matrices = Map<string, Mat4>
+type Generator = { assemblyId: string, expression: string, asymIds: string[] }
+
+function createModelsAssembly(pdbx_struct_assembly: StructAssembly, pdbx_struct_assembly_gen: StructAssemblyGen, index: number, matrices: Matrices, PDB_model_num: CifField): ModelsAssembly {
+    const id = pdbx_struct_assembly.id.value(index);
+    const details = pdbx_struct_assembly.details.value(index);
+    const generators: Generator[] = [];
+    const modelNums: number[] = [];
+
+    const { assembly_id, oper_expression, asym_id_list } = pdbx_struct_assembly_gen;
+
+    for (let i = 0, _i = pdbx_struct_assembly_gen._rowCount; i < _i; i++) {
+        if (assembly_id.value(i) !== id) continue;
+        generators[generators.length] = {
+            assemblyId: id,
+            expression: oper_expression.value(i),
+            asymIds: asym_id_list.value(i)
+        };
+        modelNums[modelNums.length] = PDB_model_num.int(i);
+    }
+
+    const assembly = Assembly.create(id, details, operatorGroupsProvider(generators, matrices));
+
+    return { assembly, modelNums };
+}

src/apps/mesoscale-explorer/data/petworld/preset.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2022-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { StateBuilder, StateObjectRef } from '../../../../mol-state';
+import { StructureFromPetworld } from './model';
+import { Color } from '../../../../mol-util/color';
+import { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill';
+import { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation';
+import { PluginContext } from '../../../../mol-plugin/context';
+import { PluginStateObject } from '../../../../mol-plugin-state/objects';
+import { GraphicsMode, MesoscaleGroup, MesoscaleState, getDistinctBaseColors, getGraphicsModeProps, getMesoscaleGroupParams, updateColors } from '../state';
+import { ColorNames } from '../../../../mol-util/color/names';
+import { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif';
+import { Task } from '../../../../mol-task';
+
+function getSpacefillParams(color: Color, graphics: GraphicsMode) {
+    const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);
+    return {
+        type: {
+            name: 'spacefill',
+            params: {
+                ...SpacefillRepresentationProvider.defaultValues,
+                ignoreHydrogens: true,
+                instanceGranularity: true,
+                ignoreLight: true,
+                lodLevels: gmp.lodLevels,
+                quality: 'lowest', // avoid 'auto', triggers boundary calc
+                clip: {
+                    variant: 'instance',
+                    objects: [],
+                },
+                clipPrimitive: true,
+                approximate: gmp.approximate,
+                alphaThickness: gmp.alphaThickness,
+            },
+        },
+        colorTheme: {
+            name: 'uniform',
+            params: {
+                value: color,
+                saturation: 0,
+                lightness: 0,
+            }
+        },
+        sizeTheme: {
+            name: 'physical',
+            params: {
+                scale: 1,
+            }
+        },
+    };
+}
+
+export async function createPetworldHierarchy(plugin: PluginContext, trajectory: StateObjectRef<PluginStateObject.Molecule.Trajectory>) {
+    const cell = StateObjectRef.resolveAndCheck(plugin.state.data, trajectory);
+    const tr = cell?.obj?.data;
+    if (!cell || !tr) return;
+
+    if (!MmcifFormat.is(tr.representative.sourceData)) return;
+
+    const membrane: { modelIndex: number, entityIds: string[] }[] = [];
+    const other: { modelIndex: number, entityIds: string[] }[] = [];
+    for (let i = 0; i < tr.frameCount; ++i) {
+        const m = await Task.resolveInContext(tr.getFrameAtIndex(i));
+        // cannot use m.properties.structAsymMap because petworld models
+        // may assign the same asymId to multiple entities
+        const { label_asym_id, label_entity_id, _rowCount } = m.atomicHierarchy.chains;
+        const membraneIds: string[] = [];
+        const otherIds: string[] = [];
+        const seen = new Set<string>();
+        for (let i = 0; i < _rowCount; i ++) {
+            const entityId = label_entity_id.value(i);
+            if (seen.has(entityId)) continue;
+
+            const asymId = label_asym_id.value(i);
+            if (asymId.startsWith('MEM')) {
+                membraneIds.push(entityId);
+            } else {
+                otherIds.push(entityId);
+            }
+            seen.add(entityId);
+        }
+        if (membraneIds.length) {
+            membrane.push({ modelIndex: i, entityIds: membraneIds });
+        }
+        if (otherIds.length) {
+            other.push({ modelIndex: i, entityIds: otherIds });
+        }
+    }
+
+    const state = plugin.state.data;
+    const graphicsMode = MesoscaleState.get(plugin).graphics;
+    const groupParams = getMesoscaleGroupParams(graphicsMode);
+
+    const group = await state.build()
+        .toRoot()
+        .applyOrUpdateTagged('group:ent:', MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `ent:`, label: 'entity', color: { type: 'generate', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'group:ent:', state: { isCollapsed: false, isHidden: groupParams.hidden } })
+        .commit({ revertOnError: true });
+
+    await state.build()
+        .to(group)
+        .applyOrUpdateTagged(`group:ent:mem`, MesoscaleGroup, { ...groupParams, index: undefined, tag: `ent:mem`, label: 'Membrane', color: { type: 'uniform', illustrative: false, value: ColorNames.lightgrey, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: `ent:`, state: { isCollapsed: true, isHidden: groupParams.hidden } })
+        .commit();
+
+    const colors = getDistinctBaseColors(other.length, 0);
+
+    await state.transaction(async () => {
+        try {
+            plugin.animationLoop.stop({ noDraw: true });
+            let build: StateBuilder.Root | StateBuilder.To<any> = state.build();
+            for (let i = 0, il = membrane.length; i < il; ++i) {
+                build = build
+                    .to(cell)
+                    .apply(StructureFromPetworld, membrane[i])
+                    .apply(StructureRepresentation3D, getSpacefillParams(ColorNames.lightgrey, graphicsMode), { tags: [`ent:mem`] });
+            }
+            for (let i = 0, il = other.length; i < il; ++i) {
+                build = build
+                    .to(cell)
+                    .apply(StructureFromPetworld, other[i])
+                    .apply(StructureRepresentation3D, getSpacefillParams(colors[i], graphicsMode), { tags: [`ent:`] });
+            }
+            await build.commit();
+            const values = { type: 'group-generate', value: ColorNames.white, lightness: 0, alpha: 1 };
+            const options = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 }, celShaded: true, };
+            await updateColors(plugin, values, options);
+        } catch (e) {
+            console.error(e);
+            plugin.log.error(e);
+        } finally {
+            plugin.animationLoop.start();
+        }
+    }).run();
+}

src/apps/mesoscale-explorer/data/state.ts

@@ -0,0 +1,683 @@
+/**
+ * Copyright (c) 2023-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { PluginStateObject as PSO, PluginStateTransform } from '../../../mol-plugin-state/objects';
+import { PluginContext } from '../../../mol-plugin/context';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { Task } from '../../../mol-task';
+import { Color } from '../../../mol-util/color';
+import { Spheres } from '../../../mol-geo/geometry/spheres/spheres';
+import { Clip } from '../../../mol-util/clip';
+import { escapeRegExp, stringToWords } from '../../../mol-util/string';
+import { Vec3 } from '../../../mol-math/linear-algebra';
+import { ParamMapping } from '../../../mol-util/param-mapping';
+import { EntityNode } from '../ui/entities';
+import { DistinctColorsProps, distinctColors } from '../../../mol-util/color/distinct';
+import { Sphere3D } from '../../../mol-math/geometry';
+import { Hcl } from '../../../mol-util/color/spaces/hcl';
+import { StateObjectCell, StateObjectRef, StateSelection } from '../../../mol-state';
+import { ShapeRepresentation3D, StructureRepresentation3D } from '../../../mol-plugin-state/transforms/representation';
+import { SpacefillRepresentationProvider } from '../../../mol-repr/structure/representation/spacefill';
+import { assertUnreachable } from '../../../mol-util/type-helpers';
+import { MesoscaleExplorerState } from '../app';
+import { saturate } from '../../../mol-math/interpolate';
+import { Material } from '../../../mol-util/material';
+
+function getHueRange(hue: number, variability: number) {
+    let min = hue - variability;
+    const minOverflow = (min < 0 ? -min : 0);
+    let max = hue + variability;
+    if (max > 360) min -= max - 360;
+    max += minOverflow;
+    return [Math.max(0, min), Math.min(360, max)] as [number, number];
+}
+
+function getGrayscaleColors(count: number, luminance: number, variability: number) {
+    const out: Color[] = [];
+    for (let i = 0; i < count; ++ i) {
+        const l = saturate(luminance / 100);
+        const v = saturate(variability / 180) * Math.random();
+        const s = Math.random() > 0.5 ? 1 : -1;
+        const d = Math.abs(l + s * v) % 1;
+        out[i] = Color.fromNormalizedRgb(d, d, d);
+    }
+    return out;
+}
+
+export function getDistinctGroupColors(count: number, color: Color, variability: number, shift: number, props?: Partial<DistinctColorsProps>) {
+    const hcl = Hcl.fromColor(Hcl(), color);
+    if (isNaN(hcl[0])) {
+        return getGrayscaleColors(count, hcl[2], variability);
+    }
+
+    if (count === 1) {
+        hcl[1] = 65;
+        hcl[2] = 55;
+        return [Hcl.toColor(hcl)];
+    }
+
+    const colors = distinctColors(count, {
+        hue: getHueRange(hcl[0], variability),
+        chroma: [30, 100],
+        luminance: [50, 100],
+        clusteringStepCount: 0,
+        minSampleCount: 1000,
+        sampleCountFactor: 100,
+        sort: 'none',
+        ...props,
+    });
+
+    if (shift !== 0) {
+        const offset = Math.floor(shift / 100 * count);
+        return [...colors.slice(offset), ...colors.slice(0, offset)];
+    } else {
+        return colors;
+    }
+}
+
+const Colors = [0x377eb8, 0xe41a1c, 0x4daf4a, 0x984ea3, 0xff7f00, 0xffff33, 0xa65628, 0xf781bf] as Color[];
+
+export function getDistinctBaseColors(count: number, shift: number, props?: Partial<DistinctColorsProps>): Color[] {
+    let colors: Color[];
+    if (count <= Colors.length) {
+        colors = Colors.slice(0, count).map(e => Array.isArray(e) ? e[0] : e);
+    } else {
+        colors = distinctColors(count, {
+            hue: [1, 360],
+            chroma: [25, 100],
+            luminance: [30, 100],
+            clusteringStepCount: 0,
+            minSampleCount: 1000,
+            sampleCountFactor: 100,
+            sort: 'none',
+            ...props,
+        });
+    }
+
+    if (shift !== 0) {
+        const offset = Math.floor(shift / 100 * count);
+        return [...colors.slice(offset), ...colors.slice(0, offset)];
+    } else {
+        return colors;
+    }
+}
+
+export const ColorParams = {
+    type: PD.Select('generate', PD.arrayToOptions(['generate', 'uniform', 'custom'])),
+    illustrative: PD.Boolean(false, { description: 'Illustrative style', hideIf: p => p.type === 'custom' }),
+    value: PD.Color(Color(0xFFFFFF), { hideIf: p => p.type === 'custom' }),
+    variability: PD.Numeric(20, { min: 1, max: 180, step: 1 }, { hideIf: p => p.type !== 'generate' }),
+    shift: PD.Numeric(0, { min: 0, max: 100, step: 1 }, { hideIf: p => !p.type.includes('generate') }),
+    lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }, { hideIf: p => p.type === 'custom' }),
+    alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { hideIf: p => p.type === 'custom' }),
+    emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }, { hideIf: p => p.type === 'custom' }),
+};
+export type ColorProps = PD.Values<typeof ColorParams>
+
+export const ColorValueParam = PD.Color(Color(0xFFFFFF));
+
+export const RootParams = {
+    type: PD.Select('custom', PD.arrayToOptions(['group-generate', 'group-uniform', 'generate', 'uniform', 'custom'])),
+    illustrative: PD.Boolean(false, { description: 'Illustrative style', hideIf: p => p.type === 'custom' }),
+    value: PD.Color(Color(0xFFFFFF), { hideIf: p => p.type !== 'uniform' }),
+    variability: PD.Numeric(20, { min: 1, max: 180, step: 1 }, { hideIf: p => p.type !== 'group-generate' }),
+    shift: PD.Numeric(0, { min: 0, max: 100, step: 1 }, { hideIf: p => !p.type.includes('generate') }),
+    lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }, { hideIf: p => p.type === 'custom' }),
+    alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { hideIf: p => p.type === 'custom' }),
+    emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }, { hideIf: p => p.type === 'custom' }),
+};
+
+export const LightnessParams = {
+    lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
+};
+export const DimLightness = 6;
+
+export const IllustrativeParams = {
+    illustrative: PD.Boolean(false, { description: 'Illustrative style' }),
+};
+
+export const OpacityParams = {
+    alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
+};
+
+export const EmissiveParams = {
+    emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }),
+};
+
+export const celShaded = {
+    celShaded: PD.Boolean(false, { description: 'Cel Shading light for stylized rendering of representations' })
+};
+
+export type celShadedProps = PD.Values<typeof celShaded>;
+
+
+export const PatternParams = {
+    frequency: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
+    amplitude: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
+};
+
+export const StyleParams = {
+    ignoreLight: PD.Boolean(false, { description: 'Ignore light for stylized rendering of representations' }),
+    materialStyle: Material.getParam(),
+    celShaded: PD.Boolean(false, { description: 'Cel Shading light for stylized rendering of representations' }),
+};
+
+export const LodParams = {
+    lodLevels: Spheres.Params.lodLevels,
+    cellSize: Spheres.Params.cellSize,
+    batchSize: Spheres.Params.batchSize,
+    approximate: Spheres.Params.approximate,
+};
+
+export const SimpleClipParams = {
+    type: PD.Select('none', PD.objectToOptions(Clip.Type, t => stringToWords(t))),
+    invert: PD.Boolean(false),
+    position: PD.Group({
+        x: PD.Numeric(0, { min: -100, max: 100, step: 1 }, { immediateUpdate: true }),
+        y: PD.Numeric(0, { min: -100, max: 100, step: 1 }, { immediateUpdate: true }),
+        z: PD.Numeric(0, { min: -100, max: 100, step: 1 }, { immediateUpdate: true }),
+    }, { hideIf: g => g.type === 'none', isExpanded: true }),
+    rotation: PD.Group({
+        axis: PD.Vec3(Vec3.create(1, 0, 0)),
+        angle: PD.Numeric(0, { min: -180, max: 180, step: 1 }, { immediateUpdate: true }),
+    }, { hideIf: g => g.type === 'none', isExpanded: true }),
+    scale: PD.Group({
+        x: PD.Numeric(100, { min: 0, max: 100, step: 1 }, { immediateUpdate: true }),
+        y: PD.Numeric(100, { min: 0, max: 100, step: 1 }, { immediateUpdate: true }),
+        z: PD.Numeric(100, { min: 0, max: 100, step: 1 }, { immediateUpdate: true }),
+    }, { hideIf: g => ['none', 'plane'].includes(g.type), isExpanded: true }),
+};
+export type SimpleClipParams = typeof SimpleClipParams
+export type SimpleClipProps = PD.Values<SimpleClipParams>
+
+export function getClipObjects(values: SimpleClipProps, boundingSphere: Sphere3D): Clip.Props['objects'] {
+    const { center, radius } = boundingSphere;
+
+    const position = Vec3.clone(center);
+    Vec3.add(position, position, Vec3.create(
+        radius * values.position.x / 100,
+        radius * values.position.y / 100,
+        radius * values.position.z / 100
+    ));
+
+    const scale = Vec3.create(values.scale.x, values.scale.y, values.scale.z);
+    Vec3.scale(scale, scale, 2 * radius / 100);
+
+    return [{
+        type: values.type,
+        invert: values.invert,
+        position,
+        scale,
+        rotation: values.rotation
+    }];
+}
+
+export function createClipMapping(node: EntityNode) {
+    return ParamMapping({
+        params: SimpleClipParams,
+        target: (ctx: PluginContext) => {
+            return node.clipValue;
+        }
+    })({
+        values(props, ctx) {
+            if (!props || props.objects.length === 0) {
+                return {
+                    type: 'none',
+                    invert: false,
+                    position: { x: 0, y: 0, z: 0 },
+                    rotation: { axis: Vec3.create(1, 0, 0), angle: 0 },
+                    scale: { x: 100, y: 100, z: 100 },
+                };
+            }
+
+            const { center, radius } = node.plugin.canvas3d!.boundingSphere;
+            const { invert, position, scale, rotation, type } = props.objects[0];
+
+            const p = Vec3.clone(position);
+            Vec3.sub(p, p, center);
+            Vec3.scale(p, p, 100 / radius);
+            Vec3.round(p, p);
+
+            const s = Vec3.clone(scale);
+            Vec3.scale(s, s, 100 / radius / 2);
+            Vec3.round(s, s);
+
+            return {
+                type,
+                invert,
+                position: { x: p[0], y: p[1], z: p[2] },
+                rotation,
+                scale: { x: s[0], y: s[1], z: s[2] },
+            };
+        },
+        update: (s, props) => {
+            if (!props) return;
+
+            const clipObjects = getClipObjects(s, node.plugin.canvas3d!.boundingSphere);
+            props.objects = clipObjects;
+        },
+        apply: async (props, ctx) => {
+            if (props) node.updateClip(props);
+        }
+    });
+}
+
+export const MesoscaleGroupParams = {
+    root: PD.Value<boolean>(false, { isHidden: true }),
+    index: PD.Value<number>(-1, { isHidden: true }),
+    tag: PD.Value<string>('', { isHidden: true }),
+    label: PD.Value<string>('', { isHidden: true }),
+    description: PD.Value<string>('', { isHidden: true }),
+    hidden: PD.Boolean(false),
+    color: PD.Group(RootParams),
+    lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
+    alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
+    emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }),
+    lod: PD.Group(LodParams),
+    clip: PD.Group(SimpleClipParams),
+};
+export type MesoscaleGroupProps = PD.Values<typeof MesoscaleGroupParams>;
+
+export class MesoscaleGroupObject extends PSO.Create({ name: 'Mesoscale Group', typeClass: 'Object' }) { }
+
+export const MesoscaleGroup = PluginStateTransform.BuiltIn({
+    name: 'mesoscale-group',
+    display: { name: 'Mesoscale Group' },
+    from: [PSO.Root, MesoscaleGroupObject],
+    to: MesoscaleGroupObject,
+    params: MesoscaleGroupParams,
+})({
+    apply({ a, params }, plugin: PluginContext) {
+        return Task.create('Apply Mesoscale Group', async () => {
+            return new MesoscaleGroupObject({}, { label: params.label, description: params.description });
+        });
+    },
+});
+
+export function getMesoscaleGroupParams(graphicsMode: GraphicsMode): MesoscaleGroupProps {
+    const groupParams = PD.getDefaultValues(MesoscaleGroupParams);
+    if (graphicsMode === 'custom') return groupParams;
+
+    return {
+        ...groupParams,
+        lod: {
+            ...groupParams.lod,
+            ...getGraphicsModeProps(graphicsMode),
+        }
+    };
+}
+
+//
+
+export type LodLevels = typeof SpacefillRepresentationProvider.defaultValues['lodLevels']
+
+export function getLodLevels(graphicsMode: Exclude<GraphicsMode, 'custom'>): LodLevels {
+    switch (graphicsMode) {
+        case 'performance':
+            return [
+                { minDistance: 1, maxDistance: 300, overlap: 0, stride: 1, scaleBias: 1 },
+                { minDistance: 300, maxDistance: 2000, overlap: 0, stride: 40, scaleBias: 3 },
+                { minDistance: 2000, maxDistance: 6000, overlap: 0, stride: 150, scaleBias: 3 },
+                { minDistance: 6000, maxDistance: 10000000, overlap: 0, stride: 300, scaleBias: 2.5 },
+            ];
+        case 'balanced':
+            return [
+                { minDistance: 1, maxDistance: 500, overlap: 0, stride: 1, scaleBias: 1 },
+                { minDistance: 500, maxDistance: 2000, overlap: 0, stride: 15, scaleBias: 3 },
+                { minDistance: 2000, maxDistance: 6000, overlap: 0, stride: 70, scaleBias: 2.7 },
+                { minDistance: 6000, maxDistance: 10000000, overlap: 0, stride: 200, scaleBias: 2.5 },
+            ];
+        case 'quality':
+            return [
+                { minDistance: 1, maxDistance: 1000, overlap: 0, stride: 1, scaleBias: 1 },
+                { minDistance: 1000, maxDistance: 4000, overlap: 0, stride: 10, scaleBias: 3 },
+                { minDistance: 4000, maxDistance: 10000, overlap: 0, stride: 50, scaleBias: 2.7 },
+                { minDistance: 10000, maxDistance: 10000000, overlap: 0, stride: 200, scaleBias: 2.3 },
+            ];
+        case 'ultra':
+            return [
+                { minDistance: 1, maxDistance: 2000, overlap: 0, stride: 1, scaleBias: 1 },
+                { minDistance: 2000, maxDistance: 8000, overlap: 0, stride: 10, scaleBias: 3 },
+                { minDistance: 8000, maxDistance: 20000, overlap: 0, stride: 50, scaleBias: 2.5 },
+                { minDistance: 20000, maxDistance: 10000000, overlap: 0, stride: 200, scaleBias: 2 },
+            ];
+        default:
+            assertUnreachable(graphicsMode);
+    }
+}
+
+export type GraphicsMode = 'ultra' | 'quality' | 'balanced' | 'performance' | 'custom';
+
+export function getGraphicsModeProps(graphicsMode: Exclude<GraphicsMode, 'custom'>) {
+    return {
+        lodLevels: getLodLevels(graphicsMode),
+        approximate: graphicsMode !== 'quality' && graphicsMode !== 'ultra',
+        alphaThickness: graphicsMode === 'performance' ? 15 : 12,
+    };
+}
+
+export function setGraphicsCanvas3DProps(ctx: PluginContext, graphics: GraphicsMode) {
+    const pixelScale = graphics === 'balanced' ? 0.75
+        : graphics === 'performance' ? 0.5 : 1;
+
+    ctx.canvas3dContext?.setProps({ pixelScale });
+
+    ctx.canvas3d?.setProps({
+        postprocessing: {
+            sharpening: pixelScale < 1 ? {
+                name: 'on',
+                params: { sharpness: 0.5, denoise: true }
+            } : { name: 'off', params: {} }
+        }
+    });
+}
+
+//
+
+export const MesoscaleStateParams = {
+    filter: PD.Value<string>('', { isHidden: true }),
+    graphics: PD.Select('quality', PD.arrayToOptions(['ultra', 'quality', 'balanced', 'performance', 'custom'] as GraphicsMode[])),
+    description: PD.Value<string>('', { isHidden: true }),
+    focusInfo: PD.Value<string>('', { isHidden: true }),
+    link: PD.Value<string>('', { isHidden: true }),
+    textSizeDescription: PD.Numeric(14, { min: 1, max: 100, step: 1 }, { isHidden: true }),
+    index: PD.Value<number>(-1, { isHidden: true })
+};
+
+export class MesoscaleStateObject extends PSO.Create<MesoscaleState>({ name: 'Mesoscale State', typeClass: 'Object' }) { }
+
+const MesoscaleStateTransform = PluginStateTransform.BuiltIn({
+    name: 'mesoscale-state',
+    display: { name: 'Mesoscale State' },
+    from: PSO.Root,
+    to: MesoscaleStateObject,
+    params: MesoscaleStateParams,
+})({
+    apply({ a, params }, plugin: PluginContext) {
+        return Task.create('Apply Mesoscale State', async () => {
+            return new MesoscaleStateObject(params);
+        });
+    },
+});
+
+export { MesoscaleState };
+type MesoscaleState = PD.Values<typeof MesoscaleStateParams>;
+const MesoscaleState = {
+    async init(ctx: PluginContext) {
+        const cell = ctx.state.data.selectQ(q => q.ofType(MesoscaleStateObject))[0];
+        if (cell) throw new Error('MesoscaleState already initialized');
+
+        const customState = ctx.customState as MesoscaleExplorerState;
+        const state = await ctx.state.data.build().toRoot().apply(MesoscaleStateTransform, {
+            filter: '',
+            graphics: customState.graphicsMode,
+        }).commit();
+        customState.stateRef = state.ref;
+    },
+    get(ctx: PluginContext): MesoscaleState {
+        const ref = this.ref(ctx);
+        return ctx.state.data.tryGetCellData<MesoscaleStateObject>(ref);
+    },
+    async set(ctx: PluginContext, props: Partial<MesoscaleState>) {
+        const ref = this.ref(ctx);
+        await ctx.state.data.build().to(ref).update(MesoscaleStateTransform, old => Object.assign(old, props)).commit();
+    },
+    ref(ctx: PluginContext): string {
+        const ref = (ctx.customState as MesoscaleExplorerState).stateRef;
+        if (!ref) throw new Error('MesoscaleState not initialized');
+        return ref;
+    },
+    has(ctx: PluginContext): boolean {
+        const ref = (ctx.customState as MesoscaleExplorerState).stateRef || '';
+        return ctx.state.data.cells.has(ref) ? true : false;
+    },
+};
+
+//
+
+export function getRoots(plugin: PluginContext): StateSelection.CellSeq<StateObjectCell<MesoscaleGroupObject>> {
+    const s = plugin.customState as MesoscaleExplorerState;
+    if (!s.stateCache.roots) {
+        s.stateCache.roots = plugin.state.data.select(StateSelection.Generators.rootsOfType(MesoscaleGroupObject));
+    }
+    return s.stateCache.roots;
+}
+
+export function getGroups(plugin: PluginContext, tag?: string): StateSelection.CellSeq<StateObjectCell<MesoscaleGroupObject>> {
+    const s = plugin.customState as MesoscaleExplorerState;
+    const k = `groups-${tag || ''}`;
+    if (!s.stateCache[k]) {
+        const selector = tag !== undefined
+            ? StateSelection.Generators.ofTransformer(MesoscaleGroup).withTag(tag)
+            : StateSelection.Generators.ofTransformer(MesoscaleGroup);
+        s.stateCache[k] = plugin.state.data.select(selector);
+    }
+    return s.stateCache[k];
+}
+
+function _getAllGroups(plugin: PluginContext, tag: string | undefined, list: StateObjectCell[]) {
+    const groups = getGroups(plugin, tag);
+    list.push(...groups);
+    for (const g of groups) {
+        _getAllGroups(plugin, g.params?.values.tag, list);
+    }
+    return list;
+}
+
+export function getAllGroups(plugin: PluginContext, tag?: string) {
+    return _getAllGroups(plugin, tag, []);
+}
+
+export function getAllLeafGroups(plugin: PluginContext, tag: string | undefined) {
+    const allGroups = getAllGroups(plugin, tag);
+    allGroups.sort((a, b) => a.params?.values.index - b.params?.values.index);
+    return allGroups.filter(g => {
+        return getEntities(plugin, g.params?.values.tag).length > 0;
+    });
+}
+
+type EntityCells = StateSelection.CellSeq<StateObjectCell<PSO.Molecule.Structure.Representation3D | PSO.Shape.Representation3D>>
+
+export function getEntities(plugin: PluginContext, tag?: string): EntityCells {
+    const s = plugin.customState as MesoscaleExplorerState;
+    const k = `entities-${tag || ''}`;
+    if (!s.stateCache[k]) {
+        const structureSelector = tag !== undefined
+            ? StateSelection.Generators.ofTransformer(StructureRepresentation3D).withTag(tag)
+            : StateSelection.Generators.ofTransformer(StructureRepresentation3D);
+        const shapeSelector = tag !== undefined
+            ? StateSelection.Generators.ofTransformer(ShapeRepresentation3D).withTag(tag)
+            : StateSelection.Generators.ofTransformer(ShapeRepresentation3D);
+        s.stateCache[k] = [
+            ...plugin.state.data.select(structureSelector).filter(c => c.obj!.data.sourceData.elementCount > 0),
+            ...plugin.state.data.select(shapeSelector),
+        ];
+    }
+    return s.stateCache[k];
+}
+
+function getFilterMatcher(filter: string) {
+    return filter.startsWith('"') && filter.endsWith('"')
+        ? new RegExp(`^${escapeRegExp(filter.substring(1, filter.length - 1))}$`, 'g')
+        : new RegExp(escapeRegExp(filter), 'gi');
+}
+
+export function getFilteredEntities(plugin: PluginContext, tag: string | undefined, filter: string | undefined) {
+    if (!filter) return getEntities(plugin, tag);
+    const matcher = getFilterMatcher(filter);
+    return getEntities(plugin, tag).filter(c => getEntityLabel(plugin, c).match(matcher) !== null);
+}
+
+function _getAllEntities(plugin: PluginContext, tag: string | undefined, list: EntityCells) {
+    list.push(...getEntities(plugin, tag));
+    for (const g of getGroups(plugin, tag)) {
+        _getAllEntities(plugin, g.params?.values.tag, list);
+    }
+    return list;
+}
+
+export function getAllEntities(plugin: PluginContext, tag?: string) {
+    return _getAllEntities(plugin, tag, []);
+}
+
+export function getAllFilteredEntities(plugin: PluginContext, tag: string | undefined, filter: string | undefined) {
+    if (!filter) return getAllEntities(plugin, tag);
+    const matcher = getFilterMatcher(filter);
+    return getAllEntities(plugin, tag).filter(c => getEntityLabel(plugin, c).match(matcher) !== null);
+}
+
+export function getEveryEntity(plugin: PluginContext, filter?: string, tag?: string) {
+    if (filter) {
+        const matcher = getFilterMatcher(filter);
+        return getAllEntities(plugin, tag).filter(c => getEntityLabel(plugin, c).match(matcher) !== null);
+    } else {
+        return getAllEntities(plugin, tag);
+    }
+}
+
+export function getEntityLabel(plugin: PluginContext, cell: StateObjectCell) {
+    return StateObjectRef.resolve(plugin.state.data, cell.transform.parent)?.obj?.label || 'Entity';
+}
+
+export function getCellDescription(cell: StateObjectCell) {
+    // markdown style for description
+    return '**' + cell?.obj?.label + '**\n\n' + cell?.obj?.description;
+}
+
+export function getEntityDescription(plugin: PluginContext, cell: StateObjectCell) {
+    const s = StateObjectRef.resolve(plugin.state.data, cell.transform.parent);
+    const d = getCellDescription(s!);
+    return d;
+}
+
+
+export async function updateColors(plugin: PluginContext, values: PD.Values, options?: PD.Values, tag?: string, filter?: string) {
+    const update = plugin.state.data.build();
+    const { type, illustrative, value, shift, lightness, alpha, emissive } = values;
+    const doLighting = (options !== undefined);
+    const { ignoreLight, materialStyle: material, celShaded } = options ? options : { ignoreLight: true, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 }, celShaded: false };
+    if (type === 'group-generate' || type === 'group-uniform') {
+        const groups = getAllLeafGroups(plugin, tag);
+        const baseColors = getDistinctBaseColors(groups.length, shift);
+
+        for (let i = 0; i < groups.length; ++i) {
+            const g = groups[i];
+            const entities = getFilteredEntities(plugin, g.params?.values.tag, filter);
+            let groupColors: Color[] = [];
+
+            if (type === 'group-generate') {
+                const c = g.params?.values.color;
+                groupColors = getDistinctGroupColors(entities.length, baseColors[i], c.variability, c.shift);
+            }
+
+            for (let j = 0; j < entities.length; ++j) {
+                const c = type === 'group-generate' ? groupColors[j] : baseColors[i];
+                update.to(entities[j]).update(old => {
+                    if (old.type) {
+                        if (illustrative) {
+                            old.colorTheme = { name: 'illustrative', params: { style: { name: 'uniform', params: { value: c, lightness: lightness } } } };
+                        } else {
+                            old.colorTheme = { name: 'uniform', params: { value: c, lightness: lightness } };
+                        }
+                        old.type.params.alpha = alpha;
+                        old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;
+                        old.type.params.emissive = emissive;
+                        if (doLighting) {
+                            old.type.params.ignoreLight = ignoreLight;
+                            old.type.params.material = material;
+                            old.type.params.celShaded = celShaded;
+                        }
+                    } else if (old.coloring) {
+                        old.coloring.params.color = c;
+                        old.coloring.params.lightness = lightness;
+                        old.alpha = alpha;
+                        old.xrayShaded = alpha < 1 ? true : false;
+                        old.emissive = emissive;
+                    }
+                });
+            }
+
+            update.to(g.transform.ref).update(old => {
+                old.color.type = type === 'group-generate' ? 'generate' : 'uniform';
+                old.color.illustrative = illustrative;
+                old.color.value = baseColors[i];
+                old.color.lightness = lightness;
+                old.color.alpha = alpha;
+                old.color.emissive = emissive;
+            });
+        }
+    } else if (type === 'generate' || type === 'uniform') {
+        const entities = getAllFilteredEntities(plugin, tag, filter);
+        let groupColors: Color[] = [];
+
+        if (type === 'generate') {
+            groupColors = getDistinctBaseColors(entities.length, shift);
+        }
+
+        for (let j = 0; j < entities.length; ++j) {
+            const c = type === 'generate' ? groupColors[j] : value;
+            update.to(entities[j]).update(old => {
+                if (old.type) {
+                    if (illustrative) {
+                        old.colorTheme = { name: 'illustrative', params: { style: { name: 'uniform', params: { value: c, lightness: lightness } } } };
+                    } else {
+                        old.colorTheme = { name: 'uniform', params: { value: c, lightness: lightness } };
+                    }
+                    old.type.params.alpha = alpha;
+                    old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;
+                    old.type.params.emissive = emissive;
+                    if (doLighting) {
+                        old.type.params.ignoreLight = ignoreLight;
+                        old.type.params.material = material;
+                        old.type.params.celShaded = celShaded;
+                    }
+                } else if (old.coloring) {
+                    old.coloring.params.color = c;
+                    old.coloring.params.lightness = lightness;
+                    old.alpha = alpha;
+                    old.xrayShaded = alpha < 1 ? true : false;
+                    old.emissive = emissive;
+                }
+            });
+        }
+
+        const others = getAllLeafGroups(plugin, tag);
+        for (const o of others) {
+            update.to(o).update(old => {
+                old.color.type = type === 'generate' ? 'custom' : 'uniform';
+                old.color.illustrative = illustrative;
+                old.color.value = value;
+                old.color.lightness = lightness;
+                old.color.alpha = alpha;
+                old.color.emissive = emissive;
+            });
+        }
+    }
+
+    await update.commit();
+};
+
+export function expandAllGroups(plugin: PluginContext) {
+    for (const g of getAllGroups(plugin)) {
+        if (g.state.isCollapsed) {
+            plugin.state.data.updateCellState(g.transform.ref, { isCollapsed: false });
+        }
+    }
+};
+
+export async function updateReprParams(plugin: PluginContext, options: PD.Values) {
+    const update = plugin.state.data.build();
+    const { ignoreLight, materialStyle: material, celShaded } = options;
+    const entities = getAllEntities(plugin);
+    for (let j = 0; j < entities.length; ++j) {
+        update.to(entities[j]).update(old => {
+            old.type.params.ignoreLight = ignoreLight;
+            old.type.params.material = material;
+            old.type.params.celShaded = celShaded;
+        });
+    }
+    await update.commit();
+}

src/apps/mesoscale-explorer/data/util.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { OrderedSet, SortedArray } from '../../../mol-data/int';
+import { Box3D, GridLookup3D, PositionData, Sphere3D } from '../../../mol-math/geometry';
+import { Vec3 } from '../../../mol-math/linear-algebra';
+import { ElementIndex, Unit } from '../../../mol-model/structure';
+
+export function mergeUnits(units: readonly Unit[], id: number): Unit {
+    const u = units[0];
+
+    let start = -1 as ElementIndex, end = -1 as ElementIndex;
+    let elements = SortedArray.Empty as SortedArray<ElementIndex>;
+
+    for (let i = 0, il = units.length; i < il; ++i) {
+        const e = units[i].elements;
+        if (SortedArray.isRange(e)) {
+            if (end !== -1 && e[0] === end + 1) {
+                // extend range
+                end = e[e.length - 1];
+            } else {
+                if (end !== -1) {
+                    // pending range
+                    elements = SortedArray.union(elements, SortedArray.ofRange(start, end));
+                }
+                // new range
+                start = e[0];
+                end = e[e.length - 1];
+            }
+        } else {
+            if (end !== -1) {
+                // pending range
+                elements = SortedArray.union(elements, SortedArray.ofRange(start, end));
+                start = -1 as ElementIndex, end = -1 as ElementIndex;
+            }
+            elements = SortedArray.union(elements, e);
+        }
+    }
+
+    if (end !== -1) {
+        // pending range
+        elements = SortedArray.union(elements, SortedArray.ofRange(start, end));
+    }
+
+    return Unit.create(id, id, 0, u.traits | Unit.Trait.MultiChain, u.kind, u.model, u.conformation.operator, elements);
+}
+
+export function partitionUnits(units: readonly Unit[], cellSize: number) {
+    const unitCount = units.length;
+    const mergedUnits: Unit[] = [];
+
+    const box = Box3D.setEmpty(Box3D());
+    const x = new Float32Array(unitCount);
+    const y = new Float32Array(unitCount);
+    const z = new Float32Array(unitCount);
+    const indices = OrderedSet.ofBounds(0, unitCount);
+
+    for (let i = 0, il = unitCount; i < il; ++i) {
+        const v = units[i].boundary.sphere.center;
+        x[i] = v[0];
+        y[i] = v[1];
+        z[i] = v[2];
+        Box3D.add(box, v);
+    }
+    Box3D.expand(box, box, Vec3.create(1, 1, 1));
+
+    const positionData: PositionData = { x, y, z, indices };
+    const boundary = { box, sphere: Sphere3D.fromBox3D(Sphere3D(), box) };
+    const lookup = GridLookup3D(positionData, boundary, Vec3.create(cellSize, cellSize, cellSize));
+
+    const { array, offset, count } = lookup.buckets;
+
+    for (let i = 0, il = offset.length; i < il; ++i) {
+        const start = offset[i];
+        const size = count[i];
+        const cellUnits: Unit[] = [];
+        for (let j = start, jl = start + size; j < jl; ++j) {
+            cellUnits.push(units[array[j]]);
+        }
+        mergedUnits.push(mergeUnits(cellUnits, i));
+    }
+
+    return mergedUnits;
+}

src/apps/mesoscale-explorer/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <link rel="icon" href="./favicon.ico" type="image/x-icon">
+        <link rel="stylesheet" href="./extras/driver.css"/>
+        <title>Mol* Mesoscale Explorer</title>
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            html, body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            hr {
+                margin: 10px;
+            }
+            h1, h2, h3, h4, h5 {
+                margin-top: 5px;
+                margin-bottom: 3px;
+            }
+            button {
+                padding: 2px;
+            }
+            #app {
+                position: absolute;
+                left: 100px;
+                top: 100px;
+                width: 800px;
+                height: 600px;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./extras/driver.js.iife.js"></script>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            const driver = window.driver ? window.driver.js.driver() : undefined;
+
+            function getParam(name, regex) {
+                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
+                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
+            }
+
+            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
+            if (debugMode) molstar.setDebugMode(debugMode);
+
+            var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
+            if (timingMode) molstar.setTimingMode(timingMode);
+
+            var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
+            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
+            var allowMajorPerformanceCaveat = getParam('allow-major-performance-caveat', '[^&]+').trim() === '1';
+            var powerPreference = getParam('power-preference', '[^&]+').trim().toLowerCase();
+            var graphicsMode = getParam('graphics-mode', '[^&]+').trim().toLowerCase();
+
+            molstar.MesoscaleExplorer.create('app', {
+                layoutShowControls: !hideControls,
+                viewportShowExpand: false,
+                preferWebgl1: preferWebgl1,
+                allowMajorPerformanceCaveat: allowMajorPerformanceCaveat,
+                powerPreference: powerPreference || 'high-performance',
+                graphicsMode: graphicsMode || 'quality',
+                driver: driver
+            }).then(me => {
+                var example = getParam('example', '[^&]+').trim();
+                if (example) {
+                    me.loadExample(example);
+                    return;
+                }
+
+                var url = getParam('url', '[^&]+').trim();
+                var type = getParam('type', '[^&]+').trim();
+                if (url && type) {
+                    me.loadUrl(url, type);
+                    return;
+                }
+
+                var pdb = getParam('pdb', '[^&]+').trim();
+                if (pdb) {
+                    me.loadPdb(pdb);
+                    return;
+                }
+
+                var pdbdev = getParam('pdbdev', '[^&]+').trim();
+                if (pdbdev) {
+                    me.loadPdbDev(pdbdev);
+                    return;
+                }
+
+                window.addEventListener('unload', () => {
+                    // to aid GC
+                    me.dispose();
+                });
+            });
+        </script>
+        <!-- __MOLSTAR_ANALYTICS__ -->
+    </body>
+</html>

src/apps/mesoscale-explorer/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './favicon.ico';
+import './index.html';
+require('./style.scss');
+export * from './app';

src/apps/mesoscale-explorer/style.scss

@@ -0,0 +1,66 @@
+$default-background:         #2D3E50;
+$font-color:                 #EDF1F2;
+$hover-font-color:           #3B9AD9;
+$entity-current-font-color:  #FFFFFF;
+$msp-btn-remove-background:      #BF3A31;
+$msp-btn-remove-hover-font-color:#ffffff;
+$msp-btn-commit-on-font-color:   #ffffff;
+$entity-badge-font-color:    #ccd4e0;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: rgba(0,0,0,0.75);
+
+@function color-lower-contrast($color, $amount) {
+    @return darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return lighten($color, $amount);
+}
+
+@import 'mol-plugin-ui/skin/base/base';
+@import 'mol-plugin-ui/skin/base/variables';
+
+a {
+    color: $font-color;
+    &:hover {
+        color: $hover-font-color;
+    }
+}
+
+
+.msp-snapshot-description-me {
+    background: rgba(red($default-background), green($default-background), blue($default-background), 0.5);
+
+    position: absolute;
+    height: 50vh; // 50% of the viewport height
+    left: 0;
+    top: $control-spacing + $row-height;
+    padding: (0.66 * $control-spacing) $control-spacing;
+
+    resize: both; /* Allows resizing in both directions */
+    overflow: auto; /* Adjust as needed */
+
+    a {
+        text-decoration: underline;
+        cursor: pointer;
+        color: $font-color;
+    }
+
+    ul, ol {
+        padding-left: $control-spacing + 4px;
+    }
+
+    &.hidden {
+        display: none;
+    }
+
+    &.shown {
+        display: block; // or 'flex', 'grid', etc. depending on your layout
+    }
+}

src/apps/mesoscale-explorer/ui/panels.tsx

@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2022-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Mp4EncoderUI } from '../../../extensions/mp4-export/ui';
+import { CollapsableControls, CollapsableState, PluginUIComponent } from '../../../mol-plugin-ui/base';
+import { SectionHeader } from '../../../mol-plugin-ui/controls/common';
+import { ParameterControls } from '../../../mol-plugin-ui/controls/parameters';
+import { PluginCommands } from '../../../mol-plugin/commands';
+import { StructureMeasurementsControls } from '../../../mol-plugin-ui/structure/measurements';
+import { MesoscaleExplorerState } from '../app';
+import { MesoscaleState } from '../data/state';
+import { EntityControls, FocusInfo, ModelInfo, SelectionInfo } from './entities';
+import { LoaderControls, ExampleControls, SessionControls, SnapshotControls, DatabaseControls, MesoQuickStylesControls, ExplorerInfo } from './states';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { TuneSvg } from '../../../mol-plugin-ui/controls/icons';
+import { RendererParams } from '../../../mol-gl/renderer';
+import { TrackballControlsParams } from '../../../mol-canvas3d/controls/trackball';
+
+const Spacer = () => <div style={{ height: '2em' }} />;
+
+const ViewportParams = {
+    renderer: PD.Group(RendererParams),
+    trackball: PD.Group(TrackballControlsParams),
+};
+
+class ViewportSettingsUI extends CollapsableControls<{}, {}> {
+    protected defaultState(): CollapsableState {
+        return {
+            header: 'Viewport Settings',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: TuneSvg }
+        };
+    }
+
+    protected renderControls(): JSX.Element | null {
+        return <>
+            {this.plugin.canvas3d && this.plugin.canvas3dContext && <>
+                <ParameterControls params={ViewportParams} values={this.plugin.canvas3d.props} onChange={this.setSettings} />
+            </>}
+        </>;
+    }
+
+    private setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {
+        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { [p.name]: p.value } });
+    };
+
+    componentDidMount() {
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+    }
+}
+
+export class LeftPanel extends PluginUIComponent {
+    render() {
+        const customState = this.plugin.customState as MesoscaleExplorerState;
+
+        return <div className='msp-scrollable-container'>
+            {customState.driver && <>
+                <ExplorerInfo />
+                <Spacer />
+            </>}
+            <SectionHeader title='Database' />
+            <DatabaseControls />
+            <Spacer />
+
+            <SectionHeader title='Open' />
+            <LoaderControls />
+            <Spacer />
+
+            {customState.examples?.length && <>
+                <SectionHeader title='Example' />
+                <ExampleControls />
+                <Spacer />
+            </>}
+
+            <SectionHeader title='Session' />
+            <SessionControls />
+            <Spacer />
+
+            <SectionHeader title='Snapshots' />
+            <SnapshotControls />
+            <Spacer />
+
+            <Mp4EncoderUI />
+            <ViewportSettingsUI />
+        </div>;
+    }
+}
+
+export class RightPanel extends PluginUIComponent<{}, { isDisabled: boolean }> {
+    state = {
+        isDisabled: false,
+    };
+
+    get hasModelInfo() {
+        return (
+            MesoscaleState.has(this.plugin) &&
+            !!(MesoscaleState.get(this.plugin).description ||
+                MesoscaleState.get(this.plugin).link)
+        );
+    }
+
+    get hasFocusInfo() {
+        return (
+            MesoscaleState.has(this.plugin) &&
+            !!(MesoscaleState.get(this.plugin).focusInfo !== '')
+        );
+    }
+
+    componentDidMount() {
+        this.subscribe(this.plugin.state.data.behaviors.isUpdating, v => {
+            this.setState({ isDisabled: v });
+        });
+
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
+            if (!this.state.isDisabled && MesoscaleState.has(this.plugin) && MesoscaleState.ref(this.plugin) === e.ref) {
+                this.forceUpdate();
+            }
+        });
+
+        this.subscribe(this.plugin.managers.structure.selection.events.changed, e => {
+            if (!this.state.isDisabled) {
+                this.forceUpdate();
+            }
+        });
+    }
+
+    render() {
+        return <div className='msp-scrollable-container'>
+            {this.hasModelInfo && <>
+                <SectionHeader title='Model' />
+                <ModelInfo />
+                <Spacer />
+            </>}
+
+            <>
+                <SectionHeader title='Selection' />
+                <SelectionInfo />
+                <Spacer />
+                <StructureMeasurementsControls initiallyCollapsed={true}/>
+            </>
+            <MesoQuickStylesControls />
+            <Spacer />
+            <SectionHeader title='Entities' />
+            <EntityControls />
+            <Spacer />
+            {this.hasFocusInfo && <>
+                <SectionHeader title='Focus Info' />
+                <FocusInfo />
+                <Spacer />
+            </>}
+        </div>;
+    }
+}

src/apps/mesoscale-explorer/ui/states.tsx

@@ -0,0 +1,860 @@
+/**
+ * Copyright (c) 2022-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import Markdown from 'react-markdown';
+import { MmcifFormat } from '../../../mol-model-formats/structure/mmcif';
+import { MmcifProvider } from '../../../mol-plugin-state/formats/trajectory';
+import { StructureComponentManager } from '../../../mol-plugin-state/manager/structure/component';
+import { PluginStateObject } from '../../../mol-plugin-state/objects';
+import { Button, ExpandGroup, IconButton } from '../../../mol-plugin-ui/controls/common';
+import { GetAppSvg, HelpOutlineSvg, MagicWandSvg, TourSvg, Icon, OpenInBrowserSvg } from '../../../mol-plugin-ui/controls/icons';
+import { CollapsableControls, PluginUIComponent } from '../../../mol-plugin-ui/base';
+import { ApplyActionControl } from '../../../mol-plugin-ui/state/apply-action';
+import { LocalStateSnapshotList, LocalStateSnapshotParams, LocalStateSnapshots } from '../../../mol-plugin-ui/state/snapshots';
+import { PluginCommands } from '../../../mol-plugin/commands';
+import { PluginContext } from '../../../mol-plugin/context';
+import { StateAction, StateObjectRef, StateTransform } from '../../../mol-state';
+import { Task } from '../../../mol-task';
+import { Color } from '../../../mol-util/color/color';
+import { getFileNameInfo } from '../../../mol-util/file-info';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { ExampleEntry, MesoscaleExplorerState } from '../app';
+import { createCellpackHierarchy } from '../data/cellpack/preset';
+import { createGenericHierarchy } from '../data/generic/preset';
+import { createMmcifHierarchy } from '../data/mmcif/preset';
+import { createPetworldHierarchy } from '../data/petworld/preset';
+import { MesoscaleState, MesoscaleStateObject, setGraphicsCanvas3DProps, updateColors } from '../data/state';
+
+function adjustPluginProps(ctx: PluginContext) {
+    ctx.managers.interactivity.setProps({ granularity: 'chain' });
+    ctx.canvas3d?.setProps({
+        multiSample: { mode: 'off' },
+        cameraClipping: { far: false, minNear: 50 },
+        sceneRadiusFactor: 2,
+        renderer: {
+            colorMarker: true,
+            highlightColor: Color(0xffffff),
+            highlightStrength: 0,
+            selectColor: Color(0xffffff),
+            selectStrength: 0,
+            dimColor: Color(0xffffff),
+            dimStrength: 1,
+            markerPriority: 2,
+            interiorColorFlag: false,
+            interiorDarkening: 0.15,
+            exposure: 1.1,
+            xrayEdgeFalloff: 3,
+        },
+        marking: {
+            enabled: true,
+            highlightEdgeColor: Color(0x999999),
+            selectEdgeColor: Color(0xffff00),
+            highlightEdgeStrength: 1,
+            selectEdgeStrength: 1,
+            ghostEdgeStrength: 1,
+            innerEdgeFactor: 2.5,
+            edgeScale: 2,
+        },
+        postprocessing: {
+            occlusion: {
+                name: 'on',
+                params: {
+                    samples: 32,
+                    multiScale: {
+                        name: 'on',
+                        params: {
+                            levels: [
+                                { radius: 2, bias: 1.0 },
+                                { radius: 5, bias: 1.0 },
+                                { radius: 8, bias: 1.0 },
+                                { radius: 11, bias: 1.0 },
+                            ],
+                            nearThreshold: 10,
+                            farThreshold: 1500,
+                        }
+                    },
+                    radius: 5,
+                    bias: 1,
+                    blurKernelSize: 11,
+                    blurDepthBias: 0.5,
+                    resolutionScale: 1,
+                    color: Color(0x000000),
+                }
+            },
+            shadow: {
+                name: 'on',
+                params: {
+                    bias: 0.6,
+                    maxDistance: 80,
+                    steps: 3,
+                    tolerance: 1.0,
+                }
+            },
+            outline: {
+                name: 'on',
+                params: {
+                    scale: 1,
+                    threshold: 0.15,
+                    color: Color(0x000000),
+                    includeTransparent: false,
+                }
+            }
+        }
+    });
+
+    const { graphics } = MesoscaleState.get(ctx);
+    setGraphicsCanvas3DProps(ctx, graphics);
+}
+
+async function createHierarchy(ctx: PluginContext, ref: string) {
+    const parsed = await MmcifProvider.parse(ctx, ref);
+
+    const tr = StateObjectRef.resolveAndCheck(ctx.state.data, parsed.trajectory)?.obj?.data;
+    if (!tr) throw new Error('no trajectory');
+
+    if (!MmcifFormat.is(tr.representative.sourceData)) {
+        throw new Error('not mmcif');
+    }
+
+    const { frame, db } = tr.representative.sourceData.data;
+
+    let hasCellpackAssemblyMethodDetails = false;
+    const { method_details } = db.pdbx_struct_assembly;
+    for (let i = 0, il = method_details.rowCount; i < il; ++i) {
+        if (method_details.value(i).toUpperCase() === 'CELLPACK') {
+            hasCellpackAssemblyMethodDetails = true;
+            break;
+        }
+    }
+
+    if (frame.categories.pdbx_model) {
+        await createPetworldHierarchy(ctx, parsed.trajectory);
+    } else if (
+        frame.header.toUpperCase().includes('CELLPACK') ||
+        hasCellpackAssemblyMethodDetails
+    ) {
+        await createCellpackHierarchy(ctx, parsed.trajectory);
+    } else {
+        await createMmcifHierarchy(ctx, parsed.trajectory);
+    }
+}
+
+async function reset(ctx: PluginContext) {
+    const customState = ctx.customState as MesoscaleExplorerState;
+    delete customState.stateRef;
+    customState.stateCache = {};
+    ctx.managers.asset.clear();
+
+    await PluginCommands.State.Snapshots.Clear(ctx);
+    await PluginCommands.State.RemoveObject(ctx, { state: ctx.state.data, ref: StateTransform.RootRef });
+
+    await MesoscaleState.init(ctx);
+    adjustPluginProps(ctx);
+}
+
+export async function loadExampleEntry(ctx: PluginContext, entry: ExampleEntry) {
+    const { url, type } = entry;
+    await loadUrl(ctx, url, type);
+    MesoscaleState.set(ctx, {
+        description: entry.description || entry.label,
+        link: entry.link,
+    });
+}
+
+export async function loadUrl(ctx: PluginContext, url: string, type: 'molx' | 'molj' | 'cif' | 'bcif') {
+    if (type === 'molx' || type === 'molj') {
+        await PluginCommands.State.Snapshots.OpenUrl(ctx, { url, type });
+    } else {
+        await reset(ctx);
+        const isBinary = type === 'bcif';
+        const data = await ctx.builders.data.download({ url, isBinary });
+        await createHierarchy(ctx, data.ref);
+    }
+}
+
+export async function loadPdb(ctx: PluginContext, id: string) {
+    await reset(ctx);
+    const url = `https://models.rcsb.org/${id.toUpperCase()}.bcif`;
+    const data = await ctx.builders.data.download({ url, isBinary: true });
+    await createHierarchy(ctx, data.ref);
+}
+
+export async function loadPdbDev(ctx: PluginContext, id: string) {
+    await reset(ctx);
+    const nId = id.toUpperCase().startsWith('PDBDEV_') ? id : `PDBDEV_${id.padStart(8, '0')}`;
+    const url = `https://pdb-dev.wwpdb.org/bcif/${nId.toUpperCase()}.bcif`;
+    const data = await ctx.builders.data.download({ url, isBinary: true });
+    await createHierarchy(ctx, data.ref);
+}
+
+//
+
+export const LoadDatabase = StateAction.build({
+    display: { name: 'Database', description: 'Load from Database' },
+    params: (a, ctx: PluginContext) => {
+        return {
+            source: PD.Select('pdb', PD.objectToOptions({ pdb: 'PDB', pdbDev: 'PDB-Dev' })),
+            entry: PD.Text(''),
+        };
+    },
+    from: PluginStateObject.Root
+})(({ params }, ctx: PluginContext) => Task.create('Loading from database...', async taskCtx => {
+    if (params.source === 'pdb') {
+        await loadPdb(ctx, params.entry);
+    } else if (params.source === 'pdbDev') {
+        await loadPdbDev(ctx, params.entry);
+    }
+}));
+
+export const LoadExample = StateAction.build({
+    display: { name: 'Load', description: 'Load an example' },
+    params: (a, ctx: PluginContext) => {
+        const entries = (ctx.customState as MesoscaleExplorerState).examples || [];
+        return {
+            entry: PD.Select(0, entries.map((s, i) => [i, s.label])),
+        };
+    },
+    from: PluginStateObject.Root
+})(({ params }, ctx: PluginContext) => Task.create('Loading example...', async taskCtx => {
+    const entries = (ctx.customState as MesoscaleExplorerState).examples || [];
+    await loadExampleEntry(ctx, entries[params.entry]);
+}));
+
+export const LoadModel = StateAction.build({
+    display: { name: 'Load', description: 'Load a model' },
+    params: {
+        files: PD.FileList({ accept: '.cif,.bcif,.cif.gz,.bcif.gz,.zip', multiple: true, description: 'mmCIF or Cellpack- or Petworld-style cif file.', label: 'File(s)' }),
+    },
+    from: PluginStateObject.Root
+})(({ params }, ctx: PluginContext) => Task.create('Loading model...', async taskCtx => {
+    if (params.files === null || params.files.length === 0) {
+        ctx.log.error('No file(s) selected');
+        return;
+    }
+
+    await reset(ctx);
+
+    const firstFile = params.files[0];
+    const firstInfo = getFileNameInfo(firstFile.file!.name);
+
+    if (firstInfo.name.endsWith('zip')) {
+        try {
+            await createGenericHierarchy(ctx, firstFile);
+        } catch (e) {
+            console.error(e);
+            ctx.log.error(`Error opening file '${firstFile.name}'`);
+        }
+    } else {
+        for (const file of params.files) {
+            try {
+                const info = getFileNameInfo(file.file!.name);
+                if (!['cif', 'bcif'].includes(info.ext)) continue;
+
+                const isBinary = ctx.dataFormats.binaryExtensions.has(info.ext);
+                const { data } = await ctx.builders.data.readFile({ file, isBinary });
+                await createHierarchy(ctx, data.ref);
+            } catch (e) {
+                console.error(e);
+                ctx.log.error(`Error opening file '${file.name}'`);
+            }
+        }
+    }
+}));
+
+//
+
+export class DatabaseControls extends PluginUIComponent {
+    componentDidMount() {
+
+    }
+
+    render() {
+        return <div id='database' style={{ margin: '5px' }}>
+            <ApplyActionControl state={this.plugin.state.data} action={LoadDatabase} nodeRef={this.plugin.state.data.tree.root.ref} applyLabel={'Load'} hideHeader />
+        </div>;
+    }
+}
+
+export class LoaderControls extends PluginUIComponent {
+    componentDidMount() {
+
+    }
+
+    render() {
+        return <div id='loader' style={{ margin: '5px' }}>
+            <ApplyActionControl state={this.plugin.state.data} action={LoadModel} nodeRef={this.plugin.state.data.tree.root.ref} applyLabel={'Load'} hideHeader />
+        </div>;
+    }
+}
+
+export class ExampleControls extends PluginUIComponent {
+    componentDidMount() {
+
+    }
+
+    render() {
+        return <div id='example' style={{ margin: '5px' }}>
+            <ApplyActionControl state={this.plugin.state.data} action={LoadExample} nodeRef={this.plugin.state.data.tree.root.ref} applyLabel={'Load'} hideHeader />
+        </div>;
+    }
+}
+
+export async function openState(ctx: PluginContext, file: File) {
+    const customState = ctx.customState as MesoscaleExplorerState;
+    delete customState.stateRef;
+    customState.stateCache = {};
+    ctx.managers.asset.clear();
+
+    await PluginCommands.State.Snapshots.Clear(ctx);
+    await PluginCommands.State.Snapshots.OpenFile(ctx, { file });
+
+    const cell = ctx.state.data.selectQ(q => q.ofType(MesoscaleStateObject))[0];
+    if (!cell) throw new Error('Missing MesoscaleState');
+
+    customState.stateRef = cell.transform.ref;
+    customState.graphicsMode = cell.obj?.data.graphics || customState.graphicsMode;
+}
+
+export class SessionControls extends PluginUIComponent {
+    downloadToFileZip = () => {
+        PluginCommands.State.Snapshots.DownloadToFile(this.plugin, { type: 'zip' });
+    };
+
+    open = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files || !e.target.files[0]) {
+            this.plugin.log.error('No state file selected');
+            return;
+        }
+
+        openState(this.plugin, e.target.files[0]);
+    };
+
+    render() {
+        return <div id='session' style={{ margin: '5px' }}>
+            <div className='msp-flex-row'>
+                <Button icon={GetAppSvg} onClick={this.downloadToFileZip} title='Download the state.'>
+                    Download
+                </Button>
+                <div className='msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file'>
+                    <Icon svg={OpenInBrowserSvg} inline /> Open <input onChange={this.open} type='file' multiple={false} accept='.molx,.molj' />
+                </div>
+            </div>
+        </div>;
+    }
+}
+
+export class SnapshotControls extends PluginUIComponent<{}> {
+    render() {
+        return <div style={{ margin: '5px' }}>
+            <div id='snaplist' style={{ marginBottom: '10px' }}>
+                <LocalStateSnapshotList />
+            </div>
+            <div id='snap' style={{ marginBottom: '10px' }}>
+                <LocalStateSnapshots />
+            </div>
+
+            <div id='snapoption' style={{ marginBottom: '10px' }}>
+                <ExpandGroup header='Snapshot Options' initiallyExpanded={false}>
+                    <LocalStateSnapshotParams />
+                </ExpandGroup>
+            </div>
+        </div>;
+    }
+}
+
+export class ExplorerInfo extends PluginUIComponent<{}, { isDisabled: boolean, showHelp: boolean }> {
+    state = {
+        isDisabled: false,
+        showHelp: false
+    };
+
+    componentDidMount() {
+        this.subscribe(this.plugin.state.data.behaviors.isUpdating, v => {
+            this.setState({ isDisabled: v });
+        });
+
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
+            if (!this.state.isDisabled && MesoscaleState.has(this.plugin) && MesoscaleState.ref(this.plugin) === e.ref) {
+                this.forceUpdate();
+            }
+        });
+    }
+
+    setupDriver = () => {
+        // setup the tour of the interface
+        const driver = (this.plugin.customState as MesoscaleExplorerState).driver;
+        if (!driver) return;
+
+        driver.setSteps([
+            // Left panel
+            { element: '#explorerinfo', popover: { title: 'Explorer Header Info', description: 'This section displays the explorer header with version information, documentation access, and tour navigation. Use the right and left arrow keys to navigate the tour.', side: 'left', align: 'start' } },
+            { element: '#database', popover: { title: 'Import from PDB', description: 'Load structures directly from PDB and PDB-DEV databases.', side: 'bottom', align: 'start' } },
+            { element: '#loader', popover: { title: 'Import from File', description: 'Load local files (.molx, .molj, .zip, .cif, .bcif) using this option.', side: 'bottom', align: 'start' } },
+            { element: '#example', popover: { title: 'Example Models and Tours', description: 'Select from a range of example models and tours provided.', side: 'left', align: 'start' } },
+            { element: '#session', popover: { title: 'Session Management', description: 'Download the current session in .molx format.', side: 'top', align: 'start' } },
+            { element: '#snaplist', popover: { title: 'Snapshot List', description: 'View and manage the list of snapshots. You can reorder them and edit their titles, keys, and descriptions. Snapshot states cannot be edited.', side: 'right', align: 'start' } },
+            { element: '#snap', popover: { title: 'Add Snapshot', description: 'Save the current state (e.g., camera position, color, visibility, etc.) in a snapshot with an optional title, key, and description.', side: 'right', align: 'start' } },
+            { element: '#snapoption', popover: { title: 'Snapshot Options', description: 'These options are saved in the snapshot. Set them before adding a snapshot to see their effect during animation playback.', side: 'right', align: 'start' } },
+            { element: '#exportanimation', popover: { title: 'Export Animation', description: 'Create movies or scenes with rocking, rotating, or snapshots animations.', side: 'right', align: 'start' } },
+            { element: '#viewportsettings', popover: { title: 'Viewport Settings', description: 'Advanced settings for the renderer and trackball.', side: 'right', align: 'start' } },
+            // Viewport
+            { element: '#snapinfo', popover: { title: 'Snapshot Description', description: 'Save the current state (e.g., camera position, color, visibility, etc.) in a snapshot with an optional title, key, and description.', side: 'right', align: 'start' } },
+            { element: '#snapinfoctrl', popover: { title: 'Snapshot Description Control', description: 'Control the visibility and text size of the snapshot description widget.', side: 'right', align: 'start' } },
+            // Right panel
+            { element: '#modelinfo', popover: { title: 'Model Information', description: 'Summary information about the model, if available.', side: 'right', align: 'start' } },
+            { element: '#selestyle', popover: { title: 'Selection Style', description: 'Choose the rendering style for entity selection accessed via Shift/Ctrl mouse. Options include: Color & Outline, Color, Outline.', side: 'right', align: 'start' } },
+            { element: '#seleinfo', popover: { title: 'Selection List', description: 'View the current list of selected entities.', side: 'right', align: 'start' } },
+            { element: '#measurements', popover: { title: 'Measurements', description: 'Use this widget to create labels, measure distances, angles, dihedral orientations, and planes for the selected entities.', side: 'right', align: 'start' } },
+            { element: '#quickstyles', popover: { title: 'Quick Styles', description: 'Change between a selection of style presets.', side: 'right', align: 'start' } },
+            { element: '#graphicsquality', popover: { title: 'Graphics Quality', description: 'Adjust the overall graphics quality. Lower quality improves performance. Options are: Ultra, Quality (Default), Balanced, Performance, Custom. Custom settings use the Culling & LOD values set in the Tree.', side: 'right', align: 'start' } },
+            { element: '#searchtree', popover: { title: 'Search', description: 'Filter the entity tree based on your queries.', side: 'right', align: 'start' } },
+            { element: '#grouptree', popover: { title: 'Group By', description: 'Change the grouping of the hierarchy tree, e.g., group by instance or by compartment.', side: 'right', align: 'start' } },
+            { element: '#tree', popover: { title: 'Tree Hierarchy', description: 'View the hierarchical tree of entity types in the model.', side: 'right', align: 'start' } },
+            { element: '#focusinfo', popover: { title: 'Selection Description', description: 'Detailed information about the current selection, if present in the loaded file.', side: 'right', align: 'start' } },
+            { popover: { title: 'Happy Exploring!', description: 'That’s all! Go ahead and start exploring or creating mesoscale tours.' } }
+        ]);
+        driver.refresh();
+    };
+
+    openHelp = () => {
+        // open a new page with the documentation
+        window.open('https://molstar.org/me/docs', '_blank');
+    };
+
+    toggleHelp = () => {
+        const driver = (this.plugin.customState as MesoscaleExplorerState).driver;
+        if (!driver || !driver.hasNextStep()) {
+            this.setupDriver();
+        }
+        this.setState({ showHelp: !this.state.showHelp }, () => {
+            if (this.state.showHelp && driver) {
+                driver.drive(); // start at 0
+            }
+        });
+    };
+
+    render() {
+        const driver = (this.plugin.customState as MesoscaleExplorerState).driver;
+        if (!driver) return;
+
+        const legend = `## Welcome to Mol* Mesoscale Explorer`;
+        const help = <IconButton svg={HelpOutlineSvg} toggleState={false} small onClick={this.openHelp} title='Open the Documentation' />;
+        const tour = <IconButton svg={TourSvg} toggleState={false} small onClick={this.toggleHelp} title='Start the interactive tour' />;
+        return <>
+            <div id='explorerinfo' style={{ paddingLeft: 4 }} className='msp-help-text'>
+                <Markdown>{legend}</Markdown>
+                {tour}{help}
+            </div>
+        </>;
+    }
+}
+
+
+export class MesoQuickStylesControls extends CollapsableControls {
+    defaultState() {
+        return {
+            isCollapsed: true,
+            header: 'Quick Styles',
+            brand: { accent: 'gray' as const, svg: MagicWandSvg }
+        };
+    }
+
+    renderControls() {
+        return <>
+            <MesoQuickStyles />
+        </>;
+    }
+}
+
+export class MesoQuickStyles extends PluginUIComponent {
+    state = {
+        celShaded: false,
+    };
+    default_color_values = {
+        type: 'group-generate',
+        illustrative: false,
+        value: [1, 1, 1, 1],
+        variability: 20,
+        shift: 0,
+        lightness: 0,
+        alpha: 1,
+        emissive: 0
+    };
+    illustrative_color_values = {
+        type: 'group-generate',
+        illustrative: true,
+        value: [1, 1, 1, 1],
+        variability: 20,
+        shift: 0,
+        lightness: 0,
+        alpha: 1,
+        emissive: 0
+    };
+    async default() {
+        if (!this.plugin.canvas3d) return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: Color(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.6,
+                        maxDistance: 80,
+                        steps: 3,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.15,
+                        color: Color(0x000000),
+                        includeTransparent: false,
+                    }
+                },
+                dof: { name: 'off', params: {} },
+            }
+        });
+
+        const loptions = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false, };
+        await this.plugin.managers.structure.component.setOptions(loptions as StructureComponentManager.Options);
+        await updateColors(this.plugin, this.default_color_values, options);
+    }
+
+    async celshading() {
+        if (!this.plugin.canvas3d) return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.5,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.5,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: Color(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: { name: 'off', params: {} },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: true, };
+        await this.plugin.managers.structure.component.setOptions(loptions as StructureComponentManager.Options);
+        await updateColors(this.plugin, this.default_color_values, options);
+    }
+
+    async stylizedDof() {
+        if (!this.plugin.canvas3d) return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.3,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: Color(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: { name: 'off', params: {} },
+                dof: {
+                    name: 'on',
+                    params: {
+                        blurSize: 9,
+                        blurSpread: 1.0,
+                        inFocus: 0.0,
+                        PPM: 200.0,
+                        center: 'camera-target',
+                        mode: 'sphere',
+                    }
+                }
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false };
+        await this.plugin.managers.structure.component.setOptions(loptions as StructureComponentManager.Options);
+        await updateColors(this.plugin, this.default_color_values, options);
+    }
+
+    async illustrative() {
+        if (!this.plugin.canvas3d) return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.5,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.5,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: Color(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.15,
+                        color: Color(0x000000),
+                        includeTransparent: false,
+                    }
+                },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false, };
+        await this.plugin.managers.structure.component.setOptions(loptions as StructureComponentManager.Options);
+        await updateColors(this.plugin, this.illustrative_color_values, options);
+    }
+
+    async shiny() {
+        if (!this.plugin.canvas3d) return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.5,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.3,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: Color(0x000000),
+                    }
+                },
+                shadow: { name: 'off', params: {} },
+                outline: { name: 'off', params: {} },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false };
+        await this.plugin.managers.structure.component.setOptions(loptions as StructureComponentManager.Options);
+        await updateColors(this.plugin, this.default_color_values, options);
+    }
+
+    async stylized() {
+        if (!this.plugin.canvas3d) return;
+        this.plugin.canvas3d.setProps({
+            renderer: {
+                exposure: 1.1,
+            },
+            postprocessing: {
+                occlusion: {
+                    name: 'on',
+                    params: {
+                        samples: 32,
+                        multiScale: {
+                            name: 'on',
+                            params: {
+                                levels: [
+                                    { radius: 2, bias: 1.0 },
+                                    { radius: 5, bias: 1.0 },
+                                    { radius: 8, bias: 1.0 },
+                                    { radius: 11, bias: 1.0 },
+                                ],
+                                nearThreshold: 10,
+                                farThreshold: 1500,
+                            }
+                        },
+                        radius: 5,
+                        bias: 1.3,
+                        blurKernelSize: 11,
+                        blurDepthBias: 0.5,
+                        resolutionScale: 1,
+                        color: Color(0x000000),
+                    }
+                },
+                shadow: {
+                    name: 'on',
+                    params: {
+                        bias: 0.4,
+                        maxDistance: 256,
+                        steps: 64,
+                        tolerance: 1.0,
+                    }
+                },
+                outline: {
+                    name: 'on',
+                    params: {
+                        scale: 1,
+                        threshold: 0.15,
+                        color: Color(0x000000),
+                        includeTransparent: false,
+                    }
+                },
+                dof: { name: 'off', params: {} },
+            }
+        });
+        // ignore Light
+        const loptions = { ignoreLight: false, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 } };
+        const options = { ...loptions, celShaded: false };
+        await this.plugin.managers.structure.component.setOptions(loptions as StructureComponentManager.Options);
+        await updateColors(this.plugin, this.illustrative_color_values, options);
+    }
+
+    render() {
+        return <>
+            <div className='msp-flex-row'>
+                <Button noOverflow title='Applies default representation preset and sets outline and occlusion effects to default' onClick={() => this.default()} style={{ width: 'auto' }}>
+                    Default
+                </Button>
+                <Button noOverflow title='Applies celShading' onClick={() => this.celshading()} style={{ width: 'auto' }}>
+                    Cel-shaded
+                </Button>
+                <Button noOverflow title='Applies illustrative colors preset' onClick={() => this.illustrative()} style={{ width: 'auto' }}>
+                    Illustrative
+                </Button>
+            </div>
+            <div className='msp-flex-row'>
+                <Button noOverflow title='Apply shiny material to default' onClick={() => this.shiny()} style={{ width: 'auto' }}>
+                    Shiny
+                </Button>
+                <Button noOverflow title='Enable shiny material, outline, and illustrative colors' onClick={() => this.stylized()} style={{ width: 'auto' }}>
+                    Shiny-Illustrative
+                </Button>
+                <Button noOverflow title='Enable DOF and shiny material' onClick={() => this.stylizedDof()} style={{ width: 'auto' }}>
+                    Shiny-DOF
+                </Button>
+            </div>
+        </>;
+    }
+}

src/apps/model-server-query/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-        <title>Mol* ModelServer Query Builder</title>
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="text/javascript" src="./index.js"></script>
-    </body>
-</html>

src/apps/model-server-query/index.tsx

@@ -1,134 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import * as Rx from 'rxjs'
-
-import { QueryDefinition, QueryList } from '../../servers/model/server/api'
-
-import './index.html'
-
-interface State {
-    query: Rx.BehaviorSubject<QueryDefinition>,
-    id: Rx.BehaviorSubject<string>,
-    params: Rx.BehaviorSubject<any>,
-    isBinary: Rx.BehaviorSubject<boolean>,
-    models: Rx.BehaviorSubject<number[]>,
-    url: Rx.Subject<string>
-}
-
-class Root extends React.Component<{ state: State }, {  }> {
-    render() {
-        return <div>
-            <div>
-                Query: <QuerySelect state={this.props.state} />
-            </div>
-            <div>
-                ID: <input type='text' onChange={t => this.props.state.id.next(t.currentTarget.value)} />
-            </div>
-            <div>
-                Params:<br/>
-                <QueryParams state={this.props.state} />
-            </div>
-            <div>
-                Model numbers (empty for all): <ModelNums state={this.props.state} />
-            </div>
-            <div>
-                <input type='checkbox' onChange={t => this.props.state.isBinary.next(!!t.currentTarget.checked)} /> Binary
-            </div>
-            <div>
-                Query string:
-                <QueryUrl state={this.props.state} />
-            </div>
-        </div>
-    }
-}
-
-class QuerySelect extends React.Component<{ state: State }> {
-    render() {
-        return <select onChange={s => this.props.state.query.next(QueryList[+s.currentTarget.value].definition)}>
-            { QueryList.map((q, i) => <option value={i} key={i} selected={i === 1}>{q.definition.niceName}</option>) }
-        </select>
-    }
-}
-
-class QueryParams extends React.Component<{ state: State }, { prms: string }> {
-    state = { prms: '' };
-
-    parseParams(str: string) {
-        this.setState({ prms: str });
-        try {
-            const params = JSON.parse(str);
-            this.props.state.params.next(params);
-        } catch {
-            this.props.state.params.next({});
-        }
-    }
-
-    componentDidMount() {
-        this.props.state.query.subscribe(q => this.setState({ prms: formatParams(q) }))
-    }
-
-    render() {
-        return <textarea style={{height: '300px'}} value={this.state.prms} cols={80} onChange={t => this.parseParams(t.currentTarget.value)} />;
-    }
-}
-
-class QueryUrl extends React.Component<{ state: State }, { queryString: string }> {
-    state = { queryString: '' };
-
-    componentDidMount() {
-        this.props.state.url.subscribe(url => this.setState({ queryString: url }))
-    }
-
-    render() {
-        return <input type='text' value={this.state.queryString} style={{ width: '800px' }} />
-    }
-}
-
-class ModelNums extends React.Component<{ state: State }> {
-    render() {
-        return <input type='text' defaultValue='1' style={{ width: '300px' }} onChange={t =>
-            this.props.state.models.next(t.currentTarget.value.split(',')
-                .map(v => v.trim())
-                .filter(v => !!v)
-                .map(v => +v)
-                )} />
-    }
-}
-
-const state: State = {
-    query: new Rx.BehaviorSubject(QueryList[1].definition),
-    id: new Rx.BehaviorSubject('1cbs'),
-    params: new Rx.BehaviorSubject({ }),
-    isBinary: new Rx.BehaviorSubject<boolean>(false),
-    models: new Rx.BehaviorSubject<number[]>([]),
-    url: new Rx.Subject()
-}
-
-function formatParams(def: QueryDefinition) {
-    const prms = Object.create(null);
-    for (const p of def.params) {
-        prms[p.name] = p.exampleValues ? p.exampleValues[0] : void 0;
-    }
-    return JSON.stringify(prms, void 0, 2);
-}
-
-function formatUrl() {
-    const json = JSON.stringify({
-        name: state.query.value.name,
-        id: state.id.value,
-        modelNums: state.models.value.length ? state.models.value : void 0,
-        binary: state.isBinary.value,
-        params: state.params.value
-    });
-    state.url.next(encodeURIComponent(json));
-}
-
-Rx.merge(state.query, state.id, state.params, state.isBinary, state.models).subscribe(s => formatUrl());
-
-ReactDOM.render(<Root state={state} />, document.getElementById('app'));