Left side and code does not move when cell content height changes in a transition

Feedback
1

The contents on the right side follows the changed height, but not the variable names an arrows on the left side nor the (pinned) code.

If this is intentional: is there a way to force a resize without re-evaluating the cell that changes it’s height?

2

As far as I understand that depends on whether your browser supports the appropriate API ( ResizeObserver). There was some related discussion here.

3

Thanks @jrus.

The ResizeObserver API seems to be supported in Chrome only: https://caniuse.com/#feat=resizeobserver

I used Firefox, but after switching to Chrome and a minor tweak of the notebook I could see that it works as expected.

4

As @jrus says, this problem isn’t apparent in Chrome because it supports ResizeObserver. You can tell Observable explicitly that the content of a cell has resized by dispatching a load event on that cell. For a transition that is continuously resizing the cell, you’d need to dispatch a load event on every tick, like so:

transition.tween("update", () => () => svgSel.dispatch("load"))

But it might be better to resize the SVG element only once at the beginning or end, instead.

Usually you don’t have to tell Observable that a cell resized because Observable checks the size after the cell is evaluated. However, here you’re reaching into the DOM produced by a different cell (and the mutation is happening inside of an async transition) so Observable doesn’t notice.

1 Like
5

Thanks a lot @mbostock. Now it works!

Given that the mutation is happening inside of an async transition, it wouldn’t work without the dispatch event even if I would reach into the same cell.