@difizen/libro-jupyter 0.0.2-alpha.0

package/src/file/file-service.ts

@@ -0,0 +1,179 @@
+import type { IContentsModel } from '@difizen/libro-kernel';
+import { ContentsManager } from '@difizen/libro-kernel';
+import type {
+  CopyFileOptions,
+  FileStatWithMetadata,
+  MoveFileOptions,
+  ResolveFileOptions,
+} from '@difizen/mana-app';
+import { FileService, URI, inject, singleton } from '@difizen/mana-app';
+
+import { FileNameAlias } from './file-name-alias.js';
+import type { DirItem } from './file-protocol.js';
+
+interface FileMeta extends Omit<FileStatWithMetadata, 'children' | 'resource'> {
+  resource: string;
+  children?: FileMeta[];
+}
+
+interface DirectoryModel extends IContentsModel {
+  type: 'directory';
+  content: IContentsModel[];
+}
+
+@singleton({ token: FileService })
+export class JupyterFileService extends FileService {
+  @inject(ContentsManager) protected readonly contentsManager: ContentsManager;
+  // '/read'
+  // '/read-dir'
+  // '/mkdirp'
+  // '/write'
+  // '/rename'
+  // '/copy'
+  // '/delete'
+  // '/stat'
+  // '/access'
+  // '/emptd-dir'
+  // '/ensure-file'
+  // '/ensure-link'
+  // '/ensure-symlink'
+
+  protected fileNameAlias: FileNameAlias;
+
+  constructor(
+    @inject(FileNameAlias)
+    fileNameAlias: FileNameAlias,
+  ) {
+    super();
+
+    this.fileNameAlias = fileNameAlias;
+  }
+
+  async write(filePath: string, content: string): Promise<string | undefined> {
+    try {
+      await this.contentsManager.save(filePath, {
+        content,
+      });
+      return filePath;
+    } catch (_e) {
+      //
+    }
+    return undefined;
+  }
+
+  async readDir(dirPath: string): Promise<DirItem[]> {
+    let children: DirItem[] = [];
+    try {
+      const res = await this.contentsManager.get(dirPath, { type: 'directory' });
+      if (res && this.isDirectory(res)) {
+        const content = res.content;
+        children = content.map((item) => {
+          return [item.path, this.isDirectory(item) ? 2 : 1];
+        });
+      }
+    } catch (_e) {
+      //
+    }
+    return children;
+  }
+  async read(filePath: string): Promise<string | undefined> {
+    let content: string | undefined = undefined;
+    try {
+      const res = await this.contentsManager.get(filePath);
+      if (res && !this.isDirectory(res)) {
+        content = res.content as string;
+      }
+    } catch (_e) {
+      //
+    }
+    return content;
+  }
+
+  protected async doResolve(filePath: string): Promise<FileMeta | undefined> {
+    let stat: FileMeta | undefined = undefined;
+    try {
+      const res = await this.contentsManager.get(filePath);
+      stat = this.toFileMeta(res);
+    } catch (_e) {
+      //
+    }
+    return stat;
+  }
+
+  protected isDirectory(model: IContentsModel): model is DirectoryModel {
+    if (model.type === 'directory') {
+      return true;
+    }
+    return false;
+  }
+
+  protected toFileMeta(model: IContentsModel): FileMeta {
+    const isDirectory = model.type === 'directory';
+    const isSymbolicLink = model.type === 'symlink';
+    let children = undefined;
+    if (isDirectory) {
+      const content = model.content as IContentsModel[];
+      children = content?.map((item) => this.toFileMeta(item));
+    }
+    const uri = URI.withScheme(new URI(model.path), 'file');
+    return {
+      resource: uri.path.toString(),
+      etag: uri.path.toString(),
+      name: uri.displayName,
+      mtime: new Date(model.last_modified).getTime(),
+      ctime: new Date(model.created).getTime(),
+      size: model.size!,
+      isDirectory,
+      isSymbolicLink,
+      isFile: !isSymbolicLink && !isDirectory,
+      children,
+    };
+  }
+
+  override async copy(
+    source: URI,
+    target: URI,
+    options?: CopyFileOptions,
+  ): Promise<FileStatWithMetadata> {
+    return this.resolve(source);
+  }
+  override async move(
+    source: URI,
+    target: URI,
+    options?: MoveFileOptions,
+  ): Promise<FileStatWithMetadata> {
+    return this.resolve(source);
+  }
+
+  toFileStatMeta(meta: FileMeta): FileStatWithMetadata {
+    const uri = URI.withScheme(new URI(meta.resource), 'file');
+
+    return {
+      ...meta,
+      resource: uri,
+      name: this.fileNameAlias.get(uri) ?? meta.name,
+      children: meta.children?.map((child) => this.toFileStatMeta(child)),
+    };
+  }
+
+  override async resolve(
+    resource: URI,
+    options?: ResolveFileOptions | undefined,
+  ): Promise<FileStatWithMetadata> {
+    const resolved = await this.doResolve(resource.path.toString());
+    if (resolved) {
+      return this.toFileStatMeta(resolved);
+    }
+    return {
+      resource,
+      name: resource.path.base,
+      mtime: 0,
+      ctime: 0,
+      etag: '',
+      size: 0,
+      isFile: false,
+      isDirectory: false,
+      isSymbolicLink: false,
+    };
+  }
+}

