@difizen/libro-jupyter 0.2.0 → 0.2.2

package/src/widget/module.ts

@@ -0,0 +1,73 @@
+import { LibroKernelManageModule } from '@difizen/libro-kernel';
+import { ManaModule } from '@difizen/mana-app';
+
+import { VBoxWidget, VBoxWidgetContribution } from './box/index.js';
+import { Comm } from './comm.js';
+import {
+  InstancesProgressWidget,
+  InstancesProgressWidgetViewContribution,
+} from './instance-progress/index.js';
+import { LibroWidgets } from './libro-widgets.js';
+import { ProgressWidget, ProgressWidgetViewContribution } from './progress/index.js';
+import {
+  LibroWidgetCommFactory,
+  LibroWidgetsFactory,
+  WidgetCommOption,
+  WidgetsOption,
+  WidgetViewContribution,
+} from './protocol.js';
+import { LibroWidgetManager } from './widget-manager.js';
+import { LibroWidgetMimeContribution } from './widget-rendermime-contribution.js';
+import { DefaultWidgetViewContribution } from './widget-view-contribution.js';
+import { WidgetView } from './widget-view.js';
+
+export const BaseWidgetModule = ManaModule.create()
+  .contribution(WidgetViewContribution)
+  .register(
+    Comm,
+    {
+      token: LibroWidgetCommFactory,
+      useFactory: (ctx) => {
+        return (options: WidgetCommOption) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: WidgetCommOption,
+            useValue: options,
+          });
+          return child.get(Comm);
+        };
+      },
+    },
+    LibroWidgets,
+    {
+      token: LibroWidgetsFactory,
+      useFactory: (ctx) => {
+        return (options: WidgetsOption) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: WidgetsOption,
+            useValue: options,
+          });
+          return child.get(LibroWidgets);
+        };
+      },
+    },
+    LibroWidgetManager,
+    WidgetView,
+    DefaultWidgetViewContribution,
+    LibroWidgetMimeContribution,
+  )
+  .dependOn(LibroKernelManageModule);
+
+export const WidgetModule = ManaModule.create()
+  .register(
+    VBoxWidget,
+    VBoxWidgetContribution,
+
+    ProgressWidget,
+    ProgressWidgetViewContribution,
+
+    InstancesProgressWidget,
+    InstancesProgressWidgetViewContribution,
+  )
+  .dependOn(BaseWidgetModule);

package/src/widget/progress/contribution.ts

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

package/src/widget/progress/index.ts

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

package/src/widget/progress/progressBar.tsx

@@ -0,0 +1,29 @@
+import { Progress } from 'antd';
+
+/**
+ * Props for the ProgressBar.
+ */
+export interface IProgressBarProps {
+  /**
+   * The current progress percentage, from 0 to 100
+   */
+  percent: number;
+  /**
+   * Width of progress bar in pixel.
+   */
+  width?: number;
+}
+
+export function ProgressBar(props: IProgressBarProps) {
+  return (
+    <>
+      <Progress
+        strokeLinecap="butt"
+        percent={props.percent}
+        strokeWidth={18}
+        showInfo={false}
+        style={{ width: '200px' }}
+      />
+    </>
+  );
+}

package/src/widget/progress/view.tsx

@@ -0,0 +1,70 @@
+import type { JSONObject } from '@difizen/libro-common';
+import { LibroContextKey } from '@difizen/libro-core';
+import {
+  view,
+  ViewOption,
+  transient,
+  useInject,
+  ViewInstance,
+  inject,
+  prop,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type { IWidgetViewProps, WidgetState } from '../protocol.js';
+import { defaultWidgetState } from '../protocol.js';
+import { WidgetView } from '../widget-view.js';
+
+import { ProgressBar } from './progressBar.js';
+
+export const LibroProgressWidgetComponent = forwardRef<HTMLDivElement>(
+  function LibroProgressWidgetComponent() {
+    const widgetView = useInject<ProgressWidget>(ViewInstance);
+    const percent =
+      widgetView.state.max && widgetView.state.min
+        ? widgetView.state.value / ((widgetView.state.max - widgetView.state.min) / 100)
+        : 0;
+    if (widgetView.isCommClosed) {
+      return null;
+    }
+    return (
+      <div className="libro-progress-widget">
+        <div className="libro-progress-widget-description">
+          {widgetView.state.description}
+        </div>
+        <ProgressBar percent={percent} />
+      </div>
+    );
+  },
+);
+
+interface ProgressState extends WidgetState {
+  max?: number;
+  min?: number;
+  bar_style?: string;
+  value: number;
+}
+@transient()
+@view('libro-widget-progress-view')
+export class ProgressWidget extends WidgetView {
+  override view = LibroProgressWidgetComponent;
+
+  @prop()
+  override state: JSONObject & ProgressState = {
+    ...defaultWidgetState,
+    max: 1,
+    min: 0,
+    value: 0,
+  };
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LibroContextKey) libroContextKey: LibroContextKey,
+  ) {
+    super(props, libroContextKey);
+
+    const attributes = props.attributes;
+    this.state.max = attributes.max;
+    this.state.min = attributes.min;
+    this.setState(attributes);
+  }
+}

package/src/widget/protocol.ts

@@ -0,0 +1,255 @@
+import type { JSONObject, JSONValue } from '@difizen/libro-common';
+import type { IComm, IKernelConnection, KernelMessage } from '@difizen/libro-kernel';
+import { Syringe } from '@difizen/mana-app';
+
+import type { WidgetView } from './widget-view.js';
+
+export interface IWidgetViewOptions {
+  model_id: string;
+  comm: IClassicComm;
+}
+
+export interface IWidgetViewProps {
+  attributes: any;
+  options: IWidgetViewOptions;
+  widgetsId: string;
+}
+
+/**
+ * A simple dictionary type.
+ */
+export type Dict<T> = Record<string, T>;
+
+export type BufferJSON =
+  | { [property: string]: BufferJSON }
+  | BufferJSON[]
+  | string
+  | number
+  | boolean
+  | null
+  | ArrayBuffer
+  | DataView;
+
+export interface ISerializedState {
+  state: JSONObject;
+  buffers: ArrayBuffer[];
+  buffer_paths: (string | number)[][];
+}
+
+/**
+ * The widget manager interface exposed on the Widget instances
+ */
+export interface IWidgets {
+  getModel: (model_id: string) => WidgetView;
+
+  /**
+   * 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;
+
+  /**
+   * Register a model instance promise with the manager.
+   *
+   * By registering the model, it can later be retrieved with `getModel`.
+   */
+  registerWidgetView: (model_id: string, model: Promise<WidgetView>) => void;
+
+  newWidgetView: (attributes: any, options: IWidgetViewOptions) => Promise<WidgetView>;
+}
+
+export const LibroWidgetsFactory = Symbol('LibroWidgetsFactory');
+export type LibroWidgetsFactory = (options: WidgetsOption) => IWidgets;
+export const WidgetsOption = Symbol('WidgetsOption');
+export interface WidgetsOption {
+  kc: IKernelConnection;
+  id: string;
+}
+
+export interface IWidgetView {
+  toJSON: () => string;
+  setState: (state: Dict<unknown>) => void;
+  handleCommMsg: (msg: KernelMessage.ICommMsgMsg) => Promise<void>;
+  model_id: string;
+  name: string;
+  module: string;
+
+  model_module: string;
+  model_name: string;
+  model_module_version: string;
+  view_module: string;
+  view_name: string | null;
+  view_module_version: string;
+  view_count: number | null;
+}
+
+export const IWidgetView = Symbol('IWidgetView');
+export const WidgetViewContribution = Syringe.defineToken('WidgetViewContribution');
+export interface WidgetViewContribution {
+  canHandle: (attributes: any) => number;
+  factory: (props: IWidgetViewProps) => Promise<WidgetView>;
+}
+
+export interface InstanceRecord {
+  startDate: number;
+  endDate: number;
+}
+
+interface Stage {
+  name: string;
+  backup_workers: number;
+  terminated_workers: number;
+  running_workers: number;
+  total_workers: number;
+  input_records: number;
+  output_records: number;
+  finished_percentage: number;
+}
+
+export interface Task {
+  name: string;
+  status: 'WAITING' | 'RUNNING' | 'SUCCESS' | 'FAILED' | 'SUSPENDED' | 'CANCELLED';
+  stages: Stage[];
+}
+
+export interface ProgressInstance {
+  id: string;
+  status: 'Running' | 'Suspended' | 'Terminated';
+  logview: string;
+  tasks: Task[];
+}
+
+export interface ProgressItem {
+  name: string;
+  key: string;
+  gen_time: string;
+  logView: string;
+  instances?: ProgressInstance[];
+}
+
+export type InstancesRecords = Record<string, InstanceRecord>;
+
+/**
+ * Callbacks for services shim comms.
+ */
+export interface ICallbacks {
+  shell?: Record<string, (msg: KernelMessage.IShellMessage) => void>;
+  iopub?: Record<string, (msg: KernelMessage.IIOPubMessage) => void>;
+  input?: (msg: KernelMessage.IStdinMessage) => void;
+}
+
+export const LibroWidgetCommFactory = Symbol('LibroWidgetCommFactory');
+export type LibroWidgetCommFactory = (options: WidgetCommOption) => IClassicComm;
+export const WidgetCommOption = Symbol('WidgetCommOption');
+export interface WidgetCommOption {
+  comm: IComm;
+}
+export interface IClassicComm {
+  /**
+   * Comm id
+   * @return {string}
+   */
+  comm_id: string;
+
+  /**
+   * Target name
+   * @return {string}
+   */
+  target_name: string;
+
+  /**
+   * Opens a sibling comm in the backend
+   * @param  data
+   * @param  callbacks
+   * @param  metadata
+   * @param  buffers
+   * @return msg id
+   */
+  open(
+    data: JSONValue,
+    callbacks?: ICallbacks,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): string;
+
+  /**
+   * Sends a message to the sibling comm in the backend
+   * @param  data
+   * @param  callbacks
+   * @param  metadata
+   * @param  buffers
+   * @return message id
+   */
+  send(
+    data: JSONValue,
+    callbacks?: ICallbacks,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): string;
+
+  /**
+   * Closes the sibling comm in the backend
+   * @param  data
+   * @param  callbacks
+   * @param  metadata
+   * @param  buffers
+   * @return msg id
+   */
+  close(
+    data?: JSONValue,
+    callbacks?: ICallbacks,
+    metadata?: JSONObject,
+    buffers?: ArrayBuffer[] | ArrayBufferView[],
+  ): string;
+
+  /**
+   * Register a message handler
+   * @param  callback, which is given a message
+   */
+  onMsg(callback: (x: any) => void): void;
+
+  /**
+   * 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;
+}
+
+export interface WidgetState {
+  msg_id?: string;
+  behavior?: string;
+  continuous_update: boolean;
+  description: string;
+  description_allow_html: boolean;
+  disabled: boolean;
+  layout?: string;
+  readout: boolean;
+  readout_format: string;
+  style?: string;
+  [key: string]: any;
+}
+
+export const defaultWidgetState: WidgetState = {
+  continuous_update: false,
+  description_allow_html: false,
+  description: '',
+  disabled: false,
+  readout: true,
+  readout_format: 'd',
+};
+
+export interface FormattableState {
+  readout: boolean;
+  readout_format: string;
+}
+
+export const defaultFormattableState: FormattableState = {
+  readout: true,
+  readout_format: 'd',
+};
+
+export interface OrientableState {
+  orientation: 'horizontal' | 'vertical';
+}

package/src/widget/utils.ts

@@ -0,0 +1,67 @@
+import type { BufferJSON, Dict } from './protocol.js';
+
+/**
+ * Takes an object 'state' and fills in buffer[i] at 'path' buffer_paths[i]
+ * where buffer_paths[i] is a list indicating where in the object buffer[i] should
+ * be placed
+ * Example: state = {a: 1, b: {}, c: [0, null]}
+ * buffers = [array1, array2]
+ * buffer_paths = [['b', 'data'], ['c', 1]]
+ * Will lead to {a: 1, b: {data: array1}, c: [0, array2]}
+ */
+export function put_buffers(
+  state: Dict<BufferJSON>,
+  buffer_paths: (string | number)[][],
+  buffers: (DataView | ArrayBuffer | ArrayBufferView | { buffer: ArrayBuffer })[],
+): void {
+  for (let i = 0; i < buffer_paths.length; i++) {
+    const buffer_path = buffer_paths[i];
+    // make sure the buffers are DataViews
+    let buffer = buffers[i];
+    if (!(buffer instanceof DataView)) {
+      buffer = new DataView(buffer instanceof ArrayBuffer ? buffer : buffer.buffer);
+    }
+    // say we want to set state[x][y][z] = buffer
+    let obj = state as any;
+    // we first get obj = state[x][y]
+    for (let j = 0; j < buffer_path.length - 1; j++) {
+      obj = obj[buffer_path[j]];
+    }
+    // and then set: obj[z] = buffer
+    obj[buffer_path[buffer_path.length - 1]] = buffer;
+  }
+}
+
+/**
+ * Creates a wrappable Promise rejection function.
+ *
+ * Creates a function that logs an error message before rethrowing
+ * the original error that caused the promise to reject.
+ */
+export function reject(message: string, log: boolean) {
+  return function promiseRejection(error: Error): never {
+    if (log) {
+      console.error(new Error(message));
+    }
+    throw error;
+  };
+}
+
+/**
+ * A polyfill for Object.assign
+ *
+ * This is from code that Typescript 2.4 generates for a polyfill.
+ */
+export const assign =
+  (Object as any).assign ||
+  function (t: any, ...args: any[]): any {
+    for (let i = 1; i < args.length; i++) {
+      const s = args[i];
+      for (const p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) {
+          t[p] = s[p];
+        }
+      }
+    }
+    return t;
+  };

package/src/widget/version.ts

@@ -0,0 +1,2 @@
+export const LIBRO_WIDGETS_VERSION = '2.0.0';
+export const PROTOCOL_VERSION = '2.1.0';

package/src/widget/widget-manager.ts

@@ -0,0 +1,45 @@
+import { LibroService } from '@difizen/libro-core';
+import type { IKernelConnection } from '@difizen/libro-kernel';
+import { KernelConnection, LibroKernelManager } from '@difizen/libro-kernel';
+import { inject, prop, singleton, ApplicationContribution } from '@difizen/mana-app';
+
+import type { LibroWidgets } from './libro-widgets.js';
+import { LibroWidgetsFactory } from './protocol.js';
+import type { WidgetsOption } from './protocol.js';
+
+@singleton({ contrib: ApplicationContribution })
+export class LibroWidgetManager implements ApplicationContribution {
+  @inject(LibroWidgetsFactory) widgetsFactory!: (
+    options: WidgetsOption,
+  ) => LibroWidgets;
+  @inject(LibroKernelManager) kernelManager: LibroKernelManager;
+  @inject(LibroService) libroService: LibroService;
+
+  initialize = () => {
+    this.kernelManager.onConnectToKernel((kc) => {
+      if (kc instanceof KernelConnection) {
+        this.getOrCreateWidgets(kc);
+      }
+    });
+  };
+
+  getOrCreateWidgets = (kc: IKernelConnection) => {
+    const widgets = this.widgets.get(kc.id);
+    if (widgets) {
+      return widgets;
+    }
+    const newWidgets = this.widgetsFactory({ kc, id: kc.id });
+    this.widgets.set(kc.id, newWidgets);
+    return newWidgets;
+  };
+
+  getWidgets(id: string) {
+    return this.widgets.get(id);
+  }
+
+  /**
+   * Dictionary of model ids and model instance promises
+   */
+  @prop()
+  protected widgets: Map<string, LibroWidgets> = new Map();
+}

