wip, canvas example

src/apps/canvas/app.ts

@@ -5,9 +5,10 @@
  */
 
 import Viewer from 'mol-view/viewer';
-import { getCifFromUrl, getModelsFromMmcif } from './util';
+import { getCifFromUrl, getModelsFromMmcif, getCifFromFile } from './util';
 import { StructureView } from './structure-view';
 import { BehaviorSubject } from 'rxjs';
+import { CifBlock } from 'mol-io/reader/cif';
 
 export class App {
     viewer: Viewer
@@ -31,11 +32,21 @@ export class App {
         }
     }
 
-    async loadPdbId(id: string, assemblyId?: string) {
-        if (this.structureView) this.structureView.destroy()
-        const cif = await getCifFromUrl(`https://files.rcsb.org/download/${id}.cif`)
+    async loadCif(cif: CifBlock, assemblyId?: string) {
         const models = await getModelsFromMmcif(cif)
         this.structureView = await StructureView(this.viewer, models, { assemblyId })
         this.pdbIdLoaded.next(this.structureView)
     }
+
+    async loadPdbId(id: string, assemblyId?: string) {
+        if (this.structureView) this.structureView.destroy()
+        const cif = await getCifFromUrl(`https://files.rcsb.org/download/${id}.cif`)
+        this.loadCif(cif, assemblyId)
+    }
+
+    async loadCifFile(file: File) {
+        if (this.structureView) this.structureView.destroy()
+        const cif = await getCifFromFile(file)
+        this.loadCif(cif)
+    }
 }

src/apps/canvas/component/app.tsx

@@ -35,9 +35,11 @@ export class AppComponent extends React.Component<AppProps, AppState> {
     }
 
     componentDidMount() {
-        this.props.app.pdbIdLoaded.subscribe(() => this.setState({
-            structureView: this.props.app.structureView
-        }))
+        this.props.app.pdbIdLoaded.subscribe((structureView) => {
+            this.setState({
+                structureView: this.props.app.structureView
+            })
+        })
     }
 
     render() {
@@ -49,7 +51,34 @@ export class AppComponent extends React.Component<AppProps, AppState> {
             </div>
 
             <div style={{float: 'right', width: '25%', height: '100%'}}>
-                {structureView ? <StructureViewComponent structureView={structureView} /> : ''}
+                <div>
+                    <span>Load PDB ID</span>
+                    <input
+                        type='text'
+                        onKeyDown={e => {
+                            if (e.keyCode === 13) {
+                                const value = e.currentTarget.value.trim()
+                                if (value) {
+                                    this.props.app.loadPdbId(value)
+                                }
+                            }
+                        }}
+                    />
+                </div>
+                <div>
+                    <span>Load CIF file</span>
+                    <input
+                        accept='*.cif'
+                        type='file'
+                        onChange={e => {
+                            if (e.target.files) this.props.app.loadCifFile(e.target.files[0])
+                        }}
+                    />
+                </div>
+                <hr/>
+                <div>
+                    {structureView ? <StructureViewComponent structureView={structureView} /> : ''}
+                </div>
             </div>
         </div>;
     }

src/apps/canvas/component/structure-representation.tsx

@@ -7,7 +7,8 @@
 import * as React from 'react'
 import { StructureRepresentation, StructureProps } from 'mol-geo/representation/structure';
 import Viewer from 'mol-view/viewer';
-import { VisualQuality } from 'mol-geo/representation/util';
+import { VisualQuality, VisualQualityNames } from 'mol-geo/representation/util';
+import { ColorThemeProps, ColorThemeName, ColorThemeNames } from 'mol-view/theme/color';
 
 export interface StructureRepresentationComponentProps {
     viewer: Viewer
@@ -18,6 +19,7 @@ export interface StructureRepresentationComponentState {
     label: string
     visible: boolean
     quality: VisualQuality
+    colorTheme: ColorThemeProps
 }
 
 export class StructureRepresentationComponent extends React.Component<StructureRepresentationComponentProps, StructureRepresentationComponentState> {
@@ -25,6 +27,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
         label: this.props.representation.label,
         visible: this.props.representation.props.visible,
         quality: this.props.representation.props.quality,
+        colorTheme: this.props.representation.props.colorTheme,
     }
 
     componentWillMount() {
@@ -35,6 +38,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
             label: repr.label,
             visible: repr.props.visible,
             quality: repr.props.quality,
+            colorTheme: repr.props.colorTheme,
         })
     }
 
