web console/refactor jquery modules

packages/web-console/package.json

@@ -60,6 +60,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
+    "@types/jquery": "3.5.1",
     "@types/node": "^17.0.41",
     "@types/ramda": "0.27.40",
     "@types/react": "16.9.35",

packages/web-console/src/consts/index.ts

@@ -24,8 +24,6 @@
 
 export enum BusEvent {
   MSG_ACTIVE_PANEL = "active.panel",
-  MSG_EDITOR_EXECUTE = "editor.execute",
-  MSG_EDITOR_EXECUTE_ALT = "editor.execute.alt",
   MSG_EDITOR_FOCUS = "editor.focus",
   MSG_EDITOR_SET = "editor.set",
   MSG_EDITOR_INSERT_COLUMN = "editor.insert.column",

packages/web-console/src/index.tsx

@@ -24,6 +24,7 @@
 
 import "core-js/features/promise"
 import "./js/console"
+import "docsearch.js/dist/cdn/docsearch.min.css"
 
 import React from "react"
 import ReactDOM from "react-dom"

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

@@ -22,40 +22,14 @@
  *
  ******************************************************************************/
 
-const queryBatchSize = 1000
-const MSG_QUERY_EXPORT = "query.in.export"
-const MSG_QUERY_EXEC = "query.in.exec"
-const MSG_QUERY_CANCEL = "query.in.cancel"
-const MSG_QUERY_RUNNING = "query.out.running"
-const MSG_QUERY_OK = "query.out.ok"
-const MSG_QUERY_ERROR = "query.out.error"
-const MSG_QUERY_DATASET = "query.out.dataset"
-const MSG_QUERY_FIND_N_EXEC = "query.build.execute"
-const MSG_ACTIVE_PANEL = "active.panel"
-
-const MSG_EDITOR_FOCUS = "editor.focus"
-const MSG_EDITOR_EXECUTE = "editor.execute"
-const MSG_EDITOR_EXECUTE_ALT = "editor.execute.alt"
-
-const MSG_CHART_DRAW = "chart.draw"
-
-export function setHeight(element, height) {
-  element.css("height", height + "px")
-}
-
-export {
-  MSG_QUERY_EXPORT,
-  MSG_QUERY_EXEC,
-  MSG_QUERY_CANCEL,
-  MSG_QUERY_RUNNING,
-  MSG_QUERY_OK,
-  MSG_QUERY_ERROR,
-  MSG_QUERY_DATASET,
-  MSG_ACTIVE_PANEL,
-  MSG_QUERY_FIND_N_EXEC,
-  MSG_EDITOR_FOCUS,
-  MSG_EDITOR_EXECUTE,
-  MSG_EDITOR_EXECUTE_ALT,
-  MSG_CHART_DRAW,
-  queryBatchSize,
-}
+export const MSG_QUERY_EXPORT = "query.in.export"
+export const MSG_QUERY_EXEC = "query.in.exec"
+export const MSG_QUERY_CANCEL = "query.in.cancel"
+export const MSG_QUERY_RUNNING = "query.out.running"
+export const MSG_QUERY_OK = "query.out.ok"
+export const MSG_QUERY_ERROR = "query.out.error"
+export const MSG_QUERY_DATASET = "query.out.dataset"
+export const MSG_QUERY_FIND_N_EXEC = "query.build.execute"
+export const MSG_ACTIVE_PANEL = "active.panel"
+export const MSG_EDITOR_FOCUS = "editor.focus"
+export const MSG_CHART_DRAW = "chart.draw"

packages/web-console/src/js/console/grid.d.ts

@@ -0,0 +1,5 @@
+import jQuery from "jquery"
+export function grid(
+  root: ReturnType<typeof jQuery>,
+  msgBus: ReturnType<typeof jQuery>,
+): void

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

@@ -26,7 +26,7 @@ import $ from "jquery"
 
 import * as qdb from "./globals"
 
-$.fn.grid = function (msgBus) {
+export function grid(root, msgBus) {
   var defaults = {
     minColumnWidth: 60,
     rowHeight: 28,
@@ -40,7 +40,7 @@ $.fn.grid = function (msgBus) {
   }
   var bus = msgBus
   var $style
-  var div = $(this)
+  var div = root
   var viewport
   var canvas
   var header
@@ -52,7 +52,7 @@ $.fn.grid = function (msgBus) {
   // number of divs in "rows" cache, has to be power of two
   var dc = defaults.divCacheSize
   var dcn = dc - 1
-  var pageSize = qdb.queryBatchSize
+  var pageSize = 1000
   var oneThirdPage = Math.floor(pageSize / 3)
   var twoThirdsPage = oneThirdPage * 2
   var loPage

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

@@ -24,10 +24,11 @@
 
 import $ from "jquery"
 
-import * as qdb from "./globals"
+function setHeight(element, height) {
+  element.css("height", height + "px")
+}
 
 let upperHalfHeight = 515
-
 function resize() {
   const footer = $(".footer")
   const importTopPanel = $("#import-top")
@@ -36,8 +37,8 @@ function resize() {
   const h = $(window)[0].innerHeight
   const footerHeight = footer.offsetHeight
 
-  qdb.setHeight(importTopPanel, upperHalfHeight)
-  qdb.setHeight(
+  setHeight(importTopPanel, upperHalfHeight)
+  setHeight(
     importDetail,
     h - footerHeight - upperHalfHeight - importMenu.offsetHeight - 50,
   )

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

@@ -22,34 +22,18 @@
  *
  ******************************************************************************/
 
-import "echarts/lib/chart/bar"
-import "echarts/lib/chart/line"
-import "echarts/lib/component/tooltip"
-import "echarts/lib/component/title"
-import "docsearch.js/dist/cdn/docsearch.min.css"
 import $ from "jquery"
 
-import { setupConsoleController } from "./console-controller"
 import { setupImportController } from "./import-controller"
 
 import "../../styles/main.scss"
-import "./grid"
 import "./import"
 import "./import-detail"
-import "./quick-vis"
 import "./splitter"
 
 let messageBus = $({})
 window.bus = messageBus
 
-$(document).ready(function () {
-  messageBus.trigger("preferences.load")
-
-  const win = $(window)
-  win.trigger("resize")
-})
-
 messageBus.on("react.ready", () => {
-  setupConsoleController(messageBus)
-  setupImportController(messageBus)
+  setupImportController(bus)
 })

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

@@ -0,0 +1,5 @@
+import jQuery from "jquery"
+export function quickVis(
+  root: ReturnType<typeof jQuery>,
+  msgBus: ReturnType<typeof jQuery>,
+): void

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

@@ -22,6 +22,10 @@
  *
  ******************************************************************************/
 
+import "echarts/lib/chart/bar"
+import "echarts/lib/chart/line"
+import "echarts/lib/component/tooltip"
+import "echarts/lib/component/title"
 import * as echarts from "echarts/lib/echarts"
 import { LegendComponent, GridComponent } from "echarts/components"
 
@@ -66,9 +70,9 @@ function arrayEquals(left, right) {
 
 // end of copy paste
 
-$.fn.quickVis = function (msgBus) {
+export function quickVis(root, msgBus) {
   var bus = msgBus
-  var div = $(this)
+  var div = root
   const btnDraw = $("#_qvis_frm_draw")
   var viewport
   var echart

packages/web-console/src/scenes/Result/index.tsx

@@ -22,11 +22,15 @@
  *
  ******************************************************************************/
 
+import $ from "jquery"
 import React, { useCallback, useEffect, useState } from "react"
 import { useSelector } from "react-redux"
 import styled from "styled-components"
 import { Download2, Grid, PieChart, Refresh } from "styled-icons/remix-line"
 
+import { grid } from "../../js/console/grid"
+import { quickVis } from "../../js/console/quick-vis"
+
 import {
   PaneContent,
   PaneWrapper,
@@ -83,6 +87,11 @@ const Result = () => {
   const [count, setCount] = useState<number | undefined>()
   const { sm } = useScreenSize()
   const result = useSelector(selectors.query.getResult)
+  useEffect(() => {
+    grid($("#grid"), window.bus as unknown as ReturnType<typeof $>)
+    quickVis($("#quick-vis"), window.bus as unknown as ReturnType<typeof $>)
+  }, [])
+
   const handleChartClick = useCallback(() => {
     setSelected("chart")
   }, [])

yarn.lock

@@ -2659,6 +2659,7 @@ __metadata:
     "@monaco-editor/react": ^4.3.1
     "@popperjs/core": 2.4.2
     "@questdb/sql-grammar": 1.0.9
+    "@types/jquery": 3.5.1
     "@types/node": ^17.0.41
     "@types/ramda": 0.27.40
     "@types/react": 16.9.35
@@ -4845,6 +4846,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jquery@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@types/jquery@npm:3.5.1"
+  dependencies:
+    "@types/sizzle": "*"
+  checksum: 963cd03a5a69ec38009b077c63b5d3590229b83ea40065d14a916de0fa46370bf587ee3c696793751361c41cd3ffeef57fa8ba522be0eeec9187673312bbacae
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
@@ -5101,7 +5111,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/sizzle@npm:^2.3.2":
+"@types/sizzle@npm:*, @types/sizzle@npm:^2.3.2":
   version: 2.3.3
   resolution: "@types/sizzle@npm:2.3.3"
   checksum: 586a9fb1f6ff3e325e0f2cc1596a460615f0bc8a28f6e276ac9b509401039dd242fa8b34496d3a30c52f5b495873922d09a9e76c50c2ab2bcc70ba3fb9c4e160