diff --git a/src/mol-app/ui/transform/file-loader.tsx b/src/mol-app/ui/transform/file-loader.tsx index a88b13f9a5dce132ad90f15923812420459d0b85..c486e4a12de88d56191c7a21a8089a993f559d2c 100644 --- a/src/mol-app/ui/transform/file-loader.tsx +++ b/src/mol-app/ui/transform/file-loader.tsx @@ -9,18 +9,60 @@ import { View } from '../view'; import { FileInput } from '../controls/common'; import { TransformListController } from '../../controller/transform/list'; import { FileEntity } from 'mol-view/state/entity'; -import { MmcifFileToSpacefill } from 'mol-view/state/transform'; +import { MmcifFileToModel, ModelToStructure, StructureToBallAndStick, StructureToSpacefill, StructureToDistanceRestraint, StructureToBackbone } from 'mol-view/state/transform'; import { StateContext } from 'mol-view/state/context'; +import { SpacefillProps } from 'mol-geo/representation/structure/spacefill'; +import { BallAndStickProps } from 'mol-geo/representation/structure/ball-and-stick'; +import { DistanceRestraintProps } from 'mol-geo/representation/structure/distance-restraint'; +import { BackboneProps } from 'mol-geo/representation/structure/backbone'; + +const spacefillProps: SpacefillProps = { + doubleSided: true, + colorTheme: { name: 'chain-id' }, + quality: 'auto', + useFog: false +} + +const ballAndStickProps: BallAndStickProps = { + doubleSided: true, + colorTheme: { name: 'chain-id' }, + sizeTheme: { name: 'uniform', value: 0.05 }, + linkRadius: 0.05, + quality: 'auto', + useFog: false +} + +const distanceRestraintProps: DistanceRestraintProps = { + doubleSided: true, + colorTheme: { name: 'chain-id' }, + linkRadius: 0.5, + quality: 'auto', + useFog: false +} + +const backboneProps: BackboneProps = { + doubleSided: true, + colorTheme: { name: 'chain-id' }, + quality: 'auto', + useFog: false +} export class FileLoader extends View<TransformListController, {}, { ctx: StateContext }> { render() { return <div className='molstar-file-loader'> <FileInput accept='*.cif' - onChange={files => { + onChange={async files => { if (files) { - const fileEntity = FileEntity.ofFile(this.props.ctx, files[0]) - MmcifFileToSpacefill.apply(this.props.ctx, fileEntity) + const ctx = this.props.ctx + const fileEntity = FileEntity.ofFile(ctx, files[0]) + const modelEntity = await MmcifFileToModel.apply(ctx, fileEntity) + const structureEntity = await ModelToStructure.apply(ctx, modelEntity) + + StructureToBallAndStick.apply(ctx, structureEntity, { ...ballAndStickProps, visible: true }) + StructureToSpacefill.apply(ctx, structureEntity, { ...spacefillProps, visible: false }) + StructureToDistanceRestraint.apply(ctx, structureEntity, { ...distanceRestraintProps, visible: false }) + StructureToBackbone.apply(ctx, structureEntity, { ...backboneProps, visible: true }) } }} /> diff --git a/src/mol-view/stage.ts b/src/mol-view/stage.ts index 923423527eb39b00c3c9754983484dafb215fb1a..84810740d4864dcd8e57150c06c75ab0b712bf41 100644 --- a/src/mol-view/stage.ts +++ b/src/mol-view/stage.ts @@ -71,7 +71,7 @@ export class Stage { // this.loadPdbid('1jj2') // this.loadPdbid('4umt') // ligand has bond with order 3 this.loadPdbid('1crn') // small - // this.loadPdbid('1rb8') // virus + // this.loadPdbid('1rb8') // virus TODO funky inter unit bonds rendering // this.loadPdbid('1blu') // metal coordination // this.loadPdbid('3pqr') // inter unit bonds // this.loadPdbid('4v5a') // ribosome @@ -79,11 +79,19 @@ export class Stage { // this.loadPdbid('3sn6') // discontinuous chains // this.loadMmcifUrl(`../../examples/1cbs_full.bcif`) - // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000001.cif`) - // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000002.cif`) - // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000003.cif`) - // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000004.cif`) - // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000005.cif`) + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000001.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000002.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000003.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000004.cif`) // TODO issue with cross-link extraction + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000005.cif`) // TODO only three spacefill atoms rendered + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000006.cif`) // TODO only three spacefill atoms rendered + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000007.cif`) // TODO only three spacefill atoms rendered + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000008.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000010.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000011.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000012.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000014.cif`) // ok + // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000016.cif`) // TODO only three spacefill atoms rendered } async loadMmcifUrl (url: string) {