pdbe-molstar 3.4.0 → 3.5.0

package/lib/superposition-focus-representation.d.ts

@@ -4,7 +4,7 @@ import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
 declare const SuperpositionFocusRepresentationParams: (plugin: PluginContext) => {
     expandRadius: PD.Numeric;
     surroundingsParams: PD.Group<PD.Normalize<{
-        [x: string]: any;
+        [x: string]: /*elided*/ any;
     }>>;
 };
 type SuperpositionFocusRepresentationProps = PD.ValuesFor<ReturnType<typeof SuperpositionFocusRepresentationParams>>;
@@ -12,5 +12,5 @@ export declare enum SuperpositionFocusRepresentationTags {
     SurrSel = "superposition-focus-surr-sel",
     SurrRepr = "superposition-focus-surr-repr"
 }
-export declare const SuperpositionFocusRepresentation: import("molstar/lib/mol-state/transformer").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, SuperpositionFocusRepresentationProps>;
+export declare const SuperpositionFocusRepresentation: import("molstar/lib/mol-state").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, SuperpositionFocusRepresentationProps>;
 export {};

package/lib/superposition-focus-representation.js

@@ -25,7 +25,7 @@ var SuperpositionFocusRepresentationTags;
 (function (SuperpositionFocusRepresentationTags) {
     SuperpositionFocusRepresentationTags["SurrSel"] = "superposition-focus-surr-sel";
     SuperpositionFocusRepresentationTags["SurrRepr"] = "superposition-focus-surr-repr";
-})(SuperpositionFocusRepresentationTags = exports.SuperpositionFocusRepresentationTags || (exports.SuperpositionFocusRepresentationTags = {}));
+})(SuperpositionFocusRepresentationTags || (exports.SuperpositionFocusRepresentationTags = SuperpositionFocusRepresentationTags = {}));
 const TagSet = new Set([SuperpositionFocusRepresentationTags.SurrSel, SuperpositionFocusRepresentationTags.SurrRepr]);
 class SuperpositionFocusRepresentationBehavior extends behavior_1.PluginBehavior.WithSubscribers {
     get surrLabel() { return `[Focus] Surroundings (${this.params.expandRadius} Å)`; }

package/lib/superposition-sifts-mapping.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.alignAndSuperposeWithSIFTSMapping = void 0;
+exports.alignAndSuperposeWithSIFTSMapping = alignAndSuperposeWithSIFTSMapping;
 const int_1 = require("molstar/lib/mol-data/int");
 const minimize_rmsd_1 = require("molstar/lib/mol-math/linear-algebra/3d/minimize-rmsd");
 const element_1 = require("molstar/lib/mol-model/structure/structure/element");
@@ -37,7 +37,6 @@ function alignAndSuperposeWithSIFTSMapping(structures, options) {
     }
     return { entries, zeroOverlapPairs, failedPairs };
 }
-exports.alignAndSuperposeWithSIFTSMapping = alignAndSuperposeWithSIFTSMapping;
 function getPositionTables(index, pivot, other, N) {
     const xs = minimize_rmsd_1.MinimizeRmsd.Positions.empty(N);
     const ys = minimize_rmsd_1.MinimizeRmsd.Positions.empty(N);

package/lib/superposition.d.ts

@@ -12,4 +12,4 @@ export declare function loadAfStructure(plugin: PluginContext): Promise<string |
 export declare function superposeAf(plugin: PluginContext, traceOnly: boolean, segmentIndex?: number): Promise<true | undefined>;
 export declare function renderSuperposition(plugin: PluginContext, segmentIndex: number, entryList: ClusterMember[]): Promise<void>;
 /** Apply tranformation to a structure. Only use once per structure, combining multiple transformations is not implemented. */
-export declare function transform(plugin: PluginContext, s: StateObjectRef<PSO.Molecule.Structure>, matrix: Mat4): Promise<StateObjectSelector<PSO.Molecule.Structure, import("molstar/lib/mol-state/transformer").StateTransformer<import("molstar/lib/mol-state/object").StateObject<any, import("molstar/lib/mol-state/object").StateObject.Type<any>>, import("molstar/lib/mol-state/object").StateObject<any, import("molstar/lib/mol-state/object").StateObject.Type<any>>, any>>>;
+export declare function transform(plugin: PluginContext, s: StateObjectRef<PSO.Molecule.Structure>, matrix: Mat4): Promise<StateObjectSelector<PSO.Molecule.Structure, import("molstar/lib/mol-state").StateTransformer<import("molstar/lib/mol-state").StateObject<any, import("molstar/lib/mol-state").StateObject.Type<any>>, import("molstar/lib/mol-state").StateObject<any, import("molstar/lib/mol-state").StateObject.Type<any>>, any>>>;

package/lib/superposition.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transform = exports.renderSuperposition = exports.superposeAf = exports.loadAfStructure = exports.initSuperposition = exports.getNextColor = exports.SuperpositionColorPalette = void 0;
+exports.SuperpositionColorPalette = void 0;
+exports.getNextColor = getNextColor;
+exports.initSuperposition = initSuperposition;
+exports.loadAfStructure = loadAfStructure;
+exports.superposeAf = superposeAf;
+exports.renderSuperposition = renderSuperposition;
+exports.transform = transform;
 const tslib_1 = require("tslib");
 const linear_algebra_1 = require("molstar/lib/mol-math/linear-algebra");
 const structure_1 = require("molstar/lib/mol-model/structure");
@@ -28,10 +34,9 @@ function getNextColor(plugin, segmentIndex) {
     spState.colorCounters[segmentIndex] = (spState.colorCounters[segmentIndex] + 1) % exports.SuperpositionColorPalette.length;
     return nextColor;
 }
-exports.getNextColor = getNextColor;
 function initSuperposition(plugin, completeSubject) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         let success = false;
         try {
             yield plugin.clear();
@@ -114,7 +119,6 @@ function initSuperposition(plugin, completeSubject) {
         }
     });
 }
