Plugin UI tweaks

- component focus ensures visibility
- moved measurements to selection section

src/mol-plugin-ui/controls.tsx

@@ -17,7 +17,6 @@ import { StateTransformer } from '../mol-state';
 import { ModelFromTrajectory } from '../mol-plugin-state/transforms/model';
 import { AnimationControls } from './state/animation';
 import { StructureSelectionControls } from './structure/selection';
-import { StructureMeasurementsControls } from './structure/measurements';
 import { Icon } from './controls/icons';
 import { StructureComponentControls } from './structure/components';
 import { StructureSourceControls } from './structure/source';
@@ -286,7 +285,6 @@ export class DefaultStructureTools extends PluginUIComponent {
 
             <StructureSourceControls />
             <StructureSelectionControls />
-            <StructureMeasurementsControls />
             <StructureComponentControls />
             <StructureFocusControls />
             <VolumeStreamingControls />

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

@@ -314,6 +314,18 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
     }
 
     focus = () => {
+        let allHidden = true;
+        for (const c of this.props.group) {
+            if (!c.cell.state.isHidden) {
+                allHidden = false;
+                break;
+            }
+        }
+
+        if (allHidden) {
+            this.plugin.managers.structure.hierarchy.toggleVisibility(this.props.group, 'show');
+        }
+
         this.plugin.managers.camera.focusSpheres(this.props.group, e => {
             if (e.cell.state.isHidden) return;
             return e.cell.obj?.data.boundary.sphere;

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

@@ -33,7 +33,7 @@ export class GenericEntryListControls extends PurePluginUIComponent {
         }
         if (refs.length === 0) return null;
 
-        return <GenericEntry refs={refs} labelMultiple='Unitcells' showOnFocus />;
+        return <GenericEntry refs={refs} labelMultiple='Unitcells' />;
     }
 
     get customControls(): JSX.Element[] | null {
@@ -59,7 +59,7 @@ export class GenericEntryListControls extends PurePluginUIComponent {
     }
 }
 
-export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<{ refs: T[], labelMultiple?: string, showOnFocus?: boolean }, { showOptions: boolean }> {
+export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<{ refs: T[], labelMultiple?: string }, { showOptions: boolean }> {
     state = { showOptions: false }
 
     componentDidMount() {
@@ -92,20 +92,27 @@ export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<
     focus = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
 
-        let isHidden = false;
+        let allHidden = true;
+        for (const uc of this.props.refs) {
+            if (!uc.cell.state.isHidden) {
+                allHidden = false;
+                break;
+            }
+        }
+
+        if (allHidden) {
+            this.plugin.managers.structure.hierarchy.toggleVisibility(this.props.refs, 'show');
+        }
+
         const loci = [];
         for (const uc of this.props.refs) {
             if (uc.cell.state.isHidden) {
-                if (this.props.showOnFocus) isHidden = true;
-                else continue;
+                continue;
             }
 
             const l = uc.cell.obj?.data.repr.getLoci()
             if (l) loci.push(l);
         }
-        if (isHidden) {
-            this.plugin.managers.structure.hierarchy.toggleVisibility(this.props.refs, 'show');
-        }
         this.plugin.managers.camera.focusLoci(loci);
     }
 

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

@@ -13,7 +13,7 @@ import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { angleLabel, dihedralLabel, distanceLabel, lociLabel } from '../../mol-theme/label';
 import { FiniteArray } from '../../mol-util/type-helpers';
-import { CollapsableControls, PurePluginUIComponent } from '../base';
+import { PurePluginUIComponent } from '../base';
 import { ActionMenu } from '../controls/action-menu';
 import { ExpandGroup, IconButton, ToggleButton } from '../controls/common';
 import { Icon } from '../controls/icons';
@@ -22,19 +22,12 @@ import { UpdateTransformControl } from '../state/update-transform';
 
 // TODO details, options (e.g. change text for labels)
 
-export class StructureMeasurementsControls extends CollapsableControls {
-    defaultState() {
-        return {
-            isCollapsed: false,
-            header: 'Measurements',
-        };
-    }
-
-    renderControls() {
-        return <>
+export class StructureMeasurementsControls extends PurePluginUIComponent {
+    render() {
+        return <ExpandGroup header='Measurements' noOffset>
             <MeasurementControls />
             <MeasurementList />
-        </>
+        </ExpandGroup>
     }
 }
 

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

@@ -19,6 +19,7 @@ import { ActionMenu } from '../controls/action-menu';
 import { ControlGroup, ToggleButton } from '../controls/common';
 import { Icon } from '../controls/icons';
 import { ParameterControls } from '../controls/parameters';
+import { StructureMeasurementsControls } from './measurements';
 
 export const DefaultQueries = ActionMenu.createItems(StructureSelectionQueryList, {
     filter: q => q !== StructureSelectionQueries.current,
@@ -158,12 +159,13 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
         return <>
             <ParameterControls params={StructureSelectionParams} values={this.values} onChangeValues={this.setProps} />
             {this.controls}
-            <div className='msp-control-row msp-row-text' style={{ marginTop: '6px' }}>
+            <div className='msp-control-row msp-row-text' style={{ margin: '6px 0' }}>
                 <button className='msp-btn msp-btn-block msp-no-overflow' onClick={this.focus} title='Click to Focus Selection' disabled={empty}>
                     <Icon name='focus-on-visual' style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}
                 </button>
             </div>
+            <StructureMeasurementsControls />
         </>
     }
 }