jupyterpack 0.3.0 → 0.4.0

package/src/document/commands.ts

@@ -0,0 +1,91 @@
+import { refreshIcon } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { Panel } from '@lumino/widgets';
+
+import { autoReloadIcon, linkIcon } from '../tools';
+import { IJupyterpackDocTracker } from '../type';
+import { IFramePanel } from './iframePanel';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+
+export const CommandIDs = {
+  RELOAD: 'jupyterpack:reload',
+  TOGGLE_AUTORELOAD: 'jupyterpack:toggleAutoreload',
+  OPEN_SPECTA: 'jupyterpack:openInSpecta'
+};
+
+const labBaseUrl = PageConfig.getOption('baseUrl');
+
+function getCurrentIframPanel(
+  tracker: IJupyterpackDocTracker
+): IFramePanel | undefined {
+  const current = tracker.currentWidget?.content as Panel | undefined;
+  if (!current) {
+    return;
+  }
+  const widget = current.widgets[0] as IFramePanel | undefined;
+  if (!widget) {
+    return;
+  }
+  return widget;
+}
+export function addCommands(
+  commands: CommandRegistry,
+  tracker: IJupyterpackDocTracker
+) {
+  commands.addCommand(CommandIDs.RELOAD, {
+    caption: 'Reload',
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    icon: refreshIcon,
+    execute: async () => {
+      const widget = getCurrentIframPanel(tracker);
+      if (widget) {
+        await widget.reload();
+      }
+    }
+  });
+  const commandState = { toggled: false };
+  commands.addCommand(CommandIDs.TOGGLE_AUTORELOAD, {
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    isToggled: () => {
+      const widget = getCurrentIframPanel(tracker);
+      return Boolean(widget?.autoreload);
+    },
+    icon: autoReloadIcon,
+    caption: e => {
+      return commandState.toggled
+        ? 'Auto-reload enabled'
+        : 'Auto-reload disabled';
+    },
+    execute: async () => {
+      const widget = getCurrentIframPanel(tracker);
+      if (widget) {
+        widget.autoreload = !widget?.autoreload;
+
+        commands.notifyCommandChanged(CommandIDs.TOGGLE_AUTORELOAD);
+      }
+    }
+  });
+  commands.addCommand(CommandIDs.OPEN_SPECTA, {
+    caption: 'Open in Specta',
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    icon: linkIcon,
+    execute: async () => {
+      const context = tracker.currentWidget?.context;
+      if (!context) {
+        return;
+      }
+      const spectaUrl = new URL(
+        URLExt.join(labBaseUrl, 'specta'),
+        window.location.origin
+      );
+      spectaUrl.searchParams.set('path', context.path);
+      window.open(spectaUrl.toString(), '_blank');
+    }
+  });
+}

package/src/document/iframePanel.ts

@@ -1,6 +1,6 @@
 import { Widget } from '@lumino/widgets';
 
