disable some ui elements when state tree is busy

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

@@ -62,7 +62,7 @@
         height: $row-height;
 
         text-align-last: center;
-        background: none !important;
+        background: none;
         padding: 0 $control-spacing;
 
         > option[value = _] {

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

@@ -260,7 +260,7 @@ export class ExpandableGroup extends React.Component<{
     }
 }
 
-export class ButtonSelect extends React.PureComponent<{ label: string, onChange: (value: string) => void }> {
+export class ButtonSelect extends React.PureComponent<{ label: string, onChange: (value: string) => void, disabled?: boolean }> {
 
     onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         e.preventDefault()
@@ -269,7 +269,7 @@ export class ButtonSelect extends React.PureComponent<{ label: string, onChange:
     }
 
     render() {
-        return <select value='_' onChange={this.onChange}>
+        return <select value='_' onChange={this.onChange} disabled={this.props.disabled}>
             <option key='_' value='_'>{this.props.label}</option>
             {this.props.children}
         </select>

src/mol-plugin/ui/image.tsx

@@ -19,6 +19,8 @@ interface ImageControlsState extends CollapsableState {
     size: 'canvas' | 'custom'
     width: number
     height: number
+
+    isDisabled: boolean
 }
 
 const maxWidthUi = 260
@@ -134,7 +136,11 @@ export class ImageControls<P, S extends ImageControlsState> extends CollapsableC
             this.handlePreview()
         })
 
-        this.subscribe(this.plugin.canvas3d.didDraw, () => this.handlePreview())
+        this.subscribe(this.plugin.canvas3d.didDraw, () => {
+            this.handlePreview()
+        })
+
+        this.subscribe(this.plugin.state.dataState.events.isUpdating, v => this.setState({ isDisabled: v }))
     }
 
     private togglePreview = () => this.setState({ showPreview: !this.state.showPreview })
@@ -178,16 +184,18 @@ export class ImageControls<P, S extends ImageControlsState> extends CollapsableC
 
             size: 'canvas',
             width: 1920,
