Is it possible to turn the clear property of select to "false" for bar graphs? - vega-lite

Question

I have a concatenated graph with two sets of data being displayed. By selecting bars on the left graph you can change the data shown on the right graph. I would like to prevent the user from being able to clear the selection and am trying to set {"select": {"clear": false}} to achieve this, however it is not working. Whenever I click outside of the graph or if I double click on the bars, the selection clears.
I have tried this using an example bar graph in the vega-lite examples page and that is also not working. So I am just wondering if this is not possible for certain types of graphs or if there is a specific way of doing it. I have attached the code for the bar graph that does not work with the clear: false property and for a heatmap that does work.
Not working bar graph:
Vega-lite link to graph: https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289AEEABEyTrDsU5kMB3OjEMwaZGMOc7ZZQ3IdtSZpLLKhhBwgnBQ7p7eUMJQANaUhgAUAJKyEDg06nBBTACehgAqSExhSAwA5BCGNLKYcOpIEbrBmHlhlACUiipImCiooMRIggxqaADaoAMg+j1MaABMABwAvgrTaCAAQvNoYmLrm+gAwnuoACwAzEcgMwAi5wCcAIy3MwCi58tvG3dbADFzmIbn8ZgBxc4vJ7vLYACW+AHZYegUsDFqsALrrEA4UxIBAQSagWQEuBbRzOVxYHohMIRNCgNo4cnoHBsWqYHoxOCmLYAMxGIRAq1upIQrJAdPCXKU0oZbI5dRFmKUyHUcUZIGZkpM6h6-JogkEWwAxBcTojlvplrTMOo2HFdYImpqlFAGOoZPrFZyGiKlHBZFA2MpamQtQAPLWG0LKLYoJQ6rZsdRh0kmnF5GM0ONbBZJvIsrYARwYAR0-R0pADIENxoA8nioHRs4MQCHAnRdFq8Y0EFt5bKQMNRqzfiORmM0AAGSigqX2x1wADqNGU9C1nbDOjkxNx+IH6EpLicNKUo+nqAxfz7BIpZ+pw8v46xF6nrJnovdckNEfb0AjKyoAmIEAAKSDKOmZBpLI-qoHOGKikAA
Code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"params": [
{
"name": "highlight",
"select": {"type": "point", "clear": "false"}
},
{"name": "select", "select": "point"}
],
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer"
},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {
"condition": {"param": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"param": "highlight",
"value": 2
},
{
"param": "highlight",
"value": 1
}
],
"value": 0
}
},
"config": {
"scale": {
"bandPaddingInner": 0.2
}
}
}
Working heatmap graph:
Vega-lite link:https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEySYUqUMSSCGcCGgDaoJFEwMdaEAEFFIHACc4ymmedXbSqGwazMaAEYAZgBfBRMzC0EPO0dnV0x3dAAhO29ff1QABjCI80t0T3snFzdlKwBhNJ8-NBzwkFN86JTYkoSkm2qMutzGyIKQVKU40sTy1q8azID6vKirYeL4ssru2tQANj6mhfQqkfbVwvXMuf7mtcOV8cXT3obdwYPlsc6X9I2AThCAXTD7EgHEgEAZUMYQLIQXArDAaGQYMIEf4lBA4II4GY0KBMABPHAw9A4Ng0WpeDFAtAAMx0aJCfyUyAcAGtsSA8QSrE4sajMA42My4AB1GjKehoABMALgsm8LlkZDZuLZVJo6ImFwWSg5hMhbAQpMsAIAHiq1YINaMOuVtfjdbJ9YbogDVYIWqBVeqrJ8Uey7VYAI4WPx0NQ0UggAEQPkCwmgbyyFyYdjyTSA4EIWHwxHZ32IHB46m0uBKbS6XVMQSmVkAst6NCyBhugFsHCmOjKtMJpMptltjNZhFIrB2OuEgK1nT17KUMQthzKOAONndui9tP9kGDnPI0dT8eT8u9AEJ1WKtPQHRxkBMJCJgAKSGU8rIAElZLIl3UlLeH0+XwA8gwiTLtktZqgA7my0ZwDgaAACz1CAwIKteGZwResCILquLooIbAQWQTgypW9b0koSDGjQYKgMo+pIKSRaCHS9JAA
Code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"actual": "A", "predicted": "A", "count": 13},
{"actual": "A", "predicted": "B", "count": 0},
{"actual": "A", "predicted": "C", "count": 0},
{"actual": "B", "predicted": "A", "count": 0},
{"actual": "B", "predicted": "B", "count": 10},
{"actual": "B", "predicted": "C", "count": 6},
{"actual": "C", "predicted": "A", "count": 0},
{"actual": "C", "predicted": "B", "count": 0},
{"actual": "C", "predicted": "C", "count": 9}
]
},
"params": [
{"name": "highlight", "select": {"type": "point", "clear": false}}
],
"mark": {"type": "rect", "strokeWidth": 2},
"encoding": {
"y": {"field": "actual", "type": "nominal"},
"x": {"field": "predicted", "type": "nominal"},
"fill": {"field": "count", "type": "quantitative"},
"stroke": {
"condition": {"param": "highlight", "empty": false, "value": "black"},
"value": null
},
"opacity": {"condition": {"param": "highlight", "value": 1}, "value": 0.5},
"order": {"condition": {"param": "highlight", "value": 1}, "value": 0}
},
"config": {
"scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
"view": {"step": 40},
"range": {"ramp": {"scheme": "yellowgreenblue"}},
"axis": {"domain": false}
}
}

Answer 1

The difference between heatmap and bar chart seems a bit different from your understanding:
heatmap rects fill up all area on the grid
bar chart leaves some area on the grid outside the bars
As a result, upon clicks outside the grid, both won't clear the selection as you desire. However, clicks on the empty area inside the grid of bar chart emit an event with nothing selected, thus clearing the original selection.
I'm not sure if you know there is a toggle property for select. When it is true, any newly clicked point is inserted to the selection, thus clicking on the empty area adds nothing and preserves your previous selection. BUT, a side effect is that multi selection will be allowed...
"params": [
{"name": "highlight", "select": {"type": "point", "toggle": "true"}},
{"name": "select", "select": {"type": "point", "toggle": "true"}}
],
Last but not least, according to the Doc, clear property specifies an event to clear the selection. Yet, I'm not sure what happens when it is set as false.
clear property identifies which events must fire to empty a selection of all selected value