Description

When loading a webapp with jupyter-react, a bunch of errors appear in the console saying that ReactDOM.render is no longer supported in React 18. Use createRoot instead.. This is due to the fact that JupyterLab does not yet support React 18, so this is currently an upstream bug.

Reproduce

The error can be recreated using this example repo: https://github.com/peytondmurray/jupyter-react-cra-example/tree/ad483c21d1b016ec37ce777d9b71ff1d6fbea40c. After starting the frontend and jupyter server, the error will appear on first page load.

Expected behavior

The example above loads without errors.

Context

• Datalayer version: 0.0.22
• Operating System and version: Linux 5.19.13-arch1-1 x86_64
• Browser and version: Firefox 105.0.2

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
LuminoNotebook@http://localhost:3000/static/js/bundle.js:11868:7
div
O@http://localhost:3000/static/js/bundle.js:303820:6
div
O@http://localhost:3000/static/js/bundle.js:303820:6
withEmotionCache/<@http://localhost:3000/static/js/bundle.js:15108:66
div
Notebook@http://localhost:3000/static/js/bundle.js:6924:74
NotebookKernelChange@http://localhost:3000/static/js/bundle.js:5034:75
Provider@http://localhost:3000/static/js/bundle.js:277203:15
JupyterContextProvider@http://localhost:3000/static/js/bundle.js:10914:7
div
O@http://localhost:3000/static/js/bundle.js:303820:6
BaseStyles@http://localhost:3000/static/js/bundle.js:169613:7
Ge@http://localhost:3000/static/js/bundle.js:303731:60
ThemeProvider@http://localhost:3000/static/js/bundle.js:171061:7
ErrorBoundary@http://localhost:3000/static/js/bundle.js:274801:37
Jupyter@http://localhost:3000/static/js/bundle.js:10651:7
App 12 [react-dom.development.js:84](http://localhost:3000/home/pdmurray/Desktop/workspace/jupyter-react-cra-example/node_modules/react-dom/cjs/react-dom.development.js)
    React 3
    renderDOM vdom.js:69
    renderDOM vdom.js:62
    onUpdateRequest vdom.js:34
    processMessage index.es6.js:1443
    invokeHandler index.es6.js:453
    sendMessage index.es6.js:149
    onAfterAttach vdom.js:43
    processMessage index.es6.js:1485
    invokeHandler index.es6.js:453
    sendMessage index.es6.js:149
    onAfterAttach index.es6.js:2298
    processParentMessage index.es6.js:2183
    notifyLayout index.es6.js:1539
    processMessage index.es6.js:1484
    invokeHandler index.es6.js:453
    sendMessage index.es6.js:149
    onAfterAttach index.es6.js:2298
    processParentMessage index.es6.js:2183
    notifyLayout index.es6.js:1539
    processMessage index.es6.js:1484
    invokeHandler index.es6.js:453
    sendMessage index.es6.js:149
    onAfterAttach index.es6.js:2298
    processParentMessage index.es6.js:2183
    notifyLayout index.es6.js:1539
    processMessage index.es6.js:1484
    invokeHandler index.es6.js:453
    sendMessage index.es6.js:149
    attach index.es6.js:1945
    LuminoNotebook LuminoNotebook.js:15
    React 13
    renderDOM vdom.js:69
    renderDOM vdom.js:62
    onUpdateRequest vdom.js:34
    processMessage index.es6.js:1443
    invokeHandler index.es6.js:453
    sendMessage index.es6.js:149
    runMessageLoop index.es6.js:516
    (Async: FrameRequestCallback)
    enqueueMessage index.es6.js:477
    postMessage index.es6.js:208
    fit index.es6.js:1276
    set spacing index.es6.js:5264
    set spacing index.es6.js:5829
    NotebookAdapter NotebookAdapter.js:56
    Notebook Notebook.js:48
    React 8
    workLoop scheduler.development.js:260
    flushWork scheduler.development.js:234
    performWorkUntilDeadline scheduler.development.js:518
    (Async: EventHandlerNonNull)
    js scheduler.development.js:557
    js scheduler.development.js:614
    factory react refresh:6
    Webpack 24

This aims to create some content to be submitter as a JEP (Jupyter Enhancement Proposal) related to the usage of React.js in the Jupyter ecosystem.

The work preparation is being done in https://github.com/datalayer/jupyter-react/tree/jep/jep

Context:

• Jupyter for React.js developers https://fosdem.org/2022/schedule/event/lt_jupyter by @echarles
• Component library for building web interfaces in Jupyter ecosystem (JupyterHub, Jupyter Widgets, JupyterLab,...) https://github.com/jupyterlab-contrib/jupyter-ui-toolkit by @fcollonval

A simple HTML should be able to use a bundled javascript and show a notebook or a cell based on the information it contains under e.g. an div with an id.

Hi all!

I would like to integrate this project in a plain javascript react application, is it possible? Or is it just working on Typescript?

I'm getting this errors and I do not know the reason of it.

`ERROR in ./node_modules/@jupyter-widgets/html-manager/node_modules/@jupyterlab/codemirror/lib/mode.js 36:8-38:10
Module not found: Error: Package path ./mode is not exported from package /Projects/my-jupyter/node_modules/codemirror (see exports field in /Projects/my-jupyter/node_modules/codemirror/package.json)

ERROR in ./node_modules/@jupyter-widgets/jupyterlab-manager/node_modules/@jupyterlab/codemirror/lib/mode.js 36:8-38:10
Module not found: Error: Package path ./mode is not exported from package /Projects/my-jupyter/node_modules/codemirror (see exports field in /Projects/my-jupyter/node_modules/codemirror/package.json)

ERROR in ./node_modules/@jupyterlab/logconsole/node_modules/@jupyterlab/codemirror/lib/mode.js 36:8-38:10
Module not found: Error: Package path ./mode is not exported from package /Projects/my-jupyter/node_modules/codemirror (see exports field in /Projects/my-jupyter/node_modules/codemirror/package.json)
`

When trying the create-react-app it looks like the code imported is not the same as what's in master, e.g. I get errors like:

ERROR in ./node_modules/@datalayer/jupyter-react/lib/components/console/ConsoleAdapter.js 25:26-71
export 'editorServices' (imported as 'editorServices') was not found in '@jupyterlab/codemirror' (possible exports: CodeMirrorEditor, CodeMirrorEditorFactory, CodeMirrorMimeTypeService, CodeMirrorSearchHighlighter, EditorExtensionRegistry, EditorLanguageRegistry, EditorSearchProvider, EditorThemeRegistry, ExtensionsHandler, IEditorExtensionRegistry, IEditorLanguageRegistry, IEditorThemeRegistry, StateCommands, YRange, YSyncConfig, customTheme, jupyterEditorTheme, jupyterHighlightStyle, jupyterTheme, rulers, ySync, ySyncAnnotation, ySyncFacet, ybinding)

The imported 0.2.2 code has

import { editorServices } from '@jupyterlab/codemirror';

while the code in master has

import { CodeMirrorEditorFactory, CodeMirrorMimeTypeService, EditorLanguageRegistry, EditorExtensionRegistry, ybinding } from '@jupyterlab/codemirror';

The example should land in https://github.com/datalayer/jupyter-ui/tree/main/examples/next-js as a client side rendering to show a cell on a page, and a notebook on another (with a jupyter server running aside).

Description

When loading a webapp that uses jupyter-react, a bunch of errors appear in the console saying that there are invalid hook calls:

Reproduce

A working example of this can be found here: https://github.com/peytondmurray/jupyter-react-cra-example/tree/ad483c21d1b016ec37ce777d9b71ff1d6fbea40c. Run the frontend and the jupyter server, then check the console for these errors - they will appear when the page first renders.

Expected behavior

The webapp loads without errors.

Context

• Datalayer version: 0.0.22
• Operating System and version: Linux 5.19.13-arch1-1 x86_64
• Browser and version: Firefox 105.0.2

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. [react.development.js:198](http://localhost:3000/home/pdmurray/Desktop/workspace/jupyter-react-cra-example/node_modules/react/cjs/react.development.js)
    React 4
    Pe styled-components.browser.esm.js:571
    Ye styled-components.browser.esm.js:740
    s styled-components.browser.esm.js:768
    js ProgressBar.js:18
    factory react refresh:6
    Webpack 19

• https://jupyter-ui.datalayer.tech/docs/examples/cra/#strict-mode
• #47 (comment)

A bit like nbviewer, with options to show components on the side of each cell based on the cell metadata.

Hey,

This is a great project!
However, it seems rather tedious to setup from source. Is there a plan to have a guide to setup the jupyter lab server with extensions as a simple docker image?

E.g. having a simple deployment guide additionally to the develop examples from source code.

That could be very helpful and likely could boost adaptation.

Since jupyterlab/jupyterlab#11971, the notebook's rendermime needs a markdownParser.

Description

Yarn build gives typescript errors from @jupyterlab/completer, FileBrowserAdapter, NotebookAdapter, ConsoleAdapter. I have followed the same steps given in the Readme file and am still stuck on the build.

Reproduce

Followed steps from Contribute section from Readme file

Is there any specific process to be followed other than the given steps to generate a build?

Context

• Datalayer version: Latest from the Main branch
• Operating System and version: MacOS 12.3
• Browser and version: Microsoft Edge - Version 99.0.1150.46

yarn run v1.22.5
$ gulp resources-to-lib && tsc && webpack
[10:49:49] Using gulpfile ~/Projects/jupyter-react/gulpfile.js
[10:49:49] Starting 'resources-to-lib'...
[10:49:49] Finished 'resources-to-lib' after 10 ms
node_modules/@jupyterlab/completer/lib/widget.d.ts:56:9 - error TS2380: 'get' and 'set' accessor must have the same type.
56     set showDocsPanel(showDoc: boolean | null);

~~~~~~~~~~~~~
node_modules/@jupyterlab/completer/lib/widget.d.ts:57:9 - error TS2380: 'get' and 'set' accessor must have the same type.
57     get showDocsPanel(): boolean;

~~~~~~~~~~~~~
src/components/console/ConsoleAdapter.ts:37:9 - error TS2322: Type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/services/lib/manager").ServiceManager.IManager' is not assignable to type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/translation/node_modules/@jupyterlab/services/lib/manager").ServiceManager.IManager'.

Types of property 'builder' are incompatible.

Type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/services/lib/builder/index").Builder.IManager' is not assignable to type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/translation/node_modules/@jupyterlab/services/lib/builder/index").Builder.IManager'.
37         manager: serviceManager,

