toggle hydrogens in structure view tools

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

@@ -8,11 +8,12 @@ import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { Structure, StructureElement } from '../../../mol-model/structure';
 import { isEmptyLoci } from '../../../mol-model/loci';
-import { ColorOptions } from '../controls/parameters';
+import { ColorOptions, ParameterControls } from '../controls/parameters';
 import { Color } from '../../../mol-util/color';
 import { ButtonSelect, Options } from '../controls/common';
 import { StructureSelectionQueries as Q } from '../../util/structure-selection-helper';
 import { MolScriptBuilder as MS } from '../../../mol-script/language/builder';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 
 abstract class BaseStructureRepresentationControls extends PluginUIComponent {
     onChange = (value: string) => {
@@ -92,6 +93,27 @@ export class StructureRepresentationControls extends PluginUIComponent {
         ]))
     }
 
+    onChange = async (p: { param: PD.Base<any>, name: string, value: any }) => {
+        if (p.name === 'showHydrogens') {
+            await this.plugin.helpers.structureRepresentation.setIgnoreHydrogens(!p.value)
+        }
+        this.forceUpdate()
+    }
+
+    get params () {
+        const values = this.values
+        return {
+            showHydrogens: PD.Boolean(values.showHydrogens)
+        }
+    }
+
+    get values () {
+        const { structureRepresentation: rep } = this.plugin.helpers
+        return {
+            showHydrogens: !rep.ignoreHydrogens
+        }
+    }
+
     render() {
         return <div className='msp-transform-wrapper'>
             <div className='msp-transform-header'>
@@ -102,6 +124,8 @@ export class StructureRepresentationControls extends PluginUIComponent {
             </div>
             <EverythingStructureRepresentationControls />
             <SelectionStructureRepresentationControls />
+
+            <ParameterControls params={this.params} values={this.values} onChange={this.onChange} />
         </div>
     }
 }
\ No newline at end of file

src/mol-plugin/util/structure-representation-helper.ts

@@ -62,20 +62,18 @@ export class StructureRepresentationHelper {
             })
         } else {
             const combinedLoci = getCombinedLoci(modifier, loci, StructureElement.Loci(s, []))
+            const params = StructureRepresentation3DHelpers.getDefaultParams(this.plugin, type as any, s)
+            if (params.type.params.ignoreHydrogens !== undefined) {
+                params.type.params.ignoreHydrogens = this._ignoreHydrogens
+            }
 
             update.to(structure.transform.ref)
                 .apply(
                     StateTransforms.Model.LociStructureSelection,
-                    {
-                        query: StructureElement.Query.fromLoci(combinedLoci),
-                        label: type
-                    },
+                    { query: StructureElement.Query.fromLoci(combinedLoci), label: type },
                     { tags: [ RepresentationManagerTag, getRepresentationManagerTag(type) ] }
                 )
-                .apply(
-                    StateTransforms.Representation.StructureRepresentation3D,
-                    StructureRepresentation3DHelpers.getDefaultParams(this.plugin, type as any, s)
-                )
+                .apply( StateTransforms.Representation.StructureRepresentation3D, params)
         }
 
         await this.plugin.runTask(state.updateTree(update, { doNotUpdateCurrent: true }))
@@ -100,6 +98,34 @@ export class StructureRepresentationHelper {
         })
     }
 
+    private _ignoreHydrogens = false
+    get ignoreHydrogens () { return this._ignoreHydrogens }
+    async setIgnoreHydrogens(ignoreHydrogens: boolean) {
+        if (ignoreHydrogens === this._ignoreHydrogens) return
+
+        const { registry } = this.plugin.structureRepresentation
+        const state = this.plugin.state.dataState;
+        const update = state.build()
+        const structures = state.select(StateSelection.Generators.rootsOfType(PSO.Molecule.Structure))
+
+        for (const structure of structures) {
+            for (let i = 0, il = registry.types.length; i < il; ++i) {
+                const type = registry.types[i][0]
+                const repr = this.getRepresentation(structure.transform.ref, type)
+                if (repr && repr.params && repr.params.values.type.params.ignoreHydrogens !== undefined) {
+                    const { name, params } = repr.params.values.type
+                    update.to(repr.transform.ref).update(
+                        StateTransforms.Representation.StructureRepresentation3D,
+                        props => ({ ...props, type: { name, params: { ...params, ignoreHydrogens }}})
+                    )
+                }
+            }
+        }
+        await this.plugin.runTask(state.updateTree(update, { doNotUpdateCurrent: true }))
+
+        this._ignoreHydrogens = ignoreHydrogens
+    }
+
     constructor(private plugin: PluginContext) {
 
     }