mol-plugin: SequenceView tweaks

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%;

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>;

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>