feat(results+header): cell-detail drawer, sticky # column, version/types/github/save polish#8
Merged
Merged
Conversation
Round 3 of UX improvements:
1. Result cells truncate (CSS max-width + ellipsis) so one fat column (e.g.
HTML blobs) can't dominate; click a cell → right-side detail drawer with the
full value pretty-printed (JSON reindented), and for HTML a Rendered (in a
sandbox="" srcdoc iframe) ↔ Source toggle. Esc / backdrop / ✕ close it.
2. Freeze the row-number (#) column (position: sticky; left: 0) so it stays
visible when scrolling right.
3. Truncate the version to its first three segments ("26.3.10"); full string on
hover (title).
4. Column types are no longer shown inline in the header — exposed as a hover
tooltip (title) on the header cell instead.
5. Move the GitHub source link to immediately after the version in the header.
6. Left-align the Save button (now grouped with Run/Format).
- core/format.js: shortVersion. core/cell.js: looksLikeHtml, prettyValue (pure).
- deploy/http_handlers.xml + README: add frame-src 'self' for the sandboxed
HTML-preview iframe (the sandbox keeps it script-less/inert).
npm test → 392 passing; new core files + results.js 100%, app.js meets its gate.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef
Restoring a saved query now links the new tab to it (loadIntoNewTab takes an optional savedId; the Saved list passes the entry id, History passes none), so the toolbar Save button reads "Saved" — matching the post-save state. Editing the restored query flips it back to "Save" (dirty) and re-saving updates the entry in place, as before. npm test → 393 passing. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef
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.
Round 3 of results/header UX improvements (all verified live on otel).
1. Cell-detail drawer + truncation (the #1 issue)
Result cells now truncate with ellipsis and a hard
max-width(so a fat HTML/JSON column can't force a long horizontal scroll). Click any cell → a right-side drawer with the full value:sandbox=""(script-less, inert)srcdociframe.2. Sticky # column
The row-number column is frozen (
position: sticky; left: 0) so you keep your place when scrolling right.3. Version truncated
Header shows
ClickHouse 26.3.10(first three segments); full string (e.g.26.3.10.20001.altinityantalya) on hover.4. Types on hover
Column types are no longer inline in the header — shown as a tooltip (title) on the header cell.
5. GitHub logo after the version
Moved the source link to sit right after the version chip.
6. Save left-aligned
Save now groups with Run / Format on the left.
Code
core/format.js:shortVersion.core/cell.js(new):looksLikeHtml,prettyValue(pure, 100%).results.js: headertitle=type, truncated clickable cells,openCellDetaildrawer.app.js: short version + title, header reorder, Save left.deploy/http_handlers.xml+ README:frame-src 'self'for the sandboxed preview iframe (documented; the sandbox keeps it inert).npm test→ 392 passing;core/cell.js,core/format.js,results.jsat 100%,app.jsmeets its gate.Generated with Claude Code
https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef