molstar 3.3.1 → 3.6.0

package/lib/cli/chem-comp-dict/util.d.ts

@@ -16,7 +16,7 @@ export declare function readCCD(): Promise<import("../../mol-data/db").DatabaseC
         name: import("../../mol-data/db/column").Column.Schema.Str;
         one_letter_code: import("../../mol-data/db/column").Column.Schema.Str;
         three_letter_code: import("../../mol-data/db/column").Column.Schema.Str;
-        type: import("../../mol-data/db/column").Column.Schema.Aliased<"other" | "D-peptide linking" | "L-peptide linking" | "D-peptide NH3 amino terminus" | "L-peptide NH3 amino terminus" | "D-peptide COOH carboxy terminus" | "L-peptide COOH carboxy terminus" | "DNA linking" | "RNA linking" | "L-RNA linking" | "L-DNA linking" | "DNA OH 5 prime terminus" | "RNA OH 5 prime terminus" | "DNA OH 3 prime terminus" | "RNA OH 3 prime terminus" | "D-saccharide, beta linking" | "D-saccharide, alpha linking" | "L-saccharide, beta linking" | "L-saccharide, alpha linking" | "L-saccharide" | "D-saccharide" | "saccharide" | "non-polymer" | "peptide linking" | "peptide-like" | "L-gamma-peptide, C-delta linking" | "D-gamma-peptide, C-delta linking" | "L-beta-peptide, C-gamma linking" | "D-beta-peptide, C-gamma linking">;
+        type: import("../../mol-data/db/column").Column.Schema.Aliased<"other" | "d-peptide linking" | "l-peptide linking" | "d-peptide nh3 amino terminus" | "l-peptide nh3 amino terminus" | "d-peptide cooh carboxy terminus" | "l-peptide cooh carboxy terminus" | "dna linking" | "rna linking" | "l-rna linking" | "l-dna linking" | "dna oh 5 prime terminus" | "rna oh 5 prime terminus" | "dna oh 3 prime terminus" | "rna oh 3 prime terminus" | "d-saccharide, beta linking" | "d-saccharide, alpha linking" | "l-saccharide, beta linking" | "l-saccharide, alpha linking" | "l-saccharide" | "d-saccharide" | "saccharide" | "non-polymer" | "peptide linking" | "peptide-like" | "l-gamma-peptide, c-delta linking" | "d-gamma-peptide, c-delta linking" | "l-beta-peptide, c-gamma linking" | "d-beta-peptide, c-gamma linking">;
         pdbx_synonyms: import("../../mol-data/db/column").Column.Schema.List<string>;
         pdbx_type: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_ambiguous_flag: import("../../mol-data/db/column").Column.Schema.Str;
@@ -26,12 +26,12 @@ export declare function readCCD(): Promise<import("../../mol-data/db").DatabaseC
         pdbx_model_coordinates_details: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_model_coordinates_db_code: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_ideal_coordinates_details: import("../../mol-data/db/column").Column.Schema.Str;
-        pdbx_ideal_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
-        pdbx_model_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
+        pdbx_ideal_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
+        pdbx_model_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
         pdbx_initial_date: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_modified_date: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_release_status: import("../../mol-data/db/column").Column.Schema.Aliased<"REL" | "HOLD" | "HPUB" | "OBS" | "DEL" | "REF_ONLY">;
