Update AST debounce script typing change

ui/src/flux/components/TimeMachineEditor.tsx

@@ -73,13 +73,13 @@ class TimeMachineEditor extends PureComponent<Props, State> {
     const {script} = this.props
 
     const options = {
-      lineNumbers: true,
-      theme: 'time-machine',
       tabIndex: 1,
-      readonly: false,
-      completeSingle: false,
-      autoRefresh: true,
       mode: 'flux',
+      readonly: false,
+      lineNumbers: true,
+      autoRefresh: true,
+      theme: 'time-machine',
+      completeSingle: false,
       gutters: ['error-gutter'],
     }
 
@@ -135,7 +135,6 @@ class TimeMachineEditor extends PureComponent<Props, State> {
     }
 
     const errorDiv = document.createElement('div')
-    errorDiv.id = text
     errorDiv.className = 'inline-error-message'
     errorDiv.innerText = text
     widget = this.editor.addLineWidget(line, errorDiv) as Widget

ui/src/flux/containers/FluxPage.tsx

@@ -54,10 +54,14 @@ interface State {
   suggestions: Suggestion[]
 }
 
+type ScriptFunc = (script: string) => void
+
 export const FluxContext = React.createContext()
 
 @ErrorHandling
 export class FluxPage extends PureComponent<Props, State> {
+  private debouncedASTResponse: ScriptFunc
+
   constructor(props) {
     super(props)
     this.state = {
@@ -70,6 +74,10 @@ export class FluxPage extends PureComponent<Props, State> {
         text: '',
       },
     }
+
+    this.debouncedASTResponse = _.debounce(script => {
+      this.getASTResponse(script)
+    }, 500)
   }
 
   public async componentDidMount() {
@@ -288,6 +296,7 @@ export class FluxPage extends PureComponent<Props, State> {
   }
 
   private handleChangeScript = (script: string): void => {
+    this.debouncedASTResponse(script)
     this.props.updateScript(script)
   }
 
@@ -417,7 +426,6 @@ export class FluxPage extends PureComponent<Props, State> {
       const body = bodyNodes(ast, this.state.suggestions)
       const status = {type: 'success', text: ''}
       this.setState({ast, body, status})
-      this.props.updateScript(script)
     } catch (error) {
       this.setState({status: this.parseError(error)})
       return console.error('Could not parse AST', error)