mol-plugin: fixed UI update bug, tweaks

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

@@ -82,7 +82,8 @@
     // border-bottom-left-radius: $control-spacing;
 
     &-current {
-        // background: $control-background
+        // background: $control-background;
+        
         a {
             color: $font-color;
         }

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

@@ -31,6 +31,7 @@ export class NumericInput extends React.PureComponent<{
     value: number,
     onChange: (v: number) => void,
     onEnter?: () => void,
+    onBlur?: () => void,
     blurOnEnter?: boolean,
     isDisabled?: boolean,
     placeholder?: string
@@ -58,6 +59,7 @@ export class NumericInput extends React.PureComponent<{
 
     onBlur = () => {
         this.setState({ value: '' + this.props.value });
+        if (this.props.onBlur) this.props.onBlur();
     }
 
     static getDerivedStateFromProps(props: { value: number }, state: { value: string }) {

src/mol-plugin/ui/controls/slider.tsx

@@ -39,11 +39,19 @@ export class Slider extends React.Component<{
     }
 
     updateManually = (v: number) => {
+        this.setState({ isChanging: true });
+
         let n = v;
         if (this.props.step === 1) n = Math.round(n);
         if (n < this.props.min) n = this.props.min;
         if (n > this.props.max) n = this.props.max;
-        this.props.onChange(n);
+
+        this.setState({ current: n, isChanging: true });
+    }
+
+    onManualBlur = () => {
+        this.setState({ isChanging: false });
+        this.props.onChange(this.state.current);
     }
 
     render() {
@@ -57,7 +65,7 @@ export class Slider extends React.Component<{
             </div>
             <div>
                 <NumericInput
-                    value={this.state.current} onEnter={this.props.onEnter} blurOnEnter={true}
+                    value={this.state.current} blurOnEnter={true} onBlur={this.onManualBlur}
                     isDisabled={this.props.disabled} onChange={this.updateManually} />
             </div>
         </div>;

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

@@ -234,8 +234,13 @@ class StateTreeNodeLabel extends PluginUIComponent<
             <span className='msp-icon msp-icon-visual-visibility' />
         </button>;
 
-        const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight}
-            style={{ marginLeft: this.state.isCurrent ? '0px' : `${this.props.depth * 10}px`, borderLeft: isCurrent || this.props.depth === 0 ? 'none' : void 0 }}>
+        const style: React.HTMLAttributes<HTMLDivElement>['style'] = {
+            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
+        }
+
+        const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={style}>
             {label}
             {children.size > 0 &&  <button onClick={this.toggleExpanded} className='msp-btn msp-btn-link msp-tree-toggle-exp-button'>
                 <span className={`msp-icon msp-icon-${cellState.isCollapsed ? 'expand' : 'collapse'}`} />
@@ -257,6 +262,13 @@ class StateTreeNodeLabel extends PluginUIComponent<
 }
 
 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)!;

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

@@ -49,9 +49,16 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
         if (super.componentDidMount) super.componentDidMount();
 
         if (this.props.toggleCollapsed) this.subscribe(this.props.toggleCollapsed, () => this.setState({ isCollapsed: !this.state.isCollapsed }));
+
+        this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
+            if (this.props.transform.ref !== ref || this.props.state !== state) return;
+            if (this.state.params !== this.props.transform.params) {
+                this.setState({ params: this.props.transform.params, isInitial: true })
+            }
+        });
     }
 
-    private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
+    private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, t));
 
     state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };