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?
As far as I understand that depends on whether your browser supports the appropriate API (
ResizeObserver). There was some related discussion here.
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.
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.
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.