Create a `App Demonstrator`

[echarles]

It would be great to have a React.js application that combines multiple components to create a very custom interface for data anaysis, included support of custom IPyWidgets and display of outputs at well defined places of the WEB page.

cc/ @pplonski

[pplonski]

Thank you today meeting and thank you for creating the issue. One more question, is it possible to handle python input() in jupyter-ui?

[echarles]

Thank you today meeting and thank you for creating the issue.

My pleasure

One more question, is it possible to handle python input() in jupyter-ui?

Absolutely. As Jupyter UI reuses the JupyterLab machinery, such features are supported out-of-the-box, see this notebook example.

Screencast from 14-12-23 13:27:43.webm

[pplonski]

Fantastic!

I'm trying to setup jupyter-ui locally. I run yarn install and the yarn build. Below is the output for yarn build:

yarn run v1.22.19
warning @datalayer/[email protected]: The engine "pnpm" appears to be invalid.
$ lerna run build
lerna notice cli v6.6.2
lerna info versioning independent

    ✔  @datalayer/jupyterlite-kernel:build (790ms)
    ✔  @datalayer/jupyterlite-settings:build (844ms)
    ✔  @datalayer/jupyterlite-session:build (846ms)
    ✔  @datalayer/jupyterlite-ipykernel:build (996ms)
    ✔  @datalayer/jupyter-theme:build (2s)
    ✔  @datalayer/jupyterlite-server:build (849ms)
    ✔  @datalayer/jupyterlite-server-extension:build (816ms)
    ✔  @datalayer/jupyterlite-ipykernel-extension:build (821ms)

    ✖  @datalayer/jupyter-react:build
