From 655ad1e2c15cd8bc91bb2b09daa2fc5d067b00fe Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Sat, 1 Oct 2022 20:21:39 -0700
Subject: [PATCH 01/10] remove old query view

---
 .../src/components/header-bar/header-bar.tsx  |    8 +-
 .../record-table-pane/record-table-pane.tsx   |    2 +-
 web-console/src/console-application.tsx       |   21 +-
 web-console/src/utils/local-storage-keys.tsx  |    1 -
 web-console/src/views/index.ts                |    1 -
 .../__snapshots__/query-view.spec.tsx.snap    |  163 --
 .../live-query-mode-button.spec.tsx.snap      |  153 --
 .../live-query-mode-button.scss               |   40 -
 .../live-query-mode-button.spec.tsx           |   48 -
 .../live-query-mode-button.tsx                |   80 -
 .../query-extra-info.spec.tsx.snap            |   51 -
 .../query-extra-info/query-extra-info.scss    |   29 -
 .../query-extra-info.spec.tsx                 |   40 -
 .../query-extra-info/query-extra-info.tsx     |  108 --
 .../query-history-dialog.spec.tsx.snap        |   98 --
 .../query-history-dialog.scss                 |   39 -
 .../query-history-dialog.spec.tsx             |   32 -
 .../query-history-dialog.tsx                  |   88 -
 .../__snapshots__/query-input.spec.tsx.snap   |  111 --
 .../query-view/query-input/query-input.scss   |   27 -
 .../query-input/query-input.spec.tsx          |   43 -
 .../query-view/query-input/query-input.tsx    |  279 ----
 .../__snapshots__/query-output.spec.tsx.snap  | 1461 -----------------
 .../column-rename-input.spec.tsx.snap         |   13 -
 .../column-rename-input.spec.tsx              |   30 -
 .../column-rename-input.tsx                   |   62 -
 .../query-view/query-output/query-output.scss |   76 -
 .../query-output/query-output.spec.tsx        |   61 -
 .../query-view/query-output/query-output.tsx  |  422 -----
 .../__snapshots__/query-timer.spec.tsx.snap   |   32 -
 .../query-view/query-timer/query-timer.scss   |   23 -
 .../query-timer/query-timer.spec.tsx          |   42 -
 .../query-view/query-timer/query-timer.tsx    |   48 -
 .../src/views/query-view/query-view.scss      |  125 --
 .../src/views/query-view/query-view.spec.tsx  |   34 -
 .../src/views/query-view/query-view.tsx       |  617 -------
 .../__snapshots__/run-button.spec.tsx.snap    |  129 --
 .../query-view/run-button/run-button.scss     |   23 -
 .../query-view/run-button/run-button.spec.tsx |   62 -
 .../query-view/run-button/run-button.tsx      |  196 ---
 .../preview-table/preview-table.tsx           |    2 +-
 .../__snapshots__/column-tree.spec.tsx.snap   |    0
 .../column-tree/column-tree-menu/index.ts     |    0
 .../number-menu-items.spec.tsx.snap           |    0
 .../number-menu-items.spec.tsx                |    0
 .../number-menu-items/number-menu-items.tsx   |    0
 .../string-menu-items.spec.tsx.snap           |    0
 .../string-menu-items.spec.tsx                |    0
 .../string-menu-items/string-menu-items.tsx   |    0
 .../time-menu-items.spec.tsx.snap             |    0
 .../time-menu-items/time-menu-items.spec.tsx  |    0
 .../time-menu-items/time-menu-items.tsx       |    0
 .../column-tree/column-tree.scss              |    0
 .../column-tree/column-tree.spec.tsx          |    0
 .../column-tree/column-tree.tsx               |    0
 .../explain-dialog.spec.tsx.snap              |    0
 .../explain-dialog/explain-dialog.scss        |    2 +-
 .../explain-dialog/explain-dialog.spec.tsx    |    0
 .../explain-dialog/explain-dialog.tsx         |    0
 .../result-table-pane/result-table-pane.tsx   |    2 +-
 .../views/workbench-view/workbench-view.tsx   |    4 +-
 61 files changed, 11 insertions(+), 4917 deletions(-)
 delete mode 100644 web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss
 delete mode 100644 web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx
 delete mode 100644 web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx
 delete mode 100644 web-console/src/views/query-view/query-extra-info/__snapshots__/query-extra-info.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/query-extra-info/query-extra-info.scss
 delete mode 100644 web-console/src/views/query-view/query-extra-info/query-extra-info.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-extra-info/query-extra-info.tsx
 delete mode 100644 web-console/src/views/query-view/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss
 delete mode 100644 web-console/src/views/query-view/query-history-dialog/query-history-dialog.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx
 delete mode 100644 web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/query-input/query-input.scss
 delete mode 100644 web-console/src/views/query-view/query-input/query-input.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-input/query-input.tsx
 delete mode 100644 web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/query-output/column-rename-input/__snapshots__/column-rename-input.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx
 delete mode 100644 web-console/src/views/query-view/query-output/query-output.scss
 delete mode 100644 web-console/src/views/query-view/query-output/query-output.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-output/query-output.tsx
 delete mode 100644 web-console/src/views/query-view/query-timer/__snapshots__/query-timer.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/query-timer/query-timer.scss
 delete mode 100644 web-console/src/views/query-view/query-timer/query-timer.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-timer/query-timer.tsx
 delete mode 100644 web-console/src/views/query-view/query-view.scss
 delete mode 100644 web-console/src/views/query-view/query-view.spec.tsx
 delete mode 100644 web-console/src/views/query-view/query-view.tsx
 delete mode 100644 web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap
 delete mode 100644 web-console/src/views/query-view/run-button/run-button.scss
 delete mode 100644 web-console/src/views/query-view/run-button/run-button.spec.tsx
 delete mode 100644 web-console/src/views/query-view/run-button/run-button.tsx
 rename web-console/src/views/{query-view => workbench-view}/column-tree/__snapshots__/column-tree.spec.tsx.snap (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/index.ts (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree.scss (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree.spec.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/column-tree/column-tree.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap (100%)
 rename web-console/src/views/{query-view => workbench-view}/explain-dialog/explain-dialog.scss (98%)
 rename web-console/src/views/{query-view => workbench-view}/explain-dialog/explain-dialog.spec.tsx (100%)
 rename web-console/src/views/{query-view => workbench-view}/explain-dialog/explain-dialog.tsx (100%)

diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 4f4c9ff922c9..d7d2b1526306 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -65,7 +65,6 @@ export type HeaderActiveTab =
   | 'datasources'
   | 'segments'
   | 'services'
-  | 'query'
   | 'workbench'
   | 'sql-data-loader'
   | 'lookups';
@@ -388,16 +387,11 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         <AnchorButton
           className="header-entry"
           minimal
-          active={oneOf(active, 'workbench', 'query')}
+          active={active === 'workbench'}
           icon={IconNames.APPLICATION}
           text="Query"
           href="#workbench"
           disabled={!capabilities.hasQuerying()}
-          onClick={e => {
-            if (!e.altKey) return;
-            e.preventDefault();
-            location.hash = '#query';
-          }}
         />
         {showSplitDataLoaderMenu ? (
           <Popover2
diff --git a/web-console/src/components/record-table-pane/record-table-pane.tsx b/web-console/src/components/record-table-pane/record-table-pane.tsx
index 699a4424d43c..a27de551e741 100644
--- a/web-console/src/components/record-table-pane/record-table-pane.tsx
+++ b/web-console/src/components/record-table-pane/record-table-pane.tsx
@@ -149,7 +149,7 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
       const jsonColumn = column.nativeType === 'COMPLEX<json>';
       return (
         <Menu>
-          {ex && val && !jsonColumn && (
+          {ex?.getFirstColumn() && val && !jsonColumn && (
             <>
               {filterOnMenuItem(IconNames.FILTER, ex.equal(val))}
               {filterOnMenuItem(IconNames.FILTER, ex.unequal(val))}
diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index d5dc61cebc9f..02845835dd1b 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -20,7 +20,7 @@ import { HotkeysProvider, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
-import { RouteComponentProps } from 'react-router';
+import { Redirect, RouteComponentProps } from 'react-router';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import { HeaderActiveTab, HeaderBar, Loader } from './components';
@@ -33,7 +33,6 @@ import {
   IngestionView,
   LoadDataView,
   LookupsView,
-  QueryView,
   SegmentsView,
   ServicesView,
   SqlDataLoaderView,
@@ -245,20 +244,6 @@ export class ConsoleApplication extends React.PureComponent<
     );
   };
 
-  private readonly wrappedQueryView = () => {
-    const { defaultQueryContext, mandatoryQueryContext } = this.props;
-
-    return this.wrapInViewContainer(
-      'query',
-      <QueryView
-        initQuery={this.queryWithContext?.queryString}
-        defaultQueryContext={defaultQueryContext}
-        mandatoryQueryContext={mandatoryQueryContext}
-      />,
-      'thin',
-    );
-  };
-
   private readonly wrappedWorkbenchView = (p: RouteComponentProps<any>) => {
     const { defaultQueryContext, mandatoryQueryContext } = this.props;
     const { capabilities } = this.state;
@@ -384,7 +369,9 @@ export class ConsoleApplication extends React.PureComponent<
               <Route path="/segments" component={this.wrappedSegmentsView} />
               <Route path="/services" component={this.wrappedServicesView} />
 
-              <Route path="/query" component={this.wrappedQueryView} />
+              <Route path="/query">
+                <Redirect to="/workbench" />
+              </Route>
               <Route
                 path={['/workbench/:tabId', '/workbench']}
                 component={this.wrappedWorkbenchView}
diff --git a/web-console/src/utils/local-storage-keys.tsx b/web-console/src/utils/local-storage-keys.tsx
index d218d4b18a78..81c8266bbdef 100644
--- a/web-console/src/utils/local-storage-keys.tsx
+++ b/web-console/src/utils/local-storage-keys.tsx
@@ -40,7 +40,6 @@ export const LocalStorageKeys = {
   QUERY_KEY: 'druid-console-query' as const,
   QUERY_CONTEXT: 'query-context' as const,
   INGESTION_VIEW_PANE_SIZE: 'ingestion-view-pane-size' as const,
-  QUERY_VIEW_PANE_SIZE: 'query-view-pane-size' as const,
   TASKS_REFRESH_RATE: 'task-refresh-rate' as const,
   DATASOURCES_REFRESH_RATE: 'datasources-refresh-rate' as const,
   SEGMENTS_REFRESH_RATE: 'segments-refresh-rate' as const,
diff --git a/web-console/src/views/index.ts b/web-console/src/views/index.ts
index 7af1b655428e..7a6fc865180e 100644
--- a/web-console/src/views/index.ts
+++ b/web-console/src/views/index.ts
@@ -21,7 +21,6 @@ export * from './home-view/home-view';
 export * from './ingestion-view/ingestion-view';
 export * from './load-data-view/load-data-view';
 export * from './lookups-view/lookups-view';
-export * from './query-view/query-view';
 export * from './segments-view/segments-view';
 export * from './services-view/services-view';
 export * from './sql-data-loader-view/sql-data-loader-view';
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
deleted file mode 100644
index 8a6434621155..000000000000
--- a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
+++ /dev/null
@@ -1,163 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`QueryView matches snapshot 1`] = `
-<div
-  className="query-view app-view"
->
-  <ColumnTree
-    columnMetadataLoading={true}
-    defaultSchema="druid"
-    defaultWhere={"__time >= CURRENT_TIMESTAMP - INTERVAL '1' DAY"}
-    getParsedQuery={[Function]}
-    onQueryChange={[Function]}
-  />
-  <t
-    customClassName=""
-    onDragEnd={null}
-    onDragStart={null}
-    onSecondaryPaneSizeChange={[Function]}
-    percentage={true}
-    primaryIndex={0}
-    primaryMinSize={30}
-    secondaryInitialSize={60}
-    secondaryMinSize={30}
-    vertical={true}
-  >
-    <div
-      className="control-pane"
-    >
-      <QueryInput
-        currentSchema="druid"
-        onQueryStringChange={[Function]}
-        queryString="test"
-        runeMode={false}
-      />
-      <div
-        className="query-control-bar"
-      >
-        <Memo(RunButton)
-          loading={true}
-          onEditContext={[Function]}
-          onExplain={[Function]}
-          onHistory={[Function]}
-          onPrettier={[Function]}
-          onQueryContextChange={[Function]}
-          onRun={[Function]}
-          queryContext={Object {}}
-          runeMode={false}
-        />
-        <Blueprint4.Tooltip2
-          content="Automatically wrap the query with a limit to protect against queries with very large result sets."
-          hoverCloseDelay={0}
-          hoverOpenDelay={800}
-          minimal={false}
-          transitionDuration={100}
-        >
-          <Blueprint4.Switch
-            checked={true}
-            className="auto-limit"
-            label="Auto limit"
-            onChange={[Function]}
-          />
-        </Blueprint4.Tooltip2>
-        <Memo(LiveQueryModeButton)
-          autoLiveQueryModeShouldRun={true}
-          liveQueryMode="auto"
-          minimal={true}
-          onLiveQueryModeChange={[Function]}
-        />
-        <Memo(QueryTimer) />
-      </div>
-    </div>
-    <div
-      className="output-pane"
-    >
-      <Memo(Loader)
-        cancelText="Cancel query"
-        onCancel={[Function]}
-      />
-    </div>
-  </t>
-</div>
-`;
-
-exports[`QueryView matches snapshot with query 1`] = `
-<div
-  className="query-view app-view"
->
-  <ColumnTree
-    columnMetadataLoading={true}
-    defaultSchema="druid"
-    defaultWhere={"__time >= CURRENT_TIMESTAMP - INTERVAL '1' DAY"}
-    getParsedQuery={[Function]}
-    onQueryChange={[Function]}
-  />
-  <t
-    customClassName=""
-    onDragEnd={null}
-    onDragStart={null}
-    onSecondaryPaneSizeChange={[Function]}
-    percentage={true}
-    primaryIndex={0}
-    primaryMinSize={30}
-    secondaryInitialSize={60}
-    secondaryMinSize={30}
-    vertical={true}
-  >
-    <div
-      className="control-pane"
-    >
-      <QueryInput
-        currentSchema="druid"
-        onQueryStringChange={[Function]}
-        queryString="SELECT +3"
-        runeMode={false}
-      />
-      <div
-        className="query-control-bar"
-      >
-        <Memo(RunButton)
-          loading={true}
-          onEditContext={[Function]}
-          onExplain={[Function]}
-          onHistory={[Function]}
-          onPrettier={[Function]}
-          onQueryContextChange={[Function]}
-          onRun={[Function]}
-          queryContext={Object {}}
-          runeMode={false}
-        />
-        <Blueprint4.Tooltip2
-          content="Automatically wrap the query with a limit to protect against queries with very large result sets."
-          hoverCloseDelay={0}
-          hoverOpenDelay={800}
-          minimal={false}
-          transitionDuration={100}
-        >
-          <Blueprint4.Switch
-            checked={true}
-            className="auto-limit"
-            label="Auto limit"
-            onChange={[Function]}
-          />
-        </Blueprint4.Tooltip2>
-        <Memo(LiveQueryModeButton)
-          autoLiveQueryModeShouldRun={true}
-          liveQueryMode="auto"
-          minimal={true}
-          onLiveQueryModeChange={[Function]}
-        />
-        <Memo(QueryTimer) />
-      </div>
-    </div>
-    <div
-      className="output-pane"
-    >
-      <Memo(Loader)
-        cancelText="Cancel query"
-        onCancel={[Function]}
-      />
-    </div>
-  </t>
-</div>
-`;
diff --git a/web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap b/web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap
deleted file mode 100644
index dab20a797f6a..000000000000
--- a/web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap
+++ /dev/null
@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LiveQueryModeButton matches snapshot auto 1`] = `
-<Blueprint4.Popover2
-  boundary="clippingParents"
-  captureDismiss={false}
-  content={
-    <Blueprint4.Menu>
-      <Blueprint4.MenuItem
-        active={false}
-        className="auto auto-on"
-        disabled={false}
-        icon="tick"
-        multiline={false}
-        onClick={[Function]}
-        popoverProps={Object {}}
-        selected={false}
-        shouldDismissPopover={true}
-        text="Auto"
-      />
-      <Blueprint4.MenuItem
-        active={false}
-        className="on"
-        disabled={false}
-        icon="blank"
-        multiline={false}
-        onClick={[Function]}
-        popoverProps={Object {}}
-        selected={false}
-        shouldDismissPopover={true}
-        text="On"
-      />
-      <Blueprint4.MenuItem
-        active={false}
-        className="off"
-        disabled={false}
-        icon="blank"
-        multiline={false}
-        onClick={[Function]}
-        popoverProps={Object {}}
-        selected={false}
-        shouldDismissPopover={true}
-        text="Off"
-      />
-    </Blueprint4.Menu>
-  }
-  defaultIsOpen={false}
-  disabled={false}
-  fill={false}
-  hasBackdrop={false}
-  hoverCloseDelay={300}
-  hoverOpenDelay={150}
-  inheritDarkTheme={true}
-  interactionKind="click"
-  minimal={false}
-  openOnTargetFocus={true}
-  portalClassName="live-query-mode-button-portal"
-  position="bottom-left"
-  positioningStrategy="absolute"
-  shouldReturnFocusOnClose={false}
-  targetTagName="span"
-  transitionDuration={300}
-  usePortal={true}
->
-  <Blueprint4.Button
-    className="live-query-mode-button"
-  >
-    Live query:
-     
-    <span
-      className="auto auto-on"
-    >
-      Auto
-    </span>
-  </Blueprint4.Button>
-</Blueprint4.Popover2>
-`;
-
-exports[`LiveQueryModeButton matches snapshot on 1`] = `
-<Blueprint4.Popover2
-  boundary="clippingParents"
-  captureDismiss={false}
-  content={
-    <Blueprint4.Menu>
-      <Blueprint4.MenuItem
-        active={false}
-        className="auto auto-on"
-        disabled={false}
-        icon="blank"
-        multiline={false}
-        onClick={[Function]}
-        popoverProps={Object {}}
-        selected={false}
-        shouldDismissPopover={true}
-        text="Auto"
-      />
-      <Blueprint4.MenuItem
-        active={false}
-        className="on"
-        disabled={false}
-        icon="tick"
-        multiline={false}
-        onClick={[Function]}
-        popoverProps={Object {}}
-        selected={false}
-        shouldDismissPopover={true}
-        text="On"
-      />
-      <Blueprint4.MenuItem
-        active={false}
-        className="off"
-        disabled={false}
-        icon="blank"
-        multiline={false}
-        onClick={[Function]}
-        popoverProps={Object {}}
-        selected={false}
-        shouldDismissPopover={true}
-        text="Off"
-      />
-    </Blueprint4.Menu>
-  }
-  defaultIsOpen={false}
-  disabled={false}
-  fill={false}
-  hasBackdrop={false}
-  hoverCloseDelay={300}
-  hoverOpenDelay={150}
-  inheritDarkTheme={true}
-  interactionKind="click"
-  minimal={false}
-  openOnTargetFocus={true}
-  portalClassName="live-query-mode-button-portal"
-  position="bottom-left"
-  positioningStrategy="absolute"
-  shouldReturnFocusOnClose={false}
-  targetTagName="span"
-  transitionDuration={300}
-  usePortal={true}
->
-  <Blueprint4.Button
-    className="live-query-mode-button"
-  >
-    Live query:
-     
-    <span
-      className="on auto-on"
-    >
-      On
-    </span>
-  </Blueprint4.Button>
-</Blueprint4.Popover2>
-`;
diff --git a/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss
deleted file mode 100644
index b6c257a20ee3..000000000000
--- a/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss
+++ /dev/null
@@ -1,40 +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 '../../../variables';
-@import '../../../blueprint-overrides/common/colors';
-
-.live-query-mode-button {
-  .auto.auto-on {
-    color: $druid-brand;
-  }
-
-  .on {
-    color: $druid-brand;
-  }
-}
-
-.live-query-mode-button-portal {
-  .auto.auto-on .#{$bp-ns}-text-overflow-ellipsis {
-    color: $druid-brand;
-  }
-
-  .on .#{$bp-ns}-text-overflow-ellipsis {
-    color: $druid-brand;
-  }
-}
diff --git a/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx
deleted file mode 100644
index f49a5caaa5f3..000000000000
--- a/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx
+++ /dev/null
@@ -1,48 +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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { LiveQueryModeButton } from './live-query-mode-button';
-
-describe('LiveQueryModeButton', () => {
-  it('matches snapshot on', () => {
-    const liveQueryModeSelector = shallow(
-      <LiveQueryModeButton
-        liveQueryMode="on"
-        onLiveQueryModeChange={() => {}}
-        autoLiveQueryModeShouldRun
-      />,
-    );
-
-    expect(liveQueryModeSelector).toMatchSnapshot();
-  });
-
-  it('matches snapshot auto', () => {
-    const liveQueryModeSelector = shallow(
-      <LiveQueryModeButton
-        liveQueryMode="auto"
-        onLiveQueryModeChange={() => {}}
-        autoLiveQueryModeShouldRun
-      />,
-    );
-
-    expect(liveQueryModeSelector).toMatchSnapshot();
-  });
-});
diff --git a/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx
deleted file mode 100644
index cae6f3a62de1..000000000000
--- a/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx
+++ /dev/null
@@ -1,80 +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, Menu, MenuItem, PopoverPosition } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
-import classNames from 'classnames';
-import React from 'react';
-
-import { tickIcon } from '../../../utils';
-
-import './live-query-mode-button.scss';
-
-export type LiveQueryMode = 'auto' | 'on' | 'off';
-export const LIVE_QUERY_MODES: LiveQueryMode[] = ['auto', 'on', 'off'];
-export const LIVE_QUERY_MODE_TITLE: Record<LiveQueryMode, string> = {
-  auto: 'Auto',
-  on: 'On',
-  off: 'Off',
-};
-
-export interface LiveQueryModeButtonProps {
-  liveQueryMode: LiveQueryMode;
-  onLiveQueryModeChange(liveQueryMode: LiveQueryMode): void;
-  autoLiveQueryModeShouldRun: boolean;
-  minimal?: boolean;
-}
-
-export const LiveQueryModeButton = React.memo(function LiveQueryModeButton(
-  props: LiveQueryModeButtonProps,
-) {
-  const { liveQueryMode, onLiveQueryModeChange, autoLiveQueryModeShouldRun, minimal } = props;
-
-  return (
-    <Popover2
-      portalClassName="live-query-mode-button-portal"
-      minimal={minimal}
-      position={PopoverPosition.BOTTOM_LEFT}
-      content={
-        <Menu>
-          {LIVE_QUERY_MODES.map(m => (
-            <MenuItem
-              className={classNames(
-                m,
-                m === 'auto' ? (autoLiveQueryModeShouldRun ? 'auto-on' : 'auto-off') : undefined,
-              )}
-              key={m}
-              icon={tickIcon(m === liveQueryMode)}
-              text={LIVE_QUERY_MODE_TITLE[m]}
-              onClick={() => onLiveQueryModeChange(m)}
-            />
-          ))}
-        </Menu>
-      }
-    >
-      <Button className="live-query-mode-button" minimal={minimal}>
-        Live query:{' '}
-        <span
-          className={classNames(liveQueryMode, autoLiveQueryModeShouldRun ? 'auto-on' : 'auto-off')}
-        >
-          {LIVE_QUERY_MODE_TITLE[liveQueryMode]}
-        </span>
-      </Button>
-    </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
deleted file mode 100644
index 0c0bb065ee03..000000000000
--- a/web-console/src/views/query-view/query-extra-info/__snapshots__/query-extra-info.spec.tsx.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`QueryExtraInfo matches snapshot 1`] = `
-<div
-  class="query-extra-info"
->
-  <div
-    class="query-info"
-  >
-    <span
-      aria-haspopup="true"
-      class="bp4-popover2-target"
-    >
-      <span
-        class=""
-        tabindex="0"
-      >
-        0 results in 8.00s
-      </span>
-    </span>
-  </div>
-  <span
-    aria-haspopup="true"
-    class="download-button bp4-popover2-target"
-  >
-    <button
-      class="bp4-button bp4-minimal"
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-        class="bp4-icon bp4-icon-download"
-        icon="download"
-        tabindex="0"
-      >
-        <svg
-          data-icon="download"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <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.scss b/web-console/src/views/query-view/query-extra-info/query-extra-info.scss
deleted file mode 100644
index 3b16a5d8e7df..000000000000
--- a/web-console/src/views/query-view/query-extra-info/query-extra-info.scss
+++ /dev/null
@@ -1,29 +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.
- */
-
-.query-extra-info {
-  & > * {
-    display: inline-block;
-  }
-
-  .query-info {
-    line-height: 30px;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-}
diff --git a/web-console/src/views/query-view/query-extra-info/query-extra-info.spec.tsx b/web-console/src/views/query-view/query-extra-info/query-extra-info.spec.tsx
deleted file mode 100644
index 118c9cf5b782..000000000000
--- a/web-console/src/views/query-view/query-extra-info/query-extra-info.spec.tsx
+++ /dev/null
@@ -1,40 +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 { render } from '@testing-library/react';
-import { QueryResult } from 'druid-query-toolkit';
-import React from 'react';
-
-import { QueryExtraInfo } from './query-extra-info';
-
-describe('QueryExtraInfo', () => {
-  it('matches snapshot', () => {
-    const queryExtraInfo = (
-      <QueryExtraInfo
-        queryResult={QueryResult.BLANK.attachQueryId(
-          'e3ee781b-c0b6-4385-9d99-a8a1994bebac',
-        ).changeQueryDuration(8000)}
-        onDownload={() => {}}
-        onLoadMore={() => {}}
-      />
-    );
-
-    const { container } = render(queryExtraInfo);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
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
deleted file mode 100644
index ce3996685b15..000000000000
--- a/web-console/src/views/query-view/query-extra-info/query-extra-info.tsx
+++ /dev/null
@@ -1,108 +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, 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';
-
-import { AppToaster } from '../../../singletons';
-import { pluralIfNeeded } from '../../../utils';
-
-import './query-extra-info.scss';
-
-export interface QueryExtraInfoProps {
-  queryResult: QueryResult;
-  onDownload: (filename: string, format: string) => void;
-  onLoadMore: () => void;
-}
-
-export const QueryExtraInfo = React.memo(function QueryExtraInfo(props: QueryExtraInfoProps) {
-  const { queryResult, onDownload, onLoadMore } = props;
-  const wrapQueryLimit = queryResult.getSqlOuterLimit();
-  const hasMoreResults = queryResult.getNumResults() === wrapQueryLimit;
-
-  function handleQueryInfoClick(e: MouseEvent<HTMLDivElement>) {
-    if (e.altKey) {
-      if (hasMoreResults) {
-        onLoadMore();
-      }
-    } else {
-      const id = queryResult.queryId || queryResult.sqlQueryId;
-      if (!id) return;
-
-      copy(id, { format: 'text/plain' });
-      AppToaster.show({
-        message: 'Query ID copied to clipboard',
-        intent: Intent.SUCCESS,
-      });
-    }
-  }
-
-  function handleDownload(format: string) {
-    const id = queryResult.queryId || queryResult.sqlQueryId;
-    if (!id) return;
-
-    onDownload(`query-${id}.${format}`, format);
-  }
-
-  const downloadMenu = (
-    <Menu className="download-format-menu">
-      <MenuDivider title="Download as:" />
-      <MenuItem text="CSV" onClick={() => handleDownload('csv')} />
-      <MenuItem text="TSV" onClick={() => handleDownload('tsv')} />
-      <MenuItem text="JSON (new line delimited)" onClick={() => handleDownload('json')} />
-    </Menu>
-  );
-
-  const resultCount = hasMoreResults
-    ? `${queryResult.getNumResults() - 1}+ results`
-    : pluralIfNeeded(queryResult.getNumResults(), 'result');
-
-  let tooltipContent: JSX.Element | undefined;
-  if (queryResult.queryId) {
-    tooltipContent = (
-      <>
-        Query ID: <strong>{queryResult.queryId}</strong> (click to copy)
-      </>
-    );
-  } else if (queryResult.sqlQueryId) {
-    tooltipContent = (
-      <>
-        SQL query ID: <strong>{queryResult.sqlQueryId}</strong> (click to copy)
-      </>
-    );
-  }
-
-  return (
-    <div className="query-extra-info">
-      {typeof queryResult.queryDuration !== 'undefined' && (
-        <div className="query-info" onClick={handleQueryInfoClick}>
-          <Tooltip2 content={tooltipContent} hoverOpenDelay={500} placement="top-start">
-            {`${resultCount} in ${(queryResult.queryDuration / 1000).toFixed(2)}s`}
-          </Tooltip2>
-        </div>
-      )}
-      <Popover2 className="download-button" content={downloadMenu} position={Position.BOTTOM_RIGHT}>
-        <Button icon={IconNames.DOWNLOAD} minimal />
-      </Popover2>
-    </div>
-  );
-});
diff --git a/web-console/src/views/query-view/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap b/web-console/src/views/query-view/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
deleted file mode 100644
index a833c85c1a50..000000000000
--- a/web-console/src/views/query-view/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
+++ /dev/null
@@ -1,98 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`QueryHistoryDialog matches snapshot 1`] = `
-<div
-  class="bp4-portal"
->
-  <div
-    aria-live="polite"
-    class="bp4-overlay bp4-overlay-open bp4-overlay-scroll-container"
-  >
-    <div
-      class="bp4-overlay-start-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
-      tabindex="0"
-    />
-    <div
-      class="bp4-overlay-backdrop bp4-overlay-appear bp4-overlay-appear-active"
-    />
-    <div
-      class="bp4-dialog-container bp4-overlay-content bp4-overlay-appear bp4-overlay-appear-active"
-    >
-      <div
-        aria-labelledby="title-bp-dialog-0"
-        class="bp4-dialog query-history-dialog"
-        role="dialog"
-      >
-        <div
-          class="bp4-dialog-header"
-        >
-          <h4
-            class="bp4-heading"
-            id="title-bp-dialog-0"
-          >
-            Query history
-          </h4>
-          <button
-            aria-label="Close"
-            class="bp4-button bp4-minimal bp4-dialog-close-button"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="bp4-icon bp4-icon-small-cross"
-              icon="small-cross"
-            >
-              <svg
-                data-icon="small-cross"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <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="bp4-dialog-body"
-        >
-          <div
-            class="center-message bp4-input"
-          >
-            <div
-              class="center-message-inner"
-            >
-              The query history is empty.
-            </div>
-          </div>
-        </div>
-        <div
-          class="bp4-dialog-footer"
-        >
-          <div
-            class="bp4-dialog-footer-actions"
-          >
-            <button
-              class="bp4-button"
-              type="button"
-            >
-              <span
-                class="bp4-button-text"
-              >
-                Close
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="bp4-overlay-end-focus-trap bp4-overlay-appear bp4-overlay-appear-active"
-      tabindex="0"
-    />
-  </div>
-</div>
-`;
diff --git a/web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss
deleted file mode 100644
index b18f74f8fdbf..000000000000
--- a/web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss
+++ /dev/null
@@ -1,39 +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 '../../../variables';
-
-.query-history-dialog {
-  &.#{$bp-ns}-dialog {
-    width: 900px;
-  }
-
-  .panel {
-    width: 100%;
-  }
-
-  .text-area {
-    width: 100%;
-    height: 500px;
-    resize: none;
-  }
-
-  .center-message {
-    height: 400px;
-  }
-}
diff --git a/web-console/src/views/query-view/query-history-dialog/query-history-dialog.spec.tsx b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.spec.tsx
deleted file mode 100644
index e5cd42d74d1b..000000000000
--- a/web-console/src/views/query-view/query-history-dialog/query-history-dialog.spec.tsx
+++ /dev/null
@@ -1,32 +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 { render } from '@testing-library/react';
-import React from 'react';
-
-import { QueryHistoryDialog } from './query-history-dialog';
-
-describe('QueryHistoryDialog', () => {
-  it('matches snapshot', () => {
-    const queryPlanDialog = (
-      <QueryHistoryDialog setQueryString={() => null} queryRecords={[]} onClose={() => {}} />
-    );
-    render(queryPlanDialog);
-    expect(document.body.lastChild).toMatchSnapshot();
-  });
-});
diff --git a/web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx
deleted file mode 100644
index df7dbc8a080c..000000000000
--- a/web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx
+++ /dev/null
@@ -1,88 +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, Intent, Tab, Tabs, TextArea } from '@blueprintjs/core';
-import React, { useState } from 'react';
-
-import { CenterMessage } from '../../../components';
-import { QueryRecord } from '../../../utils/query-history';
-
-import './query-history-dialog.scss';
-
-export interface QueryHistoryDialogProps {
-  queryRecords: readonly QueryRecord[];
-  setQueryString: (queryString: string, queryContext: Record<string, any>) => void;
-  onClose: () => void;
-}
-
-export const QueryHistoryDialog = React.memo(function QueryHistoryDialog(
-  props: QueryHistoryDialogProps,
-) {
-  const [activeTab, setActiveTab] = useState(0);
-  const { queryRecords, setQueryString, onClose } = props;
-
-  function handleSelect() {
-    const queryRecord = queryRecords[activeTab];
-    setQueryString(queryRecord.queryString, queryRecord.queryContext || {});
-    onClose();
-  }
-
-  function renderContent(): JSX.Element {
-    if (!queryRecords.length) {
-      return <CenterMessage>The query history is empty.</CenterMessage>;
-    }
-
-    const versions = queryRecords.map((record, index) => (
-      <Tab
-        id={index}
-        key={index}
-        title={record.version}
-        panel={<TextArea readOnly value={record.queryString} className="text-area" />}
-        panelClassName="panel"
-      />
-    ));
-
-    return (
-      <Tabs
-        animate
-        renderActiveTabPanelOnly
-        vertical
-        className="tab-area"
-        selectedTabId={activeTab}
-        onChange={(t: number) => setActiveTab(t)}
-      >
-        {versions}
-        <Tabs.Expander />
-      </Tabs>
-    );
-  }
-
-  return (
-    <Dialog className="query-history-dialog" isOpen onClose={onClose} title="Query history">
-      <div className={Classes.DIALOG_BODY}>{renderContent()}</div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button text="Close" onClick={onClose} />
-          {Boolean(queryRecords.length) && (
-            <Button text="Open" intent={Intent.PRIMARY} onClick={handleSelect} />
-          )}
-        </div>
-      </div>
-    </Dialog>
-  );
-});
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
deleted file mode 100644
index d67f1bbcc81a..000000000000
--- a/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
+++ /dev/null
@@ -1,111 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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[`QueryInput matches snapshot 1`] = `
-<div
-  class="query-input"
->
-  <div
-    class="ace-container"
-  >
-    <div
-      class=" ace_editor ace_hidpi ace-tm no-background placeholder-padding ace_focus"
-      id="ace-editor"
-      style="width: 100%; height: 200px; font-size: 13px;"
-    >
-      <textarea
-        autocapitalize="off"
-        autocorrect="off"
-        class="ace_text-input"
-        spellcheck="false"
-        style="opacity: 0; font-size: 1px; position: fixed; top: 0px;"
-        wrap="off"
-      />
-      <div
-        aria-hidden="true"
-        class="ace_gutter"
-      >
-        <div
-          class="ace_layer ace_gutter-layer ace_folding-enabled"
-          style="height: 1000000px;"
-        />
-      </div>
-      <div
-        class="ace_scroller"
-        style="line-height: 0px;"
-      >
-        <div
-          class="ace_content"
-        >
-          <div
-            class="ace_layer ace_print-margin-layer"
-          >
-            <div
-              class="ace_print-margin"
-              style="left: 10px; visibility: hidden;"
-            />
-          </div>
-          <div
-            class="ace_layer ace_marker-layer"
-          />
-          <div
-            class="ace_layer ace_text-layer"
-            style="height: 1000000px; margin: 0px 10px;"
-          />
-          <div
-            class="ace_layer ace_marker-layer"
-          />
-          <div
-            class="ace_layer ace_cursor-layer"
-          >
-            <div
-              class="ace_cursor"
-              style="animation-duration: 1000ms;"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="ace_scrollbar ace_scrollbar-v"
-        style="display: none; width: 20px;"
-      >
-        <div
-          class="ace_scrollbar-inner"
-          style="width: 20px;"
-        >
-           
-        </div>
-      </div>
-      <div
-        class="ace_scrollbar ace_scrollbar-h"
-        style="display: none; height: 20px;"
-      >
-        <div
-          class="ace_scrollbar-inner"
-          style="height: 20px;"
-        >
-           
-        </div>
-      </div>
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-      >
-        <div
-          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-        />
-        <div
-          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-        >
-          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/web-console/src/views/query-view/query-input/query-input.scss b/web-console/src/views/query-view/query-input/query-input.scss
deleted file mode 100644
index 24ec824f64e8..000000000000
--- a/web-console/src/views/query-view/query-input/query-input.scss
+++ /dev/null
@@ -1,27 +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.
- */
-
-.query-input {
-  position: relative;
-
-  .ace-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}
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
deleted file mode 100644
index 9c135008832c..000000000000
--- a/web-console/src/views/query-view/query-input/query-input.spec.tsx
+++ /dev/null
@@ -1,43 +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 { render } from '@testing-library/react';
-import React from 'react';
-
-import { QueryInput } from './query-input';
-
-describe('QueryInput', () => {
-  it('matches snapshot', () => {
-    const sqlControl = (
-      <QueryInput queryString="hello world" onQueryStringChange={() => {}} runeMode={false} />
-    );
-
-    const { container } = render(sqlControl);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('correctly formats helper HTML', () => {
-    expect(
-      QueryInput.makeDocHtml({
-        name: 'COUNT',
-        syntax: 'COUNT(*)',
-        description: 'Counts the number of things',
-      }),
-    ).toMatchSnapshot();
-  });
-});
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
deleted file mode 100644
index 9f85c9de08aa..000000000000
--- a/web-console/src/views/query-view/query-input/query-input.tsx
+++ /dev/null
@@ -1,279 +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 { ResizeEntry } from '@blueprintjs/core';
-import { ResizeSensor2 } from '@blueprintjs/popover2';
-import type { Ace } from 'ace-builds';
-import ace from 'ace-builds';
-import { SqlRef, SqlTableRef } from 'druid-query-toolkit';
-import escape from 'lodash.escape';
-import React from 'react';
-import AceEditor from 'react-ace';
-
-import {
-  SQL_CONSTANTS,
-  SQL_DYNAMICS,
-  SQL_EXPRESSION_PARTS,
-  SQL_KEYWORDS,
-} from '../../../../lib/keywords';
-import { SQL_DATA_TYPES, SQL_FUNCTIONS } from '../../../../lib/sql-docs';
-import { ColumnMetadata, RowColumn, uniq } from '../../../utils';
-
-import './query-input.scss';
-
-const langTools = ace.require('ace/ext/language_tools');
-
-const COMPLETER = {
-  insertMatch: (editor: any, data: Ace.Completion) => {
-    editor.completer.insertMatch({ value: data.name });
-  },
-};
-
-interface ItemDescription {
-  name: string;
-  syntax: string;
-  description: string;
-}
-
-export interface QueryInputProps {
-  queryString: string;
-  onQueryStringChange: (newQueryString: string) => void;
-  runeMode: boolean;
-  columnMetadata?: readonly ColumnMetadata[];
-  currentSchema?: string;
-  currentTable?: string;
-}
-
-export interface QueryInputState {
-  // For reasons (https://github.com/securingsincity/react-ace/issues/415) react ace editor needs an explicit height
-  // Since this component will grown and shrink dynamically we will measure its height and then set it.
-  editorHeight: number;
-  completions: any[];
-  prevColumnMetadata?: readonly ColumnMetadata[];
-  prevCurrentTable?: string;
-  prevCurrentSchema?: string;
-}
-
-export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputState> {
-  private aceEditor: Ace.Editor | undefined;
-
-  static replaceDefaultAutoCompleter(): void {
-    if (!langTools) return;
-
-    const keywordList = ([] as any[]).concat(
-      SQL_KEYWORDS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
-      SQL_EXPRESSION_PARTS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
-      SQL_CONSTANTS.map(v => ({ name: v, value: v, score: 0, meta: 'constant' })),
-      SQL_DYNAMICS.map(v => ({ name: v, value: v, score: 0, meta: 'dynamic' })),
-      Object.entries(SQL_DATA_TYPES).map(([name, [runtime, description]]) => ({
-        name,
-        value: name,
-        score: 0,
-        meta: 'type',
-        syntax: `Druid runtime type: ${runtime}`,
-        description,
-      })),
-    );
-
-    langTools.setCompleters([
-      langTools.snippetCompleter,
-      langTools.textCompleter,
-      {
-        getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
-          return callback(null, keywordList);
-        },
-        getDocTooltip: (item: any) => {
-          if (item.meta === 'type') {
-            item.docHTML = QueryInput.makeDocHtml(item);
-          }
-        },
-      },
-    ]);
-  }
-
-  static addFunctionAutoCompleter(): void {
-    if (!langTools) return;
-
-    const functionList: any[] = Object.entries(SQL_FUNCTIONS).flatMap(([name, versions]) => {
-      return versions.map(([args, description]) => ({
-        name: name,
-        value: versions.length > 1 ? `${name}(${args})` : name,
-        score: 1100, // Use a high score to appear over the 'local' suggestions that have a score of 1000
-        meta: 'function',
-        syntax: `${name}(${args})`,
-        description,
-        completer: COMPLETER,
-      }));
-    });
-
-    langTools.addCompleter({
-      getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
-        callback(null, functionList);
-      },
-      getDocTooltip: (item: any) => {
-        if (item.meta === 'function') {
-          item.docHTML = QueryInput.makeDocHtml(item);
-        }
-      },
-    });
-  }
-
-  static makeDocHtml(item: ItemDescription) {
-    return `
-<div class="doc-name">${item.name}</div>
-<div class="doc-syntax">${escape(item.syntax)}</div>
-<div class="doc-description">${item.description}</div>`;
-  }
-
-  static getDerivedStateFromProps(props: QueryInputProps, state: QueryInputState) {
-    const { columnMetadata, currentSchema, currentTable } = props;
-
-    if (
-      columnMetadata &&
-      (columnMetadata !== state.prevColumnMetadata ||
-        currentSchema !== state.prevCurrentSchema ||
-        currentTable !== state.prevCurrentTable)
-    ) {
-      const completions = ([] as any[]).concat(
-        uniq(columnMetadata.map(d => d.TABLE_SCHEMA)).map(v => ({
-          value: SqlTableRef.create(v).toString(),
-          score: 10,
-          meta: 'schema',
-        })),
-        uniq(
-          columnMetadata
-            .filter(d => (currentSchema ? d.TABLE_SCHEMA === currentSchema : true))
-            .map(d => d.TABLE_NAME),
-        ).map(v => ({
-          value: SqlTableRef.create(v).toString(),
-          score: 49,
-          meta: 'datasource',
-        })),
-        uniq(
-          columnMetadata
-            .filter(d =>
-              currentTable && currentSchema
-                ? d.TABLE_NAME === currentTable && d.TABLE_SCHEMA === currentSchema
-                : true,
-            )
-            .map(d => d.COLUMN_NAME),
-        ).map(v => ({
-          value: SqlRef.column(v).toString(),
-          score: 50,
-          meta: 'column',
-        })),
-      );
-
-      return {
-        completions,
-        prevColumnMetadata: columnMetadata,
-        prevCurrentSchema: currentSchema,
-        prevCurrentTable: currentTable,
-      };
-    }
-    return null;
-  }
-
-  constructor(props: QueryInputProps, context: any) {
-    super(props, context);
-    this.state = {
-      editorHeight: 200,
-      completions: [],
-    };
-  }
-
-  componentDidMount(): void {
-    QueryInput.replaceDefaultAutoCompleter();
-    QueryInput.addFunctionAutoCompleter();
-    if (langTools) {
-      langTools.addCompleter({
-        getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
-          callback(null, this.state.completions);
-        },
-      });
-    }
-  }
-
-  private readonly handleAceContainerResize = (entries: ResizeEntry[]) => {
-    if (entries.length !== 1) return;
-    this.setState({ editorHeight: entries[0].contentRect.height });
-  };
-
-  private readonly handleChange = (value: string) => {
-    // This gets the event as a second arg
-    const { onQueryStringChange } = this.props;
-    onQueryStringChange(value);
-  };
-
-  public goToPosition(rowColumn: RowColumn) {
-    const { aceEditor } = this;
-    if (!aceEditor) return;
-    aceEditor.focus(); // Grab the focus
-    aceEditor.getSelection().moveCursorTo(rowColumn.row, rowColumn.column);
-    if (rowColumn.endRow && rowColumn.endColumn) {
-      aceEditor
-        .getSelection()
-        .selectToPosition({ row: rowColumn.endRow, column: rowColumn.endColumn });
-    }
-  }
-
-  render(): JSX.Element {
-    const { queryString, runeMode } = this.props;
-    const { editorHeight } = this.state;
-
-    // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
-    return (
-      <div className="query-input">
-        <ResizeSensor2 onResize={this.handleAceContainerResize}>
-          <div className="ace-container">
-            <AceEditor
-              mode={runeMode ? 'hjson' : 'dsql'}
-              theme="solarized_dark"
-              className="no-background placeholder-padding"
-              name="ace-editor"
-              onChange={this.handleChange}
-              focus
-              fontSize={13}
-              width="100%"
-              height={`${editorHeight}px`}
-              showPrintMargin={false}
-              value={queryString}
-              editorProps={{
-                $blockScrolling: Infinity,
-              }}
-              setOptions={{
-                enableBasicAutocompletion: !runeMode,
-                enableLiveAutocompletion: !runeMode,
-                showLineNumbers: true,
-                tabSize: 2,
-                newLineMode: 'unix' as any, // newLineMode is incorrectly assumed to be boolean in the typings
-              }}
-              style={{}}
-              placeholder="SELECT * FROM ..."
-              onLoad={editor => {
-                editor.renderer.setPadding(10);
-                editor.renderer.setScrollMargin(10, 10, 0, 0);
-                this.aceEditor = editor;
-              }}
-            />
-          </div>
-        </ResizeSensor2>
-      </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
deleted file mode 100644
index 67aa203a46e5..000000000000
--- a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
+++ /dev/null
@@ -1,1461 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`QueryOutput matches snapshot 1`] = `
-<div
-  class="query-output"
->
-  <div
-    class="ReactTable -striped -highlight"
-  >
-    <div
-      class="rt-table"
-      role="grid"
-    >
-      <div
-        class="rt-thead -header"
-        style="min-width: 720px;"
-      >
-        <div
-          class="rt-tr"
-          role="row"
-        >
-          <div
-            class="rt-th rt-resizable-header"
-            role="columnheader"
-            style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            tabindex="-1"
-          >
-            <div
-              class="rt-resizable-header-content"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="clickable-cell"
-                >
-                  language
-                  <span
-                    aria-hidden="true"
-                    class="bp4-icon bp4-icon-filter"
-                    icon="filter"
-                  >
-                    <svg
-                      data-icon="filter"
-                      height="14"
-                      viewBox="0 0 16 16"
-                      width="14"
-                    >
-                      <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
-              class="rt-resizer"
-            />
-          </div>
-          <div
-            class="rt-th -sort-desc aggregate-header rt-resizable-header"
-            role="columnheader"
-            style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            tabindex="-1"
-          >
-            <div
-              class="rt-resizable-header-content"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="clickable-cell"
-                >
-                  Count
-                  <span
-                    aria-hidden="true"
-                    class="bp4-icon bp4-icon-filter"
-                    icon="filter"
-                  >
-                    <svg
-                      data-icon="filter"
-                      height="14"
-                      viewBox="0 0 16 16"
-                      width="14"
-                    >
-                      <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
-              class="rt-resizer"
-            />
-          </div>
-          <div
-            class="rt-th aggregate-header rt-resizable-header"
-            role="columnheader"
-            style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            tabindex="-1"
-          >
-            <div
-              class="rt-resizable-header-content"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="clickable-cell"
-                >
-                  dist_language
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-resizer"
-            />
-          </div>
-          <div
-            class="rt-th aggregate-header rt-resizable-header"
-            role="columnheader"
-            style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            tabindex="-1"
-          >
-            <div
-              class="rt-resizable-header-content"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="clickable-cell"
-                >
-                  language_filtered_count
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-resizer"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="rt-tbody"
-        style="min-width: 720px;"
-      >
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell null"
-                >
-                  null
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  6881
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  1
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  0
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  JavaScript
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  166
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  1
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  0
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  Python
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  62
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  1
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  0
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  HTML
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  46
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  1
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell plain"
-                >
-                  0
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell null"
-                >
-                  null
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell null"
-                >
-                  null
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell null"
-                >
-                  null
-                </div>
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span
-                aria-haspopup="true"
-                class="bp4-popover2-target"
-              >
-                <div
-                  class="table-cell null"
-                >
-                  null
-                </div>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -even"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="rt-tr-group"
-          role="rowgroup"
-        >
-          <div
-            class="rt-tr -padRow -odd"
-            role="row"
-          >
-            <div
-              class="rt-td"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-            <div
-              class="rt-td aggregate-column"
-              role="gridcell"
-              style="flex: 180 0 auto; width: 180px; max-width: 180px;"
-            >
-              <span>
-                 
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="-loading"
-    >
-      <div
-        class="-loading-inner"
-      >
-        Loading...
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/web-console/src/views/query-view/query-output/column-rename-input/__snapshots__/column-rename-input.spec.tsx.snap b/web-console/src/views/query-view/query-output/column-rename-input/__snapshots__/column-rename-input.spec.tsx.snap
deleted file mode 100644
index 3c222122fb43..000000000000
--- a/web-console/src/views/query-view/query-output/column-rename-input/__snapshots__/column-rename-input.spec.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColumnRenameInput matches snapshot 1`] = `
-<Blueprint4.InputGroup
-  autoFocus={true}
-  className="column-rename-input"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  small={true}
-  value="hello"
-/>
-`;
diff --git a/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.spec.tsx b/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.spec.tsx
deleted file mode 100644
index 834ca7e74837..000000000000
--- a/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.spec.tsx
+++ /dev/null
@@ -1,30 +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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { ColumnRenameInput } from './column-rename-input';
-
-describe('ColumnRenameInput', () => {
-  it('matches snapshot', () => {
-    const columnRenameInput = shallow(<ColumnRenameInput initialName="hello" onDone={() => {}} />);
-
-    expect(columnRenameInput).toMatchSnapshot();
-  });
-});
diff --git a/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx b/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx
deleted file mode 100644
index 4a6f5fae8961..000000000000
--- a/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx
+++ /dev/null
@@ -1,62 +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 { InputGroup } from '@blueprintjs/core';
-import React, { useState } from 'react';
-
-export interface ColumnRenameInputProps {
-  initialName: string;
-  onDone: (newName?: string) => void;
-}
-
-export const ColumnRenameInput = React.memo(function ColumnRenameInput(
-  props: ColumnRenameInputProps,
-) {
-  const { initialName, onDone } = props;
-  const [newName, setNewName] = useState<string>(initialName);
-
-  function maybeDone() {
-    if (newName && newName !== initialName) {
-      onDone(newName);
-    } else {
-      onDone();
-    }
-  }
-
-  return (
-    <InputGroup
-      className="column-rename-input"
-      value={newName}
-      onChange={(e: any) => setNewName(e.target.value)}
-      onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-        switch (e.key) {
-          case 'Enter':
-            maybeDone();
-            break;
-
-          case 'Escape':
-            onDone();
-            break;
-        }
-      }}
-      onBlur={maybeDone}
-      small
-      autoFocus
-    />
-  );
-});
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
deleted file mode 100644
index 59dddc6c0021..000000000000
--- a/web-console/src/views/query-view/query-output/query-output.scss
+++ /dev/null
@@ -1,76 +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 '../../../variables';
-@import '../../../blueprint-overrides/common/colors';
-
-.query-output {
-  .ReactTable {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    font-feature-settings: tnum;
-    font-variant-numeric: tabular-nums;
-
-    .rt-thead.-header {
-      box-shadow: 0 1px 0 0 rgba(black, 0.2); // This is a hack! this line is sometimes too weak in tables.
-
-      .rt-th {
-        &.aggregate-header {
-          background: rgba($druid-brand, 0.06);
-        }
-
-        &.renaming {
-          padding: 0;
-        }
-
-        .asc {
-          box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, 0.6);
-        }
-
-        .desc {
-          box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.6);
-        }
-
-        .#{$bp-ns}-icon {
-          margin-left: 3px;
-        }
-      }
-    }
-
-    .rt-td {
-      cursor: pointer;
-    }
-  }
-
-  .clickable-cell {
-    padding: $table-cell-v-padding $table-cell-h-padding;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .#{$bp-ns}-popover2-target {
-    width: 100%;
-  }
-
-  .aggregate-column {
-    background-color: rgba($druid-brand, 0.06);
-  }
-}
diff --git a/web-console/src/views/query-view/query-output/query-output.spec.tsx b/web-console/src/views/query-view/query-output/query-output.spec.tsx
deleted file mode 100644
index 196ddd07317f..000000000000
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ /dev/null
@@ -1,61 +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 { render } from '@testing-library/react';
-import { QueryResult, sane, SqlQuery } from 'druid-query-toolkit';
-import React from 'react';
-
-import { QueryOutput } from './query-output';
-
-describe('QueryOutput', () => {
-  it('matches snapshot', () => {
-    const parsedQuery = SqlQuery.parse(sane`
-      SELECT
-        "language",
-        COUNT(*) AS "Count", COUNT(DISTINCT "language") AS "dist_language", COUNT(*) FILTER (WHERE "language"= 'xxx') AS "language_filtered_count"
-      FROM "github"
-      WHERE "__time" >= CURRENT_TIMESTAMP - INTERVAL '1' DAY AND "language" != 'TypeScript'
-      GROUP BY 1
-      HAVING "Count" != 37392
-      ORDER BY "Count" DESC
-    `);
-
-    const queryOutput = (
-      <QueryOutput
-        runeMode={false}
-        queryResult={QueryResult.fromRawResult(
-          [
-            ['language', 'Count', 'dist_language', 'language_filtered_count'],
-            ['', 6881, 1, 0],
-            ['JavaScript', 166, 1, 0],
-            ['Python', 62, 1, 0],
-            ['HTML', 46, 1, 0],
-            [],
-          ],
-          false,
-          true,
-        ).attachQuery({}, parsedQuery)}
-        onQueryAction={() => {}}
-        onLoadMore={() => {}}
-      />
-    );
-
-    const { container } = render(queryOutput);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
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
deleted file mode 100644
index 8410f602ede8..000000000000
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ /dev/null
@@ -1,422 +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 { Icon, Menu, MenuItem } from '@blueprintjs/core';
-import { IconName, IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
-import classNames from 'classnames';
-import { QueryResult, SqlExpression, SqlLiteral, SqlRef, trimString } from 'druid-query-toolkit';
-import React, { useEffect, useState } from 'react';
-import ReactTable from 'react-table';
-
-import { BracedText, Deferred, TableCell } from '../../../components';
-import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
-import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
-import {
-  changePage,
-  columnToWidth,
-  copyAndAlert,
-  formatNumber,
-  getNumericColumnBraces,
-  Pagination,
-  prettyPrintSql,
-  QueryAction,
-  stringifyValue,
-} from '../../../utils';
-import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
-
-import { ColumnRenameInput } from './column-rename-input/column-rename-input';
-
-import './query-output.scss';
-
-function isComparable(x: unknown): boolean {
-  return x !== null && x !== '' && !isNaN(Number(x));
-}
-
-export interface QueryOutputProps {
-  queryResult: QueryResult;
-  onQueryAction(action: QueryAction): void;
-  onLoadMore: () => void;
-  runeMode: boolean;
-}
-
-export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputProps) {
-  const { queryResult, onQueryAction, onLoadMore, runeMode } = props;
-  const parsedQuery = queryResult.sqlQuery;
-  const [pagination, setPagination] = useState<Pagination>({
-    page: 0,
-    pageSize: SMALL_TABLE_PAGE_SIZE,
-  });
-  const [showValue, setShowValue] = useState<string>();
-  const [renamingColumn, setRenamingColumn] = useState<number>(-1);
-
-  // Reset page to 0 if number of results changes
-  useEffect(() => {
-    setPagination(pagination => {
-      return pagination.page ? changePage(pagination, 0) : pagination;
-    });
-  }, [queryResult.rows.length]);
-
-  function hasFilterOnHeader(header: string, headerIndex: number): boolean {
-    if (!parsedQuery || !parsedQuery.isRealOutputColumnAtSelectIndex(headerIndex)) return false;
-
-    return (
-      parsedQuery.getEffectiveWhereExpression().containsColumn(header) ||
-      parsedQuery.getEffectiveHavingExpression().containsColumn(header)
-    );
-  }
-
-  function getHeaderMenu(header: string, headerIndex: number) {
-    const ref = SqlRef.column(header);
-    const prettyRef = prettyPrintSql(ref);
-
-    if (parsedQuery) {
-      const orderByExpression = parsedQuery.isValidSelectIndex(headerIndex)
-        ? SqlLiteral.index(headerIndex)
-        : SqlRef.column(header);
-      const descOrderBy = orderByExpression.toOrderByExpression('DESC');
-      const ascOrderBy = orderByExpression.toOrderByExpression('ASC');
-      const orderBy = parsedQuery.getOrderByForSelectIndex(headerIndex);
-
-      const basicActions: BasicAction[] = [];
-      if (orderBy) {
-        const reverseOrderBy = orderBy.reverseDirection();
-        const reverseOrderByDirection = reverseOrderBy.getEffectiveDirection();
-        basicActions.push({
-          icon: reverseOrderByDirection === 'ASC' ? IconNames.SORT_ASC : IconNames.SORT_DESC,
-          title: `Order ${reverseOrderByDirection === 'ASC' ? 'ascending' : 'descending'}`,
-          onAction: () => {
-            onQueryAction(q => q.changeOrderByExpressions([reverseOrderBy]));
-          },
-        });
-      } else {
-        basicActions.push(
-          {
-            icon: IconNames.SORT_DESC,
-            title: `Order descending`,
-            onAction: () => {
-              onQueryAction(q => q.changeOrderByExpressions([descOrderBy]));
-            },
-          },
-          {
-            icon: IconNames.SORT_ASC,
-            title: `Order ascending`,
-            onAction: () => {
-              onQueryAction(q => q.changeOrderByExpressions([ascOrderBy]));
-            },
-          },
-        );
-      }
-
-      if (parsedQuery.isRealOutputColumnAtSelectIndex(headerIndex)) {
-        const whereExpression = parsedQuery.getWhereExpression();
-        if (whereExpression && whereExpression.containsColumn(header)) {
-          basicActions.push({
-            icon: IconNames.FILTER_REMOVE,
-            title: `Remove from WHERE clause`,
-            onAction: () => {
-              onQueryAction(q =>
-                q.changeWhereExpression(whereExpression.removeColumnFromAnd(header)),
-              );
-            },
-          });
-        }
-
-        const havingExpression = parsedQuery.getHavingExpression();
-        if (havingExpression && havingExpression.containsColumn(header)) {
-          basicActions.push({
-            icon: IconNames.FILTER_REMOVE,
-            title: `Remove from HAVING clause`,
-            onAction: () => {
-              onQueryAction(q =>
-                q.changeHavingExpression(havingExpression.removeColumnFromAnd(header)),
-              );
-            },
-          });
-        }
-      }
-
-      if (!parsedQuery.hasStarInSelect()) {
-        basicActions.push(
-          {
-            icon: IconNames.EDIT,
-            title: 'Rename column',
-            onAction: () => {
-              setRenamingColumn(headerIndex);
-            },
-          },
-          {
-            icon: IconNames.CROSS,
-            title: 'Remove column',
-            onAction: () => {
-              onQueryAction(q => q.removeOutputColumn(header));
-            },
-          },
-        );
-      }
-
-      return basicActionsToMenu(basicActions)!;
-    } else {
-      const orderByExpression = SqlRef.column(header);
-      const descOrderBy = orderByExpression.toOrderByExpression('DESC');
-      const ascOrderBy = orderByExpression.toOrderByExpression('ASC');
-      const descOrderByPretty = prettyPrintSql(descOrderBy);
-      const ascOrderByPretty = prettyPrintSql(descOrderBy);
-      return (
-        <Menu>
-          <MenuItem
-            icon={IconNames.CLIPBOARD}
-            text={`Copy: ${prettyRef}`}
-            onClick={() => {
-              copyAndAlert(String(ref), `${prettyRef}' copied to clipboard`);
-            }}
-          />
-          {!runeMode && (
-            <>
-              <MenuItem
-                icon={IconNames.CLIPBOARD}
-                text={`Copy: ${descOrderByPretty}`}
-                onClick={() =>
-                  copyAndAlert(descOrderBy.toString(), `'${descOrderByPretty}' copied to clipboard`)
-                }
-              />
-              <MenuItem
-                icon={IconNames.CLIPBOARD}
-                text={`Copy: ${ascOrderByPretty}`}
-                onClick={() =>
-                  copyAndAlert(ascOrderBy.toString(), `'${ascOrderByPretty}' copied to clipboard`)
-                }
-              />
-            </>
-          )}
-        </Menu>
-      );
-    }
-  }
-
-  function filterOnMenuItem(icon: IconName, clause: SqlExpression, having: boolean) {
-    const { onQueryAction } = props;
-    if (!parsedQuery) return;
-
-    return (
-      <MenuItem
-        icon={icon}
-        text={`${having ? 'Having' : 'Filter on'}: ${prettyPrintSql(clause)}`}
-        onClick={() => {
-          const column = clause.getUsedColumns()[0];
-          onQueryAction(
-            having
-              ? q => q.removeFromHaving(column).addHaving(clause)
-              : q => q.removeColumnFromWhere(column).addWhere(clause),
-          );
-        }}
-      />
-    );
-  }
-
-  function clipboardMenuItem(clause: SqlExpression) {
-    const prettyLabel = prettyPrintSql(clause);
-    return (
-      <MenuItem
-        icon={IconNames.CLIPBOARD}
-        text={`Copy: ${prettyLabel}`}
-        onClick={() => copyAndAlert(clause.toString(), `${prettyLabel} copied to clipboard`)}
-      />
-    );
-  }
-
-  function getCellMenu(header: string, headerIndex: number, value: unknown) {
-    const { runeMode } = props;
-
-    const val = SqlLiteral.maybe(value);
-    const showFullValueMenuItem = (
-      <MenuItem
-        icon={IconNames.EYE_OPEN}
-        text="Show full value"
-        onClick={() => {
-          setShowValue(stringifyValue(value));
-        }}
-      />
-    );
-
-    if (parsedQuery) {
-      let ex: SqlExpression | undefined;
-      let having = false;
-      const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
-      if (selectValue) {
-        const outputName = selectValue.getOutputName();
-        having = parsedQuery.isAggregateSelectIndex(headerIndex);
-        if (having && outputName) {
-          ex = SqlRef.column(outputName);
-        } else {
-          ex = selectValue.getUnderlyingExpression();
-        }
-      } else if (parsedQuery.hasStarInSelect()) {
-        ex = SqlRef.column(header);
-      }
-
-      return (
-        <Menu>
-          {ex && val && (
-            <>
-              {isComparable(value) && (
-                <>
-                  {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val), having)}
-                  {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val), having)}
-                </>
-              )}
-              {filterOnMenuItem(IconNames.FILTER, ex.equal(val), having)}
-              {filterOnMenuItem(IconNames.FILTER, ex.unequal(val), having)}
-            </>
-          )}
-          {showFullValueMenuItem}
-        </Menu>
-      );
-    } else {
-      const ref = SqlRef.column(header);
-      const stringValue = stringifyValue(value);
-      const trimmedValue = trimString(stringValue, 50);
-      return (
-        <Menu>
-          <MenuItem
-            icon={IconNames.CLIPBOARD}
-            text={`Copy: ${trimmedValue}`}
-            onClick={() => copyAndAlert(stringValue, `${trimmedValue} copied to clipboard`)}
-          />
-          {!runeMode && val && (
-            <>
-              {clipboardMenuItem(ref.equal(val))}
-              {clipboardMenuItem(ref.unequal(val))}
-            </>
-          )}
-          {showFullValueMenuItem}
-        </Menu>
-      );
-    }
-  }
-
-  function getHeaderClassName(header: string, i: number) {
-    if (!parsedQuery) return;
-
-    const className = [];
-    const orderBy = parsedQuery.getOrderByForOutputColumn(header);
-    if (orderBy) {
-      className.push(orderBy.getEffectiveDirection() === 'DESC' ? '-sort-desc' : '-sort-asc');
-    }
-
-    if (parsedQuery.isAggregateOutputColumn(header)) {
-      className.push('aggregate-header');
-    }
-
-    if (i === renamingColumn) {
-      className.push('renaming');
-    }
-
-    return className.join(' ');
-  }
-
-  function renameColumnTo(renameTo: string | undefined) {
-    setRenamingColumn(-1);
-    if (renameTo && parsedQuery) {
-      if (parsedQuery.hasStarInSelect()) return;
-      const selectExpression = parsedQuery.getSelectExpressionForIndex(renamingColumn);
-      if (!selectExpression) return;
-      onQueryAction(q => q.changeSelect(renamingColumn, selectExpression.as(renameTo)));
-    }
-  }
-
-  const outerLimit = queryResult.getSqlOuterLimit();
-  const hasMoreResults = queryResult.rows.length === outerLimit;
-
-  function changePagination(pagination: Pagination) {
-    if (
-      hasMoreResults &&
-      Math.floor(queryResult.rows.length / pagination.pageSize) === pagination.page // on the last page
-    ) {
-      onLoadMore();
-    }
-    setPagination(pagination);
-  }
-
-  const numericColumnBraces = getNumericColumnBraces(queryResult, pagination);
-  return (
-    <div className={classNames('query-output', { 'more-results': hasMoreResults })}>
-      <ReactTable
-        className="-striped -highlight"
-        data={queryResult.rows as any[][]}
-        ofText={hasMoreResults ? '' : 'of'}
-        noDataText={queryResult.rows.length ? '' : 'Query returned no data'}
-        page={pagination.page}
-        pageSize={pagination.pageSize}
-        onPageChange={page => changePagination(changePage(pagination, page))}
-        onPageSizeChange={(pageSize, page) => changePagination({ page, pageSize })}
-        sortable={false}
-        defaultPageSize={SMALL_TABLE_PAGE_SIZE}
-        pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
-        showPagination={
-          queryResult.rows.length > Math.min(SMALL_TABLE_PAGE_SIZE, pagination.pageSize)
-        }
-        columns={queryResult.header.map((column, i) => {
-          const h = column.name;
-
-          return {
-            Header:
-              i === renamingColumn && parsedQuery
-                ? () => <ColumnRenameInput initialName={h} onDone={renameColumnTo} />
-                : () => {
-                    return (
-                      <Popover2 content={<Deferred content={() => getHeaderMenu(h, i)} />}>
-                        <div className="clickable-cell">
-                          {h}
-                          {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
-                        </div>
-                      </Popover2>
-                    );
-                  },
-            headerClassName: getHeaderClassName(h, i),
-            width: columnToWidth(column),
-            accessor: String(i),
-            Cell(row) {
-              const value = row.value;
-              return (
-                <Popover2 content={<Deferred content={() => getCellMenu(h, i, value)} />}>
-                  {numericColumnBraces[i] ? (
-                    <BracedText
-                      className="table-padding"
-                      text={formatNumber(value)}
-                      braces={numericColumnBraces[i]}
-                      padFractionalPart
-                      unselectableThousandsSeparator
-                    />
-                  ) : (
-                    <TableCell value={value} unlimited />
-                  )}
-                </Popover2>
-              );
-            },
-            className:
-              parsedQuery && parsedQuery.isAggregateOutputColumn(h)
-                ? 'aggregate-column'
-                : undefined,
-          };
-        })}
-      />
-      {showValue && <ShowValueDialog onClose={() => setShowValue(undefined)} str={showValue} />}
-    </div>
-  );
-});
diff --git a/web-console/src/views/query-view/query-timer/__snapshots__/query-timer.spec.tsx.snap b/web-console/src/views/query-view/query-timer/__snapshots__/query-timer.spec.tsx.snap
deleted file mode 100644
index 8ed90ac0fcfe..000000000000
--- a/web-console/src/views/query-view/query-timer/__snapshots__/query-timer.spec.tsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`QueryTimer matches snapshot 1`] = `
-<div
-  class="query-timer"
->
-  1.85s
-  <button
-    class="bp4-button bp4-minimal"
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-      class="bp4-icon bp4-icon-stopwatch"
-      icon="stopwatch"
-      tabindex="0"
-    >
-      <svg
-        data-icon="stopwatch"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M9 2v1.083A6.002 6.002 0 018 15 6 6 0 017 3.083V2H6a1 1 0 110-2h4a1 1 0 010 2H9zM8 5a4 4 0 104 4H8V5z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
diff --git a/web-console/src/views/query-view/query-timer/query-timer.scss b/web-console/src/views/query-view/query-timer/query-timer.scss
deleted file mode 100644
index d6c8bf30842f..000000000000
--- a/web-console/src/views/query-view/query-timer/query-timer.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.
- */
-
-.query-timer {
-  line-height: 30px;
-  white-space: nowrap;
-  pointer-events: none;
-}
diff --git a/web-console/src/views/query-view/query-timer/query-timer.spec.tsx b/web-console/src/views/query-view/query-timer/query-timer.spec.tsx
deleted file mode 100644
index bc3a1e2031b1..000000000000
--- a/web-console/src/views/query-view/query-timer/query-timer.spec.tsx
+++ /dev/null
@@ -1,42 +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 { render } from '@testing-library/react';
-import React from 'react';
-
-import { QueryTimer } from './query-timer';
-
-describe('QueryTimer', () => {
-  beforeEach(() => {
-    let nowCalls = 0;
-    jest.spyOn(Date, 'now').mockImplementation(() => {
-      return 1619201218452 + 2000 * nowCalls++;
-    });
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('matches snapshot', () => {
-    const queryTimer = <QueryTimer />;
-
-    const { container } = render(queryTimer);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
diff --git a/web-console/src/views/query-view/query-timer/query-timer.tsx b/web-console/src/views/query-view/query-timer/query-timer.tsx
deleted file mode 100644
index 46c6efa0086e..000000000000
--- a/web-console/src/views/query-view/query-timer/query-timer.tsx
+++ /dev/null
@@ -1,48 +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 } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
-import React, { useState } from 'react';
-
-import { useInterval } from '../../../hooks';
-import { formatDurationHybrid } from '../../../utils';
-
-import './query-timer.scss';
-
-// This is roughly the time in ms that it takes the component to mount and unmount, without this the timer appears to over count a little bit
-const FUDGE_OFFSET = 150;
-
-export const QueryTimer = React.memo(function QueryTimer() {
-  const [startTime] = useState(Date.now() + FUDGE_OFFSET);
-  const [currentTime, setCurrentTime] = useState(Date.now());
-
-  useInterval(() => {
-    setCurrentTime(Date.now());
-  }, 25);
-
-  const elapsed = currentTime - startTime;
-  if (elapsed <= 0) return null;
-
-  return (
-    <div className="query-timer">
-      {formatDurationHybrid(elapsed)}
-      <Button icon={IconNames.STOPWATCH} minimal />
-    </div>
-  );
-});
diff --git a/web-console/src/views/query-view/query-view.scss b/web-console/src/views/query-view/query-view.scss
deleted file mode 100644
index 169d05067d3f..000000000000
--- a/web-console/src/views/query-view/query-view.scss
+++ /dev/null
@@ -1,125 +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 '../../variables';
-
-$nav-width: 250px;
-$vertical-gap: 6px;
-
-.query-view {
-  height: 100%;
-  width: 100%;
-
-  .column-tree {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: $nav-width;
-    @include card-like;
-  }
-
-  .splitter-layout {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: $nav-width + $thin-padding;
-    right: 0;
-    width: auto;
-
-    .control-pane {
-      position: absolute;
-      width: 100%;
-      top: 0;
-      bottom: $vertical-gap;
-
-      .query-input {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 30px + $vertical-gap;
-        @include card-like;
-        overflow: hidden;
-      }
-
-      .query-control-bar {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-
-        & > * {
-          vertical-align: bottom;
-          margin-right: 10px;
-        }
-
-        .auto-limit {
-          display: inline-block;
-          margin-bottom: 6px;
-          font-size: $pt-font-size;
-
-          .#{$bp-ns}-control-indicator {
-            margin-top: -1px;
-          }
-        }
-
-        .query-extra-info,
-        .query-timer {
-          position: absolute;
-          right: 0;
-          top: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    &.splitter-layout-vertical > .layout-splitter {
-      height: 3px;
-      background-color: $gray1;
-    }
-
-    .output-pane {
-      position: absolute;
-      width: 100%;
-      top: $vertical-gap;
-      bottom: 0;
-      @include card-like;
-      overflow: hidden;
-
-      > * {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-
-      .init-state {
-        text-align: center;
-
-        p {
-          position: relative;
-          top: 38%;
-          font-size: 15px;
-        }
-      }
-    }
-  }
-
-  &.hide-column-tree .splitter-layout {
-    left: 0;
-  }
-}
diff --git a/web-console/src/views/query-view/query-view.spec.tsx b/web-console/src/views/query-view/query-view.spec.tsx
deleted file mode 100644
index bc252c660d0c..000000000000
--- a/web-console/src/views/query-view/query-view.spec.tsx
+++ /dev/null
@@ -1,34 +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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { QueryView } from './query-view';
-
-describe('QueryView', () => {
-  it('matches snapshot', () => {
-    const sqlView = shallow(<QueryView initQuery="test" />);
-    expect(sqlView).toMatchSnapshot();
-  });
-
-  it('matches snapshot with query', () => {
-    const sqlView = shallow(<QueryView initQuery="SELECT +3" />);
-    expect(sqlView).toMatchSnapshot();
-  });
-});
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
deleted file mode 100644
index 9c014c744d61..000000000000
--- a/web-console/src/views/query-view/query-view.tsx
+++ /dev/null
@@ -1,617 +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 { Code, Intent, Switch } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
-import classNames from 'classnames';
-import { QueryResult, QueryRunner, SqlExpression, SqlQuery } from 'druid-query-toolkit';
-import Hjson from 'hjson';
-import * as JSONBig from 'json-bigint-native';
-import memoizeOne from 'memoize-one';
-import React, { RefObject } from 'react';
-import SplitterLayout from 'react-splitter-layout';
-import { v4 as uuidv4 } from 'uuid';
-
-import { Loader, QueryErrorPane } from '../../components';
-import { EditContextDialog } from '../../dialogs';
-import { QueryContext, QueryWithContext } from '../../druid-models';
-import { Api, AppToaster } from '../../singletons';
-import {
-  ColumnMetadata,
-  downloadQueryResults,
-  DruidError,
-  findEmptyLiteralPosition,
-  localStorageGet,
-  localStorageGetJson,
-  LocalStorageKeys,
-  localStorageSet,
-  localStorageSetJson,
-  QueryAction,
-  queryDruidSql,
-  QueryManager,
-  QueryState,
-  RowColumn,
-} from '../../utils';
-import { QueryRecord, QueryRecordUtil } from '../../utils/query-history';
-
-import { ColumnTree } from './column-tree/column-tree';
-import { ExplainDialog, QueryContextEngine } from './explain-dialog/explain-dialog';
-import {
-  LIVE_QUERY_MODES,
-  LiveQueryMode,
-  LiveQueryModeButton,
-} from './live-query-mode-button/live-query-mode-button';
-import { QueryExtraInfo } from './query-extra-info/query-extra-info';
-import { QueryHistoryDialog } from './query-history-dialog/query-history-dialog';
-import { QueryInput } from './query-input/query-input';
-import { QueryOutput } from './query-output/query-output';
-import { QueryTimer } from './query-timer/query-timer';
-import { RunButton } from './run-button/run-button';
-
-import './query-view.scss';
-
-const LAST_DAY = SqlExpression.parse(`__time >= CURRENT_TIMESTAMP - INTERVAL '1' DAY`);
-
-const parser = memoizeOne((sql: string): SqlQuery | undefined => {
-  try {
-    return SqlQuery.parse(sql);
-  } catch {
-    return;
-  }
-});
-
-export interface QueryViewProps {
-  initQuery: string | undefined;
-  defaultQueryContext?: Record<string, any>;
-  mandatoryQueryContext?: Record<string, any>;
-}
-
-export interface QueryViewState {
-  queryString: string;
-  parsedQuery?: SqlQuery;
-  queryContext: QueryContext;
-  wrapQueryLimit: number | undefined;
-  liveQueryMode: LiveQueryMode;
-
-  columnMetadataState: QueryState<readonly ColumnMetadata[]>;
-
-  queryResultState: QueryState<QueryResult, DruidError>;
-
-  explainDialogQuery?: QueryContextEngine;
-
-  defaultSchema?: string;
-  defaultTable?: string;
-
-  editContextDialogOpen: boolean;
-  historyDialogOpen: boolean;
-  queryHistory: readonly QueryRecord[];
-}
-
-export class QueryView extends React.PureComponent<QueryViewProps, QueryViewState> {
-  static isEmptyQuery(query: string): boolean {
-    return query.trim() === '';
-  }
-
-  static isJsonLike(queryString: string): boolean {
-    return queryString.trim().startsWith('{');
-  }
-
-  static isSql(query: any): boolean {
-    if (typeof query === 'string') return true;
-    return typeof query.query === 'string';
-  }
-
-  static validRune(queryString: string): boolean {
-    try {
-      Hjson.parse(queryString);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  private readonly metadataQueryManager: QueryManager<null, ColumnMetadata[]>;
-  private readonly queryManager: QueryManager<QueryWithContext, QueryResult>;
-
-  private readonly queryInputRef: RefObject<QueryInput>;
-
-  constructor(props: QueryViewProps, context: any) {
-    super(props, context);
-    const { mandatoryQueryContext } = props;
-
-    this.queryInputRef = React.createRef();
-
-    const queryString = props.initQuery || localStorageGet(LocalStorageKeys.QUERY_KEY) || '';
-    const parsedQuery = queryString ? parser(queryString) : undefined;
-
-    const queryContext =
-      localStorageGetJson(LocalStorageKeys.QUERY_CONTEXT) || props.defaultQueryContext || {};
-
-    const possibleQueryHistory = localStorageGetJson(LocalStorageKeys.QUERY_HISTORY);
-    const queryHistory = Array.isArray(possibleQueryHistory) ? possibleQueryHistory : [];
-
-    const possibleLiveQueryMode = localStorageGetJson(LocalStorageKeys.LIVE_QUERY_MODE);
-    const liveQueryMode = LIVE_QUERY_MODES.includes(possibleLiveQueryMode)
-      ? possibleLiveQueryMode
-      : 'auto';
-
-    this.state = {
-      queryString,
-      parsedQuery,
-      queryContext,
-      wrapQueryLimit: 100,
-      liveQueryMode,
-
-      columnMetadataState: QueryState.INIT,
-
-      queryResultState: QueryState.INIT,
-
-      editContextDialogOpen: false,
-      historyDialogOpen: false,
-      queryHistory,
-    };
-
-    this.metadataQueryManager = new QueryManager({
-      processQuery: async () => {
-        return await queryDruidSql<ColumnMetadata>({
-          query: `SELECT TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS`,
-        });
-      },
-      onStateChange: columnMetadataState => {
-        if (columnMetadataState.error) {
-          AppToaster.show({
-            message: 'Could not load SQL metadata',
-            intent: Intent.DANGER,
-          });
-        }
-        this.setState({
-          columnMetadataState,
-        });
-      },
-    });
-
-    const queryRunner = new QueryRunner({
-      inflateDateStrategy: 'none',
-    });
-
-    this.queryManager = new QueryManager({
-      processQuery: async (
-        queryWithContext: QueryWithContext,
-        cancelToken,
-      ): Promise<QueryResult> => {
-        const { queryString, queryContext, wrapQueryLimit } = queryWithContext;
-        const query = QueryView.isJsonLike(queryString) ? Hjson.parse(queryString) : queryString;
-        const isSql = QueryView.isSql(query);
-        const extraQueryContext = { ...queryContext, ...(mandatoryQueryContext || {}) };
-
-        if (isSql && typeof wrapQueryLimit !== 'undefined') {
-          extraQueryContext.sqlOuterLimit = wrapQueryLimit + 1;
-        }
-
-        const queryIdKey = isSql ? 'sqlQueryId' : 'queryId';
-        // Look for an existing queryId in the JSON itself or in the extra context object.
-        let cancelQueryId = query.context?.[queryIdKey] || extraQueryContext[queryIdKey];
-        if (!cancelQueryId) {
-          // If the queryId (sqlQueryId) is not explicitly set on the context generate one thus making it possible to cancel the query.
-          cancelQueryId = extraQueryContext[queryIdKey] = uuidv4();
-        }
-
-        void cancelToken.promise
-          .then(() => {
-            return Api.instance.delete(
-              `/druid/v2${isSql ? '/sql' : ''}/${Api.encodePath(cancelQueryId)}`,
-            );
-          })
-          .catch(() => {});
-
-        try {
-          return await queryRunner.runQuery({
-            query,
-            extraQueryContext,
-            cancelToken,
-          });
-        } catch (e) {
-          throw new DruidError(e);
-        }
-      },
-      onStateChange: queryResultState => {
-        this.setState({
-          queryResultState,
-        });
-      },
-    });
-  }
-
-  componentDidMount(): void {
-    const { initQuery } = this.props;
-    const { liveQueryMode } = this.state;
-
-    this.metadataQueryManager.runQuery(null);
-
-    if (liveQueryMode !== 'off' && initQuery) {
-      this.handleRun();
-    }
-  }
-
-  componentWillUnmount(): void {
-    this.metadataQueryManager.terminate();
-    this.queryManager.terminate();
-  }
-
-  private prettyPrintJson(): void {
-    this.setState(prevState => {
-      let parsed: any;
-      try {
-        parsed = Hjson.parse(prevState.queryString);
-      } catch {
-        return null;
-      }
-      return {
-        queryString: JSONBig.stringify(parsed, undefined, 2),
-      };
-    });
-  }
-
-  private readonly handleDownload = (filename: string, format: string) => {
-    const { queryResultState } = this.state;
-    const queryResult = queryResultState.data;
-    if (!queryResult) return;
-
-    downloadQueryResults(queryResult, filename, format);
-  };
-
-  private readonly handleLoadMore = () => {
-    this.setState(
-      ({ wrapQueryLimit }) => ({
-        wrapQueryLimit: wrapQueryLimit ? wrapQueryLimit * 10 : undefined,
-      }),
-      this.handleRun,
-    );
-  };
-
-  private renderExplainDialog() {
-    const { mandatoryQueryContext } = this.props;
-    const { explainDialogQuery } = this.state;
-    if (!explainDialogQuery) return;
-
-    return (
-      <ExplainDialog
-        queryWithContext={explainDialogQuery}
-        mandatoryQueryContext={mandatoryQueryContext}
-        onOpenQuery={this.handleQueryStringChange}
-        onClose={() => this.setState({ explainDialogQuery: undefined })}
-        openQueryLabel="Open query"
-      />
-    );
-  }
-
-  private renderHistoryDialog() {
-    const { historyDialogOpen, queryHistory } = this.state;
-    if (!historyDialogOpen) return;
-
-    return (
-      <QueryHistoryDialog
-        queryRecords={queryHistory}
-        setQueryString={(queryString, queryContext) => {
-          this.handleQueryContextChange(queryContext);
-          this.handleQueryStringChange(queryString);
-        }}
-        onClose={() => this.setState({ historyDialogOpen: false })}
-      />
-    );
-  }
-
-  private renderEditContextDialog() {
-    const { editContextDialogOpen, queryContext } = this.state;
-    if (!editContextDialogOpen) return;
-
-    return (
-      <EditContextDialog
-        onQueryContextChange={this.handleQueryContextChange}
-        onClose={() => {
-          this.setState({ editContextDialogOpen: false });
-        }}
-        queryContext={queryContext}
-      />
-    );
-  }
-
-  private renderLiveQueryModeButton() {
-    const { liveQueryMode, queryString } = this.state;
-    if (QueryView.isJsonLike(queryString)) return;
-
-    return (
-      <LiveQueryModeButton
-        liveQueryMode={liveQueryMode}
-        onLiveQueryModeChange={this.handleLiveQueryModeChange}
-        autoLiveQueryModeShouldRun={this.autoLiveQueryModeShouldRun()}
-        minimal
-      />
-    );
-  }
-
-  private renderWrapQueryLimitSelector() {
-    const { wrapQueryLimit, queryString } = this.state;
-    if (QueryView.isJsonLike(queryString)) return;
-
-    return (
-      <Tooltip2
-        content="Automatically wrap the query with a limit to protect against queries with very large result sets."
-        hoverOpenDelay={800}
-      >
-        <Switch
-          className="auto-limit"
-          checked={Boolean(wrapQueryLimit)}
-          label="Auto limit"
-          onChange={() => this.handleWrapQueryLimitChange(wrapQueryLimit ? undefined : 100)}
-        />
-      </Tooltip2>
-    );
-  }
-
-  private renderMainArea() {
-    const { queryString, queryContext, queryResultState, columnMetadataState } = this.state;
-    const emptyQuery = QueryView.isEmptyQuery(queryString);
-    const queryResult = queryResultState.data;
-
-    let currentSchema: string | undefined;
-    let currentTable: string | undefined;
-
-    if (queryResult && queryResult.sqlQuery) {
-      currentSchema = queryResult.sqlQuery.getFirstSchema();
-      currentTable = queryResult.sqlQuery.getFirstTableName();
-    } else if (localStorageGet(LocalStorageKeys.QUERY_KEY)) {
-      const defaultQueryString = localStorageGet(LocalStorageKeys.QUERY_KEY);
-
-      const defaultQueryAst: SqlQuery | undefined = defaultQueryString
-        ? parser(defaultQueryString)
-        : undefined;
-
-      if (defaultQueryAst) {
-        currentSchema = defaultQueryAst.getFirstSchema();
-        currentTable = defaultQueryAst.getFirstTableName();
-      }
-    }
-
-    const someQueryResult = queryResultState.getSomeData();
-    const runeMode = QueryView.isJsonLike(queryString);
-    return (
-      <SplitterLayout
-        vertical
-        percentage
-        secondaryInitialSize={Number(localStorageGet(LocalStorageKeys.QUERY_VIEW_PANE_SIZE)!) || 60}
-        primaryMinSize={30}
-        secondaryMinSize={30}
-        onSecondaryPaneSizeChange={this.handleSecondaryPaneSizeChange}
-      >
-        <div className="control-pane">
-          <QueryInput
-            ref={this.queryInputRef}
-            currentSchema={currentSchema ? currentSchema : 'druid'}
-            currentTable={currentTable}
-            queryString={queryString}
-            onQueryStringChange={this.handleQueryStringChange}
-            runeMode={runeMode}
-            columnMetadata={columnMetadataState.data}
-          />
-          <div className="query-control-bar">
-            <RunButton
-              onEditContext={() => this.setState({ editContextDialogOpen: true })}
-              runeMode={runeMode}
-              queryContext={queryContext}
-              onQueryContextChange={this.handleQueryContextChange}
-              onRun={emptyQuery ? undefined : this.handleRun}
-              onExplain={emptyQuery ? undefined : this.handleExplain}
-              onHistory={() => this.setState({ historyDialogOpen: true })}
-              onPrettier={() => this.prettyPrintJson()}
-              loading={queryResultState.loading}
-            />
-            {this.renderWrapQueryLimitSelector()}
-            {this.renderLiveQueryModeButton()}
-            {queryResult && (
-              <QueryExtraInfo
-                queryResult={queryResult}
-                onDownload={this.handleDownload}
-                onLoadMore={this.handleLoadMore}
-              />
-            )}
-            {queryResultState.loading && <QueryTimer />}
-          </div>
-        </div>
-        <div className="output-pane">
-          {someQueryResult && (
-            <QueryOutput
-              runeMode={runeMode}
-              queryResult={someQueryResult}
-              onQueryAction={this.handleQueryAction}
-              onLoadMore={this.handleLoadMore}
-            />
-          )}
-          {queryResultState.error && (
-            <QueryErrorPane
-              error={queryResultState.error}
-              moveCursorTo={position => {
-                this.moveToPosition(position);
-              }}
-              queryString={queryString}
-              onQueryStringChange={this.handleQueryStringChange}
-            />
-          )}
-          {queryResultState.loading && (
-            <Loader
-              cancelText="Cancel query"
-              onCancel={() => {
-                this.queryManager.cancelCurrent();
-              }}
-            />
-          )}
-          {queryResultState.isInit() && (
-            <div className="init-state">
-              {emptyQuery ? (
-                <p>
-                  Enter a query and click <Code>Run</Code>
-                </p>
-              ) : (
-                <p>
-                  Click <Code>Run</Code> to execute the query
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-      </SplitterLayout>
-    );
-  }
-
-  private moveToPosition(position: RowColumn) {
-    const currentQueryInput = this.queryInputRef.current;
-    if (!currentQueryInput) return;
-    currentQueryInput.goToPosition(position);
-  }
-
-  private readonly handleQueryChange = (query: SqlQuery, preferablyRun?: boolean): void => {
-    this.handleQueryStringChange(query.toString(), preferablyRun);
-
-    // Possibly move the cursor of the QueryInput to the empty literal position
-    const emptyLiteralPosition = findEmptyLiteralPosition(query);
-    if (emptyLiteralPosition) {
-      // Introduce a delay to let the new text appear
-      setTimeout(() => {
-        this.moveToPosition(emptyLiteralPosition);
-      }, 10);
-    }
-  };
-
-  private readonly handleQueryAction = (queryAction: QueryAction): void => {
-    const { parsedQuery } = this.state;
-    if (!parsedQuery) return;
-    this.handleQueryChange(parsedQuery.apply(queryAction), true);
-  };
-
-  private readonly handleQueryStringChange = (
-    queryString: string,
-    preferablyRun?: boolean,
-  ): void => {
-    const parsedQuery = parser(queryString);
-    this.setState({ queryString, parsedQuery }, preferablyRun ? this.handleRunIfLive : undefined);
-  };
-
-  private readonly handleQueryContextChange = (queryContext: QueryContext) => {
-    this.setState({ queryContext });
-  };
-
-  private readonly handleLiveQueryModeChange = (liveQueryMode: LiveQueryMode) => {
-    this.setState({ liveQueryMode });
-    localStorageSetJson(LocalStorageKeys.LIVE_QUERY_MODE, liveQueryMode);
-  };
-
-  private readonly handleWrapQueryLimitChange = (wrapQueryLimit: number | undefined) => {
-    this.setState({ wrapQueryLimit });
-  };
-
-  private readonly handleRun = () => {
-    const { queryString, queryContext, wrapQueryLimit, queryHistory } = this.state;
-    if (QueryView.isJsonLike(queryString) && !QueryView.validRune(queryString)) return;
-
-    const newQueryHistory = QueryRecordUtil.addQueryToHistory(
-      queryHistory,
-      queryString,
-      queryContext,
-    );
-
-    localStorageSetJson(LocalStorageKeys.QUERY_HISTORY, newQueryHistory);
-    localStorageSet(LocalStorageKeys.QUERY_KEY, queryString);
-    localStorageSetJson(LocalStorageKeys.QUERY_CONTEXT, queryContext);
-
-    this.setState({ queryHistory: newQueryHistory });
-    this.queryManager.runQuery({ queryString, queryContext, wrapQueryLimit });
-  };
-
-  private autoLiveQueryModeShouldRun() {
-    const { queryResultState } = this.state;
-    return (
-      !queryResultState.data ||
-      !queryResultState.data.queryDuration ||
-      queryResultState.data.queryDuration < 10000
-    );
-  }
-
-  private readonly handleRunIfLive = () => {
-    const { liveQueryMode } = this.state;
-    if (liveQueryMode === 'off') return;
-    if (liveQueryMode === 'auto' && !this.autoLiveQueryModeShouldRun()) return;
-    this.handleRun();
-  };
-
-  private readonly handleExplain = () => {
-    const { queryString, queryContext, wrapQueryLimit } = this.state;
-
-    this.setState({
-      explainDialogQuery: {
-        engine: 'sql-native',
-        queryString,
-        queryContext,
-        wrapQueryLimit,
-      },
-    });
-  };
-
-  private readonly handleSecondaryPaneSizeChange = (secondaryPaneSize: number) => {
-    localStorageSet(LocalStorageKeys.QUERY_VIEW_PANE_SIZE, String(secondaryPaneSize));
-  };
-
-  private readonly getParsedQuery = () => {
-    const { parsedQuery } = this.state;
-    return parsedQuery;
-  };
-
-  render(): JSX.Element {
-    const { columnMetadataState, parsedQuery } = this.state;
-
-    let defaultSchema;
-    let defaultTable;
-    if (parsedQuery instanceof SqlQuery) {
-      defaultSchema = parsedQuery.getFirstSchema();
-      defaultTable = parsedQuery.getFirstTableName();
-    }
-
-    return (
-      <div
-        className={classNames('query-view app-view', {
-          'hide-column-tree': columnMetadataState.isError(),
-        })}
-      >
-        {!columnMetadataState.isError() && (
-          <ColumnTree
-            getParsedQuery={this.getParsedQuery}
-            columnMetadataLoading={columnMetadataState.loading}
-            columnMetadata={columnMetadataState.data}
-            defaultWhere={LAST_DAY}
-            onQueryChange={this.handleQueryChange}
-            defaultSchema={defaultSchema ? defaultSchema : 'druid'}
-            defaultTable={defaultTable}
-          />
-        )}
-        {this.renderMainArea()}
-        {this.renderExplainDialog()}
-        {this.renderHistoryDialog()}
-        {this.renderEditContextDialog()}
-      </div>
-    );
-  }
-}
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
deleted file mode 100644
index c5dc6c8abe90..000000000000
--- a/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap
+++ /dev/null
@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RunButton matches snapshot loading state 1`] = `
-<div
-  class="bp4-button-group run-button"
->
-  <button
-    class="bp4-button bp4-disabled bp4-intent-primary"
-    disabled=""
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-      class="bp4-icon bp4-icon-caret-right"
-      icon="caret-right"
-      tabindex="-1"
-    >
-      <svg
-        data-icon="caret-right"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-    <span
-      class="bp4-button-text"
-    >
-      Run
-    </span>
-  </button>
-  <span
-    aria-haspopup="true"
-    class="bp4-popover2-target"
-  >
-    <button
-      class="bp4-button bp4-intent-primary"
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-        class="bp4-icon bp4-icon-more"
-        icon="more"
-        tabindex="0"
-      >
-        <svg
-          data-icon="more"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <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>
-`;
-
-exports[`RunButton matches snapshot non-loading state 1`] = `
-<div
-  class="bp4-button-group run-button"
->
-  <button
-    class="bp4-button bp4-intent-primary"
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-      class="bp4-icon bp4-icon-caret-right"
-      icon="caret-right"
-      tabindex="-1"
-    >
-      <svg
-        data-icon="caret-right"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-    <span
-      class="bp4-button-text"
-    >
-      Run
-    </span>
-  </button>
-  <span
-    aria-haspopup="true"
-    class="bp4-popover2-target"
-  >
-    <button
-      class="bp4-button bp4-intent-primary"
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-        class="bp4-icon bp4-icon-more"
-        icon="more"
-        tabindex="0"
-      >
-        <svg
-          data-icon="more"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <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.scss b/web-console/src/views/query-view/run-button/run-button.scss
deleted file mode 100644
index 93faf6123cb3..000000000000
--- a/web-console/src/views/query-view/run-button/run-button.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.
- */
-
-.run-button {
-  .rune-button {
-    background-color: #2ca89e !important;
-  }
-}
diff --git a/web-console/src/views/query-view/run-button/run-button.spec.tsx b/web-console/src/views/query-view/run-button/run-button.spec.tsx
deleted file mode 100644
index 730894aa448b..000000000000
--- a/web-console/src/views/query-view/run-button/run-button.spec.tsx
+++ /dev/null
@@ -1,62 +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 { render } from '@testing-library/react';
-import React from 'react';
-
-import { RunButton } from './run-button';
-
-describe('RunButton', () => {
-  it('matches snapshot non-loading state', () => {
-    const runButton = (
-      <RunButton
-        loading={false}
-        onHistory={() => {}}
-        onEditContext={() => {}}
-        runeMode={false}
-        queryContext={{ f: 3 }}
-        onQueryContextChange={() => {}}
-        onRun={() => {}}
-        onExplain={() => {}}
-        onPrettier={() => {}}
-      />
-    );
-
-    const { container } = render(runButton);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('matches snapshot loading state', () => {
-    const runButton = (
-      <RunButton
-        loading
-        onHistory={() => {}}
-        onEditContext={() => {}}
-        runeMode={false}
-        queryContext={{ f: 3 }}
-        onQueryContextChange={() => {}}
-        onRun={() => {}}
-        onExplain={() => {}}
-        onPrettier={() => {}}
-      />
-    );
-
-    const { container } = render(runButton);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
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
deleted file mode 100644
index 4d2777adf79e..000000000000
--- a/web-console/src/views/query-view/run-button/run-button.tsx
+++ /dev/null
@@ -1,196 +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,
-  ButtonGroup,
-  Intent,
-  Menu,
-  MenuDivider,
-  MenuItem,
-  Position,
-  useHotkeys,
-} from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
-import React, { useCallback, useMemo } from 'react';
-
-import { MenuCheckbox } from '../../../components';
-import {
-  changeUseApproximateCountDistinct,
-  changeUseApproximateTopN,
-  changeUseCache,
-  getUseApproximateCountDistinct,
-  getUseApproximateTopN,
-  getUseCache,
-  QueryContext,
-} from '../../../druid-models';
-import { getLink } from '../../../links';
-import { pluralIfNeeded } from '../../../utils';
-
-import './run-button.scss';
-
-export interface RunButtonProps {
-  runeMode: boolean;
-  queryContext: QueryContext;
-  onQueryContextChange: (newQueryContext: QueryContext) => void;
-  onRun: (() => void) | undefined;
-  loading: boolean;
-  onExplain: (() => void) | undefined;
-  onEditContext: () => void;
-  onHistory: () => void;
-  onPrettier: () => void;
-}
-
-const RunButtonExtraMenu = (props: RunButtonProps) => {
-  const {
-    runeMode,
-    onExplain,
-    queryContext,
-    onQueryContextChange,
-    onEditContext,
-    onHistory,
-    onPrettier,
-  } = props;
-
-  const useCache = getUseCache(queryContext);
-  const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
-  const useApproximateTopN = getUseApproximateTopN(queryContext);
-  const numContextKeys = Object.keys(queryContext).length;
-
-  return (
-    <Menu>
-      <MenuItem
-        icon={IconNames.HELP}
-        text={runeMode ? 'Native query documentation' : 'DruidSQL documentation'}
-        href={getLink(runeMode ? 'DOCS_RUNE' : 'DOCS_SQL')}
-        target="_blank"
-      />
-      <MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
-      {!runeMode && onExplain && (
-        <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
-      )}
-      {runeMode && (
-        <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
-      )}
-      <MenuItem
-        icon={IconNames.PROPERTIES}
-        text="Edit context"
-        onClick={onEditContext}
-        label={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
-      />
-      <MenuDivider />
-      {!runeMode && (
-        <>
-          <MenuCheckbox
-            checked={useApproximateCountDistinct}
-            text="Use approximate COUNT(DISTINCT)"
-            onChange={() => {
-              onQueryContextChange(
-                changeUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
-              );
-            }}
-          />
-          <MenuCheckbox
-            checked={useApproximateTopN}
-            text="Use approximate TopN"
-            onChange={() => {
-              onQueryContextChange(changeUseApproximateTopN(queryContext, !useApproximateTopN));
-            }}
-          />
-        </>
-      )}
-      <MenuCheckbox
-        checked={useCache}
-        text="Use cache"
-        onChange={() => {
-          onQueryContextChange(changeUseCache(queryContext, !useCache));
-        }}
-      />
-    </Menu>
-  );
-};
-
-export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
-  const { runeMode, onRun, loading, onExplain } = props;
-
-  const handleRun = useCallback(() => {
-    if (!onRun) return;
-    onRun();
-  }, [onRun]);
-
-  const hotkeys = useMemo(() => {
-    return [
-      {
-        allowInInput: true,
-        global: true,
-        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, onExplain]);
-
-  useHotkeys(hotkeys);
-
-  return (
-    <ButtonGroup className="run-button">
-      {onRun ? (
-        <Button
-          className={runeMode ? 'rune-button' : undefined}
-          disabled={loading}
-          icon={IconNames.CARET_RIGHT}
-          onClick={handleRun}
-          text="Run"
-          intent={Intent.PRIMARY}
-        />
-      ) : (
-        <Button
-          className={runeMode ? 'rune-button' : undefined}
-          icon={IconNames.CARET_RIGHT}
-          text="Run"
-          disabled
-        />
-      )}
-      <Popover2 position={Position.BOTTOM_LEFT} content={<RunButtonExtraMenu {...props} />}>
-        <Button
-          className={runeMode ? 'rune-button' : undefined}
-          icon={IconNames.MORE}
-          intent={onRun ? Intent.PRIMARY : undefined}
-        />
-      </Popover2>
-    </ButtonGroup>
-  );
-});
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
index f2276f613fcc..f748cae3d5d6 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
@@ -129,7 +129,7 @@ export const PreviewTable = React.memo(function PreviewTable(props: PreviewTable
     const jsonColumn = column.nativeType === 'COMPLEX<json>';
     return (
       <Menu>
-        {ex && val && !jsonColumn && (
+        {ex?.getFirstColumn() && val && !jsonColumn && (
           <>
             {filterOnMenuItem(IconNames.FILTER, ex.equal(val))}
             {filterOnMenuItem(IconNames.FILTER, ex.unequal(val))}
diff --git a/web-console/src/views/query-view/column-tree/__snapshots__/column-tree.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
similarity index 100%
rename from web-console/src/views/query-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
rename to web-console/src/views/workbench-view/column-tree/__snapshots__/column-tree.spec.tsx.snap
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/index.ts b/web-console/src/views/workbench-view/column-tree/column-tree-menu/index.ts
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/index.ts
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/index.ts
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx b/web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx b/web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx b/web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree.scss b/web-console/src/views/workbench-view/column-tree/column-tree.scss
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree.scss
rename to web-console/src/views/workbench-view/column-tree/column-tree.scss
diff --git a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx b/web-console/src/views/workbench-view/column-tree/column-tree.spec.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree.spec.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree.spec.tsx
diff --git a/web-console/src/views/query-view/column-tree/column-tree.tsx b/web-console/src/views/workbench-view/column-tree/column-tree.tsx
similarity index 100%
rename from web-console/src/views/query-view/column-tree/column-tree.tsx
rename to web-console/src/views/workbench-view/column-tree/column-tree.tsx
diff --git a/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap b/web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
similarity index 100%
rename from web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
rename to web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.scss b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.scss
similarity index 98%
rename from web-console/src/views/query-view/explain-dialog/explain-dialog.scss
rename to web-console/src/views/workbench-view/explain-dialog/explain-dialog.scss
index 8b264bd0205a..ee0f671e0de0 100644
--- a/web-console/src/views/query-view/explain-dialog/explain-dialog.scss
+++ b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.scss
@@ -62,7 +62,7 @@
 
       .open-query {
         position: absolute;
-        top: 30px;
+        top: 6px;
         right: 6px;
       }
     }
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.spec.tsx
similarity index 100%
rename from web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
rename to web-console/src/views/workbench-view/explain-dialog/explain-dialog.spec.tsx
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
similarity index 100%
rename from web-console/src/views/query-view/explain-dialog/explain-dialog.tsx
rename to web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
index ba8b11001a48..6a2cb36935cb 100644
--- a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
+++ b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
@@ -606,7 +606,7 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
       const jsonColumn = column.nativeType === 'COMPLEX<json>';
       return (
         <Menu>
-          {ex && val && !jsonColumn && (
+          {ex?.getFirstColumn() && val && !jsonColumn && (
             <>
               {filterOnMenuItem(IconNames.FILTER, ex.equal(val), having)}
               {filterOnMenuItem(IconNames.FILTER, ex.unequal(val), having)}
diff --git a/web-console/src/views/workbench-view/workbench-view.tsx b/web-console/src/views/workbench-view/workbench-view.tsx
index afd3abdc44fe..fc25ab5921df 100644
--- a/web-console/src/views/workbench-view/workbench-view.tsx
+++ b/web-console/src/views/workbench-view/workbench-view.tsx
@@ -52,14 +52,14 @@ import {
   QueryManager,
   QueryState,
 } from '../../utils';
-import { ColumnTree } from '../query-view/column-tree/column-tree';
-import { ExplainDialog } from '../query-view/explain-dialog/explain-dialog';
 
+import { ColumnTree } from './column-tree/column-tree';
 import { ConnectExternalDataDialog } from './connect-external-data-dialog/connect-external-data-dialog';
 import { getDemoQueries } from './demo-queries';
 import { ExecutionDetailsDialog } from './execution-details-dialog/execution-details-dialog';
 import { ExecutionDetailsTab } from './execution-details-pane/execution-details-pane';
 import { ExecutionSubmitDialog } from './execution-submit-dialog/execution-submit-dialog';
+import { ExplainDialog } from './explain-dialog/explain-dialog';
 import { MetadataChangeDetector } from './metadata-change-detector';
 import { QueryTab } from './query-tab/query-tab';
 import { RecentQueryTaskPanel } from './recent-query-task-panel/recent-query-task-panel';

From 1b37830140ff5cfb2db7589d93b09ddcbfb2815d Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Sat, 1 Oct 2022 20:26:12 -0700
Subject: [PATCH 02/10] update tests

---
 .../components/header-bar/__snapshots__/header-bar.spec.tsx.snap | 1 -
 1 file changed, 1 deletion(-)

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 cc7f53463cc5..92ea6c77b87c 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
@@ -20,7 +20,6 @@ exports[`HeaderBar matches snapshot 1`] = `
       href="#workbench"
       icon="application"
       minimal={true}
-      onClick={[Function]}
       text="Query"
     />
     <Blueprint4.Popover2

From da600c6e96afcfff28cc3fa66c08ce8746cb7320 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Sun, 2 Oct 2022 19:07:11 -0700
Subject: [PATCH 03/10] add filter

---
 licenses.yaml                                 |   2 +-
 web-console/package-lock.json                 |  14 +-
 web-console/package.json                      |   2 +-
 .../cell-filter-menu/cell-filter-menu.tsx     | 197 ++++++++++++++++++
 .../record-table-pane/record-table-pane.scss  |   4 +
 .../record-table-pane/record-table-pane.tsx   | 129 ++----------
 .../preview-table/preview-table.scss          |   2 +-
 .../preview-table/preview-table.tsx           |  76 ++-----
 .../result-table-pane/result-table-pane.scss  |   4 +
 .../result-table-pane/result-table-pane.tsx   | 130 ++----------
 10 files changed, 254 insertions(+), 306 deletions(-)
 create mode 100644 web-console/src/components/cell-filter-menu/cell-filter-menu.tsx

diff --git a/licenses.yaml b/licenses.yaml
index 101caa1f6e64..b1060577fe03 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5653,7 +5653,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 0.15.1
+version: 0.15.3
 
 ---
 
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index 2cdbcae41204..bd2be2e1bc53 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -22,7 +22,7 @@
         "d3-axis": "^1.0.12",
         "d3-scale": "^3.2.0",
         "d3-selection": "^1.4.0",
-        "druid-query-toolkit": "^0.15.1",
+        "druid-query-toolkit": "^0.15.3",
         "file-saver": "^2.0.2",
         "follow-redirects": "^1.14.7",
         "fontsource-open-sans": "^3.0.9",
@@ -8956,9 +8956,9 @@
       }
     },
     "node_modules/druid-query-toolkit": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.15.1.tgz",
-      "integrity": "sha512-yklAD1Ksokh2s+llEaR/lvvMHjW6CgdCG7X+JFnWsttM/xITpTFMu4Zo5/MqVvoo9021/deg87QQMCOKNfo3wQ==",
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.15.3.tgz",
+      "integrity": "sha512-AtKnmCDWSHh1+bHFs36drJAKQ60914ttF62x3wIxXbD1zoUEmwwsX4Ks2zD3SItantVS4fTj3cyjMl/c0fojpA==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
@@ -34562,9 +34562,9 @@
       }
     },
     "druid-query-toolkit": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.15.1.tgz",
-      "integrity": "sha512-yklAD1Ksokh2s+llEaR/lvvMHjW6CgdCG7X+JFnWsttM/xITpTFMu4Zo5/MqVvoo9021/deg87QQMCOKNfo3wQ==",
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.15.3.tgz",
+      "integrity": "sha512-AtKnmCDWSHh1+bHFs36drJAKQ60914ttF62x3wIxXbD1zoUEmwwsX4Ks2zD3SItantVS4fTj3cyjMl/c0fojpA==",
       "requires": {
         "tslib": "^2.3.1"
       }
diff --git a/web-console/package.json b/web-console/package.json
index eb7ce0214820..6c9bbcdbfc96 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -79,7 +79,7 @@
     "d3-axis": "^1.0.12",
     "d3-scale": "^3.2.0",
     "d3-selection": "^1.4.0",
