reverted delayed isBusy

- made CSS/code tweaks in the process

src/mol-plugin-ui/camera.tsx

@@ -42,7 +42,7 @@ class CameraSnapshotControls extends PluginUIComponent<{ }, { name: string, desc
         return <div>
             <ParameterControls params={CameraSnapshotControls.Params} values={this.state} onEnter={this.add} onChange={p => this.setState({ [p.name]: p.value } as any)}  />
 
-            <div className='msp-btn-row-group'>
+            <div className='msp-flex-row'>
                 <Button onClick={this.add}>Add</Button>
                 <Button onClick={this.clear}>Clear</Button>
             </div>

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

@@ -174,6 +174,6 @@ export class RemoveAllButton extends PluginUIComponent<{ }> {
     render() {
         const count = this.plugin.state.data.tree.children.get(StateTransform.RootRef).size;
         if (count === 0) return null;
-        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' />;
+        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
     }
 }

src/mol-plugin-ui/skin/base/components/controls-base.scss

@@ -60,7 +60,6 @@
     display: inline-block;
     margin-bottom: 0; // For input.msp-btn
     text-align: center;
-    vertical-align: middle;
     touch-action: manipulation;
     cursor: pointer;
     background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

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

@@ -32,61 +32,6 @@
     background: $default-background;
 }
 
-.msp-btn-row-group {
-    display:flex;
-    flex-direction:row;
-    height: $row-height;
-    margin-top: 1px;
-    width: 100%;
-    background: $default-background;
-
-    > button {
-        margin: 0;
-        flex: 1 1 auto;
-        margin-right: 1px;
-        height: $row-height;
-    }
-
-    > button:last-child {
-        margin-right: 0;
-    }
-
-    > button.msp-control-button-label {
-        background: $default-background;
-    }
-}
-
-// .msp-select-row {
-//     display:flex;
-//     flex-direction:row;
-//     height: $row-height;
-//     width: inherit;
-//     background: $default-background;
-
-//     > select, > button {
-//         margin: 0;
-//         flex: 1 1 auto;
-//         margin-right: 1px;
-//         height: $row-height;
-
-//         text-align-last: center;
-//         // padding: 0 $control-spacing;
-//         overflow: hidden;
-//     }
-
-//     > select {
-//         background: none;
-
-//         > option[value = _] {
-//             display: none;
-//         }
-//     }
-
-//     > select:last-child, > button:last-child {
-//         margin-right: 0;
-//     }
-// }
-
 .msp-flex-row {
     margin-top: 1px;
     background: $default-background;
@@ -113,7 +58,7 @@
         margin-right: 1px;
         height: $row-height;
 
-        text-align-last: center;
+        // text-align-last: center;
         // padding: 0 $control-spacing;
         overflow: hidden;
     }
@@ -134,17 +79,22 @@
     > select:last-child, > button:last-child {
         margin-right: 0;
     }
+
+    > button.msp-control-button-label {
+        background: $default-background;
+    }
 }
 
 .msp-state-list {
     list-style: none;
-    margin-top: $control-spacing;
+    // margin-top: $control-spacing;
 
     > li {
         position: relative;
         overflow: hidden;
 
         > button:first-child {
+            text-align: left;
             border-left: $control-spacing solid color-increase-contrast($default-background, 12%) !important;
         }
 
@@ -155,10 +105,10 @@
         }
     }
 
