From 7396af3441dcb33e0c4037ca49c2e19889858f7d Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Tue, 2 Apr 2019 14:45:34 -0700
Subject: [PATCH 1/7] Add explain for SQL query

---
 web-console/src/components/sql-control.scss |   8 ++
 web-console/src/components/sql-control.tsx  |  32 ++++--
 web-console/src/utils/druid-query.tsx       |  58 ++++++++++
 web-console/src/views/sql-view.scss         |  23 ++++
 web-console/src/views/sql-view.tsx          | 114 +++++++++++++++++++-
 5 files changed, 222 insertions(+), 13 deletions(-)

diff --git a/web-console/src/components/sql-control.scss b/web-console/src/components/sql-control.scss
index f8ae7951382c..d061bf2e6650 100644
--- a/web-console/src/components/sql-control.scss
+++ b/web-console/src/components/sql-control.scss
@@ -40,6 +40,14 @@
 .auto-complete-checkbox {
   margin:10px;
   min-width: 120px;
+
+  .bp3-form-group {
+    margin-bottom: 0;
+  }
+
+  button {
+    width: 100%;
+  }
 }
 
 .ace_tooltip {
diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index 033944bd9a26..14a33693cbb6 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Checkbox, Classes, Intent, Popover, Position } from "@blueprintjs/core";
+import { Button, Checkbox, Classes, Dialog, FormGroup, Intent, Popover, Position, TextArea } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import axios from "axios";
 import * as ace from 'brace';
@@ -39,6 +39,7 @@ const langTools = ace.acequire('ace/ext/language_tools');
 export interface SqlControlProps extends React.Props<any> {
   initSql: string | null;
   onRun: (query: string) => void;
+  onExplain: (query: string) => void;
 }
 
 export interface SqlControlState {
@@ -165,18 +166,29 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
   }
 
   render() {
-    const { onRun } = this.props;
+    const { onRun, onExplain } = this.props;
     const { query, autoCompleteOn } = this.state;
 
     const isRune = query.trim().startsWith('{');
 
-    const autoCompletePopover = <div className={"auto-complete-checkbox"}>
-      <Checkbox
-        checked={isRune ? false : autoCompleteOn}
-        disabled={isRune}
-        label={"Auto complete"}
-        onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
-      />
+    const morePopover = <div className={"auto-complete-checkbox"}>
+      <FormGroup>
+        <Checkbox
+          checked={isRune ? false : autoCompleteOn}
+          disabled={isRune}
+          label={"Auto complete"}
+          onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
+        />
+      </FormGroup>
+      <FormGroup>
+        <Button
+          className={Classes.POPOVER_DISMISS}
+          disabled={isRune}
+          text={"Explain"}
+          onClick={() => onExplain(query)}
+          minimal
+        />
+      </FormGroup>
     </div>;
 
     // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
@@ -207,7 +219,7 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
         <Button rightIcon={IconNames.CARET_RIGHT} onClick={() => onRun(query)}>
           {isRune ? 'Rune' : 'Run'}
         </Button>
-        <Popover position={Position.BOTTOM_LEFT} content={autoCompletePopover}>
+        <Popover position={Position.BOTTOM_LEFT} content={morePopover}>
           <Button minimal icon={IconNames.MORE}/>
         </Popover>
       </div>
diff --git a/web-console/src/utils/druid-query.tsx b/web-console/src/utils/druid-query.tsx
index 57e66d3a1faf..543fcb3b9861 100644
--- a/web-console/src/utils/druid-query.tsx
+++ b/web-console/src/utils/druid-query.tsx
@@ -43,3 +43,61 @@ export async function queryDruidSql(sqlQuery: Record<string, any>): Promise<any[
   }
   return sqlResultResp.data;
 }