-export class IFramePanel extends Widget {
+export abstract class IFramePanel extends Widget {
   constructor() {
     super();
     this.addClass('jupyterpack-iframe-panel');
@@ -20,6 +20,9 @@ export class IFramePanel extends Widget {
     }
   }
 
+  abstract reload(): Promise<void>;
+  abstract autoreload: boolean;
+  abstract isReady: Promise<void>;
   protected _iframe: HTMLIFrameElement;
   protected _spinner: HTMLDivElement;
 }

package/src/document/plugin.ts

@@ -4,20 +4,29 @@ import {
 } from '@jupyterlab/application';
 
 import { JupyterPackWidgetFactory } from './widgetFactory';
-import { IConnectionManager } from '../type';
-import { IConnectionManagerToken } from '../token';
+import { IConnectionManager, IJupyterpackDocTracker } from '../type';
+import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
+import { WidgetTracker } from '@jupyterlab/apputils';
+import { DocumentWidget } from '@jupyterlab/docregistry';
+import { logoIcon } from '../tools';
+import { addCommands } from './commands';
 
 const FACTORY = 'jupyterpack';
 const CONTENT_TYPE = 'jupyterpack';
 
-export const spkPlugin: JupyterFrontEndPlugin<void> = {
+export const spkPlugin: JupyterFrontEndPlugin<IJupyterpackDocTracker> = {
   id: 'jupyterpack:spkplugin',
   requires: [IConnectionManagerToken],
   autoStart: true,
+  provides: IJupyterpackDocTrackerToken,
   activate: (
     app: JupyterFrontEnd,
     connectionManager: IConnectionManager
-  ): void => {
+  ): IJupyterpackDocTracker => {
+    const tracker = new WidgetTracker<DocumentWidget>({
+      namespace: FACTORY
+    });
+    addCommands(app.commands, tracker);
     const widgetFactory = new JupyterPackWidgetFactory({
       name: FACTORY,
       modelName: 'text',
@@ -25,7 +34,8 @@ export const spkPlugin: JupyterFrontEndPlugin<void> = {
       defaultFor: [CONTENT_TYPE],
       commands: app.commands,
       manager: app.serviceManager,
-      connectionManager
+      connectionManager,
+      tracker
     });
 
     // Registering the widget factory
@@ -35,10 +45,21 @@ export const spkPlugin: JupyterFrontEndPlugin<void> = {
     app.docRegistry.addFileType({
       name: CONTENT_TYPE,
       displayName: 'SPK',
-      mimeTypes: ['text/json'],
+      mimeTypes: ['application/json'],
       extensions: ['.spk', '.SPK'],
       fileFormat: 'json',
-      contentType: CONTENT_TYPE
+      contentType: CONTENT_TYPE,
+      icon: logoIcon
+    });
+
+    widgetFactory.widgetCreated.connect((_, widget) => {
+      widget.title.icon = logoIcon;
+      widget.context.pathChanged.connect(() => {
+        tracker.save(widget);
+      });
+      tracker.add(widget);
     });
+
+    return tracker;
   }
 };

package/src/document/toolbar.ts

@@ -0,0 +1,39 @@
+import {
+  CommandToolbarButton,
+  ReactiveToolbar
+} from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+
+import { IJupyterpackDocTracker } from '../type';
+import { CommandIDs } from './commands';
+
+export class ToolbarWidget extends ReactiveToolbar {
+  constructor(options: {
+    tracker: IJupyterpackDocTracker;
+    commands: CommandRegistry;
+  }) {
+    super();
+    this.addClass('jupyterpack-toolbar');
+    this.addItem(
+      'Reload',
+      new CommandToolbarButton({
+        commands: options.commands,
+        id: CommandIDs.RELOAD
+      })
+    );
+    this.addItem(
+      'Toggle Auto Reload',
+      new CommandToolbarButton({
+        id: CommandIDs.TOGGLE_AUTORELOAD,
+        commands: options.commands
+      })
+    );
+    this.addItem(
+      'Open Specta',
+      new CommandToolbarButton({
+        id: CommandIDs.OPEN_SPECTA,
+        commands: options.commands
+      })
+    );
+  }
+}

package/src/document/widgetFactory.ts

@@ -1,23 +1,26 @@
 import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
 import { Contents, ServiceManager } from '@jupyterlab/services';
 import { CommandRegistry } from '@lumino/commands';
+import { UUID } from '@lumino/coreutils';
 import { Panel } from '@lumino/widgets';
 
+import { PythonWidget } from '../pythonWidget/pythonWidget';
+import { PythonWidgetModel } from '../pythonWidget/pythonWidgetModel';
+import { SandpackPanel } from '../sandpackWidget/sandpackPanel';
 import {
   IConnectionManager,
+  IJupyterpackDocTracker,
   IJupyterPackFileFormat,
   JupyterPackFramework
 } from '../type';
-import { SandpackPanel } from '../sandpackWidget/sandpackPanel';
 import { JupyterPackDocWidget } from './jupyterpackDocWidget';
-import { PythonWidgetModel } from '../pythonWidget/pythonWidgetModel';
-import { UUID } from '@lumino/coreutils';
-import { PythonWidget } from '../pythonWidget/pythonWidget';
+import { ToolbarWidget } from './toolbar';
 
 interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
   commands: CommandRegistry;
   manager: ServiceManager.IManager;
   connectionManager: IConnectionManager;
+  tracker: IJupyterpackDocTracker;
 }
 
 export class JupyterPackWidgetFactory extends ABCWidgetFactory<JupyterPackDocWidget> {
@@ -72,9 +75,14 @@ export class JupyterPackWidgetFactory extends ABCWidgetFactory<JupyterPackDocWid
         }
       }
     });
