feat: dashboard Arrange/Report layout switcher (#149 D2)#151
Merged
Conversation
Add the standalone dashboard's layout controls (phase D2): a toolbar below the header (the future filter bar) with a primary Arrange | Report segmented switcher and a secondary 2 | 3 column-count control. - Arrange = uniform multi-column grid (2 or 3, via `--dash-cols`); Report = single full-width scrolling column with taller tiles. - The column control is shown only in Arrange (N/A in one column). - Presentation-only: toggling reshapes the grid and the Chart.js tiles resize via their own ResizeObserver — no tile re-query. - `layout` + `gridCols` persist per browser (asb:dashLayout/asb:dashCols), surviving reloads and Refresh. Pure normalizers (normalizeDashLayout/normalizeDashCols) live in src/core/dashboard.js (100%); render + wiring in src/ui/dashboard.js; prefs read in createState. Header sticky moves to a .dash-topbar wrapper so the switcher stays visible while the grid scrolls. Drag-reorder + 1/2-col tile spans arrive in D3. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GyLqZGyUkm7mP6WhZCkodj
This was referenced Jul 4, 2026
Open
… gridlines (#149 D2) Bring the dashboard chart tiles closer to the design mockup: - Show the favorite's saved `description` as a subtitle under the tile name (single line, ellipsized), in both Arrange and Report layouts. - Draw the chart on the tile's own background (`--bg-side`) instead of the darker results-table background the workbench chart view uses, so the chart body matches the panel. - Hide the value-axis gridlines on tiles (new `hideGrid` option threaded through renderChart → chartJsConfig): on a dark panel a light gridline reads as noise, and the design's tiles have none. Tick labels stay. renderChart/chartJsConfig gain an opt-in `hideGrid` (workbench chart view is unchanged). Tests updated; core + dashboard modules stay at 100%. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GyLqZGyUkm7mP6WhZCkodj
This was referenced Jul 4, 2026
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
1 participant
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 D2 of the Dashboard (#149): the Arrange / Report layout switcher.
The standalone
/sql/dashboard(D1, #150) rendered favorites as a fixed 3-columngrid of read-only chart tiles. This adds the layout controls in a toolbar below
the header (the row that becomes the filter bar in D4):
multi-column grid; Report lays tiles out as a single full-width scrolling
column with taller charts.
Report's single column.
tiles resize themselves via their own ResizeObserver, with no tile re-query.
layout+gridColspersist per browser (asb:dashLayout/asb:dashCols), surviving reloads and Refresh.Pure normalizers (
normalizeDashLayout/normalizeDashCols) live insrc/core/dashboard.js(100%); render + wiring insrc/ui/dashboard.js; prefsread in
createState. The header's sticky positioning moves to a.dash-topbarwrapper so the switcher stays visible while the grid scrolls.
Verified end-to-end in a real browser (chromium) against the built
sql.html:the switcher toggles the grid (3-col → 1-col Report → 2-col), the column control
shows only in Arrange, the chart canvases genuinely reflow (buffer width
431→1014→677px), and the choice persists across reload.
Drag-to-reorder and 1/2-column tile spans arrive in D3.
Part of #149.
Checklist
npm testpasses (the per-file coverage gate is non-negotiable)npm run buildsucceeds (single-filedist/sql.html)src/core/, network insrc/net/(injected fetch), DOM insrc/ui/CHANGELOG.md([Unreleased]) updated if behavior or the deployed surface changed🤖 Generated with Claude Code