Error w/gradient legends when interactively filtering dataset

In the following spec (simplified from vega/vega-lite#3865), the gradient legend is driven by a scale with a backing dataset that is interactively filtered via brushing. When interaction begins, the code paths that calculate stops for the gradient legend produce NaNs. As a result, the Canvas renderer crashes while the browser throws errors when using the SVG renderer.

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "autosize": "pad",
  "padding": 5,
  "width": 200,
  "height": 200,
  "style": "cell",
  "data": [
    {"name": "box_store"},
    {"name": "source_0", "url": "data/cars.json"},
    {
      "name": "data_0",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "!(length(data(\"box_store\"))) || (vlInterval(\"box_store\", datum))"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "unit",
      "value": {},
      "on": [
        {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
      ]
    },
    {
      "name": "box_x",
      "value": [],
      "on": [
        {
          "events": {"source": "scope", "type": "mousedown"},
          "update": "[x(unit), x(unit)]"
        },
        {
          "events": {
            "source": "window",
            "type": "mousemove",
            "consume": true,
            "between": [
              {"source": "scope", "type": "mousedown"},
              {"source": "window", "type": "mouseup"}
            ]
          },
          "update": "[box_x[0], clamp(x(unit), 0, width)]"
        }
      ]
    },
    {
      "name": "box_Horsepower",
      "on": [
        {
          "events": {"signal": "box_x"},
          "update": "box_x[0] === box_x[1] ? null : invert(\"x\", box_x)"
        }
      ]
    },
    {
      "name": "box_tuple",
      "on": [
        {
          "events": [{"signal": "box_Horsepower"}],
          "update": "box_Horsepower ? {unit: \"layer_0\", intervals: [{encoding: \"x\", field: \"Horsepower\", extent: box_Horsepower}]} : null"
        }
      ]
    },
    {
      "name": "box_modify",
      "on": [
        {
          "events": {"signal": "box_tuple"},
          "update": "modify(\"box_store\", box_tuple, true)"
        }
      ]
    }
  ],
  "marks": [
    {
      "name": "box_brush_bg",
      "type": "rect",
      "clip": true,
      "encode": {
        "enter": {"fill": {"value": "#333"}, "fillOpacity": {"value": 0.125}},
        "update": {
          "x": [
            {
              "test": "data(\"box_store\").length && data(\"box_store\")[0].unit === \"layer_0\"",
              "signal": "box_x[0]"
            },
            {"value": 0}
          ],
          "y": [
            {
              "test": "data(\"box_store\").length && data(\"box_store\")[0].unit === \"layer_0\"",
              "value": 0
            },
            {"value": 0}
          ],
          "x2": [
            {
              "test": "data(\"box_store\").length && data(\"box_store\")[0].unit === \"layer_0\"",
              "signal": "box_x[1]"
            },
            {"value": 0}
          ],
          "y2": [
            {
              "test": "data(\"box_store\").length && data(\"box_store\")[0].unit === \"layer_0\"",
              "field": {"group": "height"}
            },
            {"value": 0}
          ]
        }
      }
    },
    {
      "name": "layer_0_marks",
      "type": "symbol",
      "from": {"data": "source_0"},
      "encode": {
        "update": {
          "fill": {"value": "transparent"},
          "stroke": {"value": "lightgray"},
          "x": {"scale": "x", "field": "Horsepower"},
          "y": {"scale": "y", "field": "Acceleration"}
        }
      }
    },
    {
      "name": "layer_1_marks",
      "type": "symbol",
      "from": {"data": "data_0"},
      "encode": {
        "update": {
          "fill": {"value": "transparent"},
          "stroke": {"scale": "color", "field": "Cylinders"},
          "x": {"scale": "x", "field": "Horsepower"},
          "y": {"scale": "y", "field": "Acceleration"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "source_0", "field": "Horsepower"},
      "range": [0, {"signal": "width"}]
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "source_0", "field": "Acceleration"},
      "range": [{"signal": "height"}, 0]
    },
    {
      "name": "color",
      "type": "sequential",
      "domain": {"data": "data_0", "field": "Cylinders"},
      "range": "ramp"
    }
  ],
  "legends": [{"stroke": "color", "title": "Cylinders"}]
}

[jheer]

Hmm. There are some different options along those lines. I’m not sure caching at init time makes sense as the data could drift over time (e.g., due to streaming updates). One could cache based on previous valid settings, but that also adds more cruft/bloat to the system. Instead, I propose:

1. Fix up the vega-scale scaleFraction utility (used to generate gradient stops) to be robust to infinite values. This fixes the primary error observed here, though the gradient for empty selections will still look “bad”.
2. Update the vega-transforms Extent transform to produce [undefined, undefined] instead of [Infinity, -Infinity] for empty data sets, as this seems like more appropriate semantics and better aligned with other libraries like D3.
3. Leave higher-level decisions such as “caching” or enforcement of minimal domain extents to 3rd parties (e.g., end users of spec-generating libraries like Vega-Lite).

[jheer]

Fixed in vega version 4.3.0.