Ditch jQuery event bus

packages/web-console/package.json

@@ -53,6 +53,7 @@
     "dexie-react-hooks": "^1.1.6",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",
+    "eventemitter3": "^5.0.1",
     "intersection-observer": "^0.12.2",
     "joi": "17.5.0",
     "jquery": "3.5.1",
@@ -87,6 +88,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@styled-icons/styled-icon": "^10.7.0",
+    "@types/echarts": "^4.9.22",
     "@types/jquery": "3.5.1",
     "@types/node": "^17.0.41",
     "@types/ramda": "0.27.40",

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

@@ -22,27 +22,6 @@
  *
  ******************************************************************************/
 
-export enum BusEvent {
-  MSG_ACTIVE_SIDEBAR = "active.panel",
-  MSG_EDITOR_FOCUS = "editor.focus",
-  MSG_EDITOR_SET = "editor.set",
-  MSG_EDITOR_INSERT_COLUMN = "editor.insert.column",
-  MSG_EDITOR_INSERT_QUERY = "editor.insert.query",
-  GRID_FOCUS = "grid.focus",
-  MSG_QUERY_CANCEL = "query.in.cancel",
-  MSG_QUERY_DATASET = "query.out.dataset",
-  MSG_QUERY_ERROR = "query.out.error",
-  MSG_QUERY_EXEC = "query.in.exec",
-  MSG_QUERY_EXPORT = "query.in.export",
-  MSG_QUERY_FIND_N_EXEC = "query.build.execute",
-  MSG_QUERY_OK = "query.out.ok",
-  MSG_QUERY_RUNNING = "query.out.running",
-  MSG_QUERY_SCHEMA = "query.out.schema",
-  MSG_CONNECTION_OK = "query.connection.ok",
-  MSG_CONNECTION_ERROR = "query.connection.error",
-  REACT_READY = "react.ready",
-}
-
 export enum TelemetryTable {
   MAIN = "telemetry",
   CONFIG = "telemetry_config",

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

@@ -21,11 +21,6 @@
  *  limitations under the License.
  *
  ******************************************************************************/
-
-import $ from "jquery"
+import "../../modules/EventBus"
 
 import "../../styles/main.scss"
-import "./splitter"
-
-let messageBus = $({})
-window.bus = messageBus

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

@@ -21,6 +21,7 @@
  *  limitations under the License.
  *
  ******************************************************************************/
+// @ts-nocheck
 
 import "echarts/lib/chart/bar"
 import "echarts/lib/chart/line"
@@ -32,23 +33,27 @@ import { LegendComponent, GridComponent } from "echarts/components"
 import $ from "jquery"
 import SlimSelect from "slim-select"
 
-import * as qdb from "./globals"
 import eChartsMacarons from "./utils/macarons"
 import { arrayEquals } from "./array-equals"
+import { eventBus } from "../../modules/EventBus"
+import { EventType } from "../../modules/EventBus/types"
 
 echarts.use([LegendComponent, GridComponent])
 
-export function quickVis(root, msgBus) {
-  var bus = msgBus
-  var div = root
+export function quickVis(
+  root: ReturnType<typeof jQuery>,
+  msgBus: ReturnType<typeof jQuery>,
+) {
+  let bus = msgBus
+  let div = root
   const btnDraw = $("#_qvis_frm_draw")
-  var viewport
-  var echart
-  var query
-  var queryExecutionTimestamp
-  var xAxis
-  var yAxis
-  var chartType
+  let viewport
+  let echart: echarts.ECharts
+  let query: any
+  let queryExecutionTimestamp: number
+  let xAxis: unknown
+  let yAxis: string | any[]
+  let chartType: string | string[]
   const columnSet = new Set()
   const blankChartOptions = {
     title: {},
@@ -69,9 +74,9 @@ export function quickVis(root, msgBus) {
     ],
   }
 
-  var cachedResponse
-  var cachedQuery
-  var hActiveRequest
+  let cachedResponse: any
+  let cachedQuery: any
+  let hActiveRequest: JQuery.jqXHR<any> | null
 
   const chartTypePicker = new SlimSelect({
     select: "#_qvis_frm_chart_type",
@@ -89,8 +94,8 @@ export function quickVis(root, msgBus) {
     echart.resize()
   }
 
-  function addToSet(array, set) {
-    for (var i = 0; i < array.length; i++) {
+  function addToSet(array: string | any[], set: Set<unknown>) {
+    for (let i = 0; i < array.length; i++) {
       set.add(array[i])
     }
   }
@@ -106,7 +111,7 @@ export function quickVis(root, msgBus) {
   }
 
   // draw server response
-  function draw(r) {
+  function draw(r: { columns: any; dataset: any }) {
     try {
       let i
       // create column name to index map
@@ -194,7 +199,7 @@ export function quickVis(root, msgBus) {
 
   function handleServerResponse(r) {
     hActiveRequest = null
-    bus.trigger(qdb.MSG_QUERY_OK, {
+    eventBus.publish(EventType.MSG_QUERY_OK, {
       delta: new Date().getTime() - queryExecutionTimestamp,
       count: r.count,
     })
@@ -206,7 +211,7 @@ export function quickVis(root, msgBus) {
   function handleServerError(r) {
     hActiveRequest = null
     setDrawBtnToDraw()
-    bus.trigger(qdb.MSG_QUERY_ERROR, {
+    eventBus.publish(EventType.MSG_QUERY_ERROR, {
       query: cachedQuery,
       r: r.responseJSON,
       status: r.status,
@@ -245,7 +250,7 @@ export function quickVis(root, msgBus) {
 
       // expand the set into HTTP query parameter value
       // we only need columns used in chart rather than all columns in the result set
-      var urlColumns = ""
+      let urlColumns = ""
       columnSet.forEach(function (value) {
         if (urlColumns !== "") {
           urlColumns += ","
@@ -261,7 +266,7 @@ export function quickVis(root, msgBus) {
       // time the query because control that displays query success expected time delta
       queryExecutionTimestamp = new Date().getTime()
       hActiveRequest = $.get("/exec", requestParams)
-      bus.trigger(qdb.MSG_QUERY_RUNNING)
+      eventBus.publish(EventType.MSG_QUERY_RUNNING)
       hActiveRequest.done(handleServerResponse).fail(handleServerError)
     }
   }
@@ -270,10 +275,10 @@ export function quickVis(root, msgBus) {
     echart.setOption(blankChartOptions, true)
   }
 
-  function updatePickers(e, data) {
-    var x = []
+  function updatePickers(e: any, data: { columns: any; query: any }) {
+    let x = []
     const columns = data.columns
-    for (var i = 0; i < columns.length; i++) {
+    for (let i = 0; i < columns.length; i++) {
       x[i] = { text: columns[i].name, value: columns[i].name }
     }
     xAxisPicker.setData(x)
@@ -295,21 +300,22 @@ export function quickVis(root, msgBus) {
 
   function btnDrawClick() {
     if (hActiveRequest) {
-      bus.trigger(qdb.MSG_QUERY_CANCEL)
+      eventBus.publish(EventType.MSG_QUERY_CANCEL)
     } else {
-      bus.trigger(qdb.MSG_CHART_DRAW)
+      eventBus.publish(EventType.MSG_CHART_DRAW)
     }
     return false
   }
 
   function bind() {
     viewport = div.find(".quick-vis-canvas")[0]
     $(window).resize(resize)
-    bus.on(qdb.MSG_ACTIVE_SIDEBAR, resize)
+    eventBus.subscribe(EventType.MSG_ACTIVE_SIDEBAR, resize)
+    // @ts-ignore
     echart = echarts.init(viewport, eChartsMacarons)
-    bus.on(qdb.MSG_QUERY_DATASET, updatePickers)
-    bus.on(qdb.MSG_QUERY_CANCEL, cancelDraw)
-    bus.on(qdb.MSG_CHART_DRAW, executeQueryAndDraw)
+    eventBus.subscribe(EventType.MSG_QUERY_DATASET, updatePickers)
+    eventBus.subscribe(EventType.MSG_QUERY_CANCEL, cancelDraw)
+    eventBus.subscribe(EventType.MSG_CHART_DRAW, executeQueryAndDraw)
     btnDraw.click(btnDrawClick)
     clearChart()
   }

packages/web-console/src/modules/EventBus/index.ts

@@ -0,0 +1,30 @@
+import EventEmitter from "eventemitter3"
+import { EventType } from "./types"
+
+class EventBus {
+  private emitter: EventEmitter
+
+  constructor() {
+    this.emitter = new EventEmitter()
+  }
+
+  publish<T extends any>(eventType: EventType, eventPayload?: T): void {
+    this.emitter.emit(eventType, eventPayload)
+  }
+
+  subscribe<T extends any>(
+    eventType: EventType,
+    handler: (eventPayload?: T) => void,
+  ): void {
+    this.emitter.on(eventType, handler)
+  }
+
+  unsubscribe<T extends any>(
+    eventType: EventType,
+    handler: (eventPayload?: T) => void,
+  ): void {
+    this.emitter.off(eventType, handler)
+  }
+}
+
+export const eventBus = new EventBus()