Add explain button to query view

static/css/app.css

@@ -129,12 +129,16 @@
   box-shadow: none;
   background: #7eb54e;
   float: left;
+  margin-right: 10px;
+}
+
+#input .actions .btn-default {
+  background: #aaa;
 }
 
 #input .actions #query_progress {
   display: none;
   float: left;
-  margin-left: 12px;
   line-height: 30px;
   height: 30px;
   color: #aaa;
@@ -144,10 +148,15 @@
   outline: 0 none;
   box-shadow: 0;
 }
+
 #input .actions .btn:hover {
   background: #7eb154;
 }
 
+#input .actions .btn-default:hover {
+  background: #bbb;
+}
+
 #output {
   position: absolute;
   left: 0px;

static/index.html

@@ -31,6 +31,8 @@
         <div id="custom_query"></div>
         <div class="actions">
           <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
+          <input type="button" id="explain" value="Explain Query" class="btn btn-sm btn-default" />
+
           <div id="query_progress">Please wait, query is executing...</div>
         </div>
       </div>

static/js/app.js

@@ -144,12 +144,46 @@ function runQuery() {
   setCurrentTab("table_query");
 
   $("#run").attr("disabled", "disabled");
+  $("#explain").attr("disabled", "disabled");
   $("#query_progress").show();
 
-  executeQuery(editor.getValue(), function(data) {
+  var query = $.trim(editor.getValue());
+
+  if (query.length == 0) {
+    return;
+  }
+
+  executeQuery(query, function(data) {
     buildTable(data);
 
     $("#run").removeAttr("disabled");
+    $("#explain").removeAttr("disabled");
+    $("#query_progress").hide();
+    $("#input").show();
+    $("#output").removeClass("full");
+  });
+}
+
+function runExplain() {
+  setCurrentTab("table_query");
+
+  $("#run").attr("disabled", "disabled");
+  $("#explain").attr("disabled", "disabled");
+  $("#query_progress").show();
+
+  var query = $.trim(editor.getValue());
+
+  if (query.length == 0) {
+    return;
+  }
+
+  query = "EXPLAIN " + query;
+
+  executeQuery(query, function(data) {
+    buildTable(data);
+
+    $("#run").removeAttr("disabled");
+    $("#explain").removeAttr("disabled");
     $("#query_progress").hide();
     $("#input").show();
     $("#output").removeClass("full");
@@ -190,6 +224,10 @@ $(document).ready(function() {
     runQuery();
   });
 
+  $("#explain").on("click", function() {
+    runExplain();
+  });
+
   $("#results").on("click", "tr", function() {
     $("#results tr.selected").removeClass();
     $(this).addClass("selected");