-    "druid-query-toolkit": "^0.15.1",
+    "druid-query-toolkit": "^0.15.3",
     "file-saver": "^2.0.2",
     "follow-redirects": "^1.14.7",
     "fontsource-open-sans": "^3.0.9",
diff --git a/web-console/src/components/cell-filter-menu/cell-filter-menu.tsx b/web-console/src/components/cell-filter-menu/cell-filter-menu.tsx
new file mode 100644
index 000000000000..ebf3b1003e3d
--- /dev/null
+++ b/web-console/src/components/cell-filter-menu/cell-filter-menu.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 { Menu, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import {
+  Column,
+  SqlComparison,
+  SqlExpression,
+  SqlLiteral,
+  SqlQuery,
+  SqlRecord,
+  SqlRef,
+  trimString,
+} from 'druid-query-toolkit';
+import React from 'react';
+
+import { copyAndAlert, prettyPrintSql, QueryAction, stringifyValue } from '../../utils';
+
+function sqlLiteralForColumnValue(column: Column, value: unknown): SqlLiteral | undefined {
+  if (column.sqlType === 'TIMESTAMP') {
+    const asDate = new Date(value as any);
+    if (!isNaN(asDate.valueOf())) {
+      return SqlLiteral.create(asDate);
+    }
+  }
+
+  return SqlLiteral.maybe(value);
+}
+
+function isComparable(x: unknown): boolean {
+  return x !== null && x !== '';
+}
+
+function addToClause(clause: SqlExpression, newValue: SqlLiteral): SqlExpression | undefined {
+  if (!(clause instanceof SqlComparison)) return;
+  const { op, lhs, rhs } = clause;
+
+  switch (op) {
+    case '=':
+      if (!(rhs instanceof SqlLiteral)) return;
+      return lhs.in([rhs, newValue]);
+
+    case '<>':
+      if (!(rhs instanceof SqlLiteral)) return;
+      return lhs.notIn([rhs, newValue]);
+
+    case 'IN':
+      if (!(rhs instanceof SqlRecord)) return;
+      return clause.changeRhs(rhs.prepend(newValue));
+
+    default:
+      return;
+  }
+}
+
+function clipboardMenuItem(clause: SqlExpression) {
+  const prettyLabel = prettyPrintSql(clause);
+  return (
+    <MenuItem
+      icon={IconNames.CLIPBOARD}
+      text={`Copy: ${prettyLabel}`}
+      onClick={() => copyAndAlert(clause.toString(), `${prettyLabel} copied to clipboard`)}
+    />
+  );
+}
+
+export interface CellFilterMenuProps {
+  column: Column;
+  value: unknown;
+  headerIndex: number;
+  runeMode?: boolean;
+  query: SqlQuery | undefined;
+  onQueryAction?(action: QueryAction): void;
+  onShowFullValue?(valueString: string): void;
+}
+
+export function CellFilterMenu(props: CellFilterMenuProps) {
+  const { column, value, runeMode, headerIndex, query, onQueryAction, onShowFullValue } = props;
+
+  const showFullValueMenuItem = onShowFullValue ? (
+    <MenuItem
+      icon={IconNames.EYE_OPEN}
+      text="Show full value"
+      onClick={() => {
+        onShowFullValue(stringifyValue(value));
+      }}
+    />
+  ) : undefined;
+
+  const val = sqlLiteralForColumnValue(column, value);
+
+  if (query) {
+    let ex: SqlExpression | undefined;
+    let having = false;
+    if (query.hasStarInSelect()) {
+      ex = SqlRef.column(column.name);
+    } else {
+      const selectValue = query.getSelectExpressionForIndex(headerIndex);
+      if (selectValue) {
+        const outputName = selectValue.getOutputName();
+        having = query.isAggregateSelectIndex(headerIndex);
+        if (having && outputName) {
+          ex = SqlRef.column(outputName);
+        } else {
+          ex = selectValue.getUnderlyingExpression();
+        }
+      }
+    }
+
+    const filterOnMenuItem = (clause: SqlExpression) => {
+      if (!onQueryAction) return;
+      return (
+        <MenuItem
+          icon={IconNames.FILTER}
+          text={`${having ? 'Having' : 'Filter on'}: ${prettyPrintSql(clause)}`}
+          onClick={() => {
+            const column = clause.getUsedColumns()[0];
+            onQueryAction(
+              having
+                ? q => q.removeFromHaving(column).addHaving(clause)
+                : q => q.removeColumnFromWhere(column).addWhere(clause),
+            );
+          }}
+        />
+      );
+    };
+
+    const currentFilterExpression = having
+      ? query.getHavingExpression()
+      : query.getWhereExpression();
+
+    const currentClauses =
+      currentFilterExpression
+        ?.decomposeViaAnd()
+        ?.filter(ex => String(ex.getUsedColumns()) === column.name) || [];
+
+    const updatedClause =
+      currentClauses.length === 1 && val ? addToClause(currentClauses[0], val) : undefined;
+    console.log(updatedClause, currentClauses);
+
+    const jsonColumn = column.nativeType === 'COMPLEX<json>';
+    return (
+      <Menu>
+        {ex?.getFirstColumn() && val && !jsonColumn && (
+          <>
+            {updatedClause && filterOnMenuItem(updatedClause)}
+            {filterOnMenuItem(ex.equal(val))}
+            {filterOnMenuItem(ex.unequal(val))}
+            {isComparable(value) && (
+              <>
+                {filterOnMenuItem(ex.greaterThanOrEqual(val))}
+                {filterOnMenuItem(ex.lessThanOrEqual(val))}
+              </>
+            )}
+          </>
+        )}
+        {showFullValueMenuItem}
+      </Menu>
+    );
+  } else {
+    const ref = SqlRef.column(column.name);
+    const stringValue = stringifyValue(value);
+    const trimmedValue = trimString(stringValue, 50);
+    return (
+      <Menu>
+        <MenuItem
+          icon={IconNames.CLIPBOARD}
+          text={`Copy: ${trimmedValue}`}
+          onClick={() => copyAndAlert(stringValue, `${trimmedValue} copied to clipboard`)}
+        />
+        {!runeMode && val && (
+          <>
+            {clipboardMenuItem(ref.equal(val))}
+            {clipboardMenuItem(ref.unequal(val))}
+          </>
+        )}
+        {showFullValueMenuItem}
+      </Menu>
+    );
+  }
+}
diff --git a/web-console/src/components/record-table-pane/record-table-pane.scss b/web-console/src/components/record-table-pane/record-table-pane.scss
index d00a2e3d322f..d2d6a86232cb 100644
--- a/web-console/src/components/record-table-pane/record-table-pane.scss
+++ b/web-console/src/components/record-table-pane/record-table-pane.scss
@@ -84,6 +84,10 @@
             margin-top: 3px;
             margin-right: 5px;
           }
