Notebook extensions

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "0.18.9",
+  "version": "0.18.11",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",

packages/react/src/app/JupyterReact.tsx

@@ -6,13 +6,14 @@
 
 import { useState, useEffect } from 'react';
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { ThemeProvider, BaseStyles, Box } from '@primer/react';
+import { Box } from '@primer/react';
 import { UnderlineNav } from '@primer/react';
 import { ReactJsIcon, RingedPlanetIcon } from '@datalayer/icons-react';
 import { ServerConnection } from '@jupyterlab/services';
+import { JupyterReactTheme } from '../theme';
+import { requestAPI } from '../jupyter/JupyterHandlers';
 import AboutTab from './tabs/AboutTab';
 import ComponentsTab from './tabs/ComponentsTab';
-import { requestAPI } from '../jupyter/JupyterHandlers';
 
 export type JupyterFrontEndProps = {
   app?: JupyterFrontEnd;
@@ -35,39 +36,36 @@ const JupyterReact = (props: JupyterFrontEndProps): JSX.Element => {
   });
   return (
     <>
-      <ThemeProvider>
-        <BaseStyles>
-          <Box style={{ maxWidth: 700 }}>
-            <Box mb={3}>
-              <UnderlineNav aria-label="jupyter-react">
-                <UnderlineNav.Item
-                  aria-current="page"
-                  icon={RingedPlanetIcon}
-                  onSelect={e => {
-                    e.preventDefault();
-                    setTab(1);
-                  }}
-                >
-                  Components
-                </UnderlineNav.Item>
-                <UnderlineNav.Item
-                  icon={ReactJsIcon}
-                  onSelect={e => {
-                    e.preventDefault();
-                    setTab(2);
-                  }}
-                >
-                  About
-                </UnderlineNav.Item>
-              </UnderlineNav>
-            </Box>
-            <Box m={3}>
-              {tab === 1 && <ComponentsTab app={app} />}
-              {tab === 2 && <AboutTab version={version} />}
-            </Box>
-          </Box>
-        </BaseStyles>
-      </ThemeProvider>
+      <JupyterReactTheme loadJupyterLabCss={false}>
+        <Box mb={3}>
+          <UnderlineNav aria-label="jupyter-react">
+            <UnderlineNav.Item
+              aria-current={tab === 1 ? "page" : undefined}
+              icon={RingedPlanetIcon}
+              onSelect={e => {
+                e.preventDefault();
+                setTab(1);
+              }}
+            >
+              Components
+            </UnderlineNav.Item>
+            <UnderlineNav.Item
+              aria-current={tab === 2 ? "page" : undefined}
+              icon={ReactJsIcon}
+              onSelect={e => {
+                e.preventDefault();
+                setTab(2);
+              }}
+            >
+              About
+            </UnderlineNav.Item>
+          </UnderlineNav>
+        </Box>
+        <Box m={3}>
+          {tab === 1 && <ComponentsTab app={app} />}
+          {tab === 2 && <AboutTab version={version} />}
+        </Box>
+      </JupyterReactTheme>
     </>
   );
 };

packages/react/src/app/tabs/AboutTab.tsx

@@ -23,22 +23,12 @@ const AboutTab = (props: Props): JSX.Element => {
       <Box>
         <Text>React.js components 💯% compatible with 🪐 Jupyter.</Text>
       </Box>
-      <Box mt={3} style={{ width: 350 }}>
-        {!egg ? (
-          <img
-            src="https://assets.datalayer.tech/releases/datalayer-0.3.0-black-snake_1024.png"
-            onClick={e => setEgg(true)}
-          />
-        ) : (
-          <ECharlesIcon size={300} onClick={e => setEgg(false)} />
-        )}
-      </Box>
       <Box>
         <Link
-          href="https://datalayer.tech/docs/releases/0.3.0-black-snake"
+          href="https://datalayer.tech/docs/releases/1.2.0-black-snake"
           target="_blank"
         >
-          <Text as="h4">Datalayer 0.3.0 Black Snake Release</Text>
+          <Text as="h4">Datalayer 1.2.0 Black Snake Release</Text>
         </Link>
       </Box>
       <Box>
@@ -49,6 +39,16 @@ const AboutTab = (props: Props): JSX.Element => {
           <Text as="h4">Source code</Text>
         </Link>
       </Box>
+      <Box mt={3}>
+        {!egg ? (
+          <img
+            src="https://assets.datalayer.tech/releases/datalayer-1.2.0-black-snake_1024.png"
+            onClick={e => setEgg(true)}
+          />
+        ) : (
+          <ECharlesIcon size={300} onClick={e => setEgg(false)} />
+        )}
+      </Box>
     </>
   );
 };

