Checkbox only works once

[jakevdp]

Reported by an Altair user in vega/altair#1428

If you bind a selection to a checkbox, the checkbox only works once: (vega editor link)

1. Click the checkbox once, and points change color.
2. Any subsequent change to the checkbox has no effect.

Chart spec here:

{
  "data": {
    "values": [
      {"Block": "A", "X": 1, "Y": 12},
      {"Block": "B", "X": 2, "Y": 10},
      {"Block": "A", "X": 3, "Y": 5},
      {"Block": "B", "X": 4, "Y": 20}
    ]
  },
  "mark": {"type": "bar", "filled": true},
  "encoding": {
    "color": {
      "field": "Block",
      "type": "nominal",
      "condition": {"value": "lightgray", "selection": "Show"}
    },
    "x": {"type": "ordinal", "field": "X"},
    "y": {"type": "quantitative", "field": "Y"}
  },
  "selection": {
    "Show": {
      "type": "single",
      "encodings": ["color"],
      "bind": {"input": "checkbox"}
    }
  }
}

[joelostblom]

I would also like to see this fixed, so I tried to look into what is happening. I started with this Vega-Lite spec using a checkbox to try to toggle the opacity of the points:

{
  "config": {"view": {"continuousWidth": 400, "continuousHeight": 300}},
  "data": {"name": "data-e2af9e8976eaa83f9f573defb2cdbfc4"},
  "mark": "point",
  "encoding": {
    "opacity": {
      "condition": {"value": 0.2, "selection": "selector013"},
      "value": 0.8
    },
    "x": {"type": "quantitative", "field": "xval"},
    "y": {"type": "quantitative", "field": "yval"}
  },
  "selection": {
    "selector013": {"type": "single", "bind": {"input": "checkbox"}}
  },
  "datasets": {
    "data-e2af9e8976eaa83f9f573defb2cdbfc4": [
      {"xval": 0, "yval": -0.2355802937354859},
      {"xval": 1, "yval": 0.7767216006523057},
      {"xval": 2, "yval": -1.2109808701899032},
      {"xval": 3, "yval": 0.4989749682421285},
      {"xval": 4, "yval": 1.6847327658840627},
      {"xval": 5, "yval": 2.782672323471201},
      {"xval": 6, "yval": 1.8307068626123035},
      {"xval": 7, "yval": 1.0850718888034439},
      {"xval": 8, "yval": 0.7905246391588937},
      {"xval": 9, "yval": 1.0770949362894426}
    ]
  }
}

In the compiled vega code you can see that the opacity section looks like this

          "opacity": [
            {
              "test": "!length(data(\"selector013_store\")) || vlSelectionTest(\"selector013_store\", datum)",
              "value": 0.2
            },
            {"value": 0.8}
          ],

I don't understand why it is testing the length of the checkbox values, but that might the reason it only works the first time, since the selection_13_store starts out empty but is then populated with one value (true/false) and stays constant at one value. Changing that section to the following, gives a compiled vega spec that works as intended (it is even sufficient with just the first part, but I kept the part after the || in in case it has some corner case functionality):

          "opacity": [
            {
              "test": "selector013__vgsid_ || vlSelectionTest(\"selector013_store\", datum)",
              "value": 0.2
            },
            {"value": 0.8}
          ],

Does anyone know if this change is reasonable and where in the Vega-Lite codebase the generation of this compiled Vega code can be corrected?

[domoritz]

@arvind?

[arvind]

Thanks for digging into this @joelostblom. What's going on here is that a "toggle" checkbox isn't quite the right use of selections — which are suited for driving interactive logic that is data-driven (i.e., enumerating data values or data ranges). So a checkbox selection would yield the desired behavior if you had a field in the dataset that had true/false values.

Instead, for interactive toggles, you'll want to use the new variable parameters that were introduced in Vega-Lite v5 (I don't believe Altair supports them yet, but they are on the roadmap). For instance:

{
  "config": {"view": {"continuousWidth": 400, "continuousHeight": 300}},
  "data": {"name": "data-e2af9e8976eaa83f9f573defb2cdbfc4"},
  "mark": "point",
  "encoding": {
    "opacity": {
      "condition": {"value": 0.2, "selection": "selector013"},
      "value": 0.8
    },
    "x": {"type": "quantitative", "field": "xval"},
    "y": {"type": "quantitative", "field": "yval"}
  },
  "params": [{
    "name": "selector013",
    "bind": {"input": "checkbox"}
  }],
  "datasets": {
    "data-e2af9e8976eaa83f9f573defb2cdbfc4": [
      {"xval": 0, "yval": -0.2355802937354859},
      {"xval": 1, "yval": 0.7767216006523057},
      {"xval": 2, "yval": -1.2109808701899032},
      {"xval": 3, "yval": 0.4989749682421285},
      {"xval": 4, "yval": 1.6847327658840627},
      {"xval": 5, "yval": 2.782672323471201},
      {"xval": 6, "yval": 1.8307068626123035},
      {"xval": 7, "yval": 1.0850718888034439},
      {"xval": 8, "yval": 0.7905246391588937},
      {"xval": 9, "yval": 1.0770949362894426}
    ]
  }
}

For your specific question about why we test for the length of selected values, it's to support handling empty selections.

Hope that helps!

[joelostblom]

Ah I see, thanks for bringing clarity to this @arvind !