molstar 3.6.0 → 3.8.0

package/lib/mol-model/structure/model/types.js

@@ -415,47 +415,49 @@ export var SecondaryStructureType;
     SecondaryStructureType.is = BitFlags.has;
     SecondaryStructureType.create = BitFlags.create;
     SecondaryStructureType.SecondaryStructureMmcif = {
-        HELX_LH_27_P: 2 /* Helix */ | 32 /* LeftHanded */ | 1024 /* Helix27 */,
-        HELX_LH_3T_P: 2 /* Helix */ | 32 /* LeftHanded */ | 2048 /* Helix3Ten */,
-        HELX_LH_AL_P: 2 /* Helix */ | 32 /* LeftHanded */ | 4096 /* HelixAlpha */,
-        HELX_LH_A_N: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 524288 /* DoubleHelixA */,
-        HELX_LH_B_N: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 1048576 /* DoubleHelixB */,
-        HELX_LH_GA_P: 2 /* Helix */ | 32 /* LeftHanded */ | 8192 /* HelixGamma */,
-        HELX_LH_N: 1 /* DoubleHelix */ | 32 /* LeftHanded */,
-        HELX_LH_OM_P: 2 /* Helix */ | 32 /* LeftHanded */ | 16384 /* HelixOmega */,
-        HELX_LH_OT_N: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 131072 /* DoubleHelixOther */,
-        HELX_LH_OT_P: 2 /* Helix */ | 32 /* LeftHanded */ | 512 /* HelixOther */,
-        HELX_LH_P: 2 /* Helix */ | 32 /* LeftHanded */,
-        HELX_LH_PI_P: 2 /* Helix */ | 32 /* LeftHanded */ | 32768 /* HelixPi */,
-        HELX_LH_PP_P: 2 /* Helix */ | 32 /* LeftHanded */ | 65536 /* HelixPolyproline */,
-        HELX_LH_Z_N: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 262144 /* DoubleHelixZ */,
-        HELX_N: 1 /* DoubleHelix */,
-        HELX_OT_N: 1 /* DoubleHelix */,
-        HELX_OT_P: 2 /* Helix */,
-        HELX_P: 2 /* Helix */,
-        HELX_RH_27_P: 2 /* Helix */ | 64 /* RightHanded */ | 1024 /* Helix27 */,
-        HELX_RH_3T_P: 2 /* Helix */ | 64 /* RightHanded */ | 2048 /* Helix3Ten */,
-        HELX_RH_AL_P: 2 /* Helix */ | 64 /* RightHanded */ | 4096 /* HelixAlpha */,
-        HELX_RH_A_N: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 524288 /* DoubleHelixA */,
-        HELX_RH_B_N: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 1048576 /* DoubleHelixB */,
-        HELX_RH_GA_P: 2 /* Helix */ | 64 /* RightHanded */ | 8192 /* HelixGamma */,
-        HELX_RH_N: 1 /* DoubleHelix */ | 64 /* RightHanded */,
-        HELX_RH_OM_P: 2 /* Helix */ | 64 /* RightHanded */ | 16384 /* HelixOmega */,
-        HELX_RH_OT_N: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 131072 /* DoubleHelixOther */,
-        HELX_RH_OT_P: 2 /* Helix */ | 64 /* RightHanded */ | 512 /* HelixOther */,
-        HELX_RH_P: 2 /* Helix */ | 64 /* RightHanded */,
-        HELX_RH_PI_P: 2 /* Helix */ | 64 /* RightHanded */ | 32768 /* HelixPi */,
-        HELX_RH_PP_P: 2 /* Helix */ | 64 /* RightHanded */ | 65536 /* HelixPolyproline */,
-        HELX_RH_Z_N: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 262144 /* DoubleHelixZ */,
-        STRN: 4 /* Beta */ | 4194304 /* BetaStrand */,
-        TURN_OT_P: 16 /* Turn */ | 33554432 /* TurnOther */,
-        TURN_P: 16 /* Turn */,
-        TURN_TY1P_P: 16 /* Turn */ | 256 /* InverseTurn */ | 67108864 /* Turn1 */,
-        TURN_TY1_P: 16 /* Turn */ | 128 /* ClassicTurn */ | 67108864 /* Turn1 */,
-        TURN_TY2P_P: 16 /* Turn */ | 256 /* InverseTurn */ | 134217728 /* Turn2 */,
-        TURN_TY2_P: 16 /* Turn */ | 128 /* ClassicTurn */ | 134217728 /* Turn2 */,
-        TURN_TY3P_P: 16 /* Turn */ | 256 /* InverseTurn */ | 268435456 /* Turn3 */,
-        TURN_TY3_P: 16 /* Turn */ | 128 /* ClassicTurn */ | 268435456 /* Turn3 */, // type III turn (protein)
+        helx_lh_27_p: 2 /* Helix */ | 32 /* LeftHanded */ | 1024 /* Helix27 */,
+        helx_lh_3t_p: 2 /* Helix */ | 32 /* LeftHanded */ | 2048 /* Helix3Ten */,
+        helx_lh_al_p: 2 /* Helix */ | 32 /* LeftHanded */ | 4096 /* HelixAlpha */,
+        helx_lh_a_n: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 524288 /* DoubleHelixA */,
+        helx_lh_b_n: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 1048576 /* DoubleHelixB */,
+        helx_lh_ga_p: 2 /* Helix */ | 32 /* LeftHanded */ | 8192 /* HelixGamma */,
+        helx_lh_n: 1 /* DoubleHelix */ | 32 /* LeftHanded */,
+        helx_lh_om_p: 2 /* Helix */ | 32 /* LeftHanded */ | 16384 /* HelixOmega */,
+        helx_lh_ot_n: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 131072 /* DoubleHelixOther */,
+        helx_lh_ot_p: 2 /* Helix */ | 32 /* LeftHanded */ | 512 /* HelixOther */,
+        helx_lh_p: 2 /* Helix */ | 32 /* LeftHanded */,
+        helx_lh_pi_p: 2 /* Helix */ | 32 /* LeftHanded */ | 32768 /* HelixPi */,
+        helx_lh_pp_p: 2 /* Helix */ | 32 /* LeftHanded */ | 65536 /* HelixPolyproline */,
+        helx_lh_z_n: 1 /* DoubleHelix */ | 32 /* LeftHanded */ | 262144 /* DoubleHelixZ */,
+        helx_n: 1 /* DoubleHelix */,
+        helx_ot_n: 1 /* DoubleHelix */,
+        helx_ot_p: 2 /* Helix */,
+        helx_p: 2 /* Helix */,
+        helx_rh_27_p: 2 /* Helix */ | 64 /* RightHanded */ | 1024 /* Helix27 */,
+        helx_rh_3t_p: 2 /* Helix */ | 64 /* RightHanded */ | 2048 /* Helix3Ten */,
+        helx_rh_al_p: 2 /* Helix */ | 64 /* RightHanded */ | 4096 /* HelixAlpha */,
+        helx_rh_a_n: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 524288 /* DoubleHelixA */,
+        helx_rh_b_n: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 1048576 /* DoubleHelixB */,
+        helx_rh_ga_p: 2 /* Helix */ | 64 /* RightHanded */ | 8192 /* HelixGamma */,
+        helx_rh_n: 1 /* DoubleHelix */ | 64 /* RightHanded */,
+        helx_rh_om_p: 2 /* Helix */ | 64 /* RightHanded */ | 16384 /* HelixOmega */,
+        helx_rh_ot_n: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 131072 /* DoubleHelixOther */,
+        helx_rh_ot_p: 2 /* Helix */ | 64 /* RightHanded */ | 512 /* HelixOther */,
+        helx_rh_p: 2 /* Helix */ | 64 /* RightHanded */,
+        helx_rh_pi_p: 2 /* Helix */ | 64 /* RightHanded */ | 32768 /* HelixPi */,
+        helx_rh_pp_p: 2 /* Helix */ | 64 /* RightHanded */ | 65536 /* HelixPolyproline */,
+        helx_rh_z_n: 1 /* DoubleHelix */ | 64 /* RightHanded */ | 262144 /* DoubleHelixZ */,
+        strn: 4 /* Beta */ | 4194304 /* BetaStrand */,
+        turn_ot_p: 16 /* Turn */ | 33554432 /* TurnOther */,
+        turn_p: 16 /* Turn */,
+        turn_ty1p_p: 16 /* Turn */ | 256 /* InverseTurn */ | 67108864 /* Turn1 */,
+        turn_ty1_p: 16 /* Turn */ | 128 /* ClassicTurn */ | 67108864 /* Turn1 */,
+        turn_ty2p_p: 16 /* Turn */ | 256 /* InverseTurn */ | 134217728 /* Turn2 */,
+        turn_ty2_p: 16 /* Turn */ | 128 /* ClassicTurn */ | 134217728 /* Turn2 */,
+        turn_ty3p_p: 16 /* Turn */ | 256 /* InverseTurn */ | 268435456 /* Turn3 */,
+        turn_ty3_p: 16 /* Turn */ | 128 /* ClassicTurn */ | 268435456 /* Turn3 */,
+        bend: 8 /* Bend */,
+        other: 0 /* None */, // secondary structure type that does not conform to an accepted category, random coil (protein)
     };
     SecondaryStructureType.SecondaryStructurePdb = {
         1: 2 /* Helix */ | 64 /* RightHanded */ | 4096 /* HelixAlpha */,

package/lib/mol-model-formats/shape/ply.d.ts

@@ -30,7 +30,7 @@ export declare const PlyShapeParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
-    allowTransparentBackfaces: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
@@ -72,7 +72,7 @@ export declare function shapeFromPly(source: PlyFile, params?: {}): Task<ShapePr
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
-    allowTransparentBackfaces: PD.BooleanParam;
+    transparentBackfaces: PD.Select<string>;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/mol-model-formats/structure/common/property.js

@@ -22,6 +22,8 @@ var FormatRegistry = /** @class */ (function () {
         return this.map.get(kind);
     };
     FormatRegistry.prototype.isApplicable = function (model) {
+        if (!this.map.has(model.sourceData.kind))
+            return false;
         var isApplicable = this.applicable.get(model.sourceData.kind);
         return isApplicable ? isApplicable(model) : true;
     };

package/lib/mol-model-formats/structure/property/secondary-structure.d.ts

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

package/lib/mol-model-formats/structure/property/secondary-structure.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -63,7 +63,7 @@ function addHelices(cat, coordinates, map, elements) {
         var element = {
             kind: 'helix',
             flags: type,
-            type_id: conf_type_id.valueKind(i) === 0 /* Present */ ? conf_type_id.value(i) : 'HELIX_P',
+            type_id: conf_type_id.valueKind(i) === 0 /* Present */ ? conf_type_id.value(i) : 'helx_p',
             helix_class: pdbx_PDB_helix_class.value(i),
             details: details.valueKind(i) === 0 /* Present */ ? details.value(i) : void 0
         };

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

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

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

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

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

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

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

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

package/lib/mol-plugin/behavior/dynamic/volume-streaming/model.d.ts

@@ -9,12 +9,12 @@ import { Volume } from '../../../../mol-model/volume';
 import { Structure } from '../../../../mol-model/structure';
 declare const VolumeServerInfo_base: {
     new (data: VolumeServerInfo.Data, props?: {
-        /** Precision data the server can show. */
-        label: string;
+        label: string; /** Precision data the server can show. */
         description?: string | undefined;
     } | undefined): {
         id: import("../../../../mol-util/uuid").UUID;
         type: PluginStateObject.TypeInfo;
+        /** The value are stored in blockSize^3 cubes */
         label: string;
         description?: string | undefined;
         data: VolumeServerInfo.Data;
@@ -23,6 +23,7 @@ declare const VolumeServerInfo_base: {
     is(obj?: import("../../../../mol-state/object").StateObject<any, import("../../../../mol-state/object").StateObject.Type<any>> | undefined): obj is {
         id: import("../../../../mol-util/uuid").UUID;
         type: PluginStateObject.TypeInfo;
+        /** The value are stored in blockSize^3 cubes */
         label: string;
         description?: string | undefined;
         data: VolumeServerInfo.Data;

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

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

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

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

package/lib/mol-plugin/version.js

@@ -1,2 +1,2 @@
-export var PLUGIN_VERSION = '3.6.0';
-export var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : 1648977502711);
+export var PLUGIN_VERSION = '3.8.0';
+export var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : 1651360161830);

package/lib/mol-plugin-state/helpers/root-structure.js

@@ -13,6 +13,7 @@ import { Vec3 } from '../../mol-math/linear-algebra';
 import { Symmetry } from '../../mol-model/structure/model/properties/symmetry';
 import { PluginStateObject as SO } from '../objects';
 import { ModelSymmetry } from '../../mol-model-formats/structure/property/symmetry';
+import { assertUnreachable } from '../../mol-util/type-helpers';
 var CommonStructureParams = {
     dynamicBonds: PD.Optional(PD.Boolean(false, { description: 'Ensure bonds are recalculated upon model changes. Also enables calculation of inter-unit bonds in water molecules and ions.' })),
 };
@@ -195,7 +196,8 @@ export var RootStructureDefinition;
                 if (params.name === 'symmetry-assembly') {
                     return [2 /*return*/, buildSymmetryAssembly(ctx, model, params.params.generators, symmetry, props)];
                 }
-                throw new Error("Unknown represetation type: ".concat(params.name));
+                assertUnreachable(params);
+                return [2 /*return*/];
             });
         });
     }

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

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

