diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx index 3d5fda213e07b3e636f84154152a713d3867ed86..b688506b0a42d81888916002f07872f3371d92ee 100644 --- a/src/mol-plugin/ui/controls/parameters.tsx +++ b/src/mol-plugin/ui/controls/parameters.tsx @@ -99,7 +99,7 @@ export class BoolControl extends SimpleParam<PD.Boolean> { } export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGraph>, { isExpanded: boolean, isOverPoint: boolean, message: string }> { - state = { + state = { isExpanded: false, isOverPoint: false, message: `${this.props.param.defaultValue.length} points`, @@ -107,7 +107,7 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap onHover = (point?: Vec2) => { this.setState({isOverPoint: !this.state.isOverPoint}); - if(point){ + if (point) { this.setState({message: `(${point[0].toFixed(2)}, ${point[1].toFixed(2)})`}); return; } @@ -140,8 +140,8 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap </div> <div className='msp-control-offset' style={{ display: this.state.isExpanded ? 'block' : 'none' }}> <LineGraphComponent - data={this.props.param.defaultValue} - onChange={this.onChange} + data={this.props.param.defaultValue} + onChange={this.onChange} onHover={this.onHover} onDrag={this.onDrag}/> </div> @@ -193,8 +193,14 @@ export class TextControl extends SimpleParam<PD.Text> { } } -export class SelectControl extends SimpleParam<PD.Select<any>> { - onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { this.update(e.target.value); } +export class SelectControl extends SimpleParam<PD.Select<string | number>> { + onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { + if (typeof this.props.param.defaultValue === 'number') { + this.update(parseInt(e.target.value, 10)); + } else { + this.update(e.target.value); + } + } renderControl() { return <select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}> {this.props.param.options.map(([value, label]) => <option key={value} value={value}>{label}</option>)} diff --git a/src/mol-util/param-definition.ts b/src/mol-util/param-definition.ts index b618052cfe18649afff4fca1d3624f9195b2654d..f8c06ec58624f487aa0e3775ab7191c6ef1b628f 100644 --- a/src/mol-util/param-definition.ts +++ b/src/mol-util/param-definition.ts @@ -42,12 +42,12 @@ export namespace ParamDefinition { return setInfo<Value<T>>({ type: 'value', defaultValue }, info); } - export interface Select<T extends string> extends Base<T> { + export interface Select<T extends string | number> extends Base<T> { type: 'select' /** array of (value, label) tuples */ options: [T, string][] } - export function Select<T extends string>(defaultValue: T, options: [T, string][], info?: Info): Select<T> { + export function Select<T extends string | number>(defaultValue: T, options: [T, string][], info?: Info): Select<T> { return setInfo<Select<T>>({ type: 'select', defaultValue, options }, info) }