drugflow-molstar 0.3.77 → 0.4.1

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

@@ -1,7 +1,6 @@
-/// <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 function InfoIconSvg(): import("react/jsx-runtime").JSX.Element;
 export declare class AlphafoldPaeControls extends CollapsableControls {
     private axisBoxRef;
     defaultState(): {
@@ -16,7 +15,7 @@ export declare class AlphafoldPaeControls extends CollapsableControls {
     constructor(props: any, context: any);
     componentDidMount(): void;
     formatTicks(d: any): any;
-    renderControls(): JSX.Element | null;
+    renderControls(): import("react/jsx-runtime").JSX.Element | null;
 }
 export declare class AlphafoldSuperpositionControls extends CollapsableControls {
     defaultState(): {
@@ -29,14 +28,14 @@ export declare class AlphafoldSuperpositionControls extends CollapsableControls
         isHidden: boolean;
     };
     componentDidMount(): void;
-    rmsdTable(): JSX.Element;
-    renderControls(): JSX.Element;
+    rmsdTable(): import("react/jsx-runtime").JSX.Element;
+    renderControls(): import("react/jsx-runtime").JSX.Element;
 }
 export declare const AlphafoldSuperpositionParams: {
     traceOnly: PD.BooleanParam;
 };
-export declare type AlphafoldSuperpositionOptions = PD.ValuesFor<typeof AlphafoldSuperpositionParams>;
-declare type AfSuperpositionControlsState = {
+export type AlphafoldSuperpositionOptions = PD.ValuesFor<typeof AlphafoldSuperpositionParams>;
+type AfSuperpositionControlsState = {
     isBusy: boolean;
     action?: 'byChains' | 'byAtoms' | 'options';
     canUseDb?: boolean;
@@ -49,8 +48,8 @@ export declare class AfSuperpositionControls extends PurePluginUIComponent<{}, A
     get customState(): any;
     superposeDb: () => Promise<void>;
     toggleOptions: () => void;
-    superposeByDbMapping(): JSX.Element;
+    superposeByDbMapping(): import("react/jsx-runtime").JSX.Element;
     private setOptions;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lib/ui/alphafold-superposition.js

@@ -1,56 +1,55 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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" }) }));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+const common_1 = require("Molstar/mol-plugin-ui/controls/common");
+const param_definition_1 = require("Molstar/mol-util/param-definition");
+const parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+const superposition_1 = require("../superposition");
+const d3_scale_1 = require("d3-scale");
+const d3_axis_1 = require("d3-axis");
+const d3_selection_1 = require("d3-selection");
+const _InfoIcon = (0, jsx_runtime_1.jsx)("svg", { 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 () {
+class AlphafoldPaeControls extends base_1.CollapsableControls {
+    defaultState() {
         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;
+    }
+    constructor(props, context) {
+        super(props, context);
+        this.axisBoxRef = react_1.default.createRef();
+    }
+    componentDidMount() {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, sel => {
+            const 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);
+                this.setState({ isHidden: false });
+                const domainMax = superpositionState.alphafold.apiData.length;
+                const x = (0, d3_scale_1.scaleLinear)().domain([0, domainMax]).range([0, 200]);
+                const xAxis = (0, d3_axis_1.axisBottom)(x).ticks(6).tickFormat(this.formatTicks).tickSizeOuter(0);
+                const yAxis = (0, d3_axis_1.axisLeft)(x).ticks(6).tickFormat(this.formatTicks).tickSizeOuter(0);
+                const 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)")
+                    .attr('transform', `translate(-93,202)`)
                     .append('g')
-                    .attr('transform', "translate(6,0)")
+                    .attr('transform', `translate(6,0)`)
                     .call(xAxis);
                 axisContainer.append('svg:svg')
                     .attr('width', 50)
@@ -58,121 +57,98 @@ var AlphafoldPaeControls = /** @class */ (function (_super) {
                     .attr('class', 'pae-y-axis')
                     .style('z-index', '1')
                     .style('position', 'absolute')
-                    .attr('transform', "translate(-123,0)")
+                    .attr('transform', `translate(-123,0)`)
                     .append('g')
-                    .attr('transform', "translate(36,4)")
+                    .attr('transform', `translate(36,4)`)
                     .call(yAxis);
             }
         });
-    };
-    AlphafoldPaeControls.prototype.formatTicks = function (d) {
+    }
+    formatTicks(d) {
         return d > 999 ? d / 1000 + 'k' : d;
-    };
-    AlphafoldPaeControls.prototype.renderControls = function () {
-        var superpositionState = this.plugin.customState.superpositionState;
+    }
+    renderControls() {
+        const 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;
+        const errorScale = [0, 5, 10, 15, 20, 25, 30];
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { height: 'auto', textAlign: 'center', justifyContent: 'center', padding: '15px 0', position: 'relative', fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { ref: this.axisBoxRef, className: 'pae-axis-box', style: { position: 'absolute', width: '100%', height: '100%' } }), (0, jsx_runtime_1.jsx)("span", { style: { transform: 'rotate(270deg)', position: 'absolute', transformOrigin: '0 0', left: '10px', top: '165px', fontWeight: 500 }, children: "Aligned residue" }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { height: 'auto', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '200px', height: '200px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', position: 'relative' }, children: (0, jsx_runtime_1.jsx)("img", { style: { width: '100%', height: '100%', position: 'absolute', left: 0, top: 0 }, src: `${superpositionState.alphafold.apiData.pae}`, alt: "PAE" }) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', paddingLeft: '30px', marginBottom: '20px', fontWeight: 500 }, children: "Scored residue" }), (0, jsx_runtime_1.jsx)("img", { style: { width: '200px', height: '10px', border: '1px solid #6a635a', margin: '2px 0 25px 25px', transform: 'rotate(180deg)' }, src: 'https://alphafold.ebi.ac.uk/assets/img/horizontal_colorbar.png', alt: "PAE Scale" }), (0, jsx_runtime_1.jsx)("ul", { style: { listStyleType: 'none', fontWeight: 500, margin: 0, display: 'inline-block', position: 'absolute', top: '292px', marginLeft: '24px' }, children: errorScale.map((errValue) => (0, jsx_runtime_1.jsx)("li", { style: { float: 'left', marginRight: '18px' }, children: errValue }, errValue)) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', paddingLeft: '20px', fontWeight: 500 }, children: "Expected position error (\u00C5ngstr\u00F6ms)" })] })] });
     }
-    AlphafoldSuperpositionControls.prototype.defaultState = function () {
+}
+exports.AlphafoldPaeControls = AlphafoldPaeControls;
+class AlphafoldSuperpositionControls extends base_1.CollapsableControls {
+    defaultState() {
         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;
+    }
+    componentDidMount() {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, sel => {
+            const superpositionState = this.plugin.customState.superpositionState;
             if (superpositionState && superpositionState.alphafold.apiData.cif && superpositionState.alphafold.apiData.cif !== '') {
-                _this.setState({ isHidden: false });
+                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;
+    }
+    rmsdTable() {
+        const spData = this.plugin.customState.superpositionState;
+        const { activeSegment } = spData;
+        const { rmsds } = spData.alphafold;
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-offset', children: [(rmsds.length == 0 || !rmsds[activeSegment - 1]) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-flex-row', style: { padding: '5px 0 0 10px' }, children: (0, jsx_runtime_1.jsx)("strong", { children: "No overlap found!" }) }), rmsds[activeSegment - 1] && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' }, children: (0, jsx_runtime_1.jsx)("strong", { children: "Entry" }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '5px 0 0 5px' }, children: (0, jsx_runtime_1.jsx)("strong", { children: "RMSD (\u212B)" }) })] }), rmsds[activeSegment - 1] && rmsds[activeSegment - 1].map((d) => {
+                    const details = d.split(':');
+                    return details[1] !== '-' ? (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-label', style: { width: '40%', borderRight: '1px solid rgb(213 206 196)', padding: '5px 0 0 5px' }, children: details[0] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '5px 0 0 5px' }, children: details[1] })] }, d) : null;
+                })] });
+    }
+    renderControls() {
+        const superpositionState = 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 = {
+const DefaultAlphafoldSuperpositionOptions = param_definition_1.ParamDefinition.getDefaultValues(exports.AlphafoldSuperpositionParams);
+class AfSuperpositionControls extends base_1.PurePluginUIComponent {
+    constructor() {
+        super(...arguments);
+        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 });
+        this.superposeDb = async () => {
+            this.setState({ isBusy: true });
+            const spData = this.plugin.customState.superpositionState;
+            spData.alphafold.traceOnly = this.state.options.traceOnly;
+            (0, superposition_1.superposeAf)(this.plugin, this.state.options.traceOnly);
+        };
+        this.toggleOptions = () => this.setState({ action: this.state.action === 'options' ? void 0 : 'options' });
+        this.setOptions = (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 });
+    componentDidMount() {
+        this.subscribe(this.plugin.behaviors.state.isBusy, 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));
+    }
+    get selection() {
+        return this.plugin.managers.structure.selection;
+    }
+    get customState() {
+        return this.plugin.customState;
+    }
+    superposeByDbMapping() {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.SuperposeChainsSvg, title: 'Superpose AlphaFold structure using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px', textAlign: 'left' }, disabled: this.state.isBusy, children: "Load AlphaFold structure" }) });
+    }
+    render() {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: '#dce54e', fontWeight: 500, padding: '5px 12px' }, children: "New Feature!" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-help-text', style: { margin: '2px 0' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-help-description', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: InfoIconSvg, inline: true }), "Load and superpose AlphaFold structure against representative chains."] }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] }), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.AlphafoldSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) })] });
+    }
+}
 exports.AfSuperpositionControls = AfSuperpositionControls;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsableControls } from 'Molstar/mol-plugin-ui/base';
 export declare class AlphafoldTransparencyControls extends CollapsableControls<{}, {
     transpareny: any;
@@ -18,5 +17,5 @@ export declare class AlphafoldTransparencyControls extends CollapsableControls<{
     };
     componentDidMount(): void;
     updateTransparency: (val: any) => Promise<void>;
-    renderControls(): JSX.Element;
+    renderControls(): import("react/jsx-runtime").JSX.Element;
 }

