feat: dashboard global filter bar (#149 D3)#156
Merged
Conversation
Add a filter bar over every {name:Type} param detected across favorited
tiles' SQL, sharing state.varValues with the SQL Browser workbench (#134).
A debounced (Enter/blur-bypassed) edit re-runs only the affected tiles;
an unfilled param blocks that tile with a placeholder instead of running.
Refactors dashboard tiles to stable per-favorite slots updated in place
(loading/unfilled/error/chart) with a per-slot generation counter, so a
filter edit can flip a tile's state repeatedly without reordering the
grid or racing a stale response. Threads an optional params arg through
ch-client.js's queryJson/queryDashboardTile (backward compatible).
Closes #152.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GyLqZGyUkm7mP6WhZCkodj
21 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Phase D3 of the Dashboard epic (#149 §6): a global filter bar over the
{name:Type}parameters detected across every favorited tile's SQL, sharingthe same persisted
state.varValuesthe SQL Browser workbench already uses(#134). Changing a value re-runs only the tiles that reference it. No new
parameter syntax, no schema change.
Builds on D1 (#150) and D2 (#151, merged), which introduced the
.dash-toolbarrow this phase extends into a filter bar.
What changed
src/core/dashboard.js—dashboardParams(favorites): the union ofevery
{name:Type}param across favorites' row-returning SQL, unique byname, first-appearance order. Pure, 100%-covered.
src/net/ch-client.js—queryJson/queryDashboardTilegain anoptional
paramsargument forwardingparam_<name>query-string args;backward compatible (existing call sites omit it).
src/ui/app.js—runTilesubstitutesstate.varValuesviaparamArgs, mirroring the workbench'srun().src/ui/dashboard.js— the bulk of the work:.dash-filters, reusing the workbench'svar-field/var-name/var-inputclasses), hidden entirely when nofavorite has a param;
runTile— it shows an "Enter a value for: …" placeholder instead(excluded from the "N not shown" tally);
updated in place (loading/unfilled/error/chart), since a filter edit can
flip a tile's classification repeatedly and removing/re-appending nodes
would reorder the grid and lose identity;
overwrite a newer edit's result;
(rather than only the tiles within
TILE_CONCURRENCY's window), and atile that flips chart → skip clears its old chart DOM instead of leaving
a hidden, already-destroyed canvas around — both caught by an 8-angle
parallel code review during this PR and fixed + regression-tested.
src/styles.css—.dash-filters,.dash-tile-unfilled.tests/unit/dashboard.test.js,tests/unit/ch-client.test.js,tests/helpers/fake-app.js.Reconciled
body (layout vs. global filters) — corrected to match Feature: open favorited Library queries as an interactive Dashboard #149, marked D3 done.
[Unreleased]updated; also fixed a stale "(Feature: open favorited Library queries as an interactive Dashboard #149 D3)"cross-reference in the D2 entry (drag-reorder is D4).
inbox) for a real-but-currently-unreachable edge casefound during review:
paramArgsdoesn't split multi-statement SQL the waydashboardParams/readStatementParamsdo — masked today because amulti-statement favorite already fails at the ClickHouse HTTP layer before
param substitution would matter; deferred, not fixed here, since the code
matches this phase's own spec and multi-statement dashboard tiles are out
of scope.
Verified live
Manually verified against a real ClickHouse server (
antalya, 26.3.10):favorited 3 Library queries (two sharing
{min:UInt32}, one with no param);opened the dashboard with
minunset — the two tiles showed the "Enter avalue for: min" placeholder, the unrelated tile ran immediately; filled
min=30and blurred — only the two affected tiles re-ran (chart data shiftedto reflect the new filter), the unrelated tile was untouched; reloaded the
SQL Browser workbench and confirmed its variable strip picked up the
dashboard-set value (shared
state.varValues).Checklist
npm testpasses (the per-file coverage gate is non-negotiable) — 1467 tests,src/core/dashboard.jsat 100/100/100/100npm run buildsucceeds (single-filedist/sql.html)src/core/, network insrc/net/(injected fetch), DOM insrc/ui/CHANGELOG.md([Unreleased]) updated🤖 Generated with Claude Code
https://claude.ai/code/session_01GyLqZGyUkm7mP6WhZCkodj