feat(spotlight): readable cards with TL;DR + inline values#54
Closed
coccyx wants to merge 1 commit into
Closed
Conversation
After the scoped-baseline fix landed, manual feedback was: "I see one thing — rpc.grpc.status_code — and I still don't understand how to read this or how it helps me find things." The chart-only design hid the actual information (value names, counts, percentages) behind a click. Visual asymmetry told users "something differs" without telling them what, or what to do about it. Each attribute card now leads with words and numbers; the chart is a scanning aid, not the primary readout. - TL;DR headline sentence above the chart. Picks the strongest single value (largest |diff|) and writes it out: "Selection over-represents `13` by +100.0 pp (144 sel vs 0 base)." Reads cold without translating bars. - Inline value rows below the chart — top 3 by default — with per-row counts, percentages, and a dedicated "Search →" button that drills into matching spans. No click required to see the substance. - Per-value Search button is explicit and single-purpose. Action is unambiguous. - Plain-English legend at the panel bottom: "selection (the spans you're investigating)" / "baseline (what they're being compared against)". The earlier "sel" / "base" jargon assumed background the novice user doesn't have. - "Show N more values" toggle for the long tail (>3 values). Same engine, same scoped-baseline data — purely a readability change. SpotlightSection (Errors, Service Detail) inherits. Validated on staging with paymentFailure 50%: - rpc.grpc.status_code differential now reads as "Selection under-represents `0` by -100.0 pp (0 sel vs 905 base)" with the two value rows visible inline (`0` -100pp, `13` +100pp), each with its Search button. Pre-merge: tsc clean, lint 0 errors, 104/104 unit tests. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 tasks
coccyx
added a commit
that referenced
this pull request
May 29, 2026
Faceted trace search + Spotlight + Settings page reorganization. - Faceted-nav data layer + UI primitives (#46, #47) - Search-page integration with Spotlight rail (#48, #49) - Spotlight on Errors page + Service Detail (#50, #51, #53) - Small-multiples / readable-card / rate-bar Spotlight redesigns driven by manual validation feedback (#52, #54, #55) - Settings page reorganization with Setup status card, sticky nav, and grouped sections (#56) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
Stacked on PR #53. After the scoped-baseline fix landed, manual feedback was:
The chart-only design hid the actual information (value names, counts, percentages) behind a click. Visual asymmetry told users "something differs" without telling them what, or what to do about it.
Each attribute card now leads with words and numbers; the chart is a scanning aid, not the primary readout.
What changed in each card
|diff|) and writes it out: "Selection over-represents13by +100.0 pp (144 sel vs 0 base)."Same engine, same scoped-baseline data — purely a readability change.
SpotlightSection(Errors, Service Detail) inherits.What payment now reads as
013Plain reading: failing payment.Charge calls all return gRPC status 13; healthy ones all return 0. Click Search next to
13to see the matching error spans.Test plan
npx tsc --noEmit— cleannpm run lint— 0 errorsnpm test— 104/104 passingnpm run deploy— packed + uploaded + provisioned on stagingValidate on staging
paymentFailure 50%is still on.rpc.grpc.status_code+ score chipSearch →next to13— opens Traces with the matching filter applied.Stacking
Based off PR #53 (scoped baseline). Merge that first; this PR will become a clean diff against master after.
🤖 Generated with Claude Code