+
+function parseQueryRel(queryRel: string) {
+  if (!queryRel) {
+    return {
+      query: null,
+      signature: null
+    };
+  }
+
+  const queryAndSignature = queryRel.split(', signature=');
+  const queryValue = new RegExp(/query=(.+)/).exec(queryAndSignature[0]);
+  const signatureValue = queryAndSignature[1];
+
+  let parsedQuery: any;
+
+  if (queryValue && queryValue[1]) {
+    try {
+      parsedQuery = JSON.parse(queryValue[1]);
+    } catch (e) {}
+  }
+
+  return {
+    query: parsedQuery || queryRel,
+    signature: signatureValue || null
+  };
+}
+
+export function parseQueryPlan(raw: string): any {
+  let plan: string = raw;
+
+  plan = plan.replace('\n', '');
+
+  if (plan.includes('DruidOuterQueryRel(')) {
+    return plan; // don't know how to parse this
+  }
+
+  let queryArgs: string;
+  const queryRelFnStart = 'DruidQueryRel(';
+  const semiJoinFnStart = 'DruidSemiJoin(';
+
+  if (plan.startsWith(queryRelFnStart)) {
+    queryArgs = plan.substring(queryRelFnStart.length, plan.length - 1);
+  } else if (plan.startsWith(semiJoinFnStart)) {
+    queryArgs = plan.substring(semiJoinFnStart.length, plan.length - 1);
+    const leftExpressionsArgs = ', leftExpressions=';
+    const keysArgumentIdx = queryArgs.indexOf(leftExpressionsArgs);
+    if (keysArgumentIdx !== -1) {
+      return {
+        mainQuery: parseQueryRel(queryArgs.substring(0, keysArgumentIdx)),
+        subQueryRight: parseQueryPlan(queryArgs.substring(queryArgs.indexOf(queryRelFnStart)))
+      };
+    }
+  } else {
+    return plan;
+  }
+
+  return parseQueryRel(queryArgs);
+}
diff --git a/web-console/src/views/sql-view.scss b/web-console/src/views/sql-view.scss
index 863f1901b86f..af111645cee6 100644
--- a/web-console/src/views/sql-view.scss
+++ b/web-console/src/views/sql-view.scss
@@ -38,3 +38,26 @@
     flex: 1;
   }
 }
+
+.sql-view-explain-dialog {
+
+  &.bp3-dialog {
+    width: 600px;
+  }
+
+  textarea {
+    width: 100%;
+  }
+
+  .one-query {
+    textarea {
+      height: 50vh !important;
+    }
+  }
+
+  .two-queries {
+    textarea {
+      height: 30vh !important;
+    }
+  }
+}
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index 24027cce1e51..a1858d9f8852 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { Button, Classes, Dialog, FormGroup, InputGroup, Label, TextArea } from "@blueprintjs/core";
 import axios from 'axios';
 import * as classNames from 'classnames';
 import * as Hjson from "hjson";
@@ -24,10 +25,10 @@ import ReactTable from "react-table";
 
 import { SqlControl } from '../components/sql-control';
 import {
-  decodeRune,
+  decodeRune, getDruidErrorMessage,
   HeaderRows,
   localStorageGet, LocalStorageKeys,
-  localStorageSet,
+  localStorageSet, parseQueryPlan,
   queryDruidRune,
   queryDruidSql, QueryManager
 } from '../utils';
@@ -42,18 +43,27 @@ export interface SqlViewState {
   loading: boolean;
   result: HeaderRows | null;
   error: string | null;
+  explainDialogOpen: boolean;
+  explainResult: any;
+  loadingExplain: boolean;
+  explainError: Error | null;
 }
 
 export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
 
   private sqlQueryManager: QueryManager<string, HeaderRows>;
+  private explainQueryManager: QueryManager<string, any>;
 
   constructor(props: SqlViewProps, context: any) {
     super(props, context);
     this.state = {
       loading: false,
       result: null,
-      error: null
+      error: null,
+      explainDialogOpen: false,
+      loadingExplain: false,
+      explainResult: null,
+      explainError: null
     };
   }
 
@@ -86,12 +96,108 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
         });
       }
     });
+
+    this.explainQueryManager = new QueryManager({
+      processQuery: async (query: string) => {
+        const explainQuery = `explain plan for ${query}`;
+        const result = await queryDruidSql({
+          query: explainQuery,
+          resultFormat: "object"
+        });
+        const data = parseQueryPlan(result[0]["PLAN"]);
+        return data;
+      },
+      onStateChange: ({ result, loading, error }) => {
+        this.setState({
+          explainResult: result,
+          loadingExplain: loading,
+          explainError: error !== null ? new Error(error) : null
+        });
+      }
+    });
   }
 
   componentWillUnmount(): void {
     this.sqlQueryManager.terminate();
   }
 
+  getExplain = (q: string) => {
+    this.setState({
+      explainDialogOpen: true,
+      loadingExplain: true,
+      explainError: null
+    });
+    this.explainQueryManager.runQuery(q);
+  }
+
+  renderExplainDialog() {
+    const { explainDialogOpen, explainResult, loadingExplain, explainError } = this.state;
+    let content: JSX.Element;
+    if (loadingExplain) {
+      content = <div>Loading...</div>;
+    } else if (explainError) {
+      content = <div>{explainError.message}</div>;
+    } else if (explainResult == null) {
+      content = <div/>;
+    } else if (explainResult.query) {
+      content = <div className={"one-query"}>
+        <FormGroup
+          label={"Query"}
+        >
+          <TextArea
+            readOnly
+            value={JSON.stringify(explainResult.query[0], undefined, 2)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.signature} readOnly/>
+        </FormGroup>
+      </div>;
+    } else if (explainResult.mainQuery && explainResult.subQueryRight) {
+      content = <div className={"two-queries"}>
+        <FormGroup
+          label={"Main query"}
+        >
+          <TextArea
+            readOnly
+            value={JSON.stringify(explainResult.mainQuery, undefined, 2)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={"Sub query"}
+        >
+          <TextArea
+            readOnly
+            value={JSON.stringify(explainResult.subQueryRight, undefined, 2)}
+          />
+        </FormGroup>
+      </div>;
+    } else {
+      content = <div>{explainResult}</div>;
+    }
+
+    return <Dialog
+      className={'sql-view-explain-dialog'}
+      isOpen={explainDialogOpen}
+      onClose={() => this.setState({explainDialogOpen: false})}
+      title={"Query plan"}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        {content}
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            text="Close"
+            onClick={() => this.setState({explainDialogOpen: false})}
+          />
+        </div>
+      </div>
+    </Dialog>;
+  }
+
   renderResultTable() {
     const { result, loading, error } = this.state;
 
@@ -116,8 +222,10 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
           localStorageSet(LocalStorageKeys.QUERY_KEY, q);
           this.sqlQueryManager.runQuery(q);
         }}
