Volatility Visualizations not Appearing Correctly in Vega Editor

[Oddant1]

Bug Description
Volatility visualizations no longer appear correctly in the vega editor likely due to an update (or updates) to vega breaking our templating.

Steps to reproduce the behavior

1. Go to https://docs.qiime2.org/2020.2/tutorials/longitudinal/#volatility-analysis
2. Click on 'view' next to 'volatility.qzv'
3. Click on 'Open in Vega Editor'
4. Witness the no graph
5. (optional) resize your browser window and observe the smooshed graph that should appear

Expected behavior
The graph renders in the correct proportions, and with no need to resize the browser window

Screenshots
Pre-resize no graph

---

Post-resize smooshed graph

---

Computation Environment

• OS: Linux Mint 193.
• QIIME 2: 2020.2
• Web Browser: Chromium, but Firefox experiences nearly identical behavior

Comments

1. On Chromium a single resize of my browser window takes the width from 0 to 203 according to the 'width' text box. subsequent resizings of the window change nothing. On Firefox it goes from 0 to 218, and sometimes subsequent resizings do change the width further.
2. I notice the doodads on the bottom to render without resizing they're just all smooshed up. Additionally I can't actually manually enter a width on either browser though the other controls may be interacted with as normal on both browsers.
3. Changing the schema version from 4.0 to 5.12.3 changes nothing about the behavior, but does get rid of the warning.
4. This issue may have something to do with the autosize field. At any rate that appears to be what allows the plot to resize so that it shows up after a window resize. I was unable to produce a satisfactory result by messing with this field alone, but it did substantially alter the behavior observed.

References

1. https://forum.qiime2.org/t/vega-editor-not-working/15026