@difizen/libro-jupyter 0.0.2-alpha.0

package/src/libro-jupyter-protocol.ts

@@ -0,0 +1,59 @@
+import type {
+  ICellMetadata,
+  ICodeCellMetadata,
+  PartialJSONObject,
+  INotebookContent,
+} from '@difizen/libro-common';
+import { ExecutableCellModel } from '@difizen/libro-core';
+import type { IContentsModel } from '@difizen/libro-kernel';
+import type { Event as ManaEvent, Emitter } from '@difizen/mana-app';
+
+export interface ExecutionMeta extends PartialJSONObject {
+  'shell.execute_reply.started': string; // Kernel 开始执行任务时间在 metadata 中的 key
+  'shell.execute_reply.end': string; // Kernel 结束执行任务时间在 metadata 中的 key
+  to_execute: string; // 用户点击执行任务在 metadata 中的 key
+}
+
+export interface CodeCellMetadata extends ICodeCellMetadata {
+  execution: ExecutionMeta;
+}
+
+export type ExecutedWithKernelCellMeta = Partial<CodeCellMetadata | ICellMetadata>;
+
+export interface ExecutedWithKernelCellModel extends ExecutableCellModel {
+  metadata: ExecutedWithKernelCellMeta;
+  kernelExecuting: boolean;
+}
+
+export const ExecutedWithKernelCellModel = {
+  is: (arg: Record<any, any> | undefined): arg is ExecutedWithKernelCellModel => {
+    return (
+      ExecutableCellModel.is(arg) &&
+      'kernelExecuting' in arg &&
+      typeof (arg as any).kernelExecuting === 'boolean'
+    );
+  },
+};
+
+export type KernelStatusAndSelectorProvider = React.FC;
+export const KernelStatusAndSelectorProvider = Symbol(
+  'KernelStatusAndSelectorProvider',
+);
+
+export const LibroFileService = Symbol('LibroFileService');
+export interface LibroFileService {
+  fileSaveError: ManaEvent<Partial<IContentsModel>>;
+  fileSaveErrorEmitter: Emitter<
+    Partial<IContentsModel> & { msg?: string; cause?: string }
+  >;
+  read: (path: string) => Promise<IContentsModel | undefined>;
+  write: (
+    notebookContent: INotebookContent,
+    currentFileContents: IContentsModel,
+  ) => Promise<IContentsModel | undefined>;
+}
+
+export const ServerLaunchManager = Symbol('ServerLaunchManager');
+export interface ServerLaunchManager {
+  launch: () => Promise<any>;
+}

package/src/libro-jupyter-server-launch-manager.ts

@@ -0,0 +1,36 @@
+import { ServerManager, ServerConnection } from '@difizen/libro-kernel';
+import { inject, singleton } from '@difizen/mana-app';
+import { ApplicationContribution } from '@difizen/mana-app';
+
+import { ServerLaunchManager } from './libro-jupyter-protocol.js';
+
+@singleton({ contrib: [ServerLaunchManager, ApplicationContribution] })
+export class JupyterServerLaunchManager
+  implements ServerLaunchManager, ApplicationContribution
+{
+  protected serverManager: ServerManager;
+  protected serverConnection: ServerConnection;
+
+  constructor(
+    @inject(ServerManager)
+    serverManager: ServerManager,
+    @inject(ServerConnection)
+    serverConnection: ServerConnection,
+  ) {
+    this.serverManager = serverManager;
+    this.serverConnection = serverConnection;
+  }
+
+  async onStart() {
+    const host = location.host;
+    this.serverConnection.updateSettings({
+      baseUrl: `http://${host}`,
+      wsUrl: `ws://${host}`,
+    });
+    this.launch();
+  }
+
+  launch() {
+    return this.serverManager.launch();
+  }
+}

package/src/libro-jupyter-view.tsx

@@ -0,0 +1,24 @@
+import type { NotebookOption } from '@difizen/libro-core';
+import { CollapseServiceFactory, NotebookService } from '@difizen/libro-core';
+import { LibroView, notebookViewFactoryId } from '@difizen/libro-core';
+import { URI, view, ViewOption } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+
+@transient()
+@view(notebookViewFactoryId)
+export class LibroJupyterView extends LibroView {
+  uri: URI;
+  constructor(
+    @inject(ViewOption) options: NotebookOption,
+    @inject(CollapseServiceFactory) collapseServiceFactory: CollapseServiceFactory,
+    @inject(NotebookService) notebookService: NotebookService,
+  ) {
+    super(options, collapseServiceFactory, notebookService);
+    const uri = new URI(options['resource']);
+    this.uri = uri;
+    this.title.label = uri.displayName;
+  }
+  get options() {
+    return this.model.options;
+  }
+}

package/src/module.ts

@@ -0,0 +1,105 @@
+import {
+  LibroCodeCellModel,
+  LibroCodeCellView,
+  CodeCellModule,
+} from '@difizen/libro-codemirror-code-cell';
+import { MarkdownCellModule } from '@difizen/libro-codemirror-markdown-cell';
+import { RawCellModule } from '@difizen/libro-codemirror-raw-cell';
+import {
+  LibroModule,
+  LibroToolbarModule,
+  LibroKeybindRegistry,
+  LibroModel,
+  LibroAddCellModule,
+  CellExecutionTimeProvider,
+  CellInputBottonBlankProvider,
+} from '@difizen/libro-core';
+import { LibroKernelManageModule } from '@difizen/libro-kernel';
+import {
+  DisplayDataOutputModule,
+  ErrorOutputModule,
+  StreamOutputModule,
+} from '@difizen/libro-output';
+import { LibroSearchModule } from '@difizen/libro-search';
+import { SearchCodemirrorCellModule } from '@difizen/libro-search-codemirror-cell';
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroBetweenCellModule } from './add-between-cell/index.js';
+import { JupyterCodeCellModel, JupyterCodeCellView } from './cell/index.js';
+import {
+  LibroJupyterCommandContribution,
+  LibroJupyterKeybindingContribution,
+} from './command/index.js';
+import { CellExecutionTip, CellInputBottomBlank } from './components/index.js';
+import { ConfigAppContribution } from './config/index.js';
+import { LibroConfigurationContribution } from './configuration/libro-configuration-contribution.js';
+import { LibroJupyterContentContribution } from './contents/index.js';
+import { LibroJupyterFileModule } from './file/index.js';
+import { KeybindInstructionsModule } from './keybind-instructions/index.js';
+import { LibroJupyterFileService } from './libro-jupyter-file-service.js';
+import { LibroJupyterModel } from './libro-jupyter-model.js';
+import { KernelStatusAndSelectorProvider } from './libro-jupyter-protocol.js';
+import { JupyterServerLaunchManager } from './libro-jupyter-server-launch-manager.js';
+import { LibroJupyterView } from './libro-jupyter-view.js';
+import { LibroJupyterOutputArea } from './output/index.js';
+import { PlotlyModule } from './rendermime/index.js';
+import { LibroJupyterColorContribution } from './theme/index.js';
+import {
+  LibroJupyterToolbarContribution,
+  SaveFileErrorContribution,
+  KernelStatusSelector,
+} from './toolbar/index.js';
+
+export const LibroJupyterModule = ManaModule.create()
+  .register(
+    LibroJupyterFileService,
+    LibroJupyterCommandContribution,
+    LibroJupyterKeybindingContribution,
+    LibroJupyterToolbarContribution,
+    ConfigAppContribution,
+    SaveFileErrorContribution,
+    LibroKeybindRegistry,
+    LibroJupyterContentContribution,
+    LibroJupyterOutputArea,
+    LibroJupyterColorContribution,
+    JupyterServerLaunchManager,
+    LibroJupyterView,
+    LibroConfigurationContribution,
+    {
+      token: CellExecutionTimeProvider,
+      useValue: CellExecutionTip,
+    },
+    {
+      token: CellInputBottonBlankProvider,
+      useValue: CellInputBottomBlank,
+    },
+    {
+      token: KernelStatusAndSelectorProvider,
+      useValue: KernelStatusSelector,
+    },
+    {
+      token: LibroModel,
+      useClass: LibroJupyterModel,
+    },
+    { token: LibroCodeCellModel, useClass: JupyterCodeCellModel },
+    { token: LibroCodeCellView, useClass: JupyterCodeCellView },
+  )
+  .dependOn(
+    LibroModule,
+    CodeCellModule,
+    MarkdownCellModule,
+    RawCellModule,
+    StreamOutputModule,
+    ErrorOutputModule,
+    DisplayDataOutputModule,
+    LibroToolbarModule,
+    LibroKernelManageModule,
+    LibroSearchModule,
+    SearchCodemirrorCellModule,
+    LibroAddCellModule,
+    // custom module
+    LibroBetweenCellModule,
+    KeybindInstructionsModule,
+    PlotlyModule,
+    LibroJupyterFileModule,
+  );

package/src/output/index.ts

@@ -0,0 +1 @@
+export * from './libro-jupyter-outputarea.js';

package/src/output/libro-jupyter-outputarea.tsx

@@ -0,0 +1,71 @@
+import type * as nbformat from '@difizen/libro-common';
+import type {
+  LibroExecutableCellView,
+  ExecutableCellModel,
+  IOutputAreaOption,
+} from '@difizen/libro-core';
+import { LibroOutputArea } from '@difizen/libro-core';
+import {
+  isDisplayDataMsg,
+  isStreamMsg,
+  isErrorMsg,
+  isExecuteResultMsg,
+  isExecuteReplyMsg,
+} from '@difizen/libro-kernel';
+import { view, inject, transient, ViewOption } from '@difizen/mana-app';
+
+@transient()
+@view('libro-output-area')
+export class LibroJupyterOutputArea extends LibroOutputArea {
+  declare cell: LibroExecutableCellView;
+
+  constructor(@inject(ViewOption) option: IOutputAreaOption) {
+    super(option);
+    this.handleMsg();
+  }
+
+  handleMsg() {
+    const cellModel = this.cell.model as ExecutableCellModel;
+    cellModel.msgChangeEmitter.event((msg) => {
+      if (msg.header.msg_type !== 'status') {
+        if (msg.header.msg_type === 'execute_input') {
+          cellModel.executeCount = msg.content.execution_count;
+        }
+        if (
+          isDisplayDataMsg(msg) ||
+          isStreamMsg(msg) ||
+          isErrorMsg(msg) ||
+          isExecuteResultMsg(msg)
+        ) {
+          const output: nbformat.IOutput = {
+            ...msg.content,
+            output_type: msg.header.msg_type,
+          };
+          this.add(output);
+        }
+        //Handle an execute reply message.
+        if (isExecuteReplyMsg(msg)) {
+          const content = msg.content;
+          if (content.status !== 'ok') {
+            return;
+          }
+          const payload = content && content.payload;
+          if (!payload || !payload.length) {
+            return;
+          }
+          const pages = payload.filter((i: any) => i.source === 'page');
+          if (!pages.length) {
+            return;
+          }
+          const page = JSON.parse(JSON.stringify(pages[0]));
+          const output: nbformat.IOutput = {
+            output_type: 'display_data',
+            data: page.data as nbformat.IMimeBundle,
+            metadata: {},
+          };
+          this.add(output);
+        }
+      }
+    });
+  }
+}

