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

Molstar implementation for PDBe

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PDBeViewportControls = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
const viewport_1 = require("molstar/lib/mol-plugin-ui/viewport");
const plugin_custom_state_1 = require("../plugin-custom-state");
class PDBeViewportControls extends viewport_1.ViewportControls {
    render() {
        const initParams = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams;
        const showPDBeLink = (initParams === null || initParams === void 0 ? void 0 : initParams.moleculeId) && (initParams === null || initParams === void 0 ? void 0 : initParams.pdbeLink) && !(initParams === null || initParams === void 0 ? void 0 : initParams.superposition);
        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink &&
                    (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls', children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls-buttons', children: (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-pdbe-link-box', children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)("a", { target: '_blank', href: `https://pdbe.org/${initParams.moleculeId}`, style: { textDecoration: 'none', color: 'initial' }, children: (0, jsx_runtime_1.jsxs)(common_1.Button, { className: 'msp-btn-link-toggle-on pdbemolstar-pdbe-link', title: 'Go to PDBe Pages', children: [(0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-pdbe-logo', children: (0, jsx_runtime_1.jsx)(PDBeLogo, {}) }), initParams.moleculeId] }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: showPDBeLink ? 'pdbemolstar-viewport-controls-shifted' : 'pdbemolstar-viewport-controls-normal', children: super.render() })] });
    }
}
exports.PDBeViewportControls = PDBeViewportControls;
function PDBeLogo({ className }) {
    return (0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: '0 0 300 300', children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '35', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '35', d: 'M 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' })] });
}