-    button {
-        margin-bottom: 1px;
-        text-align: left;
-    }
+    // button {
+    //     margin-bottom: 1px;
+    //     text-align: left;
+    // }
 }
 
 .msp-tree-row {

src/mol-plugin-ui/skin/base/normalize.scss

@@ -5,6 +5,9 @@
 // 2. Prevent iOS and IE text size adjust after device orientation change,
 //    without disabling user zoom.
 //
+* {
+  box-sizing: border-box; // 1
+}
 
   //
   // Address `[hidden]` styling not present in IE 8/9/10.

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

@@ -53,7 +53,7 @@ export class AnimationControls extends PluginUIComponent<{ onStart?: () => void
             <ParameterControls params={anim.getParams()} values={anim.state.params} onChange={this.updateParams} isDisabled={isDisabled} />
             <ParameterControls params={anim.current.params} values={anim.current.paramValues} onChange={this.updateCurrentParams} isDisabled={isDisabled} />
 
-            <div className='msp-btn-row-group'>
+            <div className='msp-flex-row'>
                 <Button icon={anim.state.animationState !== 'playing' ? void 0 : 'play'} onClick={this.startOrStop}>
                     {anim.state.animationState === 'playing' ? 'Stop' : 'Start'}
                 </Button>

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

@@ -165,8 +165,12 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
     }
 
     componentDidMount() {
-        this.subscribe(this.plugin.behaviors.state.isBusy, b => this.busy.next(b));
-        this.subscribe(this.busy, busy => this.setState({ busy }));
+        this.subscribe(this.plugin.behaviors.state.isBusy, b => {
+            if (this.state.busy !== b) this.busy.next(b);
+        });
+        this.subscribe(this.busy, busy => {
+            if (this.state.busy !== busy) this.setState({ busy })
+        });
     }
 
     refresh = () => {
@@ -218,8 +222,15 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
             ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
             : 'msp-transform-wrapper';
 
-        const { a, b } = this.getSourceAndTarget();
-        const applyControl = this.renderApply();
+        let params = null;
+        if (!isEmpty && !this.state.isCollapsed) {
+            const { a, b } = this.getSourceAndTarget();
+            const applyControl = this.renderApply();
+            params = <>
+                <ParamEditor info={info} a={a} b={b} events={this.events} params={this.state.params} isDisabled={this.state.busy} />
+                {applyControl}
+            </>
+        }
 
         const ctrl = <div className={wrapClass} style={{ marginBottom: this.props.noMargin ? 0 : void 0 }}>
             {display !== 'none' && !this.props.wrapInExpander && <div className='msp-transform-header'>
@@ -228,10 +239,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
                     {display.name}
                 </Button>
             </div>}
-            {!isEmpty && !this.state.isCollapsed && <>
-                <ParamEditor info={info} a={a} b={b} events={this.events} params={this.state.params} isDisabled={this.state.busy} />
-                {applyControl}
-            </>}
+            {params}
         </div>;
 
         if (isEmpty || !this.props.wrapInExpander) return ctrl;
@@ -266,6 +274,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
     }
 
     render() {
+        // console.log('rendering', ((this.props as any)?.transform?.transformer || (this.props as any)?.action)?.definition.display.name, +new Date)
         return this.props.simpleApply ? this.renderSimple() : this.renderDefault();
     }
 }

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

@@ -35,7 +35,7 @@ export class StateSnapshots extends PluginUIComponent<{ }> {
             <LocalStateSnapshotList />
             {this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots />}
 
-            <div className='msp-btn-row-group' style={{ marginTop: '10px' }}>
+            <div className='msp-flex-row' style={{ marginTop: '10px' }}>
                 <Button onClick={this.downloadToFile}>Download JSON</Button>
                 <div className='msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file'>
                     {'Open JSON'} <input onChange={this.open} type='file' multiple={false} accept='.json' />
@@ -93,7 +93,7 @@ class LocalStateSnapshots extends PluginUIComponent<
                 this.plugin.state.snapshots.currentGetSnapshotParams = params.options;
             }}/>
 
-            <div className='msp-btn-row-group'>
+            <div className='msp-flex-row'>
                 <Button onClick={this.add}>Save</Button>
                 <Button onClick={this.clear}>Clear</Button>
             </div>
@@ -274,7 +274,7 @@ export class RemoteStateSnapshots extends PluginUIComponent<
                 <ParameterControls params={this.Params} values={this.state.params} onEnter={this.upload} onChange={p => {
                     this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
                 }} isDisabled={this.state.isBusy}/>
-                <div className='msp-btn-row-group'>
+                <div className='msp-flex-row'>
                     <Button icon='upload' onClick={this.upload} disabled={this.state.isBusy}>Upload</Button>
                     <Button onClick={this.refresh} disabled={this.state.isBusy}>Refresh</Button>
                 </div>
@@ -287,7 +287,7 @@ export class RemoteStateSnapshots extends PluginUIComponent<
                 <ParameterControls params={this.ListOnlyParams} values={this.state.params} onEnter={this.upload} onChange={p => {
                     this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
                 }} isDisabled={this.state.isBusy}/>
