diff --git a/src/mol-plugin/skin/base/components/sequence.scss b/src/mol-plugin/skin/base/components/sequence.scss index 83ad8c0da1712629e3408ec999a09ed27f428520..fbb3729b4cca7ee4b2a90483be4bfc1086795729 100644 --- a/src/mol-plugin/skin/base/components/sequence.scss +++ b/src/mol-plugin/skin/base/components/sequence.scss @@ -27,7 +27,7 @@ $sequence-select-height: 22px; > select { display: inline-block; - max-width: 160px; + max-width: 120px; width: auto; text-overflow: ellipsis; font-size: 85%; diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx index 21b6a9466883c4361e717bf22ccd815712dddf3d..976895737c0d2f294620ab617bd78c3d2ee6c3d4 100644 --- a/src/mol-plugin/ui/controls/parameters.tsx +++ b/src/mol-plugin/ui/controls/parameters.tsx @@ -264,7 +264,7 @@ export class TextControl extends SimpleParam<PD.Text> { } } -export class PureSelectControl extends React.PureComponent<ParamProps<PD.Select<string | number>>> { +export class PureSelectControl extends React.PureComponent<ParamProps<PD.Select<string | number>> & { title?: string }> { protected update(value: string | number) { this.props.onChange({ param: this.props.param, name: this.props.name, value }); } @@ -279,7 +279,7 @@ export class PureSelectControl extends React.PureComponent<ParamProps<PD.Select render() { const isInvalid = this.props.value !== void 0 && !this.props.param.options.some(e => e[0] === this.props.value); - return <select className='msp-form-control' value={this.props.value !== void 0 ? this.props.value : this.props.param.defaultValue} onChange={this.onChange} disabled={this.props.isDisabled}> + return <select className='msp-form-control' title={this.props.title} value={this.props.value !== void 0 ? this.props.value : this.props.param.defaultValue} onChange={this.onChange} disabled={this.props.isDisabled}> {isInvalid && <option key={this.props.value} value={this.props.value}>{`[Invalid] ${this.props.value}`}</option>} {this.props.param.options.map(([value, label]) => <option key={value} value={value}>{label}</option>)} </select>; diff --git a/src/mol-plugin/ui/sequence.tsx b/src/mol-plugin/ui/sequence.tsx index 619ecf0cc2eb10e7fd9cd4a0d509642c9f2c4df5..f593459a2474c56338b9c3887c946673ee02095a 100644 --- a/src/mol-plugin/ui/sequence.tsx +++ b/src/mol-plugin/ui/sequence.tsx @@ -305,13 +305,13 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> { <span>Sequence of</span> <PureSelectControl param={params.structure} name='structure' value={values.structure} onChange={this.setParamProps} /> - <span>Entity</span> - <PureSelectControl param={params.entity} name='entity' value={values.entity} onChange={this.setParamProps} /> - <span>Chain</span> - <PureSelectControl param={params.chain} name='chain' value={values.chain} onChange={this.setParamProps} /> + {/* <span>Entity</span> */} + <PureSelectControl title='Entity' param={params.entity} name='entity' value={values.entity} onChange={this.setParamProps} /> + {/* <span>Chain</span> */} + <PureSelectControl title='Chain' param={params.chain} name='chain' value={values.chain} onChange={this.setParamProps} /> {params.operator.options.length > 1 && <> - <span>Instance</span> - <PureSelectControl param={params.operator} name='operator' value={values.operator} onChange={this.setParamProps} /> + {/* <span>Instance</span> */} + <PureSelectControl title='Instance' param={params.operator} name='operator' value={values.operator} onChange={this.setParamProps} /> </>} </div>