Mutable - Push to array?

Hi all. First off- I love observable and I really enjoy all the wonderful creative work on here. Thanks so much!

Now, I do have a question.

  1. I made a bar chart (barchart with x-axis timescale) with click events.
  2. Once a bar is clicked, I would like to add/remove the start-end date of this bar to/from another chart for reference.

The notebook is here:

Im trying to solve this by:

  1. Adding a click event to the bars
  2. Once the bars are clicked, I add/remove the data entry to/from an array (mutable)
  3. Look for changes in the array, and add/remove my second chart accordingly.

However, I can’t get this approach working so far. Pushing to a mutable doesn’t seem to work in a reactive way- the dependent cells don’t get the update. I can see that the data is added by clicking on my mutable array, but it doesn’t do this by itself.

I narrowed it down in this notebook:

Two questions:

  • How can I get this approach to work?
  • Is there a better (cleaner) way to do this?

Thanks in advance!

Unfortunately updates to a mutable cell value get registered only if you reassign the value.

If you modify a mutable value in place, do the following afterwards:

mutable myArray = mutable myArray

By the way: If you want to see how Observable handles its proprietary mutable keyword internally, place a debugger statement near your reassignment and inspect the code in the source panel.

1 Like

This does the trick. Thanks!