Skip to content
Snippets Groups Projects
Commit 40124be6 authored by Alexander Rose's avatar Alexander Rose
Browse files

added file load button

parent 25531fa4
No related branches found
No related tags found
No related merge requests found
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
import * as React from 'react' import * as React from 'react'
import { WithStyles } from 'material-ui/styles'; import { WithStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
// import FileUpload from '@material-ui/icons/FileUpload'; import Button from 'material-ui/Button';
import State from '../state' import State from '../state'
import Observer from './observer'; import Observer from './observer';
...@@ -24,17 +24,39 @@ export default class FileInput extends Observer<{ state: State } & WithStyles, { ...@@ -24,17 +24,39 @@ export default class FileInput extends Observer<{ state: State } & WithStyles, {
render() { render() {
const { classes, state } = this.props; const { classes, state } = this.props;
return <TextField return <div>
label='PDB ID' <TextField
className={classes.textField} label='PDB ID'
disabled={this.state.loading} className={classes.textField}
margin='normal' disabled={this.state.loading}
onChange={(event) => { margin='normal'
state.pdbId = event.target.value onChange={(event) => {
}} state.pdbId = event.target.value
onKeyPress={(event) => { }}
if (event.key === 'Enter') state.loadPdbId() onKeyPress={(event) => {
}} if (event.key === 'Enter') state.loadPdbId()
/> }}
/>
<input
accept='*.cif'
className={classes.input}
id='button-file'
type='file'
onChange={(event) => {
if (event.target.files) {
state.loadFile(event.target.files[0])
}
}}
/>
<label htmlFor='button-file'>
<Button
variant='raised'
component='span'
className={classes.button}
>
Open CIF
</Button>
</label>
</div>
} }
} }
\ No newline at end of file
...@@ -17,10 +17,10 @@ import Spacefill, { SpacefillProps } from 'mol-geo/representation/structure/spac ...@@ -17,10 +17,10 @@ import Spacefill, { SpacefillProps } from 'mol-geo/representation/structure/spac
import Point, { PointProps } from 'mol-geo/representation/structure/point' import Point, { PointProps } from 'mol-geo/representation/structure/point'
import { Run } from 'mol-task' import { Run } from 'mol-task'
import { Symmetry } from 'mol-model/structure' import { Symmetry, Structure } from 'mol-model/structure'
// import mcubes from './utils/mcubes' // import mcubes from './utils/mcubes'
import { getStructuresFromPdbId, log } from './utils' import { getStructuresFromPdbId, getStructuresFromFile, log } from './utils'
import { StructureRepresentation } from 'mol-geo/representation/structure'; import { StructureRepresentation } from 'mol-geo/representation/structure';
// import Cylinder from 'mol-geo/primitive/cylinder'; // import Cylinder from 'mol-geo/primitive/cylinder';
...@@ -77,15 +77,11 @@ export default class State { ...@@ -77,15 +77,11 @@ export default class State {
this.viewer.animate() this.viewer.animate()
} }
async loadPdbId () { async initStructure (structure: Structure) {
const { viewer, pdbId, loading } = this const { viewer, loading } = this
viewer.clear() viewer.clear()
if (pdbId.length !== 4) return const struct = await Run(Symmetry.buildAssembly(structure, '1'), log, 100)
loading.next(true)
const structures = await getStructuresFromPdbId(pdbId)
const struct = await Run(Symmetry.buildAssembly(structures[0], '1'), log, 100)
this.pointRepr = StructureRepresentation(Point) this.pointRepr = StructureRepresentation(Point)
await Run(this.pointRepr.create(struct, this.getPointProps()), log, 100) await Run(this.pointRepr.create(struct, this.getPointProps()), log, 100)
...@@ -102,6 +98,23 @@ export default class State { ...@@ -102,6 +98,23 @@ export default class State {
loading.next(false) loading.next(false)
} }
async loadFile (file: File) {
this.viewer.clear()
this.loading.next(true)
const structures = await getStructuresFromFile(file)
this.initStructure(structures[0])
}
async loadPdbId () {
this.viewer.clear()
if (this.pdbId.length !== 4) return
this.loading.next(true)
const structures = await getStructuresFromPdbId(this.pdbId)
this.initStructure(structures[0])
}
async update () { async update () {
if (!this.spacefillRepr) return if (!this.spacefillRepr) return
await Run(this.spacefillRepr.update(this.getSpacefillProps()), log, 100) await Run(this.spacefillRepr.update(this.getSpacefillProps()), log, 100)
......
...@@ -52,6 +52,12 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ ...@@ -52,6 +52,12 @@ const styles: StyleRulesCallback = (theme: Theme) => ({
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
width: 200, width: 200,
}, },
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
} as any); } as any);
const decorate = withStyles(styles); const decorate = withStyles(styles);
......
...@@ -24,4 +24,21 @@ export async function getStructuresFromPdbId(pdbid: string) { ...@@ -24,4 +24,21 @@ export async function getStructuresFromPdbId(pdbid: string) {
const data = await fetch(`https://files.rcsb.org/download/${pdbid}.cif`) const data = await fetch(`https://files.rcsb.org/download/${pdbid}.cif`)
const parsed = await parseCif(await data.text()) const parsed = await parseCif(await data.text())
return Structure.ofData({ kind: 'mmCIF', data: CIF.schema.mmCIF(parsed.result.blocks[0]) }) return Structure.ofData({ kind: 'mmCIF', data: CIF.schema.mmCIF(parsed.result.blocks[0]) })
}
const readFileAsText = (file: File) => {
const fileReader = new FileReader()
return new Promise<string>((resolve, reject) => {
fileReader.onerror = () => {
fileReader.abort()
reject(new DOMException('Error parsing input file.'))
}
fileReader.onload = () => resolve(fileReader.result)
fileReader.readAsText(file)
})
}
export async function getStructuresFromFile(file: File) {
const parsed = await parseCif(await readFileAsText(file))
return Structure.ofData({ kind: 'mmCIF', data: CIF.schema.mmCIF(parsed.result.blocks[0]) })
} }
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment