Basic Selection mode UI help

- could use some improvement

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

@@ -24,7 +24,8 @@ export class ControlGroup extends React.Component<{
     headerLeftMargin?: string,
     onHeaderClick?: () => void,
     noTopMargin?: boolean,
-    childrenClassName?: string
+    childrenClassName?: string,
+    maxHeight?: string
 }, { isExpanded: boolean }> {
     state = { isExpanded: !!this.props.initialExpanded }
 
@@ -49,7 +50,7 @@ export class ControlGroup extends React.Component<{
                     <b>{this.props.header}</b>
                 </Button>
             </div>
-            {this.state.isExpanded && <div className={groupClassName} style={{ display: this.state.isExpanded ? 'block' : 'none' }}>
+            {this.state.isExpanded && <div className={groupClassName} style={{ display: this.state.isExpanded ? 'block' : 'none', maxHeight: this.props.maxHeight, overflow: 'hidden', overflowY: 'auto' }}>
                 {this.props.children}
             </div>}
         </div>;

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

@@ -427,8 +427,7 @@
     position: relative;
     // display: inline-block;
     margin: $control-spacing auto 0 auto;
-    width: 400px;
-    line-height: $row-height;
+    width: 430px;
 
     &-actions {
         position: absolute;

src/mol-plugin-ui/structure/selection.tsx

@@ -11,6 +11,7 @@ import Brush from '@material-ui/icons/Brush';
 import Restore from '@material-ui/icons/Restore';
 import Remove from '@material-ui/icons/Remove';
 import SelectAll from '@material-ui/icons/SelectAll';
+import HelpOutline from '@material-ui/icons/HelpOutline';
 import * as React from 'react';
 import { StructureSelectionQueries, StructureSelectionQuery, getNonStandardResidueQueries, getElementQueries, getPolymerAndBranchedEntityQueries } from '../../mol-plugin-state/helpers/structure-selection-query';
 import { InteractivityManager } from '../../mol-plugin-state/manager/interactivity';
@@ -24,9 +25,10 @@ import { PluginUIComponent, PurePluginUIComponent } from '../base';
 import { ActionMenu } from '../controls/action-menu';
 import { Button, ControlGroup, IconButton, ToggleButton } from '../controls/common';
 import { ParameterControls, ParamOnChange, PureSelectControl } from '../controls/parameters';
-import { Union, Subtract, Intersect, SetSvg as SetSvg, CubeSvg } from '../controls/icons';
+import { Union, Subtract, Intersect, SetSvg as SetSvg, CubeSvg, Icon } from '../controls/icons';
 import { AddComponentControls } from './components';
 import Structure from '../../mol-model/structure/structure/structure';
+import { ViewportHelpContent, HelpGroup, HelpText } from '../viewport/help';
 
 
 export class ToggleSelectionModeButton extends PurePluginUIComponent {
@@ -55,7 +57,7 @@ interface StructureSelectionActionsControlsState {
     isBusy: boolean,
     canUndo: boolean,
 
-    action?: StructureSelectionModifier | 'color' | 'add-repr'
+    action?: StructureSelectionModifier | 'color' | 'add-repr' | 'help'
 }
 
 const ActionHeader = new Map<StructureSelectionModifier, string>([
@@ -163,6 +165,7 @@ export class StructureSelectionActionsControls extends PluginUIComponent<{}, Str
     toggleSet = this.showAction('set')
     toggleColor = this.showAction('color')
     toggleAddRepr = this.showAction('add-repr')
+    toggleHelp = this.showAction('help')
 
     setGranuality: ParamOnChange = ({ value }) => {
         this.plugin.managers.interactivity.setProps({ granularity: value });
@@ -202,9 +205,10 @@ export class StructureSelectionActionsControls extends PluginUIComponent<{}, Str
                 <IconButton svg={Remove} title='Subtract Selection from Representations' onClick={this.subtract} disabled={this.isDisabled} />
                 <IconButton svg={Restore} onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
 
-                <IconButton svg={CancelOutlined} title='Turn selection mode off' onClick={this.turnOff} style={{ marginLeft: '10px' }} />
+                <ToggleButton icon={HelpOutline} title='Show/hide help' toggle={this.toggleHelp} style={{ marginLeft: '10px' }} isSelected={this.state.action === 'help'} />
+                <IconButton svg={CancelOutlined} title='Turn selection mode off' onClick={this.turnOff} />
             </div>
-            {(this.state.action && this.state.action !== 'color' && this.state.action !== 'add-repr') && <div className='msp-selection-viewport-controls-actions'>
+            {(this.state.action && this.state.action !== 'color' && this.state.action !== 'add-repr' && this.state.action !== 'help') && <div className='msp-selection-viewport-controls-actions'>
                 <ActionMenu header={ActionHeader.get(this.state.action as StructureSelectionModifier)} title='Click to close.' items={this.queries} onSelect={this.selectQuery} noOffset />
             </div>}
             {this.state.action === 'color' && <div className='msp-selection-viewport-controls-actions'>
@@ -217,6 +221,17 @@ export class StructureSelectionActionsControls extends PluginUIComponent<{}, Str
                     <AddComponentControls onApply={this.toggleAddRepr} forSelection />
                 </ControlGroup>
             </div>}
+            {this.state.action === 'help' && <div className='msp-selection-viewport-controls-actions'>
+                <ControlGroup header='Help' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleHelp} topRightIcon={Close} maxHeight='300px'>
+                    <HelpGroup header='Selection Operations'>
+                        <HelpText>Use <Icon svg={Union} inline /> <Icon svg={Subtract} inline /> <Icon svg={Intersect} inline /> <Icon svg={SetSvg} inline /> to modify the selection.</HelpText>
+                    </HelpGroup>
+                    <HelpGroup header='Representation Operations'>
+                        <HelpText>Use <Icon svg={Brush} inline /> <Icon svg={CubeSvg} inline /> <Icon svg={Remove} inline /> <Icon svg={Restore} inline /> to color, create selection/representation, subtract it, or undo actions.</HelpText>
+                    </HelpGroup>
+                    <ViewportHelpContent selectOnly={true} />
+                </ControlGroup>
+            </div>}
         </>;
     }
 }

src/mol-plugin-ui/viewport/help.tsx

@@ -40,7 +40,7 @@ export class BindingsHelp extends React.PureComponent<{ bindings: { [k: string]:
     }
 }
 
-class HelpText extends React.PureComponent {
+export class HelpText extends React.PureComponent {
     render() {
         return <div className='msp-help-text'>
             <div>{this.props.children}</div>
@@ -48,7 +48,7 @@ class HelpText extends React.PureComponent {
     }
 }
 
-class HelpGroup extends React.PureComponent<{ header: string, initiallyExpanded?: boolean }, { isExpanded: boolean }> {
+export class HelpGroup extends React.PureComponent<{ header: string, initiallyExpanded?: boolean }, { isExpanded: boolean }> {
     state = {
         header: this.props.header,
         isExpanded: !!this.props.initiallyExpanded
@@ -75,7 +75,7 @@ function HelpSection(props: { header: string }) {
     return <div className='msp-simple-help-section'>{props.header}</div>;
 }
 
-export class ViewportHelpContent extends PluginUIComponent {
+export class ViewportHelpContent extends PluginUIComponent<{ selectOnly?: boolean }> {
     componentDidMount() {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
     }
@@ -87,10 +87,10 @@ export class ViewportHelpContent extends PluginUIComponent {
             if (bindings) Object.assign(interactionBindings, bindings);
         });
         return <>
-            {this.plugin.canvas3d && <HelpGroup key='trackball' header='Moving in 3D'>
+            {(!this.props.selectOnly && this.plugin.canvas3d) && <HelpGroup key='trackball' header='Moving in 3D'>
                 <BindingsHelp bindings={this.plugin.canvas3d.props.trackball.bindings} />
             </HelpGroup>}
-            <HelpGroup key='interactions' header='Select, Highlight, Focus'>
+            <HelpGroup key='interactions' header='Mouse Controls'>
                 <BindingsHelp bindings={interactionBindings} />
             </HelpGroup>
         </>;