support multiline PD.text and use markdown to render multi-line tooltips

src/mol-plugin-ui/controls.tsx

@@ -286,7 +286,7 @@ export class SelectionViewportControls extends PluginUIComponent {
 }
 
 export class LociLabels extends PluginUIComponent<{}, { labels: ReadonlyArray<LociLabel> }> {
-    state = { labels: [] };
+    state = { labels: [] as string[] };
 
     componentDidMount() {
         this.subscribe(this.plugin.behaviors.labels.highlight, e => this.setState({ labels: e.labels }));
@@ -298,7 +298,15 @@ export class LociLabels extends PluginUIComponent<{}, { labels: ReadonlyArray<Lo
         }
 
         return <div className='msp-highlight-info'>
-            {this.state.labels.map((e, i) => <div key={'' + i} dangerouslySetInnerHTML={{ __html: e }} />)}
+            {this.state.labels.map((e, i) => {
+                if (e.indexOf('\n') > 0) {
+                    return <div className='msp-highlight-markdown-row' key={'' + i}>
+                        <Markdown skipHtml>{e}</Markdown>
+                    </div>;
+                }
+
+                return <div className='msp-highlight-simple-row' key={'' + i} dangerouslySetInnerHTML={{ __html: e }} />;
+            })}
         </div>;
     }
 }

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

@@ -244,6 +244,7 @@ function renderSimple(options: { props: ParamProps<any>, state: { showHelp: bool
     const _className = [];
     if (props.param.shortLabel) _className.push('msp-control-label-short');
     if (props.param.twoColumns) _className.push('msp-control-col-2');
+    if (props.param.multiline) _className.push('msp-control-twoline');
     const className = _className.join(' ');
 
     const label = props.param.label || camelCaseToWords(props.name);
@@ -403,32 +404,71 @@ export class NumberRangeControl extends SimpleParam<PD.Numeric> {
 }
 
 export class TextControl extends SimpleParam<PD.Text> {
-    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
+    updateValue = (value: string) => {
         if (value !== this.props.value) {
             this.update(value);
         }
     };
 
-    onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if ((e.keyCode === 13 || e.charCode === 13 || e.key === 'Enter')) {
-            if (this.props.onEnter) this.props.onEnter();
-        }
-        e.stopPropagation();
-    };
-
     renderControl() {
-        const placeholder = this.props.param.label || camelCaseToWords(this.props.name);
-        return <input type='text'
-            value={this.props.value || ''}
-            placeholder={placeholder}
-            onChange={this.onChange}
-            onKeyPress={this.props.onEnter ? this.onKeyPress : void 0}
-            disabled={this.props.isDisabled}
-        />;
+        const placeholder = this.props.param.placeholder || this.props.param.label || camelCaseToWords(this.props.name);
+        return <TextCtrl props={this.props} placeholder={placeholder} update={this.updateValue} />;
     }
 }
 
+function TextCtrl({ props, placeholder, update }: { props: ParamProps<PD.Text>, placeholder: string, update: (v: string) => any }) {
+    const [value, setValue] = React.useState(props.value);
+    React.useEffect(() => setValue(props.value), [props.value]);
+
+    if (props.param.multiline) {
+        return <div className='msp-control-text-area-wrapper'>
+            <textarea
+                value={props.param.disableInteractiveUpdates ? (value || '') : props.value}
+                placeholder={placeholder}
+                onChange={e => {
+                    if (props.param.disableInteractiveUpdates) setValue(e.target.value);
+                    else update(e.target.value);
+                }}
+                onBlur={e => {
+                    if (props.param.disableInteractiveUpdates) update(e.target.value);
+                }}
+                onKeyDown={e => {
+                    if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+                        e.currentTarget.blur();
+                    }
+                }}
+                disabled={props.isDisabled}
+            />
+        </div>;
+    }
+
+    return <input
+        type='text'
+        value={props.param.disableInteractiveUpdates ? (value || '') : props.value}
+        placeholder={placeholder}
+        onChange={e => {
+            if (props.param.disableInteractiveUpdates) setValue(e.target.value);
+            else update(e.target.value);
+        }}
+        onBlur={e => {
+            if (props.param.disableInteractiveUpdates) update(e.target.value);
+        }}
+        disabled={props.isDisabled}
+        onKeyDown={e => {
+            if (e.key !== 'Enter') return;
+
+            if (props.onEnter) {
+                e.stopPropagation();
+                props.onEnter();
+            } else if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+                e.currentTarget.blur();
+            } else if (props.param.disableInteractiveUpdates) {
+                update(value);
+            }
+        }}
+    />;
+}
+
 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 });

