Reactive and circular definitions altogether

1

Observable is great. But I need help on this issue.

I red multi value input
which shows how to have slider + text value input of a given value. Fine but can we have more ?

I am trying to convert an example where a single value can be modified on the different charts it is used, each update being propagated on all other charts like: blockbuilder

Direct conversion doesn’t work because of the circular definition.

I was dreaming on a way to have multiple cells offering interactive features to update a single value and the reactive engine taking care of the propagation of the new value into the depending cells…

The simplest example being two sliders changing the same value, and each change on one being mirrored on the other.

I am just digging into this. Is anyone having an idea of the possible workaround directions ?

Alain

2

Take a look at https://beta.observablehq.com/@mbostock/nonlinear-slider

It links two sliders so moving either one moves the other.

The result is very elegant, but the implementation is basically a listener on each input that modifies the other on change, it doesn’t really use the reactivity primitives from the notebook.

To do the same across multiple cells it might work to have a single function that observes all the other cells and broadcasts updates to all but the currently-altered one (or broadcasts updates to all in a way that doesn’t interfere with input). In other words, a star-shaped architectures with a central observer.

1 Like
3

While circular definitions are still tricky, we’ve just released the mutable keyword, which makes multiple cells updating a single value easier, while allowing downstream cells to observe the shared value in a reactive way.

For the basics, see the introductory notebook: https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state

For your exact question — two sliders changing the same (observable) value, with each change being mirrored to the other, see something like this: https://beta.observablehq.com/@jashkenas/mutable-example-sliders-sharing-a-value

1 Like
4

Is there any case where the right (not necessarily concise or easy-to-understand) use of generators cannot replicate what mutable does?

5

No, you can always use Generators.observe, tied to a mutable JavaScript object, to do the same thing that the mutable keyword does.

In the runtime, the keyword is internally creating two cells (similar to what viewof does). One of those cells is the mutable wrapper object, which has a value property with a setter, and the other cell is the reactive value that the setter sets.

Or, you can rely on viewof to achieve a similar effect, as demonstrated with Mike’s function here:

https://beta.observablehq.com/@jashkenas/manual-mutable-values

Ultimately, mutable is just sugar for wiring up the reactive and non-reactive versions of a single value.

1 Like
6

Well since I can probably save quite a lot of effort with mutable in a notebook I’m working on (for a whole MVC app living in a notebook, which relied on observing a list) I’m still very happy to have it.

Thanks!

7

Yes, this is it. Thanks.

Let’s try ‘mutable’ !!! It reminds me some ideas of synchronous programming dealing with ‘clocks’.

8

Jeremy: great work with the screencast at https://www.youtube.com/watch?v=Aznz6oLbuFQ

I skipped ahead through parts, but I’m impressed you got through that in one take! Does a nice job showing a possible observable notebook development process.