ソースを参照

update index.html to accommodate signature changes

JonStargaryen 3 年 前
コミット
c7af5fd32a
2 ファイル変更348 行追加304 行削除
  1. 1 1
      CHANGELOG.md
  2. 347 303
      src/viewer/index.html

+ 1 - 1
CHANGELOG.md

@@ -5,7 +5,7 @@
 ## [2.0.0]
 ### Breaking changes
 - `loadStructureFromData()` is not async anymore
-- Removed `pluginCall()` and `getPlugin()` - replaced by `plugin()` getter
+- Replaced `getPlugin()` by `plugin()` getter
 - Signature changes to `setFocus()`, `select()`, `clearSelection()`, and `createComponent()`
   - Effectively the overloaded methods were replaced by ones that use `Target` objects to reference residues/ranges
 - Merged `Range` into `Target`

+ 347 - 303
src/viewer/index.html

@@ -49,8 +49,8 @@
 
             var pdbId = getQueryParam('pdbId')
             var url = getQueryParam('url')
-            var _props = getQueryParam('props')
-            var props = _props && JSON.parse(_props)
+            var _config = getQueryParam('config')
+            var config = _config && JSON.parse(_config)
             var _loadPdbIds = getQueryParam('loadPdbIds')
             var loadPdbIds = _loadPdbIds && JSON.parse(_loadPdbIds)
 
@@ -65,9 +65,9 @@
             })
 
             // load pdbId or url
-            if (pdbId) viewer.loadPdbId(pdbId, props)
+            if (pdbId) viewer.loadPdbId(pdbId, config)
             else if (loadPdbIds) viewer.loadPdbIds(loadPdbIds);
-            else if (url) viewer.loadUrl(url, props)
+            else if (url) viewer.loadUrl(url, config)
         </script>
         <div id="menu">
             <h2> RCSB PDB Mol* Viewer - Test Page</h2>
