Component UI improvements

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

@@ -149,11 +149,24 @@ class StructureComponentManager extends PluginComponent<StructureComponentManage
         }));
     }
 
-    toggleVisibility(components: ReadonlyArray<StructureComponentRef>) {
+    toggleVisibility(components: ReadonlyArray<StructureComponentRef>, reprPivot?: StructureRepresentationRef) {
         if (components.length === 0) return;
-        const isHidden = !components[0].cell.state.isHidden;
-        for (const c of components) {
-            setSubtreeVisibility(this.dataState, c.cell.transform.ref, isHidden);
+
+        if (!reprPivot) {
+            const isHidden = !components[0].cell.state.isHidden;
+            for (const c of components) {
+                setSubtreeVisibility(this.dataState, c.cell.transform.ref, isHidden);
+            }
+        } else {            
+            const index = components[0].representations.indexOf(reprPivot);
+            const isHidden = !reprPivot.cell.state.isHidden;
+
+            for (const c of components) {
+                // TODO: is it ok to use just the index here? Could possible lead to ugly edge cases, but perhaps not worth the trouble to "fix".
+                const repr = c.representations[index];
+                if (!repr) continue;
+                setSubtreeVisibility(this.dataState, repr.cell.transform.ref, isHidden)
+            }
         }
     }
 

src/mol-plugin-ui/skin/base/components/controls.scss

@@ -247,15 +247,15 @@
     > button {
         padding-left: $control-spacing / 2 !important;
         text-align: left;
-        height: 22px !important; // 2 * $row-height / 3 !important;
-        line-height: 22px !important; // 2 * $row-height / 3 !important;
+        height: 24px !important; // 2 * $row-height / 3 !important;
+        line-height: 24px !important; // 2 * $row-height / 3 !important;
         font-size: 70% !important;
         background: $default-background !important;
-        color: color-lower-contrast($font-color, 15%) !important;
+        color: color-lower-contrast($font-color, 15%);
     }
     .msp-icon {
-        height: 22px !important;
-        line-height: 22px !important;
+        height: 24px !important;
+        line-height: 24px !important;
     }
     > span {
         padding-left: $control-spacing / 2;

src/mol-plugin-ui/skin/base/components/sequence.scss

@@ -7,7 +7,7 @@
     background: $sequence-background;
 }
 
-$sequence-select-height: 22px;
+$sequence-select-height: 24px;
 .msp-sequence-select {
     position: relative;
     height: $sequence-select-height;

src/mol-plugin-ui/skin/base/components/temp.scss

@@ -335,4 +335,18 @@
             margin-right: 6px;
         }
     }
+}
+
+.msp-representation-entry {
+    position: relative;
+    > .msp-control-group-header {
+        > .msp-btn {
+            border-left: 1px solid $entity-color-Group;
+            font-weight: bold;
+        }
+        > .msp-icon, > .msp-btn-link {
+            line-height: 24px;
+            height: 24px;
+        }
+    }
 }

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

@@ -346,7 +346,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
             {this.state.action === 'remove' && <ActionMenu items={this.removeActions} onSelect={this.selectRemoveAction} />}
             {this.state.action === 'action' && <>
                 <ActionMenu items={this.actions} onSelect={this.selectAction} />
-                <div className='msp-control-offset'>
+                <div className='msp-control-offset' style={{ margin: '6px 0' }}>
                     {component.representations.map(r => <StructureRepresentationEntry group={this.props.group} key={r.cell.transform.ref} representation={r} />)}
                 </div>
             </>}
@@ -356,18 +356,32 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
 
 class StructureRepresentationEntry extends PurePluginUIComponent<{ group: StructureComponentRef[], representation: StructureRepresentationRef }> {
     remove = () => this.plugin.managers.structure.component.removeRepresentations(this.props.group, this.props.representation);
+    toggleVisible = (e: React.MouseEvent<HTMLElement>) => {
+        e.preventDefault();
+        e.currentTarget.blur();
+        this.plugin.managers.structure.component.toggleVisibility(this.props.group, this.props.representation);
+    }
+
+    componentDidMount() {
+        this.subscribe(this.plugin.events.state.cell.stateUpdated, e => {
+            if (State.ObjectEvent.isCell(e, this.props.representation.cell)) this.forceUpdate();
+        });
+    }
 
     update = (params: any) => this.plugin.managers.structure.component.updateRepresentations(this.props.group, this.props.representation, params);
 
     render() {
         const repr = this.props.representation.cell;
-        return <div style={{ position: 'relative' }}>
-            <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset headerStyle={{ fontWeight: 'bold' }}>
+        return <div className='msp-representation-entry'>
+            <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset>
                 <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' customUpdate={this.update} noMargin />
-                <IconButton onClick={this.remove} icon='remove' title='Remove' small style={{
-                    position: 'absolute', top: 0, right: 0, lineHeight: '22px', height: '22px', textAlign: 'right', width: '44px', paddingRight: '6px'
-                }} />
             </ExpandGroup>
+            <IconButton onClick={this.remove} icon='remove' title='Remove' small style={{
+                position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px'
+            }} />
+            <IconButton onClick={this.toggleVisible} toggleState={!this.props.representation.cell.state.isHidden} icon='visual-visibility' title='Remove' small style={{
+                position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '24px', paddingRight: '6px'
+            }} />
         </div>;
     }
 }