+        onExplain={(q: string) => this.getExplain(q)}
       />
       {this.renderResultTable()}
+      {this.renderExplainDialog()}
     </div>;
   }
 }

From f113fbe9ec5035a6d0b1bbddff5fb63364b0a54d Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Tue, 2 Apr 2019 15:02:52 -0700
Subject: [PATCH 2/7] Terminate explain query manager

---
 web-console/src/views/sql-view.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index a1858d9f8852..9683f07a7510 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -119,6 +119,7 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
 
   componentWillUnmount(): void {
     this.sqlQueryManager.terminate();
+    this.explainQueryManager.terminate();
   }
 
   getExplain = (q: string) => {

From 54d4fb8868551327b27c66aa2793a87c8588b23a Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Tue, 2 Apr 2019 15:22:19 -0700
Subject: [PATCH 3/7] Add signature for semi-joined queries

---
 web-console/src/components/sql-control.tsx |  2 +-
 web-console/src/views/sql-view.scss        |  2 +-
 web-console/src/views/sql-view.tsx         | 44 +++++++++++++++++-----
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index 14a33693cbb6..460e38f12a62 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Checkbox, Classes, Dialog, FormGroup, Intent, Popover, Position, TextArea } from "@blueprintjs/core";
+import { Button, Checkbox, Classes, FormGroup, Intent, Popover, Position } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import axios from "axios";
 import * as ace from 'brace';
diff --git a/web-console/src/views/sql-view.scss b/web-console/src/views/sql-view.scss
index af111645cee6..2ee844b927f1 100644
--- a/web-console/src/views/sql-view.scss
+++ b/web-console/src/views/sql-view.scss
@@ -57,7 +57,7 @@
 
   .two-queries {
     textarea {
-      height: 30vh !important;
+      height: 25vh !important;
     }
   }
 }
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index 9683f07a7510..2b4980707893 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, FormGroup, InputGroup, Label, TextArea } from "@blueprintjs/core";
-import axios from 'axios';
-import * as classNames from 'classnames';
+import { Button, Classes, Dialog, FormGroup, InputGroup, TextArea } from "@blueprintjs/core";
 import * as Hjson from "hjson";
 import * as React from 'react';
 import ReactTable from "react-table";
@@ -141,6 +139,16 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
     } else if (explainResult == null) {
       content = <div/>;
     } else if (explainResult.query) {
+
+      let signature: JSX.Element | null = null;
+      if (explainResult.signature) {
+        signature = <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.signature} readOnly/>
+        </FormGroup>;
+      }
+
       content = <div className={"one-query"}>
         <FormGroup
           label={"Query"}
@@ -150,30 +158,46 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
             value={JSON.stringify(explainResult.query[0], undefined, 2)}
           />
         </FormGroup>
-        <FormGroup
-          label={"Signature"}
-        >
-          <InputGroup defaultValue={explainResult.signature} readOnly/>
-        </FormGroup>
+        {signature}
       </div>;
     } else if (explainResult.mainQuery && explainResult.subQueryRight) {
+
+      let mainSignature: JSX.Element | null = null;
+      let subSignature: JSX.Element | null = null;
+      if (explainResult.mainQuery.signature) {
+        mainSignature = <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.mainQuery.signature} readOnly/>
+        </FormGroup>;
+      }
+      if (explainResult.subQueryRight.signature) {
+        subSignature = <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.subQueryRight.signature} readOnly/>
+        </FormGroup>;
+      }
+
       content = <div className={"two-queries"}>
         <FormGroup
           label={"Main query"}
         >
           <TextArea
             readOnly
-            value={JSON.stringify(explainResult.mainQuery, undefined, 2)}
+            value={JSON.stringify(explainResult.mainQuery.query, undefined, 2)}
           />
         </FormGroup>
+        {mainSignature}
         <FormGroup
           label={"Sub query"}
         >
           <TextArea
             readOnly
