web
/
TmMolStar


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
							<!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,
                showMembraneOrientationPreset: true
            })

            // 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;

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

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

            <button style="padding: 3px;" onclick="motifs1()">Motifs 1</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <button style="padding: 3px;" onclick="motifs2()">Motifs 2</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <button style="padding: 3px" onclick="propset()">Propset</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 with ANVIL membrane prediction',
                    props: {
                        kind: 'membrane'
                    }
                },
                {
                    id: '3SN6',
                    info: 'membrane: Crystal structure of the beta2 adrenergic receptor-Gs protein complex with ANVIL membrane prediction',
                    props: {
                        kind: 'membrane'
                    }
                },
                {
                    id: '1SQX',
                    info: 'membrane + assembly: Crystal Structure Analysis of Bovine Bc1 with Stigmatellin A',
                    props: {
                        kind: 'membrane',
                        assemblyId: '1'
                    }
                },
                {
                    id: '6WJC',
                    info: 'ligand validation: Muscarinic acetylcholine receptor 1 - muscarinic toxin 7 complex: Focus + Density',
                    props: {
                        kind: 'feature-density',
                        target: {
                            label_asym_id: 'D',
                            auth_seq_id: 502
                        },
                        // radius: 0,
                        // hiddenChannels: ['fo-fc(+ve)', 'fo-fc(-ve)']
                    }
                },
                {
                    id: '5RL9',
                    info: 'ligand focus on wrong assembly: Crystal Structure of SARS-CoV-2 helicase in complex with Z1703168683',
                    props: {
                        kind: 'feature',
                        assemblyId: '1',
                        // UR7 is not present in assembly 1
                        target: {
                            label_comp_id: 'UR7'
                        }
                    }
                },
                {
                    id: '5VL5',
                    info: 'motif selection with operator: Coordination Chemistry within a Protein Host: Regulation of the Secondary Coordination Sphere',
                    props: {
                        kind: 'motif',
                        assemblyId: '1',
                        targets: [
                            { label_asym_id: 'A', label_seq_id: 61 },
                            { label_asym_id: 'A', label_seq_id: 69 },
                            { label_asym_id: 'A', label_seq_id: 87, operatorName: 'ASM_4' }
                        ],
                    }
                },
                {
                    id: '5VL5',
                    info: 'motif selection with strucmotif-expression: Coordination Chemistry within a Protein Host: Regulation of the Secondary Coordination Sphere',
                    props: {
                        kind: 'motif',
                        assemblyId: '1',
                        targets: [
                            { label_asym_id: 'A', label_seq_id: 61 },
                            { label_asym_id: 'A', label_seq_id: 69 },
                            { label_asym_id: 'A', label_seq_id: 87, struct_oper_id: '4' }
                        ],
                    }
                },
                {
                    id: '2BFU',
                    info: 'motif selection with strucmotif-expression: X-ray structure of CPMV top component',
                    props: {
                        kind: 'motif',
                        assemblyId: '6',
                        targets: [
                            { label_asym_id: 'A', label_seq_id: 46, struct_oper_id: 'X0x5' },
                            { label_asym_id: 'A', label_seq_id: 49, struct_oper_id: 'X0x5' },
                            { label_asym_id: 'A', label_seq_id: 145, struct_oper_id: 'X0x5' }
                        ],
                    }
                },
                {
                    id: '1G2F',
                    info: 'motif selection with strucmotif-expression & chain: STRUCTURE OF A CYS2HIS2 ZINC FINGER/TATA BOX COMPLEX (TATAZF;CLONE #6)',
                    props: {
                        kind: 'motif',
                        targets: [
                            { label_asym_id: 'F', label_seq_id: 7 },
                            { label_asym_id: 'F', label_seq_id: 25 },
                            { label_asym_id: 'F', label_seq_id: 29 }
                        ],
                    }
                }
            ];

            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 motifs1() {
                viewer.clear()
                    .then(function() {
                        return viewer.loadPdbIds([{
                            pdbId: '5CBG',
                            props: {
                                label: '5CBG',
                                kind: 'motif',
                                // assemblyId: '2', // library should be able to infer assemblyId of the query
                                targets: [
                                    { label_asym_id: 'C', label_seq_id: 30, struct_oper_id: '3' },
                                    { label_asym_id: 'C', label_seq_id: 32, struct_oper_id: '3' },
                                    { label_asym_id: 'C', label_seq_id: 34, struct_oper_id: '3' }
                                ],
                                // color: 13203230
                            }
                        }, {
                            pdbId: '2W02',
                            props: {
                                label: '2W02 #1',
                                kind: 'motif',
                                assemblyId: '2',
                                targets: [
                                    { label_asym_id: 'B', label_seq_id: 519 },
                                    { label_asym_id: 'B', label_seq_id: 517 },
                                    { label_asym_id: 'B', label_seq_id: 515 }
                                ],
                                // color: 4947916
                            },
                            matrix: [
                                0.7953831708253857, -0.6048923987758781, 0.03835097744411625, 0,
                                -0.23732979915044658, -0.2525976533016715, 0.9380133218572628, 0,
                                -0.5577097614377604, -0.7551818399893184, -0.344470913935246, 0,
                                154.77888998938096, 207.0215940587305, 25.17873980937774, 1
                            ]
                        }]);
                    })
                    .then(function() {
                        viewer.resetCamera(0)
                    });
            }

            function motifs2() {
                viewer.clear()
                    .then(function() {
                        return viewer.loadPdbIds([{
                            pdbId: '1M4X',
                            props: {
                                label: '1M4X',
                                kind: 'motif',
                                // assemblyId: '7', // library should be able to infer assemblyId of the query
                                targets: [
                                    { label_asym_id: 'C', label_seq_id: 161, struct_oper_id: 'Px81' },
                                    { label_asym_id: 'C', label_seq_id: 165, struct_oper_id: 'Px81' },
                                    { label_asym_id: 'C', label_seq_id: 170, struct_oper_id: 'Px81' }
                                ],
                                // color: 13203230
                            }
                        }, {
                            pdbId: '6KIN',
                            props: {
                                label: '6KIN @ 1.88 RMSD',
                                kind: 'motif',
                                assemblyId: '1',
                                targets: [
                                    { label_asym_id: 'B', label_seq_id: 160 },
                                    { label_asym_id: 'B', label_seq_id: 163 },
                                    { label_asym_id: 'B', label_seq_id: 167 }
                                ],
                                // color: 13203230
                            },
                            matrix: [
                                -0.8175763932146345, -0.5719837107806522, 0.0663586909134339, 0,
                                -0.4927708198934652, 0.7546183669143351, 0.43327593907008527, 0,
                                -0.29790226638894773, 0.32153655300313416, -0.8988150448024284, 0,
                                340.5134831570596, -107.81055538151446, 774.3972821273203, 1.0
                            ]
                        }]);
                    })
                    .then(function() {
                        viewer.resetCamera(0)
                    });
            }

            function propset() {
                viewer.clear()
                    .then(function () {
                        return viewer.loadPdbIds([{
                            pdbId: '4HHB',
                            props: {
                                kind: 'prop-set',
                                representation: [{
                                    name: 'color',
                                    positions: [{
                                        label_asym_id: 'A',
                                        label_seq_id: { beg: 4, end: 141 }
                                    }],
                                    value: 13203230
                                }],
                                selection: [{
                                    label_asym_id: 'A',
                                    label_seq_id: { beg: 4, end: 141 }
                                }]
                            }
                        }, {
                            pdbId: '1OJ6',
                            props: {
                                kind: 'prop-set',
                                representation: [{
                                    name: 'color',
                                    positions: [{
                                        label_asym_id: 'A',
                                        label_seq_id: { beg: 3, end: 44 }
                                    }, {
                                        label_asym_id: 'A',
                                        label_seq_id: { beg: 48, end: 49 }
                                    }, {
                                        label_asym_id: 'A',
                                        label_seq_id: { beg: 54, end: 95 }
                                    }, {
                                        label_asym_id: 'A',
                                        label_seq_id: { beg: 98, end: 149 }
                                    }],
                                    value: 4947916
                                }],
                                selection: [{
                                    label_asym_id: 'A',
                                    label_seq_id: { beg: 3, end: 44 }
                                }, {
                                    label_asym_id: 'A',
                                    label_seq_id: { beg: 48, end: 49 }
                                }, {
                                    label_asym_id: 'A',
                                    label_seq_id: { beg: 54, end: 95 }
                                }, {
                                    label_asym_id: 'A',
                                    label_seq_id: { beg: 98, end: 149 }
                                }]
                            },
                            matrix: [
                                -0.6263111483773867, -0.38259812283613237, -0.6792297268380318, 0.0,
                                0.3014888059527303, 0.6846150421427817, -0.6636314820418288, 0.0,
                                0.7189150473480135, -0.6204199549290021, -0.313432982027257, 0.0,
                                -30.829713890311414, 24.04442469172666, 55.437150645037654, 1.0
                            ]
                        }]);
                    })
                    .then(function () {
                        viewer.resetCamera(0)
                    });
            }
        </script>
    </body>
</html>