added more help text

src/structure-viewer/ui/general.tsx

@@ -14,9 +14,12 @@ import { Canvas3DParams } from 'molstar/lib/mol-canvas3d/canvas3d';
 const GeneralSettingsParams = {
     spin: Canvas3DParams.trackball.params.spin,
     background: Canvas3DParams.renderer.params.backgroundColor,
-    renderStyle: PD.Select('glossy', [['toon', 'Toon'], ['matte', 'Matte'], ['glossy', 'Glossy'], ['metallic', 'Metallic']]),
-    occlusion: PD.Boolean(false),
+    renderStyle: PD.Select('glossy', [['toon', 'Toon'], ['matte', 'Matte'], ['glossy', 'Glossy'], ['metallic', 'Metallic']], { description: 'Style in which the 3D scene is rendered' }),
+    occlusion: PD.Boolean(false, { description: 'Darken occluded crevices with the ambient occlusion effect' }),
 }
+// TODO remove when updating molstar
+GeneralSettingsParams.spin.description = 'Spin the 3D scene around the x-axis in view space'
+GeneralSettingsParams.background.description = 'Background color of the 3D canvas'
 
 export class GeneralSettings<P> extends CollapsableControls<P> {
     setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {

src/structure-viewer/ui/help.tsx

@@ -12,7 +12,7 @@ function getBindingsList(bindings: { [k: string]: Binding }) {
     return Object.keys(bindings).map(k => [k, bindings[k]] as [string, Binding])
 }
 
-export class BindingsHelp extends React.Component<{ bindings: { [k: string]: Binding } }, { isExpanded: boolean }> {
+class BindingsHelp extends React.Component<{ bindings: { [k: string]: Binding } }, { isExpanded: boolean }> {
     getBindingComponents() {
         const bindingsList = getBindingsList(this.props.bindings)
         return bindingsList.map(value => {
@@ -23,14 +23,20 @@ export class BindingsHelp extends React.Component<{ bindings: { [k: string]: Bin
         })
     }
 
+    render() {
+        return <HelpText>{this.getBindingComponents()}</HelpText>
+    }
+}
+
+class HelpText extends React.PureComponent {
     render() {
         return <div className='msp-control-row msp-help-text'>
-            <div>{this.getBindingComponents()}</div>
+            <div>{this.props.children}</div>
         </div>
     }
 }
 
-export class HelpGroup extends React.Component<{ header: string, initiallyExpanded?: boolean }, { isExpanded: boolean }> {
+class HelpGroup extends React.Component<{ header: string, initiallyExpanded?: boolean }, { isExpanded: boolean }> {
     state = {
         header: this.props.header,
         isExpanded: !!this.props.initiallyExpanded
@@ -53,6 +59,23 @@ export class HelpGroup extends React.Component<{ header: string, initiallyExpand
     }
 }
 
+const HelpSectionStyle: React.CSSProperties = {
+    height: '28px',
+    lineHeight: '28px',
+    marginTop: '5px',
+    marginBottom: '0px',
+    padding: '0 10px',
+    fontWeight: 500,
+    background: '#ecf2f8',
+    color: '#595959'
+}
+
+class HelpSection extends React.PureComponent<{ header: string }> {
+    render() {
+        return <div style={HelpSectionStyle}>{this.props.header}</div>
+    }
+}
+
 export class Help extends CollapsableControls {
     componentDidMount() {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
@@ -65,7 +88,7 @@ export class Help extends CollapsableControls {
         }
     }
 
-    getComponents() {
+    private getMouseBindingComponents() {
         const components = [
             <HelpGroup key='trackball' header='Trackball'>
                 <BindingsHelp bindings={this.plugin.canvas3d.props.trackball.bindings} />
@@ -87,6 +110,45 @@ export class Help extends CollapsableControls {
     renderControls() {
         if (!this.plugin.canvas3d) return null
 
-        return <div>{this.getComponents()}</div>
+        return <div>
+            <HelpSection header='Interface Controls' />
+            <HelpGroup header='Inline Help'>
+                <HelpText>Many user interface elements show a little questionmark icon when hovered over. Clicking the icon toggles the display of an inline help text.</HelpText>
+                <HelpText>Tooltips may provide additional information on a user interface element and are shown when hovering with the mouse.</HelpText>
+            </HelpGroup>
+            <HelpGroup header='Selections'>
+                <HelpText>
+                    The viewer allows changing colors and representations for selections of atoms, residues or chains. Selections can be created by
+                    <ul style={{ paddingLeft: '20px' }}>
+                        <li>picking elements on the 3D canvas or the sequence view using the mouse (see help section on 'Mouse Bindings')</li>
+                        <li>using the 'Add', 'Remove' and 'Only' dropdown buttons in the 'Selection' panel which allow modifing the current selection by predefined sets</li>
+                    </ul>
+                </HelpText>
+            </HelpGroup>
+            <HelpGroup header='Coloring'>
+                <HelpText>
+                    There are two ways to color structures. Every representation (e.g. cartoon or spacefill) has a color theme which can be changed using the dropdown for each representation in the 'Structure Settings' panel. Additionally any selection atoms, residues or chains can by given a custom color. For that, first select the parts of the structure to be colored (see help section on 'Selections') and, second, choose a color from the color dropdown botton in the 'Selection' row of the 'Representation' panel. The theme color can be seen as a base color that is overpainted by the custom color. Custom colors can be removed for a selection with the 'Clear' option in the color dropdown.
+                </HelpText>
+            </HelpGroup>
+            <HelpGroup header='Representations'>
+                <HelpText>
+                    Structures can be shown with many different representations (e.g. cartoon or spacefill). The 'Representation' panel offers a collection of predefined styles which can be applied using the 'Preset' dropdown button. Additionally any selection atoms, residues or chains can by shown with a custom representation. For that, first select the parts of the structure to be mofified (see help section on 'Selections') and, second, choose a representation to hide or show from the 'Show' and 'Hide' dropdown bottons in the 'Selection' row of the 'Representation' panel. The 'Everything' row applies the action to the whole structure instead of the current selection.
+                </HelpText>
+            </HelpGroup>
+
+            <HelpSection header='How-to Guides' />
+            <HelpGroup header='Molecule of the Month Style'>
+                <HelpText>
+                    <ol style={{ paddingLeft: '20px' }}>
+                        <li>First, hide everything, then show everything with the spacefill representation using the 'Representation' panel.</li>
+                        <li>Change color theme of the spacefill representation to 'illustrative' using the 'Structure Settings' panel.</li>
+                        <li>Set render style to 'toon' and activate 'occlusion' in the 'General Settings' panel.</li>
+                    </ol>
+                </HelpText>
+            </HelpGroup>
+
+            <HelpSection header='Mouse Bindings' />
+            {this.getMouseBindingComponents()}
+        </div>
     }
 }

src/structure-viewer/ui/structure.tsx

@@ -197,10 +197,12 @@ export class StructureControls<P, S extends StructureControlsState> extends Coll
 
         return {
             assembly: PD.Select(assemblyValue, assemblyOptions, {
-                isHidden: assemblyOptions.length === 1
+                isHidden: assemblyOptions.length === 1,
+                description: 'Show a specific biological or crystallographic assembly'
             }),
             model: PD.Select(modelValue, modelOptions, {
-                isHidden: modelOptions.length === 1
+                isHidden: modelOptions.length === 1,
+                description: 'Show a specific model or the full ensamble of models'
             }),
             // symmetry: PD.Select('todo', [['todo', 'todo']]), // TODO
             colorThemes: PD.Group(colorThemes, { isExpanded: true }),