Skip to content

feat(spotlight): readable cards with TL;DR + inline values#54

Closed
coccyx wants to merge 1 commit into
feat/spotlight-scoped-baselinefrom
feat/spotlight-readable-results
Closed

feat(spotlight): readable cards with TL;DR + inline values#54
coccyx wants to merge 1 commit into
feat/spotlight-scoped-baselinefrom
feat/spotlight-readable-results

Conversation

@coccyx
Copy link
Copy Markdown
Contributor

@coccyx coccyx commented May 29, 2026

Summary

Stacked on PR #53. 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.

What changed in each card

  1. 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)."
  2. Inline value rows below the chart — top 3 by default — with per-row counts, percentages, and a dedicated "Search →" button. No click required to see the substance.
  3. 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.
  4. "Show N more values" toggle for the long tail.

Same engine, same scoped-baseline data — purely a readability change. SpotlightSection (Errors, Service Detail) inherits.

What payment now reads as

value diff counts
0 -100.0 pp sel 0 (0%), base 905 (100%)
13 +100.0 pp sel 144 (100%), base 0 (0%)

Plain reading: failing payment.Charge calls all return gRPC status 13; healthy ones all return 0. Click Search next to 13 to see the matching error spans.

Test plan

  • npx tsc --noEmit — clean
  • npm run lint — 0 errors
  • npm test — 104/104 passing
  • npm run deploy — packed + uploaded + provisioned on staging
  • Playwright capture spec succeeds

Validate on staging

paymentFailure 50% is still on.

  1. Open Services → payment. Spotlight section now has:
    • Header: rpc.grpc.status_code + score chip
    • Headline sentence underneath
    • Mini chart
    • Two value rows with counts, percentages, and Search buttons — visible without any clicks
  2. Click Search → next to 13 — 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

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>
@coccyx coccyx deleted the branch feat/spotlight-scoped-baseline May 29, 2026 20:55
@coccyx coccyx closed this May 29, 2026
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant