pdbe-molstar 3.4.0 → 3.6.0

package/lib/sifts-mapping.js

@@ -77,5 +77,4 @@ var SIFTSMapping;
         }
         return { dbName, accession, num, residue };
     }
-})(SIFTSMapping || (SIFTSMapping = {}));
-exports.SIFTSMapping = SIFTSMapping;
+})(SIFTSMapping || (exports.SIFTSMapping = SIFTSMapping = {}));

package/lib/sifts-mappings-behaviour.d.ts

@@ -1,5 +1,5 @@
 import { PluginBehavior } from 'molstar/lib/mol-plugin/behavior';
-export declare const PDBeSIFTSMapping: import("molstar/lib/mol-state/transformer").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {
+export declare const PDBeSIFTSMapping: import("molstar/lib/mol-state").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {
     autoAttach: boolean;
     showTooltip: boolean;
 }>;

package/lib/spec-from-html.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initParamsFromHtmlAttributes = void 0;
+exports.initParamsFromHtmlAttributes = initParamsFromHtmlAttributes;
 const spec_1 = require("./spec");
 /** Extract InitParams from attributes of an HTML element */
 function initParamsFromHtmlAttributes(element) {
@@ -10,7 +10,6 @@ function initParamsFromHtmlAttributes(element) {
         console.error('Invalid PDBeMolstarPlugin options:', params);
     return params;
 }
-exports.initParamsFromHtmlAttributes = initParamsFromHtmlAttributes;
 /** Actions for loading individual HTML attributes into InitParams object */
 const InitParamsLoadingActions = {
     // DATA

package/lib/spec.d.ts

@@ -123,7 +123,7 @@ export interface InitParams {
     /** Hide all control panels by default (can be shown by the Toggle Controls Panel button (wrench icon)) */
     hideControls: boolean;
     /** Hide individual icon buttons in the top-right corner of the canvas */
-    hideCanvasControls: ('expand' | 'controlToggle' | 'controlInfo' | 'selection' | 'animation' | 'trajectory')[];
+    hideCanvasControls: ('screenshot' | 'expand' | 'controlToggle' | 'controlInfo' | 'selection' | 'animation' | 'trajectory')[];
     /** Display Sequence panel */
     sequencePanel: boolean;
     /** Display Left control panel */

package/lib/spec.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateInitParams = exports.DefaultParams = exports.Encoding = exports.resolveVisualStyleSpec = exports.VisualStyle = exports.ComponentType = exports.Lighting = exports.Preset = exports.DefaultPluginUISpec = exports.DefaultPluginSpec = void 0;
+exports.DefaultParams = exports.Encoding = exports.VisualStyle = exports.ComponentType = exports.Lighting = exports.Preset = exports.DefaultPluginUISpec = exports.DefaultPluginSpec = void 0;
+exports.resolveVisualStyleSpec = resolveVisualStyleSpec;
+exports.validateInitParams = validateInitParams;
 const actions_1 = require("molstar/lib/mol-plugin-state/actions");
 const volume_1 = require("molstar/lib/mol-plugin-ui/custom/volume");
 const behavior_1 = require("molstar/lib/mol-plugin/behavior");
@@ -56,7 +58,6 @@ function resolveVisualStyleSpec(spec) {
     }
     return Object.fromEntries(Object.entries(spec).map(([type, compSpec]) => [type, resolveComponentVisualStyleSpec(compSpec)]));
 }
-exports.resolveVisualStyleSpec = resolveVisualStyleSpec;
 function resolveComponentVisualStyleSpec(spec) {
     if (spec === undefined)
         return undefined;
@@ -125,4 +126,3 @@ function validateInitParams(params) {
     }
     return undefined;
 }
-exports.validateInitParams = validateInitParams;

package/lib/styles/pdbe-molstar/_index.scss

@@ -3,9 +3,9 @@
 // Color constants must be imported before importing this file
 // (from molstar/lib/mol-plugin-ui/skin/*.scss or molstar/lib/mol-plugin-ui/skin/colors/*.scss)
 
-.msp-plugin {
-    @import 'molstar/lib/mol-plugin-ui/skin/base/variables.scss';
+@use 'molstar/lib/mol-plugin-ui/skin/base/_vars.scss' as vars;
 
+.msp-plugin {
     ::-webkit-scrollbar-thumb {
         background-color: #80808080;
         border-radius: 10px;
@@ -22,7 +22,7 @@
     }
 
     .msp-viewport-controls-panel .msp-viewport-controls-panel-controls {
-        max-height: calc(100cqh - 41px - 24px - 10px); // 100cqh = viewport container, 41px = control buttons offset, 24px = header, 10px = space below
+        max-height: calc(100cqh - 46px - 24px - 10px); // 100cqh = viewport container, 46px = control buttons offset, 24px = header, 10px = space below
     }
 
     // Avoid wraping headers in left panel help
@@ -43,7 +43,7 @@
         float: left;
 
         &:not(:empty) {
-            margin-right: $control-spacing;
+            margin-right: vars.$control-spacing;
         }
     }
 
@@ -52,11 +52,11 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding-inline: calc(54px + 2 * $control-spacing); // 54px = PDBe logo box
+        padding-inline: calc(54px + 2 * vars.$control-spacing); // 54px = PDBe logo box
         pointer-events: none;
 
         >* {
-            margin-top: $control-spacing;
+            margin-top: vars.$control-spacing;
             pointer-events: auto;
             max-width: 100%;
         }
@@ -145,7 +145,7 @@
     .pdbemolstar-state-gallery-title-box {
         width: 500px;
         max-width: 100%;
-        background-color: $msp-form-control-background;
+        background-color: vars.$msp-form-control-background;
         display: flex;
         flex-direction: row;
         justify-content: space-between;

package/lib/styles/pdbe-molstar-dark.scss

@@ -1,2 +1,2 @@
-@import 'molstar/lib/mol-plugin-ui/skin/dark';
-@import './pdbe-molstar/_index';
+@use 'molstar/lib/mol-plugin-ui/skin/dark';
+@use './pdbe-molstar/_index';

package/lib/styles/pdbe-molstar-light.scss

@@ -1,2 +1,2 @@
-@import 'molstar/lib/mol-plugin-ui/skin/light';
-@import './pdbe-molstar/_index';
+@use 'molstar/lib/mol-plugin-ui/skin/light';
+@use './pdbe-molstar/_index';

package/lib/subscribe-events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.subscribeToComponentEvents = void 0;
+exports.subscribeToComponentEvents = subscribeToComponentEvents;
 function subscribeToComponentEvents(wrapperCtx) {
     document.addEventListener('PDB.interactions.click', function (e) {
         if (typeof e.detail !== 'undefined') {
@@ -191,4 +191,3 @@ function subscribeToComponentEvents(wrapperCtx) {
         wrapperCtx.visual.clearHighlight();
     });
 }
-exports.subscribeToComponentEvents = subscribeToComponentEvents;

package/lib/superposition-export.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.superpositionExportHierarchy = void 0;
+exports.superpositionExportHierarchy = superpositionExportHierarchy;
 const tslib_1 = require("tslib");
 const utf8_1 = require("molstar/lib/mol-io/common/utf8");
 const structure_1 = require("molstar/lib/mol-model/structure");
@@ -21,7 +21,6 @@ function superpositionExportHierarchy(plugin, options) {
         }
     });
 }
-exports.superpositionExportHierarchy = superpositionExportHierarchy;
 function _superpositionExportHierarchy(plugin, options) {
     return mol_task_1.Task.create('Export', (ctx) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c, _d, _e, _f, _g, _h;

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;
         }>;
     };