package/src/file/file-tree-label-provider.ts

@@ -0,0 +1,42 @@
+import type { DidChangeLabelEvent, FileStat, URI } from '@difizen/mana-app';
+import {
+  FileStatNode,
+  LabelProvider,
+  LabelProviderContribution,
+  TreeLabelProvider,
+  URIIconReference,
+  inject,
+  singleton,
+} from '@difizen/mana-app';
+
+@singleton({ contrib: LabelProviderContribution })
+export class FileTreeLabelProvider implements LabelProviderContribution {
+  @inject(LabelProvider) protected readonly labelProvider: LabelProvider;
+  @inject(TreeLabelProvider) protected readonly treeLabelProvider: TreeLabelProvider;
+
+  protected asURIIconReference(element: FileStat): URI | URIIconReference {
+    return URIIconReference.create(
+      element.isDirectory ? 'folder' : 'file',
+      element.resource,
+    );
+  }
+  canHandle(element: object): number {
+    return FileStatNode.is(element) ? this.treeLabelProvider.canHandle(element) + 2 : 0;
+  }
+
+  getIcon(node: FileStatNode): string {
+    return this.labelProvider.getIcon(this.asURIIconReference(node.fileStat));
+  }
+
+  getName(node: FileStatNode): string {
+    return node.fileStat.name;
+  }
+
+  getDescription(node: FileStatNode): string {
+    return this.labelProvider.getLongName(this.asURIIconReference(node.fileStat));
+  }
+
+  affects(node: FileStatNode, event: DidChangeLabelEvent): boolean {
+    return event.affects(node.fileStat);
+  }
+}

package/src/file/file-view/index.less

@@ -0,0 +1,5 @@
+.libro-jupyter-file-tree {
+  &-content {
+    height: calc(100% - 48px);
+  }
+}

package/src/file/file-view/index.tsx