-                <div className='msp-btn-row-group'>
+                <div className='msp-flex-row'>
                     <Button onClick={this.refresh} disabled={this.state.isBusy}>Refresh</Button>
                 </div>
             </>}
@@ -314,14 +314,12 @@ class RemoteStateSnapshotList extends PurePluginUIComponent<
 
     render() {
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
-            {this.props.entries.valueSeq().map(e =><li key={e!.id}>
+            {this.props.entries.valueSeq().map(e =><li key={e!.id} className='msp-flex-row'>
                 <Button data-id={e!.id} onClick={this.props.fetch}
                     disabled={this.props.isBusy} onContextMenu={this.open} title='Click to download, right-click to open in a new tab.'>
                     {e!.name || new Date(e!.timestamp).toLocaleString()} <small>{e!.description}</small>
                 </Button>
-                {!e!.isSticky && this.props.remove && <div>
-                    <IconButton data-id={e!.id} icon='remove' title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} />
-                </div>}
+                {!e!.isSticky && this.props.remove && <IconButton data-id={e!.id} icon='remove' title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} small />}
             </li>)}
         </ul>;
     }

src/mol-plugin-ui/structure/components.tsx

@@ -341,7 +341,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
         const label = cell.obj?.label;
         // const reprLabel = this.reprLabel;
         return <>
-            <div className='msp-btn-row-group'>
+            <div className='msp-flex-row'>
                 <Button noOverflow className='msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
                     {label}
                     {/* <small className='msp-25-lower-contrast-text' style={{ float: 'right' }}>{reprLabel}</small> */}

src/mol-plugin-ui/structure/generic.tsx

@@ -135,7 +135,7 @@ export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<
         }
 
         return <>
-            <div className='msp-btn-row-group'>
+            <div className='msp-flex-row'>
                 <button className='msp-form-control msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
                     {label} <small>{description}</small>
                 </button>

src/mol-plugin-ui/structure/measurements.tsx

@@ -144,7 +144,7 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
 
     historyEntry(e: StructureSelectionHistoryEntry, idx: number) {
         const history = this.plugin.managers.structure.selection.additionsHistory;
-        return <div className='msp-btn-row-group' key={e.id}>
+        return <div className='msp-flex-row' key={e.id}>
             <Button noOverflow title='Click to focus. Hover to highlight.' onClick={() => this.focusLoci(e.loci)} style={{ width: 'auto', textAlign: 'left' }} onMouseEnter={() => this.highlight(e.loci)} onMouseLeave={this.plugin.managers.interactivity.lociHighlights.clearHighlights}>
                 {idx}. <span dangerouslySetInnerHTML={{ __html: e.label }} />
             </Button>
@@ -194,6 +194,7 @@ class MeasurementsOptions extends PurePluginUIComponent<{}, { isDisabled: boolea
         });
 
         this.subscribe(this.plugin.behaviors.state.isBusy, v => {
+            console.log('isBusy', 'measurement opt', v)
             this.setState({ isDisabled: v })
         });
     }
@@ -289,7 +290,7 @@ class MeasurementEntry extends PurePluginUIComponent<{ cell: StructureMeasuremen
         if (!obj) return null;
 
         return <>
-            <div className='msp-btn-row-group' key={obj.id} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight}>
+            <div className='msp-flex-row' key={obj.id} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight}>
                 <button className='msp-form-control msp-control-button-label msp-no-overflow' title='Click to focus. Hover to highlight.' onClick={this.focus} style={{ width: 'auto', textAlign: 'left' }}>
                     <span dangerouslySetInnerHTML={{ __html: this.label }} />
                 </button>

src/mol-plugin-ui/structure/source.tsx

@@ -250,7 +250,7 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         const presets = this.presetActions;
         const label = this.label;
         return <>
-            <div className='msp-btn-row-group' style={{ marginTop: '1px' }}>
+            <div className='msp-flex-row' style={{ marginTop: '1px' }}>
                 <Button noOverflow flex onClick={this.toggleHierarchy} disabled={disabled} title={label}>{label}</Button>
                 {presets.length > 0 && <IconButton className='msp-form-control' flex='40px' onClick={this.togglePreset} icon='bookmarks' title='Presets' toggleState={this.state.show === 'presets'} disabled={disabled} />}
             </div>