+
+          .filter-icon {
+            margin-top: 2px;
+          }
         }
 
         .formula {
diff --git a/web-console/src/components/record-table-pane/record-table-pane.tsx b/web-console/src/components/record-table-pane/record-table-pane.tsx
index a27de551e741..1cd5833f5600 100644
--- a/web-console/src/components/record-table-pane/record-table-pane.tsx
+++ b/web-console/src/components/record-table-pane/record-table-pane.tsx
@@ -16,18 +16,11 @@
  * limitations under the License.
  */
 
-import { Button, Icon, Menu, MenuItem } from '@blueprintjs/core';
-import { IconName, IconNames } from '@blueprintjs/icons';
+import { Button, Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
-import {
-  Column,
-  QueryResult,
-  SqlExpression,
-  SqlLiteral,
-  SqlRef,
-  trimString,
-} from 'druid-query-toolkit';
+import { Column, QueryResult } from 'druid-query-toolkit';
 import React, { useEffect, useState } from 'react';
 import ReactTable from 'react-table';
 
@@ -36,43 +29,25 @@ import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../reac
 import {
   columnToIcon,
   columnToWidth,
-  copyAndAlert,
   filterMap,
   formatNumber,
   getNumericColumnBraces,
   Pagination,
-  prettyPrintSql,
-  stringifyValue,
 } from '../../utils';
 import { BracedText } from '../braced-text/braced-text';
+import { CellFilterMenu } from '../cell-filter-menu/cell-filter-menu';
 import { Deferred } from '../deferred/deferred';
 import { TableCell } from '../table-cell/table-cell';
 
 import './record-table-pane.scss';
 
-function sqlLiteralForColumnValue(column: Column, value: unknown): SqlLiteral | undefined {
-  if (column.sqlType === 'TIMESTAMP') {
-    const asDate = new Date(value as any);
-    if (!isNaN(asDate.valueOf())) {
-      return SqlLiteral.create(asDate);
-    }
-  }
-
-  return SqlLiteral.maybe(value);
-}
-
-function isComparable(x: unknown): boolean {
-  return x !== null && x !== '';
-}
-
 export interface RecordTablePaneProps {
   queryResult: QueryResult;
   initPageSize?: number;
-  addFilter?(filter: string): void;
 }
 
 export const RecordTablePane = React.memo(function RecordTablePane(props: RecordTablePaneProps) {
-  const { queryResult, initPageSize, addFilter } = props;
+  const { queryResult, initPageSize } = props;
   const parsedQuery = queryResult.sqlQuery;
   const [pagination, setPagination] = useState<Pagination>({
     page: 0,
@@ -96,95 +71,17 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
     );
   }
 
-  function filterOnMenuItem(icon: IconName, clause: SqlExpression) {
-    if (!parsedQuery || !addFilter) return;
-
-    return (
-      <MenuItem
-        icon={icon}
-        text={`Filter on: ${prettyPrintSql(clause)}`}
-        onClick={() => {
-          addFilter(clause.toString());
-        }}
-      />
-    );
-  }
-
-  function actionMenuItem(clause: SqlExpression) {
-    if (!addFilter) return;
-    const prettyLabel = prettyPrintSql(clause);
-    return (
-      <MenuItem
-        icon={IconNames.FILTER}
-        text={`Filter: ${prettyLabel}`}
-        onClick={() => addFilter(clause.toString())}
-      />
-    );
-  }
-
   function getCellMenu(column: Column, headerIndex: number, value: unknown) {
-    const showFullValueMenuItem = (
-      <MenuItem
-        icon={IconNames.EYE_OPEN}
-        text="Show full value"
-        onClick={() => {
-          setShowValue(stringifyValue(value));
-        }}
+    return (
+      <CellFilterMenu
+        column={column}
+        value={value}
+        headerIndex={headerIndex}
+        query={parsedQuery}
+        onQueryAction={undefined}
+        onShowFullValue={setShowValue}
       />
     );
-
-    const val = sqlLiteralForColumnValue(column, value);
-
-    if (parsedQuery) {
-      let ex: SqlExpression | undefined;
-      if (parsedQuery.hasStarInSelect()) {
-        ex = SqlRef.column(column.name);
-      } else {
-        const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
-        if (selectValue) {
-          ex = selectValue.getUnderlyingExpression();
-        }
-      }
-
-      const jsonColumn = column.nativeType === 'COMPLEX<json>';
-      return (
-        <Menu>
-          {ex?.getFirstColumn() && val && !jsonColumn && (
-            <>
-              {filterOnMenuItem(IconNames.FILTER, ex.equal(val))}
-              {filterOnMenuItem(IconNames.FILTER, ex.unequal(val))}
-              {isComparable(value) && (
-                <>
-                  {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val))}
-                  {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val))}
-                </>
-              )}
-            </>
-          )}
-          {showFullValueMenuItem}
-        </Menu>
-      );
-    } else {
-      const ref = SqlRef.column(column.name);
-      const stringValue = stringifyValue(value);
-      const trimmedValue = trimString(stringValue, 50);
-      return (
-        <Menu>
-          <MenuItem
-            icon={IconNames.CLIPBOARD}
-            text={`Copy: ${trimmedValue}`}
-            onClick={() => copyAndAlert(stringValue, `${trimmedValue} copied to clipboard`)}
-          />
-          {val && (
-            <>
-              {actionMenuItem(ref.equal(val))}
-              {actionMenuItem(ref.unequal(val))}
-            </>
-          )}
-          {showFullValueMenuItem}
-        </Menu>
-      );
-    }
   }
 
   function getHeaderClassName(header: string) {
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss
index f43130604d7e..2a1850674273 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss
@@ -89,7 +89,7 @@
           }
 
           .filter-icon {
-            margin-top: 1px;
+            margin-top: 2px;
             margin-left: 3px;
           }
         }
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
index f748cae3d5d6..8744e16f89cc 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
@@ -16,32 +16,23 @@
  * limitations under the License.
  */
 
