mol-plugin-ui: GenericEntry.showOnFocus option

src/mol-plugin-state/manager/structure/hierarchy.ts

@@ -142,10 +142,12 @@ export class StructureHierarchyManager extends PluginComponent {
         return this.plugin.updateDataState(deletes, { canUndo: canUndo ? 'Remove' : false });
     }
 
-    toggleVisibility(refs: ReadonlyArray<HierarchyRef>) {
+    toggleVisibility(refs: ReadonlyArray<HierarchyRef>, action?: 'show' | 'hide') {
         if (refs.length === 0) return;
 
-        const isHidden = !refs[0].cell.state.isHidden;
+        const isHidden = action !== void 0
+            ? (action === 'show' ? false : true)
+            : !refs[0].cell.state.isHidden;
         for (const c of refs) {
             setSubtreeVisibility(this.dataState, c.cell.transform.ref, isHidden);
         }

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' />;
+        return <GenericEntry refs={refs} labelMultiple='Unitcells' showOnFocus />;
     }
 
     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 }, { showOptions: boolean }> {
+export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<{ refs: T[], labelMultiple?: string, showOnFocus?: boolean }, { showOptions: boolean }> {
     state = { showOptions: false }
 
     componentDidMount() {
@@ -92,13 +92,20 @@ export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<
     focus = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
 
+        let isHidden = false;
         const loci = [];
         for (const uc of this.props.refs) {
-            if (uc.cell.state.isHidden) continue;
+            if (uc.cell.state.isHidden) {
+                if (this.props.showOnFocus) isHidden = true;
+                else 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);
     }