From 3dbc245ec1a367d4c8dc5cf8aa0afcbdb61e2b1f Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 11 Jun 2021 14:16:36 -0700
Subject: [PATCH 1/8] improve hotkeys

---
 .../src/druid-models/transform-spec.tsx       |  1 +
 .../query-view/run-button/run-button.tsx      | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/web-console/src/druid-models/transform-spec.tsx b/web-console/src/druid-models/transform-spec.tsx
index 18ecee09d4cb..2e84eccf1329 100644
--- a/web-console/src/druid-models/transform-spec.tsx
+++ b/web-console/src/druid-models/transform-spec.tsx
@@ -77,6 +77,7 @@ export function getTimestampExpressionFields(transforms: Transform[]): Field<Tra
         `timestamp_parse(concat("date", ' ', "time"))`,
         `timestamp_parse(concat("date", ' ', "time"), 'M/d/yyyy H:mm:ss')`,
         `timestamp_parse(concat("year", '-', "month", '-', "day"))`,
+        `timestamp_parse("west_coast_time", 'yyyy-MM-dd\\'T\\'HH:mm:ss.SSS', 'America/Los_Angeles')`,
         `timestamp_parse("local_time", 'yyyy-MM-dd HH:mm:ss', "timezone")`,
       ],
       info: (
diff --git a/web-console/src/views/query-view/run-button/run-button.tsx b/web-console/src/views/query-view/run-button/run-button.tsx
index bdf1ba4f0233..80b3ef8b819f 100644
--- a/web-console/src/views/query-view/run-button/run-button.tsx
+++ b/web-console/src/views/query-view/run-button/run-button.tsx
@@ -127,7 +127,7 @@ const RunButtonExtraMenu = (props: RunButtonProps) => {
 };
 
 export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
-  const { runeMode, onRun, loading } = props;
+  const { runeMode, onRun, loading, onExplain } = props;
 
   const handleRun = React.useCallback(() => {
     if (!onRun) return;
@@ -139,12 +139,29 @@ export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
       {
         allowInInput: true,
         global: true,
-        combo: 'ctrl + enter',
+        group: 'Query',
+        combo: 'mod + enter',
         label: 'Runs the current query',
         onKeyDown: handleRun,
       },
+      {
+        allowInInput: true,
+        global: true,
+        group: 'Query',
+        combo: 'mod + e',
+        label: 'Explain the current query',
+        onKeyDown: onExplain,
+      },
+      {
+        allowInInput: true,
+        global: true,
+        group: 'X-Legacy', // This is prefixed with X so it appears in the bottom of the list
+        combo: 'ctrl + enter',
+        label: 'Runs the current query (old shortcut)',
+        onKeyDown: handleRun,
+      },
     ];
-  }, [handleRun]);
+  }, [handleRun, onExplain]);
 
   useHotkeys(hotkeys);
 

From 5e933f2c0976d6808a0647fa5aa04094fbcfd9fb Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 11 Jun 2021 14:19:31 -0700
Subject: [PATCH 2/8] fix test name

---
 ...history.spec.tsx.snap => query-history-dialog.spec.tsx.snap} | 2 +-
 ...uery-plan-history.spec.tsx => query-history-dialog.spec.tsx} | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename web-console/src/dialogs/query-history-dialog/__snapshots__/{query-plan-history.spec.tsx.snap => query-history-dialog.spec.tsx.snap} (97%)
 rename web-console/src/dialogs/query-history-dialog/{query-plan-history.spec.tsx => query-history-dialog.spec.tsx} (96%)

diff --git a/web-console/src/dialogs/query-history-dialog/__snapshots__/query-plan-history.spec.tsx.snap b/web-console/src/dialogs/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
similarity index 97%
rename from web-console/src/dialogs/query-history-dialog/__snapshots__/query-plan-history.spec.tsx.snap
rename to web-console/src/dialogs/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
index 25c8a6bae504..fcfa24262597 100644
--- a/web-console/src/dialogs/query-history-dialog/__snapshots__/query-plan-history.spec.tsx.snap
+++ b/web-console/src/dialogs/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`query plan dialog matches snapshot 1`] = `
+exports[`QueryHistoryDialog matches snapshot 1`] = `
 <div
   class="bp3-portal"
 >
diff --git a/web-console/src/dialogs/query-history-dialog/query-plan-history.spec.tsx b/web-console/src/dialogs/query-history-dialog/query-history-dialog.spec.tsx
similarity index 96%
rename from web-console/src/dialogs/query-history-dialog/query-plan-history.spec.tsx
rename to web-console/src/dialogs/query-history-dialog/query-history-dialog.spec.tsx
index d164c3e01718..e5cd42d74d1b 100644
--- a/web-console/src/dialogs/query-history-dialog/query-plan-history.spec.tsx
+++ b/web-console/src/dialogs/query-history-dialog/query-history-dialog.spec.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 
 import { QueryHistoryDialog } from './query-history-dialog';
 
