pdbe-molstar 3.4.0 → 3.6.0

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

@@ -17,9 +17,8 @@ class PDBeViewportControls extends viewport_1.ViewportControls {
         const showPDBeLink = (initParams === null || initParams === void 0 ? void 0 : initParams.moleculeId) && (initParams === null || initParams === void 0 ? void 0 : initParams.pdbeLink) && !(initParams === null || initParams === void 0 ? void 0 : initParams.superposition);
         const pdbeLinkColor = this.isBlack() ? '#fff' : '#555';
         const pdbeLink = {
-            parentStyle: { width: 'auto' },
-            bgStyle: { position: 'absolute', height: '27px', width: '54px', marginLeft: '-33px' },
-            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '3px 3px 3px 18px' },
+            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '6px', paddingRight: '3px', paddingLeft: '18px' },
+            bgStyle: { position: 'absolute', height: '32px', width: '54px', marginLeft: '-33px' },
             style: { display: 'inline-block', fontSize: '14px', color: pdbeLinkColor, borderBottom: 'none', cursor: 'pointer', textDecoration: 'none', position: 'absolute', right: '5px' },
             pdbeImg: {
                 src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png',
@@ -27,7 +26,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 ? (32 + 4) : 0, right: 0 }, children: super.render() })] });
     }
 }
 exports.PDBeViewportControls = PDBeViewportControls;

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

@@ -1,7 +1,10 @@
-/// <reference types="react" />
 import { DefaultViewport } from 'molstar/lib/mol-plugin-ui/plugin';