~~~~~~~
node_modules/@jupyterlab/console/lib/panel.d.ts:75:9

75         manager: ServiceManager.IManager;

~~~~~~~

The expected type comes from property 'manager' which is declared here on type 'IOptions'
src/components/filebrowser/FileBrowserAdapter.ts:63:9 - error TS2322: Type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/services/lib/manager").ServiceManager.IManager' is not assignable to type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/translation/node_modules/@jupyterlab/services/lib/manager").ServiceManager.IManager'.
63         manager,

~~~~~~~
node_modules/@jupyterlab/docmanager/lib/manager.d.ts:277:9

277         manager: ServiceManager.IManager;

~~~~~~~

The expected type comes from property 'manager' which is declared here on type 'IOptions'
src/components/notebook/NotebookAdapter.ts:129:7 - error TS2322: Type 'ServiceManager' is not assignable to type 'IManager'.

Types of property 'builder' are incompatible.

Type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/services/lib/builder/index").Builder.IManager' is not assignable to type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/translation/node_modules/@jupyterlab/services/lib/builder/index").Builder.IManager'.

Types have separate declarations of a private property '_url'.
129       manager: this.serviceManager,

~~~~~~~
node_modules/@jupyterlab/docregistry/lib/context.d.ts:254:9

254         manager: ServiceManager.IManager;

