MVS extension (#976)

* Moved MVS extension from mol-view-spec repo

* Viewer supports URL params mvs-url, mvs-data, mvs-format

* Tests

* MVS sanity checks

* MVS extension: drag-and-drop support

* mvs-render try1

* Example CLI utility mvs-render

* Example CLI utility mvs-validate

* MVS extension: renaming

* MVS extension: fixed FOV in mvs-render

* Moved stuff to mol-util/array.ts

* Moved stuff to mol-util/object.ts

* MVS extension: renamed `additions` to `components`

* MVS extension: trying plugin.managers.camera.focusSphere

* MVS extension: refactor focus

* MVS extension: fixed label color once again

* MVS extension: camera position adjustment (compensate FOV differences)

* Fixed formula for camera focus in orthographic mode

* Moved Choice to mol-util/param-choice.ts

* Moved stuff to mol-util/json.ts

* Object.hasOwn polyfill

* MVS extension: small refactor

* Fixed bug in hashString

CHANGELOG.md

@@ -18,6 +18,9 @@ Note that since we don't clearly distinguish between a public and private interf
 - Do not activate drag overlay for non-file content
 - Add `structure-element-sphere` visual to `spacefill` representation
 - Fix missing `await` in `HeadlessPluginContext.saveStateSnapshot`
+- MolViewSpec extension (MVS)
+- Add URL parameters `mvs-url`, `mvs-data`, `mvs-format`
+- Add drag&drop for `.mvsj` files
 
 ## [v3.42.0] - 2023-11-05
 

docs/extensions/mvs/MVS-tree-documentation.md

@@ -0,0 +1,566 @@
+(This documentation was auto-generated by the `treeSchemaToMarkdown` function)
+
+
+Tree schema:
+
+  - **`root`**
+
+    [Root of the tree must be of this kind]
+
+    Auxiliary node kind that only appears as the tree root.
+
+    Parent: none
+
+    Params: none
+
+  - **`download`**
+
+    This node instructs to retrieve a data resource.
+
+    Parent: `root`
+
+    Params:
+
+      - **`url: `**`string`
+
+        URL of the data resource.
+
+  - **`parse`**
+
+    This node instructs to parse a data resource.
+
+    Parent: `download`
+
+    Params:
+
+      - **`format: `**`"mmcif" | "bcif" | "pdb"`
+
+        Format of the input data resource.
+
+  - **`structure`**
+
+    This node instructs to create a structure from a parsed data resource. "Structure" refers to an internal representation of molecular coordinates without any visual representation.
+
+    Parent: `parse`
+
+    Params:
+
+      - **`kind: `**`"model" | "assembly" | "symmetry" | "symmetry_mates"`
+
+        Type of structure to be created (`"model"` for original model coordinates, `"assembly"` for assembly structure, `"symmetry"` for a set of crystal unit cells based on Miller indices, `"symmetry_mates"` for a set of asymmetric units within a radius from the original model).
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read coordinates from (only applies when the input data are from CIF or BinaryCIF). If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read coordinates from (only applies when the input data are from CIF or BinaryCIF and `block_header` is `null`).
+
+        Default: `0`
+
+      - **`model_index?: `**`Integer`
+
+        0-based index of model in case the input data contain multiple models.
+
+        Default: `0`
+
+      - **`assembly_id?: `**`string | null`
+
+        Assembly identifier (only applies when `kind` is `"assembly"`). If `null`, the first assembly is selected.
+
+        Default: `null`
+
+      - **`radius?: `**`number`
+
+        Distance (in Angstroms) from the original model in which asymmetric units should be included (only applies when `kind` is `"symmetry_mates"`).
+
+        Default: `5`
+
+      - **`ijk_min?: `**`[Integer, Integer, Integer]`
+
+        Miller indices of the bottom-left unit cell to be included (only applies when `kind` is `"symmetry"`).
+
+        Default: `[-1, -1, -1]`
+
+      - **`ijk_max?: `**`[Integer, Integer, Integer]`
+
+        Miller indices of the top-right unit cell to be included (only applies when `kind` is `"symmetry"`).
+
+        Default: `[1, 1, 1]`
+
+  - **`transform`**
+
+    This node instructs to rotate and/or translate structure coordinates.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`rotation?: `**`Array<number>`
+
+        Rotation matrix (3x3 matrix flattened in column major format (j*3+i indexing), this is equivalent to Fortran-order in numpy). This matrix will multiply the structure coordinates from the left. The default value is the identity matrix (corresponds to no rotation).
+
+        Default: `[1, 0, 0, 0, 1, 0, 0, 0, 1]`
+
+      - **`translation?: `**`[number, number, number]`
+
+        Translation vector, applied to the structure coordinates after rotation. The default value is the zero vector (corresponds to no translation).
+
+        Default: `[0, 0, 0]`
+
+  - **`component`**
+
+    This node instructs to create a component (i.e. a subset of the parent structure).
+
+    Parent: `structure`
+
+    Params:
+
+      - **`selector: `**`("all" | "polymer" | "protein" | "nucleic" | "branched" | "ligand" | "ion" | "water") | Partial<{ label_entity_id: string, label_asym_id: string, auth_asym_id: string, label_seq_id: Integer, auth_seq_id: Integer, pdbx_PDB_ins_code: string, beg_label_seq_id: Integer, end_label_seq_id: Integer, beg_auth_seq_id: Integer, end_auth_seq_id: Integer, label_atom_id: string, auth_atom_id: string, type_symbol: string, atom_id: Integer, atom_index: Integer }> | Array<Partial<{ label_entity_id: string, label_asym_id: string, auth_asym_id: string, label_seq_id: Integer, auth_seq_id: Integer, pdbx_PDB_ins_code: string, beg_label_seq_id: Integer, end_label_seq_id: Integer, beg_auth_seq_id: Integer, end_auth_seq_id: Integer, label_atom_id: string, auth_atom_id: string, type_symbol: string, atom_id: Integer, atom_index: Integer }>>`
+
+        Defines what part of the parent structure should be included in this component.
+
+        Default: `"all"`
+
+  - **`component_from_uri`**
+
+    This node instructs to create a component defined by an external annotation resource.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`uri: `**`string`
+
+        URL of the annotation resource.
+
+      - **`format: `**`"cif" | "bcif" | "json"`
+
+        Format of the annotation resource.
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"` and `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"component"`
+
+      - **`field_values?: `**`Array<string> | null`
+
+        List of component identifiers (i.e. values in the field given by `field_name`) which should be included in this component. If `null`, component identifiers are ignored (all annotation rows are included), and `field_name` field can be dropped from the annotation.
+
+        Default: `null`
+
+  - **`component_from_source`**
+
+    This node instructs to create a component defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from. If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from. If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"component"`
+
+      - **`field_values?: `**`Array<string> | null`
+
+        List of component identifiers (i.e. values in the field given by `field_name`) which should be included in this component. If `null`, component identifiers are ignored (all annotation rows are included), and `field_name` field can be dropped from the annotation.
+
+        Default: `null`
+
+  - **`representation`**
+
+    This node instructs to create a visual representation of a component.
+
+    Parent: `component` or `component_from_uri` or `component_from_source`
+
+    Params:
+
+      - **`type: `**`"ball_and_stick" | "cartoon" | "surface"`
+
+        Method of visual representation of the component.
+
+  - **`color`**
+
+    This node instructs to apply color to a visual representation.
+
+    Parent: `representation`
+
+    Params:
+
+      - **`color: `**`HexColor | ("white" | "gray" | "black" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "magenta")`
+
+        Color to apply to the representation. Can be either a color name (e.g. `"red"`) or a hexadecimal code (e.g. `"#FF0011"`).
+
+      - **`selector?: `**`("all" | "polymer" | "protein" | "nucleic" | "branched" | "ligand" | "ion" | "water") | Partial<{ label_entity_id: string, label_asym_id: string, auth_asym_id: string, label_seq_id: Integer, auth_seq_id: Integer, pdbx_PDB_ins_code: string, beg_label_seq_id: Integer, end_label_seq_id: Integer, beg_auth_seq_id: Integer, end_auth_seq_id: Integer, label_atom_id: string, auth_atom_id: string, type_symbol: string, atom_id: Integer, atom_index: Integer }> | Array<Partial<{ label_entity_id: string, label_asym_id: string, auth_asym_id: string, label_seq_id: Integer, auth_seq_id: Integer, pdbx_PDB_ins_code: string, beg_label_seq_id: Integer, end_label_seq_id: Integer, beg_auth_seq_id: Integer, end_auth_seq_id: Integer, label_atom_id: string, auth_atom_id: string, type_symbol: string, atom_id: Integer, atom_index: Integer }>>`
+
+        Defines to what part of the representation this color should be applied.
+
+        Default: `"all"`
+
+  - **`color_from_uri`**
+
+    This node instructs to apply colors to a visual representation. The colors are defined by an external annotation resource.
+
+    Parent: `representation`
+
+    Params:
+
+      - **`uri: `**`string`
+
+        URL of the annotation resource.
+
+      - **`format: `**`"cif" | "bcif" | "json"`
+
+        Format of the annotation resource.
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"` and `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"color"`
+
+  - **`color_from_source`**
+
+    This node instructs to apply colors to a visual representation. The colors are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.
+
+    Parent: `representation`
+
+    Params:
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from. If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from. If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"color"`
+
+  - **`label`**
+
+    This node instructs to add a label (textual visual representation) to a component.
+
+    Parent: `component` or `component_from_uri` or `component_from_source`
+
+    Params:
+
+      - **`text: `**`string`
+
+        Content of the shown label.
+
+  - **`label_from_uri`**
+
+    This node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an external annotation resource.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`uri: `**`string`
+
+        URL of the annotation resource.
+
+      - **`format: `**`"cif" | "bcif" | "json"`
+
+        Format of the annotation resource.
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"` and `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"label"`
+
+  - **`label_from_source`**
+
+    This node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from. If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from. If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"label"`
+
+  - **`tooltip`**
+
+    This node instructs to add a tooltip to a component. "Tooltip" is a text which is not a part of the visualization but should be presented to the users when they interact with the component (typically, the tooltip will be shown somewhere on the screen when the user hovers over a visual representation of the component).
+
+    Parent: `component` or `component_from_uri` or `component_from_source`
+
+    Params:
+
+      - **`text: `**`string`
+
+        Content of the shown tooltip.
+
+  - **`tooltip_from_uri`**
+
+    This node instructs to add tooltips to parts of a structure. The tooltips are defined by an external annotation resource.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`uri: `**`string`
+
+        URL of the annotation resource.
+
+      - **`format: `**`"cif" | "bcif" | "json"`
+
+        Format of the annotation resource.
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"` and `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"tooltip"`
+
+  - **`tooltip_from_source`**
+
+    This node instructs to add tooltips to parts of a structure. The tooltips are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.
+
+    Parent: `structure`
+
+    Params:
+
+      - **`schema: `**`"whole_structure" | "entity" | "chain" | "auth_chain" | "residue" | "auth_residue" | "residue_range" | "auth_residue_range" | "atom" | "auth_atom" | "all_atomic"`
+
+        Annotation schema defines what fields in the annotation will be taken into account.
+
+      - **`block_header?: `**`string | null`
+
+        Header of the CIF block to read annotation from. If `null`, block is selected based on `block_index`.
+
+        Default: `null`
+
+      - **`block_index?: `**`Integer`
+
+        0-based index of the CIF block to read annotation from (only applies when `block_header` is `null`).
+
+        Default: `0`
+
+      - **`category_name?: `**`string | null`
+
+        Name of the CIF category to read annotation from. If `null`, the first category in the block is used.
+
+        Default: `null`
+
+      - **`field_name?: `**`string`
+
+        Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).
+
+        Default: `"tooltip"`
+
+  - **`focus`**
+
+    This node instructs to set the camera focus to a component (zoom in).
+
+    Parent: `component` or `component_from_uri` or `component_from_source`
+
+    Params:
+
+      - **`direction?: `**`[number, number, number]`
+
+        Vector describing the direction of the view (camera position -> focused target).
+
+        Default: `[0, 0, -1]`
+
+      - **`up?: `**`[number, number, number]`
+
+        Vector which will be aligned with the screen Y axis.
+
+        Default: `[0, 1, 0]`
+
+  - **`camera`**
+
+    This node instructs to set the camera position and orientation.
+
+    Parent: `root`
+
+    Params:
+
+      - **`target: `**`[number, number, number]`
+
+        Coordinates of the point in space at which the camera is pointing.
+
+      - **`position: `**`[number, number, number]`
+
+        Coordinates of the camera.
+
+      - **`up?: `**`[number, number, number]`
+
+        Vector which will be aligned with the screen Y axis.
+
+        Default: `[0, 1, 0]`
+
+  - **`canvas`**
+
+    This node sets canvas properties.
+
+    Parent: `root`
+
+    Params:
+
+      - **`background_color: `**`HexColor | ("white" | "gray" | "black" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "magenta")`
+
+        Color of the canvas background. Can be either a color name (e.g. `"red"`) or a hexadecimal code (e.g. `"#FF0011"`).

examples/mvs/1cbs-focus.mvsj

@@ -0,0 +1,111 @@
+{
+ "version": 6,
+ "root": {
+  "kind": "root",
+  "children": [
+   {
+    "kind": "canvas",
+    "params": {
+     "background_color": "#ffffee"
+    }
+   },
+   {
+    "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.5, 1, 0]
+            }
+           },
+           {
+            "kind": "representation",
+            "params": {
+             "type": "ball_and_stick"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "color": "#cc3399"
+              }
+             }
+            ]
+           },
+           {
+            "kind": "label",
+            "params": {
+             "text": "Retinoic Acid"
+            }
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   }
+  ]
+ }
+}

examples/mvs/1cbs.mvsj

@@ -0,0 +1,111 @@
+{
+ "version": 6,
+ "root": {
+  "kind": "root",
+  "children": [
+   {
+    "kind": "canvas",
+    "params": {
+     "background_color": "#ffffee"
+    }
+   },
+   {
+    "kind": "camera",
+    "params": {
+     "target": [17, 21, 27],
+     "position": [54, 41, 91]
+    }
+   },
+   {
+    "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": "representation",
+            "params": {
+             "type": "ball_and_stick"
+            },
+            "children": [
+             {
+              "kind": "color",
+              "params": {
+               "color": "#cc3399"
+              }
+             }
+            ]
+           },
+           {
+            "kind": "label",
+            "params": {
+             "text": "Retinoic Acid"
+            }
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   }
+  ]
+ }
+}

examples/mvs/1h9t_domain_colors.mvsj

@@ -0,0 +1,63 @@
+{
+ "version": 6,
+ "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": "/examples/mvs/1h9t_domains.json",
+               "format": "json",
+               "schema": "all_atomic"
+              }
+             }
+            ]
+           }
+          ]
+         }
+        ]
+       }
+      ]
+     }
+    ]
+   }
+  ]
+ }
+}

examples/mvs/1h9t_domain_labels.mvsj

@@ -0,0 +1,583 @@
+{
+ "version": 6,
+ "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": "/examples/mvs/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": "/examples/mvs/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": "/examples/mvs/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-lock.json

@@ -24,6 +24,7 @@
         "h264-mp4-encoder": "^1.0.12",
         "immer": "^9.0.21",
         "immutable": "^4.3.4",
+        "io-ts": "^2.2.20",
         "node-fetch": "^2.7.0",
         "rxjs": "^7.8.1",
         "swagger-ui-dist": "^5.10.0",
@@ -7660,6 +7661,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fp-ts": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.16.1.tgz",
+      "integrity": "sha512-by7U5W8dkIzcvDofUcO42yl9JbnHTEDBrzu3pt5fKT+Z4Oy85I21K80EYJYdjQGC2qum4Vo55Ag57iiIK4FYuA==",
+      "peer": true
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -8672,6 +8679,14 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/io-ts": {
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.20.tgz",
+      "integrity": "sha512-Rq2BsYmtwS5vVttie4rqrOCIfHCS9TgpRLFpKQCM1wZBBRY9nWVGmEvm2FnDbSE2un1UE39DvFpTR5UL47YDcA==",
+      "peerDependencies": {
+        "fp-ts": "^2.5.0"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -21002,6 +21017,12 @@
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
     },
+    "fp-ts": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.16.1.tgz",
+      "integrity": "sha512-by7U5W8dkIzcvDofUcO42yl9JbnHTEDBrzu3pt5fKT+Z4Oy85I21K80EYJYdjQGC2qum4Vo55Ag57iiIK4FYuA==",
+      "peer": true
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -21744,6 +21765,12 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "io-ts": {
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.20.tgz",
+      "integrity": "sha512-Rq2BsYmtwS5vVttie4rqrOCIfHCS9TgpRLFpKQCM1wZBBRY9nWVGmEvm2FnDbSE2un1UE39DvFpTR5UL47YDcA==",
+      "requires": {}
+    },
     "ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",

package.json

@@ -163,6 +163,7 @@
     "h264-mp4-encoder": "^1.0.12",
     "immer": "^9.0.21",
     "immutable": "^4.3.4",
+    "io-ts": "^2.2.20",
     "node-fetch": "^2.7.0",
     "rxjs": "^7.8.1",
     "swagger-ui-dist": "^5.10.0",

src/apps/viewer/app.ts

@@ -6,35 +6,43 @@
  */
 
 import { ANVILMembraneOrientation } from '../../extensions/anvil/behavior';
+import { Backgrounds } from '../../extensions/backgrounds';
 import { CellPack } from '../../extensions/cellpack';
 import { DnatcoNtCs } from '../../extensions/dnatco';
 import { G3DFormat, G3dProvider } from '../../extensions/g3d/format';
-import { Volseg, VolsegVolumeServerConfig } from '../../extensions/volumes-and-segmentations';
 import { GeometryExport } from '../../extensions/geo-export';
-import { MAQualityAssessment } from '../../extensions/model-archive/quality-assessment/behavior';
-import { QualityAssessmentPLDDTPreset, QualityAssessmentQmeanPreset } from '../../extensions/model-archive/quality-assessment/behavior';
+import { MAQualityAssessment, QualityAssessmentPLDDTPreset, QualityAssessmentQmeanPreset } from '../../extensions/model-archive/quality-assessment/behavior';
 import { QualityAssessment } from '../../extensions/model-archive/quality-assessment/prop';
 import { ModelExport } from '../../extensions/model-export';
 import { Mp4Export } from '../../extensions/mp4-export';
+import { MolViewSpec } from '../../extensions/mvs/behavior';
+import { loadMVS } from '../../extensions/mvs/load';
+import { MVSData } from '../../extensions/mvs/mvs-data';
 import { PDBeStructureQualityReport } from '../../extensions/pdbe';
 import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
+import { RCSBAssemblySymmetryConfig } from '../../extensions/rcsb/assembly-symmetry/behavior';
+import { SbNcbrPartialCharges, SbNcbrPartialChargesPreset, SbNcbrPartialChargesPropertyProvider } from '../../extensions/sb-ncbr';
+import { Volseg, VolsegVolumeServerConfig } from '../../extensions/volumes-and-segmentations';
+import { wwPDBChemicalComponentDictionary } from '../../extensions/wwpdb/ccd/behavior';
+import { wwPDBStructConnExtensionFunctions } from '../../extensions/wwpdb/struct-conn';
 import { ZenodoImport } from '../../extensions/zenodo';
+import { SaccharideCompIdMapType } from '../../mol-model/structure/structure/carbohydrates/constants';
 import { Volume } from '../../mol-model/volume';
 import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
 import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
 import { PresetTrajectoryHierarchy } from '../../mol-plugin-state/builder/structure/hierarchy-preset';
 import { PresetStructureRepresentations, StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
+import { BuiltInCoordinatesFormat } from '../../mol-plugin-state/formats/coordinates';
 import { DataFormatProvider } from '../../mol-plugin-state/formats/provider';
 import { BuiltInTopologyFormat } from '../../mol-plugin-state/formats/topology';
-import { BuiltInCoordinatesFormat } from '../../mol-plugin-state/formats/coordinates';
 import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
 import { BuildInVolumeFormat } from '../../mol-plugin-state/formats/volume';
 import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
 import { TrajectoryFromModelAndCoordinates } from '../../mol-plugin-state/transforms/model';
-import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { createPluginUI } from '../../mol-plugin-ui/react18';
 import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginConfig } from '../../mol-plugin/config';
@@ -46,15 +54,9 @@ import { Asset } from '../../mol-util/assets';
 import { Color } from '../../mol-util/color';
 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 { SbNcbrPartialCharges, SbNcbrPartialChargesPreset, SbNcbrPartialChargesPropertyProvider } from '../../extensions/sb-ncbr';
-import { wwPDBStructConnExtensionFunctions } from '../../extensions/wwpdb/struct-conn';
-import { wwPDBChemicalComponentDictionary } from '../../extensions/wwpdb/ccd/behavior';
-import { RCSBAssemblySymmetryConfig } from '../../extensions/rcsb/assembly-symmetry/behavior';
 
 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setDebugMode, setProductionMode, setTimingMode, consoleStats } from '../../mol-util/debug';
+export { consoleStats, setDebugMode, setProductionMode, setTimingMode } from '../../mol-util/debug';
 
 const CustomFormats = [
     ['g3d', G3dProvider] as const
@@ -77,6 +79,7 @@ export const ExtensionMap = {
     'zenodo-import': PluginSpec.Behavior(ZenodoImport),
     'sb-ncbr-partial-charges': PluginSpec.Behavior(SbNcbrPartialCharges),
     'wwpdb-chemical-component-dictionary': PluginSpec.Behavior(wwPDBChemicalComponentDictionary),
+    'mvs': PluginSpec.Behavior(MolViewSpec),
 };
 
 const DefaultViewerOptions = {
@@ -467,6 +470,27 @@ export class Viewer {
         return { model, coords, preset };
     }
 
+    async loadMvsFromUrl(url: string, format: 'mvsj') {
+        if (format === 'mvsj') {
+            const data = await this.plugin.runTask(this.plugin.fetch({ url, type: 'string' }));
+            const mvsData = MVSData.fromMVSJ(data);
+            await loadMVS(this.plugin, mvsData, { sanityChecks: true });
+        } else {
+            throw new Error(`Unknown MolViewSpec format: ${format}`);
+        }
+        // We might add more formats in the future
+    }
+
+    async loadMvsData(data: string, format: 'mvsj') {
+        if (format === 'mvsj') {
+            const mvsData = MVSData.fromMVSJ(data);
+            await loadMVS(this.plugin, mvsData, { sanityChecks: true });
+        } else {
+            throw new Error(`Unknown MolViewSpec format: ${format}`);
+        }
+        // We might add more formats in the future
+    }
+
     handleResize() {
         this.plugin.layout.events.updated.next(void 0);
     }

src/apps/viewer/index.html

@@ -98,6 +98,14 @@
                 var structureUrlIsBinary = getParam('structure-url-is-binary', '[^&]+').trim() === '1';
                 if (structureUrl) viewer.loadStructureFromUrl(structureUrl, structureUrlFormat, structureUrlIsBinary);
 
+                var mvsUrl = getParam('mvs-url', '[^&]+').trim();
+                var mvsData = getParam('mvs-data', '[^&]+').trim();
+                var mvsFormat = getParam('mvs-format', '[^&]+').trim() || 'mvsj';
+                if (mvsUrl && mvsData) console.error('Cannot specify mvs-url and mvs-data URL parameters at the same time. Ignoring both.');
+                else if (mvsUrl) viewer.loadMvsFromUrl(mvsUrl, mvsFormat);
+                else if (mvsData) viewer.loadMvsData(mvsData, mvsFormat);
+
+
                 var pdb = getParam('pdb', '[^&]+').trim();
                 if (pdb) viewer.loadPdb(pdb);
 

src/examples/mvs/mvs-render.ts

@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ *
+ * Command-line application for rendering images from MolViewSpec files
+ * Build: npm install --no-save gl jpeg-js pngjs  // these packages are not listed in Mol* dependencies for performance reasons
+ *        npm run build
+ * Run:   node lib/commonjs/examples/mvs/mvs-render -i examples/mvs/1cbs.mvsj -o ../outputs/1cbs.png --size 800x600 --molj
+ */
+
+import { ArgumentParser } from 'argparse';
+import fs from 'fs';
+import gl from 'gl';
+import jpegjs from 'jpeg-js';
+import path from 'path';
+import pngjs from 'pngjs';
+
+import { Canvas3DParams } from '../../mol-canvas3d/canvas3d';
+import { PluginContext } from '../../mol-plugin/context';
+import { HeadlessPluginContext } from '../../mol-plugin/headless-plugin-context';
+import { DefaultPluginSpec, PluginSpec } from '../../mol-plugin/spec';
+import { ExternalModules, defaultCanvas3DParams } from '../../mol-plugin/util/headless-screenshot';
+import { setFSModule } from '../../mol-util/data-source';
+import { onelinerJsonString } from '../../mol-util/json';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+
+// MolViewSpec must be imported after HeadlessPluginContext
+import { MolViewSpec } from '../../extensions/mvs/behavior';
+import { loadMVS } from '../../extensions/mvs/load';
+import { MVSData } from '../../extensions/mvs/mvs-data';
+import { dfs } from '../../extensions/mvs/tree/generic/tree-utils';
+
+
+setFSModule(fs);
+
+const DEFAULT_SIZE = '800x800';
+
+/** Command line argument values for `main` */
+interface Args {
+    input: string[],
+    output: string[],
+    size: { width: number, height: number },
+    molj: boolean,
+}
+
+/** Return parsed command line arguments for `main` */
+function parseArguments(): Args {
+    const parser = new ArgumentParser({ description: 'Command-line application for rendering images from MolViewSpec files' });
+    parser.add_argument('-i', '--input', { required: true, nargs: '+', help: 'Input file(s) in .mvsj format' });
+    parser.add_argument('-o', '--output', { required: true, nargs: '+', help: 'File path(s) for output files (one output path for each input file). Output format is inferred from the file extension (.png or .jpg)' });
+    parser.add_argument('-s', '--size', { help: `Output image resolution, {width}x{height}. Default: ${DEFAULT_SIZE}.`, default: DEFAULT_SIZE });
+    parser.add_argument('-m', '--molj', { action: 'store_true', help: `Save Mol* state (.molj) in addition to rendered images (use the same output file paths but with .molj extension)` });
+    const args = parser.parse_args();
+    try {
+        const parts = args.size.split('x');
+        if (parts.length !== 2) throw new Error('Must contain two x-separated parts');
+        args.size = { width: parseIntStrict(parts[0]), height: parseIntStrict(parts[1]) };
+    } catch {
+        parser.error(`argument: --size: invalid image size string: '${args.size}' (must be two x-separated integers (width and height), e.g. '400x300')`);
+    }
+    if (args.input.length !== args.output.length) {
+        parser.error(`argument: --output: must specify the same number of input and output file paths (specified ${args.input.length} input path${args.input.length !== 1 ? 's' : ''} but ${args.output.length} output path${args.output.length !== 1 ? 's' : ''})`);
+    }
+    return { ...args };
+}
+
+/** Main workflow for rendering images from MolViewSpec files */
+async function main(args: Args): Promise<void> {
+    const plugin = await createHeadlessPlugin(args);
+
+    for (let i = 0; i < args.input.length; i++) {
+        const input = args.input[i];
+        const output = args.output[i];
+        console.log(`Processing ${input} -> ${output}`);
+
+        const data = fs.readFileSync(input, { encoding: 'utf8' });
+        const mvsData = MVSData.fromMVSJ(data);
+        removeLabelNodes(mvsData);
+
+        await loadMVS(plugin, mvsData, { sanityChecks: true, deletePrevious: true });
+        fs.mkdirSync(path.dirname(output), { recursive: true });
+        if (args.molj) {
+            await plugin.saveStateSnapshot(withExtension(output, '.molj'));
+        }
+        await plugin.saveImage(output);
+        checkState(plugin);
+    }
+    await plugin.clear();
+    plugin.dispose();
+}
+
+/** Return a new and initiatized HeadlessPlugin */
+async function createHeadlessPlugin(args: Pick<Args, 'size'>): Promise<HeadlessPluginContext> {
+    const externalModules: ExternalModules = { gl, pngjs, 'jpeg-js': jpegjs };
+    const spec = DefaultPluginSpec();
+    spec.behaviors.push(PluginSpec.Behavior(MolViewSpec));
+    const headlessCanvasOptions = defaultCanvas3DParams();
+    const canvasOptions = {
+        ...PD.getDefaultValues(Canvas3DParams),
+        cameraResetDurationMs: headlessCanvasOptions.cameraResetDurationMs,
+        postprocessing: headlessCanvasOptions.postprocessing,
+    };
+    const plugin = new HeadlessPluginContext(externalModules, spec, args.size, { canvas: canvasOptions });
+    try {
+        await plugin.init();
+    } catch (error) {
+        plugin.dispose();
+        throw error;
+    }
+    return plugin;
+}
+
+/** Parse integer, fail early. */
+function parseIntStrict(str: string): number {
+    if (str === '') throw new Error('Is empty string');
+    const result = Number(str);
+    if (isNaN(result)) throw new Error('Is NaN');
+    if (Math.floor(result) !== result) throw new Error('Is not integer');
+    return result;
+}
+
+/** Replace the file extension in `filename` by `extension`. If `filename` has no extension, add it. */
+function withExtension(filename: string, extension: string): string {
+    const oldExtension = path.extname(filename);
+    return filename.slice(0, -oldExtension.length) + extension;
+}
+
+/** Remove any label* nodes from the MVS tree (in-place). Print warning if removed at least one node. */
+function removeLabelNodes(mvsData: MVSData): void {
+    let removedSomething = false;
+    dfs(mvsData.root, node => {
+        const nChildren = node.children?.length ?? 0;
+        node.children = node.children?.filter(c => !c.kind.startsWith('label'));
+        if ((node.children?.length ?? 0) !== nChildren) {
+            removedSomething = true;
+        }
+    });
+    if (removedSomething) {
+        // trying to render labels would fail because `document` is not available in Nodejs
+        console.error('Rendering labels is not yet supported in mvs-render. Skipping any label* nodes.');
+    }
+}
+
+/** Check Mol* state, print and throw error if any cell is not OK. */
+function checkState(plugin: PluginContext): void {
+    const cells = Array.from(plugin.state.data.cells.values());
+    const badCell = cells.find(cell => cell.status !== 'ok');
+    if (badCell) {
+        console.error(`Building Mol* state failed`);
+        console.error(`    Transformer: ${badCell.transform.transformer.id}`);
+        console.error(`    Params: ${onelinerJsonString(badCell.transform.params)}`);
+        console.error(`    Error: ${badCell.errorText}`);
+        console.error(``);
+        throw new Error(`Building Mol* state failed: ${badCell.errorText}`);
+    }
+}
+
+main(parseArguments());

src/examples/mvs/mvs-validate.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ *
+ * Command-line application for validating MolViewSpec files
+ * Build: npm run build
+ * Run:   node lib/commonjs/examples/mvs/mvs-validate examples/mvs/1cbs.mvsj
+ */
+
+import { ArgumentParser } from 'argparse';
+import fs from 'fs';
+
+import { setFSModule } from '../../mol-util/data-source';
+import { MVSData } from '../../extensions/mvs/mvs-data';
+
+
+setFSModule(fs);
+
+/** Command line argument values for `main` */
+interface Args {
+    input: string[],
+    no_extra: boolean,
+}
+
+/** Return parsed command line arguments for `main` */
+function parseArguments(): Args {
+    const parser = new ArgumentParser({ description: 'Command-line application for validating MolViewSpec files. Prints validation status (OK/FAILED) to stdout, detailed validation issues to stderr. Exits with a zero exit code if all input files are OK.' });
+    parser.add_argument('input', { nargs: '+', help: 'Input file(s) in .mvsj format' });
+    parser.add_argument('--no-extra', { action: 'store_true', help: 'Treat presence of extra node params as an issue.' });
+    const args = parser.parse_args();
+    return { ...args };
+}
+
+/** Main workflow for validating MolViewSpec files. Returns the number of failed input files. */
+function main(args: Args): number {
+    let nFailed = 0;
+    for (const input of args.input) {
+        const data = fs.readFileSync(input, { encoding: 'utf8' });
+        const mvsData = MVSData.fromMVSJ(data);
+        const issues = MVSData.validationIssues(mvsData, { noExtra: args.no_extra });
+        const status = issues ? 'FAILED' : 'OK';
+        console.log(`${status.padEnd(6)} ${input}`);
+        if (issues) {
+            nFailed++;
+            for (const issue of issues) {
+                console.error(issue);
+            }
+        }
+    }
+    return nFailed;
+}
+
+const nFailed = main(parseArguments());
+if (nFailed > 0) {
+    process.exitCode = 1;
+}

src/extensions/meshes/mesh-streaming/behavior.ts

@@ -17,9 +17,9 @@ import { UUID } from '../../../mol-util';
 import { Asset } from '../../../mol-util/assets';
 import { Color } from '../../../mol-util/color';
 import { ColorNames } from '../../../mol-util/color/names';
+import { Choice } from '../../../mol-util/param-choice';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 
-import { Choice } from '../../volumes-and-segmentations/helpers';
 import { MetadataWrapper } from '../../volumes-and-segmentations/volseg-api/utils';
 
 import { MeshlistData } from '../mesh-extension';

src/extensions/meshes/mesh-streaming/server-info.ts

@@ -5,10 +5,9 @@
  */
 
 import { PluginStateObject } from '../../../mol-plugin-state/objects';
+import { Choice } from '../../../mol-util/param-choice';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 
-import { Choice } from '../../volumes-and-segmentations/helpers';
-
 
 export const DEFAULT_MESH_SERVER = 'http://localhost:9000/v2';
 

src/extensions/mvs/behavior.ts

@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { CustomModelProperty } from '../../mol-model-props/common/custom-model-property';
+import { CustomStructureProperty } from '../../mol-model-props/common/custom-structure-property';
+import { PluginDragAndDropHandler } from '../../mol-plugin-state/manager/drag-and-drop';
+import { LociLabelProvider } from '../../mol-plugin-state/manager/loci-label';
+import { PluginBehavior } from '../../mol-plugin/behavior/behavior';
+import { PluginContext } from '../../mol-plugin/context';
+import { StructureRepresentationProvider } from '../../mol-repr/structure/representation';
+import { ColorTheme } from '../../mol-theme/color';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { MVSAnnotationColorThemeProvider } from './components/annotation-color-theme';
+import { MVSAnnotationLabelRepresentationProvider } from './components/annotation-label/representation';
+import { MVSAnnotationsProvider } from './components/annotation-prop';
+import { MVSAnnotationTooltipsLabelProvider, MVSAnnotationTooltipsProvider } from './components/annotation-tooltips-prop';
+import { CustomLabelRepresentationProvider } from './components/custom-label/representation';
+import { CustomTooltipsLabelProvider, CustomTooltipsProvider } from './components/custom-tooltips-prop';
+import { makeMultilayerColorThemeProvider } from './components/multilayer-color-theme';
+import { loadMVS } from './load';
+import { MVSData } from './mvs-data';
+
+
+/** Collection of things that can be register/unregistered in a plugin */
+interface Registrables {
+    customModelProperties?: CustomModelProperty.Provider<any, any>[],
+    customStructureProperties?: CustomStructureProperty.Provider<any, any>[],
+    representations?: StructureRepresentationProvider<any>[],
+    colorThemes?: ColorTheme.Provider[],
+    lociLabels?: LociLabelProvider[],
+    dragAndDropHandlers?: DragAndDropHandler[],
+}
+
+
+/** Registers everything needed for loading MolViewSpec files */
+export const MolViewSpec = PluginBehavior.create<{ autoAttach: boolean }>({
+    name: 'molviewspec',
+    category: 'misc',
+    display: {
+        name: 'MolViewSpec',
+        description: 'MolViewSpec extension',
+    },
+    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean }> {
+        private readonly registrables: Registrables = {
+            customModelProperties: [
+                MVSAnnotationsProvider,
+            ],
+            customStructureProperties: [
+                CustomTooltipsProvider,
+                MVSAnnotationTooltipsProvider,
+            ],
+            representations: [
+                CustomLabelRepresentationProvider,
+                MVSAnnotationLabelRepresentationProvider,
+            ],
+            colorThemes: [
+                MVSAnnotationColorThemeProvider,
+                makeMultilayerColorThemeProvider(this.ctx.representation.structure.themes.colorThemeRegistry),
+            ],
+            lociLabels: [
+                CustomTooltipsLabelProvider,
+                MVSAnnotationTooltipsLabelProvider,
+            ],
+            dragAndDropHandlers: [
+                MVSDragAndDropHandler,
+            ],
+        };
+
+        register(): void {
+            for (const prop of this.registrables.customModelProperties ?? []) {
+                this.ctx.customModelProperties.register(prop, this.params.autoAttach);
+            }
+            for (const prop of this.registrables.customStructureProperties ?? []) {
+                this.ctx.customStructureProperties.register(prop, this.params.autoAttach);
+            }
+            for (const repr of this.registrables.representations ?? []) {
+                this.ctx.representation.structure.registry.add(repr);
+            }
+            for (const theme of this.registrables.colorThemes ?? []) {
+                this.ctx.representation.structure.themes.colorThemeRegistry.add(theme);
+            }
+            for (const provider of this.registrables.lociLabels ?? []) {
+                this.ctx.managers.lociLabels.addProvider(provider);
+            }
+            for (const handler of this.registrables.dragAndDropHandlers ?? []) {
+                this.ctx.managers.dragAndDrop.addHandler(handler.name, handler.handle);
+            }
+        }
+        update(p: { autoAttach: boolean }) {
+            const updated = this.params.autoAttach !== p.autoAttach;
+            this.params.autoAttach = p.autoAttach;
+            for (const prop of this.registrables.customModelProperties ?? []) {
+                this.ctx.customModelProperties.setDefaultAutoAttach(prop.descriptor.name, this.params.autoAttach);
+            }
+            for (const prop of this.registrables.customStructureProperties ?? []) {
+                this.ctx.customStructureProperties.setDefaultAutoAttach(prop.descriptor.name, this.params.autoAttach);
+            }
+            return updated;
+        }
+        unregister() {
+            for (const prop of this.registrables.customModelProperties ?? []) {
+                this.ctx.customModelProperties.unregister(prop.descriptor.name);
+            }
+            for (const prop of this.registrables.customStructureProperties ?? []) {
+                this.ctx.customStructureProperties.unregister(prop.descriptor.name);
+            }
+            for (const repr of this.registrables.representations ?? []) {
+                this.ctx.representation.structure.registry.remove(repr);
+            }
+            for (const theme of this.registrables.colorThemes ?? []) {
+                this.ctx.representation.structure.themes.colorThemeRegistry.remove(theme);
+            }
+            for (const labelProvider of this.registrables.lociLabels ?? []) {
+                this.ctx.managers.lociLabels.removeProvider(labelProvider);
+            }
+            for (const handler of this.registrables.dragAndDropHandlers ?? []) {
+                this.ctx.managers.dragAndDrop.removeHandler(handler.name);
+            }
+        }
+    },
+    params: () => ({
+        autoAttach: PD.Boolean(false),
+    })
+});
+
+
+/** Registrable method for handling dragged-and-dropped files */
+interface DragAndDropHandler {
+    name: string,
+    handle: PluginDragAndDropHandler,
+}
+
+/** DragAndDropHandler handler for `.mvsj` files */
+const MVSDragAndDropHandler: DragAndDropHandler = {
+    name: 'mvs-mvsj',
+    /** Load .mvsj files. Delete previous plugin state before loading.
+     * If multiple files are provided, merge their MVS data into one state. */
+    async handle(files: File[], plugin: PluginContext): Promise<boolean> {
+        let applied = false;
+        for (const file of files) {
+            if (file.name.toLowerCase().endsWith('.mvsj')) {
+                const data = await file.text();
+                const mvsData = MVSData.fromMVSJ(data);
+                await loadMVS(plugin, mvsData, { sanityChecks: true, deletePrevious: !applied });
+                applied = true;
+            }
+        }
+        return applied;
+    },
+};

src/extensions/mvs/camera.ts

@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Camera } from '../../mol-canvas3d/camera';
+import { GraphicsRenderObject } from '../../mol-gl/render-object';
+import { Sphere3D } from '../../mol-math/geometry';
+import { BoundaryHelper } from '../../mol-math/geometry/boundary-helper';
+import { Vec3 } from '../../mol-math/linear-algebra';
+import { Loci } from '../../mol-model/loci';
+import { Structure } from '../../mol-model/structure';
+import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginContext } from '../../mol-plugin/context';
+import { StateObjectSelector } from '../../mol-state';
+import { ColorNames } from '../../mol-util/color/names';
+
+import { decodeColor } from './helpers/utils';
+import { ParamsOfKind } from './tree/generic/tree-schema';
+import { MolstarTree } from './tree/molstar/molstar-tree';
+import { MVSDefaults } from './tree/mvs/mvs-defaults';
+
+
+const DefaultFocusOptions = {
+    minRadius: 5,
+    extraRadiusForFocus: 0,
+    extraRadiusForZoomAll: 0,
+};
+const DefaultCanvasBackgroundColor = ColorNames.white;
+
+
+/** Set the camera based on a camera node params. */
+export async function setCamera(plugin: PluginContext, params: ParamsOfKind<MolstarTree, 'camera'>) {
+    const target = Vec3.create(...params.target);
+    let position = Vec3.create(...params.position);
+    if (plugin.canvas3d) position = fovAdjustedPosition(target, position, plugin.canvas3d.camera.state.mode, plugin.canvas3d.camera.state.fov);
+    const up = Vec3.create(...params.up);
+    const snapshot: Partial<Camera.Snapshot> = { target, position, up, radius: 10_000, 'radiusMax': 10_000 };
+    await PluginCommands.Camera.SetSnapshot(plugin, { snapshot });
+}
+
+/** Focus the camera on the bounding sphere of a (sub)structure (or on the whole scene if `structureNodeSelector` is null).
+ * Orient the camera based on a focus node params. */
+export async function setFocus(plugin: PluginContext, structureNodeSelector: StateObjectSelector | undefined, params: ParamsOfKind<MolstarTree, 'focus'> = MVSDefaults.focus) {
+    let structure: Structure | undefined = undefined;
+    if (structureNodeSelector) {
+        const cell = plugin.state.data.cells.get(structureNodeSelector.ref);
+        structure = cell?.obj?.data;
+        if (!structure) console.warn('Focus: no structure');
+        if (!(structure instanceof Structure)) {
+            console.warn('Focus: cannot apply to a non-structure node');
+            structure = undefined;
+        }
+    }
+    const boundingSphere = structure ? Loci.getBoundingSphere(Structure.Loci(structure)) : getPluginBoundingSphere(plugin);
+    if (boundingSphere && plugin.canvas3d) {
+        const extraRadius = structure ? DefaultFocusOptions.extraRadiusForFocus : DefaultFocusOptions.extraRadiusForZoomAll;
+        const snapshot = snapshotFromSphereAndDirections(plugin.canvas3d.camera, {
+            center: boundingSphere.center,
+            radius: boundingSphere.radius + extraRadius,
+            up: Vec3.create(...params.up),
+            direction: Vec3.create(...params.direction),
+        });
+        await PluginCommands.Camera.SetSnapshot(plugin, { snapshot });
+    }
+}
+
+/** Return camera snapshot for focusing a sphere with given `center` and `radius`,
+ * while ensuring given view `direction` (aligns with vector position->target)
+ * and `up` (aligns with screen Y axis). */
+function snapshotFromSphereAndDirections(camera: Camera, options: { center: Vec3, radius: number, direction: Vec3, up: Vec3 }): Partial<Camera.Snapshot> {
+    // This might seem to repeat `plugin.canvas3d.camera.getFocus` but avoid flipping
+    const { center, direction, up } = options;
+    const radius = Math.max(options.radius, DefaultFocusOptions.minRadius);
+    const distance = camera.getTargetDistance(radius);
+    const deltaDirection = Vec3.setMagnitude(Vec3(), direction, distance);
+    const position = Vec3.sub(Vec3(), center, deltaDirection);
+    return { target: center, position, up, radius };
+}
+
+/** Return the distance adjustment ratio for conversion from the "reference camera"
+ * to a camera with an arbitrary field of view `fov`. */
+function distanceAdjustment(mode: Camera.Mode, fov: number) {
+    if (mode === 'orthographic') return 1 / (2 * Math.tan(fov / 2));
+    else return 1 / (2 * Math.sin(fov / 2));
+}
+
+/** Return the position for a camera with an arbitrary field of view `fov`
+ * necessary to just fit into view the same sphere (with center at `target`)
+ * as the "reference camera" placed at `refPosition` would fit, while keeping the camera orientation.
+ * The "reference camera" is a camera which can just fit into view a sphere of radius R with center at distance 2R
+ * (this corresponds to FOV = 2 * asin(1/2) in perspective mode or FOV = 2 * atan(1/2) in orthogonal mode). */
+function fovAdjustedPosition(target: Vec3, refPosition: Vec3, mode: Camera.Mode, fov: number) {
+    const delta = Vec3.sub(Vec3(), refPosition, target);
+    const adjustment = distanceAdjustment(mode, fov);
+    return Vec3.scaleAndAdd(delta, target, delta, adjustment); // return target + delta * adjustment
+}
+
+/** Compute the bounding sphere of the whole scene. */
+function getPluginBoundingSphere(plugin: PluginContext) {
+    const renderObjects = getRenderObjects(plugin, false);
+    const spheres = renderObjects.map(r => r.values.boundingSphere.ref.value).filter(sphere => sphere.radius > 0);
+    return boundingSphereOfSpheres(spheres);
+}
+
+function getRenderObjects(plugin: PluginContext, includeHidden: boolean): GraphicsRenderObject[] {
+    let reprCells = Array.from(plugin.state.data.cells.values()).filter(cell => cell.obj && PluginStateObject.isRepresentation3D(cell.obj));
+    if (!includeHidden) reprCells = reprCells.filter(cell => !cell.state.isHidden);
+    const renderables = reprCells.flatMap(cell => cell.obj!.data.repr.renderObjects);
+    return renderables;
+}
+
+let boundaryHelper: BoundaryHelper | undefined = undefined;
+
+function boundingSphereOfSpheres(spheres: Sphere3D[]): Sphere3D {
+    boundaryHelper ??= new BoundaryHelper('98');
+    boundaryHelper.reset();
+    for (const s of spheres) boundaryHelper.includeSphere(s);
+    boundaryHelper.finishedIncludeStep();
+    for (const s of spheres) boundaryHelper.radiusSphere(s);
+    return boundaryHelper.getSphere();
+}
+
+/** Set canvas properties based on a canvas node params. */
+export function setCanvas(plugin: PluginContext, params: ParamsOfKind<MolstarTree, 'canvas'> | undefined) {
+    const backgroundColor = decodeColor(params?.background_color) ?? DefaultCanvasBackgroundColor;
+    if (backgroundColor !== plugin.canvas3d?.props.renderer.backgroundColor) {
+        plugin.canvas3d?.setProps(old => ({
+            ...old,
+            renderer: {
+                ...old.renderer,
+                backgroundColor: backgroundColor,
+            }
+        }));
+    }
+}