src/mol-plugin-ui/skin/base/components/controls.scss

@@ -71,6 +71,10 @@
     width: 50%;
 }
 
+.msp-control-twoline {
+    height: 2 * $row-height !important;
+}
+
 .msp-control-group {
     position: relative;
 }
@@ -418,9 +422,8 @@
     }
 }
 
-.msp-text-area-wrapper {
+.msp-control-text-area-wrapper, .msp-text-area-wrapper {
     position: relative;
-    height: 3 * $row-height !important;
     textarea {
         border: none;
         width: 100%;
@@ -431,4 +434,12 @@
         font-size: 12px;
         line-height: 16px;
     }
-}
+}
+
+.msp-control-text-area-wrapper {
+    height: 2 * $row-height !important;
+}
+
+.msp-text-area-wrapper {
+    height: 3 * $row-height !important;
+}

src/mol-plugin-ui/skin/base/components/viewport.scss

@@ -142,13 +142,19 @@
     padding: $info-vertical-padding $control-spacing;
     background: $default-background; //$highlight-info-background;
     opacity: 90%;
-
-    // min-height: $row-height;
-    text-align: right;
+    max-width: 400px;
 
     @include non-selectable;
 }
 
+.msp-highlight-markdown-row {
+    padding-left: $control-spacing;
+}
+
+.msp-highlight-simple-row {
+    text-align: right;
+}
+
 .msp-highlight-info-hr {
     margin-inline: 0px;
     margin-block: 3px;

src/mol-repr/shape/loci/label.ts

@@ -33,8 +33,8 @@ export const LabelParams = {
     ...TextParams,
     scaleByRadius: PD.Boolean(true),
     visuals: PD.MultiSelect(['text'], PD.objectToOptions(LabelVisuals)),
-    snapshotKey: PD.Text('', { isEssential: true, description: 'Active the snapshot with the provided key when clicking on the label' }),
-    tooltip: PD.Text('', { isEssential: true, description: 'Tooltip text to be displayed when hovering over the label' }),
+    snapshotKey: PD.Text('', { isEssential: true, disableInteractiveUpdates: true, description: 'Activate the snapshot with the provided key when clicking on the label' }),
+    tooltip: PD.Text('', { isEssential: true, multiline: true, disableInteractiveUpdates: true, placeholder: 'Tooltip', description: 'Tooltip text to be displayed when hovering over the label' }),
 };
 
 export type LabelParams = typeof LabelParams

src/mol-util/param-definition.ts

@@ -104,10 +104,13 @@ export namespace ParamDefinition {
     }
 
     export interface Text<T extends string = string> extends Base<T> {
-        type: 'text'
+        type: 'text',
+        multiline?: boolean,
+        placeholder?: string,
+        disableInteractiveUpdates?: boolean
     }
-    export function Text<T extends string = string>(defaultValue: string = '', info?: Info): Text<T> {
-        return setInfo<Text<T>>({ type: 'text', defaultValue: defaultValue as any }, info);
+    export function Text<T extends string = string>(defaultValue: string = '', info?: Info & { multiline?: boolean, placeholder?: string, disableInteractiveUpdates?: boolean }): Text<T> {
+        return setInfo<Text<T>>({ type: 'text', defaultValue: defaultValue as any, multiline: info?.multiline, placeholder: info?.placeholder, disableInteractiveUpdates: info?.disableInteractiveUpdates }, info);
     }
 
     export interface Color extends Base<ColorData> {