jupyterpack 0.3.0 → 0.5.1

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> {
@@ -51,7 +54,9 @@ export class JupyterPackWidgetFactory extends ABCWidgetFactory<JupyterPackDocWid
         }
         case JupyterPackFramework.DASH:
         case JupyterPackFramework.STREAMLIT:
-        case JupyterPackFramework.TORNADO: {
+        case JupyterPackFramework.TORNADO:
+        case JupyterPackFramework.STARLETTE:
+        case JupyterPackFramework.SHINY: {
           const model = new PythonWidgetModel({
             jpackModel,
             context,
@@ -72,9 +77,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/baseServer.ts

@@ -0,0 +1,245 @@
+import { KernelExecutor } from './kernelExecutor';
+import websocketPatch from '../websocket/websocket.js?raw';
+import {
+  IDict,
+  IBasePythonServer,
+  IKernelExecutor,
+  JupyterPackFramework
+} from '../type';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+import {
+  arrayBufferToBase64,
+  base64ToArrayBuffer,
+  base64ToString,
+  isBinaryContentType,
+  stringOrNone
+} from '../tools';
+
+export abstract class BasePythonServer implements IBasePythonServer {
+  constructor(options: KernelExecutor.IOptions) {
+    this._kernelExecutor = new KernelExecutor(options);
+    this._wsPatch = websocketPatch.replaceAll('"use strict";', '');
+  }
+
+  abstract reloadPythonServer(options: {
+    entryPath?: string;
+    initCode?: string;
+  }): Promise<void>;
+
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+
+  get kernelExecutor() {
+    return this._kernelExecutor;
+  }
+
+  dispose(): void {
+    if (this._isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this.disposePythonServer()
+      .then(() => {
+        this._kernelExecutor.dispose();
+      })
+      .catch(console.error);
+  }
+  async init(options: {
+    entryPath?: string;
+    initCode?: string;
+    instanceId: string;
+    kernelClientId: string;
+  }): Promise<void> {
+    const patchCode = `
+    from jupyterpack.common import patch_all
+    patch_all()
+    `;
+    await this._kernelExecutor.executeCode({ code: patchCode });
+  }
+
+  async disposePythonServer(): Promise<void> {
+    await this.kernelExecutor.executeCode({
+      code: `${this._server_var}.dispose()`
+    });
+    for (const element of this._openedWebsockets) {
+      await this.closeWebsocket(element);
+    }
+  }
+
+  getResponseFunctionFactory(options: {
+    urlPath: string;
+    method: string;
+    headers: IDict;
+    params?: string;
+    content?: string;
+  }) {
+    const { method, urlPath, headers, params, content } = options;
+    const code = `await ${this._server_var}.get_response("${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 code = `await ${this._server_var}.open_ws("${instanceId}", "${kernelId}", "${wsUrl}", ${stringOrNone(protocol)})`;
+    return code;
+  }
+
+  closeWebsocketFunctionFactory(options: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+  }): string {
+    const { instanceId, kernelId, wsUrl } = options;
+    const code = `await ${this._server_var}.close_ws("${instanceId}", "${kernelId}", "${wsUrl}")`;
+    return code;
+  }
+
+  sendWebsocketMessageFunctionFactory(options: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+    message: string;
+  }): string {
+    const { instanceId, kernelId, wsUrl, message } = options;
+    const code = `await ${this._server_var}.receive_ws_message("${instanceId}", "${kernelId}", "${wsUrl}", '''${message}''')`;
+    return code;
+  }
+
+  async openWebsocket(options: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+    protocol?: string;
+  }): Promise<void> {
+    const code = this.openWebsocketFunctionFactory(options);
+    if (code) {
+      try {
+        await this._kernelExecutor.executeCode({ code });
+        this._openedWebsockets.push(options);
+      } catch (e) {
+        console.error('Failed to open websocket', e);
+      }
+    } else {
+      throw new Error('Missing websocket open code');
+    }
+  }
+
+  async closeWebsocket(options: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+  }): Promise<void> {
+    const code = this.closeWebsocketFunctionFactory(options);
+    if (code) {
+      await this._kernelExecutor.executeCode({ code });
+    } else {
+      throw new Error('Missing websocket close code');
+    }
+  }
+
+  async sendWebsocketMessage(options: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+    message: string;
+  }): Promise<void> {
+    const code = this.sendWebsocketMessageFunctionFactory(options);
+    if (code) {
+      await this._kernelExecutor.executeCode({ code });
+    } else {
+      throw new Error('Missing websocket send code');
+    }
+  }
+
+  async getResponse(options: {
+    method: string;
+    urlPath: string;
+    headers: IDict;
+    requestBody?: ArrayBuffer;
+    params?: string;
+  }): Promise<IDict> {
+    const { method, urlPath, requestBody, params, headers } = options;
+    const content = requestBody ? arrayBufferToBase64(requestBody) : undefined;
+    const code = this.getResponseFunctionFactory({
+      method,
+      urlPath,
+      headers,
+      params,
+      content
+    });
+    const raw = await this._kernelExecutor.executeCode({ code }, true);
+    if (!raw) {
+      throw new Error(`Missing response for ${urlPath}`);
+    }
+    const jsonStr = raw.replaceAll("'", '');
+    const obj: {
+      headers: string;
+      status_code: number;
+      content: string;
+    } = JSON.parse(jsonStr);
+    const responseHeaders: IDict<string> = JSON.parse(atob(obj.headers));
+    const contentType: string | undefined =
+      responseHeaders?.['Content-Type'] ?? responseHeaders?.['content-type'];
+    let responseContent: string | Uint8Array;
+
+    if (isBinaryContentType(contentType)) {
+      responseContent = base64ToArrayBuffer(obj.content);
+    } else {
+      responseContent = base64ToString(obj.content);
+    }
+
+    if (contentType && contentType.toLowerCase().includes('text/html')) {
+      responseContent = (responseContent as string).replace(
+        '<head>',
+        `<head>\n<script>\n${this._wsPatch}\n</script>\n`
+      );
+    }
+
+    const decodedObj = {
+      status_code: obj.status_code,
+      headers: responseHeaders,
+      content: responseContent
+    };
+
+    return decodedObj;
+  }
+
+  protected buildBaseURL(options: {
+    instanceId: string;
+    kernelClientId: string;
+    framework: JupyterPackFramework;
+  }) {
+    const { instanceId, kernelClientId, framework } = options;
+    const fullLabextensionsUrl = PageConfig.getOption('fullLabextensionsUrl');
+
+    const baseURL = URLExt.join(
+      fullLabextensionsUrl,
+      'jupyterpack/static',
+      instanceId,
+      framework,
+      kernelClientId,
+      '/'
+    );
+    this._baseUrl = baseURL;
+
+    return baseURL;
+  }
+
+  protected _baseUrl: string | undefined;
+  protected readonly _openedWebsockets: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+  }[] = [];
+  protected readonly _server_var = '__jupyterpack_python_server';
+
+  private _kernelExecutor: IKernelExecutor;
+  private _isDisposed: boolean = false;
+  private _wsPatch: string;
+}

package/src/pythonServer/dash/dashServer.ts

@@ -1,10 +1,7 @@
-import { stringOrNone } from '../../tools';
-import { IDict, JupyterPackFramework } from '../../type';
-import { patch } from '../common/generatedPythonFiles';
-import { KernelExecutor } from '../kernelExecutor';
-import { bootstrap, dashLoader } from './generatedPythonFiles';
+import { JupyterPackFramework } from '../../type';
+import { BasePythonServer } from '../baseServer';
 
-export class DashServer extends KernelExecutor {
+export class DashServer extends BasePythonServer {
   async init(options: {
     initCode?: string;
     instanceId: string;
@@ -18,40 +15,33 @@ export class DashServer extends KernelExecutor {
       kernelClientId,
       framework: JupyterPackFramework.DASH
     });
-    await this.executeCode({ code: patch });
-    await this.executeCode({
-      code: bootstrap.replaceAll('{{base_url}}', baseURL)
+    await this.kernelExecutor.executeCode({
+      code: `
+      import os
+      os.environ["DASH_URL_BASE_PATHNAME"] = "${baseURL}"
+      `
     });
     if (initCode) {
-      await this.executeCode({ code: initCode });
+      await this.kernelExecutor.executeCode({ code: initCode });
     }
-    await this.executeCode({ code: dashLoader });
+    const loaderCode = `
+      from jupyterpack.dash import DashServer
+      ${this._server_var} = DashServer(app, "${baseURL}")
+      `;
+    await this.kernelExecutor.executeCode({ code: loaderCode });
   }
 
-  getResponseFunctionFactory(options: {
-    urlPath: string;
-    method: string;
-    headers: IDict;
-    params?: string;
-    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)})`;
-    return code;
-  }
-
-  async disposePythonServer(): Promise<void> {
-    //no-op
-  }
-
-  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.kernelExecutor.executeCode({ code: initCode });
+    }
+    await this.kernelExecutor.executeCode(
+      { code: `${this._server_var}.reload(app)` },
+      true
+    );
   }
-
-  private DASH_GET_RESPONSE_FUNCTION = '__jupyterpack_dash_get_response';
 }

package/src/pythonServer/index.ts

@@ -1,18 +1,22 @@
-import { IKernelExecutor, JupyterPackFramework } from '../type';
+import { IBasePythonServer, JupyterPackFramework } from '../type';
 import { DashServer } from './dash/dashServer';
 import { KernelExecutor } from './kernelExecutor';
+import { ShinyServer } from './shiny/shinyServer';
+import { StarletteServer } from './starlette/starletteServer';
 import { StreamlitServer } from './streamlit/streamlitServer';
 import { TornadoServer } from './tornado/tornadoServer';
 
-type KernelExecutorConstructor = new (
+type BasePythonServerConstructor = new (
   options: KernelExecutor.IOptions
-) => IKernelExecutor;
+) => IBasePythonServer;
 
 export const PYTHON_SERVER = new Map<
   JupyterPackFramework,
-  KernelExecutorConstructor
+  BasePythonServerConstructor
 >([
   [JupyterPackFramework.DASH, DashServer],
   [JupyterPackFramework.STREAMLIT, StreamlitServer],
-  [JupyterPackFramework.TORNADO, TornadoServer]
+  [JupyterPackFramework.TORNADO, TornadoServer],
+  [JupyterPackFramework.SHINY, ShinyServer],
+  [JupyterPackFramework.STARLETTE, StarletteServer]
 ]);