src/extensions/mvs/components/annotation-color-theme.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Location } from '../../../mol-model/location';
+import { Bond, StructureElement } from '../../../mol-model/structure';
+import { ColorTheme, LocationColor } from '../../../mol-theme/color';
+import { ThemeDataContext } from '../../../mol-theme/theme';
+import { ColorNames } from '../../../mol-util/color/names';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { decodeColor } from '../helpers/utils';
+import { getMVSAnnotationForStructure } from './annotation-prop';
+
+
+/** Parameter definition for color theme "MVS Annotation" */
+export const MVSAnnotationColorThemeParams = {
+    annotationId: PD.Text('', { description: 'Reference to "Annotation" custom model property' }),
+    fieldName: PD.Text('color', { description: 'Annotation field (column) from which to take color values' }),
+    background: PD.Color(ColorNames.gainsboro, { description: 'Color for elements without annotation' }),
+};
+export type MVSAnnotationColorThemeParams = typeof MVSAnnotationColorThemeParams
+
+/** Parameter values for color theme "MVS Annotation" */
+export type MVSAnnotationColorThemeProps = PD.Values<MVSAnnotationColorThemeParams>
+
+
+/** Return color theme that assigns colors based on an annotation file.
+ * The annotation file itself is handled by a custom model property (`MVSAnnotationsProvider`),
+ * the color theme then just uses this property. */
+export function MVSAnnotationColorTheme(ctx: ThemeDataContext, props: MVSAnnotationColorThemeProps): ColorTheme<MVSAnnotationColorThemeParams> {
+    let color: LocationColor = () => props.background;
+
+    if (ctx.structure && !ctx.structure.isEmpty) {
+        const { annotation } = getMVSAnnotationForStructure(ctx.structure, props.annotationId);
+        if (annotation) {
+            const colorForStructureElementLocation = (location: StructureElement.Location) => {
+                // if (annot.getAnnotationForLocation(location)?.color !== annot.getAnnotationForLocation_Reference(location)?.color) throw new Error('AssertionError');
+                return decodeColor(annotation?.getValueForLocation(location, props.fieldName)) ?? props.background;
+            };
+            const auxLocation = StructureElement.Location.create(ctx.structure);
+
+            color = (location: Location) => {
+                if (StructureElement.Location.is(location)) {
+                    return colorForStructureElementLocation(location);
+                } else if (Bond.isLocation(location)) {
+                    // this will be applied for each bond twice, to get color of each half (a* refers to the adjacent atom, b* to the opposite atom)
+                    auxLocation.unit = location.aUnit;
+                    auxLocation.element = location.aUnit.elements[location.aIndex];
+                    return colorForStructureElementLocation(auxLocation);
+                }
+                return props.background;
+            };
+        } else {
+            console.error(`Annotation source "${props.annotationId}" not present`);
+        }
+    }
+
+    return {
+        factory: MVSAnnotationColorTheme,
+        granularity: 'group',
+        preferSmoothing: true,
+        color: color,
+        props: props,
+        description: 'Assigns colors based on custom MolViewSpec annotation data.',
+    };
+}
+
+
+/** A thingy that is needed to register color theme "MVS Annotation" */
+export const MVSAnnotationColorThemeProvider: ColorTheme.Provider<MVSAnnotationColorThemeParams, 'mvs-annotation'> = {
+    name: 'mvs-annotation',
+    label: 'MVS Annotation',
+    category: ColorTheme.Category.Misc,
+    factory: MVSAnnotationColorTheme,
+    getParams: ctx => MVSAnnotationColorThemeParams,
+    defaultValues: PD.getDefaultValues(MVSAnnotationColorThemeParams),
+    isApplicable: (ctx: ThemeDataContext) => true,
+};

src/extensions/mvs/components/annotation-label/representation.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Structure } from '../../../../mol-model/structure';
+import { Representation, RepresentationContext, RepresentationParamsGetter } from '../../../../mol-repr/representation';
+import { ComplexRepresentation, StructureRepresentation, StructureRepresentationProvider, StructureRepresentationStateBuilder } from '../../../../mol-repr/structure/representation';
+import { MarkerAction } from '../../../../mol-util/marker-action';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { MVSAnnotationLabelTextParams, MVSAnnotationLabelTextVisual } from './visual';
+
+
+/** Components of "MVS Annotation Label" representation */
+const MVSAnnotationLabelVisuals = {
+    'label-text': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, MVSAnnotationLabelTextParams>) => ComplexRepresentation('Label text', ctx, getParams, MVSAnnotationLabelTextVisual),
+};
+
+/** Parameter definition for representation type "MVS Annotation Label" */
+export type MVSAnnotationLabelParams = typeof MVSAnnotationLabelParams
+export const MVSAnnotationLabelParams = {
+    ...MVSAnnotationLabelTextParams,
+    visuals: PD.MultiSelect(['label-text'], PD.objectToOptions(MVSAnnotationLabelVisuals)),
+};
+
+/** Parameter values for representation type "MVS Annotation Label" */
+export type MVSAnnotationLabelProps = PD.ValuesFor<MVSAnnotationLabelParams>
+
+/** Structure representation type "MVS Annotation Label", allowing showing labels based on "MVS Annotations" custom props */
+export type MVSAnnotationLabelRepresentation = StructureRepresentation<MVSAnnotationLabelParams>
+export function MVSAnnotationLabelRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, MVSAnnotationLabelParams>): MVSAnnotationLabelRepresentation {
+    const repr = Representation.createMulti('Label', ctx, getParams, StructureRepresentationStateBuilder, MVSAnnotationLabelVisuals as unknown as Representation.Def<Structure, MVSAnnotationLabelParams>);
+    repr.setState({ pickable: false, markerActions: MarkerAction.None });
+    return repr;
+}
+
+/** A thingy that is needed to register representation type "MVS Annotation Label", allowing showing labels based on "MVS Annotations" custom props */
+export const MVSAnnotationLabelRepresentationProvider = StructureRepresentationProvider({
+    name: 'mvs-annotation-label',
+    label: 'MVS Annotation Label',
+    description: 'Displays labels based on annotation custom model property',
+    factory: MVSAnnotationLabelRepresentation,
+    getParams: () => MVSAnnotationLabelParams,
+    defaultValues: PD.getDefaultValues(MVSAnnotationLabelParams),
+    defaultColorTheme: { name: 'uniform' }, // this ain't workin
+    defaultSizeTheme: { name: 'physical' },
+    isApplicable: (structure: Structure) => structure.elementCount > 0,
+});

src/extensions/mvs/components/annotation-label/visual.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Text } from '../../../../mol-geo/geometry/text/text';
+import { TextBuilder } from '../../../../mol-geo/geometry/text/text-builder';
+import { Structure } from '../../../../mol-model/structure';
+import { ComplexTextVisual, ComplexVisual } from '../../../../mol-repr/structure/complex-visual';
+import * as Original from '../../../../mol-repr/structure/visual/label-text';
+import { ElementIterator, eachSerialElement, getSerialElementLoci } from '../../../../mol-repr/structure/visual/util/element';
+import { VisualUpdateState } from '../../../../mol-repr/util';
+import { VisualContext } from '../../../../mol-repr/visual';
+import { Theme } from '../../../../mol-theme/theme';
+import { ColorNames } from '../../../../mol-util/color/names';
+import { omitObjectKeys } from '../../../../mol-util/object';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { textPropsForSelection } from '../../helpers/label-text';
+import { groupRows } from '../../helpers/selections';
+import { getMVSAnnotationForStructure } from '../annotation-prop';
+
+
+/** Parameter definition for "label-text" visual in "MVS Annotation Label" representation */
+export type MVSAnnotationLabelTextParams = typeof MVSAnnotationLabelTextParams
+export const MVSAnnotationLabelTextParams = {
+    annotationId: PD.Text('', { description: 'Reference to "Annotation" custom model property', isEssential: true }),
+    fieldName: PD.Text('label', { description: 'Annotation field (column) from which to take label contents', isEssential: true }),
+    ...omitObjectKeys(Original.LabelTextParams, ['level', 'chainScale', 'residueScale', 'elementScale']),
+    borderColor: { ...Original.LabelTextParams.borderColor, defaultValue: ColorNames.black },
+};
+
+/** Parameter values for "label-text" visual in "MVS Annotation Label" representation */
+export type MVSAnnotationLabelTextProps = PD.Values<MVSAnnotationLabelTextParams>
+
+/** Create "label-text" visual for "MVS Annotation Label" representation */
+export function MVSAnnotationLabelTextVisual(materialId: number): ComplexVisual<MVSAnnotationLabelTextParams> {
+    return ComplexTextVisual<MVSAnnotationLabelTextParams>({
+        defaultProps: PD.getDefaultValues(MVSAnnotationLabelTextParams),
+        createGeometry: createLabelText,
+        createLocationIterator: ElementIterator.fromStructure,
+        getLoci: getSerialElementLoci,
+        eachLocation: eachSerialElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<MVSAnnotationLabelTextParams>, currentProps: PD.Values<MVSAnnotationLabelTextParams>) => {
+            state.createGeometry = newProps.annotationId !== currentProps.annotationId || newProps.fieldName !== currentProps.fieldName;
+        }
+    }, materialId);
+}
+
+function createLabelText(ctx: VisualContext, structure: Structure, theme: Theme, props: MVSAnnotationLabelTextProps, text?: Text): Text {
+    const { annotation, model } = getMVSAnnotationForStructure(structure, props.annotationId);
+    const rows = annotation?.getRows() ?? [];
+    const { count, offsets, grouped } = groupRows(rows);
+    const builder = TextBuilder.create(props, count, count / 2, text);
+    for (let iGroup = 0; iGroup < count; iGroup++) {
+        const iFirstRowInGroup = grouped[offsets[iGroup]];
+        const labelText = annotation!.getValueForRow(iFirstRowInGroup, props.fieldName);
+        if (!labelText) continue;
+        const rowsInGroup = grouped.slice(offsets[iGroup], offsets[iGroup + 1]).map(j => rows[j]);
+        const p = textPropsForSelection(structure, theme.size.size, rowsInGroup, model);
+        if (!p) continue;
+        builder.add(labelText, p.center[0], p.center[1], p.center[2], p.depth, p.scale, p.group);
+    }
+    return builder.getText();
+}

src/extensions/mvs/components/annotation-prop.ts

@@ -0,0 +1,383 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Column, Table } from '../../../mol-data/db';
+import { CIF, CifBlock, CifCategory, CifFile } from '../../../mol-io/reader/cif';
+import { toTable } from '../../../mol-io/reader/cif/schema';
+import { MmcifFormat } from '../../../mol-model-formats/structure/mmcif';
+import { CustomModelProperty } from '../../../mol-model-props/common/custom-model-property';
+import { CustomProperty } from '../../../mol-model-props/common/custom-property';
+import { CustomPropertyDescriptor } from '../../../mol-model/custom-property';
+import { Model } from '../../../mol-model/structure';
+import { Structure, StructureElement } from '../../../mol-model/structure/structure';
+import { UUID } from '../../../mol-util';
+import { arrayExtend } from '../../../mol-util/array';
+import { Asset } from '../../../mol-util/assets';
+import { Jsonable, canonicalJsonString } from '../../../mol-util/json';
+import { pickObjectKeys, promiseAllObj } from '../../../mol-util/object';
+import { Choice } from '../../../mol-util/param-choice';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { AtomRanges } from '../helpers/atom-ranges';
+import { IndicesAndSortings } from '../helpers/indexing';
+import { MaybeStringParamDefinition } from '../helpers/param-definition';
+import { MVSAnnotationRow, MVSAnnotationSchema, getCifAnnotationSchema } from '../helpers/schemas';
+import { atomQualifies, getAtomRangesForRow } from '../helpers/selections';
+import { Maybe, safePromise } from '../helpers/utils';
+
+
+/** Allowed values for the annotation format parameter */
+const MVSAnnotationFormat = new Choice({ json: 'json', cif: 'cif', bcif: 'bcif' }, 'json');
+type MVSAnnotationFormat = Choice.Values<typeof MVSAnnotationFormat>
+const MVSAnnotationFormatTypes = { json: 'string', cif: 'string', bcif: 'binary' } as const satisfies { [format in MVSAnnotationFormat]: 'string' | 'binary' };
+
+/** Parameter definition for custom model property "MVS Annotations" */
+export type MVSAnnotationsParams = typeof MVSAnnotationsParams
+export const MVSAnnotationsParams = {
+    annotations: PD.ObjectList(
+        {
+            source: PD.MappedStatic('source-cif', {
+                'source-cif': PD.EmptyGroup(),
+                'url': PD.Group({
+                    url: PD.Text(''),
+                    format: MVSAnnotationFormat.PDSelect(),
+                }),
+            }),
+            schema: MVSAnnotationSchema.PDSelect(),
+            cifBlock: PD.MappedStatic('index', {
+                index: PD.Group({ index: PD.Numeric(0, { min: 0, step: 1 }, { description: '0-based index of the block' }) }),
+                header: PD.Group({ header: PD.Text(undefined, { description: 'Block header' }) }),
+            }, { description: 'Specify which CIF block contains annotation data (only relevant when format=cif or format=bcif)' }),
+            cifCategory: MaybeStringParamDefinition(undefined, { description: 'Specify which CIF category contains annotation data (only relevant when format=cif or format=bcif)' }),
+            id: PD.Text('', { description: 'Arbitrary identifier that can be referenced by MVSAnnotationColorTheme' }),
+        },
+        obj => obj.id
+    ),
+};
+
+/** Parameter values for custom model property "MVS Annotations" */
+export type MVSAnnotationsProps = PD.Values<MVSAnnotationsParams>
+
+/** Parameter values for a single annotation within custom model property "MVS Annotations" */
+export type MVSAnnotationSpec = MVSAnnotationsProps['annotations'][number]
+
+/** Describes the source of an annotation file */
+type MVSAnnotationSource = { kind: 'url', url: string, format: MVSAnnotationFormat } | { kind: 'source-cif' }
+
+/** Data file with one or more (in case of CIF) annotations */
+type MVSAnnotationFile = { format: 'json', data: Jsonable } | { format: 'cif', data: CifFile }
+
+/** Data for a single annotation */
+type MVSAnnotationData = { format: 'json', data: Jsonable } | { format: 'cif', data: CifCategory }
+
+
+/** Provider for custom model property "Annotations" */
+export const MVSAnnotationsProvider: CustomModelProperty.Provider<MVSAnnotationsParams, MVSAnnotations> = CustomModelProperty.createProvider({
+    label: 'Annotations',
+    descriptor: CustomPropertyDescriptor({
+        name: 'mvs-annotations',
+    }),
+    type: 'static',
+    defaultParams: MVSAnnotationsParams,
+    getParams: (data: Model) => MVSAnnotationsParams,
+    isApplicable: (data: Model) => true,
+    obtain: async (ctx: CustomProperty.Context, data: Model, props: Partial<MVSAnnotationsProps>) => {
+        props = { ...PD.getDefaultValues(MVSAnnotationsParams), ...props };
+        const specs: MVSAnnotationSpec[] = props.annotations ?? [];
+        const annots = await MVSAnnotations.fromSpecs(ctx, specs, data);
+        return { value: annots } satisfies CustomProperty.Data<MVSAnnotations>;
+    }
+});
+
+
+/** Represents multiple annotations retrievable by their ID */
+export class MVSAnnotations {
+    private constructor(private dict: { [id: string]: MVSAnnotation }) { }
+    static async fromSpecs(ctx: CustomProperty.Context, specs: MVSAnnotationSpec[], model?: Model): Promise<MVSAnnotations> {
+        const sources: MVSAnnotationSource[] = specs.map(annotationSourceFromSpec);
+        const files = await getFilesFromSources(ctx, sources, model);
+        const annots: { [id: string]: MVSAnnotation } = {};
+        for (let i = 0; i < specs.length; i++) {
+            const spec = specs[i];
+            try {
+                const file = files[i];
+                if (!file.ok) throw file.error;
+                annots[spec.id] = await MVSAnnotation.fromSpec(ctx, spec, file.value);
+            } catch (err) {
+                console.error(`Failed to obtain annotation (${err}).\nAnnotation specification:`, spec);
+                annots[spec.id] = MVSAnnotation.createEmpty(spec.schema);
+            }
+        }
+        return new MVSAnnotations(annots);
+    }
+    getAnnotation(id: string): MVSAnnotation | undefined {
+        return this.dict[id];
+    }
+    getAllAnnotations(): MVSAnnotation[] {
+        return Object.values(this.dict);
+    }
+}
+
+
+/** Retrieve annotation with given `annotationId` from custom model property "MVS Annotations" and the model from which it comes */
+export function getMVSAnnotationForStructure(structure: Structure, annotationId: string): { annotation: MVSAnnotation, model: Model } | { annotation: undefined, model: undefined } {
+    const models = structure.isEmpty ? [] : structure.models;
+    for (const model of models) {
+        if (model.customProperties.has(MVSAnnotationsProvider.descriptor)) {
+            const annots = MVSAnnotationsProvider.get(model).value;
+            const annotation = annots?.getAnnotation(annotationId);
+            if (annotation) {
+                return { annotation, model };
+            }
+        }
+    }
+    return { annotation: undefined, model: undefined };
+}
+
+/** Main class for processing MVS annotation */
+export class MVSAnnotation {
+    /** Store mapping `ElementIndex` -> annotation row index for each `Model`, -1 means no row applies */
+    private indexedModels = new Map<UUID, number[]>();
+    private rows: MVSAnnotationRow[] | undefined = undefined;
+
+    constructor(
+        public data: MVSAnnotationData,
+        public schema: MVSAnnotationSchema,
+    ) { }
+
+    /** Create a new `MVSAnnotation` based on specification `spec`. Use `file` if provided, otherwise download the file.
+     * Throw error if download fails or problem with data. */
+    static async fromSpec(ctx: CustomProperty.Context, spec: MVSAnnotationSpec, file?: MVSAnnotationFile): Promise<MVSAnnotation> {
+        file ??= await getFileFromSource(ctx, annotationSourceFromSpec(spec));
+
+        let data: MVSAnnotationData;
+        switch (file.format) {
+            case 'json':
+                data = file;
+                break;
+            case 'cif':
+                if (file.data.blocks.length === 0) throw new Error('No block in CIF');
+                const blockSpec = spec.cifBlock;
+                let block: CifBlock;
+                switch (blockSpec.name) {
+                    case 'header':
+                        const foundBlock = file.data.blocks.find(b => b.header === blockSpec.params.header);
+                        if (!foundBlock) throw new Error(`CIF block with header ${blockSpec.params.header} not found`);
+                        block = foundBlock;
+                        break;
+                    case 'index':
+                        block = file.data.blocks[blockSpec.params.index];
+                        if (!block) throw new Error(`CIF block with index ${blockSpec.params.index} not found`);
+                        break;
+                }
+                const categoryName = spec.cifCategory ?? Object.keys(block.categories)[0];
+                if (!categoryName) throw new Error('There are no categories in CIF block');
+                const category = block.categories[categoryName];
+                if (!category) throw new Error(`CIF category ${categoryName} not found`);
+                data = { format: 'cif', data: category };
+                break;
+        }
+        return new MVSAnnotation(data, spec.schema);
+    }
+
+    static createEmpty(schema: MVSAnnotationSchema): MVSAnnotation {
+        return new MVSAnnotation({ format: 'json', data: [] }, schema);
+    }
+
+    /** Reference implementation of `getAnnotationForLocation`, just for checking, DO NOT USE DIRECTLY */
+    getAnnotationForLocation_Reference(loc: StructureElement.Location): MVSAnnotationRow | undefined {
+        const model = loc.unit.model;
+        const iAtom = loc.element;
+        let result: MVSAnnotationRow | undefined = undefined;
+        for (const row of this.getRows()) {
+            if (atomQualifies(model, iAtom, row)) result = row;
+        }
+        return result;
+    }
+
+    /** Return value of field `fieldName` assigned to location `loc`, if any */
+    getValueForLocation(loc: StructureElement.Location, fieldName: string): string | undefined {
+        const indexedModel = this.getIndexedModel(loc.unit.model);
+        const iRow = indexedModel[loc.element];
+        return this.getValueForRow(iRow, fieldName);
+    }
+    /** Return value of field `fieldName` assigned to `i`-th annotation row, if any */
+    getValueForRow(i: number, fieldName: string): string | undefined {
+        if (i < 0) return undefined;
+        switch (this.data.format) {
+            case 'json':
+                const value = getValueFromJson(i, fieldName, this.data.data);
+                if (value === undefined || typeof value === 'string') return value;
+                else return `${value}`;
+            case 'cif':
+                return getValueFromCif(i, fieldName, this.data.data);
+        }
+    }
+
+    /** Return cached `ElementIndex` -> `MVSAnnotationRow` mapping for `Model` (or create it if not cached yet) */
+    private getIndexedModel(model: Model): number[] {
+        const key = model.id;
+        if (!this.indexedModels.has(key)) {
+            const result = this.getRowForEachAtom(model);
+            this.indexedModels.set(key, result);
+        }
+        return this.indexedModels.get(key)!;
+    }
+
+    /** Create `ElementIndex` -> `MVSAnnotationRow` mapping for `Model` */
+    private getRowForEachAtom(model: Model): number[] {
+        const indices = IndicesAndSortings.get(model);
+        const nAtoms = model.atomicHierarchy.atoms._rowCount;
+        const result: number[] = Array(nAtoms).fill(-1);
+        const rows = this.getRows();
+        for (let i = 0, nRows = rows.length; i < nRows; i++) {
+            const atomRanges = getAtomRangesForRow(model, rows[i], indices);
+            AtomRanges.foreach(atomRanges, (from, to) => result.fill(i, from, to));
+        }
+        return result;
+    }
+
+    /** Parse and return all annotation rows in this annotation */
+    private _getRows(): MVSAnnotationRow[] {
+        switch (this.data.format) {
+            case 'json':
+                return getRowsFromJson(this.data.data, this.schema);
+            case 'cif':
+                return getRowsFromCif(this.data.data, this.schema);
+        }
+    }
+    /** Parse and return all annotation rows in this annotation, or return cached result if available */
+    getRows(): readonly MVSAnnotationRow[] {
+        return this.rows ??= this._getRows();
+    }
+}
+
+function getValueFromJson<T>(rowIndex: number, fieldName: string, data: Jsonable): T | undefined {
+    const js = data as any;
+    if (Array.isArray(js)) {
+        const row = js[rowIndex] ?? {};
+        return row[fieldName];
+    } else {
+        const column = js[fieldName] ?? [];
+        return column[rowIndex];
+    }
+}
+function getValueFromCif(rowIndex: number, fieldName: string, data: CifCategory): string | undefined {
+    const column = data.getField(fieldName);
+    if (!column) return undefined;
+    if (column.valueKind(rowIndex) !== Column.ValueKind.Present) return undefined;
+    return column.str(rowIndex);
+}
+
+function getRowsFromJson(data: Jsonable, schema: MVSAnnotationSchema): MVSAnnotationRow[] {
+    const js = data as any;
+    const cifSchema = getCifAnnotationSchema(schema);
+    if (Array.isArray(js)) {
+        // array of objects
+        return js.map(row => pickObjectKeys(row, Object.keys(cifSchema)));
+    } else {
+        // object of arrays
+        const rows: MVSAnnotationRow[] = [];
+        const keys = Object.keys(js).filter(key => Object.hasOwn(cifSchema, key as any));
+        if (keys.length > 0) {
+            const n = js[keys[0]].length;
+            if (keys.some(key => js[key].length !== n)) throw new Error('FormatError: arrays must have the same length.');
+            for (let i = 0; i < n; i++) {
+                const item: { [key: string]: any } = {};
+                for (const key of keys) {
+                    item[key] = js[key][i];
+                }
+                rows.push(item);
+            }
+        }
+        return rows;
+    }
+}
+
+function getRowsFromCif(data: CifCategory, schema: MVSAnnotationSchema): MVSAnnotationRow[] {
+    const rows: MVSAnnotationRow[] = [];
+    const cifSchema = getCifAnnotationSchema(schema);
+    const table = toTable(cifSchema, data);
+    arrayExtend(rows, getRowsFromTable(table)); // Avoiding Table.getRows(table) as it replaces . and ? fields by 0 or ''
+    return rows;
+}
+
+/** Same as `Table.getRows` but omits `.` and `?` fields (instead of using type defaults) */
+function getRowsFromTable<S extends Table.Schema>(table: Table<S>): Partial<Table.Row<S>>[] {
+    const rows: Partial<Table.Row<S>>[] = [];
+    const columns = table._columns;
+    const nRows = table._rowCount;
+    const Present = Column.ValueKind.Present;
+    for (let iRow = 0; iRow < nRows; iRow++) {
+        const row: Partial<Table.Row<S>> = {};
+        for (const col of columns) {
+            if (table[col].valueKind(iRow) === Present) {
+                row[col as keyof S] = table[col].value(iRow);
+            }
+        }
+        rows[iRow] = row;
+    }
+    return rows;
+}
+
+async function getFileFromSource(ctx: CustomProperty.Context, source: MVSAnnotationSource, model?: Model): Promise<MVSAnnotationFile> {
+    switch (source.kind) {
+        case 'source-cif':
+            return { format: 'cif', data: getSourceFileFromModel(model) };
+        case 'url':
+            const url = Asset.getUrlAsset(ctx.assetManager, source.url);
+            const dataType = MVSAnnotationFormatTypes[source.format];
+            const dataWrapper = await ctx.assetManager.resolve(url, dataType).runInContext(ctx.runtime);
+            const rawData = dataWrapper.data;
+            if (!rawData) throw new Error('Missing data');
+            switch (source.format) {
+                case 'json':
+                    const json = JSON.parse(rawData as string) as Jsonable;
+                    return { format: 'json', data: json };
+                case 'cif':
+                case 'bcif':
+                    const parsed = await CIF.parse(rawData).run();
+                    if (parsed.isError) throw new Error(`Failed to parse ${source.format}`);
+                    return { format: 'cif', data: parsed.result };
+            }
+    }
+}
+
+/** Like `sources.map(s => safePromise(getFileFromSource(ctx, s)))`
+ * but downloads a repeating source only once. */
+async function getFilesFromSources(ctx: CustomProperty.Context, sources: MVSAnnotationSource[], model?: Model): Promise<Maybe<MVSAnnotationFile>[]> {
+    const promises: { [key: string]: Promise<Maybe<MVSAnnotationFile>> } = {};
+    for (const src of sources) {
+        const key = canonicalJsonString(src);
+        promises[key] ??= safePromise(getFileFromSource(ctx, src, model));
+    }
+    const files = await promiseAllObj(promises);
+    return sources.map(src => files[canonicalJsonString(src)]);
+}
+
+function getSourceFileFromModel(model?: Model): CifFile {
+    if (model && MmcifFormat.is(model.sourceData)) {
+        if (model.sourceData.data.file) {
+            return model.sourceData.data.file;
+        } else {
+            const frame = model.sourceData.data.frame;
+            const block = CifBlock(Array.from(frame.categoryNames), frame.categories, frame.header);
+            const file = CifFile([block]);
+            return file;
+        }
+    } else {
+        console.warn('Could not get CifFile from Model, returning empty CifFile');
+        return CifFile([]);
+    }
+}
+
+function annotationSourceFromSpec(s: MVSAnnotationSpec): MVSAnnotationSource {
+    switch (s.source.name) {
+        case 'url':
+            return { kind: 'url', ...s.source.params };
+        case 'source-cif':
+            return { kind: 'source-cif' };
+    }
+}