-import { Icon, Menu, MenuItem } from '@blueprintjs/core';
-import { IconName, IconNames } from '@blueprintjs/icons';
+import { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
-import {
-  Column,
-  QueryResult,
-  SqlAlias,
-  SqlExpression,
-  SqlLiteral,
-  SqlQuery,
-  SqlStar,
-} from 'druid-query-toolkit';
+import { Column, QueryResult, SqlAlias, SqlQuery, SqlStar } from 'druid-query-toolkit';
 import React, { useState } from 'react';
 import ReactTable from 'react-table';
 
 import { BracedText, Deferred, TableCell } from '../../../../components';
+import { CellFilterMenu } from '../../../../components/cell-filter-menu/cell-filter-menu';
 import { ShowValueDialog } from '../../../../dialogs/show-value-dialog/show-value-dialog';
 import {
   columnToIcon,
   columnToWidth,
   filterMap,
   getNumericColumnBraces,
-  prettyPrintSql,
   QueryAction,
-  stringifyValue,
 } from '../../../../utils';
 
 import './preview-table.scss';
@@ -50,10 +41,6 @@ function isDate(v: any): v is Date {
   return Boolean(v && typeof v.toISOString === 'function');
 }
 
-function isComparable(x: unknown): boolean {
-  return x !== null && x !== '' && !isNaN(Number(x));
-}
-
 function getExpressionIfAlias(query: SqlQuery, selectIndex: number): string {
   const ex = query.getSelectExpressionForIndex(selectIndex);
 
@@ -94,55 +81,16 @@ export const PreviewTable = React.memo(function PreviewTable(props: PreviewTable
     );
   }
 
-  function filterOnMenuItem(icon: IconName, clause: SqlExpression) {
-    return (
-      <MenuItem
-        icon={icon}
-        text={`Filter on: ${prettyPrintSql(clause)}`}
-        onClick={() => {
-          onQueryAction(q => q.addWhere(clause));
-        }}
-      />
-    );
-  }
-
   function getCellMenu(column: Column, headerIndex: number, value: unknown) {
-    const val = SqlLiteral.maybe(value);
-    const showFullValueMenuItem = (
-      <MenuItem
-        icon={IconNames.EYE_OPEN}
-        text="Show full value"
-        onClick={() => {
-          setShowValue(stringifyValue(value));
-        }}
-      />
-    );
-
-    let ex: SqlExpression | undefined;
-    if (!parsedQuery.isAggregateSelectIndex(headerIndex)) {
-      const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
-      if (selectValue) {
-        ex = selectValue.getUnderlyingExpression();
-      }
-    }
-
-    const jsonColumn = column.nativeType === 'COMPLEX<json>';
     return (
-      <Menu>
-        {ex?.getFirstColumn() && val && !jsonColumn && (
-          <>
-            {filterOnMenuItem(IconNames.FILTER, ex.equal(val))}
-            {filterOnMenuItem(IconNames.FILTER, ex.unequal(val))}
-            {isComparable(value) && (
-              <>
-                {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val))}
-                {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val))}
-              </>
-            )}
-          </>
-        )}
-        {showFullValueMenuItem}
-      </Menu>
+      <CellFilterMenu
+        column={column}
+        value={value}
+        headerIndex={headerIndex}
+        query={parsedQuery}
+        onQueryAction={onQueryAction}
+        onShowFullValue={setShowValue}
+      />
     );
   }
 
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss
index a823c0d571ab..366deb7956fc 100644
--- a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss
+++ b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss
@@ -84,6 +84,10 @@
             margin-top: 3px;
             margin-right: 5px;
           }
