diff --git a/src/apps/canvas/component/app.tsx b/src/apps/canvas/component/app.tsx index 6fe5f0872a62a8a5d552767872e1798c8c845426..c1d099b6a7e3e5d77e38a14040e21dbce3ebb4d8 100644 --- a/src/apps/canvas/component/app.tsx +++ b/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} /> : ''} diff --git a/src/apps/canvas/examples.ts b/src/apps/canvas/examples.ts new file mode 100644 index 0000000000000000000000000000000000000000..7fefc15700eaa03921e809617ff396e5873e458a --- /dev/null +++ b/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' + }, +] \ No newline at end of file