added examples dropdown to canvas app

src/apps/canvas/component/app.tsx

@@ -9,17 +9,7 @@ import { StructureView } from '../structure-view';
 import { App } from '../app';
 import { Viewport } from './viewport';
 import { StructureViewComponent } from './structure-view';
-
-// export function FileInput (props: {
-//     accept: string
-//     onChange: (v: FileList | null) => void,
-// }) {
-//     return <input
-//         accept={props.accept || '*.*'}
-//         type='file'
-//         onChange={e => props.onChange.call(null, e.target.files)}
-//     />
-// }
+import { Examples } from '../examples';
 
 export interface AppProps {
     app: App
@@ -75,6 +65,20 @@ export class AppComponent extends React.Component<AppProps, AppState> {
                         }}
                     />
                 </div>
+                <div>
+                    <span>Load example </span>
+                    <select
+                        style={{width: '200px'}}
+                        onChange={e => {
+                            this.props.app.loadPdbId(e.target.value)
+                        }}
+                    >
+                        <option value=''></option>
+                        {Examples.map(({pdbId, description}, i) => {
+                            return <option key={i} value={pdbId}>{`${pdbId} - ${description}`}</option>
+                        })}
+                    </select>
+                </div>
                 <hr/>
                 <div style={{marginBottom: '10px'}}>
                     {structureView ? <StructureViewComponent structureView={structureView} /> : ''}

src/apps/canvas/examples.ts

@@ -0,0 +1,169 @@
+
+
+export interface Example {
+    pdbId: string
+    description: string
+}
+
+export const Examples: Example[] = [
+    {
+        pdbId: '1jj2',
+        description: 'ribosome'
+    },
+    {
+        pdbId: '1grm',
+        description: 'helix-like sheets'
+    },
+    {
+        pdbId: '4umt',
+        description: 'ligand has bond with order 3'
+    },
+    {
+        pdbId: '1crn',
+        description: 'small'
+    },
+    {
+        pdbId: '1hrv',
+        description: 'viral assembly'
+    },
+    {
+        pdbId: '1rb8',
+        description: 'virus'
+    },
+    {
+        pdbId: '1blu',
+        description: 'metal coordination'
+    },
+    {
+        pdbId: '3pqr',
+        description: 'inter unit bonds, two polymer chains, ligands, water, carbohydrates linked to protein'
+    },
+    {
+        pdbId: '4v5a',
+        description: 'ribosome'
+    },
+    {
+        pdbId: '3j3q',
+        description: '...'
+    },
+    {
+        pdbId: '2np2',
+        description: 'dna'
+    },
+    {
+        pdbId: '1d66',
+        description: 'dna'
+    },
+    {
+        pdbId: '9dna',
+        description: 'A form dna'
+    },
+    {
+        pdbId: '1bna',
+        description: 'B form dna'
+    },
+    {
+        pdbId: '199d',
+        description: 'C form dna'
+    },
+    {
+        pdbId: '4lb6',
+        description: 'Z form dna'
+    },
+    {
+        pdbId: '1egk',
+        description: '4-way dna-rna junction'
+    },
+    {
+        pdbId: '1y26',
+        description: 'rna'
+    },
+    {
+        pdbId: '1xv6',
+        description: 'rna, modified nucleotides'
+    },
+    {
+        pdbId: '3bbm',
+        description: 'rna with linker'
+    },
+    {
+        pdbId: '1euq',
+        description: 't-rna'
+    },
+    {
+        pdbId: '2e2i',
+        description: 'rna, dna, protein'
+    },
+    {
+        pdbId: '1gfl',
+        description: 'GFP, flourophore has carbonyl oxygen removed'
+    },
+    {
+        pdbId: '1sfi',
+        description: 'contains cyclic peptid'
+    },
+    {
+        pdbId: '3sn6',
+        description: 'discontinuous chains'
+    },
+    {
+        pdbId: '2zex',
+        description: 'contains carbohydrate polymer'
+    },
+    {
+        pdbId: '3sgj',
+        description: 'contains carbohydrate polymer'
+    },
+    {
+        pdbId: '3ina',
+        description: 'contains GlcN and IdoA'
+    },
+    {
+        pdbId: '1umz',
+        description: 'contains Xyl (Xyloglucan)'
+    },
+    {
+        pdbId: '1mfb',
+        description: 'contains Abe'
+    },
+    {
+        pdbId: '2gdu',
+        description: 'contains sucrose'
+    },
+    {
+        pdbId: '2fnc',
+        description: 'contains maltotriose'
+    },
+    {
+        pdbId: '4zs9',
+        description: 'contains raffinose'
+    },
+    {
+        pdbId: '2yft',
+        description: 'contains kestose'
+    },
+    {
+        pdbId: '2b5t',
+        description: 'contains large carbohydrate polymer'
+    },
+    {
+        pdbId: '1b5f',
+        description: 'contains carbohydrate with alternate locations'
+    },
+    {
+        pdbId: '5u0q',
+        description: 'mixed dna/rna in same polymer'
+    },
+    {
+        pdbId: '1xj9',
+        description: 'PNA (peptide nucleic acid)'
+    },
+    {
+        pdbId: '5eme',
+        description: 'PNA (peptide nucleic acid) and RNA'
+    },
+    {
+        pdbId: '2X3T',
+        description: 'temp'
+    },
+]