src/extensions/mvs/components/annotation-structure-component.ts

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Structure, StructureSelection } from '../../../mol-model/structure';
+import { StructureQueryHelper } from '../../../mol-plugin-state/helpers/structure-query';
+import { PluginStateObject as SO } from '../../../mol-plugin-state/objects';
+import { StateObject, StateTransformer } from '../../../mol-state';
+import { deepEqual } from '../../../mol-util';
+import { omitObjectKeys } from '../../../mol-util/object';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { rowsToExpression } from '../helpers/selections';
+import { getMVSAnnotationForStructure } from './annotation-prop';
+
+
+/** Parameter definition for `MVSAnnotationStructureComponent` transformer */
+export const MVSAnnotationStructureComponentParams = {
+    annotationId: PD.Text('', { description: 'Reference to "Annotation" custom model property' }),
+    fieldName: PD.Text('component', { description: 'Annotation field (column) from which to take component identifier' }),
+    fieldValues: PD.MappedStatic('all', {
+        all: PD.EmptyGroup(),
+        selected: PD.ObjectList({
+            value: PD.Text(),
+        }, obj => obj.value),
+    }),
+    nullIfEmpty: PD.Optional(PD.Boolean(true, { isHidden: false })),
+    label: PD.Text('', { isHidden: false }),
+};
+
+/** Parameter values for `MVSAnnotationStructureComponent` transformer */
+export type MVSAnnotationStructureComponentProps = PD.ValuesFor<typeof MVSAnnotationStructureComponentParams>
+
+
+/** Transformer builder for MVS extension */
+export const MVSTransform = StateTransformer.builderFactory('mvs');
+
+/** Transformer for creating a structure component based on custom model property "Annotations" */
+export type MVSAnnotationStructureComponent = typeof MVSAnnotationStructureComponent
+export const MVSAnnotationStructureComponent = MVSTransform({
+    name: 'mvs-structure-component-from-annotation',
+    display: { name: 'MVS Annotation Component', description: 'A molecular structure component defined by MVS annotation data.' },
+    from: SO.Molecule.Structure,
+    to: SO.Molecule.Structure,
+    params: MVSAnnotationStructureComponentParams,
+})({
+    apply({ a, params }) {
+        return createMVSAnnotationStructureComponent(a.data, params);
+    },
+    update: ({ a, b, oldParams, newParams }) => {
+        return updateMVSAnnotationStructureComponent(a.data, b, oldParams, newParams);
+    },
+    dispose({ b }) {
+        b?.data.customPropertyDescriptors.dispose();
+    }
+});
+
+
+/** Create a substructure based on `MVSAnnotationStructureComponentProps` */
+export function createMVSAnnotationSubstructure(structure: Structure, params: MVSAnnotationStructureComponentProps): Structure {
+    const { annotation } = getMVSAnnotationForStructure(structure, params.annotationId);
+    if (annotation) {
+        let rows = annotation.getRows();
+        if (params.fieldValues.name === 'selected') {
+            const selectedValues = new Set<string | undefined>(params.fieldValues.params.map(obj => obj.value));
+            rows = rows.filter((row, i) => selectedValues.has(annotation.getValueForRow(i, params.fieldName)));
+        }
+        const expression = rowsToExpression(rows);
+
+        const { selection } = StructureQueryHelper.createAndRun(structure, expression);
+        return StructureSelection.unionStructure(selection);
+    } else {
+        return Structure.Empty;
+    }
+}
+
+/** Create a substructure PSO based on `MVSAnnotationStructureComponentProps` */
+export function createMVSAnnotationStructureComponent(structure: Structure, params: MVSAnnotationStructureComponentProps) {
+    const component = createMVSAnnotationSubstructure(structure, params);
+
+    if (params.nullIfEmpty && component.elementCount === 0) return StateObject.Null;
+
+    let label = params.label;
+    if (label === undefined || label === '') {
+        if (params.fieldValues.name === 'selected' && params.fieldValues.params.length > 0) {
+            const ellipsis = params.fieldValues.params.length > 1 ? '+...' : '';
+            label = `${params.fieldName}: "${params.fieldValues.params[0].value}"${ellipsis}`;
+        } else {
+            label = 'Component from MVS Annotation';
+        }
+    }
+
+    const props = { label, description: Structure.elementDescription(component) };
+    return new SO.Molecule.Structure(component, props);
+}
+
+/** Update a substructure PSO based on `MVSAnnotationStructureComponentProps` */
+export function updateMVSAnnotationStructureComponent(a: Structure, b: SO.Molecule.Structure, oldParams: MVSAnnotationStructureComponentProps, newParams: MVSAnnotationStructureComponentProps) {
+    const change = !deepEqual(newParams, oldParams);
+    const needsRecreate = !deepEqual(omitObjectKeys(newParams, ['label']), omitObjectKeys(oldParams, ['label']));
+    if (!change) {
+        return StateTransformer.UpdateResult.Unchanged;
+    }
+    if (!needsRecreate) {
+        b.label = newParams.label || b.label;
+        return StateTransformer.UpdateResult.Updated;
+    }
+    return StateTransformer.UpdateResult.Recreate;
+}

src/extensions/mvs/components/annotation-tooltips-prop.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { CustomProperty } from '../../../mol-model-props/common/custom-property';
+import { CustomStructureProperty } from '../../../mol-model-props/common/custom-structure-property';
+import { CustomPropertyDescriptor } from '../../../mol-model/custom-property';
+import { Loci } from '../../../mol-model/loci';
+import { Structure, StructureElement } from '../../../mol-model/structure';
+import { LociLabelProvider } from '../../../mol-plugin-state/manager/loci-label';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { filterDefined } from '../helpers/utils';
+import { MVSAnnotationsProvider } from './annotation-prop';
+
+
+/** Parameter definition for custom structure property "MVSAnnotationTooltips" */
+export const MVSAnnotationTooltipsParams = {
+    tooltips: PD.ObjectList(
+        {
+            annotationId: PD.Text('', { description: 'Reference to "MVS Annotation" custom model property' }),
+            fieldName: PD.Text('tooltip', { description: 'Annotation field (column) from which to take color values' }),
+        },
+        obj => `${obj.annotationId}:${obj.fieldName}`
+    ),
+};
+export type MVSAnnotationTooltipsParams = typeof MVSAnnotationTooltipsParams
+
+/** Values of custom structure property "MVSAnnotationTooltips" (and for its params at the same type) */
+export type MVSAnnotationTooltipsProps = PD.Values<MVSAnnotationTooltipsParams>
+
+
+/** Provider for custom structure property "MVSAnnotationTooltips" */
+export const MVSAnnotationTooltipsProvider: CustomStructureProperty.Provider<MVSAnnotationTooltipsParams, MVSAnnotationTooltipsProps> = CustomStructureProperty.createProvider({
+    label: 'MVS Annotation Tooltips',
+    descriptor: CustomPropertyDescriptor<any, any>({
+        name: 'mvs-annotation-tooltips',
+    }),
+    type: 'local',
+    defaultParams: MVSAnnotationTooltipsParams,
+    getParams: (data: Structure) => MVSAnnotationTooltipsParams,
+    isApplicable: (data: Structure) => data.root === data,
+    obtain: async (ctx: CustomProperty.Context, data: Structure, props: Partial<MVSAnnotationTooltipsProps>) => {
+        const fullProps = { ...PD.getDefaultValues(MVSAnnotationTooltipsParams), ...props };
+        return { value: fullProps } satisfies CustomProperty.Data<MVSAnnotationTooltipsProps>;
+    },
+});
+
+
+/** Label provider based on data from "MVS Annotation" custom model property */
+export const MVSAnnotationTooltipsLabelProvider = {
+    label: (loci: Loci): string | undefined => {
+        switch (loci.kind) {
+            case 'element-loci':
+                if (!loci.structure.customPropertyDescriptors.hasReference(MVSAnnotationTooltipsProvider.descriptor)) return undefined;
+                const location = StructureElement.Loci.getFirstLocation(loci);
+                if (!location) return undefined;
+                const tooltipProps = MVSAnnotationTooltipsProvider.get(location.structure).value;
+                if (!tooltipProps || tooltipProps.tooltips.length === 0) return undefined;
+                const annotations = MVSAnnotationsProvider.get(location.unit.model).value;
+                const texts = tooltipProps.tooltips.map(p => annotations?.getAnnotation(p.annotationId)?.getValueForLocation(location, p.fieldName));
+                return filterDefined(texts).join(' | ');
+            default:
+                return undefined;
+        }
+    }
+} satisfies LociLabelProvider;

src/extensions/mvs/components/custom-label/representation.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Structure } from '../../../../mol-model/structure';
+import { Representation, RepresentationContext, RepresentationParamsGetter } from '../../../../mol-repr/representation';
+import { ComplexRepresentation, StructureRepresentation, StructureRepresentationProvider, StructureRepresentationStateBuilder } from '../../../../mol-repr/structure/representation';
+import { MarkerAction } from '../../../../mol-util/marker-action';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { CustomLabelTextParams, CustomLabelTextVisual } from './visual';
+
+
+/** Components of "Custom Label" representation */
+const CustomLabelVisuals = {
+    'label-text': (ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CustomLabelTextParams>) => ComplexRepresentation('Label text', ctx, getParams, CustomLabelTextVisual),
+};
+
+/** Parameter definition for representation type "Custom Label" */
+export type CustomLabelParams = typeof CustomLabelParams
+export const CustomLabelParams = {
+    ...CustomLabelTextParams,
+    visuals: PD.MultiSelect(['label-text'], PD.objectToOptions(CustomLabelVisuals)),
+};
+
+/** Parameter values for representation type "Custom Label" */
+export type CustomLabelProps = PD.ValuesFor<CustomLabelParams>
+
+/** Structure representation type "Custom Label", allowing user-defined labels at at user-defined positions */
+export type CustomLabelRepresentation = StructureRepresentation<CustomLabelParams>
+export function CustomLabelRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, CustomLabelParams>): CustomLabelRepresentation {
+    const repr = Representation.createMulti('Label', ctx, getParams, StructureRepresentationStateBuilder, CustomLabelVisuals as unknown as Representation.Def<Structure, CustomLabelParams>);
+    repr.setState({ pickable: false, markerActions: MarkerAction.None });
+    return repr;
+}
+
+/** A thingy that is needed to register representation type "Custom Label", allowing user-defined labels at at user-defined positions */
+export const CustomLabelRepresentationProvider = StructureRepresentationProvider({
+    name: 'mvs-custom-label',
+    label: 'Custom Label',
+    description: 'Displays labels with custom text',
+    factory: CustomLabelRepresentation,
+    getParams: () => CustomLabelParams,
+    defaultValues: PD.getDefaultValues(CustomLabelParams),
+    defaultColorTheme: { name: 'uniform' },
+    defaultSizeTheme: { name: 'physical' },
+    isApplicable: (structure: Structure) => structure.elementCount > 0
+});

src/extensions/mvs/components/custom-label/visual.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Text } from '../../../../mol-geo/geometry/text/text';
+import { TextBuilder } from '../../../../mol-geo/geometry/text/text-builder';
+import { Structure } from '../../../../mol-model/structure';
+import { ComplexTextVisual, ComplexVisual } from '../../../../mol-repr/structure/complex-visual';
+import * as Original from '../../../../mol-repr/structure/visual/label-text';
+import { ElementIterator, eachSerialElement, getSerialElementLoci } from '../../../../mol-repr/structure/visual/util/element';
+import { VisualUpdateState } from '../../../../mol-repr/util';
+import { VisualContext } from '../../../../mol-repr/visual';
+import { Theme } from '../../../../mol-theme/theme';
+import { deepEqual } from '../../../../mol-util';
+import { ColorNames } from '../../../../mol-util/color/names';
+import { omitObjectKeys } from '../../../../mol-util/object';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { textPropsForSelection } from '../../helpers/label-text';
+import { MaybeIntegerParamDefinition, MaybeStringParamDefinition } from '../../helpers/param-definition';
+
+
+/** Parameter definition for "label-text" visual in "Custom Label" representation */
+export type CustomLabelTextParams = typeof CustomLabelTextParams
+export const CustomLabelTextParams = {
+    items: PD.ObjectList(
+        {
+            text: PD.Text('¯\\_(ツ)_/¯'),
+            position: PD.MappedStatic('selection', {
+                x_y_z: PD.Group({
+                    x: PD.Numeric(0),
+                    y: PD.Numeric(0),
+                    z: PD.Numeric(0),
+                    scale: PD.Numeric(1, { min: 0, max: 20, step: 0.1 })
+                }),
+                selection: PD.Group({
+                    label_entity_id: MaybeStringParamDefinition(),
+                    label_asym_id: MaybeStringParamDefinition(),
+                    auth_asym_id: MaybeStringParamDefinition(),
+
+                    label_seq_id: MaybeIntegerParamDefinition(),
+                    auth_seq_id: MaybeIntegerParamDefinition(),
+                    pdbx_PDB_ins_code: MaybeStringParamDefinition(),
+                    /** Minimum label_seq_id (inclusive) */
+                    beg_label_seq_id: MaybeIntegerParamDefinition(undefined, { description: 'Minimum label_seq_id (inclusive)' }),
+                    /** Maximum label_seq_id (inclusive) */
+                    end_label_seq_id: MaybeIntegerParamDefinition(),
+                    /** Minimum auth_seq_id (inclusive) */
+                    beg_auth_seq_id: MaybeIntegerParamDefinition(),
+                    /** Maximum auth_seq_id (inclusive) */
+                    end_auth_seq_id: MaybeIntegerParamDefinition(),
+
+                    /** Atom name like 'CA', 'N', 'O'... */
+                    label_atom_id: MaybeStringParamDefinition(),
+                    /** Atom name like 'CA', 'N', 'O'... */
+                    auth_atom_id: MaybeStringParamDefinition(),
+                    /** Element symbol like 'H', 'HE', 'LI', 'BE'... */
+                    type_symbol: MaybeStringParamDefinition(),
+                    /** Unique atom identifier across conformations (_atom_site.id) */
+                    atom_id: MaybeIntegerParamDefinition(),
+                    /** 0-base index of the atom in the source data */
+                    atom_index: MaybeIntegerParamDefinition(),
+
+                }),
+            }),
+        },
+        obj => obj.text,
+        { isEssential: true }
+    ),
+    ...omitObjectKeys(Original.LabelTextParams, ['level', 'chainScale', 'residueScale', 'elementScale']),
+    borderColor: { ...Original.LabelTextParams.borderColor, defaultValue: ColorNames.black },
+};
+
+/** Parameter values for "label-text" visual in "Custom Label" representation */
+export type CustomLabelTextProps = PD.Values<CustomLabelTextParams>
+
+/** Create "label-text" visual for "Custom Label" representation */
+export function CustomLabelTextVisual(materialId: number): ComplexVisual<CustomLabelTextParams> {
+    return ComplexTextVisual<CustomLabelTextParams>({
+        defaultProps: PD.getDefaultValues(CustomLabelTextParams),
+        createGeometry: createLabelText,
+        createLocationIterator: ElementIterator.fromStructure,
+        getLoci: getSerialElementLoci,
+        eachLocation: eachSerialElement,
+        setUpdateState: (state: VisualUpdateState, newProps: PD.Values<CustomLabelTextParams>, currentProps: PD.Values<CustomLabelTextParams>) => {
+            state.createGeometry = !deepEqual(newProps.items, currentProps.items);
+        }
+    }, materialId);
+}
+
+function createLabelText(ctx: VisualContext, structure: Structure, theme: Theme, props: CustomLabelTextProps, text?: Text): Text {
+    const count = props.items.length;
+    const builder = TextBuilder.create(props, count, count / 2, text);
+    for (const item of props.items) {
+        switch (item.position.name) {
+            case 'x_y_z':
+                const scale = item.position.params.scale;
+                builder.add(item.text, item.position.params.x, item.position.params.y, item.position.params.z, scale, scale, 0);
+                break;
+            case 'selection':
+                const p = textPropsForSelection(structure, theme.size.size, item.position.params);
+                if (p) builder.add(item.text, p.center[0], p.center[1], p.center[2], p.depth, p.scale, p.group);
+                break;
+        }
+    }
+    return builder.getText();
+}

src/extensions/mvs/components/custom-tooltips-prop.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { CustomProperty } from '../../../mol-model-props/common/custom-property';
+import { CustomStructureProperty } from '../../../mol-model-props/common/custom-structure-property';
+import { CustomPropertyDescriptor } from '../../../mol-model/custom-property';
+import { Loci } from '../../../mol-model/loci';
+import { Structure, StructureElement } from '../../../mol-model/structure';
+import { LociLabelProvider } from '../../../mol-plugin-state/manager/loci-label';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { filterDefined } from '../helpers/utils';
+import { ElementSet, Selector, SelectorParams } from './selector';
+
+
+/** Parameter definition for custom structure property "CustomTooltips" */
+export type CustomTooltipsParams = typeof CustomTooltipsParams
+export const CustomTooltipsParams = {
+    tooltips: PD.ObjectList(
+        {
+            text: PD.Text('', { description: 'Text of the tooltip' }),
+            selector: SelectorParams,
+        },
+        obj => obj.text
+    ),
+};
+
+/** Parameter values of custom structure property "CustomTooltips" */
+export type CustomTooltipsProps = PD.Values<CustomTooltipsParams>
+
+/** Values of custom structure property "CustomTooltips" (and for its params at the same type) */
+export type CustomTooltipsData = { selector: Selector, text: string, elementSet?: ElementSet }[]
+
+
+/** Provider for custom structure property "CustomTooltips" */
+export const CustomTooltipsProvider: CustomStructureProperty.Provider<CustomTooltipsParams, CustomTooltipsData> = CustomStructureProperty.createProvider({
+    label: 'Custom Tooltips',
+    descriptor: CustomPropertyDescriptor<any, any>({
+        name: 'mvs-custom-tooltips',
+    }),
+    type: 'local',
+    defaultParams: CustomTooltipsParams,
+    getParams: (data: Structure) => CustomTooltipsParams,
+    isApplicable: (data: Structure) => data.root === data,
+    obtain: async (ctx: CustomProperty.Context, data: Structure, props: Partial<CustomTooltipsProps>) => {
+        const fullProps = { ...PD.getDefaultValues(CustomTooltipsParams), ...props };
+        const value = fullProps.tooltips.map(t => ({
+            selector: t.selector,
+            text: t.text,
+        } satisfies CustomTooltipsData[number]));
+        return { value: value } satisfies CustomProperty.Data<CustomTooltipsData>;
+    },
+});
+
+
+/** Label provider based on custom structure property "CustomTooltips" */
+export const CustomTooltipsLabelProvider = {
+    label: (loci: Loci): string | undefined => {
+        switch (loci.kind) {
+            case 'element-loci':
+                if (!loci.structure.customPropertyDescriptors.hasReference(CustomTooltipsProvider.descriptor)) return undefined;
+                const location = StructureElement.Loci.getFirstLocation(loci);
+                if (!location) return undefined;
+                const tooltipData = CustomTooltipsProvider.get(location.structure).value;
+                if (!tooltipData || tooltipData.length === 0) return undefined;
+                const texts = [];
+                for (const tooltip of tooltipData) {
+                    const elements = tooltip.elementSet ??= ElementSet.fromSelector(location.structure, tooltip.selector);
+                    if (ElementSet.has(elements, location)) texts.push(tooltip.text);
+                }
+                return filterDefined(texts).join(' | ');
+            default:
+                return undefined;
+        }
+    }
+} satisfies LociLabelProvider;

src/extensions/mvs/components/multilayer-color-theme.ts

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Location } from '../../../mol-model/location';
+import { Bond, Structure, StructureElement } from '../../../mol-model/structure';
+import { ColorTheme, LocationColor } from '../../../mol-theme/color';
+import { ThemeDataContext } from '../../../mol-theme/theme';
+import { Color } from '../../../mol-util/color';
+import { ColorNames } from '../../../mol-util/color/names';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { stringToWords } from '../../../mol-util/string';
+import { ElementSet, SelectorParams, isSelectorAll } from './selector';
+
+
+/** Special value that can be used as color with null-like semantic (i.e. "no color provided").
+ * By some lucky coincidence, Mol* treats -1 as white. */
+export const NoColor = Color(-1);
+
+/** Return true if `color` is a real color, false if it is `NoColor`. */
+function isValidColor(color: Color): boolean {
+    return color >= 0;
+}
+
+const DefaultBackgroundColor = ColorNames.white;
+
+/** Parameter definition for color theme "Multilayer" */
+export function makeMultilayerColorThemeParams(colorThemeRegistry: ColorTheme.Registry, ctx: ThemeDataContext) {
+    const colorThemeInfo = {
+        help: (value: { name: string, params: {} }) => {
+            const { name, params } = value;
+            const p = colorThemeRegistry.get(name);
+            const ct = p.factory({}, params);
+            return { description: ct.description, legend: ct.legend };
+        }
+    };
+    const nestedThemeTypes = colorThemeRegistry.types.filter(([name, label, category]) => name !== MultilayerColorThemeName && colorThemeRegistry.get(name).isApplicable(ctx)); // Adding 'multilayer' theme itself would cause infinite recursion
+    return {
+        layers: PD.ObjectList(
+            {
+                theme: PD.Mapped<any>(
+                    'uniform',
+                    nestedThemeTypes,
+                    name => PD.Group<any>(colorThemeRegistry.get(name).getParams({ structure: Structure.Empty })),
+                    colorThemeInfo),
+                selection: SelectorParams,
+            },
+            obj => stringToWords(obj.theme.name),
+            { description: 'A list of layers, each defining a color theme. The last listed layer is the top layer (applies first). If the top layer does not provide color for a location or its selection does not cover the location, the underneath layers will apply.' }),
+        background: PD.Color(DefaultBackgroundColor, { description: 'Color for elements where no layer applies' }),
+    };
+}
+/** Parameter definition for color theme "Multilayer" */
+export type MultilayerColorThemeParams = ReturnType<typeof makeMultilayerColorThemeParams>
+
+/** Parameter values for color theme "Multilayer" */
+export type MultilayerColorThemeProps = PD.Values<MultilayerColorThemeParams>
+
+/** Default values for `MultilayerColorThemeProps` */
+export const DefaultMultilayerColorThemeProps: MultilayerColorThemeProps = { layers: [], background: DefaultBackgroundColor };
+
+
+/** Return color theme that assigns colors based on a list of nested color themes (layers).
+ * The last layer in the list whose selection covers the given location
+ * and which provides a valid (non-negative) color value will be used.
+ * If a nested theme provider has `ensureCustomProperties` methods, these will not be called automatically
+ * (the caller must ensure that any required custom properties be attached). */
+function makeMultilayerColorTheme(ctx: ThemeDataContext, props: MultilayerColorThemeProps, colorThemeRegistry: ColorTheme.Registry): ColorTheme<MultilayerColorThemeParams> {
+    const colorLayers: { color: LocationColor, elementSet: ElementSet | undefined }[] = []; // undefined elementSet means 'all'
+    for (let i = props.layers.length - 1; i >= 0; i--) { // iterate from end to get top layer first, bottom layer last
+        const layer = props.layers[i];
+        const themeProvider = colorThemeRegistry.get(layer.theme.name);
+        if (!themeProvider) {
+            console.warn(`Skipping color theme '${layer.theme.name}', cannot find it in registry.`);
+            continue;
+        }
+        if (themeProvider.ensureCustomProperties?.attach) {
+            console.warn(`Multilayer color theme: layer "${themeProvider.name}" has ensureCustomProperties.attach method, but Multilayer color theme does not call it. If the layer does not work, make sure you call ensureCustomProperties.attach somewhere.`);
+        }
+        const theme = themeProvider.factory(ctx, layer.theme.params);
+        switch (theme.granularity) {
+            case 'uniform':
+            case 'instance':
+            case 'group':
+            case 'groupInstance':
+            case 'vertex':
+            case 'vertexInstance':
+                const elementSet = isSelectorAll(layer.selection) ? undefined : ElementSet.fromSelector(ctx.structure, layer.selection); // treating 'all' specially for performance reasons (it's expected to be used most often)
+                colorLayers.push({ color: theme.color, elementSet });
+                break;
+            default:
+                console.warn(`Skipping color theme '${layer.theme.name}', cannot process granularity '${theme.granularity}'`);
+        }
+    };
+
+    function structureElementColor(loc: StructureElement.Location, isSecondary: boolean): Color {
+        for (const layer of colorLayers) {
+            const matches = !layer.elementSet || ElementSet.has(layer.elementSet, loc);
+            if (!matches) continue;
+            const color = layer.color(loc, isSecondary);
+            if (!isValidColor(color)) continue;
+            return color;
+        }
+        return props.background;
+    }
+    const auxLocation = StructureElement.Location.create(ctx.structure);
+
+    const color: LocationColor = (location: Location, isSecondary: boolean) => {
+        if (StructureElement.Location.is(location)) {
+            return structureElementColor(location, isSecondary);
+        } else if (Bond.isLocation(location)) {
+            // this will be applied for each bond twice, to get color of each half (a* refers to the adjacent atom, b* to the opposite atom)
+            auxLocation.unit = location.aUnit;
+            auxLocation.element = location.aUnit.elements[location.aIndex];
+            return structureElementColor(auxLocation, isSecondary);
+        }
+        return props.background;
+    };
+
+    return {
+        factory: (ctx_, props_) => makeMultilayerColorTheme(ctx_, props_, colorThemeRegistry),
+        granularity: 'group',
+        preferSmoothing: true,
+        color: color,
+        props: props,
+        description: 'Combines colors from multiple color themes.',
+    };
+}
+
+
+/** Unique name for "Multilayer" color theme */
+export const MultilayerColorThemeName = 'mvs-multilayer';
+
+/** A thingy that is needed to register color theme "Multilayer" */
+export function makeMultilayerColorThemeProvider(colorThemeRegistry: ColorTheme.Registry): ColorTheme.Provider<MultilayerColorThemeParams, typeof MultilayerColorThemeName> {
+    return {
+        name: MultilayerColorThemeName,
+        label: 'Multi-layer',
+        category: ColorTheme.Category.Misc,
+        factory: (ctx, props) => makeMultilayerColorTheme(ctx, props, colorThemeRegistry),
+        getParams: (ctx: ThemeDataContext) => makeMultilayerColorThemeParams(colorThemeRegistry, ctx),
+        defaultValues: DefaultMultilayerColorThemeProps,
+        isApplicable: (ctx: ThemeDataContext) => true,
+    };
+}

src/extensions/mvs/components/selector.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { SortedArray } from '../../../mol-data/int';
+import { ElementIndex, Structure, StructureElement } from '../../../mol-model/structure';
+import { StaticStructureComponentTypes, createStructureComponent } from '../../../mol-plugin-state/helpers/structure-component';
+import { PluginStateObject } from '../../../mol-plugin-state/objects';
+import { MolScriptBuilder } from '../../../mol-script/language/builder';
+import { Expression } from '../../../mol-script/language/expression';
+import { UUID } from '../../../mol-util';
+import { arrayExtend, sortIfNeeded } from '../../../mol-util/array';
+import { mapArrayToObject, pickObjectKeys } from '../../../mol-util/object';
+import { Choice } from '../../../mol-util/param-choice';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { capitalize } from '../../../mol-util/string';
+import { MVSAnnotationStructureComponentParams, createMVSAnnotationStructureComponent } from './annotation-structure-component';
+
+
+/** Allowed values for a static selector */
+export const StaticSelectorChoice = new Choice(mapArrayToObject(StaticStructureComponentTypes, t => capitalize(t)), 'all');
+export type StaticSelectorChoice = Choice.Values<typeof StaticSelectorChoice>
+
+
+/** Parameter definition for specifying a part of structure (kinda extension of `StructureComponentParams` from mol-plugin-state/helpers/structure-component) */
+export const SelectorParams = PD.MappedStatic('static', {
+    static: StaticSelectorChoice.PDSelect(),
+    expression: PD.Value<Expression>(MolScriptBuilder.struct.generator.all),
+    bundle: PD.Value<StructureElement.Bundle>(StructureElement.Bundle.Empty),
+    script: PD.Script({ language: 'mol-script', expression: '(sel.atom.all)' }),
+    annotation: PD.Group(pickObjectKeys(MVSAnnotationStructureComponentParams, ['annotationId', 'fieldName', 'fieldValues'])),
+}, { description: 'Define a part of the structure where this layer applies (use Static:all to apply to the whole structure)' }
+);
+
+/** Parameter values for specifying a part of structure */
+export type Selector = PD.Values<{ selector: typeof SelectorParams }>['selector']
+
+/** `Selector` for selecting the whole structure */
+export const SelectorAll = { name: 'static', params: 'all' } satisfies Selector;
+
+/** Decide whether a selector is `SelectorAll` */
+export function isSelectorAll(props: Selector): props is typeof SelectorAll {
+    return props.name === 'static' && props.params === 'all';
+}
+
+
+/** Data structure for fast lookup of a structure element location in a substructure */
+export type ElementSet = { [modelId: UUID]: SortedArray<ElementIndex> }
+
+export const ElementSet = {
+    /** Create an `ElementSet` from the substructure of `structure` defined by `selector` */
+    fromSelector(structure: Structure | undefined, selector: Selector): ElementSet {
+        if (!structure) return {};
+        const arrays: { [modelId: UUID]: ElementIndex[] } = {};
+        const selection = substructureFromSelector(structure, selector); // using `getAtomRangesForRow` might (might not) be faster here
+        for (const unit of selection.units) {
+            arrayExtend(arrays[unit.model.id] ??= [], unit.elements);
+        }
+        const result: { [modelId: UUID]: SortedArray<ElementIndex> } = {};
+        for (const modelId in arrays) {
+            const array = arrays[modelId as UUID];
+            sortIfNeeded(array, (a, b) => a - b);
+            result[modelId as UUID] = SortedArray.ofSortedArray(array);
+        }
+        return result;
+    },
+    /** Decide if the element set `set` contains structure element location `location` */
+    has(set: ElementSet, location: StructureElement.Location): boolean {
+        const array = set[location.unit.model.id];
+        return array ? SortedArray.has(array, location.element) : false;
+    },
+};
+
+function substructureFromSelector(structure: Structure, selector: Selector): Structure {
+    const pso = (selector.name === 'annotation') ?
+        createMVSAnnotationStructureComponent(structure, { ...selector.params, label: '', nullIfEmpty: false })
+        : createStructureComponent(structure, { type: selector, label: '', nullIfEmpty: false }, { source: structure });
+    return PluginStateObject.Molecule.Structure.is(pso) ? pso.data : Structure.Empty;
+}

