Make output figures resizable

[mdboom]

The matplotlib figures should be resizable with a little "handle", like in the WebAgg backend.

[ashutoshbsathe]

Hi, @mdboom Can I be assigned on this issue ?

[rth]

Thanks @ashutoshbsathe ! you are of course welcome to work on this.

[ashutoshbsathe]

Sweet !
@rth, I will start working now

[mdboom]

You may want to start by looking at how the WebAgg backend works -- it's included in matplotlib proper and used when interactive plots are used in a traditional Jupyter notebook. The general idea is to have one of those drag handles in the lower-right corner (like you see in Github comment editing fields). Of course, if there is a better design, that's ok, too!

[ashutoshbsathe]

@mdboom Thanks for the tip.
I've been digging into pyodide source for finding the WebAssembly backend that is currently being used(I suppose)
So I think this is what I'm going to do :
Look here to see how WebAgg backend implements the resize functionality and try to implement it here

Am I on correct path ?
(Sorry for late reply, I'm having couple of issues setting up pyodide on my machine, as soon as that's resolved, I'll start actual implementation)

[mdboom]

Yes, it sounds like you're on the right path.

[ashutoshbsathe]

I'm having an issue regarding the installation. Here's the log
I'm using Ubuntu 18.04 and Python 3.7 built from source.
It seems like it's picking up python2.7 for some of the python3 files
At first I thought this was because the python was referring to python2.7 on my machine, so I aliased it to python3.7 and it still doesn't seem to build for me. I've also tried cleaning ccache.

EDIT : Seems like the bin/pyodide shell script didn't preserve my python3 aliases(which seems to be a really bad way for forcing python3). I modified the python in that code with path to my python3 and build seems to have proceeded now.

[mdboom]

@ashutoshbsathe : I was just about to suggest trying the same thing. Does simply replacing the python with python3 on the last line of bin/pyodide resolve the issue for you? If so, that might be a good fix to help everyone out who may run into this issue.

[ashutoshbsathe]

@mdboom I actually replaced both occurrences of python with python3 in bin/pyodide.
And yes, the build seems to have proceeded, but it's not yet complete.
However, I may safely assume that the issue was solved :)
Should I generate a PR for that change ?

EDIT : In general, we should check if the user has multiple versions of python installed and then switch between python or python3. In some cases, we might have only python command available which may break the script again. I'll make sure to include the checks in my PR if you say so.

[mdboom]

I believe (though I can no longer find the reference) that python3 is always available if Python 3 is installed, so it should be good enough to just always use that. (The same is not true of Python 2 for historical reasons).

It would be great to have a PR for this. Thanks for offering!

[ashutoshbsathe]

Okay, so after a week of hacking, I've made following observations :

• Matplotlib's WebAgg uses tornado web server to render it's templates
• These templates are available here
• This line in the code attaches a JS resize handler to the canvas_div. A resize request is handled by this handler to redirect it to handle_resize on the server.
• Matplotlib will send resize message back to client and will be handled by this handle_resize. Which in turn requests refresh of the image which is handled by backend once again.

I think this approach(above) that Matplotlib uses is not good for our case since our full kernel lies in web browser, I think our case can be managed by single resize request call and refreshing/drawing immediately. Is that okay @mdboom ? Or you want to specifically stick to the approach that Matplotlib uses ?

Also, In any case, I need to attach a resize listener to the canvas_div. I saw document being imported from js I couldnn't understand the full potential of this library, Can I use all the JavaScript functions in this ? Can I mix up python and JS code ? Is there any documentation available ?

Lastly, if we're going to need jQuery UI to handle resize events for a specific div. How can I import it using WASM ?

(Thanks for reading such a long comment)

[mdboom]

Or you want to specifically stick to the approach that Matplotlib uses ?

No -- since matplotlib isn't remote in our case, we have a much simpler time. When I said "use the same approach", I mainly just meant the JS/CSS that is used to resize the canvas. The communication with matplotlib can happen directly through function calls in our case.

I saw document being imported from js I couldnn't understand the full potential of this library, Can I use all the JavaScript functions in this ?

Yes. It's the document object from the Javascript side in the browser -- so any documentation of the DOM API for Javascript you would find applies here, too.

Can I mix up python and JS code ?

Yep.

Is there any documentation available ?

https://github.com/iodide-project/pyodide/blob/master/docs/type_conversions.md

Lastly, if we're going to need jQuery UI to handle resize events for a specific div. How can I import it using WASM ?

Pyodide doesn't currently depend on jQuery, and I'd like to avoid adding that dependency if possible (since applications embedding Pyodide may want to use any number of Javascript frameworks). Ideally, you would figure out what jQuery is doing under the hood and implement it in "pure Javascript" (but implemented in Python).

(Thanks for reading such a long comment)

No problem. I appreciate the detail.