pdbe-molstar 3.2.1-beta.1 → 3.2.1-beta.3

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

@@ -1,4 +1,4 @@
-import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { PurePluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
 export declare function TextsmsOutlinedSvg(): import("react/jsx-runtime").JSX.Element;
 type AnnotationType = 'validation' | 'domains' | 'symmetry';
 interface AnnotationsComponentControlsState {

package/lib/ui/annotation-controls.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnnotationsComponentControls = exports.TextsmsOutlinedSvg = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var behavior_1 = require("Molstar/extensions/pdbe/structure-quality-report/behavior");
-var color_1 = require("Molstar/extensions/pdbe/structure-quality-report/color");
-var hierarchy_1 = require("Molstar/mol-plugin-state/manager/structure/hierarchy");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var mol_state_1 = require("Molstar/mol-state");
+var behavior_1 = require("molstar/lib/extensions/pdbe/structure-quality-report/behavior");
+var color_1 = require("molstar/lib/extensions/pdbe/structure-quality-report/color");
+var hierarchy_1 = require("molstar/lib/mol-plugin-state/manager/structure/hierarchy");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var mol_state_1 = require("molstar/lib/mol-state");
 var behavior_2 = require("../domain-annotations/behavior");
 var color_2 = require("../domain-annotations/color");
 var plugin_custom_state_1 = require("../plugin-custom-state");

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

@@ -1,5 +1,5 @@
-import { ParameterControlsProps } from 'Molstar/mol-plugin-ui/controls/parameters';
-import { ParamDefinition as PD } from 'Molstar/mol-util/param-definition';
+import { ParameterControlsProps } from 'molstar/lib/mol-plugin-ui/controls/parameters';
+import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
 import React from 'react';
 type AnnotationRowControlsProps<P extends PD.Params> = ParameterControlsProps<P> & {
     shortTitle?: string;

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnnotationRowControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
 var react_1 = tslib_1.__importDefault(require("react"));
 /** UI controls for a single annotation source (row) in Annotations section */
 var AnnotationRowControls = /** @class */ (function (_super) {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CollapsableControls, CollapsableState } from 'Molstar/mol-plugin-ui/base';
+import { CollapsableControls, CollapsableState } from 'molstar/lib/mol-plugin-ui/base';
 export declare class SuperpositionModelExportUI extends CollapsableControls<{}, {}> {
     protected defaultState(): CollapsableState;
     protected renderControls(): JSX.Element | null;

package/lib/ui/export-superposition.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperpositionModelExportUI = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
-var param_definition_1 = require("Molstar/mol-util/param-definition");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
+var use_behavior_1 = require("molstar/lib/mol-plugin-ui/hooks/use-behavior");
+var param_definition_1 = require("molstar/lib/mol-util/param-definition");
+var react_1 = tslib_1.__importDefault(require("react"));
 var superposition_export_1 = require("../superposition-export");
 var SuperpositionModelExportUI = /** @class */ (function (_super) {
     tslib_1.__extends(SuperpositionModelExportUI, _super);
@@ -36,8 +36,8 @@ var DefaultParams = param_definition_1.ParamDefinition.getDefaultValues(Params);
 function SuperpositionExportControls(_a) {
     var _this = this;
     var plugin = _a.plugin;
-    var _b = (0, react_1.useState)(DefaultParams), params = _b[0], setParams = _b[1];
-    var _c = (0, react_1.useState)(false), exporting = _c[0], setExporting = _c[1];
+    var _b = react_1.default.useState(DefaultParams), params = _b[0], setParams = _b[1];
+    var _c = react_1.default.useState(false), exporting = _c[0], setExporting = _c[1];
     (0, use_behavior_1.useBehavior)(plugin.managers.structure.hierarchy.behaviors.selection); // triggers UI update
     var isBusy = (0, use_behavior_1.useBehavior)(plugin.behaviors.state.isBusy);
     var hierarchy = plugin.managers.structure.hierarchy.current;

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

@@ -1,17 +1,17 @@
 /// <reference types="react" />
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
 export declare function WavesIconSvg(): import("react/jsx-runtime").JSX.Element;
-type LeftPanelTabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help' | 'segments';
-export declare class LeftPanelControls extends PluginUIComponent<{}, {
-    tab: LeftPanelTabName;
+type PDBeLeftPanelTabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help' | 'segments';
+export declare class PDBeLeftPanelControls extends PluginUIComponent<{}, {
+    tab: PDBeLeftPanelTabName;
 }> {
-    state: {
-        tab: LeftPanelTabName;
+    readonly state: {
+        tab: PDBeLeftPanelTabName;
     };
     componentDidMount(): void;
-    set: (tab: LeftPanelTabName) => void;
+    set: (tab: PDBeLeftPanelTabName) => void;
     tabs: {
-        [K in LeftPanelTabName]: JSX.Element;
+        [K in PDBeLeftPanelTabName]: JSX.Element;
     };
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -1,41 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LeftPanelControls = exports.WavesIconSvg = void 0;
+exports.PDBeLeftPanelControls = exports.WavesIconSvg = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var canvas3d_1 = require("Molstar/mol-canvas3d/canvas3d");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var actions_1 = require("Molstar/mol-plugin-ui/state/actions");
-var snapshots_1 = require("Molstar/mol-plugin-ui/state/snapshots");
-var tree_1 = require("Molstar/mol-plugin-ui/state/tree");
-var help_1 = require("Molstar/mol-plugin-ui/viewport/help");
-var commands_1 = require("Molstar/mol-plugin/commands");
-var mol_state_1 = require("Molstar/mol-state");
+var canvas3d_1 = require("molstar/lib/mol-canvas3d/canvas3d");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
+var actions_1 = require("molstar/lib/mol-plugin-ui/state/actions");
+var snapshots_1 = require("molstar/lib/mol-plugin-ui/state/snapshots");
+var tree_1 = require("molstar/lib/mol-plugin-ui/state/tree");
+var help_1 = require("molstar/lib/mol-plugin-ui/viewport/help");
+var commands_1 = require("molstar/lib/mol-plugin/commands");
+var mol_state_1 = require("molstar/lib/mol-state");
 var plugin_custom_state_1 = require("../plugin-custom-state");
 var segment_tree_1 = require("./segment-tree");
 var _WavesIcon = (0, jsx_runtime_1.jsx)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z" }) }));
 function WavesIconSvg() { return _WavesIcon; }
 exports.WavesIconSvg = WavesIconSvg;
-var LeftPanelControls = /** @class */ (function (_super) {
-    tslib_1.__extends(LeftPanelControls, _super);
-    function LeftPanelControls() {
+var PDBeLeftPanelControls = /** @class */ (function (_super) {
+    tslib_1.__extends(PDBeLeftPanelControls, _super);
+    function PDBeLeftPanelControls() {
         var _this = this;
         var _a;
         _this = _super.apply(this, arguments) || this;
         _this.state = { tab: _this.plugin.behaviors.layout.leftPanelTabName.value };
         _this.set = function (tab) {
             if (_this.state.tab === tab) {
-                _this.setState({ tab: 'none' }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next('none'); });
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
-                return;
-            }
-            _this.setState({ tab: tab }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next(tab); });
-            if (_this.plugin.layout.state.regionState.left !== 'full') {
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
+                tab = 'none'; // clicking on active tab should collapse panel
             }
+            _this.plugin.behaviors.layout.leftPanelTabName.next(tab); // will update state via subscription
         };
         _this.tabs = {
             'none': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
@@ -48,14 +43,18 @@ var LeftPanelControls = /** @class */ (function (_super) {
         };
         return _this;
     }
-    LeftPanelControls.prototype.componentDidMount = function () {
+    PDBeLeftPanelControls.prototype.componentDidMount = function () {
         var _this = this;
         this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, function (tab) {
             if (_this.state.tab !== tab)
                 _this.setState({ tab: tab });
-            if (tab === 'none' && _this.plugin.layout.state.regionState.left !== 'collapsed') {
+            // Collapse panel if no active tab, expand if active tab (don't apply if panel hidden!)
+            if (tab === 'none' && _this.plugin.layout.state.regionState.left === 'full') {
                 commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
             }
+            if (tab !== 'none' && _this.plugin.layout.state.regionState.left === 'collapsed') {
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
+            }
         });
         this.subscribe(this.plugin.state.data.events.changed, function (_a) {
             var state = _a.state;
@@ -65,35 +64,15 @@ var LeftPanelControls = /** @class */ (function (_super) {
                 _this.set('root');
         });
     };
-    LeftPanelControls.prototype.render = function () {
+    PDBeLeftPanelControls.prototype.render = function () {
         var _this = this;
         var tab = this.state.tab;
         var customState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin);
         return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }), customState && customState.initParams && customState.initParams.superposition && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: WavesIconSvg, toggleState: tab === 'segments', transparent: true, onClick: function () { return _this.set('segments'); }, title: 'Superpose segments' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }) }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }))] }));
     };
-    return LeftPanelControls;
+    return PDBeLeftPanelControls;
 }(base_1.PluginUIComponent));
-exports.LeftPanelControls = LeftPanelControls;
-// class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void }, { changed: boolean }> {
-//     state = { changed: false };
-//     get tab() {
-//         return this.plugin.behaviors.layout.leftPanelTabName.value;
-//     }
-//     componentDidMount() {
-//         this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, tab => {
-//             if (this.tab === 'data') this.setState({ changed: false });
-//             else this.forceUpdate();
-//         });
-//         this.subscribe(this.plugin.state.data.events.changed, state => {
-//             if (this.tab !== 'data') this.setState({ changed: true });
-//         });
-//     }
-//     render() {
-//         return <IconButton
-//             svg={AccountTreeOutlinedSvg} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
-//             style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
-//     }
-// }
+exports.PDBeLeftPanelControls = PDBeLeftPanelControls;
 var FullSettings = /** @class */ (function (_super) {
     tslib_1.__extends(FullSettings, _super);
     function FullSettings() {

package/lib/ui/pdbe-screenshot-controls.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
+import React from 'react';
 interface ImageControlsState {
     showPreview: boolean;
     isDisabled: boolean;

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DownloadScreenshotControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var screenshot_1 = require("Molstar/mol-plugin-ui/controls/screenshot");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var commands_1 = require("Molstar/mol-plugin/commands");
-var use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
+var screenshot_1 = require("molstar/lib/mol-plugin-ui/controls/screenshot");
+var use_behavior_1 = require("molstar/lib/mol-plugin-ui/hooks/use-behavior");
+var commands_1 = require("molstar/lib/mol-plugin/commands");
 var DownloadScreenshotControls = /** @class */ (function (_super) {
     tslib_1.__extends(DownloadScreenshotControls, _super);
     function DownloadScreenshotControls() {

package/lib/ui/pdbe-structure-controls.d.ts

@@ -1,4 +1,4 @@
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
 export declare class PDBeStructureTools extends PluginUIComponent {
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -3,19 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDBeSuperpositionStructureTools = exports.PDBeLigandViewStructureTools = exports.CustomStructureControls = exports.PDBeStructureTools = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var components_1 = require("Molstar/mol-plugin-ui/structure/components");
-var measurements_1 = require("Molstar/mol-plugin-ui/structure/measurements");
-var source_1 = require("Molstar/mol-plugin-ui/structure/source");
-var volume_1 = require("Molstar/mol-plugin-ui/structure/volume");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var components_1 = require("molstar/lib/mol-plugin-ui/structure/components");
+var measurements_1 = require("molstar/lib/mol-plugin-ui/structure/measurements");
+var source_1 = require("molstar/lib/mol-plugin-ui/structure/source");
+var volume_1 = require("molstar/lib/mol-plugin-ui/structure/volume");
 var annotation_controls_1 = require("./annotation-controls");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
 var superposition_components_1 = require("./superposition-components");
-var quick_styles_1 = require("Molstar/mol-plugin-ui/structure/quick-styles");
+var quick_styles_1 = require("molstar/lib/mol-plugin-ui/structure/quick-styles");
 var alphafold_superposition_1 = require("./alphafold-superposition");
 var export_superposition_1 = require("./export-superposition");
 var alphafold_tranparency_1 = require("./alphafold-tranparency");
-var prop_1 = require("Molstar/extensions/rcsb/assembly-symmetry/prop");
+var prop_1 = require("molstar/lib/extensions/rcsb/assembly-symmetry/prop");
 var PDBeStructureTools = /** @class */ (function (_super) {
     tslib_1.__extends(PDBeStructureTools, _super);
     function PDBeStructureTools() {

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

@@ -1,4 +1,4 @@
-import { ViewportControls } from 'Molstar/mol-plugin-ui/viewport';
+import { ViewportControls } from 'molstar/lib/mol-plugin-ui/viewport';
 export declare class PDBeViewportControls extends ViewportControls {
     private isBlack;
     render(): import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDBeViewportControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var viewport_1 = require("Molstar/mol-plugin-ui/viewport");
+var viewport_1 = require("molstar/lib/mol-plugin-ui/viewport");
+var names_1 = require("molstar/lib/mol-util/color/names");
+var helpers_1 = require("../helpers");
 var plugin_custom_state_1 = require("../plugin-custom-state");
 var PDBeViewportControls = /** @class */ (function (_super) {
     tslib_1.__extends(PDBeViewportControls, _super);
@@ -13,7 +15,7 @@ var PDBeViewportControls = /** @class */ (function (_super) {
     PDBeViewportControls.prototype.isBlack = function () {
         var _a;
         var bgColor = (_a = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams) === null || _a === void 0 ? void 0 : _a.bgColor;
-        return bgColor !== undefined && bgColor.r === 0 && bgColor.g === 0 && bgColor.b === 0;
+        return bgColor !== undefined && (0, helpers_1.normalizeColor)(bgColor) === names_1.ColorNames.black;
     };
     PDBeViewportControls.prototype.render = function () {
         var initParams = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams;

package/lib/ui/segment-tree.d.ts

@@ -1,7 +1,7 @@
-import { Mat4 } from 'Molstar/mol-math/linear-algebra';
-import { PluginStateObject } from 'Molstar/mol-plugin-state/objects';
-import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-import { StateObjectRef } from 'Molstar/mol-state';
+import { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
+import { PluginStateObject } from 'molstar/lib/mol-plugin-state/objects';
+import { PurePluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
+import { StateObjectRef } from 'molstar/lib/mol-state';
 import { PluginCustomState } from '../plugin-custom-state';
 export declare class SegmentTree extends PurePluginUIComponent<{}, {
     segment?: any;

package/lib/ui/segment-tree.js

@@ -3,18 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SegmentTree = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var transforms_1 = require("Molstar/mol-plugin-state/transforms");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var update_transform_1 = require("Molstar/mol-plugin-ui/state/update-transform");
-var commands_1 = require("Molstar/mol-plugin/commands");
-var builder_1 = require("Molstar/mol-script/language/builder");
-var mol_state_1 = require("Molstar/mol-state");
-var color_1 = require("Molstar/mol-util/color");
-var lists_1 = require("Molstar/mol-util/color/lists");
-var param_definition_1 = require("Molstar/mol-util/param-definition");
+var transforms_1 = require("molstar/lib/mol-plugin-state/transforms");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
+var update_transform_1 = require("molstar/lib/mol-plugin-ui/state/update-transform");
+var commands_1 = require("molstar/lib/mol-plugin/commands");
+var builder_1 = require("molstar/lib/mol-script/language/builder");
+var mol_state_1 = require("molstar/lib/mol-state");
+var color_1 = require("molstar/lib/mol-util/color");
+var param_definition_1 = require("molstar/lib/mol-util/param-definition");
 var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var plugin_custom_state_1 = require("../plugin-custom-state");
@@ -654,32 +653,13 @@ var StructureNode = /** @class */ (function (_super) {
         return mol_state_1.StateSelection.findUniqueTagsInSubtree(tree, this.modelCell.transform.ref, TagSet);
     };
     ;
-    StructureNode.prototype.getRandomColor = function () {
-        var clList = lists_1.ColorLists;
-        var spState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).superpositionState;
-        if (!spState)
-            throw new Error('customState.superpositionState has not been initialized');
-        var palleteIndex = spState.colorState[this.props.segmentIndex].palleteIndex;
-        var colorIndex = spState.colorState[this.props.segmentIndex].colorIndex;
-        if (clList[spState.colorPalette[palleteIndex]].list[colorIndex + 1]) {
-            colorIndex += 1;
-        }
-        else {
-            colorIndex = 0;
-            palleteIndex = spState.colorPalette[palleteIndex + 1] ? palleteIndex + 1 : 0;
-        }
-        var palleteName = spState.colorPalette[palleteIndex];
-        spState.colorState[this.props.segmentIndex].palleteIndex = palleteIndex;
-        spState.colorState[this.props.segmentIndex].colorIndex = colorIndex;
-        return clList[palleteName].list[colorIndex];
-    };
     StructureNode.prototype.addChainRepr = function () {
         return tslib_1.__awaiter(this, void 0, void 0, function () {
             var uniformColor1, strInstance, query, chainSel;
             return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        uniformColor1 = this.getRandomColor();
+                        uniformColor1 = (0, superposition_1.getNextColor)(this.plugin, this.props.segmentIndex);
                         strInstance = this.plugin.state.data.select(this.ref)[0];
                         query = builder_1.MolScriptBuilder.struct.generator.atomGroups({
                             'chain-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.struct.atomProperty.macromolecular.label_asym_id(), this.props.structure.struct_asym_id])

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

@@ -1,4 +1,4 @@
-import { CollapsableControls, CollapsableState } from 'Molstar/mol-plugin-ui/base';
+import { CollapsableControls, CollapsableState } from 'molstar/lib/mol-plugin-ui/base';
 interface StructureComponentControlState extends CollapsableState {
     isDisabled: boolean;
 }

package/lib/ui/superposition-components.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperpositionComponentControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var commands_1 = require("Molstar/mol-plugin/commands");
-var mol_state_1 = require("Molstar/mol-state");
-var param_definition_1 = require("Molstar/mol-util/param-definition");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var operators_1 = require("rxjs/operators");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
+var icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
+var parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
+var commands_1 = require("molstar/lib/mol-plugin/commands");
+var mol_state_1 = require("molstar/lib/mol-state");
+var param_definition_1 = require("molstar/lib/mol-util/param-definition");
 var rxjs_1 = require("rxjs");
+var operators_1 = require("rxjs/operators");
 var plugin_custom_state_1 = require("../plugin-custom-state");
 var SuperpositionComponentControls = /** @class */ (function (_super) {
     tslib_1.__extends(SuperpositionComponentControls, _super);

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

@@ -1,4 +1,4 @@
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
 export declare class SuperpostionViewport extends PluginUIComponent {
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lib/ui/superposition-viewport.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperpostionViewport = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var controls_1 = require("Molstar/mol-plugin-ui/controls");
-var task_1 = require("Molstar/mol-plugin-ui/task");
-var toast_1 = require("Molstar/mol-plugin-ui/toast");
-var viewport_1 = require("Molstar/mol-plugin-ui/viewport");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var controls_1 = require("molstar/lib/mol-plugin-ui/controls");
+var task_1 = require("molstar/lib/mol-plugin-ui/task");
+var toast_1 = require("molstar/lib/mol-plugin-ui/toast");
+var viewport_1 = require("molstar/lib/mol-plugin-ui/viewport");
 var SuperpostionViewport = /** @class */ (function (_super) {
     tslib_1.__extends(SuperpostionViewport, _super);
     function SuperpostionViewport() {

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

@@ -1,9 +1,9 @@
-import { AssemblySymmetryParams, AssemblySymmetryProps } from 'Molstar/extensions/rcsb/assembly-symmetry/prop';
-import { StructureRef } from 'Molstar/mol-plugin-state/manager/structure/hierarchy-state';
-import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-import { PluginContext } from 'Molstar/mol-plugin/context';
-import { UUID } from 'Molstar/mol-util';
-import { ParamDefinition as PD } from 'Molstar/mol-util/param-definition';
+import { AssemblySymmetryParams, AssemblySymmetryProps } from 'molstar/lib/extensions/rcsb/assembly-symmetry/prop';
+import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
+import { PurePluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
+import { PluginContext } from 'molstar/lib/mol-plugin/context';
+import { UUID } from 'molstar/lib/mol-util';
+import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
 type SymmetryParams = {
     /** State of the visibility button */
     on: PD.BooleanParam;

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAssemblySymmetryAnnotationApplicable = exports.SymmetryAnnotationControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var behavior_1 = require("Molstar/extensions/rcsb/assembly-symmetry/behavior");
-var prop_1 = require("Molstar/extensions/rcsb/assembly-symmetry/prop");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var mol_state_1 = require("Molstar/mol-state");
-var mol_task_1 = require("Molstar/mol-task");
-var param_definition_1 = require("Molstar/mol-util/param-definition");
+var behavior_1 = require("molstar/lib/extensions/rcsb/assembly-symmetry/behavior");
+var prop_1 = require("molstar/lib/extensions/rcsb/assembly-symmetry/prop");
+var base_1 = require("molstar/lib/mol-plugin-ui/base");
+var mol_state_1 = require("molstar/lib/mol-state");
+var mol_task_1 = require("molstar/lib/mol-task");
+var param_definition_1 = require("molstar/lib/mol-util/param-definition");
 var annotation_row_controls_1 = require("./annotation-row-controls");
 var DefaultSymmetryControlsState = {
     params: {