packages/react/src/app/tabs/ComponentsTab.tsx

@@ -6,11 +6,10 @@
 
 import { useState } from 'react';
 import { Box, NavList } from '@primer/react';
-import { Jupyter } from '../../jupyter/Jupyter';
 import { JupyterFrontEndProps } from '../JupyterReact';
 import FileBrowserComponent from './components/FileBrowserComponent';
-import CellComponent from './components/CellComponent';
-import NotebookComponent from './components/NotebookComponent';
+// import CellComponent from './components/CellComponent';
+// import NotebookComponent from './components/NotebookComponent';
 import IPyWidgetsComponent from './components/IPyWidgetsComponent';
 import ViewerComponent from './components/ViewerComponent';
 
@@ -60,13 +59,13 @@ const MainTab = (props: JupyterFrontEndProps) => {
           </NavList>
         </Box>
         <Box ml={3} sx={{ width: '100%' }}>
-          <Jupyter startDefaultKernel>
             {nav === 1 && <FileBrowserComponent />}
-            {nav === 2 && <CellComponent />}
-            {nav === 3 && <NotebookComponent />}
             {nav === 4 && <IPyWidgetsComponent />}
             {nav === 5 && <ViewerComponent />}
-          </Jupyter>
+            {/*
+            {nav === 2 && <CellComponent />}
+            {nav === 3 && <NotebookComponent />}
+            */}
         </Box>
       </Box>
     </>

packages/react/src/app/tabs/components/NotebookComponent.tsx

@@ -4,23 +4,21 @@
  * MIT License
  */
 
-// import Notebook from '../../../components/notebook/Notebook';
-// import CellSidebarNew from './../../../components/notebook/cell/sidebar/CellSidebarButton';
+import Notebook from '../../../components/notebook/Notebook';
+import CellSidebarNew from './../../../components/notebook/cell/sidebar/CellSidebarButton';
 
-// import nbformat from './../../..//examples/notebooks/IPyWidgetsExample.ipynb.json';
+import nbformat from './../../..//examples/notebooks/IPyWidgetsExample.ipynb.json';
 
 const NotebookComponent = () => {
   return (
     <>
-      {/*
       <Notebook
         nbformat={nbformat}
         id="notebook-id"
         cellSidebarMargin={60}
         height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
         CellSidebar={CellSidebarNew}
       />
-  */}
     </>
   );
 };

packages/react/src/components/cell/Cell.tsx

@@ -7,11 +7,11 @@
 import { useState, useEffect } from 'react';
 import { CodeCell, MarkdownCell } from '@jupyterlab/cells';
 import { Box } from '@primer/react';
-import Lumino from '../lumino/Lumino';
 import { useJupyter } from './../../jupyter/JupyterContext';
+import { newUuid } from '../../utils';
+import { Lumino } from '../lumino';
 import CellAdapter from './CellAdapter';
 import useCellsStore from './CellState';
-import { newUuid } from '../../utils';
 
 export type ICellProps = {
   /**
@@ -44,42 +44,35 @@ export const Cell = (props: ICellProps) => {
     type='code',
   } = props;
   const { defaultKernel, serverSettings } = useJupyter();
-
   const [id] = useState(props.id || newUuid());
   const [adapter, setAdapter] = useState<CellAdapter>();
-
   const cellsStore = useCellsStore();
-
   const handleCellInitEvents = (adapter: CellAdapter) => {
     adapter.cell.model.contentChanged.connect(
       (cellModel, changedArgs) => {
         cellsStore.setSource(id, cellModel.sharedModel.getSource());
       }
     );
-
     if (adapter.cell instanceof CodeCell) {
       adapter.cell.outputArea.outputLengthChanged?.connect(
         (outputArea, outputsCount) => {
           cellsStore.setOutputsCount(id, outputsCount);
         }
       );
     }
-
     adapter.sessionContext.initialize().then(() => {
       if (autoStart && adapter.cell.model) {
         // Perform auto-start for code or markdown cells.
         adapter.execute();
       }
     });
-
     adapter.sessionContext.kernelChanged.connect(() => {
       void adapter.sessionContext.session?.kernel?.info.then(info => {
         // Set that session/kernel is ready for this cell when the kernel is guaranteed to be connected 
         cellsStore.setKernelSessionAvailable(id, true);
       })
     });
   }
-
   useEffect(() => {
     if (id && defaultKernel && serverSettings) {
       defaultKernel.ready.then(() => {
@@ -95,7 +88,6 @@ export const Cell = (props: ICellProps) => {
         cellsStore.setSource(id, source);
         handleCellInitEvents(adapter);
         setAdapter(adapter);
-
         const handleDblClick = (event: Event) => {
           let target = event.target as HTMLElement;
           /**
@@ -109,7 +101,6 @@ export const Cell = (props: ICellProps) => {
             (adapter.cell as MarkdownCell).rendered = false;
           }
         };
-
         // Adds the event for double click and the removal on component's destroy
         document.addEventListener('dblclick', handleDblClick);
         return () => {

packages/react/src/components/cell/CellAdapter.ts

@@ -36,7 +36,6 @@ import {
   RenderMimeRegistry,
   standardRendererFactories as initialFactories,
 } from '@jupyterlab/rendermime';
-import { execute as executeOutput } from './../output/OutputExecutor';
 import {
   Session,
   ServerConnection,
@@ -50,6 +49,7 @@ import {
   WIDGET_MIMETYPE,
   WidgetRenderer,
 } from '@jupyter-widgets/html-manager/lib/output_renderers';
+import { execute as executeOutput } from './../output/OutputExecutor';
 import { requireLoader as loader } from '../../jupyter/ipywidgets/libembed-amd';
 import ClassicWidgetManager from '../../jupyter/ipywidgets/classic/manager';
 import Kernel from '../../jupyter/kernel/Kernel';

packages/react/src/components/codemirror/CodeMirrorEditor.tsx → packages/react/src/components/codemirror/CodeMirrorDatalayerEditor.tsx

@@ -7,16 +7,16 @@
 import { useState, useRef, useEffect } from 'react';
 import { basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
-// import { Compartment } from '@codemirror/state';
+import { Compartment } from '@codemirror/state';
 import { keymap, EditorView, ViewUpdate } from '@codemirror/view';
-// import { python } from '@codemirror/lang-python';
+import { python } from '@codemirror/lang-python';
 import Kernel from '../../jupyter/kernel/Kernel';
 import codeMirrorTheme from './CodeMirrorTheme';
 import OutputAdapter from '../output/OutputAdapter';
 import CodeMirrorOutputToolbar from './CodeMirrorOutputToolbar';
 import useOutputsStore from '../output/OutputState';
 
-export const CodeMirrorEditor = (props: {
+export const CodeMirrorDatalayerEditor = (props: {
   code: string;
   codePre?: string;
   outputAdapter: OutputAdapter;
@@ -80,7 +80,7 @@ export const CodeMirrorEditor = (props: {
   };
   useEffect(() => {
     outputStore.setInput(sourceId, code);
-//    const language = new Compartment();
+    const language = new Compartment();
     const keyBinding = [
       {
         key: 'Shift-Enter',
@@ -92,7 +92,7 @@ export const CodeMirrorEditor = (props: {
       doc: code,
       extensions: [
         basicSetup,
-//        language.of(python()), // TODO CodeMirrorEditor imported by Output breaks the JupyterLab extension loading. https://github.com/datalayer/jupyter-ui/issues/170
+        language.of(python()),
         EditorView.lineWrapping,
         keymap.of([...keyBinding]),
         codeMirrorTheme,
@@ -147,4 +147,4 @@ export const CodeMirrorEditor = (props: {
   );
 };
 
-export default CodeMirrorEditor;
+export default CodeMirrorDatalayerEditor;

packages/react/src/components/codemirror/index.ts

@@ -4,6 +4,6 @@
  * MIT License
  */
 
-export * from './CodeMirrorEditor';
+export * from './CodeMirrorDatalayerEditor';
 export * from './CodeMirrorOutputToolbar';
 export * from './CodeMirrorTheme';