[Backport] console work to 31 (#16991, #17132, #17133, #17135, #17180)

licenses.yaml

@@ -5089,24 +5089,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
@@ -5207,15 +5189,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
@@ -5575,6 +5548,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
@@ -6561,16 +6544,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/braced-text/braced-text.tsx

@@ -84,7 +84,7 @@ function hideThousandsSeparator(text: string) {
 }
 
 export const BracedText = React.memo(function BracedText(props: BracedTextProps) {
-  const { className, text, braces, padFractionalPart, unselectableThousandsSeparator, title } =
+  const { className, text, braces, padFractionalPart, unselectableThousandsSeparator, ...rest } =
     props;
 
   let effectiveBraces = braces.concat(text);
@@ -115,7 +115,7 @@ export const BracedText = React.memo(function BracedText(props: BracedTextProps)
   }
 
   return (
-    <span className={classNames('braced-text', className)} title={title}>
+    <span className={classNames('braced-text', className)} {...rest}>
       <span className="brace-text">{findMostNumbers(effectiveBraces)}</span>
       <span className="real-text">
         {unselectableThousandsSeparator ? hideThousandsSeparator(text) : text}

web-console/src/components/click-to-copy/__snapshots__/click-to-copy.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ClickToCopy matches snapshot 1`] = `
 <a
   class="click-to-copy"
-  title="Click to copy:
+  data-tooltip="Click to copy:
 Hello world"
 >
   Hello world

web-console/src/components/click-to-copy/click-to-copy.tsx

@@ -31,7 +31,7 @@ export const ClickToCopy = React.memo(function ClickToCopy(props: ClickToCopyPro
   return (
     <a
       className="click-to-copy"
-      title={`Click to copy:\n${text}`}
+      data-tooltip={`Click to copy:\n${text}`}
       onClick={() => {
         copy(text, { format: 'text/plain' });
         AppToaster.show({

web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap

@@ -199,6 +199,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       <Blueprint5.Button
         active={false}
         className="header-entry"
+        data-tooltip="More views"
         icon="more"
         minimal={true}
       />
@@ -212,7 +213,7 @@ exports[`HeaderBar matches snapshot 1`] = `
         Capabilities {
           "coordinator": true,
           "maxTaskSlots": undefined,
-          "multiStageQuery": true,
+          "multiStageQueryTask": true,
           "overlord": true,
           "queryType": "nativeAndSql",
         }
@@ -333,6 +334,7 @@ exports[`HeaderBar matches snapshot 1`] = `
     >
       <Blueprint5.Button
         className="header-entry"
+        data-tooltip="Settings"
         icon="cog"
         minimal={true}
       />
@@ -418,6 +420,7 @@ exports[`HeaderBar matches snapshot 1`] = `
     >
       <Blueprint5.Button
         className="header-entry"
+        data-tooltip="Help"
         icon="help"
         minimal={true}
       />