package/lib/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/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/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/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/mol-plugin-ui/hooks/use-behavior.js

@@ -1,15 +1,15 @@
 /**
- * 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>
  */
-import { useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line
-export function useBehavior(s) {
-    var _a = useState({}), next = _a[1];
-    var current = useRef();
+import React from 'react';
+import { skip } from 'rxjs';
+function useBehaviorLegacy(s) {
+    var _a = React.useState({}), next = _a[1];
+    var current = React.useRef();
     current.current = s === null || s === void 0 ? void 0 : s.value;
-    useEffect(function () {
+    React.useEffect(function () {
         if (!s) {
             return;
         }
@@ -21,3 +21,16 @@ export function useBehavior(s) {
     }, [s]);
     return s === null || s === void 0 ? void 0 : s.value;
 }
+function useBehaviorReact18(s) {
+    return React.useSyncExternalStore(React.useCallback(function (callback) {
+        var sub = s === null || s === void 0 ? void 0 : s.pipe(skip(1)).subscribe(callback);
+        return function () { return sub === null || sub === void 0 ? void 0 : sub.unsubscribe(); };
+    }, [s]), React.useCallback(function () { return s === null || s === void 0 ? void 0 : s.value; }, [s]));
+}
+var _useBehavior = !!React.useSyncExternalStore
+    ? useBehaviorReact18
+    : useBehaviorLegacy;
+// eslint-disable-next-line
+export function useBehavior(s) {
+    return _useBehavior(s);
+}

package/lib/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/mol-plugin-ui/plugin.js

@@ -134,11 +134,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 _jsx("div", __assign({ className: 'msp-plugin' }, { children: _jsxs("div", __assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [_jsxs("div", __assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || 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) && _jsx(OverlayTaskProgress, {}), _jsx(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] })) }));
+        return _jsx("div", __assign({ className: 'msp-plugin' }, { children: _jsxs("div", __assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [_jsxs("div", __assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || 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) && _jsx(OverlayTaskProgress, {}), !((_e = this.plugin.spec.components) === null || _e === void 0 ? void 0 : _e.disableDragOverlay) && _jsx(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] })) }));
     };
     return Layout;
 }(PluginUIComponent));

package/lib/mol-plugin-ui/skin/base/base.scss

@@ -1,33 +1,33 @@
-
-@mixin user-select($select) {
-  -webkit-user-select: $select;
-     -moz-user-select: $select;
-      -ms-user-select: $select; // IE10+
-          user-select: $select;
-}
-
-.msp-plugin {
-    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.42857143;
-
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-
-    @import 'variables';
-
-    @import "normalize";
-
-    @import 'layout';
-    @import 'ui';
-    @import 'logo';
-
-    .msp-plugin-content {
-        color: $font-color;
-    }
-
-    background: $default-background;
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+.msp-plugin {
+    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    @import 'variables';
+
+    @import "normalize";
+
+    @import 'layout';
+    @import 'ui';
+    @import 'logo';
+
+    .msp-plugin-content {
+        color: $font-color;
+    }
+
+    background: $default-background;
 }