-describe('query plan dialog', () => {
+describe('QueryHistoryDialog', () => {
   it('matches snapshot', () => {
     const queryPlanDialog = (
       <QueryHistoryDialog setQueryString={() => null} queryRecords={[]} onClose={() => {}} />

From f98e0b10a0e616dac55f3f04a5022a3639609307 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 11 Jun 2021 15:49:18 -0700
Subject: [PATCH 3/8] refactor explain dialog

---
 web-console/src/dialogs/index.ts              |   1 -
 .../query-plan-dialog/query-plan-dialog.tsx   | 151 --------------
 web-console/src/utils/druid-query.spec.ts     |  16 +-
 web-console/src/utils/druid-query.ts          |  12 ++
 .../explain-dialog.spec.tsx.snap}             |   4 +-
 .../explain-dialog/explain-dialog.scss}       |   6 +-
 .../explain-dialog/explain-dialog.spec.tsx}   |  11 +-
 .../explain-dialog/explain-dialog.tsx         | 197 ++++++++++++++++++
 .../src/views/query-view/query-view.spec.tsx  |   8 -
 .../src/views/query-view/query-view.tsx       | 108 ++--------
 10 files changed, 259 insertions(+), 255 deletions(-)
 delete mode 100644 web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
 rename web-console/src/{dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap => views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap} (95%)
 rename web-console/src/{dialogs/query-plan-dialog/query-plan-dialog.scss => views/query-view/explain-dialog/explain-dialog.scss} (94%)
 rename web-console/src/{dialogs/query-plan-dialog/query-plan-dialog.spec.tsx => views/query-view/explain-dialog/explain-dialog.spec.tsx} (82%)
 create mode 100644 web-console/src/views/query-view/explain-dialog/explain-dialog.tsx

diff --git a/web-console/src/dialogs/index.ts b/web-console/src/dialogs/index.ts
index efd89d708453..7e82e80e3e55 100644
--- a/web-console/src/dialogs/index.ts
+++ b/web-console/src/dialogs/index.ts
@@ -24,7 +24,6 @@ export * from './doctor-dialog/doctor-dialog';
 export * from './history-dialog/history-dialog';
 export * from './lookup-edit-dialog/lookup-edit-dialog';
 export * from './overlord-dynamic-config-dialog/overlord-dynamic-config-dialog';
-export * from './query-plan-dialog/query-plan-dialog';
 export * from './retention-dialog/retention-dialog';
 export * from './snitch-dialog/snitch-dialog';
 export * from './spec-dialog/spec-dialog';
diff --git a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
deleted file mode 100644
index 7a01dd1db08a..000000000000
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * 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,
-  Intent,
-  TextArea,
-} from '@blueprintjs/core';
-import * as JSONBig from 'json-bigint-native';
-import React from 'react';
-
-import { BasicQueryExplanation, SemiJoinQueryExplanation } from '../../utils';
-
-import './query-plan-dialog.scss';
-
-export interface QueryPlanDialogProps {
-  explainResult?: BasicQueryExplanation | SemiJoinQueryExplanation | string;
-  explainError?: Error;
-  onClose: () => void;
-  setQueryString: (queryString: string) => void;
-}
-
-export const QueryPlanDialog = React.memo(function QueryPlanDialog(props: QueryPlanDialogProps) {
-  const { explainResult, explainError, onClose, setQueryString } = props;
-
-  let content: JSX.Element;
-  let queryString: string | undefined;
-
-  if (explainError) {
-    content = <div>{explainError.message}</div>;
-  } else if (!explainResult) {
-    content = <div />;
-  } else if ((explainResult as BasicQueryExplanation).query) {
-    let signature: JSX.Element | undefined;
-    if ((explainResult as BasicQueryExplanation).signature) {
-      const signatureContent = (explainResult as BasicQueryExplanation).signature || '';
-      signature = (
-        <FormGroup label="Signature">
-          <InputGroup defaultValue={signatureContent} readOnly />
-        </FormGroup>
-      );
-    }
-
-    queryString = JSONBig.stringify(
-      (explainResult as BasicQueryExplanation).query[0],
-      undefined,
-      2,
-    );
-    content = (
-      <div className="one-query">
-        <FormGroup label="Query">
-          <TextArea readOnly value={queryString} />
-        </FormGroup>
-        {signature}
-      </div>
-    );
-  } else if (
-    (explainResult as SemiJoinQueryExplanation).mainQuery &&
-    (explainResult as SemiJoinQueryExplanation).subQueryRight
-  ) {
-    let mainSignature: JSX.Element | undefined;
-    let subSignature: JSX.Element | undefined;
-    if ((explainResult as SemiJoinQueryExplanation).mainQuery.signature) {
-      const signatureContent =
-        (explainResult as SemiJoinQueryExplanation).mainQuery.signature || '';
-      mainSignature = (
-        <FormGroup label="Signature">
-          <InputGroup defaultValue={signatureContent} readOnly />
-        </FormGroup>
-      );
-    }
-    if ((explainResult as SemiJoinQueryExplanation).subQueryRight.signature) {
-      const signatureContent =
-        (explainResult as SemiJoinQueryExplanation).subQueryRight.signature || '';
-      subSignature = (
-        <FormGroup label="Signature">
-          <InputGroup defaultValue={signatureContent} readOnly />
-        </FormGroup>
-      );
-    }
-
-    content = (
-      <div className="two-queries">
-        <FormGroup label="Main query">
-          <TextArea
-            readOnly
-            value={JSONBig.stringify(
-              (explainResult as SemiJoinQueryExplanation).mainQuery.query,
-              undefined,
-              2,
-            )}
-          />
-        </FormGroup>
-        {mainSignature}
-        <FormGroup label="Sub query">
-          <TextArea
-            readOnly
-            value={JSONBig.stringify(
-              (explainResult as SemiJoinQueryExplanation).subQueryRight.query,
-              undefined,
-              2,
-            )}
-          />
-        </FormGroup>
-        {subSignature}
-      </div>
-    );
-  } else {
-    content = <div className="generic-result">{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} />
-          {queryString && (
-            <Button
-              text="Open query"
-              intent={Intent.PRIMARY}
-              onClick={() => {
-                if (queryString) setQueryString(queryString);
-                onClose();
-              }}
-            />
-          )}
-        </div>
-      </div>
-    </Dialog>
-  );
-});
diff --git a/web-console/src/utils/druid-query.spec.ts b/web-console/src/utils/druid-query.spec.ts
index 5b3f51936740..2a6835da92db 100644
--- a/web-console/src/utils/druid-query.spec.ts
+++ b/web-console/src/utils/druid-query.spec.ts
@@ -18,7 +18,13 @@
 
 import { sane } from 'druid-query-toolkit/build/test-utils';
 
-import { DruidError, getDruidErrorMessage, parseHtmlError, parseQueryPlan } from './druid-query';
+import {
+  DruidError,
+  getDruidErrorMessage,
+  parseHtmlError,
+  parseQueryPlan,
+  trimSemicolon,
+} from './druid-query';
 
 describe('DruidQuery', () => {
   describe('DruidError.parsePosition', () => {
@@ -226,4 +232,12 @@ describe('DruidQuery', () => {
       expect(parseQueryPlan('start')).toMatchInlineSnapshot(`"start"`);
     });
   });
+
+  describe('.trimSemicolon', () => {
+    it('works', () => {
+      expect(trimSemicolon('SELECT * FROM tbl;')).toEqual('SELECT * FROM tbl');
+      expect(trimSemicolon('SELECT * FROM tbl;   ')).toEqual('SELECT * FROM tbl   ');
+      expect(trimSemicolon('SELECT * FROM tbl; --hello  ')).toEqual('SELECT * FROM tbl --hello  ');
+    });
+  });
 });
diff --git a/web-console/src/utils/druid-query.ts b/web-console/src/utils/druid-query.ts
index fd6ec42ecfd1..e3e958b0296b 100644
--- a/web-console/src/utils/druid-query.ts
+++ b/web-console/src/utils/druid-query.ts
@@ -21,10 +21,17 @@ import axios, { AxiosResponse } from 'axios';
 import { Api } from '../singletons';
 
 import { assemble } from './general';
+import { QueryContext } from './query-context';
 import { RowColumn } from './query-cursor';
 
 const CANCELED_MESSAGE = 'Query canceled by user.';
 
+export interface QueryWithContext {
+  queryString: string;
+  queryContext: QueryContext;
+  wrapQueryLimit: number | undefined;
+}
+
 export interface DruidErrorResponse {
   error?: string;
   errorMessage?: string;
@@ -357,3 +364,8 @@ export function parseQueryPlan(
 
   return parseQueryPlanResult(queryArgs);
 }
+
+export function trimSemicolon(query: string): string {
+  // Trims out a trailing semicolon while preserving space (https://bit.ly/1n1yfkJ)
+  return query.replace(/;+((?:\s*--[^\n]*)?\s*)$/, '$1');
+}
diff --git a/web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap b/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
similarity index 95%
rename from web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap
rename to web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
index e5e442ef9359..d7437cff292d 100644
--- a/web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap
+++ b/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`query plan dialog matches snapshot 1`] = `
+exports[`ExplainDialog matches snapshot 1`] = `
 <div
   class="bp3-portal"
 >
@@ -16,7 +16,7 @@ exports[`query plan dialog matches snapshot 1`] = `
       tabindex="0"
     >
       <div
-        class="bp3-dialog query-plan-dialog"
+        class="bp3-dialog explain-dialog"
       >
         <div
           class="bp3-dialog-header"
diff --git a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.scss b/web-console/src/views/query-view/explain-dialog/explain-dialog.scss
similarity index 94%
rename from web-console/src/dialogs/query-plan-dialog/query-plan-dialog.scss
rename to web-console/src/views/query-view/explain-dialog/explain-dialog.scss
index e7797a266e6c..de1a088d1cce 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.scss
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.scss
@@ -16,11 +16,15 @@
  * limitations under the License.
  */
 
-.query-plan-dialog {
+.explain-dialog {
   &.bp3-dialog {
     width: 600px;
   }
 
+  .bp3-dialog-body {
+    min-height: 70vh;
+  }
+
   textarea {
     width: 100%;
   }
diff --git a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx b/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
similarity index 82%
rename from web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
rename to web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
index 92b8a0f05c80..f2173cecb1f0 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
@@ -19,15 +19,14 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { QueryPlanDialog } from './query-plan-dialog';
+import { ExplainDialog } from './explain-dialog';
 
-describe('query plan dialog', () => {
+describe('ExplainDialog', () => {
   it('matches snapshot', () => {
     const queryPlanDialog = (
-      <QueryPlanDialog
-        setQueryString={() => null}
-        explainResult="test"
-        explainError={undefined}
+      <ExplainDialog
+        setQueryString={() => {}}
+        queryWithContext={{ queryString: 'test', queryContext: {}, wrapQueryLimit: undefined }}
         onClose={() => {}}
       />
     );
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx b/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx
new file mode 100644
index 000000000000..db4713de784b
--- /dev/null
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx
@@ -0,0 +1,197 @@
+/*
+ * 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,
+  Intent,
+  TextArea,
+} from '@blueprintjs/core';
+import * as JSONBig from 'json-bigint-native';
+import React from 'react';
+
+import { Loader } from '../../../components';
+import { useQueryManager } from '../../../hooks';
+import {
+  BasicQueryExplanation,
+  getDruidErrorMessage,
+  parseQueryPlan,
+  queryDruidSql,
+  QueryWithContext,
+  SemiJoinQueryExplanation,
+  trimSemicolon,
+} from '../../../utils';
+import { isEmptyContext } from '../../../utils/query-context';
+
+import './explain-dialog.scss';
+
+function isExplainQuery(query: string): boolean {
+  return /EXPLAIN\sPLAN\sFOR/i.test(query);
+}
+
+function wrapInExplainIfNeeded(query: string): string {
+  query = trimSemicolon(query);
+  if (isExplainQuery(query)) return query;
+  return `EXPLAIN PLAN FOR (${query}\n)`;
+}
+
+export interface ExplainDialogProps {
+  queryWithContext: QueryWithContext;
+  mandatoryQueryContext?: Record<string, any>;
+  onClose: () => void;
+  setQueryString: (queryString: string) => void;
+}
+
+export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDialogProps) {
+  const { queryWithContext, onClose, setQueryString, mandatoryQueryContext } = props;
+
+  const [explainState] = useQueryManager<
+    QueryWithContext,
+    BasicQueryExplanation | SemiJoinQueryExplanation | string
+  >({
+    processQuery: async (queryWithContext: QueryWithContext) => {
+      const { queryString, queryContext, wrapQueryLimit } = queryWithContext;
+
+      let context: Record<string, any> | undefined;
+      if (!isEmptyContext(queryContext) || wrapQueryLimit || mandatoryQueryContext) {
+        context = { ...queryContext, ...(mandatoryQueryContext || {}) };
+        if (typeof wrapQueryLimit !== 'undefined') {
+          context.sqlOuterLimit = wrapQueryLimit + 1;
+        }
+      }
+
+      let result: any[] | undefined;
+      try {
+        result = await queryDruidSql({
+          query: wrapInExplainIfNeeded(queryString),
+          context,
+        });
+      } catch (e) {
+        throw new Error(getDruidErrorMessage(e));
+      }
+
+      return parseQueryPlan(result[0]['PLAN']);
+    },
+    initQuery: queryWithContext,
+  });
+
+  let content: JSX.Element;
+  let queryString: string | undefined;
+
+  const { loading, error: explainError, data: explainResult } = explainState;
+  if (loading) {
+    content = <Loader />;
+  } else if (explainError) {
+    content = <div>{explainError.message}</div>;
+  } else if (!explainResult) {
+    content = <div />;
+  } else if ((explainResult as BasicQueryExplanation).query) {
+    queryString = JSONBig.stringify(
+      (explainResult as BasicQueryExplanation).query[0],
+      undefined,
+      2,
+    );
+    content = (
+      <div className="one-query">
+        <FormGroup label="Query">
+          <TextArea readOnly value={queryString} />
+        </FormGroup>
+        {(explainResult as BasicQueryExplanation).signature && (
+          <FormGroup label="Signature">
+            <InputGroup
+              defaultValue={(explainResult as BasicQueryExplanation).signature || ''}
+              readOnly
+            />
+          </FormGroup>
+        )}
+      </div>
+    );
+  } else if (
+    (explainResult as SemiJoinQueryExplanation).mainQuery &&
+    (explainResult as SemiJoinQueryExplanation).subQueryRight
+  ) {
+    content = (
+      <div className="two-queries">
+        <FormGroup label="Main query">
+          <TextArea
+            readOnly
+            value={JSONBig.stringify(
+              (explainResult as SemiJoinQueryExplanation).mainQuery.query,
+              undefined,
+              2,
+            )}
+          />
+        </FormGroup>
+        {(explainResult as SemiJoinQueryExplanation).mainQuery.signature && (
+          <FormGroup label="Signature">
+            <InputGroup
+              defaultValue={(explainResult as SemiJoinQueryExplanation).mainQuery.signature || ''}
+              readOnly
+            />
+          </FormGroup>
+        )}
+        <FormGroup label="Sub query">
+          <TextArea
+            readOnly
+            value={JSONBig.stringify(
+              (explainResult as SemiJoinQueryExplanation).subQueryRight.query,
+              undefined,
+              2,
+            )}
+          />
+        </FormGroup>
+        {(explainResult as SemiJoinQueryExplanation).subQueryRight.signature && (
+          <FormGroup label="Signature">
+            <InputGroup
+              defaultValue={
+                (explainResult as SemiJoinQueryExplanation).subQueryRight.signature || ''
+              }
+              readOnly
+            />
+          </FormGroup>
+        )}
+      </div>
+    );
+  } else {
+    content = <div className="generic-result">{explainResult}</div>;
+  }
+
+  return (
+    <Dialog className="explain-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} />
+          {queryString && (
+            <Button
+              text="Open query"
+              intent={Intent.PRIMARY}
+              onClick={() => {
+                if (queryString) setQueryString(queryString);
+                onClose();
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/query-view/query-view.spec.tsx b/web-console/src/views/query-view/query-view.spec.tsx
index 4e331320d353..058280c09d02 100644
--- a/web-console/src/views/query-view/query-view.spec.tsx
+++ b/web-console/src/views/query-view/query-view.spec.tsx
@@ -32,14 +32,6 @@ describe('QueryView', () => {
     expect(sqlView).toMatchSnapshot();
   });
 
-  it('.trimSemicolon', () => {
-    expect(QueryView.trimSemicolon('SELECT * FROM tbl;')).toEqual('SELECT * FROM tbl');
-    expect(QueryView.trimSemicolon('SELECT * FROM tbl;   ')).toEqual('SELECT * FROM tbl   ');
-    expect(QueryView.trimSemicolon('SELECT * FROM tbl; --hello  ')).toEqual(
-      'SELECT * FROM tbl --hello  ',
-    );
-  });
-
   it('.formatStr', () => {
     expect(QueryView.formatStr(null, 'csv')).toEqual('"null"');
     expect(QueryView.formatStr('hello\nworld', 'csv')).toEqual('"hello world"');
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
index 3612a269a41b..8cc01c91b877 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -26,34 +26,31 @@ import React, { RefObject } from 'react';
 import SplitterLayout from 'react-splitter-layout';
 
 import { Loader } from '../../components';
-import { QueryPlanDialog } from '../../dialogs';
 import { EditContextDialog } from '../../dialogs/edit-context-dialog/edit-context-dialog';
 import { QueryHistoryDialog } from '../../dialogs/query-history-dialog/query-history-dialog';
 import { Api, AppToaster } from '../../singletons';
 import {
-  BasicQueryExplanation,
   ColumnMetadata,
   downloadFile,
   DruidError,
   findEmptyLiteralPosition,
-  getDruidErrorMessage,
   localStorageGet,
   localStorageGetJson,
   LocalStorageKeys,
   localStorageSet,
   localStorageSetJson,
-  parseQueryPlan,
   queryDruidSql,
   QueryManager,
   QueryState,
+  QueryWithContext,
   RowColumn,
-  SemiJoinQueryExplanation,
   stringifyValue,
 } from '../../utils';
 import { isEmptyContext, QueryContext } from '../../utils/query-context';
 import { QueryRecord, QueryRecordUtil } from '../../utils/query-history';
 
 import { ColumnTree } from './column-tree/column-tree';
+import { ExplainDialog } from './explain-dialog/explain-dialog';
 import {
   LIVE_QUERY_MODES,
   LiveQueryMode,
@@ -76,12 +73,6 @@ const parser = memoizeOne((sql: string): SqlQuery | undefined => {
   }
 });
 
-interface QueryWithContext {
-  queryString: string;
-  queryContext: QueryContext;
-  wrapQueryLimit: number | undefined;
-}
-
 export interface QueryViewProps {
   initQuery: string | undefined;
   defaultQueryContext?: Record<string, any>;
@@ -99,8 +90,7 @@ export interface QueryViewState {
 
   queryResultState: QueryState<QueryResult, DruidError>;
 
-  explainDialogOpen: boolean;
-  explainResultState: QueryState<BasicQueryExplanation | SemiJoinQueryExplanation | string>;
+  explainDialogQuery?: QueryWithContext;
 
   defaultSchema?: string;
   defaultTable?: string;
@@ -111,25 +101,10 @@ export interface QueryViewState {
 }
 
 export class QueryView extends React.PureComponent<QueryViewProps, QueryViewState> {
-  static trimSemicolon(query: string): string {
-    // Trims out a trailing semicolon while preserving space (https://bit.ly/1n1yfkJ)
-    return query.replace(/;+((?:\s*--[^\n]*)?\s*)$/, '$1');
-  }
-
   static isEmptyQuery(query: string): boolean {
     return query.trim() === '';
   }
 
-  static isExplainQuery(query: string): boolean {
-    return /EXPLAIN\sPLAN\sFOR/i.test(query);
-  }
-
-  static wrapInExplainIfNeeded(query: string): string {
-    query = QueryView.trimSemicolon(query);
-    if (QueryView.isExplainQuery(query)) return query;
-    return `EXPLAIN PLAN FOR (${query}\n)`;
-  }
-
   static isJsonLike(queryString: string): boolean {
     return queryString.trim().startsWith('{');
   }
@@ -158,10 +133,6 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
 
   private readonly metadataQueryManager: QueryManager<null, ColumnMetadata[]>;
   private readonly queryManager: QueryManager<QueryWithContext, QueryResult>;
-  private readonly explainQueryManager: QueryManager<
-    QueryWithContext,
-    BasicQueryExplanation | SemiJoinQueryExplanation | string
-  >;
 
   private readonly queryInputRef: RefObject<QueryInput>;
 
@@ -196,9 +167,6 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
 
       queryResultState: QueryState.INIT,
 
-      explainDialogOpen: false,
-      explainResultState: QueryState.INIT,
-
       editContextDialogOpen: false,
       historyDialogOpen: false,
       queryHistory,
@@ -260,37 +228,6 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
         });
       },
     });
-
-    this.explainQueryManager = new QueryManager({
-      processQuery: async (queryWithContext: QueryWithContext) => {
-        const { queryString, queryContext, wrapQueryLimit } = queryWithContext;
-
-        let context: Record<string, any> | undefined;
-        if (!isEmptyContext(queryContext) || wrapQueryLimit || mandatoryQueryContext) {
-          context = { ...queryContext, ...(mandatoryQueryContext || {}) };
-          if (typeof wrapQueryLimit !== 'undefined') {
-            context.sqlOuterLimit = wrapQueryLimit + 1;
-          }
-        }
-
-        let result: QueryResult | undefined;
-        try {
-          result = await queryRunner.runQuery({
-            query: QueryView.wrapInExplainIfNeeded(queryString),
-            extraQueryContext: context,
-          });
-        } catch (e) {
-          throw new Error(getDruidErrorMessage(e));
-        }
-
-        return parseQueryPlan(result.rows[0][0]);
-      },
-      onStateChange: explainResultState => {
-        this.setState({
-          explainResultState,
-        });
-      },
-    });
   }
 
   componentDidMount(): void {
@@ -307,10 +244,9 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
   componentWillUnmount(): void {
     this.metadataQueryManager.terminate();
     this.queryManager.terminate();
-    this.explainQueryManager.terminate();
   }
 
-  prettyPrintJson(): void {
+  private prettyPrintJson(): void {
     this.setState(prevState => {
       let parsed: any;
       try {
@@ -367,21 +303,22 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     );
   };
 
-  renderExplainDialog() {
-    const { explainDialogOpen, explainResultState } = this.state;
-    if (explainResultState.loading || !explainDialogOpen) return;
+  private renderExplainDialog() {
+    const { mandatoryQueryContext } = this.props;
+    const { explainDialogQuery } = this.state;
+    if (!explainDialogQuery) return;
 
     return (
-      <QueryPlanDialog
-        explainResult={explainResultState.data}
-        explainError={explainResultState.error}
+      <ExplainDialog
+        queryWithContext={explainDialogQuery}
+        mandatoryQueryContext={mandatoryQueryContext}
         setQueryString={this.handleQueryStringChange}
-        onClose={() => this.setState({ explainDialogOpen: false })}
+        onClose={() => this.setState({ explainDialogQuery: undefined })}
       />
     );
   }
 
-  renderHistoryDialog() {
+  private renderHistoryDialog() {
     const { historyDialogOpen, queryHistory } = this.state;
     if (!historyDialogOpen) return;
 
@@ -397,7 +334,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     );
   }
 
-  renderEditContextDialog() {
+  private renderEditContextDialog() {
     const { editContextDialogOpen, queryContext } = this.state;
     if (!editContextDialogOpen) return;
 
@@ -412,7 +349,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     );
   }
 
-  renderLiveQueryModeSelector() {
+  private renderLiveQueryModeSelector() {
     const { liveQueryMode, queryString } = this.state;
     if (QueryView.isJsonLike(queryString)) return;
 
@@ -425,7 +362,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     );
   }
 
-  renderWrapQueryLimitSelector() {
+  private renderWrapQueryLimitSelector() {
     const { wrapQueryLimit, queryString } = this.state;
     if (QueryView.isJsonLike(queryString)) return;
 
@@ -444,7 +381,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     );
   }
 
-  renderMainArea() {
+  private renderMainArea() {
     const { queryString, queryContext, queryResultState, columnMetadataState } = this.state;
     const emptyQuery = QueryView.isEmptyQuery(queryString);
     const queryResult = queryResultState.data;
@@ -636,11 +573,12 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
   private readonly handleExplain = () => {
     const { queryString, queryContext, wrapQueryLimit } = this.state;
 
-    this.setState({ explainDialogOpen: true });
-    this.explainQueryManager.runQuery({
-      queryString,
-      queryContext,
-      wrapQueryLimit,
+    this.setState({
+      explainDialogQuery: {
+        queryString,
+        queryContext,
+        wrapQueryLimit,
+      },
     });
   };
 

From b022f4c641d51af5fbc51eb8212ed0bb0714231b Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 11 Jun 2021 16:00:42 -0700
Subject: [PATCH 4/8] explain tests

---
 .../explain-dialog.spec.tsx.snap              | 241 ++++++++++++------
 .../explain-dialog/explain-dialog.spec.tsx    |  50 +++-
 2 files changed, 212 insertions(+), 79 deletions(-)

diff --git a/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap b/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
index d7437cff292d..ba424eb8d346 100644
--- a/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
+++ b/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
@@ -1,86 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExplainDialog matches snapshot 1`] = `
-<div
-  class="bp3-portal"
+exports[`ExplainDialog matches snapshot on error 1`] = `
+<Blueprint3.Dialog
+  canOutsideClickClose={true}
+  className="explain-dialog"
+  isOpen={true}
+  onClose={[Function]}
+  title="Query plan"
 >
   <div
-    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+    className="bp3-dialog-body"
+  >
+    <div>
+      test error
+    </div>
+  </div>
+  <div
+    className="bp3-dialog-footer"
   >
     <div
-      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
-      tabindex="0"
-    />
+      className="bp3-dialog-footer-actions"
+    >
+      <Blueprint3.Button
+        onClick={[Function]}
+        text="Close"
+      />
+    </div>
+  </div>
+</Blueprint3.Dialog>
+`;
+
+exports[`ExplainDialog matches snapshot on init 1`] = `
+<Blueprint3.Dialog
+  canOutsideClickClose={true}
+  className="explain-dialog"
+  isOpen={true}
+  onClose={[Function]}
+  title="Query plan"
+>
+  <div
+    className="bp3-dialog-body"
+  >
+    <div />
+  </div>
+  <div
+    className="bp3-dialog-footer"
+  >
     <div
-      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
-      tabindex="0"
+      className="bp3-dialog-footer-actions"
     >
-      <div
-        class="bp3-dialog explain-dialog"
+      <Blueprint3.Button
+        onClick={[Function]}
+        text="Close"
+      />
+    </div>
+  </div>
+</Blueprint3.Dialog>
+`;
+
+exports[`ExplainDialog matches snapshot on loading 1`] = `
+<Blueprint3.Dialog
+  canOutsideClickClose={true}
+  className="explain-dialog"
+  isOpen={true}
+  onClose={[Function]}
+  title="Query plan"
+>
+  <div
+    className="bp3-dialog-body"
+  >
+    <Memo(Loader) />
+  </div>
+  <div
+    className="bp3-dialog-footer"
+  >
+    <div
+      className="bp3-dialog-footer-actions"
+    >
+      <Blueprint3.Button
+        onClick={[Function]}
+        text="Close"
+      />
+    </div>
+  </div>
+</Blueprint3.Dialog>
+`;
+
+exports[`ExplainDialog matches snapshot on some data 1`] = `
+<Blueprint3.Dialog
+  canOutsideClickClose={true}
+  className="explain-dialog"
+  isOpen={true}
+  onClose={[Function]}
+  title="Query plan"
+>
+  <div
+    className="bp3-dialog-body"
+  >
+    <div
+      className="one-query"
+    >
+      <Blueprint3.FormGroup
+        label="Query"
       >
-        <div
-          class="bp3-dialog-header"
-        >
-          <h4
-            class="bp3-heading"
-          >
-            Query plan
-          </h4>
-          <button
-            aria-label="Close"
-            class="bp3-button bp3-minimal bp3-dialog-close-button"
-            type="button"
-          >
-            <span
-              class="bp3-icon bp3-icon-small-cross"
-              icon="small-cross"
-            >
-              <svg
-                data-icon="small-cross"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <desc>
-                  small-cross
-                </desc>
-                <path
-                  d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <div
-          class="bp3-dialog-body"
-        >
-          <div
-            class="generic-result"
-          >
-            test
-          </div>
-        </div>
-        <div
-          class="bp3-dialog-footer"
-        >
-          <div
-            class="bp3-dialog-footer-actions"
-          >
-            <button
-              class="bp3-button"
-              type="button"
-            >
-              <span
-                class="bp3-button-text"
-              >
-                Close
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
+        <Blueprint3.TextArea
+          readOnly={true}
+          value="{
+  \\"queryType\\": \\"topN\\",
+  \\"dataSource\\": {
+    \\"type\\": \\"table\\",
+    \\"name\\": \\"kttm-multi-day\\"
+  },
+  \\"virtualColumns\\": [],
+  \\"dimension\\": {
+    \\"type\\": \\"default\\",
+    \\"dimension\\": \\"browser\\",
+    \\"outputName\\": \\"d0\\",
+    \\"outputType\\": \\"STRING\\"
+  },
+  \\"metric\\": {
+    \\"type\\": \\"numeric\\",
+    \\"metric\\": \\"a0\\"
+  },
+  \\"threshold\\": 101,
+  \\"intervals\\": {
+    \\"type\\": \\"intervals\\",
+    \\"intervals\\": [
+      \\"-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z\\"
+    ]
+  },
+  \\"filter\\": null,
+  \\"granularity\\": {
+    \\"type\\": \\"all\\"
+  },
+  \\"aggregations\\": [
+    {
+      \\"type\\": \\"count\\",
+      \\"name\\": \\"a0\\"
+    }
+  ],
+  \\"postAggregations\\": [],
+  \\"context\\": {
+    \\"sqlOuterLimit\\": 101,
+    \\"sqlQueryId\\": \\"5905fe8d-9a91-41e0-8f3a-d7a8ac21dce6\\"
+  },
+  \\"descending\\": false
+}"
+        />
+      </Blueprint3.FormGroup>
+      <Blueprint3.FormGroup
+        label="Signature"
+      >
+        <Blueprint3.InputGroup
+          defaultValue="[{d0:STRING, a0:LONG}]"
+          readOnly={true}
+        />
+      </Blueprint3.FormGroup>
+    </div>
+  </div>
+  <div
+    className="bp3-dialog-footer"
+  >
+    <div
+      className="bp3-dialog-footer-actions"
+    >
+      <Blueprint3.Button
+        onClick={[Function]}
+        text="Close"
+      />
+      <Blueprint3.Button
+        intent="primary"
+        onClick={[Function]}
+        text="Open query"
+      />
     </div>
   </div>
-</div>
+</Blueprint3.Dialog>
 `;
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx b/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
index f2173cecb1f0..2109e5ed2a05 100644
--- a/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
@@ -16,21 +16,61 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { shallow } from 'enzyme';
 import React from 'react';
 
+import {
+  BasicQueryExplanation,
+  parseQueryPlan,
+  QueryState,
+  SemiJoinQueryExplanation,
+} from '../../../utils';
+
 import { ExplainDialog } from './explain-dialog';
 
+let explainState: QueryState<BasicQueryExplanation | SemiJoinQueryExplanation | string> =
+  QueryState.INIT;
+
+jest.mock('../../../hooks', () => {
+  return {
+    useQueryManager: () => [explainState],
+  };
+});
+
 describe('ExplainDialog', () => {
-  it('matches snapshot', () => {
-    const queryPlanDialog = (
+  function makeExplainDialog() {
+    return (
       <ExplainDialog
         setQueryString={() => {}}
         queryWithContext={{ queryString: 'test', queryContext: {}, wrapQueryLimit: undefined }}
         onClose={() => {}}
       />
     );
-    render(queryPlanDialog);
-    expect(document.body.lastChild).toMatchSnapshot();
+  }
+
+  it('matches snapshot on init', () => {
+    expect(shallow(makeExplainDialog())).toMatchSnapshot();
+  });
+
+  it('matches snapshot on loading', () => {
+    explainState = QueryState.LOADING;
+
+    expect(shallow(makeExplainDialog())).toMatchSnapshot();
+  });
+
+  it('matches snapshot on error', () => {
+    explainState = new QueryState({ error: new Error('test error') });
+
+    expect(shallow(makeExplainDialog())).toMatchSnapshot();
+  });
+
+  it('matches snapshot on some data', () => {
+    explainState = new QueryState({
+      data: parseQueryPlan(
+        `DruidQueryRel(query=[{"queryType":"topN","dataSource":{"type":"table","name":"kttm-multi-day"},"virtualColumns":[],"dimension":{"type":"default","dimension":"browser","outputName":"d0","outputType":"STRING"},"metric":{"type":"numeric","metric":"a0"},"threshold":101,"intervals":{"type":"intervals","intervals":["-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z"]},"filter":null,"granularity":{"type":"all"},"aggregations":[{"type":"count","name":"a0"}],"postAggregations":[],"context":{"sqlOuterLimit":101,"sqlQueryId":"5905fe8d-9a91-41e0-8f3a-d7a8ac21dce6"},"descending":false}], signature=[{d0:STRING, a0:LONG}])`,
+      ),
+    });
+
+    expect(shallow(makeExplainDialog())).toMatchSnapshot();
   });
 });

From e833f80dfe97d720edd68c7ddaa94e11b7ee3dbc Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 11 Jun 2021 21:43:46 -0700
Subject: [PATCH 5/8] small fixes

---
 .../query-view/column-tree/column-tree.tsx      | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/web-console/src/views/query-view/column-tree/column-tree.tsx b/web-console/src/views/query-view/column-tree/column-tree.tsx
index ed09850eff4c..caa3a5d8d64c 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.tsx
+++ b/web-console/src/views/query-view/column-tree/column-tree.tsx
@@ -441,7 +441,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
     };
   }
 
-  renderSchemaSelector() {
+  private renderSchemaSelector() {
     const { columnTree, selectedTreeIndex } = this.state;
     if (!columnTree) return null;
 
@@ -465,11 +465,10 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
 
   private readonly handleSchemaSelectorChange = (e: ChangeEvent<HTMLSelectElement>): void => {
     const { columnTree } = this.state;
+    if (!columnTree) return;
 
     const selectedTreeIndex = Number(e.target.value);
 
-    if (!columnTree) return;
-
     const currentSchemaSubtree =
       columnTree[selectedTreeIndex > -1 ? selectedTreeIndex : 0].childNodes;
 
@@ -481,22 +480,14 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
 
   private readonly handleNodeCollapse = (nodeData: ITreeNode) => {
     nodeData.isExpanded = false;
-    this.bounceState();
+    this.forceUpdate();
   };
 
   private readonly handleNodeExpand = (nodeData: ITreeNode) => {
     nodeData.isExpanded = true;
-    this.bounceState();
+    this.forceUpdate();
   };
 
-  bounceState() {
-    const { columnTree } = this.state;
-    if (!columnTree) return;
-    this.setState(prevState => ({
-      columnTree: prevState.columnTree ? prevState.columnTree.slice() : undefined,
-    }));
-  }
-
   render(): JSX.Element | null {
     const { columnMetadataLoading } = this.props;
     const { currentSchemaSubtree } = this.state;

From c306f44a95334cf2347fc361c47e5ef037179f8e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Sat, 12 Jun 2021 22:57:06 -0700
Subject: [PATCH 6/8] update to popover2

---
 licenses.yaml                                 |  29 ++
 licenses/bin/@popperjs-core.MIT               |  20 ++
 licenses/bin/react-fast-compare.MIT           |  22 ++
 web-console/package-lock.json                 |  40 +++
 web-console/package.json                      |   1 +
 .../components/action-cell/action-cell.tsx    |   7 +-
 .../form-group-with-info.spec.tsx.snap        |  36 +-
 .../form-group-with-info.scss                 |   8 +-
 .../form-group-with-info.tsx                  |   7 +-
 .../__snapshots__/header-bar.spec.tsx.snap    |  18 +-
 .../src/components/header-bar/header-bar.tsx  |  14 +-
 .../interval-input.spec.tsx.snap              |  48 ++-
 .../interval-input/interval-input.tsx         |   7 +-
 .../__snapshots__/more-button.spec.tsx.snap   | 100 +++---
 .../components/more-button/more-button.tsx    |   7 +-
 .../numeric-input-with-default.tsx            |   4 +-
 .../suggestible-input.spec.tsx.snap           |  48 ++-
 .../suggestible-input/suggestible-input.tsx   |   7 +-
 .../table-column-selector.spec.tsx.snap       |  62 ++--
 .../table-column-selector.tsx                 |   7 +-
 .../__snapshots__/timed-button.spec.tsx.snap  |   9 +-
 .../components/timed-button/timed-button.tsx  |  17 +-
 ...tasource-table-action-dialog.spec.tsx.snap |  94 +++--
 .../lookup-table-action-dialog.spec.tsx.snap  |  94 +++--
 .../retention-dialog.spec.tsx.snap            |  48 ++-
 .../segment-table-action-dialog.spec.tsx.snap |  94 +++--
 ...pervisor-table-action-dialog.spec.tsx.snap |  94 +++--
 .../table-action-dialog.tsx                   |   7 +-
 .../task-table-action-dialog.spec.tsx.snap    |  94 +++--
 web-console/src/entry.scss                    |   1 +
 .../views/load-data-view/load-data-view.tsx   |  14 +-
 .../__snapshots__/query-view.spec.tsx.snap    |   8 +-
 .../__snapshots__/column-tree.spec.tsx.snap   |  39 +--
 .../query-view/column-tree/column-tree.scss   |   9 +-
 .../query-view/column-tree/column-tree.tsx    |  28 +-
 .../live-query-mode-selector.spec.tsx.snap    |  18 +-
 .../live-query-mode-selector.tsx              |   7 +-
 .../query-extra-info.spec.tsx.snap            |  60 ++--
 .../query-extra-info/query-extra-info.tsx     |  20 +-
 .../__snapshots__/query-output.spec.tsx.snap  | 324 ++++++------------
 .../query-view/query-output/query-output.tsx  |  11 +-
 .../src/views/query-view/query-view.tsx       |   7 +-
 .../__snapshots__/run-button.spec.tsx.snap    |  96 +++---
 .../query-view/run-button/run-button.tsx      |   6 +-
 44 files changed, 811 insertions(+), 880 deletions(-)
 create mode 100644 licenses/bin/@popperjs-core.MIT
 create mode 100644 licenses/bin/react-fast-compare.MIT

diff --git a/licenses.yaml b/licenses.yaml
index 87b8b76ac7eb..a08275b37ab3 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -4931,6 +4931,15 @@ version: 3.26.1
 
 ---
 
+name: "@blueprintjs/popover2"
+license_category: binary
+module: web-console
+license_name: Apache License version 2.0
+copyright: Palantir Technologies
+version: 0.10.1
+
+---
+
 name: "@hypnosphi/create-react-context"
 license_category: binary
 module: web-console
@@ -4941,6 +4950,16 @@ license_file_path: licenses/bin/@hypnosphi-create-react-context.MIT
 
 ---
 
+name: "@popperjs/core"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Federico Zivolo
+version: 2.9.2
+license_file_path: licenses/bin/@popperjs-core.MIT
+
+---
+
 name: "@types/dom4"
 license_category: binary
 module: web-console
@@ -5498,6 +5517,16 @@ license_file_path: licenses/bin/react-dom.MIT
 
 ---
 
+name: "react-fast-compare"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Chris Bolin
+version: 3.2.0
+license_file_path: licenses/bin/react-fast-compare.MIT
+
+---
+
 name: "react-is"
 license_category: binary
 module: web-console
diff --git a/licenses/bin/@popperjs-core.MIT b/licenses/bin/@popperjs-core.MIT
new file mode 100644
index 000000000000..0370c4581eb5
--- /dev/null
+++ b/licenses/bin/@popperjs-core.MIT
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Federico Zivolo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/licenses/bin/react-fast-compare.MIT b/licenses/bin/react-fast-compare.MIT
new file mode 100644
index 000000000000..948353952d26
--- /dev/null
+++ b/licenses/bin/react-fast-compare.MIT
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018 Formidable Labs
+Copyright (c) 2017 Evgeny Poberezkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index eaeec9fb19b5..1e009c8d1d86 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -3077,6 +3077,36 @@
         }
       }
     },
+    "@blueprintjs/popover2": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-0.10.1.tgz",
+      "integrity": "sha512-5zo4TsoGO79yA/CCsENE7cVuSk3BEMzS99iWDdesyh9I9AU0rkSYcaKbAmpIrWfO9Oe4s8lRPms0OrXF2fs94Q==",
+      "requires": {
+        "@blueprintjs/core": "^3.45.0",
+        "@popperjs/core": "^2.5.4",
+        "classnames": "^2.2",
+        "dom4": "^2.1.5",
+        "react-popper": "^2.2.4",
+        "resize-observer-polyfill": "^1.5.1",
+        "tslib": "~1.13.0"
+      },
+      "dependencies": {
+        "react-popper": {
+          "version": "2.2.5",
+          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+          "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+          "requires": {
+            "react-fast-compare": "^3.0.1",
+            "warning": "^4.0.2"
+          }
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
+        }
+      }
+    },
     "@cnakazawa/watch": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -4294,6 +4324,11 @@
       "integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
@@ -18325,6 +18360,11 @@
         }
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
diff --git a/web-console/package.json b/web-console/package.json
index 54e4e83f6982..9d687ecde741 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -69,6 +69,7 @@
     "@blueprintjs/core": "^3.45.0",
     "@blueprintjs/datetime": "^3.23.4",
     "@blueprintjs/icons": "^3.26.1",
+    "@blueprintjs/popover2": "^0.10.1",
     "axios": "^0.21.1",
     "brace": "^0.11.1",
     "classnames": "^2.2.6",
diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx
index 2bc8988df005..9863e616aabb 100644
--- a/web-console/src/components/action-cell/action-cell.tsx
+++ b/web-console/src/components/action-cell/action-cell.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Popover, Position } from '@blueprintjs/core';
+import { Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { BasicAction, basicActionsToMenu } from '../../utils/basic-action';
@@ -42,9 +43,9 @@ export const ActionCell = React.memo(function ActionCell(props: ActionCellProps)
     <div className="action-cell">
       {onDetail && <ActionIcon icon={IconNames.SEARCH_TEMPLATE} onClick={onDetail} />}
       {actionsMenu && (
-        <Popover content={actionsMenu} position={Position.BOTTOM_RIGHT}>
+        <Popover2 content={actionsMenu} position={Position.BOTTOM_RIGHT}>
           <ActionIcon icon={IconNames.WRENCH} />
-        </Popover>
+        </Popover2>
       )}
     </div>
   );
diff --git a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
index e73b8fb1fbd0..1d9546429547 100644
--- a/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
+++ b/web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
@@ -13,30 +13,26 @@ exports[`form group with info matches snapshot 1`] = `
       class="bp3-text-muted"
     >
       <span
-        class="bp3-popover-wrapper"
+        class="bp3-popover2-target"
       >
         <span
-          class="bp3-popover-target"
+          class="bp3-icon bp3-icon-info-sign"
+          icon="info-sign"
         >
-          <span
-            class="bp3-icon bp3-icon-info-sign"
-            icon="info-sign"
+          <svg
+            data-icon="info-sign"
+            height="14"
+            viewBox="0 0 16 16"
+            width="14"
           >
-            <svg
-              data-icon="info-sign"
-              height="14"
-              viewBox="0 0 16 16"
-              width="14"
-            >
-              <desc>
-                info-sign
-              </desc>
-              <path
-                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+            <desc>
+              info-sign
+            </desc>
+            <path
+              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+              fill-rule="evenodd"
+            />
+          </svg>
         </span>
       </span>
     </span>
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.scss b/web-console/src/components/form-group-with-info/form-group-with-info.scss
index ddde9ec3dd78..4d61773bb0cf 100644
--- a/web-console/src/components/form-group-with-info/form-group-with-info.scss
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.scss
@@ -17,13 +17,17 @@
  */
 
 .form-group-with-info {
+  .bp3-text-muted .bp3-popover2-target {
+    margin-top: 0;
+  }
+
   .bp3-form-content {
     position: relative;
 
-    & > .bp3-popover-wrapper {
+    & > .bp3-popover2-target {
       position: absolute;
       right: 0;
-      top: 7px;
+      top: 5px;
     }
   }
 }
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
index 6ef8fa6f24fa..c6113b21a8d7 100644
--- a/web-console/src/components/form-group-with-info/form-group-with-info.tsx
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { FormGroup, Icon, Popover } from '@blueprintjs/core';
+import { FormGroup, Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import './form-group-with-info.scss';
@@ -35,9 +36,9 @@ export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
   const { label, info, inlineInfo, children } = props;
 
   const popover = (
-    <Popover content={info} position="left-bottom" boundary="viewport">
+    <Popover2 content={info} position="left-bottom">
       <Icon icon={IconNames.INFO_SIGN} iconSize={14} />
-    </Popover>
+    </Popover2>
   );
 
   return (
diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index c2448c78a321..84072b8e8a20 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -77,8 +77,8 @@ exports[`header bar matches snapshot 1`] = `
         }
       }
     />
-    <Blueprint3.Popover
-      boundary="scrollParent"
+    <Blueprint3.Popover2
+      boundary="clippingParents"
       captureDismiss={false}
       content={
         <Blueprint3.Menu>
@@ -166,21 +166,20 @@ exports[`header bar matches snapshot 1`] = `
       inheritDarkTheme={true}
       interactionKind="click"
       minimal={false}
-      modifiers={Object {}}
       openOnTargetFocus={true}
       position="bottom-right"
+      positioningStrategy="absolute"
       targetTagName="span"
       transitionDuration={300}
       usePortal={true}
-      wrapperTagName="span"
     >
       <Blueprint3.Button
         icon="cog"
         minimal={true}
       />
-    </Blueprint3.Popover>
-    <Blueprint3.Popover
-      boundary="scrollParent"
+    </Blueprint3.Popover2>
+    <Blueprint3.Popover2
+      boundary="clippingParents"
       captureDismiss={false}
       content={
         <Blueprint3.Menu>
@@ -244,19 +243,18 @@ exports[`header bar matches snapshot 1`] = `
       inheritDarkTheme={true}
       interactionKind="click"
       minimal={false}
-      modifiers={Object {}}
       openOnTargetFocus={true}
       position="bottom-right"
+      positioningStrategy="absolute"
       targetTagName="span"
       transitionDuration={300}
       usePortal={true}
-      wrapperTagName="span"
     >
       <Blueprint3.Button
         icon="help"
         minimal={true}
       />
-    </Blueprint3.Popover>
+    </Blueprint3.Popover2>
   </Blueprint3.NavbarGroup>
 </Blueprint3.Navbar>
 `;
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index b068e66847a5..f2050d26d713 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -27,10 +27,10 @@ import {
   Navbar,
   NavbarDivider,
   NavbarGroup,
-  Popover,
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import {
@@ -175,7 +175,7 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP
   }
 
   return (
-    <Popover
+    <Popover2
       content={
         <PopoverText>
           <p>The console is running in restricted mode.</p>
@@ -192,7 +192,7 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP
       position={Position.BOTTOM_RIGHT}
     >
       <Button icon={IconNames.WARNING_SIGN} text={label} intent={Intent.WARNING} minimal />
-    </Popover>
+    </Popover2>
   );
 });
 
@@ -367,12 +367,12 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <RestrictedMode capabilities={capabilities} />
-        <Popover content={configMenu} position={Position.BOTTOM_RIGHT}>
+        <Popover2 content={configMenu} position={Position.BOTTOM_RIGHT}>
           <Button minimal icon={IconNames.COG} />
-        </Popover>
-        <Popover content={helpMenu} position={Position.BOTTOM_RIGHT}>
+        </Popover2>
+        <Popover2 content={helpMenu} position={Position.BOTTOM_RIGHT}>
           <Button minimal icon={IconNames.HELP} />
-        </Popover>
+        </Popover2>
       </NavbarGroup>
       {aboutDialogOpen && <AboutDialog onClose={() => setAboutDialogOpen(false)} />}
       {doctorDialogOpen && <DoctorDialog onClose={() => setDoctorDialogOpen(false)} />}
diff --git a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
index 19a167901431..4f0a9f9fad57 100644
--- a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
+++ b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
@@ -16,36 +16,32 @@ exports[`interval calendar component matches snapshot 1`] = `
   >
     <div>
       <span
-        class="bp3-popover-wrapper"
+        class="bp3-popover2-target"
       >
-        <span
-          class="bp3-popover-target"
+        <button
+          class="bp3-button"
+          type="button"
         >
-          <button
-            class="bp3-button"
-            type="button"
+          <span
+            class="bp3-icon bp3-icon-calendar"
+            icon="calendar"
           >
-            <span
-              class="bp3-icon bp3-icon-calendar"
-              icon="calendar"
+            <svg
+              data-icon="calendar"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                data-icon="calendar"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <desc>
-                  calendar
-                </desc>
-                <path
-                  d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
+              <desc>
+                calendar
+              </desc>
+              <path
+                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
+        </button>
       </span>
     </div>
   </span>
diff --git a/web-console/src/components/interval-input/interval-input.tsx b/web-console/src/components/interval-input/interval-input.tsx
index 64866cf82190..f72f2ba92067 100644
--- a/web-console/src/components/interval-input/interval-input.tsx
+++ b/web-console/src/components/interval-input/interval-input.tsx
@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { Button, InputGroup, Intent, Popover, Position } from '@blueprintjs/core';
+import { Button, InputGroup, Intent, Position } from '@blueprintjs/core';
 import { DateRange, DateRangePicker } from '@blueprintjs/datetime';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import './interval-input.scss';
@@ -68,7 +69,7 @@ export const IntervalInput = React.memo(function IntervalInput(props: IntervalIn
       placeholder={placeholder}
       rightElement={
         <div>
-          <Popover
+          <Popover2
             popoverClassName="calendar"
             content={
               <DateRangePicker
@@ -83,7 +84,7 @@ export const IntervalInput = React.memo(function IntervalInput(props: IntervalIn
             position={Position.BOTTOM_RIGHT}
           >
             <Button rightIcon={IconNames.CALENDAR} />
-          </Popover>
+          </Popover2>
         </div>
       }
       onChange={(e: any) => {
diff --git a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
index fe50fb09ba99..2f3d88dbb510 100644
--- a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
+++ b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
@@ -2,72 +2,64 @@
 
 exports[`more button matches snapshot (empty) 1`] = `
 <span
-  class="bp3-popover-wrapper more-button"
+  class="more-button bp3-popover2-target"
 >
-  <span
-    class="bp3-popover-target"
+  <button
+    class="bp3-button bp3-disabled"
+    disabled=""
+    tabindex="-1"
+    type="button"
   >
-    <button
-      class="bp3-button bp3-disabled"
-      disabled=""
-      tabindex="-1"
-      type="button"
+    <span
+      class="bp3-icon bp3-icon-more"
+      icon="more"
     >
-      <span
-        class="bp3-icon bp3-icon-more"
-        icon="more"
+      <svg
+        data-icon="more"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          data-icon="more"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <desc>
-            more
-          </desc>
-          <path
-            d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-  </span>
+        <desc>
+          more
+        </desc>
+        <path
+          d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </button>
 </span>
 `;
 
 exports[`more button matches snapshot (full) 1`] = `
 <span
-  class="bp3-popover-wrapper more-button"
+  class="more-button bp3-popover2-target"
 >
-  <span
-    class="bp3-popover-target"
+  <button
+    class="bp3-button"
+    type="button"
   >
-    <button
-      class="bp3-button"
-      type="button"
+    <span
+      class="bp3-icon bp3-icon-more"
+      icon="more"
     >
-      <span
-        class="bp3-icon bp3-icon-more"
-        icon="more"
+      <svg
+        data-icon="more"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          data-icon="more"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <desc>
-            more
-          </desc>
-          <path
-            d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-  </span>
+        <desc>
+          more
+        </desc>
+        <path
+          d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </button>
 </span>
 `;
diff --git a/web-console/src/components/more-button/more-button.tsx b/web-console/src/components/more-button/more-button.tsx
index 4bcef07225f9..a7ac38a6c22c 100644
--- a/web-console/src/components/more-button/more-button.tsx
+++ b/web-console/src/components/more-button/more-button.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, Menu, Popover, Position } from '@blueprintjs/core';
+import { Button, Menu, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 type OpenState = 'open' | 'alt-open';
@@ -39,7 +40,7 @@ export const MoreButton = React.memo(function MoreButton(props: MoreButtonProps)
   });
 
   return (
-    <Popover
+    <Popover2
       className="more-button"
       isOpen={Boolean(openState)}
       content={
@@ -55,6 +56,6 @@ export const MoreButton = React.memo(function MoreButton(props: MoreButtonProps)
       }}
     >
       <Button icon={IconNames.MORE} disabled={!childCount} />
-    </Popover>
+    </Popover2>
   );
 });
diff --git a/web-console/src/components/numeric-input-with-default/numeric-input-with-default.tsx b/web-console/src/components/numeric-input-with-default/numeric-input-with-default.tsx
index abfbe9b14196..7574f1d45ccf 100644
--- a/web-console/src/components/numeric-input-with-default/numeric-input-with-default.tsx
+++ b/web-console/src/components/numeric-input-with-default/numeric-input-with-default.tsx
@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { HTMLInputProps, INumericInputProps, NumericInput } from '@blueprintjs/core';
+import { HTMLInputProps, NumericInput, NumericInputProps } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
-export type NumericInputWithDefaultProps = HTMLInputProps & INumericInputProps;
+export type NumericInputWithDefaultProps = HTMLInputProps & NumericInputProps;
 
 export const NumericInputWithDefault = React.memo(function NumericInputWithDefault(
   props: NumericInputWithDefaultProps,
diff --git a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
index 9e9bb98b832b..1c18aeff8414 100644
--- a/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
+++ b/web-console/src/components/suggestible-input/__snapshots__/suggestible-input.spec.tsx.snap
@@ -14,36 +14,32 @@ exports[`suggestible input matches snapshot 1`] = `
     class="bp3-input-action"
   >
     <span
-      class="bp3-popover-wrapper"
+      class="bp3-popover2-target"
     >
-      <span
-        class="bp3-popover-target"
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
       >
-        <button
-          class="bp3-button bp3-minimal"
-          type="button"
+        <span
+          class="bp3-icon bp3-icon-caret-down"
+          icon="caret-down"
         >
-          <span
-            class="bp3-icon bp3-icon-caret-down"
-            icon="caret-down"
+          <svg
+            data-icon="caret-down"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              data-icon="caret-down"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <desc>
-                caret-down
-              </desc>
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-      </span>
+            <desc>
+              caret-down
+            </desc>
+            <path
+              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
     </span>
   </span>
 </div>
diff --git a/web-console/src/components/suggestible-input/suggestible-input.tsx b/web-console/src/components/suggestible-input/suggestible-input.tsx
index 2b2ea25c1da9..dc34f075d38b 100644
--- a/web-console/src/components/suggestible-input/suggestible-input.tsx
+++ b/web-console/src/components/suggestible-input/suggestible-input.tsx
@@ -23,10 +23,10 @@ import {
   Intent,
   Menu,
   MenuItem,
-  Popover,
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 
@@ -82,8 +82,7 @@ export const SuggestibleInput = React.memo(function SuggestibleInput(props: Sugg
       }}
       rightElement={
         suggestions && (
-          <Popover
-            boundary="window"
+          <Popover2
             content={
               <Menu>
                 {suggestions.map(suggestion => {
@@ -123,7 +122,7 @@ export const SuggestibleInput = React.memo(function SuggestibleInput(props: Sugg
             autoFocus={false}
           >
             <Button icon={IconNames.CARET_DOWN} minimal />
-          </Popover>
+          </Popover2>
         )
       }
       {...rest}
diff --git a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
index 60d731bf7a7d..610d65e008d9 100644
--- a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
+++ b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
@@ -2,45 +2,41 @@
 
 exports[`table column matches snapshot 1`] = `
 <span
-  class="bp3-popover-wrapper table-column-selector"
+  class="table-column-selector bp3-popover2-target"
 >
-  <span
-    class="bp3-popover-target"
+  <button
+    class="bp3-button"
+    type="button"
   >
-    <button
-      class="bp3-button"
-      type="button"
+    <span
+      class="bp3-button-text"
     >
+      Columns 
       <span
-        class="bp3-button-text"
+        class="counter"
       >
-        Columns 
-        <span
-          class="counter"
-        >
-          (2/3)
-        </span>
+        (2/3)
       </span>
-      <span
-        class="bp3-icon bp3-icon-caret-down"
-        icon="caret-down"
+    </span>
+    <span
+      class="bp3-icon bp3-icon-caret-down"
+      icon="caret-down"
+    >
+      <svg
+        data-icon="caret-down"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          data-icon="caret-down"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <desc>
-            caret-down
-          </desc>
-          <path
-            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-  </span>
+        <desc>
+          caret-down
+        </desc>
+        <path
+          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </button>
 </span>
 `;
diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
index 5ce6db555d8b..2a0c2b5a4762 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, Menu, Popover, Position } from '@blueprintjs/core';
+import { Button, Menu, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import { MenuCheckbox } from '../menu-checkbox/menu-checkbox';
@@ -60,7 +61,7 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
   const counterText = `(${columns.filter(isColumnShown).length}/${columns.length})`;
 
   return (
-    <Popover
+    <Popover2
       className="table-column-selector"
       content={checkboxes}
       position={Position.BOTTOM_RIGHT}
@@ -73,6 +74,6 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
       <Button rightIcon={IconNames.CARET_DOWN}>
         Columns <span className="counter">{counterText}</span>
       </Button>
-    </Popover>
+    </Popover2>
   );
 });
diff --git a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
index 960ce42757a9..4f88968e7555 100644
--- a/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
+++ b/web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap
@@ -7,8 +7,8 @@ exports[`TimedButton matches snapshot 1`] = `
   <Blueprint3.Button
     onClick={[Function]}
   />
-  <Blueprint3.Popover
-    boundary="scrollParent"
+  <Blueprint3.Popover2
+    boundary="clippingParents"
     captureDismiss={false}
     content={
       <Blueprint3.Menu>
@@ -35,16 +35,15 @@ exports[`TimedButton matches snapshot 1`] = `
     inheritDarkTheme={true}
     interactionKind="click"
     minimal={false}
-    modifiers={Object {}}
     openOnTargetFocus={true}
+    positioningStrategy="absolute"
     targetTagName="span"
     transitionDuration={300}
     usePortal={true}
-    wrapperTagName="span"
   >
     <Blueprint3.Button
       rightIcon="caret-down"
     />
-  </Blueprint3.Popover>
+  </Blueprint3.Popover2>
 </Blueprint3.ButtonGroup>
 `;
diff --git a/web-console/src/components/timed-button/timed-button.tsx b/web-console/src/components/timed-button/timed-button.tsx
index fe7a990843cd..ffda0a98853a 100644
--- a/web-console/src/components/timed-button/timed-button.tsx
+++ b/web-console/src/components/timed-button/timed-button.tsx
@@ -16,16 +16,9 @@
  * limitations under the License.
  */
 
-import {
-  Button,
-  ButtonGroup,
-  IButtonProps,
-  Menu,
-  MenuDivider,
-  MenuItem,
-  Popover,
-} from '@blueprintjs/core';
+import { Button, ButtonGroup, ButtonProps, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import { useInterval } from '../../hooks';
@@ -36,7 +29,7 @@ export interface DelayLabel {
   delay: number;
 }
 
-export interface TimedButtonProps extends IButtonProps {
+export interface TimedButtonProps extends ButtonProps {
   delays: DelayLabel[];
   onRefresh: (auto: boolean) => void;
   localStorageKey?: LocalStorageKeys;
@@ -77,7 +70,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
   return (
     <ButtonGroup className="timed-button">
       <Button {...other} text={text} icon={icon} onClick={() => onRefresh(false)} />
-      <Popover
+      <Popover2
         content={
           <Menu>
             <MenuDivider title={label} />
@@ -93,7 +86,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
         }
       >
         <Button {...other} rightIcon={IconNames.CARET_DOWN} />
-      </Popover>
+      </Popover2>
     </ButtonGroup>
   );
 });
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
index e0033cbf3752..6edd68016035 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
@@ -141,60 +141,56 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp3-popover-wrapper"
+              class="bp3-popover2-target"
             >
-              <span
-                class="bp3-popover-target"
+              <button
+                class="bp3-button"
+                type="button"
               >
-                <button
-                  class="bp3-button"
-                  type="button"
+                <span
+                  class="bp3-icon bp3-icon-wrench"
+                  icon="wrench"
                 >
-                  <span
-                    class="bp3-icon bp3-icon-wrench"
-                    icon="wrench"
-                  >
-                    <svg
-                      data-icon="wrench"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        wrench
-                      </desc>
-                      <path
-                        d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="bp3-button-text"
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    Actions
-                  </span>
-                  <span
-                    class="bp3-icon bp3-icon-caret-down"
-                    icon="caret-down"
+                    <desc>
+                      wrench
+                    </desc>
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp3-button-text"
+                >
+                  Actions
+                </span>
+                <span
+                  class="bp3-icon bp3-icon-caret-down"
+                  icon="caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <svg
-                      data-icon="caret-down"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        caret-down
-                      </desc>
-                      <path
-                        d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </span>
+                    <desc>
+                      caret-down
+                    </desc>
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
           </div>
           <div
diff --git a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
index c71af60eb626..6db67c7cd8be 100644
--- a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap
@@ -141,60 +141,56 @@ exports[`Lookup table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp3-popover-wrapper"
+              class="bp3-popover2-target"
             >
-              <span
-                class="bp3-popover-target"
+              <button
+                class="bp3-button"
+                type="button"
               >
-                <button
-                  class="bp3-button"
-                  type="button"
+                <span
+                  class="bp3-icon bp3-icon-wrench"
+                  icon="wrench"
                 >
-                  <span
-                    class="bp3-icon bp3-icon-wrench"
-                    icon="wrench"
-                  >
-                    <svg
-                      data-icon="wrench"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        wrench
-                      </desc>
-                      <path
-                        d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="bp3-button-text"
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    Actions
-                  </span>
-                  <span
-                    class="bp3-icon bp3-icon-caret-down"
-                    icon="caret-down"
+                    <desc>
+                      wrench
+                    </desc>
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp3-button-text"
+                >
+                  Actions
+                </span>
+                <span
+                  class="bp3-icon bp3-icon-caret-down"
+                  icon="caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <svg
-                      data-icon="caret-down"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        caret-down
-                      </desc>
-                      <path
-                        d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </span>
+                    <desc>
+                      caret-down
+                    </desc>
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
           </div>
           <div
diff --git a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
index 380ea4460010..487091c1dc21 100644
--- a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
@@ -245,36 +245,32 @@ exports[`retention dialog matches snapshot 1`] = `
                                 class="bp3-input-action"
                               >
                                 <span
-                                  class="bp3-popover-wrapper"
+                                  class="bp3-popover2-target"
                                 >
-                                  <span
-                                    class="bp3-popover-target"
+                                  <button
+                                    class="bp3-button bp3-minimal"
+                                    type="button"
                                   >
-                                    <button
-                                      class="bp3-button bp3-minimal"
-                                      type="button"
+                                    <span
+                                      class="bp3-icon bp3-icon-caret-down"
+                                      icon="caret-down"
                                     >
-                                      <span
-                                        class="bp3-icon bp3-icon-caret-down"
-                                        icon="caret-down"
+                                      <svg
+                                        data-icon="caret-down"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
                                       >
-                                        <svg
-                                          data-icon="caret-down"
-                                          height="16"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                        >
-                                          <desc>
-                                            caret-down
-                                          </desc>
-                                          <path
-                                            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
-                                      </span>
-                                    </button>
-                                  </span>
+                                        <desc>
+                                          caret-down
+                                        </desc>
+                                        <path
+                                          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </button>
                                 </span>
                               </span>
                             </div>
diff --git a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
index 3a8d369a84d9..e1e9fd81f1e9 100644
--- a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
@@ -185,60 +185,56 @@ exports[`task table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp3-popover-wrapper"
+              class="bp3-popover2-target"
             >
-              <span
-                class="bp3-popover-target"
+              <button
+                class="bp3-button"
+                type="button"
               >
-                <button
-                  class="bp3-button"
-                  type="button"
+                <span
+                  class="bp3-icon bp3-icon-wrench"
+                  icon="wrench"
                 >
-                  <span
-                    class="bp3-icon bp3-icon-wrench"
-                    icon="wrench"
-                  >
-                    <svg
-                      data-icon="wrench"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        wrench
-                      </desc>
-                      <path
-                        d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="bp3-button-text"
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    Actions
-                  </span>
-                  <span
-                    class="bp3-icon bp3-icon-caret-down"
-                    icon="caret-down"
+                    <desc>
+                      wrench
+                    </desc>
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp3-button-text"
+                >
+                  Actions
+                </span>
+                <span
+                  class="bp3-icon bp3-icon-caret-down"
+                  icon="caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <svg
-                      data-icon="caret-down"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        caret-down
-                      </desc>
-                      <path
-                        d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </span>
+                    <desc>
+                      caret-down
+                    </desc>
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
           </div>
           <div
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
index bf4752a97f1b..7df5400962ce 100755
--- a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
@@ -272,60 +272,56 @@ exports[`supervisor table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp3-popover-wrapper"
+              class="bp3-popover2-target"
             >
-              <span
-                class="bp3-popover-target"
+              <button
+                class="bp3-button"
+                type="button"
               >
-                <button
-                  class="bp3-button"
-                  type="button"
+                <span
+                  class="bp3-icon bp3-icon-wrench"
+                  icon="wrench"
                 >
-                  <span
-                    class="bp3-icon bp3-icon-wrench"
-                    icon="wrench"
-                  >
-                    <svg
-                      data-icon="wrench"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        wrench
-                      </desc>
-                      <path
-                        d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="bp3-button-text"
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    Actions
-                  </span>
-                  <span
-                    class="bp3-icon bp3-icon-caret-down"
-                    icon="caret-down"
+                    <desc>
+                      wrench
+                    </desc>
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp3-button-text"
+                >
+                  Actions
+                </span>
+                <span
+                  class="bp3-icon bp3-icon-caret-down"
+                  icon="caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <svg
-                      data-icon="caret-down"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        caret-down
-                      </desc>
-                      <path
-                        d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </span>
+                    <desc>
+                      caret-down
+                    </desc>
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
           </div>
           <div
diff --git a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
index 43308dc39613..da49bc9e1de1 100644
--- a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
+++ b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, Icon, IconName, Intent, Popover } from '@blueprintjs/core';
+import { Button, Classes, Dialog, Icon, IconName, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React, { ReactNode } from 'react';
 
 import { BasicAction, basicActionsToMenu } from '../../utils/basic-action';
@@ -66,9 +67,9 @@ export const TableActionDialog = React.memo(function TableActionDialog(
       <div className={Classes.DIALOG_FOOTER}>
         {actionsMenu && (
           <div className="footer-actions-left">
-            <Popover content={actionsMenu}>
+            <Popover2 content={actionsMenu}>
               <Button icon={IconNames.WRENCH} text="Actions" rightIcon={IconNames.CARET_DOWN} />
-            </Popover>
+            </Popover2>
           </div>
         )}
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
diff --git a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
index 4f2fd88cc649..82d38e2d86be 100644
--- a/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap
@@ -272,60 +272,56 @@ exports[`task table action dialog matches snapshot 1`] = `
             class="footer-actions-left"
           >
             <span
-              class="bp3-popover-wrapper"
+              class="bp3-popover2-target"
             >
-              <span
-                class="bp3-popover-target"
+              <button
+                class="bp3-button"
+                type="button"
               >
-                <button
-                  class="bp3-button"
-                  type="button"
+                <span
+                  class="bp3-icon bp3-icon-wrench"
+                  icon="wrench"
                 >
-                  <span
-                    class="bp3-icon bp3-icon-wrench"
-                    icon="wrench"
-                  >
-                    <svg
-                      data-icon="wrench"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        wrench
-                      </desc>
-                      <path
-                        d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="bp3-button-text"
+                  <svg
+                    data-icon="wrench"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    Actions
-                  </span>
-                  <span
-                    class="bp3-icon bp3-icon-caret-down"
-                    icon="caret-down"
+                    <desc>
+                      wrench
+                    </desc>
+                    <path
+                      d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp3-button-text"
+                >
+                  Actions
+                </span>
+                <span
+                  class="bp3-icon bp3-icon-caret-down"
+                  icon="caret-down"
+                >
+                  <svg
+                    data-icon="caret-down"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <svg
-                      data-icon="caret-down"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <desc>
-                        caret-down
-                      </desc>
-                      <path
-                        d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </span>
+                    <desc>
+                      caret-down
+                    </desc>
+                    <path
+                      d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
           </div>
           <div
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index 426480ea24b5..d4e20cc4836e 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -21,6 +21,7 @@
 @import './blueprint-overrides';
 @import '~@blueprintjs/core/src/blueprint';
 @import '~@blueprintjs/datetime/src/blueprint-datetime';
+@import '~@blueprintjs/popover2/src/blueprint-popover2';
 @import '~react-splitter-layout/lib/index';
 @import '../lib/react-table';
 
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 8094d50d9fcb..6098ba96f311 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -34,11 +34,11 @@ import {
   Intent,
   Menu,
   MenuItem,
-  Popover,
   Switch,
   TextArea,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import * as JSONBig from 'json-bigint-native';
 import memoize from 'memoize-one';
@@ -2696,25 +2696,25 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         />
         {reorderDimensionMenu && (
           <FormGroup>
-            <Popover content={reorderDimensionMenu}>
+            <Popover2 content={reorderDimensionMenu}>
               <Button
                 icon={IconNames.ARROWS_HORIZONTAL}
                 text="Reorder dimension"
                 rightIcon={IconNames.CARET_DOWN}
               />
-            </Popover>
+            </Popover2>
           </FormGroup>
         )}
         {selectedDimensionSpecIndex !== -1 && deepGet(spec, 'spec.dataSchema.metricsSpec') && (
           <FormGroup>
-            <Popover content={convertToMetricMenu}>
+            <Popover2 content={convertToMetricMenu}>
               <Button
                 icon={IconNames.EXCHANGE}
                 text="Convert to metric"
                 rightIcon={IconNames.CARET_DOWN}
                 disabled={dimensions.length <= 1}
               />
-            </Popover>
+            </Popover2>
           </FormGroup>
         )}
         <div className="control-buttons">
@@ -2806,13 +2806,13 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         />
         {selectedMetricSpecIndex !== -1 && dimensionMode === 'specific' && (
           <FormGroup>
-            <Popover content={convertToDimensionMenu}>
+            <Popover2 content={convertToDimensionMenu}>
               <Button
                 icon={IconNames.EXCHANGE}
                 text="Convert to dimension"
                 rightIcon={IconNames.CARET_DOWN}
               />
-            </Popover>
+            </Popover2>
           </FormGroup>
         )}
         <div className="control-buttons">
diff --git a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
index 0a57156e1f1c..0d8b78fbcac9 100644
--- a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
+++ b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
@@ -45,7 +45,7 @@ exports[`QueryView matches snapshot 1`] = `
           queryContext={Object {}}
           runeMode={false}
         />
-        <Blueprint3.Tooltip
+        <Blueprint3.Tooltip2
           content="Automatically wrap the query with a limit to protect against queries with very large result sets."
           hoverCloseDelay={0}
           hoverOpenDelay={800}
@@ -58,7 +58,7 @@ exports[`QueryView matches snapshot 1`] = `
             label="Auto limit"
             onChange={[Function]}
           />
-        </Blueprint3.Tooltip>
+        </Blueprint3.Tooltip2>
         <Memo(LiveQueryModeSelector)
           autoLiveQueryModeShouldRun={true}
           liveQueryMode="auto"
@@ -124,7 +124,7 @@ exports[`QueryView matches snapshot with query 1`] = `
           queryContext={Object {}}
           runeMode={false}
         />
-        <Blueprint3.Tooltip
+        <Blueprint3.Tooltip2
           content="Automatically wrap the query with a limit to protect against queries with very large result sets."
           hoverCloseDelay={0}
           hoverOpenDelay={800}
@@ -137,7 +137,7 @@ exports[`QueryView matches snapshot with query 1`] = `
             label="Auto limit"
             onChange={[Function]}
           />
-        </Blueprint3.Tooltip>
+        </Blueprint3.Tooltip2>
         <Memo(LiveQueryModeSelector)
           autoLiveQueryModeShouldRun={true}
           liveQueryMode="auto"
diff --git a/web-console/src/views/query-view/column-tree/__snapshots__/column-tree.spec.tsx.snap b/web-console/src/views/query-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
index 89c4b7d4f05b..455c295bc11d 100644
--- a/web-console/src/views/query-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
+++ b/web-console/src/views/query-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
@@ -36,9 +36,9 @@ exports[`ColumnTree matches snapshot 1`] = `
               Object {
                 "icon": "time",
                 "id": "__time",
-                "label": <Blueprint3.Popover
+                "label": <Blueprint3.Popover2
                   autoFocus={false}
-                  boundary="window"
+                  boundary="clippingParents"
                   captureDismiss={false}
                   content={
                     <Memo(Deferred)
@@ -54,24 +54,22 @@ exports[`ColumnTree matches snapshot 1`] = `
                   inheritDarkTheme={true}
                   interactionKind="click"
                   minimal={false}
-                  modifiers={Object {}}
                   openOnTargetFocus={true}
                   position="right"
-                  targetClassName="bp3-popover-open"
+                  positioningStrategy="absolute"
                   targetTagName="span"
                   transitionDuration={300}
                   usePortal={true}
-                  wrapperTagName="span"
                 >
                   __time
-                </Blueprint3.Popover>,
+                </Blueprint3.Popover2>,
               },
               Object {
                 "icon": "numerical",
                 "id": "added",
-                "label": <Blueprint3.Popover
+                "label": <Blueprint3.Popover2
                   autoFocus={false}
-                  boundary="window"
+                  boundary="clippingParents"
                   captureDismiss={false}
                   content={
                     <Memo(Deferred)
@@ -87,24 +85,22 @@ exports[`ColumnTree matches snapshot 1`] = `
                   inheritDarkTheme={true}
                   interactionKind="click"
                   minimal={false}
-                  modifiers={Object {}}
                   openOnTargetFocus={true}
                   position="right"
-                  targetClassName="bp3-popover-open"
+                  positioningStrategy="absolute"
                   targetTagName="span"
                   transitionDuration={300}
                   usePortal={true}
-                  wrapperTagName="span"
                 >
                   added
-                </Blueprint3.Popover>,
+                </Blueprint3.Popover2>,
               },
               Object {
                 "icon": "numerical",
                 "id": "addedBy10",
-                "label": <Blueprint3.Popover
+                "label": <Blueprint3.Popover2
                   autoFocus={false}
-                  boundary="window"
+                  boundary="clippingParents"
                   captureDismiss={false}
                   content={
                     <Memo(Deferred)
@@ -120,24 +116,22 @@ exports[`ColumnTree matches snapshot 1`] = `
                   inheritDarkTheme={true}
                   interactionKind="click"
                   minimal={false}
-                  modifiers={Object {}}
                   openOnTargetFocus={true}
                   position="right"
-                  targetClassName="bp3-popover-open"
+                  positioningStrategy="absolute"
                   targetTagName="span"
                   transitionDuration={300}
                   usePortal={true}
-                  wrapperTagName="span"
                 >
                   addedBy10
-                </Blueprint3.Popover>,
+                </Blueprint3.Popover2>,
               },
             ],
             "icon": "th",
             "id": "wikipedia",
             "isExpanded": true,
-            "label": <Blueprint3.Popover
-              boundary="window"
+            "label": <Blueprint3.Popover2
+              boundary="clippingParents"
               captureDismiss={false}
               content={
                 <Memo(Deferred)
@@ -153,16 +147,15 @@ exports[`ColumnTree matches snapshot 1`] = `
               inheritDarkTheme={true}
               interactionKind="click"
               minimal={false}
-              modifiers={Object {}}
               openOnTargetFocus={true}
               position="right"
+              positioningStrategy="absolute"
               targetTagName="span"
               transitionDuration={300}
               usePortal={true}
-              wrapperTagName="span"
             >
               wikipedia
-            </Blueprint3.Popover>,
+            </Blueprint3.Popover2>,
           },
         ]
       }
diff --git a/web-console/src/views/query-view/column-tree/column-tree.scss b/web-console/src/views/query-view/column-tree/column-tree.scss
index 3d1c6f43a840..c6fcec256d99 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.scss
+++ b/web-console/src/views/query-view/column-tree/column-tree.scss
@@ -45,14 +45,9 @@
     }
   }
 
-  .bp3-popover-wrapper {
+  .bp3-popover2-target {
     width: 188px;
     display: inline-block;
-
-    .bp3-popover-target {
-      width: 100%;
-      display: inline-block;
-      cursor: pointer;
-    }
+    cursor: pointer;
   }
 }
diff --git a/web-console/src/views/query-view/column-tree/column-tree.tsx b/web-console/src/views/query-view/column-tree/column-tree.tsx
index caa3a5d8d64c..6ae9bd97dbe1 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.tsx
+++ b/web-console/src/views/query-view/column-tree/column-tree.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { HTMLSelect, ITreeNode, Menu, MenuItem, Popover, Position, Tree } from '@blueprintjs/core';
+import { HTMLSelect, Menu, MenuItem, Position, Tree, TreeNodeInfo } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import {
   SqlComparison,
   SqlExpression,
@@ -115,8 +116,8 @@ export interface ColumnTreeProps {
 
 export interface ColumnTreeState {
   prevColumnMetadata?: readonly ColumnMetadata[];
-  columnTree?: ITreeNode[];
-  currentSchemaSubtree?: ITreeNode[];
+  columnTree?: TreeNodeInfo[];
+  currentSchemaSubtree?: TreeNodeInfo[];
   selectedTreeIndex: number;
 }
 
@@ -150,18 +151,17 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
       const columnTree = groupBy(
         columnMetadata,
         r => r.TABLE_SCHEMA,
-        (metadata, schemaName): ITreeNode => ({
+        (metadata, schemaName): TreeNodeInfo => ({
           id: schemaName,
           label: schemaName,
           childNodes: groupBy(
             metadata,
             r => r.TABLE_NAME,
-            (metadata, tableName): ITreeNode => ({
+            (metadata, tableName): TreeNodeInfo => ({
               id: tableName,
               icon: IconNames.TH,
               label: (
-                <Popover
-                  boundary="window"
+                <Popover2
                   position={Position.RIGHT}
                   content={
                     <Deferred
@@ -306,19 +306,17 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                   }
                 >
                   {tableName}
-                </Popover>
+                </Popover2>
               ),
               childNodes: metadata
                 .map(
-                  (columnData): ITreeNode => ({
+                  (columnData): TreeNodeInfo => ({
                     id: columnData.COLUMN_NAME,
                     icon: dataTypeToIcon(columnData.DATA_TYPE),
                     label: (
-                      <Popover
-                        boundary="window"
+                      <Popover2
                         position={Position.RIGHT}
                         autoFocus={false}
-                        targetClassName="bp3-popover-open"
                         content={
                           <Deferred
                             content={() => {
@@ -384,7 +382,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                         }
                       >
                         {columnData.COLUMN_NAME}
-                      </Popover>
+                      </Popover2>
                     ),
                   }),
                 )
@@ -478,12 +476,12 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
     });
   };
 
-  private readonly handleNodeCollapse = (nodeData: ITreeNode) => {
+  private readonly handleNodeCollapse = (nodeData: TreeNodeInfo) => {
     nodeData.isExpanded = false;
     this.forceUpdate();
   };
 
-  private readonly handleNodeExpand = (nodeData: ITreeNode) => {
+  private readonly handleNodeExpand = (nodeData: TreeNodeInfo) => {
     nodeData.isExpanded = true;
     this.forceUpdate();
   };
diff --git a/web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap b/web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap
index 2291096e0627..901ccfe22247 100644
--- a/web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap
+++ b/web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
-<Blueprint3.Popover
-  boundary="scrollParent"
+<Blueprint3.Popover2
+  boundary="clippingParents"
   captureDismiss={false}
   content={
     <Blueprint3.Menu>
@@ -47,14 +47,13 @@ exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
   inheritDarkTheme={true}
   interactionKind="click"
   minimal={true}
-  modifiers={Object {}}
   openOnTargetFocus={true}
   portalClassName="live-query-mode-selector-portal"
   position="bottom-left"
+  positioningStrategy="absolute"
   targetTagName="span"
   transitionDuration={300}
   usePortal={true}
-  wrapperTagName="span"
 >
   <Blueprint3.Button
     className="live-query-mode-selector"
@@ -70,12 +69,12 @@ exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
       Auto
     </span>
   </Blueprint3.Button>
-</Blueprint3.Popover>
+</Blueprint3.Popover2>
 `;
 
 exports[`LiveQueryModeSelector matches snapshot on 1`] = `
-<Blueprint3.Popover
-  boundary="scrollParent"
+<Blueprint3.Popover2
+  boundary="clippingParents"
   captureDismiss={false}
   content={
     <Blueprint3.Menu>
@@ -120,14 +119,13 @@ exports[`LiveQueryModeSelector matches snapshot on 1`] = `
   inheritDarkTheme={true}
   interactionKind="click"
   minimal={true}
-  modifiers={Object {}}
   openOnTargetFocus={true}
   portalClassName="live-query-mode-selector-portal"
   position="bottom-left"
+  positioningStrategy="absolute"
   targetTagName="span"
   transitionDuration={300}
   usePortal={true}
-  wrapperTagName="span"
 >
   <Blueprint3.Button
     className="live-query-mode-selector"
@@ -143,5 +141,5 @@ exports[`LiveQueryModeSelector matches snapshot on 1`] = `
       On
     </span>
   </Blueprint3.Button>
-</Blueprint3.Popover>
+</Blueprint3.Popover2>
 `;
diff --git a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx b/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx
index c9a6a824aab0..5a3ab2cdde58 100644
--- a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx
+++ b/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Button, Menu, MenuItem, Popover, PopoverPosition } from '@blueprintjs/core';
+import { Button, Menu, MenuItem, PopoverPosition } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -43,7 +44,7 @@ export const LiveQueryModeSelector = React.memo(function LiveQueryModeSelector(
   const { liveQueryMode, onLiveQueryModeChange, autoLiveQueryModeShouldRun } = props;
 
   return (
-    <Popover
+    <Popover2
       portalClassName="live-query-mode-selector-portal"
       minimal
       position={PopoverPosition.BOTTOM_LEFT}
@@ -72,6 +73,6 @@ export const LiveQueryModeSelector = React.memo(function LiveQueryModeSelector(
           {LIVE_QUERY_MODE_TITLE[liveQueryMode]}
         </span>
       </Button>
-    </Popover>
+    </Popover2>
   );
 });
diff --git a/web-console/src/views/query-view/query-extra-info/__snapshots__/query-extra-info.spec.tsx.snap b/web-console/src/views/query-view/query-extra-info/__snapshots__/query-extra-info.spec.tsx.snap
index 192ded4da35a..42b745357ce2 100644
--- a/web-console/src/views/query-view/query-extra-info/__snapshots__/query-extra-info.spec.tsx.snap
+++ b/web-console/src/views/query-view/query-extra-info/__snapshots__/query-extra-info.spec.tsx.snap
@@ -8,51 +8,43 @@ exports[`QueryExtraInfo matches snapshot 1`] = `
     class="query-info"
   >
     <span
-      class="bp3-popover-wrapper"
+      class="bp3-popover2-target"
     >
       <span
-        class="bp3-popover-target"
+        class=""
+        tabindex="0"
       >
-        <span
-          class=""
-          tabindex="0"
-        >
-          0 results in 8.00s
-        </span>
+        0 results in 8.00s
       </span>
     </span>
   </div>
   <span
-    class="bp3-popover-wrapper download-button"
+    class="download-button bp3-popover2-target"
   >
-    <span
-      class="bp3-popover-target"
+    <button
+      class="bp3-button bp3-minimal"
+      type="button"
     >
-      <button
-        class="bp3-button bp3-minimal"
-        type="button"
+      <span
+        class="bp3-icon bp3-icon-download"
+        icon="download"
       >
-        <span
-          class="bp3-icon bp3-icon-download"
-          icon="download"
+        <svg
+          data-icon="download"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         >
-          <svg
-            data-icon="download"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <desc>
-              download
-            </desc>
-            <path
-              d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM11.7 9.7l-3 3c-.18.18-.43.29-.71.29s-.53-.11-.71-.29l-3-3A1.003 1.003 0 015.7 8.28l1.29 1.29V3.99c0-.55.45-1 1-1s1 .45 1 1v5.59l1.29-1.29a1.003 1.003 0 011.71.71c0 .27-.11.52-.29.7z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-    </span>
+          <desc>
+            download
+          </desc>
+          <path
+            d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM11.7 9.7l-3 3c-.18.18-.43.29-.71.29s-.53-.11-.71-.29l-3-3A1.003 1.003 0 015.7 8.28l1.29 1.29V3.99c0-.55.45-1 1-1s1 .45 1 1v5.59l1.29-1.29a1.003 1.003 0 011.71.71c0 .27-.11.52-.29.7z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
   </span>
 </div>
 `;
diff --git a/web-console/src/views/query-view/query-extra-info/query-extra-info.tsx b/web-console/src/views/query-view/query-extra-info/query-extra-info.tsx
index 50debcc3b616..ce3996685b15 100644
--- a/web-console/src/views/query-view/query-extra-info/query-extra-info.tsx
+++ b/web-console/src/views/query-view/query-extra-info/query-extra-info.tsx
@@ -16,17 +16,9 @@
  * limitations under the License.
  */
 
-import {
-  Button,
-  Intent,
-  Menu,
-  MenuDivider,
-  MenuItem,
-  Popover,
-  Position,
-  Tooltip,
-} from '@blueprintjs/core';
+import { Button, Intent, Menu, MenuDivider, MenuItem, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import copy from 'copy-to-clipboard';
 import { QueryResult } from 'druid-query-toolkit';
 import React, { MouseEvent } from 'react';
@@ -103,14 +95,14 @@ export const QueryExtraInfo = React.memo(function QueryExtraInfo(props: QueryExt
     <div className="query-extra-info">
       {typeof queryResult.queryDuration !== 'undefined' && (
         <div className="query-info" onClick={handleQueryInfoClick}>
-          <Tooltip content={tooltipContent} hoverOpenDelay={500}>
+          <Tooltip2 content={tooltipContent} hoverOpenDelay={500} placement="top-start">
             {`${resultCount} in ${(queryResult.queryDuration / 1000).toFixed(2)}s`}
-          </Tooltip>
+          </Tooltip2>
         </div>
       )}
-      <Popover className="download-button" content={downloadMenu} position={Position.BOTTOM_RIGHT}>
+      <Popover2 className="download-button" content={downloadMenu} position={Position.BOTTOM_RIGHT}>
         <Button icon={IconNames.DOWNLOAD} minimal />
-      </Popover>
+      </Popover2>
     </div>
   );
 });
diff --git a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap b/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
index 29d2ff2e5e4e..9e1d3053bb6e 100644
--- a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
+++ b/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
@@ -29,36 +29,32 @@ exports[`query output matches snapshot 1`] = `
               class="rt-resizable-header-content"
             >
               <span
-                class="bp3-popover-wrapper clickable-cell"
+                class="clickable-cell bp3-popover2-target"
               >
-                <span
-                  class="bp3-popover-target"
+                <div
+                  class=""
                 >
-                  <div
-                    class=""
+                  language
+                  <span
+                    class="bp3-icon bp3-icon-filter"
+                    icon="filter"
                   >
-                    language
-                    <span
-                      class="bp3-icon bp3-icon-filter"
-                      icon="filter"
+                    <svg
+                      data-icon="filter"
+                      height="14"
+                      viewBox="0 0 16 16"
+                      width="14"
                     >
-                      <svg
-                        data-icon="filter"
-                        height="14"
-                        viewBox="0 0 16 16"
-                        width="14"
-                      >
-                        <desc>
-                          filter
-                        </desc>
-                        <path
-                          d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </span>
+                      <desc>
+                        filter
+                      </desc>
+                      <path
+                        d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                </div>
               </span>
             </div>
             <div
@@ -75,36 +71,32 @@ exports[`query output matches snapshot 1`] = `
               class="rt-resizable-header-content"
             >
               <span
-                class="bp3-popover-wrapper clickable-cell"
+                class="clickable-cell bp3-popover2-target"
               >
-                <span
-                  class="bp3-popover-target"
+                <div
+                  class=""
                 >
-                  <div
-                    class=""
+                  Count
+                  <span
+                    class="bp3-icon bp3-icon-filter"
+                    icon="filter"
                   >
-                    Count
-                    <span
-                      class="bp3-icon bp3-icon-filter"
-                      icon="filter"
+                    <svg
+                      data-icon="filter"
+                      height="14"
+                      viewBox="0 0 16 16"
+                      width="14"
                     >
-                      <svg
-                        data-icon="filter"
-                        height="14"
-                        viewBox="0 0 16 16"
-                        width="14"
-                      >
-                        <desc>
-                          filter
-                        </desc>
-                        <path
-                          d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </span>
+                      <desc>
+                        filter
+                      </desc>
+                      <path
+                        d="M13.99.99h-12a1.003 1.003 0 00-.71 1.71l4.71 4.71V14a1.003 1.003 0 001.71.71l2-2c.18-.18.29-.43.29-.71V7.41L14.7 2.7a1.003 1.003 0 00-.71-1.71z"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                </div>
               </span>
             </div>
             <div
@@ -121,17 +113,13 @@ exports[`query output matches snapshot 1`] = `
               class="rt-resizable-header-content"
             >
               <span
-                class="bp3-popover-wrapper clickable-cell"
+                class="clickable-cell bp3-popover2-target"
               >
-                <span
-                  class="bp3-popover-target"
+                <div
+                  class=""
                 >
-                  <div
-                    class=""
-                  >
-                    dist_language
-                  </div>
-                </span>
+                  dist_language
+                </div>
               </span>
             </div>
             <div
@@ -148,17 +136,13 @@ exports[`query output matches snapshot 1`] = `
               class="rt-resizable-header-content"
             >
               <span
-                class="bp3-popover-wrapper clickable-cell"
+                class="clickable-cell bp3-popover2-target"
               >
-                <span
-                  class="bp3-popover-target"
+                <div
+                  class=""
                 >
-                  <div
-                    class=""
-                  >
-                    language_filtered_count
-                  </div>
-                </span>
+                  language_filtered_count
+                </div>
               </span>
             </div>
             <div
@@ -186,16 +170,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell null"
                   >
-                    <span
-                      class="table-cell null"
-                    >
-                      null
-                    </span>
+                    null
                   </span>
                 </span>
               </div>
@@ -207,16 +187,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      6881
-                    </span>
+                    6881
                   </span>
                 </span>
               </div>
@@ -228,16 +204,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      1
-                    </span>
+                    1
                   </span>
                 </span>
               </div>
@@ -249,16 +221,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      0
-                    </span>
+                    0
                   </span>
                 </span>
               </div>
@@ -280,16 +248,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      JavaScript
-                    </span>
+                    JavaScript
                   </span>
                 </span>
               </div>
@@ -301,16 +265,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      166
-                    </span>
+                    166
                   </span>
                 </span>
               </div>
@@ -322,16 +282,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      1
-                    </span>
+                    1
                   </span>
                 </span>
               </div>
@@ -343,16 +299,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      0
-                    </span>
+                    0
                   </span>
                 </span>
               </div>
@@ -374,16 +326,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      Python
-                    </span>
+                    Python
                   </span>
                 </span>
               </div>
@@ -395,16 +343,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      62
-                    </span>
+                    62
                   </span>
                 </span>
               </div>
@@ -416,16 +360,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      1
-                    </span>
+                    1
                   </span>
                 </span>
               </div>
@@ -437,16 +377,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      0
-                    </span>
+                    0
                   </span>
                 </span>
               </div>
@@ -468,16 +404,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      HTML
-                    </span>
+                    HTML
                   </span>
                 </span>
               </div>
@@ -489,16 +421,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      46
-                    </span>
+                    46
                   </span>
                 </span>
               </div>
@@ -510,16 +438,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      1
-                    </span>
+                    1
                   </span>
                 </span>
               </div>
@@ -531,16 +455,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell plain"
                   >
-                    <span
-                      class="table-cell plain"
-                    >
-                      0
-                    </span>
+                    0
                   </span>
                 </span>
               </div>
@@ -562,16 +482,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell null"
                   >
-                    <span
-                      class="table-cell null"
-                    >
-                      null
-                    </span>
+                    null
                   </span>
                 </span>
               </div>
@@ -583,16 +499,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell null"
                   >
-                    <span
-                      class="table-cell null"
-                    >
-                      null
-                    </span>
+                    null
                   </span>
                 </span>
               </div>
@@ -604,16 +516,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell null"
                   >
-                    <span
-                      class="table-cell null"
-                    >
-                      null
-                    </span>
+                    null
                   </span>
                 </span>
               </div>
@@ -625,16 +533,12 @@ exports[`query output matches snapshot 1`] = `
             >
               <div>
                 <span
-                  class="bp3-popover-wrapper"
+                  class="bp3-popover2-target"
                 >
                   <span
-                    class="bp3-popover-target"
+                    class="table-cell null"
                   >
-                    <span
-                      class="table-cell null"
-                    >
-                      null
-                    </span>
+                    null
                   </span>
                 </span>
               </div>
diff --git a/web-console/src/views/query-view/query-output/query-output.tsx b/web-console/src/views/query-view/query-output/query-output.tsx
index 00bf6d7bfe79..504aba21b62d 100644
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Icon, Menu, MenuItem, Popover } from '@blueprintjs/core';
+import { Icon, Menu, MenuItem } from '@blueprintjs/core';
 import { IconName, IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import {
   QueryResult,
@@ -396,14 +397,14 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
                 ? () => <ColumnRenameInput initialName={h} onDone={renameColumnTo} />
                 : () => {
                     return (
-                      <Popover className="clickable-cell" content={getHeaderMenu(h, i)}>
+                      <Popover2 className="clickable-cell" content={getHeaderMenu(h, i)}>
                         <div>
                           {h}
                           {hasFilterOnHeader(h, i) && (
                             <Icon icon={IconNames.FILTER} iconSize={14} />
                           )}
                         </div>
-                      </Popover>
+                      </Popover2>
                     );
                   },
             headerClassName: getHeaderClassName(h, i),
@@ -412,7 +413,7 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
               const value = row.value;
               return (
                 <div>
-                  <Popover content={getCellMenu(h, i, value)}>
+                  <Popover2 content={getCellMenu(h, i, value)}>
                     {numericColumnBraces[i] ? (
                       <BracedText
                         text={String(value)}
@@ -422,7 +423,7 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
                     ) : (
                       <TableCell value={value} unlimited />
                     )}
-                  </Popover>
+                  </Popover2>
                 </div>
               );
             },
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
index 8cc01c91b877..4ba6f703befe 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { Code, Intent, Switch, Tooltip } from '@blueprintjs/core';
+import { Code, Intent, Switch } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
 import Hjson from 'hjson';
@@ -367,7 +368,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     if (QueryView.isJsonLike(queryString)) return;
 
     return (
-      <Tooltip
+      <Tooltip2
         content="Automatically wrap the query with a limit to protect against queries with very large result sets."
         hoverOpenDelay={800}
       >
@@ -377,7 +378,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
           label="Auto limit"
           onChange={() => this.handleWrapQueryLimitChange(wrapQueryLimit ? undefined : 100)}
         />
-      </Tooltip>
+      </Tooltip2>
     );
   }
 
diff --git a/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap b/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap
index 5aeeb88e860b..81c3d91700e7 100644
--- a/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap
+++ b/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap
@@ -36,36 +36,32 @@ exports[`run button matches snapshot loading state 1`] = `
     </span>
   </button>
   <span
-    class="bp3-popover-wrapper"
+    class="bp3-popover2-target"
   >
-    <span
-      class="bp3-popover-target"
+    <button
+      class="bp3-button bp3-intent-primary"
+      type="button"
     >
-      <button
-        class="bp3-button bp3-intent-primary"
-        type="button"
+      <span
+        class="bp3-icon bp3-icon-more"
+        icon="more"
       >
-        <span
-          class="bp3-icon bp3-icon-more"
-          icon="more"
+        <svg
+          data-icon="more"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         >
-          <svg
-            data-icon="more"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <desc>
-              more
-            </desc>
-            <path
-              d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-    </span>
+          <desc>
+            more
+          </desc>
+          <path
+            d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
   </span>
 </div>
 `;
@@ -104,36 +100,32 @@ exports[`run button matches snapshot non-loading state 1`] = `
     </span>
   </button>
   <span
-    class="bp3-popover-wrapper"
+    class="bp3-popover2-target"
   >
-    <span
-      class="bp3-popover-target"
+    <button
+      class="bp3-button bp3-intent-primary"
+      type="button"
     >
-      <button
-        class="bp3-button bp3-intent-primary"
-        type="button"
+      <span
+        class="bp3-icon bp3-icon-more"
+        icon="more"
       >
-        <span
-          class="bp3-icon bp3-icon-more"
-          icon="more"
+        <svg
+          data-icon="more"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         >
-          <svg
-            data-icon="more"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <desc>
-              more
-            </desc>
-            <path
-              d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-    </span>
+          <desc>
+            more
+          </desc>
+          <path
+            d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
   </span>
 </div>
 `;
diff --git a/web-console/src/views/query-view/run-button/run-button.tsx b/web-console/src/views/query-view/run-button/run-button.tsx
index 80b3ef8b819f..71cf661ea587 100644
--- a/web-console/src/views/query-view/run-button/run-button.tsx
+++ b/web-console/src/views/query-view/run-button/run-button.tsx
@@ -23,11 +23,11 @@ import {
   Menu,
   MenuDivider,
   MenuItem,
-  Popover,
   Position,
   useHotkeys,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { MenuCheckbox } from '../../../components';
@@ -184,13 +184,13 @@ export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
           disabled
         />
       )}
-      <Popover position={Position.BOTTOM_LEFT} content={<RunButtonExtraMenu {...props} />}>
+      <Popover2 position={Position.BOTTOM_LEFT} content={<RunButtonExtraMenu {...props} />}>
         <Button
           className={runeMode ? 'rune-button' : undefined}
           icon={IconNames.MORE}
           intent={onRun ? Intent.PRIMARY : undefined}
         />
-      </Popover>
+      </Popover2>
     </ButtonGroup>
   );
 });

From e0edac4bbe24755e3a9589ea1c079610badcb90c Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 14 Jun 2021 16:13:31 -0700
Subject: [PATCH 7/8] use resize sensor 2

---
 .../query-input/__snapshots__/query-input.spec.tsx.snap  | 4 ++--
 .../views/query-view/query-input/query-input.spec.tsx    | 2 +-
 .../src/views/query-view/query-input/query-input.tsx     | 9 +++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap b/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
index 15c562d50a61..ebd9270ebd75 100644
--- a/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
+++ b/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`query input correctly formats helper HTML 1`] = `
+exports[`QueryInput correctly formats helper HTML 1`] = `
 "
 <div class=\\"doc-name\\">COUNT</div>
 <div class=\\"doc-syntax\\">COUNT(*)</div>
 <div class=\\"doc-description\\">Counts the number of things</div>"
 `;
 
-exports[`query input matches snapshot 1`] = `
+exports[`QueryInput matches snapshot 1`] = `
 <div
   class="query-input"
 >
diff --git a/web-console/src/views/query-view/query-input/query-input.spec.tsx b/web-console/src/views/query-view/query-input/query-input.spec.tsx
index 62bcc8c709fe..4fca2a617848 100644
--- a/web-console/src/views/query-view/query-input/query-input.spec.tsx
+++ b/web-console/src/views/query-view/query-input/query-input.spec.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 
 import { QueryInput } from './query-input';
 
-describe('query input', () => {
+describe('QueryInput', () => {
   it('matches snapshot', () => {
     const sqlControl = (
       <QueryInput queryString="hello world" onQueryStringChange={() => {}} runeMode={false} />
diff --git a/web-console/src/views/query-view/query-input/query-input.tsx b/web-console/src/views/query-view/query-input/query-input.tsx
index 0ac52f02235f..57532937efae 100644
--- a/web-console/src/views/query-view/query-input/query-input.tsx
+++ b/web-console/src/views/query-view/query-input/query-input.tsx
@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { IResizeEntry, ResizeSensor } from '@blueprintjs/core';
+import { ResizeEntry } from '@blueprintjs/core';
+import { ResizeSensor2 } from '@blueprintjs/popover2';
 import ace, { Editor } from 'brace';
 import escape from 'lodash.escape';
 import React from 'react';
@@ -198,7 +199,7 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
     }
   }
 
-  private readonly handleAceContainerResize = (entries: IResizeEntry[]) => {
+  private readonly handleAceContainerResize = (entries: ResizeEntry[]) => {
     if (entries.length !== 1) return;
     this.setState({ editorHeight: entries[0].contentRect.height });
   };
@@ -228,7 +229,7 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
     // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
     return (
       <div className="query-input">
-        <ResizeSensor onResize={this.handleAceContainerResize}>
+        <ResizeSensor2 onResize={this.handleAceContainerResize}>
           <div className="ace-container">
             <AceEditor
               mode={runeMode ? 'hjson' : 'dsql'}
@@ -259,7 +260,7 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
               }}
             />
           </div>
-        </ResizeSensor>
+        </ResizeSensor2>
       </div>
     );
   }

From 30a15f9e09ad3737b2a6d9b9c75d7122ffa29a68 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 14 Jun 2021 16:30:45 -0700
Subject: [PATCH 8/8] misc cleanup

---
 .../src/components/auto-form/auto-form.scss   |  8 -------
 .../interval-input.spec.tsx.snap              |  2 +-
 .../interval-input/interval-input.scss        | 23 -------------------
 .../interval-input/interval-input.spec.tsx    |  2 +-
 .../interval-input/interval-input.tsx         |  2 --
 .../query-view/query-output/query-output.scss |  2 +-
 6 files changed, 3 insertions(+), 36 deletions(-)
 delete mode 100644 web-console/src/components/interval-input/interval-input.scss

diff --git a/web-console/src/components/auto-form/auto-form.scss b/web-console/src/components/auto-form/auto-form.scss
index b880b55e94e5..94ce1f32fef6 100644
--- a/web-console/src/components/auto-form/auto-form.scss
+++ b/web-console/src/components/auto-form/auto-form.scss
@@ -24,14 +24,6 @@
     .bp3-text-muted {
       position: absolute;
       right: 0;
-
-      .bp3-popover-wrapper {
-        display: inline;
-
-        .bp3-popover-target {
-          display: inline;
-        }
-      }
     }
   }
 }
diff --git a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
index 4f0a9f9fad57..2c1b95a5cc11 100644
--- a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
+++ b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`interval calendar component matches snapshot 1`] = `
+exports[`IntervalInput matches snapshot 1`] = `
 <div
   class="bp3-input-group bp3-intent-primary"
 >
diff --git a/web-console/src/components/interval-input/interval-input.scss b/web-console/src/components/interval-input/interval-input.scss
deleted file mode 100644
index f07522cd181c..000000000000
--- a/web-console/src/components/interval-input/interval-input.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * 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.
- */
-
-.calendar {
-  .bp3-popover-content {
-    right: 310px;
-  }
-}
diff --git a/web-console/src/components/interval-input/interval-input.spec.tsx b/web-console/src/components/interval-input/interval-input.spec.tsx
index 9900566d2e9b..3af6cb78f301 100644
--- a/web-console/src/components/interval-input/interval-input.spec.tsx
+++ b/web-console/src/components/interval-input/interval-input.spec.tsx
@@ -22,7 +22,7 @@ import React from 'react';
 
 import { IntervalInput } from './interval-input';
 
-describe('interval calendar component', () => {
+describe('IntervalInput', () => {
   it('matches snapshot', () => {
     const intervalInput = (
       <IntervalInput
diff --git a/web-console/src/components/interval-input/interval-input.tsx b/web-console/src/components/interval-input/interval-input.tsx
index f72f2ba92067..716806bfa8c3 100644
--- a/web-console/src/components/interval-input/interval-input.tsx
+++ b/web-console/src/components/interval-input/interval-input.tsx
@@ -22,8 +22,6 @@ import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
-import './interval-input.scss';
-
 const CURRENT_YEAR = new Date().getUTCFullYear();
 
 function removeLocalTimezone(localDate: Date): Date {
diff --git a/web-console/src/views/query-view/query-output/query-output.scss b/web-console/src/views/query-view/query-output/query-output.scss
index 1340c09ede25..0e2eeaa0b95d 100644
--- a/web-console/src/views/query-view/query-output/query-output.scss
+++ b/web-console/src/views/query-view/query-output/query-output.scss
@@ -69,7 +69,7 @@
     width: 100%;
   }
 
-  .bp3-popover-target {
+  .bp3-popover2-target {
     width: 100%;
   }