aaronwatters / jp_proxy_widget Goto Github PK
View Code? Open in Web Editor NEWGeneric Jupyter/IPython widget implementation that will support many types of javascript libraries and interactions.
License: BSD 2-Clause "Simplified" License
Generic Jupyter/IPython widget implementation that will support many types of javascript libraries and interactions.
License: BSD 2-Clause "Simplified" License
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,
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
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?!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.