@@ -0,0 +1,90 @@
+import type { TreeNode, ViewOpenHandler } from '@difizen/mana-app';
+import { FileTreeViewFactory } from '@difizen/mana-app';
+import {
+  FileStatNode,
+  FileTree,
+  FileTreeModel,
+  FileTreeView,
+  isOSX,
+  LabelProvider,
+  TreeDecoratorService,
+  TreeProps,
+  TreeViewDecorator,
+  TreeViewModule,
+  CommandRegistry,
+  ManaModule,
+  OpenerService,
+  SelectionService,
+  view,
+  inject,
+  singleton,
+} from '@difizen/mana-app';
+import type React from 'react';
+
+import type { LibroNavigatableView } from '../navigatable-view.js';
+
+import './index.less';
+
+const FileTreeModule = ManaModule.create()
+  .register(FileTree, FileTreeModel)
+  .dependOn(TreeViewModule);
+
+@singleton()
+@view(FileTreeViewFactory, FileTreeModule)
+export class FileView extends FileTreeView {
+  @inject(OpenerService) protected openService: OpenerService;
+  @inject(CommandRegistry) protected command: CommandRegistry;
+  override id = FileTreeViewFactory;
+  override className = 'libro-jupyter-file-tree';
+
+  constructor(
+    @inject(TreeProps) props: TreeProps,
+    @inject(FileTreeModel) model: FileTreeModel,
+    @inject(TreeViewDecorator) treeViewDecorator: TreeViewDecorator,
+    @inject(SelectionService) selectionService: SelectionService,
+    @inject(LabelProvider) labelProvider: LabelProvider,
+    @inject(TreeDecoratorService) decoratorService: TreeDecoratorService,
+  ) {
+    super(
+      props,
+      model,
+      treeViewDecorator,
+      selectionService,
+      labelProvider,
+      decoratorService,
+    );
+    this.toDispose.push(this.model.onOpenNode(this.openNode));
+  }
+
+  openNode = async (treeNode: TreeNode) => {
+    if (FileStatNode.is(treeNode) && !treeNode.fileStat.isDirectory) {
+      const opener = (await this.openService.getOpener(
+        treeNode.uri,
+      )) as ViewOpenHandler<LibroNavigatableView>;
+      if (opener) {
+        opener.open(treeNode.uri, {
+          viewOptions: { name: treeNode.fileStat.name },
+        });
+      }
+    }
+  };
+
+  override handleClickEvent(
+    node: TreeNode | undefined,
+    event: React.MouseEvent<HTMLElement>,
+  ): void {
+    const modifierKeyCombined: boolean = isOSX
+      ? event.shiftKey || event.metaKey
+      : event.shiftKey || event.ctrlKey;
+    if (!modifierKeyCombined && node) {
+      if (
+        FileStatNode.is(node) &&
+        !node.fileStat.isDirectory &&
+        !node.fileStat.isSymbolicLink
+      ) {
+        this.model.openNode(node);
+      }
+    }
+    super.handleClickEvent(node, event);
+  }
+}

package/src/file/index.ts

@@ -0,0 +1,6 @@
+export * from './module.js';
+export * from './file-view/index.js';
+export * from './navigatable-view.js';
+export * from './open-handler-contribution.js';
+export * from './file-service.js';
+export * from './file-protocol.js';

package/src/file/module.ts

@@ -0,0 +1,19 @@
+import { FileTreeModule, ManaModule } from '@difizen/mana-app';
+
+import { FileNameAlias } from './file-name-alias.js';
+import { JupyterFileService } from './file-service.js';
+import { FileTreeLabelProvider } from './file-tree-label-provider.js';
+import { FileView } from './file-view/index.js';
+import { LibroNavigatableView } from './navigatable-view.js';
+import { LibroJupyterOpenHandler } from './open-handler-contribution.js';
+
+export const LibroJupyterFileModule = ManaModule.create()
+  .register(
+    JupyterFileService,
+    FileView,
+    FileNameAlias,
+    FileTreeLabelProvider,
+    LibroNavigatableView,
+    LibroJupyterOpenHandler,
+  )
+  .dependOn(FileTreeModule);

package/src/file/navigatable-view.tsx

