@difizen/libro-jupyter 0.2.0 → 0.2.2

package/src/widget/box/view.tsx

@@ -0,0 +1,112 @@
+import type { CellView } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
+import {
+  view,
+  transient,
+  useInject,
+  ViewInstance,
+  prop,
+  inject,
+  ViewOption,
+  ViewRender,
+  getOrigin,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type { IWidgets, IWidgetViewProps, WidgetState } from '../protocol.js';
+import { defaultWidgetState } from '../protocol.js';
+import { WidgetView } from '../widget-view.js';
+
+import './index.less';
+
+const WidgetRender = (props: {
+  cell?: CellView;
+  widgets: IWidgets | undefined;
+  modelId: string;
+}) => {
+  const { widgets, modelId, cell } = props;
+  if (!widgets) {
+    return null;
+  }
+  let widgetView;
+  try {
+    widgetView = widgets.getModel(modelId);
+  } catch (ex) {
+    //
+  }
+  if (!widgetView) {
+    return null;
+  }
+  if (cell) {
+    widgetView.setCell(getOrigin(cell));
+  }
+  if (widgetView.isCommClosed) {
+    return null;
+  }
+  return (
+    <div className="libro-widget-render-container">
+      <div className="libro-widget-render">
+        <ViewRender view={widgetView} />
+      </div>
+    </div>
+  );
+};
+
+export const LibroWidgetBoxComponent = forwardRef<HTMLDivElement>(
+  function LibroWidgetBoxComponent(props, ref) {
+    const widget = useInject<VBoxWidget>(ViewInstance);
+
+    return (
+      <div className={`libro-widget-box ${widget.getCls()}`} ref={ref}>
+        {widget.state.children.map((modelId) => (
+          <WidgetRender
+            key={modelId}
+            cell={widget.cell}
+            widgets={widget.widgets}
+            modelId={modelId}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+interface BoxState extends WidgetState {
+  children: string[];
+  box_style?: string;
+}
+
+@transient()
+@view('libro-widget-box-view')
+export class VBoxWidget extends WidgetView {
+  override view = LibroWidgetBoxComponent;
+
+  @prop()
+  override state: BoxState = {
+    ...defaultWidgetState,
+    children: [],
+  };
+
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LibroContextKey) libroContextKey: LibroContextKey,
+  ) {
+    super(props, libroContextKey);
+    this.initialize(props);
+  }
+
+  protected initialize(props: IWidgetViewProps): void {
+    const attributes = props.attributes;
+    this.setState(attributes);
+  }
+
+  getCls = () => {
+    if (this.model_name === 'HBoxModel') {
+      return 'libro-widget-hbox';
+    }
+    if (this.model_name === 'VBoxModel') {
+      return 'libro-widget-vbox';
+    }
+    return '';
+  };
+}

package/src/widget/comm.ts

@@ -0,0 +1,152 @@
+import type { JSONObject } from '@difizen/libro-common';
+import type { IComm, IKernelConnection, IShellFuture } from '@difizen/libro-kernel';
+import { inject, transient } from '@difizen/mana-app';
+
+import type { ICallbacks, IClassicComm } from './protocol.js';
+import { WidgetCommOption } from './protocol.js';
+
+/**
+ * Public constructor
+ * @param  {IComm} jsServicesComm - @jupyterlab/services IComm instance
+ */
+@transient()
+export class Comm implements IClassicComm {
+  constructor(@inject(WidgetCommOption) options: WidgetCommOption) {
+    this.jsServicesComm = options.comm;
+  }
+
+  /**
+   * Comm id
+   * @return {string}
+   */
+  get comm_id(): string {
+    return this.jsServicesComm.commId;
+  }
+
+  /**
+   * Target name
+   * @return {string}
+   */
+  get target_name(): string {
+    return this.jsServicesComm.targetName;
+  }
+
+  /**
+   * Opens a sibling comm in the backend
+   * @param  data
+   * @param  callbacks
+   * @param  metadata
+   * @return msg id
+   */
+  open(
+    data: JSONObject,
+    callbacks?: ICallbacks,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): string {
+    const future = this.jsServicesComm.open(data, metadata, buffers);
+    this._hookupCallbacks(future, callbacks);
+    return future.msg.header.msg_id;
+  }
+
+  /**
+   * Sends a message to the sibling comm in the backend
+   * @param  data
+   * @param  callbacks
+   * @param  metadata
+   * @param  buffers
+   * @return message id
+   */
+  send(
+    data: JSONObject,
+    callbacks?: ICallbacks,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): string {
+    const future = this.jsServicesComm.send(data, metadata, buffers);
+    this._hookupCallbacks(future, callbacks);
+    return future.msg.header.msg_id;
+  }
+
+  /**
+   * Closes the sibling comm in the backend
+   * @param  data
+   * @param  callbacks
+   * @param  metadata
+   * @return msg id
+   */
+  close(
+    data?: JSONObject,
+    callbacks?: ICallbacks,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): string {
+    const future = this.jsServicesComm.close(data, metadata, buffers);
+    this._hookupCallbacks(future, callbacks);
+    return future.msg.header.msg_id;
+  }
+
+  /**
+   * Register a message handler
+   * @param  callback, which is given a message
+   */
+  onMsg(callback: (x: any) => void): void {
+    this.jsServicesComm.onMsg = callback.bind(this);
+  }
+
+  /**
+   * Register a handler for when the comm is closed by the backend
+   * @param  callback, which is given a message
+   */
+  onClose(callback: (x: any) => void): void {
+    this.jsServicesComm.onClose = callback.bind(this);
+  }
+
+  /**
+   * Hooks callback object up with @jupyterlab/services IKernelFuture
+   * @param  @jupyterlab/services IKernelFuture instance
+   * @param  callbacks
+   */
+  _hookupCallbacks(future: IShellFuture, callbacks?: ICallbacks): void {
+    if (callbacks) {
+      future.onReply = function (msg): void {
+        if (callbacks.shell && callbacks.shell['reply']) {
+          callbacks.shell['reply'](msg);
+        }
+      };
+
+      future.onStdin = function (msg): void {
+        if (callbacks.input) {
+          callbacks.input(msg);
+        }
+      };
+
+      future.onIOPub = function (msg): void {
+        if (callbacks.iopub) {
+          if (callbacks.iopub['status'] && msg.header.msg_type === 'status') {
+            callbacks.iopub['status'](msg);
+          } else if (
+            callbacks.iopub['clear_output'] &&
+            msg.header.msg_type === 'clear_output'
+          ) {
+            callbacks.iopub['clear_output'](msg);
+          } else if (callbacks.iopub['output']) {
+            switch (msg.header.msg_type) {
+              case 'display_data':
+              case 'execute_result':
+              case 'stream':
+              case 'error':
+                callbacks.iopub['output'](msg);
+                break;
+              default:
+                break;
+            }
+          }
+        }
+      };
+    }
+  }
+
+  jsServicesComm: IComm;
+  kernel: IKernelConnection;
+}

package/src/widget/index.less

@@ -0,0 +1,7 @@
+.libro-widget-render {
+  margin: 10px 24px;
+}
+
+.libro-widget-render:empty {
+  margin: unset;
+}

package/src/widget/index.ts

@@ -0,0 +1,9 @@
+export * from './widget-render.js';
+export * from './widget-rendermime-contribution.js';
+export * from './libro-widgets.js';
+export * from './widget-view.js';
+export * from './widget-manager.js';
+export * from './comm.js';
+export * from './widget-view-contribution.js';
+export * from './module.js';
+export * from './protocol.js';

package/src/widget/instance-progress/contribution.ts

@@ -0,0 +1,20 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../protocol.js';
+import { WidgetViewContribution } from '../protocol.js';
+
+import { InstancesProgressWidget } from './view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class InstancesProgressWidgetViewContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (attributes._model_name === 'InstancesProgressModel') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(InstancesProgressWidget, props);
+  }
+}

package/src/widget/instance-progress/index.ts

@@ -0,0 +1,2 @@
+export * from './contribution.js';
+export * from './view.js';

package/src/widget/instance-progress/view.tsx

@@ -0,0 +1,155 @@
+import { LibroContextKey } from '@difizen/libro-core';
+import type { KernelMessage } from '@difizen/libro-kernel';
+import {
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+  transient,
+  inject,
+  prop,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type { IWidgetViewProps } from '../protocol.js';
+import type { InstanceRecord, InstancesRecords, ProgressItem } from '../protocol.js';
+import { WidgetView } from '../widget-view.js';
+
+export interface ProgressOverviewProps {
+  progressMap: Record<string, ProgressItem>;
+  workingProgressKeys: string[];
+  prefix: string;
+  suffix: string;
+}
+
+export const LibroInstancesProgressWidgetViewComponent = forwardRef<HTMLDivElement>(
+  function LibroInstancesProgressWidgetViewComponent(_props, ref) {
+    const widgetView = useInject<InstancesProgressWidget>(ViewInstance);
+    if (widgetView.isCommClosed) {
+      return null;
+    }
+    return (
+      <div ref={ref} className="libro-instances-progress-widget">
+        <span style={{ paddingRight: 5 }}>{widgetView.prefix}</span>
+        <span>
+          {widgetView.workingProgressKeys.map((progressKey) => {
+            const progressItem = widgetView.progressMap[progressKey];
+            return (
+              <a
+                className="pyodps-progress-launcher"
+                style={{ marginRight: 5 }}
+                key={progressKey}
+              >
+                {progressItem && progressItem.name}
+              </a>
+            );
+          })}
+        </span>
+        <span>{widgetView.suffix}</span>
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-widget-instances-progress-view')
+export class InstancesProgressWidget extends WidgetView {
+  override view = LibroInstancesProgressWidgetViewComponent;
+  @prop()
+  prefix: string;
+  @prop()
+  suffix: string;
+  progressMap: Record<string, ProgressItem> = {};
+  workingProgressKeys: string[] = []; // Order of groups by time of insertion
+  instanceRecords: InstancesRecords = {};
+  modalVisible = false;
+  modalProgressItemKey = '';
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LibroContextKey) libroContextKey: LibroContextKey,
+  ) {
+    super(props, libroContextKey);
+    this.prefix = props.attributes.prefix;
+    this.suffix = props.attributes.suffix;
+  }
+  updateRecords(progressKey: string) {
+    const progressItem = this.progressMap[progressKey];
+    if (progressItem) {
+      const { instances = [] } = progressItem;
+      instances.forEach((instance) => {
+        const { id, status } = instance;
+        if (!this.instanceRecords[id]) {
+          this.instanceRecords[id] = {
+            startDate: Date.now(),
+          } as InstanceRecord;
+        }
+        if (status === 'Terminated') {
+          if (!this.instanceRecords[id].endDate) {
+            this.instanceRecords[id].endDate = Date.now();
+          }
+        }
+      });
+    }
+  }
+  /**
+   * Handle incoming comm msg.
+   */
+  override handleCommMsg(msg: KernelMessage.ICommMsgMsg): Promise<void> {
+    const data = msg.content.data as any;
+    const method = data.method;
+    switch (method) {
+      case 'update':
+        if (data.state.prefix) {
+          this.prefix = data.state.prefix;
+        }
+        if (data.state.suffix) {
+          this.suffix = data.state.suffix;
+        }
+      // eslint-disable-next-line no-fallthrough
+      case 'custom':
+        // eslint-disable-next-line no-case-declarations
+        const customMsg = data.content;
+        if (customMsg) {
+          // message format: '{"action": "action", content: ["content1", "content2"]}'
+          const msgObj: { action: 'update' | 'delete' | 'clear'; content: string[] } =
+            JSON.parse(customMsg);
+          const action: string = msgObj.action;
+          const content: string[] = [];
+          if (msgObj.content) {
+            content.push(...msgObj.content);
+          }
+
+          switch (action) {
+            case 'update':
+              content.forEach((groupJson) => {
+                const parsedProgressItem: ProgressItem = JSON.parse(groupJson);
+                if (!this.progressMap[parsedProgressItem.key]) {
+                  this.workingProgressKeys.push(parsedProgressItem.key);
+                }
+                this.progressMap[parsedProgressItem.key] = parsedProgressItem;
+                this.updateRecords(parsedProgressItem.key);
+              });
+              // ? TODO: 发出一个更新 modal signal 的信号，这里需要取到之前的 key
+              break;
+            case 'delete':
+              content.forEach((groupKey: string) => {
+                if (!this.progressMap[groupKey]) {
+                  return;
+                }
+                const i = this.workingProgressKeys.indexOf(groupKey);
+                if (i >= 0) {
+                  this.workingProgressKeys.splice(i, 1);
+                }
+              });
+              break;
+            case 'clear':
+              this.progressMap = {};
+              this.workingProgressKeys = [];
+              // ? TODO: 发出更新 overview 以及 modal 的 signal
+              break;
+            default:
+          }
+        }
+    }
+    return Promise.resolve();
+  }
+}

package/src/widget/libro-widgets.ts

@@ -0,0 +1,223 @@
+import type { JSONObject } from '@difizen/libro-common';
+import type { IKernelConnection, KernelMessage } from '@difizen/libro-kernel';
+import type { Contribution } from '@difizen/mana-app';
+import { contrib, inject, Priority, prop, transient } from '@difizen/mana-app';
+import { Emitter } from '@difizen/mana-app';
+
+import type { Comm } from './comm.js';
+import type {
+  ISerializedState,
+  IWidgets,
+  IWidgetViewOptions,
+  IClassicComm,
+  WidgetCommOption,
+} from './protocol.js';
+import {
+  LibroWidgetCommFactory,
+  WidgetsOption,
+  WidgetViewContribution,
+} from './protocol.js';
+import { put_buffers, reject } from './utils.js';
+import { PROTOCOL_VERSION } from './version.js';
+import type { WidgetView } from './widget-view.js';
+
+const PROTOCOL_MAJOR_VERSION = PROTOCOL_VERSION.split('.', 1)[0];
+
+@transient()
+export class LibroWidgets implements IWidgets {
+  @contrib(WidgetViewContribution)
+  WidgetViewProvider: Contribution.Provider<WidgetViewContribution>;
+  widgetEmitter: Emitter<{ WidgetViewName: string }> = new Emitter();
+  widgetCommFactory: (options: WidgetCommOption) => Comm;
+  kernelConnection: IKernelConnection;
+
+  constructor(
+    @inject(WidgetsOption) options: WidgetsOption,
+    @inject(LibroWidgetCommFactory)
+    widgetCommFactory: (options: WidgetCommOption) => Comm,
+  ) {
+    this.kernelConnection = options.kc;
+    this.id = options.id;
+    this.widgetCommFactory = widgetCommFactory;
+    this.kernelConnection.registerCommTarget(this.commTargetName, async (comm, msg) => {
+      const widgetComm = this.widgetCommFactory({ comm });
+      await this.handleCommOpen(widgetComm, msg);
+    });
+  }
+  get onWidgetRender() {
+    return this.widgetEmitter.event;
+  }
+
+  protected findProvider(attributes: any): WidgetViewContribution {
+    const prioritized = Priority.sortSync(
+      this.WidgetViewProvider.getContributions(),
+      (contribution) => contribution.canHandle(attributes),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0]!;
+  }
+
+  /**
+   * Create a comm which can be used for communication for a widget.
+   *
+   * If the data/metadata is passed in, open the comm before returning (i.e.,
+   * send the comm_open message). If the data and metadata is undefined, we
+   * want to reconstruct a comm that already exists in the kernel, so do not
+   * open the comm by sending the comm_open message.
+   *
+   * @param comm_target_name Comm target name
+   * @param model_id The comm id
+   * @param data The initial data for the comm
+   * @param metadata The metadata in the open message
+   */
+  async createComm(
+    comm_target_name: string,
+    model_id?: string,
+    data?: JSONObject,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): Promise<IClassicComm> {
+    const kernel = this.kernelConnection;
+    if (!kernel) {
+      throw new Error('No current kernel');
+    }
+    const comm = kernel.createComm(comm_target_name, model_id);
+    if (data || metadata) {
+      comm.open(data, metadata, buffers);
+    }
+    return this.widgetCommFactory({ comm });
+  }
+
+  /**
+   * Get a model by model id.
+   *
+   * #### Notes
+   * If the model is not found, throw error.
+   *
+   * If you would like to synchronously test if a model exists, use .hasModel().
+   */
+  getModel(model_id: string): WidgetView {
+    const model = this.models.get(model_id);
+    if (model === undefined) {
+      throw new Error('widget model not found');
+    }
+    return model;
+  }
+
+  /**
+   * Returns true if the given model is registered, otherwise false.
+   *
+   * #### Notes
+   * This is a synchronous way to check if a model is registered.
+   */
+  hasModel(model_id: string): boolean {
+    return this.models.get(model_id) !== undefined;
+  }
+
+  /**
+   * Handle when a comm is opened.
+   */
+  async handleCommOpen(
+    comm: IClassicComm,
+    msg: KernelMessage.ICommOpenMsg,
+  ): Promise<WidgetView> {
+    const protocolVersion = ((msg.metadata || {})['version'] as string) || '';
+    if (protocolVersion.split('.', 1)[0] !== PROTOCOL_MAJOR_VERSION) {
+      const error = `Wrong widget protocol version: received protocol version '${protocolVersion}', but was expecting major version '${PROTOCOL_MAJOR_VERSION}'`;
+      console.error(error);
+      return Promise.reject(error);
+    }
+    const data = msg.content.data as unknown as ISerializedState;
+    const buffer_paths = data.buffer_paths || [];
+    const buffers = msg.buffers || [];
+    put_buffers(data.state, buffer_paths, buffers);
+    // this.createComm(msg.content.target_name, msg.content.comm_id, msg.content.data, msg.metadata);
+    return this.newWidgetView(data.state, {
+      model_id: msg.content.comm_id,
+      comm,
+    }).catch(reject('Could not create a model.', true));
+  }
+
+  registerWidgetView(model_id: string, model: Promise<WidgetView>): void {
+    model
+      .then((model) => {
+        this.models.set(model_id, model);
+        this.models.set(model.toModelKey(), model);
+        this.widgetEmitter.fire({ WidgetViewName: model.model_name });
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }
+
+  handleCommClose(msg: KernelMessage.ICommCloseMsg) {
+    const comm_id = msg.content.comm_id;
+    const model = this.getModel(comm_id);
+    model.isCommClosed = true;
+  }
+
+  unregisterWidgetView(model_id: string): void {
+    const model = this.models.get(model_id);
+    model?.dispose();
+    this.models.delete(model_id);
+  }
+
+  async newWidgetView(
+    attributes: any,
+    options: IWidgetViewOptions,
+  ): Promise<WidgetView> {
+    const model_id = options.model_id;
+    if (!model_id) {
+      throw new Error(
+        'Neither comm nor model_id provided in options object. At least one must exist.',
+      );
+    }
+    options.model_id = model_id;
+    const provider = this.findProvider(attributes);
+    const WidgetView = provider.factory({
+      attributes: attributes,
+      options: options,
+      widgetsId: this.id,
+    });
+    this.registerWidgetView(model_id, WidgetView);
+    return WidgetView;
+  }
+
+  /**
+   * Close all widgets and empty the widget state.
+   * @return Promise that resolves when the widget state is cleared.
+   */
+  clearState() {
+    this.models.clear();
+  }
+  /**
+   * Disconnect the widget manager from the kernel, setting each model's comm
+   * as dead.
+   */
+  disconnect(): void {
+    // this.models.forEach(model => model.clear());
+  }
+  /**
+   * Dictionary of model ids and model instance promises
+   */
+  @prop()
+  protected models: Map<string, WidgetView> = new Map();
+
+  /**
+   * The comm target name to register
+   */
+  id: string;
+  readonly commTargetName = 'jupyter.widget';
+
+  /**
+   * Serialize the model.  See the deserialization function at the top of this file
+   * and the kernel-side serializer/deserializer.
+   */
+  toJSON(): string {
+    return JSON.stringify({
+      kc_id: this.kernelConnection.id,
+      id: this.id,
+    });
+  }
+}