web console/cleanup js files

packages/web-console/.eslintrc.js

@@ -37,7 +37,6 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
   ],
-  globals: { ace: true },
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {},

packages/web-console/README.md

@@ -7,7 +7,7 @@ Yarn@3 and Webpack.
 
 ## Local development setup
 
-### TL;DR;
+## TL;DR;
 
 ```
 git clone git@github.com/questdb/ui.git
@@ -66,3 +66,23 @@ yarn workspace @questdb/web-console run build
 ```
 
 3. Build process emits static HTML, CSS and JS files in `packages/web-console/dist`
+
+## Run tests
+
+This monorepo contains `browser-tests` package which is used to test
+`web-console` package. `browser-tests` does not yet run as part of
+`web-console` build on CI, but they can be used to test changes locally.
+
+Tests are written with [Cypress](https://www.cypress.io/) E2E framework.
+
+1. start `web-console` local dev environment as explained above in this document.
+2. run tests with
+  ```
+  yarn workspace browser-tests test
+  ```
+
+  or
+
+  ```
+  yarn workspace browser-tests run cypress open
+  ```

packages/web-console/package.json

@@ -24,14 +24,6 @@
     "@monaco-editor/react": "^4.3.1",
     "@popperjs/core": "2.4.2",
     "@questdb/sql-grammar": "1.0.9",
-    "@types/ramda": "0.27.40",
-    "@types/react": "16.9.35",
-    "@types/react-dom": "16.9.8",
-    "@types/react-redux": "7.1.9",
-    "@types/react-transition-group": "4.4.0",
-    "@types/styled-components": "5.1.7",
-    "@types/throttle-debounce": "2.1.0",
-    "ace-builds": "1.4.11",
     "animate.css": "3.7.2",
     "bootstrap-sass": "3.4.1",
     "clipboard": "2.0.6",
@@ -40,7 +32,6 @@
     "docsearch.js": "2.6.3",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",
-    "glyphicons-halflings": "1.9.1",
     "jquery": "3.5.1",
     "monaco-editor": "^0.30.1",
     "prop-types": "^15.8.1",
@@ -70,6 +61,13 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@types/node": "^17.0.41",
+    "@types/ramda": "0.27.40",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
+    "@types/react-redux": "7.1.9",
+    "@types/react-transition-group": "4.4.0",
+    "@types/styled-components": "5.1.7",
+    "@types/throttle-debounce": "2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "babel-loader": "^8.2.5",

packages/web-console/src/js/console/console-controller.js

@@ -24,8 +24,6 @@
 
 import $ from "jquery"
 
-import * as qdb from "./globals"
-
 export function setupConsoleController(bus) {
   const grid = $("#grid")
   const quickVis = $("#quick-vis")

packages/web-console/src/js/console/globals.js

@@ -22,8 +22,6 @@
  *
  ******************************************************************************/
 
-import $ from "jquery"
-
 const queryBatchSize = 1000
 const MSG_QUERY_EXPORT = "query.in.export"
 const MSG_QUERY_EXEC = "query.in.exec"
@@ -41,36 +39,10 @@ const MSG_EDITOR_EXECUTE_ALT = "editor.execute.alt"
 
 const MSG_CHART_DRAW = "chart.draw"
 
-export function toExportUrl(query) {
-  return (
-    window.location.protocol +
-    "//" +
-    window.location.host +
-    "/exp?query=" +
-    encodeURIComponent(query)
-  )
-}
-
 export function setHeight(element, height) {
   element.css("height", height + "px")
 }
 
-export function createEditor(div) {
-  const edit = ace.edit(div)
-  edit.getSession().setMode("ace/mode/questdb")
-  edit.setTheme("ace/theme/dracula")
-  edit.setShowPrintMargin(false)
-  edit.setDisplayIndentGuides(false)
-  edit.setHighlightActiveLine(false)
-  edit.$blockScrolling = Infinity
-
-  $(window).on("resize", function () {
-    edit.resize()
-  })
-
-  return edit
-}
-
 export {
   MSG_QUERY_EXPORT,
   MSG_QUERY_EXEC,

packages/web-console/src/js/console/import-controller.js

@@ -31,7 +31,6 @@ let upperHalfHeight = 515
 function resize() {
   const footer = $(".footer")
   const importTopPanel = $("#import-top")
-  const canvasPanel = importTopPanel.find(".ud-canvas")
   const importDetail = $("#import-detail")
   const importMenu = $("#import-menu")[0]
   const h = $(window)[0].innerHeight
@@ -42,9 +41,6 @@ function resize() {
     importDetail,
     h - footerHeight - upperHalfHeight - importMenu.offsetHeight - 50,
   )
-
-  let r1 = importTopPanel[0].getBoundingClientRect()
-  let r2 = canvasPanel[0].getBoundingClientRect()
 }
 
 function splitterResize(x, p) {

packages/web-console/src/js/console/quick-vis.js

@@ -38,7 +38,6 @@ echarts.use([LegendComponent, GridComponent])
 // https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript
 //
 
-// attach the .equals method to Array's prototype to call it on any array
 function arrayEquals(left, right) {
   // if the other array is a falsy value, return
   if (!left || !right) {
@@ -68,17 +67,6 @@ function arrayEquals(left, right) {
 // end of copy paste
 
 $.fn.quickVis = function (msgBus) {
-  var defaults = {
-    minColumnWidth: 60,
-    rowHeight: 28,
-    divCacheSize: 128,
-    viewportHeight: 400,
-    yMaxThreshold: 10000000,
-    maxRowsToAnalyze: 100,
-    bottomMargin: 75,
-    minVpHeight: 120,
-    minDivHeight: 160,
-  }
   var bus = msgBus
   var div = $(this)
   const btnDraw = $("#_qvis_frm_draw")

packages/web-console/src/styles/_base.scss

@@ -59,14 +59,6 @@ body {
   scrollbar-width: thin;
 }
 
-.ace_scrollbar-v {
-  width: 10px !important;
-}
-
-.ace_scrollbar-h {
-  height: 10px !important;
-}
-
 html,
 body {
   height: 100%;
@@ -837,15 +829,6 @@ table.table-mail tr td {
   font-size: inherit;
 }
 
-.jumbotron {
-  border-radius: 6px;
-  padding: 40px;
-}
-
-.jumbotron h1 {
-  margin-top: 0;
-}
-
 /* COLORS */
 
 .text-navy {