~~~~~~~

The expected type comes from property 'manager' which is declared here on type 'IOptions'
src/ipywidgets/IPyWidgetsJupyterLabPlugin.ts:83:43 - error TS2345: Argument of type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/rendermime/lib/tokens").IRenderMimeRegistry' is not assignable to parameter of type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyter-widgets/html-manager/node_modules/@jupyterlab/rendermime/lib/tokens").IRenderMimeRegistry'.

The types returned by 'createModel(...)' are incompatible between these types.

Type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyterlab/rendermime/lib/mimemodel").MimeModel' is not assignable to type 'import("/Users/user1/Projects/jupyter-react/node_modules/@jupyter-widgets/html-manager/node_modules/@jupyterlab/rendermime/lib/mimemodel").MimeModel'.

Types have separate declarations of a private property '_callback'.
83     wManager = new WidgetManager(context, rendermime, SETTINGS);

~~~~~~~~~~
Found 6 errors.
error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Description

Hello! I'm trying to use the <Notebook> element provided by the library, but unfortunately it throws an error in the console and nothing is rendered? The console shows this:

Reproduce

Note: Assume my python environment is active and that the python dependencies are already installed. You may also assume that ping.ipynb exists in the directory specified.

1. I created an evergreen project using:

   yarn create create-react-app --template typescript

