feat(selections): Region/Lasso Selections - v6

[hydrosquall]

Motivation

• Enable users to select interesting points quickly with a lasso 🤠 tool (an arbitrary closed polygon)
• Extends @dvmoritzschoefl and @arvind's work from feat: Region/Lasso Selections #8988 (which went into a branch that was not published) to be testable and functional in Vega-Lite v6!

Changes

Demo:

2025-11-23_17-26-16.mp4

Note

I split the pr by commit so it should be easier to review. The core functional changes are in 1, the tests are in 2.

Changes vs Vega-Lite

• This is a new feature, it might be a breaking API change that would benefit from a minor version bump when we publish
• Before there were 2 types of selection (point and interval). Now there is a third, "region"

Modifications vs original PR

• Changed from using mouse to pointer events for consistency with the interval selection
• Updated markdown docs and comments to mention the new region type
• Tests had to be rewritten to fit in the vitest / playwright paradigm (instead of vitest)
  • Instead of evaluating JS functions in the window, we're calling simulated browser events directly
• Added more tests to prevent a decrease in coverage percentage / capture the situation where we won't draw a brush (thanks Codecov)
• I froze the scaling ratio used to take snapshots to a scaling ratio of 2. Otherwise, I would get getting different results when running in headless vs headed mode.

Potential future work

• I have test helper for SVG snapshots that can be brought to the other tests, expectMatchFileSnapshot
• Switch Vitest interaction handlers instead of maintaining our own "regular vs pure" functions for creating events

Testing

• Manual: Try pasting this test spec into the sandbox, and confirm the lasso works: https://cameron-yick-redo-vega-lasso.vega-lite.pages.dev/
• Automated: Check if the images in snapshot/regions folder make sense

Expand for code block

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {
    "url": "https://vega.github.io/editor/data/cars.json"
  },
  "params": [
    {
      "name": "brush",
      "select": "region"
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {
      "field": "Horsepower",
      "type": "quantitative"
    },
    "y": {
      "field": "Miles_per_Gallon",
      "type": "quantitative"
    },
    "color": {
      "condition": {
        "param": "brush",
        "field": "Cylinders",
        "type": "ordinal"
      },
      "value": "grey"
    }
  }
}

Notes

• Lessons from feat: Region Selections Vega-Lite #9536
  • Instead of trying to incrementally adjust tests from the old puppeteer to work in playwright, I rewrote the tests utils from scratch

[cloudflare-workers-and-pages]

Deploying vega-lite with    Cloudflare Pages

Latest commit:	28e0918
Status:	✅  Deploy successful!
Preview URL:	https://0962b0a0.vega-lite.pages.dev
Branch Preview URL:	https://cameron-yick-redo-vega-lasso.vega-lite.pages.dev

View logs

[domoritz]

Super cool! Should the branch preview be working?

[hydrosquall]

Super cool! Should the branch preview be working?

@domoritz thanks for checking! The data URL should be "url": "https://vega.github.io/editor/data/cars.json", as the relative URL of data/cars.json doesn't work - the code block in the PR description should provide the right absolute URL

I think the yellow schema warning squiggly appears since the new JSON schema hasn't been published yet.