From f53d8d19a8d5cbeee6d1b208bed82d09630ebc3d Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 6 Apr 2017 13:20:36 -0700
Subject: [PATCH] Flip the DE

---
 ui/src/data_explorer/containers/DataExplorer.js  | 16 ++++++++--------
 ui/src/style/components/resizer.scss             |  2 +-
 .../style/pages/data-explorer/query-builder.scss |  6 +++---
 .../style/pages/data-explorer/query-editor.scss  |  3 ++-
 .../style/pages/data-explorer/visualization.scss |  4 ++++
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 2b694f269c..51e58f8c15 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/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>
diff --git a/ui/src/style/components/resizer.scss b/ui/src/style/components/resizer.scss
index 74fc73ea36..077b1aa85e 100644
--- a/ui/src/style/components/resizer.scss
+++ b/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 {
diff --git a/ui/src/style/pages/data-explorer/query-builder.scss b/ui/src/style/pages/data-explorer/query-builder.scss
index 19eed1f67b..d10a743693 100644
--- a/ui/src/style/pages/data-explorer/query-builder.scss
+++ b/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;
diff --git a/ui/src/style/pages/data-explorer/query-editor.scss b/ui/src/style/pages/data-explorer/query-editor.scss
index 0f1e9ef61e..0393608b0a 100644
--- a/ui/src/style/pages/data-explorer/query-editor.scss
+++ b/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;
diff --git a/ui/src/style/pages/data-explorer/visualization.scss b/ui/src/style/pages/data-explorer/visualization.scss
index e6c6a58e5d..c7719677cc 100644
--- a/ui/src/style/pages/data-explorer/visualization.scss
+++ b/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;