Better styling of the summary stats

[paddymul]

Checks

• I have checked that this enhancement has not already been requested

How would you categorize this request. You can select multiple if not sure

Display (is this related to visual display of a value)

Enhancement Description

Summary stats pins the renderer per row, but rows have different dtypes. we need to figure out a better solution. maybe a "defer" renderer for pinned_rows, that would defer to the column.

Pseudo Code Implementation

No response

Prior Art

n/a

[paddymul]

Implementation Plan

Overview

Improve summary stats rendering so each cell uses column-appropriate formatting (numeric format for numbers, string format for strings, etc.).

Steps

1. Current behavior — pinned rows use a single renderer per row (e.g. 'obj' for dtype, 'histogram' for histograms). This means numeric summary values in string columns (and vice versa) get inappropriate formatting.

2. Per-column summary renderers — modify the pinned row rendering logic to:

   • Look up the column's dtype from the summary data
   • Select an appropriate renderer per cell (not per row)
   • For diff_count row: use integer formatter
   • For dtype row: use string/obj formatter
   • For histogram row: keep histogram renderer

3. Styling improvements:

   • Right-align numeric summary values
   • Add subtle background color to distinguish summary rows from data rows
   • Use monospace font for dtype row for readability

4. Tests: Playwright screenshot test comparing summary stats rendering for a mixed-type DataFrame.

Files to modify

• packages/buckaroo-js-core/src/components/DFViewerParts/ — pinned row cell renderers
• AG Grid column definitions — per-column pinned row formatters
• CSS — summary row styling

@codex

[chatgpt-codex-connector]

Summary

• Updated pinned-row renderer selection to choose renderers per cell/column using summary dtype metadata, with explicit handling for histogram (histogram renderer), dtype (object/string style renderer), and diff_count (integer formatter). This fixes mixed-type summary rows that were previously forced through a single row-level renderer. packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.tsL280-L390

• Updated DFViewerInfinite default column definition to add pinned-summary-specific class rules and to pass summary_stats_data into the renderer selector so per-column summary formatting can be computed at render time. packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerInfinite.tsxL245-L277

• Added summary-row styling hooks in CSS:

  • subtle background tint for pinned summary rows,
  • right alignment for numeric summary cells,
  • monospace font for dtype row readability. packages/buckaroo-js-core/src/style/dcf-npm.cssL666-L676

• Added unit coverage for getCellRendererSelector to verify per-column behavior for inherit rows and distinct handling for dtype and diff_count. packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.test.tsL113-L156

• Added a Playwright screenshot test case for mixed-type summary rendering in the inherit edge-case suite. packages/buckaroo-js-core/pw-tests/inherit-edge-cases.spec.tsL82-L91

• Committed on the current branch (bf0f704) and created a follow-up PR via make_pr.

Testing

• ✅ pnpm --dir packages/buckaroo-js-core test -- gridUtils.test.ts
• ✅ pnpm --dir packages/buckaroo-js-core storybook --ci --port 6006 (started successfully for visual verification)
• ✅ mcp__browser_tools__run_playwright_script (captured mixed-types summary screenshot artifact)

View task →

[paddymul]

Related: PRs #545, #587

• PR fix: summary stats inherit alignment for count and freq rows #545 (merged): Summary stats inherit alignment for count and freq rows — directly improves summary stats styling
• PR Fix left-pinned index column for summary stats #587 (merged): Fix left-pinned index column for summary stats readability

These PRs address some of the styling concerns. Remaining work: per-column summary renderers (using column-appropriate formatting for each cell in pinned rows).