+import { ComponentClass } from 'react';
 /** A modified copy of DefaultViewport */
 export declare class CustomizableDefaultViewport extends DefaultViewport {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export declare const PDBeViewport: import("react").ComponentClass<{}, any>;
+/** Version of `PDBeViewport` to use as part of other components. Does not expand to fullscreen individually. */
+export declare const PDBeViewport_NoFullscreen: ComponentClass<{}, any>;
+/** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
+export declare const PDBeViewport: ComponentClass<{}, any>;

package/lib/ui/pdbe-viewport.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PDBeViewport = exports.CustomizableDefaultViewport = void 0;
+exports.PDBeViewport = exports.PDBeViewport_NoFullscreen = exports.CustomizableDefaultViewport = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("molstar/lib/mol-plugin-ui/base");
 const controls_1 = require("molstar/lib/mol-plugin-ui/controls");
 const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
 const task_1 = require("molstar/lib/mol-plugin-ui/task");
@@ -15,8 +16,28 @@ 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;
-exports.PDBeViewport = (0, overlay_1.WithLoadingOverlay)(CustomizableDefaultViewport);
+/** Return a React component with MainContent, expanded to whole browser window whenever `this.plugin.layout.state.isExpanded === true`. */
+function Fullscreenable(MainContent) {
+    return class _Fullscreenable extends base_1.PurePluginUIComponent {
+        constructor() {
+            super(...arguments);
+            this.state = { fullscreen: this.plugin.layout.state.isExpanded };
+        }
+        componentDidMount() {
+            this.subscribe(this.plugin.layout.events.updated, () => {
+                this.setState({ fullscreen: this.plugin.layout.state.isExpanded });
+            });
+        }
+        render() {
+            return (0, jsx_runtime_1.jsxs)("div", { className: this.state.fullscreen ? 'msp-layout-expanded msp-viewport-expanded' : undefined, children: [(0, jsx_runtime_1.jsx)(MainContent, {}), ";"] });
+        }
+    };
+}
+/** Version of `PDBeViewport` to use as part of other components. Does not expand to fullscreen individually. */
+exports.PDBeViewport_NoFullscreen = (0, overlay_1.WithLoadingOverlay)(CustomizableDefaultViewport);
+/** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
+exports.PDBeViewport = Fullscreenable(exports.PDBeViewport_NoFullscreen);

package/lib/ui/segment-tree.js

@@ -60,13 +60,13 @@ class SegmentTree extends base_1.PurePluginUIComponent {
             updatedParams.value = val;
             this.setState({ segment: updatedParams });
             setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _b, _c;
+                var _a, _b;
                 const updatedSegmentIndex = parseInt(val.segment.split(' ')[0]);
                 customState.superpositionState.activeSegment = updatedSegmentIndex;
                 // Display current segment visible structures
                 yield this.displayStructures(customState.superpositionState.activeSegment - 1);
-                (_b = customState.events) === null || _b === void 0 ? void 0 : _b.isBusy.next(false);
-                (_c = customState.events) === null || _c === void 0 ? void 0 : _c.segmentUpdate.next(true);
+                (_a = customState.events) === null || _a === void 0 ? void 0 : _a.isBusy.next(false);
+                (_b = customState.events) === null || _b === void 0 ? void 0 : _b.segmentUpdate.next(true);
             }), 100);
             return false;
         });
@@ -120,14 +120,14 @@ class SegmentTree extends base_1.PurePluginUIComponent {
             }
         };
         this.displayStructures = (segmentIndex) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _d;
+            var _a;
             const customState = this.customState;
             const spState = customState.superpositionState;
             if (!spState)
                 throw new Error('customState.superpositionState has not been initialized');
             if (spState.visibleRefs[segmentIndex].length === 0) {
                 const loadStrs = [];
-                (_d = spState.segmentData) === null || _d === void 0 ? void 0 : _d[segmentIndex].clusters.forEach(cluster => {
+                (_a = spState.segmentData) === null || _a === void 0 ? void 0 : _a[segmentIndex].clusters.forEach(cluster => {
                     var _a, _b;
                     let entryList = [cluster[0]];
                     if ((_b = (_a = customState.initParams) === null || _a === void 0 ? void 0 : _a.superpositionParams) === null || _b === void 0 ? void 0 : _b.superposeAll) {
@@ -243,10 +243,10 @@ class SegmentTree extends base_1.PurePluginUIComponent {
             if (customState && customState.initParams && customState.initParams.superposition) {
                 sectionHeader = (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: `Structure clusters - ${customState.initParams.moleculeId}` });
                 if (customState.superpositionError) {
-                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { textAlign: 'center' } }, { children: customState.superpositionError }))] });
+                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center' }, children: customState.superpositionError })] });
                 }
                 else if (!customState.superpositionState || !customState.superpositionState.segmentData) {
-                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { textAlign: 'center' } }, { children: "Loading Segment Data!" }))] });
+                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center' }, children: "Loading Segment Data!" })] });
                 }
             }
         }
@@ -307,44 +307,39 @@ class ClusterNode extends base_1.PluginUIComponent {
             const currentState = Object.assign({}, this.state);
             this.setState({ showAll: false, showNone: false });
             setTimeout(() => 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;
                 const loadStrs = [];
                 try {
-                    for (var _f = true, _g = tslib_1.__asyncValues(this.state.cluster), _h; _h = yield _g.next(), _b = _h.done, !_b;) {
-                        _d = _h.value;
-                        _f = false;
-                        try {
-                            const str = _d;
-                            const structStateId = `${str.pdb_id}_${str.struct_asym_id}`;
-                            let structRef = undefined;
-                            if (customState && customState.superpositionState && customState.superpositionState.models[structStateId]) {
-                                structRef = customState.superpositionState.models[structStateId];
-                            }
-                            if (structRef) {
-                                const cell = this.plugin.state.data.cells.get(structRef);
-                                if (cell) {
-                                    const isHidden = cell.state.isHidden ? true : false;
-                                    if ((isHidden && currentState.showAll) || (!isHidden && currentState.showNone)) {
-                                        yield commands_1.PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent, ref: structRef });
-                                        // await PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent!, ref: cell.transform.parent });
-                                    }
+                    for (var _e = true, _f = tslib_1.__asyncValues(this.state.cluster), _g; _g = yield _f.next(), _a = _g.done, !_a; _e = true) {
+                        _c = _g.value;
+                        _e = false;
+                        const str = _c;
+                        const structStateId = `${str.pdb_id}_${str.struct_asym_id}`;
+                        let structRef = undefined;
+                        if (customState && customState.superpositionState && customState.superpositionState.models[structStateId]) {
+                            structRef = customState.superpositionState.models[structStateId];
+                        }
+                        if (structRef) {
+                            const cell = this.plugin.state.data.cells.get(structRef);
+                            if (cell) {
+                                const isHidden = cell.state.isHidden ? true : false;
+                                if ((isHidden && currentState.showAll) || (!isHidden && currentState.showNone)) {
+                                    yield commands_1.PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent, ref: structRef });
+                                    // await PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent!, ref: cell.transform.parent });
                                 }
                             }
-                            else {
-                                if (currentState.showAll)
-                                    loadStrs.push(str);
-                            }
                         }
-                        finally {
-                            _f = true;
+                        else {
+                            if (currentState.showAll)
+                                loadStrs.push(str);
                         }
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (!_f && !_b && (_c = _g.return)) yield _c.call(_g);
+                        if (!_e && !_a && (_b = _f.return)) yield _b.call(_f);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -353,7 +348,7 @@ class ClusterNode extends base_1.PluginUIComponent {
                 if (loadStrs.length > 0) {
                     yield (0, superposition_1.renderSuperposition)(this.plugin, this.props.segmentIndex, loadStrs);
                 }
-                (_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);
             }));
         });
         this.cancelAction = (e) => {
@@ -383,11 +378,11 @@ class ClusterNode extends base_1.PluginUIComponent {
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         const expand = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, flex: '20px', onClick: this.toggleExpanded, transparent: true, disabled: this.state.isBusy, className: 'msp-no-hover-outline' });
         const title = `Segment ${customState.superpositionState.activeSegment} Cluster ${this.props.clusterIndex + 1}`;
-        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ className: `msp-btn-tree-label`, noOverflow: true, title: title, disabled: this.state.isBusy }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Cluster ", this.props.clusterIndex + 1] }), " ", (0, jsx_runtime_1.jsxs)("small", { children: [this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : '', this.props.cluster.length, " chain", this.props.cluster.length > 1 ? 's' : ''] })] }));
-        const selectionControls = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Show all chains` }, { children: "All" })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Hide all chains` }, { children: "None" }))] });
-        const mainRow = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `msp-flex-row msp-tree-row`, style: { marginTop: '10px' } }, { children: [expand, label, this.props.cluster.length > 1 && selectionControls] }));
-        const searchControls = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-mapped-parameter-group', style: { fontSize: '90%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px', marginLeft: '30px' } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'msp-control-row-label' }, { children: "Search PDB ID" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-control-row-ctrl' }, { children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter PDB ID..', disabled: this.state.isBusy, onChange: e => this.inputStream.next(e.target.value), value: this.state.searchText, maxLength: 4 }) }))] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.isBusy || this.state.searchText === '', toggleState: this.state.searchText !== '', title: 'Clear search input' })] }));
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mainRow, (this.state.showAll || this.state.showNone) && (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `msp-control-row msp-transform-header-brand-${this.state.showAll ? 'green' : 'red'}`, style: { display: 'flex', marginLeft: '20px', height: '35px' } }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'msp-control-row-label', style: { flex: '1 1 auto', textAlign: 'left', fontSize: '85%' } }, { children: [this.state.showAll ? 'Display' : 'Hide', " ", this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : 'all ', this.props.cluster.length, " chains"] })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CheckSvg, flex: true, onClick: this.applyAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Apply action` }, { children: "Apply" })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CloseSvg, flex: true, onClick: this.cancelAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Cancel action` }, { children: "Cancel" }))] })) }), (!this.state.isCollapsed && this.props.cluster.length > 5) && searchControls, !this.state.isCollapsed && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-tree-updates-wrapper', style: { maxHeight: (this.props.totalClusters > 1) ? '330px' : '87%', overflowY: 'auto' } }, { children: this.state.cluster.map((s, i) => (0, jsx_runtime_1.jsx)(StructureNode, { segmentIndex: this.props.segmentIndex, structure: s, isRep: i === 0 ? true : false }, `str-${s.pdb_id}${s.struct_asym_id}${i}`)) }))] });
+        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, { className: `msp-btn-tree-label`, noOverflow: true, title: title, disabled: this.state.isBusy, children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Cluster ", this.props.clusterIndex + 1] }), " ", (0, jsx_runtime_1.jsxs)("small", { children: [this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : '', this.props.cluster.length, " chain", this.props.cluster.length > 1 ? 's' : ''] })] });
+        const selectionControls = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Show all chains`, children: "All" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Hide all chains`, children: "None" })] });
+        const mainRow = (0, jsx_runtime_1.jsxs)("div", { className: `msp-flex-row msp-tree-row`, style: { marginTop: '10px' }, children: [expand, label, this.props.cluster.length > 1 && selectionControls] });
+        const searchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px', marginLeft: '30px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search PDB ID" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter PDB ID..', disabled: this.state.isBusy, onChange: e => this.inputStream.next(e.target.value), value: this.state.searchText, maxLength: 4 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.isBusy || this.state.searchText === '', toggleState: this.state.searchText !== '', title: 'Clear search input' })] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mainRow, (this.state.showAll || this.state.showNone) && (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: `msp-control-row msp-transform-header-brand-${this.state.showAll ? 'green' : 'red'}`, style: { display: 'flex', marginLeft: '20px', height: '35px' }, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'msp-control-row-label', style: { flex: '1 1 auto', textAlign: 'left', fontSize: '85%' }, children: [this.state.showAll ? 'Display' : 'Hide', " ", this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : 'all ', this.props.cluster.length, " chains"] }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CheckSvg, flex: true, onClick: this.applyAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Apply action`, children: "Apply" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: this.cancelAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Cancel action`, children: "Cancel" })] }) }), (!this.state.isCollapsed && this.props.cluster.length > 5) && searchControls, !this.state.isCollapsed && (0, jsx_runtime_1.jsx)("div", { className: 'msp-tree-updates-wrapper', style: { maxHeight: (this.props.totalClusters > 1) ? '330px' : '87%', overflowY: 'auto' }, children: this.state.cluster.map((s, i) => (0, jsx_runtime_1.jsx)(StructureNode, { segmentIndex: this.props.segmentIndex, structure: s, isRep: i === 0 ? true : false }, `str-${s.pdb_id}${s.struct_asym_id}${i}`)) })] });
     }
 }
 class StructureNode extends base_1.PluginUIComponent {
@@ -572,7 +567,7 @@ class StructureNode extends base_1.PluginUIComponent {
                 showAddChainBtn = false;
             }
             if (representations.length > 0) {
-                return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-accent-offset', style: { marginLeft: '40px' } }, { children: [representations.length > 0 && representations.map((r, i) => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: [structHierarchy], representation: r }, `${r.cell.transform.ref}-${i}`)), showAddChainBtn && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-control-group-header', style: { marginTop: '1px' } }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ noOverflow: true, className: 'msp-control-button-label', title: `Click to add chain representaion`, onClick: () => this.addChainRepr() }, { children: ["\u00A0\u00A0Add Chain ", this.props.structure.struct_asym_id, " Representation"] })) }))] }));
+                return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-accent-offset', style: { marginLeft: '40px' }, children: [representations.length > 0 && representations.map((r, i) => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: [structHierarchy], representation: r }, `${r.cell.transform.ref}-${i}`)), showAddChainBtn && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-group-header', style: { marginTop: '1px' }, children: (0, jsx_runtime_1.jsxs)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: `Click to add chain representaion`, onClick: () => this.addChainRepr(), children: ["\u00A0\u00A0Add Chain ", this.props.structure.struct_asym_id, " Representation"] }) })] });
             }
         }
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
@@ -637,11 +632,11 @@ class StructureNode extends base_1.PluginUIComponent {
         if (superpositionParams && superpositionParams.ligandView) {
             strTitle = `${this.props.structure.pdb_id} ${this.props.structure.struct_asym_id}`;
         }
-        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ className: `msp-btn-tree-label`, style: { borderLeftColor: this.panelColor }, noOverflow: true, title: strTitle, disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight }, { children: [(0, jsx_runtime_1.jsx)("span", { children: strTitle }), subTitle && (0, jsx_runtime_1.jsx)("small", { children: subTitle })] }));
+        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, { className: `msp-btn-tree-label`, style: { borderLeftColor: this.panelColor }, noOverflow: true, title: strTitle, disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, children: [(0, jsx_runtime_1.jsx)("span", { children: strTitle }), subTitle && (0, jsx_runtime_1.jsx)("small", { children: subTitle })] });
         const expand = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: !this.state.showControls ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, flex: '20px', onClick: this.toggleControls, transparent: true, className: 'msp-no-hover-outline', disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false });
         const visibility = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, small: true, onClick: this.toggleVisible, disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false, title: this.state.isHidden ? `Show chain` : `Hide chain` });
-        const row = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `msp-flex-row msp-tree-row`, style: { marginLeft: !this.state.isHidden ? '10px' : '31px' } }, { children: [!this.state.isHidden && expand, label, visibility] }));
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { marginBottom: '1px' } }, { children: [row, this.state.showControls && this.updates()] }));
+        const row = (0, jsx_runtime_1.jsxs)("div", { className: `msp-flex-row msp-tree-row`, style: { marginLeft: !this.state.isHidden ? '10px' : '31px' }, children: [!this.state.isHidden && expand, label, visibility] });
+        return (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '1px' }, children: [row, this.state.showControls && this.updates()] });
     }
 }
 class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
@@ -677,6 +672,6 @@ class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
         }
         if (((_f = repr.obj) === null || _f === void 0 ? void 0 : _f.data.repr) && ((_g = repr.obj) === null || _g === void 0 ? void 0 : _g.data.repr.label) === 'Custom Selection')
             label = 'Custom Selection';
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-representation-entry' }, { children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, Object.assign({ header: `${label || 'Representation'}`, noOffset: true, headerStyle: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }) })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: this.props.representation.cell.state.isHidden ? `Show representation` : `Hide representation`, small: true, className: 'msp-default-bg', style: { position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none' } })] }));
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-representation-entry', children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: `${label || 'Representation'}`, noOffset: true, headerStyle: { overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }) }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: this.props.representation.cell.state.isHidden ? `Show representation` : `Hide representation`, small: true, className: 'msp-default-bg', style: { position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none' } })] });
     }
 }

package/lib/ui/split-ui/components.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ControlsWrapper, Log } from 'molstar/lib/mol-plugin-ui/plugin';
 import { SequenceView } from 'molstar/lib/mol-plugin-ui/sequence';
 export declare const UIComponents: {
-    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout) */
+    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
     readonly PDBeViewport: import("react").ComponentClass<{}, any>;
     /** Component containing 1D view of the sequences (top panel in default layout) */
     readonly SequenceView: typeof SequenceView;

package/lib/ui/split-ui/components.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIComponents = void 0;
 const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
 const sequence_1 = require("molstar/lib/mol-plugin-ui/sequence");
-const pdbe_viewport_1 = require("../pdbe-viewport");
 const pdbe_left_panel_1 = require("../left-panel/pdbe-left-panel");
+const pdbe_viewport_1 = require("../pdbe-viewport");
 exports.UIComponents = {
-    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout) */
+    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
     PDBeViewport: pdbe_viewport_1.PDBeViewport,
     /** Component containing 1D view of the sequences (top panel in default layout) */
     SequenceView: sequence_1.SequenceView,

package/lib/ui/split-ui/split-ui.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveHTMLElement = exports.createPluginSplitUI = exports.LayoutSpecComponent = void 0;
+exports.LayoutSpecComponent = LayoutSpecComponent;
+exports.createPluginSplitUI = createPluginSplitUI;
+exports.resolveHTMLElement = resolveHTMLElement;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const base_1 = require("molstar/lib/mol-plugin-ui/base");
@@ -11,10 +13,9 @@ const spec_1 = require("../../spec");
 function LayoutSpecComponent(target, component, props) {
     return { target, component, props };
 }
-exports.LayoutSpecComponent = LayoutSpecComponent;
 function createPluginSplitUI(options) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         const { spec, layout, onBeforeUIRender } = options;
         const render = (_a = options.render) !== null && _a !== void 0 ? _a : react18_1.renderReact18;
         const ctx = new context_1.PluginUIContext(spec || (0, spec_1.DefaultPluginUISpec)());
@@ -44,7 +45,6 @@ function createPluginSplitUI(options) {
         return ctx;
     });
 }