-exports.initSuperposition = initSuperposition;
 function createCarbVisLabel(carbLigNamesAndCount) {
     const compList = [];
     for (const carbCompId in carbLigNamesAndCount) {
@@ -144,8 +148,8 @@ function getAfUrls(plugin, accession) {
     });
 }
 function loadAfStructure(plugin) {
-    var _a, _b;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         const customState = (0, plugin_custom_state_1.PluginCustomState)(plugin);
         if (!customState.superpositionState)
             throw new Error('customState.superpositionState has not been initialized');
@@ -169,7 +173,6 @@ function loadAfStructure(plugin) {
         return false;
     });
 }
-exports.loadAfStructure = loadAfStructure;
 function superposeAf(plugin, traceOnly, segmentIndex) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const customState = (0, plugin_custom_state_1.PluginCustomState)(plugin);
@@ -243,10 +246,9 @@ function superposeAf(plugin, traceOnly, segmentIndex) {
         return true;
     });
 }
-exports.superposeAf = superposeAf;
 function renderSuperposition(plugin, segmentIndex, entryList) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         const customState = (0, plugin_custom_state_1.PluginCustomState)(plugin);
         const superpositionParams = customState.initParams.superpositionParams;
         let busyFlagOn = false;
@@ -256,8 +258,8 @@ function renderSuperposition(plugin, segmentIndex, entryList) {
         }
         // Load Coordinates and render respresentations
         return plugin.dataTransaction(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _b, e_1, _c, _d;
-            var _e;
+            var _a, e_1, _b, _c;
+            var _d;
             if (!customState.initParams)
                 throw new Error('customState.initParams has not been initialized');
             if (!customState.superpositionState)
@@ -336,35 +338,30 @@ function renderSuperposition(plugin, segmentIndex, entryList) {
                     // const interactingHets = [];
                     if (hets && hets.length > 0) {
                         try {
-                            for (var _f = true, hets_1 = (e_1 = void 0, tslib_1.__asyncValues(hets)), hets_1_1; hets_1_1 = yield hets_1.next(), _b = hets_1_1.done, !_b;) {
-                                _d = hets_1_1.value;
-                                _f = false;
-                                try {
-                                    const het = _d;
-                                    const ligand = builder_1.MolScriptBuilder.struct.generator.atomGroups({
-                                        'chain-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.auth_asym_id(), s.auth_asym_id]),
-                                        'residue-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.label_comp_id(), het]),
-                                        'group-by': builder_1.MolScriptBuilder.core.str.concat([builder_1.MolScriptBuilder.struct.atomProperty.core.operatorName(), builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.residueKey()]),
-                                    });
-                                    const labelTagParams = { label: `${het}`, tags: [`superposition-ligand-sel`] };
-                                    const hetColor = (0, helpers_1.normalizeColor)(superpositionParams.ligandColor, DefaultLigandColor);
-                                    const ligandExp = yield plugin.builders.structure.tryCreateComponentFromExpression(strInstance, ligand, `${het}-${segmentIndex}`, labelTagParams);
-                                    if (ligandExp) {
-                                        yield plugin.builders.structure.representation.addRepresentation(ligandExp, { type: 'ball-and-stick', color: 'uniform', colorParams: { value: hetColor } }, { tag: `superposition-ligand-visual` });
-                                        spState.refMaps[ligandExp.ref] = `${s.pdb_id}_${s.struct_asym_id}`;
-                                        invalidStruct = false;
-                                        // interactingHets.push(het);
-                                    }
-                                }
-                                finally {
-                                    _f = true;
+                            for (var _e = true, hets_1 = (e_1 = void 0, tslib_1.__asyncValues(hets)), hets_1_1; hets_1_1 = yield hets_1.next(), _a = hets_1_1.done, !_a; _e = true) {
+                                _c = hets_1_1.value;
+                                _e = false;
+                                const het = _c;
+                                const ligand = builder_1.MolScriptBuilder.struct.generator.atomGroups({
+                                    'chain-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.auth_asym_id(), s.auth_asym_id]),
+                                    'residue-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.label_comp_id(), het]),
+                                    'group-by': builder_1.MolScriptBuilder.core.str.concat([builder_1.MolScriptBuilder.struct.atomProperty.core.operatorName(), builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.residueKey()]),
+                                });
+                                const labelTagParams = { label: `${het}`, tags: [`superposition-ligand-sel`] };
+                                const hetColor = (0, helpers_1.normalizeColor)(superpositionParams.ligandColor, DefaultLigandColor);
+                                const ligandExp = yield plugin.builders.structure.tryCreateComponentFromExpression(strInstance, ligand, `${het}-${segmentIndex}`, labelTagParams);
+                                if (ligandExp) {
+                                    yield plugin.builders.structure.representation.addRepresentation(ligandExp, { type: 'ball-and-stick', color: 'uniform', colorParams: { value: hetColor } }, { tag: `superposition-ligand-visual` });
+                                    spState.refMaps[ligandExp.ref] = `${s.pdb_id}_${s.struct_asym_id}`;
+                                    invalidStruct = false;
+                                    // interactingHets.push(het);
                                 }
                             }
                         }
                         catch (e_1_1) { e_1 = { error: e_1_1 }; }
                         finally {
                             try {
-                                if (!_f && !_b && (_c = hets_1.return)) yield _c.call(hets_1);
+                                if (!_e && !_a && (_b = hets_1.return)) yield _b.call(hets_1);
                             }
                             finally { if (e_1) throw e_1.error; }
                         }
@@ -450,15 +447,14 @@ function renderSuperposition(plugin, segmentIndex, entryList) {
             }
             if (busyFlagOn) {
                 busyFlagOn = false;
-                (_e = customState.events) === null || _e === void 0 ? void 0 : _e.isBusy.next(false);
+                (_d = customState.events) === null || _d === void 0 ? void 0 : _d.isBusy.next(false);
             }
         }));
     });
 }
