web app: UX quick wins for the browser dashboard#108
Merged
Conversation
Eight polish improvements following the existing data-action + delegated-listener + escHtml/escAttr patterns. Search & filtering - Debounced search inputs (~140ms, per-input keys) so fast typing doesn't re-render whole tables or re-rank the typeahead on every keystroke. - "No results" empty states on Measures + Columns with context-aware messaging (search match / no unused left / empty model), plus an inline Clear-search link via a new clear-filter action that also cancels any pending debounce. Lineage typeahead - Keyboard navigation: ArrowDown/Up move a highlight through hits, Enter opens the highlighted or first hit, Esc dismisses. Enter mid-debounce flushes a synchronous render so it always picks. - Theme-aware highlight style via var(--row-hover) plus an accent bar. Discoverability - Brief "Loaded - N tables - N measures - X KB - Y ms" stat shown on the overlay before it dismisses, plus a matching console.log. - Global "/" shortcut: jump to Lineage and focus the typeahead (classic site-search idiom; ignored while typing in inputs). - Auto-focus + select the search box when switching to Measures or Columns (mirrors the Lineage tab pattern). - Copy DAX-reference button on Source-Map rows with check confirmation, plus a shared copyText helper with clipboard/execCommand fallback. Build clean (npm run build:browser); new identifiers verified inlined into docs/index.html and docs/browser/entry.js. No new tests since there is no client-test suite. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two new HTML strings added in the previous commit used string concat
('<x data-table="' + esc(...) + '" ...') around data-* attributes. The
render-xss-fuzz structural test scans the inlined bundle source for
single-quotes inside data-* attribute patterns and asserts none exist
(the inlined script is part of the rendered HTML it inspects).
Convert both spots to template literals — same rule the lineage
typeahead already follows (renderLineageSearchResults). Affected:
- the new copy-DAX-reference button on Source-Map rows
- the new Clear-search link inside tableEmptyRow
372/372 tests pass locally now.
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.
Summary
Eight UX polish improvements to the browser dashboard. All follow the existing
data-action+ delegated-listener +escHtml/escAttrpatterns — no new framework, no runtime deps, no shape changes to data.Search & filtering
clear-filteraction.Lineage typeahead
var(--row-hover)+ accent bar.Discoverability
Loaded · N tables · N measures · X KB · Y msstat shown on the overlay before it dismisses (~800 ms)./shortcut: jump to Lineage and focus the typeahead (classic site-search idiom; ignored while typing in inputs).copyText()helper.Test plan
npm run build:browserclean — bothtscpasses succeed, bundle reassembled (379 → 381 KB).docs/index.html+docs/browser/entry.js.npm testgreen (377/377 — web-app changes don't affect node tests).npm run serve:browser):/anywhere → Lineage tab focused with search active.🤖 Generated with Claude Code