help improvements

src/structure-viewer/skin/rcsb.scss

@@ -27,4 +27,29 @@ $logo-background: lighten(#325880, 60%);
     opacity: 0.8 !important;
 }
 
-@import 'molstar/lib/mol-plugin/skin/base/base';
+@import 'molstar/lib/mol-plugin/skin/base/base';
+
+.msp-help-viewport-controls {
+    float: left;
+    // margin-right: $control-spacing;
+    position: relative;
+    // background: $default-background;
+
+    > div:first-child {
+        position: relative;
+        display: inline-block;
+
+        > button {
+            position: relative;
+        }
+    }
+}
+
+.msp-help-viewport-controls-content {
+    width: 290px;
+    position: absolute;
+    left: 0;
+    background: $default-background;
+    overflow-y: auto;
+    max-height: 600px;
+}

src/structure-viewer/ui/controls.tsx

@@ -14,10 +14,11 @@ import { Viewport, ViewportControls } from 'molstar/lib/mol-plugin/ui/viewport';
 import { BackgroundTaskProgress } from 'molstar/lib/mol-plugin/ui/task';
 import { ImageControls } from 'molstar/lib/mol-plugin/ui/image';
 import { LociLabels } from 'molstar/lib/mol-plugin/ui/controls';
+import { IconButton } from 'molstar/lib/mol-plugin/ui/controls/common';
 import { Toasts } from 'molstar/lib/mol-plugin/ui/toast';
 import { GeneralSettings } from './general';
 import { StructureControls } from './structure';
-import { Help } from './help';
+import { HelpContent } from './help';
 
 export class ControlsWrapper extends PluginUIComponent {
     componentDidMount() {
@@ -27,13 +28,30 @@ export class ControlsWrapper extends PluginUIComponent {
 
     render() {
         return <div className='msp-scrollable-container msp-right-controls' style={{ paddingTop: '0px' }}>
-            <Help />
             <GeneralSettings initiallyCollapsed={true} />
             <StructureControls  />
             <StructureSelectionControls header='Manage Selection' initiallyCollapsed={true} />
             <StructureRepresentationControls header='Change Representation' initiallyCollapsed={true} />
             <ImageControls initiallyCollapsed={true} />
-            <TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} header={{ name: 'Volume Controls', description: '' }} initiallyCollapsed={true} />
+            <TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} header={{ name: 'Density Controls', description: '' }} initiallyCollapsed={true} />
+        </div>;
+    }
+}
+
+class HelpViewportControls extends PluginUIComponent<{}, { isExpanded: boolean }> {
+    state = { isExpanded: false }
+
+    toggleExpanded = () => this.setState({ isExpanded: !this.state.isExpanded });
+
+    render() {
+        return <div className='msp-help-viewport-controls'>
+            <div>
+                <div className='msp-semi-transparent-background' />
+                <IconButton icon='help-circle' title='Help' onClick={this.toggleExpanded} />
+            </div>
+            {this.state.isExpanded && <div className='msp-help-viewport-controls-content'>
+                <HelpContent />
+            </div>}
         </div>;
     }
 }
