Web console: revamp the experimental explore view (#17180)

* explore revamp

* remove ToDo

* fix CodeQL

* add tooltips

* show issue on echart chars

* fix: browser back does not refresh chart

* fix maxRows 0

* be more resiliant to missing __time

licenses.yaml

@@ -5155,24 +5155,6 @@ version: 0.22.22
 
 ---
 
-name: "@druid-toolkit/visuals-core"
-license_category: binary
-module: web-console
-license_name: Apache License version 2.0
-copyright: Imply Data
-version: 0.3.3
-
----
-
-name: "@druid-toolkit/visuals-react"
-license_category: binary
-module: web-console
-license_name: Apache License version 2.0
-copyright: Imply Data
-version: 0.3.3
-
----
-
 name: "@emotion/cache"
 license_category: binary
 module: web-console
@@ -5273,15 +5255,6 @@ license_file_path: licenses/bin/@fontsource-open-sans.OFL
 
 ---
 
-name: "@juggle/resize-observer"
-license_category: binary
-module: web-console
-license_name: Apache License version 2.0
-copyright: Juggle
-version: 3.4.0
-
----
-
 name: "@popperjs/core"
 license_category: binary
 module: web-console
@@ -5641,6 +5614,16 @@ license_file_path: licenses/bin/d3-interpolate.BSD3
 
 ---
 
+name: "d3-scale-chromatic"
+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
+
+---
+
 name: "d3-scale"
 license_category: binary
 module: web-console
@@ -6627,16 +6610,6 @@ license_file_path: licenses/bin/upper-case.MIT
 
 ---
 
-name: "use-resize-observer"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Viktor Hubert
-version: 9.1.0
-license_file_path: licenses/bin/use-resize-observer.MIT
-
----
-
 name: "use-sync-external-store"
 license_category: binary
 module: web-console

web-console/README.md

@@ -59,7 +59,8 @@ The console relies on [eslint](https://eslint.org) (and various plugins), [sass-
 
 - Install `dbaeumer.vscode-eslint` extension
 - Install `esbenp.prettier-vscode` extension
-- Open User Settings (JSON) and set the following:
+- Select `Open User Settings (JSON)` from the editor commnads (`Ctrl+Shift+P` or `Comand+Shift+P`) and set the following:
+
   ```json
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,

web-console/package.json

@@ -69,8 +69,6 @@
     "@blueprintjs/icons": "^5.10.0",
     "@blueprintjs/select": "^5.2.1",
     "@druid-toolkit/query": "^0.22.22",
-    "@druid-toolkit/visuals-core": "^0.3.3",
-    "@druid-toolkit/visuals-react": "^0.3.3",
     "@fontsource/open-sans": "^5.0.28",
     "ace-builds": "~1.4.14",
     "axios": "^1.7.4",
@@ -82,6 +80,7 @@
     "d3-axis": "^2.1.0",
     "d3-dsv": "^2.0.0",
     "d3-scale": "^3.3.0",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "^2.0.0",
     "date-fns": "^2.28.0",
     "echarts": "^5.4.3",
@@ -116,6 +115,7 @@
     "@types/d3-axis": "^2.1.3",
     "@types/d3-dsv": "^2.0.0",
     "@types/d3-scale": "^3.3.2",
+    "@types/d3-scale-chromatic": "^3.0.3",
     "@types/d3-selection": "^2.0.1",
     "@types/enzyme": "^3.10.17",
     "@types/enzyme-adapter-react-16": "^1.0.9",

web-console/src/components/index.ts

@@ -27,6 +27,7 @@ export * from './clearable-input/clearable-input';
 export * from './click-to-copy/click-to-copy';
 export * from './deferred/deferred';
 export * from './external-link/external-link';
+export * from './fancy-numeric-input/fancy-numeric-input';
 export * from './fancy-tab-pane/fancy-tab-pane';
 export * from './form-group-with-info/form-group-with-info';
 export * from './form-json-selector/form-json-selector';

web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`TableCell matches snapshot Date 1`] = `
   class="table-cell timestamp"
   data-tooltip="1645664523000"
 >
-  2022-02-24T01:02:03.000Z
+  2022-02-24 01:02:03
 </div>
 `;
 

web-console/src/components/table-cell/table-cell.tsx

@@ -21,7 +21,7 @@ import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
 import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
-import { isSimpleArray } from '../../utils';
+import { isSimpleArray, prettyFormatIsoDateWithMsIfNeeded } from '../../utils';
 import { ActionIcon } from '../action-icon/action-icon';
 
 import './table-cell.scss';
@@ -97,8 +97,8 @@ export const TableCell = React.memo(function TableCell(props: TableCellProps) {
   } else if (value instanceof Date) {
     const dateValue = value.valueOf();
     return (
-      <div className="table-cell timestamp" data-tooltip={String(value.valueOf())}>
-        {isNaN(dateValue) ? 'Invalid date' : value.toISOString()}
+      <div className="table-cell timestamp" data-tooltip={String(dateValue)}>
+        {isNaN(dateValue) ? 'Invalid date' : prettyFormatIsoDateWithMsIfNeeded(value.toISOString())}
       </div>
     );
   } else if (isSimpleArray(value)) {

web-console/src/entry.scss

@@ -75,3 +75,10 @@ body {
   max-height: 47vh;
   overflow: auto;
 }
+
+// Make buttons stretch nicely
+.#{$bp-ns}-button.#{$bp-ns}-fill {
+  .#{$bp-ns}-button-text {
+    flex: 1;
+  }
+}

web-console/src/hooks/index.ts

@@ -19,6 +19,7 @@
 export * from './use-clock';
 export * from './use-constant';
 export * from './use-global-event-listener';
+export * from './use-hash-and-local-storage-hybrid-state';
 export * from './use-interval';
 export * from './use-last-defined';
 export * from './use-local-storage-state';