Brainstorming for a more detailed extension development tutorial

JupyterLab
1

Hello,
I am asking for input about what you’d like to see covered in a tutorial about jupyterlab extension development.

https://jupyterlab.readthedocs.io/en/stable/developer/extension_tutorial.html is great to get started, but after studying it, me personally, I am stuck with every step that goes beyond opening a widget.

My plan is to build something along the lines of https://reactjs.org/tutorial/tutorial.html that shows the main concepts and patterns to use with this framework. Just a few keywords, which I’d like to document for myself and everybody else: toolbars, drag&drop, custom events, modal dialogs, phosphorjs, build process, …

What are the topics that you are struggling with during jupyterlab extension development?

Once I have sufficient input, proving that others than myself are interested in such a tutorial, I’ll setup a scaffold of some more-or-less useful extension that should finally demonstrate solutions to many of our collected problems. If you already have such a demonstration project, please let me know, and we could collaborate, or maybe you have already achieved more than what I plan?

4 Likes
2

The biggest frustration I’ve had is not being able to browse the JupyterLab “object model”. In Jupyter Notebooks you can open your browser’s JavaScript console, dig through the live notebook object, figure out what properties and methods exist, and develop your extension based on what you’ve found.

I’ll not aware of how to do that in JupyterLab, which means I can only manipulate what I already know about, I can’t interactively browse and figure things out.

Sorry if this doesn’t actually answer your question :grinning:

3 Likes
3

I think that something like this is would be a huge help to the community of potential developers in JupyterLab.

For me, identifying a few key things that one might want to do with an extension (e.g. open a window and display some JS viz, run code in the background and display a result, trigger a download, etc), and providing separate walkthrough tutorials for each one would be quite helpful.

And as others have noted - a tutorial that’s explicitly aimed at helping people understand the underlying model of JupyterLab would be great.

3 Likes
4

I would really like to understand how you can create an extension that allows interacting with a running kernel.

It seems like a very basic functionality to be able to interact with a running kernel in order to create either basic live monitors or widgets like iPywidgets for the classic notebook interface.

I’ve asked a question about it before How to create a jupyter-lab extension that interacts with a running kernel but either I am missing something obvious or it is not really clear where this is documented.

1 Like
5

For this an IDE with good TypeScript support helps:

image
image949×341 40.5 KB

Another thing that helps is placing breakpoints in the browser dev tools and then use the console to inspect objects:

image

Although that requires knowing which file to open.

1 Like
6

That repository can bring some information:


Unfortunately it isn’t up-to-date with Jupyterlab latest version.

2 Likes
7

Dear all,
thank you very much for your input.

@manics, I think your point is one of the most important issues. It is absolutely necessary to browse JupyterLab objects at runtime in order to learn what is going on as long as the documentation lags behind development of new features. jtp’s reminder of typescript interpreters in the IDE helps to some extent, but compile time tab completion doesn’t replace runtime inspection.

Yes, this is THE issue of JupyterLab!!

@choldgraf, these points, display js viz, background computation, async result are something I had in mind, and some of the easier topics that I’ll be able to implement and document on my own.

@AdriaanRol, interacting with a running kernel is definitely an interesting point that I’ll add. I found some links on this, and also the tutorial cited by fcollonval includes an example. What do you think about that example, what details do you think are missing there?

@fcollonval, thank you for pointing to that tutorial. I’d like to address all those topics, and the easiest way might be to start our work based on that tutorial. Unfortunately it doesn’t include a license description, so that we’ll need to redo everything except for the underlying ideas.

To all, as I said, I am a new hobby extension developer for JupyterLab, maybe with less experience than each of you. I’ll need help. Who is willing to contribute what?
In my opinion, it is most important to solve the runtime inspection of JupyterLabs objects in the debug console as pointed out by @manic. If it is already possible, someone has to document it so that manic, myself and everybody else is able to use it to speed up our developments.
I’ll first address @choldgraf’s points, because I feel competent enough to do so.

Please raise your hand if you can contribute some examples, documentation, solutions to the questions that came up above.
And please continue to describe what you’d like to find in a JuypterLab tutorial.

2 Likes
8

Unfortunately it doesn’t include a license description, so that we’ll need to redo everything except for the underlying ideas.

@2ndworld I requested the author of the jupyterlab (outdated) tutorial. He did it granting full permission to reuse the material written there: add a license · Issue #2 · MMesch/labextension_tutorial · GitHub :slight_smile:

9

Thank you for your comments. Considering all previous discussions on difficulties implementing specific tasks, these three inputs don’t reflect the apparent demand for documentation.
I tried to make clear, that I cannot complete such documentation on my own and asked for help with no reply.

So, I have eventually decided not to continue using JupyterLab, but instead work with Kendo UI for the web interface.

1 Like
10

For the record, several issues on this exists on the Jupyterlab repository. And most notably https://github.com/jupyterlab/jupyterlab/issues/7273#issuecomment-552187600 resulted in @jtpio starting a new repository to start working on such documentation (thx a lot for the initiative): https://github.com/jtpio/jupyterlab-extension-tutorial.

4 Likes
11

I’m new to typescript, so one of the parts that has slowed me down with extension development is understanding the usage of namespaces, interfaces, factories, etc.
My suggestion is to add some sections to the tutorial that discuss the usage of these (potentially unfamiliar) concepts as they relate to extension-building. Someone may fairly say “this is a JupyterLab extension tutorial, not a typescript tutorial,” but my suggestion is just to provide just some quick explanation of what angle bracket < > syntax like this means, for example:


Or namespaces/interfaces like this:

2 Likes
12

:warning: The extension examples landed on the jupyterlab GitHub group :partying_face:

6 Likes