package/lib/ui/alphafold-tranparency.js

@@ -1,42 +1,28 @@
 "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 = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+const param_definition_1 = require("Molstar/mol-util/param-definition");
+const parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+const alphafold_transparency_1 = require("../alphafold-transparency");
+const 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;
+class AlphafoldTransparencyControls extends base_1.CollapsableControls {
+    constructor() {
+        super(...arguments);
+        this.updateTransparency = async (val) => {
+            this.setState({ transpareny: val });
+            const superpositionState = this.plugin.customState.superpositionState;
+            const afStr = this.plugin.managers.structure.hierarchy.current.refs.get(superpositionState.alphafold.ref);
+            await (0, alphafold_transparency_1.clearStructureTransparency)(this.plugin, afStr.components);
+            await (0, alphafold_transparency_1.applyAFTransparency)(this.plugin, afStr, 1 - val.opacity, val.score);
+        };
     }
-    AlphafoldTransparencyControls.prototype.defaultState = function () {
+    defaultState() {
         return {
             isCollapsed: false,
             header: 'AlphaFold Structure Opacity',
@@ -47,19 +33,17 @@ var AlphafoldTransparencyControls = /** @class */ (function (_super) {
                 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;
+    }
+    componentDidMount() {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, sel => {
+            const superpositionState = this.plugin.customState.superpositionState;
             if (superpositionState && superpositionState.alphafold.ref && superpositionState.alphafold.ref !== '') {
-                _this.setState({ isHidden: false });
+                this.setState({ isHidden: false });
             }
         });
-    };
-    AlphafoldTransparencyControls.prototype.renderControls = function () {
+    }
+    renderControls() {
         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,6 +1,5 @@
-/// <reference types="react" />
 import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-export declare function TextsmsOutlinedSvg(): JSX.Element;
+export declare function TextsmsOutlinedSvg(): import("react/jsx-runtime").JSX.Element;
 export declare class AnnotationsComponentControls extends PurePluginUIComponent<{}, {
     isCollapsed: boolean;
     validationApplied: boolean;
@@ -20,5 +19,5 @@ export declare class AnnotationsComponentControls extends PurePluginUIComponent<
     initApplyAnnotation: (type: number) => void;
     updateValidationParams: (val: any) => void;
     updateDomainAtnParams: (val: any) => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }