@difizen/libro-jupyter 0.1.32 → 0.1.34

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,
+    });
+  }
+}

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);
+  }
+}