src/extensions/mvs/helpers/_spec/atom-ranges.spec.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { AtomRanges } from '../atom-ranges';
+
+
+describe('union', () => {
+    it('union non-overlapping', async () => {
+        const a = {
+            from: [0, 20, 40, 60, 80],
+            to: [10, 30, 50, 70, 90],
+        } as AtomRanges;
+        const b = {
+            from: [11, 37, 51, 205],
+            to: [15, 39, 55, 210],
+        } as AtomRanges;
+        const c = {
+            from: [-10, 200, 300],
+            to: [-5, 202, 305],
+        } as AtomRanges;
+        const result = {
+            from: [-10, 0, 11, 20, 37, 40, 51, 60, 80, 200, 205, 300],
+            to: [-5, 10, 15, 30, 39, 50, 55, 70, 90, 202, 210, 305],
+        } as AtomRanges;
+        expect(AtomRanges.union([a, b, c])).toEqual(result);
+    });
+    it('union overlapping', async () => {
+        const a = {
+            from: [0, 20, 40, 60, 80],
+            to: [10, 30, 50, 70, 90],
+        } as AtomRanges;
+        const b = {
+            from: [10, 37, 51, 84, 205],
+            to: [15, 40, 55, 88, 220],
+        } as AtomRanges;
+        const c = {
+            from: [-10, 67, 200, 300],
+            to: [5, 80, 210, 305],
+        } as AtomRanges;
+        const result = {
+            from: [-10, 20, 37, 51, 60, 200, 300],
+            to: [15, 30, 50, 55, 90, 220, 305],
+        } as AtomRanges;
+        expect(AtomRanges.union([a, b, c])).toEqual(result);
+    });
+});
+

src/extensions/mvs/helpers/_spec/selections.spec.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { range } from '../../../../mol-util/array';
+import { MVSAnnotationRow } from '../schemas';
+import { groupRows } from '../selections';
+
+
+describe('groupRows', () => {
+    it('groupRows', async () => {
+        const rows = [
+            { label: 'A' }, { label: 'B', group_id: 1 }, { label: 'C', group_id: 'x' }, { label: 'D', group_id: 1 },
+            { label: 'E' }, { label: 'F' }, { label: 'G', group_id: 'x' }, { label: 'H', group_id: 'x' },
+        ] as any as MVSAnnotationRow[];
+        const g = groupRows(rows);
+        const groupedIndices = range(g.count).map(i => g.grouped.slice(g.offsets[i], g.offsets[i + 1]));
+        const groupedRows = groupedIndices.map(group => group.map(j => rows[j]));
+        expect(groupedRows).toEqual([
+            [{ label: 'A' }],
+            [{ label: 'B', group_id: 1 }, { label: 'D', group_id: 1 }],
+            [{ label: 'C', group_id: 'x' }, { label: 'G', group_id: 'x' }, { label: 'H', group_id: 'x' }],
+            [{ label: 'E' }],
+            [{ label: 'F' }],
+        ]);
+    });
+});

src/extensions/mvs/helpers/atom-ranges.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { SortedArray } from '../../../mol-data/int';
+import { ElementIndex } from '../../../mol-model/structure';
+import { arrayExtend, range } from '../../../mol-util/array';
+
+
+/** Represents a collection of disjoint atom ranges in a model.
+ * The number of ranges is `AtomRanges.count(ranges)`,
+ * the i-th range covers atoms `[ranges.from[i], ranges.to[i])`. */
+export interface AtomRanges {
+    from: ElementIndex[],
+    to: ElementIndex[],
+}
+
+export const AtomRanges = {
+    /** Return the number of disjoined ranges in a `AtomRanges` object */
+    count(ranges: AtomRanges): number {
+        return ranges.from.length;
+    },
+
+    /** Create new `AtomRanges` without any atoms */
+    empty(): AtomRanges {
+        return { from: [], to: [] };
+    },
+
+    /** Create new `AtomRanges` containing a single range of atoms `[from, to)` */
+    single(from: ElementIndex, to: ElementIndex): AtomRanges {
+        return { from: [from], to: [to] };
+    },
+
+    /** Add a range of atoms `[from, to)` to existing `AtomRanges` and return the modified original.
+     * The added range must start after the end of the last existing range
+     * (if it starts just on the next atom, these two ranges will get merged). */
+    add(ranges: AtomRanges, from: ElementIndex, to: ElementIndex): AtomRanges {
+        const n = AtomRanges.count(ranges);
+        if (n > 0) {
+            const lastTo = ranges.to[n - 1];
+            if (from < lastTo) throw new Error('Overlapping ranges not allowed');
+            if (from === lastTo) {
+                ranges.to[n - 1] = to;
+            } else {
+                ranges.from.push(from);
+                ranges.to.push(to);
+            }
+        } else {
+            ranges.from.push(from);
+            ranges.to.push(to);
+        }
+        return ranges;
+    },
+
+    /** Apply function `func` to each range in `ranges` */
+    foreach(ranges: AtomRanges, func: (from: ElementIndex, to: ElementIndex) => any) {
+        const n = AtomRanges.count(ranges);
+        for (let i = 0; i < n; i++) func(ranges.from[i], ranges.to[i]);
+    },
+
+    /** Apply function `func` to each range in `ranges` and return an array with results */
+    map<T>(ranges: AtomRanges, func: (from: ElementIndex, to: ElementIndex) => T): T[] {
+        const n = AtomRanges.count(ranges);
+        const result: T[] = new Array(n);
+        for (let i = 0; i < n; i++) result[i] = func(ranges.from[i], ranges.to[i]);
+        return result;
+    },
+
+    /** Compute the set union of multiple `AtomRanges` objects (as sets of atoms) */
+    union(ranges: AtomRanges[]): AtomRanges {
+        const concat = AtomRanges.empty();
+        for (const r of ranges) {
+            arrayExtend(concat.from, r.from);
+            arrayExtend(concat.to, r.to);
+        }
+        const indices = range(concat.from.length).sort((i, j) => concat.from[i] - concat.from[j]); // sort by start of range
+        const result = AtomRanges.empty();
+        let last = -1;
+        for (const i of indices) {
+            const from = concat.from[i];
+            const to = concat.to[i];
+            if (last >= 0 && from <= result.to[last]) {
+                if (to > result.to[last]) {
+                    result.to[last] = to;
+                }
+            } else {
+                result.from.push(from);
+                result.to.push(to);
+                last++;
+            }
+        }
+        return result;
+    },
+
+    /** Return a sorted subset of `atoms` which lie in any of `ranges` (i.e. set intersection of `atoms` and `ranges`).
+     * If `out` is provided, use it to store the result (clear any old contents).
+     * If `outFirstAtomIndex` is provided, fill `outFirstAtomIndex.value` with the index of the first selected atom (if any). */
+    selectAtomsInRanges(atoms: SortedArray<ElementIndex>, ranges: AtomRanges, out?: ElementIndex[], outFirstAtomIndex: { value?: number } = {}): ElementIndex[] {
+        out ??= [];
+        out.length = 0;
+        outFirstAtomIndex.value = undefined;
+
+        const nAtoms = atoms.length;
+        const nRanges = AtomRanges.count(ranges);
+        if (nAtoms <= nRanges) {
+            // Implementation 1 (more efficient when there are fewer atoms)
+            let iRange = SortedArray.findPredecessorIndex(SortedArray.ofSortedArray(ranges.to), atoms[0] + 1);
+            for (let iAtom = 0; iAtom < nAtoms; iAtom++) {
+                const a = atoms[iAtom];
+                while (iRange < nRanges && ranges.to[iRange] <= a) iRange++;
+                const qualifies = iRange < nRanges && ranges.from[iRange] <= a;
+                if (qualifies) {
+                    out.push(a);
+                    outFirstAtomIndex.value ??= iAtom;
+                }
+            }
+        } else {
+            // Implementation 2 (more efficient when there are fewer ranges)
+            for (let iRange = 0; iRange < nRanges; iRange++) {
+                const from = ranges.from[iRange];
+                const to = ranges.to[iRange];
+                for (let iAtom = SortedArray.findPredecessorIndex(atoms, from); iAtom < nAtoms; iAtom++) {
+                    const a = atoms[iAtom];
+                    if (a < to) {
+                        out.push(a);
+                        outFirstAtomIndex.value ??= iAtom;
+                    } else {
+                        break;
+                    }
+                }
+            }
+        }
+        return out;
+    },
+};

src/extensions/mvs/helpers/indexing.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Column } from '../../../mol-data/db';
+import { SortedArray } from '../../../mol-data/int';
+import { ChainIndex, ElementIndex, Model, ResidueIndex } from '../../../mol-model/structure';
+import { filterInPlace, range, sortIfNeeded } from '../../../mol-util/array';
+import { Mapping, MultiMap, NumberMap } from './utils';
+
+
+/** Auxiliary data structure for efficiently finding chains/residues/atoms in a model by their properties */
+export interface IndicesAndSortings {
+    chainsByLabelEntityId: Mapping<string, readonly ChainIndex[]>,
+    chainsByLabelAsymId: Mapping<string, readonly ChainIndex[]>,
+    chainsByAuthAsymId: Mapping<string, readonly ChainIndex[]>,
+    residuesSortedByLabelSeqId: Mapping<ChainIndex, Sorting<ResidueIndex, number>>,
+    residuesSortedByAuthSeqId: Mapping<ChainIndex, Sorting<ResidueIndex, number>>,
+    residuesByInsCode: Mapping<ChainIndex, Mapping<string, readonly ResidueIndex[]>>,
+    atomsById: Mapping<number, ElementIndex>,
+    atomsByIndex: Mapping<number, ElementIndex>,
+}
+
+export const IndicesAndSortings = {
+    /** Get `IndicesAndSortings` for a model (use a cached value or create if not available yet) */
+    get(model: Model): IndicesAndSortings {
+        return model._dynamicPropertyData['indices-and-sortings'] ??= IndicesAndSortings.create(model);
+    },
+
+    /** Create `IndicesAndSortings` for a model */
+    create(model: Model): IndicesAndSortings {
+        const h = model.atomicHierarchy;
+        const nAtoms = h.atoms._rowCount;
+        const nChains = h.chains._rowCount;
+        const { label_entity_id, label_asym_id, auth_asym_id } = h.chains;
+        const { label_seq_id, auth_seq_id, pdbx_PDB_ins_code } = h.residues;
+        const { Present } = Column.ValueKind;
+
+        const chainsByLabelEntityId = new MultiMap<string, ChainIndex>();
+        const chainsByLabelAsymId = new MultiMap<string, ChainIndex>();
+        const chainsByAuthAsymId = new MultiMap<string, ChainIndex>();
+        const residuesSortedByLabelSeqId = new Map<ChainIndex, Sorting<ResidueIndex, number>>();
+        const residuesSortedByAuthSeqId = new Map<ChainIndex, Sorting<ResidueIndex, number>>();
+        const residuesByInsCode = new Map<ChainIndex, MultiMap<string, ResidueIndex>>();
+        const atomsById = new NumberMap<number, ElementIndex>(nAtoms + 1);
+        const atomsByIndex = new NumberMap<number, ElementIndex>(nAtoms);
+
+        for (let iChain = 0 as ChainIndex; iChain < nChains; iChain++) {
+            chainsByLabelEntityId.add(label_entity_id.value(iChain), iChain);
+            chainsByLabelAsymId.add(label_asym_id.value(iChain), iChain);
+            chainsByAuthAsymId.add(auth_asym_id.value(iChain), iChain);
+
+            const iResFrom = h.residueAtomSegments.index[h.chainAtomSegments.offsets[iChain]];
+            const iResTo = h.residueAtomSegments.index[h.chainAtomSegments.offsets[iChain + 1] - 1] + 1;
+
+            const residuesWithLabelSeqId = filterInPlace(range(iResFrom, iResTo) as ResidueIndex[], iRes => label_seq_id.valueKind(iRes) === Present);
+            residuesSortedByLabelSeqId.set(iChain, Sorting.create(residuesWithLabelSeqId, label_seq_id.value));
+
+            const residuesWithAuthSeqId = filterInPlace(range(iResFrom, iResTo) as ResidueIndex[], iRes => auth_seq_id.valueKind(iRes) === Present);
+            residuesSortedByAuthSeqId.set(iChain, Sorting.create(residuesWithAuthSeqId, auth_seq_id.value));
+
+            const residuesHereByInsCode = new MultiMap<string, ResidueIndex>();
+            for (let iRes = iResFrom; iRes < iResTo; iRes++) {
+                if (pdbx_PDB_ins_code.valueKind(iRes) === Present) {
+                    residuesHereByInsCode.add(pdbx_PDB_ins_code.value(iRes), iRes);
+                }
+            }
+            residuesByInsCode.set(iChain, residuesHereByInsCode);
+        }
+
+        const atomId = model.atomicConformation.atomId.value;
+        const atomIndex = h.atomSourceIndex.value;
+        for (let iAtom = 0 as ElementIndex; iAtom < nAtoms; iAtom++) {
+            atomsById.set(atomId(iAtom), iAtom);
+            atomsByIndex.set(atomIndex(iAtom), iAtom);
+        }
+
+        return {
+            chainsByLabelEntityId, chainsByLabelAsymId, chainsByAuthAsymId,
+            residuesSortedByLabelSeqId, residuesSortedByAuthSeqId, residuesByInsCode,
+            atomsById, atomsByIndex,
+        };
+    },
+};
+
+
+/** Represents a set of things (keys) of type `K`, sorted by some property (value) of type `V` */
+export interface Sorting<K, V extends number> {
+    /** Keys sorted by their corresponding values */
+    keys: readonly K[],
+    /** Sorted values corresponding to each key (value for `keys[i]` is `values[i]`) */
+    values: SortedArray<V>,
+}
+
+export const Sorting = {
+    /** Create a `Sorting` from an array of keys and a function returning their corresponding values.
+     * If two keys have the same value, the smaller key will come first.
+     * This function modifies `keys` - create a copy if you need the original order! */
+    create<K extends number, V extends number>(keys: K[], valueFunction: (k: K) => V): Sorting<K, V> {
+        sortIfNeeded(keys, (a, b) => valueFunction(a) - valueFunction(b) || a - b);
+        const values: SortedArray<V> = SortedArray.ofSortedArray(keys.map(valueFunction));
+        return { keys, values };
+    },
+
+    /** Return a newly allocated array of keys which have value equal to `target`.
+     * The returned keys are sorted by their value. */
+    getKeysWithValue<K, V extends number>(sorting: Sorting<K, V>, target: V): K[] {
+        return Sorting.getKeysWithValueInRange(sorting, target, target);
+    },
+
+    /** Return a newly allocated array of keys which have value within interval `[min, max]` (inclusive).
+     * The returned keys are sorted by their value.
+     * Undefined `min` is interpreted as negative infitity, undefined `max` is interpreted as positive infinity. */
+    getKeysWithValueInRange<K, V extends number>(sorting: Sorting<K, V>, min: V | undefined, max: V | undefined): K[] {
+        const { keys, values } = sorting;
+        if (!keys) return [];
+        const n = keys.length;
+        const from = (min !== undefined) ? SortedArray.findPredecessorIndex(values, min) : 0;
+        let to: number;
+        if (max !== undefined) {
+            to = from;
+            while (to < n && values[to] <= max) to++;
+        } else {
+            to = n;
+        }
+        return keys.slice(from, to);
+    },
+};

src/extensions/mvs/helpers/label-text.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Sphere3D } from '../../../mol-math/geometry';
+import { BoundaryHelper } from '../../../mol-math/geometry/boundary-helper';
+import { Vec3 } from '../../../mol-math/linear-algebra';
+import { ElementIndex, Model, Structure, StructureElement, StructureProperties } from '../../../mol-model/structure';
+import { UUID } from '../../../mol-util';
+import { arrayExtend } from '../../../mol-util/array';
+import { AtomRanges } from './atom-ranges';
+import { IndicesAndSortings } from './indexing';
+import { MVSAnnotationRow } from './schemas';
+import { getAtomRangesForRows } from './selections';
+
+
+/** Properties describing position, size, etc. of a text in 3D */
+export interface TextProps {
+    /** Anchor point for the text (i.e. the center of the text will appear in front of `center`) */
+    center: Vec3,
+    /** Depth of the text wrt anchor point (i.e. the text will appear in distance `radius` in front of the anchor point) */
+    depth: number,
+    /** Relative text size */
+    scale: number,
+    /** Index of the first atom within structure, to which this text is bound (for coloring and similar purposes) */
+    group: number,
+}
+
+const tmpVec = Vec3();
+const tmpArray: number[] = [];
+const boundaryHelper = new BoundaryHelper('98');
+const outAtoms: ElementIndex[] = [];
+const outFirstAtomIndex: { value?: number } = {};
+
+/** Return `TextProps` (position, size, etc.) for a text that is to be bound to a substructure of `structure` defined by union of `rows`.
+ * Derives `center` and `depth` from the boundary sphere of the substructure, `scale` from the number of heavy atoms in the substructure. */
+export function textPropsForSelection(structure: Structure, sizeFunction: (location: StructureElement.Location) => number, rows: MVSAnnotationRow | MVSAnnotationRow[], onlyInModel?: Model): TextProps | undefined {
+    const loc = StructureElement.Location.create(structure);
+    const { units } = structure;
+    const { type_symbol } = StructureProperties.atom;
+    tmpArray.length = 0;
+    let includedAtoms = 0;
+    let includedHeavyAtoms = 0;
+    let group: number | undefined = undefined;
+    let atomSize: number | undefined = undefined;
+    const rangesByModel: { [modelId: UUID]: AtomRanges } = {};
+    for (let iUnit = 0, nUnits = units.length; iUnit < nUnits; iUnit++) {
+        const unit = units[iUnit];
+        if (onlyInModel && unit.model.id !== onlyInModel.id) continue;
+        const ranges = rangesByModel[unit.model.id] ??= getAtomRangesForRows(unit.model, rows, IndicesAndSortings.get(unit.model));
+        const position = unit.conformation.position;
+        loc.unit = unit;
+        AtomRanges.selectAtomsInRanges(unit.elements, ranges, outAtoms, outFirstAtomIndex);
+        for (const atom of outAtoms) {
+            loc.element = atom;
+            position(atom, tmpVec);
+            arrayExtend(tmpArray, tmpVec);
+            group ??= structure.serialMapping.cumulativeUnitElementCount[iUnit] + outFirstAtomIndex.value!;
+            atomSize ??= sizeFunction(loc);
+            includedAtoms++;
+            if (type_symbol(loc) !== 'H') includedHeavyAtoms++;
+        }
+    }
+    if (includedAtoms > 0) {
+        const { center, radius } = (includedAtoms > 1) ? boundarySphere(tmpArray) : { center: Vec3.fromArray(Vec3(), tmpArray, 0), radius: 1.1 * atomSize! };
+        const scale = (includedHeavyAtoms || includedAtoms) ** (1 / 3);
+        return { center, depth: radius, scale, group: group! };
+    }
+}
+
+/** Calculate the boundary sphere for a set of points given by their flattened coordinates (`flatCoords.slice(0,3)` is the first point etc.) */
+function boundarySphere(flatCoords: readonly number[]): Sphere3D {
+    const length = flatCoords.length;
+    boundaryHelper.reset();
+    for (let offset = 0; offset < length; offset += 3) {
+        Vec3.fromArray(tmpVec, flatCoords, offset);
+        boundaryHelper.includePosition(tmpVec);
+    }
+    boundaryHelper.finishedIncludeStep();
+    for (let offset = 0; offset < length; offset += 3) {
+        Vec3.fromArray(tmpVec, flatCoords, offset);
+        boundaryHelper.radiusPosition(tmpVec);
+    }
+    return boundaryHelper.getSphere();
+}

src/extensions/mvs/helpers/param-definition.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+
+
+/** Similar to `PD.Numeric` but allows leaving empty field in UI (treated as `undefined`) */
+export function MaybeIntegerParamDefinition(defaultValue?: number, info?: PD.Info): PD.Base<number | undefined> {
+    return PD.Converted<number | undefined, PD.Text>(stringifyMaybeInt, parseMaybeInt, PD.Text(stringifyMaybeInt(defaultValue), info));
+}
+/** The magic with negative zero looks crazy, but it's needed if we want to be able to write negative numbers, LOL. Please help if you know a better solution. */
+function parseMaybeInt(input: string): number | undefined {
+    if (input.trim() === '-') return -0;
+    const num = parseInt(input);
+    return isNaN(num) ? undefined : num;
+}
+function stringifyMaybeInt(num: number | undefined): string {
+    if (num === undefined) return '';
+    if (Object.is(num, -0)) return '-';
+    return num.toString();
+}
+
+/** Similar to `PD.Text` but leaving empty field in UI is treated as `undefined` */
+export function MaybeStringParamDefinition(defaultValue?: string, info?: PD.Info): PD.Base<string | undefined> {
+    return PD.Converted<string | undefined, PD.Text>(stringifyMaybeString, parseMaybeString, PD.Text(stringifyMaybeString(defaultValue), info));
+}
+function parseMaybeString(input: string): string | undefined {
+    return input === '' ? undefined : input;
+}
+function stringifyMaybeString(str: string | undefined): string {
+    return str === undefined ? '' : str;
+}

src/extensions/mvs/helpers/schemas.ts

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Column, Table } from '../../../mol-data/db';
+import { pickObjectKeys } from '../../../mol-util/object';
+import { Choice } from '../../../mol-util/param-choice';
+
+const { str, int } = Column.Schema;
+
+
+/** Names of allowed MVS annotation schemas (values for the annotation schema parameter) */
+export type MVSAnnotationSchema = Choice.Values<typeof MVSAnnotationSchema>
+export const MVSAnnotationSchema = new Choice(
+    {
+        whole_structure: 'Whole Structure',
+        entity: 'Entity',
+        chain: 'Chain (label*)',
+        auth_chain: 'Chain (auth*)',
+        residue: 'Residue (label*)',
+        auth_residue: 'Residue (auth*)',
+        residue_range: 'Residue range (label*)',
+        auth_residue_range: 'Residue range (auth*)',
+        atom: 'Atom (label*)',
+        auth_atom: 'Atom (auth*)',
+        all_atomic: 'All atomic selectors',
+    },
+    'all_atomic',
+);
+
+/** Represents a set of criteria for selection of atoms in a model (in `all_atomic` schema).
+ * Missing/undefined values mean that we do not care about that specific atom property. */
+export type MVSAnnotationRow = Partial<Table.Row<typeof AllAtomicCifAnnotationSchema>>
+
+
+/** Get CIF schema definition for given annotation schema name */
+export function getCifAnnotationSchema<K extends MVSAnnotationSchema>(schemaName: K): Pick<typeof AllAtomicCifAnnotationSchema, (typeof FieldsForSchemas)[K][number]> {
+    return pickObjectKeys(AllAtomicCifAnnotationSchema, FieldsForSchemas[schemaName]);
+}
+
+
+/** Definition of `all_atomic` schema for CIF (other atomic schemas are subschemas of this one) */
+const AllAtomicCifAnnotationSchema = {
+    /** Tag for grouping multiple annotation rows with the same `group_id` (e.g. to show one label for two chains);
+     * if the `group_id` is not given, each row is processed separately */
+    group_id: str,
+
+    label_entity_id: str,
+    label_asym_id: str,
+    auth_asym_id: str,
+
+    label_seq_id: int,
+    auth_seq_id: int,
+    pdbx_PDB_ins_code: str,
+    /** Minimum label_seq_id (inclusive) */
+    beg_label_seq_id: int,
+    /** Maximum label_seq_id (inclusive) */
+    end_label_seq_id: int,
+    /** Minimum auth_seq_id (inclusive) */
+    beg_auth_seq_id: int,
+    /** Maximum auth_seq_id (inclusive) */
+    end_auth_seq_id: int,
+
+    /** Atom name like 'CA', 'N', 'O'... */
+    label_atom_id: str,
+    /** Atom name like 'CA', 'N', 'O'... */
+    auth_atom_id: str,
+    /** Element symbol like 'H', 'He', 'Li', 'Be' (case-insensitive)... */
+    type_symbol: str,
+    /** Unique atom identifier across conformations (_atom_site.id) */
+    atom_id: int,
+    /** 0-based index of the atom in the source data */
+    atom_index: int,
+} satisfies Table.Schema;
+
+/** Allowed fields (i.e. CIF columns or JSON keys) for each annotation schema
+ * (other fields will just be ignored) */
+const FieldsForSchemas = {
+    whole_structure: ['group_id'],
+    entity: ['group_id', 'label_entity_id'],
+    chain: ['group_id', 'label_entity_id', 'label_asym_id'],
+    auth_chain: ['group_id', 'auth_asym_id'],
+    residue: ['group_id', 'label_entity_id', 'label_asym_id', 'label_seq_id'],
+    auth_residue: ['group_id', 'auth_asym_id', 'auth_seq_id', 'pdbx_PDB_ins_code'],
+    residue_range: ['group_id', 'label_entity_id', 'label_asym_id', 'beg_label_seq_id', 'end_label_seq_id'],
+    auth_residue_range: ['group_id', 'auth_asym_id', 'beg_auth_seq_id', 'end_auth_seq_id', 'pdbx_PDB_ins_code'],
+    atom: ['group_id', 'label_entity_id', 'label_asym_id', 'label_seq_id', 'label_atom_id', 'type_symbol', 'atom_id', 'atom_index'],
+    auth_atom: ['group_id', 'auth_asym_id', 'auth_seq_id', 'pdbx_PDB_ins_code', 'auth_atom_id', 'type_symbol', 'atom_id', 'atom_index'],
+    all_atomic: Object.keys(AllAtomicCifAnnotationSchema) as (keyof typeof AllAtomicCifAnnotationSchema)[],
+} satisfies { [schema in MVSAnnotationSchema]: (keyof typeof AllAtomicCifAnnotationSchema)[] };

src/extensions/mvs/helpers/selections.ts