-exports.createPluginSplitUI = createPluginSplitUI;
 function resolveHTMLElement(element) {
     if (typeof element === 'string') {
         const result = document.getElementById(element);
@@ -56,7 +56,6 @@ function resolveHTMLElement(element) {
         return element;
     }
 }
-exports.resolveHTMLElement = resolveHTMLElement;
 function PluginPanelWrapper({ plugin, component, props }) {
     const [state, setState] = (0, react_1.useState)({ kind: 'pending' });
     (0, react_1.useEffect)(() => {
@@ -73,7 +72,7 @@ function PluginPanelWrapper({ plugin, component, props }) {
     }, [plugin]);
     if (state.kind !== 'initialized') {
         const message = state.kind === 'error' ? `Initialization error: ${state.message}` : 'Waiting for plugin initialization';
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin-init-error' }, { children: message })) }));
+        return (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin-init-error', children: message }) });
     }
-    return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, Object.assign({ value: plugin }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin-content msp-layout-standard msp-layout-static', style: { position: 'relative', width: '100%', height: '100%' } }, { children: (0, react_1.createElement)(component, props) })) })) }));
+    return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, { value: plugin, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin-content msp-layout-standard msp-layout-static', style: { position: 'relative', width: '100%', height: '100%' }, children: (0, react_1.createElement)(component, props) }) }) });
 }