2. I then added the list of resolutions found in your docs here: https://jupyter-ui.datalayer.tech/docs/examples/create-react-app/, and tweaked it slightly to resolve some modules to a stable version. This was purely for convenience; the error still persisted with the suggested resolutions.

     {
       "**/@types/react": "18.0.27",
       "**/@types/react-dom": "18.0.10",
       "**/react": "18.2.0",
       "**/react-dom": "18.2.0",
       "**/@jupyter-widgets/base": "6.0.2",
       "**/@jupyter-widgets/controls": "5.0.2",
       "**/@jupyter-widgets/html-manager": "1.0.4",
       "**/@jupyter-widgets/jupyterlab-manager": "5.0.4",
       "**/@jupyter-widgets/output": "6.0.2",
       "**/@jupyterlab/application": "4.0.0-alpha.18",
       "**/@jupyterlab/apputils": "4.0.0-alpha.18",
       "**/@jupyterlab/attachments": "4.0.0-alpha.18",
       "**/@jupyterlab/cells": "4.0.0-alpha.18",
       "**/@jupyterlab/codeeditor": "4.0.0-alpha.18",
       "**/@jupyterlab/codemirror": "4.0.0-alpha.18",
       "**/@jupyterlab/collaboration": "4.0.0-alpha.18",
       "**/@jupyterlab/completer": "4.0.0-alpha.18",
       "**/@jupyterlab/console": "4.0.0-alpha.18",
       "**/@jupyterlab/coreutils": "6.0.0-alpha.18",
       "**/@jupyterlab/docmanager": "4.0.0-alpha.18",
       "**/@jupyterlab/docprovider": "4.0.0-alpha.18",
       "**/@jupyterlab/docregistry": "4.0.0-alpha.18",
       "**/@jupyterlab/documentsearch": "4.0.0-alpha.18",
       "**/@jupyterlab/filebrowser": "4.0.0-alpha.18",
       "**/@jupyterlab/fileeditor": "4.0.0-alpha.18",
       "**/@jupyterlab/inspector": "4.0.0-alpha.18",
       "**/@jupyterlab/javascript-extension": "4.0.0-alpha.18",
       "**/@jupyterlab/json-extension": "4.0.0-alpha.18",
       "**/@jupyterlab/launcher": "4.0.0-alpha.18",
       "**/@jupyterlab/lsp": "4.0.0-alpha.18",
       "**/@jupyterlab/mainmenu": "4.0.0-alpha.18",
       "**/@jupyterlab/markdownviewer": "4.0.0-alpha.18",
       "**/@jupyterlab/markedparser-extension": "4.0.0-alpha.18",
       "**/@jupyterlab/mathjax2": "4.0.0-alpha.18",
       "**/@jupyterlab/nbconvert-css": "4.0.0-alpha.18",
       "**/@jupyterlab/nbformat": "4.0.0-alpha.18",
       "**/@jupyterlab/notebook": "4.0.0-alpha.18",
       "**/@jupyterlab/observables": "5.0.0-alpha.18",
       "**/@jupyterlab/outputarea": "4.0.0-alpha.18",
       "**/@jupyterlab/rendermime": "4.0.0-alpha.18",
       "**/@jupyterlab/rendermime-extension": "4.0.0-alpha.18",
       "**/@jupyterlab/rendermime-interfaces": "3.8.0-alpha.18",
       "**/@jupyterlab/services": "7.0.0-alpha.18",
       "**/@jupyterlab/settingregistry": "4.0.0-alpha.18",
       "**/@jupyter/ydoc": "1.0.0",
       "**/@jupyterlab/statedb": "4.0.0-alpha.18",
       "**/@jupyterlab/terminal": "4.0.0-alpha.18",
       "**/@jupyterlab/theme-dark-extension": "4.0.0-alpha.18",
       "**/@jupyterlab/theme-light-extension": "4.0.0-alpha.18",
       "**/@jupyterlab/translation": "4.0.0-alpha.18",
       "**/@jupyterlab/ui-components": "4.0.0-alpha.33",
       "**/@lumino/default-theme": "1.0.0-alpha.6",
       "**/@lumino/algorithm": "2.0.0",
       "**/@lumino/application": "2.0.0",
       "**/@lumino/collections": "2.0.0",
       "**/@lumino/commands": "2.0.0",
       "**/@lumino/coreutils": "2.0.0",
       "**/@lumino/disposable": "2.0.0",
       "**/@lumino/domutils": "2.0.0",
       "**/@lumino/dragdrop": "2.0.0",
       "**/@lumino/keyboard": "2.0.0",
       "**/@lumino/messaging": "2.0.0",
       "**/@lumino/polling": "2.0.0",
       "**/@lumino/properties": "2.0.0",
       "**/@lumino/signaling": "2.0.0",
       "**/@lumino/virtualdom": "2.0.0",
       "**/@lumino/widgets": "2.0.0"
       }

3. I appended the following to the public/index.html file, as suggested in the docs, and here

   <script id="datalayer-config-data" type="application/json">
     {
       "jupyterServerHttpUrl": "http://localhost:8686/api/jupyter",
       "jupyterServerWsUrl": "ws://localhost:8686/api/jupyter",
       "jupyterToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
     }
   </script>

4. I installed your package

   yarn add @datalayer/[email protected] --exact --peer

5. I created a new Jupyter server config file from the example here, and tweaked this line (it loads the notebooks from the ./notebooks directory in my project)

   content_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)),'notebooks')

6. In a separate terminal I ran the following command using the created config file from the previous step

   jupyter server --config=.\jupyter_server_config.py

7. Once Jupyter server was running, I started the react dev server with the following command

   yarn start

8. Inside App.tsx, I deleted all the boiler plate and imported the library, e.g.

   import { Notebook } from "@datalayer/jupyter-react";
   ...
   
   <Notebook path="ping.ipynb" />

9. The component throws an error.

Expected behavior

A nice, wonderful notebook rendered. ✨🚀

Context

• Datalayer version: 0.2.2
• Operating System and version: Win 11
• Browser and version: Edge (Chromium based) 112.0.1722.48

Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
Uncaught (in promise) Error: Disposed

at SessionContext.changeKernel (sessioncontext.js:333:1)

at NotebookAdapter.js:239:1

python = "^3.10"
build = "^0.10.0"
hatch = "^1.7.0"
jupyterlab = "4.0.0b0"

{
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-syntax-flow": "^7.21.4",
    "@babel/plugin-transform-react-jsx": "^7.14.9",
    "@datalayer/jupyter-react": "0.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "reactflow": "^11.7.0",
    "web-vitals": "^2.1.4"
  }

Happy to provide more information. Thanks!

Description

The moment notebooks are opened they connect with server via kernls and session APIs.
As you can see in the picture below.

But the moment these files are closed. The session API is still there. That means the connection isn't closed.

Reproduce

1. I had opened files in simple ANT Design panes.
2. Click on the file to open.
3. Close the file.
4. Notice the network section.

Expected behavior

The connection should be properly closed.
Introduce connection close function so that others can use them according to their context.

As initial step, we could add Mobx and/or Zustand to Redux instead of removing completely Redux. See also this comment by @@MukkundB

Important criteria is the ease of integration with Rx.js (very useful and sometimes needed for JupyterLab cases) and Y.js.

Nowadays Zustand seems to have more contribution and downloads.

Mobx

Zustand

Description

Rendering a notebook in a create-react-app fails, with errors related to themes and invalid hook calls. Looks like this may have been solved in #21, but I'm using a newer version of jupyter-react.

Reproduce

Here's a minimal working example: https://github.com/peytondmurray/jupyter-react-cra-example