-            height: 1080
+            height: 1080,
+
+            isDisabled: false
         } as S
     }
 
     protected renderControls() {
         return <div>
             <div className='msp-control-row'>
-                <button className='msp-btn msp-btn-block' onClick={this.download}>Download</button>
+                <button className='msp-btn msp-btn-block' onClick={this.download} disabled={this.state.isDisabled}>Download</button>
             </div>
-            <ParameterControls params={this.params} values={this.values} onChange={this.setProps} />
+            <ParameterControls params={this.params} values={this.values} onChange={this.setProps} isDisabled={this.state.isDisabled} />
             <div className='msp-control-group-wrapper'>
                 <div className='msp-control-group-header'>
                     <button className='msp-btn msp-btn-block' onClick={this.togglePreview}>

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

@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react';
-import { PluginUIComponent } from '../base';
+import { PluginUIComponent, CollapsableState, CollapsableProps } from '../base';
 import { Structure, StructureElement } from '../../../mol-model/structure';
 import { isEmptyLoci } from '../../../mol-model/loci';
 import { ColorOptions, ParameterControls } from '../controls/parameters';
@@ -19,10 +19,18 @@ import { CollapsableControls } from '../base';
 import { StateSelection, StateObject } from '../../../mol-state';
 import { PluginStateObject } from '../../state/objects';
 
-abstract class BaseStructureRepresentationControls extends PluginUIComponent {
+interface BaseStructureRepresentationControlsState {
+    isDisabled: boolean
+}
+
+abstract class BaseStructureRepresentationControls extends PluginUIComponent<{}, BaseStructureRepresentationControlsState> {
     abstract label: string
     abstract lociGetter(structure: Structure): StructureElement.Loci
 
+    state = {
+        isDisabled: false
+    }
+
     /** root structures */
     protected get structures() {
         return this.plugin.state.dataState.select(StateSelection.Generators.rootsOfType(PluginStateObject.Molecule.Structure)).map(s => s.obj!.data)
@@ -47,9 +55,11 @@ abstract class BaseStructureRepresentationControls extends PluginUIComponent {
     }
 
     componentDidMount() {
-        this.subscribe(this.plugin.events.state.object.created, ({ obj }) => this.forceUpdateIfStructure(obj));
+        this.subscribe(this.plugin.events.state.object.created, ({ obj }) => this.forceUpdateIfStructure(obj))
+
+        this.subscribe(this.plugin.events.state.object.removed, ({ obj }) => this.forceUpdateIfStructure(obj))
 
-        this.subscribe(this.plugin.events.state.object.removed, ({ obj }) => this.forceUpdateIfStructure(obj));
+        this.subscribe(this.plugin.state.dataState.events.isUpdating, v => this.setState({ isDisabled: v }))
     }
 
     show = (value: string) => {
@@ -78,16 +88,16 @@ abstract class BaseStructureRepresentationControls extends PluginUIComponent {
         return <div className='msp-control-row'>
             <span title={this.label}>{this.label}</span>
             <div className='msp-select-row'>
-                <ButtonSelect label='Show' onChange={this.show}>
+                <ButtonSelect label='Show' onChange={this.show} disabled={this.state.isDisabled}>
                     <optgroup label='Show'>{TypeOptions}</optgroup>
                 </ButtonSelect>
-                <ButtonSelect label='Hide' onChange={this.hide}>
+                <ButtonSelect label='Hide' onChange={this.hide} disabled={this.state.isDisabled}>
                     <optgroup label='Clear'>
                         <option key={'__all__'} value={'__all__'}>All</option>
                     </optgroup>
                     <optgroup label='Hide'>{TypeOptions}</optgroup>
                 </ButtonSelect>
-                <ButtonSelect label='Color' onChange={this.color}>
+                <ButtonSelect label='Color' onChange={this.color} disabled={this.state.isDisabled}>
                     <optgroup label='Clear'>
                         <option key={-1} value={-1}>Theme</option>
                     </optgroup>
@@ -113,7 +123,15 @@ class SelectionStructureRepresentationControls extends BaseStructureRepresentati
     }
 }
 
-export class StructureRepresentationControls extends CollapsableControls {
+interface StructureRepresentationControlsState extends CollapsableState {
+    isDisabled: boolean
+}
+
+export class StructureRepresentationControls extends CollapsableControls<CollapsableProps, StructureRepresentationControlsState> {
+    componentDidMount() {
+        this.subscribe(this.plugin.state.dataState.events.isUpdating, v => this.setState({ isDisabled: v }))
+    }
+
     preset = async (value: string) => {
         const presetFn = P[value as keyof typeof P]
         if (presetFn) {
@@ -152,7 +170,9 @@ export class StructureRepresentationControls extends CollapsableControls {
     defaultState() {
         return {
             isCollapsed: false,
-            header: 'Representation'
+            header: 'Representation',
+
+            isDisabled: false
         }
     }
 
@@ -172,7 +192,7 @@ export class StructureRepresentationControls extends CollapsableControls {
             <EverythingStructureRepresentationControls />
             <SelectionStructureRepresentationControls />
 
-            <ParameterControls params={this.params} values={this.values} onChange={this.onChange} />
+            <ParameterControls params={this.params} values={this.values} onChange={this.onChange} isDisabled={this.state.isDisabled} />
         </div>
     }
 }

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

@@ -20,7 +20,9 @@ const StructureSelectionParams = {
 interface StructureSelectionControlsState extends CollapsableState {
     minRadius: number,
     extraRadius: number,
-    durationMs: number
+    durationMs: number,
+
+    isDisabled: boolean
 }
 
 export class StructureSelectionControls<P, S extends StructureSelectionControlsState> extends CollapsableControls<P, S> {
@@ -32,6 +34,8 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
         this.subscribe(this.plugin.events.interactivity.propsUpdated, () => {
             this.forceUpdate()
         });
+
+        this.subscribe(this.plugin.state.dataState.events.isUpdating, v => this.setState({ isDisabled: v }))
     }
 
     get stats() {
@@ -79,7 +83,9 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
 
             minRadius: 8,
             extraRadius: 4,
-            durationMs: 250
+            durationMs: 250,
+
+            isDisabled: false
         } as S
     }
 
@@ -95,20 +101,20 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
                     {this.stats}
                 </button>
             </div>
-            <ParameterControls params={StructureSelectionParams} values={this.values} onChange={this.setProps} />
+            <ParameterControls params={StructureSelectionParams} values={this.values} onChange={this.setProps} isDisabled={this.state.isDisabled} />
             <div className='msp-control-row'>
                 <div className='msp-select-row'>
-                    <ButtonSelect label='Add' onChange={this.add}>
+                    <ButtonSelect label='Add' onChange={this.add} disabled={this.state.isDisabled}>
                         <optgroup label='Add'>
                             {Options(queries)}
                         </optgroup>
                     </ButtonSelect>
-                    <ButtonSelect label='Remove' onChange={this.remove}>
+                    <ButtonSelect label='Remove' onChange={this.remove} disabled={this.state.isDisabled}>
                         <optgroup label='Remove'>
                             {Options(queries)}
                         </optgroup>
                     </ButtonSelect>
-                    <ButtonSelect label='Only' onChange={this.only}>
+                    <ButtonSelect label='Only' onChange={this.only} disabled={this.state.isDisabled}>
                         <optgroup label='Only'>
                             {Options(queries)}
                         </optgroup>