@difizen/libro-jupyter 0.0.2-alpha.0

package/src/keybind-instructions/keybind-instructions-view.tsx

@@ -0,0 +1,239 @@
+import { LirboContextKey } from '@difizen/libro-core';
+import { inject, singleton } from '@difizen/mana-app';
+import { getOrigin, prop, useInject } from '@difizen/mana-app';
+import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import type { Disposable } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Input, Drawer, Table, Segmented } from 'antd';
+import { forwardRef, useCallback, useState } from 'react';
+
+import type { DataType } from './keybind-instructions-items.js';
+import { LibroKeybindItems } from './keybind-instructions-items.js';
+import './index.less';
+
+const { Search } = Input;
+
+const getSearchResult = (
+  value: string,
+  sourceData: DataType[],
+  targetData: DataType[],
+) => {
+  sourceData.forEach((dataItem) => {
+    if (
+      typeof dataItem.actionDescription === 'string' &&
+      dataItem.actionDescription.indexOf(value) !== -1
+    ) {
+      const matchIndex = dataItem.actionDescription.indexOf(value);
+      targetData.push({
+        key: dataItem.key,
+        actionDescription: (
+          <>
+            <span>{dataItem.actionDescription.substring(0, matchIndex)}</span>
+            <span className="libro-keybind-search-match">
+              {dataItem.actionDescription.substring(
+                matchIndex,
+                matchIndex + value.length,
+              )}
+            </span>
+            <span>
+              {dataItem.actionDescription.substring(matchIndex + value.length)}
+            </span>
+          </>
+        ),
+
+        keybind: dataItem.keybind,
+      });
+    }
+  });
+};
+
+@singleton()
+export class KeybindInstrutionsService implements Disposable {
+  @inject(LirboContextKey) contextKey: LirboContextKey;
+  isKeybindInstructionsMask = false;
+  @prop() searchCommandModeData: DataType[] = [];
+  @prop() searchEditModeData: DataType[] = [];
+
+  dispose() {
+    this.searchCommandModeData = [];
+    this.searchEditModeData = [];
+  }
+}
+
+type Segment = 'keybind' | 'magic';
+
+const magicColumns = [
+  {
+    title: '关键字',
+    dataIndex: 'value',
+    key: 'value',
+  },
+  {
+    title: '含义',
+    dataIndex: 'description',
+    key: 'description',
+  },
+];
+
+const magics = [
+  {
+    key: '1',
+    value: '%timeit',
+    description: '测试单行语句的执行时间',
+  },
+  {
+    key: '2',
+    value: '%%timeit',
+    description: '测试整个块中代码的执行时间',
+  },
+  {
+    key: '3',
+    value: '%run',
+    description: '调用外部python脚本',
+  },
+  {
+    key: '4',
+    value: '%pwd',
+    description: '查看当前工作目录',
+  },
+  {
+    key: '5',
+    value: '%ls',
+    description: '查看目录文件列表',
+  },
+  {
+    key: '6',
+    value: '%reset',
+    description: '清除全部变量',
+  },
+  {
+    key: '7',
+    value: '%who',
+    description: '查看所有全局变量的名称，若给定类型参数，只返回该类型的变量列表',
+  },
+  {
+    key: '8',
+    value: '%whos',
+    description: '显示所有的全局变量名称、类型、值/信息',
+  },
+  {
+    key: '9',
+    value: '%env',
+    description: '列出全部环境变量',
+  },
+];
+
+export const KeybindInstrutionsComponent = forwardRef<
+  HTMLDivElement,
+  ModalItemProps<void>
+>(function KeybindInstrutionsComponent(props, ref) {
+  const { visible, close } = props;
+  const [segment, setSegment] = useState<Segment>('keybind');
+  const keybindInstrutionsService = useInject<KeybindInstrutionsService>(
+    KeybindInstrutionsService,
+  );
+  const libroKeybindItems = useInject(LibroKeybindItems);
+  const handleClose = useCallback(() => {
+    close();
+    keybindInstrutionsService.contextKey.enableCommandMode();
+    keybindInstrutionsService.dispose();
+  }, [close, keybindInstrutionsService]);
+  const handleSearch = (value: string) => {
+    keybindInstrutionsService.searchCommandModeData = [];
+    keybindInstrutionsService.searchEditModeData = [];
+    getSearchResult(
+      value,
+      libroKeybindItems.commandModeData,
+      keybindInstrutionsService.searchCommandModeData,
+    );
+    getSearchResult(
+      value,
+      libroKeybindItems.editModeData,
+      keybindInstrutionsService.searchEditModeData,
+    );
+  };
+
+  const commandModeDataSource = getOrigin(
+    keybindInstrutionsService.searchCommandModeData.length > 0
+      ? keybindInstrutionsService.searchCommandModeData
+      : libroKeybindItems.commandModeData,
+  );
+
+  const editModeDataSource = getOrigin(
+    keybindInstrutionsService.searchEditModeData.length > 0
+      ? keybindInstrutionsService.searchEditModeData
+      : libroKeybindItems.editModeData,
+  );
+
+  return (
+    <div className="libro-keybind-instructions-command" ref={ref}>
+      <Drawer
+        title={
+          <Segmented
+            value={segment}
+            onChange={(value) => setSegment(value as Segment)}
+            options={[
+              { label: l10n.t('快捷键'), value: 'keybind' },
+              { label: 'Magic 命令', value: 'magic' },
+            ]}
+          />
+        }
+        placement="right"
+        onClose={handleClose}
+        width="360px"
+        open={visible}
+        mask={true}
+        className="libro-keybind-instructions-drawer"
+        maskClosable={true}
+      >
+        {segment === 'magic' && (
+          <div className="libro-magic-table">
+            <Table
+              size="small"
+              columns={magicColumns}
+              dataSource={magics}
+              pagination={false}
+              rowKey="key"
+            />
+          </div>
+        )}
+        {segment === 'keybind' && (
+          <>
+            <div className="libro-keybind-instructions-command-search">
+              <Search
+                placeholder={l10n.t('搜索功能关键字')}
+                allowClear
+                bordered={false}
+                size="middle"
+                onSearch={handleSearch}
+              />
+            </div>
+            <div className="libro-keybind-instructions-table">
+              <div className="libro-command-mode-keybind-instructions-table">
+                <Table
+                  rowKey="key"
+                  columns={libroKeybindItems.commandModeActionColumns}
+                  dataSource={commandModeDataSource}
+                  pagination={false}
+                />
+              </div>
+              <div className="libro-edit-mode-keybind-instructions-table">
+                <Table
+                  rowKey="key"
+                  columns={libroKeybindItems.editModeActionColumns}
+                  dataSource={editModeDataSource}
+                  pagination={false}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </Drawer>
+    </div>
+  );
+});
+
+export const KeybindInstrutionModal: ModalItem = {
+  id: 'libro-keybind-instructions-modal',
+  component: KeybindInstrutionsComponent,
+};

package/src/keybind-instructions/module.ts

@@ -0,0 +1,11 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { KeybindInstructionsContribution } from './keybind-instructions-contribution.js';
+import { LibroKeybindItems } from './keybind-instructions-items.js';
+import { KeybindInstrutionsService } from './keybind-instructions-view.js';
+
+export const KeybindInstructionsModule = ManaModule.create().register(
+  KeybindInstrutionsService,
+  LibroKeybindItems,
+  KeybindInstructionsContribution,
+);

package/src/libro-jupyter-file-service.ts

@@ -0,0 +1,158 @@
+import type { INotebookContent } from '@difizen/libro-common';
+import type { IContentsModel } from '@difizen/libro-kernel';
+import { ServerManager, ContentsManager } from '@difizen/libro-kernel';
+import { Emitter } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+import type { URI } from '@difizen/mana-app';
+import type { Event as ManaEvent } from '@difizen/mana-app';
+
+import { LibroFileService } from './libro-jupyter-protocol.js';
+
+export interface BaseStat {
+  /**
+   * The unified resource identifier of this file or folder.
+   */
+  resource: URI;
+
+  /**
+   * The name which is the last segment
+   * of the {{path}}.
+   */
+  name: string;
+
+  /**
+   * The size of the file.
+   *
+   * The value may or may not be resolved as
+   * it is optional.
+   */
+  size?: number;
+
+  /**
+   * The last modification date represented as millis from unix epoch.
+   *
+   * The value may or may not be resolved as
+   * it is optional.
+   */
+  mtime?: number;
+
+  /**
+   * The creation date represented as millis from unix epoch.
+   *
+   * The value may or may not be resolved as
+   * it is optional.
+   */
+  ctime?: number;
+
+  /**
+   * A unique identifier that represents the
+   * current state of the file or directory.
+   *
+   * The value may or may not be resolved as
+   * it is optional.
+   */
+  etag?: string;
+}
+
+export interface BaseStatWithMetadata extends BaseStat {
+  mtime: number;
+  ctime: number;
+  etag: string;
+  size: number;
+}
+
+/**
+ * A file resource with meta information.
+ */
+export interface FileStat extends BaseStat {
+  /**
+   * The resource is a file.
+   */
+  isFile: boolean;
+
+  /**
+   * The resource is a directory.
+   */
+  isDirectory: boolean;
+
+  /**
+   * The resource is a symbolic link.
+   */
+  isSymbolicLink: boolean;
+
+  /**
+   * The children of the file stat or undefined if none.
+   */
+  children?: FileStat[];
+}
+
+export interface FileStatWithMetadata extends FileStat, BaseStatWithMetadata {
+  mtime: number;
+  ctime: number;
+  etag: string;
+  size: number;
+  type?: number;
+  children?: FileStatWithMetadata[];
+}
+export interface FileMeta extends Omit<FileStatWithMetadata, 'children' | 'resource'> {
+  resource: string;
+  children?: FileMeta[];
+}
+
+export class LibroFileError extends Error {
+  protected errorCause?: string;
+  constructor(message: string, errorCause?: string) {
+    super(message);
+    this.errorCause = errorCause;
+  }
+}
+
+@singleton({ contrib: LibroFileService })
+export class LibroJupyterFileService implements LibroFileService {
+  protected readonly contentsManager: ContentsManager;
+  protected serverManager: ServerManager;
+  fileSaveErrorEmitter: Emitter<
+    Partial<IContentsModel> & { msg?: string; cause?: string }
+  >;
+
+  /**
+   * A signal emitted when the file save error.
+   */
+  get fileSaveError(): ManaEvent<Partial<IContentsModel>> {
+    return this.fileSaveErrorEmitter.event;
+  }
+
+  constructor(
+    @inject(ContentsManager)
+    contentsManager: ContentsManager,
+    @inject(ServerManager)
+    serverManager: ServerManager,
+  ) {
+    this.contentsManager = contentsManager;
+    this.serverManager = serverManager;
+    this.fileSaveErrorEmitter = new Emitter<
+      Partial<IContentsModel> & { msg?: string; cause?: string }
+    >();
+  }
+
+  async read(path: string): Promise<IContentsModel | undefined> {
+    await this.serverManager.ready;
+    return await this.contentsManager.get(path);
+  }
+
+  async write(
+    notebookContent: INotebookContent,
+    currentFileContents: IContentsModel,
+  ): Promise<IContentsModel | undefined> {
+    await this.serverManager.ready;
+    try {
+      return await this.contentsManager.save(currentFileContents.path, {
+        type: currentFileContents.type,
+        content: notebookContent,
+        format: currentFileContents.format,
+      });
+    } catch (e: any) {
+      throw new LibroFileError(e.message, 'jupyter service save error');
+    }
+  }
+}

package/src/libro-jupyter-model.ts

@@ -0,0 +1,289 @@
+import { LibroModel } from '@difizen/libro-core';
+import type {
+  IContentsModel,
+  ExecutableNotebookModel,
+  IContentsCheckpointModel,
+  IKernelConnection,
+} from '@difizen/libro-kernel';
+import {
+  LibroKernelConnectionManager,
+  ServerManager,
+  ContentsManager,
+  ServerConnection,
+} from '@difizen/libro-kernel';
+import { prop, ModalService, getOrigin } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+import { Deferred } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import {
+  LibroFileService,
+  ExecutedWithKernelCellModel,
+} from './libro-jupyter-protocol.js';
+import { SaveFileErrorModal } from './toolbar/save-file-error.js';
+import { getDefaultKernel } from './utils/index.js';
+
+type IModel = IContentsModel;
+@transient()
+export class LibroJupyterModel extends LibroModel implements ExecutableNotebookModel {
+  protected libroFileService: LibroFileService;
+
+  get fileService() {
+    return this.libroFileService;
+  }
+
+  @prop()
+  currentFileContents: IModel;
+  @prop()
+  protected kernelSelect: string;
+  @prop()
+  protected kernelStatus: string;
+  @prop()
+  kernelConnection?: IKernelConnection;
+
+  @prop()
+  lspEnabled = false;
+
+  protected kernelConnectionManager: LibroKernelConnectionManager;
+  protected serverManager: ServerManager;
+  protected serverConnection: ServerConnection;
+  protected readonly contentsManager: ContentsManager;
+  protected readonly modalService: ModalService;
+
+  constructor(
+    @inject(LibroFileService) libroFileService: LibroFileService,
+    @inject(LibroKernelConnectionManager)
+    kernelConnectionManager: LibroKernelConnectionManager,
+    @inject(ServerManager) serverManager: ServerManager,
+    @inject(ServerConnection) serverConnection: ServerConnection,
+    @inject(ContentsManager) contentsManager: ContentsManager,
+    @inject(ModalService) modalService: ModalService,
+  ) {
+    super();
+    this.kernelSelection = getDefaultKernel();
+    this.libroFileService = libroFileService;
+    this.kernelConnectionManager = kernelConnectionManager;
+    this.serverManager = serverManager;
+    this.serverConnection = serverConnection;
+    this.contentsManager = contentsManager;
+    this.modalService = modalService;
+    this.dndAreaNullEnable = true;
+  }
+
+  get isKernelIdle() {
+    return this.kernelConnection && this.kernelConnection.status === 'idle';
+  }
+
+  get kernelSelection() {
+    return this.kernelSelect;
+  }
+
+  set kernelSelection(value: string) {
+    this.kernelSelect = value;
+  }
+
+  get currentKernelStatus() {
+    return this.kernelStatus;
+  }
+
+  set currentKernelStatus(value: string) {
+    this.kernelStatus = value;
+  }
+  protected kcDeferred = new Deferred<IKernelConnection>();
+  get kcReady() {
+    return this.kcDeferred.promise;
+  }
+
+  @prop()
+  kernelConnecting: boolean | undefined;
+
+  @prop()
+  filePath = '';
+
+  protected last_modified = '';
+
+  get lastModified() {
+    return this.last_modified;
+  }
+
+  set lastModified(value: string) {
+    this.last_modified = value;
+  }
+
+  latestCheckPointModel: IContentsCheckpointModel;
+
+  async createCheckpoint() {
+    this.latestCheckPointModel = await this.contentsManager.createCheckpoint(
+      this.filePath,
+    );
+  }
+
+  async listCheckpoints() {
+    await this.contentsManager.listCheckpoints(this.filePath);
+  }
+
+  async restoreCheckpoint(checkpointID: string) {
+    await this.contentsManager.restoreCheckpoint(this.filePath, checkpointID);
+  }
+
+  async deleteCheckpoint(checkpointID: string) {
+    await this.contentsManager.deleteCheckpoint(this.filePath, checkpointID);
+  }
+
+  startKernelConnection() {
+    this.kernelConnecting = true;
+    const fileInfo = this.currentFileContents;
+    this.serverManager.ready
+      .then(async () => {
+        const kernelConnection =
+          this.kernelConnectionManager.getKernelConnection(fileInfo);
+        if (kernelConnection) {
+          this.kernelConnection = kernelConnection;
+          this.kcDeferred.resolve(this.kernelConnection);
+          this.kernelConnecting = false;
+        } else {
+          const kc = await this.kernelConnectionManager.startNew(
+            this.currentFileContents,
+          );
+          if (!kc) {
+            return;
+          }
+          this.kernelConnection = kc;
+          this.kcDeferred.resolve(kc);
+          this.kernelConnecting = false;
+        }
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }
+
+  override async saveNotebookContent(): Promise<void> {
+    const notebookContent = this.toJSON();
+    if (!this.currentFileContents) {
+      throw new Error('currentFileContents is undefined');
+    }
+
+    let res = {} as IModel | undefined;
+
+    try {
+      res = await this.libroFileService.write(
+        notebookContent,
+        this.currentFileContents,
+      );
+      if (!res) {
+        return;
+      }
+      // 文件保存失败
+      if (res.last_modified === this.last_modified || res.size === 0) {
+        const errorMsg = `File Save Error: ${res?.message} `;
+        this.libroFileService.fileSaveErrorEmitter.fire({
+          cause: res.message,
+          msg: errorMsg,
+          name: res.name,
+          path: res.path,
+          created: res.created,
+          last_modified: res.last_modified,
+          size: res.size,
+          type: res.type,
+        });
+        this.modalService.openModal(SaveFileErrorModal);
+
+        throw new Error(errorMsg);
+      }
+    } catch (e: any) {
+      if (!res) {
+        return;
+      }
+      this.libroFileService.fileSaveErrorEmitter.fire({
+        cause: e.errorCause,
+        msg: e.message,
+        name: res.name || this.currentFileContents.name,
+        path: res.path || this.currentFileContents.path,
+        created: res.created || this.currentFileContents.created,
+        last_modified: res.last_modified || this.currentFileContents.last_modified,
+        size: res.size || this.currentFileContents.size,
+        type: res.type || this.currentFileContents.type,
+      });
+      this.modalService.openModal(SaveFileErrorModal);
+
+      throw new Error('File Save Error');
+    }
+
+    await this.createCheckpoint();
+  }
+
+  override canRun() {
+    if (!this.kernelConnection) {
+      alert(l10n.t('Kernel Connection 还没有建立'));
+      return false;
+    }
+
+    if (this.kernelConnection.isDisposed) {
+      alert('Kernel Connection disposed');
+      return false;
+    }
+
+    return true;
+  }
+
+  async interrupt() {
+    if (!this.kernelConnection) {
+      alert(l10n.t('Kernel Connection 还没有建立'));
+      return;
+    }
+    await this.kernelConnection.interrupt();
+  }
+
+  async shutdown() {
+    if (!this.kernelConnection) {
+      alert(l10n.t('Kernel Connection 还没有建立'));
+      return;
+    }
+
+    await this.kernelConnectionManager.shutdownKC(this.currentFileContents);
+    this.kernelConnection = undefined;
+  }
+
+  async restart() {
+    if (!this.kernelConnection || this.kernelConnection.isDisposed) {
+      this.startKernelConnection();
+      getOrigin(this.kcReady)
+        .then(() => {
+          if (!this.kernelConnection) {
+            alert(l10n.t('Kernel Connection 还没有建立'));
+            return;
+          }
+          return;
+        })
+        .catch(() => {
+          //
+        });
+      return;
+    }
+
+    this.kernelConnection.restart();
+  }
+
+  async reconnect() {
+    if (!this.kernelConnection) {
+      alert(l10n.t('Kernel Connection 还没有建立'));
+      return;
+    }
+    await this.kernelConnection.reconnect();
+  }
+
+  findRunningCell() {
+    const runningCellIndex = this.cells.findIndex((item) => {
+      if (ExecutedWithKernelCellModel.is(item.model)) {
+        return item.model.kernelExecuting === true;
+      }
+      return false;
+    });
+    if (runningCellIndex > -1) {
+      this.selectCell(this.cells[runningCellIndex]);
+      this.scrollToView(this.cells[runningCellIndex]);
+    }
+  }
+}