Move Analyze to inside division:

ui/src/ifql/components/TimeMachine.tsx

@@ -4,7 +4,12 @@ import BodyBuilder from 'src/ifql/components/BodyBuilder'
 import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor'
 import TimeMachineVis from 'src/ifql/components/TimeMachineVis'
 import Threesizer from 'src/shared/components/threesizer/Threesizer'
-import {Suggestion, OnChangeScript, FlatBody} from 'src/types/ifql'
+import {
+  Suggestion,
+  OnChangeScript,
+  OnSubmitScript,
+  FlatBody,
+} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants'
 
@@ -14,6 +19,7 @@ interface Props {
   body: Body[]
   suggestions: Suggestion[]
   onChangeScript: OnChangeScript
+  onSubmitScript: OnSubmitScript
 }
 
 interface Body extends FlatBody {
@@ -37,6 +43,7 @@ class TimeMachine extends PureComponent<Props> {
     return [
       {
         handleDisplay: 'none',
+        menuOptions: [],
         render: () => (
           <Threesizer
             divisions={this.divisions}
@@ -46,20 +53,29 @@ class TimeMachine extends PureComponent<Props> {
       },
       {
         handlePixels: 8,
+        menuOptions: [],
         render: () => <TimeMachineVis data={data} />,
       },
     ]
   }
 
   private get divisions() {
-    const {body, suggestions, script, onChangeScript} = this.props
+    const {
+      body,
+      script,
+      suggestions,
+      onChangeScript,
+      onSubmitScript,
+    } = this.props
     return [
       {
         name: 'Explore',
+        menuOptions: [],
         render: () => <SchemaExplorer />,
       },
       {
         name: 'Script',
+        menuOptions: [{action: onSubmitScript, text: 'Analyze'}],
         render: visibility => (
           <TimeMachineEditor
             script={script}
@@ -70,6 +86,7 @@ class TimeMachine extends PureComponent<Props> {
       },
       {
         name: 'Build',
+        menuOptions: [],
         render: () => <BodyBuilder body={body} suggestions={suggestions} />,
       },
     ]

ui/src/ifql/containers/IFQLPage.tsx

@@ -71,12 +71,6 @@ export class IFQLPage extends PureComponent<Props, State> {
                   <h1 className="page-header__title">Time Machine</h1>
                 </div>
                 <div className="page-header__right">
-                  <button
-                    className="btn btn-sm btn-primary"
-                    onClick={this.handleSubmitScript}
-                  >
-                    Analyze Script
-                  </button>
                   <button
                     className="btn btn-sm btn-primary"
                     onClick={this.getTimeSeries}
@@ -92,6 +86,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               script={script}
               suggestions={suggestions}
               onChangeScript={this.handleChangeScript}
+              onSubmitScript={this.handleSubmitScript}
             />
           </div>
         </KeyboardShortcuts>
@@ -345,15 +340,18 @@ export class IFQLPage extends PureComponent<Props, State> {
   }
 
   private getTimeSeries = async () => {
+    const {script} = this.state
     this.setState({data: 'fetching data...'})
 
     try {
-      const {data} = await getTimeSeries(this.state.script)
+      const {data} = await getTimeSeries(script)
       this.setState({data})
     } catch (error) {
       this.setState({data: 'Error fetching data'})
       console.error('Could not get timeSeries', error)
     }
+
+    this.getASTResponse(script)
   }
 }
 

ui/src/shared/components/Threesizer/Division.tsx

@@ -4,6 +4,7 @@ import calculateSize from 'calculate-size'
 
 import DivisionHeader from 'src/shared/components/threesizer/DivisionHeader'
 import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index'
+import {MenuItem} from 'src/shared/components/threesizer/DivisionMenu'
 
 const NOOP = () => {}
 
@@ -22,6 +23,7 @@ interface Props {
   onDoubleClick: (id: string) => void
   onMaximize: (id: string) => void
   onMinimize: (id: string) => void
+  menuOptions?: MenuItem[]
 }
 
 interface Style {
@@ -62,7 +64,7 @@ class Division extends PureComponent<Props> {
   }
 
   public render() {
-    const {name, render, draggable} = this.props
+    const {name, render, draggable, menuOptions} = this.props
     return (
       <div
         className={this.containerClass}
@@ -82,6 +84,7 @@ class Division extends PureComponent<Props> {
         <div className={this.contentsClass} style={this.contentStyle}>
           {name && (
             <DivisionHeader
+              menuOptions={menuOptions}
               onMinimize={this.handleMinimize}
               onMaximize={this.handleMaximize}
             />

ui/src/shared/components/Threesizer/DivisionHeader.tsx

@@ -1,11 +1,12 @@
 import React, {PureComponent} from 'react'
 import DivisionMenu, {
   MenuItem,
-} from 'src/shared/components/Threesizer/DivisionMenu'
+} from 'src/shared/components/threesizer/DivisionMenu'
 
 interface Props {
   onMinimize: () => void
   onMaximize: () => void
+  menuOptions?: MenuItem[]
 }
 
 class DivisionHeader extends PureComponent<Props> {
@@ -18,8 +19,9 @@ class DivisionHeader extends PureComponent<Props> {
   }
 
   private get menuItems(): MenuItem[] {
-    const {onMaximize, onMinimize} = this.props
+    const {onMaximize, onMinimize, menuOptions} = this.props
     return [
+      ...menuOptions,
       {
         action: onMaximize,
         text: 'Maximize',

ui/src/shared/components/Threesizer/Threesizer.tsx

@@ -5,6 +5,8 @@ import _ from 'lodash'
 
 import Division from 'src/shared/components/threesizer/Division'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {MenuItem} from 'src/shared/components/threesizer/DivisionMenu'
+
 import {
   HANDLE_NONE,
   HANDLE_PIXELS,
@@ -32,6 +34,7 @@ interface DivisionProps {
   name?: string
   handleDisplay?: string
   handlePixels?: number
+  menuOptions: MenuItem[]
   render: (visibility?: string) => ReactElement<any>
 }
 
@@ -143,8 +146,9 @@ class Threesizer extends Component<Props, State> {
             onMaximize={this.handleMaximize}
             onMinimize={this.handleMinimize}
             onDoubleClick={this.handleDoubleClick}
-            onHandleStartDrag={this.handleStartDrag}
             render={this.props.divisions[i].render}
+            onHandleStartDrag={this.handleStartDrag}
+            menuOptions={this.props.divisions[i].menuOptions}
           />
         ))}
       </div>

ui/webpack/dev.config.js

@@ -45,7 +45,7 @@ module.exports = {
   },
   watch: true,
   cache: true,
-  devtool: 'source-map',
+  devtool: 'cheap-eval-source-map',
   entry: {
     app: path.resolve(__dirname, '..', 'src', 'index.tsx'),
   },