Added editor hold-off time input in Settings dialog

Author: magjac

src/SettingsDialog.js

@@ -11,6 +11,7 @@ import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import Input from '@material-ui/core/Input';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -37,6 +38,9 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
+  holdOffInput: {
+    width: '7em',
+  }
 });
 
 class SettingsDialog extends React.Component {
@@ -53,6 +57,10 @@ class SettingsDialog extends React.Component {
     this.props.onFitGraphSwitchChange(event.target.checked);
   };
 
+  handleHoldOffChange = (event) => {
+    this.props.onHoldOffChange(event.target.value);
+  };
+
   render() {
     const { classes } = this.props;
     return (
@@ -112,6 +120,30 @@ class SettingsDialog extends React.Component {
               />
             </FormGroup>
           </DialogContent>
+          <DialogTitle id="form-dialog-title">Other</DialogTitle>
+          <DialogContent>
+            <FormControl
+              className={classes.formControl}
+              aria-describedby="holdoff-helper-text"
+            >
+              <InputLabel shrink={true}>Editor hold-off time</InputLabel>
+              <Input
+                className={classes.holdOffInput}
+                id="holdoff"
+                type="number"
+                value={this.props.holdOff}
+                onChange={this.handleHoldOffChange}
+                endAdornment={<InputAdornment position="end"> seconds</InputAdornment>}
+                inputProps={{
+                  'aria-label': 'Holdoff',
+                  min: 0.0,
+                  max: 9.9,
+                  step: 0.1,
+                }}
+              />
+              <FormHelperText id="holdoff-helper-text">Time of editor inactivity after which graph rendering starts</FormHelperText>
+            </FormControl>
+          </DialogContent>
         </Dialog>
       </div>
     );

src/TextEditor.js

@@ -17,7 +17,7 @@ class TextEditor extends React.Component {
       if (this.pendingChanges === 0) {
         this.props.onTextChange(value);
       }
-    }, this.props.holdOff);
+    }, this.props.holdOff * 1000);
   };
 
   render() {

src/pages/index.js

@@ -58,6 +58,7 @@ class Index extends React.Component {
       defaultNodeAttributes: JSON.parse(localStorage.getItem('defaultNodeAttributes')) || {},
       defaultEdgeAttributes: JSON.parse(localStorage.getItem('defaultEdgeAttributes')) || {},
       error: null,
+      holdOff: localStorage.getItem('holdOff') || 0.2,
     };
   }
 
@@ -171,6 +172,12 @@ class Index extends React.Component {
     });
   }
 
+  handleHoldOffChange = (holdOff) => {
+    this.setPersistentState({
+      holdOff: holdOff,
+    });
+  }
+
   handleNodeShapeClick = (shape) => {
     let x0 = null;
     let y0 = null;
@@ -355,6 +362,8 @@ class Index extends React.Component {
           fitGraph={this.state.fitGraph}
           onEngineSelectChange={this.handleEngineSelectChange}
           onFitGraphSwitchChange={this.handleFitGraphSwitchChange}
+          holdOff={this.state.holdOff}
+          onHoldOffChange={this.handleHoldOffChange}
           onSettingsClose={this.handleSettingsClose}
         />
         <Grid container
@@ -392,7 +401,7 @@ class Index extends React.Component {
                     dotSrc={this.state.dotSrc}
                     onTextChange={this.handleTextChange}
                     error={this.state.error}
-                    holdOff={200}
+                    holdOff={this.state.holdOff}
                   />
                 )}
               </div>