@interact
def mandel_plot(expo = slider(-10,10,0.1,2), \
      formula = ['mandel','ff'],\
      iterations=slider(1,100,1,30), \
      zoom_x = range_slider(-2,2,0.01,(-2,1)), \
      zoom_y = range_slider(-2,2,0.01,(-1.5,1.5))):
    var('z c')
    f(z,c) = z^expo + c
    ff_m = fast_callable(f, vars=[z,c], domain=CDF)

    # messing around with fast_callable
    for i in range(int(iterations/3)):
        f(z,c) = f(z,c)^expo+c
    ff = fast_callable(f, vars=[z,c], domain=CDF)

    def mandel(z):
        c = z
        for i in range(iterations):
            z = ff_m(z,c)
            if abs(z) > 2:
                return z
        return z
    show(z^expo + c)
    
    # calling ff three times, otherwise it fast_callable exceeds a recursion limit
    if formula == 'ff':
        func = lambda z: ff(ff(ff(z,z),z),z)
    elif formula == 'mandel':
        func = mandel

    complex_plot(func, zoom_x,zoom_y, plot_points=200, dpi=150).show(frame=True, aspect_ratio=1)

ipywidgets in CoCalc Jupyter

Notebooks & Whiteboards

William Stein, May 17, 2022. https://cocalc.com/wstein/support/ipwidgets-in-cocalc

VIDEO: https://www.youtube.com/watch?v=t4h5QrBKjyY

Old Widget Example from 2009: https://wiki.sagemath.org/interact/fractal

Some Notebook Widget History...

Sage Notebook's Widgets (2008)

Sage Notebook = looks like Jupyter classic, but we wrote it in 2008.

Sage Days 8 at Enthought in March 2008 -- Jason Grout bugged me to create something for the Sage Notebook to compete with Mathematica's Manipulate, which he saw was very useful by his colleagues for teaching, so I did an intense 1-week coding sprint on this. I worked so hard, I barely slept and had serious back pain from this for 6 months 😭. But it did work.

• Main idea was @interact decorator, which -- like Mathematica -- "widgetify" a function automatically. (@interact survives in ipywidgets today, thanks to Jereon Demeyer.)

• Used heavily in teaching and student projects: https://wiki.sagemath.org/interact

• Very limited compared to Mathematica's widgets.

• Igor Tolkov added a lot more widgets (e.g,. range sliders, etc.).

• "Make an interactive 3d scene with sliders and widgets" sucked: since every time you changed something, the entire 3d scene had to be recomputed and sent to the browser.

Jupyter Notebook Widgets (2014) Example

• GitHub says first version of ipywidgets written by Cal Poly student Jonathan Frederic in 2014, with direction from Min and Brian.

• Jason Grout very involved starting 2016 (supported by Bloomberg)

• Much more powerful than @interact: can create individual widgets and link them to/from code, to each other, etc, and people can make new widgets and sophisticated apps available as custom widgets.

import ipywidgets as widgets
w = widgets.IntSlider()
w

Sage Worksheet Widgets (2013)

• A Sage worksheet is a notebook interface built into a single CodeMirror editor. I wrote complete reimplementation from scratch of @interact.

• Used a lot in CoCalc still. Example.

None of the above have realtime collaboration support (RTC). In fact, some might argue widgets should not support realtime collaboration. However, there is only one kernel and Python process, so widgets should support RTC.

Widgets & Realtime Collaboration

Demo

1. Open JupyterLab in 2 browsers with realtime collaboration and use widgets

2. What happens:

   • Second window doesn't show widgets (re-evalute)

   • Dragging slider on one doesn't change other

   • Refreshing web browser breaks all your widgets.

ipywidgets in CoCalc Jupyter Notebooks (2019)

• Difficult for me to implement due to RTC challenges, but got basic widgets to work.

• Barely support 3rd party custom widgets yet.

• Let's understand the problem CoCalc's widgets are trying to solve via a demo...

Now do the same demo in Cocalc's Jupyter

• Second window does show widgets

• Dragging slider in one, updates state in both

• Can refresh web browser at any time and widgets still appear

CoCalc Widgets Implementation

manager.ts - widget manager (code)

• ONLY exists in the frontend web browsers

• It watches the ipywidgets-state table and "puts that information together" to create the widget models

• Watches models for changes and writes to table.

ipywidgets-state.ts - an in-memory distributed eventually consistent key:value store. (code)

Exists in both the frontend web browsers and the backend project.

Data - for each Backbone model:

• State: the model (without updates)

• Updates: combined updates to the model

• Buffers: additional binary data needed by model

• Message: e.g., msg:custom from kernel to frontend

Garbage collects data that isn't referenced anymore. Defining "referenced" is really hard and potentially requires work for each 3rd party widget!

widgets.tsx - react component that renders application/vnd.jupyter.widget-view+json mime type output messages. (code)

Uses a combination of:

• react

• lumino

• antd for consistent style (or not?)

Also, this sends custom comm messages to kernel.

CoCalc Node.js Project Server - a node.js process that manages realtime sync, all the kernels, etc. Analogous to the Python Jupyter server.

• updates table using comm messages

• garbage collection

Jupyter Kernel - Jupyter kernel process

Discussion

• A lot of functionality is still missing. There's tons about ipywidgets I don't understand. Most of what I've done has been via reading source code and reverse engineering. Bugs.

• Every third party widget I try is completely broken. For many reasons:

  • assumption that various font awesome icons exist (cocalc doesn't use font awesome)

  • assumptions about the DOM: cocalc's not encapsulating widgets in an iframe, so some CSS being wrong can break things

  • timing: implicit assumptions about order and state.

• Fixing the above is on our roadmap for this summer...

  • Recently I rewrote k3d custom widgets as modern ES6 classes, etc...

    • Learned that 3rd party widgets have a lot of potential for subtle assumptions in how they are implemented!

Thanks. Questions?