mol-plugin: better current object handling

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

@@ -7,6 +7,7 @@
     padding: 0 $control-spacing;
     font-weight: bold;
     background: $default-background;
+    overflow: hidden;
     // border-right: $control-spacing solid $entity-color-Group; // TODO separate color
     border-bottom: 1px solid $entity-color-Group; // TODO separate color
     // border-bottom: 1px solid $entity-color-Group; // TODO separate color
@@ -118,7 +119,9 @@
         // background: $control-background;
 
         .msp-btn-tree-label {
-            cursor: default;
+            > span {
+                font-weight: bold;
+            }
         }
 
         .msp-btn-tree-label:hover {

src/mol-plugin/ui/plugin.tsx

@@ -200,6 +200,10 @@ export class CurrentObject extends PluginUIComponent {
             this.forceUpdate();
         });
 
+        this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, o => {
+            this.forceUpdate();
+        });
+
         this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
             const current = this.current;
             if (current.ref !== ref || current.state !== state) return;
@@ -208,8 +212,13 @@ export class CurrentObject extends PluginUIComponent {
     }
 
     render() {
+        const tabName = this.plugin.behaviors.layout.leftPanelTabName.value;
+        if (tabName !== 'data' && tabName !== 'settings') return null;
+
         const current = this.current;
         const ref = current.ref;
+        if (ref === StateTransform.RootRef) return null;
+
         const cell = current.state.cells.get(ref)!;
         const transform = cell.transform;
 

src/mol-plugin/ui/state/tree.tsx

@@ -168,6 +168,12 @@ class StateTreeNodeLabel extends PluginUIComponent<
         PluginCommands.State.SetCurrentObject.dispatch(this.plugin, { state: this.props.cell.parent, ref: this.ref });
     }
 
+    setCurrentRoot = (e: React.MouseEvent<HTMLElement>) => {
+        e.preventDefault();
+        e.currentTarget.blur();
+        PluginCommands.State.SetCurrentObject.dispatch(this.plugin, { state: this.props.cell.parent, ref: StateTransform.RootRef });
+    }
+
     remove = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
         PluginCommands.State.RemoveObject.dispatch(this.plugin, { state: this.props.cell.parent, ref: this.ref, removeParentGhosts: true });
@@ -218,15 +224,11 @@ class StateTreeNodeLabel extends PluginUIComponent<
         } else if (cell.status !== 'ok' || !cell.obj) {
             const name = n.transformer.definition.display.name;
             const title = `${cell.errorText}`;
-            label = <><button className='msp-btn-link msp-btn-tree-label' title={title} onClick={this.setCurrent}><b>[{cell.status}]</b> {name}: <i>{cell.errorText}</i> </button></>;
+            label = <><button className='msp-btn-link msp-btn-tree-label' title={title} onClick={this.state.isCurrent ? this.setCurrentRoot : this.setCurrent}><b>[{cell.status}]</b> {name}: <i><span>{cell.errorText}</span></i> </button></>;
         } else {
             const obj = cell.obj as PluginStateObject.Any;
-            const title = `${obj.label} ${obj.description ? obj.description : ''}`
-            if (this.state.isCurrent) {
-                label = <><button className='msp-btn-link msp-btn-tree-label' title={title}><b>{obj.label}</b> {obj.description ? <small>{obj.description}</small> : void 0}</button></>;
-            } else {
-                label = <><button className='msp-btn-link msp-btn-tree-label' title={title} onClick={this.setCurrent}>{obj.label} {obj.description ? <small>{obj.description}</small> : void 0}</button></>;
-            }
+            const title = `${obj.label} ${obj.description ? obj.description : ''}`;
+            label = <><button className='msp-btn-link msp-btn-tree-label' title={title} onClick={this.state.isCurrent ? this.setCurrentRoot : this.setCurrent}><span>{obj.label}</span> {obj.description ? <small>{obj.description}</small> : void 0}</button></>;
         }
 
         const children = cell.parent.tree.children.get(this.ref);