-exports.renderSuperposition = renderSuperposition;
 function getLigandNamesFromModelData(plugin, state, modelRef) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         const cell = state.select(modelRef)[0];
         if (!cell || !cell.obj)
             return undefined;
@@ -502,7 +498,6 @@ function transform(plugin, s, matrix) {
         .insert(transforms_1.StateTransforms.Model.TransformStructureConformation, { transform: { name: 'matrix', params: { data: matrix, transpose: false } } });
     return plugin.runTask(plugin.state.data.updateTree(b));
 }
-exports.transform = transform;
 function afTransform(plugin, s, matrix, coordinateSystem) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const r = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, s);
@@ -526,8 +521,8 @@ function afTransform(plugin, s, matrix, coordinateSystem) {
     });
 }
 function getMatrixData(plugin) {
-    var _a, _b, _c;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
         const customState = (0, plugin_custom_state_1.PluginCustomState)(plugin);
         if (!customState.initParams)
             throw new Error('customState.initParams has not been initialized');
@@ -551,8 +546,8 @@ function getMatrixData(plugin) {
 }
 /** Download data about segment clustering and save in plugin custom state */
 function getSegmentData(plugin) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         const customState = (0, plugin_custom_state_1.PluginCustomState)(plugin);
         if (!customState.initParams)
             throw new Error('customState.initParams has not been initialized');

package/lib/ui/alphafold-superposition.js

@@ -69,7 +69,7 @@ class AlphafoldPaeControls extends base_1.CollapsableControls {
         if (!superpositionState || !superpositionState.alphafold)
             return null;
         const errorScale = [0, 5, 10, 15, 20, 25, 30];
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row', style: { height: 'auto', textAlign: 'center', justifyContent: 'center', padding: '15px 0', position: 'relative', fontSize: '12px' } }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: this.axisBoxRef, className: 'pae-axis-box', style: { position: 'absolute', width: '100%', height: '100%' } }), (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { transform: 'rotate(270deg)', position: 'absolute', transformOrigin: '0 0', left: '10px', top: '165px', fontWeight: 500 } }, { children: "Aligned residue" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row', style: { height: 'auto', flexDirection: 'column' } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: { width: '200px', height: '200px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', position: 'relative' } }, { children: (0, jsx_runtime_1.jsx)("img", { style: { width: '100%', height: '100%', position: 'absolute', left: 0, top: 0 }, src: `${superpositionState.alphafold.apiData.pae}`, alt: "PAE" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { textAlign: 'center', paddingLeft: '30px', marginBottom: '20px', fontWeight: 500 } }, { children: "Scored residue" })), (0, jsx_runtime_1.jsx)("img", { style: { width: '200px', height: '10px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', transform: 'rotate(180deg)' }, src: 'https://alphafold.ebi.ac.uk/assets/img/horizontal_colorbar.png', alt: "PAE Scale" }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ style: { listStyleType: 'none', fontWeight: 500, margin: 0, display: 'inline-block', position: 'absolute', top: '292px', marginLeft: '24px' } }, { children: errorScale.map((errValue) => (0, jsx_runtime_1.jsx)("li", Object.assign({ style: { float: 'left', marginRight: '18px' } }, { children: errValue }), errValue)) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { textAlign: 'center', paddingLeft: '20px', fontWeight: 500 } }, { children: "Expected position error (\u00C5ngstr\u00F6ms)" }))] }))] }));
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { height: 'auto', textAlign: 'center', justifyContent: 'center', padding: '15px 0', position: 'relative', fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { ref: this.axisBoxRef, className: 'pae-axis-box', style: { position: 'absolute', width: '100%', height: '100%' } }), (0, jsx_runtime_1.jsx)("span", { style: { transform: 'rotate(270deg)', position: 'absolute', transformOrigin: '0 0', left: '10px', top: '165px', fontWeight: 500 }, children: "Aligned residue" }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { height: 'auto', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '200px', height: '200px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', position: 'relative' }, children: (0, jsx_runtime_1.jsx)("img", { style: { width: '100%', height: '100%', position: 'absolute', left: 0, top: 0 }, src: `${superpositionState.alphafold.apiData.pae}`, alt: "PAE" }) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', paddingLeft: '30px', marginBottom: '20px', fontWeight: 500 }, children: "Scored residue" }), (0, jsx_runtime_1.jsx)("img", { style: { width: '200px', height: '10px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', transform: 'rotate(180deg)' }, src: 'https://alphafold.ebi.ac.uk/assets/img/horizontal_colorbar.png', alt: "PAE Scale" }), (0, jsx_runtime_1.jsx)("ul", { style: { listStyleType: 'none', fontWeight: 500, margin: 0, display: 'inline-block', position: 'absolute', top: '292px', marginLeft: '24px' }, children: errorScale.map((errValue) => (0, jsx_runtime_1.jsx)("li", { style: { float: 'left', marginRight: '18px' }, children: errValue }, errValue)) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', paddingLeft: '20px', fontWeight: 500 }, children: "Expected position error (\u00C5ngstr\u00F6ms)" })] })] });
     }
 }
 exports.AlphafoldPaeControls = AlphafoldPaeControls;
