index.html 5.84 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
11
12
13
14
15
16
17
18
19
20
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />

<!-- MOL* -->
<link rel="stylesheet" type="text/css"
    href="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/molstar-light-0.0.1.css">
<script src="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/molstar-0.0.1.js"></script>

<!-- 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}"></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></pdb-ligand-env>`
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
        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'] =
                `https://wwwdev.ebi.ac.uk/pdbe/coordinates/${result.pdbid}/ligandInteraction?&authAsymId=$${result.chain}&authSeqNumber=${result.resid}&radius=5&dataSource=hydrogens`
        } else {
            result['query'] = `https://wwwdev.ebi.ac.uk/pdbe/coordinates/${result.pdbid}?dataSource=hydrogens`
        }

        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',
                        chain: 'A',
                        resid: 200,
                        query: "https://wwwdev.ebi.ac.uk/pdbe/coordinates/1cbs/ligandInteraction?&authAsymId=$A&authSeqNumber=$200&radius=5&dataSource=hydrogens"
                    };
                }

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

                var initParams = {
                    moleculeId: params.pdbid,
                    pdbeUrl: 'https://wwwdev.ebi.ac.uk/pdbe/',
                    loadMaps: true,
                    validationAnnotation: true,
                    domainAnnotation: true,
                    lowPrecisionCoords: true,
                    isExpanded: false,
                    hideControls: true,
                    showLogs: false,
                    subscribeEvents: true,
                    showPDBeLogo: false,
                    assemblyId: 'preferred', //'deposited'
                    // selectInteraction: false,
Lukas Pravda's avatar
Lukas Pravda committed
93
94
95
96
97
                    ligandView: {
                        auth_asym_Id: params.chain,
                        auth_seq_id: params.resid,
                        hydrogens: true
                    },
98
99
100
                    backgroundColour: '0xFFFFFF',
                    //customColorList: [0xff0000, 0x0000ff],
                    //representationStyle: representationStyle//,
101
102
103
104
                    customData: {
                        url: `https://wwwdev.ebi.ac.uk/pdbe/coordinates/${params.pdbid}/ligandInteraction?&authAsymId=${params.chain}&authSeqNumber=${params.resid}&radius=5&dataSource=hydrogens`,
                        format: 'cif'
                    }
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
                }
                var pdbeMolstar = new MolStarPdbeWrapper();
                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>
121
    <!-- <div style="position: relative; float: left;">
122
        <div id="rt 1" style="width: 500px; height: 500px; position: relative">
123
            <pdb-ligand-env pdb-id="5e98" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
124
125
        </div>
    </div>
Nurul Nadzirin's avatar
Nurul Nadzirin committed
126
127
    <div style="position: relative; float: left;">
        <div id="rt 1" style="width: 500px; height: 500px; position: relative">
128
            <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
129
        </div>
130
    </div> -->
131
132
133
134

    <!--
        Further use in the app for bound molecule interactions:
        
135
        <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
136
137
        
        for ligand interactions:
138
        <pdb-ligand-env pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdb-ligand-env>
139
140
141
142
143
144
145
    -->
    <script>

    </script>
</body>

</html>