mol-plugin-ui: SelectControl label fix

src/mol-plugin-ui/controls/action-menu.tsx

@@ -49,6 +49,7 @@ export namespace ActionMenu {
         header?: string,
         label?: string,
         current?: Item,
+        title?: string,
         onSelect: (value: any) => void
     }
 
@@ -95,7 +96,7 @@ export namespace ActionMenu {
         render() {
             const props = this.props;
             const label = props.label || props.header;
-            return <button onClick={this.onClick}
+            return <button onClick={this.onClick} title={this.props.title}
                 disabled={props.disabled} style={props.style} className={props.className}>
                 {this.state.isSelected ? <b>{label}</b> : label}
             </button>;
@@ -271,4 +272,13 @@ export namespace ActionMenu {
             if (found) return found;
         }
     }
+
+    export function getFirstItem(spec: Spec): Item | undefined {
+        if (typeof spec === 'string') return;
+        if (isItem(spec)) return spec;
+        for (const s of spec) {
+            const found = getFirstItem(s);
+            if (found) return found;
+        }
+    }
 }

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

@@ -340,9 +340,14 @@ export class SelectControl extends SimpleParam<PD.Select<string | number>> {
 
     renderControl() {
         const items = this.items(this.props.param);
-        const current = ActionMenu.findCurrent(items, this.props.value);
+        const current = this.props.value ? ActionMenu.findCurrent(items, this.props.value) : void 0;
+        const label = current
+            ? current.name
+            : typeof this.props.value === 'undefined'
+            ? `${ActionMenu.getFirstItem(items)?.name || ''} [Default]`
+            : `[Invalid] ${this.props.value}`
         return <ActionMenu.Toggle menu={this.menu} disabled={this.props.isDisabled} style={{ textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }}
-            onSelect={this.onSelect} items={items as ActionMenu.Spec} label={current?.name || `[Invalid] ${this.props.value}`}
+            onSelect={this.onSelect} items={items as ActionMenu.Spec} label={label} title={label}
             current={current} />;
     }