Expose complete chart chrome styling to CSS and Tailwind - #412
Conversation
Merging this PR will not alter performance
Comparing 
Footnotes
|
📝 WalkthroughWalkthroughThe browser styling contract expands from 29 to 48 DOM slots. Rendering and interaction code applies slots for annotations, colorbars, axes, ticks, and modebar components. Documentation, browser evidence, and regression tests cover the expanded surface. ChangesBrowser styling contract
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant ChartRenderer
participant StyleSheet
participant Browser
participant RegressionTests
ChartRenderer->>Browser: Apply DOM styling slots and CSS custom properties
StyleSheet->>Browser: Apply slot selectors and visual defaults
Browser->>RegressionTests: Expose computed styles and DOM slot markers
RegressionTests->>RegressionTests: Validate styling and cursor transitions
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
f3aed86 to
d03765e
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
scripts/css_tailwind_slot_evidence.py (1)
254-279: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winVerify the screenshot file exists after Chromium runs.
_screenshotonly checksresult.returncode. Chromium can exit0without writingpng_pathin some sandboxed or resource-constrained conditions. Since this script generates the release evidence referenced in the PR validation steps, a silent no-op here lets the audit workflow report success without producing the required image.Add an existence check after the subprocess call.
🛡️ Proposed fix
if result.returncode != 0: raise RuntimeError(result.stderr.strip() or f"Chromium exited {result.returncode}") + if not png_path.exists(): + raise RuntimeError(f"Chromium exited 0 but did not write {png_path}")🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@scripts/css_tailwind_slot_evidence.py` around lines 254 - 279, Update _screenshot after subprocess.run to verify that png_path exists, raising a clear RuntimeError if Chromium exits successfully without producing the screenshot; preserve the existing nonzero-return handling.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/components/axes.md`:
- Around line 230-236: Update the axis styling example’s axis_band cursor rule
to distinguish x- and y-axis gesture bands using data-xy-axis selectors: apply
ew-resize to x and ns-resize to y, or replace the directional cursor with a
direction-neutral class.
In `@js/src/57_viewstate.ts`:
- Around line 473-476: Update the drag lifecycle around _applySlot and the
pointer release handlers to preserve the axis-band’s existing inline cursor
value and priority before applying “grabbing”. Restore both with setProperty on
pointerup and pointercancel instead of removing the cursor property, and add a
regression test covering styles={"axis_band": {"cursor": "crosshair"}}.
---
Nitpick comments:
In `@scripts/css_tailwind_slot_evidence.py`:
- Around line 254-279: Update _screenshot after subprocess.run to verify that
png_path exists, raising a clear RuntimeError if Chromium exits successfully
without producing the screenshot; preserve the existing nonzero-return handling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5884e271-ce24-4546-852a-60d743320262
⛔ Files ignored due to path filters (2)
pr-assets/css-tailwind-slot-audit/after.pngis excluded by!**/*.pngpr-assets/css-tailwind-slot-audit/before.pngis excluded by!**/*.png
📒 Files selected for processing (29)
CHANGELOG.mddocs/app/tests/test_docs_site.pydocs/components/annotations.mddocs/components/axes.mddocs/components/colorbars.mddocs/components/modebars-and-interaction-controls.mddocs/styling/capabilities.mddocs/styling/chrome-slots.mddocs/styling/component-variations.mddocs/styling/customize.mddocs/styling/mark-styles.mdjs/src/20_theme.tsjs/src/50_chartview.tsjs/src/53_interaction.tsjs/src/57_viewstate.tspython/xy/dom.pyscripts/css_tailwind_slot_evidence.pyscripts/render_smoke_nonumpy.pyspec/README.mdspec/api/capability-matrix.mdspec/api/export.mdspec/api/styling.mdspec/design-dossier.mdspec/design/reflex-shaped-api.mdspec/process/css-tailwind-surface-audit-2026-07-30.mdtests/test_static_client_security.pytests/test_tailwind_root_customization.pytests/test_type_surface.pytests/test_view_state_client.py
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 31 files
Tip: instead of fixing issues one by one fix them all with cubic
Re-trigger cubic
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
scripts/css_tailwind_slot_evidence.py (1)
289-291: 🔒 Security & Privacy | 🔵 Trivial
--no-sandboxdisables Chromium's OS-level sandbox.This script only loads a locally generated HTML fixture, so the practical exposure is limited compared to loading untrusted or remote content. Keep this scoped to trusted, internally generated evidence HTML. Do not reuse this flag combination for a script that could load external or user-supplied URLs.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@scripts/css_tailwind_slot_evidence.py` around lines 289 - 291, Keep the --no-sandbox flag limited to the Chromium invocation in the trusted local evidence-HTML flow of the script. Ensure this browser configuration is not reused by code that loads external or user-supplied URLs.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@scripts/css_tailwind_slot_evidence.py`:
- Around line 246-252: Update the SLOT_CLASSES definition to include the missing
documented colorbar slots: colorbar, colorbar_bar, colorbar_tick, and
colorbar_title, alongside the existing entries. Preserve the renderer’s
seven-slot colorbar contract and avoid changing the colorbar specification shown
in the diff.
In `@tests/test_view_state_client.py`:
- Line 1685: Update the assertion in the relevant view-state client test to
compare result against an explicit mapping containing all five expected probe
keys with True values, rather than deriving expected keys from result. Ensure
the assertion fails if any expected field is missing from the JSON payload.
---
Nitpick comments:
In `@scripts/css_tailwind_slot_evidence.py`:
- Around line 289-291: Keep the --no-sandbox flag limited to the Chromium
invocation in the trusted local evidence-HTML flow of the script. Ensure this
browser configuration is not reused by code that loads external or user-supplied
URLs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7ee1ff2a-df6c-43e1-a47e-83d64a02a90c
📒 Files selected for processing (7)
docs/components/axes.mddocs/components/colorbars.mdjs/src/50_chartview.tsjs/src/57_viewstate.tsscripts/css_tailwind_slot_evidence.pytests/test_tailwind_root_customization.pytests/test_view_state_client.py
🚧 Files skipped from review as they are similar to previous changes (4)
- docs/components/axes.md
- tests/test_tailwind_root_customization.py
- js/src/57_viewstate.ts
- js/src/50_chartview.ts
There was a problem hiding this comment.
All reported issues were addressed across 9 files (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Fix all with cubic | Re-trigger cubic
There was a problem hiding this comment.
All reported issues were addressed across 2 files (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Fix all with cubic | Re-trigger cubic
1 participant
Why
The public styling surface stopped at 29 validated DOM slots. That meant
class_names,styles, plain CSS, and Tailwind could style the toolbar and its buttons, but not the draggable grip that reveals/moves the modebar. The same gap existed for modebar groups and popovers, Cartesian axis spines/ticks, axis gesture bands, colorbar extensions/contour lines/minor ticks, and the canvas-painted annotation layer. Several of those parts also pinned visual defaults inline, so ordinary utility classes could not win the cascade.What changed
CHART_DOM_SLOTSfrom 29 to 48 stable hooks.axis_line,tick_mark, andaxis_bandparts, withdata-xy-axis,data-xy-axis-side, anddata-xy-tick-kindrefinements.colorbar_extension,colorbar_line, andcolorbar_minor_tick.annotation_layerfor whole-bitmap CSS effects while keeping individual annotation geometry in the cross-renderer typed API.spec/process/css-tailwind-surface-audit-2026-07-30.md.Marks and triangle-mesh faces remain WebGL/canvas pixels rather than one DOM node per primitive. Their complete styling route is the validated CSS-shaped mark API, typed channels/geometry, and CSS theme-token bridge; preserving that boundary keeps XY's large-data performance model intact.
Browser evidence
Both captures use the same dark-theme chart spec, utility stylesheet, and class strings, including XY's documented
.darkselector so the toolbar matches the chart surface. The before capture substitutes the pre-change standalone bundle; the after capture uses this branch. The modebar is intentionally styled as one blue/cyan glow system across its outer surface, buttons, grip, separators, icons, indicators, history controls, and open menu.Before
After
The pair is reproducible with
scripts/css_tailwind_slot_evidence.py.Validation
node js/build.mjsuv run pytest -q— 3,683 passed, 110 skippeduv run --project docs/app --no-sync pytest docs/app/tests -q— 103 passed, 1 xfaileduv run --with pre-commit pre-commit run --all-filesuv run ruff check .uv run ruff format --check .uv run python scripts/gen_capability_matrix.py --checkuv run ty checkremains non-clean on the base repository with 89 pre-existing diagnostics (principally missing optional Reflex imports in the root environment and unrelated pyplot typing issues); none are in the files introduced by this change.Summary by CodeRabbit
New Features
Documentation
Tests