jupyter-widgets-contrib / ipycanvas

Interactive Canvas in Jupyter
https://ipycanvas.readthedocs.io/en/latest/
BSD 3-Clause "New" or "Revised" License
686 stars 64 forks source link

Why the canvas manager? #349

Open maartenbreddels opened 1 month ago

maartenbreddels commented 1 month ago

Hi Martin,

I was trying out ipycanvas with solara, on pycafe actually: https://py.cafe/maartenbreddels/solara-ipycanvas-fractal-tree preview

And to work with solara, we need to create a new canvas manager for each virtual kernel, since widgets cannot be shared. We saw the same issue in https://github.com/bloomberg/ipydatagrid/pull/400 , and it seems also shiny is having the same issues: https://github.com/posit-dev/py-shinywidgets/issues/99

So I was wondering what the idea is behind the canvas manager, and why it is shared.

cheers,

Maarten

martinRenou commented 1 month ago

Hey Maarten!

All the communication of canvas widgets go through this "manager" to make sure all commands are run in order.

This fixes issues when asynchronous things are happening in the page during the draw (e.g. drawing an image based of an url).

e.g.:

from ipywidgets import Image

from ipycanvas import Canvas, hold_canvas

import urllib.request

urllib.request.urlretrieve('https://github.com/jupyter-widgets-contrib/ipycanvas/raw/master/examples/sprites/smoke_texture0.png', 'smoke_texture0.png')
urllib.request.urlretrieve('https://github.com/jupyter-widgets-contrib/ipycanvas/raw/master/examples/sprites/smoke_texture1.png', 'smoke_texture1.png')

sprite1 = Image.from_file('smoke_texture0.png')
sprite2 = Image.from_file('smoke_texture1.png')

# Create two canvases
canvas = Canvas(width=300, height=300)
canvas2 = Canvas(width=600, height=300)

# We draw some images on the first canvas **THIS IS ASYNC BECAUSE OF DOWNLOAD THE IMAGE PRIOR TO DRAW IT**
canvas.fill_style = '#a9cafc'
canvas.fill_rect(0, 0, 300, 300)
canvas.draw_image(sprite1, 50, 50)
canvas.draw_image(sprite2, 100, 100)

# Draw the first canvas on the second canvas **THIS ABSOLUTELY NEED TO RUN AFTER THE OTHER TASKS** 
# the manager will make sure of that by waiting for `canvas` to have finished before executing commands on `canvas2`
canvas2.draw_image(canvas, 0, 0)
canvas2.draw_image(canvas, 300, 0)

canvas2
maartenbreddels commented 1 month ago

What if canvas2 (the model on the frontend) asked directly to canvas1 if it has anything in its queue? Why do you need a separate widget?

Maybe this queue pattern that we use in ipyreact would help? https://github.com/widgetti/ipyreact/blob/b48b045fd22a3d4f0d20c5c4b79b71bdb1bbc0a4/src/widget.tsx#L472

(I'm trying to look for ways that ipycanvas would work out of the box on systems with multiple users in 1 process)

maartenbreddels commented 1 month ago

FYI, i'm now using this trick to get it working with solara

# workaround for ipycanvas for using a singleton widget
import traitlets
import ipycanvas
ipycanvas.canvas._CanvasBase._canvas_manager.default_value = traitlets.Undefined
ipycanvas.canvas._CanvasBase._canvas_manager.make_dynamic_default = ipycanvas.canvas._CanvasManager

See https://py.cafe/maartenbreddels/stackview-3d-mri-viewer