Added BinaryCIF support to the Canvas app

src/apps/canvas/app.ts

@@ -38,15 +38,17 @@ export class App {
         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 loadPdbIdOrUrl(idOrUrl: string, options?: { assemblyId?: string, binary?: boolean }) {
+        if (this.structureView) this.structureView.destroy();
+        const url = idOrUrl.length <= 4 ? `https://files.rcsb.org/download/${idOrUrl}.cif` : idOrUrl;
+        const cif = await getCifFromUrl(url, options ? !!options.binary : false)
+        this.loadCif(cif, options ? options.assemblyId : void 0)
     }
 
     async loadCifFile(file: File) {
-        if (this.structureView) this.structureView.destroy()
-        const cif = await getCifFromFile(file)
+        if (this.structureView) this.structureView.destroy();
+        const binary = /\.bcif$/.test(file.name);
+        const cif = await getCifFromFile(file, binary)
         this.loadCif(cif)
     }
 }

src/apps/canvas/component/app.tsx

@@ -16,12 +16,14 @@ export interface AppProps {
 }
 
 export interface AppState {
-    structureView: StructureView | null
+    structureView: StructureView | null,
+    binary: boolean
 }
 
 export class AppComponent extends React.Component<AppProps, AppState> {
     state = {
         structureView: this.props.app.structureView,
+        binary: false
     }
 
     componentDidMount() {
@@ -42,14 +44,16 @@ export class AppComponent extends React.Component<AppProps, AppState> {
 
             <div style={{width: '330px', paddingLeft: '10px', paddingRight: '10px', right: '0px', height: '100%', position: 'absolute', overflow: 'auto'}}>
                 <div style={{marginTop: '10px'}}>
-                    <span>Load PDB ID </span>
+                    <span>Load PDB ID or URL</span>&nbsp;&nbsp;
+                    <input type='checkbox' checked={this.state.binary} onChange={e => this.setState({ binary: e.target.checked })} /> Binary<br />
                     <input
+                        style={{ width: '100%' }}
                         type='text'
                         onKeyDown={e => {
                             if (e.keyCode === 13) {
                                 const value = e.currentTarget.value.trim()
                                 if (value) {
-                                    this.props.app.loadPdbId(value)
+                                    this.props.app.loadPdbIdOrUrl(value, { binary: this.state.binary })
                                 }
                             }
                         }}
@@ -70,7 +74,7 @@ export class AppComponent extends React.Component<AppProps, AppState> {
                     <select
                         style={{width: '200px'}}
                         onChange={e => {
-                            this.props.app.loadPdbId(e.target.value)
+                            this.props.app.loadPdbIdOrUrl(e.target.value)
                         }}
                     >
                         <option value=''></option>

src/apps/canvas/index.ts

@@ -21,4 +21,4 @@ ReactDOM.render(React.createElement(AppComponent, { app }), elm);
 
 const assemblyId = urlQueryParameter('assembly')
 const pdbId = urlQueryParameter('pdb')
-if (pdbId) app.loadPdbId(pdbId, assemblyId)
+if (pdbId) app.loadPdbIdOrUrl(pdbId, { assemblyId })

src/apps/canvas/util.ts

@@ -24,8 +24,8 @@ export async function getCifFromData(data: string | Uint8Array) {
     return parsed.result.blocks[0]
 }
 
-export async function getCifFromUrl(url: string) {
-    return getCifFromData(await readUrlAs(url, false))
+export async function getCifFromUrl(url: string, binary = false) {
+    return getCifFromData(await readUrlAs(url, binary))
 }
 
 export async function getCifFromFile(file: File, binary = false) {