@@ -0,0 +1,93 @@
+import type { LibroView } from '@difizen/libro-core';
+import { LibroService } from '@difizen/libro-core';
+import type { NavigatableView } from '@difizen/mana-app';
+import {
+  BaseView,
+  inject,
+  LabelProvider,
+  prop,
+  transient,
+  URI as VScodeURI,
+  URIIconReference,
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+  ViewRender,
+  Deferred,
+  URI,
+} from '@difizen/mana-app';
+import { createRef, forwardRef } from 'react';
+
+export const LibroEditorComponent = forwardRef(function LibroEditorComponent() {
+  const instance = useInject<LibroNavigatableView>(ViewInstance);
+
+  if (!instance.libroView || !instance.libroView.view) {
+    return null;
+  }
+
+  return <ViewRender view={instance.libroView} key={instance.filePath} />;
+});
+
+export const LibroNavigatableViewFactoryId = 'libro-navigatable-view-factory';
+@transient()
+@view(LibroNavigatableViewFactoryId)
+export class LibroNavigatableView extends BaseView implements NavigatableView {
+  @inject(LibroService) protected libroService: LibroService;
+
+  override view = LibroEditorComponent;
+
+  codeRef = createRef<HTMLDivElement>();
+
+  @prop() filePath?: string;
+
+  @prop()
+  libroView?: LibroView;
+
+  protected defer = new Deferred<void>();
+
+  get ready() {
+    return this.defer.promise;
+  }
+
+  constructor(
+    @inject(ViewOption) options: { path: string },
+    @inject(LabelProvider) labelProvider: LabelProvider,
+  ) {
+    super();
+    this.filePath = options.path;
+    this.title.caption = options.path;
+    const uri = new URI(options.path);
+    const uriRef = URIIconReference.create('file', new VScodeURI(options.path));
+    const iconClass = labelProvider.getIcon(uriRef);
+    this.title.icon = <div className={iconClass} />;
+    this.title.label = uri.displayName;
+  }
+
+  override async onViewMount(): Promise<void> {
+    this.getOrCreateLibroView();
+  }
+
+  protected async getOrCreateLibroView() {
+    const libroView = await this.libroService.getOrCreateView({
+      id: this.filePath,
+      resource: this.filePath,
+    });
+    if (!libroView) {
+      return;
+    }
+    this.libroView = libroView;
+    await this.libroView.initialized;
+    this.defer.resolve();
+  }
+
+  getResourceUri(): URI | undefined {
+    return new URI(this.filePath);
+  }
+
+  createMoveToUri(resourceUri: URI): URI | undefined {
+    this.filePath = resourceUri.path.toString();
+    this.getOrCreateLibroView();
+    return resourceUri;
+  }
+}

package/src/file/open-handler-contribution.ts