package/src/widget/widget-render.tsx

@@ -0,0 +1,52 @@
+import type { BaseOutputView, LibroOutputView } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import { getOrigin, useInject, ViewInstance, ViewRender } from '@difizen/mana-app';
+import React from 'react';
+
+import './index.less';
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+import { LibroWidgetManager } from './widget-manager.js';
+
+export const WidgetRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+
+  // The widget will be rendered in the output through the MIME mechanism, obtaining the output context.
+  const output = useInject<LibroOutputView>(ViewInstance);
+
+  const widgetManager = useInject(LibroWidgetManager);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+  const libro = model.cell.parent;
+  if (!(libro.model instanceof LibroJupyterModel) || !libro.model.kernelConnection) {
+    return null;
+  }
+  const widgets = widgetManager.getOrCreateWidgets(
+    getOrigin(libro.model.kernelConnection),
+  );
+  const mimeType = defaultRenderMime.preferredMimeType(model);
+  if (mimeType) {
+    const model_id = JSON.parse(JSON.stringify(model.data[mimeType])).model_id;
+    if (model_id) {
+      const widgetView = widgets.getModel(model_id);
+      widgetView.setCell(getOrigin(output.cell));
+      if (widgetView.isCommClosed) {
+        return null;
+      }
+      return (
+        <div className="libro-widget-render-container">
+          <div className="libro-widget-render">
+            <ViewRender view={widgetView} />
+          </div>
+        </div>
+      );
+    }
+  }
+  return (
+    <div className="libro-widget-render-container">
+      <div className="libro-widget-render empty" />
+    </div>
+  );
+};

package/src/widget/widget-rendermime-contribution.ts

@@ -0,0 +1,36 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+import { LibroWidgetManager } from './widget-manager.js';
+import { WidgetRender } from './widget-render.js';
+
+@singleton({ contrib: RenderMimeContribution })
+export class LibroWidgetMimeContribution implements RenderMimeContribution {
+  @inject(LibroWidgetManager) libroWidgetManager: LibroWidgetManager;
+  canHandle = (model: BaseOutputView) => {
+    const libroModel = model.cell.parent.model;
+    let rank = 0;
+    if (libroModel instanceof LibroJupyterModel && libroModel.kernelConnection) {
+      const kc = libroModel.kernelConnection;
+      const widget = this.libroWidgetManager.getOrCreateWidgets(kc);
+      this.mimeTypes.forEach((mimeType) => {
+        const mimeData = model.data[mimeType];
+        if (mimeData && mimeData !== null) {
+          const data = JSON.parse(JSON.stringify(mimeData)).model_id;
+          if (Object.keys(model.data).includes(mimeType) && widget.hasModel(data)) {
+            rank = 100;
+          }
+        }
+      });
+    }
+    return rank;
+  };
+  renderType = 'widgetRenderer';
+  safe = true;
+  mimeTypes = ['application/vnd.jupyter.widget-view+json'];
+  allowClear = false;
+  render = WidgetRender;
+}

package/src/widget/widget-view-contribution.ts

@@ -0,0 +1,14 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from './protocol.js';
+import { WidgetViewContribution } from './protocol.js';
+import { WidgetView } from './widget-view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class DefaultWidgetViewContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = () => 1;
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(WidgetView, props);
+  }
+}