drugflow-molstar 0.1.0

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { CollapsableControls, PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { ParamDefinition as PD } from 'Molstar/mol-util/param-definition';
+export declare function InfoIconSvg(): JSX.Element;
+export declare class AlphafoldPaeControls extends CollapsableControls {
+    private axisBoxRef;
+    defaultState(): {
+        isCollapsed: boolean;
+        header: string;
+        brand: {
+            accent: "gray";
+            svg: typeof import("Molstar/mol-plugin-ui/controls/icons").FlipToFrontSvg;
+        };
+        isHidden: boolean;
+    };
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    formatTicks(d: any): any;
+    renderControls(): JSX.Element | null;
+}
+export declare class AlphafoldSuperpositionControls extends CollapsableControls {
+    defaultState(): {
+        isCollapsed: boolean;
+        header: string;
+        brand: {
+            accent: "gray";
+            svg: typeof import("Molstar/mol-plugin-ui/controls/icons").FlipToFrontSvg;
+        };
+        isHidden: boolean;
+    };
+    componentDidMount(): void;
+    rmsdTable(): JSX.Element;
+    renderControls(): JSX.Element;
+}
+export declare const AlphafoldSuperpositionParams: {
+    traceOnly: PD.BooleanParam;
+};
+export declare type AlphafoldSuperpositionOptions = PD.ValuesFor<typeof AlphafoldSuperpositionParams>;
+declare type AfSuperpositionControlsState = {
+    isBusy: boolean;
+    action?: 'byChains' | 'byAtoms' | 'options';
+    canUseDb?: boolean;
+    options: AlphafoldSuperpositionOptions;
+};
+export declare class AfSuperpositionControls extends PurePluginUIComponent<{}, AfSuperpositionControlsState> {
+    state: AfSuperpositionControlsState;
+    componentDidMount(): void;
+    get selection(): import("molstar/lib/mol-plugin-state/manager/structure/selection").StructureSelectionManager;
+    get customState(): any;
+    superposeDb: () => Promise<void>;
+    toggleOptions: () => void;
+    superposeByDbMapping(): JSX.Element;
+    private setOptions;
+    render(): JSX.Element;
+}
+export {};

package/lib/ui/alphafold-superposition.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfSuperpositionControls = exports.AlphafoldSuperpositionParams = exports.AlphafoldSuperpositionControls = exports.AlphafoldPaeControls = exports.InfoIconSvg = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = tslib_1.__importDefault(require("react"));
+var base_1 = require("Molstar/mol-plugin-ui/base");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var common_1 = require("Molstar/mol-plugin-ui/controls/common");
+var param_definition_1 = require("Molstar/mol-util/param-definition");
+var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var superposition_1 = require("../superposition");
+var d3_scale_1 = require("d3-scale");
+var d3_axis_1 = require("d3-axis");
+var d3_selection_1 = require("d3-selection");
+var _InfoIcon = (0, jsx_runtime_1.jsx)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24', strokeWidth: '0.1px' }, { children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" }) }));
+function InfoIconSvg() { return _InfoIcon; }
+exports.InfoIconSvg = InfoIconSvg;
+var AlphafoldPaeControls = /** @class */ (function (_super) {
+    tslib_1.__extends(AlphafoldPaeControls, _super);
+    function AlphafoldPaeControls(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.axisBoxRef = react_1.default.createRef();
+        return _this;
+    }
+    AlphafoldPaeControls.prototype.defaultState = function () {
+        return {
+            isCollapsed: false,
+            header: 'AlphaFold PAE',
+            brand: { accent: 'gray', svg: icons_1.SuperpositionSvg },
+            isHidden: true
+        };
+    };
+    AlphafoldPaeControls.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.apiData.pae && superpositionState.alphafold.apiData.pae !== '' && superpositionState.alphafold.apiData.pae !== '') {
+                _this.setState({ isHidden: false });
+                var domainMax = superpositionState.alphafold.apiData.length;
+                var x = (0, d3_scale_1.scaleLinear)().domain([0, domainMax]).range([0, 200]);
+                var xAxis = (0, d3_axis_1.axisBottom)(x).ticks(6).tickFormat(_this.formatTicks).tickSizeOuter(0);
+                var yAxis = (0, d3_axis_1.axisLeft)(x).ticks(6).tickFormat(_this.formatTicks).tickSizeOuter(0);
+                var axisContainer = (0, d3_selection_1.select)(_this.axisBoxRef.current);
+                axisContainer.append('svg:svg')
+                    .attr('width', 220)
+                    .attr('height', 30)
+                    .attr('class', 'pae-x-axis')
+                    .style('z-index', '1')
+                    .style('position', 'absolute')
+                    .attr('transform', "translate(-93,202)")
+                    .append('g')
+                    .attr('transform', "translate(6,0)")
+                    .call(xAxis);
+                axisContainer.append('svg:svg')
+                    .attr('width', 50)
+                    .attr('height', 220)
+                    .attr('class', 'pae-y-axis')
+                    .style('z-index', '1')
+                    .style('position', 'absolute')
+                    .attr('transform', "translate(-123,0)")
+                    .append('g')
+                    .attr('transform', "translate(36,4)")
+                    .call(yAxis);
+            }
+        });
+    };
+    AlphafoldPaeControls.prototype.formatTicks = function (d) {
+        return d > 999 ? d / 1000 + 'k' : d;
+    };
+    AlphafoldPaeControls.prototype.renderControls = function () {
+        var superpositionState = this.plugin.customState.superpositionState;
+        if (!superpositionState || !superpositionState.alphafold)
+            return null;
+        var errorScale = [0, 5, 10, 15, 20, 25, 30];
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row', style: { height: 'auto', textAlign: 'center', justifyContent: 'center', padding: '15px 0', position: 'relative', fontSize: '12px' } }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: this.axisBoxRef, className: 'pae-axis-box', style: { position: 'absolute', width: '100%', height: '100%' } }), (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: { transform: 'rotate(270deg)', position: 'absolute', transformOrigin: '0 0', left: '10px', top: '165px', fontWeight: 500 } }, { children: "Aligned residue" })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row', style: { height: 'auto', flexDirection: 'column' } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { width: '200px', height: '200px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', position: 'relative' } }, { children: (0, jsx_runtime_1.jsx)("img", { style: { width: '100%', height: '100%', position: 'absolute', left: 0, top: 0 }, src: "".concat(superpositionState.alphafold.apiData.pae), alt: "PAE" }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { textAlign: 'center', paddingLeft: '30px', marginBottom: '20px', fontWeight: 500 } }, { children: "Scored residue" })), (0, jsx_runtime_1.jsx)("img", { style: { width: '200px', height: '10px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', transform: 'rotate(180deg)' }, src: 'https://alphafold.ebi.ac.uk/assets/img/horizontal_colorbar.png', alt: "PAE Scale" }), (0, jsx_runtime_1.jsx)("ul", tslib_1.__assign({ style: { listStyleType: 'none', fontWeight: 500, margin: 0, display: 'inline-block', position: 'absolute', top: '292px', marginLeft: '24px' } }, { children: errorScale.map(function (errValue) { return (0, jsx_runtime_1.jsx)("li", tslib_1.__assign({ style: { float: 'left', marginRight: '18px' } }, { children: errValue }), errValue); }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { textAlign: 'center', paddingLeft: '20px', fontWeight: 500 } }, { children: "Expected position error (\u00C5ngstr\u00F6ms)" }))] }))] }));
+    };
+    return AlphafoldPaeControls;
+}(base_1.CollapsableControls));
+exports.AlphafoldPaeControls = AlphafoldPaeControls;
+var AlphafoldSuperpositionControls = /** @class */ (function (_super) {
+    tslib_1.__extends(AlphafoldSuperpositionControls, _super);
+    function AlphafoldSuperpositionControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AlphafoldSuperpositionControls.prototype.defaultState = function () {
+        return {
+            isCollapsed: false,
+            header: 'AlphaFold Superposition',
+            brand: { accent: 'gray', svg: icons_1.SuperpositionSvg },
+            isHidden: true
+        };
+    };
+    AlphafoldSuperpositionControls.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.apiData.cif && superpositionState.alphafold.apiData.cif !== '') {
+                _this.setState({ isHidden: false });
+            }
+        });
+    };
+    AlphafoldSuperpositionControls.prototype.rmsdTable = function () {
+        var spData = this.plugin.customState.superpositionState;
+        var activeSegment = spData.activeSegment;
+        var rmsds = spData.alphafold.rmsds;
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: [(rmsds.length == 0 || !rmsds[activeSegment - 1]) && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-flex-row', style: { padding: '5px 0 0 10px' } }, { children: (0, jsx_runtime_1.jsx)("strong", { children: "No overlap found!" }) })), rmsds[activeSegment - 1] && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' } }, { children: (0, jsx_runtime_1.jsx)("strong", { children: "Entry" }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { padding: '5px 0 0 5px' } }, { children: (0, jsx_runtime_1.jsx)("strong", { children: "RMSD (\u212B)" }) }))] })), rmsds[activeSegment - 1] && rmsds[activeSegment - 1].map(function (d) {
+                    var details = d.split(':');
+                    return details[1] !== '-' ? (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-row-label', style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' } }, { children: details[0] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { padding: '5px 0 0 5px' } }, { children: details[1] }))] }), d) : null;
+                })] }));
+    };
+    AlphafoldSuperpositionControls.prototype.renderControls = function () {
+        var superpositionState = this.plugin.customState.superpositionState;
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [superpositionState.alphafold.ref !== '' && this.rmsdTable(), superpositionState.alphafold.ref === '' && (0, jsx_runtime_1.jsx)(AfSuperpositionControls, {})] });
+    };
+    return AlphafoldSuperpositionControls;
+}(base_1.CollapsableControls));
+exports.AlphafoldSuperpositionControls = AlphafoldSuperpositionControls;
+exports.AlphafoldSuperpositionParams = {
+    // alignSequences: PD.Boolean(true, { isEssential: true, description: 'For Chain-based 3D superposition, perform a sequence alignment and use the aligned residue pairs to guide the 3D superposition.' }),
+    traceOnly: param_definition_1.ParamDefinition.Boolean(true, { description: 'For Chain- and Uniprot-based 3D superposition, base superposition only on CA (and equivalent) atoms.' })
+};
+var DefaultAlphafoldSuperpositionOptions = param_definition_1.ParamDefinition.getDefaultValues(exports.AlphafoldSuperpositionParams);
+var AfSuperpositionControls = /** @class */ (function (_super) {
+    tslib_1.__extends(AfSuperpositionControls, _super);
+    function AfSuperpositionControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isBusy: false,
+            canUseDb: true,
+            action: undefined,
+            options: DefaultAlphafoldSuperpositionOptions
+        };
+        _this.superposeDb = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var spData;
+            return tslib_1.__generator(this, function (_a) {
+                this.setState({ isBusy: true });
+                spData = this.plugin.customState.superpositionState;
+                spData.alphafold.traceOnly = this.state.options.traceOnly;
+                (0, superposition_1.superposeAf)(this.plugin, this.state.options.traceOnly);
+                return [2 /*return*/];
+            });
+        }); };
+        _this.toggleOptions = function () { return _this.setState({ action: _this.state.action === 'options' ? void 0 : 'options' }); };
+        _this.setOptions = function (values) {
+            _this.setState({ options: values });
+        };
+        return _this;
+    }
+    AfSuperpositionControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
+            _this.setState({ isBusy: v });
+        });
+    };
+    Object.defineProperty(AfSuperpositionControls.prototype, "selection", {
+        get: function () {
+            return this.plugin.managers.structure.selection;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AfSuperpositionControls.prototype, "customState", {
+        get: function () {
+            return this.plugin.customState;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AfSuperpositionControls.prototype.superposeByDbMapping = function () {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.SuperposeChainsSvg, title: 'Superpose AlphaFold structure using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px', textAlign: 'left' }, disabled: this.state.isBusy }, { children: "Load AlphaFold structure" })) });
+    };
+    AfSuperpositionControls.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { backgroundColor: '#dce54e', fontWeight: 500, padding: '5px 12px' } }, { children: "New Feature!" })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-help-text', style: { margin: '2px 0' } }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: InfoIconSvg, inline: true }), "Load and superpose AlphaFold structure against representative chains."] })) })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.AlphafoldSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) }))] });
+    };
+    return AfSuperpositionControls;
+}(base_1.PurePluginUIComponent));
+exports.AfSuperpositionControls = AfSuperpositionControls;

