From 1db4557da158050f487de8ee8cb43af7f8b99903 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 15 Jan 2025 00:09:10 -0800
Subject: [PATCH] Web console: Explore view improvements (#17627)

* new Explore layout

* fix feedback comments
---
 licenses.yaml                                 |  37 +-
 web-console/package-lock.json                 | 319 +++++---
 web-console/package.json                      |  17 +-
 .../clearable-input/clearable-input.spec.tsx  |   2 +-
 .../clearable-input/clearable-input.tsx       |  16 +-
 .../fancy-numeric-input.tsx                   |   4 +-
 .../form-group-with-info.tsx                  |   4 +-
 .../formatted-input/formatted-input.tsx       |   4 +-
 .../__snapshots__/header-bar.spec.tsx.snap    |   3 +-
 .../src/components/header-bar/header-bar.tsx  |   2 +-
 .../portal-bubble/portal-bubble.scss          |   1 +
 .../portal-bubble/portal-bubble.tsx           |  17 +-
 .../segment-timeline/chart-axis.tsx           |  37 -
 .../{common.ts => interval.ts}                |   2 +-
 .../segment-bar-chart-render.scss             |   7 +-
 .../segment-bar-chart-render.tsx              | 421 +++++-----
 .../segment-timeline/segment-bar-chart.tsx    |   9 +-
 .../segment-timeline/segment-timeline.tsx     |  42 +-
 .../__snapshots__/show-log.spec.tsx.snap      |   1 -
 .../__snapshots__/about-dialog.spec.tsx.snap  |   1 -
 .../src/druid-models/segment/segment.ts       |   4 +-
 web-console/src/hooks/index.ts                |   2 +-
 ...use-hash-and-local-storage-hybrid-state.ts |  27 +-
 .../use-memo-with-previous.ts}                |  40 +-
 web-console/src/hooks/use-resize-observer.ts  |  80 --
 .../auto-granularity.ts}                      |  72 +-
 web-console/src/utils/base64-url.spec.ts      |  15 +-
 web-console/src/utils/base64-url.ts           |  30 +-
 .../date-floor-shift-ceil-utc.spec.ts         | 169 ----
 .../date-floor-shift-ceil.spec.ts             | 181 -----
 .../date-floor-shift-ceil.ts                  | 296 -------
 web-console/src/utils/date-format.ts          |  72 ++
 .../src/utils/duration/duration.spec.ts       | 505 ------------
 web-console/src/utils/duration/duration.ts    | 388 ---------
 web-console/src/utils/general.tsx             |  22 +-
 web-console/src/utils/index.tsx               |   5 +-
 .../src/utils/mouse-tooltip/mouse-tooltip.ts  |  33 +-
 web-console/src/utils/stage.ts                |  15 +
 .../column-value/column-value.scss            |   0
 .../column-value/column-value.tsx             |   6 +
 .../components/control-pane/control-pane.scss |   5 +
 .../components/control-pane/control-pane.tsx  |  87 +-
 .../control-pane/named-expressions-input.tsx  |   2 +-
 .../contains-filter-control.tsx               |   9 +-
 .../filter-pane/filter-menu/filter-menu.tsx   |  27 +-
 .../regexp-filter-control.tsx                 |   9 +-
 .../time-relative-filter-control.tsx          |  13 +-
 .../values-filter-control.tsx                 |  13 +-
 .../components/filter-pane/filter-pane.tsx    |  53 +-
 .../generic-output-table.tsx                  |  28 +-
 .../components/helper-table/helper-table.scss |  85 ++
 .../components/helper-table/helper-table.tsx  | 191 +++++
 .../highlight-bubble/highlight-bubble.tsx     |  80 --
 .../views/explore-view/components/index.ts    |   2 +-
 .../components/module-pane/module-pane.scss   |  74 +-
 .../components/module-pane/module-pane.tsx    | 266 +++++-
 .../module-picker/module-picker.tsx           |  19 +-
 .../nested-column-dialog.scss                 |   1 +
 .../nested-column-dialog.tsx                  |  46 +-
 .../resource-pane/resource-pane.scss          |  71 +-
 .../resource-pane/resource-pane.tsx           | 389 ++++-----
 .../source-query-pane/source-query-pane.tsx   |   2 +-
 .../src/views/explore-view/explore-state.ts   | 237 ------
 .../src/views/explore-view/explore-view.scss  | 247 ++++--
 .../src/views/explore-view/explore-view.tsx   | 627 ++++++++-------
 .../highlight-store/highlight-store.ts        |  64 --
 .../explore-view/models/explore-state.ts      | 316 ++++++++
 .../explore-view/models/expression-meta.ts    |  18 +-
 .../src/views/explore-view/models/index.ts    |   2 +
 .../src/views/explore-view/models/measure.ts  |  10 +-
 .../views/explore-view/models/module-state.ts | 173 ++++
 .../views/explore-view/models/parameter.ts    | 170 ++--
 .../views/explore-view/models/query-source.ts |  56 +-
 .../module-repository/module-repository.ts    |   4 +-
 .../bar-chart-module.tsx                      | 127 ++-
 .../grouping-table-module.scss                |   0
 .../grouping-table-module.tsx                 |  27 +-
 .../src/views/explore-view/modules/index.ts   |  12 +-
 .../multi-axis-chart-module.tsx               | 187 +++--
 .../pie-chart-module.tsx                      |  92 ++-
 .../record-table-module.scss                  |   0
 .../record-table-module.tsx                   |  12 +-
 .../modules/time-chart-module.tsx             | 451 -----------
 .../continuous-chart-render.scss              | 131 +++
 .../continuous-chart-render.tsx               | 754 ++++++++++++++++++
 .../time-chart-module/time-chart-module.tsx   | 348 ++++++++
 .../query-macros/max-data-time.ts             |  25 +-
 .../views/explore-view/utils/date-format.ts   |  28 -
 .../utils/filter-pattern-helpers.ts           |  89 ++-
 .../src/views/explore-view/utils/index.ts     |   2 -
 .../views/explore-view/utils/table-query.ts   |   5 +-
 .../utils/time-manipulation.spec.ts           |  51 +-
 .../explore-view/utils/time-manipulation.ts   |  58 ++
 .../views/load-data-view/load-data-view.tsx   |  10 +-
 .../schema-step/schema-step.tsx               |   2 +-
 .../time-menu-items/time-menu-items.tsx       |  19 +-
 .../execution-details-pane.spec.tsx.snap      |   4 -
 .../execution-summary-panel.tsx               |   9 +
 .../timezone-menu-items.tsx                   |   3 +-
 web-console/tsconfig.json                     |   2 +-
 100 files changed, 4680 insertions(+), 4072 deletions(-)
 delete mode 100644 web-console/src/components/segment-timeline/chart-axis.tsx
 rename web-console/src/components/segment-timeline/{common.ts => interval.ts} (98%)
 rename web-console/src/{views/explore-view/components/highlight-bubble/highlight-bubble.scss => hooks/use-memo-with-previous.ts} (52%)
 delete mode 100644 web-console/src/hooks/use-resize-observer.ts
 rename web-console/src/{views/explore-view/utils/get-auto-granularity.ts => utils/auto-granularity.ts} (55%)
 delete mode 100755 web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil-utc.spec.ts
 delete mode 100755 web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.spec.ts
 delete mode 100755 web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.ts
 create mode 100644 web-console/src/utils/date-format.ts
 delete mode 100755 web-console/src/utils/duration/duration.spec.ts
 delete mode 100755 web-console/src/utils/duration/duration.ts
 rename web-console/src/views/explore-view/components/{filter-pane => }/column-value/column-value.scss (100%)
 rename web-console/src/views/explore-view/components/{filter-pane => }/column-value/column-value.tsx (84%)
 create mode 100644 web-console/src/views/explore-view/components/helper-table/helper-table.scss
 create mode 100644 web-console/src/views/explore-view/components/helper-table/helper-table.tsx
 delete mode 100644 web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.tsx
 delete mode 100644 web-console/src/views/explore-view/explore-state.ts
 delete mode 100644 web-console/src/views/explore-view/highlight-store/highlight-store.ts
 create mode 100644 web-console/src/views/explore-view/models/explore-state.ts
 create mode 100644 web-console/src/views/explore-view/models/module-state.ts
 rename web-console/src/views/explore-view/modules/{ => bar-chart-module}/bar-chart-module.tsx (60%)
 rename web-console/src/views/explore-view/modules/{ => grouping-table-module}/grouping-table-module.scss (100%)
 rename web-console/src/views/explore-view/modules/{ => grouping-table-module}/grouping-table-module.tsx (92%)
 rename web-console/src/views/explore-view/modules/{ => multi-axis-chart-module}/multi-axis-chart-module.tsx (70%)
 rename web-console/src/views/explore-view/modules/{ => pie-chart-module}/pie-chart-module.tsx (74%)
 rename web-console/src/views/explore-view/modules/{ => record-table-module}/record-table-module.scss (100%)
 rename web-console/src/views/explore-view/modules/{ => record-table-module}/record-table-module.tsx (91%)
 delete mode 100644 web-console/src/views/explore-view/modules/time-chart-module.tsx
 create mode 100644 web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.scss
 create mode 100644 web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx
 create mode 100644 web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
 delete mode 100644 web-console/src/views/explore-view/utils/date-format.ts

diff --git a/licenses.yaml b/licenses.yaml
index e3f822300cfb..8d7457ec1dc3 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5072,7 +5072,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 5.1.2
+version: 5.1.4
 
 ---
 
@@ -5081,7 +5081,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 5.13.1
+version: 5.16.0
 
 ---
 
@@ -5090,7 +5090,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 2.3.11
+version: 2.3.17
 
 ---
 
@@ -5099,7 +5099,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 5.3.11
+version: 5.3.17
 
 ---
 
@@ -5108,7 +5108,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 5.13.0
+version: 5.15.0
 
 ---
 
@@ -5117,7 +5117,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 5.2.5
+version: 5.3.5
 
 ---
 
@@ -5419,6 +5419,15 @@ license_file_path: licenses/bin/change-case.MIT
 
 ---
 
+name: "chronoshift"
+license_category: binary
+module: web-console
+license_name: Apache License version 2.0
+copyright: Vadim Ogievetsky
+version: 1.1.0
+
+---
+
 name: "classnames"
 license_category: binary
 module: web-console
@@ -5589,13 +5598,13 @@ license_file_path: licenses/bin/d3-interpolate.ISC
 
 ---
 
-name: "d3-scale-chromatic"
+name: "d3-path"
 license_category: binary
 module: web-console
 license_name: ISC License
 copyright: Mike Bostock
 version: 3.1.0
-license_file_path: licenses/bin/d3-scale-chromatic.ISC
+license_file_path: licenses/bin/d3-path.ISC
 
 ---
 
@@ -5619,6 +5628,16 @@ license_file_path: licenses/bin/d3-selection.ISC
 
 ---
 
+name: "d3-shape"
+license_category: binary
+module: web-console
+license_name: ISC License
+copyright: Mike Bostock
+version: 3.2.0
+license_file_path: licenses/bin/d3-shape.ISC
+
+---
+
 name: "d3-time-format"
 license_category: binary
 module: web-console
@@ -5713,7 +5732,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 1.0.0
+version: 1.0.2
 
 ---
 
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index 27a3d463aad2..d07f6e31dbf1 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -9,26 +9,27 @@
       "version": "32.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/datetime": "^5.3.11",
-        "@blueprintjs/datetime2": "^2.3.11",
-        "@blueprintjs/icons": "^5.13.0",
-        "@blueprintjs/select": "^5.2.5",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/datetime": "^5.3.17",
+        "@blueprintjs/datetime2": "^2.3.17",
+        "@blueprintjs/icons": "^5.15.0",
+        "@blueprintjs/select": "^5.3.5",
         "@flatten-js/interval-tree": "^1.1.3",
         "@fontsource/open-sans": "^5.0.30",
         "@internationalized/date": "^3.5.6",
         "ace-builds": "~1.5.3",
         "axios": "^1.7.7",
+        "chronoshift": "^1.1.0",
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.3.3",
         "d3-array": "^3.2.4",
         "d3-axis": "^3.0.0",
         "d3-dsv": "^3.0.1",
         "d3-scale": "^4.0.2",
-        "d3-scale-chromatic": "^3.1.0",
         "d3-selection": "^3.0.0",
+        "d3-shape": "^3.2.0",
         "date-fns": "^2.28.0",
-        "druid-query-toolkit": "^1.0.0",
+        "druid-query-toolkit": "^1.0.2",
         "echarts": "^5.5.1",
         "file-saver": "^2.0.5",
         "hjson": "^3.2.2",
@@ -60,8 +61,8 @@
         "@types/d3-axis": "^3.0.6",
         "@types/d3-dsv": "^3.0.7",
         "@types/d3-scale": "^4.0.8",
-        "@types/d3-scale-chromatic": "^3.0.3",
         "@types/d3-selection": "^3.0.11",
+        "@types/d3-shape": "^3.1.6",
         "@types/enzyme": "^3.10.18",
         "@types/enzyme-adapter-react-16": "^1.0.9",
         "@types/file-saver": "^2.0.7",
@@ -785,9 +786,9 @@
       "dev": true
     },
     "node_modules/@blueprintjs/colors": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.2.tgz",
-      "integrity": "sha512-7CWwVsXK4YTN9Z/wkjnS3p7VE8YfIXXv2UaySAbtcw6rBkmoSHjLRtfohSA5yNy8xYTQ4KY2odKZSUW0W/Nltw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.4.tgz",
+      "integrity": "sha512-OBRswl1v/AQXtx8PLP6PhZX+xY+Q/LP/eQATQi/ZUCrNbE0ZkMXQRS9PK/7ZVllnQqcACkC4x/JVthkzkLoG2g==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "~2.6.2"
@@ -800,13 +801,13 @@
       "license": "0BSD"
     },
     "node_modules/@blueprintjs/core": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.13.1.tgz",
-      "integrity": "sha512-PDZ9X/xGBetwU2AqQuCDGVWZZMmt6+/BCnmoKXxsBBZIuWQuHDiKcwvb9rzup0htsA6P7KGl5aw7ocmDvZPpBw==",
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.16.0.tgz",
+      "integrity": "sha512-umWvCL9iHP01AO11fILCLK8ZT8mkOouSC+MFwk4cVx8HElxLoUFCf64lUFSQpQMPyNKICYJ4qBrN/hKsez11lQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@blueprintjs/colors": "^5.1.2",
-        "@blueprintjs/icons": "^5.13.0",
+        "@blueprintjs/colors": "^5.1.4",
+        "@blueprintjs/icons": "^5.15.0",
         "@popperjs/core": "^2.11.8",
         "classnames": "^2.3.1",
         "normalize.css": "^8.0.1",
@@ -838,14 +839,14 @@
       "license": "0BSD"
     },
     "node_modules/@blueprintjs/datetime": {
-      "version": "5.3.11",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-5.3.11.tgz",
-      "integrity": "sha512-6MMictO0OPc6gRoPt/gZ6V5tFTKj9d2M3Mpn4alNa74uZF/Y1FjBfOvSPOsV7JajBOVjqiaSEBRZIFHrhRr91Q==",
+      "version": "5.3.17",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-5.3.17.tgz",
+      "integrity": "sha512-Y6F3Md3OrEIqv3iF10WXpYwSc6Nhuk4i4g7GWIny/kZajLmLysPHFuzmidZ9IKrBYYwPBObAyWQmy9n3qR6mFw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/icons": "^5.13.0",
-        "@blueprintjs/select": "^5.2.5",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/icons": "^5.15.0",
+        "@blueprintjs/select": "^5.3.5",
         "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
         "date-fns-tz": "^2.0.0",
@@ -870,14 +871,14 @@
       "license": "0BSD"
     },
     "node_modules/@blueprintjs/datetime2": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-2.3.11.tgz",
-      "integrity": "sha512-o9NYfUAb8xYiGZQ56tn6CXm8jDNxwSxJvZgrzs6EVYCuCFrsBr9WAjy0p768ZbZlzuWwClbEjslr8s+E6etU/w==",
+      "version": "2.3.17",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-2.3.17.tgz",
+      "integrity": "sha512-HZNpQWCPTfTJfx8eZwZDnb/HoixyBqHPypWYs8DxWgfWIOVxpV0aaQUJl+Gni/wIgpf9g6qDs7x8WFdMt/G8Mg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/datetime": "^5.3.11",
-        "@blueprintjs/icons": "^5.13.0",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/datetime": "^5.3.17",
+        "@blueprintjs/icons": "^5.15.0",
         "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
         "react-day-picker": "^8.10.0",
@@ -915,9 +916,9 @@
       "license": "0BSD"
     },
     "node_modules/@blueprintjs/icons": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.13.0.tgz",
-      "integrity": "sha512-L096dBjzfnWW7fWXM311S2C/5Zn0EuEK9q6G84QvWP0BZJOTowU1EIWLj90IgGtNajld/3ZUAj6eJf+ryt/kjQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.15.0.tgz",
+      "integrity": "sha512-5OiDY0hdQwfljfo9ynmmUBh3ibXTDuJ74WpwCakTr4hD9zGMhpzjnpEoZMfrMCsKZubGBiOFcT5riPljrDpdLw==",
       "license": "Apache-2.0",
       "dependencies": {
         "change-case": "^4.1.2",
@@ -942,13 +943,13 @@
       "license": "0BSD"
     },
     "node_modules/@blueprintjs/select": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.2.5.tgz",
-      "integrity": "sha512-mO9r5iQ4uxdgScTyNSNSLq3DUZgFtI3dAO1VRUNONBGPcSROVi+3ixYYynwcad18ftAZz/WuUD9ZHqVyDwXmbQ==",
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.3.5.tgz",
+      "integrity": "sha512-oULOvtnFHiaXPWahyQg0XFc2YhZrY1FPOuHq3fDKyb1MukYEYshy+L4gHUA5gnVBxv6543Oi7m7ErxGE3bcJmQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/icons": "^5.13.0",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/icons": "^5.15.0",
         "classnames": "^2.3.1",
         "tslib": "~2.6.2"
       },
@@ -3771,6 +3772,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/d3-scale": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
@@ -3781,12 +3789,6 @@
         "@types/d3-time": "*"
       }
     },
-    "node_modules/@types/d3-scale-chromatic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
-      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==",
-      "dev": true
-    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
@@ -3794,6 +3796,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
     "node_modules/@types/d3-time": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
@@ -5818,6 +5830,16 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/chronoshift": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/chronoshift/-/chronoshift-1.1.0.tgz",
+      "integrity": "sha512-Mq72wZIn3lF8yyHo2LjOnWir8CXVafHalOXvYN1qvpYAYX9yOyUnlxLtd6W6g74xYDv9lfc/3sNZfY3EmkUwUw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.5.6",
+        "tslib": "^2.8.1"
+      }
+    },
     "node_modules/ci-info": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@@ -6575,6 +6597,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -6591,18 +6622,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-scale/node_modules/d3-array": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
@@ -6629,6 +6648,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
@@ -7021,9 +7052,9 @@
       }
     },
     "node_modules/druid-query-toolkit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.0.0.tgz",
-      "integrity": "sha512-yBQR4uDcks0lcsRSWoLQy16YQ4dx264m6i7TNQDFrACUKHlMtnw5l+4+UDZKbXbpUFLMLWCr/kLhmXzLJk50+Q==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.0.2.tgz",
+      "integrity": "sha512-TXu8io3oF04g0xhiGeXBB3xsGt2kJtp+95jrSja1a5Db8NFpkso6UPbfc6vlok24bky1aUKObTPJVVKOwSaBIw==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.5.2"
@@ -8193,9 +8224,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8218,7 +8249,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -8233,6 +8264,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/array-flatten": {
@@ -8260,10 +8295,11 @@
       }
     },
     "node_modules/express/node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
-      "dev": true
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/express/node_modules/safe-buffer": {
       "version": "5.2.1",
@@ -12918,9 +12954,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -12928,6 +12964,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -17257,9 +17294,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
     "node_modules/type-check": {
@@ -19018,9 +19055,9 @@
       "dev": true
     },
     "@blueprintjs/colors": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.2.tgz",
-      "integrity": "sha512-7CWwVsXK4YTN9Z/wkjnS3p7VE8YfIXXv2UaySAbtcw6rBkmoSHjLRtfohSA5yNy8xYTQ4KY2odKZSUW0W/Nltw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.4.tgz",
+      "integrity": "sha512-OBRswl1v/AQXtx8PLP6PhZX+xY+Q/LP/eQATQi/ZUCrNbE0ZkMXQRS9PK/7ZVllnQqcACkC4x/JVthkzkLoG2g==",
       "requires": {
         "tslib": "~2.6.2"
       },
@@ -19033,12 +19070,12 @@
       }
     },
     "@blueprintjs/core": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.13.1.tgz",
-      "integrity": "sha512-PDZ9X/xGBetwU2AqQuCDGVWZZMmt6+/BCnmoKXxsBBZIuWQuHDiKcwvb9rzup0htsA6P7KGl5aw7ocmDvZPpBw==",
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.16.0.tgz",
+      "integrity": "sha512-umWvCL9iHP01AO11fILCLK8ZT8mkOouSC+MFwk4cVx8HElxLoUFCf64lUFSQpQMPyNKICYJ4qBrN/hKsez11lQ==",
       "requires": {
-        "@blueprintjs/colors": "^5.1.2",
-        "@blueprintjs/icons": "^5.13.0",
+        "@blueprintjs/colors": "^5.1.4",
+        "@blueprintjs/icons": "^5.15.0",
         "@popperjs/core": "^2.11.8",
         "classnames": "^2.3.1",
         "normalize.css": "^8.0.1",
@@ -19057,13 +19094,13 @@
       }
     },
     "@blueprintjs/datetime": {
-      "version": "5.3.11",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-5.3.11.tgz",
-      "integrity": "sha512-6MMictO0OPc6gRoPt/gZ6V5tFTKj9d2M3Mpn4alNa74uZF/Y1FjBfOvSPOsV7JajBOVjqiaSEBRZIFHrhRr91Q==",
+      "version": "5.3.17",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-5.3.17.tgz",
+      "integrity": "sha512-Y6F3Md3OrEIqv3iF10WXpYwSc6Nhuk4i4g7GWIny/kZajLmLysPHFuzmidZ9IKrBYYwPBObAyWQmy9n3qR6mFw==",
       "requires": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/icons": "^5.13.0",
-        "@blueprintjs/select": "^5.2.5",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/icons": "^5.15.0",
+        "@blueprintjs/select": "^5.3.5",
         "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
         "date-fns-tz": "^2.0.0",
@@ -19079,13 +19116,13 @@
       }
     },
     "@blueprintjs/datetime2": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-2.3.11.tgz",
-      "integrity": "sha512-o9NYfUAb8xYiGZQ56tn6CXm8jDNxwSxJvZgrzs6EVYCuCFrsBr9WAjy0p768ZbZlzuWwClbEjslr8s+E6etU/w==",
+      "version": "2.3.17",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime2/-/datetime2-2.3.17.tgz",
+      "integrity": "sha512-HZNpQWCPTfTJfx8eZwZDnb/HoixyBqHPypWYs8DxWgfWIOVxpV0aaQUJl+Gni/wIgpf9g6qDs7x8WFdMt/G8Mg==",
       "requires": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/datetime": "^5.3.11",
-        "@blueprintjs/icons": "^5.13.0",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/datetime": "^5.3.17",
+        "@blueprintjs/icons": "^5.15.0",
         "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
         "react-day-picker": "^8.10.0",
@@ -19106,9 +19143,9 @@
       }
     },
     "@blueprintjs/icons": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.13.0.tgz",
-      "integrity": "sha512-L096dBjzfnWW7fWXM311S2C/5Zn0EuEK9q6G84QvWP0BZJOTowU1EIWLj90IgGtNajld/3ZUAj6eJf+ryt/kjQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.15.0.tgz",
+      "integrity": "sha512-5OiDY0hdQwfljfo9ynmmUBh3ibXTDuJ74WpwCakTr4hD9zGMhpzjnpEoZMfrMCsKZubGBiOFcT5riPljrDpdLw==",
       "requires": {
         "change-case": "^4.1.2",
         "classnames": "^2.3.1",
@@ -19123,12 +19160,12 @@
       }
     },
     "@blueprintjs/select": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.2.5.tgz",
-      "integrity": "sha512-mO9r5iQ4uxdgScTyNSNSLq3DUZgFtI3dAO1VRUNONBGPcSROVi+3ixYYynwcad18ftAZz/WuUD9ZHqVyDwXmbQ==",
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.3.5.tgz",
+      "integrity": "sha512-oULOvtnFHiaXPWahyQg0XFc2YhZrY1FPOuHq3fDKyb1MukYEYshy+L4gHUA5gnVBxv6543Oi7m7ErxGE3bcJmQ==",
       "requires": {
-        "@blueprintjs/core": "^5.13.1",
-        "@blueprintjs/icons": "^5.13.0",
+        "@blueprintjs/core": "^5.16.0",
+        "@blueprintjs/icons": "^5.15.0",
         "classnames": "^2.3.1",
         "tslib": "~2.6.2"
       },
@@ -20835,6 +20872,12 @@
       "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
       "dev": true
     },
+    "@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
+      "dev": true
+    },
     "@types/d3-scale": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
@@ -20844,18 +20887,21 @@
         "@types/d3-time": "*"
       }
     },
-    "@types/d3-scale-chromatic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
-      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==",
-      "dev": true
-    },
     "@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
       "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
       "dev": true
     },
+    "@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
     "@types/d3-time": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
@@ -22405,6 +22451,15 @@
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
       "dev": true
     },
+    "chronoshift": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/chronoshift/-/chronoshift-1.1.0.tgz",
+      "integrity": "sha512-Mq72wZIn3lF8yyHo2LjOnWir8CXVafHalOXvYN1qvpYAYX9yOyUnlxLtd6W6g74xYDv9lfc/3sNZfY3EmkUwUw==",
+      "requires": {
+        "@internationalized/date": "^3.5.6",
+        "tslib": "^2.8.1"
+      }
+    },
     "ci-info": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@@ -22932,6 +22987,11 @@
         "d3-color": "1 - 3"
       }
     },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
     "d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -22962,20 +23022,19 @@
         }
       }
     },
-    "d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "requires": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      }
-    },
     "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=="
     },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
     "d3-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
@@ -23261,9 +23320,9 @@
       }
     },
     "druid-query-toolkit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.0.0.tgz",
-      "integrity": "sha512-yBQR4uDcks0lcsRSWoLQy16YQ4dx264m6i7TNQDFrACUKHlMtnw5l+4+UDZKbXbpUFLMLWCr/kLhmXzLJk50+Q==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.0.2.tgz",
+      "integrity": "sha512-TXu8io3oF04g0xhiGeXBB3xsGt2kJtp+95jrSja1a5Db8NFpkso6UPbfc6vlok24bky1aUKObTPJVVKOwSaBIw==",
       "requires": {
         "tslib": "^2.5.2"
       }
@@ -24097,9 +24156,9 @@
       }
     },
     "express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
@@ -24121,7 +24180,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -24157,9 +24216,9 @@
           "dev": true
         },
         "path-to-regexp": {
-          "version": "0.1.10",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-          "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+          "version": "0.1.12",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+          "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
           "dev": true
         },
         "safe-buffer": {
@@ -27558,9 +27617,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true
     },
     "natural-compare": {
@@ -30442,9 +30501,9 @@
       }
     },
     "tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "type-check": {
       "version": "0.4.0",
diff --git a/web-console/package.json b/web-console/package.json
index 39eae99e101b..1cb23e1b86ef 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -50,26 +50,27 @@
     "not ie 11"
   ],
   "dependencies": {
-    "@blueprintjs/core": "^5.13.1",
-    "@blueprintjs/datetime": "^5.3.11",
-    "@blueprintjs/datetime2": "^2.3.11",
-    "@blueprintjs/icons": "^5.13.0",
-    "@blueprintjs/select": "^5.2.5",
+    "@blueprintjs/core": "^5.16.0",
+    "@blueprintjs/datetime": "^5.3.17",
+    "@blueprintjs/datetime2": "^2.3.17",
+    "@blueprintjs/icons": "^5.15.0",
+    "@blueprintjs/select": "^5.3.5",
     "@flatten-js/interval-tree": "^1.1.3",
     "@fontsource/open-sans": "^5.0.30",
     "@internationalized/date": "^3.5.6",
     "ace-builds": "~1.5.3",
     "axios": "^1.7.7",
+    "chronoshift": "^1.1.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.3",
     "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-dsv": "^3.0.1",
     "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
     "date-fns": "^2.28.0",
-    "druid-query-toolkit": "^1.0.0",
+    "druid-query-toolkit": "^1.0.2",
     "echarts": "^5.5.1",
     "file-saver": "^2.0.5",
     "hjson": "^3.2.2",
@@ -101,8 +102,8 @@
     "@types/d3-axis": "^3.0.6",
     "@types/d3-dsv": "^3.0.7",
     "@types/d3-scale": "^4.0.8",
-    "@types/d3-scale-chromatic": "^3.0.3",
     "@types/d3-selection": "^3.0.11",
+    "@types/d3-shape": "^3.1.6",
     "@types/enzyme": "^3.10.18",
     "@types/enzyme-adapter-react-16": "^1.0.9",
     "@types/file-saver": "^2.0.7",
diff --git a/web-console/src/components/clearable-input/clearable-input.spec.tsx b/web-console/src/components/clearable-input/clearable-input.spec.tsx
index 3fcd0e0098f7..e209474d5213 100644
--- a/web-console/src/components/clearable-input/clearable-input.spec.tsx
+++ b/web-console/src/components/clearable-input/clearable-input.spec.tsx
@@ -27,7 +27,7 @@ describe('ClearableInput', () => {
         className="testClassName"
         value="testValue"
         placeholder="testPlaceholder"
-        onChange={() => {}}
+        onValueChange={() => {}}
       />
     );
 
diff --git a/web-console/src/components/clearable-input/clearable-input.tsx b/web-console/src/components/clearable-input/clearable-input.tsx
index 9ea33a1bef61..de75d7dbdca7 100644
--- a/web-console/src/components/clearable-input/clearable-input.tsx
+++ b/web-console/src/components/clearable-input/clearable-input.tsx
@@ -16,30 +16,32 @@
  * limitations under the License.
  */
 
+import type { InputGroupProps } from '@blueprintjs/core';
 import { Button, InputGroup } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface ClearableInputProps {
+export interface ClearableInputProps extends InputGroupProps {
   className?: string;
   value: string;
-  onChange: (value: string) => void;
-  placeholder: string;
+  onValueChange: (value: string) => void;
 }
 
 export const ClearableInput = React.memo(function ClearableInput(props: ClearableInputProps) {
-  const { className, value, onChange, placeholder } = props;
+  const { className, value, onValueChange, ...otherProps } = props;
 
   return (
     <InputGroup
       className={classNames('clearable-input', className)}
       value={value}
-      onChange={(e: any) => onChange(e.target.value)}
+      onChange={(e: any) => onValueChange(e.target.value)}
       rightElement={
-        value ? <Button icon={IconNames.CROSS} minimal onClick={() => onChange('')} /> : undefined
+        value ? (
+          <Button icon={IconNames.CROSS} minimal onClick={() => onValueChange('')} />
+        ) : undefined
       }
-      placeholder={placeholder}
+      {...otherProps}
     />
   );
 });
diff --git a/web-console/src/components/fancy-numeric-input/fancy-numeric-input.tsx b/web-console/src/components/fancy-numeric-input/fancy-numeric-input.tsx
index dad7c9a0617a..637c416b5f85 100644
--- a/web-console/src/components/fancy-numeric-input/fancy-numeric-input.tsx
+++ b/web-console/src/components/fancy-numeric-input/fancy-numeric-input.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { InputGroupProps2, Intent } from '@blueprintjs/core';
+import type { InputGroupProps, Intent } from '@blueprintjs/core';
 import { Button, ButtonGroup, Classes, ControlGroup, InputGroup, Keys } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
@@ -68,7 +68,7 @@ export interface FancyNumericInputProps {
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;
-  onBlur?: InputGroupProps2['onBlur'];
+  onBlur?: InputGroupProps['onBlur'];
 
   value: number | undefined;
   defaultValue?: number;
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
index af7cf3b0320b..9bfd4169abf8 100644
--- a/web-console/src/components/form-group-with-info/form-group-with-info.tsx
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
@@ -25,6 +25,7 @@ import './form-group-with-info.scss';
 
 export interface FormGroupWithInfoProps {
   label?: React.ReactNode;
+  inline?: boolean;
   info?: JSX.Element | string;
   inlineInfo?: boolean;
   children?: React.ReactNode;
@@ -33,7 +34,7 @@ export interface FormGroupWithInfoProps {
 export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
   props: FormGroupWithInfoProps,
 ) {
-  const { label, info, inlineInfo, children } = props;
+  const { label, inline, info, inlineInfo, children } = props;
 
   const popover = (
     <Popover className="info-popover" content={info} position="left-bottom">
@@ -45,6 +46,7 @@ export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
     <FormGroup
       className="form-group-with-info"
       label={label}
+      inline={inline}
       labelInfo={info && !inlineInfo && popover}
     >
       {children}
diff --git a/web-console/src/components/formatted-input/formatted-input.tsx b/web-console/src/components/formatted-input/formatted-input.tsx
index 170799a8849a..870c230561e8 100644
--- a/web-console/src/components/formatted-input/formatted-input.tsx
+++ b/web-console/src/components/formatted-input/formatted-input.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { InputGroupProps2 } from '@blueprintjs/core';
+import type { InputGroupProps } from '@blueprintjs/core';
 import { InputGroup, Intent, TextArea, Tooltip } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React, { useState } from 'react';
@@ -25,7 +25,7 @@ import type { Formatter } from '../../utils';
 
 import './formatted-input.scss';
 
-export interface FormattedInputProps extends InputGroupProps2 {
+export interface FormattedInputProps extends InputGroupProps {
   formatter: Formatter<any>;
   onValueChange: (newValue: undefined | string) => void;
   sanitizer?: (rawValue: string) => string;
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 d3e24a6c35ac..d8e883e50e4c 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
@@ -47,7 +47,6 @@ exports[`HeaderBar matches snapshot 1`] = `
               <Blueprint5.Tag
                 active={false}
                 fill={false}
-                interactive={false}
                 large={false}
                 minimal={true}
                 round={false}
@@ -168,7 +167,7 @@ exports[`HeaderBar matches snapshot 1`] = `
             active={false}
             disabled={false}
             href="#explore"
-            icon="compass"
+            icon="map"
             label="(experimental)"
             multiline={false}
             popoverProps={{}}
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 7cdc8cf1d312..46c1e9340fde 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -151,7 +151,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
       />
       <MenuDivider />
       <MenuItem
-        icon={IconNames.COMPASS}
+        icon={IconNames.MAP}
         text="Explore"
         label="(experimental)"
         href="#explore"
diff --git a/web-console/src/components/portal-bubble/portal-bubble.scss b/web-console/src/components/portal-bubble/portal-bubble.scss
index f29091150afc..182b904dbf2b 100644
--- a/web-console/src/components/portal-bubble/portal-bubble.scss
+++ b/web-console/src/components/portal-bubble/portal-bubble.scss
@@ -23,6 +23,7 @@ $shpitz-size: 9px;
 .portal-bubble {
   position: absolute;
   @include card-like;
+  z-index: 1000;
 
   .#{$bp-ns}-dark & {
     background: $dark-gray1;
diff --git a/web-console/src/components/portal-bubble/portal-bubble.tsx b/web-console/src/components/portal-bubble/portal-bubble.tsx
index b8831c84bb09..432f3b7954ec 100644
--- a/web-console/src/components/portal-bubble/portal-bubble.tsx
+++ b/web-console/src/components/portal-bubble/portal-bubble.tsx
@@ -39,6 +39,7 @@ export interface PortalBubbleOpenOn {
 export interface PortalBubbleProps {
   className?: string;
   openOn: PortalBubbleOpenOn | undefined;
+  offsetElement?: Element;
   direction?: 'up' | 'down';
   onClose?(): void;
   mute?: boolean;
@@ -46,14 +47,22 @@ export interface PortalBubbleProps {
 }
 
 export const PortalBubble = function PortalBubble(props: PortalBubbleProps) {
-  const { className, openOn, direction = 'up', onClose, mute, minimal } = props;
+  const { className, openOn, offsetElement, direction = 'up', onClose, mute, minimal } = props;
   const [myWidth, setMyWidth] = useState(200);
   if (!openOn) return null;
 
   const halfMyWidth = myWidth / 2;
 
-  const x = clamp(openOn.x, halfMyWidth, window.innerWidth - halfMyWidth);
-  const offset = clamp(x - openOn.x, -halfMyWidth, halfMyWidth);
+  let openOnX = openOn.x;
+  let openOnY = openOn.y;
+  if (offsetElement) {
+    const rect = offsetElement.getBoundingClientRect();
+    openOnX += rect.left;
+    openOnY += rect.top;
+  }
+
+  const x = clamp(openOnX, halfMyWidth, window.innerWidth - halfMyWidth);
+  const offset = clamp(x - openOnX, -halfMyWidth, halfMyWidth);
 
   return createPortal(
     <div
@@ -66,7 +75,7 @@ export const PortalBubble = function PortalBubble(props: PortalBubbleProps) {
       }}
       style={{
         left: x,
-        top: openOn.y + (minimal ? 0 : direction === 'up' ? -SHPITZ_SIZE : SHPITZ_SIZE),
+        top: openOnY + (minimal ? 0 : direction === 'up' ? -SHPITZ_SIZE : SHPITZ_SIZE),
       }}
     >
       {(openOn.title || onClose) && (
diff --git a/web-console/src/components/segment-timeline/chart-axis.tsx b/web-console/src/components/segment-timeline/chart-axis.tsx
deleted file mode 100644
index b8ee4e9cbb11..000000000000
--- a/web-console/src/components/segment-timeline/chart-axis.tsx
+++ /dev/null
@@ -1,37 +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 type { Axis } from 'd3-axis';
-import { select } from 'd3-selection';
-
-interface ChartAxisProps {
-  className?: string;
-  transform?: string;
-  axis: Axis<any>;
-}
-
-export const ChartAxis = function ChartAxis(props: ChartAxisProps) {
-  const { transform, axis, className } = props;
-  return (
-    <g
-      className={`chart-axis ${className}`}
-      transform={transform}
-      ref={node => select(node).call(axis as any)}
-    />
-  );
-};
diff --git a/web-console/src/components/segment-timeline/common.ts b/web-console/src/components/segment-timeline/interval.ts
similarity index 98%
rename from web-console/src/components/segment-timeline/common.ts
rename to web-console/src/components/segment-timeline/interval.ts
index 48aa5ce48d46..833f01251cfe 100644
--- a/web-console/src/components/segment-timeline/common.ts
+++ b/web-console/src/components/segment-timeline/interval.ts
@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
+import type { Duration } from 'chronoshift';
 import { sum } from 'd3-array';
 
-import type { Duration } from '../../utils';
 import { formatBytes, formatInteger } from '../../utils';
 
 export type IntervalStat = 'segments' | 'size' | 'rows';
diff --git a/web-console/src/components/segment-timeline/segment-bar-chart-render.scss b/web-console/src/components/segment-timeline/segment-bar-chart-render.scss
index 762772a0f5c5..c24ee0bb73dc 100644
--- a/web-console/src/components/segment-timeline/segment-bar-chart-render.scss
+++ b/web-console/src/components/segment-timeline/segment-bar-chart-render.scss
@@ -34,7 +34,7 @@
   svg {
     position: absolute;
 
-    .chart-axis text {
+    text {
       user-select: none;
     }
 
@@ -55,7 +55,7 @@
       stroke-width: 1px;
       opacity: 0.8;
 
-      &.done {
+      &.finalized {
         opacity: 1;
       }
     }
@@ -81,8 +81,9 @@
       }
     }
 
-    .gridline-x {
+    .h-gridline {
       line {
+        stroke: $white;
         stroke-dasharray: 5, 5;
         opacity: 0.5;
       }
diff --git a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx
index 11c7d36834f5..bb04259b53d6 100644
--- a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx
+++ b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx
@@ -20,39 +20,38 @@ import { Button, Intent } from '@blueprintjs/core';
 import type { NonNullDateRange } from '@blueprintjs/datetime';
 import { IconNames } from '@blueprintjs/icons';
 import IntervalTree from '@flatten-js/interval-tree';
+import { day, Duration, minute, month, Timezone } from 'chronoshift';
 import classNames from 'classnames';
 import { max, sort, sum } from 'd3-array';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
+import { select } from 'd3-selection';
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useMemo, useRef, useState } from 'react';
 
 import type { Rule } from '../../druid-models';
 import { getDatasourceColor, RuleUtil } from '../../druid-models';
 import { useClock, useGlobalEventListener } from '../../hooks';
+import type { Margin, Stage } from '../../utils';
 import {
   allSameValue,
   arraysEqualByElement,
   clamp,
-  day,
-  Duration,
+  filterMap,
   formatBytes,
   formatNumber,
+  formatStartDuration,
   groupBy,
   groupByAsMap,
-  minute,
-  month,
+  pickSmallestGranularityThatFits,
   pluralIfNeeded,
-  TZ_UTC,
   uniq,
 } from '../../utils';
-import type { Margin, Stage } from '../../utils/stage';
 import type { PortalBubbleOpenOn } from '../portal-bubble/portal-bubble';
 import { PortalBubble } from '../portal-bubble/portal-bubble';
 
-import { ChartAxis } from './chart-axis';
-import type { IntervalBar, IntervalRow, IntervalStat, TrimmedIntervalRow } from './common';
-import { aggregateSegmentStats, formatIntervalStat, formatIsoDateOnly } from './common';
+import type { IntervalBar, IntervalRow, IntervalStat, TrimmedIntervalRow } from './interval';
+import { aggregateSegmentStats, formatIntervalStat, formatIsoDateOnly } from './interval';
 
 import './segment-bar-chart-render.scss';
 
@@ -69,38 +68,6 @@ const POSSIBLE_GRANULARITIES = [
 
 const EXTEND_X_SCALE_DOMAIN_BY = 1;
 
-function formatStartDuration(start: Date, duration: Duration): string {
-  let sliceLength;
-  const { singleSpan } = duration;
-  switch (singleSpan) {
-    case 'year':
-      sliceLength = 4;
-      break;
-
-    case 'month':
-      sliceLength = 7;
-      break;
-
-    case 'day':
-      sliceLength = 10;
-      break;
-
-    case 'hour':
-      sliceLength = 13;
-      break;
-
-    case 'minute':
-      sliceLength = 16;
-      break;
-
-    default:
-      sliceLength = 19;
-      break;
-  }
-
-  return `${start.toISOString().slice(0, sliceLength)}/${duration}`;
-}
-
 // ---------------------------------------
 // Load rule stuff
 
@@ -125,14 +92,14 @@ function loadRuleToDateRange(loadRule: Rule): NonNullDateRange {
     case 'dropByPeriod':
     case 'broadcastByPeriod':
       return [
-        new Duration(loadRule.period || 'P1D').shift(new Date(), TZ_UTC, -1),
+        new Duration(loadRule.period || 'P1D').shift(new Date(), Timezone.UTC, -1),
         loadRule.includeFuture ? POSITIVE_INFINITY_DATE : new Date(),
       ];
 
     case 'dropBeforeByPeriod':
       return [
         NEGATIVE_INFINITY_DATE,
-        new Duration(loadRule.period || 'P1D').shift(new Date(), TZ_UTC, -1),
+        new Duration(loadRule.period || 'P1D').shift(new Date(), Timezone.UTC, -1),
       ];
 
     default:
@@ -168,6 +135,9 @@ function stackIntervalRows(trimmedIntervalRows: TrimmedIntervalRow[]): {
     const totalSizeDiff = datasourceToTotalSize[b.datasource] - datasourceToTotalSize[a.datasource];
     if (totalSizeDiff) return totalSizeDiff;
 
+    const datasourceNameDiff = b.datasource.localeCompare(a.datasource);
+    if (datasourceNameDiff) return datasourceNameDiff;
+
     return Number(a.realtime) - Number(b.realtime);
   });
 
@@ -200,7 +170,7 @@ interface BubbleInfo {
 interface SelectionRange {
   start: Date;
   end: Date;
-  done?: boolean;
+  finalized?: boolean;
 }
 
 export interface DatasourceRules {
@@ -253,7 +223,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
       selection &&
       selection.start.valueOf() === newSelection.start.valueOf() &&
       selection.end.valueOf() === newSelection.end.valueOf() &&
-      selection.done === newSelection.done
+      selection.finalized === newSelection.finalized
     ) {
       return;
     }
@@ -280,13 +250,15 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
   const now = useClock(minute.canonicalLength);
   const svgRef = useRef<SVGSVGElement | null>(null);
 
+  const innerStage = stage.applyMargin(CHART_MARGIN);
+
   const trimGranularity = useMemo(() => {
-    return Duration.pickSmallestGranularityThatFits(
+    return pickSmallestGranularityThatFits(
       POSSIBLE_GRANULARITIES,
       dateRange[1].valueOf() - dateRange[0].valueOf(),
-      Math.floor(stage.width / MIN_BAR_WIDTH),
+      Math.floor(Math.max(innerStage.width, 10) / MIN_BAR_WIDTH),
     ).toString();
-  }, [dateRange, stage.width]);
+  }, [dateRange, innerStage.width]);
 
   const { intervalBars, intervalTree } = useMemo(() => {
     const shownIntervalRows = intervalRows.filter(
@@ -304,12 +276,12 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
     const trimDuration = new Duration(trimGranularity);
     const trimmedIntervalRows = shownIntervalRows.map(intervalRow => {
       const { start, end, segments, size, rows } = intervalRow;
-      const startTrimmed = trimDuration.floor(start, TZ_UTC);
-      let endTrimmed = trimDuration.ceil(end, TZ_UTC);
+      const startTrimmed = trimDuration.floor(start, Timezone.UTC);
+      let endTrimmed = trimDuration.ceil(end, Timezone.UTC);
 
       // Special handling to catch WEEK intervals when trimming to month.
       if (trimGranularity === 'P1M' && intervalRow.originalTimeSpan.toString() === 'P7D') {
-        endTrimmed = trimDuration.shift(startTrimmed, TZ_UTC);
+        endTrimmed = trimDuration.shift(startTrimmed, Timezone.UTC);
       }
 
       const shownDays = (endTrimmed.valueOf() - startTrimmed.valueOf()) / day.canonicalLength;
@@ -352,8 +324,6 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
     return stackIntervalRows(fullyGroupedSegmentRows);
   }, [intervalRows, trimGranularity, dateRange, shownDatasource]);
 
-  const innerStage = stage.applyMargin(CHART_MARGIN);
-
   const baseTimeScale = scaleUtc()
     .domain(dateRange)
     .range([EXTEND_X_SCALE_DOMAIN_BY, innerStage.width - EXTEND_X_SCALE_DOMAIN_BY]);
@@ -367,7 +337,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
   );
   const statScale = scaleLinear()
     .rangeRound([innerStage.height, 0])
-    .domain([0, (maxNormalizedStat ?? 1) * 1.05]);
+    .domain([0, (maxNormalizedStat ?? 100) * 1.05]);
 
   const formatTickRate = (n: number) => {
     switch (shownIntervalStat) {
@@ -391,7 +361,11 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
       setSelection(undefined);
     } else {
       const rect = svg.getBoundingClientRect();
-      const x = e.clientX - rect.x - CHART_MARGIN.left;
+      const x = clamp(
+        e.clientX - rect.x - CHART_MARGIN.left,
+        EXTEND_X_SCALE_DOMAIN_BY,
+        innerStage.width - EXTEND_X_SCALE_DOMAIN_BY,
+      );
       const y = e.clientY - rect.y - CHART_MARGIN.top;
       const time = baseTimeScale.invert(x);
       const action = y > innerStage.height || e.shiftKey ? 'shift' : 'select';
@@ -413,19 +387,21 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
     if (mouseDownAt) {
       e.preventDefault();
 
-      const b = baseTimeScale.invert(x);
       if (mouseDownAt.action === 'shift' || e.shiftKey) {
-        setShiftOffset(mouseDownAt.time.valueOf() - b.valueOf());
+        setShiftOffset(mouseDownAt.time.valueOf() - baseTimeScale.invert(x).valueOf());
       } else {
+        const b = baseTimeScale.invert(
+          clamp(x, EXTEND_X_SCALE_DOMAIN_BY, innerStage.width - EXTEND_X_SCALE_DOMAIN_BY),
+        );
         if (mouseDownAt.time < b) {
           setSelectionIfNeeded({
-            start: day.floor(mouseDownAt.time, TZ_UTC),
-            end: day.ceil(b, TZ_UTC),
+            start: day.floor(mouseDownAt.time, Timezone.UTC),
+            end: day.ceil(b, Timezone.UTC),
           });
         } else {
           setSelectionIfNeeded({
-            start: day.floor(b, TZ_UTC),
-            end: day.ceil(mouseDownAt.time, TZ_UTC),
+            start: day.floor(b, Timezone.UTC),
+            end: day.ceil(mouseDownAt.time, Timezone.UTC),
           });
         }
       }
@@ -441,8 +417,8 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
           new Duration(trimGranularity).getCanonicalLength() > day.canonicalLength * 25
             ? month
             : day;
-        const start = shifter.floor(time, TZ_UTC);
-        const end = shifter.ceil(time, TZ_UTC);
+        const start = shifter.floor(time, Timezone.UTC);
+        const end = shifter.shift(start, Timezone.UTC, 1);
 
         let intervalBars: IntervalBar[] = [];
         if (y <= innerStage.height) {
@@ -492,7 +468,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
         }
       } else {
         if (selection) {
-          setSelection({ ...selection, done: true });
+          setSelection({ ...selection, finalized: true });
         }
       }
     } else if (0 <= x && x <= innerStage.width && 0 <= y && y <= innerStage.height) {
@@ -521,9 +497,12 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
     }
   });
 
+  if (innerStage.isInvalid()) return;
+
   function startEndToXWidth({ start, end }: { start: Date; end: Date }) {
-    const xStart = clamp(timeScale(start), 0, innerStage.width);
-    const xEnd = clamp(timeScale(end), 0, innerStage.width);
+    const xStart = timeScale(start);
+    const xEnd = timeScale(end);
+    if (xEnd < 0 || innerStage.width < xStart) return;
 
     return {
       x: xStart,
@@ -532,132 +511,132 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
   }
 
   function segmentBarToRect(intervalBar: IntervalBar) {
+    const xWidth = startEndToXWidth(intervalBar);
+    if (!xWidth) return;
+
     const y0 = statScale(intervalBar.offset[shownIntervalStat]);
     const y = statScale(
       intervalBar.normalized[shownIntervalStat] + intervalBar.offset[shownIntervalStat],
     );
 
     return {
-      ...startEndToXWidth(intervalBar),
+      ...xWidth,
       y: y,
       height: y0 - y,
     };
   }
 
   let hoveredOpenOn: PortalBubbleOpenOn | undefined;
-  if (svgRef.current) {
-    const rect = svgRef.current.getBoundingClientRect();
-
-    if (bubbleInfo) {
-      const hoveredIntervalBars = bubbleInfo.intervalBars;
-
-      let title: string | undefined;
-      let text: ReactNode;
-      if (hoveredIntervalBars.length === 0) {
-        title = bubbleInfo.timeLabel;
-        text = '';
-      } else if (hoveredIntervalBars.length === 1) {
-        const hoveredIntervalBar = hoveredIntervalBars[0];
-        title = `${formatStartDuration(
-          hoveredIntervalBar.start,
-          hoveredIntervalBar.originalTimeSpan,
-        )}${hoveredIntervalBar.realtime ? ' (realtime)' : ''}`;
-        text = (
-          <>
-            {!shownDatasource && <div>{`Datasource: ${hoveredIntervalBar.datasource}`}</div>}
-            <div>{`Size: ${
-              hoveredIntervalBar.realtime
-                ? 'estimated for realtime'
-                : formatIntervalStat('size', hoveredIntervalBar.size)
-            }`}</div>
-            <div>{`Rows: ${formatIntervalStat('rows', hoveredIntervalBar.rows)}`}</div>
-            <div>{`Segments: ${formatIntervalStat('segments', hoveredIntervalBar.segments)}`}</div>
-          </>
-        );
-      } else {
-        const datasources = uniq(hoveredIntervalBars.map(b => b.datasource));
-        const agg = aggregateSegmentStats(hoveredIntervalBars);
-        title = bubbleInfo.timeLabel;
-        text = (
-          <>
-            {!shownDatasource && (
-              <div>{`Totals for ${pluralIfNeeded(datasources.length, 'datasource')}`}</div>
-            )}
-            <div>{`Size: ${formatIntervalStat('size', agg.size)}`}</div>
-            <div>{`Rows: ${formatIntervalStat('rows', agg.rows)}`}</div>
-            <div>{`Segments: ${formatIntervalStat('segments', agg.segments)}`}</div>
-          </>
-        );
-      }
 
-      hoveredOpenOn = {
-        x:
-          rect.x +
-          CHART_MARGIN.left +
-          timeScale(new Date((bubbleInfo.start.valueOf() + bubbleInfo.end.valueOf()) / 2)),
-        y: rect.y + CHART_MARGIN.top,
-        title,
-        text,
-      };
-    } else if (selection) {
-      const selectedBars = intervalTree.search([
-        selection.start.valueOf() + 1,
-        selection.end.valueOf() - 1,
-      ]) as IntervalBar[];
-      const datasources = uniq(selectedBars.map(b => b.datasource));
-      const realtime = allSameValue(selectedBars.map(b => b.realtime));
-      const agg = aggregateSegmentStats(selectedBars);
-      hoveredOpenOn = {
-        x:
-          rect.x +
-          CHART_MARGIN.left +
-          timeScale(new Date((selection.start.valueOf() + selection.end.valueOf()) / 2)),
-        y: rect.y + CHART_MARGIN.top,
-        title: `${formatIsoDateOnly(selection.start)} → ${formatIsoDateOnly(selection.end)}`,
-        text: (
-          <>
-            {selectedBars.length ? (
-              <>
-                {!shownDatasource && (
-                  <div>{`Totals for ${pluralIfNeeded(datasources.length, 'datasource')}`}</div>
-                )}
-                <div>{`Size: ${formatIntervalStat('size', agg.size)}`}</div>
-                <div>{`Rows: ${formatIntervalStat('rows', agg.rows)}`}</div>
-                <div>{`Segments: ${formatIntervalStat('segments', agg.segments)}`}</div>
-              </>
-            ) : (
-              <div>No segments in this interval</div>
-            )}
-            {selection.done && (
-              <div className="button-bar">
-                <Button
-                  icon={IconNames.ZOOM_IN}
-                  text="Zoom in"
-                  intent={Intent.PRIMARY}
-                  small
-                  onClick={() => {
-                    if (!selection) return;
-                    setSelection(undefined);
-                    changeDateRange([selection.start, selection.end]);
-                  }}
-                />
-                {getIntervalActionButton?.(
-                  selection.start,
-                  selection.end,
-                  datasources.length === 1 ? datasources[0] : undefined,
-                  realtime,
-                )}
-              </div>
-            )}
-          </>
-        ),
-      };
+  if (bubbleInfo) {
+    const hoveredIntervalBars = bubbleInfo.intervalBars;
+
+    let title: string | undefined;
+    let text: ReactNode;
+    if (hoveredIntervalBars.length === 0) {
+      title = bubbleInfo.timeLabel;
+      text = '';
+    } else if (hoveredIntervalBars.length === 1) {
+      const hoveredIntervalBar = hoveredIntervalBars[0];
+      title = `${formatStartDuration(
+        hoveredIntervalBar.start,
+        hoveredIntervalBar.originalTimeSpan,
+      )}${hoveredIntervalBar.realtime ? ' (realtime)' : ''}`;
+      text = (
+        <>
+          {!shownDatasource && <div>{`Datasource: ${hoveredIntervalBar.datasource}`}</div>}
+          <div>{`Size: ${
+            hoveredIntervalBar.realtime
+              ? 'estimated for realtime'
+              : formatIntervalStat('size', hoveredIntervalBar.size)
+          }`}</div>
+          <div>{`Rows: ${formatIntervalStat('rows', hoveredIntervalBar.rows)}`}</div>
+          <div>{`Segments: ${formatIntervalStat('segments', hoveredIntervalBar.segments)}`}</div>
+        </>
+      );
+    } else {
+      const datasources = uniq(hoveredIntervalBars.map(b => b.datasource));
+      const agg = aggregateSegmentStats(hoveredIntervalBars);
+      title = bubbleInfo.timeLabel;
+      text = (
+        <>
+          {!shownDatasource && (
+            <div>{`Totals for ${pluralIfNeeded(datasources.length, 'datasource')}`}</div>
+          )}
+          <div>{`Size: ${formatIntervalStat('size', agg.size)}`}</div>
+          <div>{`Rows: ${formatIntervalStat('rows', agg.rows)}`}</div>
+          <div>{`Segments: ${formatIntervalStat('segments', agg.segments)}`}</div>
+        </>
+      );
     }
+
+    hoveredOpenOn = {
+      x:
+        CHART_MARGIN.left +
+        timeScale(new Date((bubbleInfo.start.valueOf() + bubbleInfo.end.valueOf()) / 2)),
+      y: CHART_MARGIN.top,
+      title,
+      text,
+    };
+  } else if (selection) {
+    const selectedBars = intervalTree.search([
+      selection.start.valueOf() + 1,
+      selection.end.valueOf() - 1,
+    ]) as IntervalBar[];
+    const datasources = uniq(selectedBars.map(b => b.datasource));
+    const realtime = allSameValue(selectedBars.map(b => b.realtime));
+    const agg = aggregateSegmentStats(selectedBars);
+    hoveredOpenOn = {
+      x:
+        CHART_MARGIN.left +
+        timeScale(new Date((selection.start.valueOf() + selection.end.valueOf()) / 2)),
+      y: CHART_MARGIN.top,
+      title: `${formatIsoDateOnly(selection.start)} → ${formatIsoDateOnly(selection.end)}`,
+      text: (
+        <>
+          {selectedBars.length ? (
+            <>
+              {!shownDatasource && (
+                <div>{`Totals for ${pluralIfNeeded(datasources.length, 'datasource')}`}</div>
+              )}
+              <div>{`Size: ${formatIntervalStat('size', agg.size)}`}</div>
+              <div>{`Rows: ${formatIntervalStat('rows', agg.rows)}`}</div>
+              <div>{`Segments: ${formatIntervalStat('segments', agg.segments)}`}</div>
+            </>
+          ) : (
+            <div>No segments in this interval</div>
+          )}
+          {selection.finalized && (
+            <div className="button-bar">
+              <Button
+                icon={IconNames.ZOOM_IN}
+                text="Zoom in"
+                intent={Intent.PRIMARY}
+                small
+                onClick={() => {
+                  if (!selection) return;
+                  setSelection(undefined);
+                  changeDateRange([selection.start, selection.end]);
+                }}
+              />
+              {getIntervalActionButton?.(
+                selection.start,
+                selection.end,
+                datasources.length === 1 ? datasources[0] : undefined,
+                realtime,
+              )}
+            </div>
+          )}
+        </>
+      ),
+    };
   }
 
   function renderLoadRule(loadRule: Rule, i: number, isDefault: boolean) {
     const [start, end] = loadRuleToDateRange(loadRule);
-    const { x, width } = startEndToXWidth({ start, end });
+    const xWidth = startEndToXWidth({ start, end });
+    if (!xWidth) return;
+
     const title = RuleUtil.ruleToString(loadRule) + (isDefault ? ' (cluster default)' : '');
     return (
       <div
@@ -665,8 +644,8 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
         className={classNames('load-rule', loadRuleToBaseType(loadRule))}
         data-tooltip={title}
         style={{
-          left: x,
-          width,
+          left: xWidth.x,
+          width: xWidth.width,
         }}
       >
         {title}
@@ -679,43 +658,20 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
     <div className="segment-bar-chart-render">
       <svg
         ref={svgRef}
-        width={stage.width}
-        height={stage.height}
-        viewBox={`0 0 ${stage.width} ${stage.height}`}
+        {...stage.toWidthHeight()}
+        viewBox={stage.toViewBox()}
         preserveAspectRatio="xMinYMin meet"
         onMouseDown={handleMouseDown}
       >
         <g transform={`translate(${CHART_MARGIN.left},${CHART_MARGIN.top})`}>
-          <ChartAxis
-            className="gridline-x"
-            transform="translate(0,0)"
-            axis={axisLeft(statScale)
-              .tickValues(statScale.ticks(3).filter(v => v !== 0))
-              .tickSize(-innerStage.width)
-              .tickFormat(() => '')
-              .tickSizeOuter(0)}
-          />
-          <ChartAxis
-            className="axis-x"
-            transform={`translate(0,${innerStage.height})`}
-            axis={axisBottom(timeScale)}
-          />
-          <rect
-            className={classNames('time-shift-indicator', {
-              shifting: typeof shiftOffset === 'number',
+          <g className="h-gridline" transform="translate(0,0)">
+            {filterMap(statScale.ticks(3), (v, i) => {
+              if (v === 0) return;
+              const y = statScale(v);
+              return <line key={i} x1={0} y1={y} x2={innerStage.width} y2={y} />;
             })}
-            x={0}
-            y={innerStage.height}
-            width={innerStage.width}
-            height={CHART_MARGIN.bottom}
-          />
-          <ChartAxis
-            className="axis-y"
-            axis={axisLeft(statScale)
-              .ticks(3)
-              .tickFormat(e => formatTickRate(e.valueOf()))}
-          />
-          <g className="bar-group">
+          </g>
+          <g clipPath={`xywh(0px 0px ${innerStage.width}px ${innerStage.height}px) view-box`}>
             {bubbleInfo && (
               <rect
                 className="hover-highlight"
@@ -727,12 +683,14 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
             {0 < nowX && nowX < innerStage.width && (
               <line className="now-line" x1={nowX} x2={nowX} y1={0} y2={innerStage.height + 8} />
             )}
-            {intervalBars.map((intervalBar, i) => {
+            {filterMap(intervalBars, (intervalBar, i) => {
+              const r = segmentBarToRect(intervalBar);
+              if (!r) return;
               return (
                 <rect
                   key={i}
                   className={classNames('bar-unit', { realtime: intervalBar.realtime })}
-                  {...segmentBarToRect(intervalBar)}
+                  {...r}
                   fill={getDatasourceColor(intervalBar.datasource)}
                 />
               );
@@ -743,7 +701,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
               ))}
             {selection && (
               <rect
-                className={classNames('selection', { done: selection.done })}
+                className={classNames('selection', { finalized: selection.finalized })}
                 {...startEndToXWidth(selection)}
                 y={0}
                 height={innerStage.height}
@@ -763,6 +721,30 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
               />
             )}
           </g>
+          <g
+            className="axis-x"
+            transform={`translate(0,${innerStage.height + 1})`}
+            ref={(node: any) => select(node).call(axisBottom(timeScale))}
+          />
+          <rect
+            className={classNames('time-shift-indicator', {
+              shifting: typeof shiftOffset === 'number',
+            })}
+            x={0}
+            y={innerStage.height}
+            width={innerStage.width}
+            height={CHART_MARGIN.bottom}
+          />
+          <g
+            className="axis-y"
+            ref={(node: any) =>
+              select(node).call(
+                axisLeft(statScale)
+                  .ticks(3)
+                  .tickFormat(e => formatTickRate(e.valueOf())),
+              )
+            }
+          />
         </g>
       </svg>
       {(datasourceRules || datasourceRulesError) && (
@@ -781,13 +763,16 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
           <div className="no-data-text">There are no segments in the selected range</div>
         </div>
       )}
-      <PortalBubble
-        className="segment-bar-chart-bubble"
-        openOn={hoveredOpenOn}
-        onClose={selection?.done ? () => setSelection(undefined) : undefined}
-        mute
-        direction="up"
-      />
+      {svgRef.current && (
+        <PortalBubble
+          className="segment-bar-chart-bubble"
+          openOn={hoveredOpenOn}
+          offsetElement={svgRef.current}
+          onClose={selection?.finalized ? () => setSelection(undefined) : undefined}
+          mute
+          direction="up"
+        />
+      )}
     </div>
   );
 };
diff --git a/web-console/src/components/segment-timeline/segment-bar-chart.tsx b/web-console/src/components/segment-timeline/segment-bar-chart.tsx
index 297ea4afe617..cf38b12c397c 100644
--- a/web-console/src/components/segment-timeline/segment-bar-chart.tsx
+++ b/web-console/src/components/segment-timeline/segment-bar-chart.tsx
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { Duration, Timezone } from 'chronoshift';
 import { C, F, L, N, sql, SqlExpression, SqlQuery } from 'druid-query-toolkit';
 import { useMemo } from 'react';
 
@@ -23,10 +24,10 @@ import { END_OF_TIME_DATE, type Rule, RuleUtil, START_OF_TIME_DATE } from '../..
 import type { Capabilities } from '../../helpers';
 import { useQueryManager } from '../../hooks';
 import { Api } from '../../singletons';
-import { Duration, filterMap, getApiArray, queryDruidSql, TZ_UTC } from '../../utils';
+import { filterMap, getApiArray, queryDruidSql } from '../../utils';
 import { Loader } from '../loader/loader';
 
-import type { IntervalRow } from './common';
+import type { IntervalRow } from './interval';
 import type { SegmentBarChartRenderProps } from './segment-bar-chart-render';
 import { SegmentBarChartRender } from './segment-bar-chart-render';
 
@@ -80,7 +81,7 @@ export const SegmentBarChart = function SegmentBarChart(props: SegmentBarChartPr
             start,
             end,
             realtime: Boolean(sr.realtime),
-            originalTimeSpan: Duration.fromRange(start, end, TZ_UTC),
+            originalTimeSpan: Duration.fromRange(start, end, Timezone.UTC),
           } as IntervalRow;
         });
       } else {
@@ -104,7 +105,7 @@ export const SegmentBarChart = function SegmentBarChart(props: SegmentBarChartPr
               end,
               datasource: segment.dataSource,
               realtime: Boolean(segment.realtime),
-              originalTimeSpan: Duration.fromRange(start, end, TZ_UTC),
+              originalTimeSpan: Duration.fromRange(start, end, Timezone.UTC),
               segments: 1,
               size: segment.size,
               rows: segment.num_rows || 0, // segment.num_rows is really null on this API :-(
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
index 2774c73276eb..d14f63d56c77 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -30,6 +30,7 @@ import type { NonNullDateRange } from '@blueprintjs/datetime';
 import { DateRangePicker3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
 import { Select } from '@blueprintjs/select';
+import { day, Duration, Timezone } from 'chronoshift';
 import { C, L, N, SqlExpression, SqlQuery } from 'druid-query-toolkit';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -38,40 +39,31 @@ import type { Capabilities } from '../../helpers';
 import { useQueryManager } from '../../hooks';
 import {
   checkedCircleIcon,
-  day,
-  Duration,
   getApiArray,
   isNonNullRange,
   localToUtcDateRange,
   maxDate,
   queryDruidSql,
-  TZ_UTC,
+  Stage,
   utcToLocalDateRange,
 } from '../../utils';
-import { Stage } from '../../utils/stage';
 import { Loader } from '../loader/loader';
 
-import type { IntervalStat } from './common';
-import { formatIsoDateOnly, getIntervalStatTitle, INTERVAL_STATS } from './common';
+import type { IntervalStat } from './interval';
+import { formatIsoDateOnly, getIntervalStatTitle, INTERVAL_STATS } from './interval';
 import type { SegmentBarChartProps } from './segment-bar-chart';
 import { SegmentBarChart } from './segment-bar-chart';
 
 import './segment-timeline.scss';
 
 const DEFAULT_SHOWN_DURATION = new Duration('P1Y');
-const SHOWN_DURATION_OPTIONS: Duration[] = [
-  new Duration('P1D'),
-  new Duration('P1W'),
-  new Duration('P1M'),
-  new Duration('P3M'),
-  new Duration('P1Y'),
-  new Duration('P5Y'),
-  new Duration('P10Y'),
-];
+const SHOWN_DURATION_OPTIONS: Duration[] = ['P1D', 'P1W', 'P1M', 'P3M', 'P1Y', 'P5Y', 'P10Y'].map(
+  d => new Duration(d),
+);
 
 function getDateRange(shownDuration: Duration): NonNullDateRange {
-  const end = day.ceil(new Date(), TZ_UTC);
-  return [shownDuration.shift(end, TZ_UTC, -1), end];
+  const end = day.ceil(new Date(), Timezone.UTC);
+  return [shownDuration.shift(end, Timezone.UTC, -1), end];
 }
 
 function formatDateRange(dateRange: NonNullDateRange): string {
@@ -149,7 +141,7 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr
           return getDateRange(DEFAULT_SHOWN_DURATION);
         }
 
-        queriedEnd = day.ceil(new Date(endRes[0].end), TZ_UTC);
+        queriedEnd = day.ceil(new Date(endRes[0].end), Timezone.UTC);
 
         const startQuery = baseQuery
           .addSelect(C('start'), { addToOrderBy: 'end', direction: 'ASC' })
@@ -160,17 +152,17 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr
           cancelToken,
         ).catch(() => []);
         if (startRes.length !== 1) {
-          return [DEFAULT_SHOWN_DURATION.shift(queriedEnd, TZ_UTC, -1), queriedEnd]; // Should not really get here
+          return [DEFAULT_SHOWN_DURATION.shift(queriedEnd, Timezone.UTC, -1), queriedEnd]; // Should not really get here
         }
 
-        queriedStart = day.floor(new Date(startRes[0].start), TZ_UTC);
+        queriedStart = day.floor(new Date(startRes[0].start), Timezone.UTC);
       } else {
         // Don't bother querying if there is no SQL
         return getDateRange(DEFAULT_SHOWN_DURATION);
       }
 
       return [
-        maxDate(queriedStart, DEFAULT_SHOWN_DURATION.shift(queriedEnd, TZ_UTC, -1)),
+        maxDate(queriedStart, DEFAULT_SHOWN_DURATION.shift(queriedEnd, Timezone.UTC, -1)),
         queriedEnd,
       ];
     },
@@ -185,10 +177,10 @@ export const SegmentTimeline = function SegmentTimeline(props: SegmentTimelinePr
   let zoomedOutDateRange: NonNullDateRange | undefined;
   let nextDateRange: NonNullDateRange | undefined;
   if (effectiveDateRange) {
-    const d = Duration.fromRange(effectiveDateRange[0], effectiveDateRange[1], TZ_UTC);
-    const shiftStartBack = d.shift(effectiveDateRange[0], TZ_UTC, -1);
-    const shiftEndForward = d.shift(effectiveDateRange[1], TZ_UTC);
-    const now = day.ceil(new Date(), TZ_UTC);
+    const d = Duration.fromRange(effectiveDateRange[0], effectiveDateRange[1], Timezone.UTC);
+    const shiftStartBack = d.shift(effectiveDateRange[0], Timezone.UTC, -1);
+    const shiftEndForward = d.shift(effectiveDateRange[1], Timezone.UTC);
+    const now = day.ceil(new Date(), Timezone.UTC);
     previousDateRange = [shiftStartBack, effectiveDateRange[0]];
     zoomedOutDateRange = [shiftStartBack, shiftEndForward < now ? shiftEndForward : now];
     nextDateRange = [effectiveDateRange[1], shiftEndForward];
diff --git a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
index 497eeb33a468..90225d9de0d8 100644
--- a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
+++ b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
@@ -28,7 +28,6 @@ exports[`ShowLog describe show log 1`] = `
         download="test"
         href="/some/base_url/druid/index/test/log"
         role="button"
-        tabindex="0"
       >
         <span
           class="bp5-button-text"
diff --git a/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap b/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
index 7525880e6e28..dfaefe053e15 100644
--- a/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap
@@ -141,7 +141,6 @@ exports[`AboutDialog matches snapshot 1`] = `
               class="bp5-button bp5-intent-primary"
               href="https://druid.apache.org"
               role="button"
-              tabindex="0"
               target="_blank"
             >
               <span
diff --git a/web-console/src/druid-models/segment/segment.ts b/web-console/src/druid-models/segment/segment.ts
index 1bff0711fcdf..1825a6b2d91f 100644
--- a/web-console/src/druid-models/segment/segment.ts
+++ b/web-console/src/druid-models/segment/segment.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Duration } from '../../utils';
+import { Duration, Timezone } from 'chronoshift';
 
 export const START_OF_TIME_DATE = '-146136543-09-08T08:23:32.096Z';
 export const END_OF_TIME_DATE = '146140482-04-24T15:36:27.903Z';
@@ -36,7 +36,7 @@ export function computeSegmentTimeSpan(start: string, end: string): string {
     return 'Invalid end';
   }
 
-  return Duration.fromRange(startDate, endDate, 'Etc/UTC').getDescription(true);
+  return Duration.fromRange(startDate, endDate, Timezone.UTC).getDescription(true);
 }
 
 export interface ShardSpec {
diff --git a/web-console/src/hooks/index.ts b/web-console/src/hooks/index.ts
index 515fbe0db361..f8f873a6fa25 100644
--- a/web-console/src/hooks/index.ts
+++ b/web-console/src/hooks/index.ts
@@ -23,6 +23,6 @@ export * from './use-hash-and-local-storage-hybrid-state';
 export * from './use-interval';
 export * from './use-last-defined';
 export * from './use-local-storage-state';
+export * from './use-memo-with-previous';
 export * from './use-permanent-callback';
 export * from './use-query-manager';
-export * from './use-resize-observer';
diff --git a/web-console/src/hooks/use-hash-and-local-storage-hybrid-state.ts b/web-console/src/hooks/use-hash-and-local-storage-hybrid-state.ts
index 6fdd2d84ab0d..e71c233210e3 100644
--- a/web-console/src/hooks/use-hash-and-local-storage-hybrid-state.ts
+++ b/web-console/src/hooks/use-hash-and-local-storage-hybrid-state.ts
@@ -18,7 +18,7 @@
 
 import * as JSONBig from 'json-bigint-native';
 import type { Dispatch, SetStateAction } from 'react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import type { LocalStorageKeys } from '../utils';
 import {
@@ -28,6 +28,8 @@ import {
   localStorageSetJson,
 } from '../utils';
 
+import { useGlobalEventListener } from './use-global-event-listener';
+
 function encodeHashState(prefix: string, x: unknown): string {
   return prefix + base64UrlEncode(JSONBig.stringify(x));
 }
@@ -63,22 +65,13 @@ export function useHashAndLocalStorageHybridState<T>(
   };
 
   // Listen for "popstate" event (triggered by browser back/forward navigation)
-  useEffect(() => {
-    const handlePopState = () => {
-      const valueToInflate = decodeHashState(prefix, window.location.hash);
-      if (typeof valueToInflate === 'undefined') return;
-      const value = inflateFn ? inflateFn(valueToInflate) : valueToInflate;
-      setState(value);
-      localStorageSetJson(key, value);
-    };
-
-    window.addEventListener('popstate', handlePopState);
-
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useGlobalEventListener('popstate', () => {
+    const valueToInflate = decodeHashState(prefix, window.location.hash);
+    if (typeof valueToInflate === 'undefined') return;
+    const value = inflateFn ? inflateFn(valueToInflate) : valueToInflate;
+    setState(value);
+    localStorageSetJson(key, value);
+  });
 
   return [state, setValue];
 }
diff --git a/web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.scss b/web-console/src/hooks/use-memo-with-previous.ts
similarity index 52%
rename from web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.scss
rename to web-console/src/hooks/use-memo-with-previous.ts
index 479ad15f056a..c976a88eca0e 100644
--- a/web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.scss
+++ b/web-console/src/hooks/use-memo-with-previous.ts
@@ -16,32 +16,22 @@
  * limitations under the License.
  */
 
-.highlight-bubble {
-  position: absolute;
-  transform: translate(-50%, -100%);
-  z-index: 10;
-  min-width: 200px;
-  max-width: 500px;
+import { useRef } from 'react';
 
-  // shpitz
-  &:after {
-    content: ' ';
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-    bottom: -15px;
-    border-top: 15px solid #2f344e;
-    border-right: 15px solid transparent;
-    border-left: 15px solid transparent;
-    border-bottom: none;
-  }
-
-  .button-group {
-    margin-top: 20px;
-    text-align: right;
+import { arraysEqualByElement } from '../utils';
 
-    > *:not(:last-child) {
-      margin-right: 10px;
-    }
+/**
+ * Custom hook similar to `useMemo`, but it provides the previous value as an argument.
+ * @param computeFn - Function to compute the new value. It receives the previous value as an argument.
+ * @param deps - Dependency array to determine when to recompute the value.
+ * @returns The memoized value.
+ */
+export function useMemoWithPrevious<T>(computeFn: (prev: T | undefined) => T, deps: any[]): T {
+  const value = useRef(computeFn(undefined));
+  const prevDependencies = useRef(deps);
+  if (!arraysEqualByElement(deps, prevDependencies.current)) {
+    value.current = computeFn(value.current);
+    prevDependencies.current = deps;
   }
+  return value.current;
 }
diff --git a/web-console/src/hooks/use-resize-observer.ts b/web-console/src/hooks/use-resize-observer.ts
deleted file mode 100644
index 921edd0b8acf..000000000000
--- a/web-console/src/hooks/use-resize-observer.ts
+++ /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 { useCallback, useEffect, useState } from 'react';
-
-const emptyDOMRect = { height: 0, width: 0, x: 0, y: 0, bottom: 0, left: 0, right: 0, top: 0 };
-
-function createEmptyDOMRect(): DOMRect {
-  // DOMRect is not defined in JSDOM
-  return typeof DOMRect !== 'undefined'
-    ? new DOMRect()
-    : { ...emptyDOMRect, toJSON: () => emptyDOMRect };
-}
-
-export function useResizeObserver(element: HTMLElement | null | undefined) {
-  const [rect, setRect] = useState(() => createEmptyDOMRect());
-
-  const maybeUpdate = useCallback(
-    (e: Element) => {
-      const newRect: DOMRect = e.getBoundingClientRect();
-      if (
-        !rect ||
-        rect.bottom !== newRect.bottom ||
-        rect.top !== newRect.top ||
-        rect.left !== newRect.left ||
-        rect.right !== newRect.right ||
-        rect.width !== newRect.width ||
-        rect.height !== newRect.height
-      ) {
-        setRect(newRect);
-      }
-    },
-    [rect],
-  );
-
-  const onScroll = useCallback(() => {
-    if (element) {
-      maybeUpdate(element);
-    }
-  }, [element, maybeUpdate]);
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      if (!Array.isArray(entries) || !entries.length) {
-        return;
-      }
-
-      maybeUpdate(entries[0].target);
-    });
-
-    if (element) {
-      resizeObserver.observe(element);
-      window.addEventListener('scroll', onScroll, true);
-
-      return () => {
-        resizeObserver.unobserve(element);
-        window.removeEventListener('scroll', onScroll, true);
-      };
-    }
-
-    return;
-  }, [element, maybeUpdate, onScroll]);
-
-  return rect;
-}
diff --git a/web-console/src/views/explore-view/utils/get-auto-granularity.ts b/web-console/src/utils/auto-granularity.ts
similarity index 55%
rename from web-console/src/views/explore-view/utils/get-auto-granularity.ts
rename to web-console/src/utils/auto-granularity.ts
index 64acd5002487..09ae6fdc1180 100644
--- a/web-console/src/views/explore-view/utils/get-auto-granularity.ts
+++ b/web-console/src/utils/auto-granularity.ts
@@ -16,12 +16,11 @@
  * limitations under the License.
  */
 
+import { Duration } from 'chronoshift';
 import type { SqlExpression } from 'druid-query-toolkit';
 import { fitFilterPatterns } from 'druid-query-toolkit';
 
-import { Duration } from '../../../utils';
-
-function getTimeSpanInExpression(
+export function getTimeSpanInExpression(
   expression: SqlExpression,
   timeColumnName: string,
 ): number | undefined {
@@ -37,27 +36,52 @@ function getTimeSpanInExpression(
   return;
 }
 
-export function getAutoGranularity(where: SqlExpression, timeColumnName: string): string {
+export const FINE_GRANULARITY_OPTIONS = [
+  'PT1S',
+  'PT2S',
+  'PT5S',
+  'PT15S',
+  'PT30S',
+  'PT1M',
+  'PT2M',
+  'PT5M',
+  'PT15M',
+  'PT30M',
+  'PT1H',
+  'PT3H',
+  'PT6H',
+  'P1D',
+  'P1W',
+  'P1M',
+  'P3M',
+  'P1Y',
+];
+
+const AUTO_GRANULARITY_OPTIONS = FINE_GRANULARITY_OPTIONS.map(s => new Duration(s));
+
+export function getAutoGranularity(
+  where: SqlExpression,
+  timeColumnName: string,
+  maxEntries: number,
+): string {
   const timeSpan = getTimeSpanInExpression(where, timeColumnName);
   if (!timeSpan) return 'P1D';
-  return Duration.pickSmallestGranularityThatFits(
-    [
-      'PT1S',
-      'PT5S',
-      'PT20S',
-      'PT1M',
-      'PT5M',
-      'PT20M',
-      'PT1H',
-      'PT3H',
-      'PT6H',
-      'P1D',
-      'P1W',
-      'P1M',
-      'P3M',
-      'P1Y',
-    ].map(s => new Duration(s)),
-    timeSpan,
-    200,
-  ).toString();
+  return pickSmallestGranularityThatFits(AUTO_GRANULARITY_OPTIONS, timeSpan, maxEntries).toString();
+}
+
+/**
+ * Picks the first granularity that will produce no more than maxEntities to fill the given span
+ * @param granularities - granularities to try in sorted from small to large
+ * @param span - the span to fit in ms
+ * @param maxEntities - the number of entities not to exceed
+ */
+export function pickSmallestGranularityThatFits(
+  granularities: Duration[],
+  span: number,
+  maxEntities: number,
+): Duration {
+  for (const granularity of granularities) {
+    if (span / granularity.getCanonicalLength() < maxEntities) return granularity;
+  }
+  return granularities[granularities.length - 1];
 }
diff --git a/web-console/src/utils/base64-url.spec.ts b/web-console/src/utils/base64-url.spec.ts
index e509779f4aef..faccbfffb221 100644
--- a/web-console/src/utils/base64-url.spec.ts
+++ b/web-console/src/utils/base64-url.spec.ts
@@ -16,8 +16,12 @@
  * limitations under the License.
  */
 
+import { TextDecoder, TextEncoder } from 'util';
+
 import { base64UrlDecode, base64UrlEncode } from './base64-url';
 
+Object.assign(global, { TextDecoder, TextEncoder });
+
 describe('base64-url', () => {
   it('works in simple case', () => {
     const originalString = 'Hello, World!';
@@ -28,8 +32,17 @@ describe('base64-url', () => {
     expect(decoded).toEqual(originalString);
   });
 
+  it('works outside of latin1', () => {
+    const originalString = 'Chodzież_שלום';
+    const encoded = base64UrlEncode(originalString);
+    expect(encoded).toEqual('Q2hvZHppZcW8X9ep15zXlded');
+
+    const decoded = base64UrlDecode(encoded);
+    expect(decoded).toEqual(originalString);
+  });
+
   it('works for all ascii chars', () => {
-    for (let c = 0; c < 256; c++) {
+    for (let c = 0; c < 1e3; c++) {
       const originalString = String.fromCharCode(c);
       const encoded = base64UrlEncode(originalString);
       const decoded = base64UrlDecode(encoded);
diff --git a/web-console/src/utils/base64-url.ts b/web-console/src/utils/base64-url.ts
index d93b9ff48970..93202ed8c1a8 100644
--- a/web-console/src/utils/base64-url.ts
+++ b/web-console/src/utils/base64-url.ts
@@ -17,18 +17,34 @@
  */
 
 export function base64UrlEncode(input: string): string {
-  const base64 = btoa(input); // Encode to base64
-  return base64
+  return base64Encode(input) // Encode to base64
     .replace(/\+/g, '-') // Replace '+' with '-'
     .replace(/\//g, '_') // Replace '/' with '_'
     .replace(/=+$/, ''); // Remove any trailing '='
 }
 
 export function base64UrlDecode(input: string): string {
-  const base64 = input
-    .replace(/-/g, '+') // Replace '-' with '+'
-    .replace(/_/g, '/'); // Replace '_' with '/'
+  return base64Decode(
+    padEndWithEquals(
+      input
+        .replace(/-/g, '+') // Replace '-' with '+'
+        .replace(/_/g, '/'), // Replace '_' with '/'
+    ),
+  );
+}
+
+function base64Encode(data: string): string {
+  const bytes = new TextEncoder().encode(data);
+  const binString = String.fromCodePoint(...bytes);
+  return btoa(binString);
+}
+
+function base64Decode(base64: string): string {
+  const binString = atob(base64);
+  const bytes = Uint8Array.from(binString.split('').map(m => m.codePointAt(0)!));
+  return new TextDecoder().decode(bytes);
+}
 
-  // Add padding '=' if necessary
-  return atob(base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), '=')); // Decode from base64
+function padEndWithEquals(input: string): string {
+  return input.padEnd(input.length + ((4 - (input.length % 4)) % 4), '=');
 }
diff --git a/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil-utc.spec.ts b/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil-utc.spec.ts
deleted file mode 100755
index 5ba63b04468f..000000000000
--- a/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil-utc.spec.ts
+++ /dev/null
@@ -1,169 +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 { shifters } from './date-floor-shift-ceil';
-
-function pairwise<T>(array: T[], callback: (t1: T, t2: T) => void) {
-  for (let i = 0; i < array.length - 1; i++) {
-    callback(array[i], array[i + 1]);
-  }
-}
-
-describe('floor, shift, ceil (UTC)', () => {
-  const tz = 'Etc/UTC';
-
-  it('moves seconds', () => {
-    const dates: Date[] = [
-      new Date('2012-11-04T00:00:00Z'),
-      new Date('2012-11-04T00:00:03Z'),
-      new Date('2012-11-04T00:00:06Z'),
-      new Date('2012-11-04T00:00:09Z'),
-      new Date('2012-11-04T00:00:12Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.second.shift(d1, tz, 3)).toEqual(d2));
-  });
-
-  it('rounds minutes', () => {
-    expect(shifters.minute.round(new Date('2012-11-04T00:29:00Z'), 15, tz)).toEqual(
-      new Date('2012-11-04T00:15:00Z'),
-    );
-
-    expect(shifters.minute.round(new Date('2012-11-04T00:29:00Z'), 4, tz)).toEqual(
-      new Date('2012-11-04T00:28:00Z'),
-    );
-  });
-
-  it('moves minutes', () => {
-    const dates: Date[] = [
-      new Date('2012-11-04T00:00:00Z'),
-      new Date('2012-11-04T00:03:00Z'),
-      new Date('2012-11-04T00:06:00Z'),
-      new Date('2012-11-04T00:09:00Z'),
-      new Date('2012-11-04T00:12:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.minute.shift(d1, tz, 3)).toEqual(d2));
-  });
-
-  it('floors hour correctly', () => {
-    expect(shifters.hour.floor(new Date('2012-11-04T00:30:00Z'), tz)).toEqual(
-      new Date('2012-11-04T00:00:00Z'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T01:30:00Z'), tz)).toEqual(
-      new Date('2012-11-04T01:00:00Z'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T01:30:00Z'), tz)).toEqual(
-      new Date('2012-11-04T01:00:00Z'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T02:30:00Z'), tz)).toEqual(
-      new Date('2012-11-04T02:00:00Z'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T03:30:00Z'), tz)).toEqual(
-      new Date('2012-11-04T03:00:00Z'),
-    );
-  });
-
-  it('moves hour', () => {
-    const dates: Date[] = [
-      new Date('2012-11-04T00:00:00Z'),
-      new Date('2012-11-04T01:00:00Z'),
-      new Date('2012-11-04T02:00:00Z'),
-      new Date('2012-11-04T03:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.hour.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('moves day', () => {
-    const dates: Date[] = [
-      new Date('2012-11-03T00:00:00Z'),
-      new Date('2012-11-04T00:00:00Z'),
-      new Date('2012-11-05T00:00:00Z'),
-      new Date('2012-11-06T00:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.day.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('ceils day', () => {
-    let d1 = new Date('2014-12-11T22:11:57.469Z');
-    let d2 = new Date('2014-12-12T00:00:00.000Z');
-    expect(shifters.day.ceil(d1, tz)).toEqual(d2);
-
-    d1 = new Date('2014-12-08T00:00:00.000Z');
-    d2 = new Date('2014-12-08T00:00:00.000Z');
-    expect(shifters.day.ceil(d1, tz)).toEqual(d2);
-  });
-
-  it('moves week', () => {
-    const dates: Date[] = [
-      new Date('2012-10-29T00:00:00Z'),
-      new Date('2012-11-05T00:00:00Z'),
-      new Date('2012-11-12T00:00:00Z'),
-      new Date('2012-11-19T00:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.week.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('floors week correctly', () => {
-    let d1 = new Date('2014-12-11T22:11:57.469Z');
-    let d2 = new Date('2014-12-08T00:00:00.000Z');
-    expect(shifters.week.floor(d1, tz)).toEqual(d2);
-
-    d1 = new Date('2014-12-07T12:11:57.469Z');
-    d2 = new Date('2014-12-01T00:00:00.000Z');
-    expect(shifters.week.floor(d1, tz)).toEqual(d2);
-  });
-
-  it('ceils week correctly', () => {
-    let d1 = new Date('2014-12-11T22:11:57.469Z');
-    let d2 = new Date('2014-12-15T00:00:00.000Z');
-    expect(shifters.week.ceil(d1, tz)).toEqual(d2);
-
-    d1 = new Date('2014-12-07T12:11:57.469Z');
-    d2 = new Date('2014-12-08T00:00:00.000Z');
-    expect(shifters.week.ceil(d1, tz)).toEqual(d2);
-  });
-
-  it('moves month', () => {
-    const dates: Date[] = [
-      new Date('2012-11-01T00:00:00Z'),
-      new Date('2012-12-01T00:00:00Z'),
-      new Date('2013-01-01T00:00:00Z'),
-      new Date('2013-02-01T00:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.month.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('shifts month on the 31st', () => {
-    const d1 = new Date('2016-03-31T00:00:00.000Z');
-    const d2 = new Date('2016-05-01T00:00:00.000Z');
-    expect(shifters.month.shift(d1, tz, 1)).toEqual(d2);
-  });
-
-  it('moves year', () => {
-    const dates: Date[] = [
-      new Date('2010-01-01T00:00:00Z'),
-      new Date('2011-01-01T00:00:00Z'),
-      new Date('2012-01-01T00:00:00Z'),
-      new Date('2013-01-01T00:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.year.shift(d1, tz, 1)).toEqual(d2));
-  });
-});
diff --git a/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.spec.ts b/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.spec.ts
deleted file mode 100755
index 1612c9ce5792..000000000000
--- a/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.spec.ts
+++ /dev/null
@@ -1,181 +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 { shifters } from './date-floor-shift-ceil';
-
-function pairwise<T>(array: T[], callback: (t1: T, t2: T) => void) {
-  for (let i = 0; i < array.length - 1; i++) {
-    callback(array[i], array[i + 1]);
-  }
-}
-
-describe('floor/shift/ceil', () => {
-  const tz = 'America/Los_Angeles';
-
-  it('shifts seconds', () => {
-    const dates: Date[] = [
-      new Date('2012-11-04T00:00:00-07:00'),
-      new Date('2012-11-04T00:00:03-07:00'),
-      new Date('2012-11-04T00:00:06-07:00'),
-      new Date('2012-11-04T00:00:09-07:00'),
-      new Date('2012-11-04T00:00:12-07:00'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.second.shift(d1, tz, 3)).toEqual(d2));
-  });
-
-  it('shifts minutes', () => {
-    const dates: Date[] = [
-      new Date('2012-11-04T00:00:00-07:00'),
-      new Date('2012-11-04T00:03:00-07:00'),
-      new Date('2012-11-04T00:06:00-07:00'),
-      new Date('2012-11-04T00:09:00-07:00'),
-      new Date('2012-11-04T00:12:00-07:00'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.minute.shift(d1, tz, 3)).toEqual(d2));
-  });
-
-  it('floors hour correctly', () => {
-    expect(shifters.hour.floor(new Date('2012-11-04T00:30:00-07:00'), tz)).toEqual(
-      new Date('2012-11-04T00:00:00-07:00'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T01:30:00-07:00'), tz)).toEqual(
-      new Date('2012-11-04T01:00:00-07:00'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T01:30:00-08:00'), tz)).toEqual(
-      new Date('2012-11-04T01:00:00-07:00'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T02:30:00-08:00'), tz)).toEqual(
-      new Date('2012-11-04T02:00:00-08:00'),
-    );
-
-    expect(shifters.hour.floor(new Date('2012-11-04T03:30:00-08:00'), tz)).toEqual(
-      new Date('2012-11-04T03:00:00-08:00'),
-    );
-  });
-
-  it('shifting 24 hours over DST is not the same as shifting a day', () => {
-    const start = new Date('2012-11-04T07:00:00Z');
-
-    const shift1Day = shifters.day.shift(start, tz, 1);
-    const shift24Hours = shifters.hour.shift(start, tz, 24);
-
-    expect(shift1Day).toEqual(new Date('2012-11-05T08:00:00Z'));
-    expect(shift24Hours).toEqual(new Date('2012-11-05T07:00:00Z'));
-  });
-
-  it('shifts hour over DST 1', () => {
-    const dates: Date[] = [
-      new Date('2012-11-04T00:00:00-07:00'),
-      new Date('2012-11-04T08:00:00Z'),
-      new Date('2012-11-04T09:00:00Z'),
-      new Date('2012-11-04T10:00:00Z'),
-      new Date('2012-11-04T11:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.hour.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('floors hour over DST 1', () => {
-    expect(shifters.hour.floor(new Date('2012-11-04T00:05:00-07:00'), tz)).toEqual(
-      new Date('2012-11-04T00:00:00-07:00'),
-    );
-    expect(shifters.hour.floor(new Date('2012-11-04T01:05:00-07:00'), tz)).toEqual(
-      new Date('2012-11-04T01:00:00-07:00'),
-    );
-    expect(shifters.hour.floor(new Date('2012-11-04T02:05:00-07:00'), tz)).toEqual(
-      new Date('2012-11-04T01:00:00-07:00'),
-    );
-    expect(shifters.hour.floor(new Date('2012-11-04T03:05:00-07:00'), tz)).toEqual(
-      new Date('2012-11-04T03:00:00-07:00'),
-    );
-  });
-
-  it('shifts hour over DST 2', () => {
-    // "2018-03-11T09:00:00Z"
-    const dates: Date[] = [
-      new Date('2018-03-11T01:00:00-07:00'),
-      new Date('2018-03-11T09:00:00Z'),
-      new Date('2018-03-11T10:00:00Z'),
-      new Date('2018-03-11T11:00:00Z'),
-      new Date('2018-03-11T12:00:00Z'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.hour.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('shifts day over DST', () => {
-    const dates: Date[] = [
-      new Date('2012-11-03T00:00:00-07:00'),
-      new Date('2012-11-04T00:00:00-07:00'),
-      new Date('2012-11-05T00:00:00-08:00'),
-      new Date('2012-11-06T00:00:00-08:00'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.day.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('shifts week over DST', () => {
-    const dates: Date[] = [
-      new Date('2012-10-29T00:00:00-07:00'),
-      new Date('2012-11-05T00:00:00-08:00'),
-      new Date('2012-11-12T00:00:00-08:00'),
-      new Date('2012-11-19T00:00:00-08:00'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.week.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('floors week correctly', () => {
-    let d1 = new Date('2014-12-11T22:11:57.469Z');
-    let d2 = new Date('2014-12-08T08:00:00.000Z');
-    expect(shifters.week.floor(d1, tz)).toEqual(d2);
-
-    d1 = new Date('2014-12-07T12:11:57.469Z');
-    d2 = new Date('2014-12-01T08:00:00.000Z');
-    expect(shifters.week.floor(d1, tz)).toEqual(d2);
-  });
-
-  it('ceils week correctly', () => {
-    let d1 = new Date('2014-12-11T22:11:57.469Z');
-    let d2 = new Date('2014-12-15T08:00:00.000Z');
-    expect(shifters.week.ceil(d1, tz)).toEqual(d2);
-
-    d1 = new Date('2014-12-07T12:11:57.469Z');
-    d2 = new Date('2014-12-08T08:00:00.000Z');
-    expect(shifters.week.ceil(d1, tz)).toEqual(d2);
-  });
-
-  it('shifts month over DST', () => {
-    const dates: Date[] = [
-      new Date('2012-11-01T00:00:00-07:00'),
-      new Date('2012-12-01T00:00:00-08:00'),
-      new Date('2013-01-01T00:00:00-08:00'),
-      new Date('2013-02-01T00:00:00-08:00'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.month.shift(d1, tz, 1)).toEqual(d2));
-  });
-
-  it('shifts year', () => {
-    const dates: Date[] = [
-      new Date('2010-01-01T00:00:00-08:00'),
-      new Date('2011-01-01T00:00:00-08:00'),
-      new Date('2012-01-01T00:00:00-08:00'),
-      new Date('2013-01-01T00:00:00-08:00'),
-    ];
-    pairwise(dates, (d1, d2) => expect(shifters.year.shift(d1, tz, 1)).toEqual(d2));
-  });
-});
diff --git a/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.ts b/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.ts
deleted file mode 100755
index 3306b05267d9..000000000000
--- a/web-console/src/utils/date-floor-shift-ceil/date-floor-shift-ceil.ts
+++ /dev/null
@@ -1,296 +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 { fromDate, startOfWeek } from '@internationalized/date';
-
-export type AlignFn = (dt: Date, tz: string) => Date;
-
-export type ShiftFn = (dt: Date, tz: string, step: number) => Date;
-
-export type RoundFn = (dt: Date, roundTo: number, tz: string) => Date;
-
-export interface TimeShifterNoCeil {
-  canonicalLength: number;
-  siblings?: number;
-  floor: AlignFn;
-  round: RoundFn;
-  shift: ShiftFn;
-}
-
-export interface TimeShifter extends TimeShifterNoCeil {
-  ceil: AlignFn;
-}
-
-function isUTC(tz: string): boolean {
-  return tz === 'Etc/UTC';
-}
-
-function adjustDay(day: number): number {
-  return (day + 6) % 7;
-}
-
-function floorTo(n: number, roundTo: number): number {
-  return Math.floor(n / roundTo) * roundTo;
-}
-
-function timeShifterFiller(tm: TimeShifterNoCeil): TimeShifter {
-  const { floor, shift } = tm;
-  return {
-    ...tm,
-    ceil: (dt: Date, tz: string) => {
-      const floored = floor(dt, tz);
-      if (floored.valueOf() === dt.valueOf()) return dt; // Just like ceil(3) is 3 and not 4
-      return shift(floored, tz, 1);
-    },
-  };
-}
-
-export const second = timeShifterFiller({
-  canonicalLength: 1000,
-  siblings: 60,
-  floor: (dt, _tz) => {
-    // Seconds do not actually need a timezone because all timezones align on seconds... for now...
-    dt = new Date(dt.valueOf());
-    dt.setUTCMilliseconds(0);
-    return dt;
-  },
-  round: (dt, roundTo, _tz) => {
-    const cur = dt.getUTCSeconds();
-    const adj = floorTo(cur, roundTo);
-    if (cur !== adj) dt.setUTCSeconds(adj);
-    return dt;
-  },
-  shift: (dt, _tz, step) => {
-    dt = new Date(dt.valueOf());
-    dt.setUTCSeconds(dt.getUTCSeconds() + step);
-    return dt;
-  },
-});
-
-export const minute = timeShifterFiller({
-  canonicalLength: 60000,
-  siblings: 60,
-  floor: (dt, _tz) => {
-    // Minutes do not actually need a timezone because all timezones align on minutes... for now...
-    dt = new Date(dt.valueOf());
-    dt.setUTCSeconds(0, 0);
-    return dt;
-  },
-  round: (dt, roundTo, _tz) => {
-    const cur = dt.getUTCMinutes();
-    const adj = floorTo(cur, roundTo);
-    if (cur !== adj) dt.setUTCMinutes(adj);
-    return dt;
-  },
-  shift: (dt, _tz, step) => {
-    dt = new Date(dt.valueOf());
-    dt.setUTCMinutes(dt.getUTCMinutes() + step);
-    return dt;
-  },
-});
-
-// Movement by hour is tz independent because in every timezone an hour is 60 min
-function hourMove(dt: Date, _tz: string, step: number) {
-  dt = new Date(dt.valueOf());
-  dt.setUTCHours(dt.getUTCHours() + step);
-  return dt;
-}
-
-export const hour = timeShifterFiller({
-  canonicalLength: 3600000,
-  siblings: 24,
-  floor: (dt, tz) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCMinutes(0, 0, 0);
-      return dt;
-    } else {
-      return fromDate(dt, tz).set({ second: 0, minute: 0, millisecond: 0 }).toDate();
-    }
-  },
-  round: (dt, roundTo, tz) => {
-    if (isUTC(tz)) {
-      const cur = dt.getUTCHours();
-      const adj = floorTo(cur, roundTo);
-      if (cur !== adj) dt.setUTCHours(adj);
-    } else {
-      const cur = fromDate(dt, tz).hour;
-      const adj = floorTo(cur, roundTo);
-      if (cur !== adj) return hourMove(dt, tz, adj - cur);
-    }
-    return dt;
-  },
-  shift: hourMove,
-});
-
-export const day = timeShifterFiller({
-  canonicalLength: 24 * 3600000,
-  floor: (dt, tz) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCHours(0, 0, 0, 0);
-      return dt;
-    } else {
-      return fromDate(dt, tz).set({ hour: 0, second: 0, minute: 0, millisecond: 0 }).toDate();
-    }
-  },
-  shift: (dt, tz, step) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCDate(dt.getUTCDate() + step);
-      return dt;
-    } else {
-      return fromDate(dt, tz).add({ days: step }).toDate();
-    }
-  },
-  round: () => {
-    throw new Error('missing day round');
-  },
-});
-
-export const week = timeShifterFiller({
-  canonicalLength: 7 * 24 * 3600000,
-  floor: (dt, tz) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCHours(0, 0, 0, 0);
-      dt.setUTCDate(dt.getUTCDate() - adjustDay(dt.getUTCDay()));
-    } else {
-      const zd = fromDate(dt, tz);
-      return startOfWeek(
-        zd.set({ hour: 0, second: 0, minute: 0, millisecond: 0 }),
-        'fr-FR', // We want the week to start on Monday
-      ).toDate();
-    }
-    return dt;
-  },
-  shift: (dt, tz, step) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCDate(dt.getUTCDate() + step * 7);
-      return dt;
-    } else {
-      return fromDate(dt, tz).add({ weeks: step }).toDate();
-    }
-  },
-  round: () => {
-    throw new Error('missing week round');
-  },
-});
-
-function monthShift(dt: Date, tz: string, step: number) {
-  if (isUTC(tz)) {
-    dt = new Date(dt.valueOf());
-    dt.setUTCMonth(dt.getUTCMonth() + step);
-    return dt;
-  } else {
-    return fromDate(dt, tz).add({ months: step }).toDate();
-  }
-}
-
-export const month = timeShifterFiller({
-  canonicalLength: 30 * 24 * 3600000,
-  siblings: 12,
-  floor: (dt, tz) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCHours(0, 0, 0, 0);
-      dt.setUTCDate(1);
-      return dt;
-    } else {
-      return fromDate(dt, tz)
-        .set({ day: 1, hour: 0, second: 0, minute: 0, millisecond: 0 })
-        .toDate();
-    }
-  },
-  round: (dt, roundTo, tz) => {
-    if (isUTC(tz)) {
-      const cur = dt.getUTCMonth();
-      const adj = floorTo(cur, roundTo);
-      if (cur !== adj) dt.setUTCMonth(adj);
-    } else {
-      const cur = fromDate(dt, tz).month - 1; // Needs to be zero indexed
-      const adj = floorTo(cur, roundTo);
-      if (cur !== adj) return monthShift(dt, tz, adj - cur);
-    }
-    return dt;
-  },
-  shift: monthShift,
-});
-
-function yearShift(dt: Date, tz: string, step: number) {
-  if (isUTC(tz)) {
-    dt = new Date(dt.valueOf());
-    dt.setUTCFullYear(dt.getUTCFullYear() + step);
-    return dt;
-  } else {
-    return fromDate(dt, tz).add({ years: step }).toDate();
-  }
-}
-
-export const year = timeShifterFiller({
-  canonicalLength: 365 * 24 * 3600000,
-  siblings: 1000,
-  floor: (dt, tz) => {
-    if (isUTC(tz)) {
-      dt = new Date(dt.valueOf());
-      dt.setUTCHours(0, 0, 0, 0);
-      dt.setUTCMonth(0, 1);
-      return dt;
-    } else {
-      return fromDate(dt, tz)
-        .set({ month: 1, day: 1, hour: 0, second: 0, minute: 0, millisecond: 0 })
-        .toDate();
-    }
-  },
-  round: (dt, roundTo, tz) => {
-    if (isUTC(tz)) {
-      const cur = dt.getUTCFullYear();
-      const adj = floorTo(cur, roundTo);
-      if (cur !== adj) dt.setUTCFullYear(adj);
-    } else {
-      const cur = fromDate(dt, tz).year;
-      const adj = floorTo(cur, roundTo);
-      if (cur !== adj) return yearShift(dt, tz, adj - cur);
-    }
-    return dt;
-  },
-  shift: yearShift,
-});
-
-export interface Shifters {
-  second: TimeShifter;
-  minute: TimeShifter;
-  hour: TimeShifter;
-  day: TimeShifter;
-  week: TimeShifter;
-  month: TimeShifter;
-  year: TimeShifter;
-
-  [key: string]: TimeShifter;
-}
-
-export const shifters: Shifters = {
-  second,
-  minute,
-  hour,
-  day,
-  week,
-  month,
-  year,
-};
diff --git a/web-console/src/utils/date-format.ts b/web-console/src/utils/date-format.ts
new file mode 100644
index 000000000000..a5e6b96bfdf2
--- /dev/null
+++ b/web-console/src/utils/date-format.ts
@@ -0,0 +1,72 @@
+/*
+ * 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 type { Duration } from 'chronoshift';
+
+import { prettyFormatIsoDate } from './date';
+
+export function formatStartDuration(start: Date, duration: Duration): string {
+  let sliceLength;
+  const { singleSpan } = duration;
+  switch (singleSpan) {
+    case 'year':
+      sliceLength = 4;
+      break;
+
+    case 'month':
+      sliceLength = 7;
+      break;
+
+    case 'day':
+      sliceLength = 10;
+      break;
+
+    case 'hour':
+      sliceLength = 13;
+      break;
+
+    case 'minute':
+      sliceLength = 16;
+      break;
+
+    default:
+      sliceLength = 19;
+      break;
+  }
+
+  return `${start.toISOString().slice(0, sliceLength).replace('T', ' ')}/${duration.toString(
+    true,
+  )}`;
+}
+
+export function formatIsoDateRange(start: Date, end: Date): string {
+  let startStr = prettyFormatIsoDate(start);
+  let endStr = prettyFormatIsoDate(end);
+
+  if (start.getMinutes() === 0 && end.getMinutes() === 0) {
+    startStr = startStr.slice(0, 16);
+    endStr = endStr.slice(0, 16);
+  }
+
+  const startDate = startStr.slice(0, 10);
+  if (startDate === endStr.slice(0, 10)) {
+    return `${startDate}, ${startStr.slice(11)} → ${endStr.slice(11)}`;
+  } else {
+    return `${startStr} → ${endStr}`;
+  }
+}
diff --git a/web-console/src/utils/duration/duration.spec.ts b/web-console/src/utils/duration/duration.spec.ts
deleted file mode 100755
index 8b20ac0a6b2a..000000000000
--- a/web-console/src/utils/duration/duration.spec.ts
+++ /dev/null
@@ -1,505 +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 { Duration } from './duration';
-
-describe('Duration', () => {
-  const TZ_LA = 'America/Los_Angeles';
-  const TZ_JUNEAU = 'America/Juneau';
-
-  describe('errors', () => {
-    it('throws error if invalid duration', () => {
-      expect(() => new Duration('')).toThrow("Can not parse duration ''");
-
-      expect(() => new Duration('P00')).toThrow("Can not parse duration 'P00'");
-
-      expect(() => new Duration('P')).toThrow('Duration can not be empty');
-
-      expect(() => new Duration('P0YT0H')).toThrow('Duration can not be empty');
-
-      expect(() => new Duration('P0W').shift(new Date(), TZ_LA)).toThrow(
-        'Duration can not have empty weeks',
-      );
-
-      expect(() => new Duration('P0Y0MT0H0M0S').shift(new Date(), TZ_LA)).toThrow(
-        'Duration can not be empty',
-      );
-    });
-
-    it('throws error if fromJS is not given a string', () => {
-      expect(() => new Duration(new Date() as any)).toThrow('Duration can not be empty');
-    });
-  });
-
-  describe('#toString', () => {
-    it('gives back the correct string', () => {
-      let durationStr: string;
-
-      durationStr = 'P3Y';
-      expect(new Duration(durationStr).toString()).toEqual(durationStr);
-
-      durationStr = 'P2W';
-      expect(new Duration(durationStr).toString()).toEqual(durationStr);
-
-      durationStr = 'PT5H';
-      expect(new Duration(durationStr).toString()).toEqual(durationStr);
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).toString()).toEqual(durationStr);
-    });
-
-    it('eliminates 0', () => {
-      expect(new Duration('P0DT15H').toString()).toEqual('PT15H');
-    });
-  });
-
-  describe('fromCanonicalLength', () => {
-    it('handles zero', () => {
-      expect(() => {
-        Duration.fromCanonicalLength(0);
-      }).toThrow('length must be positive');
-    });
-
-    it('works 1', () => {
-      expect(Duration.fromCanonicalLength(86400000).toString()).toEqual('P1D');
-    });
-
-    it('works 2', () => {
-      const len =
-        new Date('2018-03-01T00:00:00Z').valueOf() - new Date('2016-02-22T00:00:00Z').valueOf();
-      expect(Duration.fromCanonicalLength(len).toString()).toEqual('P2Y8D');
-    });
-
-    it('works 3', () => {
-      const len =
-        new Date('2018-09-15T00:00:00Z').valueOf() - new Date('2018-09-04T00:00:00Z').valueOf();
-      expect(Duration.fromCanonicalLength(len).toString()).toEqual('P11D');
-    });
-
-    it('works with months', () => {
-      expect(Duration.fromCanonicalLength(2592000000).toString()).toEqual('P1M');
-      expect(Duration.fromCanonicalLength(2678400000).toString()).toEqual('P1M1D');
-    });
-
-    it('works without months', () => {
-      expect(Duration.fromCanonicalLength(2592000000, true).toString()).toEqual('P30D');
-      expect(Duration.fromCanonicalLength(2678400000, true).toString()).toEqual('P31D');
-    });
-  });
-
-  describe('construct from span', () => {
-    it('parses days over DST', () => {
-      expect(
-        Duration.fromRange(
-          new Date('2012-10-29T00:00:00-07:00'),
-          new Date('2012-11-05T00:00:00-08:00'),
-          TZ_LA,
-        ).toString(),
-      ).toEqual('P7D');
-
-      expect(
-        Duration.fromRange(
-          new Date('2012-10-29T00:00:00-07:00'),
-          new Date('2012-11-12T00:00:00-08:00'),
-          TZ_LA,
-        ).toString(),
-      ).toEqual('P14D');
-    });
-
-    it('parses complex case', () => {
-      expect(
-        Duration.fromRange(
-          new Date('2012-10-29T00:00:00-07:00'),
-          new Date(new Date('2012-11-05T00:00:00-08:00').valueOf() - 1000),
-          TZ_LA,
-        ).toString(),
-      ).toEqual('P6DT24H59M59S');
-
-      expect(
-        Duration.fromRange(
-          new Date('2012-01-01T00:00:00-08:00'),
-          new Date('2013-03-04T04:05:06-08:00'),
-          TZ_LA,
-        ).toString(),
-      ).toEqual('P1Y2M3DT4H5M6S');
-    });
-  });
-
-  describe('#isFloorable', () => {
-    const floorable = 'P1Y P5Y P10Y P100Y P1M P2M P3M P4M P1D'.split(' ');
-    for (const v of floorable) {
-      it(`works on floorable ${v}`, () => {
-        expect(new Duration(v).isFloorable()).toEqual(true);
-      });
-    }
-
-    const unfloorable = 'P1Y1M P5M P2D P3D'.split(' ');
-    for (const v of unfloorable) {
-      it(`works on not floorable ${v}`, () => {
-        expect(new Duration(v).isFloorable()).toEqual(false);
-      });
-    }
-  });
-
-  describe('#floor', () => {
-    it('throws error if complex duration', () => {
-      expect(() => new Duration('P1Y2D').floor(new Date(), TZ_LA)).toThrow(
-        'Can not floor on a complex duration',
-      );
-
-      expect(() => new Duration('P3DT15H').floor(new Date(), TZ_LA)).toThrow(
-        'Can not floor on a complex duration',
-      );
-
-      expect(() => new Duration('PT5H').floor(new Date(), TZ_LA)).toThrow(
-        'Can not floor on a hour duration that does not divide into 24',
-      );
-    });
-
-    it('works for year', () => {
-      const p1y = new Duration('P1Y');
-      expect(p1y.floor(new Date('2013-09-29T01:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-01-01T00:00:00.000-08:00'),
-      );
-    });
-
-    it('works for PT2M', () => {
-      const pt2h = new Duration('PT2M');
-      expect(pt2h.floor(new Date('2013-09-29T03:03:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-09-29T03:02:00.000-07:00'),
-      );
-    });
-
-    it('works for P2H', () => {
-      const pt2h = new Duration('PT2H');
-      expect(pt2h.floor(new Date('2013-09-29T03:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-09-29T02:00:00.000-07:00'),
-      );
-    });
-
-    it('works for PT12H', () => {
-      const pt12h = new Duration('PT12H');
-      expect(pt12h.floor(new Date('2015-09-12T13:05:00-08:00'), TZ_JUNEAU)).toEqual(
-        new Date('2015-09-12T12:00:00-08:00'),
-      );
-    });
-
-    it('works for P1W', () => {
-      const p1w = new Duration('P1W');
-
-      expect(p1w.floor(new Date('2013-09-29T01:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-09-23T07:00:00.000Z'),
-      );
-
-      expect(p1w.floor(new Date('2013-10-03T01:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-09-30T00:00:00.000-07:00'),
-      );
-    });
-
-    it('works for P3M', () => {
-      const p3m = new Duration('P3M');
-      expect(p3m.floor(new Date('2013-09-29T03:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-07-01T00:00:00.000-07:00'),
-      );
-
-      expect(p3m.floor(new Date('2013-02-29T03:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2013-01-01T00:00:00.000-08:00'),
-      );
-    });
-
-    it('works for P4Y', () => {
-      const p4y = new Duration('P4Y');
-      expect(p4y.floor(new Date('2013-09-29T03:02:03.456-07:00'), TZ_LA)).toEqual(
-        new Date('2012-01-01T00:00:00.000-08:00'),
-      );
-    });
-  });
-
-  describe('#shift', () => {
-    it('works for weeks', () => {
-      let p1w = new Duration('P1W');
-      expect(p1w.shift(new Date('2012-10-29T00:00:00-07:00'), TZ_LA)).toEqual(
-        new Date('2012-11-05T00:00:00-08:00'),
-      );
-
-      p1w = new Duration('P1W');
-      expect(p1w.shift(new Date('2012-10-29T00:00:00-07:00'), TZ_LA, 2)).toEqual(
-        new Date('2012-11-12T00:00:00-08:00'),
-      );
-
-      const p2w = new Duration('P2W');
-      expect(p2w.shift(new Date('2012-10-29T05:16:17-07:00'), TZ_LA)).toEqual(
-        new Date('2012-11-12T05:16:17-08:00'),
-      );
-    });
-
-    it('works for general complex case', () => {
-      const pComplex = new Duration('P1Y2M3DT4H5M6S');
-      expect(pComplex.shift(new Date('2012-01-01T00:00:00-08:00'), TZ_LA)).toEqual(
-        new Date('2013-03-04T04:05:06-08:00'),
-      );
-    });
-  });
-
-  describe('#materialize', () => {
-    it('works for weeks', () => {
-      const p1w = new Duration('P1W');
-
-      expect(
-        p1w.materialize(
-          new Date('2012-10-29T00:00:00-07:00'),
-          new Date('2012-12-01T00:00:00-08:00'),
-          TZ_LA,
-        ),
-      ).toEqual([
-        new Date('2012-10-29T07:00:00.000Z'),
-        new Date('2012-11-05T08:00:00.000Z'),
-        new Date('2012-11-12T08:00:00.000Z'),
-        new Date('2012-11-19T08:00:00.000Z'),
-        new Date('2012-11-26T08:00:00.000Z'),
-      ]);
-
-      expect(
-        p1w.materialize(
-          new Date('2012-10-29T00:00:00-07:00'),
-          new Date('2012-12-01T00:00:00-08:00'),
-          TZ_LA,
-          2,
-        ),
-      ).toEqual([
-        new Date('2012-10-29T07:00:00.000Z'),
-        new Date('2012-11-12T08:00:00.000Z'),
-        new Date('2012-11-26T08:00:00.000Z'),
-      ]);
-    });
-  });
-
-  describe('#isAligned', () => {
-    it('works for weeks', () => {
-      const p1w = new Duration('P1W');
-      expect(p1w.isAligned(new Date('2012-10-29T00:00:00-07:00'), TZ_LA)).toEqual(true);
-      expect(p1w.isAligned(new Date('2012-10-29T00:00:00-07:00'), 'Etc/UTC')).toEqual(false);
-    });
-  });
-
-  describe('#dividesBy', () => {
-    const divisible = 'P5Y/P1Y P1D/P1D P1M/P1D P1W/P1D P1D/PT6H PT3H/PT1H'.split(' ');
-    for (const v of divisible) {
-      it(`works for ${v} (true)`, () => {
-        const p = v.split('/');
-        expect(new Duration(p[0]).dividesBy(new Duration(p[1]))).toEqual(true);
-      });
-    }
-
-    const undivisible = 'P1D/P1M PT5H/PT1H'.split(' ');
-    for (const v of undivisible) {
-      it(`works for ${v} (false)`, () => {
-        const p = v.split('/');
-        expect(new Duration(p[0]).dividesBy(new Duration(p[1]))).toEqual(false);
-      });
-    }
-  });
-
-  describe('#getCanonicalLength', () => {
-    it('gives back the correct canonical length', () => {
-      let durationStr: string;
-
-      durationStr = 'P3Y';
-      expect(new Duration(durationStr).getCanonicalLength()).toEqual(94608000000);
-
-      durationStr = 'P2W';
-      expect(new Duration(durationStr).getCanonicalLength()).toEqual(1209600000);
-
-      durationStr = 'PT5H';
-      expect(new Duration(durationStr).getCanonicalLength()).toEqual(18000000);
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getCanonicalLength()).toEqual(313200000);
-    });
-  });
-
-  describe('#add()', () => {
-    it('works with a simple duration', () => {
-      const d1 = new Duration('P1D');
-      const d2 = new Duration('P1D');
-
-      expect(d1.add(d2).toString()).toEqual('P2D');
-    });
-
-    it('works with heterogeneous spans', () => {
-      const d1 = new Duration('P1D');
-      const d2 = new Duration('P1Y');
-
-      expect(d1.add(d2).toString()).toEqual('P1Y1D');
-    });
-
-    it('works with weeks', () => {
-      let d1 = new Duration('P1W');
-      let d2 = new Duration('P2W');
-      expect(d1.add(d2).toString()).toEqual('P3W');
-
-      d1 = new Duration('P6D');
-      d2 = new Duration('P1D');
-      expect(d1.add(d2).toString()).toEqual('P1W');
-    });
-  });
-
-  describe('#subtract()', () => {
-    it('works with a simple duration', () => {
-      const d1 = new Duration('P1DT2H');
-      const d2 = new Duration('PT1H');
-
-      expect(d1.subtract(d2).toString()).toEqual('P1DT1H');
-    });
-
-    it('works with a less simple duration', () => {
-      const d1 = new Duration('P1D');
-      const d2 = new Duration('PT1H');
-
-      expect(d1.subtract(d2).toString()).toEqual('PT23H');
-    });
-
-    it('works with weeks', () => {
-      const d1 = new Duration('P1W');
-      const d2 = new Duration('P1D');
-
-      expect(d1.subtract(d2).toString()).toEqual('P6D');
-    });
-
-    it('throws an error if result is going to be negative', () => {
-      const d1 = new Duration('P1D');
-      const d2 = new Duration('P2D');
-
-      expect(() => d1.subtract(d2)).toThrow();
-    });
-  });
-
-  describe('#multiply()', () => {
-    it('works with a simple duration', () => {
-      const d = new Duration('P1D');
-      expect(d.multiply(5).toString()).toEqual('P5D');
-    });
-
-    it('works with a less simple duration', () => {
-      const d = new Duration('P1DT2H');
-      expect(d.multiply(2).toString()).toEqual('P2DT4H');
-    });
-
-    it('works with weeks', () => {
-      const d = new Duration('P1W');
-      expect(d.multiply(5).toString()).toEqual('P5W');
-    });
-
-    it('throws an error if result is going to be negative', () => {
-      const d = new Duration('P1D');
-      expect(() => d.multiply(-1)).toThrow('Multiplier must be positive non-zero');
-    });
-
-    it('gets description properly', () => {
-      const d = new Duration('P2D');
-      expect(d.multiply(2).getDescription(true)).toEqual('4 Days');
-    });
-  });
-
-  describe('#getDescription()', () => {
-    it('gives back the correct description', () => {
-      let durationStr: string;
-
-      durationStr = 'P1D';
-      expect(new Duration(durationStr).getDescription()).toEqual('day');
-
-      durationStr = 'P1DT2H';
-      expect(new Duration(durationStr).getDescription()).toEqual('1 day, 2 hours');
-
-      durationStr = 'P3Y';
-      expect(new Duration(durationStr).getDescription()).toEqual('3 years');
-
-      durationStr = 'P2W';
-      expect(new Duration(durationStr).getDescription()).toEqual('2 weeks');
-
-      durationStr = 'PT5H';
-      expect(new Duration(durationStr).getDescription()).toEqual('5 hours');
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getDescription()).toEqual('3 days, 15 hours');
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getDescription(true)).toEqual('3 Days, 15 Hours');
-    });
-  });
-
-  describe('#getSingleSpan()', () => {
-    it('gives back the correct span', () => {
-      let durationStr: string;
-
-      durationStr = 'P1D';
-      expect(new Duration(durationStr).getSingleSpan()).toEqual('day');
-
-      durationStr = 'P3Y';
-      expect(new Duration(durationStr).getSingleSpan()).toEqual('year');
-
-      durationStr = 'P2W';
-      expect(new Duration(durationStr).getSingleSpan()).toEqual('week');
-
-      durationStr = 'PT5H';
-      expect(new Duration(durationStr).getSingleSpan()).toEqual('hour');
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getSingleSpan()).toBeUndefined();
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getSingleSpan()).toBeUndefined();
-    });
-  });
-
-  describe('#getSingleSpanValue()', () => {
-    it('gives back the correct span value', () => {
-      let durationStr: string;
-
-      durationStr = 'P1D';
-      expect(new Duration(durationStr).getSingleSpanValue()).toEqual(1);
-
-      durationStr = 'P3Y';
-      expect(new Duration(durationStr).getSingleSpanValue()).toEqual(3);
-
-      durationStr = 'P2W';
-      expect(new Duration(durationStr).getSingleSpanValue()).toEqual(2);
-
-      durationStr = 'PT5H';
-      expect(new Duration(durationStr).getSingleSpanValue()).toEqual(5);
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getSingleSpanValue()).toBeUndefined();
-
-      durationStr = 'P3DT15H';
-      expect(new Duration(durationStr).getSingleSpanValue()).toBeUndefined();
-    });
-  });
-
-  describe('#limitToDays', () => {
-    it('works', () => {
-      expect(new Duration('P6D').limitToDays().toString()).toEqual('P6D');
-
-      expect(new Duration('P1M').limitToDays().toString()).toEqual('P30D');
-
-      expect(new Duration('P1Y').limitToDays().toString()).toEqual('P365D');
-
-      expect(new Duration('P1Y2M').limitToDays().toString()).toEqual('P425D');
-    });
-  });
-});
diff --git a/web-console/src/utils/duration/duration.ts b/web-console/src/utils/duration/duration.ts
deleted file mode 100755
index bc7236821f12..000000000000
--- a/web-console/src/utils/duration/duration.ts
+++ /dev/null
@@ -1,388 +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 { second, shifters } from '../date-floor-shift-ceil/date-floor-shift-ceil';
-import { capitalizeFirst, pluralIfNeeded } from '../general';
-
-export const TZ_UTC = 'Etc/UTC';
-
-export type DurationSpan = 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second';
-
-const SPANS_WITH_WEEK: DurationSpan[] = [
-  'year',
-  'month',
-  'week',
-  'day',
-  'hour',
-  'minute',
-  'second',
-];
-const SPANS_WITHOUT_WEEK: DurationSpan[] = ['year', 'month', 'day', 'hour', 'minute', 'second'];
-const SPANS_WITHOUT_WEEK_OR_MONTH: DurationSpan[] = ['year', 'day', 'hour', 'minute', 'second'];
-const SPANS_UP_TO_DAY: DurationSpan[] = ['day', 'hour', 'minute', 'second'];
-
-export type DurationValue = Partial<Record<DurationSpan, number>>;
-
-const periodWeekRegExp = /^P(\d+)W$/;
-const periodRegExp = /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/;
-//                     P   (year ) (month   ) (day     )    T(hour    ) (minute  ) (second  )
-
-function getSpansFromString(durationStr: string): DurationValue {
-  const spans: DurationValue = {};
-  let matches: RegExpExecArray | null;
-  if ((matches = periodWeekRegExp.exec(durationStr))) {
-    spans.week = Number(matches[1]);
-    if (!spans.week) throw new Error('Duration can not have empty weeks');
-  } else if ((matches = periodRegExp.exec(durationStr))) {
-    const nums = matches.map(Number);
-    for (let i = 0; i < SPANS_WITHOUT_WEEK.length; i++) {
-      const span = SPANS_WITHOUT_WEEK[i];
-      const value = nums[i + 1];
-      if (value) spans[span] = value;
-    }
-  } else {
-    throw new Error("Can not parse duration '" + durationStr + "'");
-  }
-  return spans;
-}
-
-function getSpansFromStartEnd(start: Date, end: Date, timezone: string): DurationValue {
-  start = second.floor(start, timezone);
-  end = second.floor(end, timezone);
-  if (end <= start) throw new Error('start must come before end');
-
-  const spans: DurationValue = {};
-  let iterator: Date = start;
-  for (let i = 0; i < SPANS_WITHOUT_WEEK.length; i++) {
-    const span = SPANS_WITHOUT_WEEK[i];
-    let spanCount = 0;
-
-    // Shortcut
-    const length = end.valueOf() - iterator.valueOf();
-    const canonicalLength: number = shifters[span].canonicalLength;
-    if (length < canonicalLength / 4) continue;
-    const numberToFit = Math.min(0, Math.floor(length / canonicalLength) - 1);
-    let iteratorMove: Date;
-    if (numberToFit > 0) {
-      // try to skip by numberToFit
-      iteratorMove = shifters[span].shift(iterator, timezone, numberToFit);
-      if (iteratorMove <= end) {
-        spanCount += numberToFit;
-        iterator = iteratorMove;
-      }
-    }
-
-    while (true) {
-      iteratorMove = shifters[span].shift(iterator, timezone, 1);
-      if (iteratorMove <= end) {
-        iterator = iteratorMove;
-        spanCount++;
-      } else {
-        break;
-      }
-    }
-
-    if (spanCount) {
-      spans[span] = spanCount;
-    }
-  }
-  return spans;
-}
-
-function removeZeros(spans: DurationValue): DurationValue {
-  const newSpans: DurationValue = {};
-  for (let i = 0; i < SPANS_WITH_WEEK.length; i++) {
-    const span = SPANS_WITH_WEEK[i];
-    if (Number(spans[span]) > 0) {
-      newSpans[span] = spans[span];
-    }
-  }
-  return newSpans;
-}
-
-function fitIntoSpans(length: number, spansToCheck: DurationSpan[]): DurationValue {
-  const spans: DurationValue = {};
-
-  let lengthLeft = length;
-  for (let i = 0; i < spansToCheck.length; i++) {
-    const span = spansToCheck[i];
-    const spanLength = shifters[span].canonicalLength;
-    const count = Math.floor(lengthLeft / spanLength);
-
-    if (count) {
-      lengthLeft -= spanLength * count;
-      spans[span] = count;
-    }
-  }
-
-  return spans;
-}
-
-/**
- * Represents an ISO duration like P1DT3H
- */
-export class Duration {
-  public readonly singleSpan?: DurationSpan;
-  public readonly spans: Readonly<DurationValue>;
-
-  static fromCanonicalLength(length: number, skipMonths = false): Duration {
-    if (length <= 0) throw new Error('length must be positive');
-    let spans = fitIntoSpans(length, skipMonths ? SPANS_WITHOUT_WEEK_OR_MONTH : SPANS_WITHOUT_WEEK);
-
-    if (
-      length % shifters['week'].canonicalLength === 0 && // Weeks fits
-      (Object.keys(spans).length > 1 || // We already have a more complex span
-        spans['day']) // or... we only have days and it might be simpler to express as weeks
-    ) {
-      spans = { week: length / shifters['week'].canonicalLength };
-    }
-
-    return new Duration(spans);
-  }
-
-  static fromCanonicalLengthUpToDays(length: number): Duration {
-    if (length <= 0) throw new Error('length must be positive');
-    return new Duration(fitIntoSpans(length, SPANS_UP_TO_DAY));
-  }
-
-  static fromRange(start: Date, end: Date, timezone: string): Duration {
-    return new Duration(getSpansFromStartEnd(start, end, timezone));
-  }
-
-  static pickSmallestGranularityThatFits(
-    granularities: Duration[],
-    span: number,
-    maxEntities: number,
-  ): Duration {
-    for (const granularity of granularities) {
-      if (span / granularity.getCanonicalLength() < maxEntities) return granularity;
-    }
-    return granularities[granularities.length - 1];
-  }
-
-  constructor(spans: DurationValue | string) {
-    const effectiveSpans: DurationValue =
-      typeof spans === 'string' ? getSpansFromString(spans) : removeZeros(spans);
-
-    const usedSpans = Object.keys(effectiveSpans) as DurationSpan[];
-    if (!usedSpans.length) throw new Error('Duration can not be empty');
-    if (usedSpans.length === 1) {
-      this.singleSpan = usedSpans[0];
-    } else if (effectiveSpans.week) {
-      throw new Error("Can not mix 'week' and other spans");
-    }
-    this.spans = effectiveSpans;
-  }
-
-  public toString() {
-    const strArr: string[] = ['P'];
-    const spans = this.spans;
-    if (spans.week) {
-      strArr.push(String(spans.week), 'W');
-    } else {
-      let addedT = false;
-      for (let i = 0; i < SPANS_WITHOUT_WEEK.length; i++) {
-        const span = SPANS_WITHOUT_WEEK[i];
-        const value = spans[span];
-        if (!value) continue;
-        if (!addedT && i >= 3) {
-          strArr.push('T');
-          addedT = true;
-        }
-        strArr.push(String(value), span[0].toUpperCase());
-      }
-    }
-    return strArr.join('');
-  }
-
-  public add(duration: Duration): Duration {
-    return Duration.fromCanonicalLength(this.getCanonicalLength() + duration.getCanonicalLength());
-  }
-
-  public subtract(duration: Duration): Duration {
-    const newCanonicalDuration = this.getCanonicalLength() - duration.getCanonicalLength();
-    if (newCanonicalDuration < 0) throw new Error('A duration can not be negative.');
-    return Duration.fromCanonicalLength(newCanonicalDuration);
-  }
-
-  public multiply(multiplier: number): Duration {
-    if (multiplier <= 0) throw new Error('Multiplier must be positive non-zero');
-    if (multiplier === 1) return this;
-    const newCanonicalDuration = this.getCanonicalLength() * multiplier;
-    return Duration.fromCanonicalLength(newCanonicalDuration);
-  }
-
-  public valueOf() {
-    return this.spans;
-  }
-
-  public equals(other: Duration | undefined): boolean {
-    return other instanceof Duration && this.toString() === other.toString();
-  }
-
-  public isSimple(): boolean {
-    const { singleSpan } = this;
-    if (!singleSpan) return false;
-    return this.spans[singleSpan] === 1;
-  }
-
-  public isFloorable(): boolean {
-    const { singleSpan } = this;
-    if (!singleSpan) return false;
-    const span = Number(this.spans[singleSpan]);
-    if (span === 1) return true;
-    const { siblings } = shifters[singleSpan];
-    if (!siblings) return false;
-    return siblings % span === 0;
-  }
-
-  /**
-   * Floors the date according to this duration.
-   * @param date The date to floor
-   * @param timezone The timezone within which to floor
-   */
-  public floor(date: Date, timezone: string): Date {
-    const { singleSpan } = this;
-    if (!singleSpan) throw new Error('Can not floor on a complex duration');
-    const span = this.spans[singleSpan]!;
-    const mover = shifters[singleSpan];
-    let dt = mover.floor(date, timezone);
-    if (span !== 1) {
-      if (!mover.siblings) {
-        throw new Error(`Can not floor on a ${singleSpan} duration that is not 1`);
-      }
-      if (mover.siblings % span !== 0) {
-        throw new Error(
-          `Can not floor on a ${singleSpan} duration that does not divide into ${mover.siblings}`,
-        );
-      }
-      dt = mover.round(dt, span, timezone);
-    }
-    return dt;
-  }
-
-  /**
-   * Moves the given date by 'step' times of the duration
-   * Negative step value will move back in time.
-   * @param date The date to move
-   * @param timezone The timezone within which to make the move
-   * @param step The number of times to step by the duration
-   */
-  public shift(date: Date, timezone: string, step = 1): Date {
-    const spans = this.spans;
-    for (const span of SPANS_WITH_WEEK) {
-      const value = spans[span];
-      if (value) date = shifters[span].shift(date, timezone, step * value);
-    }
-    return date;
-  }
-
-  public ceil(date: Date, timezone: string): Date {
-    const floored = this.floor(date, timezone);
-    if (floored.valueOf() === date.valueOf()) return date; // Just like ceil(3) is 3 and not 4
-    return this.shift(floored, timezone, 1);
-  }
-
-  public round(date: Date, timezone: string): Date {
-    const floorDate = this.floor(date, timezone);
-    const ceilDate = this.ceil(date, timezone);
-    const distanceToFloor = Math.abs(date.valueOf() - floorDate.valueOf());
-    const distanceToCeil = Math.abs(date.valueOf() - ceilDate.valueOf());
-    return distanceToFloor < distanceToCeil ? floorDate : ceilDate;
-  }
-
-  /**
-   * Materializes all the values of this duration form start to end
-   * @param start The date to start on
-   * @param end The date to start on
-   * @param timezone The timezone within which to materialize
-   * @param step The number of times to step by the duration
-   */
-  public materialize(start: Date, end: Date, timezone: string, step = 1): Date[] {
-    const values: Date[] = [];
-    let iter = this.floor(start, timezone);
-    while (iter <= end) {
-      values.push(iter);
-      iter = this.shift(iter, timezone, step);
-    }
-    return values;
-  }
-
-  /**
-   * Checks to see if date is aligned to this duration within the timezone (floors to itself)
-   * @param date The date to check
-   * @param timezone The timezone within which to make the check
-   */
-  public isAligned(date: Date, timezone: string): boolean {
-    return this.floor(date, timezone).valueOf() === date.valueOf();
-  }
-
-  /**
-   * Check to see if this duration can be divided by the given duration
-   * @param smaller The smaller duration to divide by
-   */
-  public dividesBy(smaller: Duration): boolean {
-    const myCanonicalLength = this.getCanonicalLength();
-    const smallerCanonicalLength = smaller.getCanonicalLength();
-    return (
-      myCanonicalLength % smallerCanonicalLength === 0 &&
-      this.isFloorable() &&
-      smaller.isFloorable()
-    );
-  }
-
-  public getCanonicalLength(): number {
-    const spans = this.spans;
-    let length = 0;
-    for (const span of SPANS_WITH_WEEK) {
-      const value = spans[span];
-      if (value) length += value * shifters[span].canonicalLength;
-    }
-    return length;
-  }
-
-  public getDescription(capitalize?: boolean): string {
-    const spans = this.spans;
-    const description: string[] = [];
-    for (const span of SPANS_WITH_WEEK) {
-      const value = spans[span];
-      const spanTitle = capitalize ? capitalizeFirst(span) : span;
-      if (value) {
-        if (value === 1 && this.singleSpan) {
-          description.push(spanTitle);
-        } else {
-          description.push(pluralIfNeeded(value, spanTitle));
-        }
-      }
-    }
-    return description.join(', ');
-  }
-
-  public getSingleSpan(): string | undefined {
-    return this.singleSpan;
-  }
-
-  public getSingleSpanValue(): number | undefined {
-    if (!this.singleSpan) return;
-    return this.spans[this.singleSpan];
-  }
-
-  public limitToDays(): Duration {
-    return Duration.fromCanonicalLengthUpToDays(this.getCanonicalLength());
-  }
-}
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index d128d47f3462..9aefb5631f7a 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -194,9 +194,9 @@ export function mapRecord<T, Q>(
   return newRecord;
 }
 
-export function mapRecordIfChanged<T>(
+export function mapRecordOrReturn<T>(
   record: Record<string, T>,
-  fn: (value: T, key: string) => T,
+  fn: (value: T, key: string) => T | undefined,
 ): Record<string, T> {
   const newRecord: Record<string, T> = {};
   let changed = false;
@@ -433,7 +433,10 @@ export function filterMap<T, Q>(xs: readonly T[], f: (x: T, i: number) => Q | un
   return xs.map(f).filter((x: Q | undefined) => typeof x !== 'undefined') as Q[];
 }
 
-export function filterMapIfChanged<T>(xs: T[], f: (x: T, i: number) => T | undefined): T[] {
+export function filterMapOrReturn<T>(
+  xs: readonly T[],
+  f: (x: T, i: number) => T | undefined,
+): readonly T[] {
   let changed = false;
   const newXs = filterMap(xs, (x, i) => {
     const newX = f(x, i);
@@ -443,6 +446,11 @@ export function filterMapIfChanged<T>(xs: T[], f: (x: T, i: number) => T | undef
   return changed ? newXs : xs;
 }
 
+export function filterOrReturn<T>(xs: readonly T[], f: (x: T, i: number) => unknown): readonly T[] {
+  const newXs = xs.filter(f);
+  return newXs.length === xs.length ? xs : newXs;
+}
+
 export function findMap<T, Q>(
   xs: readonly T[],
   f: (x: T, i: number) => Q | undefined,
@@ -638,8 +646,8 @@ export function hasOverlayOpen(): boolean {
   return Boolean(document.querySelector(OVERLAY_OPEN_SELECTOR));
 }
 
-export function checkedCircleIcon(checked: boolean): IconName {
-  return checked ? IconNames.TICK_CIRCLE : IconNames.CIRCLE;
+export function checkedCircleIcon(checked: boolean, exclude?: boolean): IconName {
+  return checked ? (exclude ? IconNames.CROSS_CIRCLE : IconNames.TICK_CIRCLE) : IconNames.CIRCLE;
 }
 
 export function tickIcon(checked: boolean): IconName {
@@ -674,3 +682,7 @@ export function offsetToRowColumn(str: string, offset: number): RowColumn | unde
 
   return;
 }
+
+export function xor(a: unknown, b: unknown): boolean {
+  return Boolean(a ? !b : b);
+}
diff --git a/web-console/src/utils/index.tsx b/web-console/src/utils/index.tsx
index e9fb3a2a5a59..b562bce51500 100644
--- a/web-console/src/utils/index.tsx
+++ b/web-console/src/utils/index.tsx
@@ -16,15 +16,15 @@
  * limitations under the License.
  */
 
+export * from './auto-granularity';
 export * from './base64-url';
 export * from './column-metadata';
 export * from './date';
-export * from './date-floor-shift-ceil/date-floor-shift-ceil';
+export * from './date-format';
 export * from './download';
 export * from './download-query-detail-archive';
 export * from './druid-lookup';
 export * from './druid-query';
-export * from './duration/duration';
 export * from './formatter';
 export * from './general';
 export * from './local-storage-backed-visibility';
@@ -35,6 +35,7 @@ export * from './query-action';
 export * from './query-manager';
 export * from './sanitizers';
 export * from './sql';
+export * from './stage';
 export * from './table-helpers';
 export * from './types';
 export * from './values-query';
diff --git a/web-console/src/utils/mouse-tooltip/mouse-tooltip.ts b/web-console/src/utils/mouse-tooltip/mouse-tooltip.ts
index bbea90508901..56ce18e6bc61 100644
--- a/web-console/src/utils/mouse-tooltip/mouse-tooltip.ts
+++ b/web-console/src/utils/mouse-tooltip/mouse-tooltip.ts
@@ -36,22 +36,6 @@ function findDataTooltip(element: HTMLElement): string | undefined {
 export function initMouseTooltip() {
   let tooltipDiv: HTMLDivElement | undefined;
 
-  // Mouse move handler to follow the mouse
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!tooltipDiv) return;
-
-    tooltipDiv.style.left = `${clamp(
-      event.pageX + OFFSET_X,
-      0,
-      window.innerWidth - tooltipDiv.offsetWidth,
-    )}px`;
-    tooltipDiv.style.top = `${clamp(
-      event.pageY + OFFSET_Y,
-      0,
-      window.innerHeight - tooltipDiv.offsetHeight,
-    )}px`;
-  };
-
   // Mouse over handler to show the tooltip for elements with the appropriate attribute
   const handleMouseOver = (event: MouseEvent) => {
     const title = findDataTooltip(event.target as HTMLElement);
@@ -60,14 +44,25 @@ export function initMouseTooltip() {
         tooltipDiv = document.createElement('div');
         tooltipDiv.className = 'mouse-tooltip';
         document.body.appendChild(tooltipDiv);
-        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mousemove', handleMouseOver);
       }
       if (tooltipDiv.innerText !== title) {
         tooltipDiv.innerText = title;
-        handleMouseMove(event); // Position the div as it might be the first positioning
       }
+
+      // Position the tooltip
+      tooltipDiv.style.left = `${clamp(
+        event.pageX + OFFSET_X,
+        0,
+        window.innerWidth - tooltipDiv.offsetWidth,
+      )}px`;
+      tooltipDiv.style.top = `${clamp(
+        event.pageY + OFFSET_Y,
+        0,
+        window.innerHeight - tooltipDiv.offsetHeight,
+      )}px`;
     } else if (tooltipDiv) {
-      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mousemove', handleMouseOver);
       tooltipDiv.remove();
       tooltipDiv = undefined;
     }
diff --git a/web-console/src/utils/stage.ts b/web-console/src/utils/stage.ts
index 7b65cfebd9cb..ce7791c69110 100644
--- a/web-console/src/utils/stage.ts
+++ b/web-console/src/utils/stage.ts
@@ -42,4 +42,19 @@ export class Stage {
       this.height - margin.top - margin.bottom,
     );
   }
+
+  public isInvalid(): boolean {
+    return this.width <= 0 || this.height <= 0;
+  }
+
+  public toWidthHeight() {
+    return {
+      width: this.width,
+      height: this.height,
+    };
+  }
+
+  public toViewBox(): string {
+    return `0 0 ${this.width} ${this.height}`;
+  }
 }
diff --git a/web-console/src/views/explore-view/components/filter-pane/column-value/column-value.scss b/web-console/src/views/explore-view/components/column-value/column-value.scss
similarity index 100%
rename from web-console/src/views/explore-view/components/filter-pane/column-value/column-value.scss
rename to web-console/src/views/explore-view/components/column-value/column-value.scss
diff --git a/web-console/src/views/explore-view/components/filter-pane/column-value/column-value.tsx b/web-console/src/views/explore-view/components/column-value/column-value.tsx
similarity index 84%
rename from web-console/src/views/explore-view/components/filter-pane/column-value/column-value.tsx
rename to web-console/src/views/explore-view/components/column-value/column-value.tsx
index 30fe85785991..b70323b45cd2 100644
--- a/web-console/src/views/explore-view/components/filter-pane/column-value/column-value.tsx
+++ b/web-console/src/views/explore-view/components/column-value/column-value.tsx
@@ -16,6 +16,10 @@
  * limitations under the License.
  */
 
+import { isDate } from 'date-fns';
+
+import { prettyFormatIsoDateWithMsIfNeeded } from '../../../../utils';
+
 import './column-value.scss';
 
 export interface ColumnValueProps {
@@ -29,6 +33,8 @@ export const ColumnValue = function ColumnValue(props: ColumnValueProps) {
     return <span className="column-value empty">empty</span>;
   } else if (value === null) {
     return <span className="column-value null">null</span>;
+  } else if (isDate(value)) {
+    return <span className="column-value date">{prettyFormatIsoDateWithMsIfNeeded(value)}</span>;
   }
 
   return <span className="column-value">{String(value)}</span>;
diff --git a/web-console/src/views/explore-view/components/control-pane/control-pane.scss b/web-console/src/views/explore-view/components/control-pane/control-pane.scss
index c1608cdbf865..510b51b6399f 100644
--- a/web-console/src/views/explore-view/components/control-pane/control-pane.scss
+++ b/web-console/src/views/explore-view/components/control-pane/control-pane.scss
@@ -19,6 +19,11 @@
 @import '../../../../variables';
 
 .control-pane {
+  &.compact {
+    display: flex;
+    gap: 10px;
+  }
+
   .#{$bp-ns}-tag-input-values .#{$bp-ns}-tag {
     vertical-align: top;
   }
diff --git a/web-console/src/views/explore-view/components/control-pane/control-pane.tsx b/web-console/src/views/explore-view/components/control-pane/control-pane.tsx
index d93aefb634ab..f9d2345c9644 100644
--- a/web-console/src/views/explore-view/components/control-pane/control-pane.tsx
+++ b/web-console/src/views/explore-view/components/control-pane/control-pane.tsx
@@ -27,6 +27,7 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import classNames from 'classnames';
 import type { Column, SqlExpression } from 'druid-query-toolkit';
 import { SqlColumn } from 'druid-query-toolkit';
 import type { JSX } from 'react';
@@ -40,13 +41,7 @@ import {
 import { AppToaster } from '../../../../singletons';
 import { filterMap } from '../../../../utils';
 import type { OptionValue, ParameterDefinition, QuerySource } from '../../models';
-import {
-  effectiveParameterDefault,
-  evaluateFunctor,
-  ExpressionMeta,
-  getModuleOptionLabel,
-  Measure,
-} from '../../models';
+import { evaluateFunctor, ExpressionMeta, getModuleOptionLabel, Measure } from '../../models';
 import { changeOrAdd } from '../../utils';
 import { DroppableContainer } from '../droppable-container/droppable-container';
 
@@ -59,9 +54,11 @@ import './control-pane.scss';
 
 export interface ControlPaneProps {
   querySource: QuerySource | undefined;
+  where: SqlExpression;
   onUpdateParameterValues(params: Record<string, unknown>): void;
   parameters: Record<string, ParameterDefinition>;
   parameterValues: Record<string, unknown>;
+  compact?: boolean;
   onAddToSourceQueryAsColumn?(expression: SqlExpression): void;
   onAddToSourceQueryAsMeasure?(measure: Measure): void;
 }
@@ -69,9 +66,11 @@ export interface ControlPaneProps {
 export const ControlPane = function ControlPane(props: ControlPaneProps) {
   const {
     querySource,
+    where,
     onUpdateParameterValues,
     parameters,
     parameterValues,
+    compact,
     onAddToSourceQueryAsColumn,
     onAddToSourceQueryAsMeasure,
   } = props;
@@ -87,14 +86,13 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
     onDropColumn?: (column: Column) => void;
     onDropMeasure?: (measure: Measure) => void;
   } {
-    const effectiveValue = value ?? effectiveParameterDefault(parameter, querySource);
-    const required = evaluateFunctor(parameter.required, parameterValues);
+    const required = evaluateFunctor(parameter.required, parameterValues, querySource, where);
     switch (parameter.type) {
       case 'boolean': {
         return {
           element: (
             <SegmentedControl
-              value={String(effectiveValue)}
+              value={String(value)}
               onValueChange={v => {
                 onValueChange(v === 'true');
               }}
@@ -112,7 +110,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
         return {
           element: (
             <FancyNumericInput
-              value={effectiveValue}
+              value={value}
               onValueChange={onValueChange}
               placeholder={parameter.placeholder}
               fill
@@ -126,7 +124,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
         return {
           element: (
             <InputGroup
-              value={(effectiveValue as string) || ''}
+              value={(value as string) || ''}
               onChange={e => onValueChange(e.target.value)}
               placeholder={parameter.placeholder}
               fill
@@ -135,10 +133,9 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
         };
 
       case 'option': {
-        const controlOptions = parameter.options || [];
-        const selectedOption: OptionValue | undefined = controlOptions.find(
-          o => o === effectiveValue,
-        );
+        const controlOptions =
+          evaluateFunctor(parameter.options, parameterValues, querySource, where) || [];
+        const selectedOption: OptionValue | undefined = controlOptions.find(o => o === value);
         return {
           element: (
             <Popover
@@ -160,7 +157,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
               <InputGroup
                 value={
                   typeof selectedOption === 'undefined'
-                    ? String(effectiveValue)
+                    ? `Unknown option: ${value}`
                     : getModuleOptionLabel(selectedOption, parameter)
                 }
                 readOnly
@@ -173,11 +170,13 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
       }
 
       case 'options': {
+        const controlOptions =
+          evaluateFunctor(parameter.options, parameterValues, querySource, where) || [];
         return {
           element: (
             <OptionsInput
-              options={parameter.options || []}
-              value={(effectiveValue as OptionValue[]) || []}
+              options={controlOptions}
+              value={(value as OptionValue[]) || []}
               onValueChange={onValueChange}
               optionLabel={o => getModuleOptionLabel(o, parameter)}
               allowDuplicates={parameter.allowDuplicates}
@@ -195,7 +194,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
           element: (
             <NamedExpressionsInput<ExpressionMeta>
               allowReordering
-              values={effectiveValue ? [effectiveValue] : []}
+              values={value ? [value] : []}
               onValuesChange={vs => onValueChange(vs[0])}
               singleton
               nonEmpty={required}
@@ -217,7 +216,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
       case 'expressions': {
         const disabledColumnNames = parameter.allowDuplicates
           ? []
-          : filterMap(effectiveValue as ExpressionMeta[], ({ expression }) =>
+          : filterMap(value as ExpressionMeta[], ({ expression }) =>
               expression instanceof SqlColumn ? expression.getName() : undefined,
             );
 
@@ -225,16 +224,14 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
           element: (
             <NamedExpressionsInput<ExpressionMeta>
               allowReordering
-              values={effectiveValue as ExpressionMeta[]}
+              values={value as ExpressionMeta[]}
               onValuesChange={onValueChange}
               nonEmpty={parameter.nonEmpty}
               itemMenu={(initExpression, onClose) => (
                 <ExpressionMenu
                   columns={columns}
                   initExpression={initExpression}
-                  onSelectExpression={c =>
-                    onValueChange(changeOrAdd(effectiveValue, initExpression, c))
-                  }
+                  onSelectExpression={c => onValueChange(changeOrAdd(value, initExpression, c))}
                   disabledColumnNames={disabledColumnNames}
                   onClose={onClose}
                   onAddToSourceQueryAsColumn={onAddToSourceQueryAsColumn}
@@ -246,7 +243,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
             const columnName = column.name;
             if (
               !parameter.allowDuplicates &&
-              effectiveValue.find((v: ExpressionMeta) => v.name === columnName)
+              value.find((v: ExpressionMeta) => v.name === columnName)
             ) {
               AppToaster.show({
                 intent: Intent.WARNING,
@@ -258,7 +255,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
               });
               return;
             }
-            onValueChange(effectiveValue.concat(ExpressionMeta.fromColumn(column)));
+            onValueChange(value.concat(ExpressionMeta.fromColumn(column)));
           },
         };
       }
@@ -267,7 +264,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
         return {
           element: (
             <NamedExpressionsInput<Measure>
-              values={effectiveValue ? [effectiveValue] : []}
+              values={value ? [value] : []}
               onValuesChange={vs => onValueChange(vs[0])}
               singleton
               nonEmpty={required}
@@ -285,7 +282,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
           ),
           onDropColumn: column => {
             const candidateMeasures = Measure.getPossibleMeasuresForColumn(column).filter(
-              p => !effectiveValue || effectiveValue.name !== p.name,
+              p => !value || value.name !== p.name,
             );
             if (!candidateMeasures.length) return;
             onValueChange(candidateMeasures[0]);
@@ -297,12 +294,12 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
       case 'measures': {
         const disabledMeasureNames = parameter.allowDuplicates
           ? []
-          : filterMap(effectiveValue as Measure[], measure => measure.getAggregateMeasureName());
+          : filterMap(value as Measure[], measure => measure.getAggregateMeasureName());
 
         return {
           element: (
             <NamedExpressionsInput<Measure>
-              values={effectiveValue}
+              values={value}
               onValuesChange={onValueChange}
               allowReordering
               nonEmpty={parameter.nonEmpty}
@@ -312,7 +309,7 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
                   measures={measures}
                   initMeasure={initMeasure}
                   disabledMeasureNames={disabledMeasureNames}
-                  onSelectMeasure={m => onValueChange(changeOrAdd(effectiveValue, initMeasure, m))}
+                  onSelectMeasure={m => onValueChange(changeOrAdd(value, initMeasure, m))}
                   onClose={onClose}
                   onAddToSourceQueryAsMeasure={onAddToSourceQueryAsMeasure}
                 />
@@ -321,13 +318,13 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
           ),
           onDropColumn: column => {
             const candidateMeasures = Measure.getPossibleMeasuresForColumn(column).filter(
-              p => !effectiveValue.some((v: Measure) => v.name === p.name),
+              p => !value.some((v: Measure) => v.name === p.name),
             );
             if (!candidateMeasures.length) return;
-            onValueChange(effectiveValue.concat(candidateMeasures[0]));
+            onValueChange(value.concat(candidateMeasures[0]));
           },
           onDropMeasure: measure => {
-            onValueChange(effectiveValue.concat(measure));
+            onValueChange(value.concat(measure));
           },
         };
       }
@@ -349,10 +346,12 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
   const namedParameters = Object.entries(parameters ?? {});
 
   return (
-    <div className="control-pane">
+    <div className={classNames('control-pane', { compact })}>
       {namedParameters.map(([name, parameter], i) => {
-        const visible = evaluateFunctor(parameter.visible, parameterValues);
-        if (visible === false) return;
+        const visible = evaluateFunctor(parameter.visible, parameterValues, querySource, where);
+        const defined = evaluateFunctor(parameter.defined, parameterValues, querySource, where);
+        if (visible === false || defined === false) return;
+        if (compact && !parameter.important) return;
 
         const value = parameterValues[name];
 
@@ -366,13 +365,17 @@ export const ControlPane = function ControlPane(props: ControlPaneProps) {
           onValueChange,
         );
 
-        const description = evaluateFunctor(parameter.description, parameterValues);
+        const label =
+          evaluateFunctor(parameter.label, parameterValues, querySource, where) ||
+          AutoForm.makeLabelName(name);
+        const description = compact
+          ? undefined
+          : evaluateFunctor(parameter.description, parameterValues, querySource, where);
         const formGroup = (
           <FormGroupWithInfo
             key={i}
-            label={
-              evaluateFunctor(parameter.label, parameterValues) || AutoForm.makeLabelName(name)
-            }
+            label={label}
+            inline={compact}
             info={description && <PopoverText>{description}</PopoverText>}
           >
             {element}
diff --git a/web-console/src/views/explore-view/components/control-pane/named-expressions-input.tsx b/web-console/src/views/explore-view/components/control-pane/named-expressions-input.tsx
index faef4f6c8e7b..b306d2880e11 100644
--- a/web-console/src/views/explore-view/components/control-pane/named-expressions-input.tsx
+++ b/web-console/src/views/explore-view/components/control-pane/named-expressions-input.tsx
@@ -124,7 +124,7 @@ export const NamedExpressionsInput = function NamedExpressionsInput<
                 'drop-before': dropIndex === i && dropBefore,
                 'drop-after': dropIndex === i && !dropBefore,
               })}
-              title={`Expression: ${c.expression}`}
+              data-tooltip={`Expression: ${c.expression}`}
               interactive
               onClick={() => setMenuOpenOn({ openOn: c })}
               draggable={allowReordering}
diff --git a/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx b/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
index fdf28d34b8d6..b3b6892bb4bd 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
@@ -18,6 +18,7 @@
 
 import { FormGroup, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import type { CancelToken } from 'axios';
 import type { ContainsFilterPattern, QueryResult, SqlQuery } from 'druid-query-toolkit';
 import { C, F, filterPatternToExpression, SqlExpression } from 'druid-query-toolkit';
 import React, { useMemo } from 'react';
@@ -29,10 +30,10 @@ import './contains-filter-control.scss';
 
 export interface ContainsFilterControlProps {
   querySource: QuerySource;
-  filter: SqlExpression | undefined;
+  filter: SqlExpression;
   filterPattern: ContainsFilterPattern;
   setFilterPattern(filterPattern: ContainsFilterPattern): void;
-  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): Promise<QueryResult>;
 }
 
 export const ContainsFilterControl = React.memo(function ContainsFilterControl(
@@ -62,8 +63,8 @@ export const ContainsFilterControl = React.memo(function ContainsFilterControl(
     query: previewQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async query => {
-      const vs = await runSqlQuery(query);
+    processQuery: async (query, cancelToken) => {
+      const vs = await runSqlQuery(query, cancelToken);
       return (vs.getColumnByName('c') || []).map(String);
     },
   });
diff --git a/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx b/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
index f0b7f21346f0..321a7d1d0ba6 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
@@ -29,6 +29,7 @@ import {
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import type { CancelToken } from 'axios';
 import type {
   Column,
   FilterPattern,
@@ -110,7 +111,8 @@ export interface FilterMenuProps {
   initPattern?: FilterPattern;
   onPatternChange(newPattern: FilterPattern): void;
   onClose(): void;
-  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): Promise<QueryResult>;
+  timeBounds?: [Date, Date];
   onAddToSourceQueryAsColumn?(expression: SqlExpression): void;
   onMoveToSourceQueryAsClause?(expression: SqlExpression): void;
 }
@@ -123,6 +125,7 @@ export const FilterMenu = React.memo(function FilterMenu(props: FilterMenuProps)
     onPatternChange,
     onClose,
     runSqlQuery,
+    timeBounds,
     onAddToSourceQueryAsColumn,
     onMoveToSourceQueryAsClause,
   } = props;
@@ -147,7 +150,7 @@ export const FilterMenu = React.memo(function FilterMenu(props: FilterMenuProps)
       cont = (
         <ValuesFilterControl
           querySource={querySource}
-          filter={filter.removeColumnFromAnd(pattern.column)}
+          filter={filter}
           filterPattern={pattern}
           setFilterPattern={setPattern}
           runSqlQuery={runSqlQuery}
@@ -159,7 +162,7 @@ export const FilterMenu = React.memo(function FilterMenu(props: FilterMenuProps)
       cont = (
         <ContainsFilterControl
           querySource={querySource}
-          filter={filter.removeColumnFromAnd(pattern.column)}
+          filter={filter}
           filterPattern={pattern}
           setFilterPattern={setPattern}
           runSqlQuery={runSqlQuery}
@@ -171,7 +174,7 @@ export const FilterMenu = React.memo(function FilterMenu(props: FilterMenuProps)
       cont = (
         <RegexpFilterControl
           querySource={querySource}
-          filter={filter.removeColumnFromAnd(pattern.column)}
+          filter={filter}
           filterPattern={pattern}
           setFilterPattern={setPattern}
           runSqlQuery={runSqlQuery}
@@ -205,6 +208,7 @@ export const FilterMenu = React.memo(function FilterMenu(props: FilterMenuProps)
           querySource={querySource}
           filterPattern={pattern}
           setFilterPattern={setPattern}
+          timeBounds={timeBounds}
         />
       );
       break;
@@ -300,11 +304,16 @@ export const FilterMenu = React.memo(function FilterMenu(props: FilterMenuProps)
                   <HTMLSelect
                     className="type-selector"
                     value={pattern.type}
-                    onChange={e =>
-                      setPattern(
-                        changeFilterPatternType(pattern, e.target.value as FilterPatternType),
-                      )
-                    }
+                    onChange={e => {
+                      let newPattern = changeFilterPatternType(
+                        pattern,
+                        e.target.value as FilterPatternType,
+                      );
+                      if (newPattern.type === 'timeInterval' && timeBounds) {
+                        newPattern = { ...newPattern, start: timeBounds[0], end: timeBounds[1] };
+                      }
+                      setPattern(newPattern);
+                    }}
                   >
                     {getPattenTypesForColumn(
                       querySource.columns.find(c => c.name === pattern.column),
diff --git a/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx b/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
index b2479bf7022a..23d67ff2ec5a 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
@@ -18,6 +18,7 @@
 
 import { FormGroup, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import type { CancelToken } from 'axios';
 import type { QueryResult, RegexpFilterPattern, SqlQuery } from 'druid-query-toolkit';
 import { C, F, filterPatternToExpression, SqlExpression } from 'druid-query-toolkit';
 import React, { useMemo } from 'react';
@@ -38,10 +39,10 @@ function regexpIssue(possibleRegexp: string): string | undefined {
 
 export interface RegexpFilterControlProps {
   querySource: QuerySource;
-  filter: SqlExpression | undefined;
+  filter: SqlExpression;
   filterPattern: RegexpFilterPattern;
   setFilterPattern(filterPattern: RegexpFilterPattern): void;
-  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): Promise<QueryResult>;
 }
 
 export const RegexpFilterControl = React.memo(function RegexpFilterControl(
@@ -68,8 +69,8 @@ export const RegexpFilterControl = React.memo(function RegexpFilterControl(
     query: previewQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async query => {
-      const vs = await runSqlQuery(query);
+    processQuery: async (query, cancelToken) => {
+      const vs = await runSqlQuery(query, cancelToken);
       return (vs.getColumnByName('c') || []).map(String);
     },
   });
diff --git a/web-console/src/views/explore-view/components/filter-pane/filter-menu/time-relative-filter-control/time-relative-filter-control.tsx b/web-console/src/views/explore-view/components/filter-pane/filter-menu/time-relative-filter-control/time-relative-filter-control.tsx
index 0854a75cd5ee..c1f178b1de1d 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-menu/time-relative-filter-control/time-relative-filter-control.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-menu/time-relative-filter-control/time-relative-filter-control.tsx
@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, FormGroup } from '@blueprintjs/core';
+import { Button, ButtonGroup, Callout, FormGroup } from '@blueprintjs/core';
 import type { TimeRelativeFilterPattern } from 'druid-query-toolkit';
 import React from 'react';
 
+import { prettyFormatIsoDateWithMsIfNeeded } from '../../../../../../utils';
 import type { QuerySource } from '../../../../models';
 
 interface PartialPattern {
@@ -101,12 +102,13 @@ export interface TimeRelativeFilterControlProps {
   querySource: QuerySource;
   filterPattern: TimeRelativeFilterPattern;
   setFilterPattern(filterPattern: TimeRelativeFilterPattern): void;
+  timeBounds?: [Date, Date];
 }
 
 export const TimeRelativeFilterControl = React.memo(function TimeRelativeFilterControl(
   props: TimeRelativeFilterControlProps,
 ) {
-  const { filterPattern, setFilterPattern } = props;
+  const { filterPattern, setFilterPattern, timeBounds } = props;
   const { column, negated } = filterPattern;
 
   const initKey = partialPatternToKey(filterPattern);
@@ -135,6 +137,13 @@ export const TimeRelativeFilterControl = React.memo(function TimeRelativeFilterC
           </ButtonGroup>
         </FormGroup>
       ))}
+      {timeBounds && (
+        <FormGroup>
+          <Callout>{`${prettyFormatIsoDateWithMsIfNeeded(
+            timeBounds[0],
+          )} → ${prettyFormatIsoDateWithMsIfNeeded(timeBounds[1])}`}</Callout>
+        </FormGroup>
+      )}
     </div>
   );
 });
diff --git a/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx b/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
index e19af96c2106..93304f628ae2 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
@@ -18,6 +18,7 @@
 
 import { FormGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import type { CancelToken } from 'axios';
 import type { QueryResult, SqlQuery, ValuesFilterPattern } from 'druid-query-toolkit';
 import { C, F, SqlExpression } from 'druid-query-toolkit';
 import React, { useMemo, useState } from 'react';
@@ -27,16 +28,16 @@ import { useQueryManager } from '../../../../../../hooks';
 import { caseInsensitiveContains, filterMap } from '../../../../../../utils';
 import type { QuerySource } from '../../../../models';
 import { toggle } from '../../../../utils';
-import { ColumnValue } from '../../column-value/column-value';
+import { ColumnValue } from '../../../column-value/column-value';
 
 import './values-filter-control.scss';
 
 export interface ValuesFilterControlProps {
   querySource: QuerySource;
-  filter: SqlExpression | undefined;
+  filter: SqlExpression;
   filterPattern: ValuesFilterPattern;
   setFilterPattern(filterPattern: ValuesFilterPattern): void;
-  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): Promise<QueryResult>;
 }
 
 export const ValuesFilterControl = React.memo(function ValuesFilterControl(
@@ -68,8 +69,8 @@ export const ValuesFilterControl = React.memo(function ValuesFilterControl(
     query: valuesQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async query => {
-      const vs = await runSqlQuery(query);
+    processQuery: async (query, cancelToken) => {
+      const vs = await runSqlQuery(query, cancelToken);
       return vs.getColumnByName('c') || [];
     },
   });
@@ -84,7 +85,7 @@ export const ValuesFilterControl = React.memo(function ValuesFilterControl(
   return (
     <FormGroup className="values-filter-control">
       {showSearch && (
-        <ClearableInput value={searchString} onChange={setSearchString} placeholder="Search" />
+        <ClearableInput value={searchString} onValueChange={setSearchString} placeholder="Search" />
       )}
       <Menu className="value-list">
         {filterMap(valuesToShow, (v, i) => {
diff --git a/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx b/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx
index 7314528bb7b2..4d685c74c4a9 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx
@@ -18,7 +18,9 @@
 
 import { Button, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import type { CancelToken } from 'axios';
 import classNames from 'classnames';
+import { isDate } from 'date-fns';
 import type {
   Column,
   FilterPattern,
@@ -27,10 +29,16 @@ import type {
   SqlQuery,
 } from 'druid-query-toolkit';
 import { filterPatternsToExpression, fitFilterPatterns } from 'druid-query-toolkit';
-import { forwardRef, useImperativeHandle, useState } from 'react';
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 
+import { useQueryManager } from '../../../../hooks';
+import { prettyFormatIsoDateWithMsIfNeeded, without } from '../../../../utils';
 import type { QuerySource } from '../../models';
-import { formatPatternWithoutNegation, initPatternForColumn } from '../../utils';
+import {
+  formatPatternWithoutNegation,
+  initPatternForColumn,
+  patternToBoundsQuery,
+} from '../../utils';
 import { DroppableContainer } from '../droppable-container/droppable-container';
 
 import { FilterMenu } from './filter-menu/filter-menu';
@@ -41,7 +49,7 @@ export interface FilterPaneProps {
   querySource: QuerySource | undefined;
   filter: SqlExpression;
   onFilterChange(filter: SqlExpression): void;
-  runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): Promise<QueryResult>;
   onAddToSourceQueryAsColumn?: (expression: SqlExpression) => void;
   onMoveToSourceQueryAsClause?: (expression: SqlExpression, changeWhere?: SqlExpression) => void;
 }
@@ -55,11 +63,41 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
     onAddToSourceQueryAsColumn,
     onMoveToSourceQueryAsClause,
   } = props;
-  const patterns = fitFilterPatterns(filter);
+  const patterns = useMemo(() => fitFilterPatterns(filter), [filter]);
 
   const [menuIndex, setMenuIndex] = useState<number>(-1);
   const [menuNew, setMenuNew] = useState<{ column?: Column }>();
 
+  const boundsQuery: string | undefined = useMemo(() => {
+    if (!querySource) return;
+    const relativePatterns = patterns.filter(p => p.type === 'timeRelative');
+    if (relativePatterns.length !== 1) return;
+    return patternToBoundsQuery(querySource.query, relativePatterns[0])?.toString();
+  }, [querySource, patterns]);
+
+  const [boundsState] = useQueryManager<string, [Date, Date]>({
+    query: boundsQuery,
+    processQuery: async (query, cancelToken) => {
+      const boundsData = await runSqlQuery(query, cancelToken);
+      const startEndRecord = boundsData.toObjectArray()[0];
+      if (!startEndRecord || !isDate(startEndRecord.start) || !isDate(startEndRecord.end)) {
+        throw new Error('Unexpected result');
+      }
+      return [startEndRecord.start, startEndRecord.end];
+    },
+  });
+
+  function filterTooltip(pattern: FilterPattern): string | undefined {
+    if (pattern.type !== 'timeRelative') return;
+    if (boundsState.isLoading()) return 'Loading...';
+    if (boundsState.isError()) return boundsState.getErrorMessage();
+    if (!boundsState.data) return;
+    const [start, end] = boundsState.data;
+    return `${prettyFormatIsoDateWithMsIfNeeded(
+      start,
+    )} → ${prettyFormatIsoDateWithMsIfNeeded(end)}`;
+  }
+
   function filterOn(column: Column) {
     const relevantPatternIndex = patterns.findIndex(
       pattern => pattern.type !== 'custom' && pattern.column === column.name,
@@ -98,7 +136,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
                 content={
                   <FilterMenu
                     querySource={querySource}
-                    filter={filter}
+                    filter={filterPatternsToExpression(without(patterns, pattern))}
                     initPattern={pattern}
                     onPatternChange={newPattern => {
                       changePatterns(patterns.map((c, idx) => (idx === i ? newPattern : c)));
@@ -107,6 +145,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
                       setMenuIndex(-1);
                     }}
                     runSqlQuery={runSqlQuery}
+                    timeBounds={boundsState.data}
                     onAddToSourceQueryAsColumn={onAddToSourceQueryAsColumn}
                     onMoveToSourceQueryAsClause={
                       onMoveToSourceQueryAsClause
@@ -128,6 +167,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
                   minimal
                   text={formatPatternWithoutNegation(pattern)}
                   onClick={() => setMenuIndex(i)}
+                  data-tooltip={i !== menuIndex ? filterTooltip(pattern) : undefined}
                 />
               </Popover>
             ) : (
@@ -144,6 +184,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
               minimal
               small
               onClick={() => changePatterns(patterns.filter((_clause, idx) => idx !== i))}
+              data-tooltip="Remove filter"
             />
           </div>
         );
@@ -176,6 +217,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
             text={patterns.length ? undefined : 'Add filter'}
             onClick={() => setMenuNew({})}
             minimal
+            data-tooltip="Add filter"
           />
         </Popover>
       ) : (
@@ -184,6 +226,7 @@ export const FilterPane = forwardRef(function FilterPane(props: FilterPaneProps,
           text={patterns.length ? undefined : 'Add filter'}
           disabled
           minimal
+          data-tooltip="Add filter"
         />
       )}
     </DroppableContainer>
diff --git a/web-console/src/views/explore-view/components/generic-output-table/generic-output-table.tsx b/web-console/src/views/explore-view/components/generic-output-table/generic-output-table.tsx
index a7ea7f1f1c6f..d4548896f6ab 100644
--- a/web-console/src/views/explore-view/components/generic-output-table/generic-output-table.tsx
+++ b/web-console/src/views/explore-view/components/generic-output-table/generic-output-table.tsx
@@ -122,17 +122,14 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
     columnHints,
   } = props;
   const parsedQuery = queryResult.sqlQuery;
-  const [pagination, setPagination] = useState<Pagination>({
-    page: 0,
-    pageSize: initPageSize || 20,
-  });
+  const [pagination, setPagination] = useState<Pagination | undefined>();
+  const effectivePagination: Pagination = pagination || { page: 0, pageSize: initPageSize || 20 };
   const [showValue, setShowValue] = useState<string>();
 
   // Reset page to 0 if number of results changes
   useEffect(() => {
-    setPagination(pagination => {
-      return pagination.page ? { ...pagination, page: 0 } : pagination;
-    });
+    if (!pagination?.page) return;
+    setPagination(undefined);
   }, [queryResult.rows.length]);
 
   function hasFilterOnHeader(header: string, headerIndex: number): boolean {
@@ -382,9 +379,10 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
   const outerLimit = queryResult.getSqlOuterLimit();
   const hasMoreResults = queryResult.rows.length === outerLimit;
   const finalPage =
-    hasMoreResults && Math.floor(queryResult.rows.length / pagination.pageSize) === pagination.page; // on the last page
+    hasMoreResults &&
+    Math.floor(queryResult.rows.length / effectivePagination.pageSize) === effectivePagination.page; // on the last page
 
-  const numericColumnBraces = getNumericColumnBraces(queryResult, columnHints, pagination);
+  const numericColumnBraces = getNumericColumnBraces(queryResult, columnHints, effectivePagination);
   return (
     <div className={classNames('generic-output-table', { 'more-results': hasMoreResults })}>
       {finalPage ? (
@@ -406,7 +404,9 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
             icon={IconNames.ARROW_LEFT}
             text="Go to previous page"
             fill
-            onClick={() => setPagination({ ...pagination, page: pagination.page - 1 })}
+            onClick={() =>
+              setPagination({ ...effectivePagination, page: effectivePagination.page - 1 })
+            }
           />
         </div>
       ) : (
@@ -415,15 +415,15 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
           data={queryResult.rows as any[][]}
           ofText={hasMoreResults ? '' : 'of'}
           noDataText={queryResult.rows.length ? '' : 'Query returned no data'}
-          page={pagination.page}
-          pageSize={pagination.pageSize}
-          onPageChange={page => setPagination({ ...pagination, page })}
+          page={effectivePagination.page}
+          pageSize={effectivePagination.pageSize}
+          onPageChange={page => setPagination({ ...effectivePagination, page })}
           onPageSizeChange={(pageSize, page) => setPagination({ 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)
+            queryResult.rows.length > Math.min(SMALL_TABLE_PAGE_SIZE, effectivePagination.pageSize)
           }
           columns={columnNester(
             queryResult.header.map((column, i) => {
diff --git a/web-console/src/views/explore-view/components/helper-table/helper-table.scss b/web-console/src/views/explore-view/components/helper-table/helper-table.scss
new file mode 100644
index 000000000000..91387ee6799b
--- /dev/null
+++ b/web-console/src/views/explore-view/components/helper-table/helper-table.scss
@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+.helper-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  &:not(:first-child) {
+    border-top: 1px solid black;
+  }
+
+  .helper-header {
+    display: flex;
+
+    .helper-title {
+      flex: 1;
+      padding: 5px 10px;
+      font-weight: bold;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  & > .clearable-input {
+    padding: 1px 2px;
+  }
+
+  .values-container {
+    position: relative;
+    flex: 1;
+
+    .values {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      user-select: none;
+
+      .row {
+        position: relative;
+        display: flex;
+        padding: 5px 10px;
+        cursor: pointer;
+
+        &.with-filter {
+          padding-left: 25px;
+
+          .filter-indicator {
+            position: absolute;
+            top: 2px;
+            left: 1px;
+          }
+        }
+
+        .column-value {
+          flex: 1;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        .value {
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+}
diff --git a/web-console/src/views/explore-view/components/helper-table/helper-table.tsx b/web-console/src/views/explore-view/components/helper-table/helper-table.tsx
new file mode 100644
index 000000000000..42ad3ae45d7e
--- /dev/null
+++ b/web-console/src/views/explore-view/components/helper-table/helper-table.tsx
@@ -0,0 +1,191 @@
+/*
+ * 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 } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import type { CancelToken } from 'axios';
+import classNames from 'classnames';
+import type { LiteralValue, QueryResult, SqlQuery, ValuesFilterPattern } from 'druid-query-toolkit';
+import {
+  F,
+  filterPatternsToExpression,
+  fitFilterPatterns,
+  SqlExpression,
+} from 'druid-query-toolkit';
+import React, { useMemo, useState } from 'react';
+
+import { ClearableInput, Loader } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
+import type { NumberLike } from '../../../../utils';
+import {
+  caseInsensitiveContains,
+  checkedCircleIcon,
+  filterMap,
+  formatNumber,
+  without,
+  xor,
+} from '../../../../utils';
+import type { ExpressionMeta, QuerySource } from '../../models';
+import { addOrUpdatePattern, toggle } from '../../utils';
+import { ColumnValue } from '../column-value/column-value';
+
+import './helper-table.scss';
+
+const ALWAYS_SHOW_CHECKS = true;
+const HEADER_HEIGHT = 30;
+const ROW_HEIGHT = 28;
+
+export interface HelperTableProps {
+  querySource: QuerySource;
+  where: SqlExpression;
+  setWhere(where: SqlExpression): void;
+  expression: ExpressionMeta;
+  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): Promise<QueryResult>;
+  onDelete(): void;
+}
+
+export const HelperTable = React.memo(function HelperTable(props: HelperTableProps) {
+  const { querySource, where, setWhere, expression, runSqlQuery, onDelete } = props;
+  const [showSearch, setShowSearch] = useState(false);
+  const [searchString, setSearchString] = useState('');
+
+  const { patterns, myFilterPattern } = useMemo(() => {
+    const patterns = fitFilterPatterns(where);
+    const myFilterPattern = patterns.findLast(
+      pattern => pattern.type === 'values' && pattern.column === expression.name,
+    ) as ValuesFilterPattern | undefined;
+
+    return { patterns, myFilterPattern };
+  }, [where, expression]);
+
+  const valuesQuery = useMemo(
+    () =>
+      querySource
+        .getInitQuery(
+          SqlExpression.and(
+            filterPatternsToExpression(without(patterns, myFilterPattern)),
+            searchString ? F('ICONTAINS_STRING', expression.expression, searchString) : undefined,
+          ),
+        )
+        .addSelect(expression.expression.as('v'), { addToGroupBy: 'end' })
+        .addSelect(F.count().as('c'), { addToOrderBy: 'end', direction: 'DESC' })
+        .changeLimitValue(101)
+        .toString(),
+    [querySource, patterns, myFilterPattern, expression, searchString],
+  );
+
+  const [valuesState] = useQueryManager<string, readonly { v: string; c: NumberLike }[]>({
+    query: valuesQuery,
+    debounceIdle: 100,
+    debounceLoading: 500,
+    processQuery: async (query, cancelToken) => {
+      const vs = await runSqlQuery(query, cancelToken);
+      return (vs.toObjectArray() as any) || [];
+    },
+  });
+
+  function changeValues(values: LiteralValue[], negatedOverride?: boolean) {
+    setWhere(
+      filterPatternsToExpression(
+        values.length
+          ? addOrUpdatePattern(patterns, myFilterPattern, {
+              type: 'values',
+              column: expression.name,
+              negated: negatedOverride ?? Boolean(myFilterPattern?.negated),
+              values,
+            })
+          : patterns.filter(p => p !== myFilterPattern),
+      ),
+    );
+  }
+
+  const values = valuesState.getSomeData();
+  const showCheckIcons = Boolean(ALWAYS_SHOW_CHECKS || myFilterPattern);
+  return (
+    <div
+      className="helper-table"
+      style={{ maxHeight: values ? HEADER_HEIGHT + ROW_HEIGHT * values.length : undefined }}
+    >
+      <div className="helper-header">
+        <div className="helper-title">{expression.name}</div>
+        <ButtonGroup minimal>
+          <Button
+            icon={IconNames.SEARCH}
+            data-tooltip="Search values"
+            minimal
+            active={showSearch}
+            onClick={() => setShowSearch(!showSearch)}
+          />
+          <Button icon={IconNames.CROSS} data-tooltip="Remove table" minimal onClick={onDelete} />
+        </ButtonGroup>
+      </div>
+      {showSearch && (
+        <ClearableInput value={searchString} onValueChange={setSearchString} placeholder="Search" />
+      )}
+      <div className="values-container">
+        {values && (
+          <div className="values">
+            {filterMap(values, (d, i) => {
+              if (!caseInsensitiveContains(d.v, searchString)) return;
+
+              return (
+                <div
+                  className={classNames('row', { 'with-filter': showCheckIcons })}
+                  key={i}
+                  onClick={e => {
+                    e.preventDefault();
+                    changeValues(
+                      !e.shiftKey || !myFilterPattern ? [d.v] : toggle(myFilterPattern.values, d.v),
+                      false,
+                    );
+                  }}
+                >
+                  {showCheckIcons && (
+                    <Button
+                      className="filter-indicator"
+                      icon={checkedCircleIcon(
+                        ALWAYS_SHOW_CHECKS
+                          ? !myFilterPattern ||
+                              xor(myFilterPattern.negated, myFilterPattern.values.includes(d.v))
+                          : Boolean(myFilterPattern && myFilterPattern.values.includes(d.v)),
+                        !ALWAYS_SHOW_CHECKS && Boolean(myFilterPattern?.negated),
+                      )}
+                      small
+                      minimal
+                      onClick={e => {
+                        e.stopPropagation();
+                        if (myFilterPattern) {
+                          changeValues(toggle(myFilterPattern.values, d.v));
+                        } else {
+                          changeValues([d.v], true);
+                        }
+                      }}
+                    />
+                  )}
+                  <ColumnValue value={d.v} />
+                  <div className="value">{formatNumber(d.c)}</div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {valuesState.loading && <Loader />}
+      </div>
+    </div>
+  );
+});
diff --git a/web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.tsx b/web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.tsx
deleted file mode 100644
index 4d8a3b1cc340..000000000000
--- a/web-console/src/views/explore-view/components/highlight-bubble/highlight-bubble.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, Card, Elevation } from '@blueprintjs/core';
-import { useCallback, useEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { useStore } from 'zustand';
-
-import { useResizeObserver } from '../../../../hooks';
-import { highlightStore } from '../../highlight-store/highlight-store';
-
-import './highlight-bubble.scss';
-
-export const HighlightBubble = (props: { referenceContainer: HTMLDivElement | null }) => {
-  const { referenceContainer } = props;
-
-  const { highlight } = useStore(highlightStore);
-
-  const { left, top } = useResizeObserver(referenceContainer);
-
-  // drop highlight on ESC and save it on ENTER
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        highlight?.onDrop();
-      }
-
-      if (event.key === 'Enter') {
-        highlight?.onSave?.(highlight);
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [highlight]);
-
-  const style = useMemo(() => {
-    if (!highlight) return {};
-    return { left: left + highlight.x, top: top + highlight.y };
-  }, [left, top, highlight]);
-
-  const onSave = useCallback(() => {
-    highlight?.onSave?.(highlight);
-  }, [highlight]);
-
-  if (!highlight) return null;
-
-  return createPortal(
-    <Card elevation={Elevation.TWO} className="highlight-bubble" style={style}>
-      <div className="label">{highlight.label}</div>
-      <div className="button-group">
-        <Button
-          intent="none"
-          text={highlight.onSave ? 'Cancel' : 'Close'}
-          onClick={highlight.onDrop}
-        />
-        {highlight.onSave && <Button intent="primary" text="Filter" onClick={onSave} />}
-      </div>
-    </Card>,
-    document.body,
-  );
-};
diff --git a/web-console/src/views/explore-view/components/index.ts b/web-console/src/views/explore-view/components/index.ts
index 3cbeb6fe6d37..085bbff3c3e0 100644
--- a/web-console/src/views/explore-view/components/index.ts
+++ b/web-console/src/views/explore-view/components/index.ts
@@ -20,7 +20,7 @@ export * from './control-pane/control-pane';
 export * from './droppable-container/droppable-container';
 export * from './filter-pane/filter-pane';
 export * from './generic-output-table/generic-output-table';
-export * from './highlight-bubble/highlight-bubble';
+export * from './helper-table/helper-table';
 export * from './issue/issue';
 export * from './module-pane/module-pane';
 export * from './module-picker/module-picker';
diff --git a/web-console/src/views/explore-view/components/module-pane/module-pane.scss b/web-console/src/views/explore-view/components/module-pane/module-pane.scss
index 6955ab1b5865..e74e3fe4bae3 100644
--- a/web-console/src/views/explore-view/components/module-pane/module-pane.scss
+++ b/web-console/src/views/explore-view/components/module-pane/module-pane.scss
@@ -18,33 +18,75 @@
 
 @import '../../../../variables';
 
+$tob-bar-height: 34px;
+$control-pane-width: 240px;
+
 .module-pane {
   position: relative;
   @include card-like;
+  overflow: hidden;
 
-  & > .module {
+  .module-top-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 100%;
-    position: relative;
+    height: $tob-bar-height;
+    border-bottom: 1px solid $dark-gray2;
+    padding: 2px;
+    display: flex;
 
-    & > .echart-container {
-      position: absolute;
-      width: 100%;
-      height: 100%;
+    .bar-expander {
+      flex: 1;
     }
+  }
+
+  .control-pane-container {
+    position: absolute;
+    top: $tob-bar-height + 1;
+    bottom: 0;
+    width: $control-pane-width;
+    right: 0;
+    border-left: 1px solid $dark-gray2;
+    padding: 8px;
+    overflow: auto;
+  }
 
-    & > .issue {
-      position: absolute;
-      top: 0;
-      left: 0;
+  &.show-controls .module-inner-container {
+    right: $control-pane-width + 1;
+  }
+
+  .module-inner-container {
+    position: absolute;
+    top: $tob-bar-height + 1;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    & > .module {
       width: 100%;
       height: 100%;
-    }
+      position: relative;
+
+      & > .echart-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+
+      & > .issue {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
 
-    .loader {
-      position: absolute;
-      top: 0;
-      left: 0;
+      .loader {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
     }
   }
 }
diff --git a/web-console/src/views/explore-view/components/module-pane/module-pane.tsx b/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
index 7155a7eff32a..38370e676a34 100644
--- a/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
+++ b/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
@@ -16,60 +16,146 @@
  * limitations under the License.
  */
 
-import { ResizeSensor } from '@blueprintjs/core';
-import type { QueryResult, SqlExpression, SqlQuery } from 'druid-query-toolkit';
-import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Intent,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  ResizeSensor,
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import classNames from 'classnames';
+import type { Column, QueryResult, SqlExpression, SqlQuery } from 'druid-query-toolkit';
+import React, { useState } from 'react';
 
-import { Stage } from '../../../../utils/stage';
-import type { ParameterDefinition, ParameterValues, QuerySource } from '../../models';
-import { effectiveParameterDefault } from '../../models';
+import { useMemoWithPrevious } from '../../../../hooks';
+import {
+  isEmpty,
+  localStorageGetJson,
+  LocalStorageKeys,
+  localStorageSetJson,
+  mapRecord,
+  Stage,
+} from '../../../../utils';
+import type {
+  Measure,
+  ModuleState,
+  ParameterDefinition,
+  ParameterValues,
+  QuerySource,
+} from '../../models';
+import { effectiveParameterDefault, removeUndefinedParameterValues } from '../../models';
 import { ModuleRepository } from '../../module-repository/module-repository';
+import { adjustTransferValue, normalizeType } from '../../utils';
+import { ControlPane } from '../control-pane/control-pane';
+import { DroppableContainer } from '../droppable-container/droppable-container';
 import { Issue } from '../issue/issue';
+import { ModulePicker } from '../module-picker/module-picker';
 
 import './module-pane.scss';
 
+function getStickyParameterValuesForModule(moduleId: string): ParameterValues {
+  return localStorageGetJson(LocalStorageKeys.EXPLORE_STICKY)?.[moduleId] || {};
+}
+
 function fillInDefaults(
   parameterValues: ParameterValues,
+  previousParameterValues: ParameterValues | undefined,
   parameters: Record<string, ParameterDefinition>,
   querySource: QuerySource,
+  where: SqlExpression,
 ): Record<string, any> {
   const parameterValuesWithDefaults = { ...parameterValues };
   Object.entries(parameters).forEach(([propName, propDefinition]) => {
     if (typeof parameterValuesWithDefaults[propName] !== 'undefined') return;
-    parameterValuesWithDefaults[propName] = effectiveParameterDefault(propDefinition, querySource);
+    parameterValuesWithDefaults[propName] = effectiveParameterDefault(
+      propDefinition,
+      parameterValues,
+      querySource,
+      where,
+      previousParameterValues?.[propName],
+    );
   });
   return parameterValuesWithDefaults;
 }
 
 export interface ModulePaneProps {
-  moduleId: string;
+  className: string;
+  moduleState: ModuleState;
+  setModuleState(moduleState: ModuleState): void;
+  onDelete(): void;
   querySource: QuerySource;
   where: SqlExpression;
   setWhere(where: SqlExpression): void;
 
-  parameterValues: ParameterValues;
-  setParameterValues(parameters: ParameterValues): void;
   runSqlQuery(query: string | SqlQuery): Promise<QueryResult>;
+
+  onAddToSourceQueryAsColumn?(expression: SqlExpression): void;
+  onAddToSourceQueryAsMeasure?(measure: Measure): void;
 }
 
 export const ModulePane = function ModulePane(props: ModulePaneProps) {
   const {
-    moduleId,
+    className,
+    moduleState,
+    setModuleState,
+    onDelete,
     querySource,
     where,
     setWhere,
-    parameterValues,
-    setParameterValues,
     runSqlQuery,
+    onAddToSourceQueryAsColumn,
+    onAddToSourceQueryAsMeasure,
   } = props;
+  const { moduleId, parameterValues, showControls } = moduleState;
   const [stage, setStage] = useState<Stage | undefined>();
 
   const module = ModuleRepository.getModule(moduleId);
 
-  const parameterValuesWithDefaults = useMemo(() => {
-    if (!module) return {};
-    return fillInDefaults(parameterValues, module.parameters, querySource);
-  }, [parameterValues, module, querySource]);
+  function updateParameterValues(newParameterValues: ParameterValues) {
+    if (!module) return;
+
+    // Evaluate sticky-ness
+    const currentExploreSticky = localStorageGetJson(LocalStorageKeys.EXPLORE_STICKY) || {};
+    const currentModuleSticky = currentExploreSticky[moduleId] || {};
+    const newModuleSticky = {
+      ...currentModuleSticky,
+      ...mapRecord(newParameterValues, (v, k) => (module.parameters[k]?.sticky ? v : undefined)),
+    };
+
+    localStorageSetJson(LocalStorageKeys.EXPLORE_STICKY, {
+      ...currentExploreSticky,
+      [moduleId]: isEmpty(newModuleSticky) ? undefined : newModuleSticky,
+    });
+
+    setModuleState(
+      moduleState.changeParameterValues(
+        removeUndefinedParameterValues(
+          { ...parameterValues, ...newParameterValues },
+          module.parameters,
+          querySource,
+          where,
+        ),
+      ),
+    );
+  }
+
+  const parameterValuesWithDefaults: ParameterValues = useMemoWithPrevious(
+    previousParameterValuesWithDefaults => {
+      if (!module) return {};
+      return fillInDefaults(
+        parameterValues,
+        previousParameterValuesWithDefaults,
+        module.parameters,
+        querySource,
+        where,
+      );
+    },
+    [parameterValues, module, querySource],
+  );
 
   let content: React.ReactNode;
   if (module) {
@@ -83,7 +169,7 @@ export const ModulePane = function ModulePane(props: ModulePaneProps) {
         where,
         setWhere,
         parameterValues: parameterValuesWithDefaults,
-        setParameterValues,
+        setParameterValues: updateParameterValues,
         runSqlQuery,
       });
     }
@@ -91,16 +177,142 @@ export const ModulePane = function ModulePane(props: ModulePaneProps) {
     content = <Issue issue={`Unknown module id: ${moduleId}`} />;
   }
 
+  function onShowColumn(column: Column) {
+    setModuleState(moduleState.applyShowColumn(column));
+  }
+
+  function onShowMeasure(measure: Measure) {
+    setModuleState(moduleState.applyShowMeasure(measure));
+  }
+
   return (
-    <ResizeSensor
-      onResize={entries => {
-        if (entries.length !== 1) return;
-        const newStage = new Stage(entries[0].contentRect.width, entries[0].contentRect.height);
-        if (newStage.equals(stage)) return;
-        setStage(newStage);
-      }}
+    <div
+      className={classNames(
+        'module-pane',
+        className,
+        showControls ? 'show-controls' : 'no-controls',
+      )}
     >
-      <div className="module-pane">{content}</div>
-    </ResizeSensor>
+      <div className="module-top-bar">
+        <ModulePicker
+          selectedModuleId={moduleId}
+          onSelectedModuleIdChange={newModuleId => {
+            let newParameterValues = getStickyParameterValuesForModule(newModuleId);
+
+            const oldModule = ModuleRepository.getModule(moduleId);
+            const newModule = ModuleRepository.getModule(newModuleId);
+            if (oldModule && newModule) {
+              const oldModuleParameters = oldModule.parameters || {};
+              const newModuleParameters = newModule.parameters || {};
+              for (const paramName in oldModuleParameters) {
+                const parameterValue = parameterValues[paramName];
+                if (typeof parameterValue === 'undefined') continue;
+
+                const oldParameterDefinition = oldModuleParameters[paramName];
+                const transferGroup = oldParameterDefinition.transferGroup;
+                if (typeof transferGroup !== 'string') continue;
+
+                const normalizedType = normalizeType(oldParameterDefinition.type);
+                const target = Object.entries(newModuleParameters).find(
+                  ([_, def]) =>
+                    def.transferGroup === transferGroup &&
+                    normalizeType(def.type) === normalizedType,
+                );
+                if (!target) continue;
+
+                newParameterValues = {
+                  ...newParameterValues,
+                  [target[0]]: adjustTransferValue(
+                    parameterValue,
+                    oldParameterDefinition.type,
+                    target[1].type,
+                  ),
+                };
+              }
+            }
+
+            setModuleState(
+              moduleState.change({ moduleId: newModuleId, parameterValues: newParameterValues }),
+            );
+          }}
+        />
+        {module && !showControls && (
+          <ControlPane
+            querySource={querySource}
+            where={where}
+            onUpdateParameterValues={updateParameterValues}
+            parameters={module.parameters}
+            parameterValues={parameterValuesWithDefaults}
+            compact
+            onAddToSourceQueryAsColumn={onAddToSourceQueryAsColumn}
+            onAddToSourceQueryAsMeasure={onAddToSourceQueryAsMeasure}
+          />
+        )}
+        <div className="bar-expander" />
+        <ButtonGroup>
+          <Popover
+            position={Position.BOTTOM_RIGHT}
+            content={
+              <Menu>
+                <MenuItem
+                  icon={IconNames.RESET}
+                  text="Reset visualization parameters"
+                  onClick={() => {
+                    setModuleState(
+                      moduleState.changeParameterValues(
+                        getStickyParameterValuesForModule(moduleId),
+                      ),
+                    );
+                  }}
+                />
+                <MenuItem
+                  icon={IconNames.TRASH}
+                  text="Delete module"
+                  intent={Intent.DANGER}
+                  onClick={onDelete}
+                />
+              </Menu>
+            }
+          >
+            <Button icon={IconNames.MORE} data-tooltip="More module options" minimal />
+          </Popover>
+          <Button
+            icon={IconNames.PROPERTIES}
+            data-tooltip={showControls ? 'Hide module controls' : 'Show module controls'}
+            minimal
+            onClick={() => setModuleState(moduleState.change({ showControls: !showControls }))}
+          />
+        </ButtonGroup>
+      </div>
+      {showControls && module && (
+        <div className="control-pane-container">
+          <ControlPane
+            querySource={querySource}
+            where={where}
+            onUpdateParameterValues={updateParameterValues}
+            parameters={module.parameters}
+            parameterValues={parameterValuesWithDefaults}
+            onAddToSourceQueryAsColumn={onAddToSourceQueryAsColumn}
+            onAddToSourceQueryAsMeasure={onAddToSourceQueryAsMeasure}
+          />
+        </div>
+      )}
+      <ResizeSensor
+        onResize={entries => {
+          if (entries.length !== 1) return;
+          const newStage = new Stage(entries[0].contentRect.width, entries[0].contentRect.height);
+          if (newStage.equals(stage)) return;
+          setStage(newStage);
+        }}
+      >
+        <DroppableContainer
+          className="module-inner-container"
+          onDropColumn={onShowColumn}
+          onDropMeasure={onShowMeasure}
+        >
+          {content}
+        </DroppableContainer>
+      </ResizeSensor>
+    </div>
   );
 };
diff --git a/web-console/src/views/explore-view/components/module-picker/module-picker.tsx b/web-console/src/views/explore-view/components/module-picker/module-picker.tsx
index 6ca05de9647e..22538ddb188b 100644
--- a/web-console/src/views/explore-view/components/module-picker/module-picker.tsx
+++ b/web-console/src/views/explore-view/components/module-picker/module-picker.tsx
@@ -18,7 +18,6 @@
 
 import { Button, ButtonGroup, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { JSX } from 'react';
 import React from 'react';
 
 import { ModuleRepository } from '../../module-repository/module-repository';
@@ -28,23 +27,24 @@ import './module-picker.scss';
 export interface ModulePickerProps {
   selectedModuleId: string | undefined;
   onSelectedModuleIdChange(newSelectedModuleId: string): void;
-  moreMenu?: JSX.Element;
+  fill?: boolean;
 }
 
 export const ModulePicker = React.memo(function ModulePicker(props: ModulePickerProps) {
-  const { selectedModuleId, onSelectedModuleIdChange, moreMenu } = props;
+  const { selectedModuleId, onSelectedModuleIdChange, fill } = props;
 
   const modules = ModuleRepository.getAllModuleEntries();
   const selectedModule = selectedModuleId
     ? ModuleRepository.getModule(selectedModuleId)
     : undefined;
+
   return (
-    <ButtonGroup className="module-picker" fill>
+    <ButtonGroup className="module-picker" fill={fill}>
       <Popover
         className="picker-button"
         minimal
-        fill
-        position={Position.BOTTOM_RIGHT}
+        fill={fill}
+        position={Position.BOTTOM_LEFT}
         content={
           <Menu>
             {modules.map((module, i) => (
@@ -61,16 +61,11 @@ export const ModulePicker = React.memo(function ModulePicker(props: ModulePicker
         <Button
           icon={selectedModule ? selectedModule.icon : IconNames.BOX}
           text={selectedModule ? selectedModule.title : 'Select module'}
-          fill
+          fill={fill}
           minimal
           rightIcon={IconNames.CARET_DOWN}
         />
       </Popover>
-      {moreMenu && (
-        <Popover className="more-button" position={Position.BOTTOM_RIGHT} content={moreMenu}>
-          <Button minimal icon={IconNames.MORE} />
-        </Popover>
-      )}
     </ButtonGroup>
   );
 });
diff --git a/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.scss b/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.scss
index ef7650c1f655..b2215a36505f 100644
--- a/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.scss
+++ b/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.scss
@@ -27,6 +27,7 @@
   .#{$bp-ns}-dialog-body {
     display: flex;
     flex-direction: column;
+    position: relative;
 
     .path-selector {
       flex: 1;
diff --git a/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.tsx b/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.tsx
index 4103dc35bb2a..acb2e2c4775d 100644
--- a/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.tsx
+++ b/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.tsx
@@ -33,7 +33,7 @@ import React, { useState } from 'react';
 
 import { ClearableInput, Loader, MenuCheckbox } from '../../../../../components';
 import { useQueryManager } from '../../../../../hooks';
-import { caseInsensitiveContains, filterMap, pluralIfNeeded } from '../../../../../utils';
+import { caseInsensitiveContains, filterMap, pluralIfNeeded, wait } from '../../../../../utils';
 import type { QuerySource } from '../../../models';
 import { ExpressionMeta } from '../../../models';
 import { toggle } from '../../../utils';
@@ -42,6 +42,10 @@ import './nested-column-dialog.scss';
 
 const ARRAY_CONCAT_AGG_SIZE = 10000;
 
+function cleanPath(path: string): string {
+  return path.replace(/^\$/, '').replace(/\['/g, '').replace(/']/g, '');
+}
+
 export interface NestedColumnDialogProps {
   nestedColumn: SqlExpression;
   onApply(newQuery: SqlQuery): void;
@@ -61,6 +65,8 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
   const [pathsState] = useQueryManager({
     query: nestedColumn,
     processQuery: async nestedColumn => {
+      await wait(4000);
+
       const query = querySource
         .getInitBaseQuery()
         .addSelect(
@@ -82,6 +88,12 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
     },
   });
 
+  const effectiveNamingScheme = namingScheme.includes('%') ? namingScheme : namingScheme + '%';
+
+  function getOutputName(path: string): string {
+    return effectiveNamingScheme.replaceAll('%', cleanPath(path));
+  }
+
   const paths = pathsState.data;
   return (
     <Dialog className="nested-column-dialog" isOpen onClose={onClose} title="Expand nested column">
@@ -90,11 +102,23 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
           Replace <Tag minimal>{String(nestedColumn.getOutputName())}</Tag> with path expansions for
           the selected paths.
         </p>
+        <FormGroup label="Nameing scheme">
+          <InputGroup
+            value={namingScheme}
+            onChange={e => {
+              setNamingScheme(e.target.value.slice(0, ExpressionMeta.MAX_NAME_LENGTH));
+            }}
+          />
+        </FormGroup>
         {pathsState.isLoading() && <Loader />}
         {pathsState.getErrorMessage()}
         {paths && (
           <FormGroup>
-            <ClearableInput value={searchString} onChange={setSearchString} placeholder="Search" />
+            <ClearableInput
+              value={searchString}
+              onValueChange={setSearchString}
+              placeholder="Search"
+            />
             <Menu className="path-selector">
               {filterMap(paths, (path, i) => {
                 if (!caseInsensitiveContains(path, searchString)) return;
@@ -104,6 +128,7 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
                     checked={selectedPaths.includes(path)}
                     onChange={() => setSelectedPaths(toggle(selectedPaths, path))}
                     text={path}
+                    data-tooltip={`Will become: ${getOutputName(path)}`}
                   />
                 );
               })}
@@ -130,14 +155,6 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
             </ButtonGroup>
           </FormGroup>
         )}
-        <FormGroup label="Nameing scheme">
-          <InputGroup
-            value={namingScheme}
-            onChange={e => {
-              setNamingScheme(e.target.value.slice(0, ExpressionMeta.MAX_NAME_LENGTH));
-            }}
-          />
-        </FormGroup>
       </div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
@@ -152,17 +169,12 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
               disabled={!selectedPaths.length}
               intent={Intent.PRIMARY}
               onClick={() => {
-                const effectiveNamingScheme = namingScheme.includes('%')
-                  ? namingScheme
-                  : namingScheme + '[%]';
                 onApply(
                   querySource.addColumnAfter(
-                    nestedColumn.getOutputName()!,
+                    nestedColumn.getOutputName() || '',
                     ...selectedPaths.map(path =>
                       F('JSON_VALUE', nestedColumn, path).as(
-                        querySource.getAvailableName(
-                          effectiveNamingScheme.replaceAll('%', path.replace(/^\$\./, '')),
-                        ),
+                        querySource.getAvailableName(getOutputName(path)),
                       ),
                     ),
                   ),
diff --git a/web-console/src/views/explore-view/components/resource-pane/resource-pane.scss b/web-console/src/views/explore-view/components/resource-pane/resource-pane.scss
index 89a166062637..65f08501c557 100644
--- a/web-console/src/views/explore-view/components/resource-pane/resource-pane.scss
+++ b/web-console/src/views/explore-view/components/resource-pane/resource-pane.scss
@@ -19,46 +19,61 @@
 @import '../../../../variables';
 
 .resource-pane {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    'search'
+    'resources';
 
   .search-input {
+    grid-area: search;
     margin: 4px;
   }
 
-  .list-header {
-    padding: 6px;
-    text-transform: uppercase;
-    font-weight: bold;
-    position: relative;
+  .splitter-layout {
+    grid-area: resources;
 
-    .header-buttons {
-      position: absolute;
-      top: 0;
-      right: 0;
+    .layout-splitter {
+      background-color: $light-gray4;
+
+      .#{$bp-ns}-dark & {
+        border-bottom: 2px solid $dark-gray2;
+      }
     }
-  }
 
-  .column-resource-list {
-    flex: 3;
-    overflow: auto;
-    border-bottom: 2px solid $light-gray4;
+    .resource-sub-pane {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      display: grid;
+      grid-template-rows: auto 1fr;
+      grid-template-areas:
+        'header'
+        'list';
 
-    .#{$bp-ns}-dark & {
-      border-bottom: 2px solid $dark-gray2;
-    }
+      .list-header {
+        grid-area: header;
+        padding: 6px;
+        text-transform: uppercase;
+        font-weight: bold;
+        position: relative;
 
-    .column-resource {
-      display: block;
-    }
-  }
+        .header-buttons {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
 
-  .measure-resource-list {
-    flex: 1;
-    overflow: auto;
+      .resource-list {
+        grid-area: list;
+        overflow: auto;
 
-    .measure-resource {
-      display: block;
+        .column-resource,
+        .measure-resource {
+          display: block;
+        }
+      }
     }
   }
 }
diff --git a/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx b/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
index dda84fdbf05f..9c6146dfd1b1 100644
--- a/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
+++ b/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
@@ -32,7 +32,7 @@ import classNames from 'classnames';
 import type { Column, QueryResult, SqlExpression, SqlQuery } from 'druid-query-toolkit';
 import { useState } from 'react';
 
-import { ClearableInput } from '../../../../components';
+import { ClearableInput, SplitterLayout } from '../../../../components';
 import { caseInsensitiveContains, columnToIcon, filterMap } from '../../../../utils';
 import { DragHelper } from '../../drag-helper';
 import type { Measure, QuerySource } from '../../models';
@@ -97,203 +97,220 @@ export const ResourcePane = function ResourcePane(props: ResourcePaneProps) {
       <ClearableInput
         className="search-input"
         value={columnSearch}
-        onChange={setColumnSearch}
+        onValueChange={setColumnSearch}
         placeholder="Search"
       />
-      <div className="list-header column-list-header">
-        Columns
-        <ButtonGroup className="header-buttons" minimal>
-          <Button
-            icon={IconNames.PLUS}
-            title="Add column"
-            onClick={() => setColumnEditorOpenOn({})}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text="Make nice columns titles"
-                  onClick={() => applyUtil(makeNiceTitle)}
-                />
-                <MenuItem
-                  text="Uppercase column names"
-                  onClick={() => applyUtil(x => x.toUpperCase())}
-                />
-                <MenuItem
-                  text="Lowercase column names"
-                  onClick={() => applyUtil(x => x.toLowerCase())}
-                />
-              </Menu>
-            }
-          >
-            <Button icon={IconNames.MORE} />
-          </Popover>
-        </ButtonGroup>
-      </div>
-      <div className="column-resource-list">
-        {filterMap(querySource.columns, (column, i) => {
-          const columnName = column.name;
-          const isNestedColumn = column.nativeType === 'COMPLEX<json>';
-          if (!caseInsensitiveContains(columnName, columnSearch)) return;
-          return (
-            <Popover
-              className="column-resource"
-              key={i}
-              position="right"
-              content={
-                <Menu>
-                  {isNestedColumn ? (
+      <SplitterLayout
+        vertical
+        percentage
+        secondaryInitialSize={25}
+        primaryMinSize={20}
+        secondaryMinSize={20}
+        splitterSize={2}
+      >
+        <div className="resource-sub-pane">
+          <div className="list-header column-list-header">
+            Columns
+            <ButtonGroup className="header-buttons" minimal>
+              <Button
+                icon={IconNames.PLUS}
+                data-tooltip="Add column"
+                onClick={() => setColumnEditorOpenOn({})}
+              />
+              <Popover
+                content={
+                  <Menu>
                     <MenuItem
-                      icon={IconNames.EXPAND_ALL}
-                      text="Expand nested column"
-                      onClick={() =>
-                        setNestedColumnEditorOpenOn(
-                          querySource.getSourceExpressionForColumn(columnName),
-                        )
-                      }
+                      text="Make nice columns titles"
+                      onClick={() => applyUtil(makeNiceTitle)}
                     />
-                  ) : (
-                    <>
-                      {onFilter && (
+                    <MenuItem
+                      text="Uppercase column names"
+                      onClick={() => applyUtil(x => x.toUpperCase())}
+                    />
+                    <MenuItem
+                      text="Lowercase column names"
+                      onClick={() => applyUtil(x => x.toLowerCase())}
+                    />
+                  </Menu>
+                }
+              >
+                <Button icon={IconNames.MORE} data-tooltip="More column options" />
+              </Popover>
+            </ButtonGroup>
+          </div>
+          <div className="resource-list">
+            {filterMap(querySource.columns, (column, i) => {
+              const columnName = column.name;
+              const isNestedColumn = column.nativeType === 'COMPLEX<json>';
+              if (!caseInsensitiveContains(columnName, columnSearch)) return;
+              return (
+                <Popover
+                  className="column-resource"
+                  key={i}
+                  position="right"
+                  content={
+                    <Menu>
+                      {isNestedColumn ? (
                         <MenuItem
-                          icon={IconNames.FILTER}
-                          text="Filter"
-                          onClick={() => onFilter(column)}
+                          icon={IconNames.EXPAND_ALL}
+                          text="Expand nested column"
+                          onClick={() =>
+                            setNestedColumnEditorOpenOn(
+                              querySource.getSourceExpressionForColumn(columnName),
+                            )
+                          }
                         />
+                      ) : (
+                        <>
+                          {onFilter && (
+                            <MenuItem
+                              icon={IconNames.FILTER}
+                              text="Filter"
+                              onClick={() => onFilter(column)}
+                            />
+                          )}
+                          <MenuItem
+                            icon={IconNames.EYE_OPEN}
+                            text="Show"
+                            onClick={() => onShowColumn(column)}
+                          />
+                          <MenuDivider />
+                        </>
                       )}
+                      <MenuItem
+                        icon={IconNames.EDIT}
+                        text="Edit"
+                        onClick={() =>
+                          setColumnEditorOpenOn({
+                            expression: querySource.getSourceExpressionForColumn(columnName),
+                          })
+                        }
+                      />
+                      <MenuItem
+                        icon={IconNames.DUPLICATE}
+                        text="Duplicate"
+                        onClick={() =>
+                          setColumnEditorOpenOn({
+                            columnToDuplicate: columnName,
+                            expression: querySource
+                              .getSourceExpressionForColumn(columnName)
+                              .as(querySource.getAvailableName(columnName)),
+                          })
+                        }
+                      />
+                      <MenuItem
+                        icon={IconNames.TRASH}
+                        text="Delete"
+                        intent={Intent.DANGER}
+                        onClick={() =>
+                          onQueryChange(querySource.deleteColumn(columnName), undefined)
+                        }
+                      />
+                    </Menu>
+                  }
+                >
+                  <div
+                    className={Classes.MENU_ITEM}
+                    draggable={!isNestedColumn}
+                    onDragStart={e => {
+                      e.dataTransfer.effectAllowed = 'all';
+                      DragHelper.dragColumn = column;
+                      DragHelper.createDragGhost(e.dataTransfer, columnName);
+                    }}
+                  >
+                    <Icon
+                      className={Classes.MENU_ITEM_ICON}
+                      icon={columnToIcon(column) || IconNames.BLANK}
+                      data-tooltip={`${columnName}\nSQL type: ${column.sqlType}\nNative type: ${column.nativeType}`}
+                    />
+                    <div className={classNames(Classes.FILL, Classes.TEXT_OVERFLOW_ELLIPSIS)}>
+                      {columnName}
+                    </div>
+                  </div>
+                </Popover>
+              );
+            })}
+          </div>
+        </div>
+        <div className="resource-sub-pane">
+          <div className="list-header measure-list-header">
+            Measures
+            <ButtonGroup className="header-buttons" minimal>
+              <Button
+                icon={IconNames.PLUS}
+                data-tooltip="Add measure"
+                onClick={() => setMeasureEditorOpenOn({})}
+              />
+            </ButtonGroup>
+          </div>
+          <div className="resource-list">
+            {filterMap(querySource.measures, (measure, i) => {
+              const measureName = measure.name;
+              if (!caseInsensitiveContains(measureName, columnSearch)) return;
+              return (
+                <Popover
+                  className="measure-resource"
+                  key={i}
+                  position="right"
+                  content={
+                    <Menu>
                       <MenuItem
                         icon={IconNames.EYE_OPEN}
                         text="Show"
-                        onClick={() => onShowColumn(column)}
+                        onClick={() => onShowMeasure(measure)}
                       />
                       <MenuDivider />
-                    </>
-                  )}
-                  <MenuItem
-                    icon={IconNames.EDIT}
-                    text="Edit"
-                    onClick={() =>
-                      setColumnEditorOpenOn({
-                        expression: querySource.getSourceExpressionForColumn(columnName),
-                      })
-                    }
-                  />
-                  <MenuItem
-                    icon={IconNames.DUPLICATE}
-                    text="Duplicate"
-                    onClick={() =>
-                      setColumnEditorOpenOn({
-                        columnToDuplicate: columnName,
-                        expression: querySource
-                          .getSourceExpressionForColumn(columnName)
-                          .as(querySource.getAvailableName(columnName)),
-                      })
-                    }
-                  />
-                  <MenuItem
-                    icon={IconNames.TRASH}
-                    text="Delete"
-                    intent={Intent.DANGER}
-                    onClick={() => onQueryChange(querySource.deleteColumn(columnName), undefined)}
-                  />
-                </Menu>
-              }
-            >
-              <div
-                className={Classes.MENU_ITEM}
-                draggable={!isNestedColumn}
-                onDragStart={e => {
-                  e.dataTransfer.effectAllowed = 'all';
-                  DragHelper.dragColumn = column;
-                  DragHelper.createDragGhost(e.dataTransfer, columnName);
-                }}
-              >
-                <Icon
-                  className={Classes.MENU_ITEM_ICON}
-                  icon={columnToIcon(column) || IconNames.BLANK}
-                  data-tooltip={`${columnName}\nSQL type: ${column.sqlType}\nNative type: ${column.nativeType}`}
-                />
-                <div className={classNames(Classes.FILL, Classes.TEXT_OVERFLOW_ELLIPSIS)}>
-                  {columnName}
-                </div>
-              </div>
-            </Popover>
-          );
-        })}
-      </div>
-      <div className="list-header measure-list-header">
-        Measures
-        <ButtonGroup className="header-buttons" minimal>
-          <Button
-            icon={IconNames.PLUS}
-            title="Add measure"
-            onClick={() => setMeasureEditorOpenOn({})}
-          />
-        </ButtonGroup>
-      </div>
-      <div className="measure-resource-list">
-        {filterMap(querySource.measures, (measure, i) => {
-          const measureName = measure.name;
-          if (!caseInsensitiveContains(measureName, columnSearch)) return;
-          return (
-            <Popover
-              className="measure-resource"
-              key={i}
-              position="right"
-              content={
-                <Menu>
-                  <MenuItem
-                    icon={IconNames.EYE_OPEN}
-                    text="Show"
-                    onClick={() => onShowMeasure(measure)}
-                  />
-                  <MenuDivider />
-                  <MenuItem
-                    icon={IconNames.EDIT}
-                    text="Edit"
-                    onClick={() =>
-                      setMeasureEditorOpenOn({
-                        measure,
-                      })
-                    }
-                  />
-                  <MenuItem
-                    icon={IconNames.DUPLICATE}
-                    text="Duplicate"
-                    onClick={() =>
-                      setMeasureEditorOpenOn({
-                        measureToDuplicate: measureName,
-                        measure: measure.changeAs(querySource.getAvailableName(measureName)),
-                      })
-                    }
-                  />
-                  <MenuItem
-                    icon={IconNames.TRASH}
-                    text="Delete"
-                    intent={Intent.DANGER}
-                    onClick={() => onQueryChange(querySource.deleteMeasure(measureName), undefined)}
-                  />
-                </Menu>
-              }
-            >
-              <div
-                className={Classes.MENU_ITEM}
-                draggable
-                onDragStart={e => {
-                  e.dataTransfer.effectAllowed = 'all';
-                  DragHelper.dragMeasure = measure.toAggregateBasedMeasure();
-                  DragHelper.createDragGhost(e.dataTransfer, measure.name);
-                }}
-              >
-                <Icon className={Classes.MENU_ITEM_ICON} icon={IconNames.PULSE} />
-                <div className={classNames(Classes.FILL, Classes.TEXT_OVERFLOW_ELLIPSIS)}>
-                  {measureName}
-                </div>
-              </div>
-            </Popover>
-          );
-        })}
-      </div>
+                      <MenuItem
+                        icon={IconNames.EDIT}
+                        text="Edit"
+                        onClick={() =>
+                          setMeasureEditorOpenOn({
+                            measure,
+                          })
+                        }
+                      />
+                      <MenuItem
+                        icon={IconNames.DUPLICATE}
+                        text="Duplicate"
+                        onClick={() =>
+                          setMeasureEditorOpenOn({
+                            measureToDuplicate: measureName,
+                            measure: measure.changeAs(querySource.getAvailableName(measureName)),
+                          })
+                        }
+                      />
+                      <MenuItem
+                        icon={IconNames.TRASH}
+                        text="Delete"
+                        intent={Intent.DANGER}
+                        onClick={() =>
+                          onQueryChange(querySource.deleteMeasure(measureName), undefined)
+                        }
+                      />
+                    </Menu>
+                  }
+                >
+                  <div
+                    className={Classes.MENU_ITEM}
+                    draggable
+                    onDragStart={e => {
+                      e.dataTransfer.effectAllowed = 'all';
+                      DragHelper.dragMeasure = measure.toAggregateBasedMeasure();
+                      DragHelper.createDragGhost(e.dataTransfer, measure.name);
+                    }}
+                  >
+                    <Icon className={Classes.MENU_ITEM_ICON} icon={IconNames.PULSE} />
+                    <div className={classNames(Classes.FILL, Classes.TEXT_OVERFLOW_ELLIPSIS)}>
+                      {measureName}
+                    </div>
+                  </div>
+                </Popover>
+              );
+            })}
+          </div>
+        </div>
+      </SplitterLayout>
       {columnEditorOpenOn && (
         <ColumnDialog
           initExpression={columnEditorOpenOn.expression}
diff --git a/web-console/src/views/explore-view/components/source-query-pane/source-query-pane.tsx b/web-console/src/views/explore-view/components/source-query-pane/source-query-pane.tsx
index dd3fbbd41dde..c3524b3ecebc 100644
--- a/web-console/src/views/explore-view/components/source-query-pane/source-query-pane.tsx
+++ b/web-console/src/views/explore-view/components/source-query-pane/source-query-pane.tsx
@@ -76,7 +76,7 @@ export const SourceQueryPane = React.memo(function SourceQueryPane(props: Source
             onSourceChange(queryString);
           }}
         />
-        <Button text="Hide" onClick={() => onClose()} />
+        <Button icon={IconNames.MINUS} text="Minimize" onClick={() => onClose()} />
       </div>
     </div>
   );
diff --git a/web-console/src/views/explore-view/explore-state.ts b/web-console/src/views/explore-view/explore-state.ts
deleted file mode 100644
index a5faba0a26f4..000000000000
--- a/web-console/src/views/explore-view/explore-state.ts
+++ /dev/null
@@ -1,237 +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 type { Column } from 'druid-query-toolkit';
-import {
-  filterPatternToExpression,
-  SqlExpression,
-  SqlLiteral,
-  SqlQuery,
-} from 'druid-query-toolkit';
-
-import { isEmpty } from '../../utils';
-
-import type { Measure, ParameterValues } from './models';
-import {
-  ExpressionMeta,
-  inflateParameterValues,
-  QuerySource,
-  renameColumnsInParameterValues,
-} from './models';
-import { ModuleRepository } from './module-repository/module-repository';
-import type { Rename } from './utils';
-import { renameColumnsInExpression } from './utils';
-
-interface ExploreStateValue {
-  source: string;
-  showSourceQuery?: boolean;
-  where: SqlExpression;
-  moduleId: string;
-  parameterValues: ParameterValues;
-}
-
-export class ExploreState {
-  static DEFAULT_STATE: ExploreState;
-
-  static fromJS(js: any) {
-    const inflatedParameterValues = inflateParameterValues(
-      js.parameterValues,
-      ModuleRepository.getModule(js.moduleId)?.parameters || {},
-    );
-    return new ExploreState({
-      ...js,
-      where: SqlExpression.maybeParse(js.where) || SqlLiteral.TRUE,
-      parameterValues: inflatedParameterValues,
-    });
-  }
-
-  public readonly source: string;
-  public readonly showSourceQuery: boolean;
-  public readonly where: SqlExpression;
-  public readonly moduleId: string;
-  public readonly parameterValues: ParameterValues;
-
-  public readonly parsedSource: SqlQuery | undefined;
-  public readonly parseError: string | undefined;
-
-  constructor(value: ExploreStateValue) {
-    this.source = value.source;
-    this.showSourceQuery = Boolean(value.showSourceQuery);
-    this.where = value.where;
-    this.moduleId = value.moduleId;
-    this.parameterValues = value.parameterValues;
-
-    if (this.source === '') {
-      this.parseError = 'Please select source or enter a source query';
-    } else {
-      try {
-        this.parsedSource = SqlQuery.parse(this.source);
-      } catch (e) {
-        this.parseError = e.message;
-      }
-    }
-  }
-
-  valueOf(): ExploreStateValue {
-    return {
-      source: this.source,
-      showSourceQuery: this.showSourceQuery,
-      where: this.where,
-      moduleId: this.moduleId,
-      parameterValues: this.parameterValues,
-    };
-  }
-
-  public change(newValues: Partial<ExploreStateValue>): ExploreState {
-    return new ExploreState({
-      ...this.valueOf(),
-      ...newValues,
-    });
-  }
-
-  public changeSource(newSource: SqlQuery | string, rename: Rename | undefined): ExploreState {
-    const toChange: Partial<ExploreStateValue> = {
-      source: String(newSource),
-    };
-
-    if (rename) {
-      toChange.where = renameColumnsInExpression(this.where, rename);
-
-      const module = ModuleRepository.getModule(this.moduleId);
-      if (module) {
-        toChange.parameterValues = renameColumnsInParameterValues(
-          this.parameterValues,
-          module.parameters,
-          rename,
-        );
-      }
-    }
-
-    return this.change(toChange);
-  }
-
-  public changeToTable(tableName: string): ExploreState {
-    return this.changeSource(SqlQuery.create(tableName), undefined);
-  }
-
-  public addInitTimeFilterIfNeeded(columns: readonly Column[]): ExploreState {
-    if (!this.parsedSource) return this;
-    if (!QuerySource.isSingleStarQuery(this.parsedSource)) return this; // Only trigger for `SELECT * FROM ...` queries
-    if (!this.where.equal(SqlLiteral.TRUE)) return this;
-
-    // Either find the `__time::TIMESTAMP` column or use the first column if it is a TIMESTAMP
-    const timeColumn =
-      columns.find(c => c.isTimeColumn()) ||
-      (columns[0].sqlType === 'TIMESTAMP' ? columns[0] : undefined);
-    if (!timeColumn) return this;
-
-    return this.change({
-      where: filterPatternToExpression({
-        type: 'timeRelative',
-        column: timeColumn.name,
-        negated: false,
-        anchor: 'maxDataTime',
-        rangeDuration: 'P1D',
-        startBound: '[',
-        endBound: ')',
-      }),
-    });
-  }
-
-  public restrictToQuerySource(querySource: QuerySource): ExploreState {
-    const { where, moduleId, parameterValues } = this;
-    const module = ModuleRepository.getModule(moduleId);
-    if (!module) return this;
-    const newWhere = querySource.restrictWhere(where);
-    const newParameterValues = querySource.restrictParameterValues(
-      parameterValues,
-      module.parameters,
-    );
-    if (where === newWhere && parameterValues === newParameterValues) return this;
-
-    return this.change({
-      where: newWhere,
-      parameterValues: newParameterValues,
-    });
-  }
-
-  public applyShowColumn(column: Column): ExploreState {
-    let moduleId: string;
-    let parameterValues: ParameterValues;
-    if (column.sqlType === 'TIMESTAMP') {
-      moduleId = 'time-chart';
-      parameterValues = {};
-    } else {
-      moduleId = 'grouping-table';
-      parameterValues = {
-        ...(this.moduleId === moduleId ? this.parameterValues : {}),
-        splitColumns: [ExpressionMeta.fromColumn(column)],
-      };
-    }
-
-    return this.change({
-      moduleId,
-      parameterValues,
-    });
-  }
-
-  public applyShowMeasure(measure: Measure): ExploreState {
-    const module = ModuleRepository.getModule(this.moduleId);
-    if (module) {
-      const p = Object.entries(module.parameters).find(
-        ([_, def]) => def.type === 'measure' || def.type === 'measures',
-      );
-      if (p) {
-        const [paramName, def] = p;
-        const { parameterValues } = this;
-        return this.change({
-          parameterValues: {
-            ...parameterValues,
-            [paramName]:
-              def.type === 'measures'
-                ? (parameterValues[paramName] || []).concat(measure)
-                : measure,
-          },
-        });
-      }
-    }
-
-    return this.change({
-      moduleId: 'grouping-table',
-      parameterValues: {
-        measures: [measure],
-      },
-    });
-  }
-
-  public isInitState(): boolean {
-    return (
-      this.moduleId === 'record-table' &&
-      this.source === '' &&
-      this.where instanceof SqlLiteral &&
-      isEmpty(this.parameterValues)
-    );
-  }
-}
-
-ExploreState.DEFAULT_STATE = new ExploreState({
-  moduleId: 'record-table',
-  source: '',
-  where: SqlLiteral.TRUE,
-  parameterValues: {},
-});
diff --git a/web-console/src/views/explore-view/explore-view.scss b/web-console/src/views/explore-view/explore-view.scss
index 09627e0c9bdf..54a976f780db 100644
--- a/web-console/src/views/explore-view/explore-view.scss
+++ b/web-console/src/views/explore-view/explore-view.scss
@@ -24,21 +24,24 @@ $resources-width: 240px;
   height: 100%;
   position: relative;
 
+  .splitter-layout {
+    height: 100%;
+  }
+
+  .layout-splitter:hover {
+    background: black;
+    opacity: 0.1;
+    border-radius: 2px;
+  }
+
   .source-query-pane {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    height: 192px;
+    @include pin-full;
     @include card-like;
+    overflow: hidden;
   }
 
   .source-error {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
+    @include pin-full;
     @include card-like;
     padding: 20px;
 
@@ -47,56 +50,200 @@ $resources-width: 240px;
     }
   }
 
-  &.show-source-query .explore-container {
-    top: 200px;
-  }
-  &.show-source-query .source-error {
-    top: 200px;
+  .filter-explore-wrapper {
+    @include pin-full;
+    display: grid;
+    gap: 8px;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'fil'
+      'mod';
+
+    & > .filter-pane-container {
+      grid-area: fil;
+      position: relative;
+      @include card-like;
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+      align-content: flex-start;
+
+      .source-pane-container {
+        padding: 8px 0;
+        border-right: 1px solid $dark-gray2;
+      }
+
+      .filter-pane {
+        flex: 1;
+        padding: 8px 0;
+      }
+
+      .action-buttons {
+        padding: 8px 0;
+      }
+    }
+
+    & > .resource-explore-splitter {
+      grid-area: mod;
+
+      .module-helpers-splitter {
+        @include pin-full;
+      }
+    }
   }
 
-  .explore-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
+  .resource-pane-cnt {
+    @include pin-full;
+    @include card-like;
+
+    .resource-pane {
+      @include pin-full;
+    }
+  }
 
+  .modules-pane {
+    @include pin-full;
     display: grid;
-    grid-template-columns: $resources-width 1fr $resources-width;
-    grid-template-rows: auto 1fr;
-    gap: 8px;
+    gap: 5px;
 
-    .source-pane,
-    .filter-pane,
-    .module-picker,
-    .control-pane-cnt {
-      @include card-like;
-      padding: 8px;
-      height: 100%;
-      overflow: auto;
+    &.layout-single {
+      grid-template-areas: 'm0';
     }
 
-    .resource-pane-cnt,
-    .module-holder {
-      @include card-like;
+    &.layout-two-by-two {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m1'
+        'm2 m3';
     }
 
-    .resource-pane-cnt {
-      position: relative;
-      height: 100%;
+    &.layout-two-rows {
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0'
+        'm1';
+    }
 
-      .resource-pane {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
+    &.layout-two-columns {
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas: 'm0 m1';
+    }
+
+    &.layout-three-rows {
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-areas:
+        'm0'
+        'm1'
+        'm2';
+    }
+
+    &.layout-three-columns {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-areas: 'm0 m1 m2';
+    }
+
+    &.layout-top-row-two-tiles {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m1'
+        'm2 m2';
+    }
+
+    &.layout-bottom-row-two-tiles {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m0'
+        'm1 m2';
+    }
+
+    &.layout-left-column-two-tiles {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m2'
+        'm1 m2';
+    }
+
+    &.layout-right-column-two-tiles {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m1'
+        'm0 m2';
+    }
+
+    &.layout-top-row-three-tiles {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m1 m2'
+        'm3 m3 m3';
+    }
+
+    &.layout-bottom-row-three-tiles {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        'm0 m0 m0'
+        'm1 m2 m3';
     }
 
-    .main-cnt {
-      .module-pane {
-        height: 100%;
+    &.layout-left-column-three-tiles {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-areas:
+        'm0 m3'
+        'm1 m3'
+        'm2 m3';
+    }
+
+    &.layout-right-column-three-tiles {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-areas:
+        'm0 m1'
+        'm0 m2'
+        'm0 m3';
+    }
+
+    @for $i from 0 through 3 {
+      & > .m#{$i} {
+        grid-area: m#{$i};
       }
     }
+
+    & > .no-module-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px gray dashed;
+      border-radius: 5px;
+    }
+  }
+
+  .helper-bar {
+    @include pin-full;
+    @include card-like;
+
+    .helper-tables {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .no-helper-message {
+      position: absolute;
+      left: 50%;
+      top: 42%;
+      transform: translate(-50%, 0);
+      white-space: nowrap;
+    }
   }
 }
 
@@ -115,3 +262,11 @@ $resources-width: 240px;
     border-radius: 3px;
   }
 }
+
+.module-bubble {
+  .button-bar {
+    padding-top: 5px;
+    display: flex;
+    gap: 5px;
+  }
+}
diff --git a/web-console/src/views/explore-view/explore-view.tsx b/web-console/src/views/explore-view/explore-view.tsx
index 21c98b067fa8..703ca2bbd545 100644
--- a/web-console/src/views/explore-view/explore-view.tsx
+++ b/web-console/src/views/explore-view/explore-view.tsx
@@ -18,7 +18,18 @@
 
 import './modules';
 
-import { Button, Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import {
+  Button,
+  ButtonGroup,
+  Icon,
+  Intent,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Popover,
+  Position,
+} from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
 import type { CancelToken } from 'axios';
 import classNames from 'classnames';
@@ -26,49 +37,48 @@ import copy from 'copy-to-clipboard';
 import type { Column, QueryResult, SqlExpression } from 'druid-query-toolkit';
 import { QueryRunner, SqlQuery } from 'druid-query-toolkit';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useStore } from 'zustand';
 
-import { Loader } from '../../components';
+import { Loader, SplitterLayout } from '../../components';
 import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
 import { useHashAndLocalStorageHybridState, useQueryManager } from '../../hooks';
 import { Api, AppToaster } from '../../singletons';
-import {
-  DruidError,
-  isEmpty,
-  localStorageGetJson,
-  LocalStorageKeys,
-  localStorageSetJson,
-  mapRecord,
-  queryDruidSql,
-} from '../../utils';
+import { capitalizeFirst, DruidError, LocalStorageKeys, queryDruidSql } from '../../utils';
 
 import {
-  ControlPane,
   DroppableContainer,
   FilterPane,
-  HighlightBubble,
+  HelperTable,
   ModulePane,
-  ModulePicker,
   ResourcePane,
   SourcePane,
   SourceQueryPane,
 } from './components';
-import { ExploreState } from './explore-state';
-import { highlightStore } from './highlight-store/highlight-store';
-import type { Measure, ParameterValues } from './models';
-import { QuerySource } from './models';
-import { ModuleRepository } from './module-repository/module-repository';
+import type { ExploreModuleLayout, Measure, ModuleState } from './models';
+import { ExploreState, ExpressionMeta, QuerySource } from './models';
 import { rewriteAggregate, rewriteMaxDataTime } from './query-macros';
 import type { Rename } from './utils';
-import { adjustTransferValue, normalizeType, QueryLog } from './utils';
+import { QueryLog } from './utils';
 
 import './explore-view.scss';
 
 const QUERY_LOG = new QueryLog();
 
-function getStickyParameterValuesForModule(moduleId: string): ParameterValues {
-  return localStorageGetJson(LocalStorageKeys.EXPLORE_STICKY)?.[moduleId] || {};
-}
+const LAYOUT_TO_ICON: Record<ExploreModuleLayout, IconName> = {
+  'single': IconNames.SYMBOL_RECTANGLE,
+  'two-by-two': IconNames.GRID_VIEW,
+  'two-rows': IconNames.LAYOUT_TWO_ROWS,
+  'two-columns': IconNames.LAYOUT_TWO_COLUMNS,
+  'three-rows': IconNames.LAYOUT_THREE_ROWS,
+  'three-columns': IconNames.LAYOUT_THREE_COLUMNS,
+  'top-row-two-tiles': IconNames.LAYOUT_TOP_ROW_TWO_TILES,
+  'bottom-row-two-tiles': IconNames.LAYOUT_BOTTOM_ROW_TWO_TILES,
+  'left-column-two-tiles': IconNames.LAYOUT_LEFT_COLUMN_TWO_TILES,
+  'right-column-two-tiles': IconNames.LAYOUT_RIGHT_COLUMN_TWO_TILES,
+  'top-row-three-tiles': IconNames.LAYOUT_TOP_ROW_THREE_TILES,
+  'bottom-row-three-tiles': IconNames.LAYOUT_BOTTOM_ROW_THREE_TILES,
+  'left-column-three-tiles': IconNames.LAYOUT_LEFT_COLUMN_THREE_TILES,
+  'right-column-three-tiles': IconNames.LAYOUT_RIGHT_COLUMN_THREE_TILES,
+};
 
 // ---------------------------------------
 
@@ -131,32 +141,28 @@ export const ExploreView = React.memo(function ExploreView() {
     },
   );
 
-  const { dropHighlight } = useStore(highlightStore);
-
   // -------------------------------------------------------
   // If no table selected, change to first table if possible
-  async function initWithFirstTable() {
+  async function initializeWithFirstTable() {
     const tables = await queryDruidSql<{ TABLE_NAME: string }>({
       query: `SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'TABLE' LIMIT 1`,
     });
 
     const firstTableName = tables[0].TABLE_NAME;
     if (firstTableName) {
-      setTable(firstTableName);
+      setExploreState(exploreState.initToTable(firstTableName));
     }
   }
 
   useEffect(() => {
     if (exploreState.isInitState()) {
-      void initWithFirstTable();
+      void initializeWithFirstTable();
     }
   });
 
   // -------------------------------------------------------
 
-  const { moduleId, source, parsedSource, parseError, where, parameterValues, showSourceQuery } =
-    exploreState;
-  const module = ModuleRepository.getModule(moduleId);
+  const { parsedSource } = exploreState;
 
   const [querySourceState] = useQueryManager<string, QuerySource>({
     query: parsedSource ? String(parsedSource) : undefined,
@@ -178,71 +184,43 @@ export const ExploreView = React.memo(function ExploreView() {
 
   // -------------------------------------------------------
 
-  useEffect(() => {
-    const querySource = querySourceState.data;
-    if (!querySource || !module) return;
-    const newExploreState = exploreState.restrictToQuerySource(querySource);
-    if (exploreState !== newExploreState) {
-      setExploreState(newExploreState);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [module, parameterValues, querySourceState.data]);
-
-  function setModuleId(moduleId: string, parameterValues: ParameterValues) {
-    if (exploreState.moduleId === moduleId) return;
-    setExploreState(exploreState.change({ moduleId, parameterValues }));
-  }
-
-  function setParameterValues(newParameterValues: ParameterValues) {
-    if (newParameterValues === parameterValues) return;
-    setExploreState(exploreState.change({ parameterValues: newParameterValues }));
-  }
-
-  function resetParameterValues() {
-    setParameterValues(getStickyParameterValuesForModule(moduleId));
-  }
+  const effectiveExploreState = useMemo(
+    () =>
+      querySourceState.data
+        ? exploreState.restrictToQuerySource(querySourceState.data)
+        : exploreState,
+    [exploreState, querySourceState.data],
+  );
 
-  function updateParameterValues(newParameterValues: ParameterValues) {
-    // Evaluate sticky-ness
-    if (module) {
-      const currentExploreSticky = localStorageGetJson(LocalStorageKeys.EXPLORE_STICKY) || {};
-      const currentModuleSticky = currentExploreSticky[moduleId] || {};
-      const newModuleSticky = {
-        ...currentModuleSticky,
-        ...mapRecord(newParameterValues, (v, k) => (module.parameters[k]?.sticky ? v : undefined)),
-      };
-
-      localStorageSetJson(LocalStorageKeys.EXPLORE_STICKY, {
-        ...currentExploreSticky,
-        [moduleId]: isEmpty(newModuleSticky) ? undefined : newModuleSticky,
-      });
-    }
+  const { source, parseError, where, showSourceQuery, hideResources, hideHelpers } =
+    effectiveExploreState;
 
-    setParameterValues({ ...parameterValues, ...newParameterValues });
+  function setModuleState(index: number, moduleState: ModuleState) {
+    setExploreState(effectiveExploreState.changeModuleState(index, moduleState));
   }
 
   function setSource(source: SqlQuery | string, rename?: Rename) {
-    setExploreState(exploreState.changeSource(source, rename));
+    setExploreState(effectiveExploreState.changeSource(source, rename));
   }
 
   function setTable(tableName: string) {
-    setExploreState(exploreState.changeToTable(tableName));
+    setExploreState(effectiveExploreState.changeToTable(tableName));
   }
 
   function setWhere(where: SqlExpression) {
-    setExploreState(exploreState.change({ where }));
+    setExploreState(effectiveExploreState.change({ where }));
   }
 
   function onShowColumn(column: Column) {
-    setExploreState(exploreState.applyShowColumn(column));
+    setExploreState(effectiveExploreState.applyShowColumn(column, undefined));
   }
 
   function onShowMeasure(measure: Measure) {
-    setExploreState(exploreState.applyShowMeasure(measure));
+    setExploreState(effectiveExploreState.applyShowMeasure(measure, undefined));
   }
 
   function onShowSourceQuery() {
-    setExploreState(exploreState.change({ showSourceQuery: true }));
+    setExploreState(effectiveExploreState.change({ showSourceQuery: true }));
   }
 
   const querySource = querySourceState.getSomeData();
@@ -251,243 +229,316 @@ export const ExploreView = React.memo(function ExploreView() {
     return async (query: string | SqlQuery, cancelToken?: CancelToken) => {
       if (!querySource) throw new Error('no querySource');
       const parsedQuery = SqlQuery.parse(query);
-      return (
-        await runSqlQuery(
-          await rewriteMaxDataTime(rewriteAggregate(parsedQuery, querySource.measures)),
-          cancelToken,
-        )
-      ).attachQuery({ query: '' }, parsedQuery);
+      const { query: rewrittenQuery, maxTime } = await rewriteMaxDataTime(
+        rewriteAggregate(parsedQuery, querySource.measures),
+      );
+      const results = await runSqlQuery(rewrittenQuery, cancelToken);
+
+      return results
+        .attachQuery({ query: '' }, parsedQuery)
+        .changeResultContext({ ...results.resultContext, maxTime });
     };
   }, [querySource]);
 
+  const selectedLayout = effectiveExploreState.getLayout();
   return (
-    <div className={classNames('explore-view', { 'show-source-query': showSourceQuery })}>
-      {showSourceQuery && (
-        <SourceQueryPane
-          source={source}
-          onSourceChange={setSource}
-          onClose={() => setExploreState(exploreState.change({ showSourceQuery: false }))}
-        />
-      )}
-      {parseError && (
-        <div className="source-error">
-          <p>{parseError}</p>
-          {source === '' && (
-            <p>
-              <SourcePane
-                selectedSource={undefined}
-                onSelectTable={setTable}
-                disabled={Boolean(querySource && querySourceState.loading)}
-              />
-            </p>
-          )}
-          {!showSourceQuery && (
-            <p>
-              <Button text="Show source query" onClick={onShowSourceQuery} />
-            </p>
-          )}
-        </div>
-      )}
-      {parsedSource && (
-        <div className="explore-container">
-          <SourcePane
-            selectedSource={parsedSource}
-            onSelectTable={setTable}
-            onShowSourceQuery={onShowSourceQuery}
-            fill
-            minimal
-            disabled={Boolean(querySource && querySourceState.loading)}
-          />
-          <FilterPane
-            ref={filterPane}
-            querySource={querySource}
-            filter={where}
-            onFilterChange={setWhere}
-            runSqlQuery={runSqlPlusQuery}
-            onAddToSourceQueryAsColumn={expression => {
-              if (!querySource) return;
-              setExploreState(
-                exploreState.changeSource(
-                  querySource.addColumn(querySource.transformToBaseColumns(expression)),
-                  undefined,
-                ),
-              );
-            }}
-            onMoveToSourceQueryAsClause={(expression, changeWhere) => {
-              if (!querySource) return;
-              setExploreState(
-                exploreState
-                  .change({ where: changeWhere })
-                  .changeSource(
-                    querySource.addWhereClause(querySource.transformToBaseColumns(expression)),
-                    undefined,
-                  ),
-              );
-            }}
-          />
-          <ModulePicker
-            selectedModuleId={moduleId}
-            onSelectedModuleIdChange={newModuleId => {
-              let newParameterValues = getStickyParameterValuesForModule(newModuleId);
-
-              const oldModule = ModuleRepository.getModule(moduleId);
-              const newModule = ModuleRepository.getModule(newModuleId);
-              if (oldModule && newModule) {
-                const oldModuleParameters = oldModule.parameters || {};
-                const newModuleParameters = newModule.parameters || {};
-                for (const paramName in oldModuleParameters) {
-                  const parameterValue = parameterValues[paramName];
-                  if (typeof parameterValue === 'undefined') continue;
-
-                  const oldParameterDefinition = oldModuleParameters[paramName];
-                  const transferGroup = oldParameterDefinition.transferGroup;
-                  if (typeof transferGroup !== 'string') continue;
-
-                  const normalizedType = normalizeType(oldParameterDefinition.type);
-                  const target = Object.entries(newModuleParameters).find(
-                    ([_, def]) =>
-                      def.transferGroup === transferGroup &&
-                      normalizeType(def.type) === normalizedType,
-                  );
-                  if (!target) continue;
-
-                  newParameterValues = {
-                    ...newParameterValues,
-                    [target[0]]: adjustTransferValue(
-                      parameterValue,
-                      oldParameterDefinition.type,
-                      target[1].type,
-                    ),
-                  };
-                }
-              }
-
-              dropHighlight();
-              setModuleId(newModuleId, newParameterValues);
-            }}
-            moreMenu={
-              <Menu>
-                <MenuItem
-                  icon={IconNames.DUPLICATE}
-                  text="Copy last query"
-                  disabled={!QUERY_LOG.length()}
-                  onClick={() => {
-                    copy(QUERY_LOG.getLastQuery()!, { format: 'text/plain' });
-                    AppToaster.show({
-                      message: `Copied query to clipboard`,
-                      intent: Intent.SUCCESS,
-                    });
-                  }}
-                />
-                <MenuItem
-                  icon={IconNames.HISTORY}
-                  text="Show query log"
-                  onClick={() => {
-                    setShownText(QUERY_LOG.getFormatted());
-                  }}
-                />
-                <MenuItem
-                  icon={IconNames.RESET}
-                  text="Reset visualization parameters"
-                  onClick={() => {
-                    resetParameterValues();
-                  }}
-                />
-                <MenuDivider />
-                <MenuItem
-                  icon={IconNames.TRASH}
-                  text="Clear all view state"
-                  intent={Intent.DANGER}
-                  onClick={() => {
-                    localStorage.removeItem(LocalStorageKeys.EXPLORE_STATE);
-                    location.hash = '#explore';
-                    location.reload();
-                  }}
-                />
-              </Menu>
+    <div className="explore-view">
+      <SplitterLayout
+        className="source-query-module-splitter"
+        vertical
+        primaryIndex={1}
+        secondaryInitialSize={200}
+        secondaryMinSize={150}
+        primaryMinSize={400}
+        splitterSize={8}
+      >
+        {showSourceQuery && (
+          <SourceQueryPane
+            source={source}
+            onSourceChange={setSource}
+            onClose={() =>
+              setExploreState(effectiveExploreState.change({ showSourceQuery: false }))
             }
           />
-          <div className="resource-pane-cnt">
-            {!querySource && querySourceState.loading && 'Loading...'}
-            {querySource && (
-              <ResourcePane
-                querySource={querySource}
-                onQueryChange={setSource}
-                onFilter={c => {
-                  filterPane.current?.filterOn(c);
-                }}
-                runSqlQuery={runSqlPlusQuery}
-                onShowColumn={onShowColumn}
-                onShowMeasure={onShowMeasure}
-              />
+        )}
+        {parseError && (
+          <div className="source-error">
+            <p>{parseError}</p>
+            {source === '' && (
+              <p>
+                <SourcePane
+                  selectedSource={undefined}
+                  onSelectTable={setTable}
+                  disabled={Boolean(querySource && querySourceState.loading)}
+                />
+              </p>
+            )}
+            {!showSourceQuery && (
+              <p>
+                <Button text="Show source query" onClick={onShowSourceQuery} />
+              </p>
             )}
           </div>
-          <DroppableContainer
-            className="main-cnt"
-            ref={containerRef}
-            onDropColumn={onShowColumn}
-            onDropMeasure={onShowMeasure}
-          >
-            {querySourceState.error ? (
-              <div className="error-display">{querySourceState.getErrorMessage()}</div>
-            ) : querySource ? (
-              <ModulePane
-                moduleId={moduleId}
+        )}
+        {parsedSource && (
+          <div className="filter-explore-wrapper">
+            <div className="filter-pane-container">
+              {!showSourceQuery && (
+                <div className="source-pane-container">
+                  <SourcePane
+                    selectedSource={parsedSource}
+                    onSelectTable={setTable}
+                    onShowSourceQuery={onShowSourceQuery}
+                    fill
+                    minimal
+                    disabled={Boolean(querySource && querySourceState.loading)}
+                  />
+                </div>
+              )}
+              <FilterPane
+                ref={filterPane}
                 querySource={querySource}
-                where={where}
-                setWhere={setWhere}
-                parameterValues={parameterValues}
-                setParameterValues={updateParameterValues}
+                filter={where}
+                onFilterChange={setWhere}
                 runSqlQuery={runSqlPlusQuery}
-              />
-            ) : querySourceState.loading ? (
-              <Loader />
-            ) : undefined}
-          </DroppableContainer>
-          <div className="control-pane-cnt">
-            {module && (
-              <ControlPane
-                querySource={querySource}
-                onUpdateParameterValues={updateParameterValues}
-                parameters={module.parameters}
-                parameterValues={parameterValues}
                 onAddToSourceQueryAsColumn={expression => {
                   if (!querySource) return;
                   setExploreState(
-                    exploreState.changeSource(
+                    effectiveExploreState.changeSource(
                       querySource.addColumn(querySource.transformToBaseColumns(expression)),
                       undefined,
                     ),
                   );
                 }}
-                onAddToSourceQueryAsMeasure={measure => {
+                onMoveToSourceQueryAsClause={(expression, changeWhere) => {
                   if (!querySource) return;
                   setExploreState(
-                    exploreState.changeSource(
-                      querySource.addMeasure(
-                        measure.changeExpression(
-                          querySource.transformToBaseColumns(measure.expression),
-                        ),
+                    effectiveExploreState
+                      .change({ where: changeWhere })
+                      .changeSource(
+                        querySource.addWhereClause(querySource.transformToBaseColumns(expression)),
+                        undefined,
                       ),
-                      undefined,
-                    ),
                   );
                 }}
               />
-            )}
+              <ButtonGroup className="action-buttons">
+                <Popover
+                  position={Position.BOTTOM_RIGHT}
+                  content={
+                    <Menu>
+                      <MenuItem
+                        icon={IconNames.DUPLICATE}
+                        text="Copy last query"
+                        disabled={!QUERY_LOG.length()}
+                        onClick={() => {
+                          copy(QUERY_LOG.getLastQuery()!, { format: 'text/plain' });
+                          AppToaster.show({
+                            message: `Copied query to clipboard`,
+                            intent: Intent.SUCCESS,
+                          });
+                        }}
+                      />
+                      <MenuItem
+                        icon={IconNames.HISTORY}
+                        text="Show query log"
+                        onClick={() => {
+                          setShownText(QUERY_LOG.getFormatted());
+                        }}
+                      />
+                      <MenuDivider />
+                      <MenuItem
+                        icon={IconNames.TRASH}
+                        text="Clear all view state"
+                        intent={Intent.DANGER}
+                        onClick={() => {
+                          localStorage.removeItem(LocalStorageKeys.EXPLORE_STATE);
+                          location.hash = '#explore';
+                          location.reload();
+                        }}
+                      />
+                    </Menu>
+                  }
+                >
+                  <Button icon={IconNames.MORE} data-tooltip="More options" minimal />
+                </Popover>
+                <Popover
+                  content={
+                    <Menu>
+                      {ExploreState.LAYOUTS.map(layout => (
+                        <MenuItem
+                          key={layout}
+                          icon={LAYOUT_TO_ICON[layout]}
+                          text={capitalizeFirst(layout.replace(/-/g, ' '))}
+                          labelElement={
+                            selectedLayout === layout ? <Icon icon={IconNames.TICK} /> : undefined
+                          }
+                          onClick={() => {
+                            setExploreState(effectiveExploreState.change({ layout }));
+                          }}
+                        />
+                      ))}
+                    </Menu>
+                  }
+                >
+                  <Button icon={IconNames.CONTROL} data-tooltip="Layout" minimal />
+                </Popover>
+                <Button
+                  icon={IconNames.PANEL_STATS}
+                  data-tooltip="Show/hide side panels"
+                  minimal
+                  onClick={e => {
+                    if (e.altKey) {
+                      setExploreState(
+                        effectiveExploreState.change({ hideResources: !hideResources }),
+                      );
+                    } else {
+                      setExploreState(effectiveExploreState.change({ hideHelpers: !hideHelpers }));
+                    }
+                  }}
+                />
+              </ButtonGroup>
+            </div>
+            <SplitterLayout
+              className="resource-explore-splitter"
+              primaryIndex={1}
+              secondaryInitialSize={250}
+              secondaryMinSize={250}
+              secondaryMaxSize={500}
+              splitterSize={8}
+            >
+              {!hideResources && (
+                <div className="resource-pane-cnt">
+                  {!querySource && querySourceState.loading && 'Loading...'}
+                  {querySource && (
+                    <ResourcePane
+                      querySource={querySource}
+                      onQueryChange={setSource}
+                      onFilter={c => {
+                        filterPane.current?.filterOn(c);
+                      }}
+                      runSqlQuery={runSqlPlusQuery}
+                      onShowColumn={onShowColumn}
+                      onShowMeasure={onShowMeasure}
+                    />
+                  )}
+                </div>
+              )}
+              <SplitterLayout
+                className="module-helpers-splitter"
+                secondaryInitialSize={250}
+                secondaryMinSize={250}
+                splitterSize={8}
+              >
+                {querySourceState.error ? (
+                  <div className="query-source-error">{querySourceState.getErrorMessage()}</div>
+                ) : querySource ? (
+                  <div
+                    className={classNames('modules-pane', `layout-${selectedLayout}`)}
+                    ref={containerRef}
+                  >
+                    {effectiveExploreState.getModuleStatesToShow().map((moduleState, i) =>
+                      moduleState ? (
+                        <ModulePane
+                          key={i}
+                          className={`m${i}`}
+                          moduleState={moduleState}
+                          setModuleState={moduleState => setModuleState(i, moduleState)}
+                          onDelete={() => setExploreState(effectiveExploreState.removeModule(i))}
+                          querySource={querySource}
+                          where={where}
+                          setWhere={setWhere}
+                          runSqlQuery={runSqlPlusQuery}
+                          onAddToSourceQueryAsColumn={expression => {
+                            if (!querySource) return;
+                            setExploreState(
+                              effectiveExploreState.changeSource(
+                                querySource.addColumn(
+                                  querySource.transformToBaseColumns(expression),
+                                ),
+                                undefined,
+                              ),
+                            );
+                          }}
+                          onAddToSourceQueryAsMeasure={measure => {
+                            if (!querySource) return;
+                            setExploreState(
+                              effectiveExploreState.changeSource(
+                                querySource.addMeasure(
+                                  measure.changeExpression(
+                                    querySource.transformToBaseColumns(measure.expression),
+                                  ),
+                                ),
+                                undefined,
+                              ),
+                            );
+                          }}
+                        />
+                      ) : (
+                        <DroppableContainer
+                          key={i}
+                          className={`no-module-placeholder m${i}`}
+                          onDropColumn={column =>
+                            setExploreState(effectiveExploreState.applyShowColumn(column, i))
+                          }
+                          onDropMeasure={measure =>
+                            setExploreState(effectiveExploreState.applyShowMeasure(measure, i))
+                          }
+                        >
+                          <span>Drag and drop a column or measure here</span>
+                        </DroppableContainer>
+                      ),
+                    )}
+                  </div>
+                ) : querySourceState.loading ? (
+                  <Loader
+                    className="query-source-loader"
+                    loadingText="Introspecting query source"
+                  />
+                ) : (
+                  'should never get here'
+                )}
+                {!hideHelpers && (
+                  <DroppableContainer
+                    className="helper-bar"
+                    onDropColumn={c =>
+                      setExploreState(effectiveExploreState.addHelper(ExpressionMeta.fromColumn(c)))
+                    }
+                  >
+                    {querySource && effectiveExploreState.helpers.length > 0 && (
+                      <div className="helper-tables">
+                        {effectiveExploreState.helpers.map((ex, i) => (
+                          <HelperTable
+                            key={i}
+                            querySource={querySource}
+                            where={where}
+                            setWhere={setWhere}
+                            expression={ex}
+                            runSqlQuery={runSqlPlusQuery}
+                            onDelete={() => setExploreState(effectiveExploreState.removeHelper(i))}
+                          />
+                        ))}
+                      </div>
+                    )}
+                    {!effectiveExploreState.helpers.length && (
+                      <div className="no-helper-message"> Drag columns here to see helpers</div>
+                    )}
+                  </DroppableContainer>
+                )}
+              </SplitterLayout>
+            </SplitterLayout>
           </div>
-          {shownText && (
-            <ShowValueDialog
-              title="Query history"
-              str={shownText}
-              onClose={() => {
-                setShownText(undefined);
-              }}
-            />
-          )}
-        </div>
+        )}
+      </SplitterLayout>
+      {shownText && (
+        <ShowValueDialog
+          title="Query history"
+          str={shownText}
+          onClose={() => {
+            setShownText(undefined);
+          }}
+        />
       )}
-      <HighlightBubble referenceContainer={containerRef.current} />
     </div>
   );
 });
diff --git a/web-console/src/views/explore-view/highlight-store/highlight-store.ts b/web-console/src/views/explore-view/highlight-store/highlight-store.ts
deleted file mode 100644
index 2c3d21c1b0b8..000000000000
--- a/web-console/src/views/explore-view/highlight-store/highlight-store.ts
+++ /dev/null
@@ -1,64 +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 { createStore } from 'zustand';
-
-import type { Highlight } from '../models';
-
-interface HighlightState {
-  /**
-   * The current highlight.
-   */
-  highlight: Highlight | undefined;
-
-  /**
-   * Sets the highlight.
-   * @param highlight the highlight to set
-   */
-  setHighlight: (highlight: Highlight) => void;
-
-  /**
-   * Drops the highlight.
-   */
-  dropHighlight: () => void;
-
-  /**
-   * Updates the highlight.
-   * @param highlight the highlight to update (only the properties to update)
-   * @returns the updated highlight, or undefined if there's no highlight in the store
-   */
-  updateHighlight: (highlight: Partial<Highlight>) => Highlight | undefined;
-}
-
-/**
- * A lightweight store for the highlight.
- */
-export const highlightStore = createStore<HighlightState>((set, get) => ({
-  highlight: undefined,
-  setHighlight: highlight => set({ highlight }),
-  dropHighlight: () => set({ highlight: undefined }),
-  updateHighlight: highlight => {
-    set(state => {
-      if (!state.highlight) return state;
-
-      return { highlight: { ...state.highlight, ...highlight } };
-    });
-
-    return get().highlight;
-  },
-}));
diff --git a/web-console/src/views/explore-view/models/explore-state.ts b/web-console/src/views/explore-view/models/explore-state.ts
new file mode 100644
index 000000000000..71d9ef54d5c7
--- /dev/null
+++ b/web-console/src/views/explore-view/models/explore-state.ts
@@ -0,0 +1,316 @@
+/*
+ * 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 type { Column } from 'druid-query-toolkit';
+import {
+  filterPatternToExpression,
+  SqlExpression,
+  SqlLiteral,
+  SqlQuery,
+} from 'druid-query-toolkit';
+
+import {
+  changeByIndex,
+  deleteKeys,
+  filterOrReturn,
+  isEmpty,
+  mapRecord,
+  mapRecordOrReturn,
+} from '../../../utils';
+import type { Rename } from '../utils';
+import { renameColumnsInExpression } from '../utils';
+
+import { ExpressionMeta } from './expression-meta';
+import type { Measure } from './measure';
+import { ModuleState } from './module-state';
+import { QuerySource } from './query-source';
+
+export type ExploreModuleLayout =
+  | 'single'
+  | 'two-by-two'
+  | 'two-rows'
+  | 'two-columns'
+  | 'three-rows'
+  | 'three-columns'
+  | 'top-row-two-tiles'
+  | 'bottom-row-two-tiles'
+  | 'left-column-two-tiles'
+  | 'right-column-two-tiles'
+  | 'top-row-three-tiles'
+  | 'bottom-row-three-tiles'
+  | 'left-column-three-tiles'
+  | 'right-column-three-tiles';
+
+interface ExploreStateValue {
+  source: string;
+  showSourceQuery?: boolean;
+  where: SqlExpression;
+  moduleStates: Readonly<Record<string, ModuleState>>;
+  layout?: ExploreModuleLayout;
+  hideResources?: boolean;
+  helpers?: readonly ExpressionMeta[];
+  hideHelpers?: boolean;
+}
+
+export class ExploreState {
+  static DEFAULT_STATE: ExploreState;
+  static LAYOUTS: ExploreModuleLayout[] = [
+    'single',
+    'two-by-two',
+    'two-rows',
+    'two-columns',
+    'three-rows',
+    'three-columns',
+    'top-row-two-tiles',
+    'bottom-row-two-tiles',
+    'left-column-two-tiles',
+    'right-column-two-tiles',
+    'top-row-three-tiles',
+    'bottom-row-three-tiles',
+    'left-column-three-tiles',
+    'right-column-three-tiles',
+  ];
+
+  static LAYOUT_TO_NUM_TILES: Record<ExploreModuleLayout, number> = {
+    'single': 1,
+    'two-by-two': 4,
+    'two-rows': 2,
+    'two-columns': 2,
+    'three-rows': 3,
+    'three-columns': 3,
+    'top-row-two-tiles': 3,
+    'bottom-row-two-tiles': 3,
+    'left-column-two-tiles': 3,
+    'right-column-two-tiles': 3,
+    'top-row-three-tiles': 4,
+    'bottom-row-three-tiles': 4,
+    'left-column-three-tiles': 4,
+    'right-column-three-tiles': 4,
+  };
+
+  static fromJS(js: any) {
+    let moduleStatesJS: Readonly<Record<string, any>> = {};
+    if (js.moduleStates) {
+      moduleStatesJS = js.moduleStates;
+    } else if (js.moduleId && js.parameterValues) {
+      moduleStatesJS = { '0': js };
+    }
+    return new ExploreState({
+      ...js,
+      where: SqlExpression.maybeParse(js.where) || SqlLiteral.TRUE,
+      moduleStates: mapRecord(moduleStatesJS, ModuleState.fromJS),
+      helpers: ExpressionMeta.inflateArray(js.helpers || []),
+    });
+  }
+
+  public readonly source: string;
+  public readonly showSourceQuery: boolean;
+  public readonly where: SqlExpression;
+  public readonly moduleStates: Readonly<Record<string, ModuleState>>;
+  public readonly layout?: ExploreModuleLayout;
+  public readonly hideResources: boolean;
+  public readonly helpers: readonly ExpressionMeta[];
+  public readonly hideHelpers: boolean;
+
+  public readonly parsedSource: SqlQuery | undefined;
+  public readonly parseError: string | undefined;
+
+  constructor(value: ExploreStateValue) {
+    this.source = value.source;
+    this.showSourceQuery = Boolean(value.showSourceQuery);
+    this.where = value.where;
+    this.moduleStates = value.moduleStates;
+    this.layout = value.layout;
+    this.hideResources = Boolean(value.hideResources);
+    this.helpers = value.helpers || [];
+    this.hideHelpers = Boolean(value.hideHelpers);
+
+    if (this.source === '') {
+      this.parseError = 'Please select source or enter a source query';
+    } else {
+      try {
+        this.parsedSource = SqlQuery.parse(this.source);
+      } catch (e) {
+        this.parseError = e.message;
+      }
+    }
+  }
+
+  valueOf(): ExploreStateValue {
+    const value: ExploreStateValue = {
+      source: this.source,
+      where: this.where,
+      moduleStates: this.moduleStates,
+      layout: this.layout,
+    };
+    if (this.showSourceQuery) value.showSourceQuery = true;
+    if (this.hideResources) value.hideResources = true;
+    if (this.helpers.length) value.helpers = this.helpers;
+    if (this.hideHelpers) value.hideHelpers = true;
+    return value;
+  }
+
+  public change(newValues: Partial<ExploreStateValue>): ExploreState {
+    return new ExploreState({
+      ...this.valueOf(),
+      ...newValues,
+    });
+  }
+
+  public changeSource(newSource: SqlQuery | string, rename: Rename | undefined): ExploreState {
+    const toChange: Partial<ExploreStateValue> = {
+      source: String(newSource),
+    };
+
+    if (rename) {
+      toChange.where = renameColumnsInExpression(this.where, rename);
+      toChange.moduleStates = mapRecordOrReturn(this.moduleStates, moduleState =>
+        moduleState.applyRename(rename),
+      );
+      toChange.helpers = this.helpers.map(helper => helper.applyRename(rename));
+    }
+
+    return this.change(toChange);
+  }
+
+  public getLayout(): ExploreModuleLayout {
+    return this.layout || 'single';
+  }
+
+  public changeToTable(tableName: string): ExploreState {
+    return this.changeSource(SqlQuery.create(tableName), undefined);
+  }
+
+  public initToTable(tableName: string): ExploreState {
+    const { moduleStates } = this;
+    return this.change({
+      source: SqlQuery.create(tableName).toString(),
+      moduleStates: isEmpty(moduleStates) ? { '0': ModuleState.INIT_STATE } : moduleStates,
+    });
+  }
+
+  public addInitTimeFilterIfNeeded(columns: readonly Column[]): ExploreState {
+    if (!this.parsedSource) return this;
+    if (!QuerySource.isSingleStarQuery(this.parsedSource)) return this; // Only trigger for `SELECT * FROM ...` queries
+    if (!this.where.equals(SqlLiteral.TRUE)) return this;
+
+    // Either find the `__time::TIMESTAMP` column or use the first column if it is a TIMESTAMP
+    const timeColumn =
+      columns.find(c => c.isTimeColumn()) ||
+      (columns[0].sqlType === 'TIMESTAMP' ? columns[0] : undefined);
+    if (!timeColumn) return this;
+
+    return this.change({
+      where: filterPatternToExpression({
+        type: 'timeRelative',
+        column: timeColumn.name,
+        negated: false,
+        anchor: 'maxDataTime',
+        rangeDuration: 'P1D',
+        startBound: '[',
+        endBound: ')',
+      }),
+    });
+  }
+
+  public restrictToQuerySource(querySource: QuerySource): ExploreState {
+    const { where, moduleStates, helpers } = this;
+    const newWhere = querySource.restrictWhere(where);
+    const newModuleStates = mapRecordOrReturn(moduleStates, moduleState =>
+      moduleState.restrictToQuerySource(querySource, newWhere),
+    );
+    const newHelpers = filterOrReturn(helpers, helper =>
+      querySource.validateExpressionMeta(helper),
+    );
+    if (where === newWhere && moduleStates === newModuleStates && helpers === newHelpers)
+      return this;
+
+    return this.change({
+      where: newWhere,
+      moduleStates: newModuleStates,
+      helpers: newHelpers,
+    });
+  }
+
+  public changeModuleState(k: number, moduleState: ModuleState): ExploreState {
+    return this.change({
+      moduleStates: { ...this.moduleStates, [k]: moduleState },
+    });
+  }
+
+  public removeModule(k: number): ExploreState {
+    return this.change({
+      moduleStates: deleteKeys(this.moduleStates, [String(k)]),
+    });
+  }
+
+  public applyShowColumn(column: Column, k = 0): ExploreState {
+    const { moduleStates } = this;
+    return this.change({
+      moduleStates: {
+        ...moduleStates,
+        [k]: (moduleStates[k] || ModuleState.INIT_STATE).applyShowColumn(column),
+      },
+    });
+  }
+
+  public applyShowMeasure(measure: Measure, k = 0): ExploreState {
+    const { moduleStates } = this;
+    return this.change({
+      moduleStates: {
+        ...moduleStates,
+        [k]: (moduleStates[k] || ModuleState.INIT_STATE).applyShowMeasure(measure),
+      },
+    });
+  }
+
+  public removeHelper(index: number): ExploreState {
+    return this.change({ helpers: changeByIndex(this.helpers, index, () => undefined) });
+  }
+
+  public addHelper(helper: ExpressionMeta): ExploreState {
+    return this.change({ helpers: this.helpers.concat(helper) });
+  }
+
+  public getModuleStatesToShow(): (ModuleState | null)[] {
+    const moduleStates = this.moduleStates;
+    const numberToShow = ExploreState.LAYOUT_TO_NUM_TILES[this.getLayout()];
+    const ret: (ModuleState | null)[] = [];
+    for (let i = 0; i < numberToShow; i++) {
+      ret.push(moduleStates[i] || null);
+    }
+    return ret;
+  }
+
+  public isInitState(): boolean {
+    return (
+      this.source === '' &&
+      this.where instanceof SqlLiteral &&
+      isEmpty(this.moduleStates) &&
+      !this.hideResources &&
+      !this.helpers.length &&
+      !this.hideHelpers
+    );
+  }
+}
+
+ExploreState.DEFAULT_STATE = new ExploreState({
+  source: '',
+  where: SqlLiteral.TRUE,
+  moduleStates: {},
+});
diff --git a/web-console/src/views/explore-view/models/expression-meta.ts b/web-console/src/views/explore-view/models/expression-meta.ts
index ac8e07aa8a32..03b20267a792 100644
--- a/web-console/src/views/explore-view/models/expression-meta.ts
+++ b/web-console/src/views/explore-view/models/expression-meta.ts
@@ -57,6 +57,18 @@ export class ExpressionMeta {
     });
   }
 
+  static evaluateSqlType(
+    expression: SqlExpression,
+    columns: readonly Column[] = [],
+  ): string | undefined {
+    if (expression instanceof SqlColumn) {
+      const columnName = expression.getName();
+      const myColumn = columns.find(({ name }) => name === columnName);
+      return myColumn?.sqlType;
+    }
+    return;
+  }
+
   public readonly expression: SqlExpression;
   public readonly as?: string;
 
@@ -94,9 +106,13 @@ export class ExpressionMeta {
     return this.change({ expression });
   }
 
-  public renameInExpression(rename: Map<string, string>): this {
+  public applyRename(rename: Map<string, string>): this {
     const renamedExpression = renameColumnsInExpression(this.expression, rename);
     if (renamedExpression === this.expression) return this;
     return this.changeExpression(renamedExpression);
   }
+
+  public evaluateSqlType(columns?: readonly Column[]): string | undefined {
+    return ExpressionMeta.evaluateSqlType(this.expression, columns);
+  }
 }
diff --git a/web-console/src/views/explore-view/models/index.ts b/web-console/src/views/explore-view/models/index.ts
index 8938818acc20..a49b3de4170f 100644
--- a/web-console/src/views/explore-view/models/index.ts
+++ b/web-console/src/views/explore-view/models/index.ts
@@ -16,9 +16,11 @@
  * limitations under the License.
  */
 
+export * from './explore-state';
 export * from './expression-meta';
 export * from './highlight';
 export * from './measure';
 export * from './measure-pattern';
+export * from './module-state';
 export * from './parameter';
 export * from './query-source';
diff --git a/web-console/src/views/explore-view/models/measure.ts b/web-console/src/views/explore-view/models/measure.ts
index a3aadab89b67..d47d5f76985f 100644
--- a/web-console/src/views/explore-view/models/measure.ts
+++ b/web-console/src/views/explore-view/models/measure.ts
@@ -199,7 +199,15 @@ export class Measure extends ExpressionMeta {
     (this as any).name = this.as || Measure.defaultNameFromExpression(this.expression);
   }
 
-  public equivalent(other: ExpressionMeta | undefined): boolean {
+  public equals(other: Measure | undefined): boolean {
+    return (
+      other instanceof Measure &&
+      this.name === other.name &&
+      this.expression.equals(other.expression)
+    );
+  }
+
+  public equivalent(other: Measure | undefined): boolean {
     if (!other || this.name !== other.name) return false;
 
     if (Measure.getAggregateMeasureName(this.expression) === other.name) {
diff --git a/web-console/src/views/explore-view/models/module-state.ts b/web-console/src/views/explore-view/models/module-state.ts
new file mode 100644
index 000000000000..93959adea6d5
--- /dev/null
+++ b/web-console/src/views/explore-view/models/module-state.ts
@@ -0,0 +1,173 @@
+/*
+ * 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 type { Column, SqlExpression } from 'druid-query-toolkit';
+
+import { isEmpty } from '../../../utils';
+import { ModuleRepository } from '../module-repository/module-repository';
+import type { Rename } from '../utils';
+
+import { ExpressionMeta } from './expression-meta';
+import type { Measure } from './measure';
+import type { ParameterValues } from './parameter';
+import { inflateParameterValues, renameColumnsInParameterValues } from './parameter';
+import type { QuerySource } from './query-source';
+
+interface ModuleStateValue {
+  moduleId: string;
+  parameterValues: ParameterValues;
+  showControls?: boolean;
+}
+
+export class ModuleState {
+  static INIT_STATE: ModuleState;
+
+  static fromJS(js: any) {
+    const inflatedParameterValues = inflateParameterValues(
+      js.parameterValues,
+      ModuleRepository.getModule(js.moduleId)?.parameters || {},
+    );
+    return new ModuleState({
+      ...js,
+      parameterValues: inflatedParameterValues,
+    });
+  }
+
+  public readonly moduleId: string;
+  public readonly parameterValues: ParameterValues;
+  public readonly showControls: boolean;
+
+  constructor(value: ModuleStateValue) {
+    this.moduleId = value.moduleId;
+    this.parameterValues = value.parameterValues;
+    this.showControls = Boolean(value.showControls);
+  }
+
+  valueOf(): ModuleStateValue {
+    const value: ModuleStateValue = {
+      moduleId: this.moduleId,
+      parameterValues: this.parameterValues,
+    };
+    if (this.showControls) value.showControls = true;
+    return value;
+  }
+
+  public change(newValues: Partial<ModuleStateValue>): ModuleState {
+    return new ModuleState({
+      ...this.valueOf(),
+      ...newValues,
+    });
+  }
+
+  public changeParameterValues(parameterValues: ParameterValues): ModuleState {
+    return this.change({ parameterValues });
+  }
+
+  public applyRename(rename: Rename): ModuleState {
+    const module = ModuleRepository.getModule(this.moduleId);
+    if (!module) return this;
+
+    return this.change({
+      parameterValues: renameColumnsInParameterValues(
+        this.parameterValues,
+        module.parameters,
+        rename,
+      ),
+    });
+  }
+
+  public restrictToQuerySource(querySource: QuerySource, where: SqlExpression): ModuleState {
+    const { moduleId, parameterValues } = this;
+    const module = ModuleRepository.getModule(moduleId);
+    if (!module) return this;
+    const newParameterValues = querySource.restrictParameterValues(
+      parameterValues,
+      module.parameters,
+      where,
+    );
+    if (parameterValues === newParameterValues) return this;
+
+    return this.change({
+      parameterValues: newParameterValues,
+    });
+  }
+
+  public applyShowColumn(column: Column): ModuleState {
+    let newModuleId: string;
+    let newParameterValues: ParameterValues = {};
+    if (column.sqlType === 'TIMESTAMP') {
+      newModuleId = 'time-chart';
+    } else if (column.sqlType === 'BOOLEAN') {
+      newModuleId = 'pie-chart';
+      newParameterValues = {
+        splitColumn: ExpressionMeta.fromColumn(column),
+      };
+    } else {
+      newModuleId = 'grouping-table';
+      newParameterValues = {
+        splitColumns: [ExpressionMeta.fromColumn(column)],
+      };
+    }
+
+    return this.change({
+      moduleId: newModuleId,
+      parameterValues: {
+        ...(this.moduleId === newModuleId ? this.parameterValues : {}),
+        ...newParameterValues,
+      },
+    });
+  }
+
+  public applyShowMeasure(measure: Measure): ModuleState {
+    const module = ModuleRepository.getModule(this.moduleId);
+    if (module) {
+      const p = Object.entries(module.parameters).find(
+        ([_, def]) => def.type === 'measure' || def.type === 'measures',
+      );
+      if (p) {
+        const [paramName, def] = p;
+        const { parameterValues } = this;
+        return this.change({
+          parameterValues: {
+            ...parameterValues,
+            [paramName]:
+              def.type === 'measures'
+                ? (parameterValues[paramName] || []).concat(measure)
+                : measure,
+          },
+        });
+      }
+    }
+
+    return this.change({
+      moduleId: 'grouping-table',
+      parameterValues: {
+        measures: [measure],
+      },
+    });
+  }
+
+  public isInitState(): boolean {
+    return this.moduleId === 'record-table' && isEmpty(this.parameterValues);
+  }
+}
+
+ModuleState.INIT_STATE = new ModuleState({
+  moduleId: 'record-table',
+  parameterValues: {},
+});
diff --git a/web-console/src/views/explore-view/models/parameter.ts b/web-console/src/views/explore-view/models/parameter.ts
index a924f901a099..ed021da6f5b7 100644
--- a/web-console/src/views/explore-view/models/parameter.ts
+++ b/web-console/src/views/explore-view/models/parameter.ts
@@ -18,7 +18,9 @@
 
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 
-import { mapRecord, mapRecordIfChanged } from '../../../utils';
+import type { SqlExpression } from 'druid-query-toolkit';
+
+import { deleteKeys, mapRecord, mapRecordOrReturn } from '../../../utils';
 
 import { ExpressionMeta } from './expression-meta';
 import { Measure } from './measure';
@@ -26,13 +28,28 @@ import type { QuerySource } from './query-source';
 
 export type OptionValue = string | number;
 
-export type ModuleFunctor<T> = T | ((options: { parameterValues: ParameterValues }) => T);
+function isOptionValue(v: unknown): v is OptionValue {
+  return typeof v === 'string' || typeof v === 'number';
+}
+
+export type ModuleFunctor<T> =
+  | T
+  | ((options: {
+      querySource: QuerySource | undefined;
+      where: SqlExpression;
+      parameterValues: ParameterValues;
+    }) => T);
 
-export function evaluateFunctor<T>(fn: ModuleFunctor<T>, parameterValues: ParameterValues): T {
-  if (typeof fn === 'function') {
-    return (fn as any)({ parameterValues });
+export function evaluateFunctor<T>(
+  functor: ModuleFunctor<T> | undefined,
+  parameterValues: ParameterValues,
+  querySource: QuerySource | undefined,
+  where: SqlExpression,
+): T | undefined {
+  if (typeof functor === 'function') {
+    return (functor as any)({ where, parameterValues, querySource });
   } else {
-    return fn;
+    return functor;
   }
 }
 
@@ -41,13 +58,15 @@ export interface ParameterTypes {
   boolean: boolean;
   number: number;
   option: OptionValue;
-  options: OptionValue[];
+  options: readonly OptionValue[];
   expression: ExpressionMeta;
-  expressions: ExpressionMeta[];
+  expressions: readonly ExpressionMeta[];
   measure: Measure;
-  measures: Measure[];
+  measures: readonly Measure[];
 }
 
+type OptionLabels = { [key: string | number]: string } | ((x: string) => string);
+
 interface TypedExtensions {
   boolean: {};
   string: {};
@@ -56,12 +75,12 @@ interface TypedExtensions {
     max?: number;
   };
   option: {
-    options: readonly OptionValue[];
-    optionLabels?: { [key: string | number]: string };
+    options: ModuleFunctor<readonly OptionValue[]>;
+    optionLabels?: OptionLabels;
   };
   options: {
-    options: readonly OptionValue[];
-    optionLabels?: { [key: string | number]: string };
+    options: ModuleFunctor<readonly OptionValue[]>;
+    optionLabels?: OptionLabels;
     allowDuplicates?: boolean;
     nonEmpty?: boolean;
   };
@@ -81,33 +100,14 @@ export type TypedParameterDefinition<Type extends keyof ParameterTypes> = TypedE
   label?: ModuleFunctor<string>;
   type: Type;
   transferGroup?: string;
-  defaultValue?:
-    | ParameterTypes[Type]
-    | ((querySource: QuerySource) => ParameterTypes[Type] | undefined);
-
+  defaultValue?: ModuleFunctor<ParameterTypes[Type] | undefined>;
   sticky?: boolean;
   required?: ModuleFunctor<boolean>;
+  important?: boolean;
   description?: ModuleFunctor<string>;
   placeholder?: string;
+  defined?: ModuleFunctor<boolean>;
   visible?: ModuleFunctor<boolean>;
-
-  /**
-   * Validate the value of this parameter.
-   *
-   * @param value - Current parameter value or undefined if no value has been set.
-   * @returns - An error message if the value is invalid, or undefined if the value is valid.
-   */
-  validate?: (value: ParameterTypes[Type] | undefined) => string | undefined;
-
-  /**
-   * Determines whether the parameter should exist in the visual modules parameters.
-   *
-   * If the provided function returns false, the parameter value will be deleted from
-   * the module's parameters. If true, it will be whatever the relative control
-   *
-   * @default undefined
-   */
-  defined?: (options: { parametersValues: Record<string, any> }) => boolean;
 };
 
 export type ParameterDefinition =
@@ -132,20 +132,23 @@ export function getModuleOptionLabel(
   optionValue: OptionValue,
   parameterDefinition: ParameterDefinition,
 ): string {
-  const { optionLabels = {} } = parameterDefinition as any;
-
-  return (
-    optionLabels[optionValue] ??
-    (typeof optionValue === 'string'
-      ? optionValue
-      : typeof optionValue !== 'undefined'
-      ? String(optionValue)
-      : 'Malformed option')
-  );
+  const { optionLabels } = parameterDefinition as any;
+
+  if (typeof optionLabels === 'function') {
+    const l = optionLabels(optionValue);
+    if (typeof l !== 'undefined') return l;
+  }
+
+  if (optionLabels && typeof optionLabels === 'object') {
+    const l = optionLabels[optionValue];
+    if (typeof l !== 'undefined') return l;
+  }
+
+  return typeof optionValue !== 'undefined' ? String(optionValue) : 'Malformed option';
 }
 
 export type ParameterValues = Readonly<Record<string, any>>;
-export type Parameters = Record<string, ParameterDefinition>;
+export type Parameters = Readonly<Record<string, ParameterDefinition>>;
 
 // -----------------------------------------------------
 
@@ -165,26 +168,19 @@ function inflateParameterValue(value: unknown, parameter: ParameterDefinition):
       return Boolean(value);
 
     case 'number': {
-      let v = Number(value);
-      if (isNaN(v)) v = 0;
-      if (typeof parameter.min === 'number') {
-        v = Math.max(v, parameter.min);
-      }
-      if (typeof parameter.max === 'number') {
-        v = Math.min(v, parameter.max);
-      }
+      const v = Number(value);
+      if (isNaN(v)) return;
       return v;
     }
 
-    case 'option':
-      if (!parameter.options || !parameter.options.includes(value as OptionValue)) return;
-      return value as OptionValue;
+    case 'option': {
+      if (!isOptionValue(value)) return;
+      return value;
+    }
 
-    case 'options': {
+    case 'options':
       if (!Array.isArray(value)) return [];
-      const options = parameter.options || [];
-      return value.filter(v => options.includes(v));
-    }
+      return value.filter(isOptionValue);
 
     case 'expression':
       return ExpressionMeta.inflate(value);
@@ -205,6 +201,25 @@ function inflateParameterValue(value: unknown, parameter: ParameterDefinition):
 
 // -----------------------------------------------------
 
+export function removeUndefinedParameterValues(
+  parameterValues: ParameterValues,
+  parameters: Parameters,
+  querySource: QuerySource | undefined,
+  where: SqlExpression,
+): ParameterValues {
+  const keysToRemove = Object.keys(parameterValues).filter(key => {
+    const parameter = parameters[key];
+    if (!parameter) return true;
+    return (
+      typeof parameter.defined !== 'undefined' &&
+      !evaluateFunctor(parameter.defined, parameterValues, querySource, where)
+    );
+  });
+  return keysToRemove.length ? deleteKeys(parameterValues, keysToRemove) : parameterValues;
+}
+
+// -----------------------------------------------------
+
 function defaultForType(parameterType: keyof ParameterTypes): any {
   switch (parameterType) {
     case 'boolean':
@@ -221,21 +236,26 @@ function defaultForType(parameterType: keyof ParameterTypes): any {
 
 export function effectiveParameterDefault(
   parameter: ParameterDefinition,
+  parameterValues: ParameterValues,
   querySource: QuerySource | undefined,
+  where: SqlExpression,
+  previousParameterValue: any,
 ): any {
-  const { defaultValue } = parameter;
-  switch (typeof defaultValue) {
-    case 'function':
-      return (
-        (querySource ? defaultValue(querySource) : undefined) ?? defaultForType(parameter.type)
-      );
-
-    case 'undefined':
-      return defaultForType(parameter.type);
+  if (
+    typeof parameter.defined !== 'undefined' &&
+    evaluateFunctor(parameter.defined, parameterValues, querySource, where) === false
+  ) {
+    return;
+  }
+  const newDefault =
+    evaluateFunctor(parameter.defaultValue, parameterValues, querySource, where) ??
+    defaultForType(parameter.type);
 
-    default:
-      return defaultValue;
+  if (previousParameterValue instanceof Measure && previousParameterValue.equals(newDefault)) {
+    return previousParameterValue;
   }
+
+  return newDefault;
 }
 
 // -----------------------------------------------------
@@ -245,7 +265,7 @@ export function renameColumnsInParameterValues(
   parameters: Parameters,
   rename: Map<string, string>,
 ): ParameterValues {
-  return mapRecordIfChanged(parameterValues, (parameterValue, k) =>
+  return mapRecordOrReturn(parameterValues, (parameterValue, k) =>
     renameColumnsInParameterValue(parameterValue, parameters[k], rename),
   );
 }
@@ -258,10 +278,10 @@ function renameColumnsInParameterValue(
   if (typeof parameterValue !== 'undefined') {
     switch (parameter.type) {
       case 'expression':
-        return (parameterValue as ExpressionMeta).renameInExpression(rename);
+        return (parameterValue as ExpressionMeta).applyRename(rename);
 
       case 'measure':
-        return (parameterValue as Measure).renameInExpression(rename);
+        return (parameterValue as Measure).applyRename(rename);
 
       case 'expressions':
       case 'measures':
diff --git a/web-console/src/views/explore-view/models/query-source.ts b/web-console/src/views/explore-view/models/query-source.ts
index 24c4021d94c4..fa3f047426e1 100644
--- a/web-console/src/views/explore-view/models/query-source.ts
+++ b/web-console/src/views/explore-view/models/query-source.ts
@@ -19,11 +19,12 @@
 import type { Column } from 'druid-query-toolkit';
 import { C, F, SqlColumn, SqlExpression, SqlQuery, SqlStar } from 'druid-query-toolkit';
 
-import { filterMap, mapRecordIfChanged } from '../../../utils';
+import { filterMap, filterOrReturn, mapRecordOrReturn } from '../../../utils';
 
 import { ExpressionMeta } from './expression-meta';
 import { Measure } from './measure';
-import type { ParameterDefinition, Parameters, ParameterValues } from './parameter';
+import type { OptionValue, ParameterDefinition, Parameters, ParameterValues } from './parameter';
+import { evaluateFunctor } from './parameter';
 
 function expressionWithinColumns(ex: SqlExpression, columns: readonly Column[]): boolean {
   const usedColumns = ex.getUsedColumnNames();
@@ -328,15 +329,44 @@ export class QuerySource {
   public restrictParameterValues(
     parameterValues: ParameterValues,
     parameters: Parameters,
+    where: SqlExpression,
   ): ParameterValues {
-    return mapRecordIfChanged(parameterValues, (parameterValue, k) =>
-      this.restrictParameterValue(parameterValue, parameters[k]),
-    );
+    return mapRecordOrReturn(parameterValues, (parameterValue, k) => {
+      const parameter = parameters[k];
+      if (!parameter) return;
+      return this.restrictParameterValue(parameterValue, parameter, where, parameterValues);
+    });
   }
 
-  private restrictParameterValue(parameterValue: any, parameter: ParameterDefinition): any {
+  private restrictParameterValue(
+    parameterValue: any,
+    parameter: ParameterDefinition,
+    where: SqlExpression,
+    parameterValues: ParameterValues,
+  ): any {
     if (typeof parameterValue !== 'undefined') {
       switch (parameter.type) {
+        case 'number': {
+          if (typeof parameter.min === 'number') {
+            parameterValue = Math.max(parameterValue, parameter.min);
+          }
+          if (typeof parameter.max === 'number') {
+            parameterValue = Math.min(parameterValue, parameter.max);
+          }
+          return parameterValue;
+        }
+
+        case 'option': {
+          const options = evaluateFunctor(parameter.options, parameterValues, this, where);
+          if (!options || !options.includes(parameterValue as OptionValue)) return;
+          return parameterValue as OptionValue;
+        }
+
+        case 'options': {
+          const options = evaluateFunctor(parameter.options, {}, this, where) || [];
+          return filterOrReturn<OptionValue>(parameterValue, v => options.includes(v));
+        }
+
         case 'expression':
           if (!this.validateExpressionMeta(parameterValue)) return;
           break;
@@ -345,19 +375,13 @@ export class QuerySource {
           if (!this.validateMeasure(parameterValue)) return;
           break;
 
-        case 'expressions': {
-          const valid = parameterValue.filter((v: ExpressionMeta) =>
+        case 'expressions':
+          return filterOrReturn<ExpressionMeta>(parameterValue, v =>
             this.validateExpressionMeta(v),
           );
-          if (valid.length !== parameterValue.length) return valid;
-          break;
-        }
 
-        case 'measures': {
-          const valid = parameterValue.filter((v: Measure) => this.validateMeasure(v));
-          if (valid.length !== parameterValue.length) return valid;
-          break;
-        }
+        case 'measures':
+          return filterOrReturn<Measure>(parameterValue, v => this.validateMeasure(v));
 
         default:
           break;
diff --git a/web-console/src/views/explore-view/module-repository/module-repository.ts b/web-console/src/views/explore-view/module-repository/module-repository.ts
index 5f82dbc6dfe1..531bf4417130 100644
--- a/web-console/src/views/explore-view/module-repository/module-repository.ts
+++ b/web-console/src/views/explore-view/module-repository/module-repository.ts
@@ -20,14 +20,14 @@ import type { IconName } from '@blueprintjs/icons';
 import type { CancelToken } from 'axios';
 import type { QueryResult, SqlExpression, SqlQuery } from 'druid-query-toolkit';
 
-import type { Stage } from '../../../utils/stage';
+import type { Stage } from '../../../utils';
 import type { ParameterDefinition, QuerySource } from '../models';
 
 interface ModuleDefinition<P> {
   id: string;
   icon: IconName;
   title: string;
-  parameters: Record<keyof P, ParameterDefinition>;
+  parameters: Readonly<Record<keyof P, ParameterDefinition>>;
   component: (props: ModuleComponentProps<P>) => any;
 }
 
diff --git a/web-console/src/views/explore-view/modules/bar-chart-module.tsx b/web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
similarity index 60%
rename from web-console/src/views/explore-view/modules/bar-chart-module.tsx
rename to web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
index 34af0404ee6c..704b869dafbd 100644
--- a/web-console/src/views/explore-view/modules/bar-chart-module.tsx
+++ b/web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
@@ -16,26 +16,31 @@
  * limitations under the License.
  */
 
+import { Button, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { L } from 'druid-query-toolkit';
+import { F, L } from 'druid-query-toolkit';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { Loader } from '../../../components';
-import { useQueryManager } from '../../../hooks';
-import { formatEmpty } from '../../../utils';
-import { Issue } from '../components';
-import { highlightStore } from '../highlight-store/highlight-store';
-import type { ExpressionMeta } from '../models';
-import { ModuleRepository } from '../module-repository/module-repository';
-
-import './record-table-module.scss';
+import { Loader, PortalBubble, type PortalBubbleOpenOn } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
+import { formatEmpty } from '../../../../utils';
+import { Issue } from '../../components';
+import type { ExpressionMeta } from '../../models';
+import { ModuleRepository } from '../../module-repository/module-repository';
+import { updateFilterClause } from '../../utils';
 
 const OVERALL_LABEL = 'Overall';
 
+interface BarChartHighlight extends PortalBubbleOpenOn {
+  dim: number;
+  met: number;
+}
+
 interface BarChartParameterValues {
   splitColumn: ExpressionMeta;
+  timeBucket: string;
   measure: ExpressionMeta;
   measureToSort: ExpressionMeta;
   limit: number;
@@ -51,17 +56,37 @@ ModuleRepository.registerModule<BarChartParameterValues>({
       label: 'Bar column',
       transferGroup: 'show',
       required: true,
+      important: true,
     },
+    timeBucket: {
+      type: 'option',
+      label: 'Time bucket',
+      options: ['PT1M', 'PT5M', 'PT1H', 'P1D', 'P1M'],
+      optionLabels: {
+        PT1M: '1 minute',
+        PT5M: '5 minutes',
+        PT1H: '1 hour',
+        P1D: '1 day',
+        P1M: '1 month',
+      },
+      defaultValue: 'PT1H',
+      important: true,
+      defined: ({ parameterValues, querySource }) =>
+        parameterValues.splitColumn?.evaluateSqlType(querySource?.columns) === 'TIMESTAMP',
+    },
+
     measure: {
       type: 'measure',
       label: 'Measure to show',
       transferGroup: 'show-agg',
-      defaultValue: querySource => querySource.getFirstAggregateMeasure(),
+      defaultValue: ({ querySource }) => querySource?.getFirstAggregateMeasure(),
       required: true,
+      important: true,
     },
     measureToSort: {
       type: 'measure',
-      label: 'Measure to sort (default to shown)',
+      label: 'Measure to sort',
+      description: 'Default to shown measure',
     },
     limit: {
       type: 'number',
@@ -72,25 +97,34 @@ ModuleRepository.registerModule<BarChartParameterValues>({
   },
   component: function BarChartModule(props) {
     const { querySource, where, setWhere, parameterValues, stage, runSqlQuery } = props;
+    const containerRef = useRef<HTMLDivElement>();
     const chartRef = useRef<ECharts>();
+    const [highlight, setHighlight] = useState<BarChartHighlight | undefined>();
 
-    const { splitColumn, measure, measureToSort, limit } = parameterValues;
+    const { splitColumn, timeBucket, measure, measureToSort, limit } = parameterValues;
 
     const dataQuery = useMemo(() => {
       const splitExpression = splitColumn ? splitColumn.expression : L(OVERALL_LABEL);
 
       return querySource
         .getInitQuery(where)
-        .addSelect(splitExpression.as('dim'), { addToGroupBy: 'end' })
+        .addSelect(
+          splitExpression.applyIf(timeBucket, ex => F.timeFloor(ex, timeBucket)).as('dim'),
+          {
+            addToGroupBy: 'end',
+            addToOrderBy: !measureToSort && timeBucket ? 'end' : undefined,
+            direction: 'ASC',
+          },
+        )
         .addSelect(measure.expression.as('met'), {
-          addToOrderBy: measureToSort ? undefined : 'end',
+          addToOrderBy: !measureToSort && !timeBucket ? 'end' : undefined,
           direction: 'DESC',
         })
         .applyIf(measureToSort, q =>
           q.addOrderBy(measureToSort.expression.toOrderByExpression('DESC')),
         )
         .changeLimitValue(limit);
-    }, [querySource, where, splitColumn, measure, measureToSort, limit]);
+    }, [querySource, where, splitColumn, timeBucket, measure, measureToSort, limit]);
 
     const [sourceDataState, queryManager] = useQueryManager({
       query: dataQuery,
@@ -155,23 +189,36 @@ ModuleRepository.registerModule<BarChartParameterValues>({
 
         const [x, y] = myChart.convertToPixel({ seriesIndex: 0 }, [dim, met]);
 
-        highlightStore.getState().setHighlight({
-          label: formatEmpty(label),
-          x,
+        setHighlight({
+          title: formatEmpty(label),
+          x: x,
           y: y - 20,
-          data: [dim, met],
-          onDrop: () => {
-            highlightStore.getState().dropHighlight();
-          },
-          onSave:
-            label !== OVERALL_LABEL
-              ? () => {
-                  if (splitColumn) {
-                    setWhere(where.toggleClauseInWhere(splitColumn.expression.equal(label)));
-                  }
-                  highlightStore.getState().dropHighlight();
-                }
-              : undefined,
+          dim,
+          met,
+          text: (
+            <div className="button-bar">
+              {label !== OVERALL_LABEL && (
+                <Button
+                  text="Zoom in"
+                  intent={Intent.PRIMARY}
+                  small
+                  onClick={() => {
+                    if (splitColumn) {
+                      setWhere(updateFilterClause(where, splitColumn.expression.equal(label)));
+                    }
+                    setHighlight(undefined);
+                  }}
+                />
+              )}
+              <Button
+                text="Close"
+                small
+                onClick={() => {
+                  setHighlight(undefined);
+                }}
+              />
+            </div>
+          ),
         });
       });
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -184,12 +231,12 @@ ModuleRepository.registerModule<BarChartParameterValues>({
 
       // if there is a highlight, update its x position
       // by calculating new pixel position from the highlight's data
-      const highlight = highlightStore.getState().highlight;
       if (highlight) {
-        const [x, y] = myChart.convertToPixel({ seriesIndex: 0 }, highlight.data as number[]);
+        const [x, y] = myChart.convertToPixel({ seriesIndex: 0 }, [highlight.dim, highlight.met]);
 
-        highlightStore.getState().updateHighlight({
-          x,
+        setHighlight({
+          ...highlight,
+          x: x,
           y: y - 20,
         });
       }
@@ -202,6 +249,7 @@ ModuleRepository.registerModule<BarChartParameterValues>({
           className="echart-container"
           ref={container => {
             if (chartRef.current || !container) return;
+            containerRef.current = container;
             chartRef.current = setupChart(container);
           }}
         />
@@ -209,6 +257,11 @@ ModuleRepository.registerModule<BarChartParameterValues>({
         {sourceDataState.loading && (
           <Loader cancelText="Cancel query" onCancel={() => queryManager.cancelCurrent()} />
         )}
+        <PortalBubble
+          className="module-bubble"
+          openOn={highlight}
+          offsetElement={containerRef.current}
+        />
       </div>
     );
   },
diff --git a/web-console/src/views/explore-view/modules/grouping-table-module.scss b/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.scss
similarity index 100%
rename from web-console/src/views/explore-view/modules/grouping-table-module.scss
rename to web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.scss
diff --git a/web-console/src/views/explore-view/modules/grouping-table-module.tsx b/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
similarity index 92%
rename from web-console/src/views/explore-view/modules/grouping-table-module.tsx
rename to web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
index 81e7d1924799..5dbff04b7d07 100644
--- a/web-console/src/views/explore-view/modules/grouping-table-module.tsx
+++ b/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
@@ -22,12 +22,12 @@ import type { SqlExpression, SqlOrderByDirection, SqlQuery } from 'druid-query-t
 import { C, F } from 'druid-query-toolkit';
 import { useMemo } from 'react';
 
-import { Loader } from '../../../components';
-import { useQueryManager } from '../../../hooks';
-import { formatInteger } from '../../../utils';
-import { calculateInitPageSize, GenericOutputTable } from '../components';
-import type { ExpressionMeta, Measure } from '../models';
-import { ModuleRepository } from '../module-repository/module-repository';
+import { Loader } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
+import { formatInteger } from '../../../../utils';
+import { calculateInitPageSize, GenericOutputTable } from '../../components';
+import type { ExpressionMeta, Measure } from '../../models';
+import { ModuleRepository } from '../../module-repository/module-repository';
 import type {
   Compare,
   CompareStrategy,
@@ -35,8 +35,8 @@ import type {
   MultipleValueMode,
   QueryAndHints,
   RestrictTop,
-} from '../utils';
-import { DEFAULT_TOP_VALUES_K, makeTableQueryAndHints } from '../utils';
+} from '../../utils';
+import { DEFAULT_TOP_VALUES_K, makeTableQueryAndHints } from '../../utils';
 
 import './grouping-table-module.scss';
 
@@ -78,6 +78,7 @@ ModuleRepository.registerModule<GroupingTableParameterValues>({
       label: 'Group by',
       transferGroup: 'show',
       defaultValue: [],
+      important: true,
     },
 
     timeBucket: {
@@ -92,8 +93,11 @@ ModuleRepository.registerModule<GroupingTableParameterValues>({
         P1M: '1 month',
       },
       defaultValue: 'PT1H',
-      visible: ({ parameterValues }) =>
-        (parameterValues.splitColumns || []).some((c: any) => c.name === '__time'),
+      important: true,
+      defined: ({ parameterValues, querySource }) =>
+        (parameterValues.splitColumns || []).some(
+          (c: ExpressionMeta) => c.evaluateSqlType(querySource?.columns) === 'TIMESTAMP',
+        ),
     },
 
     showColumns: {
@@ -129,8 +133,9 @@ ModuleRepository.registerModule<GroupingTableParameterValues>({
     measures: {
       type: 'measures',
       transferGroup: 'show-agg',
-      defaultValue: querySource => querySource.getFirstAggregateMeasureArray(),
+      defaultValue: ({ querySource }) => querySource?.getFirstAggregateMeasureArray(),
       nonEmpty: true,
+      important: true,
     },
 
     compares: {
diff --git a/web-console/src/views/explore-view/modules/index.ts b/web-console/src/views/explore-view/modules/index.ts
index 3d8a063b104e..74cc85924ffb 100644
--- a/web-console/src/views/explore-view/modules/index.ts
+++ b/web-console/src/views/explore-view/modules/index.ts
@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import './grouping-table-module';
-import './record-table-module';
-import './time-chart-module';
-import './bar-chart-module';
-import './pie-chart-module';
-import './multi-axis-chart-module';
+import './grouping-table-module/grouping-table-module';
+import './record-table-module/record-table-module';
+import './time-chart-module/time-chart-module';
+import './bar-chart-module/bar-chart-module';
+import './pie-chart-module/pie-chart-module';
+import './multi-axis-chart-module/multi-axis-chart-module';
diff --git a/web-console/src/views/explore-view/modules/multi-axis-chart-module.tsx b/web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
similarity index 70%
rename from web-console/src/views/explore-view/modules/multi-axis-chart-module.tsx
rename to web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
index 3c3f4c48e646..e4009ab02d25 100644
--- a/web-console/src/views/explore-view/modules/multi-axis-chart-module.tsx
+++ b/web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
@@ -16,33 +16,38 @@
  * limitations under the License.
  */
 
+import { Button, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Duration, Timezone } from 'chronoshift';
 import type { SqlQuery } from 'druid-query-toolkit';
 import { C, F, L } from 'druid-query-toolkit';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { Loader } from '../../../components';
-import { useQueryManager } from '../../../hooks';
+import { Loader, PortalBubble, type PortalBubbleOpenOn } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
 import {
-  Duration,
   formatInteger,
+  formatIsoDateRange,
   formatNumber,
+  getAutoGranularity,
   prettyFormatIsoDateTick,
   prettyFormatIsoDateWithMsIfNeeded,
-} from '../../../utils';
-import { Issue } from '../components';
-import { highlightStore } from '../highlight-store/highlight-store';
-import type { ExpressionMeta } from '../models';
-import { ModuleRepository } from '../module-repository/module-repository';
-import { DATE_FORMAT, getAutoGranularity } from '../utils';
+} from '../../../../utils';
+import { Issue } from '../../components';
+import type { ExpressionMeta } from '../../models';
+import { ModuleRepository } from '../../module-repository/module-repository';
+import { updateFilterClause } from '../../utils';
 
-import './record-table-module.scss';
+interface MultiAxisChartHighlight extends PortalBubbleOpenOn {
+  start: Date;
+  end: Date;
+}
 
 interface MultiAxisChartParameterValues {
-  timeGranularity: string;
   measures: ExpressionMeta[];
+  granularity: string;
 }
 
 ModuleRepository.registerModule<MultiAxisChartParameterValues>({
@@ -50,38 +55,33 @@ ModuleRepository.registerModule<MultiAxisChartParameterValues>({
   title: 'Multi-axis chart',
   icon: IconNames.SERIES_ADD,
   parameters: {
-    timeGranularity: {
-      type: 'option',
-      options: ['auto', 'PT1M', 'PT5M', 'PT30M', 'PT1H', 'P1D'],
-      optionLabels: {
-        auto: 'Auto',
-        PT1M: 'Minute',
-        PT5M: '5 minutes',
-        PT30M: '30 minutes',
-        PT1H: 'Hour',
-        PT6H: '6 hours',
-        P1D: 'Day',
-      },
-      defaultValue: 'auto',
-    },
     measures: {
       type: 'measures',
       label: 'Measures to show',
       transferGroup: 'show',
-      defaultValue: querySource => querySource.getFirstAggregateMeasureArray(),
+      defaultValue: ({ querySource }) => querySource?.getFirstAggregateMeasureArray(),
       nonEmpty: true,
       required: true,
+      important: true,
+    },
+    granularity: {
+      type: 'option',
+      options: ['auto', 'PT1M', 'PT5M', 'PT30M', 'PT1H', 'P1D'],
+      optionLabels: g => (g === 'auto' ? 'Auto' : new Duration(g).getDescription(true)),
+      defaultValue: 'auto',
     },
   },
   component: function MultiAxisChartModule(props) {
     const { querySource, where, setWhere, parameterValues, stage, runSqlQuery } = props;
+    const containerRef = useRef<HTMLDivElement>();
     const chartRef = useRef<ECharts>();
+    const [highlight, setHighlight] = useState<MultiAxisChartHighlight | undefined>();
 
     const timeColumnName = querySource.columns.find(column => column.sqlType === 'TIMESTAMP')?.name;
     const timeGranularity =
-      parameterValues.timeGranularity === 'auto'
-        ? getAutoGranularity(where, timeColumnName || '__time')
-        : parameterValues.timeGranularity;
+      parameterValues.granularity === 'auto'
+        ? getAutoGranularity(where, timeColumnName || '__time', 200)
+        : parameterValues.granularity;
 
     const { measures } = parameterValues;
 
@@ -218,6 +218,8 @@ ModuleRepository.registerModule<MultiAxisChartParameterValues>({
         },
       );
 
+      myChart.off('brush');
+
       myChart.on('brush', (params: any) => {
         if (!params.areas.length) return;
 
@@ -225,73 +227,58 @@ ModuleRepository.registerModule<MultiAxisChartParameterValues>({
         // the positioning is done with the true coordinates until the user
         // releases the mouse button (in the `brushend` event)
         const duration = new Duration(timeGranularity);
-        const start = duration.round(params.areas[0].coordRange[0], 'Etc/UTC');
-        const end = duration.round(params.areas[0].coordRange[1], 'Etc/UTC');
+        const start = duration.round(params.areas[0].coordRange[0], Timezone.UTC);
+        const end = duration.round(params.areas[0].coordRange[1], Timezone.UTC);
 
         const x0 = myChart.convertToPixel({ xAxisIndex: 0 }, params.areas[0].coordRange[0]);
         const x1 = myChart.convertToPixel({ xAxisIndex: 0 }, params.areas[0].coordRange[1]);
 
-        highlightStore.getState().setHighlight({
-          label: DATE_FORMAT.formatRange(start, end),
-          x: x0 + (x1 - x0) / 2,
-          y: 40,
-          data: { start, end },
-          onDrop: () => {
-            highlightStore.getState().dropHighlight();
-            myChart.dispatchAction({
-              type: 'brush',
-              command: 'clear',
-              areas: [],
-            });
-          },
-          onSave: () => {
-            if (!timeColumnName) return;
-            setWhere(
-              where.changeClauseInWhere(
-                F(
-                  'TIME_IN_INTERVAL',
-                  C(timeColumnName),
-                  `${start.toISOString()}/${end.toISOString()}`,
-                ),
-              ),
-            );
-            highlightStore.getState().dropHighlight();
-            myChart.dispatchAction({
-              type: 'brush',
-              command: 'clear',
-              areas: [],
-            });
-          },
-        });
-      });
-
-      // once the user is done selecting a range, this will snap the start and end
-      myChart.on('brushend', () => {
-        const highlight = highlightStore.getState().highlight;
-        if (!highlight) return;
-
-        // this is already snapped
-        const { start, end } = highlight.data;
-
-        const x0 = myChart.convertToPixel({ xAxisIndex: 0 }, start);
-        const x1 = myChart.convertToPixel({ xAxisIndex: 0 }, end);
-
-        // positions the bubble on the snapped start and end
-        highlightStore.getState().updateHighlight({
-          x: x0 + (x1 - x0) / 2,
-        });
-
-        // gives the chart the snapped range to highlight
-        // (will replace the area the user just selected)
-        myChart.dispatchAction({
-          type: 'brush',
-          areas: [
-            {
-              brushType: 'lineX',
-              coordRange: [start, end],
-              xAxisIndex: 0,
-            },
-          ],
+        setHighlight({
+          title: formatIsoDateRange(start, end),
+          x: (x0 + x1) / 2,
+          y: 50,
+          start,
+          end,
+          text: (
+            <div className="button-bar">
+              <Button
+                text="Zoom in"
+                intent={Intent.PRIMARY}
+                small
+                onClick={() => {
+                  if (!timeColumnName) return;
+                  setWhere(
+                    updateFilterClause(
+                      where,
+                      F(
+                        'TIME_IN_INTERVAL',
+                        C(timeColumnName),
+                        `${start.toISOString()}/${end.toISOString()}`,
+                      ),
+                    ),
+                  );
+                  setHighlight(undefined);
+                  myChart.dispatchAction({
+                    type: 'brush',
+                    command: 'clear',
+                    areas: [],
+                  });
+                }}
+              />
+              <Button
+                text="Close"
+                small
+                onClick={() => {
+                  setHighlight(undefined);
+                  myChart.dispatchAction({
+                    type: 'brush',
+                    command: 'clear',
+                    areas: [],
+                  });
+                }}
+              />
+            </div>
+          ),
         });
       });
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -304,15 +291,15 @@ ModuleRepository.registerModule<MultiAxisChartParameterValues>({
 
       // if there is a highlight, update its x position
       // by calculating new pixel position from the highlight's data
-      const highlight = highlightStore.getState().highlight;
       if (highlight) {
-        const { start, end } = highlight.data;
+        const { start, end } = highlight;
 
         const x0 = myChart.convertToPixel({ xAxisIndex: 0 }, start);
         const x1 = myChart.convertToPixel({ xAxisIndex: 0 }, end);
 
-        highlightStore.getState().updateHighlight({
-          x: x0 + (x1 - x0) / 2,
+        setHighlight({
+          ...highlight,
+          x: (x0 + x1) / 2,
         });
       }
     }, [stage]);
@@ -324,6 +311,7 @@ ModuleRepository.registerModule<MultiAxisChartParameterValues>({
           className="echart-container"
           ref={container => {
             if (chartRef.current || !container) return;
+            containerRef.current = container;
             chartRef.current = setupChart(container);
           }}
         />
@@ -331,6 +319,11 @@ ModuleRepository.registerModule<MultiAxisChartParameterValues>({
         {sourceDataState.loading && (
           <Loader cancelText="Cancel query" onCancel={() => queryManager.cancelCurrent()} />
         )}
+        <PortalBubble
+          className="module-bubble"
+          openOn={highlight}
+          offsetElement={containerRef.current}
+        />
       </div>
     );
   },
diff --git a/web-console/src/views/explore-view/modules/pie-chart-module.tsx b/web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
similarity index 74%
rename from web-console/src/views/explore-view/modules/pie-chart-module.tsx
rename to web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
index d90dfbeae606..ec1e36dd01db 100644
--- a/web-console/src/views/explore-view/modules/pie-chart-module.tsx
+++ b/web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
@@ -16,21 +16,20 @@
  * limitations under the License.
  */
 
+import { Button, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { C, L } from 'druid-query-toolkit';
+import { C, F, L } from 'druid-query-toolkit';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { Loader } from '../../../components';
-import { useQueryManager } from '../../../hooks';
-import { formatEmpty, formatNumber } from '../../../utils';
-import { Issue } from '../components';
-import { highlightStore } from '../highlight-store/highlight-store';
-import type { ExpressionMeta } from '../models';
-import { ModuleRepository } from '../module-repository/module-repository';
-
-import './record-table-module.scss';
+import { Loader, PortalBubble, type PortalBubbleOpenOn } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
+import { formatEmpty, formatNumber } from '../../../../utils';
+import { Issue } from '../../components';
+import type { ExpressionMeta } from '../../models';
+import { ModuleRepository } from '../../module-repository/module-repository';
+import { updateFilterClause } from '../../utils';
 
 const OVERALL_LABEL = 'Overall';
 
@@ -54,6 +53,11 @@ function getCentroid(chart: echarts.ECharts, dataIndex: number) {
   return { x, y };
 }
 
+interface PieChartHighlight extends PortalBubbleOpenOn {
+  name: string;
+  dataIndex: number;
+}
+
 interface PieChartParameterValues {
   splitColumn: ExpressionMeta;
   measure: ExpressionMeta;
@@ -71,12 +75,14 @@ ModuleRepository.registerModule<PieChartParameterValues>({
       label: 'Slice column',
       transferGroup: 'show',
       required: true,
+      important: true,
     },
     measure: {
       type: 'measure',
       transferGroup: 'show',
-      defaultValue: querySource => querySource.getFirstAggregateMeasure(),
+      defaultValue: ({ querySource }) => querySource?.getFirstAggregateMeasure(),
       required: true,
+      important: true,
     },
     limit: {
       type: 'number',
@@ -92,7 +98,9 @@ ModuleRepository.registerModule<PieChartParameterValues>({
   },
   component: function PieChartModule(props) {
     const { querySource, where, setWhere, parameterValues, stage, runSqlQuery } = props;
+    const containerRef = useRef<HTMLDivElement>();
     const chartRef = useRef<ECharts>();
+    const [highlight, setHighlight] = useState<PieChartHighlight | undefined>();
 
     const { splitColumn, measure, limit, showOthers } = parameterValues;
 
@@ -102,7 +110,7 @@ ModuleRepository.registerModule<PieChartParameterValues>({
       return {
         mainQuery: querySource
           .getInitQuery(where)
-          .addSelect(splitExpression.as('name'), { addToGroupBy: 'end' })
+          .addSelect(F.cast(splitExpression, 'VARCHAR').as('name'), { addToGroupBy: 'end' })
           .addSelect(measure.expression.as('value'), {
             addToOrderBy: 'end',
             direction: 'DESC',
@@ -191,31 +199,47 @@ ModuleRepository.registerModule<PieChartParameterValues>({
       });
 
       myChart.on('click', 'series', p => {
-        if (highlightStore.getState().highlight?.data.name === p.name) {
-          highlightStore.getState().dropHighlight();
+        if (highlight?.name === p.name) {
+          setHighlight(undefined);
           return;
         }
 
         const centroid = getCentroid(myChart, p.dataIndex);
-
         if (!centroid) return;
 
         const { name, value, __isOthers } = p.data as any;
 
-        highlightStore.getState().setHighlight({
-          label: formatEmpty(name) + ': ' + formatNumber(value),
+        setHighlight({
+          title: formatEmpty(name),
           x: centroid.x,
           y: centroid.y - 20,
-          data: { name, value, dataIndex: p.dataIndex },
-          onDrop: () => {
-            highlightStore.getState().dropHighlight();
-          },
-          onSave: __isOthers
-            ? undefined
-            : () => {
-                setWhere(where.toggleClauseInWhere(C(splitColumn.name).equal(name)));
-                highlightStore.getState().dropHighlight();
-              },
+          name,
+          dataIndex: p.dataIndex,
+          text: (
+            <>
+              {formatNumber(value)}
+              <div className="button-bar">
+                {!__isOthers && (
+                  <Button
+                    text="Zoom in"
+                    intent={Intent.PRIMARY}
+                    small
+                    onClick={() => {
+                      setWhere(updateFilterClause(where, C(splitColumn.name).equal(name)));
+                      setHighlight(undefined);
+                    }}
+                  />
+                )}
+                <Button
+                  text="Close"
+                  small
+                  onClick={() => {
+                    setHighlight(undefined);
+                  }}
+                />
+              </div>
+            </>
+          ),
         });
       });
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -228,15 +252,15 @@ ModuleRepository.registerModule<PieChartParameterValues>({
 
       // if there is a highlight, update its x position
       // by calculating new pixel position from the highlight's data
-      const highlight = highlightStore.getState().highlight;
       if (highlight) {
-        const { dataIndex } = highlight.data;
+        const { dataIndex } = highlight;
 
         const centroid = getCentroid(myChart, dataIndex);
 
         if (!centroid) return;
 
-        highlightStore.getState().updateHighlight({
+        setHighlight({
+          ...highlight,
           x: centroid.x,
           y: centroid.y - 20,
         });
@@ -250,6 +274,7 @@ ModuleRepository.registerModule<PieChartParameterValues>({
           className="echart-container"
           ref={container => {
             if (chartRef.current || !container) return;
+            containerRef.current = container;
             chartRef.current = setupChart(container);
           }}
         />
@@ -257,6 +282,11 @@ ModuleRepository.registerModule<PieChartParameterValues>({
         {sourceDataState.loading && (
           <Loader cancelText="Cancel query" onCancel={() => queryManager.cancelCurrent()} />
         )}
+        <PortalBubble
+          className="module-bubble"
+          openOn={highlight}
+          offsetElement={containerRef.current}
+        />
       </div>
     );
   },
diff --git a/web-console/src/views/explore-view/modules/record-table-module.scss b/web-console/src/views/explore-view/modules/record-table-module/record-table-module.scss
similarity index 100%
rename from web-console/src/views/explore-view/modules/record-table-module.scss
rename to web-console/src/views/explore-view/modules/record-table-module/record-table-module.scss
diff --git a/web-console/src/views/explore-view/modules/record-table-module.tsx b/web-console/src/views/explore-view/modules/record-table-module/record-table-module.tsx
similarity index 91%
rename from web-console/src/views/explore-view/modules/record-table-module.tsx
rename to web-console/src/views/explore-view/modules/record-table-module/record-table-module.tsx
index d7a812e4c167..275b2c97c2eb 100644
--- a/web-console/src/views/explore-view/modules/record-table-module.tsx
+++ b/web-console/src/views/explore-view/modules/record-table-module/record-table-module.tsx
@@ -20,12 +20,12 @@ import { IconNames } from '@blueprintjs/icons';
 import { C, SqlQuery } from 'druid-query-toolkit';
 import { useMemo } from 'react';
 
-import { Loader } from '../../../components';
-import { useQueryManager } from '../../../hooks';
-import type { ColumnHint } from '../../../utils';
-import { filterMap } from '../../../utils';
-import { calculateInitPageSize, GenericOutputTable } from '../components';
-import { ModuleRepository } from '../module-repository/module-repository';
+import { Loader } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
+import type { ColumnHint } from '../../../../utils';
+import { filterMap } from '../../../../utils';
+import { calculateInitPageSize, GenericOutputTable } from '../../components';
+import { ModuleRepository } from '../../module-repository/module-repository';
 
 import './record-table-module.scss';
 
diff --git a/web-console/src/views/explore-view/modules/time-chart-module.tsx b/web-console/src/views/explore-view/modules/time-chart-module.tsx
deleted file mode 100644
index a07455b547a5..000000000000
--- a/web-console/src/views/explore-view/modules/time-chart-module.tsx
+++ /dev/null
@@ -1,451 +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 { IconNames } from '@blueprintjs/icons';
-import { C, F, L, SqlCase } from 'druid-query-toolkit';
-import type { ECharts } from 'echarts';
-import * as echarts from 'echarts';
-import { useEffect, useMemo, useRef } from 'react';
-
-import { Loader } from '../../../components';
-import { useQueryManager } from '../../../hooks';
-import {
-  Duration,
-  formatInteger,
-  formatNumber,
-  prettyFormatIsoDateTick,
-  prettyFormatIsoDateWithMsIfNeeded,
-} from '../../../utils';
-import { Issue } from '../components';
-import { highlightStore } from '../highlight-store/highlight-store';
-import type { ExpressionMeta } from '../models';
-import { ModuleRepository } from '../module-repository/module-repository';
-import { DATE_FORMAT, getAutoGranularity } from '../utils';
-
-import './record-table-module.scss';
-
-const TIME_NAME = '__t__';
-const METRIC_NAME = '__met__';
-const STACK_NAME = '__stack__';
-const OTHERS_VALUE = 'Others';
-
-function transformData(data: any[], vs: string[]): Record<string, number>[] {
-  const zeroDatum = Object.fromEntries(vs.map(v => [v, 0]));
-
-  let lastTime = -1;
-  let lastDatum: Record<string, number> | undefined;
-  const ret = [];
-  for (const d of data) {
-    const t = d[TIME_NAME];
-    if (t.valueOf() !== lastTime) {
-      if (lastDatum) ret.push(lastDatum);
-      lastTime = t.valueOf();
-      lastDatum = { ...zeroDatum, [TIME_NAME]: t };
-    }
-    lastDatum![d[STACK_NAME]] = d[METRIC_NAME];
-  }
-  if (lastDatum) ret.push(lastDatum);
-  return ret;
-}
-
-interface TimeChartParameterValues {
-  timeGranularity: string;
-  splitColumn?: ExpressionMeta;
-  numberToStack: number;
-  showOthers: boolean;
-  measure: ExpressionMeta;
-  snappyHighlight: boolean;
-}
-
-ModuleRepository.registerModule<TimeChartParameterValues>({
-  id: 'time-chart',
-  title: 'Time chart',
-  icon: IconNames.TIMELINE_LINE_CHART,
-  parameters: {
-    timeGranularity: {
-      type: 'option',
-      options: ['auto', 'PT1M', 'PT5M', 'PT30M', 'PT1H', 'P1D'],
-      defaultValue: 'auto',
-      optionLabels: {
-        auto: 'Auto',
-        PT1M: 'Minute',
-        PT5M: '5 minutes',
-        PT30M: '30 minutes',
-        PT1H: 'Hour',
-        PT6H: '6 hours',
-        P1D: 'Day',
-      },
-    },
-    splitColumn: {
-      type: 'expression',
-      label: 'Stack by',
-      transferGroup: 'show',
-    },
-    numberToStack: {
-      type: 'number',
-      label: 'Max stacks',
-      defaultValue: 7,
-      min: 2,
-      required: true,
-      visible: ({ parameterValues }) => Boolean(parameterValues.splitColumn),
-    },
-    showOthers: {
-      type: 'boolean',
-      defaultValue: true,
-      visible: ({ parameterValues }) => Boolean(parameterValues.splitColumn),
-    },
-    measure: {
-      type: 'measure',
-      label: 'Measure to show',
-      transferGroup: 'show-agg',
-      defaultValue: querySource => querySource.getFirstAggregateMeasure(),
-      required: true,
-    },
-    snappyHighlight: {
-      type: 'boolean',
-      label: 'Snap highlight to granularity',
-      defaultValue: true,
-      sticky: true,
-    },
-  },
-  component: function TimeChartModule(props) {
-    const { querySource, where, setWhere, parameterValues, stage, runSqlQuery } = props;
-    const chartRef = useRef<ECharts>();
-
-    const timeColumnName = querySource.columns.find(column => column.sqlType === 'TIMESTAMP')?.name;
-    const timeGranularity =
-      parameterValues.timeGranularity === 'auto'
-        ? getAutoGranularity(where, timeColumnName || '__time')
-        : parameterValues.timeGranularity;
-
-    const { splitColumn, numberToStack, showOthers, measure, snappyHighlight } = parameterValues;
-
-    const dataQuery = useMemo(() => {
-      return {
-        initQuery: querySource.getInitQuery(where),
-        measure,
-        splitExpression: splitColumn?.expression,
-        numberToStack,
-        showOthers,
-      };
-    }, [querySource, where, measure, splitColumn, numberToStack, showOthers]);
-
-    const [sourceDataState, queryManager] = useQueryManager({
-      query: dataQuery,
-      processQuery: async (
-        { initQuery, measure, splitExpression, numberToStack, showOthers },
-        cancelToken,
-      ) => {
-        if (!timeColumnName) {
-          throw new Error(`Must have a column of type TIMESTAMP for the time chart to work`);
-        }
-
-        const vs = splitExpression
-          ? (
-              await runSqlQuery(
-                initQuery
-                  .addSelect(splitExpression.as('v'), { addToGroupBy: 'end' })
-                  .changeOrderByExpression(measure.expression.toOrderByExpression('DESC'))
-                  .changeLimitValue(numberToStack),
-                cancelToken,
-              )
-            ).getColumnByIndex(0)!
-          : undefined;
-
-        cancelToken.throwIfRequested();
-
-        const dataset = (
-          await runSqlQuery(
-            initQuery
-              .applyIf(splitExpression && vs && !showOthers, q =>
-                q.addWhere(splitExpression!.in(vs!)),
-              )
-              .addSelect(F.timeFloor(C(timeColumnName), L(timeGranularity)).as(TIME_NAME), {
-                addToGroupBy: 'end',
-                addToOrderBy: 'end',
-                direction: 'ASC',
-              })
-              .applyIf(splitExpression, q => {
-                if (!splitExpression || !vs) return q; // Should never get here, doing this to make peace between eslint and TS
-                return q.addSelect(
-                  (showOthers
-                    ? SqlCase.ifThenElse(splitExpression.in(vs), splitExpression, L(OTHERS_VALUE))
-                    : splitExpression
-                  ).as(STACK_NAME),
-                  { addToGroupBy: 'end' },
-                );
-              })
-              .addSelect(measure.expression.as(METRIC_NAME)),
-            cancelToken,
-          )
-        ).toObjectArray();
-
-        const effectiveVs = vs && showOthers ? vs.concat(OTHERS_VALUE) : vs;
-        return {
-          effectiveVs,
-          sourceData: effectiveVs ? transformData(dataset, effectiveVs) : dataset,
-          measure,
-        };
-      },
-    });
-
-    function setupChart(container: HTMLDivElement) {
-      const myChart = echarts.init(container, 'dark');
-
-      myChart.setOption({
-        dataset: {
-          dimensions: [],
-          source: [],
-        },
-        tooltip: {
-          trigger: 'axis',
-          transitionDuration: 0,
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985',
-              formatter(d: any) {
-                if (d.axisDimension === 'x') {
-                  return prettyFormatIsoDateWithMsIfNeeded(new Date(d.value).toISOString());
-                } else {
-                  return Math.abs(d.value) < 1 ? formatNumber(d.value) : formatInteger(d.value);
-                }
-              },
-            },
-          },
-        },
-        legend: {
-          data: [],
-        },
-        brush: {
-          toolbox: ['lineX'],
-          xAxisIndex: 0,
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: 'time',
-            boundaryGap: false,
-            axisLabel: {
-              formatter(value: any) {
-                return prettyFormatIsoDateTick(new Date(value));
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-          },
-        ],
-        series: [],
-      });
-
-      // auto-enables the brush tool on load
-      myChart.dispatchAction({
-        type: 'takeGlobalCursor',
-        key: 'brush',
-        brushOption: {
-          brushType: 'lineX',
-        },
-      });
-
-      return myChart;
-    }
-
-    useEffect(() => {
-      return () => {
-        const myChart = chartRef.current;
-        if (!myChart) return;
-        myChart.dispose();
-      };
-    }, []);
-
-    useEffect(() => {
-      const myChart = chartRef.current;
-      const data = sourceDataState.data;
-      if (!myChart || !data) return;
-      const { effectiveVs, sourceData, measure } = data;
-
-      myChart.off('brush');
-      myChart.off('brushend');
-
-      myChart.on('brush', (params: any) => {
-        if (!params.areas.length) return;
-
-        // this is only used for the label and the data saved in the highlight
-        // the positioning is done with the true coordinates until the user
-        // releases the mouse button (in the `brushend` event)
-        let start = params.areas[0].coordRange[0];
-        let end = params.areas[0].coordRange[1];
-        if (snappyHighlight) {
-          const duration = new Duration(timeGranularity);
-          start = duration.round(start, 'Etc/UTC');
-          end = duration.round(end, 'Etc/UTC');
-        }
-
-        const x0 = myChart.convertToPixel({ xAxisIndex: 0 }, params.areas[0].coordRange[0]);
-        const x1 = myChart.convertToPixel({ xAxisIndex: 0 }, params.areas[0].coordRange[1]);
-
-        highlightStore.getState().setHighlight({
-          label: DATE_FORMAT.formatRange(start, end),
-          x: x0 + (x1 - x0) / 2,
-          y: 40,
-          data: { start, end },
-          onDrop: () => {
-            highlightStore.getState().dropHighlight();
-            myChart.dispatchAction({
-              type: 'brush',
-              command: 'clear',
-              areas: [],
-            });
-          },
-          onSave: () => {
-            if (!timeColumnName) return;
-            setWhere(
-              where.changeClauseInWhere(
-                F(
-                  'TIME_IN_INTERVAL',
-                  C(timeColumnName),
-                  `${start.toISOString()}/${end.toISOString()}`,
-                ),
-              ),
-            );
-            highlightStore.getState().dropHighlight();
-            myChart.dispatchAction({
-              type: 'brush',
-              command: 'clear',
-              areas: [],
-            });
-          },
-        });
-      });
-
-      // once the user is done selecting a range, this will snap the start and end
-      myChart.on('brushend', () => {
-        const highlight = highlightStore.getState().highlight;
-        if (!highlight) return;
-
-        // this is already snapped
-        const { start, end } = highlight.data;
-
-        const x0 = myChart.convertToPixel({ xAxisIndex: 0 }, start);
-        const x1 = myChart.convertToPixel({ xAxisIndex: 0 }, end);
-
-        // positions the bubble on the snapped start and end
-        highlightStore.getState().updateHighlight({
-          x: x0 + (x1 - x0) / 2,
-        });
-
-        // gives the chart the snapped range to highlight
-        // (will replace the area the user just selected)
-        myChart.dispatchAction({
-          type: 'brush',
-          areas: [
-            {
-              brushType: 'lineX',
-              coordRange: [start, end],
-              xAxisIndex: 0,
-            },
-          ],
-        });
-      });
-
-      const showSymbol = sourceData.length < 2;
-      myChart.setOption(
-        {
-          dataset: {
-            dimensions: [TIME_NAME].concat(effectiveVs || [METRIC_NAME]),
-            source: sourceData,
-          },
-          animation: false,
-          legend: effectiveVs
-            ? {
-                data: effectiveVs,
-              }
-            : undefined,
-          series: (effectiveVs || [METRIC_NAME]).map(v => {
-            return {
-              id: v,
-              name: effectiveVs ? v : measure.name,
-              type: 'line',
-              stack: 'Total',
-              showSymbol,
-              lineStyle: v === OTHERS_VALUE ? { color: '#ccc' } : {},
-              areaStyle: v === OTHERS_VALUE ? { color: '#ccc' } : {},
-              emphasis: {
-                focus: 'series',
-              },
-              encode: {
-                x: TIME_NAME,
-                y: v,
-                itemId: v,
-              },
-            };
-          }),
-        },
-        {
-          replaceMerge: ['legend', 'series'],
-        },
-      );
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sourceDataState.data, snappyHighlight]);
-
-    useEffect(() => {
-      const myChart = chartRef.current;
-      if (!myChart) return;
-      myChart.resize();
-
-      // if there is a highlight, update its x position
-      // by calculating new pixel position from the highlight's data
-      const highlight = highlightStore.getState().highlight;
-      if (highlight) {
-        const { start, end } = highlight.data;
-
-        const x0 = myChart.convertToPixel({ xAxisIndex: 0 }, start);
-        const x1 = myChart.convertToPixel({ xAxisIndex: 0 }, end);
-
-        highlightStore.getState().updateHighlight({
-          x: x0 + (x1 - x0) / 2,
-        });
-      }
-    }, [stage]);
-
-    const errorMessage = sourceDataState.getErrorMessage();
-    return (
-      <div className="time-chart-module module">
-        <div
-          className="echart-container"
-          ref={container => {
-            if (chartRef.current || !container) return;
-            chartRef.current = setupChart(container);
-          }}
-        />
-        {errorMessage && <Issue issue={errorMessage} />}
-        {sourceDataState.loading && (
-          <Loader cancelText="Cancel query" onCancel={() => queryManager.cancelCurrent()} />
-        )}
-      </div>
-    );
-  },
-});
diff --git a/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.scss b/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.scss
new file mode 100644
index 000000000000..a594385c35d5
--- /dev/null
+++ b/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.scss
@@ -0,0 +1,131 @@
+/*
+ * 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';
+
+.continuous-chart-render {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+
+  svg.main-chart {
+    position: absolute;
+
+    text {
+      user-select: none;
+    }
+
+    .mark-bar {
+      fill: #497ee6;
+    }
+
+    .selection {
+      fill: white;
+      fill-opacity: 0.1;
+
+      &.finalized {
+        fill-opacity: 0.15;
+      }
+    }
+
+    .selected-bar {
+      fill: none;
+      stroke: #ffffff;
+      stroke-width: 1px;
+      opacity: 0.8;
+
+      &.finalized {
+        opacity: 1;
+      }
+    }
+
+    .shifter {
+      fill: white;
+      fill-opacity: 0.2;
+      filter: blur(1px);
+    }
+
+    .time-shift-indicator {
+      fill: white;
+      fill-opacity: 0.001;
+      cursor: grab;
+
+      &:hover {
+        fill-opacity: 0.1;
+      }
+
+      &.shifting {
+        fill-opacity: 0.2;
+        cursor: grabbing;
+      }
+    }
+
+    .h-gridline {
+      line {
+        stroke: $white;
+        stroke-dasharray: 5, 5;
+        opacity: 0.5;
+      }
+    }
+
+    .now-line {
+      stroke: $orange4;
+      stroke-dasharray: 2, 2;
+      opacity: 0.7;
+    }
+
+    .mark-line {
+      stroke-width: 1.5px;
+      stroke: #497ee6;
+      fill: none;
+    }
+
+    .mark-area {
+      fill: #497ee6;
+      opacity: 0.7;
+    }
+
+    .selected-point {
+      fill: #497ee6;
+    }
+  }
+
+  .zoom-out-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+
+  .empty-placeholder {
+    @include pin-full;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    user-select: none;
+    pointer-events: none;
+  }
+}
+
+.continuous-chart-bubble {
+  .button-bar {
+    padding-top: 5px;
+    display: flex;
+    gap: 5px;
+  }
+}
diff --git a/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx b/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx
new file mode 100644
index 000000000000..29232620048d
--- /dev/null
+++ b/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx
@@ -0,0 +1,754 @@
+/*
+ * 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 } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { day, Duration, minute, second, Timezone } from 'chronoshift';
+import classNames from 'classnames';
+import { max, sort, sum } from 'd3-array';
+import { axisBottom, axisLeft, axisRight } from 'd3-axis';
+import { scaleLinear, scaleOrdinal, scaleUtc } from 'd3-scale';
+import { select } from 'd3-selection';
+import type { Area, Line } from 'd3-shape';
+import { area, curveLinear, curveMonotoneX, curveStep, line } from 'd3-shape';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import { useMemo, useRef, useState } from 'react';
+
+import type { PortalBubbleOpenOn } from '../../../../components';
+import { PortalBubble } from '../../../../components';
+import { useClock, useGlobalEventListener } from '../../../../hooks';
+import type { Margin, Stage } from '../../../../utils';
+import {
+  clamp,
+  filterMap,
+  formatIsoDateRange,
+  formatNumber,
+  formatStartDuration,
+  groupBy,
+  lookupBy,
+} from '../../../../utils';
+
+import './continuous-chart-render.scss';
+
+const Y_AXIS_WIDTH = 60;
+
+function getDefaultChartMargin(yAxis: undefined | 'left' | 'right') {
+  return {
+    top: 20,
+    right: 10 + (yAxis === 'right' ? Y_AXIS_WIDTH : 0),
+    bottom: 25,
+    left: 10 + (yAxis === 'left' ? Y_AXIS_WIDTH : 0),
+  };
+}
+
+const EXTEND_X_SCALE_DOMAIN_BY = 1;
+
+export const OTHER_VALUE = 'Other';
+const OTHER_COLOR = '#666666';
+const COLORS = ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d'];
+
+// ---------------------------------------
+
+export type Range = [number, number];
+
+export interface RangeDatum {
+  start: number;
+  end: number;
+  measure: number;
+  stack: string | undefined;
+}
+
+export interface StackedRangeDatum extends RangeDatum {
+  offset: number;
+}
+
+// ---------------------------------------
+
+const DAY_DURATION = new Duration('P1D');
+
+function getTodayRange(timezone: Timezone): Range {
+  const [start, end] = DAY_DURATION.range(new Date(), timezone);
+  return [start.valueOf(), end.valueOf()];
+}
+
+function offsetRange(dateRange: Range, offset: number, roundEnd?: (n: number) => number): Range {
+  const d = dateRange[1] - dateRange[0];
+  let newEnd = dateRange[1] + offset;
+  if (roundEnd) newEnd = roundEnd(newEnd);
+  return [newEnd - d, newEnd];
+}
+
+interface SelectionRange {
+  start: number;
+  end: number;
+  finalized?: boolean;
+  selectedDatum?: StackedRangeDatum;
+}
+
+export type ContinuousChartMarkType = 'bar' | 'area' | 'line';
+export type ContinuousChartCurveType = 'smooth' | 'linear' | 'step';
+
+function getCurveFactory(curveType: ContinuousChartCurveType | undefined) {
+  switch (curveType) {
+    case 'linear':
+      return curveLinear;
+
+    case 'step':
+      return curveStep;
+
+    case 'smooth':
+    default:
+      return curveMonotoneX;
+  }
+}
+
+export interface ContinuousChartRenderProps {
+  /**
+   * The data to be rendered it has to be ordered in reverse chronological order (latest first)
+   * If stacking is used then the stack bars should be ordered bottom to top.
+   */
+  data: RangeDatum[];
+  stacks: string[] | undefined;
+
+  /**
+   * The granularity that was used for bucketing.
+   */
+  granularity: Duration;
+  markType: ContinuousChartMarkType;
+
+  /**
+   * Defines how to render the curve in case 'area' or 'line' is selected as the mark type
+   */
+  curveType?: ContinuousChartCurveType;
+
+  /**
+   * The width x height to render
+   */
+  stage: Stage;
+  margin?: Margin;
+
+  yAxis?: 'left' | 'right';
+  showHorizontalGridlines?: 'auto' | 'always' | 'never';
+
+  /**
+   * The optional range of the x-axis to show, if not set it defaults to the extent of the data
+   */
+  domainRange: Range | undefined;
+  onChangeRange(range: Range): void;
+}
+
+export const ContinuousChartRender = function ContinuousChartRender(
+  props: ContinuousChartRenderProps,
+) {
+  const {
+    data,
+    stacks,
+    granularity,
+
+    markType,
+    curveType,
+
+    stage,
+    margin,
+    yAxis,
+    showHorizontalGridlines,
+    domainRange,
+    onChangeRange,
+  } = props;
+  const [mouseDownAt, setMouseDownAt] = useState<
+    { time: number; action: 'select' | 'shift' } | undefined
+  >();
+  const [selection, setSelection] = useState<SelectionRange | undefined>();
+
+  function setSelectionIfNeeded(newSelection: SelectionRange) {
+    if (
+      selection &&
+      selection.start === newSelection.start &&
+      selection.end === newSelection.end &&
+      selection.finalized === newSelection.finalized &&
+      selection.selectedDatum === newSelection.selectedDatum
+    ) {
+      return;
+    }
+    setSelection(newSelection);
+  }
+
+  const [shiftOffset, setShiftOffset] = useState<number | undefined>();
+
+  const now = useClock(minute.canonicalLength);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+
+  const stackedData: StackedRangeDatum[] = useMemo(() => {
+    const effectiveStacks = stacks || ['undefined'];
+    const stackToIndex = lookupBy(
+      effectiveStacks,
+      s => s,
+      (_, i) => i,
+    );
+
+    // Sort the data into time descending column and stack order
+    const sortedData = sort(data, (a, b) => {
+      const diffStart = b.start - a.start;
+      if (diffStart) return diffStart;
+
+      return stackToIndex[String(a.stack)] - stackToIndex[String(b.stack)];
+    });
+
+    if (markType === 'line') {
+      // No need to stack
+      return sortedData.map(d => ({ ...d, offset: 0 }));
+    } else {
+      let lastStart: number | undefined;
+      let offset: number;
+      return sortedData.map(d => {
+        if (lastStart !== d.start) {
+          offset = 0;
+          lastStart = d.start;
+        }
+        const withOffset = { ...d, offset };
+        offset += d.measure;
+        return withOffset;
+      });
+    }
+  }, [data, stacks, markType]);
+
+  function findStackedDatum(time: number, measure: number): StackedRangeDatum | undefined {
+    const dataInRange = stackedData.filter(d => d.start <= time && time < d.end);
+    if (!dataInRange.length) return;
+    return (
+      dataInRange.find(r => r.offset <= measure && measure < r.measure + r.offset) ||
+      dataInRange[dataInRange.length - 1]
+    );
+  }
+
+  const stackColorizer = useMemo(() => {
+    const s = scaleOrdinal(COLORS);
+    return (v: string) => (v === OTHER_VALUE ? OTHER_COLOR : s(v));
+  }, []);
+
+  const chartMargin = { ...margin, ...getDefaultChartMargin(yAxis) };
+  const innerStage = stage.applyMargin(chartMargin);
+
+  const effectiveDomainRange =
+    domainRange ||
+    (stackedData.length
+      ? [stackedData[stackedData.length - 1].start, stackedData[0].end]
+      : getTodayRange(Timezone.UTC));
+
+  const baseTimeScale = scaleUtc()
+    .domain(effectiveDomainRange)
+    .range([EXTEND_X_SCALE_DOMAIN_BY, innerStage.width - EXTEND_X_SCALE_DOMAIN_BY]);
+  const timeScale = shiftOffset
+    ? baseTimeScale.copy().domain(offsetRange(effectiveDomainRange, shiftOffset))
+    : baseTimeScale;
+
+  const maxMeasure = max(stackedData, d => d.measure + d.offset);
+  const measureScale = scaleLinear()
+    .rangeRound([innerStage.height, 0])
+    .domain([0, (maxMeasure ?? 100) * 1.05]);
+
+  function handleMouseDown(e: ReactMouseEvent) {
+    const svg = svgRef.current;
+    if (!svg) return;
+    e.preventDefault();
+
+    const rect = svg.getBoundingClientRect();
+    const x = clamp(
+      e.clientX - rect.x - chartMargin.left,
+      EXTEND_X_SCALE_DOMAIN_BY,
+      innerStage.width - EXTEND_X_SCALE_DOMAIN_BY,
+    );
+    const y = e.clientY - rect.y - chartMargin.top;
+    const time = baseTimeScale.invert(x).valueOf();
+    const action = y > innerStage.height || e.shiftKey ? 'shift' : 'select';
+    setMouseDownAt({
+      time,
+      action,
+    });
+    if (action === 'select') {
+      const start = granularity.floor(new Date(time), Timezone.UTC);
+      setSelectionIfNeeded({
+        start: start.valueOf(),
+        end: granularity.shift(start, Timezone.UTC, 1).valueOf(),
+      });
+    } else {
+      setSelection(undefined);
+    }
+  }
+
+  useGlobalEventListener('mousemove', (e: MouseEvent) => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const rect = svg.getBoundingClientRect();
+    const x = e.clientX - rect.x - chartMargin.left;
+    const y = e.clientY - rect.y - chartMargin.top;
+
+    if (mouseDownAt) {
+      e.preventDefault();
+
+      if (mouseDownAt.action === 'shift' || e.shiftKey) {
+        const b = baseTimeScale.invert(x).valueOf();
+        setShiftOffset(mouseDownAt.time.valueOf() - b.valueOf());
+      } else {
+        const b = baseTimeScale
+          .invert(clamp(x, EXTEND_X_SCALE_DOMAIN_BY, innerStage.width - EXTEND_X_SCALE_DOMAIN_BY))
+          .valueOf();
+        if (mouseDownAt.time < b) {
+          setSelectionIfNeeded({
+            start: granularity.floor(new Date(mouseDownAt.time), Timezone.UTC).valueOf(),
+            end: granularity.ceil(new Date(b), Timezone.UTC).valueOf(),
+          });
+        } else {
+          setSelectionIfNeeded({
+            start: granularity.floor(new Date(b), Timezone.UTC).valueOf(),
+            end: granularity.ceil(new Date(mouseDownAt.time), Timezone.UTC).valueOf(),
+          });
+        }
+      }
+    } else if (!selection?.finalized) {
+      if (
+        0 <= x &&
+        x <= innerStage.width &&
+        0 <= y &&
+        y <= innerStage.height &&
+        svg.contains(e.target as any)
+      ) {
+        const time = baseTimeScale.invert(x).valueOf();
+        const measure = measureScale.invert(y);
+
+        const start = granularity.floor(new Date(time), Timezone.UTC);
+        const end = granularity.shift(start, Timezone.UTC, 1);
+
+        setSelectionIfNeeded({
+          start: start.valueOf(),
+          end: end.valueOf(),
+          selectedDatum: findStackedDatum(time, measure),
+        });
+      } else {
+        setSelection(undefined);
+      }
+    }
+  });
+
+  useGlobalEventListener('mouseup', (e: MouseEvent) => {
+    if (!mouseDownAt) return;
+    e.preventDefault();
+    setMouseDownAt(undefined);
+
+    if (!shiftOffset && !selection) return;
+
+    setShiftOffset(undefined);
+    if (mouseDownAt.action === 'shift' || e.shiftKey) {
+      if (shiftOffset) {
+        const domainRangeExtent = effectiveDomainRange[1] - effectiveDomainRange[0];
+        const snapGranularity =
+          domainRangeExtent > granularity.getCanonicalLength() * 5 &&
+          domainRangeExtent > second.canonicalLength
+            ? granularity
+            : new Duration('PT1S');
+        onChangeRange(
+          offsetRange(effectiveDomainRange, shiftOffset, n =>
+            snapGranularity.round(new Date(n), Timezone.UTC).valueOf(),
+          ),
+        );
+      }
+    } else {
+      if (selection) {
+        setSelection({
+          ...selection,
+          finalized: true,
+        });
+      }
+    }
+  });
+
+  useGlobalEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setMouseDownAt(undefined);
+      setSelection(undefined);
+    }
+  });
+
+  const byStack = useMemo(() => {
+    if (markType === 'bar' || !stackedData.length) return [];
+
+    const effectiveStacks = stacks || ['undefined'];
+    const numStacks = effectiveStacks.length;
+    if (numStacks === 1) return [stackedData];
+
+    // Fill in 0s and make sure that the stacks are in the same order
+    const fullTimeIntervals = groupBy(
+      stackedData,
+      d => String(d.start),
+      dataForStart => {
+        const stackToDatum = lookupBy(dataForStart, d => d.stack!);
+        return effectiveStacks.map(
+          (stack, stackIndex) =>
+            stackToDatum[stack] || {
+              ...dataForStart[0],
+              stack,
+              measure: 0,
+              offset: Math.max(
+                0,
+                ...filterMap(effectiveStacks.slice(0, stackIndex), s => stackToDatum[s]).map(
+                  d => d.offset + d.measure,
+                ),
+              ),
+            },
+        );
+      },
+    );
+
+    // Add nulls to mark gaps in data
+    const seriesForStack: Record<string, (StackedRangeDatum | null)[]> = {};
+    for (const stack of effectiveStacks) {
+      seriesForStack[stack] = [];
+    }
+
+    let lastDatum: StackedRangeDatum | undefined;
+    for (const fullTimeInterval of fullTimeIntervals) {
+      const datum = fullTimeInterval[0];
+
+      if (lastDatum && lastDatum.start !== datum.end) {
+        for (const stack of effectiveStacks) {
+          seriesForStack[stack].push(null);
+        }
+      }
+
+      for (let i = 0; i < numStacks; i++) {
+        seriesForStack[effectiveStacks[i]].push(fullTimeInterval[i]);
+      }
+      lastDatum = datum;
+    }
+
+    return Object.values(seriesForStack);
+  }, [markType, stackedData, stacks]);
+
+  if (innerStage.isInvalid()) return;
+
+  function startEndToXWidth({ start, end }: { start: number; end: number }) {
+    const xStart = timeScale(start);
+    const xEnd = timeScale(end);
+    if (xEnd < 0 || innerStage.width < xStart) return;
+
+    return {
+      x: xStart,
+      width: Math.max(xEnd - xStart - 1, 1),
+    };
+  }
+
+  function datumToYHeight({ measure, offset }: StackedRangeDatum) {
+    const y0 = measureScale(offset);
+    const y = measureScale(measure + offset);
+
+    return {
+      y: y,
+      height: y0 - y,
+    };
+  }
+
+  function datumToRect(d: StackedRangeDatum) {
+    const xWidth = startEndToXWidth(d);
+    if (!xWidth) return;
+    return {
+      ...xWidth,
+      ...datumToYHeight(d),
+    };
+  }
+
+  function datumToCxCy(d: StackedRangeDatum) {
+    const cx = timeScale((d.start + d.end) / 2);
+    if (cx < 0 || innerStage.width < cx) return;
+
+    return {
+      cx,
+      cy: measureScale(d.measure + d.offset),
+    };
+  }
+
+  const curve = getCurveFactory(curveType);
+
+  const areaFn = area<StackedRangeDatum>()
+    .curve(curve)
+    .defined(Boolean)
+    .x(d => timeScale((d.start + d.end) / 2))
+    .y0(d => measureScale(d.offset))
+    .y1(d => measureScale(d.measure + d.offset)) as Area<StackedRangeDatum | null>;
+
+  const lineFn = line<StackedRangeDatum>()
+    .curve(curve)
+    .defined(Boolean)
+    .x(d => timeScale((d.start + d.end) / 2))
+    .y(d => measureScale(d.measure + d.offset)) as Line<StackedRangeDatum | null>;
+
+  let hoveredOpenOn: PortalBubbleOpenOn | undefined;
+  if (selection) {
+    const { start, end, selectedDatum } = selection;
+
+    let title: string;
+    let info: string;
+    if (selectedDatum) {
+      title = formatStartDuration(new Date(selectedDatum.start), granularity);
+      info = formatNumber(selectedDatum.measure);
+    } else {
+      if (granularity.shift(new Date(start), Timezone.UTC).valueOf() === end) {
+        title = formatStartDuration(new Date(start), granularity);
+      } else {
+        title = formatIsoDateRange(new Date(start), new Date(end));
+      }
+
+      const selectedData = stackedData.filter(d => start <= d.start && d.start < end);
+      if (selectedData.length) {
+        info = formatNumber(sum(selectedData, b => b.measure));
+      } else {
+        info = 'No data';
+      }
+    }
+
+    hoveredOpenOn = {
+      x: chartMargin.left + timeScale((selection.start + selection.end) / 2),
+      y: chartMargin.top,
+      title,
+      text: (
+        <>
+          {selectedDatum?.stack && <div>{selectedDatum?.stack}</div>}
+          <div>{info}</div>
+          {selection.finalized && (
+            <div className="button-bar">
+              <Button
+                icon={IconNames.ZOOM_IN}
+                text="Zoom in"
+                intent={Intent.PRIMARY}
+                small
+                onClick={() => {
+                  if (!selection) return;
+                  setSelection(undefined);
+                  onChangeRange([selection.start, selection.end]);
+                }}
+              />
+            </div>
+          )}
+        </>
+      ),
+    };
+  }
+
+  const gridlinesVisible =
+    showHorizontalGridlines === 'always' ||
+    (showHorizontalGridlines !== 'never' && innerStage.height > 75);
+
+  const d = effectiveDomainRange[1] - effectiveDomainRange[0];
+  const shiftStartBack = effectiveDomainRange[0] - d;
+  const shiftEndForward = effectiveDomainRange[1] + d;
+  const nowDayCeil = day.ceil(now, Timezone.UTC);
+  const zoomedOutRange: Range = [
+    shiftStartBack,
+    shiftEndForward < nowDayCeil.valueOf() ? shiftEndForward : nowDayCeil.valueOf(),
+  ];
+
+  const nowX = timeScale(now);
+  return (
+    <div className="continuous-chart-render">
+      <svg
+        className="main-chart"
+        ref={svgRef}
+        {...stage.toWidthHeight()}
+        viewBox={stage.toViewBox()}
+        preserveAspectRatio="xMinYMin meet"
+        onMouseDown={handleMouseDown}
+      >
+        <g transform={`translate(${chartMargin.left},${chartMargin.top})`}>
+          {gridlinesVisible && (
+            <g className="h-gridline" transform="translate(0,0)">
+              {filterMap(measureScale.ticks(3), (v, i) => {
+                if (v === 0) return;
+                const y = measureScale(v);
+                return <line key={i} x1={0} y1={y} x2={innerStage.width} y2={y} />;
+              })}
+            </g>
+          )}
+          <g clipPath={`xywh(0px 0px ${innerStage.width}px ${innerStage.height}px) view-box`}>
+            {selection && (
+              <rect
+                className={classNames('selection', { finalized: selection.finalized })}
+                {...startEndToXWidth(selection)}
+                y={0}
+                height={innerStage.height}
+              />
+            )}
+            {0 < nowX && nowX < innerStage.width && (
+              <line className="now-line" x1={nowX} x2={nowX} y1={0} y2={innerStage.height + 8} />
+            )}
+            {markType === 'bar' &&
+              filterMap(stackedData, stackedRow => {
+                const r = datumToRect(stackedRow);
+                if (!r) return;
+                return (
+                  <rect
+                    key={`${stackedRow.start}/${stackedRow.end}/${stackedRow.stack}`}
+                    className="mark-bar"
+                    {...r}
+                    style={
+                      typeof stackedRow.stack !== 'undefined'
+                        ? {
+                            fill: stackColorizer(stackedRow.stack),
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              })}
+            {markType === 'bar' && selection?.selectedDatum && (
+              <rect
+                className={classNames('selected-bar', { finalized: selection.finalized })}
+                {...datumToRect(selection.selectedDatum)}
+              />
+            )}
+            {markType === 'area' &&
+              byStack.map(ds => {
+                const stack = ds[0]!.stack;
+                return (
+                  <path
+                    key={String(stack)}
+                    className="mark-area"
+                    d={areaFn(ds)!}
+                    style={
+                      typeof stack !== 'undefined'
+                        ? {
+                            fill: stackColorizer(stack),
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              })}
+            {(markType === 'area' || markType === 'line') &&
+              byStack.map(ds => {
+                const stack = ds[0]!.stack;
+                return (
+                  <path
+                    key={String(stack)}
+                    className="mark-line"
+                    d={lineFn(ds)!}
+                    style={
+                      typeof stack !== 'undefined'
+                        ? {
+                            stroke: stackColorizer(stack),
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              })}
+            {(markType === 'area' || markType === 'line') && selection?.selectedDatum && (
+              <circle
+                className={classNames('selected-point', { finalized: selection.finalized })}
+                {...datumToCxCy(selection.selectedDatum)}
+                r={3}
+                style={
+                  typeof selection.selectedDatum.stack !== 'undefined'
+                    ? {
+                        fill: stackColorizer(selection.selectedDatum.stack),
+                      }
+                    : undefined
+                }
+              />
+            )}
+            {!!shiftOffset && (
+              <rect
+                className="shifter"
+                x={shiftOffset > 0 ? timeScale(effectiveDomainRange[1]) : 0}
+                y={0}
+                height={innerStage.height}
+                width={
+                  shiftOffset > 0
+                    ? innerStage.width - timeScale(effectiveDomainRange[1])
+                    : timeScale(effectiveDomainRange[0])
+                }
+              />
+            )}
+          </g>
+          <g
+            className="axis-x"
+            transform={`translate(0,${innerStage.height + 1})`}
+            ref={(node: any) => select(node).call(axisBottom(timeScale))}
+          />
+          <rect
+            className={classNames('time-shift-indicator', {
+              shifting: typeof shiftOffset === 'number',
+            })}
+            x={0}
+            y={innerStage.height}
+            width={innerStage.width}
+            height={chartMargin.bottom}
+          />
+          {yAxis === 'left' && (
+            <g
+              className="axis-y"
+              ref={(node: any) =>
+                select(node).call(
+                  axisLeft(measureScale)
+                    .ticks(3)
+                    .tickFormat(e => formatNumber(e.valueOf())),
+                )
+              }
+            />
+          )}
+          {yAxis === 'right' && (
+            <g
+              className="axis-y"
+              transform={`translate(${innerStage.width},0)`}
+              ref={(node: any) =>
+                select(node).call(
+                  axisRight(measureScale)
+                    .ticks(3)
+                    .tickFormat(e => formatNumber(e.valueOf())),
+                )
+              }
+            />
+          )}
+        </g>
+      </svg>
+      {!data.length && (
+        <div className="empty-placeholder">
+          <div className="no-data-text">There is no data in the selected range</div>
+        </div>
+      )}
+      <Button
+        className="zoom-out-button"
+        icon={IconNames.ZOOM_OUT}
+        data-tooltip="Zoom out"
+        small
+        minimal
+        onClick={() => {
+          onChangeRange(zoomedOutRange);
+        }}
+      />
+      {svgRef.current && (
+        <PortalBubble
+          className="continuous-chart-bubble"
+          openOn={hoveredOpenOn}
+          offsetElement={svgRef.current}
+          onClose={selection?.finalized ? () => setSelection(undefined) : undefined}
+          mute
+          direction="up"
+        />
+      )}
+    </div>
+  );
+};
diff --git a/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx b/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
new file mode 100644
index 000000000000..a2ba919f9fee
--- /dev/null
+++ b/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
@@ -0,0 +1,348 @@
+/*
+ * 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 { IconNames } from '@blueprintjs/icons';
+import { Duration, Timezone } from 'chronoshift';
+import type { SqlExpression } from 'druid-query-toolkit';
+import { C, F, fitFilterPatterns, L, SqlCase } from 'druid-query-toolkit';
+import { useMemo } from 'react';
+
+import { Loader } from '../../../../components';
+import { useQueryManager } from '../../../../hooks';
+import {
+  capitalizeFirst,
+  FINE_GRANULARITY_OPTIONS,
+  getAutoGranularity,
+  getTimeSpanInExpression,
+} from '../../../../utils';
+import { Issue } from '../../components';
+import type { ExpressionMeta } from '../../models';
+import { ModuleRepository } from '../../module-repository/module-repository';
+import { overqueryWhere, updateFilterClause } from '../../utils';
+
+import type {
+  ContinuousChartCurveType,
+  ContinuousChartMarkType,
+  Range,
+  RangeDatum,
+} from './continuous-chart-render';
+import { ContinuousChartRender, OTHER_VALUE } from './continuous-chart-render';
+
+const TIME_NAME = 't';
+const MEASURE_NAME = 'm';
+const STACK_NAME = 's';
+const MIN_SLICE_WIDTH = 8;
+
+function getRangeInExpression(
+  expression: SqlExpression,
+  timeColumnName: string,
+  maxTime?: Date,
+): Range | undefined {
+  const patterns = fitFilterPatterns(expression);
+  for (const pattern of patterns) {
+    if (pattern.type === 'timeInterval' && pattern.column === timeColumnName) {
+      return [pattern.start.valueOf(), pattern.end.valueOf()];
+    } else if (pattern.type === 'timeRelative' && pattern.column === timeColumnName) {
+      let anchor = pattern.anchor === 'timestamp' ? pattern.anchorTimestamp || new Date() : maxTime;
+      if (!anchor) return;
+
+      const timezone = pattern.timezone ? new Timezone(pattern.timezone) : Timezone.UTC;
+      if (pattern.alignType && pattern.alignDuration) {
+        const alignDuration = new Duration(pattern.alignDuration);
+        anchor =
+          pattern.alignType === 'floor'
+            ? alignDuration.floor(anchor, timezone)
+            : alignDuration.ceil(anchor, timezone);
+      }
+
+      if (pattern.shiftDuration && pattern.shiftStep) {
+        anchor = new Duration(pattern.shiftDuration).shift(anchor, timezone, pattern.shiftStep);
+      }
+
+      const rangeStep = pattern.rangeStep || 1;
+      const anchorWithRange = new Duration(pattern.rangeDuration).shift(
+        anchor,
+        timezone,
+        -rangeStep,
+      );
+
+      return [
+        (rangeStep >= 0 ? anchorWithRange : anchor).valueOf(),
+        (rangeStep < 0 ? anchorWithRange : anchor).valueOf(),
+      ];
+    }
+  }
+
+  return;
+}
+
+interface TimeChartParameterValues {
+  granularity: string;
+  splitColumn?: ExpressionMeta;
+  numberToStack: number;
+  showOthers: boolean;
+  measure: ExpressionMeta;
+  markType: ContinuousChartMarkType;
+  curveType: ContinuousChartCurveType;
+}
+
+ModuleRepository.registerModule<TimeChartParameterValues>({
+  id: 'time-chart',
+  title: 'Time chart',
+  icon: IconNames.TIMELINE_LINE_CHART,
+  parameters: {
+    granularity: {
+      type: 'option',
+      options: ({ querySource, where }) => {
+        let filterSpan: number | undefined;
+        if (querySource) {
+          const timeColumnName = querySource.columns.find(
+            column => column.sqlType === 'TIMESTAMP',
+          )?.name;
+          if (timeColumnName) {
+            filterSpan = getTimeSpanInExpression(where, timeColumnName);
+          }
+        }
+        return [
+          'auto',
+          ...(typeof filterSpan === 'number'
+            ? FINE_GRANULARITY_OPTIONS.filter(g => {
+                const len = new Duration(g).getCanonicalLength();
+                return filterSpan < len * 1000 && len <= filterSpan;
+              })
+            : FINE_GRANULARITY_OPTIONS),
+        ];
+      },
+      defaultValue: 'auto',
+      important: true,
+      optionLabels: g => (g === 'auto' ? 'Auto' : new Duration(g).getDescription(true)),
+    },
+    splitColumn: {
+      type: 'expression',
+      label: 'Stack by',
+      transferGroup: 'show',
+      important: true,
+    },
+    numberToStack: {
+      type: 'number',
+      label: 'Max stacks',
+      defaultValue: 7,
+      min: 2,
+      required: true,
+      visible: ({ parameterValues }) => Boolean(parameterValues.splitColumn),
+    },
+    showOthers: {
+      type: 'boolean',
+      defaultValue: true,
+      visible: ({ parameterValues }) => Boolean(parameterValues.splitColumn),
+    },
+    measure: {
+      type: 'measure',
+      label: 'Measure to show',
+      transferGroup: 'show-agg',
+      important: true,
+      defaultValue: ({ querySource }) => querySource?.getFirstAggregateMeasure(),
+      required: true,
+    },
+    markType: {
+      type: 'option',
+      options: ['area', 'bar', 'line'],
+      defaultValue: 'area',
+      optionLabels: capitalizeFirst,
+    },
+    curveType: {
+      type: 'option',
+      options: ['smooth', 'linear', 'step'],
+      defaultValue: 'smooth',
+      optionLabels: capitalizeFirst,
+      defined: ({ parameterValues }) => parameterValues.markType !== 'bar',
+    },
+  },
+  component: function TimeChartModule(props) {
+    const { querySource, where, setWhere, parameterValues, stage, runSqlQuery } = props;
+
+    const timeColumnName = querySource.columns.find(column => column.sqlType === 'TIMESTAMP')?.name;
+    const timeGranularity =
+      parameterValues.granularity === 'auto'
+        ? getAutoGranularity(
+            where,
+            timeColumnName || '__time',
+            Math.floor(Math.max(stage.width - 80, 10) / MIN_SLICE_WIDTH),
+          )
+        : parameterValues.granularity;
+
+    const { splitColumn, numberToStack, showOthers, measure, markType } = parameterValues;
+
+    const dataQuery = useMemo(() => {
+      return {
+        querySource,
+        where,
+        timeGranularity,
+        measure,
+        splitExpression: splitColumn?.expression,
+        numberToStack,
+        showOthers,
+        oneExtra: markType !== 'bar',
+      };
+    }, [
+      querySource,
+      where,
+      timeGranularity,
+      measure,
+      splitColumn,
+      numberToStack,
+      showOthers,
+      markType,
+    ]);
+
+    const [sourceDataState, queryManager] = useQueryManager({
+      query: dataQuery,
+      processQuery: async (
+        {
+          querySource,
+          where,
+          timeGranularity,
+          measure,
+          splitExpression,
+          numberToStack,
+          showOthers,
+          oneExtra,
+        },
+        cancelToken,
+      ) => {
+        if (!timeColumnName) {
+          throw new Error(`Must have a column of type TIMESTAMP for the time chart to work`);
+        }
+
+        const granularity = new Duration(timeGranularity);
+
+        const vs = splitExpression
+          ? (
+              await runSqlQuery(
+                querySource
+                  .getInitQuery(where)
+                  .addSelect(splitExpression.cast('VARCHAR').as('v'), { addToGroupBy: 'end' })
+                  .changeOrderByExpression(measure.expression.toOrderByExpression('DESC'))
+                  .changeLimitValue(numberToStack),
+                cancelToken,
+              )
+            ).getColumnByIndex(0)!
+          : undefined;
+
+        cancelToken.throwIfRequested();
+
+        if (vs?.length === 0) {
+          // If vs is empty then there is no data at all and no need to do a larger query
+          return {
+            effectiveVs: [],
+            sourceData: [],
+            measure,
+            granularity,
+          };
+        }
+
+        const effectiveVs = vs && showOthers ? vs.concat(OTHER_VALUE) : vs;
+
+        const result = await runSqlQuery(
+          querySource
+            .getInitQuery(overqueryWhere(where, timeColumnName, granularity, oneExtra))
+            .applyIf(splitExpression && vs && !showOthers, q =>
+              q.addWhere(splitExpression!.cast('VARCHAR').in(vs!)),
+            )
+            .addSelect(F.timeFloor(C(timeColumnName), L(timeGranularity)).as(TIME_NAME), {
+              addToGroupBy: 'end',
+              addToOrderBy: 'end',
+              direction: 'DESC',
+            })
+            .applyIf(splitExpression, q => {
+              if (!splitExpression || !vs) return q; // Should never get here, doing this to make peace between eslint and TS
+              return q.addSelect(
+                (showOthers
+                  ? SqlCase.ifThenElse(splitExpression.in(vs), splitExpression, L(OTHER_VALUE))
+                  : splitExpression
+                )
+                  .cast('VARCHAR')
+                  .as(STACK_NAME),
+                { addToGroupBy: 'end' },
+              );
+            })
+            .addSelect(measure.expression.as(MEASURE_NAME))
+            .changeLimitValue(10000 * (effectiveVs ? Math.min(effectiveVs.length, 10) : 1)),
+          cancelToken,
+        );
+
+        const dataset = result.toObjectArray().map(
+          (b): RangeDatum => ({
+            start: b[TIME_NAME].valueOf(),
+            end: granularity.shift(b[TIME_NAME], Timezone.UTC, 1).valueOf(),
+            measure: b[MEASURE_NAME],
+            stack: b[STACK_NAME],
+          }),
+        );
+
+        return {
+          effectiveVs,
+          sourceData: dataset,
+          measure,
+          granularity,
+          maxTime: result.resultContext?.maxTime,
+        };
+      },
+    });
+
+    const sourceData = sourceDataState.getSomeData();
+    const domainRange = getRangeInExpression(
+      where,
+      timeColumnName || '__time',
+      sourceData?.maxTime,
+    );
+    const errorMessage = sourceDataState.getErrorMessage();
+    return (
+      <div className="time-chart-module module">
+        {sourceData && (
+          <ContinuousChartRender
+            data={sourceData.sourceData}
+            stacks={sourceData.effectiveVs}
+            granularity={sourceData.granularity}
+            markType={parameterValues.markType}
+            curveType={parameterValues.curveType}
+            stage={stage}
+            yAxis="right"
+            domainRange={domainRange}
+            onChangeRange={([start, end]) => {
+              setWhere(
+                updateFilterClause(
+                  where,
+                  F(
+                    'TIME_IN_INTERVAL',
+                    C(timeColumnName || '__time'),
+                    `${new Date(start).toISOString()}/${new Date(end).toISOString()}`,
+                  ),
+                ),
+              );
+            }}
+          />
+        )}
+        {errorMessage && <Issue issue={errorMessage} />}
+        {sourceDataState.loading && (
+          <Loader cancelText="Cancel query" onCancel={() => queryManager.cancelCurrent()} />
+        )}
+      </div>
+    );
+  },
+});
diff --git a/web-console/src/views/explore-view/query-macros/max-data-time.ts b/web-console/src/views/explore-view/query-macros/max-data-time.ts
index d689d0a8386f..48a337c41ca0 100644
--- a/web-console/src/views/explore-view/query-macros/max-data-time.ts
+++ b/web-console/src/views/explore-view/query-macros/max-data-time.ts
@@ -21,18 +21,25 @@ import { L, SqlFunction } from 'druid-query-toolkit';
 
 import { getMaxTimeForTable } from '../utils';
 
-export async function rewriteMaxDataTime(query: SqlQuery) {
-  if (!query.containsFunction('MAX_DATA_TIME')) return query;
+export async function rewriteMaxDataTime(
+  query: SqlQuery,
+): Promise<{ query: SqlQuery; maxTime?: Date }> {
+  if (!query.containsFunction('MAX_DATA_TIME')) return { query };
 
   const tableName = query.getFirstTableName();
-  if (!tableName) return query;
+  if (!tableName) return { query };
 
   const maxTime = await getMaxTimeForTable(tableName);
-  if (!maxTime) return query;
+  if (!maxTime) return { query };
 
-  return query.walk(ex =>
-    ex instanceof SqlFunction && ex.getEffectiveFunctionName() === 'MAX_DATA_TIME'
-      ? L(new Date(maxTime.valueOf() + 1)) // Add 1ms to the maxTime date to allow filters like `"__time" < {maxTime}" to capture the last event which might also be the only event
-      : ex,
-  ) as SqlQuery;
+  const adjustedMaxTime = new Date(maxTime.valueOf() + 1); // Add 1ms to the maxTime date to allow filters like `"__time" < {maxTime}" to capture the last event which might also be the only event
+
+  return {
+    query: query.walk(ex =>
+      ex instanceof SqlFunction && ex.getEffectiveFunctionName() === 'MAX_DATA_TIME'
+        ? L(adjustedMaxTime)
+        : ex,
+    ) as SqlQuery,
+    maxTime: adjustedMaxTime,
+  };
 }
diff --git a/web-console/src/views/explore-view/utils/date-format.ts b/web-console/src/views/explore-view/utils/date-format.ts
deleted file mode 100644
index af92a6cac45e..000000000000
--- a/web-console/src/views/explore-view/utils/date-format.ts
+++ /dev/null
@@ -1,28 +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.
- */
-
-export const DATE_FORMAT = new Intl.DateTimeFormat('default', {
-  year: 'numeric',
-  month: '2-digit',
-  day: '2-digit',
-  hour: '2-digit',
-  minute: '2-digit',
-  second: '2-digit',
-  hour12: false,
-  timeZone: 'UTC',
-});
diff --git a/web-console/src/views/explore-view/utils/filter-pattern-helpers.ts b/web-console/src/views/explore-view/utils/filter-pattern-helpers.ts
index faf643aef578..163032c61b82 100644
--- a/web-console/src/views/explore-view/utils/filter-pattern-helpers.ts
+++ b/web-console/src/views/explore-view/utils/filter-pattern-helpers.ts
@@ -16,11 +16,20 @@
  * limitations under the License.
  */
 
-import type { Column, FilterPattern } from 'druid-query-toolkit';
+import { Duration } from 'chronoshift';
+import { isDate } from 'date-fns';
+import type { Column, FilterPattern, SqlExpression } from 'druid-query-toolkit';
+import {
+  filterPatternsToExpression,
+  filterPatternToExpression,
+  fitFilterPattern,
+  fitFilterPatterns,
+  SqlComparison,
+  SqlMulti,
+  SqlQuery,
+} from 'druid-query-toolkit';
 
-import { Duration } from '../../../utils';
-
-import { DATE_FORMAT } from './date-format';
+import { formatIsoDateRange, prettyFormatIsoDateWithMsIfNeeded } from '../../../utils';
 
 const TIME_RELATIVE_TYPES: Record<string, string> = {
   'maxDataTime/': 'latest',
@@ -68,7 +77,11 @@ export function formatPatternWithoutNegation(pattern: FilterPattern): string {
   switch (pattern.type) {
     case 'values':
       return `${pattern.column}: ${pattern.values
-        .map(v => (v === '' ? 'empty' : String(v)))
+        .map(v => {
+          if (v === '') return 'empty';
+          if (isDate(v)) return prettyFormatIsoDateWithMsIfNeeded(v as Date);
+          return String(v);
+        })
         .join(', ')}`;
 
     case 'contains':
@@ -78,7 +91,7 @@ export function formatPatternWithoutNegation(pattern: FilterPattern): string {
       return `${pattern.column} ~ /${pattern.regexp}/`;
 
     case 'timeInterval': {
-      return DATE_FORMAT.formatRange(pattern.start, pattern.end);
+      return formatIsoDateRange(pattern.start, pattern.end);
     }
 
     case 'timeRelative': {
@@ -100,3 +113,67 @@ export function formatPatternWithoutNegation(pattern: FilterPattern): string {
       return String(pattern.expression);
   }
 }
+
+export function patternToBoundsQuery(
+  source: SqlQuery,
+  filterPattern: FilterPattern,
+): SqlQuery | undefined {
+  if (filterPattern.type !== 'timeRelative') return;
+  const ex = filterPatternToExpression(filterPattern);
+  if (!(ex instanceof SqlMulti)) return;
+  if (ex.numArgs() !== 2) return;
+  const [startEx, endEx] = ex.getArgArray();
+  if (!(startEx instanceof SqlComparison)) return;
+  if (!(endEx instanceof SqlComparison)) return;
+  return SqlQuery.from(source)
+    .changeSelectExpressions([startEx.lhs.as('start'), (endEx.rhs as SqlExpression).as('end')])
+    .changeLimitValue(1); // Todo: make this better
+}
+
+export function addOrUpdatePattern(
+  patterns: readonly FilterPattern[],
+  oldPattern: FilterPattern | undefined,
+  newPattern: FilterPattern,
+): FilterPattern[] {
+  let added = false;
+  const newPatterns = patterns.map(pattern => {
+    if (pattern === oldPattern) {
+      added = true;
+      return newPattern;
+    } else {
+      return pattern;
+    }
+  });
+  if (!added) {
+    newPatterns.push(newPattern);
+  }
+  return newPatterns;
+}
+
+export function updateFilterPattern(
+  patterns: readonly FilterPattern[],
+  newPattern: FilterPattern,
+): FilterPattern[] {
+  let found = false;
+  const newPatterns = patterns.map(pattern => {
+    if (!('column' in pattern) || !('column' in newPattern)) return pattern;
+    if (pattern.column === newPattern.column) {
+      found = true;
+      return newPattern;
+    } else {
+      return pattern;
+    }
+  });
+
+  if (found) {
+    return newPatterns;
+  } else {
+    return [...newPatterns, newPattern];
+  }
+}
+
+export function updateFilterClause(filter: SqlExpression, clause: SqlExpression) {
+  return filterPatternsToExpression(
+    updateFilterPattern(fitFilterPatterns(filter), fitFilterPattern(clause)),
+  );
+}
diff --git a/web-console/src/views/explore-view/utils/index.ts b/web-console/src/views/explore-view/utils/index.ts
index 57c72e2c0e7e..d1664b8e92e1 100644
--- a/web-console/src/views/explore-view/utils/index.ts
+++ b/web-console/src/views/explore-view/utils/index.ts
@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 
-export * from './date-format';
 export * from './filter-pattern-helpers';
 export * from './general';
-export * from './get-auto-granularity';
 export * from './known-aggregations';
 export * from './max-time-for-table';
 export * from './misc';
diff --git a/web-console/src/views/explore-view/utils/table-query.ts b/web-console/src/views/explore-view/utils/table-query.ts
index d46d68edb5e1..23584243a3bd 100644
--- a/web-console/src/views/explore-view/utils/table-query.ts
+++ b/web-console/src/views/explore-view/utils/table-query.ts
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { Duration } from 'chronoshift';
 import type { SqlAlias, SqlExpression, SqlOrderByExpression, SqlTable } from 'druid-query-toolkit';
 import {
   C,
@@ -31,7 +32,7 @@ import {
 } from 'druid-query-toolkit';
 
 import type { ColumnHint } from '../../../utils';
-import { Duration, forceSignInNumberFormatter, formatNumber, formatPercent } from '../../../utils';
+import { forceSignInNumberFormatter, formatNumber, formatPercent } from '../../../utils';
 import type { ExpressionMeta } from '../models';
 import { Measure } from '../models';
 
@@ -178,7 +179,7 @@ function getInnerJoinConditions(groupByExpressions: SqlAlias[]): SqlExpression[]
   return groupByExpressions.map(groupByExpression =>
     groupByExpression
       .getUnderlyingExpression()
-      .isNotDistinctFrom(T(TOP_VALUES_NAME).column(groupByExpression.getOutputName()!)),
+      .isNotDistinctFrom(T(TOP_VALUES_NAME).column(groupByExpression.getOutputName() || '')),
   );
 }
 
diff --git a/web-console/src/views/explore-view/utils/time-manipulation.spec.ts b/web-console/src/views/explore-view/utils/time-manipulation.spec.ts
index 70bdcf1e85ef..d37f97f4d2a5 100644
--- a/web-console/src/views/explore-view/utils/time-manipulation.spec.ts
+++ b/web-console/src/views/explore-view/utils/time-manipulation.spec.ts
@@ -16,9 +16,14 @@
  * limitations under the License.
  */
 
+import { Duration } from 'chronoshift';
 import { SqlExpression } from 'druid-query-toolkit';
 
-import { decomposeTimeInInterval, shiftBackAndExpandTimeInExpression } from './time-manipulation';
+import {
+  decomposeTimeInInterval,
+  overqueryWhere,
+  shiftBackAndExpandTimeInExpression,
+} from './time-manipulation';
 
 describe('decomposeTimeInInterval', () => {
   it('works with TIME_IN_INTERVAL (date)', () => {
@@ -223,3 +228,47 @@ describe('shiftBackAndExpandTimeInExpression', () => {
     });
   });
 });
+
+describe('overqueryWhere', () => {
+  const min = new Duration('PT1M');
+
+  it('works when there is nothing to do', () => {
+    expect(String(overqueryWhere(SqlExpression.parse('TRUE'), '__time', min, false))).toEqual(
+      'TRUE',
+    );
+  });
+
+  it('works with relative time (no extra)', () => {
+    expect(
+      String(
+        overqueryWhere(
+          SqlExpression.parse(
+            `(TIME_SHIFT(MAX_DATA_TIME(), 'PT1H', -1) <= "__time" AND "__time" < MAX_DATA_TIME()) AND country = 'USA'`,
+          ),
+          '__time',
+          min,
+          false,
+        ),
+      ),
+    ).toEqual(
+      `(TIME_FLOOR(TIME_SHIFT(MAX_DATA_TIME(), 'PT1H', -1), 'PT1M') <= "__time" AND "__time" < TIME_CEIL(MAX_DATA_TIME(), 'PT1M')) AND "country" = 'USA'`,
+    );
+  });
+
+  it('works with relative time (with extra)', () => {
+    expect(
+      String(
+        overqueryWhere(
+          SqlExpression.parse(
+            `(TIME_SHIFT(MAX_DATA_TIME(), 'PT1H', -1) <= "__time" AND "__time" < MAX_DATA_TIME()) AND country = 'USA'`,
+          ),
+          '__time',
+          min,
+          true,
+        ),
+      ),
+    ).toEqual(
+      `(TIME_SHIFT(TIME_FLOOR(TIME_SHIFT(MAX_DATA_TIME(), 'PT1H', -1), 'PT1M'), 'PT1M', -1) <= "__time" AND "__time" < TIME_SHIFT(TIME_CEIL(MAX_DATA_TIME(), 'PT1M'), 'PT1M', 1)) AND "country" = 'USA'`,
+    );
+  });
+});
diff --git a/web-console/src/views/explore-view/utils/time-manipulation.ts b/web-console/src/views/explore-view/utils/time-manipulation.ts
index 671ed3080f74..a4a7e3692726 100644
--- a/web-console/src/views/explore-view/utils/time-manipulation.ts
+++ b/web-console/src/views/explore-view/utils/time-manipulation.ts
@@ -16,14 +16,19 @@
  * limitations under the License.
  */
 
+import type { Duration } from 'chronoshift';
+import { Timezone } from 'chronoshift';
 import {
   F,
+  filterPatternToExpression,
+  fitFilterPatterns,
   SqlBetweenPart,
   SqlColumn,
   SqlComparison,
   SqlExpression,
   SqlFunction,
   SqlLiteral,
+  SqlMulti,
 } from 'druid-query-toolkit';
 
 import { partition } from '../../../utils';
@@ -191,3 +196,56 @@ function shiftBackAndExpandEnd(
   const ex = F.timeShift(end, shiftDuration, -1);
   return expandDuration ? F.timeCeil(ex, expandDuration) : ex;
 }
+
+export function overqueryWhere(
+  where: SqlExpression,
+  timeColumnName: string,
+  granularity: Duration,
+  oneExtra: boolean,
+) {
+  return SqlExpression.and(
+    ...fitFilterPatterns(where).map(pattern => {
+      if ('column' in pattern && pattern.column === timeColumnName) {
+        if (pattern.type === 'timeInterval') {
+          let start = granularity.floor(pattern.start, Timezone.UTC);
+          let end = granularity.ceil(pattern.end, Timezone.UTC);
+          if (oneExtra) {
+            start = granularity.shift(start, Timezone.UTC, -1);
+            end = granularity.shift(end, Timezone.UTC, 1);
+          }
+          return filterPatternToExpression({
+            ...pattern,
+            start,
+            end,
+          });
+        }
+
+        if (pattern.type === 'timeRelative') {
+          const ex = filterPatternToExpression(pattern);
+          // At this point we know that ex is something like (S <= __time AND __time < E)
+          // And we want to transform it to be (TIME_FLOOR(S, gran) <= __time AND __time < TIME_CEIL(E, gran))
+          if (ex instanceof SqlMulti && ex.op === 'AND') {
+            const condStart = ex.getArg(0);
+            const condEnd = ex.getArg(1);
+            if (
+              condStart instanceof SqlComparison &&
+              condEnd instanceof SqlComparison &&
+              condEnd.rhs instanceof SqlExpression
+            ) {
+              const p = granularity.toString();
+              return SqlExpression.and(
+                condStart.changeLhs(
+                  F.timeFloor(condStart.lhs, p).applyIf(oneExtra, e => F.timeShift(e, p, -1)),
+                ),
+                condEnd.changeRhs(
+                  F.timeCeil(condEnd.rhs, p).applyIf(oneExtra, e => F.timeShift(e, p, 1)),
+                ),
+              ).ensureParens();
+            }
+          }
+        }
+      }
+      return filterPatternToExpression(pattern);
+    }),
+  );
+}
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 25943929a187..74c23027aaa2 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -1529,7 +1529,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <div className="table-control">
             <ClearableInput
               value={columnFilter}
-              onChange={columnFilter => this.setState({ columnFilter })}
+              onValueChange={columnFilter => this.setState({ columnFilter })}
               placeholder="Search columns"
             />
             {canHaveNestedData && (
@@ -1844,7 +1844,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <div className="table-control">
             <ClearableInput
               value={columnFilter}
-              onChange={columnFilter => this.setState({ columnFilter })}
+              onValueChange={columnFilter => this.setState({ columnFilter })}
               placeholder="Search columns"
             />
             <Switch
@@ -2027,7 +2027,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <div className="table-control">
             <ClearableInput
               value={columnFilter}
-              onChange={columnFilter => this.setState({ columnFilter })}
+              onValueChange={columnFilter => this.setState({ columnFilter })}
               placeholder="Search columns"
             />
             <Switch
@@ -2231,7 +2231,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <div className="table-control">
             <ClearableInput
               value={columnFilter}
-              onChange={columnFilter => this.setState({ columnFilter })}
+              onValueChange={columnFilter => this.setState({ columnFilter })}
               placeholder="Search columns"
             />
           </div>
@@ -2399,7 +2399,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <div className="table-control">
             <ClearableInput
               value={columnFilter}
-              onChange={columnFilter => this.setState({ columnFilter })}
+              onValueChange={columnFilter => this.setState({ columnFilter })}
               placeholder="Search columns"
             />
           </div>
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
index d9b8e1089b9d..27b24a8350a0 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
@@ -833,7 +833,7 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
                 className="column-filter-control"
                 value={columnSearch}
                 placeholder="Search columns"
-                onChange={setColumnSearch}
+                onValueChange={setColumnSearch}
               />
             </div>
           )}
diff --git a/web-console/src/views/workbench-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
index 3723a5235bd5..32f0a49246ec 100644
--- a/web-console/src/views/workbench-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
@@ -18,12 +18,13 @@
 
 import { MenuDivider, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { day, hour, month, Timezone, year } from 'chronoshift';
 import type { SqlQuery } from 'druid-query-toolkit';
 import { C, F, SqlExpression } from 'druid-query-toolkit';
 import type { JSX } from 'react';
 import React from 'react';
 
-import { day, hour, month, prettyPrintSql, TZ_UTC, year } from '../../../../../utils';
+import { prettyPrintSql } from '../../../../../utils';
 
 const LATEST_HOUR: SqlExpression = SqlExpression.parse(
   `? >= CURRENT_TIMESTAMP - INTERVAL '1' HOUR`,
@@ -77,10 +78,10 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
     }
 
     const now = new Date();
-    const hourStart = hour.floor(now, TZ_UTC);
-    const dayStart = day.floor(now, TZ_UTC);
-    const monthStart = month.floor(now, TZ_UTC);
-    const yearStart = year.floor(now, TZ_UTC);
+    const hourStart = hour.floor(now, Timezone.UTC);
+    const dayStart = day.floor(now, Timezone.UTC);
+    const monthStart = month.floor(now, Timezone.UTC);
+    const yearStart = year.floor(now, Timezone.UTC);
     return (
       <MenuItem icon={IconNames.FILTER} text="Filter">
         {filterMenuItem(`Latest hour`, fillWithColumn(LATEST_HOUR, columnName))}
@@ -91,19 +92,19 @@ export const TimeMenuItems = React.memo(function TimeMenuItems(props: TimeMenuIt
         <MenuDivider />
         {filterMenuItem(
           `Current hour`,
-          fillWithColumnStartEnd(columnName, hourStart, hour.shift(hourStart, TZ_UTC, 1)),
+          fillWithColumnStartEnd(columnName, hourStart, hour.shift(hourStart, Timezone.UTC, 1)),
         )}
         {filterMenuItem(
           `Current day`,
-          fillWithColumnStartEnd(columnName, dayStart, day.shift(dayStart, TZ_UTC, 1)),
+          fillWithColumnStartEnd(columnName, dayStart, day.shift(dayStart, Timezone.UTC, 1)),
         )}
         {filterMenuItem(
           `Current month`,
-          fillWithColumnStartEnd(columnName, monthStart, month.shift(monthStart, TZ_UTC, 1)),
+          fillWithColumnStartEnd(columnName, monthStart, month.shift(monthStart, Timezone.UTC, 1)),
         )}
         {filterMenuItem(
           `Current year`,
-          fillWithColumnStartEnd(columnName, yearStart, year.shift(yearStart, TZ_UTC, 1)),
+          fillWithColumnStartEnd(columnName, yearStart, year.shift(yearStart, Timezone.UTC, 1)),
         )}
       </MenuItem>
     );
diff --git a/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap
index 996061eaeeec..308b030d19f1 100644
--- a/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap
@@ -46,7 +46,6 @@ exports[`ExecutionDetailsPane matches snapshot no init tab 1`] = `
       <Blueprint5.Tag
         active={false}
         fill={false}
-        interactive={false}
         large={false}
         minimal={true}
         round={false}
@@ -59,7 +58,6 @@ exports[`ExecutionDetailsPane matches snapshot no init tab 1`] = `
         <Blueprint5.Tag
           active={false}
           fill={false}
-          interactive={false}
           large={false}
           minimal={true}
           round={false}
@@ -73,7 +71,6 @@ exports[`ExecutionDetailsPane matches snapshot no init tab 1`] = `
       <Blueprint5.Tag
         active={false}
         fill={false}
-        interactive={false}
         large={false}
         minimal={true}
         round={false}
@@ -85,7 +82,6 @@ exports[`ExecutionDetailsPane matches snapshot no init tab 1`] = `
       <Blueprint5.Tag
         active={false}
         fill={false}
-        interactive={false}
         large={false}
         minimal={true}
         round={false}
diff --git a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
index 62cc9c3a375b..fa8bdceef018 100644
--- a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
+++ b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
@@ -24,6 +24,7 @@ import React, { useState } from 'react';
 import type { Execution } from '../../../druid-models';
 import type { Format } from '../../../utils';
 import {
+  copyAndAlert,
   copyQueryResultsToClipboard,
   downloadQueryResults,
   formatDurationHybrid,
@@ -98,8 +99,16 @@ export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
           if (!execution) return;
           if (oneOf(execution.engine, 'sql-msq-task', 'sql-msq-dart')) {
             onExecutionDetail();
+          } else {
+            copyAndAlert(execution.id, `Query ID (${execution.id}) copied to clipboard`);
           }
         }}
+        data-tooltip={
+          execution &&
+          (oneOf(execution.engine, 'sql-msq-task', 'sql-msq-dart')
+            ? `Open details for\n${execution.id}`
+            : `Query ID\n${execution.id}\n(click to copy)`)
+        }
       />,
       execution?.destination?.type === 'durableStorage' && execution.destinationPages ? (
         <Button
diff --git a/web-console/src/views/workbench-view/timezone-menu-items/timezone-menu-items.tsx b/web-console/src/views/workbench-view/timezone-menu-items/timezone-menu-items.tsx
index 2340302d0a56..81bff51dc9c2 100644
--- a/web-console/src/views/workbench-view/timezone-menu-items/timezone-menu-items.tsx
+++ b/web-console/src/views/workbench-view/timezone-menu-items/timezone-menu-items.tsx
@@ -19,9 +19,10 @@
 import { Icon, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { fromDate, getLocalTimeZone } from '@internationalized/date';
+import { minute } from 'chronoshift';
 import { useMemo } from 'react';
 
-import { minute, tickIcon, timezoneOffsetInMinutesToString } from '../../../utils';
+import { tickIcon, timezoneOffsetInMinutesToString } from '../../../utils';
 
 const NAMED_TIMEZONES: string[] = [
   'America/Juneau', // -9:00
diff --git a/web-console/tsconfig.json b/web-console/tsconfig.json
index b5c1874bfc89..1b78cf9c16ca 100644
--- a/web-console/tsconfig.json
+++ b/web-console/tsconfig.json
@@ -6,7 +6,7 @@
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
     "jsx": "react-jsx",
-    "lib": ["dom", "es2016", "esnext"],
+    "lib": ["dom", "es2021", "esnext"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmitOnError": true,