questdb / questdb/ui

Remove legacy grid.js and quick-vis from the main Result panel after the React grid + notebook charts prove themselves

Open
#580 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement notebooks Severity: 1 web-console
Dominant language
TypeScript
Stars
29
Forks
39
Avg merge
4d 11h
Merged PRs (30d)
4

Description

Two legacy DOM/jQuery modules on the main Result panel are kept only as fallbacks behind their new React replacements. Once the replacements are proven in production, remove the old code.

(A) grid.js — ready to remove (functionality fully covered)

The new React grid (src/components/ResultGrid/ResultGrid.tsx + src/scenes/Result/ResultGridAdapter.tsx, migrated in #568) is default-on (useNewGrid: true) and fully covers the old grid's functionality. The old DOM grid (src/js/console/grid.js + grid.d.ts) is still shipped only as a fallback, reachable via ?useNewGrid=0 — param read and persisted in src/providers/LocalStorageProvider/index.tsx:133-160, rendered into <div id="grid" /> in src/scenes/Result/index.tsx:207,451. This escape hatch was for the imminent release; in a future release, after the new grid proves itself in the wild, remove grid.js, grid.d.ts, the useNewGrid toggle + query-param handling, and the <div id="grid"> branch.

(B) quick-vis — a couple of things to settle first

The main Result panel's inline charting is the legacy src/js/console/quick-vis.ts (375 lines, jQuery + SlimSelect + echarts, styles src/styles/_quick-vis.scss, mounted via <div id="quick-vis"> in src/scenes/Result/index.tsx). What it does: charts the active SQL editor result in place (fed the editor's columns/query via the MSG_QUERY_DATASET event bus — src/scenes/Editor/Monaco/index.tsx:1611,1954), with a chart-type picker (bar / line / area), a single X-axis ("Labels") picker, a multi-select Y picker (defaults to all columns but the first), a Draw/Cancel button wired to the global execution manager, and redraw-from-cache when only the chart type changes.

The notebook chart pipeline (src/scenes/Editor/Notebook/CellChart/, echarts) is a superset on charting: types line, area, stepLine, stepArea, bar, stackedBar, scatter, pie, candlestick; type-aware auto-inference (inferChartConfig.ts); X-axis picker, dual (left/right) Y-axis with min/max, partition-by, multi-query overlay, OHLC candlestick (ChartSettingsDrawer.tsx, QueryControls.tsx); zoom; adaptive auto-refresh.

Two things to settle before removing quick-vis:

  1. Decide the fate of the Result-panel draw area. Either reuse the notebook chart pipeline inside it (the main editor result keeps an in-place chart, just rebuilt on the notebook charts), or remove the draw area entirely and let charting live only in notebooks. Product decision, not a blocker.
  2. Note the query-parameter differences. quick-vis fetches lean — cols= projects to only the chart's columns, plus count:false, timings:false (src/js/console/quick-vis.ts:287) — whereas the notebook draw path fetches the full result (executeSingle, limit: 0,N, no colssrc/hooks/useQueryExecution.ts:42). Worth matching for wide results; minor.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing src/scenes/Result/index.tsx, src/providers/LocalStorageProvider/index.tsx, and the ResultGrid and notebook chart entry points. Confirm the React grid covers the legacy path, then resolve whether the Result-panel draw area should reuse notebook charts or be removed. Done means the chosen product direction is implemented and the legacy grid.js, quick-vis, toggle handling, styles, and mount branches are removed or intentionally retained.

Written by the indexing model from the issue text.

Assessment

Tech stack
jquery, react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.