diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index 3d0e774ce039ac0117a4a6a6143fcd0b98a76fc1..f9732a9af6d2899c6c77fb3f0bdee2b6cfae1534 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -20,6 +20,7 @@ import { StateTree } from './state/tree';
import { BackgroundTaskProgress } from './task';
import { Viewport, ViewportControls } from './viewport';
import { StateTransform } from 'mol-state';
+import { UpdateTransformContol } from './state/update-transform';
export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
@@ -176,8 +177,6 @@ export class CurrentObject extends PluginUIComponent {
const ref = current.ref;
const cell = current.state.cells.get(ref)!;
const transform = cell.transform;
- const def = transform.transformer.definition;
- const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
let showActions = true;
if (ref === StateTransform.RootRef) {
@@ -188,7 +187,7 @@ export class CurrentObject extends PluginUIComponent {
if (!showActions) return null;
return cell.status === 'ok' && <>
- <div className='msp-section-header'>{`Actions (${display})`}</div>
+ <UpdateTransformContol state={current.state} transform={transform} />
<StateObjectActions state={current.state} nodeRef={ref} />
</>;
}
diff --git a/src/mol-plugin/ui/state/actions.tsx b/src/mol-plugin/ui/state/actions.tsx
index 2d660af3b85ca7220cbd1ccc5976f5f1c5119c55..0d2b0a2adb71c6460faf421f5232e680e3fbb5ec 100644
--- a/src/mol-plugin/ui/state/actions.tsx
+++ b/src/mol-plugin/ui/state/actions.tsx
@@ -9,7 +9,7 @@ import { PluginUIComponent } from '../base';
import { ApplyActionContol } from './apply-action';
import { State } from 'mol-state';
-export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string }> {
+export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean }> {
get current() {
return this.plugin.state.behavior.currentObject.value;
}
@@ -30,6 +30,14 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe
const { state, nodeRef: ref } = this.props;
const cell = state.cells.get(ref)!;
const actions = state.actions.fromCell(cell, this.plugin);
- return actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} />);
+ if (actions.length === 0) return null;
+
+ const def = cell.transform.transformer.definition;
+ const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
+
+ return <>
+ {!this.props.hideHeader && <div className='msp-section-header'>{`Actions (${display})`}</div> }
+ {actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} />)}
+ </>;
}
}
\ No newline at end of file
diff --git a/src/mol-plugin/ui/state/common.tsx b/src/mol-plugin/ui/state/common.tsx
index 57659f7aa9d237043a57242526ea1b1dc3dafc06..81012b48c984543d94ae257c23b5d811b0b9c702 100644
--- a/src/mol-plugin/ui/state/common.tsx
+++ b/src/mol-plugin/ui/state/common.tsx
@@ -175,17 +175,18 @@ abstract class TransformContolBase<P, S extends TransformContolBase.ComponentSta
? this.plugin.customParamEditors.get(tId)!
: StateTransformParameters;
- const wrapClass = this.isUpdate()
- ? !isEmpty && !this.state.isCollapsed
- ? 'msp-transform-update-wrapper'
- : 'msp-transform-update-wrapper-collapsed'
- : 'msp-transform-wrapper';
+ const wrapClass = 'msp-transform-wrapper';
+ // this.isUpdate()
+ // ? !isEmpty && !this.state.isCollapsed
+ // ? 'msp-transform-update-wrapper'
+ // : 'msp-transform-update-wrapper-collapsed'
+ // : 'msp-transform-wrapper';
return <div className={wrapClass}>
<div className='msp-transform-header'>
<button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>
{display.name}
- {!isEmpty && this.state.isCollapsed && this.isUpdate() && <small>Click to Edit</small>}
+ {/* {!isEmpty && this.state.isCollapsed && this.isUpdate() && <small>Click to Edit</small>} */}
</button>
</div>
{!isEmpty && !this.state.isCollapsed && <>
diff --git a/src/mol-plugin/ui/state/tree.tsx b/src/mol-plugin/ui/state/tree.tsx
index d2fc8b245bb5ab0979760db376853fd10cfcc04a..cb4dd6cc261d4f8cb97a4e4ea1424a03e39475a8 100644
--- a/src/mol-plugin/ui/state/tree.tsx
+++ b/src/mol-plugin/ui/state/tree.tsx
@@ -6,12 +6,10 @@
import * as React from 'react';
import { PluginStateObject } from 'mol-plugin/state/objects';
-import { State, StateObject, StateObjectCell, StateTransform } from 'mol-state'
+import { State, StateObject, StateTransform } from 'mol-state'
import { PluginCommands } from 'mol-plugin/command';
import { PluginUIComponent } from '../base';
-import { UpdateTransformContol } from './update-transform';
import { StateObjectActions } from './actions';
-import { Observable, Subject } from 'rxjs';
export class StateTree extends PluginUIComponent<{ state: State }, { showActions: boolean }> {
state = { showActions: true };
@@ -37,7 +35,7 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
render() {
const ref = this.props.state.tree.root.ref;
if (this.state.showActions) {
- return <StateObjectActions state={this.props.state} nodeRef={ref} />
+ return <StateObjectActions state={this.props.state} nodeRef={ref} hideHeader={true} />
}
return <StateTreeNode state={this.props.state} nodeRef={ref} depth={0} />;
}
@@ -115,7 +113,7 @@ class StateTreeNode extends PluginUIComponent<{ nodeRef: string, state: State, d
class StateTreeNodeLabel extends PluginUIComponent<
{ nodeRef: string, state: State, depth: number },
- { state: State, isCurrent: boolean, isCollapsed: boolean, updaterCollapsed: boolean }> {
+ { state: State, isCurrent: boolean, isCollapsed: boolean /*, updaterCollapsed: boolean */ }> {
is(e: State.ObjectEvent) {
return e.ref === this.props.nodeRef && e.state === this.props.state;
@@ -147,7 +145,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
isCurrent: this.props.state.current === this.props.nodeRef,
isCollapsed: this.props.state.cellStates.get(this.props.nodeRef).isCollapsed,
state: this.props.state,
- updaterCollapsed: true
+ // updaterCollapsed: true
}
static getDerivedStateFromProps(props: { nodeRef: string, state: State }, state: { state: State, isCurrent: boolean, isCollapsed: boolean }) {
@@ -195,12 +193,12 @@ class StateTreeNodeLabel extends PluginUIComponent<
e.currentTarget.blur();
}
- private toggleUpdaterObs = new Subject();
- toggleUpdater = (e: React.MouseEvent<HTMLAnchorElement>) => {
- e.preventDefault();
- e.currentTarget.blur();
- this.toggleUpdaterObs.next();
- }
+ // private toggleUpdaterObs = new Subject();
+ // toggleUpdater = (e: React.MouseEvent<HTMLAnchorElement>) => {
+ // e.preventDefault();
+ // e.currentTarget.blur();
+ // this.toggleUpdaterObs.next();
+ // }
render() {
const n = this.props.state.transforms.get(this.props.nodeRef)!;
@@ -221,7 +219,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
const obj = cell.obj as PluginStateObject.Any;
const title = `${obj.label} ${obj.description ? obj.description : ''}`
if (this.state.isCurrent) {
- label = <><a title={title} href='#' onClick={this.toggleUpdater}><b>{obj.label}</b> {obj.description ? <small>{obj.description}</small> : void 0}</a></>;
+ label = <><a title={title} href='#'><b>{obj.label}</b> {obj.description ? <small>{obj.description}</small> : void 0}</a></>;
} else {
label = <><a title={title} href='#' onClick={this.setCurrent}>{obj.label} {obj.description ? <small>{obj.description}</small> : void 0}</a></>;
}
@@ -235,9 +233,9 @@ class StateTreeNodeLabel extends PluginUIComponent<
</button>;
const style: React.HTMLAttributes<HTMLDivElement>['style'] = {
- marginLeft: this.state.isCurrent ? void 0 : `${this.props.depth * 10}px`,
+ marginLeft: /* this.state.isCurrent ? void 0 :*/ `${this.props.depth * 10}px`,
// paddingLeft: !this.state.isCurrent ? void 0 : `${this.props.depth * 10}px`,
- borderLeft: isCurrent || this.props.depth === 0 ? 'none' : void 0
+ borderLeft: /* isCurrent || */ this.props.depth === 0 ? 'none' : void 0
}
const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={style}>
@@ -250,33 +248,33 @@ class StateTreeNodeLabel extends PluginUIComponent<
</button>}{visibility}
</div>;
- if (this.state.isCurrent) {
- return <>
- {row}
- <StateTreeNodeTransform {...this.props} toggleCollapsed={this.toggleUpdaterObs} />
- </>
- }
+ // if (this.state.isCurrent) {
+ // return <>
+ // {row}
+ // <StateTreeNodeTransform {...this.props} toggleCollapsed={this.toggleUpdaterObs} />
+ // </>
+ // }
return row;
}
}
-class StateTreeNodeTransform extends PluginUIComponent<{ nodeRef: string, state: State, depth: number, toggleCollapsed?: Observable<any> }> {
- componentDidMount() {
- // this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
- // if (this.props.nodeRef !== ref || this.props.state !== state) return;
- // this.forceUpdate();
- // });
- }
-
- render() {
- const ref = this.props.nodeRef;
- const cell = this.props.state.cells.get(ref)!;
- const parent: StateObjectCell | undefined = (cell.sourceRef && this.props.state.cells.get(cell.sourceRef)!) || void 0;
-
- if (!parent || parent.status !== 'ok') return null;
-
- const transform = cell.transform;
- return <UpdateTransformContol state={this.props.state} transform={transform} initiallyCollapsed={true} toggleCollapsed={this.props.toggleCollapsed} />;
- }
-}
\ No newline at end of file
+// class StateTreeNodeTransform extends PluginUIComponent<{ nodeRef: string, state: State, depth: number, toggleCollapsed?: Observable<any> }> {
+// componentDidMount() {
+// // this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
+// // if (this.props.nodeRef !== ref || this.props.state !== state) return;
+// // this.forceUpdate();
+// // });
+// }
+
+// render() {
+// const ref = this.props.nodeRef;
+// const cell = this.props.state.cells.get(ref)!;
+// const parent: StateObjectCell | undefined = (cell.sourceRef && this.props.state.cells.get(cell.sourceRef)!) || void 0;
+
+// if (!parent || parent.status !== 'ok') return null;
+
+// const transform = cell.transform;
+// return <UpdateTransformContol state={this.props.state} transform={transform} initiallyCollapsed={true} toggleCollapsed={this.props.toggleCollapsed} />;
+// }
+// }
\ No newline at end of file