how to control cell updating in response to value changes in dependency cells?

yo!

Synchronized Views may be a great option here. They’re great when you have some viewof cell that can be updated from various other cells. But, one thing that you’ll want to avoid (that you mentioned) is directly referencing the value cell in any synced “viewof” cell, because any input will trigger a re-execution that makes interaction weird. This is an example of what that looks like:

link: https://observablehq.com/d/a60a5a2442c039ff

Notice how when you change the slider value, the slider cell re-executes, bluring the input, making it impossible to cleanly “slide” through values.

What you can instead do, however, is expose an “update” function on any viewof cells that will surgically update the cell’s DOM to insert the value of the value cell back where you want, avoiding an unnecessary re-execution. This is what that looks like:

link: https://observablehq.com/d/a60a5a2442c039ff

Notice how changing the slider here is more fluid, it doesn’t blur on change, and the value to the left of the slider updates normally.

Also, the synchronized views notebook is written with raw <input> elements in mind, so if you are using a very customized viewof cell (which that very cool looking time period selector looks like), you might need to update that cell’s API to match the set() logic in @mbostock/synchronized-views

2 Likes