Generate example params in model-server-query app

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,

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',