# Cut dependency graph

**URL:** <https://talk.observablehq.com/t/cut-dependency-graph/97>\
**Category:** Uncategorized\
**Created:** [February 1, 2018, 1:13am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97 "2018-02-01T01:13:18Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 1, 2018, 1:13am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/1 "2018-02-01T01:13:18Z")

</div>

I am trying to work with an already reactive library (Vega) in Observable. My current progress is at [https://beta.observablehq.com/@domoritz/rotating-earth](https://beta.observablehq.com/@domoritz/rotating-earth). Vega has “signals” as reactive variables. In my example, I am trying to set the signal value to the reactive rotation value. The problem is that the Observable engine re-evaluates the Vega compile step because the dependency graph links the view and the rotation variable.

My question is how I could split the dependency graph or otherwise tell Observable not to re-evaluate the compile step when the rotation changes.

I feel that I should be able to use `Generators.observe` ([https://beta.observablehq.com/@mbostock/more-deliberate-inputs](https://beta.observablehq.com/@mbostock/more-deliberate-inputs)) but I can’t quite wrap my head around how.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [February 1, 2018, 2:18am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/2 "2018-02-01T02:18:30Z")

</div>

I’m no Vega expert, but it looks like in your current sketch, Vega waits for you to mouse back over the globe before updating with the new rotation position.

I find that if I change:

```auto
view.signal('rotation', rotation)

```

to

```auto
{
  view.signal('rotation', rotation);
  view.run();
}

```

… it updates as one would expect.

---

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 1, 2018, 3:23am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/3 "2018-02-01T03:23:40Z")

</div>

Well, looks like you know Vega better than I do 😉 `view.signal('rotation', rotation).run()` is a shortcut for what you wrote.

I am still trying to understand the dependency graph on Observable. Why don’t all cells that depend on the view get re-evaluated when the rotation changes? I would expect `view.signal('rotation', rotation).run()` to create a link between the `view` and `rotation` variables. Or is it that `view` is not dependent on rotation because it only gets modified but not set?

There still seem to be some bugs in the dependency evaluation in Observable. For instance, if I reload the example and then rerun the first code cell, I get some errors:

 ![notebook](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/cb5ee5183c218ab27308b6ec7817a58836e70dc5.gif)

---

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 1, 2018, 3:36am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/4 "2018-02-01T03:36:38Z")

</div>

Here is a little experiment: [https://beta.observablehq.com/@domoritz/dependency-experiment](https://beta.observablehq.com/@domoritz/dependency-experiment).

Note how `a.foo` is `42` and the text says so as well. When I uncomment the last cell and run it, the content of `a` changes but the text does not update automatically. However, when I rerun the text cell, the text updates.

If I understand it correctly, the change tracking only listens to variable writes but not object changes. I think this makes sense and explains why my example works.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [February 1, 2018, 3:50am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/5 "2018-02-01T03:50:17Z")

</div>

Yep. The model may be a little bit simpler than what you’re imagining.

It wraps a functional programming skin around JavaScript, so that each cell in Observable acts as a function body — whatever is returned by the cell becomes the cell’s value, and whenever that value changes (actually changes itself, not an internal property or mutation), any other cell that references it will also be re-evaluated.

So, `view.signal(rotation)` doesn’t create a link between `view` and `rotation` — rather, it’s a cell that depends on both of them, and will be re-evaluated when either of them change.

To make this easy, avoid mutation as much as possible in Observable notebooks, or keep it confined within a cell. Especially try not to mutate cell values from other cells — that defeats much of the purpose of the reactive notebook.

---

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 1, 2018, 3:52am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/6 "2018-02-01T03:52:55Z")

</div>

Thanks for the explanation. It’s great for Vega that you are not tracking changes to objects as it allows us to use the reactivity of Vega. I’m excited to play more with Observable!

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 1, 2018, 4:00am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/7 "2018-02-01T04:00:32Z")

</div>

To elaborate on Jeremy’s comment, I would say as a rule of thumb: prefer immutability, and opt-in to mutability when necessary for performance. Mutation adds complexity because now you have to worry about managing mutable state yourself, rather than relying on automatic reactivity, but gives you more control over what gets executed.

---

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 1, 2018, 7:13am UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/8 "2018-02-01T07:13:30Z")

</div>

Can you explain the error I showed in the GIF above? What’s the initialization strategy of a notebook?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 1, 2018, 8:33pm UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/9 "2018-02-01T20:33:12Z")

</div>

Sure. Your dependency graph looks like this:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/b467f3d93d4cbcb64c888787bfc3fe09d38e37e6.jpg)

The directed edges here indicate references: for example, _vegaSpec_ references _vl_, so Observable won’t evaluate the _vegaSpec_ cell until _vl_ resolves (which involves requiring vega-lite@2 from unpkg).

The important thing missing from this graph is that the _view_ cell doesn’t depend on _patchVegaSpec_. So, there’s nothing guaranteeing that the _view_ cell will run after you’ve patched the Vega spec. Observable runs the cells in topological order, but if two cells are at the same level in the topology, the order in which these two cells run is not guaranteed.

You can fix this by making the dependency explicit: make _view_ depend on _patchVegaSpec_ so that the _view_ isn’t instantiated until after the spec is patched.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/fc6286a2401b18278d7c64b8fcb15d43de409701.jpg)

These two definitions would work:

```auto
patchVegaSpec = vegaSpec['signals'] = [{
  "name": "rotation",
  "value": 0,
}]

```

```auto
view = patchVegaSpec, new vega.View(vega.parse(vegaSpec))

```

Alternatively, you could just patch the Vega spec inside the _view_ cell before you parse it.

---

<div class="post-metadata">

**Author:** ![domoritz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/domoritz/32/38_2.png) [@domoritz](https://talk.observablehq.com/u/domoritz)\
**Post date:** [February 1, 2018, 8:59pm UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/10 "2018-02-01T20:59:29Z")

</div>

Thanks! It was super useful to see these dependency graphs.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 1, 2018, 9:00pm UTC](https://talk.observablehq.com/t/cut-dependency-graph/97/11 "2018-02-01T21:00:55Z")

</div>

Hopefully the dependency graphs will be built-in at some point in the near future!