@@ -42,6 +60,9 @@ export class ViewportWrapper extends PluginUIComponent {
     render() {
         return <>
             <Viewport />
+            <div className='msp-viewport-top-left-controls'>
+                <HelpViewportControls />
+            </div>
             <ViewportControls hideSettingsIcon={true} />
             <div style={{ position: 'absolute', left: '10px', bottom: '10px' }}>
                 <BackgroundTaskProgress />

src/structure-viewer/ui/help.tsx

@@ -5,8 +5,10 @@
  */
 
 import * as React from 'react';
-import { CollapsableControls } from 'molstar/lib/mol-plugin/ui/base';
+import { CollapsableControls, PluginUIComponent } from 'molstar/lib/mol-plugin/ui/base';
 import { Binding } from 'molstar/lib/mol-util/binding';
+import { StateSelection, StateTransformer } from 'molstar/lib/mol-state';
+import { StructureRepresentationInteraction } from 'molstar/lib/mol-plugin/behavior/dynamic/selection/structure-representation-interaction';
 
 function getBindingsList(bindings: { [k: string]: Binding }) {
     return Object.keys(bindings).map(k => [k, bindings[k]] as [string, Binding])
@@ -63,7 +65,7 @@ const HelpSectionStyle: React.CSSProperties = {
     height: '28px',
     lineHeight: '28px',
     marginTop: '5px',
-    marginBottom: '0px',
+    marginBottom: '5px',
     padding: '0 10px',
     fontWeight: 500,
     background: '#ecf2f8',
@@ -76,18 +78,11 @@ class HelpSection extends React.PureComponent<{ header: string }> {
     }
 }
 
-export class Help extends CollapsableControls {
+export class HelpContent extends PluginUIComponent {
     componentDidMount() {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
     }
 
-    defaultState() {
-        return {
-            isCollapsed: true,
-            header: 'Help'
-        }
-    }
-
     private getMouseBindingComponents() {
         const components = [
             <HelpGroup key='trackball' header='Trackball'>
@@ -107,32 +102,49 @@ export class Help extends CollapsableControls {
         return components
     }
 
-    renderControls() {
+    private getTriggerFor(transformer: StateTransformer, name: string) {
+        const state = this.plugin.state.behaviorState
+        const selections = state.select(StateSelection.Generators.ofTransformer(transformer))
+        const params = selections.length === 1 ? selections[0].params : undefined
+        const bindings = params ? params.values.bindings : {}
+        const binding: Binding = name in bindings ? bindings[name] : Binding.Empty
+        return binding.triggers.map(t => Binding.Trigger.format(t)).join(' or ')
+    }
+
+    render() {
         if (!this.plugin.canvas3d) return null
 
+        // const structureInteractionTriggers = this.getTriggerFor(StructureRepresentationInteraction, 'clickInteractionAroundOnly')
+        const volumeAroundTriggers = this.getTriggerFor(StructureRepresentationInteraction, 'clickInteractionAroundOnly') // TODO get from correct behavior transform
+
         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>
+                <HelpText>Tooltips may provide additional information on a user interface element and are shown when hovering over it 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>
+                        <li>using the 'Add', 'Remove' and 'Only' dropdown buttons in the 'Manage 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.
+                    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 'Change 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.
+                    Structures can be shown with many different representations (e.g. cartoon or spacefill). The 'Change 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 'Change Representation' panel. The 'Everything' row applies the action to the whole structure instead of the current selection.
+                </HelpText>
+            </HelpGroup>
+            <HelpGroup header='Densities'>
+                <HelpText>
+                    Densities can be shown for both X-ray and cryo-EM structures. By default the density around an element/atom can be shown by clicking using {volumeAroundTriggers}. The 'Density Controls' panel offers a variety of options to adjust the display of density maps. The absence of the 'Density Controls' panel indicates that no density is available for the loaded entry which is the case for e.g. NMR structures or very old X-ray structures.
                 </HelpText>
             </HelpGroup>
 
@@ -146,9 +158,31 @@ export class Help extends CollapsableControls {
                     </ol>
                 </HelpText>
             </HelpGroup>
+            <HelpGroup header='Create an Image'>
+                <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>
     }
+}
+
+export class Help extends CollapsableControls {
+    defaultState() {
+        return {
+            isCollapsed: true,
+            header: 'Help'
+        }
+    }
+
+    renderControls() {
+        return <HelpContent />
+    }
 }

src/structure-viewer/ui/structure.tsx

@@ -227,7 +227,7 @@ export class StructureControls<P, S extends StructureControlsState> extends Coll
         return {
             assembly: PD.Select(assemblyValue, assemblyOptions, {
                 isHidden: assemblyOptions.length === 1,
-                description: 'Show a specific biological or crystallographic assembly'
+                description: 'Show a specific biological, crystallographic or artificial assembly'
             }),
             model: PD.Select(modelValue, modelOptions, {
                 isHidden: modelOptions.length === 1,