package/src/rendermime/assets/plotly.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #119dff;
+      }
+
+      .cls-2 {
+        fill: #25fefd;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>plotly-logomark</title>
+  <g id="symbol">
+    <rect class="cls-1" width="132" height="132" rx="6" ry="6"/>
+    <circle class="cls-2" cx="78" cy="54" r="6"/>
+    <circle class="cls-2" cx="102" cy="30" r="6"/>
+    <circle class="cls-2" cx="78" cy="30" r="6"/>
+    <circle class="cls-2" cx="54" cy="30" r="6"/>
+    <circle class="cls-2" cx="30" cy="30" r="6"/>
+    <circle class="cls-2" cx="30" cy="54" r="6"/>
+    <path class="cls-3" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"/>
+    <path class="cls-3" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"/>
+    <path class="cls-3" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"/>
+    <path class="cls-3" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"/>
+  </g>
+</svg>

package/src/rendermime/index.less

@@ -0,0 +1,13 @@
+/* Base styles */
+.libro-plotly-render {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 360px;
+  overflow: hidden;
+}
+
+/* Document icon */
+.libro-PlotlyIcon {
+  background-image: url('./assets/plotly.svg');
+}

package/src/rendermime/index.ts

@@ -0,0 +1,4 @@
+export * from './module.js';
+export * from './plotly-renderers.js';
+export * from './plotly-render.js';
+export * from './plotly-rendermime-contribution.js';

package/src/rendermime/module.ts

@@ -0,0 +1,7 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroPlotlyMimeTypeContribution } from './plotly-rendermime-contribution.js';
+
+export const PlotlyModule = ManaModule.create().register(
+  LibroPlotlyMimeTypeContribution,
+);

package/src/rendermime/plotly-render.tsx