1. yarn create react-app testapp --template typescript
2. Removed some of the CRA assets: manifest.json and the svg logos. Add a test.ipynb.
3. Insert a Jupyter component with a Notebook component inside. Start a jupyter server and copy the token into the component.
4. There are a few missing packages at this point, so install them now: yarn add @emotion/react @emotion/styled @mui/styled
5. yarn start; the server will start up without an issue, but the page doesn't render. There are a few separate errors here:

• Invalid hook call

• Theme-related errors:

The same errors appear whether I wrap the Jupyter component in a ThemeProvider component or not.

Expected behavior

The notebook should render.

Context

• Datalayer version: 0.0.14
• Operating System and version: Linux 5.19.7
• Browser and version: Version 105.0.5195.102 (Official Build) Arch Linux (64-bit)

Description

While running the example/create-react-app I am getting an error "Cannot find module '@datalayer/jupyter-react' or its corresponding type declarations"
I followed the steps as mentioned in the Readme file.

Reproduce

1. Clone jupyter-react
2. Change directory to example/create-react-app
3. Follow the readme steps
4. yarn start

https://pyscript.net

Description

Hi, I just cloned the project for a test and and im facing some errors with @jupyterlab and @jupyter-widgets node modules

Here is what I got as a result of the a npm run start
Thank you!

Failed to compile.
Module not found: Error: Package path ./mode is not exported from package /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror (see exports field in /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror/package.json)

ERROR in ./node_modules/@jupyter-widgets/html-manager/node_modules/@jupyterlab/codemirror/lib/mode.js 36:8-38:10

Module not found: Error: Package path ./mode is not exported from package /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror (see exports field in /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror/package.json)
ERROR in ./node_modules/@jupyter-widgets/jupyterlab-manager/node_modules/@jupyterlab/codemirror/lib/mode.js 36:8-38:10

Module not found: Error: Package path ./mode is not exported from package /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror (see exports field in /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror/package.json)
ERROR in ./node_modules/@jupyterlab/apputils/lib/kernelstatuses.js 62:18-33

export 'interactiveItem' (imported as 'interactiveItem') was not found in '@jupyterlab/statusbar' (possible exports: GroupItem, IStatusBar, Popup, ProgressBar, ProgressCircle, StatusBar, TextItem, showPopup)
ERROR in ./node_modules/@jupyterlab/apputils/lib/runningSessions.js 54:18-33

export 'interactiveItem' (imported as 'interactiveItem') was not found in '@jupyterlab/statusbar' (possible exports: GroupItem, IStatusBar, Popup, ProgressBar, ProgressCircle, StatusBar, TextItem, showPopup)
ERROR in ./node_modules/@jupyterlab/codemirror/lib/syntaxstatus.js 71:18-33

export 'interactiveItem' (imported as 'interactiveItem') was not found in '@jupyterlab/statusbar' (possible exports: GroupItem, IStatusBar, Popup, ProgressBar, ProgressCircle, StatusBar, TextItem, showPopup)
ERROR in ./node_modules/@jupyterlab/fileeditor/lib/tabspacestatus.js 32:18-33

export 'interactiveItem' (imported as 'interactiveItem') was not found in '@jupyterlab/statusbar' (possible exports: GroupItem, IStatusBar, Popup, ProgressBar, ProgressCircle, StatusBar, TextItem, showPopup)
ERROR in ./node_modules/@jupyterlab/fileeditor/lib/tabspacestatus.js 65:21-32

export 'clickedItem' (imported as 'clickedItem') was not found in '@jupyterlab/statusbar' (possible exports: GroupItem, IStatusBar, Popup, ProgressBar, ProgressCircle, StatusBar, TextItem, showPopup)
ERROR in ./node_modules/@jupyterlab/logconsole/node_modules/@jupyterlab/codemirror/lib/mode.js 36:8-38:10

Module not found: Error: Package path ./mode is not exported from package /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror (see exports field in /home/ghost/jupyter-react/examples/create-react-app/node_modules/codemirror/package.json)
ERROR in ./node_modules/@jupyterlab/notebook/lib/executionindicator.js 85:18-33

export 'interactiveItem' (imported as 'interactiveItem') was not found in '@jupyterlab/statusbar' (possible exports: GroupItem, IStatusBar, Popup, ProgressBar, ProgressCircle, StatusBar, TextItem, showPopup)
webpack compiled with 9 errors

