index.html 5.41 KB
Newer Older
1 2 3 4 5
<!doctype html>
<html lang="en">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--testing purposes only-->
6
<link rel="stylesheet" href="pdb-ligand-env-svg.css" />
7 8 9 10
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />

<!-- MOL* -->
<link rel="stylesheet" type="text/css"
Lukas Pravda's avatar
Lukas Pravda committed
11 12
    href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.1.0.css">
<script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.1.0.js"></script>
13 14 15 16 17 18 19 20

<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8">
</script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
    charset="utf-8"></script>

Lukas Pravda's avatar
Lukas Pravda committed
21
<script type="module" src="pdb-ligand-env-component-0.2.0-min.js"></script>
22 23
<script>
    var renderBmInteractions = function (id, bmId) {
Lukas Pravda's avatar
Lukas Pravda committed
24
        var int =
25
            `<pdb-ligand-env style="border: 1px solid black" pdb-id="${id}" bound-molecule-id="${bmId}" environment="dev"></pdb-ligand-env>`
26 27 28 29 30
        document.getElementById('rt').innerHTML = int;
    };

    var renderLigandInteractions = function (id, chain, resId) {
        var int =
31
            `<pdb-ligand-env style="border: 1px solid black" pdb-id="${id}" pdb-chain-id="${chain}" pdb-res-id="${resId}" zoom-on environment="dev"></pdb-ligand-env>`
32 33 34 35 36 37 38 39 40 41 42 43 44
        document.getElementById('rt').innerHTML = int;
    };

    var parseParameters = function (par) {
        let result = {}

        par.split('&').forEach(x => {
            let splitted = x.split('=');
            result[splitted[0].toLowerCase()] = splitted[1].toLowerCase();
        });

        if (result.bmid === undefined) {
            result['query'] =
Lukas Pravda's avatar
Lukas Pravda committed
45
                `https://www.ebi.ac.uk/pdbe/model-server/v1/${result.pdbid}/residueInteraction?auth_asym_id=${result.chain}&auth_seq_id=${result.resid}&radius=5&data_source=pdb-h`
46
        } else {
Lukas Pravda's avatar
Lukas Pravda committed
47
            result['query'] = `https://www.ebi.ac.uk/pdbe/model-server/v1/${result.pdbid}/full?data_source=pdb-h`
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
        }

        if (result.chain !== undefined) result.chain = result.chain.toUpperCase();

        return result;
    };

    (function () {
        'use strict';
        $(document)
            .ready(function ($http) {
                var tokens = window.location.href.split('/').reverse();
                let params = {};

                if (tokens[0].startsWith('?')) {
                    params = parseParameters(tokens[0].slice(1));
                } else {
                    params = {
                        pdbid: '1cbs',
Lukas Pravda's avatar
Lukas Pravda committed
67
                        chain: 'A_1',
68
                        resid: 200,
Lukas Pravda's avatar
Lukas Pravda committed
69
                        query: "https://www.ebi.ac.uk/pdbe/model-server/v1/1cbs/residueInteraction?auth_asym_id=A_1&auth_seq_id=200&radius=5&data_source=pdb-h"
70 71 72 73 74 75 76 77 78 79 80
                    };
                }

                if (params.bmid === undefined) {
                    renderLigandInteractions(params.pdbid, params.chain, params.resid);
                } else {
                    renderBmInteractions(params.pdbid, params.bmid);
                }

                var initParams = {
                    moleculeId: params.pdbid,
Lukas Pravda's avatar
Lukas Pravda committed
81 82 83 84 85 86 87
                    pdbeUrl: 'https://www.ebi.ac.uk/pdbe/',
                    loadMaps: false,
                    bgColor: {
                        r: 255,
                        g: 250,
                        b: 250
                    },
88 89 90 91 92 93
                    lowPrecisionCoords: true,
                    isExpanded: false,
                    hideControls: true,
                    showLogs: false,
                    subscribeEvents: true,
                    showPDBeLogo: false,
Lukas Pravda's avatar
Lukas Pravda committed
94
                    subscribeEvents: true,
Lukas Pravda's avatar
Lukas Pravda committed
95 96
                    ligandView: {
                        auth_seq_id: params.resid,
Lukas Pravda's avatar
Lukas Pravda committed
97
                        auth_asym_id: params.chain,
Lukas Pravda's avatar
Lukas Pravda committed
98
                        hydrogens: true
99
                    }
100
                }
Lukas Pravda's avatar
Lukas Pravda committed
101
                var pdbeMolstar = new PDBeMolstarPlugin();
102 103 104 105 106 107 108 109 110 111 112 113 114 115
                pdbeMolstar.render(document.getElementById('3dViewer'), initParams);
            });
    }());
</script>


<body>
    <div style="position: relative; float: left;">
        <div id="rt" style="width: 500px; height: 500px; position: relative">
        </div>
    </div>
    <div style="position: relative; float: left;">
        <div id='3dViewer' style="position:relative; width: 500px;height: 500px;"></div>
    </div>
Lukas Pravda's avatar
Lukas Pravda committed
116
    <!-- <div style="position: relative; float: left;">
117
        <div id="rt 1" style="width: 500px; height: 500px; position: relative">
Lukas Pravda's avatar
Lukas Pravda committed
118
            <pdb-ligand-env pdb-id="5e98" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
119 120
        </div>
    </div>
Lukas Pravda's avatar
Lukas Pravda committed
121
    <div style="position: relative; float: left;">
Nurul Nadzirin's avatar
Nurul Nadzirin committed
122
        <div id="rt 1" style="width: 500px; height: 500px; position: relative">
123
            <pdb-ligand-env pdb-id="5e98" bound-molecule-id="bm1" entity-id="3" zoom-on></pdb-ligand-env>
Nurul Nadzirin's avatar
Nurul Nadzirin committed
124
        </div>
125
    </div> -->
126 127 128 129

    <!--
        Further use in the app for bound molecule interactions:
        
130
        <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
131 132
        
        for ligand interactions:
133
        <pdb-ligand-env pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdb-ligand-env>
134 135 136 137 138 139 140
    -->
    <script>

    </script>
</body>

</html>