src/mol-plugin-ui/structure/volume.tsx

@@ -31,7 +31,9 @@ export class VolumeStreamingControls extends CollapsableControls<{}, VolumeStrea
     componentDidMount() {
         // TODO: do not hide this but instead show some help text??
         this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => this.setState({ isHidden: !this.canEnable() }));
-        this.subscribe(this.plugin.behaviors.state.isBusy, v => this.setState({ isBusy: v }));
+        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
+            this.setState({ isBusy: v })
+        });
 
         this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, c => this.setState({
             description: StructureHierarchyManager.getSelectedStructuresDescription(this.plugin)

src/mol-plugin-ui/viewport/screenshot.tsx

@@ -124,7 +124,7 @@ export class DownloadScreenshotControls extends PluginUIComponent<{ close: () =>
                 <img ref={this.imgRef} /><br />
                 <span>Right-click the image to Copy.</span>
             </div>
-            <div className='msp-btn-row-group'>
+            <div className='msp-flex-row'>
                 <Button icon='download' onClick={this.download} disabled={this.state.isDisabled}>Download</Button>
                 <Button icon='export' onClick={this.openTab} disabled={this.state.isDisabled}>Open in new Tab</Button>
             </div>

src/mol-plugin/config.ts

@@ -20,8 +20,7 @@ export const PluginConfig = {
     item,
     State: {
         DefaultServer: item('plugin-state.server', 'https://webchem.ncbr.muni.cz/molstar-state'),
-        CurrentServer: item('plugin-state.server', 'https://webchem.ncbr.muni.cz/molstar-state'),
-        IsBusyTimeoutMs: item('plugin-state.is-busy-timeout', 750)
+        CurrentServer: item('plugin-state.server', 'https://webchem.ncbr.muni.cz/molstar-state')
     },
     VolumeStreaming: {
         DefaultServer: item('volume-streaming.server', 'https://ds.litemol.org'),

src/mol-plugin/context.ts

@@ -8,7 +8,6 @@
 import { setAutoFreeze } from 'immer';
 import { List } from 'immutable';
 import { merge } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
 import { Canvas3D } from '../mol-canvas3d/canvas3d';
 import { CustomProperty } from '../mol-model-props/common/custom-property';
 import { Model, Structure } from '../mol-model/structure';
@@ -46,7 +45,7 @@ import { BuiltInPluginBehaviors } from './behavior';
 import { PluginBehavior } from './behavior/behavior';
 import { PluginCommandManager } from './command';
 import { PluginCommands } from './commands';
-import { PluginConfigManager, PluginConfig } from './config';
+import { PluginConfigManager } from './config';
 import { LeftPanelTabName, PluginLayout } from './layout';
 import { PluginSpec } from './spec';
 import { PluginState } from './state';
@@ -156,7 +155,7 @@ export class PluginContext {
     readonly customStructureProperties = new CustomProperty.Registry<Structure>();
     readonly customParamEditors = new Map<string, StateTransformParameters.Class>();
 
-    readonly customStructureControls = new Map<string, { new (): PluginUIComponent<any, any, any> }>();
+    readonly customStructureControls = new Map<string, { new(): PluginUIComponent<any, any, any> }>();
     readonly genericRepresentationControls = new Map<string, (selection: StructureHierarchyManager['selection']) => [HierarchyRef[], string]>();
 
     readonly helpers = {
@@ -242,8 +241,7 @@ export class PluginContext {
             this.behaviors.state.isUpdating.next(u);
         });
 
-        const timeout = this.config.get(PluginConfig.State.IsBusyTimeoutMs) || 500;
-        merge(debounceTime(timeout)(this.behaviors.state.isUpdating), debounceTime(timeout)(this.behaviors.state.isAnimating)).subscribe(() => {
+        merge(this.behaviors.state.isUpdating, this.behaviors.state.isAnimating).subscribe(v => {
             const isUpdating = this.behaviors.state.isUpdating.value;
             const isAnimating = this.behaviors.state.isAnimating.value;
             const isBusy = this.behaviors.state.isBusy;