$ gulp resources-to-lib && tsc && webpack && jlpm build:lib && jlpm build:labextension:dev
       [13:31:33] Using gulpfile ~/sandbox/jupyter-ui/packages/react/gulpfile.js
       [13:31:33] Starting 'resources-to-lib'...
       [13:31:33] Finished 'resources-to-lib' after 8.07 ms
       assets by chunk 4.88 MiB (id hint: vendors)
         asset vendors-node_modules_css-loader_dist_cjs_js_node_modules_jupyterlab_ui-components_style_base_css.jupyter-react.js 678 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_lang-cpp_dist_index_js.jupyter-react.js 265 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_lang-markdown_dist_index_js.jupyter-react.js 265 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_lang-php_dist_index_js.jupyter-react.js 264 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_localforage_dist_localforage_js-node_modules_async-mutex_index_mjs.jupyter-react.js 258 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_lang-javascript_dist_index_js.jupyter-react.js 253 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_lang-rust_dist_index_js.jupyter-react.js 190 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_jupyterlab_codemirror_node_modules_codemirror_lang-python_dist_index_js.jupyter-react.js 172 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_css-loader_dist_cjs_js_node_modules_jupyterlab_apputils_style_base_css.jupyter-react.js 140 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_lang-html_dist_index_js.jupyter-react.js 127 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_jupyterlab_notebook_style_base_css.jupyter-react.js 124 KiB [compared for emit] (id hint: vendors)
         asset vendors-node_modules_codemirror_legacy-modes_mode_sql_js.jupyter-react.js 113 KiB [compared for emit] (id hint: vendors)
         + 36 assets
       + 88 assets
       orphan modules 2.05 MiB [orphan] 752 modules
       runtime modules 9.8 KiB 21 modules
       modules by path ../../node_modules/ 9.83 MiB
         javascript modules 9.81 MiB 1392 modules
         json modules 20.7 KiB 11 modules
       modules by path ./ 48.9 KiB
         modules by path ./src/jupyter/ 29.6 KiB 10 modules
         modules by path ./src/components/cell/ 15.4 KiB 4 modules
         modules by path ./src/state/redux/*.ts 2.52 KiB 2 modules
         + 3 modules
       modules by path ../lite/ 70.6 KiB 19 modules
       source-map-js (ignored) 15 bytes [built] [code generated]
       path (ignored) 15 bytes [built] [code generated]
       url (ignored) 15 bytes [built] [code generated]
       fs (ignored) 15 bytes [built] [code generated]
       webpack 5.74.0 compiled successfully in 5896 ms
       Internal Error: @datalayer/jupyter-ui@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
           at q0.getCandidates (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:435:5145)
           at xf.getCandidates (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:391:1264)
           at /home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:439:7693
           at ff (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:390:11070)
           at ge (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:439:7673)
           at async Promise.allSettled (index 0)
           at async to (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:390:10398)
           at async /home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:439:8205
           at async ti.startProgressPromise (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:390:47579)
           at async je.resolveEverything (/home/piotr/sandbox/jupyter-ui/jv/lib/python3.11/site-packages/jupyterlab/staging/yarn.js:439:6233)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
       

 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  Lerna (powered by Nx)   Ran target build for 15 projects (22s)
 
    ✔    8/9 succeeded [0 read from cache]
 
    ✖    1/9 targets failed, including the following:
         - @datalayer/jupyter-react:build
 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Do I need to add some package to make it run? I've cloned the latest main repo.

Are you using the same UI in Datalayer service?

[echarles]

You are using Yarn V1, only V3 will work (sorry, this is a hard requirement we inherit fro jupyterlab), see https://jupyter-ui.datalayer.tech/docs/develop/setup (you may double check other requirements there).

Are you using the same UI in Datalayer service?

Yes.

[echarles]

(you'd better remove all you node_modules folders before running again "yarn install")

[pplonski]

I'm a little confused, on npm website it looks like the most recent yarn version is 1.22.21 https://www.npmjs.com/package/yarn?activeTab=versions

[echarles]

I guess they stopped publishing on npm at some point. You can go to https://yarnpkg.com and follow the installation steps on https://yarnpkg.com/getting-started/install. Looks like they have changed a lot of things since my last time... this is why we typically recommend a conda (or mamba) env as described on https://jupyter-ui.datalayer.tech/docs/develop/setup/conda

[pplonski]

Thank you @echarles! It is working! I was able to start jupyter:ui:cra.

I was trying to use ipyleaflet in the example app, but got error like in the image

[echarles]

Thank you @echarles! It is working! I was able to start jupyter:ui:cra.

Wonderfull!

I was trying to use ipyleaflet in the example app, but got error like in the image

That is a bit expected for now. The default ipywidgets should however be ok, right? There are a few things to say here:

• The Notebook component https://jupyter-ui.datalayer.tech/docs/components/notebook supports adding a list of defined bundledIPyWidgets (the one you ship with you javascript, see this example https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/Matplotlib.tsx) and externalIPyWidgets (see this example https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/IPyReact.tsx)
• The JupyteLabApp component supports the import of ipywidgets libraries as a jupyterlab plugin (see this example https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/JupyterLabApp.tsx) - That component is meant to create a full JupyterLab application based on the injection system.

Still, in all case, the server will need to have the python libraries corresponding to the javascript libraries.

I have opened https://github.com/datalayer/jupyter-ui/issues/125 to discuss and brainstorm about the case where a user needs to add its own IPyWidget while the server is already running.

In your case, the ipyleaflet would need to be installed on the server, and the Notebook component would need to be have the needed props. This is possible today.

[pplonski]

Plain ipywidgets are working perfectly.

In the JupyterLabApp I got message Loading widget ... but it is not loaded:

[echarles]

In the JupyterLabApp I got message Loading widget ... but it is not loaded:

The webapp does not contain the ipyleafet javascript package, and the server does not have the related python package.

You can use your own server as described on https://jupyter-ui.datalayer.tech/docs/deployments/jupyter-server/ where you would install the ipyleaflet package.

You also need to add the ipyleaflet javascript package in your package.json and declare that in the Notebook component as a bundledIPyWidgets, optionally, you can use the externalIPyWidgets prop with

    <Notebook
...
      externalIPyWidgets={[
        { name: "jupyter-leaflet", version: "0.18.0" },
      ]}
...
    />

[pplonski]

Thank you! Do I need to install ipyleaflet javascript package in my package.json if I would like to use externalIPyWidgets?

[echarles]

Do I need to install ipyleaflet javascript package in my package.json if I would like to use externalIPyWidgets?

No, you don't have. It is external, so the system should grab it for you.

[echarles]

Works for me.

[pplonski]

I've updated GalleryExample.tsx file: and installed ipyleaflet in the notebook, and got below error:

I'm using the default (cloud) server, let me try with some local one.

[echarles]

The default (cloud) server does not have ipyleaflet. But you can install it from a cell with ! pip install ipyleaflet and refresh your page. You should find back the same kernel (we do support kernel stickiness).

[pplonski]

Thank you, I've installed ipyleaflet from cell, but it didnt load the map widget.

I'm trying to use local server in jupyter:ui:cra, is it correct way to update App.tsx and set there server address?

after I refresh the website the app is connecting to remote kernel.

[echarles]

Using set... from the import could work (never tried). I usually prefer setting those values via the Context

<Jupyer
      "jupyterServerHttpUrl": "http://localhost:8686/api/jupyter"
      "jupyterServerWsUrl": "ws://localhost:8686/api/jupyter"
      "jupyterToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
>

Otherwise, gimme 10m, I am going to install the ipyleaflet in the cloud servers.

[echarles]

I have committed an example https://github.com/datalayer/jupyter-ui/commit/203598e0553e7ee41ce69279eb7d1d2a39bb2c89#diff-f8d4795f9b32c531789cb32c4b9c61bc1d64123b10c3d4e731179a42922702cd which works with the cloud servers (they have now ipyleaflet installed, have added also a simple ipyleaflet.ipynb notebook that can be used by the example, it was a bit longer than expected)

[pplonski]

It is working! Thank you :1st_place_medal:

Do you think, that it will be possible to automate process of adding custom ipywidgets packages? For example, user is using app created with jupyter-ui, running it locally and it would like to connect with local jupyter server. Is it possible to make packages loading automatic?

[echarles]

Do you think, that it will be possible to automate process of adding custom ipywidgets packages? For example, user is using app created with jupyter-ui, running it locally and it would like to connect with local jupyter server. Is it possible to make packages loading automatic?

Yes, I see technical options for that. I have opened https://github.com/datalayer/jupyter-ui/issues/125 to track this feature. I guess based on the discussions (you can add comments/requirements there), we will prioritize that feature. cc/ @fcollonval

[markwindsorr]

Is there currently an App Demonstrator besides the next.js and react examples? Looking to see a custom application to see more of what's possible, haven't had much luck with creating my own.

[echarles]

Is there currently an App Demonstrator besides the next.js and react examples?

We have now a Storybook https://jupyter-ui-storybook.datalayer.tech that shows the individual components. That is not an App Demonstrator, but we could add there more composite views (less granular ones).

Looking to see a custom application to see more of what's possible, haven't had much luck with creating my own.

We are prioritizing as we can the Demonstrator. One thing that would help a lot is a bunch of requirements just to ensure we work on the correct needs. No need for mockups (if you have they are for sure welcome), a list of bullet points with a short description of the requirement would already be super useful. 🙏

[markwindsorr]

Is there currently an App Demonstrator besides the next.js and react examples?

We have now a Storybook https://jupyter-ui-storybook.datalayer.tech that shows the individual components. That is not an App Demonstrator, but we could add there more composite views (less granular ones).

Looking to see a custom application to see more of what's possible, haven't had much luck with creating my own.

We are prioritizing as we can the Demonstrator. One thing that would help a lot is a bunch of requirements just to ensure we work on the correct needs. No need for mockups (if you have they are for sure welcome), a list of bullet points with a short description of the requirement would already be super useful. 🙏

Im looking to build a custom next js app that functions like the jupyter lab environment with preinstalled libraries. I have a custom extension hooked up to GPT-4 so on jupyterlab you can give it a prompt as a comment and have the code generated, so I would like to use that. Here's a list (still learning the library and trying to explore what's possible)

• A larger application demo to give a better idea on the libraries functionality, customization and what can be built.
• Custom styling. Using own colors and being able to override the default styling
• Custom extensions. Ability to add custom functionality to cells, most importantly I'd like to use my code generation extension
• Custom Cells. If I want to create a custom cell that could animate the typing of text from the code generation.
• Preinstalled packages for a notebook so the use doesn't have to pip install what they need
• Adding some content to a notebook, being able to grab the current json of the notebook, so I can store it, save and retrieve.