@@ -0,0 +1,361 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Column } from '../../../mol-data/db';
+import { ChainIndex, ElementIndex, Model, ResidueIndex } from '../../../mol-model/structure';
+import { MolScriptBuilder as MS } from '../../../mol-script/language/builder';
+import { Expression } from '../../../mol-script/language/expression';
+import { arrayExtend, filterInPlace, range } from '../../../mol-util/array';
+import { AtomRanges } from './atom-ranges';
+import { IndicesAndSortings, Sorting } from './indexing';
+import { MVSAnnotationRow } from './schemas';
+import { isAnyDefined, isDefined } from './utils';
+
+
+const EmptyArray: readonly any[] = [];
+
+
+/** Return atom ranges in `model` which satisfy criteria given by `row` */
+export function getAtomRangesForRow(model: Model, row: MVSAnnotationRow, indices: IndicesAndSortings): AtomRanges {
+    const h = model.atomicHierarchy;
+    const nAtoms = h.atoms._rowCount;
+
+    const hasAtomIds = isAnyDefined(row.atom_id, row.atom_index);
+    const hasAtomFilter = isAnyDefined(row.label_atom_id, row.auth_atom_id, row.type_symbol);
+    const hasResidueFilter = isAnyDefined(row.label_seq_id, row.auth_seq_id, row.pdbx_PDB_ins_code, row.beg_label_seq_id, row.end_label_seq_id, row.beg_auth_seq_id, row.end_auth_seq_id);
+    const hasChainFilter = isAnyDefined(row.label_asym_id, row.auth_asym_id, row.label_entity_id);
+
+    if (hasAtomIds) {
+        const theAtom = getTheAtomForRow(model, row, indices);
+        return theAtom !== undefined ? AtomRanges.single(theAtom, theAtom + 1 as ElementIndex) : AtomRanges.empty();
+    }
+
+    if (!hasChainFilter && !hasResidueFilter && !hasAtomFilter) {
+        return AtomRanges.single(0 as ElementIndex, nAtoms as ElementIndex);
+    }
+
+    const qualifyingChains = getQualifyingChains(model, row, indices);
+    if (!hasResidueFilter && !hasAtomFilter) {
+        const chainOffsets = h.chainAtomSegments.offsets;
+        const ranges = AtomRanges.empty();
+        for (const iChain of qualifyingChains) {
+            AtomRanges.add(ranges, chainOffsets[iChain], chainOffsets[iChain + 1]);
+        }
+        return ranges;
+    }
+
+    const qualifyingResidues = getQualifyingResidues(model, row, indices, qualifyingChains);
+    if (!hasAtomFilter) {
+        const residueOffsets = h.residueAtomSegments.offsets;
+        const ranges = AtomRanges.empty();
+        for (const iRes of qualifyingResidues) {
+            AtomRanges.add(ranges, residueOffsets[iRes], residueOffsets[iRes + 1]);
+        }
+        return ranges;
+    }
+
+    const qualifyingAtoms = getQualifyingAtoms(model, row, indices, qualifyingResidues);
+    const ranges = AtomRanges.empty();
+    for (const iAtom of qualifyingAtoms) {
+        AtomRanges.add(ranges, iAtom, iAtom + 1 as ElementIndex);
+    }
+    return ranges;
+}
+
+/** Return atom ranges in `model` which satisfy criteria given by any of `rows` (atoms that satisfy more rows are still included only once) */
+export function getAtomRangesForRows(model: Model, rows: MVSAnnotationRow | MVSAnnotationRow[], indices: IndicesAndSortings): AtomRanges {
+    if (Array.isArray(rows)) {
+        return AtomRanges.union(rows.map(row => getAtomRangesForRow(model, row, indices)));
+    } else {
+        return getAtomRangesForRow(model, rows, indices);
+    }
+}
+
+
+/** Return an array of chain indexes which satisfy criteria given by `row` */
+function getQualifyingChains(model: Model, row: MVSAnnotationRow, indices: IndicesAndSortings): readonly ChainIndex[] {
+    const { auth_asym_id, label_entity_id, _rowCount: nChains } = model.atomicHierarchy.chains;
+    let result: readonly ChainIndex[] | undefined = undefined;
+    if (isDefined(row.label_asym_id)) {
+        result = indices.chainsByLabelAsymId.get(row.label_asym_id) ?? EmptyArray;
+    }
+    if (isDefined(row.auth_asym_id)) {
+        if (result) {
+            result = result.filter(i => auth_asym_id.value(i) === row.auth_asym_id);
+        } else {
+            result = indices.chainsByAuthAsymId.get(row.auth_asym_id) ?? EmptyArray;
+        }
+    }
+    if (isDefined(row.label_entity_id)) {
+        if (result) {
+            result = result.filter(i => label_entity_id.value(i) === row.label_entity_id);
+        } else {
+            result = indices.chainsByLabelEntityId.get(row.label_entity_id) ?? EmptyArray;
+        }
+    }
+    result ??= range(nChains) as ChainIndex[];
+    return result;
+}
+
+/** Return an array of residue indexes which satisfy criteria given by `row` */
+function getQualifyingResidues(model: Model, row: MVSAnnotationRow, indices: IndicesAndSortings, fromChains: readonly ChainIndex[]): ResidueIndex[] {
+    const { label_seq_id, auth_seq_id, pdbx_PDB_ins_code } = model.atomicHierarchy.residues;
+    const { Present } = Column.ValueKind;
+    const result: ResidueIndex[] = [];
+    for (const iChain of fromChains) {
+        let residuesHere: readonly ResidueIndex[] | undefined = undefined;
+        if (isDefined(row.label_seq_id)) {
+            const sorting = indices.residuesSortedByLabelSeqId.get(iChain)!;
+            residuesHere = Sorting.getKeysWithValue(sorting, row.label_seq_id);
+        }
+        if (isDefined(row.auth_seq_id)) {
+            if (residuesHere) {
+                residuesHere = residuesHere.filter(i => auth_seq_id.valueKind(i) === Present && auth_seq_id.value(i) === row.auth_seq_id);
+            } else {
+                const sorting = indices.residuesSortedByAuthSeqId.get(iChain)!;
+                residuesHere = Sorting.getKeysWithValue(sorting, row.auth_seq_id);
+            }
+        }
+        if (isDefined(row.pdbx_PDB_ins_code)) {
+            if (residuesHere) {
+                residuesHere = residuesHere.filter(i => pdbx_PDB_ins_code.value(i) === row.pdbx_PDB_ins_code);
+            } else {
+                residuesHere = indices.residuesByInsCode.get(iChain)!.get(row.pdbx_PDB_ins_code) ?? EmptyArray;
+            }
+        }
+        if (isDefined(row.beg_label_seq_id) || isDefined(row.end_label_seq_id)) {
+            if (residuesHere) {
+                if (isDefined(row.beg_label_seq_id)) {
+                    residuesHere = residuesHere.filter(i => label_seq_id.valueKind(i) === Present && label_seq_id.value(i) >= row.beg_label_seq_id!);
+                }
+                if (isDefined(row.end_label_seq_id)) {
+                    residuesHere = residuesHere.filter(i => label_seq_id.valueKind(i) === Present && label_seq_id.value(i) <= row.end_label_seq_id!);
+                }
+            } else {
+                const sorting = indices.residuesSortedByLabelSeqId.get(iChain)!;
+                residuesHere = Sorting.getKeysWithValueInRange(sorting, row.beg_label_seq_id, row.end_label_seq_id);
+            }
+        }
+        if (isDefined(row.beg_auth_seq_id) || isDefined(row.end_auth_seq_id)) {
+            if (residuesHere) {
+                if (isDefined(row.beg_auth_seq_id)) {
+                    residuesHere = residuesHere.filter(i => auth_seq_id.valueKind(i) === Present && auth_seq_id.value(i) >= row.beg_auth_seq_id!);
+                }
+                if (isDefined(row.end_auth_seq_id)) {
+                    residuesHere = residuesHere.filter(i => auth_seq_id.valueKind(i) === Present && auth_seq_id.value(i) <= row.end_auth_seq_id!);
+                }
+            } else {
+                const sorting = indices.residuesSortedByAuthSeqId.get(iChain)!;
+                residuesHere = Sorting.getKeysWithValueInRange(sorting, row.beg_auth_seq_id, row.end_auth_seq_id);
+            }
+        }
+        if (!residuesHere) {
+            const { residueAtomSegments, chainAtomSegments } = model.atomicHierarchy;
+            const firstResidueForChain = residueAtomSegments.index[chainAtomSegments.offsets[iChain]];
+            const firstResidueAfterChain = residueAtomSegments.index[chainAtomSegments.offsets[iChain + 1] - 1] + 1;
+            residuesHere = range(firstResidueForChain, firstResidueAfterChain) as ResidueIndex[];
+        }
+        arrayExtend(result, residuesHere);
+    }
+    return result;
+}
+
+/** Return an array of atom indexes which satisfy criteria given by `row` */
+function getQualifyingAtoms(model: Model, row: MVSAnnotationRow, indices: IndicesAndSortings, fromResidues: readonly ResidueIndex[]): ElementIndex[] {
+    const { label_atom_id, auth_atom_id, type_symbol } = model.atomicHierarchy.atoms;
+    const residueAtomSegments_offsets = model.atomicHierarchy.residueAtomSegments.offsets;
+    const result: ElementIndex[] = [];
+    for (const iRes of fromResidues) {
+        const atomIdcs = range(residueAtomSegments_offsets[iRes], residueAtomSegments_offsets[iRes + 1]) as ElementIndex[];
+        if (isDefined(row.label_atom_id)) {
+            filterInPlace(atomIdcs, iAtom => label_atom_id.value(iAtom) === row.label_atom_id);
+        }
+        if (isDefined(row.auth_atom_id)) {
+            filterInPlace(atomIdcs, iAtom => auth_atom_id.value(iAtom) === row.auth_atom_id);
+        }
+        if (isDefined(row.type_symbol)) {
+            filterInPlace(atomIdcs, iAtom => type_symbol.value(iAtom) === row.type_symbol?.toUpperCase());
+        }
+        arrayExtend(result, atomIdcs);
+    }
+    return result;
+}
+
+/** Return index of atom in `model` which satistfies criteria given by `row`, if any.
+ * Only works when `row.atom_id` and/or `row.atom_index` is defined (otherwise use `getAtomRangesForRow`). */
+function getTheAtomForRow(model: Model, row: MVSAnnotationRow, indices: IndicesAndSortings): ElementIndex | undefined {
+    let iAtom: ElementIndex | undefined = undefined;
+    if (!isDefined(row.atom_id) && !isDefined(row.atom_index)) throw new Error('ArgumentError: at least one of row.atom_id, row.atom_index must be defined.');
+    if (isDefined(row.atom_id) && isDefined(row.atom_index)) {
+        const a1 = indices.atomsById.get(row.atom_id);
+        const a2 = indices.atomsByIndex.get(row.atom_index);
+        if (a1 !== a2) return undefined;
+        iAtom = a1;
+    }
+    if (isDefined(row.atom_id)) {
+        iAtom = indices.atomsById.get(row.atom_id);
+    }
+    if (isDefined(row.atom_index)) {
+        iAtom = indices.atomsByIndex.get(row.atom_index);
+    }
+    if (iAtom === undefined) return undefined;
+    if (!atomQualifies(model, iAtom, row)) return undefined;
+    return iAtom;
+}
+
+/** Return true if `iAtom`-th atom in `model` satisfies all selection criteria given by `row`. */
+export function atomQualifies(model: Model, iAtom: ElementIndex, row: MVSAnnotationRow): boolean {
+    const h = model.atomicHierarchy;
+
+    const iChain = h.chainAtomSegments.index[iAtom];
+    const label_asym_id = h.chains.label_asym_id.value(iChain);
+    const auth_asym_id = h.chains.auth_asym_id.value(iChain);
+    const label_entity_id = h.chains.label_entity_id.value(iChain);
+    if (!matches(row.label_asym_id, label_asym_id)) return false;
+    if (!matches(row.auth_asym_id, auth_asym_id)) return false;
+    if (!matches(row.label_entity_id, label_entity_id)) return false;
+
+    const iRes = h.residueAtomSegments.index[iAtom];
+    const label_seq_id = (h.residues.label_seq_id.valueKind(iRes) === Column.ValueKind.Present) ? h.residues.label_seq_id.value(iRes) : undefined;
+    const auth_seq_id = (h.residues.auth_seq_id.valueKind(iRes) === Column.ValueKind.Present) ? h.residues.auth_seq_id.value(iRes) : undefined;
+    const pdbx_PDB_ins_code = h.residues.pdbx_PDB_ins_code.value(iRes);
+    if (!matches(row.label_seq_id, label_seq_id)) return false;
+    if (!matches(row.auth_seq_id, auth_seq_id)) return false;
+    if (!matches(row.pdbx_PDB_ins_code, pdbx_PDB_ins_code)) return false;
+    if (!matchesRange(row.beg_label_seq_id, row.end_label_seq_id, label_seq_id)) return false;
+    if (!matchesRange(row.beg_auth_seq_id, row.end_auth_seq_id, auth_seq_id)) return false;
+
+    const label_atom_id = h.atoms.label_atom_id.value(iAtom);
+    const auth_atom_id = h.atoms.auth_atom_id.value(iAtom);
+    const type_symbol = h.atoms.type_symbol.value(iAtom);
+    const atom_id = model.atomicConformation.atomId.value(iAtom);
+    const atom_index = h.atomSourceIndex.value(iAtom);
+    if (!matches(row.label_atom_id, label_atom_id)) return false;
+    if (!matches(row.auth_atom_id, auth_atom_id)) return false;
+    if (!matches(row.type_symbol?.toUpperCase(), type_symbol)) return false;
+    if (!matches(row.atom_id, atom_id)) return false;
+    if (!matches(row.atom_index, atom_index)) return false;
+
+    return true;
+}
+
+/** Return true if `value` equals `requiredValue` or if `requiredValue` if not defined.  */
+function matches<T>(requiredValue: T | undefined | null, value: T | undefined): boolean {
+    return !isDefined(requiredValue) || value === requiredValue;
+}
+
+/** Return true if `requiredMin <= value <= requiredMax`.
+ * Undefined `requiredMin` behaves like negative infinity.
+ * Undefined `requiredMax` behaves like positive infinity. */
+function matchesRange<T>(requiredMin: T | undefined | null, requiredMax: T | undefined | null, value: T | undefined): boolean {
+    if (isDefined(requiredMin) && (!isDefined(value) || value < requiredMin)) return false;
+    if (isDefined(requiredMax) && (!isDefined(value) || value > requiredMax)) return false;
+    return true;
+}
+
+
+
+/** Convert an annotation row into a MolScript expression */
+export function rowToExpression(row: MVSAnnotationRow): Expression {
+    const { and } = MS.core.logic;
+    const { eq, gre: gte, lte } = MS.core.rel;
+    const { macromolecular } = MS.struct.atomProperty;
+    const propTests: Partial<Record<string, Expression>> = {};
+
+    if (isDefined(row.label_entity_id)) {
+        propTests['entity-test'] = eq([macromolecular.label_entity_id(), row.label_entity_id]);
+    }
+
+    const chainTests: Expression[] = [];
+    if (isDefined(row.label_asym_id)) chainTests.push(eq([macromolecular.label_asym_id(), row.label_asym_id]));
+    if (isDefined(row.auth_asym_id)) chainTests.push(eq([macromolecular.auth_asym_id(), row.auth_asym_id]));
+
+    if (chainTests.length === 1) {
+        propTests['chain-test'] = chainTests[0];
+    } else if (chainTests.length > 1) {
+        propTests['chain-test'] = and(chainTests);
+    }
+
+    const residueTests: Expression[] = [];
+    if (isDefined(row.label_seq_id)) residueTests.push(eq([macromolecular.label_seq_id(), row.label_seq_id]));
+    if (isDefined(row.auth_seq_id)) residueTests.push(eq([macromolecular.auth_seq_id(), row.auth_seq_id]));
+    if (isDefined(row.pdbx_PDB_ins_code)) residueTests.push(eq([macromolecular.pdbx_PDB_ins_code(), row.pdbx_PDB_ins_code]));
+    if (isDefined(row.beg_label_seq_id)) residueTests.push(gte([macromolecular.label_seq_id(), row.beg_label_seq_id]));
+    if (isDefined(row.end_label_seq_id)) residueTests.push(lte([macromolecular.label_seq_id(), row.end_label_seq_id]));
+    if (isDefined(row.beg_auth_seq_id)) residueTests.push(gte([macromolecular.auth_seq_id(), row.beg_auth_seq_id]));
+    if (isDefined(row.end_auth_seq_id)) residueTests.push(lte([macromolecular.auth_seq_id(), row.end_auth_seq_id]));
+    if (residueTests.length === 1) {
+        propTests['residue-test'] = residueTests[0];
+    } else if (residueTests.length > 1) {
+        propTests['residue-test'] = and(residueTests);
+    }
+
+    const atomTests: Expression[] = [];
+    if (isDefined(row.atom_id)) atomTests.push(eq([macromolecular.id(), row.atom_id]));
+    if (isDefined(row.atom_index)) atomTests.push(eq([MS.struct.atomProperty.core.sourceIndex(), row.atom_index]));
+    if (isDefined(row.label_atom_id)) atomTests.push(eq([macromolecular.label_atom_id(), row.label_atom_id]));
+    if (isDefined(row.auth_atom_id)) atomTests.push(eq([macromolecular.auth_atom_id(), row.auth_atom_id]));
+    if (isDefined(row.type_symbol)) atomTests.push(eq([MS.struct.atomProperty.core.elementSymbol(), row.type_symbol.toUpperCase()]));
+    if (atomTests.length === 1) {
+        propTests['atom-test'] = atomTests[0];
+    } else if (atomTests.length > 1) {
+        propTests['atom-test'] = and(atomTests);
+    }
+
+    return MS.struct.generator.atomGroups(propTests);
+}
+
+/** Convert multiple annotation rows into a MolScript expression.
+ * (with union semantics, i.e. an atom qualifies if it qualifies for at least one of the rows) */
+export function rowsToExpression(rows: readonly MVSAnnotationRow[]): Expression {
+    return unionExpression(rows.map(rowToExpression));
+}
+
+/** Create MolScript expression covering the set union of the given expressions */
+function unionExpression(expressions: Expression[]): Expression {
+    return MS.struct.combinator.merge(expressions.map(e => MS.struct.modifier.union([e])));
+}
+
+
+/** Data structure for an array divided into contiguous groups */
+interface GroupedArray<T> {
+    /** Number of groups */
+    count: number,
+    /** Get size of i-th group as `offsets[i+1]-offsets[i]`.
+     * Get j-th element in i-th group as `grouped[offsets[i]+j]` */
+    offsets: number[],
+    /** Get j-th element in i-th group as `grouped[offsets[i]+j]` */
+    grouped: T[],
+}
+
+/** Return row indices grouped by `row.group_id`. Rows with `row.group_id===undefined` are treated as separate groups. */
+export function groupRows(rows: readonly MVSAnnotationRow[]): GroupedArray<number> {
+    let counter = 0;
+    const groupMap = new Map<string, number>();
+    const groups: number[] = [];
+    for (let i = 0; i < rows.length; i++) {
+        const group_id = rows[i].group_id;
+        if (group_id === undefined) {
+            groups.push(counter++);
+        } else {
+            const groupIndex = groupMap.get(group_id);
+            if (groupIndex === undefined) {
+                groupMap.set(group_id, counter);
+                groups.push(counter);
+                counter++;
+            } else {
+                groups.push(groupIndex);
+            }
+        }
+    }
+    const rowIndices = range(rows.length).sort((i, j) => groups[i] - groups[j]);
+    const offsets: number[] = [];
+    for (let i = 0; i < rows.length; i++) {
+        if (i === 0 || groups[rowIndices[i]] !== groups[rowIndices[i - 1]]) offsets.push(i);
+    }
+    offsets.push(rowIndices.length);
+    return { count: offsets.length - 1, offsets, grouped: rowIndices };
+}

src/extensions/mvs/helpers/utils.ts

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { hashString } from '../../../mol-data/util';
+import { Color } from '../../../mol-util/color';
+import { ColorNames } from '../../../mol-util/color/names';
+
+
+/** Represents either the result or the reason of failure of an operation that might have failed */
+export type Maybe<T> = { ok: true, value: T } | { ok: false, error: any }
+
+/** Try to await a promise and return an object with its result (if resolved) or with the error (if rejected) */
+export async function safePromise<T>(promise: T): Promise<Maybe<Awaited<T>>> {
+    try {
+        const value = await promise;
+        return { ok: true, value };
+    } catch (error) {
+        return { ok: false, error };
+    }
+}
+
+
+/** A map where values are arrays. Handles missing keys when adding values. */
+export class MultiMap<K, V> implements Mapping<K, V[]> {
+    private _map = new Map();
+
+    /** Return the array of values assidned to a key (or `undefined` if no such values) */
+    get(key: K): V[] | undefined {
+        return this._map.get(key);
+    }
+    /** Append value to a key (handles missing keys) */
+    add(key: K, value: V) {
+        if (!this._map.has(key)) {
+            this._map.set(key, []);
+        }
+        this._map.get(key)!.push(value);
+    }
+}
+
+/** Basic subset of `Map<K, V>`, only needs to have `get` method */
+export type Mapping<K, V> = Pick<Map<K, V>, 'get'>
+
+/** Implementation of `Map` where keys are integers
+ * and most keys are expected to be from interval `[0, limit)`.
+ * For the keys within this interval, performance is better than `Map` (implemented by array).
+ * For the keys out of this interval, performance is slightly worse than `Map`. */
+export class NumberMap<K extends number, V> implements Mapping<K, V> {
+    private array: V[];
+    private map: Map<K, V>;
+    constructor(public readonly limit: K) {
+        this.array = new Array(limit);
+        this.map = new Map();
+    }
+    get(key: K): V | undefined {
+        if (0 <= key && key < this.limit) return this.array[key];
+        else return this.map.get(key);
+    }
+    set(key: K, value: V): void {
+        if (0 <= key && key < this.limit) this.array[key] = value;
+        else this.map.set(key, value);
+    }
+}
+
+
+/** Return `true` if `value` is not `undefined` or `null`.
+ * Prefer this over `value !== undefined`
+ * (for maybe if we want to allow `null` in `AnnotationRow` in the future) */
+export function isDefined<T>(value: T | undefined | null): value is T {
+    return value !== undefined && value !== null;
+}
+/** Return `true` if at least one of `values` is not `undefined` or `null`. */
+export function isAnyDefined(...values: any[]): boolean {
+    return values.some(v => isDefined(v));
+}
+/** Return filtered array containing all original elements except `undefined` or `null`. */
+export function filterDefined<T>(elements: (T | undefined | null)[]): T[] {
+    return elements.filter(x => x !== undefined && x !== null) as T[];
+}
+
+/** Create an 8-hex-character hash for a given input string, e.g. 'spanish inquisition' -> 'bd65e59a' */
+export function stringHash(input: string): string {
+    const uint32hash = hashString(input) >>> 0; // >>>0 converts to uint32, LOL
+    return uint32hash.toString(16).padStart(8, '0');
+}
+
+/** Return type of elements in a set */
+export type ElementOfSet<S> = S extends Set<infer T> ? T : never
+
+
+/** Convert `colorString` (either X11 color name like 'magenta' or hex code like '#ff00ff') to Color.
+ * Return `undefined` if `colorString` cannot be converted. */
+export function decodeColor(colorString: string | undefined): Color | undefined {
+    if (colorString === undefined) return undefined;
+    let result: Color | undefined;
+    if (isHexColorString(colorString)) {
+        if (colorString.length === 4) {
+            // convert short form to full form (#f0f -> #ff00ff)
+            colorString = `#${colorString[1]}${colorString[1]}${colorString[2]}${colorString[2]}${colorString[3]}${colorString[3]}`;
+        }
+        result = Color.fromHexStyle(colorString);
+        if (result !== undefined && !isNaN(result)) return result;
+    }
+    result = ColorNames[colorString.toLowerCase() as keyof typeof ColorNames];
+    if (result !== undefined) return result;
+    return undefined;
+}
+
+/** Hexadecimal color string, e.g. '#FF1100' */
+export type HexColor = string & { '@type': 'HexColorString' }
+export function HexColor(str: string) {
+    if (!isHexColorString(str)) {
+        throw new Error(`ValueError: "${str}" is not a valid hex color string`);
+    }
+    return str as HexColor;
+}
+
+/** Regular expression matching a hexadecimal color string, e.g. '#FF1100' or '#f10' */
+const hexColorRegex = /^#([0-9A-F]{3}){1,2}$/i;
+
+/** Decide if a string is a valid hexadecimal color string (6-digit or 3-digit, e.g. '#FF1100' or '#f10') */
+export function isHexColorString(str: any): str is HexColor {
+    return typeof str === 'string' && hexColorRegex.test(str);
+}

src/extensions/mvs/load-helpers.ts

@@ -0,0 +1,345 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Mat3, Mat4, Vec3 } from '../../mol-math/linear-algebra';
+import { StructureComponentParams } from '../../mol-plugin-state/helpers/structure-component';
+import { StructureFromModel, TransformStructureConformation } from '../../mol-plugin-state/transforms/model';
+import { StructureRepresentation3D } from '../../mol-plugin-state/transforms/representation';
+import { PluginContext } from '../../mol-plugin/context';
+import { StateBuilder, StateObjectSelector, StateTransformer } from '../../mol-state';
+import { arrayDistinct } from '../../mol-util/array';
+import { canonicalJsonString } from '../../mol-util/json';
+import { MVSAnnotationColorThemeProps, MVSAnnotationColorThemeProvider } from './components/annotation-color-theme';
+import { MVSAnnotationLabelRepresentationProvider } from './components/annotation-label/representation';
+import { MVSAnnotationSpec } from './components/annotation-prop';
+import { MVSAnnotationStructureComponentProps } from './components/annotation-structure-component';
+import { MVSAnnotationTooltipsProps } from './components/annotation-tooltips-prop';
+import { CustomTooltipsProps } from './components/custom-tooltips-prop';
+import { MultilayerColorThemeName, MultilayerColorThemeProps, NoColor } from './components/multilayer-color-theme';
+import { SelectorAll } from './components/selector';
+import { rowToExpression, rowsToExpression } from './helpers/selections';
+import { ElementOfSet, decodeColor, isDefined, stringHash } from './helpers/utils';
+import { MolstarLoadingContext } from './load';
+import { Kind, ParamsOfKind, SubTree, SubTreeOfKind, Tree, getChildren } from './tree/generic/tree-schema';
+import { dfs } from './tree/generic/tree-utils';
+import { MolstarKind, MolstarNode, MolstarTree } from './tree/molstar/molstar-tree';
+import { DefaultColor } from './tree/mvs/mvs-defaults';
+
+
+/** Function responsible for loading a tree node `node` into Mol*.
+ * Should apply changes within `update` but not commit them.
+ * Should modify `context` accordingly, if it is needed for loading other nodes later.
+ * `msParent` is the result of loading the node's parent into Mol* state hierarchy (or the hierarchy root in case of root node). */
+export type LoadingAction<TNode extends Tree, TContext> = (update: StateBuilder.Root, msParent: StateObjectSelector, node: TNode, context: TContext) => StateObjectSelector | undefined
+
+/** Loading actions for loading a tree into Mol*, per node kind. */
+export type LoadingActions<TTree extends Tree, TContext> = { [kind in Kind<SubTree<TTree>>]?: LoadingAction<SubTreeOfKind<TTree, kind>, TContext> }
+
+/** Load a tree into Mol*, by applying loading actions in DFS order and then commiting at once.
+ * If `deletePrevious`, remove all objects in the current Mol* state; otherwise add to the current state. */
+export async function loadTree<TTree extends Tree, TContext>(plugin: PluginContext, tree: TTree, loadingActions: LoadingActions<TTree, TContext>, context: TContext, options?: { deletePrevious?: boolean }) {
+    const mapping = new Map<SubTree<TTree>, StateObjectSelector | undefined>();
+    const update = plugin.build();
+    const msRoot = update.toRoot().selector;
+    if (options?.deletePrevious) {
+        update.currentTree.children.get(msRoot.ref).forEach(child => update.delete(child));
+    }
+    dfs<TTree>(tree, (node, parent) => {
+        const kind: Kind<typeof node> = node.kind;
+        const action = loadingActions[kind] as LoadingAction<typeof node, TContext> | undefined;
+        if (action) {
+            const msParent = parent ? mapping.get(parent) : msRoot;
+            if (msParent) {
+                const msNode = action(update, msParent, node, context);
+                mapping.set(node, msNode);
+            } else {
+                console.warn(`No target found for this "${node.kind}" node`);
+                return;
+            }
+        }
+    });
+    await update.commit();
+}
+
+
+export const AnnotationFromUriKinds = new Set(['color_from_uri', 'component_from_uri', 'label_from_uri', 'tooltip_from_uri'] satisfies MolstarKind[]);
+export type AnnotationFromUriKind = ElementOfSet<typeof AnnotationFromUriKinds>
+
+export const AnnotationFromSourceKinds = new Set(['color_from_source', 'component_from_source', 'label_from_source', 'tooltip_from_source'] satisfies MolstarKind[]);
+export type AnnotationFromSourceKind = ElementOfSet<typeof AnnotationFromSourceKinds>
+
+
+/** Return a 4x4 matrix representing a rotation followed by a translation */
+export function transformFromRotationTranslation(rotation: number[] | null | undefined, translation: number[] | null | undefined): Mat4 {
+    if (rotation && rotation.length !== 9) throw new Error(`'rotation' param for 'transform' node must be array of 9 elements, found ${rotation}`);
+    if (translation && translation.length !== 3) throw new Error(`'translation' param for 'transform' node must be array of 3 elements, found ${translation}`);
+    const T = Mat4.identity();
+    if (rotation) {
+        Mat4.fromMat3(T, Mat3.fromArray(Mat3(), rotation, 0));
+    }
+    if (translation) {
+        Mat4.setTranslation(T, Vec3.fromArray(Vec3(), translation, 0));
+    }
+    if (!Mat4.isRotationAndTranslation(T)) throw new Error(`'rotation' param for 'transform' is not a valid rotation matrix: ${rotation}`);
+    return T;
+}
+
+/** Create an array of props for `TransformStructureConformation` transformers from all 'transform' nodes applied to a 'structure' node. */
+export function transformProps(node: SubTreeOfKind<MolstarTree, 'structure'>): StateTransformer.Params<TransformStructureConformation>[] {
+    const result = [] as StateTransformer.Params<TransformStructureConformation>[];
+    const transforms = getChildren(node).filter(c => c.kind === 'transform') as MolstarNode<'transform'>[];
+    for (const transform of transforms) {
+        const { rotation, translation } = transform.params;
+        const matrix = transformFromRotationTranslation(rotation, translation);
+        result.push({ transform: { name: 'matrix', params: { data: matrix, transpose: false } } });
+    }
+    return result;
+}
+
+/** Collect distinct annotation specs from all nodes in `tree` and set `context.annotationMap[node]` to respective annotationIds */
+export function collectAnnotationReferences(tree: SubTree<MolstarTree>, context: MolstarLoadingContext): MVSAnnotationSpec[] {
+    const distinctSpecs: { [key: string]: MVSAnnotationSpec } = {};
+    dfs(tree, node => {
+        let spec: Omit<MVSAnnotationSpec, 'id'> | undefined = undefined;
+        if (AnnotationFromUriKinds.has(node.kind as any)) {
+            const p = (node as MolstarNode<AnnotationFromUriKind>).params;
+            spec = { source: { name: 'url', params: { url: p.uri, format: p.format } }, schema: p.schema, cifBlock: blockSpec(p.block_header, p.block_index), cifCategory: p.category_name ?? undefined };
+        } else if (AnnotationFromSourceKinds.has(node.kind as any)) {
+            const p = (node as MolstarNode<AnnotationFromSourceKind>).params;
+            spec = { source: { name: 'source-cif', params: {} }, schema: p.schema, cifBlock: blockSpec(p.block_header, p.block_index), cifCategory: p.category_name ?? undefined };
+        }
+        if (spec) {
+            const key = canonicalJsonString(spec as any);
+            distinctSpecs[key] ??= { ...spec, id: stringHash(key) };
+            (context.annotationMap ??= new Map()).set(node, distinctSpecs[key].id);
+        }
+    });
+    return Object.values(distinctSpecs);
+}
+function blockSpec(header: string | null | undefined, index: number | null | undefined): MVSAnnotationSpec['cifBlock'] {
+    if (isDefined(header)) {
+        return { name: 'header', params: { header: header } };
+    } else {
+        return { name: 'index', params: { index: index ?? 0 } };
+    }
+}
+
+/** Collect annotation tooltips from all nodes in `tree` and map them to annotationIds. */
+export function collectAnnotationTooltips(tree: SubTreeOfKind<MolstarTree, 'structure'>, context: MolstarLoadingContext) {
+    const annotationTooltips: MVSAnnotationTooltipsProps['tooltips'] = [];
+    dfs(tree, node => {
+        if (node.kind === 'tooltip_from_uri' || node.kind === 'tooltip_from_source') {
+            const annotationId = context.annotationMap?.get(node);
+            if (annotationId) {
+                annotationTooltips.push({ annotationId, fieldName: node.params.field_name });
+            };
+        }
+    });
+    return arrayDistinct(annotationTooltips);
+}
+/** Collect annotation tooltips from all nodes in `tree`. */
+export function collectInlineTooltips(tree: SubTreeOfKind<MolstarTree, 'structure'>, context: MolstarLoadingContext) {
+    const inlineTooltips: CustomTooltipsProps['tooltips'] = [];
+    dfs(tree, (node, parent) => {
+        if (node.kind === 'tooltip') {
+            if (parent?.kind === 'component') {
+                inlineTooltips.push({
+                    text: node.params.text,
+                    selector: componentPropsFromSelector(parent.params.selector),
+                });
+            } else if (parent?.kind === 'component_from_uri' || parent?.kind === 'component_from_source') {
+                const p = componentFromXProps(parent, context);
+                if (isDefined(p.annotationId) && isDefined(p.fieldName) && isDefined(p.fieldValues)) {
+                    inlineTooltips.push({
+                        text: node.params.text,
+                        selector: {
+                            name: 'annotation',
+                            params: { annotationId: p.annotationId, fieldName: p.fieldName, fieldValues: p.fieldValues },
+                        },
+                    });
+                }
+            }
+        }
+    });
+    return inlineTooltips;
+}
+
+/** Return `true` for components nodes which only serve for tooltip placement (not to be created in the MolStar object hierarchy) */
+export function isPhantomComponent(node: SubTreeOfKind<MolstarTree, 'component' | 'component_from_uri' | 'component_from_source'>) {
+    return node.children && node.children.every(child => child.kind === 'tooltip' || child.kind === 'tooltip_from_uri' || child.kind === 'tooltip_from_source');
+    // These nodes could theoretically be removed when converting MVS to Molstar tree, but would get very tricky if we allow nested components
+}
+
+/** Create props for `StructureFromModel` transformer from a structure node. */
+export function structureProps(node: MolstarNode<'structure'>): StateTransformer.Params<StructureFromModel> {
+    const params = node.params;
+    switch (params.type) {
+        case 'model':
+            return {
+                type: {
+                    name: 'model',
+                    params: {}
+                },
+            };
+        case 'assembly':
+            return {
+                type: {
+                    name: 'assembly',
+                    params: { id: params.assembly_id ?? undefined }
+                },
+            };
+        case 'symmetry':
+            return {
+                type: {
+                    name: 'symmetry',
+                    params: { ijkMin: Vec3.ofArray(params.ijk_min), ijkMax: Vec3.ofArray(params.ijk_max) }
+                },
+            };
+        case 'symmetry_mates':
+            return {
+                type: {
+                    name: 'symmetry-mates',
+                    params: { radius: params.radius }
+                }
+            };
+        default:
+            throw new Error(`NotImplementedError: Loading action for "structure" node, type "${params.type}"`);
+    }
+}
+
+/** Create value for `type` prop for `StructureComponent` transformer based on a MVS selector. */
+export function componentPropsFromSelector(selector?: ParamsOfKind<MolstarTree, 'component'>['selector']): StructureComponentParams['type'] {
+    if (selector === undefined) {
+        return SelectorAll;
+    } else if (typeof selector === 'string') {
+        return { name: 'static', params: selector };
+    } else if (Array.isArray(selector)) {
+        return { name: 'expression', params: rowsToExpression(selector) };
+    } else {
+        return { name: 'expression', params: rowToExpression(selector) };
+    }
+}
+
+/** Create props for `StructureRepresentation3D` transformer from a label_from_* node. */
+export function labelFromXProps(node: MolstarNode<'label_from_uri' | 'label_from_source'>, context: MolstarLoadingContext): Partial<StateTransformer.Params<StructureRepresentation3D>> {
+    const annotationId = context.annotationMap?.get(node);
+    const fieldName = node.params.field_name;
+    const nearestReprNode = context.nearestReprMap?.get(node);
+    return {
+        type: { name: MVSAnnotationLabelRepresentationProvider.name, params: { annotationId, fieldName } },
+        colorTheme: colorThemeForNode(nearestReprNode, context),
+    };
+}
+
+/** Create props for `AnnotationStructureComponent` transformer from a component_from_* node. */
+export function componentFromXProps(node: MolstarNode<'component_from_uri' | 'component_from_source'>, context: MolstarLoadingContext): Partial<MVSAnnotationStructureComponentProps> {
+    const annotationId = context.annotationMap?.get(node);
+    const { field_name, field_values } = node.params;
+    return {
+        annotationId,
+        fieldName: field_name,
+        fieldValues: field_values ? { name: 'selected', params: field_values.map(v => ({ value: v })) } : { name: 'all', params: {} },
+        nullIfEmpty: false,
+    };
+}
+
+/** Create props for `StructureRepresentation3D` transformer from a representation node. */
+export function representationProps(params: ParamsOfKind<MolstarTree, 'representation'>): Partial<StateTransformer.Params<StructureRepresentation3D>> {
+    switch (params.type) {
+        case 'cartoon':
+            return {
+                type: { name: 'cartoon', params: {} },
+            };
+        case 'ball_and_stick':
+            return {
+                type: { name: 'ball-and-stick', params: { sizeFactor: 0.5, sizeAspectRatio: 0.5 } },
+            };
+        case 'surface':
+            return {
+                type: { name: 'molecular-surface', params: {} },
+                sizeTheme: { name: 'physical', params: { scale: 1 } },
+            };
+        default:
+            throw new Error('NotImplementedError');
+    }
+}
+
+/** Create value for `colorTheme` prop for `StructureRepresentation3D` transformer from a representation node based on color* nodes in its subtree. */
+export function colorThemeForNode(node: SubTreeOfKind<MolstarTree, 'color' | 'color_from_uri' | 'color_from_source' | 'representation'> | undefined, context: MolstarLoadingContext): StateTransformer.Params<StructureRepresentation3D>['colorTheme'] {
+    if (node?.kind === 'representation') {
+        const children = getChildren(node).filter(c => c.kind === 'color' || c.kind === 'color_from_uri' || c.kind === 'color_from_source') as MolstarNode<'color' | 'color_from_uri' | 'color_from_source'>[];
+        if (children.length === 0) {
+            return {
+                name: 'uniform',
+                params: { value: decodeColor(DefaultColor) },
+            };
+        } else if (children.length === 1 && appliesColorToWholeRepr(children[0])) {
+            return colorThemeForNode(children[0], context);
+        } else {
+            const layers: MultilayerColorThemeProps['layers'] = children.map(
+                c => ({ theme: colorThemeForNode(c, context), selection: componentPropsFromSelector(c.kind === 'color' ? c.params.selector : undefined) })
+            );
+            return {
+                name: MultilayerColorThemeName,
+                params: { layers },
+            };
+        }
+    }
+    let annotationId: string | undefined = undefined;
+    let fieldName: string | undefined = undefined;
+    let color: string | undefined = undefined;
+    switch (node?.kind) {
+        case 'color_from_uri':
+        case 'color_from_source':
+            annotationId = context.annotationMap?.get(node);
+            fieldName = node.params.field_name;
+            break;
+        case 'color':
+            color = node.params.color;
+            break;
+    }
+    if (annotationId) {
+        return {
+            name: MVSAnnotationColorThemeProvider.name,
+            params: { annotationId, fieldName, background: NoColor } satisfies Partial<MVSAnnotationColorThemeProps>,
+        };
+    } else {
+        return {
+            name: 'uniform',
+            params: { value: decodeColor(color) },
+        };
+    }
+}
+function appliesColorToWholeRepr(node: MolstarNode<'color' | 'color_from_uri' | 'color_from_source'>): boolean {
+    if (node.kind === 'color') {
+        return !isDefined(node.params.selector) || node.params.selector === 'all';
+    } else {
+        return true;
+    }
+}
+
+/** Create a mapping of nearest representation nodes for each node in the tree
+ * (to transfer coloring to label nodes smartly).
+ * Only considers nodes within the same 'structure' subtree. */
+export function makeNearestReprMap(root: MolstarTree) {
+    const map = new Map<MolstarNode, MolstarNode<'representation'>>();
+    // Propagate up:
+    dfs(root, undefined, (node, parent) => {
+        if (node.kind === 'representation') {
+            map.set(node, node);
+        }
+        if (node.kind !== 'structure' && map.has(node) && parent && !map.has(parent)) { // do not propagate above the lowest structure node
+            map.set(parent, map.get(node)!);
+        }
+    });
+    // Propagate down:
+    dfs(root, (node, parent) => {
+        if (!map.has(node) && parent && map.has(parent)) {
+            map.set(node, map.get(parent)!);
+        }
+    });
+    return map;
+}

