drugflow-molstar 0.2.1 → 0.2.2

package/lib/ui/alphafold-tranparency.js

@@ -1,65 +1,65 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlphafoldTransparencyControls = 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 icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var param_definition_1 = require("Molstar/mol-util/param-definition");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var alphafold_transparency_1 = require("../alphafold-transparency");
-var TransparencyParams = {
-    score: param_definition_1.ParamDefinition.Numeric(70, { min: 0, max: 100, step: 1 }, { label: 'pLDDT less than', description: 'pLDDT score value in the range of 0 to 100' }),
-    opacity: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0, max: 1, step: 0.01 }, { description: 'Opacity value in the range 0 to 1' })
-};
-var AlphafoldTransparencyControls = /** @class */ (function (_super) {
-    tslib_1.__extends(AlphafoldTransparencyControls, _super);
-    function AlphafoldTransparencyControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.updateTransparency = function (val) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var superpositionState, afStr;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this.setState({ transpareny: val });
-                        superpositionState = this.plugin.customState.superpositionState;
-                        afStr = this.plugin.managers.structure.hierarchy.current.refs.get(superpositionState.alphafold.ref);
-                        return [4 /*yield*/, (0, alphafold_transparency_1.clearStructureTransparency)(this.plugin, afStr.components)];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, (0, alphafold_transparency_1.applyAFTransparency)(this.plugin, afStr, 1 - val.opacity, val.score)];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        return _this;
-    }
-    AlphafoldTransparencyControls.prototype.defaultState = function () {
-        return {
-            isCollapsed: false,
-            header: 'AlphaFold Structure Opacity',
-            brand: { accent: 'gray', svg: icons_1.SuperpositionSvg },
-            isHidden: true,
-            transpareny: {
-                score: 70,
-                opacity: 0.2
-            }
-        };
-    };
-    AlphafoldTransparencyControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (sel) {
-            var superpositionState = _this.plugin.customState.superpositionState;
-            if (superpositionState && superpositionState.alphafold.ref && superpositionState.alphafold.ref !== '') {
-                _this.setState({ isHidden: false });
-            }
-        });
-    };
-    AlphafoldTransparencyControls.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: TransparencyParams, values: this.state.transpareny, onChangeValues: this.updateTransparency }) });
-    };
-    return AlphafoldTransparencyControls;
-}(base_1.CollapsableControls));
-exports.AlphafoldTransparencyControls = AlphafoldTransparencyControls;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlphafoldTransparencyControls = 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 icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var param_definition_1 = require("Molstar/mol-util/param-definition");
+var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var alphafold_transparency_1 = require("../alphafold-transparency");
+var TransparencyParams = {
+    score: param_definition_1.ParamDefinition.Numeric(70, { min: 0, max: 100, step: 1 }, { label: 'pLDDT less than', description: 'pLDDT score value in the range of 0 to 100' }),
+    opacity: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0, max: 1, step: 0.01 }, { description: 'Opacity value in the range 0 to 1' })
+};
+var AlphafoldTransparencyControls = /** @class */ (function (_super) {
+    tslib_1.__extends(AlphafoldTransparencyControls, _super);
+    function AlphafoldTransparencyControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.updateTransparency = function (val) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var superpositionState, afStr;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.setState({ transpareny: val });
+                        superpositionState = this.plugin.customState.superpositionState;
+                        afStr = this.plugin.managers.structure.hierarchy.current.refs.get(superpositionState.alphafold.ref);
+                        return [4 /*yield*/, (0, alphafold_transparency_1.clearStructureTransparency)(this.plugin, afStr.components)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, (0, alphafold_transparency_1.applyAFTransparency)(this.plugin, afStr, 1 - val.opacity, val.score)];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        return _this;
+    }
+    AlphafoldTransparencyControls.prototype.defaultState = function () {
+        return {
+            isCollapsed: false,
+            header: 'AlphaFold Structure Opacity',
+            brand: { accent: 'gray', svg: icons_1.SuperpositionSvg },
+            isHidden: true,
+            transpareny: {
+                score: 70,
+                opacity: 0.2
+            }
+        };
+    };
+    AlphafoldTransparencyControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (sel) {
+            var superpositionState = _this.plugin.customState.superpositionState;
+            if (superpositionState && superpositionState.alphafold.ref && superpositionState.alphafold.ref !== '') {
+                _this.setState({ isHidden: false });
+            }
+        });
+    };
+    AlphafoldTransparencyControls.prototype.renderControls = function () {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: TransparencyParams, values: this.state.transpareny, onChangeValues: this.updateTransparency }) });
+    };
+    return AlphafoldTransparencyControls;
+}(base_1.CollapsableControls));
+exports.AlphafoldTransparencyControls = AlphafoldTransparencyControls;

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

