diff --git a/src/apps/model-server-query/index.tsx b/src/apps/model-server-query/index.tsx index 5df577f40cd62875738e4c136687279d2b835949..a34f8617c8c3d70dfaf792023a9bd3a0f3a3b11d 100644 --- a/src/apps/model-server-query/index.tsx +++ b/src/apps/model-server-query/index.tsx @@ -22,15 +22,6 @@ interface State { } class Root extends React.Component<{ state: State }, { }> { - parseParams(str: string) { - try { - const params = JSON.parse(str); - this.props.state.params.next(params); - } catch { - this.props.state.params.next({}); - } - } - render() { return <div> <div> @@ -41,7 +32,7 @@ class Root extends React.Component<{ state: State }, { }> { </div> <div> Params:<br/> - <textarea style={{height: '300px'}} cols={80} onChange={t => this.parseParams(t.currentTarget.value)} /> + <QueryParams state={this.props.state} /> </div> <div> Model numbers (empty for all): <ModelNums state={this.props.state} /> @@ -65,6 +56,28 @@ class QuerySelect extends React.Component<{ state: State }> { } } +class QueryParams extends React.Component<{ state: State }, { prms: string }> { + state = { prms: '' }; + + parseParams(str: string) { + this.setState({ prms: str }); + try { + const params = JSON.parse(str); + this.props.state.params.next(params); + } catch { + this.props.state.params.next({}); + } + } + + componentDidMount() { + this.props.state.query.subscribe(q => this.setState({ prms: formatParams(q) })) + } + + render() { + return <textarea style={{height: '300px'}} value={this.state.prms} cols={80} onChange={t => this.parseParams(t.currentTarget.value)} />; + } +} + class QueryUrl extends React.Component<{ state: State }, { queryString: string }> { state = { queryString: '' }; @@ -97,6 +110,14 @@ const state: State = { url: new Rx.Subject() } +function formatParams(def: QueryDefinition) { + const prms = Object.create(null); + for (const p of def.params) { + prms[p.name] = p.exampleValues ? p.exampleValues[0] : void 0; + } + return JSON.stringify(prms, void 0, 2); +} + function formatUrl() { const json = JSON.stringify({ name: state.query.value.name, diff --git a/src/servers/model/server/api.ts b/src/servers/model/server/api.ts index 3416436db0a5aaa26452114383fdbc13c86ed700..6c73c776f3cc13bcb161264a55ca705a59ac8bdb 100644 --- a/src/servers/model/server/api.ts +++ b/src/servers/model/server/api.ts @@ -20,7 +20,7 @@ export interface QueryParamInfo { description?: string, required?: boolean, defaultValue?: any, - exampleValues?: string[], + exampleValues?: any[], validation?: (v: any) => void } @@ -50,15 +50,15 @@ export interface QueryDefinition { const AtomSiteTestParams: QueryParamInfo = { name: 'atom_site', type: QueryParamType.JSON, - description: 'Object or array of objects describing atom properties. Name are same as in wwPDB mmCIF dictionary of the atom_site category.', - exampleValues: [`{ label_comp_id: 'ALA' }`, `{ label_seq_id: 123, label_asym_id: 'A' }`] + description: 'Object or array of objects describing atom properties. Names are same as in wwPDB mmCIF dictionary of the atom_site category.', + exampleValues: [{ label_comp_id: 'ALA' }, { label_seq_id: 123, label_asym_id: 'A' }] }; const RadiusParam: QueryParamInfo = { name: 'radius', type: QueryParamType.Float, defaultValue: 5, - exampleValues: ['5'], + exampleValues: [5], description: 'Value in Angstroms.', validation(v: any) { if (v < 1 || v > 10) { @@ -82,6 +82,7 @@ const QueryMap: { [id: string]: Partial<QueryDefinition> } = { structureTransform(p, s) { return StructureSymmetry.builderSymmetryMates(s, p.radius).run(); }, + params: [ RadiusParam ] }, 'assembly': { niceName: 'Assembly',