-            value={JSON.stringify(explainResult.subQueryRight, undefined, 2)}
+            value={JSON.stringify(explainResult.subQueryRight.query, undefined, 2)}
           />
         </FormGroup>
+        {subSignature}
       </div>;
     } else {
       content = <div>{explainResult}</div>;

From 5fb8fc8aed825b77e23bca923e2af8b0428cb342 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 4 Apr 2019 12:43:40 -0700
Subject: [PATCH 4/7] Extract components out

---
 web-console/src/components/sql-control.scss   |  10 +-
 web-console/src/components/sql-control.tsx    |  37 +++--
 .../src/dialogs/query-plan-dialog.scss        |  40 ++++++
 web-console/src/dialogs/query-plan-dialog.tsx | 134 ++++++++++++++++++
 web-console/src/utils/druid-query.tsx         |  15 +-
 web-console/src/views/sql-view.scss           |  22 ---
 web-console/src/views/sql-view.tsx            |  99 ++-----------
 7 files changed, 213 insertions(+), 144 deletions(-)
 create mode 100644 web-console/src/dialogs/query-plan-dialog.scss
 create mode 100644 web-console/src/dialogs/query-plan-dialog.tsx

diff --git a/web-console/src/components/sql-control.scss b/web-console/src/components/sql-control.scss
index d061bf2e6650..468e91a33108 100644
--- a/web-console/src/components/sql-control.scss
+++ b/web-console/src/components/sql-control.scss
@@ -37,8 +37,8 @@
 
 }
 
-.auto-complete-checkbox {
-  margin:10px;
+.sql-control-popover {
+  padding:10px;
   min-width: 120px;
 
   .bp3-form-group {
@@ -46,7 +46,11 @@
   }
 
   button {
-    width: 100%;
+    span {
+      position: relative;
+      left: -7px;
+    }
+    padding-right: 35px;
   }
 }
 
diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index 460e38f12a62..37a801ec405f 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Checkbox, Classes, FormGroup, Intent, Popover, Position } from "@blueprintjs/core";
+import { Button, Checkbox, Classes, FormGroup, Intent, Menu, Popover, Position } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import axios from "axios";
 import * as ace from 'brace';
@@ -171,24 +171,19 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
 
     const isRune = query.trim().startsWith('{');
 
-    const morePopover = <div className={"auto-complete-checkbox"}>
-      <FormGroup>
-        <Checkbox
-          checked={isRune ? false : autoCompleteOn}
-          disabled={isRune}
-          label={"Auto complete"}
-          onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
-        />
-      </FormGroup>
-      <FormGroup>
-        <Button
-          className={Classes.POPOVER_DISMISS}
-          disabled={isRune}
-          text={"Explain"}
-          onClick={() => onExplain(query)}
-          minimal
-        />
-      </FormGroup>
+    const SqlControlPopover =  <div className={"sql-control-popover"}>
+      <Checkbox
+        checked={isRune ? false : autoCompleteOn}
+        label={"Auto complete"}
+        onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
+      />
+      <Button
+        icon={IconNames.CLEAN}
+        className={Classes.POPOVER_DISMISS}
+        text={"Explain"}
+        onClick={() => onExplain(query)}
+        minimal
+      />
     </div>;
 
     // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
@@ -219,8 +214,8 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
         <Button rightIcon={IconNames.CARET_RIGHT} onClick={() => onRun(query)}>
           {isRune ? 'Rune' : 'Run'}
         </Button>
-        <Popover position={Position.BOTTOM_LEFT} content={morePopover}>
-          <Button minimal icon={IconNames.MORE}/>
+        <Popover position={Position.BOTTOM_LEFT} content={SqlControlPopover} disabled={isRune}>
+          <Button minimal icon={IconNames.MORE} disabled={isRune}/>
         </Popover>
       </div>
     </div>;