+
+          .filter-icon {
+            margin-top: 2px;
+          }
         }
 
         .formula {
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
index 6a2cb36935cb..8dc66584fa9c 100644
--- a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
+++ b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
@@ -17,7 +17,7 @@
  */
 
 import { Button, Icon, Intent, Menu, MenuItem } from '@blueprintjs/core';
-import { IconName, IconNames } from '@blueprintjs/icons';
+import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import {
@@ -30,13 +30,13 @@ import {
   SqlQuery,
   SqlRef,
   SqlStar,
-  trimString,
 } from 'druid-query-toolkit';
 import * as JSONBig from 'json-bigint-native';
 import React, { useEffect, useState } from 'react';
 import ReactTable from 'react-table';
 
 import { BracedText, Deferred, TableCell } from '../../../components';
+import { CellFilterMenu } from '../../../components/cell-filter-menu/cell-filter-menu';
 import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
 import {
   computeFlattenExprsForData,
@@ -56,7 +56,6 @@ import {
   Pagination,
   prettyPrintSql,
   QueryAction,
-  stringifyValue,
   timeFormatToSql,
 } from '../../../utils';
 import { ExpressionEditorDialog } from '../../sql-data-loader-view/expression-editor-dialog/expression-editor-dialog';
@@ -64,17 +63,6 @@ import { TimeFloorMenuItem } from '../time-floor-menu-item/time-floor-menu-item'
 
 import './result-table-pane.scss';
 
-function sqlLiteralForColumnValue(column: Column, value: unknown): SqlLiteral | undefined {
-  if (column.sqlType === 'TIMESTAMP') {
-    const asDate = new Date(value as any);
-    if (!isNaN(asDate.valueOf())) {
-      return SqlLiteral.create(asDate);
-    }
-  }
-
-  return SqlLiteral.maybe(value);
-}
-
 const CAST_TARGETS: string[] = ['VARCHAR', 'BIGINT', 'DOUBLE'];
 
 function jsonValue(ex: SqlExpression, path: string): SqlExpression {
@@ -85,10 +73,6 @@ function getJsonPaths(jsons: Record<string, any>[]): string[] {
   return ['$.'].concat(computeFlattenExprsForData(jsons, 'include-arrays', true));
 }
 
-function isComparable(x: unknown): boolean {
-  return x !== null && x !== '';
-}
-
 function getExpressionIfAlias(query: SqlQuery, selectIndex: number): string {
   const ex = query.getSelectExpressionForIndex(selectIndex);
 
@@ -542,106 +526,18 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
     return <Menu>{menuItems}</Menu>;
   }
 
-  function filterOnMenuItem(icon: IconName, clause: SqlExpression, having: boolean) {
-    if (!parsedQuery) return;
-
-    return (
-      <MenuItem
-        icon={icon}
-        text={`${having ? 'Having' : 'Filter on'}: ${prettyPrintSql(clause)}`}
-        onClick={() => {
-          const column = clause.getUsedColumns()[0];
-          onQueryAction(
-            having
-              ? q => q.removeFromHaving(column).addHaving(clause)
-              : q => q.removeColumnFromWhere(column).addWhere(clause),
-          );
-        }}
-      />
-    );
-  }
-
-  function clipboardMenuItem(clause: SqlExpression) {
-    const prettyLabel = prettyPrintSql(clause);
-    return (
-      <MenuItem
-        icon={IconNames.CLIPBOARD}
-        text={`Copy: ${prettyLabel}`}
-        onClick={() => copyAndAlert(clause.toString(), `${prettyLabel} copied to clipboard`)}
-      />
-    );
-  }
-
   function getCellMenu(column: Column, headerIndex: number, value: unknown) {
-    const showFullValueMenuItem = (
-      <MenuItem
-        icon={IconNames.EYE_OPEN}
-        text="Show full value"
-        onClick={() => {
-          setShowValue(stringifyValue(value));
-        }}
+    return (
+      <CellFilterMenu
+        column={column}
+        value={value}
+        headerIndex={headerIndex}
+        runeMode={runeMode}
+        query={parsedQuery}
+        onQueryAction={onQueryAction}
+        onShowFullValue={setShowValue}
       />
     );
-
-    const val = sqlLiteralForColumnValue(column, value);
-
-    if (parsedQuery) {
-      let ex: SqlExpression | undefined;
-      let having = false;
-      if (parsedQuery.hasStarInSelect()) {
-        ex = SqlRef.column(column.name);
-      } else {
-        const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
-        if (selectValue) {
-          const outputName = selectValue.getOutputName();
-          having = parsedQuery.isAggregateSelectIndex(headerIndex);
-          if (having && outputName) {
-            ex = SqlRef.column(outputName);
-          } else {
-            ex = selectValue.getUnderlyingExpression();
-          }
-        }
-      }
-
-      const jsonColumn = column.nativeType === 'COMPLEX<json>';
-      return (
-        <Menu>
-          {ex?.getFirstColumn() && val && !jsonColumn && (
-            <>
-              {filterOnMenuItem(IconNames.FILTER, ex.equal(val), having)}
-              {filterOnMenuItem(IconNames.FILTER, ex.unequal(val), having)}
-              {isComparable(value) && (
-                <>
-                  {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val), having)}
-                  {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val), having)}
-                </>
-              )}
-            </>
-          )}
-          {showFullValueMenuItem}
-        </Menu>
-      );
-    } else {
-      const ref = SqlRef.column(column.name);
-      const stringValue = stringifyValue(value);
-      const trimmedValue = trimString(stringValue, 50);
-      return (
-        <Menu>
-          <MenuItem
-            icon={IconNames.CLIPBOARD}
-            text={`Copy: ${trimmedValue}`}
-            onClick={() => copyAndAlert(stringValue, `${trimmedValue} copied to clipboard`)}
-          />
-          {!runeMode && val && (
-            <>
-              {clipboardMenuItem(ref.equal(val))}
-              {clipboardMenuItem(ref.unequal(val))}
-            </>
-          )}
-          {showFullValueMenuItem}
-        </Menu>
-      );
-    }
   }
 
   function getHeaderClassName(header: string) {
@@ -724,7 +620,9 @@ export const ResultTablePane = React.memo(function ResultTablePane(props: Result
                       <div className="output-name">
                         {icon && <Icon className="type-icon" icon={icon} size={12} />}
                         {h}
-                        {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
+                        {hasFilterOnHeader(h, i) && (
+                          <Icon className="filter-icon" icon={IconNames.FILTER} size={14} />
+                        )}
                       </div>
                       {parsedQuery && (
                         <div className="formula">{getExpressionIfAlias(parsedQuery, i)}</div>

From 2bb1fb90155a1d5f5ac2d42720d87b43576178ad Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Sun, 2 Oct 2022 19:21:15 -0700
Subject: [PATCH 04/10] fix test

---
 web-console/e2e-tests/component/query/overview.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-console/e2e-tests/component/query/overview.ts b/web-console/e2e-tests/component/query/overview.ts
index b12909c81527..9ae4badcf1c0 100644
--- a/web-console/e2e-tests/component/query/overview.ts
+++ b/web-console/e2e-tests/component/query/overview.ts
@@ -30,27 +30,27 @@ export class QueryOverview {
 
   constructor(page: playwright.Page, unifiedConsoleUrl: string) {
     this.page = page;
-    this.baseUrl = unifiedConsoleUrl + '#query';
+    this.baseUrl = unifiedConsoleUrl + '#workbench';
   }
 
   async runQuery(query: string): Promise<string[][]> {
     await this.page.goto(this.baseUrl);
     await this.page.reload({ waitUntil: 'networkidle' });
 
-    const input = await this.page.waitForSelector('div.query-input textarea');
+    const input = await this.page.waitForSelector('div.flexible-query-input textarea');
     await input.fill(query);
 
     await clickButton(this.page, 'Run');
-    await this.page.waitForSelector('div.query-info');
+    await this.page.waitForSelector('div.result-table-pane');
 
-    return await extractTable(this.page, 'div.query-output div.rt-tr-group', 'div.rt-td');
+    return await extractTable(this.page, 'div.result-table-pane div.rt-tr-group', 'div.rt-td');
   }
 
   async cancelQuery(query: string): Promise<number> {
     await this.page.goto(this.baseUrl);
     await this.page.reload({ waitUntil: 'networkidle' });
 
-    const input = await this.page.waitForSelector('div.query-input textarea');
+    const input = await this.page.waitForSelector('div.flexible-query-input textarea');
     await input.fill(query);
 
     await Promise.all([

From de3b37d248ced153e117638fd6d5bbe364fbcdd0 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Tue, 4 Oct 2022 09:12:17 -0700
Subject: [PATCH 05/10] bump d3 things to latest versions

---
 licenses.yaml                   |  46 +++++----
 licenses/bin/d3-array.ISC       |  13 +++
 licenses/bin/d3-axis.ISC        |  13 +++
 licenses/bin/d3-color.ISC       |  13 +++
 licenses/bin/d3-interpolate.ISC |  13 +++
 licenses/bin/d3-scale.ISC       |  13 +++
 licenses/bin/d3-selection.ISC   |  13 +++
 licenses/bin/internmap.ISC      |  13 +++
 web-console/package-lock.json   | 162 ++++++++++++++++++++++----------
 web-console/package.json        |   8 +-
 10 files changed, 233 insertions(+), 74 deletions(-)
 create mode 100644 licenses/bin/d3-array.ISC
 create mode 100644 licenses/bin/d3-axis.ISC
 create mode 100644 licenses/bin/d3-color.ISC
 create mode 100644 licenses/bin/d3-interpolate.ISC
 create mode 100644 licenses/bin/d3-scale.ISC
 create mode 100644 licenses/bin/d3-selection.ISC
 create mode 100644 licenses/bin/internmap.ISC

diff --git a/licenses.yaml b/licenses.yaml
index b1060577fe03..c538af1f8862 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5492,30 +5492,30 @@ license_file_path: licenses/bin/csstype.MIT
 name: "d3-array"
 license_category: binary
 module: web-console
-license_name: BSD-3-Clause License
+license_name: ISC License
 copyright: Mike Bostock
-version: 2.3.3
-license_file_path: licenses/bin/d3-array.BSD3
+version: 3.2.0
+license_file_path: licenses/bin/d3-array.ISC
 
 ---
 
 name: "d3-axis"
 license_category: binary
 module: web-console
-license_name: BSD-3-Clause License
+license_name: ISC License
 copyright: Mike Bostock
-version: 1.0.12
-license_file_path: licenses/bin/d3-axis.BSD3
+version: 3.0.0
+license_file_path: licenses/bin/d3-axis.ISC
 
 ---
 
 name: "d3-color"
 license_category: binary
 module: web-console
-license_name: BSD-3-Clause License
+license_name: ISC License
 copyright: Mike Bostock
-version: 1.4.0
-license_file_path: licenses/bin/d3-color.BSD3
+version: 3.1.0
+license_file_path: licenses/bin/d3-color.ISC
 
 ---
 
@@ -5532,30 +5532,30 @@ license_file_path: licenses/bin/d3-format.BSD3
 name: "d3-interpolate"
 license_category: binary
 module: web-console
-license_name: BSD-3-Clause License
+license_name: ISC License
 copyright: Mike Bostock
-version: 1.3.2
-license_file_path: licenses/bin/d3-interpolate.BSD3
+version: 3.0.1
+license_file_path: licenses/bin/d3-interpolate.ISC
 
 ---
 
 name: "d3-scale"
 license_category: binary
 module: web-console
-license_name: BSD-3-Clause License
+license_name: ISC License
 copyright: Mike Bostock
-version: 3.2.0
-license_file_path: licenses/bin/d3-scale.BSD3
+version: 4.0.2
+license_file_path: licenses/bin/d3-scale.ISC
 
 ---
 
 name: "d3-selection"
 license_category: binary
 module: web-console
-license_name: BSD-3-Clause License
+license_name: ISC License
 copyright: Mike Bostock
-version: 1.4.0
-license_file_path: licenses/bin/d3-selection.BSD3
+version: 3.0.0
+license_file_path: licenses/bin/d3-selection.ISC
 
 ---
 
@@ -5837,6 +5837,16 @@ license_file_path: licenses/bin/import-fresh.MIT
 
 ---
 
+name: "internmap"
+license_category: binary
+module: web-console
+license_name: ISC License
+copyright: Mike Bostock
+version: 2.0.3
+license_file_path: licenses/bin/internmap.ISC
+
+---
+
 name: "is-arguments"
 license_category: binary
 module: web-console
diff --git a/licenses/bin/d3-array.ISC b/licenses/bin/d3-array.ISC
new file mode 100644
index 000000000000..fbe44bdc9ad5
--- /dev/null
+++ b/licenses/bin/d3-array.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2022 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-axis.ISC b/licenses/bin/d3-axis.ISC
new file mode 100644
index 000000000000..b0145150fd35
--- /dev/null
+++ b/licenses/bin/d3-axis.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-color.ISC b/licenses/bin/d3-color.ISC
new file mode 100644
index 000000000000..fbe44bdc9ad5
--- /dev/null
+++ b/licenses/bin/d3-color.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2022 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-interpolate.ISC b/licenses/bin/d3-interpolate.ISC
new file mode 100644
index 000000000000..b0145150fd35
--- /dev/null
+++ b/licenses/bin/d3-interpolate.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-scale.ISC b/licenses/bin/d3-scale.ISC
new file mode 100644
index 000000000000..b0145150fd35
--- /dev/null
+++ b/licenses/bin/d3-scale.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-selection.ISC b/licenses/bin/d3-selection.ISC
new file mode 100644
index 000000000000..b0145150fd35
--- /dev/null
+++ b/licenses/bin/d3-selection.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/internmap.ISC b/licenses/bin/internmap.ISC
new file mode 100644
index 000000000000..6fca7113f8ba
--- /dev/null
+++ b/licenses/bin/internmap.ISC
@@ -0,0 +1,13 @@
+Copyright 2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index bd2be2e1bc53..0f55d486b3a1 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -18,10 +18,10 @@
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.2.0",
         "core-js": "^3.10.1",
-        "d3-array": "^2.3.3",
-        "d3-axis": "^1.0.12",
-        "d3-scale": "^3.2.0",
-        "d3-selection": "^1.4.0",
+        "d3-array": "^3.2.0",
+        "d3-axis": "^3.0.0",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
         "druid-query-toolkit": "^0.15.3",
         "file-saver": "^2.0.2",
         "follow-redirects": "^1.14.7",
@@ -8465,19 +8465,31 @@
       "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
     },
     "node_modules/d3-array": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.3.3.tgz",
-      "integrity": "sha512-syv3wp0U5aB6toP2zb2OdBkhTy1MWDsCAaYk6OXJZv+G4u7bSWEmYgxLoFyc88RQUhZYGCebW9a9UD1gFi5+MQ=="
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+      "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-axis": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
-      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-color": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
-      "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-format": {
       "version": "1.4.1",
@@ -8485,29 +8497,49 @@
       "integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g=="
     },
     "node_modules/d3-interpolate": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
-      "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "dependencies": {
-        "d3-color": "1"
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-scale": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.0.tgz",
-      "integrity": "sha512-1RnLYPmH3f2E96hSsCr3ok066myuAxoH3+pnlJAedeMOp7jeW7A+GZHAyVWWaStfphyPEBiDoLFA9zl+DcnC2Q==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale/node_modules/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
       "dependencies": {
-        "d3-array": "1.2.0 - 2",
-        "d3-format": "1",
-        "d3-interpolate": "1",
-        "d3-time": "1",
-        "d3-time-format": "2"
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-selection": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.0.tgz",
-      "integrity": "sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-time": {
       "version": "1.1.0",
@@ -12599,6 +12631,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -34140,19 +34180,22 @@
       "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
     },
     "d3-array": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.3.3.tgz",
-      "integrity": "sha512-syv3wp0U5aB6toP2zb2OdBkhTy1MWDsCAaYk6OXJZv+G4u7bSWEmYgxLoFyc88RQUhZYGCebW9a9UD1gFi5+MQ=="
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+      "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
     },
     "d3-axis": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
-      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
     },
     "d3-color": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
-      "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
     },
     "d3-format": {
       "version": "1.4.1",
@@ -34160,29 +34203,39 @@
       "integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g=="
     },
     "d3-interpolate": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
-      "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "requires": {
-        "d3-color": "1"
+        "d3-color": "1 - 3"
       }
     },
     "d3-scale": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.0.tgz",
-      "integrity": "sha512-1RnLYPmH3f2E96hSsCr3ok066myuAxoH3+pnlJAedeMOp7jeW7A+GZHAyVWWaStfphyPEBiDoLFA9zl+DcnC2Q==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
       "requires": {
-        "d3-array": "1.2.0 - 2",
-        "d3-format": "1",
-        "d3-interpolate": "1",
-        "d3-time": "1",
-        "d3-time-format": "2"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "dependencies": {
+        "d3-time": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+          "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+          "requires": {
+            "d3-array": "2 - 3"
+          }
+        }
       }
     },
     "d3-selection": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.0.tgz",
-      "integrity": "sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
     },
     "d3-time": {
       "version": "1.1.0",
@@ -37367,6 +37420,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
diff --git a/web-console/package.json b/web-console/package.json
index 6c9bbcdbfc96..aed99b79008f 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -75,10 +75,10 @@
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.10.1",
-    "d3-array": "^2.3.3",
-    "d3-axis": "^1.0.12",
-    "d3-scale": "^3.2.0",
-    "d3-selection": "^1.4.0",
+    "d3-array": "^3.2.0",
+    "d3-axis": "^3.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
     "druid-query-toolkit": "^0.15.3",
     "file-saver": "^2.0.2",
     "follow-redirects": "^1.14.7",

From c67ab979c67595b6285aeb6f7cc9ddf405acc653 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Oct 2022 13:08:07 -0700
Subject: [PATCH 06/10] rent too far into the future with d3

---
 licenses.yaml                 |  38 +++---
 licenses/bin/d3-array.BSD3    |   2 +-
 web-console/package-lock.json | 236 +++++++++++++++-------------------
 web-console/package.json      |  16 +--
 4 files changed, 134 insertions(+), 158 deletions(-)

diff --git a/licenses.yaml b/licenses.yaml
index c538af1f8862..1d1925896281 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5492,30 +5492,30 @@ license_file_path: licenses/bin/csstype.MIT
 name: "d3-array"
 license_category: binary
 module: web-console
-license_name: ISC License
+license_name: BSD-3-Clause License
 copyright: Mike Bostock
-version: 3.2.0
-license_file_path: licenses/bin/d3-array.ISC
+version: 2.12.1
+license_file_path: licenses/bin/d3-array.BSD3
 
 ---
 
 name: "d3-axis"
 license_category: binary
 module: web-console
-license_name: ISC License
+license_name: BSD-3-Clause License
 copyright: Mike Bostock
-version: 3.0.0
-license_file_path: licenses/bin/d3-axis.ISC
+version: 2.1.0
+license_file_path: licenses/bin/d3-axis.BSD3
 
 ---
 
 name: "d3-color"
 license_category: binary
 module: web-console
-license_name: ISC License
+license_name: BSD-3-Clause License
 copyright: Mike Bostock
-version: 3.1.0
-license_file_path: licenses/bin/d3-color.ISC
+version: 2.0.0
+license_file_path: licenses/bin/d3-color.BSD3
 
 ---
 
@@ -5532,30 +5532,30 @@ license_file_path: licenses/bin/d3-format.BSD3
 name: "d3-interpolate"
 license_category: binary
 module: web-console
-license_name: ISC License
+license_name: BSD-3-Clause License
 copyright: Mike Bostock
-version: 3.0.1
-license_file_path: licenses/bin/d3-interpolate.ISC
+version: 2.0.1
+license_file_path: licenses/bin/d3-interpolate.BSD3
 
 ---
 
 name: "d3-scale"
 license_category: binary
 module: web-console
-license_name: ISC License
+license_name: BSD-3-Clause License
 copyright: Mike Bostock
-version: 4.0.2
-license_file_path: licenses/bin/d3-scale.ISC
+version: 3.3.0
+license_file_path: licenses/bin/d3-scale.BSD3
 
 ---
 
 name: "d3-selection"
 license_category: binary
 module: web-console
-license_name: ISC License
+license_name: BSD-3-Clause License
 copyright: Mike Bostock
-version: 3.0.0
-license_file_path: licenses/bin/d3-selection.ISC
+version: 2.0.0
+license_file_path: licenses/bin/d3-selection.BSD3
 
 ---
 
@@ -5842,7 +5842,7 @@ license_category: binary
 module: web-console
 license_name: ISC License
 copyright: Mike Bostock
-version: 2.0.3
+version: 1.0.1
 license_file_path: licenses/bin/internmap.ISC
 
 ---
diff --git a/licenses/bin/d3-array.BSD3 b/licenses/bin/d3-array.BSD3
index b1b22233e2c2..894ddc6549f1 100644
--- a/licenses/bin/d3-array.BSD3
+++ b/licenses/bin/d3-array.BSD3
@@ -1,4 +1,4 @@
-Copyright 2010-2018 Mike Bostock
+Copyright 2010-2020 Mike Bostock
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index 0f55d486b3a1..5f1e35cef338 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -18,10 +18,10 @@
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.2.0",
         "core-js": "^3.10.1",
-        "d3-array": "^3.2.0",
-        "d3-axis": "^3.0.0",
-        "d3-scale": "^4.0.2",
-        "d3-selection": "^3.0.0",
+        "d3-array": "^2.12.1",
+        "d3-axis": "^2.1.0",
+        "d3-scale": "^3.3.0",
+        "d3-selection": "^2.0.0",
         "druid-query-toolkit": "^0.15.3",
         "file-saver": "^2.0.2",
         "follow-redirects": "^1.14.7",
@@ -54,10 +54,10 @@
         "@babel/preset-env": "^7.14.4",
         "@testing-library/react": "^8.0.9",
         "@types/classnames": "^2.2.9",
-        "@types/d3-array": "^2.0.0",
-        "@types/d3-axis": "^1.0.12",
-        "@types/d3-scale": "^2.1.1",
-        "@types/d3-selection": "^1.4.1",
+        "@types/d3-array": "^2.12.3",
+        "@types/d3-axis": "^2.1.3",
+        "@types/d3-scale": "^3.3.2",
+        "@types/d3-selection": "^2.0.1",
         "@types/enzyme": "^3.10.3",
         "@types/enzyme-adapter-react-16": "^1.0.5",
         "@types/file-saver": "^2.0.1",
@@ -4600,39 +4600,39 @@
       "dev": true
     },
     "node_modules/@types/d3-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.0.0.tgz",
-      "integrity": "sha512-rGqfPVowNDTszSFvwoZIXvrPG7s/qKzm9piCRIH6xwTTRu7pPZ3ootULFnPkTt74B6i5lN0FpLQL24qGOw1uZA==",
+      "version": "2.12.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.12.3.tgz",
+      "integrity": "sha512-hN879HLPTVqZV3FQEXy7ptt083UXwguNbnxdTGzVW4y4KjX5uyNKljrQixZcSJfLyFirbpUokxpXtvR+N5+KIg==",
       "dev": true
     },
     "node_modules/@types/d3-axis": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.12.tgz",
-      "integrity": "sha512-BZISgSD5M8TgURyNtcPAmUB9sk490CO1Thb6/gIn0WZTt3Y50IssX+2Z0vTccoqZksUDTep0b+o4ofXslvNbqg==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-2.1.3.tgz",
+      "integrity": "sha512-QjXjwZ0xzyrW2ndkmkb09ErgWDEYtbLBKGui73QLMFm3woqWpxptfD5Y7vqQdybMcu7WEbjZ5q+w2w5+uh2IjA==",
       "dev": true,
       "dependencies": {
-        "@types/d3-selection": "*"
+        "@types/d3-selection": "^2"
       }
     },
     "node_modules/@types/d3-scale": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.1.1.tgz",
-      "integrity": "sha512-kNTkbZQ+N/Ip8oX9PByXfDLoCSaZYm+VUOasbmsa6KD850/ziMdYepg/8kLg2plHzoLANdMqPoYQbvExevLUHg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz",
+      "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==",
       "dev": true,
       "dependencies": {
-        "@types/d3-time": "*"
+        "@types/d3-time": "^2"
       }
     },
     "node_modules/@types/d3-selection": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.1.tgz",
