Multiple Triggers on SignalListener - Vega-Lite + Mutable

[alessandrofajr]

I’m encountering an issue with a bar chart implementation using Vega-Lite in Observable. My problem lies in how the SignalListener function (or setSelectedBar, I'm not quite sure about the root of this behavior) is triggered multiple times after clicking on a bar in the chart, leading to unexpected behavior in the logic for dynamically filtering another dataset.

Expected Behavior:

• The setSelectedBar function should be triggered once, updating the barSelectionSignal variable.
• The handleBarSelection function should execute based on specific conditions.

Observed Behavior:

• On the first click, everything works as expected.
• On subsequent clicks, the setSelectedBar function is triggered multiple times, even when the same bar is clicked.

This behavior disrupts the dynamic of resetting another chart, which depends on a comparison between the barSelectionSignal and a Mutable default value (defaultSelectionSignal).

Code

Below is the relevant code:

Data

let energyConsumptionData = [
  { "consumption_type": "Others", "annual_consumption": 80704749 },
  { "consumption_type": "Commercial", "annual_consumption": 97715805 },
  { "consumption_type": "Industrial", "annual_consumption": 188268304 },
  { "consumption_type": "Residential", "annual_consumption": 164323258 }
];

Chart Specification

let barChart = vl.render({
  spec: {
    width: 500,
    height: 300,
    data: { values: energyConsumptionData },
    mark: { type: "bar" },
    selection: {
        barSelect: {
            fields: ["consumption_type"],
            on: "click",
            type: "single"
        }
    },
    encoding: {
      x: {
        field: "annual_consumption", 
        type: "quantitative",
        title: "Annual Consumption (MWh)"
      },
      y: {
        field: "consumption_type",
        type: "nominal",
        title: "Consumption Type"
      }
    }
  }
});

let barChartView = view(barChart);

Signal Handling

let setSelectedBar = (x) => { barSelectionSignal.value = x };
let barSelectionSignal = Mutable(null);
let defaultSelectionSignal = Mutable(null);

function handleBarSelection(name, value) {
    console.log("Handler called");
    if (barSelectionSignal !== defaultSelectionSignal) {
        console.log("barSelectionSignal mismatch. Resetting.");
        setSelectedBar(null);
    } else {
        console.log("Setting to:", value.consumption_type[0]);
        setSelectedBar(value.consumption_type[0]);
    }
}

barChartView.addSignalListener("barSelect", handleBarSelection);

I have barSelectionSignal compared to defaultSelectionSignal for the case when the user clicks the same bar twice, I reset the barSelectionSignal back to null and clean my subsequent filters.

1. Why is setSelectedBar triggered multiple times after the first click? Is this related to how Vega-Lite handles signals or an Observable-specific behavior? Could this be due to my use of Mutable?
2. How can I prevent the multiple triggers? Are there recommended patterns for managing selection signals in Vega-Lite and Observable Framework to avoid this issue?
3. Is there a better way to handle this? I’m open to refactoring the approach if there’s a more robust solution for dynamically filtering data based on chart interactions. It's important to reset the values to null if the same signal is received from barSelect.

Any guidance, insights, or best practices would be greatly appreciated.

[mythmon]

At a glance, I don't see anywhere that you are unregistering the event handler. That would mean that every time the barchartView is updated and the signal handling block is re-run, you'd get duplicate events. This might not be the problem you're seeing, but as a matter of best practices I'd recommend removing the signal listener in response to the invalidation promise. I'd expect that to be something like

invalidation.then(() => barChartView.removeSignalListener("barSelect", handleBarSelection));

[alessandrofajr]

Yes, that worked. I haven’t come across the invalidation promise yet.

Had to make a slight change to the handleBarSelection function, but then it worked as expected:

let setSelectedBar = (x) => { barSelectionSignal.value = x };
let barSelectionSignal = Mutable(null);
// got rid of defaultSelectionSignal

function handleBarSelection(name, value) {

    const newSelection = value.consumption_type[0]; // Stored the current selection here
    
    if (barSelectionSignal === newSelection) {
        console.log("User clicked the same bar. Deselecting.");
        setSelectedBar(null);
    } else {
        console.log("User clicked a different bar. Selecting:", newSelection);
        setSelectedBar(newSelection);
    }
}

barChartView.addSignalListener("barSelect", handleBarSelection);

invalidation.then(() => {
    barChartView.removeSignalListener("barSelect", handleBarSelection);
});

[mbostock]

Keep in mind that the perceived value of a Mutable is different within the code block that declares it than without. Within the code block that declares it, you’ll see a Mutable object instance, which allows you to assign .value (as well as read the .value “non-reactively” i.e. without the code block re-running whenever the mutable is reassigned). Whereas in other code blocks, you’ll only see the current value of mutable (e.g., null).

So if handleBarSelection is declared in the same code block as barSelectionSignal and defaultSelectionSignal, it doesn’t make sense to check barSelectionSignal !== defaultSelectionSignal as this will always be false as these symbols refer to two different Mutable instances. Within the code block, you instead need to say barSelectionSignal.value !== defaultSelectionSignal.value to compare the values.

I’m not actually sure you need to check whether the value changed before assigning to the mutable; that was probably a bug from registering multiple event listeners. And you won’t need to use the invalidation promise if you register the event listener in the same code block you declare the chart (since that guarantees that you only add the listener once whenever the chart is rendered).

Putting all that together, this seems to work:

const barChart = display(await vl.render(…));

const barSelection = Mutable(null);

barChart.value.addSignalListener("barSelect", (name, value) => {
  barSelection.value = value.consumption_type?.[0] ?? null;
});

[alessandrofajr]

Thanks for the reply, it's good to learn more about the code block logic. I need to check whether the value changes because, in this particular case, I want my filter to reset if the user clicks on the same bar consecutively. I was able to make it work after after reading both your and mythmon's comments.