diff --git a/web-console/src/dialogs/query-plan-dialog.scss b/web-console/src/dialogs/query-plan-dialog.scss
new file mode 100644
index 000000000000..8b61ec08c088
--- /dev/null
+++ b/web-console/src/dialogs/query-plan-dialog.scss
@@ -0,0 +1,40 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.query-plan-dialog {
+
+  &.bp3-dialog {
+    width: 600px;
+  }
+
+  textarea {
+    width: 100%;
+  }
+
+  .one-query {
+    textarea {
+      height: 50vh !important;
+    }
+  }
+
+  .two-queries {
+    textarea {
+      height: 25vh !important;
+    }
+  }
+}
diff --git a/web-console/src/dialogs/query-plan-dialog.tsx b/web-console/src/dialogs/query-plan-dialog.tsx
new file mode 100644
index 000000000000..16af6051f13e
--- /dev/null
+++ b/web-console/src/dialogs/query-plan-dialog.tsx
@@ -0,0 +1,134 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button, Classes, Dialog, FormGroup, InputGroup, TextArea } from "@blueprintjs/core";
+import * as React from "react";
+
+import "./query-plan-dialog.scss";
+
+export interface QueryPlanDialogProps extends React.Props<any> {
+  explainResult: any;
+  explainError: Error | null;
+  onClose: () => void;
+}
+
+export interface QueryPlanDialogState {
+
+}
+
+export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, QueryPlanDialogState> {
+
+  constructor(props: QueryPlanDialogProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { explainResult, explainError, onClose } = this.props;
+
+    let content: JSX.Element;
+
+    if (explainError) {
+      content = <div>{explainError.message}</div>;
+    } else if (explainResult == null) {
+      content = <div/>;
+    } else if (explainResult.query) {
+
+      let signature: JSX.Element | null = null;
+      if (explainResult.signature) {
+        signature = <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.signature} readOnly/>
+        </FormGroup>;
+      }
+
+      content = <div className={"one-query"}>
+        <FormGroup
+          label={"Query"}
+        >
+          <TextArea
+            readOnly
+            value={JSON.stringify(explainResult.query[0], undefined, 2)}
+          />
+        </FormGroup>
+        {signature}
+      </div>;
+    } else if (explainResult.mainQuery && explainResult.subQueryRight) {
+
+      let mainSignature: JSX.Element | null = null;
+      let subSignature: JSX.Element | null = null;
+      if (explainResult.mainQuery.signature) {
+        mainSignature = <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.mainQuery.signature} readOnly/>
+        </FormGroup>;
+      }
+      if (explainResult.subQueryRight.signature) {
+        subSignature = <FormGroup
+          label={"Signature"}
+        >
+          <InputGroup defaultValue={explainResult.subQueryRight.signature} readOnly/>
+        </FormGroup>;
+      }
+
+      content = <div className={"two-queries"}>
+        <FormGroup
+          label={"Main query"}
+        >
+          <TextArea
+            readOnly
+            value={JSON.stringify(explainResult.mainQuery.query, undefined, 2)}
+          />
+        </FormGroup>
+        {mainSignature}
+        <FormGroup
+          label={"Sub query"}
+        >
+          <TextArea
+            readOnly
+            value={JSON.stringify(explainResult.subQueryRight.query, undefined, 2)}
+          />
+        </FormGroup>
+        {subSignature}
+      </div>;
+    } else {
+      content = <div>{explainResult}</div>;
+    }
+
+    return <Dialog
+      className={'query-plan-dialog'}
+      isOpen
+      onClose={onClose}
+      title={"Query plan"}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        {content}
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            text="Close"
+            onClick={onClose}
+          />
+        </div>
+      </div>
+    </Dialog>;
+  }
+}
diff --git a/web-console/src/utils/druid-query.tsx b/web-console/src/utils/druid-query.tsx
index 543fcb3b9861..a98f33abca41 100644
--- a/web-console/src/utils/druid-query.tsx
+++ b/web-console/src/utils/druid-query.tsx
@@ -44,15 +44,15 @@ export async function queryDruidSql(sqlQuery: Record<string, any>): Promise<any[
   return sqlResultResp.data;
 }
 
-function parseQueryRel(queryRel: string) {
-  if (!queryRel) {
+function parseQueryPlanResult(queryPlanResult: string) {
+  if (!queryPlanResult) {
     return {
       query: null,
       signature: null
     };
   }
 
-  const queryAndSignature = queryRel.split(', signature=');
+  const queryAndSignature = queryPlanResult.split(', signature=');
   const queryValue = new RegExp(/query=(.+)/).exec(queryAndSignature[0]);
   const signatureValue = queryAndSignature[1];
 
@@ -65,15 +65,14 @@ function parseQueryRel(queryRel: string) {
   }
 
   return {
-    query: parsedQuery || queryRel,
+    query: parsedQuery || queryPlanResult,
     signature: signatureValue || null
   };
 }
 
 export function parseQueryPlan(raw: string): any {
   let plan: string = raw;
-
-  plan = plan.replace('\n', '');
+  plan = plan.replace(/\n/g, '');
 
   if (plan.includes('DruidOuterQueryRel(')) {
     return plan; // don't know how to parse this
@@ -91,7 +90,7 @@ export function parseQueryPlan(raw: string): any {
     const keysArgumentIdx = queryArgs.indexOf(leftExpressionsArgs);
     if (keysArgumentIdx !== -1) {
       return {
-        mainQuery: parseQueryRel(queryArgs.substring(0, keysArgumentIdx)),
+        mainQuery: parseQueryPlanResult(queryArgs.substring(0, keysArgumentIdx)),
         subQueryRight: parseQueryPlan(queryArgs.substring(queryArgs.indexOf(queryRelFnStart)))
       };
     }
@@ -99,5 +98,5 @@ export function parseQueryPlan(raw: string): any {
     return plan;
   }
 
-  return parseQueryRel(queryArgs);
+  return parseQueryPlanResult(queryArgs);
 }
diff --git a/web-console/src/views/sql-view.scss b/web-console/src/views/sql-view.scss
index 2ee844b927f1..2cc88763bcef 100644
--- a/web-console/src/views/sql-view.scss
+++ b/web-console/src/views/sql-view.scss
@@ -39,25 +39,3 @@
   }
 }
 
-.sql-view-explain-dialog {
-
-  &.bp3-dialog {
-    width: 600px;
-  }
-
-  textarea {
-    width: 100%;
-  }
-
-  .one-query {
-    textarea {
-      height: 50vh !important;
-    }
-  }
-
-  .two-queries {
-    textarea {
-      height: 25vh !important;
-    }
-  }
-}
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index 2b4980707893..f63e60ff967a 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -22,6 +22,7 @@ import * as React from 'react';
 import ReactTable from "react-table";
 
 import { SqlControl } from '../components/sql-control';
+import { QueryPlanDialog } from "../dialogs/query-plan-dialog";
 import {
   decodeRune, getDruidErrorMessage,
   HeaderRows,
@@ -130,97 +131,15 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
   }
 
   renderExplainDialog() {
-    const { explainDialogOpen, explainResult, loadingExplain, explainError } = this.state;
-    let content: JSX.Element;
-    if (loadingExplain) {
-      content = <div>Loading...</div>;
-    } else if (explainError) {
-      content = <div>{explainError.message}</div>;
-    } else if (explainResult == null) {
-      content = <div/>;
-    } else if (explainResult.query) {
-
-      let signature: JSX.Element | null = null;
-      if (explainResult.signature) {
-        signature = <FormGroup
-          label={"Signature"}
-        >
-          <InputGroup defaultValue={explainResult.signature} readOnly/>
-        </FormGroup>;
-      }
-
-      content = <div className={"one-query"}>
-        <FormGroup
-          label={"Query"}
-        >
-          <TextArea
-            readOnly
-            value={JSON.stringify(explainResult.query[0], undefined, 2)}
-          />
-        </FormGroup>
-        {signature}
-      </div>;
-    } else if (explainResult.mainQuery && explainResult.subQueryRight) {
-
-      let mainSignature: JSX.Element | null = null;
-      let subSignature: JSX.Element | null = null;
-      if (explainResult.mainQuery.signature) {
-        mainSignature = <FormGroup
-          label={"Signature"}
-        >
-          <InputGroup defaultValue={explainResult.mainQuery.signature} readOnly/>
-        </FormGroup>;
-      }
-      if (explainResult.subQueryRight.signature) {
-        subSignature = <FormGroup
-          label={"Signature"}
-        >
-          <InputGroup defaultValue={explainResult.subQueryRight.signature} readOnly/>
-        </FormGroup>;
-      }
-
-      content = <div className={"two-queries"}>
-        <FormGroup
-          label={"Main query"}
-        >
-          <TextArea
-            readOnly
-            value={JSON.stringify(explainResult.mainQuery.query, undefined, 2)}
-          />
-        </FormGroup>
-        {mainSignature}
-        <FormGroup
-          label={"Sub query"}
-        >
-          <TextArea
-            readOnly
-            value={JSON.stringify(explainResult.subQueryRight.query, undefined, 2)}
-          />
-        </FormGroup>
-        {subSignature}
-      </div>;
-    } else {
-      content = <div>{explainResult}</div>;
+    const {explainDialogOpen, explainResult, loadingExplain, explainError} = this.state;
+    if (!loadingExplain && explainDialogOpen) {
+      return <QueryPlanDialog
+        explainResult={explainResult}
+        explainError={explainError}
+        onClose={() => this.setState({explainDialogOpen: false})}
+      />;
     }
-
-    return <Dialog
-      className={'sql-view-explain-dialog'}
-      isOpen={explainDialogOpen}
-      onClose={() => this.setState({explainDialogOpen: false})}
-      title={"Query plan"}
-    >
-      <div className={Classes.DIALOG_BODY}>
-        {content}
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button
-            text="Close"
-            onClick={() => this.setState({explainDialogOpen: false})}
-          />
-        </div>
-      </div>
-    </Dialog>;
+    return null;
   }
 
   renderResultTable() {

From 86725d9ff4064903a465dda31d8308a7c827b284 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 4 Apr 2019 12:56:06 -0700
Subject: [PATCH 5/7] Hide more button in rune mode

---
 web-console/src/components/sql-control.tsx | 35 +++++++++++-----------
 web-console/src/views/sql-view.tsx         |  3 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index 37a801ec405f..0dd8adecc561 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -171,20 +171,23 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
 
     const isRune = query.trim().startsWith('{');
 
-    const SqlControlPopover =  <div className={"sql-control-popover"}>
-      <Checkbox
-        checked={isRune ? false : autoCompleteOn}
-        label={"Auto complete"}
-        onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
-      />
-      <Button
-        icon={IconNames.CLEAN}
-        className={Classes.POPOVER_DISMISS}
-        text={"Explain"}
-        onClick={() => onExplain(query)}
-        minimal
-      />
-    </div>;
+    const SqlControlPopover = <Popover position={Position.BOTTOM_LEFT}>
+        <Button minimal icon={IconNames.MORE}/>
+        <div className={"sql-control-popover"}>
+          <Checkbox
+            checked={isRune ? false : autoCompleteOn}
+            label={"Auto complete"}
+            onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
+          />
+          <Button
+            icon={IconNames.CLEAN}
+            className={Classes.POPOVER_DISMISS}
+            text={"Explain"}
+            onClick={() => onExplain(query)}
+            minimal
+          />
+        </div>
+      </Popover>;
 
     // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
     return <div className="sql-control">
@@ -214,9 +217,7 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
         <Button rightIcon={IconNames.CARET_RIGHT} onClick={() => onRun(query)}>
           {isRune ? 'Rune' : 'Run'}
         </Button>
-        <Popover position={Position.BOTTOM_LEFT} content={SqlControlPopover} disabled={isRune}>
-          <Button minimal icon={IconNames.MORE} disabled={isRune}/>
-        </Popover>
+        {!isRune ? SqlControlPopover : null}
       </div>
     </div>;
   }
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index f63e60ff967a..2a7af4a054d4 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, FormGroup, InputGroup, TextArea } from "@blueprintjs/core";
 import * as Hjson from "hjson";
 import * as React from 'react';
 import ReactTable from "react-table";
@@ -24,7 +23,7 @@ import ReactTable from "react-table";
 import { SqlControl } from '../components/sql-control';
 import { QueryPlanDialog } from "../dialogs/query-plan-dialog";
 import {
-  decodeRune, getDruidErrorMessage,
+  decodeRune,
   HeaderRows,
   localStorageGet, LocalStorageKeys,
   localStorageSet, parseQueryPlan,

From f50d5f8a7b653c9112e621b731a491aa8509158d Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 4 Apr 2019 16:08:47 -0700
Subject: [PATCH 6/7] Add types for query explanation parser

---
 web-console/src/utils/druid-query.tsx | 16 +++++++++++++---
 web-console/src/views/sql-view.tsx    |  7 ++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/web-console/src/utils/druid-query.tsx b/web-console/src/utils/druid-query.tsx
index a98f33abca41..80fddbb2e4d5 100644
--- a/web-console/src/utils/druid-query.tsx
+++ b/web-console/src/utils/druid-query.tsx
@@ -44,7 +44,17 @@ export async function queryDruidSql(sqlQuery: Record<string, any>): Promise<any[
   return sqlResultResp.data;
 }
 
-function parseQueryPlanResult(queryPlanResult: string) {
+export interface BasicQueryExplanation {
+  query: any;
+  signature: string | null;
+}
+
+export interface SemiJoinQueryExplanation {
+  mainQuery: BasicQueryExplanation;
+  subQueryRight: BasicQueryExplanation;
+}
+
+function parseQueryPlanResult(queryPlanResult: string): BasicQueryExplanation {
   if (!queryPlanResult) {
     return {
       query: null,
@@ -70,7 +80,7 @@ function parseQueryPlanResult(queryPlanResult: string) {
   };
 }
 
-export function parseQueryPlan(raw: string): any {
+export function parseQueryPlan(raw: string): BasicQueryExplanation | SemiJoinQueryExplanation | string {
   let plan: string = raw;
   plan = plan.replace(/\n/g, '');
 
@@ -92,7 +102,7 @@ export function parseQueryPlan(raw: string): any {
       return {
         mainQuery: parseQueryPlanResult(queryArgs.substring(0, keysArgumentIdx)),
         subQueryRight: parseQueryPlan(queryArgs.substring(queryArgs.indexOf(queryRelFnStart)))
-      };
+      } as SemiJoinQueryExplanation;
     }
   } else {
     return plan;
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index 2a7af4a054d4..a60cc3eaaa94 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -23,12 +23,13 @@ import ReactTable from "react-table";
 import { SqlControl } from '../components/sql-control';
 import { QueryPlanDialog } from "../dialogs/query-plan-dialog";
 import {
+  BasicQueryExplanation,
   decodeRune,
   HeaderRows,
   localStorageGet, LocalStorageKeys,
   localStorageSet, parseQueryPlan,
   queryDruidRune,
-  queryDruidSql, QueryManager
+  queryDruidSql, QueryManager, SemiJoinQueryExplanation
 } from '../utils';
 
 import "./sql-view.scss";
@@ -42,7 +43,7 @@ export interface SqlViewState {
   result: HeaderRows | null;
   error: string | null;
   explainDialogOpen: boolean;
-  explainResult: any;
+  explainResult: BasicQueryExplanation | SemiJoinQueryExplanation | string | null;
   loadingExplain: boolean;
   explainError: Error | null;
 }
@@ -102,7 +103,7 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
           query: explainQuery,
           resultFormat: "object"
         });
-        const data = parseQueryPlan(result[0]["PLAN"]);
+        const data: BasicQueryExplanation | SemiJoinQueryExplanation | string = parseQueryPlan(result[0]["PLAN"]);
         return data;
       },
       onStateChange: ({ result, loading, error }) => {

From 81f01a76adf67234ee818a8a17e7b5c5611d0a41 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 4 Apr 2019 16:34:59 -0700
Subject: [PATCH 7/7] Add type for query-plan-dialog

---
 web-console/src/dialogs/query-plan-dialog.tsx | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/web-console/src/dialogs/query-plan-dialog.tsx b/web-console/src/dialogs/query-plan-dialog.tsx
index 16af6051f13e..6db4b7c08591 100644
--- a/web-console/src/dialogs/query-plan-dialog.tsx
+++ b/web-console/src/dialogs/query-plan-dialog.tsx
@@ -19,10 +19,12 @@
 import { Button, Classes, Dialog, FormGroup, InputGroup, TextArea } from "@blueprintjs/core";
 import * as React from "react";
 
+import { BasicQueryExplanation, SemiJoinQueryExplanation } from "../utils";
+
 import "./query-plan-dialog.scss";
 
 export interface QueryPlanDialogProps extends React.Props<any> {
-  explainResult: any;
+  explainResult: BasicQueryExplanation | SemiJoinQueryExplanation | string | null;
   explainError: Error | null;
   onClose: () => void;
 }
@@ -47,14 +49,15 @@ export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, Query
       content = <div>{explainError.message}</div>;
     } else if (explainResult == null) {
       content = <div/>;
-    } else if (explainResult.query) {
+    } else if ((explainResult as BasicQueryExplanation).query) {
 
       let signature: JSX.Element | null = null;
-      if (explainResult.signature) {
+      if ((explainResult as BasicQueryExplanation).signature) {
+        const signatureContent = (explainResult as BasicQueryExplanation).signature || "";
         signature = <FormGroup
           label={"Signature"}
         >
-          <InputGroup defaultValue={explainResult.signature} readOnly/>
+          <InputGroup defaultValue={signatureContent} readOnly/>
         </FormGroup>;
       }
 
@@ -64,27 +67,29 @@ export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, Query
         >
           <TextArea
             readOnly
-            value={JSON.stringify(explainResult.query[0], undefined, 2)}
+            value={JSON.stringify((explainResult as BasicQueryExplanation).query[0], undefined, 2)}
           />
         </FormGroup>
         {signature}
       </div>;
-    } else if (explainResult.mainQuery && explainResult.subQueryRight) {
+    } else if ((explainResult as SemiJoinQueryExplanation).mainQuery && (explainResult as SemiJoinQueryExplanation).subQueryRight) {
 
       let mainSignature: JSX.Element | null = null;
       let subSignature: JSX.Element | null = null;
-      if (explainResult.mainQuery.signature) {
+      if ((explainResult as SemiJoinQueryExplanation).mainQuery.signature) {
+        const signatureContent = (explainResult as SemiJoinQueryExplanation).mainQuery.signature || "";
         mainSignature = <FormGroup
           label={"Signature"}
         >
-          <InputGroup defaultValue={explainResult.mainQuery.signature} readOnly/>
+          <InputGroup defaultValue={signatureContent} readOnly/>
         </FormGroup>;
       }
-      if (explainResult.subQueryRight.signature) {
+      if ((explainResult as SemiJoinQueryExplanation).subQueryRight.signature) {
+        const signatureContent = (explainResult as SemiJoinQueryExplanation).subQueryRight.signature || "";
         subSignature = <FormGroup
           label={"Signature"}
         >
-          <InputGroup defaultValue={explainResult.subQueryRight.signature} readOnly/>
+          <InputGroup defaultValue={signatureContent} readOnly/>
         </FormGroup>;
       }
 
@@ -94,7 +99,7 @@ export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, Query
         >
           <TextArea
             readOnly
-            value={JSON.stringify(explainResult.mainQuery.query, undefined, 2)}
+            value={JSON.stringify((explainResult as SemiJoinQueryExplanation).mainQuery.query, undefined, 2)}
           />
         </FormGroup>
         {mainSignature}
@@ -103,7 +108,7 @@ export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, Query
         >
           <TextArea
             readOnly
-            value={JSON.stringify(explainResult.subQueryRight.query, undefined, 2)}
+            value={JSON.stringify((explainResult as SemiJoinQueryExplanation).subQueryRight.query, undefined, 2)}
           />
         </FormGroup>
         {subSignature}