Reintroduce divisions for Threesizer

ui/src/ifql/components/TimeMachine.tsx

@@ -3,9 +3,10 @@ import BodyBuilder from 'src/ifql/components/BodyBuilder'
 import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor'
 import TimeMachineVis from 'src/ifql/components/TimeMachineVis'
 import Resizer from 'src/shared/components/ResizeContainer'
+import Threesizer from 'src/shared/components/Threesizer'
 import {Suggestion, OnChangeScript, FlatBody} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {HANDLE_VERTICAL} from 'src/shared/constants/index'
+import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index'
 
 interface Props {
   script: string
@@ -28,27 +29,41 @@ class TimeMachine extends PureComponent<Props> {
         orientation={HANDLE_VERTICAL}
         containerClass="page-contents"
       >
-        {this.renderVisualization()}
+        {this.renderEditor}
-        {this.renderEditor()}
+        {this.renderVisualization}
       </Resizer>
     )
   }
 
-  private renderVisualization = () => {
+  private get renderVisualization() {
     return <TimeMachineVis blob="Visualizer" />
   }
 
-  private renderEditor = () => {
+  private get renderEditor() {
-    const {script, body, suggestions, onChangeScript} = this.props
-
     return (
-      <div>
+      <Threesizer divisions={this.divisions} orientation={HANDLE_HORIZONTAL} />
-        <TimeMachineEditor script={script} onChangeScript={onChangeScript} />
-        <BodyBuilder body={body} suggestions={suggestions} />
-        <div>Explorin all yer schemas</div>
-      </div>
     )
   }
+
+  private get divisions() {
+    const {script, body, suggestions, onChangeScript} = this.props
+    return [
+      {
+        name: 'Editor',
+        render: () => (
+          <TimeMachineEditor script={script} onChangeScript={onChangeScript} />
+        ),
+      },
+      {
+        name: 'Builder',
+        render: () => <BodyBuilder body={body} suggestions={suggestions} />,
+      },
+      {
+        name: 'Schema',
+        render: () => <div>Explorin all yer schemas</div>,
+      },
+    ]
+  }
 }
 
 export default TimeMachine

ui/src/shared/components/Threesizer.tsx

@@ -5,11 +5,7 @@ import _ from 'lodash'
 
 import ResizeDivision from 'src/shared/components/ResizeDivision'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {
+import {HANDLE_HORIZONTAL, HANDLE_VERTICAL} from 'src/shared/constants/'
-  MIN_DIVISIONS,
-  HANDLE_HORIZONTAL,
-  HANDLE_VERTICAL,
-} from 'src/shared/constants/'
 
 const initialDragEvent = {
   percentX: 0,
@@ -40,7 +36,7 @@ interface DivisionState extends Division {
 interface Props {
   divisions: Division[]
   orientation: string
-  containerClass: string
+  containerClass?: string
 }
 
 @ErrorHandling
@@ -105,13 +101,6 @@ class Resizer extends Component<Props, State> {
     const {activeHandleID, divisions} = this.state
     const {orientation} = this.props
 
-    if (divisions.length < MIN_DIVISIONS) {
-      console.error(
-        `There must be at least ${MIN_DIVISIONS}' divisions in Resizer`
-      )
-      return
-    }
-
     return (
       <div
         className={this.className}