diff --git a/.pnp.cjs b/.pnp.cjs index 91c2beb21..90a8bc9f1 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -5224,6 +5224,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@monaco-editor/react", "virtual:b7c775051d99785ec73273707ec685f06b84c737b39cc023ebc60bda25254288f27e86643fb15b7a00bd8a6d76cc119d4628443d858e76eb62af2718d7eb18cf#npm:4.4.5"],\ ["@popperjs/core", "npm:2.4.2"],\ ["@questdb/sql-grammar", "npm:1.0.9"],\ + ["@types/jquery", "npm:3.5.1"],\ ["@types/node", "npm:17.0.41"],\ ["@types/ramda", "npm:0.27.40"],\ ["@types/react", "npm:17.0.2"],\ @@ -9155,6 +9156,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@types/jquery", [\ + ["npm:3.5.1", {\ + "packageLocation": "./.yarn/cache/@types-jquery-npm-3.5.1-998cae83dd-963cd03a5a.zip/node_modules/@types/jquery/",\ + "packageDependencies": [\ + ["@types/jquery", "npm:3.5.1"],\ + ["@types/sizzle", "npm:2.3.3"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/json-schema", [\ ["npm:7.0.11", {\ "packageLocation": "./.yarn/cache/@types-json-schema-npm-7.0.11-79462ae5ca-527bddfe62.zip/node_modules/@types/json-schema/",\ diff --git a/.yarn/cache/@types-jquery-npm-3.5.1-998cae83dd-963cd03a5a.zip b/.yarn/cache/@types-jquery-npm-3.5.1-998cae83dd-963cd03a5a.zip new file mode 100644 index 000000000..ec5dd87c9 Binary files /dev/null and b/.yarn/cache/@types-jquery-npm-3.5.1-998cae83dd-963cd03a5a.zip differ diff --git a/packages/web-console/package.json b/packages/web-console/package.json index 7133fa279..310470d92 100644 --- a/packages/web-console/package.json +++ b/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", diff --git a/packages/web-console/src/consts/index.ts b/packages/web-console/src/consts/index.ts index 5992f8da1..7696a898c 100644 --- a/packages/web-console/src/consts/index.ts +++ b/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", diff --git a/packages/web-console/src/index.tsx b/packages/web-console/src/index.tsx index 3d278beed..8652f0bf5 100644 --- a/packages/web-console/src/index.tsx +++ b/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" diff --git a/packages/web-console/src/js/console/console-controller.js b/packages/web-console/src/js/console/console-controller.js deleted file mode 100644 index 9be5452ac..000000000 --- a/packages/web-console/src/js/console/console-controller.js +++ /dev/null @@ -1,33 +0,0 @@ -/******************************************************************************* - * ___ _ ____ ____ - * / _ \ _ _ ___ ___| |_| _ \| __ ) - * | | | | | | |/ _ \/ __| __| | | | _ \ - * | |_| | |_| | __/\__ \ |_| |_| | |_) | - * \__\_\\__,_|\___||___/\__|____/|____/ - * - * Copyright (c) 2014-2019 Appsicle - * Copyright (c) 2019-2022 QuestDB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - ******************************************************************************/ - -import $ from "jquery" - -export function setupConsoleController(bus) { - const grid = $("#grid") - const quickVis = $("#quick-vis") - - grid.grid(bus) - quickVis.quickVis(bus) -} diff --git a/packages/web-console/src/js/console/globals.js b/packages/web-console/src/js/console/globals.js index a4aaf6280..099b171ea 100644 --- a/packages/web-console/src/js/console/globals.js +++ b/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" diff --git a/packages/web-console/src/js/console/grid.d.ts b/packages/web-console/src/js/console/grid.d.ts new file mode 100644 index 000000000..a9d1295bd --- /dev/null +++ b/packages/web-console/src/js/console/grid.d.ts @@ -0,0 +1,5 @@ +import jQuery from "jquery" +export function grid( + root: ReturnType, + msgBus: ReturnType, +): void diff --git a/packages/web-console/src/js/console/grid.js b/packages/web-console/src/js/console/grid.js index 6d36b644e..2e381bc31 100644 --- a/packages/web-console/src/js/console/grid.js +++ b/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 diff --git a/packages/web-console/src/js/console/import-controller.js b/packages/web-console/src/js/console/import-controller.js index 04486ff93..d63dd49c3 100644 --- a/packages/web-console/src/js/console/import-controller.js +++ b/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, ) diff --git a/packages/web-console/src/js/console/index.js b/packages/web-console/src/js/console/index.js index afc557180..41b38fc29 100644 --- a/packages/web-console/src/js/console/index.js +++ b/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) }) diff --git a/packages/web-console/src/js/console/quick-vis.d.ts b/packages/web-console/src/js/console/quick-vis.d.ts new file mode 100644 index 000000000..86f40c5f6 --- /dev/null +++ b/packages/web-console/src/js/console/quick-vis.d.ts @@ -0,0 +1,5 @@ +import jQuery from "jquery" +export function quickVis( + root: ReturnType, + msgBus: ReturnType, +): void diff --git a/packages/web-console/src/js/console/quick-vis.js b/packages/web-console/src/js/console/quick-vis.js index fdf714a28..b95f3bb29 100644 --- a/packages/web-console/src/js/console/quick-vis.js +++ b/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 diff --git a/packages/web-console/src/scenes/Result/index.tsx b/packages/web-console/src/scenes/Result/index.tsx index 5fc141cfa..c6de4393c 100644 --- a/packages/web-console/src/scenes/Result/index.tsx +++ b/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() const { sm } = useScreenSize() const result = useSelector(selectors.query.getResult) + useEffect(() => { + grid($("#grid"), window.bus as unknown as ReturnType) + quickVis($("#quick-vis"), window.bus as unknown as ReturnType) + }, []) + const handleChartClick = useCallback(() => { setSelected("chart") }, []) diff --git a/yarn.lock b/yarn.lock index 6f74c6954..428daa361 100644 --- a/yarn.lock +++ b/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