aaronwatters / jp_proxy_widget Goto Github PK

Like this:

https://stackoverflow.com/questions/41713966/how-babel-and-jsx-related-or-differ

Maybe in another repository.

It would be really useful to be able to open a jp_proxy_widget in a new JupyterLab output window. This would provide a simple mechanism for then creating JupyterLab apps running in their own window as simple jp_proxy_widget wrapped Javascript applications.

Related issue: jupyterlab/jupyterlab#3692

I had wondered in the past if `jupyterlab-sidecar' might offer an alternative route (or suggest some plumbing that would allow a widget to be opened directly in a new output window) but it appears to be a stale project?

The following example shows real time update of a jp_proxy_widget showing the status of a computation

# First define the widget and display it
import jp_proxy_widget
W=jp_proxy_widget.JSProxyWidget()
W.js_init("""
    element.empty()
    element.append('<h3></h3>')
    element.setText=function(txt) {
        element.find('h3').html(txt)
    }
""")
W.check_jquery()
W.element.setText('hello')
display(W)

# Note that the following is needed in order for the the real-time update to work
import IPython, time
time.sleep(0.1) # It is unclear how long one needs to sleep... e.g., 0.001 does not seem to work
IPython.get_ipython().kernel.do_one_iteration()

# Note: If the following is in a separate cell (or called in a separate thread after the a delay), then the real-time update works without the above hack
def run_calc():
    a=0
    for j in range(1,501):
        W.element.setText('Progress: {}/{}'.format(j,500))
        for k in range(5000):
            a=a+j*k
run_calc()

Suggestion: It would be great to have some API call on the widget that does the above... it could be something like

W.renderNow()

As indicated in the code above, yes, I could just do this in a separate call, but for my use case, this is not a good option.

I'm happy to try implementing this if that would be helpful.

Do you know of any examples of detaching a jp_proxy_widget instance so that it can be detached from the output area of the cell that displays it so that it can float or be dragged around the notebook? (This makes the widget more useful it it is accessed / referenced from multiple other cells in a notebook.)

An example in this ipywidgets issue using the following approach to display a floating panel at the top of the notebook:

display(Javascript("""$('div.job_widget')
        .detach()
        .appendTo($('#header'))
        .css({
            'z-index': 999,
             'position': 'fixed',
            'box-shadow': '5px 5px 5px -3px black',
            'opacity': 0.95,
            'float': 'left,'
        })
        """))

It's easy enough to add the css attributes to the widget, but is there a simple way of detaching it and appending it to the notebook $('#header')?

Do you know whether jp_proxy_widget should in principle be able to run in JupyterLite, the WASM powered JupyterLab environment?

The current wheel doesn't install in JupyterLite.

I also note that you make use of requests in the code; requests doesn't run out of the can in pyodide (at least, it didn't last time I checked) so I'm guessing that is one thing that might need refactoring (or otherwise addressing) for a version of jp_proxy_widget capable of running in JupyterLite.

I believe there is a typo in the docs

jupyter labextension install js

should be

jupyter labextension install jp_proxy_widget

Also, the statement "The following must have been run once at sometime in the past:" strikes me as confusing. What if it was not installed.... Is it okay to then install it after the previous line?

Using Python 3 in Jupyter Notebook, and jp_proxy_widget v1.0.8.

Multi-level object send in javascript callback to python results in None for nested properties:

import jp_proxy_widget
from IPython.display import display

def printing_callback(*args):
    print(args)

# Python code here to create the widget

widget = jp_proxy_widget.JSProxyWidget()
widget.js_init("""

element.html("<button main>Click</button>");
const div = document.querySelector("[main]");
div.addEventListener('click', () => {
callback([{prop1: "test", prop2: {subprop2: "toto"}}])
})
""",callback=printing_callback)

# display the widget
display(widget.debugging_display())

Did I miss something ?

Hello,

@Aaron-Watters :

I see that "newer widgets" don't need to be installed, no jupyter labextension install ... is needed
Could jp_proxy_widget implement this feature?

Thanks

Maarten Breddels @maartenbreddels 10:54
if you install a json file in a .d directory yes, but pip will not do that if you run pip install -e .
for ipyvolume this is the magic line

Aaron Watters @AaronWatters 10:55
I don't know what you mean "install a jspon file in a .d directory" -- I was doing "pip install jp_doodle" which had jp_proxy_widget as a dependency. I thought that was all I needed.
...and something got wedged somehow.

Maarten Breddels @maartenbreddels 10:57
I don't know that that proxy thing is.. but you need that magic line that ipyvolume has, it will put ipyvolume.json at {prefix}/etc/jupyter/nbconfig/notebook.d/

Hi

I just came across the browser Broadcast Channel API for the first time, and this generalisation of it — https://github.com/pubkey/broadcast-channel — (demo).

The package seems to allow transfer of JSON serialisable messages, which makes me wonder - could jp_server_proxy in principle be used to connect to control, and receive messages from an application running in another tab using the Broadcast Channel API? One advantage of this might be for folk running two screens: one could display the widget/application tab, and the other a Jupyter notebook "controller"?

I notice that in your dual_canvas demo you have a utility function for generating a png from a canvas, with an example usage here invoked from a button click here.

Generating images from a canvas in the widget could be quite a common requirement, so would it make sense to for jp_proxy_widget, or a plugin to it, to offer a utility function supporting that natively?

I also have a use case where I am overlaying several canvases and want to grab a single image from those. The recipe here suggests one way of doing that; this suggests in turn an additional helper utility to make it easier grabbing a png from one or more canvases by way of a function that combines multiple canvases on one, and then saves the one as a png.

Hi,

I would like to use this library to re-order a list but also allow users to select multiple items and then hit another widget button to delete them from the list.

thx

I've been trying, and failing, to get jp_proxy_widget working in JupyterLab on my home install (base ipywidgets seem to work fine) and can't seem to get the helloworld notebook to render widgets directly from the repo in MyBinder.

Is there a working demo of jp_proxy_widget in JupyterLab via MyBinder anyway? If so, I can try and use that as a basis for fixing my own local install...

Using python3.6.6 and jupyter 4.4.0/notebook 5.5.0, if I do

$ pip3 install jp_proxy_widget

it seems to install OK, but when I go to do

$ jupyter nbextension enable --py --sys-prefix jp_proxy_widget

I get

Traceback (most recent call last):
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/bin/jupyter-nbextension", line
 11, in <module>
    sys.exit(main())
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/ju
pyter_core/application.py", line 266, in launch_instance
    return super(JupyterApp, cls).launch_instance(argv=argv, **kwargs)
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/tr
aitlets/config/application.py", line 658, in launch_instance
    app.start()
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/no
tebook/nbextensions.py", line 988, in start
    super(NBExtensionApp, self).start()
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/ju
pyter_core/application.py", line 255, in start
    self.subapp.start()
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/no
tebook/nbextensions.py", line 896, in start
    self.toggle_nbextension_python(self.extra_args[0])
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/no
tebook/nbextensions.py", line 872, in toggle_nbextension_python
    logger=self.log)
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/no
tebook/nbextensions.py", line 483, in enable_nbextension_python
    logger=logger)
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/no
tebook/nbextensions.py", line 380, in _set_nbextension_state_python
    m, nbexts = _get_nbextension_metadata(module)
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/no
tebook/nbextensions.py", line 1122, in _get_nbextension_metadata
    m = import_item(module)
  File "/home/jsoishi/miniconda3/envs/dedalus-kjb/lib/python3.6/site-packages/tr
aitlets/utils/importstring.py", line 42, in import_item
    return __import__(parts[0])
ModuleNotFoundError: No module named 'jp_proxy_widget'

However, if I instead install via

$ python3 -m pip install jp_proxy_widget

Then everything seems to work OK.

I had an issue with using load_css in the back-end, providing an url for the resource.
I did the following workaround

• adding a front-end function loadResource
• using it from the front-end

function loadResource(url,kind, callback){
    var res = null;
    if (kind == 'script'){
        var found = document.querySelector('[src="'+url+'"]');
        if (found == null){
            res = document.createElement(kind);
            res.type = "text/javascript";
            res.src = url;
        }
    } else if (kind == 'link'){
        var found = document.querySelector('[href="'+url+'"]');
        if (found == null){
            res = document.createElement(kind);
            res.rel = "stylesheet";
            res.href = url;
        }
    }
    if (res == null){
            if (callback == null ){
                isloaded(url);
            } else {
                callback(url);
            }                
    } else {
        res.onload = function(){
            if (callback == null ){
                isloaded(url);
            } else {
                callback(url);
            }
        };
        document.getElementsByTagName("head")[0].appendChild(res);     
    }
}
loadResource('https://unpkg.com/[email protected]/dist/assets/diagram-js.css','link',null);

I'm exploring running a package that uses jp_proxy_widget on a Raspberry PI 400, and it seems that the numpy package is perhaps not as powerful as the one you anticipate.

/usr/local/lib/python3.8/site-packages/jp_proxy_widget/proxy_widget.py in LiteralMaker()
   1468         np.ndarray: np_array_to_list,
   1469         np.float: float,
-> 1470         np.float128: float,
   1471         np.float16: float,
   1472         np.float32: float,

AttributeError: module 'numpy' has no attribute 'float128'

It would be useful to set up a guard to check that that types exist before setting up aliases to them.

I'm seem to be going round in circles on this one.

What's the trick for loading something like the ace editor?

If I try the following I get a new error message: TypeError: define is not a function error, which suggests I should be loading things in using require?

html="""<h1>sshgdhsgd</h1>
<div id="editor"></div>
"""

test0 = jp_proxy_widget.JSProxyWidget()

e = test0.element

# Call some standard jQuery method on the widget element:
e.empty()
e.width("1000px")
e.height("1000px")


test0.load_js_files(["ace-src-min/ace.js"])
#test0.require_js("ace/ace", "ace-src-min/ace.js")

e.html(html)

sc="""
     var editor = ace.edit("editor");
"""
test0.js_init(sc)

display(test0)

If instead replace the script load with a require load, eg test0.require_js("ace/ace", "ace-src-min/ace.js"), then I get a new error message: ReferenceError: ace is not defined error?

It's probably something obvious but I don't see it?

Following the tutorial, but trying to load a local copy of the jQuery UI CSS results in an error:

import jp_proxy_widget
from IPython.display import display

myCSStest = jp_proxy_widget.JSProxyWidget()

my_styles = "my_app/jquery-ui.css"

myCSStest.check_jquery()
myCSStest.load_css(my_styles)

myCSStest.js_init("""
element.html('<div><em class="random-style-for-testing">Styled widget element.</em></div>')
""")

display(myCSStest)

results in

Uninitialized Proxy Widget
new error message: TypeError: that.$$el.jQuery(...).prop is not a function

Hey there, this project looks awesome.

I'm seeing this error when trying the minimal example from the first cell in your notebook.

The error in the browser console is

Any ideas what could be causing it?

Trying to install and use jp_proxy_widget in a MyBinder JupyterLab environment launched from the https://github.com/jupyter-widgets/jupyterlab-sidecar repo raises an Error displaying widget: model not found error message.

Running in a MyBinder environment launched from this (jp_proxy_widget) repo and the widget works fine.

Doing a pip freeze, the version numbers of Jupyter packages etc look the same across repos, so presumably they're using common Binder container layers.

Is the jp_proxy_widget package on PyPi complete? I've also tried installing the package from this repo into a not-this-repo Binder environment and the error still occurs?!