molstar 2.3.9 → 3.0.0-dev.10

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

@@ -1,17 +1,18 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 import { __awaiter, __generator, __spreadArray } from "tslib";
 import { QueryContext, StructureSelection, StructureProperties, StructureElement } from '../../mol-model/structure';
-import { NucleicBackboneAtoms, ProteinBackboneAtoms, AminoAcidNamesL, RnaBaseNames, DnaBaseNames, WaterNames } from '../../mol-model/structure/model/types';
+import { NucleicBackboneAtoms, ProteinBackboneAtoms, AminoAcidNamesL, RnaBaseNames, DnaBaseNames, WaterNames, PolymerNames } from '../../mol-model/structure/model/types';
 import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { compile } from '../../mol-script/runtime/query/compiler';
 import { SetUtils } from '../../mol-util/set';
 import { StateTransforms } from '../transforms';
 import { ElementNames } from '../../mol-model/structure/model/properties/atomic/types';
+import { SecondaryStructureProvider } from '../../mol-model-props/computed/secondary-structure';
 export var StructureSelectionCategory;
 (function (StructureSelectionCategory) {
     StructureSelectionCategory["Type"] = "Type";
@@ -223,7 +224,12 @@ var helix = StructureSelectionQuery('Helix', MS.struct.modifier.union([
             MS.core.type.bitflags([2 /* Helix */])
         ])
     })
-]), { category: StructureSelectionCategory.Structure });
+]), {
+    category: StructureSelectionCategory.Structure,
+    ensureCustomProperties: function (ctx, structure) {
+        return SecondaryStructureProvider.attach(ctx, structure);
+    }
+});
 var beta = StructureSelectionQuery('Beta Strand/Sheet', MS.struct.modifier.union([
     MS.struct.generator.atomGroups({
         'entity-test': _proteinEntityTest,
@@ -232,7 +238,12 @@ var beta = StructureSelectionQuery('Beta Strand/Sheet', MS.struct.modifier.union
             MS.core.type.bitflags([4 /* Beta */])
         ])
     })
-]), { category: StructureSelectionCategory.Structure });
+]), {
+    category: StructureSelectionCategory.Structure,
+    ensureCustomProperties: function (ctx, structure) {
+        return SecondaryStructureProvider.attach(ctx, structure);
+    }
+});
 var water = StructureSelectionQuery('Water', MS.struct.modifier.union([
     MS.struct.generator.atomGroups({
         'entity-test': MS.core.rel.eq([MS.ammp('entityType'), 'water'])
@@ -274,33 +285,47 @@ var branchedConnectedOnly = StructureSelectionQuery('Connected to Carbohydrate',
     })
 ]), { category: StructureSelectionCategory.Internal, isHidden: true });
 var ligand = StructureSelectionQuery('Ligand', MS.struct.modifier.union([
-    MS.struct.combinator.merge([
-        MS.struct.modifier.union([
-            MS.struct.generator.atomGroups({
-                'entity-test': MS.core.logic.and([
-                    MS.core.logic.or([
-                        MS.core.rel.eq([MS.ammp('entityType'), 'non-polymer']),
-                        MS.core.rel.neq([MS.ammp('entityPrdId'), ''])
-                    ]),
-                    MS.core.logic.not([MS.core.str.match([
-                            MS.re('(oligosaccharide|lipid|ion)', 'i'),
-                            MS.ammp('entitySubtype')
-                        ])])
+    MS.struct.modifier.exceptBy({
+        0: MS.struct.modifier.union([
+            MS.struct.combinator.merge([
+                MS.struct.modifier.union([
+                    MS.struct.generator.atomGroups({
+                        'entity-test': MS.core.logic.and([
+                            MS.core.logic.or([
+                                MS.core.rel.eq([MS.ammp('entityType'), 'non-polymer']),
+                                MS.core.rel.neq([MS.ammp('entityPrdId'), ''])
+                            ]),
+                            MS.core.logic.not([MS.core.str.match([
+                                    MS.re('(oligosaccharide|lipid|ion)', 'i'),
+                                    MS.ammp('entitySubtype')
+                                ])])
+                        ]),
+                        'chain-test': MS.core.rel.eq([MS.ammp('objectPrimitive'), 'atomistic']),
+                        'residue-test': MS.core.logic.not([
+                            MS.core.str.match([MS.re('saccharide', 'i'), MS.ammp('chemCompType')])
+                        ])
+                    })
                 ]),
-                'chain-test': MS.core.rel.eq([MS.ammp('objectPrimitive'), 'atomistic']),
-                'residue-test': MS.core.logic.not([
-                    MS.core.str.match([MS.re('saccharide', 'i'), MS.ammp('chemCompType')])
+                MS.struct.modifier.union([
+                    MS.struct.generator.atomGroups({
+                        'entity-test': MS.core.rel.eq([MS.ammp('entityType'), 'polymer']),
+                        'chain-test': MS.core.rel.eq([MS.ammp('objectPrimitive'), 'atomistic']),
+                        'residue-test': _nonPolymerResidueTest
+                    })
                 ])
-            })
+            ]),
         ]),
-        MS.struct.modifier.union([
+        by: MS.struct.modifier.union([
             MS.struct.generator.atomGroups({
                 'entity-test': MS.core.rel.eq([MS.ammp('entityType'), 'polymer']),
                 'chain-test': MS.core.rel.eq([MS.ammp('objectPrimitive'), 'atomistic']),
-                'residue-test': _nonPolymerResidueTest
+                'residue-test': MS.core.set.has([
+                    MS.set.apply(MS, SetUtils.toArray(PolymerNames)),
+                    MS.ammp('label_comp_id')
+                ])
             })
         ])
-    ]),
+    })
 ]), { category: StructureSelectionCategory.Type });
 // don't include branched entities as they have their own link representation
 var ligandPlusConnected = StructureSelectionQuery('Ligand with Connected', MS.struct.modifier.union([

package/lib/mol-plugin-state/helpers/structure-substance.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+import { Structure, StructureElement } from '../../mol-model/structure';
+import { PluginContext } from '../../mol-plugin/context';
+import { StructureComponentRef } from '../manager/structure/hierarchy-state';
+import { EmptyLoci } from '../../mol-model/loci';
+import { Material } from '../../mol-util/material';
+export declare function setStructureSubstance(plugin: PluginContext, components: StructureComponentRef[], material: Material | undefined, lociGetter: (structure: Structure) => Promise<StructureElement.Loci | EmptyLoci>, types?: string[]): Promise<void>;
+export declare function clearStructureSubstance(plugin: PluginContext, components: StructureComponentRef[], types?: string[]): Promise<void>;

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

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+import { __awaiter, __generator, __spreadArray } from "tslib";
+import { StructureElement } from '../../mol-model/structure';
+import { StateTransforms } from '../../mol-plugin-state/transforms';
+import { StateSelection } from '../../mol-state';
+import { Substance } from '../../mol-theme/substance';
+import { isEmptyLoci, Loci } from '../../mol-model/loci';
+import { Material } from '../../mol-util/material';
+var SubstanceManagerTag = 'substance-controls';
+export function setStructureSubstance(plugin, components, material, lociGetter, types) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, eachRepr(plugin, components, function (update, repr, substanceCell) { return __awaiter(_this, void 0, void 0, function () {
+                        var structure, loci, layer, bundleLayers, filtered, filtered;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (types && types.length > 0 && !types.includes(repr.params.values.type.name))
+                                        return [2 /*return*/];
+                                    structure = repr.obj.data.sourceData;
+                                    return [4 /*yield*/, lociGetter(structure.root)];
+                                case 1:
+                                    loci = _a.sent();
+                                    if (Loci.isEmpty(loci) || isEmptyLoci(loci))
+                                        return [2 /*return*/];
+                                    layer = {
+                                        bundle: StructureElement.Bundle.fromLoci(loci),
+                                        material: material !== null && material !== void 0 ? material : Material(),
+                                        clear: !material
+                                    };
+                                    if (substanceCell) {
+                                        bundleLayers = __spreadArray(__spreadArray([], substanceCell.params.values.layers, true), [layer], false);
+                                        filtered = getFilteredBundle(bundleLayers, structure);
+                                        update.to(substanceCell).update(Substance.toBundle(filtered));
+                                    }
+                                    else {
+                                        filtered = getFilteredBundle([layer], structure);
+                                        update.to(repr.transform.ref)
+                                            .apply(StateTransforms.Representation.SubstanceStructureRepresentation3DFromBundle, Substance.toBundle(filtered), { tags: SubstanceManagerTag });
+                                    }
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+export function clearStructureSubstance(plugin, components, types) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, eachRepr(plugin, components, function (update, repr, substanceCell) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            if (types && types.length > 0 && !types.includes(repr.params.values.type.name))
+                                return [2 /*return*/];
+                            if (substanceCell) {
+                                update.delete(substanceCell.transform.ref);
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function eachRepr(plugin, components, callback) {
+    return __awaiter(this, void 0, void 0, function () {
+        var state, update, _i, components_1, c, _a, _b, r, substance;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    state = plugin.state.data;
+                    update = state.build();
+                    _i = 0, components_1 = components;
+                    _c.label = 1;
+                case 1:
+                    if (!(_i < components_1.length)) return [3 /*break*/, 6];
+                    c = components_1[_i];
+                    _a = 0, _b = c.representations;
+                    _c.label = 2;
+                case 2:
+                    if (!(_a < _b.length)) return [3 /*break*/, 5];
+                    r = _b[_a];
+                    substance = state.select(StateSelection.Generators.ofTransformer(StateTransforms.Representation.SubstanceStructureRepresentation3DFromBundle, r.cell.transform.ref).withTag(SubstanceManagerTag));
+                    return [4 /*yield*/, callback(update, r.cell, substance[0])];
+                case 3:
+                    _c.sent();
+                    _c.label = 4;
+                case 4:
+                    _a++;
+                    return [3 /*break*/, 2];
+                case 5:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 6: return [2 /*return*/, update.commit({ doNotUpdateCurrent: true })];
+            }
+        });
+    });
+}
+/** filter substance layers for given structure */
+function getFilteredBundle(layers, structure) {
+    var substance = Substance.ofBundle(layers, structure.root);
+    var merged = Substance.merge(substance);
+    return Substance.filter(merged, structure);
+}
+//# sourceMappingURL=structure-substance.js.map

package/lib/mol-plugin-state/manager/animation.d.ts

@@ -29,7 +29,7 @@ declare class PluginAnimationManager extends StatefulPluginComponent<PluginAnima
     updateCurrentParams(values: any): void;
     register(animation: PluginStateAnimation): void;
     play<P>(animation: PluginStateAnimation<P>, params: P): Promise<void>;
-    tick(t: number, isSynchronous?: boolean): Promise<void>;
+    tick(t: number, isSynchronous?: boolean, animation?: PluginAnimationManager.AnimationInfo): Promise<void>;
     private isStopped;
     private isApplying;
     start(): Promise<void>;
@@ -43,6 +43,10 @@ declare class PluginAnimationManager extends StatefulPluginComponent<PluginAnima
     constructor(context: PluginContext);
 }
 declare namespace PluginAnimationManager {
+    interface AnimationInfo {
+        currentFrame: number;
+        frameCount: number;
+    }
     interface Current {
         anim: PluginStateAnimation;
         params: PD.Params;

package/lib/mol-plugin-state/manager/animation.js

@@ -113,7 +113,7 @@ var PluginAnimationManager = /** @class */ (function (_super) {
             });
         });
     };
-    PluginAnimationManager.prototype.tick = function (t, isSynchronous) {
+    PluginAnimationManager.prototype.tick = function (t, isSynchronous, animation) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -121,8 +121,8 @@ var PluginAnimationManager = /** @class */ (function (_super) {
                         this.currentTime = t;
                         if (this.isStopped)
                             return [2 /*return*/];
-                        if (!isSynchronous) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.applyFrame()];
+                        if (!(isSynchronous || animation)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.applyFrame(animation)];
                     case 1:
                         _a.sent();
                         return [3 /*break*/, 3];
@@ -221,7 +221,7 @@ var PluginAnimationManager = /** @class */ (function (_super) {
             });
         });
     };
-    PluginAnimationManager.prototype.applyFrame = function () {
+    PluginAnimationManager.prototype.applyFrame = function (animation) {
         return __awaiter(this, void 0, void 0, function () {
             var t, newState;
             return __generator(this, function (_a) {
@@ -230,7 +230,7 @@ var PluginAnimationManager = /** @class */ (function (_super) {
                         t = this.currentTime;
                         if (this._current.startedTime < 0)
                             this._current.startedTime = t;
-                        return [4 /*yield*/, this._current.anim.apply(this._current.state, { lastApplied: this._current.lastTime, current: t - this._current.startedTime }, { params: this._current.paramValues, plugin: this.context })];
+                        return [4 /*yield*/, this._current.anim.apply(this._current.state, { lastApplied: this._current.lastTime, current: t - this._current.startedTime, animation: animation }, { params: this._current.paramValues, plugin: this.context })];
                     case 1:
                         newState = _a.sent();
                         if (newState.kind === 'finished') {

package/lib/mol-plugin-state/manager/interactivity.d.ts

@@ -37,7 +37,7 @@ declare class InteractivityManager extends StatefulPluginComponent<Interactivity
 }
 declare namespace InteractivityManager {
     const Params: {
-        granularity: PD.Select<"residue" | "entity" | "operator" | "model" | "element" | "structure" | "chain" | "elementInstances" | "residueInstances" | "chainInstances">;
+        granularity: PD.Select<"element" | "operator" | "residue" | "entity" | "model" | "structure" | "chain" | "elementInstances" | "residueInstances" | "chainInstances">;
     };
     type Params = typeof Params;
     type Props = PD.Values<Params>;

package/lib/mol-plugin-state/manager/snapshots.js

@@ -314,7 +314,8 @@ var PluginStateSnapshotManager = /** @class */ (function (_super) {
                     case 7: return [3 /*break*/, 9];
                     case 8:
                         e_1 = _d.sent();
-                        this.plugin.log.error("Reading state: ".concat(e_1));
+                        console.error(e_1);
+                        this.plugin.log.error('Error reading state');
                         return [3 /*break*/, 9];
                     case 9: return [2 /*return*/];
                 }

package/lib/mol-plugin-state/manager/structure/component.d.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 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 { PluginContext } from '../../../mol-plugin/context';
 import { StateTransformer } from '../../../mol-state';
@@ -13,6 +14,7 @@ import { StatefulPluginComponent } from '../../component';
 import { StructureSelectionQuery } from '../../helpers/structure-selection-query';
 import { StructureRepresentation3D } from '../../transforms/representation';
 import { StructureHierarchyRef, StructureComponentRef, StructureRef, StructureRepresentationRef } from './hierarchy-state';
+import { Clip } from '../../../mol-util/clip';
 export { StructureComponentManager };
 interface StructureComponentManagerState {
     options: StructureComponentManager.Options;
@@ -57,7 +59,22 @@ declare class StructureComponentManager extends StatefulPluginComponent<Structur
 declare namespace StructureComponentManager {
     const OptionsParams: {
         showHydrogens: PD.BooleanParam;
-        visualQuality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+        visualQuality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
+        materialStyle: PD.Group<PD.Normalize<{
+            metalness: number;
+            roughness: number;
+            bumpiness: number;
+        }>>;
+        clipObjects: PD.Group<PD.Normalize<{
+            variant: Clip.Variant;
+            objects: PD.Normalize<{
+                type: any;
+                invert: any;
+                position: any;
+                rotation: any;
+                scale: any;
+            }>[];
+        }>>;
         interactions: PD.Group<PD.Normalize<{
             providers: PD.Normalize<{
                 ionic: any;
@@ -100,11 +117,17 @@ declare namespace StructureComponentManager {
         selection: PD.Select<StructureSelectionQuery>;
         action: PD.Mapped<PD.NamedParams<PD.Normalize<{
             color: import("../../../mol-util/color").Color;
-        }>, "color"> | PD.NamedParams<PD.Normalize<unknown>, "reset"> | PD.NamedParams<PD.Normalize<{
+        }>, "color"> | PD.NamedParams<PD.Normalize<{
+            material: PD.Normalize<{
+                metalness: number;
+                roughness: number;
+                bumpiness: number;
+            }>;
+        }>, "material"> | PD.NamedParams<PD.Normalize<{
             value: number;
         }>, "transparency"> | PD.NamedParams<PD.Normalize<{
             excludeGroups: ("one" | "two" | "three" | "four" | "five" | "six")[];
-        }>, "clipping">>;
+        }>, "clipping"> | PD.NamedParams<PD.Normalize<unknown>, "resetColor"> | PD.NamedParams<PD.Normalize<unknown>, "resetMaterial">>;
         representations: PD.MultiSelect<string>;
     };
     type ThemeParams = PD.Values<ReturnType<typeof getThemeParams>>;

package/lib/mol-plugin-state/manager/structure/component.js

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 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 { __assign, __awaiter, __extends, __generator, __spreadArray } from "tslib";
 import { VisualQualityOptions } from '../../../mol-geo/geometry/base';
@@ -10,7 +11,7 @@ import { Structure, StructureElement, StructureSelection } from '../../../mol-mo
 import { structureAreEqual, structureAreIntersecting, structureIntersect, structureSubtract, structureUnion } from '../../../mol-model/structure/query/utils/structure-set';
 import { setSubtreeVisibility } from '../../../mol-plugin/behavior/static/state';
 import { Task } from '../../../mol-task';
-import { UUID } from '../../../mol-util';
+import { shallowEqual, UUID } from '../../../mol-util';
 import { ColorNames } from '../../../mol-util/color/names';
 import { objectForEach } from '../../../mol-util/object';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
@@ -23,6 +24,9 @@ import { Clipping } from '../../../mol-theme/clipping';
 import { setStructureClipping } from '../../helpers/structure-clipping';
 import { setStructureTransparency } from '../../helpers/structure-transparency';
 import { StructureFocusRepresentation } from '../../../mol-plugin/behavior/dynamic/selection/structure-focus-representation';
+import { setStructureSubstance } from '../../helpers/structure-substance';
+import { Material } from '../../../mol-util/material';
+import { Clip } from '../../../mol-util/clip';
 export { StructureComponentManager };
 var StructureComponentManager = /** @class */ (function (_super) {
     __extends(StructureComponentManager, _super);
@@ -72,6 +76,8 @@ var StructureComponentManager = /** @class */ (function (_super) {
                                     _a.sent();
                                     return [4 /*yield*/, this.plugin.state.updateBehavior(StructureFocusRepresentation, function (p) {
                                             p.ignoreHydrogens = !options.showHydrogens;
+                                            p.material = options.materialStyle;
+                                            p.clip = options.clipObjects;
                                         })];
                                 case 2:
                                     _a.sent();
@@ -88,17 +94,19 @@ var StructureComponentManager = /** @class */ (function (_super) {
         });
     };
     StructureComponentManager.prototype.updateReprParams = function (update, component) {
-        var _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality;
+        var _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality, material = _a.materialStyle, clip = _a.clipObjects;
         var ignoreHydrogens = !showHydrogens;
         for (var _i = 0, _b = component.representations; _i < _b.length; _i++) {
             var r = _b[_i];
             if (r.cell.transform.transformer !== StructureRepresentation3D)
                 continue;
             var params = r.cell.transform.params;
-            if (!!params.type.params.ignoreHydrogens !== ignoreHydrogens || params.type.params.quality !== quality) {
+            if (!!params.type.params.ignoreHydrogens !== ignoreHydrogens || params.type.params.quality !== quality || !shallowEqual(params.type.params.material, material) || !PD.areEqual(Clip.Params, params.type.params.clip, clip)) {
                 update.to(r.cell).update(function (old) {
                     old.type.params.ignoreHydrogens = ignoreHydrogens;
                     old.type.params.quality = quality;
+                    old.type.params.material = material;
+                    old.type.params.clip = clip;
                 });
             }
         }
@@ -370,9 +378,9 @@ var StructureComponentManager = /** @class */ (function (_super) {
         var _this = this;
         if (components.length === 0)
             return;
-        var _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality;
+        var _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality, material = _a.materialStyle, clip = _a.clipObjects;
         var ignoreHydrogens = !showHydrogens;
-        var typeParams = { ignoreHydrogens: ignoreHydrogens, quality: quality };
+        var typeParams = { ignoreHydrogens: ignoreHydrogens, quality: quality, material: material, clip: clip };
         return this.plugin.dataTransaction(function () { return __awaiter(_this, void 0, void 0, function () {
             var _i, components_9, component;
             return __generator(this, function (_a) {
@@ -433,16 +441,16 @@ var StructureComponentManager = /** @class */ (function (_super) {
             var _this = this;
             return __generator(this, function (_a) {
                 return [2 /*return*/, this.plugin.dataTransaction(function () { return __awaiter(_this, void 0, void 0, function () {
-                        var xs, _a, showHydrogens, quality, ignoreHydrogens, typeParams, componentKey, _i, xs_1, s, component;
+                        var xs, _a, showHydrogens, quality, material, clip, ignoreHydrogens, typeParams, componentKey, _i, xs_1, s, component;
                         return __generator(this, function (_b) {
                             switch (_b.label) {
                                 case 0:
                                     xs = structures || this.currentStructures;
                                     if (xs.length === 0)
                                         return [2 /*return*/];
-                                    _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality;
+                                    _a = this.state.options, showHydrogens = _a.showHydrogens, quality = _a.visualQuality, material = _a.materialStyle, clip = _a.clipObjects;
                                     ignoreHydrogens = !showHydrogens;
-                                    typeParams = { ignoreHydrogens: ignoreHydrogens, quality: quality };
+                                    typeParams = { ignoreHydrogens: ignoreHydrogens, quality: quality, material: material, clip: clip };
                                     componentKey = UUID.create22();
                                     _i = 0, xs_1 = xs;
                                     _b.label = 1;
@@ -488,7 +496,7 @@ var StructureComponentManager = /** @class */ (function (_super) {
             var _this = this;
             return __generator(this, function (_a) {
                 return [2 /*return*/, this.plugin.dataTransaction(function (ctx) { return __awaiter(_this, void 0, void 0, function () {
-                        var xs, getLoci, _i, xs_2, s, p, p, p;
+                        var xs, getLoci, _i, xs_2, s, p, p, p, p;
                         var _this = this;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -507,38 +515,51 @@ var StructureComponentManager = /** @class */ (function (_super) {
                                     _i = 0, xs_2 = xs;
                                     _a.label = 1;
                                 case 1:
-                                    if (!(_i < xs_2.length)) return [3 /*break*/, 10];
+                                    if (!(_i < xs_2.length)) return [3 /*break*/, 14];
                                     s = xs_2[_i];
-                                    if (!(params.action.name === 'reset')) return [3 /*break*/, 3];
-                                    return [4 /*yield*/, setStructureOverpaint(this.plugin, s.components, -1, getLoci, params.representations)];
+                                    if (!(params.action.name === 'color')) return [3 /*break*/, 3];
+                                    p = params.action.params;
+                                    return [4 /*yield*/, setStructureOverpaint(this.plugin, s.components, p.color, getLoci, params.representations)];
                                 case 2:
                                     _a.sent();
-                                    return [3 /*break*/, 9];
+                                    return [3 /*break*/, 13];
                                 case 3:
-                                    if (!(params.action.name === 'color')) return [3 /*break*/, 5];
-                                    p = params.action.params;
-                                    return [4 /*yield*/, setStructureOverpaint(this.plugin, s.components, p.color, getLoci, params.representations)];
+                                    if (!(params.action.name === 'resetColor')) return [3 /*break*/, 5];
+                                    return [4 /*yield*/, setStructureOverpaint(this.plugin, s.components, -1, getLoci, params.representations)];
                                 case 4:
                                     _a.sent();
-                                    return [3 /*break*/, 9];
+                                    return [3 /*break*/, 13];
                                 case 5:
                                     if (!(params.action.name === 'transparency')) return [3 /*break*/, 7];
                                     p = params.action.params;
                                     return [4 /*yield*/, setStructureTransparency(this.plugin, s.components, p.value, getLoci, params.representations)];
                                 case 6:
                                     _a.sent();
-                                    return [3 /*break*/, 9];
+                                    return [3 /*break*/, 13];
                                 case 7:
-                                    if (!(params.action.name === 'clipping')) return [3 /*break*/, 9];
+                                    if (!(params.action.name === 'material')) return [3 /*break*/, 9];
                                     p = params.action.params;
-                                    return [4 /*yield*/, setStructureClipping(this.plugin, s.components, Clipping.Groups.fromNames(p.excludeGroups), getLoci, params.representations)];
+                                    return [4 /*yield*/, setStructureSubstance(this.plugin, s.components, p.material, getLoci, params.representations)];
                                 case 8:
                                     _a.sent();
-                                    _a.label = 9;
+                                    return [3 /*break*/, 13];
                                 case 9:
+                                    if (!(params.action.name === 'resetMaterial')) return [3 /*break*/, 11];
+                                    return [4 /*yield*/, setStructureSubstance(this.plugin, s.components, void 0, getLoci, params.representations)];
+                                case 10:
+                                    _a.sent();
+                                    return [3 /*break*/, 13];
+                                case 11:
+                                    if (!(params.action.name === 'clipping')) return [3 /*break*/, 13];
+                                    p = params.action.params;
+                                    return [4 /*yield*/, setStructureClipping(this.plugin, s.components, Clipping.Groups.fromNames(p.excludeGroups), getLoci, params.representations)];
+                                case 12:
+                                    _a.sent();
+                                    _a.label = 13;
+                                case 13:
                                     _i++;
                                     return [3 /*break*/, 1];
-                                case 10: return [2 /*return*/];
+                                case 14: return [2 /*return*/];
                             }
                         });
                     }); }, { canUndo: 'Apply Theme' })];
@@ -604,6 +625,8 @@ var StructureComponentManager = /** @class */ (function (_super) {
     StructureComponentManager.OptionsParams = {
         showHydrogens: PD.Boolean(true, { description: 'Toggle display of hydrogen atoms in representations' }),
         visualQuality: PD.Select('auto', VisualQualityOptions, { description: 'Control the visual/rendering quality of representations' }),
+        materialStyle: Material.getParam(),
+        clipObjects: PD.Group(Clip.Params),
         interactions: PD.Group(InteractionsProvider.defaultParams, { label: 'Non-covalent Interactions' }),
     };
     function getAddParams(plugin, params) {
@@ -627,10 +650,14 @@ var StructureComponentManager = /** @class */ (function (_super) {
                 color: PD.Group({
                     color: PD.Color(ColorNames.blue, { isExpanded: true }),
                 }, { isFlat: true }),
-                reset: PD.EmptyGroup({ label: 'Reset Color' }),
+                resetColor: PD.EmptyGroup({ label: 'Reset Color' }),
                 transparency: PD.Group({
                     value: PD.Numeric(0.5, { min: 0, max: 1, step: 0.01 }),
                 }, { isFlat: true }),
+                material: PD.Group({
+                    material: Material.getParam({ isFlat: true }),
+                }, { isFlat: true }),
+                resetMaterial: PD.EmptyGroup({ label: 'Reset Material' }),
                 clipping: PD.Group({
                     excludeGroups: PD.MultiSelect([], PD.objectToOptions(Clipping.Groups.Names)),
                 }, { isFlat: true }),

package/lib/mol-plugin-state/manager/structure/selection.js

@@ -247,7 +247,9 @@ var StructureSelectionManager = /** @class */ (function (_super) {
         var cell = this.plugin.helpers.substructureParent.get(obj.data, true);
         if (!cell)
             return;
-        ref = cell.transform.ref;
+        // only need to update the root
+        if (ref !== cell.transform.ref)
+            return;
         if (!this.entries.has(ref))
             return;
         // use structure from last decorator as reference

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

@@ -42,7 +42,7 @@ declare const DownloadBlob: StateTransformer<SO.Root, SO.Data.Blob, PD.Normalize
 }>>;
 declare type RawData = typeof RawData;
 declare const RawData: StateTransformer<SO.Root, SO.Data.String | SO.Data.Binary, PD.Normalize<{
-    data: string | Uint8Array | number[] | ArrayBuffer;
+    data: string | ArrayBuffer | Uint8Array | number[];
     label: string | undefined;
 }>>;
 declare type ReadFile = typeof ReadFile;