Update addNode for use with multiple expressions

ui/src/ifql/components/FuncArgInput.tsx

@@ -39,8 +39,8 @@ class FuncArgInput extends PureComponent<Props> {
       return
     }
 
-    this.props.onGenerateScript()
     e.preventDefault()
+    this.props.onGenerateScript()
   }
 
   private handleChange = (e: ChangeEvent<HTMLInputElement>) => {

ui/src/ifql/components/FuncSelector.tsx

@@ -3,6 +3,7 @@ import _ from 'lodash'
 
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import FuncList from 'src/ifql/components/FuncList'
+import {OnAddNode} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface State {
@@ -13,7 +14,8 @@ interface State {
 
 interface Props {
   funcs: string[]
-  onAddNode: (name: string) => void
+  expressionID: string
+  onAddNode: OnAddNode
 }
 
 @ErrorHandling
@@ -64,7 +66,7 @@ export class FuncSelector extends PureComponent<Props, State> {
 
   private handleAddNode = (name: string) => {
     this.handleCloseList()
-    this.props.onAddNode(name)
+    this.props.onAddNode(name, this.props.expressionID)
   }
 
   private get availableFuncs() {

ui/src/ifql/components/TimeMachine.tsx

@@ -4,7 +4,7 @@ import FuncNode from 'src/ifql/components/FuncNode'
 import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor'
 
 import {Func} from 'src/ifql/components/FuncArgs'
-import {OnChangeArg, OnDeleteFuncNode} from 'src/types/ifql'
+import {OnChangeArg, OnDeleteFuncNode, OnAddNode} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 export interface Suggestion {
@@ -24,8 +24,8 @@ interface Props {
   suggestions: Suggestion[]
   expressions: Expression[]
   onSubmitScript: () => void
-  onAddNode: (name: string) => void
   onChangeScript: (script: string) => void
+  onAddNode: OnAddNode
   onChangeArg: OnChangeArg
   onDeleteFuncNode: OnDeleteFuncNode
   onGenerateScript: () => void
@@ -56,7 +56,14 @@ class TimeMachine extends PureComponent<Props> {
           {expressions.map(({funcs, id}, i) => {
             return (
               <div key={id} className="func-nodes-container">
-                <h2>Expression {i}</h2>
+                <h2>
+                  Expression {i}
+                  <FuncSelector
+                    expressionID={id}
+                    funcs={this.funcNames}
+                    onAddNode={onAddNode}
+                  />
+                </h2>
                 {funcs.map(func => (
                   <FuncNode
                     key={func.id}
@@ -67,7 +74,6 @@ class TimeMachine extends PureComponent<Props> {
                     onGenerateScript={onGenerateScript}
                   />
                 ))}
-                <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />
               </div>
             )
           })}

ui/src/ifql/components/TimeMachineEditor.tsx

@@ -23,6 +23,7 @@ class TimeMachineEditor extends PureComponent<Props> {
       lineNumbers: true,
       theme: 'material',
       tabIndex: 1,
+      readonly: false,
     }
 
     return (

ui/src/ifql/containers/IFQLPage.tsx

@@ -112,7 +112,7 @@ export class IFQLPage extends PureComponent<Props, State> {
     expressionID,
   }: InputArg): void => {
     const expressions = this.state.expressions.map(expression => {
-      if (expression.id === expressionID) {
+      if (expression.id !== expressionID) {
         return expression
       }
 
@@ -144,7 +144,7 @@ export class IFQLPage extends PureComponent<Props, State> {
 
   private get expressionsToScript(): string {
     return this.state.expressions.reduce((acc, expression) => {
-      return acc + this.funcsToScript(expression.funcs)
+      return `${acc + this.funcsToScript(expression.funcs)}\n\n`
     }, '')
   }
 
@@ -176,8 +176,16 @@ export class IFQLPage extends PureComponent<Props, State> {
     this.setState({script})
   }
 
-  private handleAddNode = (name: string): void => {
-    const script = `${this.state.script}\n\t|> ${name}()`
+  private handleAddNode = (name: string, expressionID: string): void => {
+    const script = this.state.expressions.reduce((acc, expression) => {
+      if (expression.id === expressionID) {
+        const {funcs} = expression
+        return `${acc}${this.funcsToScript(funcs)}\n\t|> ${name}()\n\n`
+      }
+
+      return acc + expression.source
+    }, '')
+
     this.getASTResponse(script)
   }
 

ui/src/types/ifql.ts

@@ -1,6 +1,7 @@
 // function definitions
 export type OnDeleteFuncNode = (funcID: string, expressionID: string) => void
 export type OnChangeArg = (inputArg: InputArg) => void
+export type OnAddNode = (expressionID: string, funcName: string) => void
 export interface InputArg {
   funcID: string
   expressionID: string

ui/test/ifql/components/FuncSelector.test.tsx

@@ -8,6 +8,7 @@ import FuncList from 'src/ifql/components/FuncList'
 const setup = (override = {}) => {
   const props = {
     funcs: ['count', 'range'],
+    expressionID: '1',
     onAddNode: () => {},
     ...override,
   }