@difizen/libro-jupyter 0.0.2-alpha.0

package/src/add-between-cell/add-between-cell.tsx

@@ -0,0 +1,201 @@
+import { DisplayWrapComponent } from '@difizen/libro-common';
+import type { BetweenCellProvider, LibroView } from '@difizen/libro-core';
+import { CellService } from '@difizen/libro-core';
+import { CommandRegistry, useInject, ViewInstance } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Tooltip, Popover, Menu } from 'antd';
+import type { MenuProps } from 'antd';
+import { useEffect, useRef, useState, forwardRef } from 'react';
+
+import { LibroAddBetweenCellCommand } from './add-between-cell-command-contribution.js';
+
+import './index.less';
+
+const AddCellOutlined: React.FC = () => (
+  <svg
+    width="18px"
+    height="18px"
+    viewBox="0 0 18 18"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="页面-1" stroke="none" strokeWidth="1" fill="#6982A9" fillRule="evenodd">
+      <g id="2.0-添加-cell" transform="translate(-1539.000000, -240.000000)">
+        <g id="Icon/01-Line/add备份-3" transform="translate(1539.937500, 240.562500)">
+          <path
+            d="M15.9375,7.546875 C16.040625,7.546875 16.125,7.63125 16.125,7.734375 L16.125,9.140625 C16.125,9.24375 16.040625,9.328125 15.9375,9.328125 L8.953125,9.328125 L8.953125,16.6875 C8.953125,16.7910534 8.86917839,16.875 8.765625,16.875 L7.359375,16.875 C7.25582161,16.875 7.171875,16.7910534 7.171875,16.6875 L7.171875,9.328125 L0.1875,9.328125 C0.084375,9.328125 0,9.24375 0,9.140625 L0,7.734375 C0,7.63125 0.084375,7.546875 0.1875,7.546875 L7.171875,7.546875 L7.171875,0.1875 C7.171875,0.0839466094 7.25582161,0 7.359375,0 L8.765625,0 C8.86917839,0 8.953125,0.0839466094 8.953125,0.1875 L8.953125,7.546875 L15.9375,7.546875 Z"
+            id="path-1"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const LibroCommonBetweenCellContent: BetweenCellProvider = forwardRef(
+  function LibroCommonBetweenCellContent(props, _ref) {
+    // eslint-disable-next-line react/prop-types
+    const { addCell, index } = props;
+    const { cellsMeta } = useInject<CellService>(CellService);
+    const anchorRef = useRef<HTMLDivElement>(null);
+    const gutterRef = useRef<HTMLDivElement>(null);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const [GutterVisible, setGutterVisible] = useState(false);
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const command = useInject(CommandRegistry);
+
+    const innerOpenTooltip = () => {
+      if (menuVisible) {
+        return;
+      }
+      setTooltipVisible(true);
+    };
+
+    //====== delay ========
+    const delayRef = useRef<any>();
+
+    const clearDelay = () => {
+      clearTimeout(delayRef.current);
+    };
+
+    const openTooltip = (_nextOpen: boolean, delay = 0.5) => {
+      clearDelay();
+
+      if (delay === 0) {
+        innerOpenTooltip();
+      } else {
+        delayRef.current = setTimeout(() => {
+          innerOpenTooltip();
+        }, delay * 1000);
+      }
+    };
+
+    const closeTooltip = () => {
+      clearDelay();
+      setTooltipVisible(false);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => closeTooltip, []);
+
+    const items: MenuProps['items'] = cellsMeta
+      .filter((item) => item.type !== 'raw')
+      .sort((a, b) => a.order.localeCompare(b.order))
+      .map((item) => {
+        return {
+          label: item.name,
+          key: item.type,
+          onClick: async () => {
+            command.executeCommand(
+              LibroAddBetweenCellCommand.AddBetweenCell.id,
+              item.type,
+              addCell,
+              index,
+            );
+            anchorRef.current?.blur();
+            setMenuVisible(false);
+          },
+        };
+      });
+
+    return (
+      <div className="libro-add-between-cell">
+        <Popover
+          content={<Menu items={items} />}
+          trigger="click"
+          getPopupContainer={(trigger) => anchorRef.current ?? trigger}
+          placement="bottomLeft"
+          overlayClassName="libro-add-cell-menu"
+          destroyTooltipOnHide
+          open={menuVisible}
+        >
+          <div
+            tabIndex={10}
+            className="libro-add-between-cell-anchor"
+            style={{
+              position: 'fixed',
+              top: position.top + 5,
+              left: position.left + 5,
+              width: 1,
+              height: 1,
+              zIndex: 1000,
+            }}
+            ref={anchorRef}
+            onBlur={(e) => {
+              if (!anchorRef.current?.contains(e.relatedTarget)) {
+                setMenuVisible(false);
+              }
+              setGutterVisible(false);
+              closeTooltip();
+            }}
+          />
+        </Popover>
+        <div
+          ref={gutterRef}
+          className="libro-add-between-cell-area"
+          onMouseEnter={() => {
+            setGutterVisible(true);
+          }}
+          onMouseLeave={() => {
+            closeTooltip();
+            if (menuVisible) {
+              setGutterVisible(true);
+              return;
+            }
+
+            setGutterVisible(false);
+          }}
+          onMouseUp={(e) => {
+            closeTooltip();
+            setGutterVisible(true);
+            setMenuVisible(true);
+            setPosition({ top: e.clientY, left: e.clientX });
+            anchorRef.current?.focus();
+          }}
+        >
+          {GutterVisible && (
+            <>
+              <Tooltip
+                title={l10n.t('添加 Cell')}
+                open={tooltipVisible}
+                overlayClassName="libro-add-between-cell-tooltip"
+                destroyTooltipOnHide
+              >
+                <span
+                  className="libro-add-between-cell-icon"
+                  onMouseEnter={() => {
+                    openTooltip(true);
+                  }}
+                  onMouseLeave={() => {
+                    closeTooltip();
+                    if (menuVisible) {
+                      setGutterVisible(true);
+                    }
+                  }}
+                >
+                  <AddCellOutlined />
+                </span>
+              </Tooltip>
+              <div className="libro-cell-divider" />
+            </>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const LibroWrappedBetweenCellContent: BetweenCellProvider = (props) => {
+  // eslint-disable-next-line react/prop-types
+  const { index, addCell } = props;
+  const instance = useInject<LibroView>(ViewInstance);
+  return (
+    <DisplayWrapComponent mode={instance.model.readOnly}>
+      <LibroCommonBetweenCellContent index={index} addCell={addCell} />
+    </DisplayWrapComponent>
+  );
+};

package/src/add-between-cell/index.less

@@ -0,0 +1,103 @@
+@ant-prefix: ant;
+
+.libro-add-between-cell {
+  position: relative;
+  .@{ant-prefix}-popover-arrow {
+    display: none;
+  }
+  .@{ant-prefix}-popover {
+    padding: 0;
+    max-width: unset;
+  }
+
+  .@{ant-prefix}-popover-inner {
+    border-radius: 8px;
+    background-color: var(--mana-libro-add-between-popover-background-color);
+    padding: 0;
+  }
+
+  .@{ant-prefix}-popover-inner-content {
+    padding: 0;
+    width: unset;
+    max-width: unset;
+  }
+
+  .libro-add-cell-menu {
+    z-index: 1000;
+  }
+
+  .@{ant-prefix}-menu {
+    border-radius: 8px !important;
+    background-color: var(--mana-libro-add-between-popover-background-color) !important;
+  }
+
+  .@{ant-prefix}-menu-vertical {
+    border-right: unset !important;
+  }
+
+  .@{ant-prefix}-menu-item {
+    height: 32px !important;
+    line-height: 32px !important;
+  }
+  .@{ant-prefix}-menu-item:hover {
+    background-color: var(--mana-libro-add-between-hover-color) !important;
+  }
+
+  .@{ant-prefix}-menu-title-content {
+    color: var(--mana-libro-add-between-menu-label-color);
+  }
+
+  .@{ant-prefix}-menu-item-selected {
+    background-color: var(--mana-libro-add-between-hover-color) !important;
+  }
+}
+
+.libro-cell-divider {
+  width: 100%;
+  height: 4px;
+  background-color: var(--mana-libro-add-between-divider-color);
+  border-radius: 2px;
+}
+
+.libro-add-between-cell-icon {
+  z-index: 20;
+  margin-right: 10px;
+  margin-left: 30px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+
+  svg {
+    color: var(--mana-libro-add-between-icon-color);
+
+    &:hover {
+      color: var(--mana-libro-add-between-icon-hover-color);
+    }
+  }
+}
+
+.libro-add-between-cell-area {
+  position: absolute;
+  top: -16px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 16px;
+  cursor: pointer;
+}
+
+.libro-add-between-cell-tooltip {
+  .@{ant-prefix}-tooltip-inner {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 6px;
+  }
+}
+
+.libro-add-between-cell-anchor:focus {
+  outline: none;
+  cursor: pointer;
+}

package/src/add-between-cell/index.ts

@@ -0,0 +1,2 @@
+export * from './module.js';
+export * from './add-between-cell-command-contribution.js';

package/src/add-between-cell/module.ts

@@ -0,0 +1,13 @@
+import { BetweenCellProvider } from '@difizen/libro-core';
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroAddBetweenCellCommandContribution } from './add-between-cell-command-contribution.js';
+import { LibroWrappedBetweenCellContent } from './add-between-cell.js';
+
+export const LibroBetweenCellModule = ManaModule.create().register(
+  {
+    token: BetweenCellProvider,
+    useValue: LibroWrappedBetweenCellContent,
+  },
+  LibroAddBetweenCellCommandContribution,
+);

package/src/cell/index.ts

@@ -0,0 +1,2 @@
+export * from './jupyter-code-cell-model.js';
+export * from './jupyter-code-cell-view.js';

package/src/cell/jupyter-code-cell-model.ts

@@ -0,0 +1,36 @@
+import { LibroCodeCellModel } from '@difizen/libro-codemirror-code-cell';
+import type { ICellMetadata } from '@difizen/libro-common';
+import { CellOptions } from '@difizen/libro-core';
+import { inject, transient } from '@difizen/mana-app';
+import { prop, ViewManager } from '@difizen/mana-app';
+
+import type {
+  ExecutedWithKernelCellModel,
+  CodeCellMetadata,
+} from '../libro-jupyter-protocol.js';
+
+@transient()
+export class JupyterCodeCellModel
+  extends LibroCodeCellModel
+  implements ExecutedWithKernelCellModel
+{
+  @prop()
+  override metadata: Partial<CodeCellMetadata | ICellMetadata>;
+  @prop()
+  kernelExecuting = false;
+
+  constructor(
+    @inject(CellOptions) options: CellOptions,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super(options, viewManager);
+    this.metadata = options.cell?.metadata || {};
+  }
+
+  override clearExecution = () => {
+    this.executeCount = null;
+    this.executing = false;
+    this.kernelExecuting = false;
+    this.metadata.execution = {};
+  };
+}

package/src/cell/jupyter-code-cell-view.tsx

@@ -0,0 +1,221 @@
+import { CodeEditorView } from '@difizen/libro-code-editor';
+import type {
+  CodeEditorViewOptions,
+  CompletionProvider,
+  CompletionProviderOption,
+  TooltipProvider,
+  TooltipProviderOption,
+} from '@difizen/libro-code-editor';
+import { codeMirrorEditorFactory } from '@difizen/libro-codemirror';
+import { CellEditorMemo, LibroCodeCellView } from '@difizen/libro-codemirror-code-cell';
+import type { CellViewOptions } from '@difizen/libro-core';
+import { CellService } from '@difizen/libro-core';
+import { KernelError } from '@difizen/libro-kernel';
+import { inject, transient } from '@difizen/mana-app';
+import { view, ViewInstance, ViewManager, ViewOption } from '@difizen/mana-app';
+import { getOrigin, useInject, watch } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { forwardRef } from 'react';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+import type { ExecutionMeta } from '../libro-jupyter-protocol.js';
+
+import type { JupyterCodeCellModel } from './jupyter-code-cell-model.js';
+
+const JupyterCodeCellComponent = forwardRef<HTMLDivElement>(
+  function JupyterCodeCellComponent(_props, ref) {
+    const instance = useInject<JupyterCodeCellView>(ViewInstance);
+    return (
+      <div
+        className={instance.className}
+        ref={ref}
+        tabIndex={10}
+        onBlur={instance.blur}
+      >
+        <CellEditorMemo />
+      </div>
+    );
+  },
+);
+
+@transient()
+@view('jupyter-code-cell-view')
+export class JupyterCodeCellView extends LibroCodeCellView {
+  override view = JupyterCodeCellComponent;
+  declare model: JupyterCodeCellModel;
+
+  constructor(
+    @inject(ViewOption) options: CellViewOptions,
+    @inject(CellService) cellService: CellService,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super(options, cellService, viewManager);
+  }
+
+  override clearExecution = () => {
+    this.model.clearExecution();
+    this.outputArea.clear();
+  };
+
+  override onViewMount() {
+    const option: CodeEditorViewOptions = {
+      ...this.options,
+      factory: (editorOption) =>
+        codeMirrorEditorFactory({
+          ...editorOption,
+          config: {
+            ...editorOption.config,
+            ...{ readOnly: this.parent.model.readOnly },
+          },
+        }),
+      model: this.model,
+      tooltipProvider: this.tooltipProvider,
+      completionProvider: this.completionProvider,
+      lspProvider: undefined,
+    };
+    this.viewManager
+      .getOrCreateView<CodeEditorView, CodeEditorViewOptions>(CodeEditorView, option)
+      .then((editorView) => {
+        this.editorView = editorView;
+        this.editorViewReadyDeferred.resolve();
+        watch(this.parent.model, 'readOnly', () => {
+          this.editorView?.editor?.setOption('readOnly', this.parent.model.readOnly);
+        });
+        this.editorView.onModalChange((val) => (this.hasModal = val));
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }
+
+  tooltipProvider: TooltipProvider = async (option: TooltipProviderOption) => {
+    const cellContent = this.model.value;
+    const kernelConnection = getOrigin(
+      (this.parent.model as LibroJupyterModel).kernelConnection,
+    );
+    if (!kernelConnection) {
+      alert(l10n.t('Kernel Connection 还没有建立'));
+      return null;
+    }
+    const reply = await kernelConnection.requestInspect({
+      code: cellContent,
+      cursor_pos: option.cursorPosition,
+      detail_level: 1,
+    });
+
+    const value = reply.content;
+
+    if (value.status !== 'ok' || !value.found) {
+      return null;
+    }
+    return value.data['text/plain'] as string;
+  };
+
+  completionProvider: CompletionProvider = async (option: CompletionProviderOption) => {
+    const cellContent = this.model.value;
+    const kernelConnection = getOrigin(
+      (this.parent.model as LibroJupyterModel).kernelConnection,
+    );
+    if (!kernelConnection) {
+      alert(l10n.t('Kernel Connection 还没有建立'));
+      throw new Error(l10n.t('Kernel Connection 还没有建立'));
+    }
+    const reply = await kernelConnection.requestComplete({
+      code: cellContent,
+      cursor_pos: option.cursorPosition,
+    });
+
+    const value = reply.content;
+
+    if (value.status === 'abort') {
+      throw new Error('abort');
+    }
+
+    if (value.status === 'error') {
+      throw new Error(value.ename);
+    }
+
+    return {
+      matches: value.matches,
+      cursor_start: value.cursor_start,
+      cursor_end: value.cursor_end,
+      metadata: value.metadata,
+    };
+  };
+
+  override async run() {
+    const libroModel = this.parent.model;
+
+    if (
+      !libroModel ||
+      !(libroModel instanceof LibroJupyterModel) ||
+      !libroModel.kernelConnection ||
+      libroModel.kernelConnection.isDisposed
+    ) {
+      return false;
+    }
+
+    const kernelConnection = getOrigin(libroModel.kernelConnection);
+    const cellContent = this.model.value;
+    const cellModel = this.model;
+
+    try {
+      this.clearExecution();
+      const future = kernelConnection.requestExecute({
+        code: cellContent,
+      });
+
+      let startTimeStr = '';
+      cellModel.executing = true;
+
+      cellModel.metadata['execution'] = {
+        'shell.execute_reply.started': '',
+        'shell.execute_reply.end': '',
+        to_execute: new Date().toISOString(),
+      } as ExecutionMeta;
+
+      // Handle iopub messages
+      future.onIOPub = (msg: any) => {
+        cellModel.msgChangeEmitter.fire(msg);
+        if (msg.header.msg_type === 'execute_input') {
+          cellModel.kernelExecuting = true;
+          startTimeStr = msg.header.date as string;
+          const meta = cellModel.metadata['execution'] as ExecutionMeta;
+          if (meta) {
+            meta['shell.execute_reply.started'] = startTimeStr;
+          }
+        }
+      };
+      // Handle the execute reply.
+      future.onReply = (msg: any) => {
+        cellModel.msgChangeEmitter.fire(msg);
+      };
+
+      const msgPromise = await future.done;
+      cellModel.executing = false;
+      cellModel.kernelExecuting = false;
+
+      startTimeStr = msgPromise.metadata['started'] as string;
+      const endTimeStr = msgPromise.header.date;
+
+      cellModel.metadata['execution']['shell.execute_reply.started'] = startTimeStr;
+      cellModel.metadata['execution']['shell.execute_reply.end'] = endTimeStr;
+
+      if (!msgPromise) {
+        return true;
+      }
+
+      if (msgPromise.content.status === 'ok') {
+        return true;
+      } else {
+        throw new KernelError(msgPromise.content);
+      }
+    } catch (reason: any) {
+      if (reason.message.startsWith('Canceled')) {
+        return false;
+      }
+      throw reason;
+    }
+  }
+}