wip, file param

src/mol-plugin/state/actions/basic.ts

@@ -27,15 +27,14 @@ namespace ObtainStructureHelpers {
         ['rcsb', 'RCSB'],
         ['bcif-static', 'BinaryCIF (static PDBe Updated)'],
         ['url', 'URL'],
-        // TODO
-        // ['file', 'File']
+        ['file', 'File']
     ];
     export const ControlMap = {
         'pdbe-updated': PD.Text('1cbs', { label: 'Id' }),
         'rcsb': PD.Text('1tqn', { label: 'Id' }),
         'bcif-static': PD.Text('1tqn', { label: 'Id' }),
         'url': PD.Group({ url: PD.Text(''), isBinary: PD.Boolean(false) }, { isExpanded: true }),
-        'file': PD.Group({ })
+        'file': PD.File({ accept: '.cif,.bcif' })
     }
     export function getControls(key: string) { return (ControlMap as any)[key]; }
 

src/mol-plugin/ui/controls/parameters.tsx

@@ -46,6 +46,7 @@ function controlFor(param: PD.Any): ParamControl | undefined {
         case 'multi-select': return MultiSelectControl;
         case 'color': return ColorControl;
         case 'vec3': return Vec3Control;
+        case 'file': return FileControl;
         case 'select': return SelectControl;
         case 'text': return TextControl;
         case 'interval': return IntervalControl;
@@ -53,7 +54,8 @@ function controlFor(param: PD.Any): ParamControl | undefined {
         case 'mapped': return MappedControl;
         case 'line-graph': return void 0;
     }
-    throw new Error('not supported');
+    console.warn(`${(param as any).type} has no associated UI component.`);
+    return void 0;
 }
 
 // type ParamWrapperProps = { name: string, value: any, param: PD.Base<any>, onChange: ParamOnChange, control: ValueControl, onEnter?: () => void, isEnabled?: boolean }
@@ -179,6 +181,25 @@ export class Vec3Control extends SimpleParam<PD.Vec3> {
     }
 }
 
+export class FileControl extends React.PureComponent<ParamProps<PD.FileParam>> {
+    change(value: File) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value });
+    }
+
+    onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.change(e.target.files![0]);
+    }
+
+    render() {
+        const value = this.props.value;
+
+        // return <input disabled={this.props.isDisabled} value={void 0} type='file' multiple={false} />
+        return <div className='msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file' style={{ marginTop: '1px' }}>
+            {value ? value.name : 'Select a file...'} <input disabled={this.props.isDisabled} onChange={this.onChangeFile} type='file' multiple={false} accept={this.props.param.accept} />
+        </div>
+    }
+}
+
 export class MultiSelectControl extends React.PureComponent<ParamProps<PD.MultiSelect<any>>, { isExpanded: boolean }> {
     state = { isExpanded: false }
 

src/mol-util/param-definition.ts

@@ -84,6 +84,16 @@ export namespace ParamDefinition {
         return setInfo<Vec3>({ type: 'vec3', defaultValue }, info)
     }
 
+    export interface FileParam extends Base<File> {
+        type: 'file',
+        accept?: string
+    }
+    export function File(info?: Info & { accept?: string }): FileParam {
+        const ret = setInfo<FileParam>({ type: 'file', defaultValue: void 0 as any }, info);
+        if (info && info.accept) ret.accept = info.accept;
+        return ret;
+    }
+
     export interface Range {
         /** If given treat as a range. */
         min?: number
@@ -161,7 +171,7 @@ export namespace ParamDefinition {
         return { type: 'converted', defaultValue: toValue(converted.defaultValue), converted, fromValue, toValue };
     }
 
-    export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Vec3 | Numeric | Interval | LineGraph | Group<any> | Mapped<any> | Converted<any, any>
+    export type Any = Value<any> | Select<any> | MultiSelect<any> | Boolean | Text | Color | Vec3 | Numeric | FileParam | Interval | LineGraph | Group<any> | Mapped<any> | Converted<any, any>
 
     export type Params = { [k: string]: Any }
     export type Values<T extends Params> = { [k in keyof T]: T[k]['defaultValue'] }