ERROR in src/examples/notebook/CellSidebarComponent.tsx:20:34

TS2352: Conversion of type 'Layout | null | undefined' to type 'PanelLayout' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

Type 'Layout' is missing the following properties from type 'PanelLayout': widgets, iter, addWidget, insertWidget, and 5 more.

18 |   const layout = notebook?.activeCell?.layout;

19 |   if (layout) {

20 |     const selectedCellSidebar = (notebook?.activeCell?.layout as PanelLayout).widgets[0];

|                                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

21 |     if (!visible && (selectedCellSidebar.id === props.cellId)) {

22 |       setVisible(true);

23 |     }

First off, thanks for making the React & Docusaurus integration!

Problem

I would like to natively integrate Jupyter notebooks with Docusaurus. However, as a notebook writer, I'm not capable of writing React.

Proposed Solution

My ideal workflow would be:

1. Create the notebook in an easy format, e.g., via jupytext Markdown
2. Place the notebook in some directory in a github repo
3. Trigger jupyter-react to do its magic to compile the notebook into an internal representation

Additional context

Ultimately, the React layer is an implementation detail from a user's perspective. I don't want to see or write it, even if it's awesome :-). It's at the other end of the spectrum of the skillset of a data expert, which is why I think we need to make it easier for these people to just put a doc into a folder and then magic happens.

Description

Hello, I am trying to install your library on my project, however I am getting multiple warnings of "Failed to parse source map", and multiple errors of "Module not found: Error... ".

Also, while it somewhat compiles, the library is making a request which looks a default to 'http://localhost:3000/api/jupyter/api', even though I defined a path property on the Notebook component.

Reproduce

Expected behavior

Context

• Datalayer version: 0.0.25
• Operating System and version: macOS Monterey 12.6.2
• Browser and version: Chrome 109.0.5414
• React version: 18.2.0
• Node version: 16.16.0
• Npm version: 8.11.0

Paste the output from your browser Javascript console here.

Problem

I tried to use the Notebook component of Jupyter-react. But using it as mentioned in the documentation resulted in just plain white screen.

This is the way I am using it.

Can someone please guide me to the correct usage ?

Description

With [email protected], an error is generated upon loading an app:

Reproduce

This issue is encountered upon starting an app with jupyter-react, it should be possible to recreate the issue by an app up and checking the developer console. A working example is available here: https://github.com/peytondmurray/jupyter-react-cra-example/tree/ad483c21d1b016ec37ce777d9b71ff1d6fbea40c. To load the example, start a jupyter server with the jupyter_server_config.py and then start the frontend with yarn start.

Expected behavior

jupyter-react successfully generates a redux store without error.

Description

I am using Jupyter-React Notebook as a component to render multiple notebooks in different panes (Simple ANT DESIGN PANE/WINDOW).
But if multiple notebooks are brought into exitence multiple sidebar buttons are attached for each cell.

My simple component

The way it looks. Here each cell got two set of sidebar buttons.
If I open 'x' notebooks in different pan. I am getting 'x' different set of sidebar buttons.

Here is the DOM (dla-CellHeader-Container)

I suggest that whenever side buttons are brought into existence. It must be checked that if the buttons are already in existence for that cell or not. And only after that a new set of sidebar buttons should be attested.

Looking forward for your guidance.

JupyterLab 4.0.0 final has just been released https://pypi.org/project/jupyterlab/4.0.0

We need to upgrade to that final 4 version.

Problem

The JupyterContextType contains an injectableStore entry, which is the redux store for the jupyter-react. The type of injectableStore is currently any, which bypasses static type checking and triggers errors when linted with tslint:

• @typescript-eslint/no-unsafe-assignment: If you use object destructuring on the useJupyter hook to access injectableStore
• @typescript-eslint/no-unsafe-member-access: If you try to call injectableStore.dispatch()
• @typescript-eslint/no-unsafe-call: If you try to call injectableStore.dispatch()

Proposed Solution

• Add a type to the injectableStore. In Store.ts, could we have

export type AppStore = typeof injectableStore;

?

Currently v0.0.10 is present here.
https://www.npmjs.com/package/@datalayer/jupyter-react

Please update it to the latest 0.0.11.

I am checking if the Jupyter-react can be implemented on a project I'm working for code-editors and found this repository. But for using this package the jupyter-docusaurus seems to be missing. Either It would've been removed or it was now made a private repo.

Could you please check and update the documentation.

Thank you,
Saikiran Belana

Hi, I am trying to implement a React application which includes the Jupyter notebook.
I would like to implement a Toolbar with a Run all and Stop button, like in the examples given. (https://github.com/datalayer/jupyter-ui/blob/main/examples/cra/src/examples/notebook/NotebookToolbar.tsx)

My issue is that if I check the variable notebook.kernelStatus this is not updated automatically when it changes.

So my question is: Is there a listener to this variable?

Many thanks

Description

I have created a react app (using create-react-app) and trying to integrate python terminal using @datalayer/jupyter-react package getting below issues.

I have followed the steps below for JavaScript and Typescript. Can you please help anything wrong here?

• created a react app using create-react-app yarn package.
• added packages react-redux, redux and @datalayer/jupyter-react
• Started **Jupyter lab with port **(ex:8686) using dev/config/jupyter_server_config.py file - jupyter-lab --config=dev/config/jupyter_server_config.py
• added below code in index.html page.

  <script id="datalayer-config-data" type="application/json">
      {
        "jupyterServerHttpUrl": "http://localhost:8686//api/jupyter",
        "jupyterServerWsUrl": "ws://localhost:8686//api/jupyter",
        "jupyterToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
      }
    </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>

• added below code in App.js to render Jupyter Cell in DOM as show in bellow

 <Jupyter terminals={false} collaborative={false}>
  <CellExample />
</Jupyter>

          OR

<Jupyter terminals={true} collaborative={true}>
  <CellExample />
</Jupyter>

CellExample implemented the same as given examples in repo.

UI Screen Error:

Errors in Console:

Thanks!

Hi, is it possible to render custom widgets in react app?

I clone this repo and try to run create-react-app example. When I start the server then I throw the error called module not found of codemirror.
I had clone twice and thrice to fix this issue. But does not resolve yet.
Can you try it on your machine. Let me know If is working on your machine.
Thank you!

Pyodide kernels are supported by the Console component. Notebook, Cell and Output components should also support that.

Description

Cells which produce long output can get obscured if they extend beyond the parent element. Even if I set overflow-y: auto on the div which encloses the <Notebook>, no scrollbar appears:

Reproduce

1. Generate long output:

for i in range(100):
    print(f'line {i}')

The cell output extends beyond the enclosing div, and no scroll is available to view it. Using the arrow keys to navigate to the next cell still works, and scrolls the window.

Expected behavior

As in JupyterLab, I'd expect the window to scroll down so that the next cell is in view. If the notebook is taller than the parent enclosing div, a scrollbar should appear.

Context

• Datalayer version: 0.0.17
• Operating System and version: Linux 5.19.12-arch1-1 x86_64
• Browser and version: Firefox 105.0.1 (64-bit)

Jupyter React relies on the standard JupyterLab services to communicate with the kernels. For now, it expects a Jupyter server https://github.com/jupyter-server/jupyter_server to be up-and-running. to serve the content and reply to code execution.

JupyterLite provides a full browser experience pushed by @jtpio and @bollwyvl, see architecture on https://jupyterlite.readthedocs.io/en/latest/architecture.html.

I would be great to add an option to the React Jupyter Context so the JupyterLite solution (in-browser server and kernel) is reused.

cc/ @tonyfast

Hi, what's the status of using Traitlets React with python, any progress?

Description

While working on Notebook, pressing the save button doesn't write/save the changes made to the Notebook.
The Save Action present in the package is just tracking the changes but not writing them to the Notebook.

Reproduce

1. Open any Notebook with NotebookSidebarExample component.
2. Make some changes and press save button.
3. An redux action is dispatched with "notebookActions.save" action
4. It writes to the store but doesn't write to the Jupyter server where the file is present.

Expected behavior

The "notebookActions.save" action should save the changes to the Jupyter Server.
Maybe we can integrate the Jupyter APIs to save the file ,create one etc
https://jupyter-server.readthedocs.io/en/latest/developers/rest-api.html

Problem

Bring LSP to the Notebook