Add builder to right side of ifql page

ui/src/ifql/components/TimeMachine.tsx

@@ -30,13 +30,29 @@ class TimeMachine extends PureComponent<Props> {
         containerClass="page-contents"
       >
         {this.renderEditor}
-        {this.renderVisualization}
+        {this.renderRightSide}
       </Resizer>
     )
   }
 
-  private get renderVisualization() {
-    return <TimeMachineVis blob="Visualizer" />
+  private get renderRightSide() {
+    return (
+      <Threesizer divisions={this.visPlusBuilder} orientation={HANDLE_HORIZONTAL} />
+    )
+  }
+
+  private get visPlusBuilder() {
+    const {body, suggestions} = this.props
+    return [
+      {
+        name: 'Builder',
+        render: () => <BodyBuilder body={body} suggestions={suggestions} />,
+      },
+      {
+        name: 'Visualization',
+        render: () => <TimeMachineVis blob="Visualizer" />,
+
+      },
   }
 
   private get renderEditor() {
@@ -46,7 +62,7 @@ class TimeMachine extends PureComponent<Props> {
   }
 
   private get divisions() {
-    const {script, body, suggestions, onChangeScript} = this.props
+    const {script, onChangeScript} = this.props
     return [
       {
         name: 'Editor',
@@ -54,10 +70,6 @@ class TimeMachine extends PureComponent<Props> {
           <TimeMachineEditor script={script} onChangeScript={onChangeScript} />
         ),
       },
-      {
-        name: 'Builder',
-        render: () => <BodyBuilder body={body} suggestions={suggestions} />,
-      },
       {
         name: 'Schema',
         render: () => <div>Explorin all yer schemas</div>,