@@ -96,10 +96,10 @@ class AlphafoldSuperpositionControls extends base_1.CollapsableControls {
             throw new Error('customState.superpositionState has not been initialized');
         const { activeSegment } = spData;
         const { rmsds } = spData.alphafold;
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-control-offset' }, { children: [(rmsds.length === 0 || !rmsds[activeSegment - 1]) && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-flex-row', style: { padding: '5px 0 0 10px' } }, { children: (0, jsx_runtime_1.jsx)("strong", { children: "No overlap found!" }) })), rmsds[activeSegment - 1] && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' } }, { children: (0, jsx_runtime_1.jsx)("strong", { children: "Entry" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { padding: '5px 0 0 5px' } }, { children: (0, jsx_runtime_1.jsx)("strong", { children: "RMSD (\u212B)" }) }))] })), rmsds[activeSegment - 1] && rmsds[activeSegment - 1].map((d) => {
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-offset', children: [(rmsds.length === 0 || !rmsds[activeSegment - 1]) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-flex-row', style: { padding: '5px 0 0 10px' }, children: (0, jsx_runtime_1.jsx)("strong", { children: "No overlap found!" }) }), rmsds[activeSegment - 1] && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' }, children: (0, jsx_runtime_1.jsx)("strong", { children: "Entry" }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '5px 0 0 5px' }, children: (0, jsx_runtime_1.jsx)("strong", { children: "RMSD (\u212B)" }) })] }), rmsds[activeSegment - 1] && rmsds[activeSegment - 1].map((d) => {
                     const details = d.split(':');
-                    return details[1] !== '-' ? (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-control-row-label', style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' } }, { children: details[0] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { padding: '5px 0 0 5px' } }, { children: details[1] }))] }), d) : null;
-                })] }));
+                    return details[1] !== '-' ? (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-label', style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' }, children: details[0] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '5px 0 0 5px' }, children: details[1] })] }, d) : null;
+                })] });
     }
     renderControls() {
         const superpositionState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).superpositionState;
@@ -148,10 +148,10 @@ class AfSuperpositionControls extends base_1.PurePluginUIComponent {
         return (0, plugin_custom_state_1.PluginCustomState)(this.plugin);
     }
     superposeByDbMapping() {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.SuperposeChainsSvg, title: 'Superpose AlphaFold structure using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px', textAlign: 'left' }, disabled: this.state.isBusy }, { children: "Load AlphaFold structure" })) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.SuperposeChainsSvg, title: 'Superpose AlphaFold structure using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px', textAlign: 'left' }, disabled: this.state.isBusy, children: "Load AlphaFold structure" }) });
     }
     render() {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: { backgroundColor: '#dce54e', fontWeight: 500, padding: '5px 12px' } }, { children: "New Feature!" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-help-text', style: { margin: '2px 0' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_2.InfoIconSvg, inline: true }), "Load and superpose AlphaFold structure against representative chains."] })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row' }, { children: [this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.AlphafoldSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) }))] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: '#dce54e', fontWeight: 500, padding: '5px 12px' }, children: "New Feature!" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-help-text', style: { margin: '2px 0' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-help-description', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_2.InfoIconSvg, inline: true }), "Load and superpose AlphaFold structure against representative chains."] }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] }), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.AlphafoldSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) })] });
     }
 }
 exports.AfSuperpositionControls = AfSuperpositionControls;

package/lib/ui/annotation-controls.d.ts

@@ -28,7 +28,7 @@ export declare class AnnotationsComponentControls extends PurePluginUIComponent<
     initOptionParams: () => void;
     getStructure: () => StateObject<Structure, StateObject.Type<any>> | undefined;
     toggleCollapsed: () => void;
-    applyAnnotation: (type: 'validation' | 'domains', visibleState: boolean, params?: StructureQualityReportColorThemeProps | DomainAnnotationsColorThemeProps) => void;
+    applyAnnotation: (type: "validation" | "domains", visibleState: boolean, params?: StructureQualityReportColorThemeProps | DomainAnnotationsColorThemeProps) => void;
     toggleAnnotation: (type: AnnotationType) => void;
     updateValidationParams: (values: StructureQualityReportColorThemeProps) => void;
     updateDomainParams: (values?: DomainAnnotationsColorThemeProps) => void;

package/lib/ui/annotation-controls.js

