Vega: Signal value automatically resets to initial value

Elastic Stack Kibana
1

I am trying to create a toggle button using Vega viz to add/remove a Dashboard filter. Everything works fine except when I toggle it ON, the filter gets added but the toggle button jumps back to the OFF state automatically. I have to click for the second time to get the button to stay in the ON state. However, toggling OFF works fine with one click. Debugging shows that the value of the toggle signal resets to the initial value in the first click.

Please find the code below.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 350,
  "height": 350,
  "autosize": "none",
  "description": "Toggle Button",
  "signals": [
    {
      "name": "toggle",
      "value": false,
      "on": [
        {
          "events": {"type": "click", "markname": "circle"},
          "update": "toggle ? false : true"
        }
      ]
    },
    {
      "name": "addFilter",
      "on": [
        {
          "events": {"type": "click", "markname": "circle"},
          "update": "toggle ? kibanaAddFilter({ match_phrase: { \"machine.os.keyword\": 'osx' }}) : kibanaRemoveAllFilters()"
        }
      ]
    }
  ],
  "marks": [
    {
      "name": "circle",
      "type": "symbol",
      "zindex": 1,
      "encode": {
        "enter": {
          "y": {"signal": "height/2"},
          "angle": {"value": 0},
          "size": {"value": 400},
          "shape": {"value": "circle"},
          "fill": {"value": "white"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 2},
          "cursor": {"value": "pointer"},
          "tooltip": {"signal": "{Tip: 'Click to add filter'}"}
        },
        "update": {"x": {"signal": "toggle === true ? 190 : 165"}}
      }
    },
    {
      "name": "rectangle",
      "type": "rect",
      "zindex": 0,
      "encode": {
        "enter": {
          "x": {"value": 152},
          "y": {"value": 162.5},
          "width": {"value": 50},
          "height": {"value": 25},
          "cornerRadius": {"value": 20}
        },
        "update": {
          "fill": {"signal": "toggle === true ? '#006BB4' : '#939597'"}
        }
      }
    }
  ]
}

What am I doing wrong? Your kind help would be appreciated. :blush:

Note: I am using Elastic v 7.9.3

2

Looks like when the filter is rendered on the UI after the kibanaAddFilter() function is executed it resets ALL signal values back to default which I don't think is the expected behaviour.

This doesn't happen with kibanaRemoveFilter(), kibanaRemoveAllFilters(), or kibanaSetTimeFilter() from what can tell.

Added the below to test if all signals are being reset or just the toggle and addFilter. This signal if you click on the rectangle will go to true. Then if you click on the toggle it will show the filter appear on the UI and ALL signals are reset.

So I think something is triggered when the filter is being added on the UI that is reseting signal values back to default.

    {
      "name": "test",
      "value": false,
      "on": [
        {
          "events": {"type": "click", "markname": "rectangle"},
          "update": "toggle ? false : true"
        }
      ]
    }

Hopefully someone else can help with the issue but just adding more context of what I tried and came up with.

1 Like
3

Hi @aaron-nimocks, thank you for the reply!

Yes, you are correct about the signal value reset with the execution of kibanaAddFilter() because without it, the toggle button works properly. However, I also tried with adding the kibanaSetTimeFilter() instead of kibanaAddFilter() and the result is the same. I tried your code and it also proves the resetting.

I then tried placing the on event handler of addFilter inside toggle. From that I learnt that the order of the events matter.

  • Updating the value to true before adding the filter won't trigger the toggle at all

    "signals": [
  {
    "name": "toggle",
    "value": false,
    "on": [
      {
        "events": {"type": "click", "markname": "circle"},
        "update": "toggle ? false : true"
      },
      {
        "events": {"type": "click", "markname": "circle"},
        "update": "toggle ? kibanaAddFilter({ match_phrase: { \"machine.os.keyword\": 'osx' }}) : kibanaRemoveAllFilters()"
      }
    ]
  }
]

  • Updating the value to true after adding the filter results in the original behaviour (Had to switch the condition)

    "signals": [
  {
    "name": "toggle",
    "value": false,
    "on": [
      {
        "events": {"type": "click", "markname": "circle"},
        "update": "toggle ? kibanaRemoveAllFilters() : kibanaAddFilter({ match_phrase: { \"machine.os.keyword\": 'osx' }})"
      },
      {
        "events": {"type": "click", "markname": "circle"},
        "update": "toggle ? false : true"
      }
    ]
  }
]
4

Opened an issue for this if you wanted to track. Thank you for bringing this to our attention.

1 Like
5

Great! I'll track it. :grin: :+1:

1 Like
6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.