when browser resize crosses mobile/desktop threshold, should update svg and reposition the tree

[rlskoeser]

Because we use different svg sizes for mobile and desktop, resizing a browser window across those boundaries can result in a strange display; can bind an observation handler to update the svg viewbox parameters, but that isn't enough - need to reposition the tree within the svg with the new coordinates.

Not sure priority; seems like an edge case, but may be an issue for accessibility, since low vision users who increase font size could cross over from desktop to mobile layout.

[rlskoeser]

I spent some time working on this and it's not trivial; it's not hard to add a resize handler and update the svg, but a lot of the tree is drawn based on the width of the tree and I can't figure out an easy way to tease out the parts that need to be redrawn. With the current code it would be easier to delete and redraw the tree, but I feel like that would introduce potential bugs. I'm going to move this to the icebox for now; we can revisit if we find out it is important for accessibility, and not just a developer edge case.

In case it's useful later, here's a starting point for the code:

Bind a handler in the constructor:

    window.onresize = this.handleResize.bind(this);

Preliminary resize handler:

 handleResize() {
    const resizeWidth = this.getSVGWidth();

    // update svg if the width has changed
    // (i.e., we have crossed mobile/desktop breakpoint in either direction)
    if (this.width != resizeWidth) {
           const [min_x, min_y, width, height] = this.svg.attr('viewBox').split(',')
      this.width = resizeWidth;
      this.svg.attr("viewBox", [min_x, min_y, resizeWidth, height]);
      this.simulation.reset();
      this.simulation.tick(300);
    }
  }