@@ -166,10 +166,10 @@ class AnnotationsComponentControls extends base_1.PurePluginUIComponent {
             : 'msp-transform-wrapper';
         const validationDataReady = (_a = this.getStructure()) === null || _a === void 0 ? void 0 : _a.data.model.customProperties.has(prop_1.StructureQualityReportProvider.descriptor);
         const domainDataReady = (_b = this.getStructure()) === null || _b === void 0 ? void 0 : _b.data.model.customProperties.has(prop_2.DomainAnnotationsProvider.descriptor);
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapClass }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ icon: brand ? undefined : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? `msp-transform-header-brand msp-transform-header-brand-${brand.accent}` : undefined, title: `Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}` }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: brand === null || brand === void 0 ? void 0 : brand.svg, inline: true }), "Annotations", (0, jsx_runtime_1.jsx)("small", Object.assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }))] })) })), !this.state.isCollapsed && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.state.validationParams &&
+        return (0, jsx_runtime_1.jsxs)("div", { className: wrapClass, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-transform-header', children: (0, jsx_runtime_1.jsxs)(common_1.Button, { icon: brand ? undefined : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? `msp-transform-header-brand msp-transform-header-brand-${brand.accent}` : undefined, title: `Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: brand === null || brand === void 0 ? void 0 : brand.svg, inline: true }), "Annotations", (0, jsx_runtime_1.jsx)("small", { style: { margin: '0 6px' }, children: this.state.isCollapsed ? '' : this.state.description })] }) }), !this.state.isCollapsed && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.state.validationParams &&
                             (0, jsx_runtime_1.jsx)(annotation_row_controls_1.AnnotationRowControls, { title: 'Validation', params: this.state.validationParams.params, values: this.state.validationParams.values, onChangeValues: this.updateValidationParams, applied: this.state.validationApplied, onChangeApplied: () => this.toggleAnnotation('validation'), errorMessage: validationDataReady ? undefined : 'First activate annotation to show options' }), this.state.domainsParams &&
                             (0, jsx_runtime_1.jsx)(annotation_row_controls_1.AnnotationRowControls, { title: 'Domain Annotations', shortTitle: 'Domains', params: this.state.domainsParams.params, values: this.state.domainsParams.values, onChangeValues: this.updateDomainParams, applied: this.state.domainsApplied, onChangeApplied: () => this.toggleAnnotation('domains'), errorMessage: domainDataReady ? undefined : 'First activate annotation to show options' }), this.state.showSymmetryAnnotation &&
-                            (0, jsx_runtime_1.jsx)(symmetry_annotation_controls_1.SymmetryAnnotationControls, {})] })] }));
+                            (0, jsx_runtime_1.jsx)(symmetry_annotation_controls_1.SymmetryAnnotationControls, {})] })] });
     }
 }
 exports.AnnotationsComponentControls = AnnotationsComponentControls;

package/lib/ui/annotation-row-controls.js

@@ -32,12 +32,12 @@ class AnnotationRowControls extends react_1.default.PureComponent {
         var _a;
         if (!this.props.params)
             return null;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ noOverflow: true, className: 'msp-control-button-label', title: this.props.title, style: { textAlign: 'left' } }, { children: (_a = this.props.shortTitle) !== null && _a !== void 0 ? _a : this.props.title })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleApplied(), toggleState: false, svg: !this.isApplied() ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: `Click to ${this.isApplied() ? 'hide' : 'show'} ${this.props.title}`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleOptions(), svg: icons_1.MoreHorizSvg, title: 'Options', toggleState: this.state.optionsExpanded, className: 'msp-form-control', flex: true })] })), this.state.optionsExpanded &&
-                    (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-accent-offset' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-representation-entry' }, { children: this.renderOptions() })) })) }))] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: this.props.title, style: { textAlign: 'left' }, children: (_a = this.props.shortTitle) !== null && _a !== void 0 ? _a : this.props.title }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleApplied(), toggleState: false, svg: !this.isApplied() ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: `Click to ${this.isApplied() ? 'hide' : 'show'} ${this.props.title}`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleOptions(), svg: icons_1.MoreHorizSvg, title: 'Options', toggleState: this.state.optionsExpanded, className: 'msp-form-control', flex: true })] }), this.state.optionsExpanded &&
+                    (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-accent-offset', children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: this.renderOptions() }) }) })] });
     }
     renderOptions() {
         if (this.props.errorMessage) {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-row-text' }, { children: (0, jsx_runtime_1.jsx)("div", { children: this.props.errorMessage }) }));
+            return (0, jsx_runtime_1.jsx)("div", { className: 'msp-row-text', children: (0, jsx_runtime_1.jsx)("div", { children: this.props.errorMessage }) });
         }
         return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.props.params, onChange: this.props.onChange, values: this.props.values, onChangeValues: this.props.onChangeValues, onEnter: this.props.onEnter });
     }

package/lib/ui/custom-controls.js