@@ -1,24 +1,24 @@
-/// <reference types="react" />
-import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-export declare function TextsmsOutlinedSvg(): JSX.Element;
-export declare class AnnotationsComponentControls extends PurePluginUIComponent<{}, {
-    isCollapsed: boolean;
-    validationApplied: boolean;
-    domainAtnApplied: boolean;
-    validationParams: any;
-    domainAtnParams: any;
-    validationOptions: any;
-    domainAtnOptions: any;
-    description?: string;
-}> {
-    state: any;
-    componentDidMount(): void;
-    getOptionParams: () => void;
-    toggleCollapsed: () => void;
-    toggleOptions: (type: number) => void;
-    applyAnnotation: (type: number, visibleState: boolean, params?: any) => void;
-    initApplyAnnotation: (type: number) => void;
-    updateValidationParams: (val: any) => void;
-    updateDomainAtnParams: (val: any) => void;
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+export declare function TextsmsOutlinedSvg(): JSX.Element;
+export declare class AnnotationsComponentControls extends PurePluginUIComponent<{}, {
+    isCollapsed: boolean;
+    validationApplied: boolean;
+    domainAtnApplied: boolean;
+    validationParams: any;
+    domainAtnParams: any;
+    validationOptions: any;
+    domainAtnOptions: any;
+    description?: string;
+}> {
+    state: any;
+    componentDidMount(): void;
+    getOptionParams: () => void;
+    toggleCollapsed: () => void;
+    toggleOptions: (type: number) => void;
+    applyAnnotation: (type: number, visibleState: boolean, params?: any) => void;
+    initApplyAnnotation: (type: number) => void;
+    updateValidationParams: (val: any) => void;
+    updateDomainAtnParams: (val: any) => void;
+    render(): JSX.Element;
+}

package/lib/ui/annotation-controls.js

@@ -1,166 +1,166 @@
-"use strict";
-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 common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var color_1 = require("Molstar/extensions/pdbe/structure-quality-report/color");
-var mol_state_1 = require("Molstar/mol-state");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var color_2 = require("../domain-annotations/color");
-var behavior_1 = require("Molstar/extensions/pdbe/structure-quality-report/behavior");
-var behavior_2 = require("../domain-annotations/behavior");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var hierarchy_1 = require("Molstar/mol-plugin-state/manager/structure/hierarchy");
-var _TextsmsOutlined = (0, jsx_runtime_1.jsxs)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 9h2v2H7zM11 9h2v2h-2zM15 9h2v2h-2z" })] })] }));
-function TextsmsOutlinedSvg() { return _TextsmsOutlined; }
-exports.TextsmsOutlinedSvg = TextsmsOutlinedSvg;
-var AnnotationsComponentControls = /** @class */ (function (_super) {
-    tslib_1.__extends(AnnotationsComponentControls, _super);
-    function AnnotationsComponentControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            isCollapsed: false,
-            validationApplied: false,
-            domainAtnApplied: false,
-            validationOptions: false,
-            domainAtnOptions: false
-        };
-        _this.getOptionParams = function () {
-            var validationAnnotationCtrl = false;
-            var domainAnnotationCtrl = false;
-            var customState = _this.plugin.customState;
-            if (customState && customState.initParams) {
-                if (customState.initParams.validationAnnotation)
-                    validationAnnotationCtrl = true;
-                if (customState.initParams.domainAnnotation)
-                    domainAnnotationCtrl = true;
-            }
-            if ((validationAnnotationCtrl && !_this.state.validationParams) || (domainAnnotationCtrl && !_this.state.domainAtnParams)) {
-                var groupRef = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'structure-component-static-polymer');
-                if (groupRef) {
-                    var struct = _this.plugin.state.data.select(groupRef)[0].obj;
-                    if (struct) {
-                        var themeDataCtx = { structure: struct.data };
-                        if (validationAnnotationCtrl && !_this.state.validationParams) {
-                            var validationActionsParams = color_1.StructureQualityReportColorThemeProvider.getParams(themeDataCtx);
-                            if (validationActionsParams) {
-                                _this.setState({ validationParams: {
-                                        params: validationActionsParams,
-                                        values: { type: validationActionsParams.type.defaultValue }
-                                    } });
-                            }
-                        }
-                        if (domainAnnotationCtrl && !_this.state.domainAtnParams) {
-                            var domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
-                            if (domainActionsParams) {
-                                _this.setState({ domainAtnParams: {
-                                        params: domainActionsParams,
-                                        values: { type: domainActionsParams.type.defaultValue }
-                                    } });
-                            }
-                        }
-                    }
-                }
-            }
-        };
-        _this.toggleCollapsed = function () {
-            _this.setState({ isCollapsed: !_this.state.isCollapsed });
-        };
-        _this.toggleOptions = function (type) {
-            if (type === 0)
-                _this.setState({ validationOptions: !_this.state.validationOptions });
-            if (type === 1)
-                _this.setState({ domainAtnOptions: !_this.state.domainAtnOptions });
-        };
-        _this.applyAnnotation = function (type, visibleState, params) {
-            // Defaults
-            var themeName = 'polymer-id';
-            var themePropsToAdd = behavior_1.PDBeStructureQualityReport;
-            var themePropsToRemove = _this.state.domainAtnParams ? behavior_2.PDBeDomainAnnotations : void 0;
-            // Set Theme Params
-            if (type === 0) {
-                if (visibleState) {
-                    themeName = 'pdbe-structure-quality-report';
-                }
-                _this.setState({ validationApplied: visibleState });
-                _this.setState({ domainAtnApplied: false });
-            }
-            else {
-                themePropsToAdd = behavior_2.PDBeDomainAnnotations;
-                themePropsToRemove = _this.state.validationParams ? behavior_1.PDBeStructureQualityReport : void 0;
-                if (visibleState)
-                    themeName = 'pdbe-domain-annotations';
-                _this.setState({ domainAtnApplied: visibleState });
-                _this.setState({ validationApplied: false });
-            }
-            // Update Tooltip
-            if (visibleState && themeName !== 'polymer-id') {
-                var addTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToAdd.id).update(themePropsToAdd, function (old) { old.showTooltip = true; });
-                _this.plugin.runTask(_this.plugin.state.behaviors.updateTree(addTooltipUpdate));
-                if (themePropsToRemove) {
-                    var removeTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToRemove.id).update(themePropsToRemove, function (old) { old.showTooltip = false; });
-                    _this.plugin.runTask(_this.plugin.state.behaviors.updateTree(removeTooltipUpdate));
-                }
-            }
-            var polymerGroup;
-            var componentGroups = _this.plugin.managers.structure.hierarchy.currentComponentGroups;
-            componentGroups.forEach(function (compGrp) {
-                if (compGrp[0].key === 'structure-component-static-polymer')
-                    polymerGroup = compGrp;
-            });
-            if (polymerGroup) {
-                _this.plugin.managers.structure.component.updateRepresentationsTheme(polymerGroup, { color: themeName, colorParams: params ? params : void 0 });
-            }
-        };
-        _this.initApplyAnnotation = function (type) {
-            if (type === 0)
-                _this.applyAnnotation(0, !_this.state.validationApplied, _this.state.validationParams.values);
-            if (type === 1)
-                _this.applyAnnotation(1, !_this.state.domainAtnApplied, _this.state.domainAtnParams.values);
-        };
-        _this.updateValidationParams = function (val) {
-            var updatedParams = tslib_1.__assign({}, _this.state.validationParams);
-            updatedParams.values = val;
-            _this.setState({ validationParams: updatedParams });
-            if (_this.state.validationApplied)
-                _this.applyAnnotation(0, _this.state.validationApplied, val);
-        };
-        _this.updateDomainAtnParams = function (val) {
-            var updatedParams = tslib_1.__assign({}, _this.state.domainAtnParams);
-            updatedParams.values = val;
-            _this.setState({ domainAtnParams: updatedParams });
-            if (_this.state.domainAtnApplied)
-                _this.applyAnnotation(1, _this.state.domainAtnApplied, val);
-        };
-        return _this;
-    }
-    AnnotationsComponentControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
-            _this.getOptionParams();
-            _this.forceUpdate();
-        });
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (c) { return _this.setState({
-            description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(_this.plugin)
-        }); });
-    };
-    AnnotationsComponentControls.prototype.render = function () {
-        var _this = this;
-        if (!this.state.validationParams && !this.state.domainAtnParams)
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        var brand = {
-            accent: 'green',
-            svg: TextsmsOutlinedSvg
-        };
-        var wrapClass = this.state.isCollapsed
-            ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
-            : 'msp-transform-wrapper';
-        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: wrapClass }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ icon: brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(brand.accent) : void 0, title: "Click to ".concat(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", tslib_1.__assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }))] })) })), !this.state.isCollapsed && this.state.validationParams &&
-                    (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "Validation Report Annotations.", style: { textAlign: 'left' } }, { children: "Validation Report" })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(0); }, toggleState: false, svg: !this.state.validationApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.validationApplied ? 'Hide' : 'Show', " Validation Report Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(0); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.validationOptions, className: 'msp-form-control', flex: true })] })), !this.state.isCollapsed && this.state.validationParams && this.state.validationOptions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-accent-offset" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.validationParams.params, values: this.state.validationParams.values, onChangeValues: this.updateValidationParams }) })) })) })), !this.state.isCollapsed && this.state.domainAtnParams &&
-                    (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "Domain Annotations.", style: { textAlign: 'left' } }, { children: "Domains" })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(1); }, toggleState: false, svg: !this.state.domainAtnApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.domainAtnApplied ? 'Hide' : 'Show', " Domain Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(1); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.domainAtnOptions, className: 'msp-form-control', flex: true })] })), !this.state.isCollapsed && this.state.domainAtnParams && this.state.domainAtnOptions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-accent-offset" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.domainAtnParams.params, values: this.state.domainAtnParams.values, onChangeValues: this.updateDomainAtnParams }) })) })) }))] }));
-    };
-    return AnnotationsComponentControls;
-}(base_1.PurePluginUIComponent));
-exports.AnnotationsComponentControls = AnnotationsComponentControls;
+"use strict";
+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 common_1 = require("Molstar/mol-plugin-ui/controls/common");
+var base_1 = require("Molstar/mol-plugin-ui/base");
+var color_1 = require("Molstar/extensions/pdbe/structure-quality-report/color");
+var mol_state_1 = require("Molstar/mol-state");
+var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var color_2 = require("../domain-annotations/color");
+var behavior_1 = require("Molstar/extensions/pdbe/structure-quality-report/behavior");
+var behavior_2 = require("../domain-annotations/behavior");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var hierarchy_1 = require("Molstar/mol-plugin-state/manager/structure/hierarchy");
+var _TextsmsOutlined = (0, jsx_runtime_1.jsxs)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 9h2v2H7zM11 9h2v2h-2zM15 9h2v2h-2z" })] })] }));
+function TextsmsOutlinedSvg() { return _TextsmsOutlined; }
+exports.TextsmsOutlinedSvg = TextsmsOutlinedSvg;
+var AnnotationsComponentControls = /** @class */ (function (_super) {
+    tslib_1.__extends(AnnotationsComponentControls, _super);
+    function AnnotationsComponentControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isCollapsed: false,
+            validationApplied: false,
+            domainAtnApplied: false,
+            validationOptions: false,
+            domainAtnOptions: false
+        };
+        _this.getOptionParams = function () {
+            var validationAnnotationCtrl = false;
+            var domainAnnotationCtrl = false;
+            var customState = _this.plugin.customState;
+            if (customState && customState.initParams) {
+                if (customState.initParams.validationAnnotation)
+                    validationAnnotationCtrl = true;
+                if (customState.initParams.domainAnnotation)
+                    domainAnnotationCtrl = true;
+            }
+            if ((validationAnnotationCtrl && !_this.state.validationParams) || (domainAnnotationCtrl && !_this.state.domainAtnParams)) {
+                var groupRef = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'structure-component-static-polymer');
+                if (groupRef) {
+                    var struct = _this.plugin.state.data.select(groupRef)[0].obj;
+                    if (struct) {
+                        var themeDataCtx = { structure: struct.data };
+                        if (validationAnnotationCtrl && !_this.state.validationParams) {
+                            var validationActionsParams = color_1.StructureQualityReportColorThemeProvider.getParams(themeDataCtx);
+                            if (validationActionsParams) {
+                                _this.setState({ validationParams: {
+                                        params: validationActionsParams,
+                                        values: { type: validationActionsParams.type.defaultValue }
+                                    } });
+                            }
+                        }
+                        if (domainAnnotationCtrl && !_this.state.domainAtnParams) {
+                            var domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
+                            if (domainActionsParams) {
+                                _this.setState({ domainAtnParams: {
+                                        params: domainActionsParams,
+                                        values: { type: domainActionsParams.type.defaultValue }
+                                    } });
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        _this.toggleCollapsed = function () {
+            _this.setState({ isCollapsed: !_this.state.isCollapsed });
+        };
+        _this.toggleOptions = function (type) {
+            if (type === 0)
+                _this.setState({ validationOptions: !_this.state.validationOptions });
+            if (type === 1)
+                _this.setState({ domainAtnOptions: !_this.state.domainAtnOptions });
+        };
+        _this.applyAnnotation = function (type, visibleState, params) {
+            // Defaults
+            var themeName = 'polymer-id';
+            var themePropsToAdd = behavior_1.PDBeStructureQualityReport;
+            var themePropsToRemove = _this.state.domainAtnParams ? behavior_2.PDBeDomainAnnotations : void 0;
+            // Set Theme Params
+            if (type === 0) {
+                if (visibleState) {
+                    themeName = 'pdbe-structure-quality-report';
+                }
+                _this.setState({ validationApplied: visibleState });
+                _this.setState({ domainAtnApplied: false });
+            }
+            else {
+                themePropsToAdd = behavior_2.PDBeDomainAnnotations;
+                themePropsToRemove = _this.state.validationParams ? behavior_1.PDBeStructureQualityReport : void 0;
+                if (visibleState)
+                    themeName = 'pdbe-domain-annotations';
+                _this.setState({ domainAtnApplied: visibleState });
+                _this.setState({ validationApplied: false });
+            }
+            // Update Tooltip
+            if (visibleState && themeName !== 'polymer-id') {
+                var addTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToAdd.id).update(themePropsToAdd, function (old) { old.showTooltip = true; });
+                _this.plugin.runTask(_this.plugin.state.behaviors.updateTree(addTooltipUpdate));
+                if (themePropsToRemove) {
+                    var removeTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToRemove.id).update(themePropsToRemove, function (old) { old.showTooltip = false; });
+                    _this.plugin.runTask(_this.plugin.state.behaviors.updateTree(removeTooltipUpdate));
+                }
+            }
+            var polymerGroup;
+            var componentGroups = _this.plugin.managers.structure.hierarchy.currentComponentGroups;
+            componentGroups.forEach(function (compGrp) {
+                if (compGrp[0].key === 'structure-component-static-polymer')
+                    polymerGroup = compGrp;
+            });
+            if (polymerGroup) {
+                _this.plugin.managers.structure.component.updateRepresentationsTheme(polymerGroup, { color: themeName, colorParams: params ? params : void 0 });
+            }
+        };
+        _this.initApplyAnnotation = function (type) {
+            if (type === 0)
+                _this.applyAnnotation(0, !_this.state.validationApplied, _this.state.validationParams.values);
+            if (type === 1)
+                _this.applyAnnotation(1, !_this.state.domainAtnApplied, _this.state.domainAtnParams.values);
+        };
+        _this.updateValidationParams = function (val) {
+            var updatedParams = tslib_1.__assign({}, _this.state.validationParams);
+            updatedParams.values = val;
+            _this.setState({ validationParams: updatedParams });
+            if (_this.state.validationApplied)
+                _this.applyAnnotation(0, _this.state.validationApplied, val);
+        };
+        _this.updateDomainAtnParams = function (val) {
+            var updatedParams = tslib_1.__assign({}, _this.state.domainAtnParams);
+            updatedParams.values = val;
+            _this.setState({ domainAtnParams: updatedParams });
+            if (_this.state.domainAtnApplied)
+                _this.applyAnnotation(1, _this.state.domainAtnApplied, val);
+        };
+        return _this;
+    }
+    AnnotationsComponentControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
+            _this.getOptionParams();
+            _this.forceUpdate();
+        });
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (c) { return _this.setState({
+            description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(_this.plugin)
+        }); });
+    };
+    AnnotationsComponentControls.prototype.render = function () {
+        var _this = this;
+        if (!this.state.validationParams && !this.state.domainAtnParams)
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        var brand = {
+            accent: 'green',
+            svg: TextsmsOutlinedSvg
+        };
+        var wrapClass = this.state.isCollapsed
+            ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
+            : 'msp-transform-wrapper';
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: wrapClass }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ icon: brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(brand.accent) : void 0, title: "Click to ".concat(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", tslib_1.__assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }))] })) })), !this.state.isCollapsed && this.state.validationParams &&
+                    (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "Validation Report Annotations.", style: { textAlign: 'left' } }, { children: "Validation Report" })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(0); }, toggleState: false, svg: !this.state.validationApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.validationApplied ? 'Hide' : 'Show', " Validation Report Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(0); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.validationOptions, className: 'msp-form-control', flex: true })] })), !this.state.isCollapsed && this.state.validationParams && this.state.validationOptions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-accent-offset" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.validationParams.params, values: this.state.validationParams.values, onChangeValues: this.updateValidationParams }) })) })) })), !this.state.isCollapsed && this.state.domainAtnParams &&
+                    (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "Domain Annotations.", style: { textAlign: 'left' } }, { children: "Domains" })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(1); }, toggleState: false, svg: !this.state.domainAtnApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.domainAtnApplied ? 'Hide' : 'Show', " Domain Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(1); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.domainAtnOptions, className: 'msp-form-control', flex: true })] })), !this.state.isCollapsed && this.state.domainAtnParams && this.state.domainAtnOptions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-accent-offset" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.domainAtnParams.params, values: this.state.domainAtnParams.values, onChangeValues: this.updateDomainAtnParams }) })) })) }))] }));
+    };
+    return AnnotationsComponentControls;
+}(base_1.PurePluginUIComponent));
+exports.AnnotationsComponentControls = AnnotationsComponentControls;

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

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