@@ -44,6 +48,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
 
         if (state.visible !== undefined) props.visible = state.visible
         if (state.quality !== undefined) props.quality = state.quality
+        if (state.colorTheme !== undefined) props.colorTheme = state.colorTheme
 
         await repr.createOrUpdate(props).run()
         this.props.viewer.add(repr)
@@ -52,13 +57,14 @@ export class StructureRepresentationComponent extends React.Component<StructureR
         const newState = {
             ...this.state,
             visible: repr.props.visible,
-            quality: repr.props.quality
+            quality: repr.props.quality,
+            colorTheme: repr.props.colorTheme,
         }
         this.setState(newState)
     }
 
     render() {
-        const { label, visible, quality } = this.state
+        const { label, visible, quality, colorTheme } = this.state
 
         return <div>
             <div>
@@ -74,12 +80,13 @@ export class StructureRepresentationComponent extends React.Component<StructureR
                 <div>
                     <span>Quality</span>
                     <select value={quality} onChange={(e) => this.update({ quality: e.target.value as VisualQuality }) }>
-                        <option value='auto'>auto</option>
-                        <option value='lowest'>lowest</option>
-                        <option value='low'>low</option>
-                        <option value='medium'>medium</option>
-                        <option value='high'>high</option>
-                        <option value='highest'>highest</option>
+                        {VisualQualityNames.map(name => <option key={name} value={name}>{name}</option>)}
+                    </select>
+                </div>
+                <div>
+                    <span>Color Theme</span>
+                    <select value={colorTheme.name} onChange={(e) => this.update({ colorTheme: { name: e.target.value as ColorThemeName } }) }>
+                        {ColorThemeNames.map(name => <option key={name} value={name}>{name}</option>)}
                     </select>
                 </div>
             </div>

src/apps/canvas/component/structure-view.tsx

@@ -25,6 +25,8 @@ export interface StructureViewComponentProps {
 }
 
 export interface StructureViewComponentState {
+    structureView: StructureView
+
     label: string
     modelId: number
     modelIds: { id: number, label: string }[]
@@ -38,24 +40,12 @@ export interface StructureViewComponentState {
 }
 
 export class StructureViewComponent extends React.Component<StructureViewComponentProps, StructureViewComponentState> {
-    state = {
-        label: this.props.structureView.label,
-        modelId: this.props.structureView.modelId,
-        modelIds: this.props.structureView.getModelIds(),
-        assemblyId: this.props.structureView.assemblyId,
-        assemblyIds: this.props.structureView.getAssemblyIds(),
-        symmetryFeatureId: this.props.structureView.symmetryFeatureId,
-        symmetryFeatureIds: this.props.structureView.getSymmetryFeatureIds(),
-
-        active: this.props.structureView.active,
-        structureRepresentations: this.props.structureView.structureRepresentations
-    }
+    state = this.stateFromStructureView(this.props.structureView)
 
-    componentWillMount() {
-        const sv = this.props.structureView
+    private stateFromStructureView(sv: StructureView) {
+        return {
+            structureView: sv,
 
-        this.setState({
-            ...this.state,
             label: sv.label,
             modelId: sv.modelId,
             modelIds: sv.getModelIds(),
@@ -66,7 +56,11 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
 
             active: sv.active,
             structureRepresentations: sv.structureRepresentations
-        })
+        }
+    }
+
+    componentWillMount() {
+        this.setState(this.stateFromStructureView(this.props.structureView))
     }
 
     componentDidMount() {
@@ -78,33 +72,29 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
         }))
     }
 
-    async update(state: Partial<StructureViewComponentState>) {
-        const sv = this.props.structureView
+    componentWillReceiveProps(nextProps: StructureViewComponentProps) {
+        if (nextProps.structureView !== this.props.structureView) {
+            this.setState(this.stateFromStructureView(nextProps.structureView))
 
-        console.log(state)
+            nextProps.structureView.updated.subscribe(() => this.setState({
+                symmetryFeatureIds: nextProps.structureView.getSymmetryFeatureIds(),
+                structureRepresentations: nextProps.structureView.structureRepresentations
+            }))
+        }
+    }
+
+    async update(state: Partial<StructureViewComponentState>) {
+        const sv = this.state.structureView
 
         if (state.modelId !== undefined) await sv.setModel(state.modelId)
         if (state.assemblyId !== undefined) await sv.setAssembly(state.assemblyId)
         if (state.symmetryFeatureId !== undefined) await sv.setSymmetryFeature(state.symmetryFeatureId)
 
-        const newState = {
-            ...this.state,
-            label: sv.label,
-            modelId: sv.modelId,
-            modelIds: sv.getModelIds(),
-            assemblyId: sv.assemblyId,
-            assemblyIds: sv.getAssemblyIds(),
-            symmetryFeatureId: sv.symmetryFeatureId,
-            symmetryFeatureIds: sv.getSymmetryFeatureIds(),
-
-            active: sv.active,
-            structureRepresentations: sv.structureRepresentations
-        }
-        this.setState(newState)
+        this.setState(this.stateFromStructureView(sv))
     }
 
     render() {
-        const { label, modelIds, assemblyIds, symmetryFeatureIds, active, structureRepresentations } = this.state
+        const { structureView, label, modelIds, assemblyIds, symmetryFeatureIds, active, structureRepresentations } = this.state
 
         const modelIdOptions = modelIds.map(m => {
             return <option key={m.id} value={m.id}>{m.label}</option>
@@ -172,7 +162,7 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
                                 type='checkbox'
                                 checked={active[k]}
                                 onChange={(e) => {
-                                    const sv = this.props.structureView
+                                    const sv = structureView
                                     if (k === 'symmetryAxes') {
                                         sv.setSymmetryAxes(e.target.checked)
                                     } else if (Object.keys(sv.structureRepresentations).includes(k)) {
@@ -190,7 +180,7 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
                             return <div key={i}>
                                 <StructureRepresentationComponent
                                     representation={structureRepresentations[k]}
-                                    viewer={this.props.structureView.viewer}
+                                    viewer={structureView.viewer}
                                 />
                             </div>
                         } else {

src/apps/canvas/util.ts

@@ -5,7 +5,7 @@
  */
 
 import CIF, { CifBlock } from 'mol-io/reader/cif'
-import { readUrlAs } from 'mol-util/read';
+import { readUrlAs, readFileAs } from 'mol-util/read';
 import { Model, Format, StructureSymmetry, Structure } from 'mol-model/structure';
 // import { parse as parseObj } from 'mol-io/reader/obj/parser'
 
@@ -17,14 +17,21 @@ import { Model, Format, StructureSymmetry, Structure } from 'mol-model/structure
 //     return parsed.result
 // }
 
-export async function getCifFromUrl(url: string) {
-    const data = await readUrlAs(url, false)
+export async function getCifFromData(data: string | Uint8Array) {
     const comp = CIF.parse(data)
     const parsed = await comp.run()
     if (parsed.isError) throw parsed
     return parsed.result.blocks[0]
 }
 
+export async function getCifFromUrl(url: string) {
+    return getCifFromData(await readUrlAs(url, false))
+}
+
+export async function getCifFromFile(file: File, binary = false) {
+    return getCifFromData(await readFileAs(file, binary))
+}
+
 export async function getModelsFromMmcif(cif: CifBlock) {
     return await Model.create(Format.mmCIF(cif)).run()
 }

src/mol-geo/representation/structure/units-visual.ts

@@ -131,6 +131,7 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
             } else {
                 if (group && !areGroupsIdentical(group, currentGroup)) {
                     currentGroup = group
+                    currentProps.colorTheme.structure = currentStructure
                 }
                 await update(ctx, props)
             }

src/mol-geo/representation/util.ts

@@ -84,7 +84,17 @@ export function updateRenderableState(state: RenderableState, props: Required<Ba
     state.depthMask = props.depthMask
 }
 
-export type VisualQuality = 'custom' | 'auto' | 'highest' | 'high' | 'medium' | 'low' | 'lowest'
+export const VisualQualityInfo = {
+    'custom': {},
+    'auto': {},
+    'highest': {},
+    'high': {},
+    'medium': {},
+    'low': {},
+    'lowest': {},
+}
+export type VisualQuality = keyof typeof VisualQualityInfo
+export const VisualQualityNames = Object.keys(VisualQualityInfo)
 
 export interface QualityProps {
     quality: VisualQuality