Skip to content

Add zoom-responsive styling for direct scatter points#100

Open
FarhanAliRaza wants to merge 3 commits into
mainfrom
codex/add-zoom-responsive-size-and-opacity-for-scatter-points
Open

Add zoom-responsive styling for direct scatter points#100
FarhanAliRaza wants to merge 3 commits into
mainfrom
codex/add-zoom-responsive-size-and-opacity-for-scatter-points

Conversation

@FarhanAliRaza

@FarhanAliRaza FarhanAliRaza commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Motivation

  • Direct scatter markers are fixed in screen-space size and opacity which makes them either too faint when deeply zoomed or too noisy in overviews.
  • The goal is to make markers interpolate size and opacity on the client during zoom so detail is legible without rebuilding or retransmitting large traces.

Description

  • Added zoom_size_factor, zoom_opacity, and zoom_emphasis parameters to the fluent Figure.scatter API and the Reflex-style components.scatter factory and serialized them into trace style with sensible, fixed-style-compatible defaults.
  • Client-side logic _pointZoomStyle was implemented in js/src/50_chartview.js to compute a logarithmic interpolation (from the initial view) for size and opacity, clamped at the configured zoom_emphasis.
  • The computed sizeFactor and adjusted opacity are applied consistently across rendering paths including the full points shader, the simple points shader, hover emphasis, and the pick/detection path so rendering, hover, and picking stay aligned.
  • Input validation and docs were added in python/xy/marks.py and python/xy/components.py, tests were added/updated to cover serialization and validation, and static JS bundles were rebuilt and committed.

Testing

  • Ran unit tests: PYTHONPATH=python python -m pytest tests/test_scatter.py tests/test_components.py -q, all tests passed (156 passed).
  • Rebuilt and verified JS bundles with node js/build.mjs and make js-check, which succeeded and reported fresh static bundles.
  • Ran style/type/lint checks with PYTHONPATH=python ruff check python/xy/marks.py python/xy/components.py tests/test_scatter.py and git diff --check, both succeeded.

Codex Task

Closes #88

@codspeed-hq

codspeed-hq Bot commented Jul 20, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 94 untouched benchmarks
⏩ 1 skipped benchmark1


Comparing codex/add-zoom-responsive-size-and-opacity-for-scatter-points (2e89941) with main (b283b10)

Open in CodSpeed

Footnotes

  1. 1 benchmark was skipped, so the baseline result was used instead. If it was deleted from the codebase, click here and archive it to remove it from the performance reports.

@FarhanAliRaza FarhanAliRaza added valid Issue is validated. This pr actually fixes the issue. Needs Code Review. and removed codex labels Jul 20, 2026

@Alek99 Alek99 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review findings:

  • [P2] js/src/50_chartview.js:2261: y-only zoom never activates responsive styling because a finite x zoom of 1 wins the nullish-coalescing chain. Combine the applicable axis zoom factors instead.
  • [P2] js/src/50_chartview.js:2432: hover emphasis uses scalar g.size, not the point's encoded size. Large size-channel points therefore get a smaller hover overlay than the rendered point.
  • [P2] js/src/50_chartview.js:2311: zoom_opacity is applied to the fill but explicit point strokes retain base opacity. Apply the zoom-adjusted opacity to the outline while preserving stroke_opacity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

valid Issue is validated. This pr actually fixes the issue. Needs Code Review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add zoom-responsive size and opacity for direct scatter points

2 participants