web
/
TmMolStar


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
							<!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) {
                const a = new RegExp(id + '=([^&#=]*)', 'i')
                const m = a.exec(window.location.search)
                return m ? decodeURIComponent(m[1]) : undefined
            }

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

            const pdbId = getQueryParam('pdbId')
            const url = getQueryParam('url')
            const _config = getQueryParam('config')
            const config = _config && JSON.parse(_config)
            const _loadPdbIds = getQueryParam('loadPdbIds')
            const loadPdbIds = _loadPdbIds && JSON.parse(_loadPdbIds)

            // create an instance of the plugin
            const viewer = new rcsbMolstar.Viewer('viewer', {
                showImportControls: !pdbId,
                showExportControls: true,
                showSessionControls: !pdbId,
                layoutShowLog: !pdbId,
                layoutShowControls: !isEmbedded,
                showMembraneOrientationPreset: true,
                detachedFromSierra: true // needed when running without sierra
            })

            // load pdbId or url
            if (pdbId) viewer.loadPdbId(pdbId, config)
            else if (loadPdbIds) viewer.loadPdbIds(loadPdbIds);
            else if (url) viewer.loadUrl(url, config)
        </script>
        <div id="menu">
            <h2> RCSB PDB Mol* Viewer - Test Page</h2>
            <label for="examples">Examples</label>
            <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="motifsAlphaFold()">Motifs AF</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <button style="padding: 3px" onclick="propset()">Propset</button>
        </div>
        <script>

            function loadExample(index) {
                const e = examples[index];
                // let URL, if specified, take precedence over ID
                if (e.url) return viewer.loadStructureFromUrl(e.url, e.format ?? 'mmcif', e.isBinary ?? false, e.config)
                if (e.id) return viewer.loadPdbId(e.id, e.config)
            }

            const examples = [
                {
                    id: '1CRN',
                    info: 'small: only polymer',
                    config: {
                        props: {
                            kind: 'validation'
                        }
                    }
                },
                {
                    id: '3CUP',
                    info: 'small',
                    config: {
                        props: {
                            kind: 'density'
                        }
                    }
                },
                // {
                //     id: '6JI7',
                //     info: 'small: NMR structure with RCI'
                // },
                {
                    id: '3PQR',
                    info: 'medium: polymer, carbs, ligands',
                    config: {
                        props: {
                            kind: 'feature',
                            assemblyId: '2',
                            target: {
                                labelCompId: 'RET'
                            }
                        }
                    }
                },
                {
                    id: '1NMR',
                    info: 'medium: nmr models',
                    config: {
                        props: {
                            kind: 'standard',
                            modelIndex: 2
                        }
                    }
                },
                {
                    id: '4HHB',
                    info: 'medium: classic, lots of validation geometry problems',
                    config: {
                        props: {
                            kind: 'standard',
                            assemblyId: '1'
                        }
                    }
                },
                {
                    id: '1A6D',
                    info: 'medium: dihedral symmetry (D8)',
                    config: {
                        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.',
                    config: {
                        props: {
                            kind: 'feature',
                            target: {
                                labelAsymId: 'E'
                            }
                        }
                    }
                },
                {
                    id: '1BRR',
                    info: 'membrane: X-RAY STRUCTURE OF THE BACTERIORHODOPSIN TRIMER/LIPID COMPLEX with ANVIL membrane prediction',
                    config: {
                        props: {
                            kind: 'membrane'
                        }
                    }
                },
                {
                    id: '3SN6',
                    info: 'membrane: Crystal structure of the beta2 adrenergic receptor-Gs protein complex with ANVIL membrane prediction',
                    config: {
                        props: {
                            kind: 'membrane'
                        }
                    }
                },
                {
                    id: '1SQX',
                    info: 'membrane + assembly: Crystal Structure Analysis of Bovine Bc1 with Stigmatellin A',
                    config: {
                        props: {
                            kind: 'membrane',
                            assemblyId: '1'
                        }
                    }
                },
                {
                    id: '5XES',
                    // this will fail membrane calculation due to tiny size but should still show default representation
                    info: 'failing membrane: TK9 NMR structure in SDS micelle',
                    config: {
                        props: {
                            kind: 'membrane',
                            assemblyId: '1'
                        }
                    }
                },
                {
                    id: '6WJC',
                    info: 'ligand validation: Muscarinic acetylcholine receptor 1 - muscarinic toxin 7 complex: Focus + Density',
                    config: {
                        props: {
                            kind: 'feature-density',
                            target: {
                                labelAsymId: 'D',
                                authSeqId: 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',
                    config: {
                        props: {
                            kind: 'feature',
                            assemblyId: '1',
                            // UR7 is not present in assembly 1
                            target: {
                                labelCompId: 'UR7'
                            }
                        }
                    }
                },
                {
                    id: '5VL5',
                    info: 'motif selection with operator: Coordination Chemistry within a Protein Host: Regulation of the Secondary Coordination Sphere',
                    config: {
                        props: {
                            kind: 'motif',
                            assemblyId: '1',
                            targets: [
                                { labelAsymId: 'A', labelSeqId: 61, operatorName: 'ASM_1' },
                                { labelAsymId: 'A', labelSeqId: 69, operatorName: 'ASM_1' },
                                { labelAsymId: 'A', labelSeqId: 87, operatorName: 'ASM_4' }
                            ],
                        }
                    }
                },
                {
                    id: '5VL5',
                    info: 'motif selection with strucmotif-expression: Coordination Chemistry within a Protein Host: Regulation of the Secondary Coordination Sphere',
                    config: {
                        props: {
                            kind: 'motif',
                            assemblyId: '1',
                            targets: [
                                { labelAsymId: 'A', labelSeqId: 61, structOperId: '1' },
                                { labelAsymId: 'A', labelSeqId: 69, structOperId: '1' },
                                { labelAsymId: 'A', labelSeqId: 87, structOperId: '4' }
                            ],
                        }
                    }
                },
                {
                    id: '2BFU',
                    info: 'motif selection with strucmotif-expression: X-ray structure of CPMV top component',
                    config: {
                        props: {
                            kind: 'motif',
                            assemblyId: '6',
                            targets: [
                                { labelAsymId: 'A', labelSeqId: 46, structOperId: 'X0x5' },
                                { labelAsymId: 'A', labelSeqId: 49, structOperId: 'X0x5' },
                                { labelAsymId: 'A', labelSeqId: 145, structOperId: 'X0x5' }
                            ],
                        }
                    }
                },
                {
                    id: '1G2F',
                    info: 'motif selection with strucmotif-expression & chain: STRUCTURE OF A CYS2HIS2 ZINC FINGER/TATA BOX COMPLEX (TATAZF;CLONE #6)',
                    config: {
                        props: {
                            kind: 'motif',
                            targets: [
                                { labelAsymId: 'F', labelSeqId: 7 },
                                { labelAsymId: 'F', labelSeqId: 25 },
                                { labelAsymId: 'F', labelSeqId: 29 }
                            ],
                        }
                    }
                },
                {
                    id: 'AF-Q8W3K0-F1',
                    url: 'https://alphafold.ebi.ac.uk/files/AF-Q8W3K0-F1-model_v1.cif',
                    info: 'confidence coloring: Probable disease resistance protein At1g58602'
                }
            ];

            const examplesSelect = document.getElementById('examples');
            for (let i = 0, il = examples.length; i < il; ++i) {
                const e = examples[i]
                const 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', { props: { kind: 'standard', assemblyId: '1' } })
                    })
                    .then(function() {
                        return viewer.loadPdbId('1u19', { props: { kind: 'standard', assemblyId: '1' }, matrix: [
                            -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: '4CHA',
                                config: {
                                    props: {
                                        kind: 'motif',
                                        label: '4CHA',
                                        targets: [
                                            { labelAsymId: 'B', structOperId: '1', labelSeqId: 42 },
                                            { labelAsymId: 'B', structOperId: '1', labelSeqId: 87 },
                                            { labelAsymId: 'C', structOperId: '1', labelSeqId: 47 }
                                        ]
                                    }
                                }
                            }, {
                                pdbId: '3RU4',
                                props: {
                                    kind: 'motif',
                                    assemblyId: '1',
                                    label: '3RU4 #2: 0.26 Å',
                                    targets: [
                                        { labelAsymId: 'D', structOperId: '2', labelSeqId: 42 },
                                        { labelAsymId: 'D', structOperId: '2', labelSeqId: 87 },
                                        { labelAsymId: 'E', structOperId: '2', labelSeqId: 46 }
                                    ]
                                },
                                matrix: [-0.049396686, -0.99700946, -0.059431925, 0.0, -0.7568329, 0.076193266, -0.6491522, 0.0, 0.6517392, 0.012914069, -0.7583332, 0.0, 20.371853, 11.498471, 45.705563, 1.0]
                            }
                        ]);
                    });
            }

            function motifs2() {
                viewer.clear()
                    .then(function() {
                        return viewer.loadPdbIds([{
                            pdbId: '1M4X',
                            config: {
                                props: {
                                    label: '1M4X',
                                    kind: 'motif',
                                    // assemblyId: '7', // library should be able to infer assemblyId of the query
                                    targets: [
                                        { labelAsymId: 'C', labelSeqId: 161, structOperId: 'Px81' },
                                        { labelAsymId: 'C', labelSeqId: 165, structOperId: 'Px81' },
                                        { labelAsymId: 'C', labelSeqId: 170, structOperId: 'Px81' }
                                    ],
                                    // color: 13203230
                                }
                            }
                        }, {
                            pdbId: '6KIN',
                            config: {
                                props: {
                                    label: '6KIN @ 1.88 RMSD',
                                    kind: 'motif',
                                    assemblyId: '1',
                                    targets: [
                                        { labelAsymId: 'B', labelSeqId: 160 },
                                        { labelAsymId: 'B', labelSeqId: 163 },
                                        { labelAsymId: 'B', labelSeqId: 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 motifsAlphaFold() {
                viewer.clear()
                    .then(function() {
                        return viewer.loadPdbId('1LAP', {
                            props: {
                                label: '1LAP',
                                kind: 'motif',
                                targets: [
                                    {label_asym_id: 'A', label_seq_id: 332, struct_oper_id: '1'},
                                    {label_asym_id: 'A', label_seq_id: 334, struct_oper_id: '1'},
                                    {label_asym_id: 'A', label_seq_id: 255, struct_oper_id: '1'},
                                    {label_asym_id: 'A', label_seq_id: 273, struct_oper_id: '1'},
                                    {label_asym_id: 'A', label_seq_id: 250, struct_oper_id: '1'}
                                ],
                            }
                        });
                    })
                    .then(function() {
                        const url = 'https://alphafold.ebi.ac.uk/files/AF-F1Q6S1-F1-model_v1.cif';
                        const label = 'AF-F1Q6S1-F1 @ 0.23 RMSD';
                        const targets = [
                            // AF target must be devoid of struct_oper_id
                            { label_asym_id: 'A', label_seq_id: 260 },
                            { label_asym_id: 'A', label_seq_id: 265 },
                            { label_asym_id: 'A', label_seq_id: 283 },
                            { label_asym_id: 'A', label_seq_id: 342 },
                            { label_asym_id: 'A', label_seq_id: 344 }
                        ];
                        const mat = [-0.471, 0.856, 0.215, 0, 0.405, -0.007, 0.914, 0, 0.784, 0.518, -0.343, 0, 54.981, 65.575, 12.287, 1];
                        return viewer.loadStructureFromUrl(url, 'mmcif', false, { props: { kind: 'motif', label, targets } }, mat);
                    })
                    .then(function() {
                        viewer.resetCamera(0)
                    });
            }

            function propset() {
                viewer.clear()
                    .then(function () {
                        return viewer.loadPdbIds([{
                            pdbId: '4HHB',
                            config: {
                                props: {
                                    kind: 'prop-set',
                                    representation: [{
                                        name: 'color',
                                        targets: [{
                                            labelAsymId: 'A',
                                            labelSeqRange: { beg: 4, end: 141 }
                                        }],
                                        value: 13203230
                                    }],
                                    targets: [{
                                        labelAsymId: 'A',
                                        labelSeqRange: { beg: 4, end: 141 }
                                    }]
                                }
                            }
                        }, {
                            pdbId: '1OJ6',
                            config: {
                                props: {
                                    kind: 'prop-set',
                                    representation: [{
                                        name: 'color',
                                        targets: [{
                                            labelAsymId: 'A',
                                            labelSeqRange: { beg: 3, end: 44 }
                                        }, {
                                            labelAsymId: 'A',
                                            labelSeqRange: { beg: 48, end: 49 }
                                        }, {
                                            labelAsymId: 'A',
                                            labelSeqRange: { beg: 54, end: 95 }
                                        }, {
                                            labelAsymId: 'A',
                                            labelSeqRange: { beg: 98, end: 149 }
                                        }],
                                        value: 4947916
                                    }],
                                    targets: [{
                                        labelAsymId: 'A',
                                        labelSeqRange: { beg: 3, end: 44 }
                                    }, {
                                        labelAsymId: 'A',
                                        labelSeqRange: { beg: 48, end: 49 }
                                    }, {
                                        labelAsymId: 'A',
                                        labelSeqRange: { beg: 54, end: 95 }
                                    }, {
                                        labelAsymId: 'A',
                                        labelSeqRange: { 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>