package/lib/ui/alphafold-tranparency.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { CollapsableControls } from 'Molstar/mol-plugin-ui/base';
+export declare class AlphafoldTransparencyControls extends CollapsableControls<{}, {
+    transpareny: any;
+}> {
+    defaultState(): {
+        isCollapsed: boolean;
+        header: string;
+        brand: {
+            accent: "gray";
+            svg: typeof import("Molstar/mol-plugin-ui/controls/icons").FlipToFrontSvg;
+        };
+        isHidden: boolean;
+        transpareny: {
+            score: number;
+            opacity: number;
+        };
+    };
+    componentDidMount(): void;
+    updateTransparency: (val: any) => Promise<void>;
+    renderControls(): JSX.Element;
+}

package/lib/ui/alphafold-tranparency.js

@@ -0,0 +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;

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

@@ -0,0 +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;
+}

package/lib/ui/annotation-controls.js

@@ -0,0 +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;

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

@@ -0,0 +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;
+}

package/lib/ui/export-superposition.js

@@ -0,0 +1,71 @@
+"use strict";
+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 superposition_export_1 = require("../superposition-export");
+var SuperpositionModelExportUI = /** @class */ (function (_super) {
+    tslib_1.__extends(SuperpositionModelExportUI, _super);
+    function SuperpositionModelExportUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SuperpositionModelExportUI.prototype.defaultState = function () {
+        return {
+            header: 'Export Models',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: icons_1.GetAppSvg }
+        };
+    };
+    SuperpositionModelExportUI.prototype.renderControls = function () {
+        return (0, jsx_runtime_1.jsx)(SuperpositionExportControls, { plugin: this.plugin });
+    };
+    return SuperpositionModelExportUI;
+}(base_1.CollapsableControls));
+exports.SuperpositionModelExportUI = SuperpositionModelExportUI;
+var Params = {
+    format: param_definition_1.ParamDefinition.Select('cif', [['cif', 'mmCIF'], ['bcif', 'Binary mmCIF']])
+};
+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];
+    (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;
+    var label = 'Nothing to Export';
+    if (hierarchy.structures.length === 1) {
+        label = 'Export';
+    }
+    if (hierarchy.structures.length > 1) {
+        label = 'Export (as ZIP)';
+    }
+    var onExport = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setExporting(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, (0, superposition_export_1.superpositionExportHierarchy)(plugin, { format: params.format })];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setExporting(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: Params, values: params, onChangeValues: setParams, isDisabled: isBusy || exporting }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: onExport, style: { marginTop: 1 }, disabled: isBusy || hierarchy.structures.length === 0 || exporting, commit: hierarchy.structures.length ? 'on' : 'off' }, { children: label }))] });
+}

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

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