-      "integrity": "sha512-bv8IfFYo/xG6dxri9OwDnK3yCagYPeRIjTlrcdYJSx+FDWlCeBDepIHUpqROmhPtZ53jyna0aUajZRk0I3rXNA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.1.tgz",
+      "integrity": "sha512-3mhtPnGE+c71rl/T5HMy+ykg7migAZ4T6gzU0HxpgBFKcasBrSnwRbYV1/UZR6o5fkpySxhWxAhd7yhjj8jL7g==",
       "dev": true
     },
     "node_modules/@types/d3-time": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
-      "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==",
       "dev": true
     },
     "node_modules/@types/dom4": {
@@ -8465,31 +8465,22 @@
       "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
     },
     "node_modules/d3-array": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
-      "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
       "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
+        "internmap": "^1.0.0"
       }
     },
     "node_modules/d3-axis": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
-      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
-      "engines": {
-        "node": ">=12"
-      }
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
+      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
     },
     "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "engines": {
-        "node": ">=12"
-      }
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
     },
     "node_modules/d3-format": {
       "version": "1.4.1",
@@ -8497,49 +8488,37 @@
       "integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g=="
     },
     "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
       "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
+        "d3-color": "1 - 2"
       }
     },
     "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
       "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
       }
     },
     "node_modules/d3-scale/node_modules/d3-time": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
-      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
       "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
+        "d3-array": "2"
       }
     },
     "node_modules/d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
-      "engines": {
-        "node": ">=12"
-      }
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
     },
     "node_modules/d3-time": {
       "version": "1.1.0",
@@ -12632,12 +12611,9 @@
       }
     },
     "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "engines": {
-        "node": ">=12"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
     },
     "node_modules/interpret": {
       "version": "2.2.0",
@@ -31132,39 +31108,39 @@
       "dev": true
     },
     "@types/d3-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.0.0.tgz",
-      "integrity": "sha512-rGqfPVowNDTszSFvwoZIXvrPG7s/qKzm9piCRIH6xwTTRu7pPZ3ootULFnPkTt74B6i5lN0FpLQL24qGOw1uZA==",
+      "version": "2.12.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.12.3.tgz",
+      "integrity": "sha512-hN879HLPTVqZV3FQEXy7ptt083UXwguNbnxdTGzVW4y4KjX5uyNKljrQixZcSJfLyFirbpUokxpXtvR+N5+KIg==",
       "dev": true
     },
     "@types/d3-axis": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.12.tgz",
-      "integrity": "sha512-BZISgSD5M8TgURyNtcPAmUB9sk490CO1Thb6/gIn0WZTt3Y50IssX+2Z0vTccoqZksUDTep0b+o4ofXslvNbqg==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-2.1.3.tgz",
+      "integrity": "sha512-QjXjwZ0xzyrW2ndkmkb09ErgWDEYtbLBKGui73QLMFm3woqWpxptfD5Y7vqQdybMcu7WEbjZ5q+w2w5+uh2IjA==",
       "dev": true,
       "requires": {
-        "@types/d3-selection": "*"
+        "@types/d3-selection": "^2"
       }
     },
     "@types/d3-scale": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.1.1.tgz",
-      "integrity": "sha512-kNTkbZQ+N/Ip8oX9PByXfDLoCSaZYm+VUOasbmsa6KD850/ziMdYepg/8kLg2plHzoLANdMqPoYQbvExevLUHg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz",
+      "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==",
       "dev": true,
       "requires": {
-        "@types/d3-time": "*"
+        "@types/d3-time": "^2"
       }
     },
     "@types/d3-selection": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.1.tgz",
-      "integrity": "sha512-bv8IfFYo/xG6dxri9OwDnK3yCagYPeRIjTlrcdYJSx+FDWlCeBDepIHUpqROmhPtZ53jyna0aUajZRk0I3rXNA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.1.tgz",
+      "integrity": "sha512-3mhtPnGE+c71rl/T5HMy+ykg7migAZ4T6gzU0HxpgBFKcasBrSnwRbYV1/UZR6o5fkpySxhWxAhd7yhjj8jL7g==",
       "dev": true
     },
     "@types/d3-time": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
-      "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==",
       "dev": true
     },
     "@types/dom4": {
@@ -34180,22 +34156,22 @@
       "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
     },
     "d3-array": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
-      "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
       "requires": {
-        "internmap": "1 - 2"
+        "internmap": "^1.0.0"
       }
     },
     "d3-axis": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