src/extensions/mvs/load.ts

@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { Download, ParseCif } from '../../mol-plugin-state/transforms/data';
+import { CustomModelProperties, CustomStructureProperties, ModelFromTrajectory, StructureComponent, StructureFromModel, TrajectoryFromMmCif, TrajectoryFromPDB, TransformStructureConformation } from '../../mol-plugin-state/transforms/model';
+import { StructureRepresentation3D } from '../../mol-plugin-state/transforms/representation';
+import { PluginContext } from '../../mol-plugin/context';
+import { StateBuilder, StateObjectSelector } from '../../mol-state';
+import { canonicalJsonString } from '../../mol-util/json';
+import { MVSAnnotationsProvider } from './components/annotation-prop';
+import { MVSAnnotationStructureComponent } from './components/annotation-structure-component';
+import { MVSAnnotationTooltipsProvider } from './components/annotation-tooltips-prop';
+import { CustomLabelProps, CustomLabelRepresentationProvider } from './components/custom-label/representation';
+import { CustomTooltipsProvider } from './components/custom-tooltips-prop';
+import { MolViewSpec } from './behavior';
+import { setCamera, setCanvas, setFocus } from './camera';
+import { AnnotationFromSourceKind, AnnotationFromUriKind, LoadingActions, collectAnnotationReferences, collectAnnotationTooltips, collectInlineTooltips, colorThemeForNode, componentFromXProps, componentPropsFromSelector, isPhantomComponent, labelFromXProps, loadTree, makeNearestReprMap, representationProps, structureProps, transformProps } from './load-helpers';
+import { MVSData } from './mvs-data';
+import { ParamsOfKind, SubTreeOfKind, validateTree } from './tree/generic/tree-schema';
+import { convertMvsToMolstar, mvsSanityCheck } from './tree/molstar/conversion';
+import { MolstarNode, MolstarTree, MolstarTreeSchema } from './tree/molstar/molstar-tree';
+import { MVSTreeSchema } from './tree/mvs/mvs-tree';
+
+
+/** Load a MolViewSpec (MVS) tree into the Mol* plugin.
+ * If `options.deletePrevious`, remove all objects in the current Mol* state; otherwise add to the current state.
+ * If `options.sanityChecks`, run some sanity checks and print potential issues to the console. */
+export async function loadMVS(plugin: PluginContext, data: MVSData, options: { deletePrevious?: boolean, sanityChecks?: boolean } = {}) {
+    // console.log(`MVS tree (v${data.version}):\n${treeToString(data.root)}`);
+    validateTree(MVSTreeSchema, data.root, 'MVS');
+    if (options.sanityChecks) mvsSanityCheck(data.root);
+    const molstarTree = convertMvsToMolstar(data.root);
+    // console.log(`Converted MolStar tree:\n${treeToString(molstarTree)}`);
+    validateTree(MolstarTreeSchema, molstarTree, 'Converted Molstar');
+    await loadMolstarTree(plugin, molstarTree, options);
+}
+
+
+/** Load a `MolstarTree` into the Mol* plugin.
+ * If `deletePrevious`, remove all objects in the current Mol* state; otherwise add to the current state. */
+async function loadMolstarTree(plugin: PluginContext, tree: MolstarTree, options?: { deletePrevious?: boolean }) {
+    const mvsExtensionLoaded = plugin.state.hasBehavior(MolViewSpec);
+    if (!mvsExtensionLoaded) throw new Error('MolViewSpec extension is not loaded.');
+
+    const context: MolstarLoadingContext = {};
+
+    await loadTree(plugin, tree, MolstarLoadingActions, context, options);
+
+    setCanvas(plugin, context.canvas);
+    if (context.focus?.kind === 'camera') {
+        await setCamera(plugin, context.focus.params);
+    } else if (context.focus?.kind === 'focus') {
+        await setFocus(plugin, context.focus.focusTarget, context.focus.params);
+    } else {
+        await setFocus(plugin, undefined, undefined);
+    }
+}
+
+/** Mutable context for loading a `MolstarTree`, available throughout the loading. */
+export interface MolstarLoadingContext {
+    /** Maps `*_from_[uri|source]` nodes to annotationId they should reference */
+    annotationMap?: Map<MolstarNode<AnnotationFromUriKind | AnnotationFromSourceKind>, string>,
+    /** Maps each node (on 'structure' or lower level) to its nearest 'representation' node */
+    nearestReprMap?: Map<MolstarNode, MolstarNode<'representation'>>,
+    focus?: { kind: 'camera', params: ParamsOfKind<MolstarTree, 'camera'> } | { kind: 'focus', focusTarget: StateObjectSelector, params: ParamsOfKind<MolstarTree, 'focus'> },
+    canvas?: ParamsOfKind<MolstarTree, 'canvas'>,
+}
+
+
+/** Loading actions for loading a `MolstarTree`, per node kind. */
+const MolstarLoadingActions: LoadingActions<MolstarTree, MolstarLoadingContext> = {
+    root(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'root'>, context: MolstarLoadingContext): StateObjectSelector {
+        context.nearestReprMap = makeNearestReprMap(node);
+        return msParent;
+    },
+    download(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'download'>): StateObjectSelector {
+        return update.to(msParent).apply(Download, {
+            url: node.params.url,
+            isBinary: node.params.is_binary,
+        }).selector;
+    },
+    parse(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'parse'>): StateObjectSelector | undefined {
+        const format = node.params.format;
+        if (format === 'cif') {
+            return update.to(msParent).apply(ParseCif, {}).selector;
+        } else if (format === 'pdb') {
+            return msParent;
+        } else {
+            console.error(`Unknown format in "parse" node: "${format}"`);
+            return undefined;
+        }
+    },
+    trajectory(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'trajectory'>): StateObjectSelector | undefined {
+        const format = node.params.format;
+        if (format === 'cif') {
+            return update.to(msParent).apply(TrajectoryFromMmCif, {
+                blockHeader: node.params.block_header ?? '', // Must set to '' because just undefined would get overwritten by createDefaults
+                blockIndex: node.params.block_index ?? undefined,
+            }).selector;
+        } else if (format === 'pdb') {
+            return update.to(msParent).apply(TrajectoryFromPDB, {}).selector;
+        } else {
+            console.error(`Unknown format in "trajectory" node: "${format}"`);
+            return undefined;
+        }
+    },
+    model(update: StateBuilder.Root, msParent: StateObjectSelector, node: SubTreeOfKind<MolstarTree, 'model'>, context: MolstarLoadingContext): StateObjectSelector {
+        const annotations = collectAnnotationReferences(node, context);
+        return update.to(msParent)
+            .apply(ModelFromTrajectory, {
+                modelIndex: node.params.model_index,
+            })
+            .apply(CustomModelProperties, {
+                properties: {
+                    [MVSAnnotationsProvider.descriptor.name]: { annotations }
+                },
+                autoAttach: [
+                    MVSAnnotationsProvider.descriptor.name
+                ],
+            }).selector;
+    },
+    structure(update: StateBuilder.Root, msParent: StateObjectSelector, node: SubTreeOfKind<MolstarTree, 'structure'>, context: MolstarLoadingContext): StateObjectSelector {
+        const props = structureProps(node);
+        let result: StateObjectSelector = update.to(msParent).apply(StructureFromModel, props).selector;
+        for (const t of transformProps(node)) {
+            result = update.to(result).apply(TransformStructureConformation, t).selector;
+        }
+        const annotationTooltips = collectAnnotationTooltips(node, context);
+        const inlineTooltips = collectInlineTooltips(node, context);
+        if (annotationTooltips.length + inlineTooltips.length > 0) {
+            update.to(result).apply(CustomStructureProperties, {
+                properties: {
+                    [MVSAnnotationTooltipsProvider.descriptor.name]: { tooltips: annotationTooltips },
+                    [CustomTooltipsProvider.descriptor.name]: { tooltips: inlineTooltips },
+                },
+                autoAttach: [
+                    MVSAnnotationTooltipsProvider.descriptor.name,
+                    CustomTooltipsProvider.descriptor.name,
+                ],
+            });
+        }
+        return result;
+    },
+    tooltip: undefined, // No action needed, already loaded in `structure`
+    tooltip_from_uri: undefined, // No action needed, already loaded in `structure`
+    tooltip_from_source: undefined, // No action needed, already loaded in `structure`
+    component(update: StateBuilder.Root, msParent: StateObjectSelector, node: SubTreeOfKind<MolstarTree, 'component'>): StateObjectSelector | undefined {
+        if (isPhantomComponent(node)) {
+            return msParent;
+        }
+        const selector = node.params.selector;
+        return update.to(msParent).apply(StructureComponent, {
+            type: componentPropsFromSelector(selector),
+            label: canonicalJsonString(selector),
+            nullIfEmpty: false,
+        }).selector;
+    },
+    component_from_uri(update: StateBuilder.Root, msParent: StateObjectSelector, node: SubTreeOfKind<MolstarTree, 'component_from_uri'>, context: MolstarLoadingContext): StateObjectSelector | undefined {
+        if (isPhantomComponent(node)) return undefined;
+        const props = componentFromXProps(node, context);
+        return update.to(msParent).apply(MVSAnnotationStructureComponent, props).selector;
+    },
+    component_from_source(update: StateBuilder.Root, msParent: StateObjectSelector, node: SubTreeOfKind<MolstarTree, 'component_from_source'>, context: MolstarLoadingContext): StateObjectSelector | undefined {
+        if (isPhantomComponent(node)) return undefined;
+        const props = componentFromXProps(node, context);
+        return update.to(msParent).apply(MVSAnnotationStructureComponent, props).selector;
+    },
+    representation(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'representation'>, context: MolstarLoadingContext): StateObjectSelector {
+        return update.to(msParent).apply(StructureRepresentation3D, {
+            ...representationProps(node.params),
+            colorTheme: colorThemeForNode(node, context),
+        }).selector;
+    },
+    color: undefined, // No action needed, already loaded in `structure`
+    color_from_uri: undefined, // No action needed, already loaded in `structure`
+    color_from_source: undefined, // No action needed, already loaded in `structure`
+    label(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'label'>, context: MolstarLoadingContext): StateObjectSelector {
+        const item: CustomLabelProps['items'][number] = {
+            text: node.params.text,
+            position: { name: 'selection', params: {} },
+        };
+        const nearestReprNode = context.nearestReprMap?.get(node);
+        return update.to(msParent).apply(StructureRepresentation3D, {
+            type: {
+                name: CustomLabelRepresentationProvider.name,
+                params: { items: [item] } satisfies Partial<CustomLabelProps>
+            },
+            colorTheme: colorThemeForNode(nearestReprNode, context),
+        }).selector;
+    },
+    label_from_uri(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'label_from_uri'>, context: MolstarLoadingContext): StateObjectSelector {
+        const props = labelFromXProps(node, context);
+        return update.to(msParent).apply(StructureRepresentation3D, props).selector;
+    },
+    label_from_source(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'label_from_source'>, context: MolstarLoadingContext): StateObjectSelector {
+        const props = labelFromXProps(node, context);
+        return update.to(msParent).apply(StructureRepresentation3D, props).selector;
+    },
+    focus(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'focus'>, context: MolstarLoadingContext): StateObjectSelector {
+        context.focus = { kind: 'focus', focusTarget: msParent, params: node.params };
+        return msParent;
+    },
+    camera(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'camera'>, context: MolstarLoadingContext): StateObjectSelector {
+        context.focus = { kind: 'camera', params: node.params };
+        return msParent;
+    },
+    canvas(update: StateBuilder.Root, msParent: StateObjectSelector, node: MolstarNode<'canvas'>, context: MolstarLoadingContext): StateObjectSelector {
+        context.canvas = node.params;
+        return msParent;
+    },
+};

src/extensions/mvs/mvs-data.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { treeValidationIssues } from './tree/generic/tree-schema';
+import { Root, createMVSBuilder } from './tree/mvs/mvs-builder';
+import { MVSTree, MVSTreeSchema } from './tree/mvs/mvs-tree';
+
+
+/** Top level of the MolViewSpec (MVS) data format. */
+export interface MVSData {
+    /** MolViewSpec tree */
+    root: MVSTree,
+    /** Integer defining the major version of MolViewSpec format (e.g. 1 for version '1.0.8') */
+    version: number,
+}
+
+export const MVSData = {
+    /** Currently supported major version of MolViewSpec format (e.g. 1 for version '1.0.8') */
+    SupportedVersion: 1,
+
+    /** Parse MVSJ (MolViewSpec-JSON) format to `MVSData`. Does not include any validation. */
+    fromMVSJ(mvsjString: string): MVSData {
+        const result: MVSData = JSON.parse(mvsjString);
+        if (result?.version > MVSData.SupportedVersion) {
+            console.warn(`Loaded MVS is of higher version (${result?.version}) than currently supported version (${MVSData.SupportedVersion}). Some features may not work as expected.`);
+        }
+        return result;
+    },
+
+    /** Encode `MVSData` to MVSJ (MolViewSpec-JSON) string. Use `space` parameter to control formatting (as with `JSON.stringify`). */
+    toMVSJ(mvsData: MVSData, space?: string | number): string {
+        return JSON.stringify(mvsData, undefined, space);
+    },
+
+    /** Validate `MVSData`. Return `true` if OK; `false` if not OK.
+     * If `options.noExtra` is true, presence of any extra node parameters is treated as an issue. */
+    isValid(mvsData: MVSData, options: { noExtra?: boolean } = {}): boolean {
+        return MVSData.validationIssues(mvsData, options) === undefined;
+    },
+
+    /** Validate `MVSData`. Return `undefined` if OK; list of issues if not OK.
+     * If `options.noExtra` is true, presence of any extra node parameters is treated as an issue. */
+    validationIssues(mvsData: MVSData, options: { noExtra?: boolean } = {}): string[] | undefined {
+        if (typeof mvsData.version !== 'number') return [`"version" in MVS must be a number, not ${mvsData.version}`];
+        if (mvsData.root === undefined) return [`"root" missing in MVS`];
+        return treeValidationIssues(MVSTreeSchema, mvsData.root, options);
+    },
+
+    /** Create a new MolViewSpec builder containing only a root node. Example of MVS builder usage:
+     *
+     * ```
+     * const builder = MVSData.createBuilder();
+     * builder.canvas({ background_color: 'white' });
+     * const struct = builder.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/1og2_updated.cif' }).parse({ format: 'mmcif' }).modelStructure();
+     * struct.component().representation().color({ color: HexColor('#3050F8') });
+     * console.log(JSON.stringify(builder.getState()));
+     * ```
+     */
+    createBuilder(): Root {
+        return createMVSBuilder();
+    },
+};

src/extensions/mvs/tree/generic/_spec/params-schema.spec.ts

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import * as iots from 'io-ts';
+
+import { fieldValidationIssues, RequiredField, literal, nullable, paramsValidationIssues, OptionalField } from '../params-schema';
+
+
+describe('fieldValidationIssues', () => {
+    it('fieldValidationIssues string', async () => {
+        const stringField = RequiredField(iots.string);
+        expect(fieldValidationIssues(stringField, 'hello')).toBeUndefined();
+        expect(fieldValidationIssues(stringField, '')).toBeUndefined();
+        expect(fieldValidationIssues(stringField, 5)).toBeTruthy();
+        expect(fieldValidationIssues(stringField, null)).toBeTruthy();
+        expect(fieldValidationIssues(stringField, undefined)).toBeTruthy();
+    });
+    it('fieldValidationIssues string choice', async () => {
+        const colorParam = RequiredField(literal('red', 'green', 'blue', 'yellow'));
+        expect(fieldValidationIssues(colorParam, 'red')).toBeUndefined();
+        expect(fieldValidationIssues(colorParam, 'green')).toBeUndefined();
+        expect(fieldValidationIssues(colorParam, 'blue')).toBeUndefined();
+        expect(fieldValidationIssues(colorParam, 'yellow')).toBeUndefined();
+        expect(fieldValidationIssues(colorParam, 'banana')).toBeTruthy();
+        expect(fieldValidationIssues(colorParam, 5)).toBeTruthy();
+        expect(fieldValidationIssues(colorParam, null)).toBeTruthy();
+        expect(fieldValidationIssues(colorParam, undefined)).toBeTruthy();
+    });
+    it('fieldValidationIssues number choice', async () => {
+        const numberParam = RequiredField(literal(1, 2, 3, 4));
+        expect(fieldValidationIssues(numberParam, 1)).toBeUndefined();
+        expect(fieldValidationIssues(numberParam, 2)).toBeUndefined();
+        expect(fieldValidationIssues(numberParam, 3)).toBeUndefined();
+        expect(fieldValidationIssues(numberParam, 4)).toBeUndefined();
+        expect(fieldValidationIssues(numberParam, 5)).toBeTruthy();
+        expect(fieldValidationIssues(numberParam, '1')).toBeTruthy();
+        expect(fieldValidationIssues(numberParam, null)).toBeTruthy();
+        expect(fieldValidationIssues(numberParam, undefined)).toBeTruthy();
+    });
+    it('fieldValidationIssues int', async () => {
+        const numberParam = RequiredField(iots.Integer);
+        expect(fieldValidationIssues(numberParam, 1)).toBeUndefined();
+        expect(fieldValidationIssues(numberParam, 0)).toBeUndefined();
+        expect(fieldValidationIssues(numberParam, 0.5)).toBeTruthy();
+        expect(fieldValidationIssues(numberParam, '1')).toBeTruthy();
+        expect(fieldValidationIssues(numberParam, null)).toBeTruthy();
+        expect(fieldValidationIssues(numberParam, undefined)).toBeTruthy();
+    });
+    it('fieldValidationIssues union', async () => {
+        const stringOrNumberParam = RequiredField(iots.union([iots.string, iots.number]));
+        expect(fieldValidationIssues(stringOrNumberParam, 1)).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNumberParam, 2)).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNumberParam, 'hello')).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNumberParam, '')).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNumberParam, true)).toBeTruthy();
+        expect(fieldValidationIssues(stringOrNumberParam, null)).toBeTruthy();
+        expect(fieldValidationIssues(stringOrNumberParam, undefined)).toBeTruthy();
+    });
+    it('fieldValidationIssues nullable', async () => {
+        const stringOrNullParam = RequiredField(nullable(iots.string));
+        expect(fieldValidationIssues(stringOrNullParam, 'hello')).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNullParam, '')).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNullParam, null)).toBeUndefined();
+        expect(fieldValidationIssues(stringOrNullParam, 1)).toBeTruthy();
+        expect(fieldValidationIssues(stringOrNullParam, true)).toBeTruthy();
+        expect(fieldValidationIssues(stringOrNullParam, undefined)).toBeTruthy();
+    });
+});
+
+const schema = {
+    name: OptionalField(iots.string),
+    surname: RequiredField(iots.string),
+    lunch: RequiredField(iots.boolean),
+    age: OptionalField(iots.number),
+};
+
+describe('validateParams', () => {
+    it('validateParams', async () => {
+        expect(paramsValidationIssues(schema, { surname: 'Doe', lunch: true }, { noExtra: true })).toBeUndefined();
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true }, { noExtra: true })).toBeUndefined();
+        expect(paramsValidationIssues(schema, { surname: 'Doe', lunch: true, age: 29 }, { noExtra: true })).toBeUndefined();
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true, age: 29 }, { noExtra: true })).toBeUndefined();
+        expect(paramsValidationIssues(schema, {}, { noExtra: true })).toBeTruthy();
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', age: 29 }, { noExtra: true })).toBeTruthy(); // missing `lunch`
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true, age: 'old' }, { noExtra: true })).toBeTruthy(); // wrong type of `age`
+        expect(paramsValidationIssues(schema, { surname: 'Doe', lunch: true, married: false }, { noExtra: true })).toBeTruthy(); // extra param `married`
+        expect(paramsValidationIssues(schema, { surname: 'Doe', lunch: true, married: false })).toBeUndefined(); // extra param `married`
+    });
+});
+
+
+describe('validateFullParams', () => {
+    it('validateFullParams', async () => {
+        expect(paramsValidationIssues(schema, { surname: 'Doe', lunch: true }, { requireAll: true, noExtra: true })).toBeTruthy();
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true }, { requireAll: true, noExtra: true })).toBeTruthy();
+        expect(paramsValidationIssues(schema, { surname: 'Doe', lunch: true, age: 29 }, { requireAll: true, noExtra: true })).toBeTruthy();
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true, age: 29 }, { requireAll: true, noExtra: true })).toBeUndefined();
+        expect(paramsValidationIssues(schema, {}, { requireAll: true, noExtra: true })).toBeTruthy();
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true, age: 'old' }, { requireAll: true, noExtra: true })).toBeTruthy(); // wrong type of `age`
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true, age: 29, married: true }, { requireAll: true, noExtra: true })).toBeTruthy(); // extra param `married`
+        expect(paramsValidationIssues(schema, { name: 'John', surname: 'Doe', lunch: true, age: 29, married: true }, { requireAll: true, noExtra: false })).toBeUndefined(); // extra param `married`
+    });
+});
+

src/extensions/mvs/tree/generic/params-schema.ts

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import * as iots from 'io-ts';
+import { PathReporter } from 'io-ts/PathReporter';
+import { isPlainObject, mapObjectMap } from '../../../../mol-util/object';
+
+
+/** All types that can be used in tree node params.
+ * Can be extended, this is just to list them all in one place and possibly catch some typing errors */
+type AllowedValueTypes = string | number | boolean | null | [number, number, number] | string[] | number[] | {}
+
+/** Type definition for a string  */
+export const str = iots.string;
+/** Type definition for an integer  */
+export const int = iots.Integer;
+/** Type definition for a float or integer number  */
+export const float = iots.number;
+/** Type definition for a boolean  */
+export const bool = iots.boolean;
+/** Type definition for a tuple, e.g. `tuple([str, int, int])`  */
+export const tuple = iots.tuple;
+/** Type definition for a list/array, e.g. `list(str)`  */
+export const list = iots.array;
+/** Type definition for union types, e.g. `union([str, int])` means string or integer  */
+export const union = iots.union;
+/** Type definition for nullable types, e.g. `nullable(str)` means string or `null`  */
+export function nullable<T extends iots.Type<any>>(type: T) {
+    return union([type, iots.null]);
+}
+/** Type definition for literal types, e.g. `literal('red', 'green', 'blue')` means 'red' or 'green' or 'blue'  */
+export function literal<V extends string | number | boolean>(v1: V, v2?: V, ...others: V[]) {
+    if (v2 === undefined) {
+        return iots.literal(v1);
+    } else {
+        return union([iots.literal(v1), iots.literal(v2), ...others.map(v => iots.literal(v))]);
+    }
+}
+
+
+/** Schema for one field in params (i.e. a value in a top-level key-value pair) */
+interface Field<V extends AllowedValueTypes = any, R extends boolean = boolean> {
+    /** Definition of allowed types for the field */
+    type: iots.Type<V>,
+    /** If `required===true`, the value must always be defined in molviewspec format (can be `null` if `type` allows it).
+     * If `required===false`, the value can be ommitted (meaning that a default should be used).
+     * If `type` allows `null`, the default must be `null`. */
+    required: R,
+    /** Description of what the field value means */
+    description?: string,
+}
+/** Schema for param field which must always be provided (has no default value) */
+export interface RequiredField<V extends AllowedValueTypes = any> extends Field<V> {
+    required: true,
+}
+export function RequiredField<V extends AllowedValueTypes>(type: iots.Type<V>, description?: string): RequiredField<V> {
+    return { type, required: true, description };
+}
+
+/** Schema for param field which can be dropped (meaning that a default value will be used) */
+export interface OptionalField<V extends AllowedValueTypes = any> extends Field<V> {
+    required: false,
+}
+export function OptionalField<V extends AllowedValueTypes>(type: iots.Type<V>, description?: string): OptionalField<V> {
+    return { type, required: false, description };
+}
+
+/** Type of valid value for field of type `F` (never includes `undefined`, even if field is optional) */
+export type ValueFor<F extends Field | iots.Any> = F extends Field<infer V> ? V : F extends iots.Any ? iots.TypeOf<F> : never
+
+/** Type of valid default value for field of type `F` (if the field's type allows `null`, the default must be `null`) */
+export type DefaultFor<F extends Field> = F extends Field<infer V> ? (null extends V ? null : V) : never
+
+/** Return `undefined` if `value` has correct type for `field`, regardsless of if required or optional.
+ * Return description of validation issues, if `value` has wrong type. */
+export function fieldValidationIssues<F extends Field, V>(field: F, value: V): V extends ValueFor<F> ? undefined : string[] {
+    const validation = field.type.decode(value);
+    if (validation._tag === 'Right') {
+        return undefined as any;
+    } else {
+        return PathReporter.report(validation) as any;
+    }
+}
+
+
+/** Schema for "params", i.e. a flat collection of key-value pairs */
+export type ParamsSchema<TKey extends string = string> = { [key in TKey]: Field }
+
+/** Variation of a params schema where all fields are required */
+export type AllRequired<TParamsSchema extends ParamsSchema> = { [key in keyof TParamsSchema]: TParamsSchema[key] extends Field<infer V> ? RequiredField<V> : never }
+export function AllRequired<TParamsSchema extends ParamsSchema>(paramsSchema: TParamsSchema): AllRequired<TParamsSchema> {
+    return mapObjectMap(paramsSchema, field => RequiredField(field.type, field.description)) as AllRequired<TParamsSchema>;
+}
+
+/** Type of values for a params schema (optional fields can be missing) */
+export type ValuesFor<P extends ParamsSchema> =
+    { [key in keyof P as (P[key] extends RequiredField<any> ? key : never)]: ValueFor<P[key]> }
+    & { [key in keyof P as (P[key] extends OptionalField<any> ? key : never)]?: ValueFor<P[key]> }
+
+/** Type of full values for a params schema, i.e. including all optional fields */
+export type FullValuesFor<P extends ParamsSchema> = { [key in keyof P]: ValueFor<P[key]> }
+
+/** Type of default values for a params schema, i.e. including only optional fields */
+export type DefaultsFor<P extends ParamsSchema> = { [key in keyof P as (P[key] extends Field<any, false> ? key : never)]: ValueFor<P[key]> }
+
+
+/** Return `undefined` if `values` contains correct value types for `schema`,
+ * return description of validation issues, if `values` have wrong type.
+ * If `options.requireAll`, all parameters (including optional) must have a value provided.
+ * If `options.noExtra` is true, presence of any extra parameters is treated as an issue.
+ */
+export function paramsValidationIssues<P extends ParamsSchema, V extends { [k: string]: any }>(schema: P, values: V, options: { requireAll?: boolean, noExtra?: boolean } = {}): string[] | undefined {
+    if (!isPlainObject(values)) return [`Parameters must be an object, not ${values}`];
+    for (const key in schema) {
+        const paramDef = schema[key];
+        if (Object.hasOwn(values, key)) {
+            const value = values[key];
+            const issues = fieldValidationIssues(paramDef, value);
+            if (issues) return [`Invalid type for parameter "${key}":`, ...issues.map(s => '  ' + s)];
+        } else {
+            if (paramDef.required) return [`Missing required parameter "${key}".`];
+            if (options.requireAll) return [`Missing optional parameter "${key}".`];
+        }
+    }
+    if (options.noExtra) {
+        for (const key in values) {
+            if (!Object.hasOwn(schema, key)) return [`Unknown parameter "${key}".`];
+        }
+    }
+    return undefined;
+}

src/extensions/mvs/tree/generic/tree-schema.ts

@@ -0,0 +1,189 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { onelinerJsonString } from '../../../../mol-util/json';
+import { isPlainObject, mapObjectMap } from '../../../../mol-util/object';
+import { AllRequired, DefaultsFor, ParamsSchema, ValuesFor, paramsValidationIssues } from './params-schema';
+import { treeToString } from './tree-utils';
+
+
+/** Tree node without children */
+export type Node<TKind extends string = string, TParams extends {} = {}> =
+    {} extends TParams ? {
+        kind: TKind,
+        params?: TParams,
+    } : {
+        kind: TKind,
+        params: TParams,
+    } // params can be dropped if {} is valid value for params
+
+/** Kind type for a tree node */
+export type Kind<TNode extends Node> = TNode['kind']
+
+/** Params type for a tree node */
+export type Params<TNode extends Node> = NonNullable<TNode['params']>
+
+
+/** Tree (i.e. a node with optional children) where the root node is of type `TRoot` and other nodes are of type `TNode` */
+export type Tree<TNode extends Node<string, {}> = Node<string, {}>, TRoot extends TNode = TNode> =
+    TRoot & {
+        children?: Tree<TNode, TNode>[],
+    }
+
+/** Type of any subtree that can occur within given `TTree` tree type */
+export type SubTree<TTree extends Tree> = NonNullable<TTree['children']>[number]
+
+/** Type of any subtree that can occur within given `TTree` tree type and has kind type `TKind` */
+export type SubTreeOfKind<TTree extends Tree, TKind extends Kind<SubTree<TTree>> = Kind<SubTree<TTree>>> = RootOfKind<SubTree<TTree>, TKind>
+
+type RootOfKind<TTree extends Tree, TKind extends Kind<TTree>> = Extract<TTree, Tree<any, Node<TKind>>>
+
+/** Params type for a given kind type within a tree */
+export type ParamsOfKind<TTree extends Tree, TKind extends Kind<SubTree<TTree>> = Kind<SubTree<TTree>>> = NonNullable<SubTreeOfKind<TTree, TKind>['params']>
+
+
+/** Get params from a tree node */
+export function getParams<TNode extends Node>(node: TNode): Params<TNode> {
+    return node.params ?? {};
+}
+/** Get children from a tree node */
+export function getChildren<TTree extends Tree>(tree: TTree): SubTree<TTree>[] {
+    return tree.children ?? [];
+}
+
+
+type ParamsSchemas = { [kind: string]: ParamsSchema }
+
+/** Definition of tree type, specifying allowed node kinds, types of their params, required kind for the root, and allowed parent-child kind combinations */
+export interface TreeSchema<TParamsSchemas extends ParamsSchemas = ParamsSchemas, TRootKind extends keyof TParamsSchemas = string> {
+    /** Required kind of the root node */
+    rootKind: TRootKind,
+    /** Definition of allowed node kinds */
+    nodes: {
+        [kind in keyof TParamsSchemas]: {
+            /** Params schema for this node kind */
+            params: TParamsSchemas[kind],
+            /** Documentation for this node kind */
+            description?: string,
+            /** Node kinds that can serve as parent for this node kind (`undefined` means the parent can be of any kind) */
+            parent?: (string & keyof TParamsSchemas)[],
+        }
+    },
+}
+export function TreeSchema<P extends ParamsSchemas = ParamsSchemas, R extends keyof P = string>(schema: TreeSchema<P, R>): TreeSchema<P, R> {
+    return schema as any;
+}
+
+/** ParamsSchemas per node kind */
+type ParamsSchemasOf<TTreeSchema extends TreeSchema> = TTreeSchema extends TreeSchema<infer TParamsSchema, any> ? TParamsSchema : never;
+
+/** Variation of params schemas where all param fields are required */
+type ParamsSchemasWithAllRequired<TParamsSchemas extends ParamsSchemas> = { [kind in keyof TParamsSchemas]: AllRequired<TParamsSchemas[kind]> }
+
+/** Variation of a tree schema where all param fields are required */
+export type TreeSchemaWithAllRequired<TTreeSchema extends TreeSchema> = TreeSchema<ParamsSchemasWithAllRequired<ParamsSchemasOf<TTreeSchema>>, TTreeSchema['rootKind']>
+export function TreeSchemaWithAllRequired<TTreeSchema extends TreeSchema>(schema: TTreeSchema): TreeSchemaWithAllRequired<TTreeSchema> {
+    return {
+        ...schema,
+        nodes: mapObjectMap(schema.nodes, node => ({ ...node, params: AllRequired(node.params) })) as any,
+    };
+}
+
+/** Type of tree node which can occur as the root of a tree conforming to tree schema `TTreeSchema` */
+export type RootFor<TTreeSchema extends TreeSchema> = NodeFor<TTreeSchema, TTreeSchema['rootKind']>
+
+/** Type of tree node which can occur anywhere in a tree conforming to tree schema `TTreeSchema`,
+ * optionally narrowing down to a given node kind */
+export type NodeFor<TTreeSchema extends TreeSchema, TKind extends keyof ParamsSchemasOf<TTreeSchema> = keyof ParamsSchemasOf<TTreeSchema>>
+    = { [key in keyof ParamsSchemasOf<TTreeSchema>]: Node<key & string, ValuesFor<ParamsSchemasOf<TTreeSchema>[key]>> }[TKind]
+
+/** Type of tree which conforms to tree schema `TTreeSchema` */
+export type TreeFor<TTreeSchema extends TreeSchema> = Tree<NodeFor<TTreeSchema>, RootFor<TTreeSchema> & NodeFor<TTreeSchema>>
+
+/** Type of default parameter values for each node kind in a tree schema `TTreeSchema` */
+export type DefaultsForTree<TTreeSchema extends TreeSchema> = { [kind in keyof TTreeSchema['nodes']]: DefaultsFor<TTreeSchema['nodes'][kind]['params']> }
+
+
+/** Return `undefined` if a tree conforms to the given schema,
+ * return validation issues (as a list of lines) if it does not conform.
+ * If `options.requireAll`, all parameters (including optional) must have a value provided.
+ * If `options.noExtra` is true, presence of any extra parameters is treated as an issue.
+ * If `options.anyRoot` is true, the kind of the root node is not enforced.
+ */
+export function treeValidationIssues(schema: TreeSchema, tree: Tree, options: { requireAll?: boolean, noExtra?: boolean, anyRoot?: boolean, parent?: string } = {}): string[] | undefined {
+    if (!isPlainObject(tree)) return [`Node must be an object, not ${tree}`];
+    if (!options.anyRoot && tree.kind !== schema.rootKind) return [`Invalid root node kind "${tree.kind}", root must be of kind "${schema.rootKind}"`];
+    const nodeSchema = schema.nodes[tree.kind];
+    if (!nodeSchema) return [`Unknown node kind "${tree.kind}"`];
+    if (nodeSchema.parent && (options.parent !== undefined) && !nodeSchema.parent.includes(options.parent)) {
+        return [`Node of kind "${tree.kind}" cannot appear as a child of "${options.parent}". Allowed parents for "${tree.kind}" are: ${nodeSchema.parent.map(s => `"${s}"`).join(', ')}`];
+    }
+    const issues = paramsValidationIssues(nodeSchema.params, getParams(tree), options);
+    if (issues) return [`Invalid parameters for node of kind "${tree.kind}":`, ...issues.map(s => '  ' + s)];
+    for (const child of getChildren(tree)) {
+        const issues = treeValidationIssues(schema, child, { ...options, anyRoot: true, parent: tree.kind });
+        if (issues) return issues;
+    }
+    return undefined;
+}
+
+/** Validate a tree against the given schema.
+ * Do nothing if OK; print validation issues on console and throw an error is the tree does not conform.
+ * Include `label` in the printed output. */
+export function validateTree(schema: TreeSchema, tree: Tree, label: string): void {
+    const issues = treeValidationIssues(schema, tree, { noExtra: true });
+    if (issues) {
+        console.warn(`Invalid ${label} tree:\n${treeToString(tree)}`);
+        console.error(`${label} tree validation issues:`);
+        for (const line of issues) {
+            console.error(' ', line);
+        }
+        throw new Error('FormatError');
+    }
+}
+
+/** Return documentation for a tree schema as plain text */
+export function treeSchemaToString<S extends TreeSchema>(schema: S, defaults?: DefaultsForTree<S>): string {
+    return treeSchemaToString_(schema, defaults, false);
+}
+/** Return documentation for a tree schema as markdown text */
+export function treeSchemaToMarkdown<S extends TreeSchema>(schema: S, defaults?: DefaultsForTree<S>): string {
+    return treeSchemaToString_(schema, defaults, true);
+}
+function treeSchemaToString_<S extends TreeSchema>(schema: S, defaults?: DefaultsForTree<S>, markdown: boolean = false): string {
+    const out: string[] = [];
+    const bold = (str: string) => markdown ? `**${str}**` : str;
+    const code = (str: string) => markdown ? `\`${str}\`` : str;
+    out.push(`Tree schema:`);
+    for (const kind in schema.nodes) {
+        const { description, params, parent } = schema.nodes[kind];
+        out.push(`  - ${bold(code(kind))}`);
+        if (kind === schema.rootKind) {
+            out.push('    [Root of the tree must be of this kind]');
+        }
+        if (description) {
+            out.push(`    ${description}`);
+        }
+        out.push(`    Parent: ${!parent ? 'any' : parent.length === 0 ? 'none' : parent.map(code).join(' or ')}`);
+        out.push(`    Params:${Object.keys(params).length > 0 ? '' : ' none'}`);
+        for (const key in params) {
+            const field = params[key];
+            let typeString = field.type.name;
+            if (typeString.startsWith('(') && typeString.endsWith(')')) {
+                typeString = typeString.slice(1, -1);
+            }
+            out.push(`      - ${bold(code(key + (field.required ? ': ' : '?: ')))}${code(typeString)}`);
+            const defaultValue = (defaults?.[kind] as any)?.[key];
+            if (field.description) {
+                out.push(`        ${field.description}`);
+            }
+            if (defaultValue !== undefined) {
+                out.push(`        Default: ${code(onelinerJsonString(defaultValue))}`);
+            }
+        }
+    }
+    return out.join(markdown ? '\n\n' : '\n');
+}

