web
/
TmMolStar


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
							<!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">
        <link rel="icon" href="./favicon.ico" type="image/x-icon">
        <title>RCSB PDB Mol* Viewer</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            #viewer {
                position: absolute;
                left: 5%;
                top: 100px;
                min-width: 90%;
                height: 85%;
            }

            .msp-layout-expanded {
                z-index: 10;
            }

            #menu {
                position: absolute;
                left: 5%;
                top: 20px;
            }

            #menu > select {
                width: 200px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="rcsb-molstar.css" />
        <script type="text/javascript" src="./rcsb-molstar.js"></script>
    </head>
    <body>
        <div id="viewer"></div>
        <script>
            function getQueryParam(id) {
                var a = new RegExp(id + '=([^&#=]*)', 'i')
                var m = a.exec(window.location.search)
                return m ? decodeURIComponent(m[1]) : undefined
            }

            var isEmbedded = getQueryParam('embedded') === '1';

            var pdbId = getQueryParam('pdbId')
            var url = getQueryParam('url')
            var _props = getQueryParam('props')
            var props = _props && JSON.parse(_props)
            var _loadPdbIds = getQueryParam('loadPdbIds')
            var loadPdbIds = _loadPdbIds && JSON.parse(_loadPdbIds)

            // create an instance of the plugin
            var viewer = new rcsbMolstar.Viewer('viewer', {
                showImportControls: !pdbId,
                showExportControls: true,
                showSessionControls: !pdbId,
                layoutShowLog: !pdbId,
                layoutShowControls: !isEmbedded,
            })

            // load pdbId or url
            if (pdbId) viewer.loadPdbId(pdbId, props)
            else if (loadPdbIds) viewer.loadPdbIds(loadPdbIds);
            else if (url) viewer.loadUrl(url, props)
        </script>
        <div id="menu">
            <h2> RCSB PDB Mol* Viewer - Test Page</h2>
            Examples
            <select id="examples" onchange="loadExample(parseInt(this.value))">
                <option value=''></option>
            </select>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            Clear
            <button style="padding: 3px;" onclick="viewer.clear()">all</button>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            Superposed
            <button style="padding: 3px;" onclick="superposed()">3PQR | 1U19</button>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            Ligand Focus on wrong assembly
            <button style="padding: 3px" onclick="ligandAssembly()">5RLA</button>
        </div>
        <script>

            function loadExample(index) {
                var e = examples[index]
                viewer.loadPdbId(e.id, e.props)
            }

            var examples = [
                {
                    id: '1CRN',
                    info: 'small: only polymer',
                    props: {
                        kind: 'validation'
                    }
                },
                {
                    id: '3CUP',
                    info: 'small',
                    props: {
                        kind: 'density'
                    }
                },
                {
                    id: '6JI7',
                    info: 'small: NMR structure with RCI'
                },
                {
                    id: '3PQR',
                    info: 'medium: polymer, carbs, ligands',
                    props: {
                        kind: 'feature',
                        assemblyId: '2',
                        target: {
                            label_comp_id: 'RET'
                        }
                    }
                },
                {
                    id: '1NMR',
                    info: 'medium: nmr models',
                    props: {
                        kind: 'standard',
                        modelIndex: 2
                    }
                },
                {
                    id: '4HHB',
                    info: 'medium: classic, lots of validation geometry problems',
                    props: {
                        kind: 'standard',
                        assemblyId: '1'
                    }
                },
                {
                    id: '1A6D',
                    info: 'medium: dihedral symmetry (D8)',
                    props: {
                        kind: 'symmetry',
                        assemblyId: '1',
                        symmetryIndex: 1
                    }
                },
                {
                    id: '1LTI',
                    info: 'medium: local symmetry (C5)'
                },
                {
                    id: '1QO1',
                    info: 'medium: C-alpha only, local symmetries (C10, C3)'
                },
                {
                    id: '6V9Q',
                    info: 'medium: local symmetries (H, C2)'
                },
                {
                    id: '6R6B',
                    info: 'medium: local symmetries (H x2)'
                },
                {
                    id: '2VTU',
                    info: 'medium: octahedral symmetry (O)'
                },
                {
                    id: '4NWP',
                    info: 'medium: tetrahedral symmetry (T)'
                },
                {
                    id: '1RB8',
                    info: 'medium-large: small virus capsid, icosahedral symmetry (I)'
                },
                {
                    id: '6QVK',
                    info: 'large: The cryo-EM structure of bacteriophage phi29 prohead (C5)'
                },
                {
                    id: '5Y6P',
                    info: 'large: Structure of the phycobilisome from the red alga Griffithsia pacifica'
                },
                {
                    id: '6O2S',
                    info: 'large: Deacetylated Microtubules (H)'
                },
                {
                    id: '5MQ7',
                    info: 'large: Structure of AaLS-13'
                },
                {
                    id: '5IV5',
                    info: 'large: Cryo-electron microscopy structure of the hexagonal pre-attachment T4 baseplate-tail tube complex'
                },
                {
                    id: '3JC8',
                    info: 'large: Architectural model of the type IVa pilus machine in a piliated state'
                },
                {
                    id: '4V99',
                    info: 'large: The Crystallographic Structure of Panicum Mosaic Virus'
                },
                {
                    id: '3J3Q',
                    info: 'large: Atomic-level structure of the entire HIV-1 capsid'
                },
                {
                    id: '6NCL',
                    info: 'large: Near-atomic structure of icosahedrally averaged PBCV-1 capsid'
                },
                {
                    id: '6EKC',
                    info: 'large: Crystal structure of the BSD2 homolog of Arabidopsis thaliana bound to the octameric assembly of RbcL from Thermosynechococcus elongatus'
                },
                {
                    id: '1M4X',
                    info: 'large: PBCV-1 virus capsid, quasi-atomic model'
                },
                {
                    id: '4V5A',
                    info: 'large: Structure of the Ribosome Recycling Factor bound to the Thermus thermophilus 70S ribosome with mRNA, ASL-Phe and tRNA-fMet'
                },
                {
                    id: '4UDF',
                    info: 'large: STRUCTURAL BASIS OF HUMAN PARECHOVIRUS NEUTRALIZATION BY HUMAN MONOCLONAL ANTIBODIES'
                },
                {
                    id: '6J5K',
                    info: 'Cryo-EM structure of the mammalian ATP synthase tetramer bound with inhibitory protein IF1'
                },
                {
                    id: '6RVV',
                    info: 'Structure of left-handed protein cage consisting of 24 eleven-membered ring proteins held together by gold (I) bridges.'
                },
                {
                    id: '6EK5',
                    info: 'Near-atomic resolution structure of a plant geminivirus determined by electron cryo-microscopy'
                },
                {
                    id: '4V93',
                    info: 'Fitted coordinates for Lumbricus terrestris hemoglobin cryo-EM complex'
                },
                {
                    id: '5VLZ',
                    info: 'Backbone model for phage Qbeta capsid'
                },
                {
                    id: '5XTI',
                    info: 'Cryo-EM architecture of human respiratory chain megacomplex-I2III2IV2'
                },
                {
                    id: '6BY7',
                    info: 'Folding DNA into a lipid-conjugated nano-barrel for controlled reconstitution of membrane proteins'
                },
                {
                    id: '6C50',
                    info: 'Cross-alpha Amyloid-like Structure alphaAmS'
                },
                {
                    id: '6K3I',
                    info: 'Salmonella hook in curved state - 66 subunit models'
                },
                {
                    id: '1UNO',
                    info: 'Crystal structure of a d,l-alternating peptide. Double-starnded helix from beta-sheets.'
                },
                {
                    id: '1GRM',
                    info: 'REFINEMENT OF THE SPATIAL STRUCTURE OF THE GRAMICIDIN A TRANSMEMBRANE ION-CHANNEL. Single-starnded helix from beta-sheet. NMR structure.'
                },
                {
                    id: '1B5F',
                    info: 'oligosaccharide: NATIVE CARDOSIN A FROM CYNARA CARDUNCULUS L.',
                    props: {
                        kind: 'feature',
                        target: {
                            label_asym_id: 'E'
                        }
                    }
                },
                {
                    id: '1BRR',
                    info: 'membrane: X-RAY STRUCTURE OF THE BACTERIORHODOPSIN TRIMER/LIPID COMPLEX',
                    props: {
                        kind: 'membrane'
                    }
                },
                {
                    id: '3SN6',
                    info: 'membrane: Crystal structure of the beta2 adrenergic receptor-Gs protein complex with ANVIL membrane prediction',
                    props: {
                        kind: 'membrane'
                    }
                }
            ];

            var examplesSelect = document.getElementById('examples');
            for (var i = 0, il = examples.length; i < il; ++i) {
                var e = examples[i]
                var option = document.createElement('option')
                Object.assign(option, { text: '[' + e.id + '] ' + e.info, value: i })
                examplesSelect.appendChild(option)
            }

            //

            function superposed() {
                viewer.clear()
                    .then(function() {
                        return viewer.loadPdbId('3pqr', { kind: 'standard', assemblyId: '1' })
                    })
                    .then(function() {
                        return viewer.loadPdbId('1u19', { kind: 'standard', assemblyId: '1' }, [
                            -0.67160917400372, 0.28222298510688404, 0.6850488398834855, 0,
                            0.13262098666685063, 0.9554691407700946, -0.26361033961856695, 0,
                            -0.7289399153866256, -0.08619120567473626, -0.6791305379047228, 0,
                            -7.602670654900173, -30.317901981509067, 24.605855585357773, 1
                        ])
                    })
                    .then(function() {
                        viewer.resetCamera(0)
                    });
            }

            function ligandAssembly() {
                viewer.clear()
                    .then(function() {
                        // UR7 is not present in assembly 1
                        return viewer.loadPdbId('5RL9', { kind: 'feature', assemblyId: '1', target: { label_comp_id: 'UR7' } });
                    });
            }
        </script>
    </body>
</html>