On storybook and locally, can't get Lite to actually run a cell.

[doelgonzo]

Description

Selecting any of these cells and pressing Shift+Enter is producing no output. Tried locally and got the same behavior (I added empty metadata objects because it was throwing an error for that in the storybook
https://jupyter-ui-storybook.datalayer.tech/?path=/story/components-notebook--lite-python

Reproduce

Navigate here:
https://jupyter-ui-storybook.datalayer.tech/?path=/story/components-notebook--lite-python

1. Select any cell
2. Press Shift+Enter
3. No output will be produced

Tried on different browsers, same result.

Expected behavior

Maybe I'm missing instructions on how to run Lite?

Context

• Datalayer version:
  "@datalayer/jupyter-react": "0.18.12",
• Operating System and version: Mac OS Sonoma 14.3
• Browser and version: Chrome 130.0.6723.117

[echarles]

Hi @doelgonzo I have opened #330 to align the storybook code base to the latest changes.

I have also redeployed that branch online. You can try again https://jupyter-ui-storybook.datalayer.tech/?path=/story/components-notebook--lite-python

Make sure you shift-reload (SHIFT-F5), pyodide sometimes cache previous code. Also, I have seen weird response sometimes from piplite (no wheel...), which I have worked around browsing with Incognito Browser (make sure to enable 3rd party cookie if you use that).

Screencast.from.11-19-2024.02.40.11.PM.webm

[echarles]

just deployed with micropip which responds better for me

import micropip
await micropip.install('ipywidgets')

[doelgonzo]

Thank you! I see it working now. I got it to run on my environment (using lite mode), but only got it working after moving away from npm to yarn. Not sure why it matters, but it seems that it matters. Also, is there a way ti know the notebook is ready for use? I see pyodide logs showing things are loaded, but not sure if we have a way to know when it's available aside from the active state of the buttons in the toolbar.

[echarles]

Also, is there a way ti know the notebook is ready for use?

You can to listen to the kernel state which are like this (look at the examples folder)

[echarles]

In #330 I have added to the NotebookLite example the KernelIndicator component.

This is the code, happy to discuss if we could extract higher level API to better expose those states

/*
 * Copyright (c) 2021-2023 Datalayer, Inc.
 *
 * MIT License
 */

import { createRoot } from 'react-dom/client';
import { useState } from 'react';
import { Session } from '@jupyterlab/services';
import { OnSessionConnection } from '../state';
import { Box, Text } from '@primer/react';
import { INotebookContent } from '@jupyterlab/nbformat';
import { JupyterReactTheme } from '../theme';
import { Notebook, KernelIndicator } from '../components';
import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';

import nbformat from './notebooks/NotebookExample1.ipynb.json';

const NotebookLite = () => {
  const [session, setSession] = useState<Session.ISessionConnection>();
  const onSessionConnection: OnSessionConnection = (session: Session.ISessionConnection | undefined) => {
    console.log('Received a Kernel Session.', session?.id, session?.kernel?.clientId);
    setSession(session);
  }
  return (
    <JupyterReactTheme>
      <Box as="h1">A Jupyter Notebook with a Lite Kernel</Box>
      <Box display="flex">
        <Box><Text>Kernel Indicator</Text></Box>
        <Box ml={3}>
          <KernelIndicator kernel={session?.kernel}/>
        </Box>
      </Box>
      <Notebook
        startDefaultKernel={true}
        lite={true}
        nbformat={nbformat as INotebookContent}
        id="notebook-lite-id"
        height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
        onSessionConnection={onSessionConnection}
        cellSidebarMargin={120}
        CellSidebar={CellSidebar}
        Toolbar={NotebookToolbar}
      />
    </JupyterReactTheme>
  )
};

const div = document.createElement('div');
document.body.appendChild(div);
const root = createRoot(div);

root.render(<NotebookLite />);

[doelgonzo]

Thanks for this. Wondering, why does the kernel run when using yarn as a package manager but not as npm my project is deployed in vercel and yarn is causing issues, so trying to understand what the divergence could be to see if i can patch it up without needing to change package managers. I can open a new issue if that would help

[echarles]

This is documented on https://jupyter-ui.datalayer.tech/docs/develop/setup/

Environment
Only Yarn V3 is supported (Yarn V1 will not work, this is due to JupyterLab requirements).

The upstream jupyterlab enforce us to use yarn. In most case, npm works fine, but sometimes not... I am pretty sure there is ways to make it 100% work with more man and brain power. That is something that would really help, especailly in the vercel/nextjs cases.

[doelgonzo]

gotcha. As for exposing these at a higher level, I would love to contribute some ideas on this, as I think a hook that returns statuses would benefit the react workflow, especially knowing status, as I want to block the Notebook until we get a connected/idle for the first time.

In any case, I have this working on a dev build, but on a production build, I get the following:

Uncaught (in promise) PythonError: Traceback (most recent call last):
  File "/lib/python312.zip/_pyodide/_base.py", line 597, in eval_code_async
    await CodeRunner(
  File "/lib/python312.zip/_pyodide/_base.py", line 413, in run_async
    await coroutine
  File "<exec>", line 3, in <module>
  File "/lib/python3.12/site-packages/piplite/piplite.py", line 117, in _install
    return await micropip.install(
           ^^^^^^^^^^^^^^^^^^^^^^^
  File "/lib/python3.12/site-packages/micropip/_commands/install.py", line 142, in install
    await transaction.gather_requirements(requirements)
  File "/lib/python3.12/site-packages/micropip/transaction.py", line 55, in gather_requirements
    await asyncio.gather(*requirement_promises)
  File "/lib/python3.12/site-packages/micropip/transaction.py", line 62, in add_requirement
    return await self.add_requirement_inner(Requirement(req))
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/lib/python3.12/site-packages/micropip/transaction.py", line 151, in add_requirement_inner
    await self._add_requirement_from_package_index(req)
  File "/lib/python3.12/site-packages/micropip/transaction.py", line 198, in _add_requirement_from_package_index
    await self.add_wheel(wheel, req.extras, specifier=str(req.specifier))
  File "/lib/python3.12/site-packages/micropip/transaction.py", line 234, in add_wheel
    await wheel.download(self.fetch_kwargs)
  File "/lib/python3.12/site-packages/micropip/wheelinfo.py", line 129, in download
    with zipfile.ZipFile(io.BytesIO(self._data)) as zf:
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/lib/python312.zip/zipfile/__init__.py", line 1339, in __init__
    self._RealGetContents()
  File "/lib/python312.zip/zipfile/__init__.py", line 1406, in _RealGetContents
    raise BadZipFile("File is not a zip file")
zipfile.BadZipFile: File is not a zip file

    at new_error (pyodide.asm.js:10:9958)
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at _PyEM_TrampolineCall_JS (pyodide.asm.js:10:123144)
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at callPyObjectKwargs (pyodide.asm.js:10:62076)
    at Module.callPyObjectMaybePromising (pyodide.asm.js:10:63254)
    at wrapper (pyodide.asm.js:10:27079)
    at Kn.e.port1.onmessage (pyodide.asm.js:10:99526)

Any idea why that would be? Note I only use the in-browser lite version. I feel like there's a configuration I'm missing because on dev builds, the save button in the toolbar crashes the app, so gut says I'm missing config.

Note my python is not fully-fluent yet, so it may be something obvious I'm missing.

[doelgonzo]

Found that it works if I change this

<Jupyter terminals startDefaultKernel>
        <Notebook
              id='notebook-lite-context-id'
              lite
              useRunningKernelIndex={-1}
              CellSidebar={CellSidebar}
              cellSidebarMargin={120}
              Toolbar={NotebookToolbar}
              nbformat={nbformat}
              onSessionConnection={onSessionConnection}
              height='calc(100vh - 200px)'
              renderers={[]}
            />

to

<Jupyter startDefaultKernel>
        <Notebook
              id='notebook-lite-context-id'
              lite
              useRunningKernelIndex={-1}
              CellSidebar={CellSidebar}
              cellSidebarMargin={120}
              Toolbar={NotebookToolbar}
              nbformat={nbformat}
              onSessionConnection={onSessionConnection}
              height='calc(100vh - 200px)'
              renderers={[]}
            />

Not sure why... but hey, it's working now.

[echarles]

Not sure why... but hey, it's working now.

lite relies on a service worker and browser caches, they drive sometimes to weird and unexpected things. Happy you it works for you now.

For the event kernel lifecycle, please open a separated issue to discuss. This has been introduced for the Output working on that with @sok82

[doelgonzo]

Seems the error is back, and seems to be exclusive to production build. Any guidance is welcome

This is my code:

<JupyterReactTheme>
        <Jupyter lite startDefaultKernel>
          <div
            className={cn(
              '[&_.jp-Notebook_.jp-WindowedPanel-viewport]:pr-8',
              '[&_.jp-Notebook-footer]:!w-[calc(100%-244px)]',
              '[&_.jp-Notebook-footer]:opacity-50',
              '[&_[title=Save]]:!hidden' // Hide the save button, which crashes the app...
            )}
          >
            <Notebook
              id='notebook-lite-context-id'
              lite
              useRunningKernelIndex={-1}
              CellSidebar={CellSidebar}
              cellSidebarMargin={120}
              Toolbar={NotebookToolbar}
              nbformat={nbformat}
              onSessionConnection={onSessionConnection}
              height='calc(100vh - 200px)'
              renderers={[]}
            />
          </div>
        </Jupyter>
      </JupyterReactTheme>

and this is the json being passed in as nbformat:

{
  "cells": [
    {
      "cell_type": "code",
      "metadata": {},
      "source": [
        "import micropip\n",
        "await micropip.install('ipywidgets')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {},
      "outputs": [],
      "source": []
    }
  ],
  "metadata": {
    "kernelspec": {
      "display_name": "Python (ipykernel)",
      "language": "python",
      "name": "python"
    },
    "language_info": {
      "codemirror_mode": {
        "name": "ipython",
        "version": 3
      },
      "file_extension": ".py",
      "mimetype": "text/x-python",
      "name": "python",
      "nbconvert_exporter": "python",
      "pygments_lexer": "ipython3",
      "version": "3.10.4"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 4
}

[echarles]

I have seen similar issue while using pyodide and don't think atm we can do a lot, apart from making sure we track the latest versions of the stack and report back those issues to the upstream projects.