src/extensions/mvs/tree/generic/tree-utils.ts

@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { canonicalJsonString } from '../../../../mol-util/json';
+import { DefaultsForTree, Kind, SubTree, SubTreeOfKind, Tree, TreeFor, TreeSchema, TreeSchemaWithAllRequired, getParams } from './tree-schema';
+
+
+/** Run DFS (depth-first search) algorithm on a rooted tree.
+ * Runs `visit` function when a node is discovered (before visiting any descendants).
+ * Runs `postVisit` function when leaving a node (after all descendants have been visited). */
+export function dfs<TTree extends Tree>(root: TTree, visit?: (node: SubTree<TTree>, parent?: SubTree<TTree>) => any, postVisit?: (node: SubTree<TTree>, parent?: SubTree<TTree>) => any) {
+    return _dfs<SubTree<TTree>>(root, undefined, visit, postVisit);
+}
+function _dfs<TTree extends Tree>(root: TTree, parent: SubTree<TTree> | undefined, visit?: (node: SubTree<TTree>, parent?: SubTree<TTree>) => any, postVisit?: (node: SubTree<TTree>, parent?: SubTree<TTree>) => any) {
+    if (visit) visit(root, parent);
+    for (const child of root.children ?? []) {
+        _dfs<SubTree<TTree>>(child, root, visit, postVisit);
+    }
+    if (postVisit) postVisit(root, parent);
+}
+
+/** Convert a tree into a pretty-printed string. */
+export function treeToString(tree: Tree) {
+    let level = 0;
+    const lines: string[] = [];
+    dfs(tree, node => lines.push('  '.repeat(level++) + `- ${node.kind} ${formatObject(node.params ?? {})}`), node => level--);
+    return lines.join('\n');
+}
+
+/** Convert object to a human-friendly string (similar to JSON.stringify but without quoting keys) */
+function formatObject(obj: {} | undefined): string {
+    if (!obj) return 'undefined';
+    return JSON.stringify(obj).replace(/,("\w+":)/g, ', $1').replace(/"(\w+)":/g, '$1: ');
+}
+
+
+/** Create a copy of a tree node, ignoring children. */
+export function copyNodeWithoutChildren<TTree extends Tree>(node: TTree): TTree {
+    return {
+        kind: node.kind,
+        params: node.params ? { ...node.params } : undefined,
+    } as TTree;
+}
+/** Create a copy of a tree node, including a shallow copy of children. */
+export function copyNode<TTree extends Tree>(node: TTree): TTree {
+    return {
+        kind: node.kind,
+        params: node.params ? { ...node.params } : undefined,
+        children: node.children ? [...node.children] : undefined,
+    } as TTree;
+}
+
+/** Create a deep copy of a tree. */
+export function copyTree<T extends Tree>(root: T): T {
+    return convertTree(root, {}) as T;
+}
+
+/** Set of rules for converting a tree of one schema into a different schema.
+ * Each rule defines how to convert a node of a specific kind, e.g.
+ * `{A: node => [], B: node => [{kind: 'X',...}], C: node => [{kind: 'Y',...}, {kind: 'Z',...}]}`:
+ * nodes of kind `A` will be deleted (their children moved to parent),
+ * nodes of kind `B` will be converted to kind `X`,
+ * nodes of kind `C` will be converted to `Y` with a child `Z` (original children moved to `Z`),
+ * nodes of other kinds will just be copied. */
+export type ConversionRules<A extends Tree, B extends Tree> = {
+    [kind in Kind<SubTree<A>>]?: (node: SubTreeOfKind<A, kind>, parent?: SubTree<A>) => SubTree<B>[]
+};
+
+/** Apply a set of conversion rules to a tree to change to a different schema. */
+export function convertTree<A extends Tree, B extends Tree>(root: A, conversions: ConversionRules<A, B>): SubTree<B> {
+    const mapping = new Map<SubTree<A>, SubTree<B>>();
+    let convertedRoot: SubTree<B>;
+    dfs<A>(root, (node, parent) => {
+        const conversion = conversions[node.kind as (typeof node)['kind']] as ((n: typeof node, p?: SubTree<A>) => SubTree<B>[]) | undefined;
+        if (conversion) {
+            const convertidos = conversion(node, parent);
+            if (!parent && convertidos.length === 0) throw new Error('Cannot convert root to empty path');
+            let convParent = parent ? mapping.get(parent) : undefined;
+            for (const conv of convertidos) {
+                if (convParent) {
+                    (convParent.children ??= []).push(conv);
+                } else {
+                    convertedRoot = conv;
+                }
+                convParent = conv;
+            }
+            mapping.set(node, convParent!);
+        } else {
+            const converted = copyNodeWithoutChildren(node);
+            if (parent) {
+                (mapping.get(parent)!.children ??= []).push(converted);
+            } else {
+                convertedRoot = converted;
+            }
+            mapping.set(node, converted);
+        }
+    });
+    return convertedRoot!;
+}
+
+/** Create a copy of the tree where twins (siblings of the same kind with the same params) are merged into one node.
+ * Applies only to the node kinds listed in `condenseNodes` (or all if undefined) except node kinds in `skipNodes`. */
+export function condenseTree<T extends Tree>(root: T, condenseNodes?: Set<Kind<Tree>>, skipNodes?: Set<Kind<Tree>>): T {
+    const map = new Map<string, SubTree<T>>();
+    const result = copyTree(root);
+    dfs<T>(result, node => {
+        map.clear();
+        const newChildren: SubTree<T>[] = [];
+        for (const child of node.children ?? []) {
+            let twin: SubTree<T> | undefined = undefined;
+            const doApply = (!condenseNodes || condenseNodes.has(child.kind)) && !skipNodes?.has(child.kind);
+            if (doApply) {
+                const key = child.kind + canonicalJsonString(getParams(child));
+                twin = map.get(key);
+                if (!twin) map.set(key, child);
+            }
+            if (twin) {
+                (twin.children ??= []).push(...child.children ?? []);
+            } else {
+                newChildren.push(child as SubTree<T>);
+            }
+        }
+        node.children = newChildren;
+    });
+    return result;
+}
+
+/** Create a copy of the tree where missing optional params for each node are added based on `defaults`. */
+export function addDefaults<S extends TreeSchema>(tree: TreeFor<S>, defaults: DefaultsForTree<S>): TreeFor<TreeSchemaWithAllRequired<S>> {
+    const rules: ConversionRules<TreeFor<S>, TreeFor<S>> = {};
+    for (const kind in defaults) {
+        rules[kind] = node => [{ kind: node.kind, params: { ...defaults[kind], ...node.params } } as any];
+    }
+    return convertTree(tree, rules) as any;
+}

src/extensions/mvs/tree/molstar/conversion.ts

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { ConversionRules, addDefaults, condenseTree, convertTree, dfs } from '../generic/tree-utils';
+import { MolstarKind, MolstarNode, MolstarTree } from './molstar-tree';
+import { FullMVSTree, MVSTree, MVSTreeSchema } from '../mvs/mvs-tree';
+import { MVSDefaults } from '../mvs/mvs-defaults';
+import { MolstarParseFormatT, ParseFormatT } from '../mvs/param-types';
+import { omitObjectKeys, pickObjectKeys } from '../../../../mol-util/object';
+
+
+/** Convert `format` parameter of `parse` node in `MolstarTree`
+ * into `format` and `is_binary` parameters in `MolstarTree` */
+export const ParseFormatMvsToMolstar = {
+    mmcif: { format: 'cif', is_binary: false },
+    bcif: { format: 'cif', is_binary: true },
+    pdb: { format: 'pdb', is_binary: false },
+} satisfies { [p in ParseFormatT]: { format: MolstarParseFormatT, is_binary: boolean } };
+
+
+/** Conversion rules for conversion from `MVSTree` (with all parameter values) to `MolstarTree` */
+const mvsToMolstarConversionRules: ConversionRules<FullMVSTree, MolstarTree> = {
+    'download': node => [],
+    'parse': (node, parent) => {
+        const { format, is_binary } = ParseFormatMvsToMolstar[node.params.format];
+        const convertedNode: MolstarNode<'parse'> = { kind: 'parse', params: { ...node.params, format } };
+        if (parent?.kind === 'download') {
+            return [
+                { kind: 'download', params: { ...parent.params, is_binary } },
+                convertedNode,
+            ] satisfies MolstarNode[];
+        } else {
+            console.warn('"parse" node is not being converted, this is suspicious');
+            return [convertedNode] satisfies MolstarNode[];
+        }
+    },
+    'structure': (node, parent) => {
+        if (parent?.kind !== 'parse') throw new Error('Parent of "structure" must be "parse".');
+        const { format } = ParseFormatMvsToMolstar[parent.params.format];
+        return [
+            { kind: 'trajectory', params: { format, ...pickObjectKeys(node.params, ['block_header', 'block_index']) } },
+            { kind: 'model', params: pickObjectKeys(node.params, ['model_index']) },
+            { kind: 'structure', params: omitObjectKeys(node.params, ['block_header', 'block_index', 'model_index']) },
+        ] satisfies MolstarNode[];
+    },
+};
+
+/** Node kinds in `MolstarTree` that it makes sense to condense */
+const molstarNodesToCondense = new Set<MolstarKind>(['download', 'parse', 'trajectory', 'model'] satisfies MolstarKind[]);
+
+/** Convert MolViewSpec tree into MolStar tree */
+export function convertMvsToMolstar(mvsTree: MVSTree): MolstarTree {
+    const full = addDefaults<typeof MVSTreeSchema>(mvsTree, MVSDefaults) as FullMVSTree;
+    const converted = convertTree<FullMVSTree, MolstarTree>(full, mvsToMolstarConversionRules);
+    if (converted.kind !== 'root') throw new Error("Root's type is not 'root' after conversion from MVS tree to Molstar tree.");
+    const condensed = condenseTree<MolstarTree>(converted, molstarNodesToCondense);
+    return condensed;
+}
+
+
+type FileExtension = `.${Lowercase<string>}`;
+function fileExtensionMatches(filename: string, extensions: (FileExtension | '*')[]): boolean {
+    filename = filename.toLowerCase();
+    return extensions.some(ext => ext === '*' || filename.endsWith(ext));
+}
+
+const StructureFormatExtensions: Record<ParseFormatT, (FileExtension | '*')[]> = {
+    mmcif: ['.cif', '.mmif'],
+    bcif: ['.bcif'],
+    pdb: ['.pdb', '.ent'],
+};
+
+/** Run some sanity check on a MVSTree. Return a list of potential problems (`undefined` if there are none) */
+export function mvsSanityCheckIssues(tree: MVSTree): string[] | undefined {
+    const result: string[] = [];
+    dfs(tree, (node, parent) => {
+        if (node.kind === 'parse' && parent?.kind === 'download') {
+            const source = parent.params.url;
+            const extensions = StructureFormatExtensions[node.params.format];
+            if (!fileExtensionMatches(source, extensions)) {
+                result.push(`Parsing data from ${source} as ${node.params.format} format might be a mistake. The file extension doesn't match recommended file extensions (${extensions.join(', ')})`);
+            }
+        }
+    });
+    return result.length > 0 ? result : undefined;
+}
+
+/** Run some sanity check on a MVSTree and print potential issues to the console. */
+export function mvsSanityCheck(tree: MVSTree): void {
+    const issues = mvsSanityCheckIssues(tree);
+    if (issues) {
+        console.warn('There are potential issues in the MVS tree:');
+        for (const issue of issues) {
+            console.warn(' ', issue);
+        }
+    }
+}

src/extensions/mvs/tree/molstar/molstar-tree.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { omitObjectKeys, pickObjectKeys } from '../../../../mol-util/object';
+import { RequiredField, bool } from '../generic/params-schema';
+import { NodeFor, TreeFor, TreeSchema } from '../generic/tree-schema';
+import { FullMVSTreeSchema } from '../mvs/mvs-tree';
+import { MolstarParseFormatT } from '../mvs/param-types';
+
+
+/** Schema for `MolstarTree` (intermediate tree representation between `MVSTree` and a real Molstar state) */
+export const MolstarTreeSchema = TreeSchema({
+    rootKind: 'root',
+    nodes: {
+        ...FullMVSTreeSchema.nodes,
+        download: {
+            ...FullMVSTreeSchema.nodes.download,
+            params: {
+                ...FullMVSTreeSchema.nodes.download.params,
+                is_binary: RequiredField(bool),
+            },
+        },
+        parse: {
+            ...FullMVSTreeSchema.nodes.parse,
+            params: {
+                format: RequiredField(MolstarParseFormatT),
+            },
+        },
+        /** Auxiliary node corresponding to Molstar's TrajectoryFrom*. */
+        trajectory: {
+            description: "Auxiliary node corresponding to Molstar's TrajectoryFrom*.",
+            parent: ['parse'],
+            params: {
+                format: RequiredField(MolstarParseFormatT),
+                ...pickObjectKeys(FullMVSTreeSchema.nodes.structure.params, ['block_header', 'block_index'] as const),
+            },
+        },
+        /** Auxiliary node corresponding to Molstar's ModelFromTrajectory. */
+        model: {
+            description: "Auxiliary node corresponding to Molstar's ModelFromTrajectory.",
+            parent: ['trajectory'],
+            params: pickObjectKeys(FullMVSTreeSchema.nodes.structure.params, ['model_index'] as const),
+        },
+        /** Auxiliary node corresponding to Molstar's StructureFromModel. */
+        structure: {
+            ...FullMVSTreeSchema.nodes.structure,
+            parent: ['model'],
+            params: omitObjectKeys(FullMVSTreeSchema.nodes.structure.params, ['block_header', 'block_index', 'model_index'] as const),
+        },
+    }
+});
+
+
+/** Node kind in a `MolstarTree` */
+export type MolstarKind = keyof typeof MolstarTreeSchema.nodes;
+
+/** Node in a `MolstarTree` */
+export type MolstarNode<TKind extends MolstarKind = MolstarKind> = NodeFor<typeof MolstarTreeSchema, TKind>
+
+/** Intermediate tree representation between `MVSTree` and a real Molstar state */
+export type MolstarTree = TreeFor<typeof MolstarTreeSchema>

src/extensions/mvs/tree/mvs/mvs-builder.ts

@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { pickObjectKeys } from '../../../../mol-util/object';
+import { HexColor } from '../../helpers/utils';
+import { MVSData } from '../../mvs-data';
+import { ParamsOfKind, SubTreeOfKind } from '../generic/tree-schema';
+import { MVSDefaults } from './mvs-defaults';
+import { MVSKind, MVSNode, MVSTree, MVSTreeSchema } from './mvs-tree';
+
+
+/** Create a new MolViewSpec builder containing only a root node. Example of MVS builder usage:
+ *
+ * ```
+ * const builder = createMVSBuilder();
+ * builder.canvas({ background_color: 'white' });
+ * const struct = builder.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/1og2_updated.cif' }).parse({ format: 'mmcif' }).modelStructure();
+ * struct.component().representation().color({ color: HexColor('#3050F8') });
+ * console.log(JSON.stringify(builder.getState()));
+ * ```
+ */
+export function createMVSBuilder() {
+    return new Root();
+}
+
+
+/** Base class for MVS builder pointing to anything */
+class _Base<TKind extends MVSKind> {
+    protected constructor(
+        protected readonly _root: Root,
+        protected readonly _node: SubTreeOfKind<MVSTree, TKind>,
+    ) { }
+    /** Create a new node, append as child to current _node, and return the new node */
+    protected addChild<TChildKind extends MVSKind>(kind: TChildKind, params: ParamsOfKind<MVSTree, TChildKind>) {
+        const allowedParamNames = Object.keys(MVSTreeSchema.nodes[kind].params) as (keyof ParamsOfKind<MVSTree, TChildKind>)[];
+        const node = {
+            kind,
+            params: pickObjectKeys(params, allowedParamNames) as unknown,
+        } as SubTreeOfKind<MVSTree, TChildKind>;
+        this._node.children ??= [];
+        this._node.children.push(node);
+        return node;
+    }
+}
+
+
+/** MVS builder pointing to the 'root' node */
+export class Root extends _Base<'root'> {
+    constructor() {
+        const node: MVSNode<'root'> = { kind: 'root' };
+        super(undefined as any, node);
+        (this._root as Root) = this;
+    }
+    /** Return the current state of the builder as object in MVS format. */
+    getState(): MVSData {
+        return { version: MVSData.SupportedVersion, root: this._node };
+    }
+    // omitting `saveState`, filesystem operations are responsibility of the caller code (platform-dependent)
+
+    /** Add a 'camera' node and return builder pointing to the root. 'camera' node instructs to set the camera position and orientation. */
+    camera(params: ParamsOfKind<MVSTree, 'camera'>): Root {
+        this.addChild('camera', params);
+        return this;
+    }
+    /** Add a 'canvas' node and return builder pointing to the root. 'canvas' node sets canvas properties. */
+    canvas(params: ParamsOfKind<MVSTree, 'canvas'>): Root {
+        this.addChild('canvas', params);
+        return this;
+    }
+    /** Add a 'download' node and return builder pointing to it. 'download' node instructs to retrieve a data resource. */
+    download(params: ParamsOfKind<MVSTree, 'download'>): Download {
+        return new Download(this._root, this.addChild('download', params));
+    }
+}
+
+
+/** MVS builder pointing to a 'download' node */
+export class Download extends _Base<'download'> {
+    /** Add a 'parse' node and return builder pointing to it. 'parse' node instructs to parse a data resource. */
+    parse(params: ParamsOfKind<MVSTree, 'parse'>) {
+        return new Parse(this._root, this.addChild('parse', params));
+    }
+}
+
+
+/** Subsets of 'structure' node params which will be passed to individual builder functions. */
+const StructureParamsSubsets = {
+    model: ['block_header', 'block_index', 'model_index'],
+    assembly: ['block_header', 'block_index', 'model_index', 'assembly_id'],
+    symmetry: ['block_header', 'block_index', 'model_index', 'ijk_min', 'ijk_max'],
+    symmetry_mates: ['block_header', 'block_index', 'model_index', 'radius'],
+} satisfies { [kind in ParamsOfKind<MVSTree, 'structure'>['type']]: (keyof ParamsOfKind<MVSTree, 'structure'>)[] };
+
+
+/** MVS builder pointing to a 'parse' node */
+export class Parse extends _Base<'parse'> {
+    /** Add a 'structure' node representing a "model structure", i.e. includes all coordinates from the original model without applying any transformations.
+     * Return builder pointing to the new node. */
+    modelStructure(params: Pick<ParamsOfKind<MVSTree, 'structure'>, typeof StructureParamsSubsets['model'][number]> = {}): Structure {
+        return new Structure(this._root, this.addChild('structure', {
+            type: 'model',
+            ...pickObjectKeys(params, StructureParamsSubsets.model),
+        }));
+    }
+    /** Add a 'structure' node representing an "assembly structure", i.e. may apply filters and symmetry operators to the original model coordinates.
+     * Return builder pointing to the new node. */
+    assemblyStructure(params: Pick<ParamsOfKind<MVSTree, 'structure'>, typeof StructureParamsSubsets['assembly'][number]> = {}): Structure {
+        return new Structure(this._root, this.addChild('structure', {
+            type: 'assembly',
+            ...pickObjectKeys(params, StructureParamsSubsets.assembly),
+        }));
+    }
+    /** Add a 'structure' node representing a "symmetry structure", i.e. applies symmetry operators to build crystal unit cells within given Miller indices.
+     * Return builder pointing to the new node. */
+    symmetryStructure(params: Pick<ParamsOfKind<MVSTree, 'structure'>, typeof StructureParamsSubsets['symmetry'][number]> = {}): Structure {
+        return new Structure(this._root, this.addChild('structure', {
+            type: 'symmetry',
+            ...pickObjectKeys(params, StructureParamsSubsets.symmetry),
+        }));
+    }
+    /** Add a 'structure' node representing a "symmetry mates structure", i.e. applies symmetry operators to build asymmetric units within a radius from the original model.
+     * Return builder pointing to the new node. */
+    symmetryMatesStructure(params: Pick<ParamsOfKind<MVSTree, 'structure'>, typeof StructureParamsSubsets['symmetry_mates'][number]> = {}): Structure {
+        return new Structure(this._root, this.addChild('structure', {
+            type: 'symmetry_mates',
+            ...pickObjectKeys(params, StructureParamsSubsets.symmetry_mates),
+        }));
+    }
+}
+
+
+/** MVS builder pointing to a 'structure' node */
+export class Structure extends _Base<'structure'> {
+    /** Add a 'component' node and return builder pointing to it. 'component' node instructs to create a component (i.e. a subset of the parent structure). */
+    component(params: Partial<ParamsOfKind<MVSTree, 'component'>> = {}): Component {
+        const fullParams = { ...params, selector: params.selector ?? MVSDefaults.component.selector };
+        return new Component(this._root, this.addChild('component', fullParams));
+    }
+    /** Add a 'component_from_uri' node and return builder pointing to it. 'component_from_uri' node instructs to create a component defined by an external annotation resource. */
+    componentFromUri(params: ParamsOfKind<MVSTree, 'component_from_uri'>): Component {
+        return new Component(this._root, this.addChild('component_from_uri', params));
+    }
+    /** Add a 'component_from_source' node and return builder pointing to it. 'component_from_source' node instructs to create a component defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+    componentFromSource(params: ParamsOfKind<MVSTree, 'component_from_source'>): Component {
+        return new Component(this._root, this.addChild('component_from_source', params));
+    }
+    /** Add a 'label_from_uri' node and return builder pointing back to the structure node. 'label_from_uri' node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an external annotation resource. */
+    labelFromUri(params: ParamsOfKind<MVSTree, 'label_from_uri'>): Structure {
+        this.addChild('label_from_uri', params);
+        return this;
+    }
+    /** Add a 'label_from_source' node and return builder pointing back to the structure node. 'label_from_source' node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+    labelFromSource(params: ParamsOfKind<MVSTree, 'label_from_source'>): Structure {
+        this.addChild('label_from_source', params);
+        return this;
+    }
+    /** Add a 'tooltip_from_uri' node and return builder pointing back to the structure node. 'tooltip_from_uri' node instructs to add tooltips to parts of a structure. The tooltips are defined by an external annotation resource. */
+    tooltipFromUri(params: ParamsOfKind<MVSTree, 'tooltip_from_uri'>): Structure {
+        this.addChild('tooltip_from_uri', params);
+        return this;
+    }
+    /** Add a 'tooltip_from_source' node and return builder pointing back to the structure node. 'tooltip_from_source' node instructs to add tooltips to parts of a structure. The tooltips are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+    tooltipFromSource(params: ParamsOfKind<MVSTree, 'tooltip_from_source'>): Structure {
+        this.addChild('tooltip_from_source', params);
+        return this;
+    }
+    /** Add a 'transform' node and return builder pointing back to the structure node. 'transform' node instructs to rotate and/or translate structure coordinates. */
+    transform(params: ParamsOfKind<MVSTree, 'transform'> = {}): Structure {
+        if (params.rotation && params.rotation.length !== 9) {
+            throw new Error('ValueError: `rotation` parameter must be an array of 9 numbers');
+        }
+        this.addChild('transform', params);
+        return this;
+    }
+}
+
+
+/** MVS builder pointing to a 'component' or 'component_from_uri' or 'component_from_source' node */
+export class Component extends _Base<'component' | 'component_from_uri' | 'component_from_source'> {
+    /** Add a 'representation' node and return builder pointing to it. 'representation' node instructs to create a visual representation of a component. */
+    representation(params: Partial<ParamsOfKind<MVSTree, 'representation'>> = {}): Representation {
+        const fullParams: ParamsOfKind<MVSTree, 'representation'> = { ...params, type: params.type ?? 'cartoon' };
+        return new Representation(this._root, this.addChild('representation', fullParams));
+    }
+    /** Add a 'label' node and return builder pointing back to the component node. 'label' node instructs to add a label (textual visual representation) to a component. */
+    label(params: ParamsOfKind<MVSTree, 'label'>): Component {
+        this.addChild('label', params);
+        return this;
+    }
+    /** Add a 'tooltip' node and return builder pointing back to the component node. 'tooltip' node instructs to add a text which is not a part of the visualization but should be presented to the users when they interact with the component (typically, the tooltip will be shown somewhere on the screen when the user hovers over a visual representation of the component). */
+    tooltip(params: ParamsOfKind<MVSTree, 'tooltip'>): Component {
+        this.addChild('tooltip', params);
+        return this;
+    }
+    /** Add a 'focus' node and return builder pointing back to the component node. 'focus' node instructs to set the camera focus to a component (zoom in). */
+    focus(params: ParamsOfKind<MVSTree, 'focus'> = {}): Component {
+        this.addChild('focus', params);
+        return this;
+    }
+}
+
+
+/** MVS builder pointing to a 'representation' node */
+export class Representation extends _Base<'representation'> {
+    /** Add a 'color' node and return builder pointing back to the representation node. 'color' node instructs to apply color to a visual representation. */
+    color(params: ParamsOfKind<MVSTree, 'color'>): Representation {
+        this.addChild('color', params);
+        return this;
+    }
+    /** Add a 'color_from_uri' node and return builder pointing back to the representation node. 'color_from_uri' node instructs to apply colors to a visual representation. The colors are defined by an external annotation resource. */
+    colorFromUri(params: ParamsOfKind<MVSTree, 'color_from_uri'>): Representation {
+        this.addChild('color_from_uri', params);
+        return this;
+    }
+    /** Add a 'color_from_source' node and return builder pointing back to the representation node. 'color_from_source' node instructs to apply colors to a visual representation. The colors are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+    colorFromSource(params: ParamsOfKind<MVSTree, 'color_from_source'>): Representation {
+        this.addChild('color_from_source', params);
+        return this;
+    }
+}
+
+
+/** Demonstration of usage of MVS builder */
+export function builderDemo() {
+    const builder = createMVSBuilder();
+    builder.canvas({ background_color: 'white' });
+    const struct = builder.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/1og2_updated.cif' }).parse({ format: 'mmcif' }).modelStructure();
+    struct.component().representation().color({ color: 'white' });
+    struct.component({ selector: 'ligand' }).representation({ type: 'ball_and_stick' })
+        .color({ color: HexColor('#555555') })
+        .color({ selector: { type_symbol: 'N' }, color: HexColor('#3050F8') })
+        .color({ selector: { type_symbol: 'O' }, color: HexColor('#FF0D0D') })
+        .color({ selector: { type_symbol: 'S' }, color: HexColor('#FFFF30') })
+        .color({ selector: { type_symbol: 'FE' }, color: HexColor('#E06633') });
+    builder.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/1og5_updated.cif' }).parse({ format: 'mmcif' }).assemblyStructure({ assembly_id: '1' }).component().representation().color({ color: 'cyan' });
+    builder.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/1og5_updated.cif' }).parse({ format: 'mmcif' }).assemblyStructure({ assembly_id: '2' }).component().representation().color({ color: 'blue' });
+    const cif = builder.download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/download/1wrf_updated.cif' }).parse({ format: 'mmcif' });
+
+    cif.modelStructure({ model_index: 0 }).component().representation().color({ color: HexColor('#CC0000') });
+    cif.modelStructure({ model_index: 1 }).component().representation().color({ color: HexColor('#EE7700') });
+    cif.modelStructure({ model_index: 2 }).component().representation().color({ color: HexColor('#FFFF00') });
+
+    cif.modelStructure({ model_index: 0 }).transform({ translation: [30, 0, 0] }).component().representation().color({ color: HexColor('#ff88bb') });
+    cif.modelStructure({ model_index: 0 as any }).transform({ translation: [60, 0, 0], rotation: [0, 1, 0, -1, 0, 0, 0, 0, 1] }).component().representation().color({ color: HexColor('#aa0077') });
+
+    return builder.getState();
+}

src/extensions/mvs/tree/mvs/mvs-defaults.ts

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { DefaultsForTree } from '../generic/tree-schema';
+import { MVSTreeSchema } from './mvs-tree';
+
+
+/** Default values for params in `MVSTree` */
+export const MVSDefaults = {
+    root: {},
+    download: {
+    },
+    parse: {
+    },
+    structure: {
+        block_header: null,
+        block_index: 0,
+        model_index: 0,
+        assembly_id: null,
+        radius: 5,
+        ijk_min: [-1, -1, -1],
+        ijk_max: [1, 1, 1],
+    },
+    component: {
+        selector: 'all' as const,
+    },
+    component_from_uri: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'component',
+        field_values: null,
+    },
+    component_from_source: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'component',
+        field_values: null,
+    },
+    representation: {
+    },
+    color: {
+        selector: 'all' as const,
+    },
+    color_from_uri: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'color',
+    },
+    color_from_source: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'color',
+    },
+    label: {
+    },
+    label_from_uri: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'label',
+    },
+    label_from_source: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'label',
+    },
+    tooltip: {
+    },
+    tooltip_from_uri: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'tooltip',
+    },
+    tooltip_from_source: {
+        block_header: null,
+        block_index: 0,
+        category_name: null,
+        field_name: 'tooltip',
+    },
+    focus: {
+        direction: [0, 0, -1],
+        up: [0, 1, 0],
+    },
+    transform: {
+        rotation: [1, 0, 0, 0, 1, 0, 0, 0, 1], // 3x3 identitity matrix
+        translation: [0, 0, 0],
+    },
+    canvas: {
+    },
+    camera: {
+        up: [0, 1, 0],
+    },
+} satisfies DefaultsForTree<typeof MVSTreeSchema>;
+
+/** Color to be used e.g. for representations without 'color' node */
+export const DefaultColor = 'white';

src/extensions/mvs/tree/mvs/mvs-tree.ts