-      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
+      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
     },
     "d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
     },
     "d3-format": {
       "version": "1.4.1",
@@ -34203,39 +34179,39 @@
       "integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g=="
     },
     "d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
       "requires": {
-        "d3-color": "1 - 3"
+        "d3-color": "1 - 2"
       }
     },
     "d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
       "requires": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
       },
       "dependencies": {
         "d3-time": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
-          "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+          "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
           "requires": {
-            "d3-array": "2 - 3"
+            "d3-array": "2"
           }
         }
       }
     },
     "d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
     },
     "d3-time": {
       "version": "1.1.0",
@@ -37421,9 +37397,9 @@
       }
     },
     "internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
     },
     "interpret": {
       "version": "2.2.0",
diff --git a/web-console/package.json b/web-console/package.json
index aed99b79008f..6cde57630417 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -75,10 +75,10 @@
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.10.1",
-    "d3-array": "^3.2.0",
-    "d3-axis": "^3.0.0",
-    "d3-scale": "^4.0.2",
-    "d3-selection": "^3.0.0",
+    "d3-array": "^2.12.1",
+    "d3-axis": "^2.1.0",
+    "d3-scale": "^3.3.0",
+    "d3-selection": "^2.0.0",
     "druid-query-toolkit": "^0.15.3",
     "file-saver": "^2.0.2",
     "follow-redirects": "^1.14.7",
@@ -111,10 +111,10 @@
     "@babel/preset-env": "^7.14.4",
     "@testing-library/react": "^8.0.9",
     "@types/classnames": "^2.2.9",
-    "@types/d3-array": "^2.0.0",
-    "@types/d3-axis": "^1.0.12",
-    "@types/d3-scale": "^2.1.1",
-    "@types/d3-selection": "^1.4.1",
+    "@types/d3-array": "^2.12.3",
+    "@types/d3-axis": "^2.1.3",
+    "@types/d3-scale": "^3.3.2",
+    "@types/d3-selection": "^2.0.1",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/file-saver": "^2.0.1",

From 5673849a8626069967a73884ef22e24106074823 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Oct 2022 14:19:40 -0700
Subject: [PATCH 07/10] make config dialogs load

---
 .../coordinator-dynamic-config-dialog.scss    |  6 ++
 .../coordinator-dynamic-config-dialog.tsx     | 66 +++++++++++--------
 .../overlord-dynamic-config-dialog.scss       |  6 ++
 .../overlord-dynamic-config-dialog.tsx        | 46 +++++++------
 4 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.scss b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.scss
index 6ca750560088..2618b054b3df 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.scss
+++ b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.scss
@@ -24,6 +24,12 @@
     top: 5%;
   }
 
+  .loader {
+    position: relative;
+    height: 60vh;
+    width: 100%;
+  }
+
   .#{$bp-ns}-dialog-body {
     max-height: 70vh;
 
diff --git a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
index c0e02af84cfc..7fa8925220f2 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
+++ b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
@@ -26,6 +26,7 @@ import {
   FormJsonSelector,
   FormJsonTabs,
   JsonInput,
+  Loader,
 } from '../../components';
 import { COORDINATOR_DYNAMIC_CONFIG_FIELDS, CoordinatorDynamicConfig } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
@@ -37,7 +38,7 @@ import { SnitchDialog } from '..';
 import './coordinator-dynamic-config-dialog.scss';
 
 export interface CoordinatorDynamicConfigDialogProps {
-  onClose: () => void;
+  onClose(): void;
 }
 
 export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDynamicConfigDialog(
@@ -45,18 +46,19 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
 ) {
   const { onClose } = props;
   const [currentTab, setCurrentTab] = useState<FormJsonTabs>('form');
-  const [dynamicConfig, setDynamicConfig] = useState<CoordinatorDynamicConfig>({});
+  const [dynamicConfig, setDynamicConfig] = useState<CoordinatorDynamicConfig | undefined>();
   const [jsonError, setJsonError] = useState<Error | undefined>();
 
   const [historyRecordsState] = useQueryManager<null, any[]>({
+    initQuery: null,
     processQuery: async () => {
       const historyResp = await Api.instance.get(`/druid/coordinator/v1/config/history?count=100`);
       return historyResp.data;
     },
-    initQuery: null,
   });
 
   useQueryManager<null, Record<string, any>>({
+    initQuery: null,
     processQuery: async () => {
       try {
         const configResp = await Api.instance.get('/druid/coordinator/v1/config');
@@ -67,12 +69,10 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
           intent: Intent.DANGER,
           message: `Could not load coordinator dynamic config: ${getDruidErrorMessage(e)}`,
         });
-        setDynamicConfig({});
         onClose();
       }
       return {};
     },
-    initQuery: null,
   });
 
   async function saveConfig(comment: string) {
@@ -107,31 +107,39 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
       title="Coordinator dynamic config"
       historyRecords={historyRecordsState.data}
     >
-      <p>
-        Edit the coordinator dynamic configuration on the fly. For more information please refer to
-        the{' '}
-        <ExternalLink href={`${getLink('DOCS')}/configuration/index.html#dynamic-configuration`}>
-          documentation
-        </ExternalLink>
-        .
-      </p>
-      <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
-      {currentTab === 'form' ? (
-        <AutoForm
-          fields={COORDINATOR_DYNAMIC_CONFIG_FIELDS}
-          model={dynamicConfig}
-          onChange={setDynamicConfig}
-        />
+      {dynamicConfig ? (
+        <>
+          <p>
+            Edit the coordinator dynamic configuration on the fly. For more information please refer
+            to the{' '}
+            <ExternalLink
+              href={`${getLink('DOCS')}/configuration/index.html#dynamic-configuration`}
+            >
+              documentation
+            </ExternalLink>
+            .
+          </p>
+          <FormJsonSelector tab={currentTab} onChange={setCurrentTab} />
+          {currentTab === 'form' ? (
+            <AutoForm
+              fields={COORDINATOR_DYNAMIC_CONFIG_FIELDS}
+              model={dynamicConfig}
+              onChange={setDynamicConfig}
+            />
+          ) : (
+            <JsonInput
+              value={dynamicConfig}
+              height="50vh"
+              onChange={v => {
+                setDynamicConfig(v);
+                setJsonError(undefined);
+              }}
+              onError={setJsonError}
+            />
+          )}
+        </>
       ) : (
-        <JsonInput
-          value={dynamicConfig}
-          height="50vh"
-          onChange={v => {
-            setDynamicConfig(v);
-            setJsonError(undefined);
-          }}
-          onError={setJsonError}
-        />
+        <Loader />
       )}
     </SnitchDialog>
   );
diff --git a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.scss b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.scss
index 8829e93b501b..4f2f242c212c 100644
--- a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.scss
+++ b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.scss
@@ -25,6 +25,12 @@
     width: 600px;
   }
 
+  .loader {
+    position: relative;
+    height: 60vh;
+    width: 100%;
+  }
+
   .#{$bp-ns}-dialog-body {
     max-height: 70vh;
 
diff --git a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
index c726bdc278ae..76b280845022 100644
--- a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
+++ b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
@@ -20,7 +20,7 @@ import { Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
-import { AutoForm, ExternalLink } from '../../components';
+import { AutoForm, ExternalLink, Loader } from '../../components';
 import { OVERLORD_DYNAMIC_CONFIG_FIELDS, OverlordDynamicConfig } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
@@ -31,24 +31,25 @@ import { SnitchDialog } from '..';
 import './overlord-dynamic-config-dialog.scss';
 
 export interface OverlordDynamicConfigDialogProps {
-  onClose: () => void;
+  onClose(): void;
 }
 
 export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicConfigDialog(
   props: OverlordDynamicConfigDialogProps,
 ) {
   const { onClose } = props;
-  const [dynamicConfig, setDynamicConfig] = useState<OverlordDynamicConfig>({});
+  const [dynamicConfig, setDynamicConfig] = useState<OverlordDynamicConfig | undefined>();
 
   const [historyRecordsState] = useQueryManager<null, any[]>({
+    initQuery: null,
     processQuery: async () => {
       const historyResp = await Api.instance.get(`/druid/indexer/v1/worker/history?count=100`);
       return historyResp.data;
     },
-    initQuery: null,
   });
 
   useQueryManager<null, Record<string, any>>({
+    initQuery: null,
     processQuery: async () => {
       try {
         const configResp = await Api.instance.get(`/druid/indexer/v1/worker`);
@@ -59,12 +60,10 @@ export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicCo
           intent: Intent.DANGER,
           message: `Could not load overlord dynamic config: ${getDruidErrorMessage(e)}`,
         });
-        setDynamicConfig({});
         onClose();
       }
       return {};
     },
-    initQuery: null,
   });
 
   async function saveConfig(comment: string) {
@@ -98,20 +97,27 @@ export const OverlordDynamicConfigDialog = React.memo(function OverlordDynamicCo
       title="Overlord dynamic config"
       historyRecords={historyRecordsState.data}
     >
-      <p>
-        Edit the overlord dynamic configuration on the fly. For more information please refer to the{' '}
-        <ExternalLink
-          href={`${getLink('DOCS')}/configuration/index.html#overlord-dynamic-configuration`}
-        >
-          documentation
-        </ExternalLink>
-        .
-      </p>
-      <AutoForm
-        fields={OVERLORD_DYNAMIC_CONFIG_FIELDS}
-        model={dynamicConfig}
-        onChange={setDynamicConfig}
-      />
+      {dynamicConfig ? (
+        <>
+          <p>
+            Edit the overlord dynamic configuration on the fly. For more information please refer to
+            the{' '}
+            <ExternalLink
+              href={`${getLink('DOCS')}/configuration/index.html#overlord-dynamic-configuration`}
+            >
+              documentation
+            </ExternalLink>
+            .
+          </p>
+          <AutoForm
+            fields={OVERLORD_DYNAMIC_CONFIG_FIELDS}
+            model={dynamicConfig}
+            onChange={setDynamicConfig}
+          />
+        </>
+      ) : (
+        <Loader />
+      )}
     </SnitchDialog>
   );
 });

From 8123e1bde6e21c0c512b411c51f2ae3ad2cc70ba Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Oct 2022 14:28:35 -0700
Subject: [PATCH 08/10] goodies

---
 .../src/components/cell-filter-menu/cell-filter-menu.tsx       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web-console/src/components/cell-filter-menu/cell-filter-menu.tsx b/web-console/src/components/cell-filter-menu/cell-filter-menu.tsx
index ebf3b1003e3d..a5e9022537e0 100644
--- a/web-console/src/components/cell-filter-menu/cell-filter-menu.tsx
+++ b/web-console/src/components/cell-filter-menu/cell-filter-menu.tsx
@@ -54,14 +54,17 @@ function addToClause(clause: SqlExpression, newValue: SqlLiteral): SqlExpression
   switch (op) {
     case '=':
       if (!(rhs instanceof SqlLiteral)) return;
+      if (rhs.equals(newValue)) return;
       return lhs.in([rhs, newValue]);
 
     case '<>':
       if (!(rhs instanceof SqlLiteral)) return;
+      if (rhs.equals(newValue)) return;
       return lhs.notIn([rhs, newValue]);
 
     case 'IN':
       if (!(rhs instanceof SqlRecord)) return;
+      if (rhs.contains(newValue)) return;
       return clause.changeRhs(rhs.prepend(newValue));
 
     default:

From 4baa0b71ec69dbf179819f0f81242003d8c110d7 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Oct 2022 14:55:55 -0700
Subject: [PATCH 09/10] update snapshots

---
 ...inator-dynamic-config-dialog.spec.tsx.snap | 206 +-----------------
 ...erload-dynamic-config-dialog.spec.tsx.snap |  27 +--
 2 files changed, 2 insertions(+), 231 deletions(-)

diff --git a/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap b/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
index 3de1970e2ef9..077900092922 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
@@ -8,210 +8,6 @@ exports[`CoordinatorDynamicConfigDialog matches snapshot 1`] = `
   saveDisabled={false}
   title="Coordinator dynamic config"
 >
-  <p>
-    Edit the coordinator dynamic configuration on the fly. For more information please refer to the
-     
-    <Memo(ExternalLink)
-      href="https://druid.apache.org/docs/latest/configuration/index.html#dynamic-configuration"
-    >
-      documentation
-    </Memo(ExternalLink)>
-    .
-  </p>
-  <Memo(FormJsonSelector)
-    onChange={[Function]}
-    tab="form"
-  />
-  <AutoForm
-    fields={
-      Array [
-        Object {
-          "defaultValue": 5,
-          "info": <React.Fragment>
-            The maximum number of segments that can be moved at any given time.
-          </React.Fragment>,
-          "name": "maxSegmentsToMove",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": 1,
-          "info": <React.Fragment>
-            Thread pool size for computing moving cost of segments in segment balancing. Consider increasing this if you have a lot of segments and moving segments starts to get stuck.
-          </React.Fragment>,
-          "name": "balancerComputeThreads",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": false,
-          "info": <React.Fragment>
-            Boolean flag for whether or not we should emit balancing stats. This is an expensive operation.
-          </React.Fragment>,
-          "name": "emitBalancingStats",
-          "type": "boolean",
-        },
-        Object {
-          "defaultValue": false,
-          "info": <React.Fragment>
-            Send kill tasks for ALL dataSources if property 
-            <Unknown>
-              druid.coordinator.kill.on
-            </Unknown>
-             is true. If this is set to true then 
-            <Unknown>
-              killDataSourceWhitelist
-            </Unknown>
-             must not be specified or be empty list.
-          </React.Fragment>,
-          "name": "killAllDataSources",
-          "type": "boolean",
-        },
-        Object {
-          "emptyValue": Array [],
-          "info": <React.Fragment>
-            List of dataSources for which kill tasks are sent if property
-             
-            <Unknown>
-              druid.coordinator.kill.on
-            </Unknown>
-             is true. This can be a list of comma-separated dataSources or a JSON array.
-          </React.Fragment>,
-          "name": "killDataSourceWhitelist",
-          "type": "string-array",
-        },
-        Object {
-          "emptyValue": Array [],
-          "info": <React.Fragment>
-            List of dataSources for which pendingSegments are NOT cleaned up if property
-             
-            <Unknown>
-              druid.coordinator.kill.pendingSegments.on
-            </Unknown>
-             is true. This can be a list of comma-separated dataSources or a JSON array.
-          </React.Fragment>,
-          "name": "killPendingSegmentsSkipList",
-          "type": "string-array",
-        },
-        Object {
-          "defaultValue": 0,
-          "info": <React.Fragment>
-            The maximum number of segments that could be queued for loading to any given server. This parameter could be used to speed up segments loading process, especially if there are "slow" nodes in the cluster (with low loading speed) or if too much segments scheduled to be replicated to some particular node (faster loading could be preferred to better segments distribution). Desired value depends on segments loading speed, acceptable replication time and number of nodes. Value 1000 could be a start point for a rather big cluster. Default value is 0 (loading queue is unbounded)
-          </React.Fragment>,
-          "name": "maxSegmentsInNodeLoadingQueue",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": 524288000,
-          "info": <React.Fragment>
-            The maximum total uncompressed size in bytes of segments to merge.
-          </React.Fragment>,
-          "name": "mergeBytesLimit",
-          "type": "size-bytes",
-        },
-        Object {
-          "defaultValue": 100,
-          "info": <React.Fragment>
-            The maximum number of segments that can be in a single append task.
-          </React.Fragment>,
-          "name": "mergeSegmentsLimit",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": 900000,
-          "info": <React.Fragment>
-            How long does the Coordinator need to be active before it can start removing (marking unused) segments in metadata storage.
-          </React.Fragment>,
-          "name": "millisToWaitBeforeDeleting",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": 15,
-          "info": <React.Fragment>
-            The maximum number of Coordinator runs for a segment to be replicated before we start alerting.
-          </React.Fragment>,
-          "name": "replicantLifetime",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": 10,
-          "info": <React.Fragment>
-            The maximum number of segments that can be replicated at one time.
-          </React.Fragment>,
-          "name": "replicationThrottleLimit",
-          "type": "number",
-        },
-        Object {
-          "emptyValue": Array [],
-          "info": <React.Fragment>
-            List of historical services to 'decommission'. Coordinator will not assign new segments to 'decommissioning' services, and segments will be moved away from them to be placed on non-decommissioning services at the maximum rate specified by
-             
-            <Unknown>
-              decommissioningMaxPercentOfMaxSegmentsToMove
-            </Unknown>
-            .
-          </React.Fragment>,
-          "name": "decommissioningNodes",
-          "type": "string-array",
-        },
-        Object {
-          "defaultValue": 70,
-          "info": <React.Fragment>
-            The maximum number of segments that may be moved away from 'decommissioning' services to non-decommissioning (that is, active) services during one Coordinator run. This value is relative to the total maximum segment movements allowed during one run which is determined by 
-            <Unknown>
-              maxSegmentsToMove
-            </Unknown>
-            . If
-            <Unknown>
-              decommissioningMaxPercentOfMaxSegmentsToMove
-            </Unknown>
-             is 0, segments will neither be moved from or to 'decommissioning' services, effectively putting them in a sort of "maintenance" mode that will not participate in balancing or assignment by load rules. Decommissioning can also become stalled if there are no available active services to place the segments. By leveraging the maximum percent of decommissioning segment movements, an operator can prevent active services from overload by prioritizing balancing, or decrease decommissioning time instead. The value should be between 0 and 100.
-          </React.Fragment>,
-          "name": "decommissioningMaxPercentOfMaxSegmentsToMove",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": false,
-          "info": <React.Fragment>
-            Boolean flag for whether or not we should use the Reservoir Sampling with a reservoir of size k instead of fixed size 1 to pick segments to move. This option can be enabled to speed up segment balancing process, especially if there are huge number of segments in the cluster or if there are too many segments to move.
-          </React.Fragment>,
-          "name": "useBatchedSegmentSampler",
-          "type": "boolean",
-        },
-        Object {
-          "defaultValue": 100,
-          "info": <React.Fragment>
-            Deprecated. This will eventually be phased out by the batched segment sampler. You can enable the batched segment sampler now by setting the dynamic Coordinator config, useBatchedSegmentSampler, to true. Note that if you choose to enable the batched segment sampler, percentOfSegmentsToConsiderPerMove will no longer have any effect on balancing. If useBatchedSegmentSampler == false, this config defines the percentage of the total number of segments in the cluster that are considered every time a segment needs to be selected for a move. Druid orders servers by available capacity ascending (the least available capacity first) and then iterates over the servers. For each server, Druid iterates over the segments on the server, considering them for moving. The default config of 100% means that every segment on every server is a candidate to be moved. This should make sense for most small to medium-sized clusters. However, an admin may find it preferable to drop this value lower if they don't think that it is worthwhile to consider every single segment in the cluster each time it is looking for a segment to move.
-          </React.Fragment>,
-          "name": "percentOfSegmentsToConsiderPerMove",
-          "type": "number",
-        },
-        Object {
-          "defaultValue": false,
-          "info": <React.Fragment>
-            Boolean flag for whether or not the coordinator should execute its various duties of coordinating the cluster. Setting this to true essentially pauses all coordination work while allowing the API to remain up.
-          </React.Fragment>,
-          "name": "pauseCoordination",
-          "type": "boolean",
-        },
-        Object {
-          "defaultValue": false,
-          "info": <React.Fragment>
-            Boolean flag for whether or not additional replication is needed for segments that have failed to load due to the expiry of coordinator load timeout. If this is set to true, the coordinator will attempt to replicate the failed segment on a different historical server.
-          </React.Fragment>,
-          "name": "replicateAfterLoadTimeout",
-          "type": "boolean",
-        },
-        Object {
-          "defaultValue": 2147483647,
-          "info": <React.Fragment>
-            The maximum number of non-primary replicants to load in a single Coordinator cycle. Once this limit is hit, only primary replicants will be loaded for the remainder of the cycle. Tuning this value lower can help reduce the delay in loading primary segments when the cluster has a very large number of non-primary replicants to load (such as when a single historical drops out of the cluster leaving many under-replicated segments).
-          </React.Fragment>,
-          "name": "maxNonPrimaryReplicantsToLoad",
-          "type": "number",
-        },
-      ]
-    }
-    model={Object {}}
-    onChange={[Function]}
-  />
+  <Memo(Loader) />
 </SnitchDialog>
 `;
diff --git a/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap b/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap
index 008ba4d10ebf..a7ac71240a2e 100644
--- a/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap
@@ -7,31 +7,6 @@ exports[`OverlordDynamicConfigDialog matches snapshot 1`] = `
   onSave={[Function]}
   title="Overlord dynamic config"
 >
-  <p>
-    Edit the overlord dynamic configuration on the fly. For more information please refer to the
-     
-    <Memo(ExternalLink)
-      href="https://druid.apache.org/docs/latest/configuration/index.html#overlord-dynamic-configuration"
-    >
-      documentation
-    </Memo(ExternalLink)>
-    .
-  </p>
-  <AutoForm
-    fields={
-      Array [
-        Object {
-          "name": "selectStrategy",
-          "type": "json",
-        },
-        Object {
-          "name": "autoScaler",
-          "type": "json",
-        },
-      ]
-    }
-    model={Object {}}
-    onChange={[Function]}
-  />
+  <Memo(Loader) />
 </SnitchDialog>
 `;

From 6bd6996b679130be38a2552ef986e6fe55c8209e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 7 Oct 2022 11:16:07 -0700
Subject: [PATCH 10/10] only compute duration when running or pending

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

diff --git a/web-console/src/views/ingestion-view/ingestion-view.tsx b/web-console/src/views/ingestion-view/ingestion-view.tsx
index 06064a8ec490..e25d9be28def 100644
--- a/web-console/src/views/ingestion-view/ingestion-view.tsx
+++ b/web-console/src/views/ingestion-view/ingestion-view.tsx
@@ -921,7 +921,7 @@ ORDER BY
               if (value > 0) {
                 return formatDuration(value);
               }
-              if (original.created_time) {
+              if (oneOf(original.status, 'RUNNING', 'PENDING') && original.created_time) {
                 // Compute running duration from the created time if it exists
                 return formatDuration(Date.now() - Date.parse(original.created_time));
               }