example: local server (datalayer#335)

MarcosVn · Dec 11, 2024 · e5d7110 · e5d7110
1 parent 15200c0
commit e5d7110
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 45 deletions.
diff --git a/docs/docs/deployments/jupyter-server/index.mdx b/docs/docs/deployments/jupyter-server/index.mdx
@@ -1,6 +1,6 @@
 # Jupyter Server
 
-To connect to a Jupyter Server, you have to define the URL for the Jupyter Server as well as a the Jupyter Token.
+To connect to a Jupyter Server, you have to define the URL for the `Jupyter Server` as well as a the `Jupyter Token`.
 
 Assuming you have Jupyter Server correctly installed on your machine, you can run your local server with the following command.
 
@@ -15,12 +15,19 @@ yarn start-local
 The Jupyter Server and the Jupyter Token can be provided in the [Jupyter Context](/docs/components/context)
 
 ```ts
-<Jupyter
-  "jupyterServerUrl": "http://localhost:8686/api/jupyter-server"
-  "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
->
-  <Notebook/>
-</Jupyter>
+const NotebookLocalJupyter = () => (
+  <Jupyter
+    jupyterServerUrl="http://localhost:8686/api/jupyter-server"
+    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+    startDefaultKernel
+  >
+    <Notebook
+      path="ipywidgets.ipynb"
+      id="notebook-jupyter-id"
+      height="calc(100vh - 250px)" // (Height - Toolbar Height).
+    />
+  </Jupyter>
+)
 ```
 
 Alternatively, you can to define a `script` tag in the head section your host index HTML page information for your React applicatio with those 2 configurations (see for example the content of this [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html)).
@@ -39,18 +46,40 @@ Alternatively, you can to define a `script` tag in the head section your host in
 </html>
 ```
 
+Optionally, you can use the JupyterReactTheme component
+
+```ts
+const NotebookLocalJupyter = () => {
+  useJupyter({
+    jupyterServerUrl: "http://localhost:8686/api/jupyter-server",
+    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+  })
+  return (
+    <JupyterReactTheme>
+      <Notebook
+        startDefaultKernel
+        path="ipywidgets.ipynb"
+        id="notebook-jupyter-react-themeid"
+      />
+    </JupyterReactTheme>
+  );
+}
+```
+
 :::note
 
 If you are also using a `jupyter-config-data`, ensure you set the correct values over there.
 
 ```html
+<head>
   <script id="jupyter-config-data" type="application/json">
     {
       "baseUrl": "http://localhost:8686/api/jupyter-server",
       "wsUrl": "ws://localhost:8686/api/jupyter-server",
       "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
     }
   </script>
+</head>
 ```
 
 :::
@@ -63,7 +92,7 @@ The values defined in the Jupyter context are taking precedence on the values se
 
 If you are delivering the React.js web application from a different URL than your Jupyter Server, the Jupyter Server should be configured to accept Cross-origin request with for example in the `jupyter_server_config.py` the following traits.
 
-:::info
+:::warning
 
 Please tune the following example to fit your security requirements, this is in no way production-ready configuration.
 
@@ -130,4 +159,4 @@ If you are using the [JupyterLabApp](/docs/components/jupyterlab-app) component,
   </script>
 ```
 
-:::
+:::
diff --git a/packages/react/src/examples/Localhost.tsx b/packages/react/src/examples/Localhost.tsx
diff --git a/packages/react/src/examples/NotebookLocalServer.tsx b/packages/react/src/examples/NotebookLocalServer.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { createRoot } from 'react-dom/client';
+import { Text } from '@primer/react';
+import { Jupyter, useJupyter } from '../jupyter';
+import { JupyterReactTheme } from '../theme';
+import { Notebook } from '../components/notebook/Notebook';
+import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
+import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
+
+const NotebookJupyter = () => (
+  <Jupyter
+    jupyterServerUrl="http://localhost:8686/api/jupyter-server"
+    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+    startDefaultKernel
+  >
+    <Notebook
+      path="ipywidgets.ipynb"
+      id="notebook-jupyter-id"
+      height="calc(100vh - 250px)" // (Height - Toolbar Height).
+      cellSidebarMargin={60}
+      CellSidebar={CellSidebarButton}
+      Toolbar={NotebookToolbar}
+    />
+  </Jupyter>
+)
+
+const NotebookJupyterReactTheme = () => {
+  useJupyter({
+    jupyterServerUrl: "http://localhost:8686/api/jupyter-server",
+    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+  })
+  return (
+    <JupyterReactTheme>
+      <Notebook
+        startDefaultKernel
+        path="ipywidgets.ipynb"
+        id="notebook-jupyter-react-themeid"
+        height="calc(100vh - 250px)" // (Height - Toolbar Height).
+        cellSidebarMargin={60}
+        CellSidebar={CellSidebarButton}
+        Toolbar={NotebookToolbar}
+      />
+    </JupyterReactTheme>
+  );
+}
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(
+  <>
+  {/*
+    <Text as="h1">Local Jupyter Server (with a Jupyter Context)</Text>
+    <NotebookJupyter/>
+    */}
+    <Text as="h1">Local Jupyter Server (with a Jupyter React Theme)</Text>
+    <NotebookJupyterReactTheme/>
+  </>
+);
diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js
@@ -20,7 +20,7 @@ const ENTRY =
   // './src/app/App';
   // './src/examples/Bokeh';
   // './src/examples/Bqplot';
-  './src/examples/Cell';
+  // './src/examples/Cell';
   // './src/examples/CellLite';
   // './src/examples/Cells';
   // './src/examples/CellsExecute';
@@ -41,10 +41,9 @@ const ENTRY =
   // './src/examples/KernelExecute';
   // './src/examples/KernelExecutor';
   // './src/examples/Kernels';
-  // './src/examples/Localhost';
   // './src/examples/Lumino';
   // './src/examples/Matplotlib';
-  // './src/examples/Notebook';
+  './src/examples/Notebook';
   // './src/examples/NotebookCellSidebar';
   // './src/examples/NotebookCellToolbar';
   // './src/examples/NotebookColorMode';
@@ -53,6 +52,7 @@ const ENTRY =
   // './src/examples/NotebookLess';
   // './src/examples/NotebookLite';
   // './src/examples/NotebookLiteContext';
+  // './src/examples/NotebookLocalServer';
   // './src/examples/NotebookMutationsKernel';
   // './src/examples/NotebookMutationsServiceManager';
   // './src/examples/NotebookNbformat';