mol-plugin: ui

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

@@ -42,16 +42,44 @@
     margin-bottom: $control-spacing;
 }
 
-.msp-transform-header {
-    position: relative;
-    // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
+.msp-transform-update-wrapper {
+    border-bottom: $control-spacing solid $control-background;
+}
 
-    > button {
+.msp-transform-update-wrapper-collapsed {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper, .msp-transform-update-wrapper-collapsed {
+    > .msp-transform-header > button {
         text-align: left;
         padding-left: $row-height;
         background: $control-background; // color-lower-contrast($default-background, 4%);
         font-weight: bold;
     }
+}
+
+.msp-transform-wrapper > .msp-transform-header > button {
+    text-align: left;
+    background: color-lower-contrast($default-background, 4%);
+    font-weight: bold;
+}
+
+.msp-transform-header {
+    position: relative;
+    // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
+
+    // > button {
+    //     text-align: left;
+    //     padding-left: $row-height;
+    //     background: $control-background; // color-lower-contrast($default-background, 4%);
+    //     font-weight: bold;
+    // }
+
+    > button > small {
+        font-weight: normal;
+        float: right;
+    }
 
     > button:hover {
         color: color-lower-contrast($font-color, 15%);
@@ -59,9 +87,11 @@
 }
 
 .msp-transform-default-params {
+    background: $default-background;
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
+    width: $row-height;
 }
 
 .msp-transform-default-params:hover {
@@ -75,7 +105,8 @@
 }
 
 .msp-transform-refresh {
-    width: $control-label-width + $control-spacing;
+    width: $control-label-width + $control-spacing - $row-height - 1;
+    margin-left: $row-height + 1;
     background: $default-background;
     text-align: right;
 }

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

@@ -87,7 +87,7 @@ namespace StateTransformParameters {
 }
 
 namespace TransformContolBase {
-    export interface ControlState {
+    export interface ComponentState {
         params: any,
         error?: string,
         busy: boolean,
@@ -96,7 +96,7 @@ namespace TransformContolBase {
     }
 }
 
-abstract class TransformContolBase<P, S extends TransformContolBase.ControlState> extends PurePluginUIComponent<P, S> {
+abstract class TransformContolBase<P, S extends TransformContolBase.ComponentState> extends PurePluginUIComponent<P, S> {
     abstract applyAction(): Promise<void>;
     abstract getInfo(): StateTransformParameters.Props['info'];
     abstract getHeader(): StateTransformer.Definition['display'];
@@ -175,17 +175,26 @@ abstract class TransformContolBase<P, S extends TransformContolBase.ControlState
             ? this.plugin.customParamEditors.get(tId)!
             : StateTransformParameters;
 
-        return <div className='msp-transform-wrapper'>
+        const wrapClass = 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}</button>
-                {!isEmpty && !this.state.isCollapsed && <button className='msp-btn msp-btn-link msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} style={{ float: 'right'}} title='Set default params'>↻</button>}
+                <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>}
+                </button>
             </div>
             {!isEmpty && !this.state.isCollapsed && <>
                 <ParamEditor info={info} events={this.events} params={this.state.params} isDisabled={this.state.busy} />
 
                 <div className='msp-transform-apply-wrap'>
+                    <button className='msp-btn msp-btn-block msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params'>↻</button>
                     <button className='msp-btn msp-btn-block msp-transform-refresh msp-form-control' title='Refresh params' onClick={this.refresh} disabled={this.state.busy || this.state.isInitial}>
-                        ↶ Reset
+                        ↶ Back
                     </button>
                     <div className='msp-transform-apply'>
                         <button className={`msp-btn msp-btn-block msp-btn-commit msp-btn-commit-${this.canApply() ? 'on' : 'off'}`} onClick={this.apply} disabled={!this.canApply()}>

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

@@ -251,6 +251,6 @@ class StateTreeNodeTransform extends PluginUIComponent<{ nodeRef: string, state:
         if (!parent || parent.status !== 'ok') return null;
 
         const transform = cell.transform;
-        return <UpdateTransformContol state={this.props.state} transform={transform} />;
+        return <UpdateTransformContol state={this.props.state} transform={transform} initiallyCollapsed={true} />;
     }
 }

src/mol-plugin/ui/state/update-transform.tsx

@@ -13,15 +13,12 @@ export { UpdateTransformContol };
 namespace UpdateTransformContol {
     export interface Props {
         transform: StateTransform,
-        state: State
+        state: State,
+        initiallyCollapsed?: boolean
     }
 
-    export interface ComponentState {
-        transform: StateTransform,
-        params: any,
-        error?: string,
-        busy: boolean,
-        isInitial: boolean
+    export interface ComponentState extends TransformContolBase.ComponentState {
+        transform: StateTransform
     }
 }
 
@@ -48,10 +45,10 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
 
     private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
 
-    state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false };
+    state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
 
     static getDerivedStateFromProps(props: UpdateTransformContol.Props, state: UpdateTransformContol.ComponentState) {
-        if (props.transform === state.transform) return null;
+        if (props.transform === state.transform && props.initiallyCollapsed) return null;
         const cell = props.state.cells.get(props.transform.ref)!;
         const newState: Partial<UpdateTransformContol.ComponentState> = {
             transform: props.transform,