I ran into a subtle vega update behavior that I hope to get your help on --- when I use the view API to update the signal for a visual element (e.g., a brush), the UI doesn't appear to update until I move my mouse over to the div --- in the notebook, this can create a jarring experience. Is there any way to "eagerly" perform the update?
You can run the following JSON and run the script below in the console to reproduce the effect that I am talking about. Thanks!
Have the following spec in Vega Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Midas Generated Visualization of dataframe STATE_distribution",
"selection": {
"zoom": {
"type": "interval",
"bind": "scales",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel!"
},
"brush": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": null,
"encodings": ["x"]
}
},
"data": {
"values": [
{"STATE": "AK", "count": 2, "is_overview": true},
{"STATE": "RI", "count": 4, "is_overview": true},
{"STATE": "WA", "count": 75, "is_overview": true},
{"STATE": "WI", "count": 120, "is_overview": true},
{"STATE": "WV", "count": 155, "is_overview": true},
{"STATE": "WY", "count": 43, "is_overview": true}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "STATE", "type": "ordinal"},
"y": {"field": "count", "type": "quantitative", "stack": null},
"color": {
"field": "is_overview",
"type": "nominal",
"scale": {"range": ["#003E6B", "#9FB3C8"], "domain": [false, true]},
"legend": null
},
"opacity": {"value": 0.5}
},
"config": {}
}
Then paste VEGA_DEBUG.view.signal("brush_x", [10, 100])
in the console. You will see that the brush will not update until you move your mouse over to the div that contains the chart.
After updating a signal, call runAsync()
to invoke an update. The behavior that you see where the view updates when you hover over it comes from the fact that Vega listens to hover events and invokes an updates.