@@ -99,294 +99,326 @@
 
             function loadExample(index) {
                 var e = examples[index]
-                viewer.loadPdbId(e.id, e.props)
+                viewer.loadPdbId(e.id, e.config)
             }
 
             var examples = [
                 {
                     id: '1CRN',
                     info: 'small: only polymer',
-                    props: {
-                        kind: 'validation'
+                    config: {
+                        props: {
+                            kind: 'validation'
+                        }
                     }
                 },
                 {
                     id: '3CUP',
                     info: 'small',
-                    props: {
-                        kind: 'density'
+                    config: {
+                        props: {
+                            kind: 'density'
+                        }
                     }
                 },
-                {
-                    id: '6JI7',
-                    info: 'small: NMR structure with RCI'
-                },
+                // {
+                //     id: '6JI7',
+                //     info: 'small: NMR structure with RCI'
+                // },
                 {
                     id: '3PQR',
                     info: 'medium: polymer, carbs, ligands',
-                    props: {
-                        kind: 'feature',
-                        assemblyId: '2',
-                        target: {
-                            labelCompId: 'RET'
+                    config: {
+                        props: {
+                            kind: 'feature',
+                            assemblyId: '2',
+                            target: {
+                                labelCompId: 'RET'
+                            }
                         }
                     }
                 },
                 {
                     id: '1NMR',
                     info: 'medium: nmr models',
-                    props: {
-                        kind: 'standard',
-                        modelIndex: 2
+                    config: {
+                        props: {
+                            kind: 'standard',
+                            modelIndex: 2
+                        }
                     }
                 },
                 {
                     id: '4HHB',
                     info: 'medium: classic, lots of validation geometry problems',
-                    props: {
-                        kind: 'standard',
-                        assemblyId: '1'
+                    config: {
+                        props: {
+                            kind: 'standard',
+                            assemblyId: '1'
+                        }
                     }
                 },
                 {
                     id: '1A6D',
                     info: 'medium: dihedral symmetry (D8)',
-                    props: {
-                        kind: 'symmetry',
-                        assemblyId: '1',
-                        symmetryIndex: 1
+                    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: '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: {
-                            labelAsymId: 'E'
+                    config: {
+                        props: {
+                            kind: 'feature',
+                            target: {
+                                labelAsymId: 'E'
+                            }
                         }
                     }
                 },
                 {
                     id: '1BRR',
                     info: 'membrane: X-RAY STRUCTURE OF THE BACTERIORHODOPSIN TRIMER/LIPID COMPLEX with ANVIL membrane prediction',
-                    props: {
-                        kind: 'membrane'
+                    config: {
+                        props: {
+                            kind: 'membrane'
+                        }
                     }
                 },
                 {
                     id: '3SN6',
                     info: 'membrane: Crystal structure of the beta2 adrenergic receptor-Gs protein complex with ANVIL membrane prediction',
-                    props: {
-                        kind: 'membrane'
+                    config: {
+                        props: {
+                            kind: 'membrane'
+                        }
                     }
                 },
                 {
                     id: '1SQX',
                     info: 'membrane + assembly: Crystal Structure Analysis of Bovine Bc1 with Stigmatellin A',
-                    props: {
-                        kind: 'membrane',
-                        assemblyId: '1'
+                    config: {
+                        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: {
-                            labelAsymId: 'D',
-                            authSeqId: 502
-                        },
-                        // radius: 0,
-                        // hiddenChannels: ['fo-fc(+ve)', 'fo-fc(-ve)']
+                    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',
-                    props: {
-                        kind: 'feature',
-                        assemblyId: '1',
-                        // UR7 is not present in assembly 1
-                        target: {
-                            labelCompId: 'UR7'
+                    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',
-                    props: {
-                        kind: 'motif',
-                        assemblyId: '1',
-                        targets: [
-                            { labelAsymId: 'A', labelSeqId: 61 },
-                            { labelAsymId: 'A', labelSeqId: 69 },
-                            { labelAsymId: 'A', labelSeqId: 87, operatorName: 'ASM_4' }
-                        ],
+                    config: {
+                        props: {
+                            kind: 'motif',
+                            assemblyId: '1',
+                            targets: [
+                                { labelAsymId: 'A', labelSeqId: 61 },
+                                { labelAsymId: 'A', labelSeqId: 69 },
+                                { 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',
-                    props: {
-                        kind: 'motif',
-                        assemblyId: '1',
-                        targets: [
-                            { labelAsymId: 'A', labelSeqId: 61 },
-                            { labelAsymId: 'A', labelSeqId: 69 },
-                            { labelAsymId: 'A', labelSeqId: 87, structOperId: '4' }
-                        ],
+                    config: {
+                        props: {
+                            kind: 'motif',
+                            assemblyId: '1',
+                            targets: [
+                                { labelAsymId: 'A', labelSeqId: 61 },
+                                { labelAsymId: 'A', labelSeqId: 69 },
+                                { labelAsymId: 'A', labelSeqId: 87, structOperId: '4' }
+                            ],
+                        }
                     }
                 },
                 {
                     id: '2BFU',
                     info: 'motif selection with strucmotif-expression: X-ray structure of CPMV top component',
-                    props: {
-                        kind: 'motif',
-                        assemblyId: '6',
-                        targets: [
-                            { labelAsymId: 'A', labelSeqId: 46, structOperId: 'X0x5' },
-                            { labelAsymId: 'A', labelSeqId: 49, structOperId: 'X0x5' },
-                            { labelAsymId: 'A', labelSeqId: 145, structOperId: 'X0x5' }
-                        ],
+                    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)',
-                    props: {
-                        kind: 'motif',
-                        targets: [
-                            { labelAsymId: 'F', labelSeqId: 7 },
-                            { labelAsymId: 'F', labelSeqId: 25 },
-                            { labelAsymId: 'F', labelSeqId: 29 }
-                        ],
+                    config: {
+                        props: {
+                            kind: 'motif',
+                            targets: [
+                                { labelAsymId: 'F', labelSeqId: 7 },
+                                { labelAsymId: 'F', labelSeqId: 25 },
+                                { labelAsymId: 'F', labelSeqId: 29 }
+                            ],
+                        }
                     }
                 }
             ];
@@ -404,15 +436,15 @@
             function superposed() {
                 viewer.clear()
                     .then(function() {
-                        return viewer.loadPdbId('3pqr', { kind: 'standard', assemblyId: '1' })
+                        return viewer.loadPdbId('3pqr', { props: { kind: 'standard', assemblyId: '1' } })
                     })
                     .then(function() {
-                        return viewer.loadPdbId('1u19', { kind: 'standard', assemblyId: '1' }, [
+                        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)
@@ -424,36 +456,40 @@
                     .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: [
-                                    { labelAsymId: 'C', labelSeqId: 30, structOperId: '3' },
-                                    { labelAsymId: 'C', labelSeqId: 32, structOperId: '3' },
-                                    { labelAsymId: 'C', labelSeqId: 34, structOperId: '3' }
-                                ],
-                                // color: 13203230
+                            config: {
+                                props: {
+                                    label: '5CBG',
+                                    kind: 'motif',
+                                    // assemblyId: '2', // library should be able to infer assemblyId of the query
+                                    targets: [
+                                        { labelAsymId: 'C', labelSeqId: 30, structOperId: '3' },
+                                        { labelAsymId: 'C', labelSeqId: 32, structOperId: '3' },
+                                        { labelAsymId: 'C', labelSeqId: 34, structOperId: '3' }
+                                    ],
+                                    // color: 13203230
+                                }
                             }
                         }, {
                             pdbId: '2W02',
-                            props: {
-                                label: '2W02 #1',
-                                kind: 'motif',
-                                assemblyId: '2',
-                                targets: [
-                                    { labelAsymId: 'B', labelSeqId: 519 },
-                                    { labelAsymId: 'B', labelSeqId: 517 },
-                                    { labelAsymId: 'B', labelSeqId: 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
-                            ]
+                            config: {
+                                props: {
+                                    label: '2W02 #1',
+                                    kind: 'motif',
+                                    assemblyId: '2',
+                                    targets: [
+                                        { labelAsymId: 'B', labelSeqId: 519 },
+                                        { labelAsymId: 'B', labelSeqId: 517 },
+                                        { labelAsymId: 'B', labelSeqId: 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() {
@@ -466,36 +502,40 @@
                     .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: [
-                                    { labelAsymId: 'C', labelSeqId: 161, structOperId: 'Px81' },
-                                    { labelAsymId: 'C', labelSeqId: 165, structOperId: 'Px81' },
-                                    { labelAsymId: 'C', labelSeqId: 170, structOperId: 'Px81' }
-                                ],
-                                // color: 13203230
+                            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',
-                            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
-                            ]
+                            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() {
@@ -508,27 +548,45 @@
                     .then(function () {
                         return viewer.loadPdbIds([{
                             pdbId: '4HHB',
-                            props: {
-                                kind: 'prop-set',
-                                representation: [{
-                                    name: 'color',
+                            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 }
-                                    }],
-                                    value: 13203230
-                                }],
-                                targets: [{
-                                    labelAsymId: 'A',
-                                    labelSeqRange: { beg: 4, end: 141 }
-                                }]
+                                    }]
+                                }
                             }
                         }, {
                             pdbId: '1OJ6',
-                            props: {
-                                kind: 'prop-set',
-                                representation: [{
-                                    name: 'color',
+                            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 }
@@ -541,29 +599,15 @@
                                     }, {
                                         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
-                            ]
+                                    }]
+                                },
+                                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 () {