mol-plugin: state tree UI fix + remove global current object

src/mol-plugin-ui/left-panel.tsx

@@ -43,11 +43,6 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
             return;
         }
 
-        switch (tab) {
-            case 'data': this.plugin.state.setKind('data'); break;
-            case 'settings': this.plugin.state.setKind('behavior'); break;
-        }
-
         this.setState({ tab }, () => this.plugin.behaviors.layout.leftPanelTabName.next(tab));
         if (this.plugin.layout.state.regionState.left !== 'full') {
             PluginCommands.Layout.Update(this.plugin, { state: { regionState: { ...this.plugin.layout.state.regionState, left: 'full' } } });

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

@@ -12,7 +12,7 @@ import { ApplyActionControl } from './apply-action';
 
 export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyCollapsed?: boolean, alwaysExpandFirst?: boolean }> {
     get current() {
-        return this.plugin.state.behavior.currentObject.value;
+        return this.props.state.behaviors.currentObject.value;
     }
 
     componentDidMount() {

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

@@ -50,7 +50,7 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
     }
 }
 
-class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: number }, { isCollapsed: boolean, isNull: boolean }> {
+class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: number }, { isCollapsed: boolean, isNull: boolean, showLabel: boolean }> {
     is(e: State.ObjectEvent) {
         return e.ref === this.ref && e.state === this.props.cell.parent;
     }
@@ -62,7 +62,9 @@ class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: nu
     componentDidMount() {
         this.subscribe(this.plugin.events.state.cell.stateUpdated, e => {
             if (this.props.cell === e.cell && this.is(e) && e.state.cells.has(this.ref)) {
-                if (this.state.isCollapsed !== !!e.cell.state.isCollapsed || this.state.isNull !== StateTreeNode.isNull(e.cell)) {
+                if (this.state.isCollapsed !== !!e.cell.state.isCollapsed
+                    || this.state.isNull !== StateTreeNode.isNull(e.cell)
+                    || this.state.showLabel !== StateTreeNode.showLabel(e.cell)) {
                     this.forceUpdate();
                 }
             }
@@ -83,25 +85,31 @@ class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: nu
 
     state = {
         isCollapsed: !!this.props.cell.state.isCollapsed,
-        isNull: StateTreeNode.isNull(this.props.cell)
+        isNull: StateTreeNode.isNull(this.props.cell),
+        showLabel: StateTreeNode.showLabel(this.props.cell)
     }
 
     static getDerivedStateFromProps(props: _Props<StateTreeNode>, state: _State<StateTreeNode>): _State<StateTreeNode> | null {
         const isNull = StateTreeNode.isNull(props.cell);
-        if (!!props.cell.state.isCollapsed === state.isCollapsed && state.isNull === isNull) return null;
-        return { isCollapsed: !!props.cell.state.isCollapsed, isNull };
+        const showLabel = StateTreeNode.showLabel(props.cell);
+        if (!!props.cell.state.isCollapsed === state.isCollapsed && state.isNull === isNull && state.showLabel === showLabel) return null;
+        return { isCollapsed: !!props.cell.state.isCollapsed, isNull, showLabel };
     }
 
-    hasDecorator(children: _StateTree.ChildSet) {
+    private static hasDecorator(cell: StateObjectCell) {
+        const children = cell.parent!.tree.children.get(cell.transform.ref);
         if (children.size !== 1) return false;
-        const ref = children.values().next().value;
-        return !!this.props.cell.parent?.tree.transforms.get(ref).transformer.definition.isDecorator;
+        return !!cell.parent?.tree.transforms.get(children.first()).transformer.definition.isDecorator;
     }
 
     private static isNull(cell?: StateObjectCell) {
         return !cell || !cell.parent || cell.obj === StateObject.Null || !cell.parent.tree.transforms.has(cell.transform.ref);
     }
 
+    private static showLabel(cell: StateObjectCell) {
+        return (cell.transform.ref !== StateTransform.RootRef) && (cell.status !== 'ok' || (!cell.state.isGhost && !StateTreeNode.hasDecorator(cell)));
+    }
+
     render() {
         if (this.state.isNull) {
             console.log('null');
@@ -109,11 +117,9 @@ class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: nu
         }
 
         const cell = this.props.cell!;
-        const cellState = cell.state;
         const children = cell.parent!.tree.children.get(this.ref);
-        const showLabel = (cell.transform.ref !== StateTransform.RootRef) && (cell.status !== 'ok' || (!cell.state.isGhost && !this.hasDecorator(children)));
 
-        if (!showLabel) {
+        if (!this.state.showLabel) {
             if (children.size === 0) return null;
             return <>
                 {children.map(c => <StateTreeNode cell={cell.parent!.cells.get(c!)!} key={c} depth={this.props.depth} />)}
@@ -125,7 +131,7 @@ class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: nu
             <StateTreeNodeLabel cell={cell} depth={this.props.depth} />
             {children.size === 0
                 ? void 0
-                : <div style={{ display: cellState.isCollapsed ? 'none' : 'block' }}>
+                : <div style={{ display: this.state.isCollapsed ? 'none' : 'block' }}>
                     {children.map(c => <StateTreeNode cell={cell.parent!.cells.get(c!)!} key={c} depth={newDepth} />)}
                 </div>
             }
@@ -155,7 +161,7 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
             this.forceUpdate();
         });
 
-        this.subscribe(this.plugin.state.behavior.currentObject, e => {
+        this.subscribe(this.props.cell.parent!.behaviors.currentObject, e => {
             if (!this.is(e)) {
                 if (this.state.isCurrent && e.state.transforms.has(this.ref)) {
                     this._setCurrent(this.props.cell.parent!.current === this.ref, this.state.isCollapsed);

src/mol-plugin/state.ts

@@ -28,21 +28,6 @@ class PluginState {
     readonly cameraSnapshots = new CameraSnapshotManager();
     readonly snapshots: PluginStateSnapshotManager;
 
-    readonly behavior = {
-        kind: this.ev.behavior<PluginState.Kind>('data'),
-        currentObject: this.ev.behavior<State.ObjectEvent>({} as any)
-    }
-
-    setKind(kind: PluginState.Kind) {
-        const current = this.behavior.kind.value;
-        if (kind !== current) {
-            this.behavior.kind.next(kind);
-            this.behavior.currentObject.next(kind === 'data'
-                ? this.data.behaviors.currentObject.value
-                : this.behaviors.behaviors.currentObject.value)
-        }
-    }
-
     getSnapshot(params?: PluginState.GetSnapshotParams): PluginState.Snapshot {
         const p = { ...PluginState.DefaultGetSnapshotParams, ...params };
         return {
@@ -114,15 +99,6 @@ class PluginState {
         this.data = State.create(new SO.Root({ }), { globalContext: plugin });
         this.behaviors = State.create(new PluginBehavior.Root({ }), { globalContext: plugin, rootState: { isLocked: true } });
 
-        this.data.behaviors.currentObject.subscribe(o => {
-            if (this.behavior.kind.value === 'data') this.behavior.currentObject.next(o);
-        });
-        this.behaviors.behaviors.currentObject.subscribe(o => {
-            if (this.behavior.kind.value === 'behavior') this.behavior.currentObject.next(o);
-        });
-
-        this.behavior.currentObject.next(this.data.behaviors.currentObject.value);
-
         this.animation = new PluginAnimationManager(plugin);
     }
 }