Flip the DE

ui/src/data_explorer/containers/DataExplorer.js

@@ -83,22 +83,22 @@ const DataExplorer = React.createClass({
           timeRange={timeRange}
         />
         <ResizeContainer>
-          <Visualization
+          <QueryBuilder
+            queries={queryConfigs}
+            actions={queryConfigActions}
             autoRefresh={autoRefresh}
             timeRange={timeRange}
-            queryConfigs={queryConfigs}
+            setActiveQueryIndex={this.handleSetActiveQueryIndex}
+            onDeleteQuery={this.handleDeleteQuery}
             activeQueryIndex={activeQueryIndex}
-            onEditRawStatus={queryConfigActions.editRawQueryStatus}
           />
           <ResizeBottom>
-            <QueryBuilder
-              queries={queryConfigs}
-              actions={queryConfigActions}
+            <Visualization
               autoRefresh={autoRefresh}
               timeRange={timeRange}
-              setActiveQueryIndex={this.handleSetActiveQueryIndex}
-              onDeleteQuery={this.handleDeleteQuery}
+              queryConfigs={queryConfigs}
               activeQueryIndex={activeQueryIndex}
+              onEditRawStatus={queryConfigActions.editRawQueryStatus}
             />
           </ResizeBottom>
         </ResizeContainer>

ui/src/style/components/resizer.scss

@@ -19,7 +19,7 @@ $resizer-color-active: $c-pool;
   z-index: 2;
   user-select: none;
   -webkit-user-select: none;
-  position: relative;
+  position: absolute;
 
   // Psuedo element for handle
   &:before {

ui/src/style/pages/data-explorer/query-builder.scss

@@ -4,8 +4,6 @@ $query-builder-tabs-width: 210px;
 
 .query-builder {
   position: relative;
-  flex: 1 0 0;
-  margin: 16px 0;
   width: calc(100% - #{($explorer-page-padding * 2)});
   left: $explorer-page-padding;
   border: 0;
@@ -16,6 +14,7 @@ $query-builder-tabs-width: 210px;
 
 // Tabs
 .query-builder--tabs {
+  margin: 16px 0;
   display: flex;
   width: $query-builder-tabs-width;
   flex-direction: column;
@@ -149,7 +148,8 @@ $query-builder--preview-height: 60px;
 $query-builder--column-heading-height: 50px;
 
 .query-builder--tab-contents {
-  width: 100%;
+  flex: 1 0 0;
+  margin: 16px 0;
   background-color: $g4-onyx;
   border-radius: 0 $radius $radius 0;
   overflow: hidden;

ui/src/style/pages/data-explorer/query-editor.scss

@@ -163,7 +163,8 @@
 .qeditor--empty {
   text-align: center;
   color: $g10-wolf;
-  width: 100%;
+  flex: 1 0 0;
+  margin: 16px 0;
   padding: 0;
   display: flex;
   flex-direction: column;

ui/src/style/pages/data-explorer/visualization.scss

@@ -4,6 +4,10 @@
   width: calc(100% - #{($explorer-page-padding * 2)});
   left: $explorer-page-padding;
 }
+/* Special rule for when the graph is in the bottom of resizer */
+.resize-bottom .graph {
+  height: 100%;
+}
 .graph-heading {
   position: relative;
   top: $de-vertical-margin;