Simpler visualizations in colabs

[noajshu]

If you run our tutorial colab:

E.g., use File->Save a copy in drive on this colab:
https://colab.research.google.com/drive/14WslzTRPVhF86q2zhFImxY-WEcgAymx4?usp=sharing

You can see the Stim circuit visualization just works in the colab itself, whereas the Tesseract decoder visualization requires several steps including:

• cloning the whole repo
• generating and manipulating files on the filesystem
• downloading the json to the users's laptop
• uploading to the separate page https://quantumlib.github.io/tesseract-decoder/viz/

It would be great to reduce the number of steps at least a little bit. For example, probably we can add the code in to_json.py to be part of the python module so that it's unnecessary to manipulate files on disk.

As a reach goal, it would be cool to have an understanding of how Stim's able to load the 3d interactive plot in the colab itself to see if it may be viable to just put the 3D animation directly into the colab in a future refactor.

[draganaurosgrbic]

I looked at how we could visualize our plots inside Jupyter. The core problem I think we have is in order to display a JSON inside Jupyter, it needs to follow a specific protocol that Jupyter can understand. I think that is what the Stim library does. It converts its internal circuit representation into a SVG, which is a standard format that Jupyter understands. We can't just drop any JSON into Jupyter and expect a chart; we have to follow the right process to convert it first.

As far as I understood, the visualization tool we currently use understands the specific JSON format we have. If we would want to integrate it inside Jupyter, I think we would need a library that converts the current JSON format we have into a format that Jupyter could display, like HTML or SVG. I found this library: Altair (https://altair-viz.github.io/), which understands the Vega-Lite JSON grammar.

I am not sure whether this is the right path, but if we would have a JSON format that can be integrated into these libraries that Jupyter knows how to display, we might be able to do something like this:

import json
import altair as alt
from IPython.display import display, HTML

# Load the JSON.
with open('logfile.json', 'r') as f:
    vega_lite_spec = json.load(f)

# Use Altair to convert the Vega-Lite JSON specification into a chart.
chart = alt.Chart.from_dict(vega_lite_spec)

# Display the chart in the notebook.
chart

Hope this is useful, I didn't have time to look into this more (I was busy with evaluations, reports, slowdowns, etc.). Hope it is helpful and you know better how to move forward! Good luck!