chore: kill script

dev/sh/kill-jupyter-server.sh → dev/sh/kill.sh

@@ -7,5 +7,6 @@ function kill_port() {
     lsof -i TCP:$1 | grep LISTEN | awk '{print $2}' | xargs kill -9
 }
 
+kill_port 3063
 kill_port 8686
 kill_port 8888

dev/sh/start-jupyter-server.sh

@@ -12,5 +12,7 @@ echo
 
 export CURR_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
+trap $CURR_DIR/kill.sh EXIT
+
 jupyter server \
   --config=${CURR_DIR}/../config/jupyter_server_config.py --autoreload

package.json

@@ -61,7 +61,7 @@
     "watch": "run-p watch:src watch:labextension",
     "watch:src": "tsc -w",
     "watch:labextension": "jupyter labextension watch .",
-    "kill": "./dev/sh/kill-jupyter-server.sh || true"
+    "kill": "./dev/sh/kill.sh || true"
   },
   "dependencies": {
     "@datalayer/jupyter-react": "0.7.7",

src/Datalayer.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { ThemeProvider, BaseStyles, Box, } from '@primer/react';
 import { UnderlineNav } from '@primer/react/drafts';
-import { DatalayerGreenIcon, JupyterBaseIcon } from '@datalayer/icons-react';
+import { DatalayerGreenIcon, JupyterLabIcon } from '@datalayer/icons-react';
 import AboutTab from './tabs/AboutTab';
 import JupyterLabTab from './tabs/JupyterLabTab';
 import { requestAPI } from './jupyterlab/handler';
@@ -33,7 +33,7 @@ const Datalayer = (props: JupyterFrontEndProps) => {
           <Box>
             <Box>
               <UnderlineNav aria-label="datalayer">
-                <UnderlineNav.Item aria-label="jupyterlab" aria-current={tab === 1 ? "page" : undefined} icon={() => <JupyterBaseIcon colored/>} onSelect={e => {e.preventDefault(); setTab(1);}}>
+                <UnderlineNav.Item aria-label="jupyterlab" aria-current={tab === 1 ? "page" : undefined} icon={() => <JupyterLabIcon colored/>} onSelect={e => {e.preventDefault(); setTab(1);}}>
                   JupyterLab
                 </UnderlineNav.Item>
                 <UnderlineNav.Item aria-label="about" aria-current={tab === 2 ? "page" : undefined} icon={() => <DatalayerGreenIcon colored/>} onSelect={e => {e.preventDefault(); setTab(2);}}>

src/DatalayerJupyterLab.tsx

@@ -0,0 +1,30 @@
+import { createRoot } from 'react-dom/client';
+import { Jupyter, JupyterLabApp, JupyterLabPluginsCore } from '@datalayer/jupyter-react';
+import * as collaborationExtension from '@jupyter/collaboration-extension';
+import * as datalayerExtension from './jupyterlab';
+
+const { extensionsPromises, mimeExtensionsPromises } = JupyterLabPluginsCore;
+
+const DatalayerJupyterLab = () => (
+  <JupyterLabApp
+    extensions={[
+      datalayerExtension,
+      collaborationExtension,
+    ]}
+    extensionPromises={extensionsPromises}
+    mimeExtensionsPromises={mimeExtensionsPromises}
+    position="absolute"
+    hostId="jupyterlab-app-id"
+    height="100vh"
+  />
+)
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(
+  <Jupyter startDefaultKernel={false} disableCssLoading={true}>
+    <DatalayerJupyterLab/>
+  </Jupyter>
+);