@@ -0,0 +1,35 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import { useInject } from '@difizen/mana-app';
+import { useEffect, useRef } from 'react';
+import type { FC } from 'react';
+
+import { renderPlotly } from './plotly-renderers.js';
+import './index.less';
+
+export const PlotlyRender: FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderPlotlyRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  const mimeType = defaultRenderMime.preferredMimeType(model);
+  useEffect(() => {
+    if (mimeType) {
+      renderPlotly({
+        model: model,
+        host: renderPlotlyRef.current as HTMLDivElement,
+        source: model.data[mimeType],
+        mimeType: mimeType,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div className="libro-plotly-render-container">
+      <div className="libro-plotly-render" ref={renderPlotlyRef} />
+    </div>
+  );
+};

package/src/rendermime/plotly-renderers.ts

@@ -0,0 +1,191 @@
+import type { JSONValue } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import type PlotlyType from 'plotly.js';
+/**
+ * The options used to create a renderer.
+ */
+export interface IRendererPlotlyOptions {
+  /**
+   * The host node for the text content.
+   */
+  host: HTMLElement;
+  /**
+   * The source text to render.
+   */
+  source: JSONValue;
+  /**
+   * The preferred mimeType to render.
+   */
+  mimeType: string;
+
+  model: BaseOutputView;
+}
+/**
+ * The MIME type for Plotly.
+ * The version of this follows the major version of Plotly.
+ */
+export const MIME_TYPE = 'application/vnd.plotly.v1+json';
+
+interface IPlotlySpec {
+  data: PlotlyType.Data;
+  layout: PlotlyType.Layout;
+  frames?: PlotlyType.Frame[];
+}
+export class RenderedPlotly {
+  /**
+   * Create a new widget for rendering Plotly.
+   */
+  constructor(options: IRendererPlotlyOptions) {
+    this._mimeType = options.mimeType;
+    this.node = options.host;
+    // Create image element
+    this._img_el = document.createElement('img');
+    this._img_el.className = 'plot-img';
+    this.node.appendChild(this._img_el);
+
+    // Install image hover callback
+    this._img_el.addEventListener('mouseenter', () => {
+      this.createGraph(this._model);
+    });
+  }
+
+  /**
+   * Render Plotly into this widget's node.
+   */
+  renderModel(model: BaseOutputView): Promise<void> {
+    if (this.hasGraphElement()) {
+      // We already have a graph, don't overwrite it
+      return Promise.resolve();
+    }
+
+    // Save off reference to model so that we can regenerate the plot later
+    this._model = model;
+
+    // Check for PNG data in mime bundle
+    const png_data = <string>model.data['image/png'];
+    if (png_data !== undefined && png_data !== null) {
+      // We have PNG data, use it
+      this.updateImage(png_data);
+      return Promise.resolve();
+    } else {
+      // Create a new graph
+      return this.createGraph(model);
+    }
+  }
+
+  private hasGraphElement() {
+    // Check for the presence of the .plot-container element that plotly.js
+    // places at the top of the figure structure
+    return this.node.querySelector('.plot-container') !== null;
+  }
+
+  private updateImage(png_data: string) {
+    this.hideGraph();
+    this._img_el.src = 'data:image/png;base64,' + png_data;
+    this.showImage();
+  }
+
+  private hideGraph() {
+    // Hide the graph if there is one
+    const el = <HTMLDivElement>this.node.querySelector('.plot-container');
+    if (el !== null && el !== undefined) {
+      el.style.display = 'none';
+    }
+  }
+
+  private showGraph() {
+    // Show the graph if there is one
+    const el = <HTMLDivElement>this.node.querySelector('.plot-container');
+    if (el !== null && el !== undefined) {
+      el.style.display = 'block';
+    }
+  }
+
+  private hideImage() {
+    // Hide the image element
+    const el = <HTMLImageElement>this.node.querySelector('.plot-img');
+    if (el !== null && el !== undefined) {
+      el.style.display = 'none';
+    }
+  }
+
+  private showImage() {
+    // Show the image element
+    const el = <HTMLImageElement>this.node.querySelector('.plot-img');
+    if (el !== null && el !== undefined) {
+      el.style.display = 'block';
+    }
+  }
+
+  private createGraph(model: BaseOutputView): Promise<void> {
+    const { data, layout, frames, config } = model.data[this._mimeType] as
+      | any
+      | IPlotlySpec;
+
+    // Load plotly asynchronously
+    const loadPlotly = async (): Promise<void> => {
+      if (RenderedPlotly.Plotly === null) {
+        RenderedPlotly.Plotly = await import('plotly.js');
+        RenderedPlotly._resolveLoadingPlotly();
+      }
+      return RenderedPlotly.loadingPlotly;
+    };
+
+    return loadPlotly()
+      .then(() => RenderedPlotly.Plotly!.react(this.node, data, layout, config))
+      .then((plot) => {
+        this.showGraph();
+        this.hideImage();
+        // this.update();
+        if (frames) {
+          RenderedPlotly.Plotly!.addFrames(this.node, frames);
+        }
+        if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
+          RenderedPlotly.Plotly!.toImage(plot, {
+            format: 'png',
+            width: this.node.offsetWidth,
+            height: this.node.offsetHeight,
+          })
+            .then((url: string) => {
+              const imageData = url.split(',')[1];
+              if (model.data['image/png'] !== imageData) {
+                model.setData({
+                  data: {
+                    ...model.data,
+                    'image/png': imageData,
+                  },
+                });
+              }
+              return;
+            })
+            .catch(() => {
+              //
+            });
+        }
+        return;
+      });
+  }
+
+  private _mimeType: string;
+  private _img_el: HTMLImageElement;
+  private _model: BaseOutputView;
+  private node: HTMLElement;
+  private static Plotly: typeof PlotlyType | null = null;
+  private static _resolveLoadingPlotly: () => void;
+  private static loadingPlotly = new Promise<void>((resolve) => {
+    RenderedPlotly._resolveLoadingPlotly = resolve;
+  });
+}
+
+/**
+ * Render an plotly into a host node.
+ *
+ * @param options - The options for rendering.
+ *
+ * @returns A promise which resolves when rendering is complete.
+ */
+export function renderPlotly(options: IRendererPlotlyOptions): Promise<void> {
+  const plotlyRender = new RenderedPlotly(options);
+  plotlyRender.renderModel(options.model); // Return the rendered promise.
+  return Promise.resolve(undefined);
+}

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

@@ -0,0 +1,15 @@
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { singleton } from '@difizen/mana-app';
+
+import { PlotlyRender } from './plotly-render.js';
+
+@singleton({ contrib: RenderMimeContribution })
+export class LibroPlotlyMimeTypeContribution implements RenderMimeContribution {
+  canHandle = () => {
+    return 100;
+  };
+  renderType = 'plotlyRender';
+  safe = true;
+  mimeTypes = ['application/vnd.plotly.v1+json'];
+  render = PlotlyRender;
+}