web
/
TmMolStar


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title>Mol* Proteopedia Wrapper</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            #app {
                position: absolute;
                left: 160px;
                top: 100px;
                width: 600px;
                height: 600px;
                border: 1px solid #ccc;
            }

            #controls {
                position: absolute;
                width: 130px;
                top: 10px;
                left: 10px;
            }

            #controls > button {
                display: block;
                width: 100%;
                text-align: left;
            }

            #controls > hr {
                margin: 5px 0;
            }

            #controls > input, #controls > select {
                width: 100%;
                display: block;
            }

            #volume-streaming-wrapper {
                position: absolute;
                top: 100px;
                left: 780px;
                width: 300px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="app.css" />
        <script type="text/javascript" src="./index.js"></script>
    </head>
    <body>
        <div id='controls'>
            <h3>Source</h3>
            <input type='text' id='url' placeholder='url' style='width: 400px' />
            <input type='text' id='assemblyId' placeholder='assembly id' />
            <select id='format'>
                <option value='cif' selected>CIF</option>
                <option value='pdb'>PDB</option>
            </select>
        </div>
        <div id="app"></div>
        <div id="volume-streaming-wrapper"></div>
        <script>
            // it might be a good idea to define these colors in a separate script file 
            var CustomColors = [0x00ff00, 0x0000ff];

            // create an instance of the plugin
            var PluginWrapper = new MolStarProteopediaWrapper();

            console.log('Wrapper version', MolStarProteopediaWrapper.VERSION_MAJOR, MolStarProteopediaWrapper.VERSION_MINOR);

            function $(id) { return document.getElementById(id); }
        
            var pdbId = '1cbs', assemblyId= 'preferred';
            var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
            var format = 'cif';
            
            $('url').value = url;
            $('url').onchange = function (e) { url = e.target.value; }
            $('assemblyId').value = assemblyId;
            $('assemblyId').onchange = function (e) { assemblyId = e.target.value; }
            $('format').value = format;
            $('format').onchange = function (e) { format = e.target.value; }

            // var url = 'https://www.ebi.ac.uk/pdbe/entry-files/pdb' + pdbId + '.ent';
            // var format = 'pdb';
            // var assemblyId = 'deposited';

            var representationStyle = {
                sequence: { coloring: 'proteopedia-custom' }, // or just { }
                hetGroups: { kind: 'ball-and-stick' }, // or 'spacefill
                water: { hide: true },
                snfg3d: { hide: false }
            };

            PluginWrapper.init('app' /** or document.getElementById('app') */, {
                customColorList: CustomColors
            });
            PluginWrapper.setBackground(0xffffff);
            PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId, representationStyle: representationStyle });
            PluginWrapper.toggleSpin();

            PluginWrapper.events.modelInfo.subscribe(function (info) {
                console.log('Model Info', info);
                listHetGroups(info);
            });

            addControl('Load Asym Unit', () => PluginWrapper.load({ url: url, format: format }));
            addControl('Load Assembly', () => PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId }));

            addSeparator();

            addHeader('Representation');

            addControl('Custom Chain Colors', () => PluginWrapper.updateStyle({ sequence: { coloring: 'proteopedia-custom' } }, true));
            addControl('Default Chain Colors', () => PluginWrapper.updateStyle({ sequence: { } }, true));

            addControl('HET Spacefill', () => PluginWrapper.updateStyle({ hetGroups: { kind: 'spacefill' } }, true));
            addControl('HET Ball-and-stick', () => PluginWrapper.updateStyle({ hetGroups: { kind: 'ball-and-stick' } }, true));

            addControl('Hide 3DSNFG', () => PluginWrapper.updateStyle({ snfg3d: { hide: true } }, true));
            addControl('Show 3DSNFG', () => PluginWrapper.updateStyle({ snfg3d: { hide: false } }, true));

            addControl('Hide Water', () => PluginWrapper.updateStyle({ water: { hide: true } }, true));
            addControl('Show Water', () => PluginWrapper.updateStyle({ water: { hide: false } }, true));

            addSeparator();

            addHeader('Camera');
            addControl('Toggle Spin', () => PluginWrapper.toggleSpin());
            
            addSeparator();

            addHeader('Animation');

            // adjust this number to make the animation faster or slower
            // requires to "restart" the animation if changed
            PluginWrapper.animate.modelIndex.maxFPS = 30;

            addControl('Play To End', () => PluginWrapper.animate.modelIndex.onceForward());
            addControl('Play To Start', () => PluginWrapper.animate.modelIndex.onceBackward());
            addControl('Play Palindrome', () => PluginWrapper.animate.modelIndex.palindrome());
            addControl('Play Loop', () => PluginWrapper.animate.modelIndex.loop());
            addControl('Stop', () => PluginWrapper.animate.modelIndex.stop());

            addSeparator();
            addHeader('Misc');

            addControl('Apply Evo Cons Style', () => PluginWrapper.coloring.evolutionaryConservation());
            addControl('Apply Evo Cons Colors', () => PluginWrapper.coloring.evolutionaryConservation({ sequence: true, het: false, keepStyle: true }));
            addControl('Default Visuals', () => PluginWrapper.updateStyle());

            addSeparator();
            addHeader('HET Groups');

            addControl('Reset', () => PluginWrapper.hetGroups.reset());
            addHetGroupsContainer();

            addSeparator();
            addHeader('Exp. Data');
            addControl('Init', () => PluginWrapper.experimentalData.init($('volume-streaming-wrapper')));
            addControl('Remove', () => PluginWrapper.experimentalData.remove());

            addSeparator(); 
            addHeader('State');

            var snapshot;
            addControl('Create Snapshot', () => {
                snapshot = PluginWrapper.snapshot.get();
                // could use JSON.stringify(snapshot) and upload the data
            });
            addControl('Apply Snapshot', () => {
                if (!snapshot) return;
                PluginWrapper.snapshot.set(snapshot);

                // or download snapshot using fetch or ajax or whatever
                // or PluginWrapper.snapshot.download(url);
            });

            ////////////////////////////////////////////////////////

            function addHetGroupsContainer() {
                var div = document.createElement('div');
                div.id = 'het-groups';
                $('controls').appendChild(div);
            }

            function addControl(label, action) {
                var btn = document.createElement('button');
                btn.onclick = action;
                btn.innerText = label;
                $('controls').appendChild(btn);
            }

            function addSeparator() {
                var hr = document.createElement('hr');
                $('controls').appendChild(hr);
            }

            function addHeader(header) {
                var h = document.createElement('h3');
                h.innerText = header;
                $('controls').appendChild(h);
            }

            function listHetGroups(info) {
                var div = $('het-groups');
                div.innerHTML = '';
                info.hetResidues.forEach(function (r) {
                    var l = document.createElement('button');
                    l.innerText = r.name;
                    l.onclick = function () {
                        PluginWrapper.hetGroups.focusFirst(r.name);
                    };
                    div.appendChild(l);
                });
            }
        </script>
    </body>
</html>