@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { OptionalField, RequiredField, float, int, list, nullable, str, tuple, union } from '../generic/params-schema';
+import { NodeFor, TreeFor, TreeSchema, TreeSchemaWithAllRequired } from '../generic/tree-schema';
+import { ColorT, ComponentExpressionT, ComponentSelectorT, Matrix, ParseFormatT, RepresentationTypeT, SchemaFormatT, SchemaT, StructureTypeT, Vector3 } from './param-types';
+
+
+const _DataFromUriParams = {
+    /** URL of the annotation resource. */
+    uri: RequiredField(str, 'URL of the annotation resource.'),
+    /** Format of the annotation resource. */
+    format: RequiredField(SchemaFormatT, 'Format of the annotation resource.'),
+    /** Annotation schema defines what fields in the annotation will be taken into account. */
+    schema: RequiredField(SchemaT, 'Annotation schema defines what fields in the annotation will be taken into account.'),
+    /** Header of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, block is selected based on `block_index`. */
+    block_header: OptionalField(nullable(str), 'Header of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, block is selected based on `block_index`.'),
+    /** 0-based index of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"` and `block_header` is `null`). */
+    block_index: OptionalField(int, '0-based index of the CIF block to read annotation from (only applies when `format` is `"cif"` or `"bcif"` and `block_header` is `null`).'),
+    /** Name of the CIF category to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, the first category in the block is used. */
+    category_name: OptionalField(nullable(str), 'Name of the CIF category to read annotation from (only applies when `format` is `"cif"` or `"bcif"`). If `null`, the first category in the block is used.'),
+    /** Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...). The default value is 'color'/'label'/'tooltip'/'component' depending on the node type */
+    field_name: OptionalField(str, 'Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).'),
+};
+
+const _DataFromSourceParams = {
+    /** Annotation schema defines what fields in the annotation will be taken into account. */
+    schema: RequiredField(SchemaT, 'Annotation schema defines what fields in the annotation will be taken into account.'),
+    /** Header of the CIF block to read annotation from. If `null`, block is selected based on `block_index`. */
+    block_header: OptionalField(nullable(str), 'Header of the CIF block to read annotation from. If `null`, block is selected based on `block_index`.'),
+    /** 0-based index of the CIF block to read annotation from (only applies when `block_header` is `null`). */
+    block_index: OptionalField(int, '0-based index of the CIF block to read annotation from (only applies when `block_header` is `null`).'),
+    /** Name of the CIF category to read annotation from. If `null`, the first category in the block is used. */
+    category_name: OptionalField(nullable(str), 'Name of the CIF category to read annotation from. If `null`, the first category in the block is used.'),
+    /** Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...). The default value is 'color'/'label'/'tooltip'/'component' depending on the node type */
+    field_name: OptionalField(str, 'Name of the column in CIF or field name (key) in JSON that contains the dependent variable (color/label/tooltip/component_id...).'),
+};
+
+
+/** Schema for `MVSTree` (MolViewSpec tree) */
+export const MVSTreeSchema = TreeSchema({
+    rootKind: 'root',
+    nodes: {
+        /** Auxiliary node kind that only appears as the tree root. */
+        root: {
+            description: 'Auxiliary node kind that only appears as the tree root.',
+            parent: [],
+            params: {
+            },
+        },
+        /** This node instructs to retrieve a data resource. */
+        download: {
+            description: 'This node instructs to retrieve a data resource.',
+            parent: ['root'],
+            params: {
+                /** URL of the data resource. */
+                url: RequiredField(str, 'URL of the data resource.'),
+            },
+        },
+        /** This node instructs to parse a data resource. */
+        parse: {
+            description: 'This node instructs to parse a data resource.',
+            parent: ['download'],
+            params: {
+                /** Format of the input data resource. */
+                format: RequiredField(ParseFormatT, 'Format of the input data resource.'),
+            },
+        },
+        /** This node instructs to create a structure from a parsed data resource. "Structure" refers to an internal representation of molecular coordinates without any visual representation. */
+        structure: {
+            description: 'This node instructs to create a structure from a parsed data resource. "Structure" refers to an internal representation of molecular coordinates without any visual representation.',
+            parent: ['parse'],
+            params: {
+                /** Type of structure to be created (`"model"` for original model coordinates, `"assembly"` for assembly structure, `"symmetry"` for a set of crystal unit cells based on Miller indices, `"symmetry_mates"` for a set of asymmetric units within a radius from the original model). */
+                type: RequiredField(StructureTypeT, 'Type of structure to be created (`"model"` for original model coordinates, `"assembly"` for assembly structure, `"symmetry"` for a set of crystal unit cells based on Miller indices, `"symmetry_mates"` for a set of asymmetric units within a radius from the original model).'),
+                /** Header of the CIF block to read coordinates from (only applies when the input data are from CIF or BinaryCIF). If `null`, block is selected based on `block_index`. */
+                block_header: OptionalField(nullable(str), 'Header of the CIF block to read coordinates from (only applies when the input data are from CIF or BinaryCIF). If `null`, block is selected based on `block_index`.'),
+                /** 0-based index of the CIF block to read coordinates from (only applies when the input data are from CIF or BinaryCIF and `block_header` is `null`). */
+                block_index: OptionalField(int, '0-based index of the CIF block to read coordinates from (only applies when the input data are from CIF or BinaryCIF and `block_header` is `null`).'),
+                /** 0-based index of model in case the input data contain multiple models. */
+                model_index: OptionalField(int, '0-based index of model in case the input data contain multiple models.'),
+                /** Assembly identifier (only applies when `kind` is `"assembly"`). If `null`, the first assembly is selected. */
+                assembly_id: OptionalField(nullable(str), 'Assembly identifier (only applies when `kind` is `"assembly"`). If `null`, the first assembly is selected.'),
+                /** Distance (in Angstroms) from the original model in which asymmetric units should be included (only applies when `kind` is `"symmetry_mates"`). */
+                radius: OptionalField(float, 'Distance (in Angstroms) from the original model in which asymmetric units should be included (only applies when `kind` is `"symmetry_mates"`).'),
+                /** Miller indices of the bottom-left unit cell to be included (only applies when `kind` is `"symmetry"`). */
+                ijk_min: OptionalField(tuple([int, int, int]), 'Miller indices of the bottom-left unit cell to be included (only applies when `kind` is `"symmetry"`).'),
+                /** Miller indices of the top-right unit cell to be included (only applies when `kind` is `"symmetry"`). */
+                ijk_max: OptionalField(tuple([int, int, int]), 'Miller indices of the top-right unit cell to be included (only applies when `kind` is `"symmetry"`).'),
+            },
+        },
+        /** This node instructs to rotate and/or translate structure coordinates. */
+        transform: {
+            description: 'This node instructs to rotate and/or translate structure coordinates.',
+            parent: ['structure'],
+            params: {
+                /** Rotation matrix (3x3 matrix flattened in column major format (j*3+i indexing), this is equivalent to Fortran-order in numpy). This matrix will multiply the structure coordinates from the left. The default value is the identity matrix (corresponds to no rotation). */
+                rotation: OptionalField(Matrix, 'Rotation matrix (3x3 matrix flattened in column major format (j*3+i indexing), this is equivalent to Fortran-order in numpy). This matrix will multiply the structure coordinates from the left. The default value is the identity matrix (corresponds to no rotation).'),
+                /** Translation vector, applied to the structure coordinates after rotation. The default value is the zero vector (corresponds to no translation). */
+                translation: OptionalField(Vector3, 'Translation vector, applied to the structure coordinates after rotation. The default value is the zero vector (corresponds to no translation).'),
+            },
+        },
+        /** This node instructs to create a component (i.e. a subset of the parent structure). */
+        component: {
+            description: 'This node instructs to create a component (i.e. a subset of the parent structure).',
+            parent: ['structure'],
+            params: {
+                /** Defines what part of the parent structure should be included in this component. */
+                selector: RequiredField(union([ComponentSelectorT, ComponentExpressionT, list(ComponentExpressionT)]), 'Defines what part of the parent structure should be included in this component.'),
+            },
+        },
+        /** This node instructs to create a component defined by an external annotation resource. */
+        component_from_uri: {
+            description: 'This node instructs to create a component defined by an external annotation resource.',
+            parent: ['structure'],
+            params: {
+                ..._DataFromUriParams,
+                /** List of component identifiers (i.e. values in the field given by `field_name`) which should be included in this component. If `null`, component identifiers are ignored (all annotation rows are included), and `field_name` field can be dropped from the annotation. */
+                field_values: OptionalField(nullable(list(str)), 'List of component identifiers (i.e. values in the field given by `field_name`) which should be included in this component. If `null`, component identifiers are ignored (all annotation rows are included), and `field_name` field can be dropped from the annotation.'),
+            },
+        },
+        /** This node instructs to create a component defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+        component_from_source: {
+            description: 'This node instructs to create a component defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.',
+            parent: ['structure'],
+            params: {
+                ..._DataFromSourceParams,
+                /** List of component identifiers (i.e. values in the field given by `field_name`) which should be included in this component. If `null`, component identifiers are ignored (all annotation rows are included), and `field_name` field can be dropped from the annotation. */
+                field_values: OptionalField(nullable(list(str)), 'List of component identifiers (i.e. values in the field given by `field_name`) which should be included in this component. If `null`, component identifiers are ignored (all annotation rows are included), and `field_name` field can be dropped from the annotation.'),
+            },
+        },
+        /** This node instructs to create a visual representation of a component. */
+        representation: {
+            description: 'This node instructs to create a visual representation of a component.',
+            parent: ['component', 'component_from_uri', 'component_from_source'],
+            params: {
+                /** Method of visual representation of the component. */
+                type: RequiredField(RepresentationTypeT, 'Method of visual representation of the component.'),
+            },
+        },
+        /** This node instructs to apply color to a visual representation. */
+        color: {
+            description: 'This node instructs to apply color to a visual representation.',
+            parent: ['representation'],
+            params: {
+                /** Color to apply to the representation. Can be either a color name (e.g. `"red"`) or a hexadecimal code (e.g. `"#FF0011"`). */
+                color: RequiredField(ColorT, 'Color to apply to the representation. Can be either a color name (e.g. `"red"`) or a hexadecimal code (e.g. `"#FF0011"`).'),
+                /** Defines to what part of the representation this color should be applied. */
+                selector: OptionalField(union([ComponentSelectorT, ComponentExpressionT, list(ComponentExpressionT)]), 'Defines to what part of the representation this color should be applied.'),
+            },
+        },
+        /** This node instructs to apply colors to a visual representation. The colors are defined by an external annotation resource. */
+        color_from_uri: {
+            description: 'This node instructs to apply colors to a visual representation. The colors are defined by an external annotation resource.',
+            parent: ['representation'],
+            params: {
+                ..._DataFromUriParams,
+            },
+        },
+        /** This node instructs to apply colors to a visual representation. The colors are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+        color_from_source: {
+            description: 'This node instructs to apply colors to a visual representation. The colors are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.',
+            parent: ['representation'],
+            params: {
+                ..._DataFromSourceParams,
+            },
+        },
+        /** This node instructs to add a label (textual visual representation) to a component. */
+        label: {
+            description: 'This node instructs to add a label (textual visual representation) to a component.',
+            parent: ['component', 'component_from_uri', 'component_from_source'],
+            params: {
+                /** Content of the shown label. */
+                text: RequiredField(str, 'Content of the shown label.'),
+            },
+        },
+        /** This node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an external annotation resource. */
+        label_from_uri: {
+            description: 'This node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an external annotation resource.',
+            parent: ['structure'],
+            params: {
+                ..._DataFromUriParams,
+            },
+        },
+        /** This node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+        label_from_source: {
+            description: 'This node instructs to add labels (textual visual representations) to parts of a structure. The labels are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.',
+            parent: ['structure'],
+            params: {
+                ..._DataFromSourceParams,
+            },
+        },
+        /** This node instructs to add a tooltip to a component. "Tooltip" is a text which is not a part of the visualization but should be presented to the users when they interact with the component (typically, the tooltip will be shown somewhere on the screen when the user hovers over a visual representation of the component). */
+        tooltip: {
+            description: 'This node instructs to add a tooltip to a component. "Tooltip" is a text which is not a part of the visualization but should be presented to the users when they interact with the component (typically, the tooltip will be shown somewhere on the screen when the user hovers over a visual representation of the component).',
+            parent: ['component', 'component_from_uri', 'component_from_source'],
+            params: {
+                /** Content of the shown tooltip. */
+                text: RequiredField(str, 'Content of the shown tooltip.'),
+            },
+        },
+        /** This node instructs to add tooltips to parts of a structure. The tooltips are defined by an external annotation resource. */
+        tooltip_from_uri: {
+            description: 'This node instructs to add tooltips to parts of a structure. The tooltips are defined by an external annotation resource.',
+            parent: ['structure'],
+            params: {
+                ..._DataFromUriParams,
+            },
+        },
+        /** This node instructs to add tooltips to parts of a structure. The tooltips are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file. */
+        tooltip_from_source: {
+            description: 'This node instructs to add tooltips to parts of a structure. The tooltips are defined by an annotation resource included in the same file this structure was loaded from. Only applicable if the structure was loaded from an mmCIF or BinaryCIF file.',
+            parent: ['structure'],
+            params: {
+                ..._DataFromSourceParams,
+            },
+        },
+        /** This node instructs to set the camera focus to a component (zoom in). */
+        focus: {
+            description: 'This node instructs to set the camera focus to a component (zoom in).',
+            parent: ['component', 'component_from_uri', 'component_from_source'],
+            params: {
+                /** Vector describing the direction of the view (camera position -> focused target). */
+                direction: OptionalField(Vector3, 'Vector describing the direction of the view (camera position -> focused target).'),
+                /** Vector which will be aligned with the screen Y axis. */
+                up: OptionalField(Vector3, 'Vector which will be aligned with the screen Y axis.'),
+            },
+        },
+        /** This node instructs to set the camera position and orientation. */
+        camera: {
+            description: 'This node instructs to set the camera position and orientation.',
+            parent: ['root'],
+            params: {
+                /** Coordinates of the point in space at which the camera is pointing. */
+                target: RequiredField(Vector3, 'Coordinates of the point in space at which the camera is pointing.'),
+                /** Coordinates of the camera. */
+                position: RequiredField(Vector3, 'Coordinates of the camera.'),
+                /** Vector which will be aligned with the screen Y axis. */
+                up: OptionalField(Vector3, 'Vector which will be aligned with the screen Y axis.'),
+            },
+        },
+        /** This node sets canvas properties. */
+        canvas: {
+            description: 'This node sets canvas properties.',
+            parent: ['root'],
+            params: {
+                /** Color of the canvas background. Can be either a color name (e.g. `"red"`) or a hexadecimal code (e.g. `"#FF0011"`). */
+                background_color: RequiredField(ColorT, 'Color of the canvas background. Can be either a color name (e.g. `"red"`) or a hexadecimal code (e.g. `"#FF0011"`).'),
+            },
+        },
+    }
+});
+
+
+/** Node kind in a `MVSTree` */
+export type MVSKind = keyof typeof MVSTreeSchema.nodes
+
+/** Node in a `MVSTree` */
+export type MVSNode<TKind extends MVSKind = MVSKind> = NodeFor<typeof MVSTreeSchema, TKind>
+
+/** MolViewSpec tree */
+export type MVSTree = TreeFor<typeof MVSTreeSchema>
+
+
+/** Schema for `MVSTree` (MolViewSpec tree with all params provided) */
+export const FullMVSTreeSchema = TreeSchemaWithAllRequired(MVSTreeSchema);
+
+/** MolViewSpec tree with all params provided */
+export type FullMVSTree = TreeFor<typeof FullMVSTreeSchema>

src/extensions/mvs/tree/mvs/param-types.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import * as iots from 'io-ts';
+import { HexColor, isHexColorString } from '../../helpers/utils';
+import { ValueFor, float, int, list, literal, str, tuple, union } from '../generic/params-schema';
+
+
+/** `format` parameter values for `parse` node in MVS tree */
+export const ParseFormatT = literal('mmcif', 'bcif', 'pdb');
+export type ParseFormatT = ValueFor<typeof ParseFormatT>
+
+/** `format` parameter values for `parse` node in Molstar tree */
+export const MolstarParseFormatT = literal('cif', 'pdb');
+export type MolstarParseFormatT = ValueFor<typeof MolstarParseFormatT>
+
+/** `kind` parameter values for `structure` node in MVS tree */
+export const StructureTypeT = literal('model', 'assembly', 'symmetry', 'symmetry_mates');
+
+/** `selector` parameter values for `component` node in MVS tree */
+export const ComponentSelectorT = literal('all', 'polymer', 'protein', 'nucleic', 'branched', 'ligand', 'ion', 'water');
+
+/** `selector` parameter values for `component` node in MVS tree */
+export const ComponentExpressionT = iots.partial({
+    label_entity_id: str,
+    label_asym_id: str,
+    auth_asym_id: str,
+    label_seq_id: int,
+    auth_seq_id: int,
+    pdbx_PDB_ins_code: str,
+    beg_label_seq_id: int,
+    end_label_seq_id: int,
+    beg_auth_seq_id: int,
+    end_auth_seq_id: int,
+    label_atom_id: str,
+    auth_atom_id: str,
+    type_symbol: str,
+    atom_id: int,
+    atom_index: int,
+});
+
+/** `type` parameter values for `representation` node in MVS tree */
+export const RepresentationTypeT = literal('ball_and_stick', 'cartoon', 'surface');
+
+/** `schema` parameter values for `*_from_uri` and `*_from_source` nodes in MVS tree */
+export const SchemaT = literal('whole_structure', 'entity', 'chain', 'auth_chain', 'residue', 'auth_residue', 'residue_range', 'auth_residue_range', 'atom', 'auth_atom', 'all_atomic');
+
+/** `format` parameter values for `*_from_uri` nodes in MVS tree */
+export const SchemaFormatT = literal('cif', 'bcif', 'json');
+
+/** Parameter values for vector params, e.g. `position` */
+export const Vector3 = tuple([float, float, float]);
+
+/** Parameter values for matrix params, e.g. `rotation` */
+export const Matrix = list(float);
+
+/** `color` parameter values for `color` node in MVS tree */
+export const HexColorT = new iots.Type<HexColor>(
+    'HexColor',
+    ((value: any) => typeof value === 'string') as any,
+    (value, ctx) => isHexColorString(value) ? { _tag: 'Right', right: value } : { _tag: 'Left', left: [{ value: value, context: ctx, message: `"${value}" is not a valid hex color string` }] },
+    value => value
+);
+
+/** `color` parameter values for `color` node in MVS tree */
+export const ColorNamesT = literal('white', 'gray', 'black', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'magenta');
+
+/** `color` parameter values for `color` node in MVS tree */
+export const ColorT = union([HexColorT, ColorNamesT]);

src/extensions/volumes-and-segmentations/entry-root.ts

@@ -17,6 +17,7 @@ import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginContext } from '../../mol-plugin/context';
 import { StateObjectCell, StateSelection, StateTransform } from '../../mol-state';
 import { shallowEqualObjects } from '../../mol-util';
+import { Choice } from '../../mol-util/param-choice';
 import { ParamDefinition } from '../../mol-util/param-definition';
 import { MeshlistData } from '../meshes/mesh-extension';
 
@@ -30,7 +31,7 @@ import { VolsegState, VolsegStateData, VolsegStateParams } from './entry-state';
 import { VolsegVolumeData, SimpleVolumeParamValues, VOLUME_VISUAL_TAG } from './entry-volume';
 import * as ExternalAPIs from './external-api';
 import { VolsegGlobalStateData } from './global-state';
-import { applyEllipsis, Choice, isDefined, lazyGetter, splitEntryId } from './helpers';
+import { applyEllipsis, isDefined, lazyGetter, splitEntryId } from './helpers';
 import { type VolsegStateFromEntry } from './transformers';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
 

src/extensions/volumes-and-segmentations/entry-state.ts

@@ -5,10 +5,9 @@
  */
 
 import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { Choice } from '../../mol-util/param-choice';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 
-import { Choice } from './helpers';
-
 
 export const VolumeTypeChoice = new Choice({ 'isosurface': 'Isosurface', 'direct-volume': 'Direct volume', 'off': 'Off' }, 'isosurface');
 export type VolumeType = Choice.Values<typeof VolumeTypeChoice>

src/extensions/volumes-and-segmentations/helpers.ts

@@ -30,38 +30,6 @@ export function createEntryId(source: Source, entryNumber: string | number) {
 }
 
 
-
-/**
- * Represents a set of values to choose from, with a default value. Example:
- * ```
- * export const MyChoice = new Choice({ yes: 'I agree', no: 'Nope' }, 'yes');
- * export type MyChoiceType = Choice.Values<typeof MyChoice>; // 'yes'|'no'
- * ```
- */
-export class Choice<T extends string, D extends T> {
-    readonly defaultValue: D;
-    readonly options: [T, string][];
-    private readonly nameDict: { [value in T]: string };
-    constructor(opts: { [value in T]: string }, defaultValue: D) {
-        this.defaultValue = defaultValue;
-        this.options = Object.keys(opts).map(k => [k as T, opts[k as T]]);
-        this.nameDict = opts;
-    }
-    PDSelect(defaultValue?: T, info?: ParamDefinition.Info): ParamDefinition.Select<T> {
-        return ParamDefinition.Select<T>(defaultValue ?? this.defaultValue, this.options, info);
-    }
-    prettyName(value: T): string {
-        return this.nameDict[value];
-    }
-    get values(): T[] {
-        return this.options.map(([value, pretty]) => value);
-    }
-}
-export namespace Choice {
-    export type Values<T extends Choice<any, any>> = T extends Choice<infer R, any> ? R : any;
-}
-
-
 export function isDefined<T>(x: T | undefined): x is T {
     return x !== undefined;
 }

src/mol-canvas3d/camera.ts

@@ -116,7 +116,7 @@ class Camera implements ICamera {
     }
 
     getTargetDistance(radius: number) {
-        return Camera.targetDistance(radius, this.state.fov, this.viewport.width, this.viewport.height);
+        return Camera.targetDistance(radius, this.state.mode, this.state.fov, this.viewport.width, this.viewport.height);
     }
 
     getFocus(target: Vec3, radius: number, up?: Vec3, dir?: Vec3, snapshot?: Partial<Camera.Snapshot>): Partial<Camera.Snapshot> {
@@ -257,11 +257,14 @@ namespace Camera {
         out.height = view.height;
     }
 
-    export function targetDistance(radius: number, fov: number, width: number, height: number) {
+    export function targetDistance(radius: number, mode: Mode, fov: number, width: number, height: number) {
         const r = Math.max(radius, 0.01);
         const aspect = width / height;
         const aspectFactor = (height < width ? 1 : aspect);
-        return Math.abs((r / aspectFactor) / Math.sin(fov / 2));
+        if (mode === 'orthographic')
+            return Math.abs((r / aspectFactor) / Math.tan(fov / 2));
+        else
+            return Math.abs((r / aspectFactor) / Math.sin(fov / 2));
     }
 
     export function createDefaultSnapshot(): Snapshot {

src/mol-data/util/hash-functions.ts

@@ -49,7 +49,7 @@ export function hash4(i: number, j: number, k: number, l: number) {
 export function hashString(s: string) {
     let h = 0;
     for (let i = 0, l = s.length; i < l; i++) {
-        h = (h << 5) - h + s.charCodeAt(i++) | 0;
+        h = (h << 5) - h + s.charCodeAt(i) | 0;
     }
     return h;
 }

src/mol-util/_spec/array.spec.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { filterInPlace, range } from '../array';
+
+
+describe('filterInPlace', () => {
+    it('filterInPlace works', async () => {
+        expect(filterInPlace([], () => true)).toEqual([]);
+        expect(filterInPlace([], () => false)).toEqual([]);
+        expect(filterInPlace([1, 2, 3, 4, 5], () => true)).toEqual([1, 2, 3, 4, 5]);
+        expect(filterInPlace([1, 2, 3, 4, 5], () => false)).toEqual([]);
+        expect(filterInPlace([1, 2, 3, 4, 5], x => x % 2 === 0)).toEqual([2, 4]);
+        expect(filterInPlace([1, 2, 3, 4, 5], x => x % 2 === 1)).toEqual([1, 3, 5]);
+        expect(filterInPlace([1, 2, 3, 4, 5], x => x <= 2)).toEqual([1, 2]);
+        expect(filterInPlace([1, 2, 3, 4, 5], x => x > 2)).toEqual([3, 4, 5]);
+    });
+    it('filterInPlace works in place', async () => {
+        const array = [1, 2, 3, 4, 5];
+        filterInPlace(array, x => x % 2 === 1);
+        expect(array).toEqual([1, 3, 5]);
+    });
+    it('filterInPlace big data', async () => {
+        const array = range(10 ** 5);
+        const expectedResult = array.filter(x => x % 7 === 0);
+        expect(filterInPlace(array, x => x % 7 === 0)).toEqual(expectedResult);
+    });
+});
+

src/mol-util/_spec/json.spec.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { canonicalJsonString } from '../json';
+
+
+describe('object utils', () => {
+    it('canonicalJsonString', async () => {
+        expect(canonicalJsonString({})).toEqual('{}');
+
+        const obj1 = { c: 1, b: 2, d: undefined, a: { x: null, f: undefined, e: 4 } };
+        expect(canonicalJsonString(obj1)).toEqual('{"a":{"e":4,"x":null},"b":2,"c":1}');
+
+        const obj2 = { c: [1, { p: 'P', q: undefined }, 0], x: null, b: false, a: undefined };
+        expect(canonicalJsonString(obj2)).toEqual('{"b":false,"c":[1,{"p":"P"},0],"x":null}');
+    });
+});

src/mol-util/array.ts

@@ -1,9 +1,11 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Adam Midlik <midlik@gmail.com>
  */
 
+import { Jsonable, canonicalJsonString } from './json';
 import { NumberArray } from './type-helpers';
 
 // TODO move to mol-math as Vector???
@@ -156,3 +158,78 @@ export function arrayMapUpsert<T>(xs: [string, T][], key: string, value: T) {
     }
     xs.push([key, value]);
 }
+
+/** Return an array containing integers from [start, end) if `end` is given,
+ * or from [0, start) if `end` is omitted. */
+export function range(start: number, end?: number): number[] {
+    if (end === undefined) {
+        end = start;
+        start = 0;
+    }
+    const length = Math.max(end - start, 0);
+    const result = Array(length);
+    for (let i = 0; i < length; i++) {
+        result[i] = start + i;
+    }
+    return result;
+}
+
+/** Copy all elements from `src` to the end of `dst`.
+ * Equivalent to `dst.push(...src)`, but avoids storing element on call stack. Faster that `extend` from Underscore.js.
+ * `extend(a, a)` will double the array.
+ */
+export function arrayExtend<T>(dst: T[], src: ArrayLike<T>): void {
+    const offset = dst.length;
+    const nCopy = src.length;
+    dst.length += nCopy;
+    for (let i = 0; i < nCopy; i++) {
+        dst[offset + i] = src[i];
+    }
+}
+
+/** Check whether `array` is sorted, sort if not. */
+export function sortIfNeeded<T>(array: T[], compareFn: (a: T, b: T) => number): T[] {
+    return arrayIsSorted(array, compareFn) ? array : array.sort(compareFn);
+}
+
+/** Decide whether `array` is sorted. */
+export function arrayIsSorted<T>(array: T[], compareFn: (a: T, b: T) => number): boolean {
+    for (let i = 1, n = array.length; i < n; i++) {
+        if (compareFn(array[i - 1], array[i]) > 0) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/** Remove all elements from the array which do not fulfil `predicate`. Return the modified array itself. */
+export function filterInPlace<T>(array: T[], predicate: (x: T) => boolean): T[] {
+    const n = array.length;
+    let iDest = 0;
+    for (let iSrc = 0; iSrc < n; iSrc++) {
+        if (predicate(array[iSrc])) {
+            array[iDest++] = array[iSrc];
+        }
+    }
+    array.length = iDest;
+    return array;
+}
+
+/** Return an array of all distinct values from `values`
+ * (i.e. with removed duplicates).
+ * Uses deep equality for objects and arrays,
+ * independent from object key order and undefined properties.
+ * E.g. {a: 1, b: undefined, c: {d: [], e: null}} is equal to {c: {e: null, d: []}}, a: 1}.
+ * If two or more objects in `values` are equal, only the first of them will be in the result. */
+export function arrayDistinct<T extends Jsonable>(values: T[]): T[] {
+    const seen = new Set<string>();
+    const result: T[] = [];
+    for (const value of values) {
+        const key = canonicalJsonString(value);
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(value);
+        }
+    }
+    return result;
+}

src/mol-util/json.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { isPlainObject } from './object';
+
+
+/** A JSON-serializable value */
+export type Jsonable = string | number | boolean | null | Jsonable[] | { [key: string]: Jsonable | undefined }
+
+/** Return a canonical string representation for a JSON-able object,
+ * independent from object key order and undefined properties. */
+export function canonicalJsonString(obj: Jsonable) {
+    return JSON.stringify(obj, (key, value) => isPlainObject(value) ? sortObjectKeys(value) : value);
+}
+
+/** Return a pretty JSON representation for a JSON-able object,
+ * (single line, but use space after comma). E.g. '{"name": "Bob", "favorite_numbers": [1, 2, 3]}' */
+export function onelinerJsonString(obj: Jsonable) {
+    return JSON.stringify(obj, undefined, '\t').replace(/,\n\t*/g, ', ').replace(/\n\t*/g, '');
+}
+
+/** Return a copy of object `obj` with alphabetically sorted keys and dropped keys whose value is undefined. */
+function sortObjectKeys<T extends {}>(obj: T): T {
+    const result = {} as T;
+    for (const key of Object.keys(obj).sort() as (keyof T)[]) {
+        const value = obj[key];
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+    return result;
+}

src/mol-util/object.ts

@@ -1,8 +1,9 @@
 /**
- * Copyright (c) 2017 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2023 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>
+ * @author Adam Midlik <midlik@gmail.com>
  */
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -97,17 +98,72 @@ export function deepClone<T>(source: T): T {
     throw new Error(`Can't clone, type "${typeof source}" unsupported`);
 }
 
-export function mapObjectMap<T, S>(o: { [k: string]: T }, f: (v: T) => S): { [k: string]: S } {
+/** Return a new object with the same keys, where function `f` is applied to each value.
+ * Equivalent to Pythonic `{k: f(v) for k, v in obj.items()}` */
+export function mapObjectMap<T, S>(obj: { [k: string]: T }, f: (v: T) => S): { [k: string]: S } {
     const ret: any = { };
-    for (const k of Object.keys(o)) {
-        ret[k] = f((o as any)[k]);
+    for (const k of Object.keys(obj)) {
+        ret[k] = f((obj as any)[k]);
     }
     return ret;
 }
 
+/** Return an object with keys being the elements of `array` and values computed by `getValue` function.
+ * Equivalent to Pythonic `{k: getValue(k) for k in array}` */
+export function mapArrayToObject<K extends keyof any, V>(array: readonly K[], getValue: (key: K) => V): Record<K, V> {
+    const result = {} as Record<K, V>;
+    for (const key of array) {
+        result[key] = getValue(key);
+    }
+    return result;
+}
+
 export function objectForEach<T>(o: { [k: string]: T }, f: (v: T, k: string) => void) {
     if (!o) return;
     for (const k of Object.keys(o)) {
         f((o as any)[k], k);
     }
-}
+}
+
+
+/** Return an object with keys `keys` and their values same as in `obj` */
+export function pickObjectKeys<T extends {}, K extends keyof T>(obj: T, keys: readonly K[]): Pick<T, K> {
+    const result: Partial<Pick<T, K>> = {};
+    for (const key of keys) {
+        if (Object.hasOwn(obj, key)) {
+            result[key] = obj[key];
+        }
+    }
+    return result as Pick<T, K>;
+}
+
+/** Return an object same as `obj` but without keys `keys` */
+export function omitObjectKeys<T extends {}, K extends keyof T>(obj: T, omitKeys: readonly K[]): Omit<T, K> {
+    const result: T = { ...obj };
+    for (const key of omitKeys) {
+        delete result[key];
+    }
+    return result as Omit<T, K>;
+}
+
+/** Create an object from keys and values (first key maps to first value etc.) */
+export function objectFromKeysAndValues<K extends keyof any, V>(keys: K[], values: V[]): Record<K, V> {
+    const obj: Partial<Record<K, V>> = {};
+    for (let i = 0; i < keys.length; i++) {
+        obj[keys[i]] = values[i];
+    }
+    return obj as Record<K, V>;
+}
+
+/** Decide if `obj` is a good old object (not array or null or other type). */
+export function isPlainObject(obj: any): boolean {
+    return typeof obj === 'object' && obj !== null && !Array.isArray(obj);
+}
+
+/** Like `Promise.all` but with objects instead of arrays */
+export async function promiseAllObj<T extends {}>(promisesObj: { [key in keyof T]: Promise<T[key]> }): Promise<T> {
+    const keys = Object.keys(promisesObj);
+    const promises = Object.values(promisesObj);
+    const results = await Promise.all(promises);
+    return objectFromKeysAndValues(keys, results) as any;
+}

src/mol-util/param-choice.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+
+import { ParamDefinition } from './param-definition';
+
+
+/**
+ * Represents a set of values to choose from, with a default value. Example:
+ * ```
+ * export const MyChoice = new Choice({ yes: 'I agree', no: 'Nope' }, 'yes');
+ * export type MyChoiceType = Choice.Values<typeof MyChoice>; // 'yes'|'no'
+ * ```
+ */
+export class Choice<T extends string, D extends T> {
+    readonly defaultValue: D;
+    readonly options: [T, string][];
+    private readonly nameDict: { [value in T]: string };
+    constructor(opts: { [value in T]: string }, defaultValue: D) {
+        this.defaultValue = defaultValue;
+        this.options = Object.keys(opts).map(k => [k as T, opts[k as T]]);
+        this.nameDict = opts;
+    }
+    PDSelect(defaultValue?: T, info?: ParamDefinition.Info): ParamDefinition.Select<T> {
+        return ParamDefinition.Select<T>(defaultValue ?? this.defaultValue, this.options, info);
+    }
+    prettyName(value: T): string {
+        return this.nameDict[value];
+    }
+    get values(): T[] {
+        return this.options.map(([value, pretty]) => value);
+    }
+}
+export namespace Choice {
+    export type Values<T extends Choice<any, any>> = T extends Choice<infer R, any> ? R : any;
+}

src/mol-util/polyfill.ts

@@ -500,6 +500,12 @@ if (!Object.entries) {
     };
 }
 
+if (!Object.hasOwn) {
+    Object.hasOwn = function (obj: object, key: PropertyKey): boolean {
+        return Object.prototype.hasOwnProperty.call(obj, key);
+    };
+}
+
 // from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
 // https://tc39.github.io/ecma262/#sec-array.prototype.find
 if (!Array.prototype.find) {

tsconfig.commonjs.json

@@ -16,7 +16,7 @@
         "noEmitHelpers": true,
         "allowSyntheticDefaultImports": true,
         "jsx": "react-jsx",
-        "lib": [ "es6", "dom", "esnext.asynciterable", "es2016" ],
+        "lib": [ "es6", "dom", "esnext.asynciterable", "es2016", "ES2022.Object" ],
         "rootDir": "src",
         "outDir": "lib/commonjs"
     },

tsconfig.json

@@ -16,7 +16,7 @@
         "noEmitHelpers": true,
         "allowSyntheticDefaultImports": true,
         "jsx": "react-jsx",
-        "lib": [ "es6", "dom", "esnext.asynciterable", "es2016" ],
+        "lib": [ "es6", "dom", "esnext.asynciterable", "es2016", "ES2022.Object" ],
         "rootDir": "src",
         "outDir": "lib"
     },