@@ -11,7 +11,7 @@ class CustomControls extends base_1.PluginUIComponent {
     }
     render() {
         const customControls = Array.from(plugin_custom_state_1.PluginCustomControls.get(this.plugin, this.props.region).entries());
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: customControls.map(([name, Control]) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pdbemolstar-custom-control-${this.props.region}` }, { children: (0, jsx_runtime_1.jsx)(Control, {}) }), name)) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: customControls.map(([name, Control]) => (0, jsx_runtime_1.jsx)("div", { className: `pdbemolstar-custom-control-${this.props.region}`, children: (0, jsx_runtime_1.jsx)(Control, {}) }, name)) });
     }
 }
 exports.CustomControls = CustomControls;

package/lib/ui/export-superposition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsableControls, CollapsableState } from 'molstar/lib/mol-plugin-ui/base';
 export declare class SuperpositionModelExportUI extends CollapsableControls<{}, {}> {
     protected defaultState(): CollapsableState;

package/lib/ui/export-superposition.js

@@ -50,5 +50,5 @@ function SuperpositionExportControls({ plugin }) {
             setExporting(false);
         }
     });
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: Params, values: params, onChangeValues: setParams, isDisabled: isBusy || exporting }), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ onClick: onExport, style: { marginTop: 1 }, disabled: isBusy || hierarchy.structures.length === 0 || exporting, commit: hierarchy.structures.length > 0 ? 'on' : 'off' }, { children: label }))] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: Params, values: params, onChangeValues: setParams, isDisabled: isBusy || exporting }), (0, jsx_runtime_1.jsx)(common_1.Button, { onClick: onExport, style: { marginTop: 1 }, disabled: isBusy || hierarchy.structures.length === 0 || exporting, commit: hierarchy.structures.length > 0 ? 'on' : 'off', children: label })] });
 }

package/lib/ui/icons.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HourglassBottomSvg = exports.ChevronRightSvg = exports.ChevronLeftSvg = exports.TextsmsOutlinedSvg = exports.InfoIconSvg = exports.WavesIconSvg = exports.CollectionsOutlinedSvg = exports.EmptyIconSvg = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function svgIcon(path) {
-    const svg = (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: (0, jsx_runtime_1.jsx)("path", { d: path }) }));
+    const svg = (0, jsx_runtime_1.jsx)("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: (0, jsx_runtime_1.jsx)("path", { d: path }) });
     return function SvgIcon() { return svg; };
 }
 // Source: https://mui.com/material-ui/material-icons/

package/lib/ui/left-panel/core.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { BehaviorSubject, Subject } from 'rxjs';
 /** Specification of one tab in a tabbed panel */

package/lib/ui/left-panel/core.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LeftPanel = exports.VerticalTabbedPanel = void 0;
+exports.VerticalTabbedPanel = VerticalTabbedPanel;
+exports.LeftPanel = LeftPanel;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const base_1 = require("molstar/lib/mol-plugin-ui/base");
@@ -10,7 +11,7 @@ const sleep_1 = require("molstar/lib/mol-util/sleep");
 /** Convert `Icon` to a React functional element. `Icon` can be either React element (class or functional) or a string with icon path (in 24x24 viewBox) */
 function resolveIcon(Icon) {
     if (typeof Icon === 'string') {
-        return function _Icon() { return (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: (0, jsx_runtime_1.jsx)("path", { d: Icon }) })); };
+        return function _Icon() { return (0, jsx_runtime_1.jsx)("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: (0, jsx_runtime_1.jsx)("path", { d: Icon }) }); };
     }
     else {
         return function _Icon() { return (0, jsx_runtime_1.jsx)(Icon, {}); };
@@ -89,12 +90,11 @@ function VerticalTabbedPanel(options) {
                     return null;
                 return (0, jsx_runtime_1.jsx)(common_1.IconButton, { title: tab.title, svg: resolveIcon(tab.icon), toggleState: tab.id === currentTabId, onClick: () => this.toggleTab(tab.id), transparent: true, style: { position: 'relative' }, extraContent: this.state.dirtyTabs.includes(tab.id) ? (0, jsx_runtime_1.jsx)("div", { className: 'msp-left-panel-controls-button-data-dirty' }) : undefined }, tab.id);
             };
-            return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-left-panel-controls-buttons' }, { children: [(_a = options.tabsTop) === null || _a === void 0 ? void 0 : _a.map(iconForTab), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (_b = options.tabsBottom) === null || _b === void 0 ? void 0 : _b.map(iconForTab) }))] })), currentTab &&
-                        (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-scrollable-container' }, { children: [CurrentTabHeader && (0, jsx_runtime_1.jsx)(CurrentTabHeader, {}) || (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: resolveIcon(currentTab.icon), title: currentTab.title }), CurrentTabBody && (0, jsx_runtime_1.jsx)(CurrentTabBody, {})] }))] }));
+            return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-left-panel-controls', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-left-panel-controls-buttons', children: [(_a = options.tabsTop) === null || _a === void 0 ? void 0 : _a.map(iconForTab), (0, jsx_runtime_1.jsx)("div", { className: 'msp-left-panel-controls-buttons-bottom', children: (_b = options.tabsBottom) === null || _b === void 0 ? void 0 : _b.map(iconForTab) })] }), currentTab &&
+                        (0, jsx_runtime_1.jsxs)("div", { className: 'msp-scrollable-container', children: [CurrentTabHeader && (0, jsx_runtime_1.jsx)(CurrentTabHeader, {}) || (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: resolveIcon(currentTab.icon), title: currentTab.title }), CurrentTabBody && (0, jsx_runtime_1.jsx)(CurrentTabBody, {})] })] });
         }
     };
 }
-exports.VerticalTabbedPanel = VerticalTabbedPanel;
 /** Set left panel state in Molstar layout to 'full' (if expanded) or 'collapsed' (if not expanded).
  * Do not change the state if it is 'hidden'. */
 function adjustLeftPanelState(plugin, expanded) {
@@ -117,4 +117,3 @@ function LeftPanel(options) {
             (_c = options.onTabChange) === null || _c === void 0 ? void 0 : _c.call(options, plugin, tab);
         } }));
 }
-exports.LeftPanel = LeftPanel;

package/lib/ui/left-panel/pdbe-left-panel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /** Left panel in core Molstar */
 export declare const DefaultLeftPanelControls: import("react").ComponentClass<{}, any>;
 /** Left panel in PDBe Molstar */

package/lib/ui/left-panel/tabs.d.ts

@@ -48,7 +48,7 @@ export declare const CoreLeftPanelTabs: {
         readonly header: typeof DataTabHeader;
         readonly body: typeof DataTabBody;
         readonly dirtyOn: (plugin: import("molstar/lib/mol-plugin/context").PluginContext) => import("rxjs").Subject<{
-            state: import("molstar/lib/mol-state/state").State;
+            state: import("molstar/lib/mol-state").State;
             inTransaction: boolean;
         }>;
     };

package/lib/ui/left-panel/tabs.js

@@ -62,7 +62,7 @@ class RemoveAllButton extends base_1.PluginUIComponent {
     }
 }
 function HelpSection(props) {
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-simple-help-section' }, { children: props.header }));
+    return (0, jsx_runtime_1.jsx)("div", { className: 'msp-simple-help-section', children: props.header });
 }
 /** Help section about superposition functionality for the left panel */
 class SuperpositionHelpSection extends base_1.PluginUIComponent {
@@ -70,7 +70,7 @@ class SuperpositionHelpSection extends base_1.PluginUIComponent {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
     }
     render() {
-        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Superposition' }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, Object.assign({ header: 'Segment' }, { children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Discrete UniProt sequence range mapped to the structure" }) }) })), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, Object.assign({ header: 'Cluster' }, { children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Structural chains that possess significantly close superposition Q-score" }) }) })), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, Object.assign({ header: 'Representative chain' }, { children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "The best-ranked chain within a cluster chosen based on the model quality, resolution, observed residues ratio and UniProt sequence coverage" }) }) }))] });
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Superposition' }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, { header: 'Segment', children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Discrete UniProt sequence range mapped to the structure" }) }) }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, { header: 'Cluster', children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Structural chains that possess significantly close superposition Q-score" }) }) }), (0, jsx_runtime_1.jsx)(help_1.HelpGroup, { header: 'Representative chain', children: (0, jsx_runtime_1.jsx)(help_1.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "The best-ranked chain within a cluster chosen based on the model quality, resolution, observed residues ratio and UniProt sequence coverage" }) }) })] });
     }
 }
 /** Body of 'help' tab in the left panel (core help + PDBe-specific help) */

package/lib/ui/overlay.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithLoadingOverlay = void 0;
+exports.WithLoadingOverlay = WithLoadingOverlay;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const base_1 = require("molstar/lib/mol-plugin-ui/base");
 const plugin_custom_state_1 = require("../plugin-custom-state");
@@ -23,12 +23,11 @@ function WithLoadingOverlay(MainContent, OverlayContent = PDBeLoadingOverlayBox)
             }
         }
         render() {
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainContent, {}), this.state.showOverlay && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'pdbemolstar-overlay' }, { children: (0, jsx_runtime_1.jsx)(OverlayContent, {}) }))] });
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainContent, {}), this.state.showOverlay && (0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-overlay', children: (0, jsx_runtime_1.jsx)(OverlayContent, {}) })] });
         }
     };
 }
-exports.WithLoadingOverlay = WithLoadingOverlay;
 /** Overlay component with animated PDBe logo */
 function PDBeLoadingOverlayBox() {
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'pdbemolstar-overlay-box' }, { children: (0, jsx_runtime_1.jsxs)("svg", Object.assign({ className: 'pdbe-animated-logo', viewBox: '0 0 300 300' }, { children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '30', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-cross', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 150 100 L 150 200 M 100 150 L 200 150' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 100 150 A 50 50 0 1 1 150 100 L 150 170 L 150 100 L 150 170 L 150 100 L 150 100 A 50 50 0 1 1 200 150 L 130 150 L 200 150 L 130 150 L 200 150 L 200 150 A 50 50 0 1 1 150 200 L 150 130 L 150 200 L 150 130 L 150 200 L 150 200 A 50 50 0 1 1 100 150 L 170 150 L 100 150 L 170 150 L 100 150' })] })) }));
+    return (0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-overlay-box', children: (0, jsx_runtime_1.jsxs)("svg", { className: 'pdbe-animated-logo', viewBox: '0 0 300 300', children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '30', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-cross', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 150 100 L 150 200 M 100 150 L 200 150' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 100 150 A 50 50 0 1 1 150 100 L 150 170 L 150 100 L 150 170 L 150 100 L 150 100 A 50 50 0 1 1 200 150 L 130 150 L 200 150 L 130 150 L 200 150 L 200 150 A 50 50 0 1 1 150 200 L 150 130 L 150 200 L 150 130 L 150 200 L 150 200 A 50 50 0 1 1 100 150 L 170 150 L 100 150 L 170 150 L 100 150' })] }) });
 }

package/lib/ui/pdbe-screenshot-controls.js

@@ -37,8 +37,8 @@ class DownloadScreenshotControls extends base_1.PluginUIComponent {
             }
         });
         this.copyImg = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _c;
-            const src = yield ((_c = this.plugin.helpers.viewportScreenshot) === null || _c === void 0 ? void 0 : _c.getImageDataUri());
+            var _a;
+            const src = yield ((_a = this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.getImageDataUri());
             this.setState({ imageData: src });
         });
         this.open = (e) => {
@@ -58,7 +58,7 @@ class DownloadScreenshotControls extends base_1.PluginUIComponent {
     render() {
         var _a;
         const hasClipboardApi = !!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write);
-        return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-image-preview' }, { children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" })), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ onClick: () => this.setState({ imageData: undefined }), disabled: this.state.isDisabled }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }))] })), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] })), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled })] });
+        return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-image-preview', children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled, children: "Copy" }), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, { onClick: () => this.setState({ imageData: undefined }), disabled: this.state.isDisabled, children: "Clear" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled, children: "Download" })] }), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-row msp-copy-image-wrapper', children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] }), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled })] });
     }
 }
 exports.DownloadScreenshotControls = DownloadScreenshotControls;
@@ -73,5 +73,5 @@ function CropControls({ plugin }) {
     (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop);
     if (!helper)
         return null;
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CropOrginalSvg, title: 'Auto-crop', inline: true, isSelected: cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto, style: { background: 'transparent', float: 'left', width: 'auto', height: '24px', lineHeight: '24px' }, toggle: () => helper.toggleAutocrop(), label: 'Auto-crop ' + ((cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto) ? 'On' : 'Off') }), !(cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto) && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropSvg, title: 'Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: () => helper.autocrop() }), !(cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto) && !helper.isFullFrame && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: () => helper.resetCrop() })] }));
+    return (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', height: '24px', marginTop: '8px' }, children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CropOrginalSvg, title: 'Auto-crop', inline: true, isSelected: cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto, style: { background: 'transparent', float: 'left', width: 'auto', height: '24px', lineHeight: '24px' }, toggle: () => helper.toggleAutocrop(), label: 'Auto-crop ' + ((cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto) ? 'On' : 'Off') }), !(cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto) && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropSvg, title: 'Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: () => helper.autocrop() }), !(cropParams === null || cropParams === void 0 ? void 0 : cropParams.auto) && !helper.isFullFrame && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: () => helper.resetCrop() })] });
 }

package/lib/ui/pdbe-structure-controls.js

@@ -18,7 +18,7 @@ const prop_1 = require("molstar/lib/extensions/assembly-symmetry/prop");
 class PDBeStructureTools extends base_1.PluginUIComponent {
     render() {
         const AssemblySymmetryKey = prop_1.AssemblySymmetryData.Tag.Representation;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}), (0, jsx_runtime_1.jsx)(annotation_controls_1.AnnotationsComponentControls, {}), (0, jsx_runtime_1.jsx)(quick_styles_1.StructureQuickStylesControls, {}), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, { skipKeys: [AssemblySymmetryKey] })] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-section-header', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] }), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}), (0, jsx_runtime_1.jsx)(annotation_controls_1.AnnotationsComponentControls, {}), (0, jsx_runtime_1.jsx)(quick_styles_1.StructureQuickStylesControls, {}), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, { skipKeys: [AssemblySymmetryKey] })] });
     }
 }
 exports.PDBeStructureTools = PDBeStructureTools;
@@ -44,13 +44,13 @@ class CustomStructureControls extends base_1.PluginUIComponent {
 exports.CustomStructureControls = CustomStructureControls;
 class PDBeLigandViewStructureTools extends base_1.PluginUIComponent {
     render() {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-section-header', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] }), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
     }
 }
 exports.PDBeLigandViewStructureTools = PDBeLigandViewStructureTools;
 class PDBeSuperpositionStructureTools extends base_1.PluginUIComponent {
     render() {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(superposition_components_1.SuperpositionComponentControls, {}), (0, jsx_runtime_1.jsx)(alphafold_tranparency_1.AlphafoldTransparencyControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldPaeControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldSuperpositionControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(export_superposition_1.SuperpositionModelExportUI, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-section-header', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] }), (0, jsx_runtime_1.jsx)(superposition_components_1.SuperpositionComponentControls, {}), (0, jsx_runtime_1.jsx)(alphafold_tranparency_1.AlphafoldTransparencyControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldPaeControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldSuperpositionControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(export_superposition_1.SuperpositionModelExportUI, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
     }
 }
 exports.PDBeSuperpositionStructureTools = PDBeSuperpositionStructureTools;

package/lib/ui/pdbe-viewport-controls.js

@@ -27,7 +27,7 @@ class PDBeViewportControls extends viewport_1.ViewportControls {
                 style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' },
             },
         };
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", Object.assign({ className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: `https://pdbe.org/${initParams.moleculeId}` }, { children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), initParams.moleculeId] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { position: 'absolute', top: showPDBeLink ? (27 + 4) : 0, right: 0 } }, { children: super.render() }))] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", { className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: `https://pdbe.org/${initParams.moleculeId}`, children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), initParams.moleculeId] })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: showPDBeLink ? (27 + 4) : 0, right: 0 }, children: super.render() })] });
     }
 }
 exports.PDBeViewportControls = PDBeViewportControls;

