Editing front-end code in colab is tricky - you can't keep the code on the same screen as the output and you're stuck typing in a giant text block:

This page shows how to set up a better, hot reloading dev environment. Code is edited locally, uploaded to a public server and polled for changes in the colab iframe.

First, add a python function for js to call and embed some HTML in the colab:

import IPython
from google.colab import output

def get_py_data(number):
  output.eval_js('updateData({})'.format(number*2))
  
output.register_callback('get_py_data', get_py_data)

HTML = '''
  <link rel='stylesheet' href='https://roadtolarissa.com/colab-test/style.css'>
  <script src='https://roadtolarissa.com/worlds-group-2017/d3_.js'></script>
  <div id='buttons'></div>
  <div id='graph'></div>

  <script>window.__hotReloadTimeoutMS = 250</script>
  <script src='https://roadtolarissa.com/colab-test/watch-files.js'></script>
'''
IPython.display.display(IPython.display.HTML(HTML))

Next, run this command locally to watch for changes and upload them to the public server:

ls *.* | entr rsync -a "$PWD" demo@roadtolarissa.com:../../usr/share/nginx/html/

You could also directly edit the files on the server with vim or vscode.

In the colab iframe, watch-files.js checks for changes to roadtolarissa.com/colab-test/script.js every 250ms. If the file has changed, it is eval'd and your changes are immediately visible.

Future work

I think there's a way to package this up as a python library that can run inside of colab. I just can't figure out the right place to put code that:

• is accessible from the iframe without CORS issues
• can be updated and read in < 50ms
• persists for the next person

SSH into colab might work (and could replacing polling with web sockets!) but that requires sending traffic through ngrok — not good for private data.

Other things that would be nice:

• Showing the visualization without requiring everyone start a kernel is nice. Inlining static data as JSON inside the HTML does this.
• Sending an ArrayBuffer or npy to JS instead of a giant string. This could be done by running a python server in colab.
• Network round-trip is too slow to update on slider drag. Falcon does a neat trick where all possible values of the slider are computed and sent the client on dragstart.