@@ -0,0 +1,44 @@
+import type { URI, ViewOpenHandlerOptions } from '@difizen/mana-app';
+import { ConfigurationService, inject } from '@difizen/mana-app';
+import {
+  NavigatableViewOpenHandler,
+  OpenHandler,
+  singleton,
+  Priority,
+} from '@difizen/mana-app';
+
+import { LibroJupyterConfiguration } from '../configuration/index.js';
+
+import type { LibroNavigatableView } from './navigatable-view.js';
+import { LibroNavigatableViewFactoryId } from './navigatable-view.js';
+
+@singleton({ contrib: OpenHandler })
+export class LibroJupyterOpenHandler extends NavigatableViewOpenHandler<LibroNavigatableView> {
+  @inject(ConfigurationService) protected configurationService: ConfigurationService;
+
+  id = LibroNavigatableViewFactoryId;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canHandle(uri: URI, _options?: ViewOpenHandlerOptions) {
+    if (uri.scheme === 'file' && uri.path.ext === '.ipynb') {
+      return Priority.PRIOR + 1;
+    }
+    return Priority.IDLE;
+  }
+
+  override async open(uri: URI, options: ViewOpenHandlerOptions = {}) {
+    const { viewOptions, ...extra } = options;
+    const slot = await this.configurationService.get(
+      LibroJupyterConfiguration['OpenSlot'],
+    );
+    return super.open(uri, {
+      slot,
+      viewOptions: {
+        path: uri.path.toString(),
+        ...viewOptions,
+      },
+      reveal: true,
+      ...extra,
+    });
+  }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+export * from '@difizen/libro-core';
+export * from '@difizen/libro-kernel';
+export * from '@difizen/libro-common';
+export * from '@difizen/libro-output';
+export * from '@difizen/libro-codemirror-markdown-cell';
+export * from '@difizen/libro-codemirror-code-cell';
+export * from '@difizen/libro-rendermime';
+export * from '@difizen/libro-l10n';
+export * from '@difizen/libro-search';
+export * from '@difizen/libro-search-codemirror-cell';
+export * from '@difizen/libro-code-editor';
+export * from '@difizen/libro-codemirror';
+export * from '@difizen/libro-codemirror-raw-cell';
+
+export * from './module.js';
+export * from './add-between-cell/index.js';
+export * from './cell/index.js';
+export * from './command/index.js';
+export * from './components/index.js';
+export * from './config/index.js';
+export * from './contents/index.js';
+export * from './keybind-instructions/index.js';
+export * from './output/index.js';
+export * from './rendermime/index.js';
+export * from './theme/index.js';
+export * from './toolbar/index.js';
+export * from './libro-jupyter-protocol.js';
+export * from './libro-jupyter-model.js';
+export * from './libro-jupyter-file-service.js';
+export * from './libro-jupyter-server-launch-manager.js';
+export * from './file/index.js';
+export * from './configuration/index.js';

package/src/keybind-instructions/index.less

@@ -0,0 +1,177 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
+// The prefix to use on all css classes from ant.
+@ant-prefix: ant;
+
+.libro-keybind-instructions-command-search {
+  // padding: 16px 16px 0px 24px;
+  .@{ant-prefix}-input-group-wrapper {
+    background-color: var(--mana-libro-filtered-background-color) !important;
+    border-radius: 6px;
+  }
+
+  .@{ant-prefix}-input-group-addon {
+    background: transparent;
+  }
+  .@{ant-prefix}-input-search-button {
+    background: transparent;
+    border: none;
+  }
+}
+
+.libro-keybind-instructions-drawer {
+  .@{ant-prefix}-drawer-content-wrapper {
+    box-shadow:
+      0 0 16px -8px rgba(0, 0, 0, 8%),
+      0 0 28px 0 rgba(0, 0, 0, 5%),
+      0 0 48px 16px rgba(0, 0, 0, 3%) !important;
+  }
+  .@{ant-prefix}-segmented {
+    background-color: var(--mana-libro-filtered-background-color);
+  }
+  .@{ant-prefix}-segmented:hover {
+    background: var(--mana-libro-filtered-background-color) !important;
+  }
+  .@{ant-prefix}-segmented-item-label {
+    color: var(--mana-libro-drawer-title-color);
+  }
+  .@{ant-prefix}-segmented-item-selected {
+    .@{ant-prefix}-segmented-item-label {
+      color: rgba(0, 10, 26, 89%);
+    }
+  }
+  .@{ant-prefix}-drawer-mask {
+    opacity: 0;
+  }
+  .@{ant-prefix}-drawer-content {
+    background: var(--mana-libro-popover-background-color);
+  }
+  .@{ant-prefix}-drawer-close {
+    color: var(--mana-libro-drawer-close-color);
+  }
+  .@{ant-prefix}-drawer-close:hover {
+    color: var(--mana-libro-drawer-close-color);
+  }
+  .@{ant-prefix}-drawer-title {
+    color: var(--mana-libro-drawer-title-color);
+  }
+  .@{ant-prefix}-input-search-button {
+    color: var(--mana-libro-filtered-text-color) !important;
+  }
+  .@{ant-prefix}-drawer-header {
+    border-bottom: 1px solid var(--mana-libro-filtered-border-color);
+  }
+
+  .@{ant-prefix}-btn:hover,
+  .@{ant-prefix}-btn:focus,
+  .@{ant-prefix}-btn:active {
+    background: var(--mana-libro-btn-hover-color) !important;
+  }
+
+  .@{ant-prefix}-input {
+    color: var(--mana-libro-drawer-title-color);
+  }
+}
+
+.libro-keybind-instructions-table {
+  height: calc(100% - 48px) !important;
+  margin-top: 16px;
+  overflow-y: auto !important;
+}
+
+.libro-keybind-instructions-table,
+.libro-magic-table {
+  .@{ant-prefix}-table {
+    background: var(--mana-libro-popover-background-color);
+  }
+}
+
+.libro-keybind-instructions-icon {
+  display: flex;
+  width: 18px;
+  height: 18px;
+}
+
+.libro-edit-mode-keybind-instructions-table {
+  margin-top: 24px;
+}
+
+.libro-command-mode-keybind-instructions-table,
+.libro-edit-mode-keybind-instructions-table {
+  tbody {
+    .anticon svg {
+      font-size: 12px;
+    }
+  }
+
+  thead > tr > th:nth-child(2) {
+    padding-right: 8px;
+  }
+
+  thead > tr > th:nth-child(2),
+  tbody > tr > td:nth-child(2) {
+    text-align: end;
+  }
+  .@{ant-prefix}-tag {
+    display: inline;
+    color: var(--mana-libro-keybind-tag-text-color);
+    font-weight: 400;
+    font-size: 10px;
+    font-family: SFProText;
+    line-height: 12px;
+    letter-spacing: 0;
+    background-color: var(--mana-libro-keybind-tag-background-color);
+    border: none;
+    border-radius: 2px;
+  }
+}
+
+.libro-keybind-search-match {
+  background-color: var(--mana-libro-search-match-background-color);
+  color: rgba(0, 10, 26, 89%);
+}
+
+.libro-command-mode-keybind-instructions-table,
+.libro-edit-mode-keybind-instructions-table,
+.libro-magic-table {
+  .@{ant-prefix}-table-thead > tr > th {
+    background: var(--mana-libro-popover-background-color);
+  }
+
+  .@{ant-prefix}-table-tbody > tr.@{ant-prefix}-table-row:hover > td {
+    background: var(--mana-libro-btn-hover-color) !important;
+  }
+
+  .@{ant-prefix}-table-tbody > tr > td,
+  .@{ant-prefix}-table-thead > tr > th {
+    border-bottom: 1px solid var(--mana-libro-table-border-color) !important;
+  }
+
+  thead tr th {
+    height: 30px;
+    color: var(--mana-libro-table-title-color);
+    font-weight: 600;
+    font-size: 14px;
+    font-family: PingFangSC;
+    font-style: semibold;
+  }
+
+  tbody > tr > td {
+    height: 33px;
+    color: var(--mana-libro-table-title-color);
+    font-weight: 400;
+    font-size: 10px;
+    font-family: PingFangSC;
+    font-style: regular;
+    line-height: 14px;
+  }
+
+  .@{ant-prefix}-table-thead > tr > th,
+  .@{ant-prefix}-table-tbody > tr > td,
+  .@{ant-prefix}-table tfoot > tr > th,
+  .@{ant-prefix}-table tfoot > tr > td {
+    padding: 0;
+  }
+  .@{ant-prefix}-table-cell .@{ant-prefix}-table-cell-scrollbar {
+    border-bottom: unset !important;
+  }
+}

package/src/keybind-instructions/index.ts

@@ -0,0 +1,5 @@
+export * from './module.js';
+export * from './keybind-instructions-icon.js';
+export * from './keybind-instructions-items.js';
+export * from './keybind-instructions-view.js';
+export * from './keybind-instructions-contribution.js';