wip, param label tweaks

src/apps/canvas/component/viewport.tsx

@@ -158,6 +158,7 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
                     </select>
                 </div>
                 <ColorParamComponent
+                    label={BackgroundColorParam.label || ''}
                     param={BackgroundColorParam}
                     value={this.state.backgroundColor}
                     onChange={value => {

src/mol-app/component/parameter/boolean.tsx

@@ -8,6 +8,7 @@ import * as React from 'react'
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 export interface BooleanParamComponentProps {
+    label: string
     param: PD.Boolean
     value: boolean
     onChange(v: boolean): void
@@ -29,7 +30,7 @@ export class BooleanParamComponent extends React.Component<BooleanParamComponent
 
     render() {
         return <div>
-            <span>{this.props.param.label} </span>
+            <span>{this.props.label} </span>
             <button onClick={e => this.onChange(!this.state.value) }>
                 {this.state.value ? 'Off' : 'On'}
             </button>

src/mol-app/component/parameter/color.tsx

@@ -10,6 +10,7 @@ import { ColorNames } from 'mol-util/color/tables';
 import { Color } from 'mol-util/color';
 
 export interface ColorParamComponentProps {
+    label: string
     param: PD.Color
     value: Color
     onChange(v: Color): void
@@ -31,7 +32,7 @@ export class ColorParamComponent extends React.Component<ColorParamComponentProp
 
     render() {
         return <div>
-            <span>{this.props.param.label} </span>
+            <span>{this.props.label} </span>
             <select value={this.state.value} onChange={e => this.onChange(Color(parseInt(e.target.value))) }>
                 {Object.keys(ColorNames).map(name => {
                     return <option key={name} value={(ColorNames as { [k: string]: Color})[name]}>{name}</option>

src/mol-app/component/parameter/multi-select.tsx

@@ -8,6 +8,7 @@ import * as React from 'react'
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 export interface MultiSelectParamComponentProps<T extends string> {
+    label: string
     param: PD.MultiSelect<T>
     value: T[]
     onChange(v: T[]): void
@@ -29,7 +30,7 @@ export class MultiSelectParamComponent<T extends string> extends React.Component
 
     render() {
         return <div>
-            <span>{this.props.param.label} </span>
+            <span>{this.props.label} </span>
             <select multiple value={this.state.value} onChange={e => {
                 const value = Array.from(e.target.options).filter(option => option.selected).map(option => option.value)
                 this.onChange(value as T[])

src/mol-app/component/parameter/number.tsx

@@ -8,6 +8,7 @@ import * as React from 'react'
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 export interface NumberParamComponentProps {
+    label: string
     param: PD.Numeric
     value: number
     onChange(v: number): void
@@ -30,7 +31,7 @@ export class NumberParamComponent extends React.Component<NumberParamComponentPr
 
     render() {
         return <div>
-            <span>{this.props.param.label} </span>
+            <span>{this.props.label} </span>
             <input type='range'
                 value={this.state.value}
                 min={this.props.param.min}

src/mol-app/component/parameter/select.tsx

@@ -8,6 +8,7 @@ import * as React from 'react'
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 export interface SelectParamComponentProps<T extends string> {
+    label: string
     param: PD.Select<T>
     value: T
     onChange(v: T): void
@@ -29,7 +30,7 @@ export class SelectParamComponent<T extends string> extends React.Component<Sele
 
     render() {
         return <div>
-            <span>{this.props.param.label} </span>
+            <span>{this.props.label} </span>
             <select value={this.state.value} onChange={e => this.onChange(e.target.value as T) }>
                 {this.props.param.options.map(v => {
                     const [value, label] = v

src/mol-app/component/parameter/text.tsx

@@ -8,6 +8,7 @@ import * as React from 'react'
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 export interface TextParamComponentProps {
+    label: string
     param: PD.Text
     value: string
     onChange(v: string): void
@@ -29,7 +30,7 @@ export class TextParamComponent extends React.Component<TextParamComponentProps,
 
     render() {
         return <div>
-            <span>{this.props.param.label} </span>
+            <span>{this.props.label} </span>
             <input type='text'
                 value={this.state.value}
                 onChange={e => this.onChange(e.currentTarget.value)}

src/mol-app/component/parameters.tsx

@@ -12,6 +12,7 @@ import { SelectParamComponent } from './parameter/select';
 import { MultiSelectParamComponent } from './parameter/multi-select';
 import { TextParamComponent } from './parameter/text';
 import { ColorParamComponent } from './parameter/color';
+import { camelCaseToWords } from 'mol-util/string';
 
 interface ParametersProps<P extends PD.Params> {
     params: P
@@ -21,24 +22,28 @@ interface ParametersProps<P extends PD.Params> {
 
 type ParametersState = {}
 
-function getParamComponent<P extends PD.Any>(p: PD.Any, value: P['defaultValue'], onChange: (v: P['defaultValue']) => void) {
-    switch (p.type) {
+function getParamComponent<P extends PD.Any>(label: string, param: PD.Any, value: P['defaultValue'], onChange: (v: P['defaultValue']) => void) {
+    switch (param.type) {
         case 'boolean':
-            return <BooleanParamComponent param={p} value={value} onChange={onChange} />
+            return <BooleanParamComponent label={label} param={param} value={value} onChange={onChange} />
         case 'number':
-            return <NumberParamComponent param={p} value={value} onChange={onChange} />
+            return <NumberParamComponent label={label} param={param} value={value} onChange={onChange} />
         case 'select':
-            return <SelectParamComponent param={p} value={value} onChange={onChange} />
+            return <SelectParamComponent label={label} param={param} value={value} onChange={onChange} />
         case 'multi-select':
-            return <MultiSelectParamComponent param={p} value={value} onChange={onChange} />
+            return <MultiSelectParamComponent label={label} param={param} value={value} onChange={onChange} />
         case 'text':
-            return <TextParamComponent param={p} value={value} onChange={onChange} />
+            return <TextParamComponent label={label} param={param} value={value} onChange={onChange} />
         case 'color':
-            return <ColorParamComponent param={p} value={value} onChange={onChange} />
+            return <ColorParamComponent label={label} param={param} value={value} onChange={onChange} />
     }
     return ''
 }
 
+function getLabel(name: string, param: PD.Base<any>) {
+    return param.label === undefined ? camelCaseToWords(name) : param.label
+}
+
 export class ParametersComponent<P extends PD.Params> extends React.Component<ParametersProps<P>, ParametersState> {
     onChange(k: string, value: any) {
         this.props.onChange(k, value)
@@ -49,8 +54,9 @@ export class ParametersComponent<P extends PD.Params> extends React.Component<Pa
             { Object.keys(this.props.params).map(k => {
                 const param = this.props.params[k]
                 const value = this.props.values[k]
+                const label = getLabel(k, param)
                 return <div key={k}>
-                    {getParamComponent(param, value, v => this.onChange(k, v))}
+                    {getParamComponent(label, param, value, v => this.onChange(k, v))}
                 </div>
             })}
         </div>;

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

@@ -7,6 +7,7 @@
 
 import * as React from 'react'
 import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { camelCaseToWords } from 'mol-util/string';
 
 export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
     params: P,
@@ -57,6 +58,10 @@ export type ParamOnChange = (params: { param: PD.Base<any>, name: string, value:
 type ValueControlProps<P extends PD.Base<any> = PD.Base<any>> = { value: any, param: P, isEnabled?: boolean, onChange: (v: any) => void, onEnter?: () => void }
 type ValueControl = React.ComponentClass<ValueControlProps<any>>
 
+function getLabel(name: string, param: PD.Base<any>) {
+    return param.label === undefined ? camelCaseToWords(name) : param.label
+}
+
 export class ParamWrapper extends React.PureComponent<ParamWrapperProps> {
     onChange = (value: any) => {
         this.props.onChange({ param: this.props.param, name: this.props.name, value });
@@ -64,7 +69,7 @@ export class ParamWrapper extends React.PureComponent<ParamWrapperProps> {
 
     render() {
         return <div style={{ padding: '0 3px', borderBottom: '1px solid #ccc' }}>
-            <div style={{ lineHeight: '20px', float: 'left' }} title={this.props.param.description}>{this.props.param.label}</div>
+            <div style={{ lineHeight: '20px', float: 'left' }} title={this.props.param.description}>{getLabel(this.props.name, this.props.param)}</div>
             <div style={{ float: 'left', marginLeft: '5px' }}>
                 <this.props.control value={this.props.value} param={this.props.param} onChange={this.onChange} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} />
             </div>
@@ -140,16 +145,17 @@ export class SelectControl extends React.PureComponent<ValueControlProps<PD.Sele
 
 
 export class MultiSelectControl extends React.PureComponent<ValueControlProps<PD.MultiSelect<any>>> {
-    // onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    //     this.setState({ value: e.target.value });
-    //     this.props.onChange(e.target.value);
-    // }
+    onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = Array.from(e.target.options).filter(option => option.selected).map(option => option.value);
+        this.setState({ value });
+        this.props.onChange(value);
+    }
 
     render() {
-        return <span>multiselect TODO</span>;
-        // return <select value={this.props.value || ''} onChange={this.onChange}>
-        //     {this.props.param.options.map(([value, label]) => <option key={label} value={value}>{label}</option>)}
-        // </select>;
+        // return <span>multiselect TODO</span>;
+        return <select multiple value={this.props.value || ''} onChange={this.onChange}>
+            {this.props.param.options.map(([value, label]) => <option key={label} value={value}>{label}</option>)}
+        </select>;
     }
 }
 

src/mol-util/param-definition.ts

@@ -8,7 +8,6 @@
 import { Color as ColorData } from './color';
 import { shallowClone } from 'mol-util';
 import { Vec2 } from 'mol-math/linear-algebra';
-import { camelCaseToWords } from './string';
 
 export namespace ParamDefinition {
     export interface Info {
@@ -101,7 +100,7 @@ export namespace ParamDefinition {
         params: Params
     }
     export function Group<P extends Params>(params: P, info: Info = {}): Group<Values<P>> {
-        return { type: 'group', defaultValue: getDefaultValues(params) as any, params };
+        return { type: 'group', defaultValue: getDefaultValues(params) as any, params, ...info };
     }
 
     export interface Mapped<T> extends Base<{ name: string, params: T }> {
@@ -136,15 +135,6 @@ export namespace ParamDefinition {
         return d as Values<T>
     }
 
-    export function getLabels<T extends Params>(params: T) {
-        const d: { [k: string]: string } = {}
-        Object.keys(params).forEach(k => {
-            const label = params[k].label
-            d[k] = label === undefined ? camelCaseToWords(k) : label
-        })
-        return d as { [k in keyof T]: string }
-    }
-
     export function clone<P extends Params>(params: P): P {
         return shallowClone(params)
     }