Hello World Custom Widget example for jupyterlab

[John]

Is there a version of "Hello World" custom widget example for jupyterlab. The jupyter notebook documentation provides this "Hello World" custom widget but it uses requirejs which is not supported by jupyterlab.

http://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html

Is there any documentation on how to get a custom widget for jupyter notebook such as this "Hello World" example to work in jupyterlab.

[Jason Grout]

There is the widget cookiecutter templates to generate a package containing a simple custom widget that works in both notebook and lab:

https://github.com/jupyter-widgets/widget-ts-cookiecutter

You're right that the custom widget in the docs does not work in JupyterLab. I think it probably makes sense to maybe remove it in favor of using something like the cookiecutter.

Thanks,

Jason

[Aaron Watters]

Here is a test widget which basically consists of something very similar to the 

cookiecutter output.

https://github.com/AaronWatters/basic_test_widget

I use it for sanity checking and for developing patches when the cookie cutter

changes.  I hope you like.

  -- Aaron Watters

ps: By the way I'm getting ready to "release" a "proxy widget" mechanism.

I haven't published it to "pip" yet but if you do a developer install it should

work.  I'd be interested in comments.

https://github.com/AaronWatters/jp_proxy_widget/blob/master/notebooks/Tutorial.ipynb

[Gianni C.]

Hi,
While using JupyterLab for some months I started using ipywidgets to add some "interactions" to my notebooks and wanted to look at how to have a widget displaying graphs data using Cytoscape.js .
I started by reading the documentation of ipywidget about custom widgets before to find this thread while searching about a custom widget for JupyterLab.

Is there somewhere even just few words about the best way to use a "skeleton" like the widget-ts-cookiecutter Git project? This one compared to the older widget-cookiecutter project has a bunch of extra files, not sure if it's because it's a kind of "advanced" skeleton which already has tests and DevOps (automated testing and CI/CD) pieces embedded, but it leave me quite confused on where to start and what ended up in which file compared to the older widget-cookiecutter which was "smaller".

Googling on the topic returned me mainly Jupyter references, but those aren't going to work in JupyterLab (as far as I know).

If someone has any reference (even simple / clean custom widgets Git repositories I could look into to "reverse engineer" the logic, I don't mind seeing a full piece of code and figuring out what is where and doing what), I take it.

Many thanks,

Gianni

[Hai Nguyen]

On Mon, Aug 26, 2019 at 11:12 AM Gianni C. <gianni...@gmail.com> wrote:

Hi,
While using JupyterLab for some months I started using ipywidgets to add some "interactions" to my notebooks and wanted to look at how to have a widget displaying graphs data using Cytoscape.js .
I started by reading the documentation of ipywidget about custom widgets before to find this thread while searching about a custom widget for JupyterLab.

Is there somewhere even just few words about the best way to use a "skeleton" like the widget-ts-cookiecutter Git project? This one compared to the older widget-cookiecutter project has a bunch of extra files, not sure if it's because it's a kind of "advanced" skeleton which already has tests and DevOps (automated testing and CI/CD) pieces embedded, but it leave me quite confused on where to start and what ended up in which file compared to the older widget-cookiecutter which was "smaller".

 

Googling on the topic returned me mainly Jupyter references, but those aren't going to work in JupyterLab (as far as I know).

I think the cookiecutter stills work with lab, thanks to this: https://github.com/jupyter-widgets/widget-cookiecutter/blob/master/%7B%7Bcookiecutter.github_project_name%7D%7D/js/lib/labplugin.js

Hai

 

If someone has any reference (even simple / clean custom widgets Git repositories I could look into to "reverse engineer" the logic, I don't mind seeing a full piece of code and figuring out what is where and doing what), I take it.

Many thanks,

Gianni

On Sunday, 20 May 2018 02:30:16 UTC+2, Jason Grout wrote:

There is the widget cookiecutter templates to generate a package containing a simple custom widget that works in both notebook and lab:

https://github.com/jupyter-widgets/widget-ts-cookiecutter

You're right that the custom widget in the docs does not work in JupyterLab. I think it probably makes sense to maybe remove it in favor of using something like the cookiecutter.

Thanks,

Jason

On Saturday, May 19, 2018 at 8:43:26 AM UTC-7, John wrote:

Is there a version of "Hello World" custom widget example for jupyterlab. The jupyter notebook documentation provides this "Hello World" custom widget but it uses requirejs which is not supported by jupyterlab.

http://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html

Is there any documentation on how to get a custom widget for jupyter notebook such as this "Hello World" example to work in jupyterlab.

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/c5a2dc5c-1e19-446c-af8a-84b37ac8327d%40googlegroups.com.

[Gianni C.]

You are right Hai !
It was a nice PEBCAK on my side, after starting with a clean and correctly setup environment (instead of randomly install things on top of something else) things start working.
Time to dive into widgets development and see what I manage to do.
Thanks :)

Gianni

[Jason Grout]

FYI, we just realized a few seconds ago in a totally unrelated conversation that in order for that cookiecutter to work in JLab 1.0, https://github.com/jupyter-widgets/widget-cookiecutter/blob/master/%7B%7Bcookiecutter.github_project_name%7D%7D/js/package.json#L34 needs to be changed to version range `^1 || ^2`.

Someone is making a PR momentarily, but thought I'd flag it in case you jumped right in before the change went in.

Jason

--

You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/d98e2779-c965-4f15-b1bf-7ca0372bff7f%40googlegroups.com.

[Aaron Watters]

Here is a basic test using the cookiecutter.  I used it to verify a patch I made to the cookiecutter.

https://github.com/AaronWatters/widget_cookie_cutter_test

By the way I never build widgets from scratch anymore.  Instead I build proxy widgets.

Here is the hello world for proxy widgets:

https://github.com/AaronWatters/jp_proxy_widget/blob/master/notebooks/hello%20proxy%20world.ipynb

I sometimes build several proxy widget implementations using several underlying javascript

libraries in a day.

The most sophisticated example of proxy widgets is the jp_doodle graphics library

which implements HTML canvas for Jupyter on steriods.

https://github.com/AaronWatters/jp_doodle

FYI,

   -- Aaron Watters