Handling events in interactive Vega legends - race condtion

Question

The linked chart contains only a legend and the legend works as follows:

• clicking on a fruit name toggles it on and off
• shift-clicking on a fruit name switches it ON and switches OFF all other fruit names

Legend display is controlled by two entities:

• data set SELECTED remembers selected items
• signal FILTERMODE toggles the type of the filter between include and exclude

Currently, if only one fruit name is ON, then a click on it switches it OFF (so all fruit names become OFF). I would like to modify this behavior so that a click on the last enabled fruit name would switch everything ON. (In other words - it would not be possible to deselect everything.)

In order to switch everything ON I only need to change the value of signal FILTERMODE to exclude. This is where I hit a snag. I have tried the following in the signal definition:

"update": "event.shiftKey? 'include' : (length(data('selected'))? filtermode : 'exclude')",

This does not work. I am fairly sure this happens because of a race condition. When I check for the length of data('source'), it is still non-empty.

So the sequence of events is the following:

• click
• update signal FILTERMODE (check if the data set SELECTED is empty - it is not)
• update data set SELECTED (only now it has become empty)

What would be the most elegant work-around?

Answer 1

Are you checking the length of the correct array? It is hard to understand precisely what the desired behaviour is but if I add the code (depending on whether filter mode is include or exclude)

length(data('selected')) == 6

or

length(data('selected')) == 0

then it seems to work. Editor

Answer 2

Try this instead. It is the same as your code but also checks the length of the array which your single line doesn't currently do.

You can now shift click melon and then click it normally and the filter mode will switch.

Editor

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A scatter plot example with interactive legend and x-axis.",
  "width": 200,
  "height": 200,
  "padding": 5,
  "autosize": "pad",
  "signals": [
    {
      "name": "shift",
      "value": false,
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "event.shiftKey",
          "force": true
        }
      ]
    },
    {
      "name": "clicked",
      "value": null,
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "{value: datum.value}",
          "force": true
        }
      ]
    },
    {
      "name": "filtermode",
      "value": "exclude",
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "event.shiftKey? 'include' : (length(data('selected') == 0)? filtermode : 'exclude')",
          "force": true
        }
      ]
    }
  ],
  "data": [
    {
      "name": "source",
      "values": [
        {"fruit": "apple"},
        {"fruit": "plum"},
        {"fruit": "pear"},
        {"fruit": "melon"},
        {"fruit": "grape"},
        {"fruit": "strawberry"}
      ]
    },
    {
      "name": "selected",
      "on": [
        {"trigger": "clicked && (event.shiftKey)", "remove": true},
        {"trigger": "clicked && (event.shiftKey)", "insert": "clicked"},
        {"trigger": "clicked && (!event.shiftKey)", "toggle": "clicked"}
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "range": {"scheme": "category10"},
      "domain": {"data": "source", "field": "fruit"}
    }
  ],
  "legends": [
    {
      "stroke": "color",
      "title": "Fruit",
      "encode": {
        "symbols": {
          "name": "legendSymbol",
          "interactive": true,
          "update": {
            "fill": {"value": "transparent"},
            "strokeWidth": {"value": 2},
            "opacity": [
              {
                "test": "filtermode == 'exclude' && !indata('selected', 'value', datum.value)",
                "value": 1
              },
              {
                "test": "filtermode == 'include' && indata('selected', 'value', datum.value)",
                "value": 1
              },
              {"value": 0.15}
            ],
            "size": {"value": 64}
          }
        },
        "labels": {
          "name": "legendLabel",
          "interactive": true,
          "update": {
            "opacity": [
              {
                "test": "filtermode == 'exclude' && !indata('selected', 'value', datum.value)",
                "value": 1
              },
              {
                "test": "filtermode == 'include' && indata('selected', 'value', datum.value)",
                "value": 1
              },
              {"value": 0.25}
            ]
          }
        }
      }
    }
  ]
}