package/lib/ui/pdbe-viewport.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultViewport } from 'molstar/lib/mol-plugin-ui/plugin';
 /** A modified copy of DefaultViewport */
 export declare class CustomizableDefaultViewport extends DefaultViewport {

package/lib/ui/pdbe-viewport.js

@@ -15,7 +15,7 @@ class CustomizableDefaultViewport extends plugin_1.DefaultViewport {
         var _a, _b, _c, _d;
         const VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || viewport_1.ViewportControls;
         const SnapshotDescription = ((_d = (_c = this.plugin.spec.components) === null || _c === void 0 ? void 0 : _c.viewport) === null || _d === void 0 ? void 0 : _d.snapshotDescription) || controls_1.ViewportSnapshotDescription;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pdbemolstar-viewport-top-center-controls' }, { children: [(0, jsx_runtime_1.jsx)(custom_controls_1.CustomControls, { region: 'viewport-top-center' }), (0, jsx_runtime_1.jsx)(controls_1.SelectionViewportControls, {})] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { position: 'relative', pointerEvents: 'auto' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.AnimationViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.TrajectoryViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.StateSnapshotViewportControls, {}), (0, jsx_runtime_1.jsx)(custom_controls_1.CustomControls, { region: 'viewport-top-left' }), (0, jsx_runtime_1.jsx)(SnapshotDescription, {})] })) }))] })), (0, jsx_runtime_1.jsx)(VPControls, {}), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {})] }))] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-viewport-top-center-controls', children: [(0, jsx_runtime_1.jsx)(custom_controls_1.CustomControls, { region: 'viewport-top-center' }), (0, jsx_runtime_1.jsx)(controls_1.SelectionViewportControls, {})] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', pointerEvents: 'auto' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-top-left-controls', children: [(0, jsx_runtime_1.jsx)(controls_1.AnimationViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.TrajectoryViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.StateSnapshotViewportControls, {}), (0, jsx_runtime_1.jsx)(custom_controls_1.CustomControls, { region: 'viewport-top-left' }), (0, jsx_runtime_1.jsx)(SnapshotDescription, {})] }) })] }), (0, jsx_runtime_1.jsx)(VPControls, {}), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-highlight-toast-wrapper', children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {})] })] });
     }
 }
 exports.CustomizableDefaultViewport = CustomizableDefaultViewport;