-        pdbx_processing_site: import("../../mol-data/db/column").Column.Schema.Aliased<"RCSB" | "EBI" | "PDBE" | "PDBJ" | "PDBC">;
+        pdbx_processing_site: import("../../mol-data/db/column").Column.Schema.Aliased<"RCSB" | "PDBE" | "PDBJ" | "PDBC" | "EBI">;
     };
     chem_comp_atom: {
         alt_atom_id: import("../../mol-data/db/column").Column.Schema.Str;
@@ -47,9 +47,9 @@ export declare function readCCD(): Promise<import("../../mol-data/db").DatabaseC
         pdbx_model_Cartn_x_ideal: import("../../mol-data/db/column").Column.Schema.Coordinate;
         pdbx_model_Cartn_y_ideal: import("../../mol-data/db/column").Column.Schema.Coordinate;
         pdbx_model_Cartn_z_ideal: import("../../mol-data/db/column").Column.Schema.Coordinate;
-        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "R" | "S">;
-        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
-        pdbx_leaving_atom_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
+        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"s" | "r" | "n">;
+        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
+        pdbx_leaving_atom_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
     };
     chem_comp_bond: {
         atom_id_1: import("../../mol-data/db/column").Column.Schema.Str;
@@ -57,13 +57,13 @@ export declare function readCCD(): Promise<import("../../mol-data/db").DatabaseC
         comp_id: import("../../mol-data/db/column").Column.Schema.Str;
         value_order: import("../../mol-data/db/column").Column.Schema.Aliased<"sing" | "doub" | "trip" | "quad" | "arom" | "poly" | "delo" | "pi">;
         pdbx_ordinal: import("../../mol-data/db/column").Column.Schema.Int;
-        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "E" | "Z">;
-        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
+        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"z" | "n" | "e">;
+        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
     };
     pdbx_chem_comp_descriptor: {
         comp_id: import("../../mol-data/db/column").Column.Schema.Str;
         descriptor: import("../../mol-data/db/column").Column.Schema.Str;
-        type: import("../../mol-data/db/column").Column.Schema.Aliased<"SMILES_CANNONICAL" | "SMILES_CANONICAL" | "SMILES" | "InChI" | "InChI_MAIN" | "InChI_MAIN_FORMULA" | "InChI_MAIN_CONNECT" | "InChI_MAIN_HATOM" | "InChI_CHARGE" | "InChI_STEREO" | "InChI_ISOTOPE" | "InChI_FIXEDH" | "InChI_RECONNECT" | "InChIKey">;
+        type: import("../../mol-data/db/column").Column.Schema.Aliased<"smiles_cannonical" | "smiles_canonical" | "smiles" | "inchi" | "inchi_main" | "inchi_main_formula" | "inchi_main_connect" | "inchi_main_hatom" | "inchi_charge" | "inchi_stereo" | "inchi_isotope" | "inchi_fixedh" | "inchi_reconnect" | "inchikey">;
         program: import("../../mol-data/db/column").Column.Schema.Str;
         program_version: import("../../mol-data/db/column").Column.Schema.Str;
     };
@@ -84,7 +84,7 @@ export declare function readPVCD(): Promise<import("../../mol-data/db").Database
         name: import("../../mol-data/db/column").Column.Schema.Str;
         one_letter_code: import("../../mol-data/db/column").Column.Schema.Str;
         three_letter_code: import("../../mol-data/db/column").Column.Schema.Str;
-        type: import("../../mol-data/db/column").Column.Schema.Aliased<"other" | "D-peptide linking" | "L-peptide linking" | "D-peptide NH3 amino terminus" | "L-peptide NH3 amino terminus" | "D-peptide COOH carboxy terminus" | "L-peptide COOH carboxy terminus" | "DNA linking" | "RNA linking" | "L-RNA linking" | "L-DNA linking" | "DNA OH 5 prime terminus" | "RNA OH 5 prime terminus" | "DNA OH 3 prime terminus" | "RNA OH 3 prime terminus" | "D-saccharide, beta linking" | "D-saccharide, alpha linking" | "L-saccharide, beta linking" | "L-saccharide, alpha linking" | "L-saccharide" | "D-saccharide" | "saccharide" | "non-polymer" | "peptide linking" | "peptide-like" | "L-gamma-peptide, C-delta linking" | "D-gamma-peptide, C-delta linking" | "L-beta-peptide, C-gamma linking" | "D-beta-peptide, C-gamma linking">;
+        type: import("../../mol-data/db/column").Column.Schema.Aliased<"other" | "d-peptide linking" | "l-peptide linking" | "d-peptide nh3 amino terminus" | "l-peptide nh3 amino terminus" | "d-peptide cooh carboxy terminus" | "l-peptide cooh carboxy terminus" | "dna linking" | "rna linking" | "l-rna linking" | "l-dna linking" | "dna oh 5 prime terminus" | "rna oh 5 prime terminus" | "dna oh 3 prime terminus" | "rna oh 3 prime terminus" | "d-saccharide, beta linking" | "d-saccharide, alpha linking" | "l-saccharide, beta linking" | "l-saccharide, alpha linking" | "l-saccharide" | "d-saccharide" | "saccharide" | "non-polymer" | "peptide linking" | "peptide-like" | "l-gamma-peptide, c-delta linking" | "d-gamma-peptide, c-delta linking" | "l-beta-peptide, c-gamma linking" | "d-beta-peptide, c-gamma linking">;
         pdbx_synonyms: import("../../mol-data/db/column").Column.Schema.List<string>;
         pdbx_type: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_ambiguous_flag: import("../../mol-data/db/column").Column.Schema.Str;
@@ -94,12 +94,12 @@ export declare function readPVCD(): Promise<import("../../mol-data/db").Database
         pdbx_model_coordinates_details: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_model_coordinates_db_code: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_ideal_coordinates_details: import("../../mol-data/db/column").Column.Schema.Str;
-        pdbx_ideal_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
-        pdbx_model_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
+        pdbx_ideal_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
+        pdbx_model_coordinates_missing_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
         pdbx_initial_date: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_modified_date: import("../../mol-data/db/column").Column.Schema.Str;
         pdbx_release_status: import("../../mol-data/db/column").Column.Schema.Aliased<"REL" | "HOLD" | "HPUB" | "OBS" | "DEL" | "REF_ONLY">;
-        pdbx_processing_site: import("../../mol-data/db/column").Column.Schema.Aliased<"RCSB" | "EBI" | "PDBE" | "PDBJ" | "PDBC">;
+        pdbx_processing_site: import("../../mol-data/db/column").Column.Schema.Aliased<"RCSB" | "PDBE" | "PDBJ" | "PDBC" | "EBI">;
     };
     chem_comp_atom: {
         alt_atom_id: import("../../mol-data/db/column").Column.Schema.Str;
@@ -115,9 +115,9 @@ export declare function readPVCD(): Promise<import("../../mol-data/db").Database
         pdbx_model_Cartn_x_ideal: import("../../mol-data/db/column").Column.Schema.Coordinate;
         pdbx_model_Cartn_y_ideal: import("../../mol-data/db/column").Column.Schema.Coordinate;
         pdbx_model_Cartn_z_ideal: import("../../mol-data/db/column").Column.Schema.Coordinate;
-        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "R" | "S">;
-        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
-        pdbx_leaving_atom_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
+        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"s" | "r" | "n">;
+        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
+        pdbx_leaving_atom_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
     };
     chem_comp_bond: {
         atom_id_1: import("../../mol-data/db/column").Column.Schema.Str;
@@ -125,13 +125,13 @@ export declare function readPVCD(): Promise<import("../../mol-data/db").Database
         comp_id: import("../../mol-data/db/column").Column.Schema.Str;
         value_order: import("../../mol-data/db/column").Column.Schema.Aliased<"sing" | "doub" | "trip" | "quad" | "arom" | "poly" | "delo" | "pi">;
         pdbx_ordinal: import("../../mol-data/db/column").Column.Schema.Int;
-        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "E" | "Z">;
-        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"N" | "Y">;
+        pdbx_stereo_config: import("../../mol-data/db/column").Column.Schema.Aliased<"z" | "n" | "e">;
+        pdbx_aromatic_flag: import("../../mol-data/db/column").Column.Schema.Aliased<"y" | "n">;
     };
     pdbx_chem_comp_descriptor: {
         comp_id: import("../../mol-data/db/column").Column.Schema.Str;
         descriptor: import("../../mol-data/db/column").Column.Schema.Str;
-        type: import("../../mol-data/db/column").Column.Schema.Aliased<"SMILES_CANNONICAL" | "SMILES_CANONICAL" | "SMILES" | "InChI" | "InChI_MAIN" | "InChI_MAIN_FORMULA" | "InChI_MAIN_CONNECT" | "InChI_MAIN_HATOM" | "InChI_CHARGE" | "InChI_STEREO" | "InChI_ISOTOPE" | "InChI_FIXEDH" | "InChI_RECONNECT" | "InChIKey">;
+        type: import("../../mol-data/db/column").Column.Schema.Aliased<"smiles_cannonical" | "smiles_canonical" | "smiles" | "inchi" | "inchi_main" | "inchi_main_formula" | "inchi_main_connect" | "inchi_main_hatom" | "inchi_charge" | "inchi_stereo" | "inchi_isotope" | "inchi_fixedh" | "inchi_reconnect" | "inchikey">;
         program: import("../../mol-data/db/column").Column.Schema.Str;
         program_version: import("../../mol-data/db/column").Column.Schema.Str;
     };

package/lib/cli/cif2bcif/converter.js

@@ -96,7 +96,7 @@ function classify(name, field) {
 export function convert(path, asText, hints, filter) {
     var _this = this;
     if (asText === void 0) { asText = false; }
-    return Task.create('BinaryCIF', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
+    return Task.create('Convert CIF', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
         var encodingProvider, cif, encoder, maxProgress, _i, _a, b, _b, _c, c, current, _d, _e, b, _f, _g, c, cat, fields, _h, _j, f, ret;
         return __generator(this, function (_k) {
             switch (_k.label) {

package/lib/cli/cif2bcif/index.js

@@ -20,7 +20,7 @@ function process(srcPath, outPath, configPath, filterPath) {
                 case 0:
                     config = configPath ? JSON.parse(fs.readFileSync(configPath, 'utf8')) : void 0;
                     filter = filterPath ? fs.readFileSync(filterPath, 'utf8') : void 0;
-                    return [4 /*yield*/, convert(srcPath, false, config, filter)];
+                    return [4 /*yield*/, convert(srcPath, srcPath.toLowerCase().indexOf('.bcif') > 0, config, filter)];
                 case 1:
                     res = _a.sent();
                     return [4 /*yield*/, write(outPath, res)];
@@ -56,13 +56,13 @@ function run(args) {
 }
 var parser = new argparse.ArgumentParser({
     add_help: true,
-    description: 'Convert any CIF file to a BCIF file'
+    description: 'Convert any BCIF file to a CIF file or vice versa'
 });
 parser.add_argument('src', {
-    help: 'Source CIF path'
+    help: 'Source file path'
 });
 parser.add_argument('out', {
-    help: 'Output BCIF path'
+    help: 'Output file path'
 });
 parser.add_argument('-c', '--config', {
     help: 'Optional encoding strategy/precision config path',

package/lib/cli/cifschema/util/cif-dic.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/cli/cifschema/util/cif-dic.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -10,15 +10,17 @@ export function getFieldType(type, description, values, container) {
     switch (type) {
         // mmCIF
         case 'code':
-        case 'ucode':
         case 'line':
-        case 'uline':
         case 'text':
         case 'char':
-        case 'uchar3':
-        case 'uchar1':
         case 'boolean':
             return values && values.length ? EnumCol(values, 'str', description) : StrCol(description);
+        case 'ucode':
+        case 'uline':
+        case 'uchar3':
+        case 'uchar1':
+            // only force lower-case for enums
+            return values && values.length ? EnumCol(values.map(function (x) { return x.toLowerCase(); }), 'lstr', description) : StrCol(description);
         case 'aliasname':
         case 'name':
         case 'idname':

package/lib/cli/cifschema/util/generate.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/cli/cifschema/util/generate.js

@@ -1,12 +1,12 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 import { indentString } from '../../../mol-util/string';
 import { FieldPath } from '../../../mol-io/reader/cif/schema';
 function header(name, info, moldataImportPath) {
-    return "/**\n * Copyright (c) 2017-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * Code-generated '".concat(name, "' schema file. ").concat(info, "\n *\n * @author molstar/ciftools package\n */\n\nimport { Database, Column } from '").concat(moldataImportPath, "/db';\n\nimport Schema = Column.Schema;");
+    return "/**\n * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * Code-generated '".concat(name, "' schema file. ").concat(info, "\n *\n * @author molstar/ciftools package\n */\n\nimport { Database, Column } from '").concat(moldataImportPath, "/db';\n\nimport Schema = Column.Schema;");
 }
 function footer(name) {
     return "\nexport type ".concat(name, "_Schema = typeof ").concat(name, "_Schema;\nexport interface ").concat(name, "_Database extends Database<").concat(name, "_Schema> {};");
@@ -20,7 +20,10 @@ function getTypeShorthands(schema, fields) {
         Object.keys(columns).forEach(function (columnName) {
             if (fields && !fields[table][columnName])
                 return;
-            types.add(schema.tables[table].columns[columnName].type);
+            var col = schema.tables[table].columns[columnName];
+            if (col.type === 'enum')
+                types.add(col.subType);
+            types.add(col.type);
         });
     });
     var shorthands = [];
@@ -29,6 +32,12 @@ function getTypeShorthands(schema, fields) {
             case 'str':
                 shorthands.push('const str = Schema.str;');
                 break;
+            case 'ustr':
+                shorthands.push('const ustr = Schema.ustr;');
+                break;
+            case 'lstr':
+                shorthands.push('const lstr = Schema.lstr;');
+                break;
             case 'int':
                 shorthands.push('const int = Schema.int;');
                 break;

package/lib/cli/cifschema/util/schema.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -40,10 +40,10 @@ export declare type CoordCol = {
 export declare function CoordCol(description: string): CoordCol;
 export declare type EnumCol = {
     type: 'enum';
-    subType: 'int' | 'str';
+    subType: 'int' | 'str' | 'ustr' | 'lstr';
     values: string[];
 } & BaseCol;
-export declare function EnumCol(values: string[], subType: 'int' | 'str', description: string): EnumCol;
+export declare function EnumCol(values: string[], subType: 'int' | 'str' | 'ustr' | 'lstr', description: string): EnumCol;
 export declare type VectorCol = {
     type: 'vector';
     length: number;

package/lib/cli/cifschema/util/schema.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/commonjs/apps/docking-viewer/index.js

@@ -10,7 +10,7 @@ exports.DockingViewer = exports.setProductionMode = exports.setDebugMode = expor
 var tslib_1 = require("tslib");
 var structure_1 = require("../../mol-model/structure");
 var objects_1 = require("../../mol-plugin-state/objects");
-var mol_plugin_ui_1 = require("../../mol-plugin-ui");
+var react18_1 = require("../../mol-plugin-ui/react18");
 var spec_1 = require("../../mol-plugin-ui/spec");
 var behavior_1 = require("../../mol-plugin/behavior");
 var commands_1 = require("../../mol-plugin/commands");
@@ -58,12 +58,12 @@ var Viewer = /** @class */ (function () {
         var _a;
         if (colors === void 0) { colors = [(0, color_1.Color)(0x992211), (0, color_1.Color)(0xDDDDDD)]; }
         if (showButtons === void 0) { showButtons = true; }
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var o, defaultSpec, spec, element, plugin;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return tslib_1.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        o = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultViewerOptions), {
+                        o = tslib_1.__assign(tslib_1.__assign({}, DefaultViewerOptions), {
                             layoutIsExpanded: false,
                             layoutShowControls: false,
                             layoutShowRemoteState: false,
@@ -96,7 +96,7 @@ var Viewer = /** @class */ (function () {
                                     controlsDisplay: o.layoutControlsDisplay,
                                 },
                             },
-                            components: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultSpec.components), { controls: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none', viewport: {
+                            components: tslib_1.__assign(tslib_1.__assign({}, defaultSpec.components), { controls: tslib_1.__assign(tslib_1.__assign({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none', viewport: {
                                     view: viewport_1.ViewportComponent
                                 } }),
                             config: [
@@ -118,7 +118,7 @@ var Viewer = /** @class */ (function () {
                             : elementOrId;
                         if (!element)
                             throw new Error("Could not get element with id '".concat(elementOrId, "'"));
-                        return [4 /*yield*/, (0, mol_plugin_ui_1.createPluginUI)(element, spec)];
+                        return [4 /*yield*/, (0, react18_1.createPluginUI)(element, spec)];
                     case 1:
                         plugin = _b.sent();
                         plugin.customState = {
@@ -130,8 +130,8 @@ var Viewer = /** @class */ (function () {
                         plugin.behaviors.canvas3d.initialized.subscribe(function (v) {
                             if (v) {
                                 commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
-                                        renderer: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer), { backgroundColor: names_1.ColorNames.white }),
-                                        camera: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
+                                        renderer: tslib_1.__assign(tslib_1.__assign({}, plugin.canvas3d.props.renderer), { backgroundColor: names_1.ColorNames.white }),
+                                        camera: tslib_1.__assign(tslib_1.__assign({}, plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
                                     } });
                             }
                         });
@@ -141,10 +141,10 @@ var Viewer = /** @class */ (function () {
         });
     };
     Viewer.prototype.loadStructuresFromUrlsAndMerge = function (sources) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structures, _i, sources_1, _a, url, format, isBinary, data_1, trajectory, model, modelProperties, structure_2, structureProperties_1, dependsOn, data, structure, structureProperties;
             var _this = this;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return tslib_1.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         structures = [];
@@ -192,8 +192,8 @@ var Viewer = /** @class */ (function () {
                         return [4 /*yield*/, this.plugin.builders.structure.insertStructureProperties(structure)];
                     case 11:
                         structureProperties = _b.sent();
-                        this.plugin.behaviors.canvas3d.initialized.subscribe(function (v) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-                            return (0, tslib_1.__generator)(this, function (_a) {
+                        this.plugin.behaviors.canvas3d.initialized.subscribe(function (v) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                            return tslib_1.__generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0: return [4 /*yield*/, this.plugin.builders.structure.representation.applyPreset(structureProperties || structure, viewport_1.StructurePreset)];
                                     case 1:
@@ -227,9 +227,9 @@ var MergeStructures = objects_1.PluginStateTransform.BuiltIn({
     apply: function (_a) {
         var _this = this;
         var params = _a.params, dependencies = _a.dependencies;
-        return mol_task_1.Task.create('Merge Structures', function (ctx) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        return mol_task_1.Task.create('Merge Structures', function (ctx) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var first, builder, _i, _a, ref, s, _b, _c, unit, structure;
-            return (0, tslib_1.__generator)(this, function (_d) {
+            return tslib_1.__generator(this, function (_d) {
                 if (params.structures.length === 0)
                     return [2 /*return*/, mol_state_1.StateObject.Null];
                 first = dependencies[params.structures[0].ref].data;

package/lib/commonjs/apps/docking-viewer/viewport.js

@@ -26,14 +26,14 @@ var color_1 = require("../../mol-util/color");
 var material_1 = require("../../mol-util/material");
 function shinyStyle(plugin) {
     return commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
-            renderer: (0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer),
-            postprocessing: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.postprocessing), { occlusion: { name: 'off', params: {} }, outline: { name: 'off', params: {} } })
+            renderer: tslib_1.__assign({}, plugin.canvas3d.props.renderer),
+            postprocessing: tslib_1.__assign(tslib_1.__assign({}, plugin.canvas3d.props.postprocessing), { occlusion: { name: 'off', params: {} }, outline: { name: 'off', params: {} } })
         } });
 }
 function occlusionStyle(plugin) {
     return commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
-            renderer: (0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer),
-            postprocessing: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.postprocessing), { occlusion: { name: 'on', params: {
+            renderer: tslib_1.__assign({}, plugin.canvas3d.props.renderer),
+            postprocessing: tslib_1.__assign(tslib_1.__assign({}, plugin.canvas3d.props.postprocessing), { occlusion: { name: 'on', params: {
                         bias: 0.8,
                         blurKernelSize: 15,
                         radius: 5,
@@ -59,17 +59,17 @@ var ligandSurroundings = (0, structure_selection_query_1.StructureSelectionQuery
         by: structure_selection_query_1.StructureSelectionQueries.ligand.expression
     })
 ]));
-var PresetParams = (0, tslib_1.__assign)({}, representation_preset_1.StructureRepresentationPresetProvider.CommonParams);
+var PresetParams = tslib_1.__assign({}, representation_preset_1.StructureRepresentationPresetProvider.CommonParams);
 var CustomMaterial = (0, material_1.Material)({ roughness: 0.2, metalness: 0 });
 exports.StructurePreset = (0, representation_preset_1.StructureRepresentationPresetProvider)({
     id: 'preset-structure',
     display: { name: 'Structure' },
     params: function () { return PresetParams; },
     apply: function (ref, params, plugin) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structureCell, components, _a, update, builder, typeParams, representations;
             var _b;
-            return (0, tslib_1.__generator)(this, function (_c) {
+            return tslib_1.__generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
@@ -85,8 +85,8 @@ exports.StructurePreset = (0, representation_preset_1.StructureRepresentationPre
                             _b);
                         _a = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _a.update, builder = _a.builder, typeParams = _a.typeParams;
                         representations = {
-                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, sizeFactor: 0.35 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-                            polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial }), color: 'chain-id', colorParams: { palette: plugin.customState.colorPalette } }, { tag: 'polymer' }),
+                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, sizeFactor: 0.35 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+                            polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial }), color: 'chain-id', colorParams: { palette: plugin.customState.colorPalette } }, { tag: 'polymer' }),
                         };
                         return [4 /*yield*/, update.commit({ revertOnError: true })];
                     case 3:
@@ -106,10 +106,10 @@ exports.IllustrativePreset = (0, representation_preset_1.StructureRepresentation
     display: { name: 'Illustrative' },
     params: function () { return PresetParams; },
     apply: function (ref, params, plugin) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structureCell, components, _a, update, builder, typeParams, representations;
             var _b;
-            return (0, tslib_1.__generator)(this, function (_c) {
+            return tslib_1.__generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
@@ -125,8 +125,8 @@ exports.IllustrativePreset = (0, representation_preset_1.StructureRepresentation
                             _b);
                         _a = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _a.update, builder = _a.builder, typeParams = _a.typeParams;
                         representations = {
-                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'spacefill', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { ignoreLight: true }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-                            polymer: builder.buildRepresentation(update, components.polymer, { type: 'spacefill', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { ignoreLight: true }), color: 'illustrative', colorParams: { palette: plugin.customState.colorPalette } }, { tag: 'polymer' }),
+                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'spacefill', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { ignoreLight: true }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+                            polymer: builder.buildRepresentation(update, components.polymer, { type: 'spacefill', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { ignoreLight: true }), color: 'illustrative', colorParams: { palette: plugin.customState.colorPalette } }, { tag: 'polymer' }),
                         };
                         return [4 /*yield*/, update.commit({ revertOnError: true })];
                     case 3:
@@ -147,10 +147,10 @@ var SurfacePreset = (0, representation_preset_1.StructureRepresentationPresetPro
     params: function () { return PresetParams; },
     apply: function (ref, params, plugin) {
         var _a;
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structureCell, structure, components, _b, update, builder, typeParams, representations;
             var _c;
-            return (0, tslib_1.__generator)(this, function (_d) {
+            return tslib_1.__generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
@@ -167,8 +167,8 @@ var SurfacePreset = (0, representation_preset_1.StructureRepresentationPresetPro
                             _c);
                         _b = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _b.update, builder = _b.builder, typeParams = _b.typeParams;
                         representations = {
-                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, sizeFactor: 0.26 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-                            polymer: builder.buildRepresentation(update, components.polymer, { type: 'molecular-surface', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, quality: 'custom', resolution: 0.5, doubleSided: true }), color: 'partial-charge' }, { tag: 'polymer' }),
+                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, sizeFactor: 0.26 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+                            polymer: builder.buildRepresentation(update, components.polymer, { type: 'molecular-surface', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, quality: 'custom', resolution: 0.5, doubleSided: true }), color: 'partial-charge' }, { tag: 'polymer' }),
                         };
                         return [4 /*yield*/, update.commit({ revertOnError: true })];
                     case 3:
@@ -189,10 +189,10 @@ var PocketPreset = (0, representation_preset_1.StructureRepresentationPresetProv
     params: function () { return PresetParams; },
     apply: function (ref, params, plugin) {
         var _a;
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structureCell, structure, components, _b, update, builder, typeParams, representations;
             var _c;
-            return (0, tslib_1.__generator)(this, function (_d) {
+            return tslib_1.__generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
@@ -209,8 +209,8 @@ var PocketPreset = (0, representation_preset_1.StructureRepresentationPresetProv
                             _c);
                         _b = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _b.update, builder = _b.builder, typeParams = _b.typeParams;
                         representations = {
-                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, sizeFactor: 0.26 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-                            surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }), color: 'partial-charge' }, { tag: 'surroundings' }),
+                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, sizeFactor: 0.26 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+                            surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }), color: 'partial-charge' }, { tag: 'surroundings' }),
                         };
                         return [4 /*yield*/, update.commit({ revertOnError: true })];
                     case 3:
@@ -231,10 +231,10 @@ var InteractionsPreset = (0, representation_preset_1.StructureRepresentationPres
     params: function () { return PresetParams; },
     apply: function (ref, params, plugin) {
         var _a;
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structureCell, structure, components, _b, update, builder, typeParams, representations;
             var _c;
-            return (0, tslib_1.__generator)(this, function (_d) {
+            return tslib_1.__generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
@@ -254,10 +254,10 @@ var InteractionsPreset = (0, representation_preset_1.StructureRepresentationPres
                             _c);
                         _b = representation_preset_1.StructureRepresentationPresetProvider.reprBuilder(plugin, params), update = _b.update, builder = _b.builder, typeParams = _b.typeParams;
                         representations = {
-                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, sizeFactor: 0.3 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
-                            ballAndStick: builder.buildRepresentation(update, components.surroundings, { type: 'ball-and-stick', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, sizeFactor: 0.1, sizeAspectRatio: 1 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ball-and-stick' }),
-                            interactions: builder.buildRepresentation(update, components.interactions, { type: interactions_1.InteractionsRepresentationProvider, typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial }), color: interaction_type_1.InteractionTypeColorThemeProvider }, { tag: 'interactions' }),
-                            label: builder.buildRepresentation(update, components.surroundings, { type: 'label', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { material: CustomMaterial, background: false, borderWidth: 0.1 }), color: 'uniform', colorParams: { value: (0, color_1.Color)(0x000000) } }, { tag: 'label' }),
+                            ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, sizeFactor: 0.3 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ligand' }),
+                            ballAndStick: builder.buildRepresentation(update, components.surroundings, { type: 'ball-and-stick', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, sizeFactor: 0.1, sizeAspectRatio: 1 }), color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } }, { tag: 'ball-and-stick' }),
+                            interactions: builder.buildRepresentation(update, components.interactions, { type: interactions_1.InteractionsRepresentationProvider, typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial }), color: interaction_type_1.InteractionTypeColorThemeProvider }, { tag: 'interactions' }),
+                            label: builder.buildRepresentation(update, components.surroundings, { type: 'label', typeParams: tslib_1.__assign(tslib_1.__assign({}, typeParams), { material: CustomMaterial, background: false, borderWidth: 0.1 }), color: 'uniform', colorParams: { value: (0, color_1.Color)(0x000000) } }, { tag: 'label' }),
                         };
                         return [4 /*yield*/, update.commit({ revertOnError: true })];
                     case 4:
@@ -274,11 +274,11 @@ var InteractionsPreset = (0, representation_preset_1.StructureRepresentationPres
 });
 exports.ShowButtons = config_1.PluginConfig.item('showButtons', true);
 var ViewportComponent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ViewportComponent, _super);
+    tslib_1.__extends(ViewportComponent, _super);
     function ViewportComponent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.set = function (preset) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-            return (0, tslib_1.__generator)(this, function (_a) {
+        _this.set = function (preset) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this._set(this.plugin.managers.structure.hierarchy.selection.structures, preset)];
                     case 1:
@@ -295,8 +295,8 @@ var ViewportComponent = /** @class */ (function (_super) {
         return _this;
     }
     ViewportComponent.prototype._set = function (structures, preset) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            return (0, tslib_1.__generator)(this, function (_a) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this.plugin.managers.structure.component.clear(structures)];
                     case 1:
@@ -319,7 +319,7 @@ var ViewportComponent = /** @class */ (function (_super) {
     ViewportComponent.prototype.render = function () {
         var _a, _b;
         var VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || viewport_1.ViewportControls;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}, void 0), this.showButtons && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.structurePreset }, { children: "Structure" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.illustrativePreset }, { children: "Illustrative" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.surfacePreset }, { children: "Surface" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.interactionsPreset }, { children: "Interactions" }), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(VPControls, {}, void 0), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}, void 0), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {}, void 0)] }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}), this.showButtons && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.structurePreset }, { children: "Structure" })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.illustrativePreset }, { children: "Illustrative" })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.surfacePreset }, { children: "Surface" })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '4px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.interactionsPreset }, { children: "Interactions" })) }))] })), (0, jsx_runtime_1.jsx)(VPControls, {}), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {})] }))] });
     };
     return ViewportComponent;
 }(base_1.PluginUIComponent));