+    const toolbar = new ToolbarWidget({
+      tracker: this.options.tracker,
+      commands: this.options.commands
+    });
     return new JupyterPackDocWidget({
       context,
-      content
+      content,
+      toolbar
     });
   }
 

package/src/global.d.ts

@@ -2,3 +2,8 @@ declare module '*?raw' {
   const content: string;
   export default content;
 }
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}

package/src/pythonServer/dash/dashServer.ts

@@ -1,8 +1,6 @@
 import { stringOrNone } from '../../tools';
 import { IDict, JupyterPackFramework } from '../../type';
-import { patch } from '../common/generatedPythonFiles';
 import { KernelExecutor } from '../kernelExecutor';
-import { bootstrap, dashLoader } from './generatedPythonFiles';
 
 export class DashServer extends KernelExecutor {
   async init(options: {
@@ -18,14 +16,20 @@ export class DashServer extends KernelExecutor {
       kernelClientId,
       framework: JupyterPackFramework.DASH
     });
-    await this.executeCode({ code: patch });
     await this.executeCode({
-      code: bootstrap.replaceAll('{{base_url}}', baseURL)
+      code: `
+      import os
+      os.environ["DASH_URL_BASE_PATHNAME"] = "${baseURL}"
+      `
     });
     if (initCode) {
       await this.executeCode({ code: initCode });
     }
-    await this.executeCode({ code: dashLoader });
+    const loaderCode = `
+      from jupyterpack.dash import DashServer
+      ${this._DASH_SERVER_VAR} = DashServer(app, "${baseURL}")
+      `;
+    await this.executeCode({ code: loaderCode });
   }
 
   getResponseFunctionFactory(options: {
@@ -36,22 +40,27 @@ export class DashServer extends KernelExecutor {
     content?: string;
   }) {
     const { method, urlPath, headers, params, content } = options;
-    const code = `${this.DASH_GET_RESPONSE_FUNCTION}("${method}", "${urlPath}", headers=${JSON.stringify(headers)} , content=${stringOrNone(content)}, params=${stringOrNone(params)})`;
+    const code = `${this._DASH_SERVER_VAR}.get_response("${method}", "${urlPath}", headers=${JSON.stringify(headers)} , content=${stringOrNone(content)}, params=${stringOrNone(params)})`;
     return code;
   }
 
   async disposePythonServer(): Promise<void> {
-    //no-op
+    await this.executeCode({ code: `${this._DASH_SERVER_VAR}.dispose()` });
   }
 
-  async openWebsocket(options: {
-    instanceId: string;
-    kernelId: string;
-    wsUrl: string;
-    protocol?: string;
+  async reloadPythonServer(options: {
+    entryPath?: string;
+    initCode?: string;
   }): Promise<void> {
-    //no-op
+    const { initCode } = options;
+    if (initCode) {
+      await this.executeCode({ code: initCode });
+    }
+    await this.executeCode(
+      { code: `${this._DASH_SERVER_VAR}.reload(app)` },
+      true
+    );
   }
 
-  private DASH_GET_RESPONSE_FUNCTION = '__jupyterpack_dash_get_response';
+  private _DASH_SERVER_VAR = '__jupyterpack_dash_server';
 }

package/src/pythonServer/kernelExecutor.ts

@@ -9,7 +9,6 @@ import {
 } from '../tools';
 import { IDict, IKernelExecutor, JupyterPackFramework } from '../type';
 import websocketPatch from '../websocket/websocket.js?raw';
-import { patch } from './common/generatedPythonFiles';
 
 export abstract class KernelExecutor implements IKernelExecutor {
   constructor(options: KernelExecutor.IOptions) {
@@ -22,6 +21,10 @@ export abstract class KernelExecutor implements IKernelExecutor {
   }
 
   abstract disposePythonServer(): Promise<void>;
+  abstract reloadPythonServer(options: {
+    entryPath?: string;
+    initCode?: string;
+  }): Promise<void>;
 
   abstract getResponseFunctionFactory(options: {
     urlPath: string;
@@ -37,7 +40,11 @@ export abstract class KernelExecutor implements IKernelExecutor {
     instanceId: string;
     kernelClientId: string;
   }): Promise<void> {
-    await this.executeCode({ code: patch });
+    const patchCode = `
+    from jupyterpack.common import patch_all
+    patch_all()
+    `;
+    await this.executeCode({ code: patchCode });
   }
 
   openWebsocketFunctionFactory(options: {
@@ -160,10 +167,13 @@ export abstract class KernelExecutor implements IKernelExecutor {
           }
           case 'stream': {
             const content = (msg as KernelMessage.IStreamMsg).content;
+            if (content.text.length === 0) {
+              break;
+            }
             if (content.name === 'stderr') {
-              console.error('Kernel stream', content.text);
+              console.error('Kernel stream:', content.text);
             } else {
-              console.log('Kernel stream', content.text);
+              console.log('Kernel stream:', content.text);
             }
             break;
           }
@@ -204,19 +214,23 @@ export abstract class KernelExecutor implements IKernelExecutor {
     framework: JupyterPackFramework;
   }) {
     const { instanceId, kernelClientId, framework } = options;
-    const labBaseUrl = PageConfig.getOption('baseUrl');
+    const fullLabextensionsUrl = PageConfig.getOption('fullLabextensionsUrl');
+
     const baseURL = URLExt.join(
-      labBaseUrl,
-      'extensions/jupyterpack/static',
+      fullLabextensionsUrl,
+      'jupyterpack/static',
       instanceId,
       framework,
       kernelClientId,
       '/'
     );
+    this._baseUrl = baseURL;
 
     return baseURL;
   }
 
+  protected _baseUrl: string | undefined;
+
   private _isDisposed: boolean = false;
   private _sessionConnection: Session.ISessionConnection;
   private _wsPatch: string;

package/src/pythonServer/streamlit/streamlitServer.ts

@@ -1,21 +1,13 @@
-import { stringOrNone } from '../../tools';
-import { IDict, JupyterPackFramework } from '../../type';
-import { patch, tools } from '../common/generatedPythonFiles';
-import { KernelExecutor } from '../kernelExecutor';
-import {
-  bootstrap as tornadoBootstrap,
-  tornadoBridge
-} from '../tornado/generatedPythonFiles';
-import { bootstrap, streamlitLoader } from './generatedPythonFiles';
+import { JupyterPackFramework } from '../../type';
+import { TornadoServer } from '../tornado/tornadoServer';
 
-export class StreamlitServer extends KernelExecutor {
+export class StreamlitServer extends TornadoServer {
   async init(options: {
     entryPath?: string;
     initCode?: string;
     instanceId: string;
     kernelClientId: string;
   }) {
-    await super.init(options);
     const { instanceId, kernelClientId, entryPath } = options;
     if (!entryPath) {
       throw new Error(
@@ -27,61 +19,49 @@ export class StreamlitServer extends KernelExecutor {
       kernelClientId,
       framework: JupyterPackFramework.STREAMLIT
     });
-    await this.executeCode({ code: patch });
-    await this.executeCode({ code: tools.replaceAll('{{base_url}}', baseURL) });
-    await this.executeCode({ code: tornadoBootstrap });
-    await this.executeCode({ code: tornadoBridge });
-    await this.executeCode({ code: bootstrap });
 
-    const stCode = streamlitLoader
-      .replaceAll('{{base_url}}', baseURL)
-      .replaceAll('{{script_path}}', entryPath);
-    await this.executeCode({ code: stCode });
-  }
-
-  getResponseFunctionFactory(options: {
-    urlPath: string;
-    method: string;
-    headers: IDict;
-    params?: string;
-    content?: string;
-  }) {
-    const { method, urlPath, headers, params, content } = options;
-    const code = `await ${this._GET_RESPONSE_FUNCTION}("${method}", "${urlPath}", headers=${JSON.stringify(headers)} , content=${stringOrNone(content)}, params=${stringOrNone(params)})`;
-    return code;
-  }
-
-  openWebsocketFunctionFactory(options: {
-    instanceId: string;
-    kernelId: string;
-    wsUrl: string;
-    protocol?: string;
-  }): string {
-    const { instanceId, kernelId, wsUrl, protocol } = options;
+    const patchCode = `
+    from jupyterpack.common import set_base_url_env, patch_tornado, patch_all
+    patch_all()
+    patch_tornado()
+    set_base_url_env("${baseURL}")
+    `;
+    await this.executeCode({ code: patchCode });
 
-    const code = `await ${this._OPEN_WEBSOCKET_FUNCTION}("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(protocol)})`;
-    return code;
-  }
+    const bootstrapCode = `
+    from jupyterpack.streamlit import patch_streamlit
+    patch_streamlit()
+    `;
+    await this.executeCode({ code: bootstrapCode });
 
-  sendWebsocketMessageFunctionFactory(options: {
-    instanceId: string;
-    kernelId: string;
-    wsUrl: string;
-    message: string;
-  }): string {
-    const { instanceId, kernelId, wsUrl, message } = options;
-    const code = `await ${this._SEND_WEBSOCKET_FUNCTION}("${instanceId}", "${kernelId}", "${wsUrl}", '''${message}''')`;
-    return code;
+    const stCode = `
+      from jupyterpack.streamlit import StreamlitServer, create_streamlit_app
+      __jupyterpack_st_server, __jupyterpack_tor_app = await create_streamlit_app("${entryPath}", "${baseURL}")
+      ${this._SERVER_VAR} = StreamlitServer(__jupyterpack_tor_app, "${baseURL}", __jupyterpack_st_server)
+      `;
+    await this.executeCode({ code: stCode });
   }
 
-  async disposePythonServer(): Promise<void> {
-    await this.executeCode({
-      code: '__jupyterpack_streamlit_dispose()'
-    });
+  async reloadPythonServer(options: {
+    entryPath?: string;
+    initCode?: string;
+  }): Promise<void> {
+    const { entryPath } = options;
+    if (!entryPath || !this._baseUrl) {
+      return;
+    }
+    const reloadCode = `
+      ${this._SERVER_VAR}.dispose()
+      __jupyterpack_st_server, __jupyterpack_tor_app = await create_streamlit_app("${entryPath}", "${this._baseUrl}")
+      ${this._SERVER_VAR}.reload(__jupyterpack_tor_app, __jupyterpack_st_server)
+      `;
+    await this.executeCode(
+      {
+        code: reloadCode
+      },
+      true
+    );
   }
 
-  private _GET_RESPONSE_FUNCTION = '__jupyterpack_streamlit_get_response';
-  private _OPEN_WEBSOCKET_FUNCTION = '__jupyterpack_streamlit_open_ws';
-  private _SEND_WEBSOCKET_FUNCTION =
-    '__jupyterpack_streamlit_receive_ws_message';
+  protected _SERVER_VAR = '__jupyterpack_streamlit_server';
 }

package/src/pythonServer/tornado/tornadoServer.ts

@@ -1,12 +1,7 @@
 import { stringOrNone } from '../../tools';
 import { IDict, JupyterPackFramework } from '../../type';
-import { tools } from '../common/generatedPythonFiles';
 import { KernelExecutor } from '../kernelExecutor';
-import {
-  bootstrap,
-  tornadoBridge,
-  tornadoLoader
-} from './generatedPythonFiles';
+
 export class TornadoServer extends KernelExecutor {
   async init(options: {
     initCode?: string;
@@ -21,14 +16,22 @@ export class TornadoServer extends KernelExecutor {
       kernelClientId,
       framework: JupyterPackFramework.TORNADO
     });
-    await this.executeCode({ code: tools.replaceAll('{{base_url}}', baseURL) });
-    await this.executeCode({ code: bootstrap });
-    await this.executeCode({ code: tornadoBridge });
+    const bootstrapCode = `
+    from jupyterpack.common import set_base_url_env, patch_tornado
+    set_base_url_env("${baseURL}")
+    patch_tornado()
+
+    `;
+    await this.executeCode({ code: bootstrapCode });
     if (initCode) {
       const initCodeWithUrl = initCode.replaceAll('{{base_url}}', baseURL);
       await this.executeCode({ code: initCodeWithUrl });
-      const torCode = tornadoLoader.replaceAll('{{base_url}}', baseURL);
-      await this.executeCode({ code: torCode });
+      const loaderCode = `
+      from jupyterpack.tornado import TornadoServer
+      ${this._SERVER_VAR} = TornadoServer(app, "${baseURL}")
+      `;
+
+      await this.executeCode({ code: loaderCode });
     }
   }
 
@@ -40,7 +43,7 @@ export class TornadoServer extends KernelExecutor {
     content?: string;
   }) {
     const { method, urlPath, headers, params, content } = options;
-    const code = `await ${this._GET_RESPONSE_FUNCTION}("${method}", "${urlPath}", headers=${JSON.stringify(headers)} , content=${stringOrNone(content)}, params=${stringOrNone(params)})`;
+    const code = `await ${this._SERVER_VAR}.get_response("${method}", "${urlPath}", headers=${JSON.stringify(headers)} , content=${stringOrNone(content)}, params=${stringOrNone(params)})`;
     return code;
   }
 
@@ -52,7 +55,7 @@ export class TornadoServer extends KernelExecutor {
   }): string {
     const { instanceId, kernelId, wsUrl, protocol } = options;
 
-    const code = `await ${this._OPEN_WEBSOCKET_FUNCTION}("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(protocol)})`;
+    const code = `await ${this._SERVER_VAR}.open_ws("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(protocol)})`;
     return code;
   }
 
@@ -63,18 +66,32 @@ export class TornadoServer extends KernelExecutor {
     message: string;
   }): string {
     const { instanceId, kernelId, wsUrl, message } = options;
-    const code = `await ${this._SEND_WEBSOCKET_FUNCTION}("${instanceId}", "${kernelId}", "${wsUrl}", '''${message}''')`;
+    const code = `await ${this._SERVER_VAR}.receive_ws_message("${instanceId}", "${kernelId}", "${wsUrl}", '''${message}''')`;
     return code;
   }
 
   async disposePythonServer(): Promise<void> {
     await this.executeCode({
-      code: '__jupyterpack_tornado_dispose()'
+      code: `${this._SERVER_VAR}.dispose()`
     });
   }
 
-  private _GET_RESPONSE_FUNCTION = '__jupyterpack_tornado_get_response';
-  private _OPEN_WEBSOCKET_FUNCTION = '__jupyterpack_tornado_open_ws';
+  async reloadPythonServer(options: {
+    entryPath?: string;
+    initCode?: string;
+  }): Promise<void> {
+    const { initCode } = options;
+    if (initCode) {
+      await this.executeCode({
+        code: initCode.replaceAll('{{base_url}}', this._baseUrl ?? '')
+      });
+      const reloadCode = `
+      ${this._SERVER_VAR}.dispose()
+      ${this._SERVER_VAR}.reload(app)
+      `;
+      await this.executeCode({ code: reloadCode }, true);
+    }
+  }
 
-  private _SEND_WEBSOCKET_FUNCTION = '__jupyterpack_tornado_receive_ws_message';
+  protected _SERVER_VAR = '__jupyterpack_tornado_server';
 }