molstar 3.5.0 → 3.7.0

package/lib/commonjs/mol-model-formats/structure/pdb/atom-site.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -37,31 +37,96 @@ function getAtomSiteTemplate(data, count) {
     };
 }
 exports.getAtomSiteTemplate = getAtomSiteTemplate;
-function getAtomSite(sites) {
+function getAtomSite(sites, hasTer) {
+    var pdbx_PDB_model_num = cif_1.CifField.ofStrings(sites.pdbx_PDB_model_num);
     var auth_asym_id = cif_1.CifField.ofTokens(sites.auth_asym_id);
+    var auth_seq_id = cif_1.CifField.ofTokens(sites.auth_seq_id);
     var auth_atom_id = cif_1.CifField.ofTokens(sites.auth_atom_id);
     var auth_comp_id = cif_1.CifField.ofTokens(sites.auth_comp_id);
+    var id = cif_1.CifField.ofStrings(sites.id);
+    //
+    var currModelNum = pdbx_PDB_model_num.str(0);
+    var currAsymId = auth_asym_id.str(0);
+    var currSeqId = auth_seq_id.int(0);
+    var currLabelAsymId = currAsymId;
+    var asymIdCounts = new Map();
+    var atomIdCounts = new Map();
+    var labelAsymIds = [];
+    var labelAtomIds = [];
+    // ensure unique asym ids per model and unique atom ids per seq id
+    for (var i = 0, il = id.rowCount; i < il; ++i) {
+        var modelNum = pdbx_PDB_model_num.str(i);
+        var asymId = auth_asym_id.str(i);
+        var seqId = auth_seq_id.int(i);
+        var atomId = auth_atom_id.str(i);
+        var asymIdChanged = false;
+        if (modelNum !== currModelNum) {
+            asymIdCounts.clear();
+            atomIdCounts.clear();
+            currModelNum = modelNum;
+            currAsymId = asymId;
+            currSeqId = seqId;
+            asymIdChanged = true;
+            currLabelAsymId = asymId;
+        }
+        else if (currAsymId !== asymId) {
+            atomIdCounts.clear();
+            currAsymId = asymId;
+            currSeqId = seqId;
+            asymIdChanged = true;
+            currLabelAsymId = asymId;
+        }
+        else if (currSeqId !== seqId) {
+            atomIdCounts.clear();
+            currSeqId = seqId;
+        }
+        if (asymIdCounts.has(asymId)) {
+            // only change the chains name if there are TER records
+            // otherwise assume repeated chain name use is from interleaved chains
+            if (hasTer && asymIdChanged) {
+                var asymIdCount = asymIdCounts.get(asymId) + 1;
+                asymIdCounts.set(asymId, asymIdCount);
+                currLabelAsymId = "".concat(asymId, "_").concat(asymIdCount);
+            }
+        }
+        else {
+            asymIdCounts.set(asymId, 0);
+        }
+        labelAsymIds[i] = currLabelAsymId;
+        if (atomIdCounts.has(atomId)) {
+            var atomIdCount = atomIdCounts.get(atomId) + 1;
+            atomIdCounts.set(atomId, atomIdCount);
+            atomId = "".concat(atomId, "_").concat(atomIdCount);
+        }
+        else {
+            atomIdCounts.set(atomId, 0);
+        }
+        labelAtomIds[i] = atomId;
+    }
+    var labelAsymId = db_1.Column.ofStringArray(labelAsymIds);
+    var labelAtomId = db_1.Column.ofStringArray(labelAtomIds);
+    //
     return {
         auth_asym_id: auth_asym_id,
         auth_atom_id: auth_atom_id,
         auth_comp_id: auth_comp_id,
-        auth_seq_id: cif_1.CifField.ofTokens(sites.auth_seq_id),
+        auth_seq_id: auth_seq_id,
         B_iso_or_equiv: cif_1.CifField.ofTokens(sites.B_iso_or_equiv),
         Cartn_x: cif_1.CifField.ofTokens(sites.Cartn_x),
         Cartn_y: cif_1.CifField.ofTokens(sites.Cartn_y),
         Cartn_z: cif_1.CifField.ofTokens(sites.Cartn_z),
         group_PDB: cif_1.CifField.ofTokens(sites.group_PDB),
-        id: cif_1.CifField.ofStrings(sites.id),
+        id: id,
         label_alt_id: cif_1.CifField.ofTokens(sites.label_alt_id),
-        label_asym_id: auth_asym_id,
-        label_atom_id: auth_atom_id,
+        label_asym_id: cif_1.CifField.ofColumn(labelAsymId),
+        label_atom_id: cif_1.CifField.ofColumn(labelAtomId),
         label_comp_id: auth_comp_id,
         label_seq_id: cif_1.CifField.ofUndefined(sites.index, db_1.Column.Schema.int),
         label_entity_id: cif_1.CifField.ofStrings(sites.label_entity_id),
         occupancy: (0, token_1.areTokensEmpty)(sites.occupancy) ? cif_1.CifField.ofUndefined(sites.index, db_1.Column.Schema.float) : cif_1.CifField.ofTokens(sites.occupancy),
         type_symbol: cif_1.CifField.ofTokens(sites.type_symbol),
         pdbx_PDB_ins_code: cif_1.CifField.ofTokens(sites.pdbx_PDB_ins_code),
-        pdbx_PDB_model_num: cif_1.CifField.ofStrings(sites.pdbx_PDB_model_num),
+        pdbx_PDB_model_num: pdbx_PDB_model_num,
         partial_charge: cif_1.CifField.ofTokens(sites.partial_charge)
     };
 }

package/lib/commonjs/mol-model-formats/structure/pdb/secondary-structure.js

@@ -22,19 +22,19 @@ var HelixTypes = {
     // Left-handed gamma                           8
     // 2 - 7 ribbon/helix                          9
     // Polyproline                                10
-    1: 'HELX_RH_AL_P',
-    2: 'HELX_RH_OM_P',
-    3: 'HELX_RH_PI_P',
-    4: 'HELX_RH_GA_P',
-    5: 'HELX_RH_3T_P',
-    6: 'HELX_LH_AL_P',
-    7: 'HELX_LH_OM_P',
-    8: 'HELX_LH_GA_P',
-    9: 'HELX_RH_27_P',
-    10: 'HELX_RH_PP_P', // TODO or left-handed???
+    1: 'helx_rh_al_p',
+    2: 'helx_rh_om_p',
+    3: 'helx_rh_pi_p',
+    4: 'helx_rh_ga_p',
+    5: 'helx_rh_3t_p',
+    6: 'helx_lh_al_p',
+    7: 'helx_lh_om_p',
+    8: 'helx_lh_ga_p',
+    9: 'helx_rh_27_p',
+    10: 'helx_rh_pp_p', // TODO or left-handed???
 };
 function getStructConfTypeId(type) {
-    return HelixTypes[type] || 'HELX_P';
+    return HelixTypes[type] || 'helx_p';
 }
 function parseHelix(lines, lineStart, lineEnd) {
     var helices = [];

package/lib/commonjs/mol-model-formats/structure/pdb/to-cif.js

@@ -24,7 +24,7 @@ var conect_1 = require("./conect");
 var debug_1 = require("../../../mol-util/debug");
 function pdbToMmCif(pdb) {
     return tslib_1.__awaiter(this, void 0, void 0, function () {
-        var lines, data, indices, tokenizer, isPdbqt, atomCount, anisotropicCount, i, _i, s, e, atomSite, anisotropic, entityBuilder, helperCategories, heteroNames, modelNum, modelStr, conectRange, i, _i, s, e, j, j, j, j, j, j, j, seqIds, atomIds, compIds, asymIds, componentBuilder, i, il, compId, moleculeType, atom_site, categories, _a, helperCategories_1, c;
+        var lines, data, indices, tokenizer, isPdbqt, atomCount, anisotropicCount, i, _i, s, e, atomSite, anisotropic, entityBuilder, helperCategories, heteroNames, modelNum, modelStr, conectRange, hasTer, i, _i, s, e, j, j, j, j, j, j, j, seqIds, atomIds, compIds, asymIds, componentBuilder, i, il, compId, moleculeType, atom_site, categories, _a, helperCategories_1, c;
         return tslib_1.__generator(this, function (_b) {
             lines = pdb.lines;
             data = lines.data, indices = lines.indices;
@@ -54,6 +54,7 @@ function pdbToMmCif(pdb) {
             heteroNames = [];
             modelNum = 0, modelStr = '';
             conectRange = undefined;
+            hasTer = false;
             for (i = 0, _i = lines.count; i < _i; i++) {
                 s = indices[2 * i], e = indices[2 * i + 1];
                 switch (data[s]) {
@@ -189,6 +190,10 @@ function pdbToMmCif(pdb) {
                         }
                         // TODO: SCALE record => cif.atom_sites.fract_transf_matrix, cif.atom_sites.fract_transf_vector
                         break;
+                    case 'T':
+                        if ((0, string_1.substringStartsWith)(data, s, e, 'TER')) {
+                            hasTer = true;
+                        }
                 }
             }
             seqIds = db_1.Column.ofIntTokens(atomSite.auth_seq_id);
@@ -203,7 +208,7 @@ function pdbToMmCif(pdb) {
                 moleculeType = (0, types_1.getMoleculeType)(componentBuilder.add(compId, i).type, compId);
                 atomSite.label_entity_id[i] = entityBuilder.getEntityId(compId, moleculeType, asymIds.value(i));
             }
-            atom_site = (0, atom_site_1.getAtomSite)(atomSite);
+            atom_site = (0, atom_site_1.getAtomSite)(atomSite, hasTer);
             if (!isPdbqt)
                 delete atom_site.partial_charge;
             if (conectRange) {

package/lib/commonjs/mol-model-formats/structure/property/bonds/chem_comp.js

@@ -63,7 +63,7 @@ var ComponentBond;
             var nameA = atom_id_1.value(i);
             var nameB = atom_id_2.value(i);
             var order = value_order.value(i);
-            var aromatic = pdbx_aromatic_flag.value(i) === 'Y';
+            var aromatic = pdbx_aromatic_flag.value(i) === 'y';
             if (entry.id !== id) {
                 entry = addEntry(id);
             }

package/lib/commonjs/mol-model-formats/structure/property/bonds/struct_conn.js

@@ -118,7 +118,7 @@ var StructConn;
             if (partnerA === undefined || partnerB === undefined)
                 continue;
             var type = conn_type_id.value(i);
-            var orderType = (pdbx_value_order.value(i) || '').toLowerCase();
+            var orderType = (pdbx_value_order.value(i) || '');
             var flags = 0 /* None */;
             var order = 1;
             switch (orderType) {

package/lib/commonjs/mol-model-props/computed/representations/interactions-inter-unit-cylinder.d.ts

@@ -25,6 +25,7 @@ export declare const InteractionsInterUnitParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-model-props/computed/representations/interactions-intra-unit-cylinder.d.ts

@@ -25,6 +25,7 @@ export declare const InteractionsIntraUnitParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-model-props/computed/representations/interactions.d.ts

@@ -29,6 +29,7 @@ export declare const InteractionsParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -71,6 +72,7 @@ export declare function getInteractionParams(ctx: ThemeRegistryContext, structur
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -114,6 +116,7 @@ export declare const InteractionsRepresentationProvider: StructureRepresentation
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-model-props/integrative/cross-link-restraint/representation.d.ts

@@ -30,6 +30,7 @@ export declare const CrossLinkRestraintCylinderParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -72,6 +73,7 @@ export declare const CrossLinkRestraintParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -113,6 +115,7 @@ export declare function getCrossLinkRestraintParams(ctx: ThemeRegistryContext, s
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -155,6 +158,7 @@ export declare const CrossLinkRestraintRepresentationProvider: StructureRepresen
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-plugin/behavior/dynamic/volume-streaming/util.js

@@ -76,7 +76,7 @@ function getContourLevel(provider, plugin, taskCtx, emdbId) {
 exports.getContourLevel = getContourLevel;
 function getContourLevelEmdb(plugin, taskCtx, emdbId) {
     return tslib_1.__awaiter(this, void 0, void 0, function () {
-        var emdbHeaderServer, header, contours, primaryContour, i, contourLevel;
+        var emdbHeaderServer, header, map, contours, primaryContour, i, contourLevel;
         return tslib_1.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -84,7 +84,8 @@ function getContourLevelEmdb(plugin, taskCtx, emdbId) {
                     return [4 /*yield*/, plugin.fetch({ url: "".concat(emdbHeaderServer, "/").concat(emdbId.toUpperCase(), "/header/").concat(emdbId.toLowerCase(), ".xml"), type: 'xml' }).runInContext(taskCtx)];
                 case 1:
                     header = _a.sent();
-                    contours = header.getElementsByTagName('contour');
+                    map = header.getElementsByTagName('map')[0];
+                    contours = map.getElementsByTagName('contour');
                     primaryContour = contours[0];
                     for (i = 1; i < contours.length; i++) {
                         if (contours[i].getAttribute('primary') === 'true') {

package/lib/commonjs/mol-plugin/commands.d.ts

@@ -331,6 +331,7 @@ export declare const PluginCommands: {
                         flipSided: any;
                         flatShaded: any;
                         xrayShaded: any;
+                        transparentBackfaces: any;
                         bumpFrequency: any;
                         bumpAmplitude: any;
                         quality: any;

package/lib/commonjs/mol-plugin/util/viewport-screenshot.d.ts

@@ -37,6 +37,7 @@ declare class ViewportScreenshotHelper extends PluginComponent {
             flipSided: boolean;
             flatShaded: boolean;
             xrayShaded: boolean;
+            transparentBackfaces: string;
             bumpFrequency: number;
             bumpAmplitude: number;
             quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
@@ -69,6 +70,7 @@ declare class ViewportScreenshotHelper extends PluginComponent {
                 flipSided: boolean;
                 flatShaded: boolean;
                 xrayShaded: boolean;
+                transparentBackfaces: string;
                 bumpFrequency: number;
                 bumpAmplitude: number;
                 quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
@@ -109,6 +111,7 @@ declare class ViewportScreenshotHelper extends PluginComponent {
             flipSided: boolean;
             flatShaded: boolean;
             xrayShaded: boolean;
+            transparentBackfaces: string;
             bumpFrequency: number;
             bumpAmplitude: number;
             quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";

package/lib/commonjs/mol-plugin-state/actions/structure.d.ts

@@ -26,6 +26,12 @@ declare const DownloadStructure: StateAction<PluginStateObject.Root, void, PD.No
         isBinary: any;
         options: any;
     }>, "url"> | PD.NamedParams<PD.Normalize<{
+        id: any;
+        options: any;
+    }>, "alphafolddb"> | PD.NamedParams<PD.Normalize<{
+        id: any;
+        options: any;
+    }>, "modelarchive"> | PD.NamedParams<PD.Normalize<{
         provider: any;
         options: any;
     }>, "pdb"> | PD.NamedParams<PD.Normalize<{
@@ -37,12 +43,6 @@ declare const DownloadStructure: StateAction<PluginStateObject.Root, void, PD.No
     }>, "swissmodel"> | PD.NamedParams<PD.Normalize<{
         id: any;
         options: any;
-    }>, "alphafolddb"> | PD.NamedParams<PD.Normalize<{
-        id: any;
-        options: any;
-    }>, "modelarchive"> | PD.NamedParams<PD.Normalize<{
-        id: any;
-        options: any;
     }>, "pubchem">;
 }>>;
 export declare const UpdateTrajectory: StateAction<import("../../mol-state/object").StateObject<any, import("../../mol-state/object").StateObject.Type<any>>, void, PD.Normalize<{

package/lib/commonjs/mol-plugin-state/helpers/structure-selection-query.d.ts

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

package/lib/commonjs/mol-plugin-state/helpers/structure-selection-query.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>

package/lib/commonjs/mol-plugin-state/transforms/representation.d.ts

@@ -150,6 +150,7 @@ declare const ModelUnitcell3D: StateTransformer<SO.Molecule.Model, SO.Shape.Repr
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    transparentBackfaces: string;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -172,6 +173,7 @@ declare const StructureBoundingBox3D: StateTransformer<SO.Molecule.Structure, SO
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    transparentBackfaces: string;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -276,6 +278,7 @@ declare const StructureSelectionsAngle3D: StateTransformer<SO.Molecule.Structure
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean;
+    transparentBackfaces: string;
     bumpFrequency: number;
     bumpAmplitude: number;
     lineSizeAttenuation: boolean;
@@ -327,6 +330,7 @@ declare const StructureSelectionsDihedral3D: StateTransformer<SO.Molecule.Struct
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean;
+    transparentBackfaces: string;
     bumpFrequency: number;
     bumpAmplitude: number;
     lineSizeAttenuation: boolean;
@@ -384,6 +388,7 @@ declare const StructureSelectionsOrientation3D: StateTransformer<SO.Molecule.Str
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    transparentBackfaces: string;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -409,6 +414,7 @@ declare const StructureSelectionsPlane3D: StateTransformer<SO.Molecule.Structure
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    transparentBackfaces: string;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;

package/lib/commonjs/mol-plugin-ui/base.d.ts

@@ -9,7 +9,9 @@ import { Observable } from 'rxjs';
 import { PluginUIContext } from './context';
 import { ColorAccent } from './controls/common';
 export declare const PluginReactContext: React.Context<PluginUIContext>;
-export declare abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.Component<P, S, SS> {
+export declare abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.Component<P & {
+    children?: any;
+}, S, SS> {
     static contextType: React.Context<PluginUIContext>;
     readonly plugin: PluginUIContext;
     private subs;

package/lib/commonjs/mol-plugin-ui/controls/color.d.ts

@@ -27,5 +27,5 @@ export declare class CombinedColorControl extends React.PureComponent<ParamProps
     swatch(): JSX.Element;
     render(): JSX.Element;
 }
-export declare function ColorOptions(): React.ReactFragment;
+export declare function ColorOptions(): any;
 export declare function ColorValueOption(color: Color): JSX.Element | null;

package/lib/commonjs/mol-plugin-ui/controls/common.d.ts

@@ -18,6 +18,7 @@ export declare class ControlGroup extends React.Component<{
     noTopMargin?: boolean;
     childrenClassName?: string;
     maxHeight?: string;
+    children?: any;
 }, {
     isExpanded: boolean;
 }> {
@@ -139,6 +140,7 @@ export declare class ToggleButton extends React.PureComponent<ToggleButtonProps>
     render(): JSX.Element;
 }
 export declare class ExpandGroup extends React.PureComponent<{
+    children?: any;
     header: string;
     headerStyle?: React.CSSProperties;
     initiallyExpanded?: boolean;

package/lib/commonjs/mol-plugin-ui/hooks/use-behavior.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-21 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-22 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */

package/lib/commonjs/mol-plugin-ui/hooks/use-behavior.js

@@ -1,18 +1,19 @@
 "use strict";
 /**
- * Copyright (c) 2020-21 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-22 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBehavior = void 0;
-var react_1 = require("react");
-// eslint-disable-next-line
-function useBehavior(s) {
-    var _a = (0, react_1.useState)({}), next = _a[1];
-    var current = (0, react_1.useRef)();
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var rxjs_1 = require("rxjs");
+function useBehaviorLegacy(s) {
+    var _a = react_1.default.useState({}), next = _a[1];
+    var current = react_1.default.useRef();
     current.current = s === null || s === void 0 ? void 0 : s.value;
-    (0, react_1.useEffect)(function () {
+    react_1.default.useEffect(function () {
         if (!s) {
             return;
         }
@@ -24,4 +25,17 @@ function useBehavior(s) {
     }, [s]);
     return s === null || s === void 0 ? void 0 : s.value;
 }
+function useBehaviorReact18(s) {
+    return react_1.default.useSyncExternalStore(react_1.default.useCallback(function (callback) {
+        var sub = s === null || s === void 0 ? void 0 : s.pipe((0, rxjs_1.skip)(1)).subscribe(callback);
+        return function () { return sub === null || sub === void 0 ? void 0 : sub.unsubscribe(); };
+    }, [s]), react_1.default.useCallback(function () { return s === null || s === void 0 ? void 0 : s.value; }, [s]));
+}
+var _useBehavior = !!react_1.default.useSyncExternalStore
+    ? useBehaviorReact18
+    : useBehaviorLegacy;
+// eslint-disable-next-line
+function useBehavior(s) {
+    return _useBehavior(s);
+}
 exports.useBehavior = useBehavior;

package/lib/commonjs/mol-plugin-ui/plugin.d.ts

@@ -11,12 +11,14 @@ import { PluginUIComponent } from './base';
 import { PluginUIContext } from './context';
 export declare class Plugin extends React.Component<{
     plugin: PluginUIContext;
+    children?: any;
 }, {}> {
     region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element): JSX.Element;
     render(): JSX.Element;
 }
 export declare class PluginContextContainer extends React.Component<{
     plugin: PluginUIContext;
+    children?: any;
 }> {
     render(): JSX.Element;
 }

package/lib/commonjs/mol-plugin-ui/plugin.js

@@ -137,11 +137,11 @@ var Layout = /** @class */ (function (_super) {
         configurable: true
     });
     Layout.prototype.render = function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         var layout = this.plugin.layout.state;
         var controls = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) || {};
         var viewport = ((_c = (_b = this.plugin.spec.components) === null || _b === void 0 ? void 0 : _b.viewport) === null || _c === void 0 ? void 0 : _c.view) || DefaultViewport;
-        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-plugin' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] })), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}), (0, jsx_runtime_1.jsx)(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] })) }));
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-plugin' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] })), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}), !((_e = this.plugin.spec.components) === null || _e === void 0 ? void 0 : _e.disableDragOverlay) && (0, jsx_runtime_1.jsx)(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] })) }));
     };
     return Layout;
 }(base_1.PluginUIComponent));

package/lib/commonjs/mol-plugin-ui/react18.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+import { PluginUIContext } from './context';
+import { PluginUISpec } from './spec';
+export declare function createPluginUI(target: HTMLElement, spec?: PluginUISpec, options?: {
+    onBeforeUIRender?: (ctx: PluginUIContext) => (Promise<void> | void);
+}): Promise<PluginUIContext>;

package/lib/commonjs/mol-plugin-ui/react18.js

@@ -0,0 +1,38 @@
+"use strict";
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPluginUI = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var client_1 = require("react-dom/client");
+var plugin_1 = require("./plugin");
+var context_1 = require("./context");
+var spec_1 = require("./spec");
+function createPluginUI(target, spec, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function () {
+        var ctx;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    ctx = new context_1.PluginUIContext(spec || (0, spec_1.DefaultPluginUISpec)());
+                    return [4 /*yield*/, ctx.init()];
+                case 1:
+                    _a.sent();
+                    if (!(options === null || options === void 0 ? void 0 : options.onBeforeUIRender)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, options.onBeforeUIRender(ctx)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    (0, client_1.createRoot)(target).render((0, react_1.createElement)(plugin_1.Plugin, { plugin: ctx }));
+                    return [2 /*return*/, ctx];
+            }
+        });
+    });
+}
+exports.createPluginUI = createPluginUI;

package/lib/commonjs/mol-plugin-ui/spec.d.ts

@@ -20,6 +20,7 @@ interface PluginUISpec extends PluginSpec {
             controls?: React.ComponentClass;
         };
         hideTaskOverlay?: boolean;
+        disableDragOverlay?: boolean;
     };
 }
 declare namespace PluginUISpec {

package/lib/commonjs/mol-plugin-ui/state/common.js

@@ -75,7 +75,7 @@ var TransformControlBase = /** @class */ (function (_super) {
     tslib_1.__extends(TransformControlBase, _super);
     function TransformControlBase() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.busy = new rxjs_1.Subject();
+        _this.busy = new rxjs_1.BehaviorSubject(false);
         _this.onEnter = function () {
             if (_this.state.error)
                 return;
@@ -142,13 +142,12 @@ var TransformControlBase = /** @class */ (function (_super) {
     };
     TransformControlBase.prototype.componentDidMount = function () {
         var _this = this;
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (b) {
-            if (_this.state.busy !== b)
-                _this.busy.next(b);
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (busy) {
+            if (_this.busy.value !== busy)
+                _this.busy.next(busy);
         });
-        this.subscribe(this.busy, function (busy) {
-            if (_this.state.busy !== busy)
-                _this.setState({ busy: busy });
+        this.subscribe(this.busy.pipe((0, rxjs_1.skip)(1)), function (busy) {
+            _this.setState({ busy: busy });
         });
     };
     TransformControlBase.prototype.renderApply = function () {

package/lib/commonjs/mol-plugin-ui/structure/focus.d.ts

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