Skip to content

Advice for Humans UX polish: operator grouping, bars, colors, margins#70

Merged
erikdarlingdata merged 5 commits intodevfrom
feature/advice-ux-polish
Mar 10, 2026
Merged

Advice for Humans UX polish: operator grouping, bars, colors, margins#70
erikdarlingdata merged 5 commits intodevfrom
feature/advice-ux-polish

Conversation

@erikdarlingdata
Copy link
Owner

Summary

  • Operator grouping: Operator name + timing + CPU bar + stats (rows/reads) wrapped in purple-bordered container for clear visual association
  • Wait stat bars: Proportional colored bars scaled to max wait, colored by category
  • Margin standardization: Three-tier system (8px labels, 12px content, 20px detail) replacing scattered 0/4/8/16px
  • Missing index impact: Color-coded by severity (red ≥70%, amber ≥40%, blue <40%)
  • Memory grant color: Triage card colored by utilization (red <10%, amber 10-49%, blue ≥50%)
  • Triage card headline: First item 13px semi-bold for visual hierarchy
  • Elapsed time visibility: Both CPU and elapsed use ValueBrush instead of dimming elapsed

Closes #48.

Test plan

  • Load actual plan with expensive operators — verify purple-bordered groups contain name + timing + bar + stats
  • Check wait stats section — bars scale proportionally to largest wait
  • Verify missing indexes show colored impact percentages
  • Check triage card: headline is bolder, memory grant colored by utilization
  • Verify consistent left margin alignment across all sections

🤖 Generated with Claude Code

erikdarlingdata and others added 5 commits March 9, 2026 21:55
- Group operator name + timing + CPU bar + stats (rows/reads) in a single
  container with purple left accent border for clear visual association (#14)
- Standardize left margins to three tiers: 8px labels, 12px content, 20px
  nested detail — eliminates ragged left edge (#15)
- Use ValueBrush for both CPU and elapsed timing values instead of dimming
  elapsed with MutedBrush (#16)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Collect all wait stat lines in a group, find the global max, then render
each with a colored bar scaled proportionally. Bar color matches wait
category (orange=CPU/parallelism, red=I/O/locks, purple=memory, blue=network).

Closes #48 item 7.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The most significant finding in each triage card (parallel efficiency,
memory grant, etc.) now renders at 13px semi-bold to establish visual
hierarchy over the remaining 12px normal-weight items.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Impact line (e.g., "dbo.Posts (impact: 95%)") now renders table name in
white and impact in color: red ≥70%, amber ≥40%, blue <40%.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Color by utilization: red <10% used, amber 10-49%, blue ≥50%.
Previously was binary amber/blue at 10% threshold.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@erikdarlingdata erikdarlingdata merged commit 3febb93 into dev Mar 10, 2026
2 checks passed
@erikdarlingdata erikdarlingdata deleted the feature/advice-ux-polish branch March 10, 2026 02:20
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