@difizen/libro-jupyter 0.0.2-alpha.0

package/src/toolbar/kernel-status-and-selector.tsx

@@ -0,0 +1,195 @@
+import { red, green, gold, blue } from '@ant-design/colors';
+import { LoadingOutlined, StopOutlined } from '@ant-design/icons';
+import type { LibroView } from '@difizen/libro-core';
+import { ServerManager } from '@difizen/libro-kernel';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Badge } from 'antd';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+import { KernelSelector } from './kernel-selector-dropdown.js';
+
+import './index.less';
+
+export interface ServerStatus {
+  category: string;
+  color: string;
+  text: string;
+  text_zh: string;
+}
+
+export const statusToColor = {
+  canRunImmediate: green[5],
+  canRun: blue[5],
+  blocking: gold[5],
+  error: red[4],
+};
+
+export const jupyterServiceStatus: Record<string, ServerStatus> = {
+  loading: {
+    category: 'JupyterService',
+    color: statusToColor.blocking,
+    text: 'loading',
+    text_zh: l10n.t('加载中'),
+  },
+  failed: {
+    category: 'JupyterService',
+    color: statusToColor.error,
+    text: 'failed',
+    text_zh: l10n.t('加载失败'),
+  },
+  loaded: {
+    category: 'JupyterService',
+    color: statusToColor.canRunImmediate,
+    text: 'loaded',
+    text_zh: l10n.t('加载完成'),
+  },
+};
+
+export const kernelStatus: Record<string, ServerStatus> = {
+  connecting: {
+    category: 'Kernel',
+    color: statusToColor.blocking,
+    text: 'connecting',
+    text_zh: l10n.t('正在连接'),
+  },
+  unknown: {
+    category: 'Kernel',
+    color: statusToColor.blocking,
+    text: 'unknown',
+    text_zh: l10n.t('未知'),
+  },
+  starting: {
+    category: 'Kernel',
+    color: statusToColor.blocking,
+    text: 'starting',
+    text_zh: l10n.t('启动中'),
+  },
+  idle: {
+    category: 'Kernel',
+    color: statusToColor.canRunImmediate,
+    text: 'idle',
+    text_zh: l10n.t('空闲'),
+  },
+  busy: {
+    category: 'Kernel',
+    color: statusToColor.canRun,
+    text: 'busy',
+    text_zh: l10n.t('忙碌'),
+  },
+  terminating: {
+    category: 'Kernel',
+    color: statusToColor.blocking,
+    text: 'terminating',
+    text_zh: l10n.t('终止中'),
+  },
+  restarting: {
+    category: 'Kernel',
+    color: statusToColor.blocking,
+    text: 'restarting',
+    text_zh: l10n.t('重启中'),
+  },
+  autorestarting: {
+    category: 'Kernel',
+    color: statusToColor.blocking,
+    text: 'autorestarting',
+    text_zh: l10n.t('自动重启中'),
+  },
+  dead: {
+    category: 'Kernel',
+    color: statusToColor.error,
+    text: 'dead',
+    text_zh: l10n.t('死亡'),
+  },
+};
+
+const getServiceStatusInfo = (
+  serverManager: ServerManager | undefined,
+  libroModel: LibroJupyterModel | undefined,
+): ServerStatus => {
+  if (!serverManager || serverManager.launching) {
+    return jupyterServiceStatus['loading'];
+  }
+
+  if (
+    !libroModel ||
+    !(libroModel instanceof LibroJupyterModel) ||
+    libroModel.kernelConnecting === true ||
+    libroModel.kernelConnecting === undefined
+  ) {
+    return kernelStatus['connecting'];
+  }
+
+  if (!libroModel.kernelConnection) {
+    return {
+      color: statusToColor.blocking,
+      text: 'no kernel',
+      category: 'Kernel',
+      text_zh: l10n.t('无内核'),
+    };
+  }
+
+  return kernelStatus[libroModel.kernelConnection.status];
+};
+
+export const KernelStatusSelector: React.FC = () => {
+  const libroView = useInject<LibroView>(ViewInstance);
+  const serverManager = useInject(ServerManager);
+  const libroModel = libroView?.model as LibroJupyterModel;
+  const { color, text, text_zh, category } = getServiceStatusInfo(
+    serverManager,
+    libroModel,
+  );
+
+  if (serverManager.loaded) {
+    const showBadge =
+      (libroModel.kernelConnection && !libroModel.kernelConnection.isDisposed) ||
+      text === 'connecting';
+    const isKernelBusy = text === 'unknown' || text === 'busy';
+
+    return (
+      <div className="libro-kernel-and-container-status">
+        <div className="libro-kernel-status-and-selector">
+          <span className="kernel">kernel：</span>
+          <KernelSelector />
+          {showBadge &&
+            (isKernelBusy ? (
+              <Badge
+                className="libro-kernel-badge"
+                key="libro-kernel-badge"
+                color={kernelStatus['busy'].color}
+                text={kernelStatus['busy'].text_zh}
+              />
+            ) : (
+              <Badge
+                className="libro-kernel-badge"
+                key="libro-kernel-badge"
+                color={color}
+                text={text_zh}
+              />
+            ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="libro-kernel-and-container-status">
+      <div className="libro-container-and-service-status">
+        {text !== 'failed' && (
+          <>
+            <LoadingOutlined className="loading-icon" />
+            <span className="no-kernel">{l10n.t('Kernel 准备中...')}</span>
+          </>
+        )}
+        {text === 'failed' && category === 'JupyterService' && (
+          <>
+            <StopOutlined className="failed-icon" />
+            <span className="kernel-prepare-failed">{l10n.t('Kernel 准备失败')}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/toolbar/run-selector.tsx

@@ -0,0 +1,110 @@
+import { PlayCircleOutlined } from '@ant-design/icons';
+import type { LibroToolbarArags, LibroView } from '@difizen/libro-core';
+import { NotebookCommands, ExecutableCellModel } from '@difizen/libro-core';
+import {
+  useInject,
+  ToolbarInstance,
+  getOrigin,
+  CommandRegistry,
+  ViewInstance,
+} from '@difizen/mana-app';
+import type { Toolbar } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Menu, Dropdown, Tooltip } from 'antd';
+import type { MenuProps } from 'antd';
+
+import type { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+export const RunSelector: React.FC = () => {
+  const libroView = useInject<LibroView>(ViewInstance);
+  const libroModel = libroView ? libroView.model : undefined;
+  const toolbar = useInject<Toolbar>(ToolbarInstance);
+  const data = toolbar.currentArgs as LibroToolbarArags;
+  const command = useInject(CommandRegistry);
+  const curCell = data?.[0];
+  const isRunVisible =
+    ExecutableCellModel.is(curCell?.model) && !curCell?.model.executing ? true : false;
+  const isKernelIdle = libroModel
+    ? (libroModel as LibroJupyterModel).isKernelIdle
+    : false;
+
+  const handleChange: MenuProps['onClick'] = (e) => {
+    const args = getOrigin(data) || [];
+    if (e.key === 'runCell') {
+      command.executeCommand(NotebookCommands['RunCell'].id, ...args);
+    } else if (e.key === 'runAllCell') {
+      command.executeCommand(NotebookCommands['RunAllCells'].id, ...args);
+    } else if (e.key === 'runAllAbove') {
+      command.executeCommand(NotebookCommands['RunAllAbove'].id, ...args);
+    } else if (e.key === 'runAllBelow') {
+      command.executeCommand(NotebookCommands['RunAllBelow'].id, ...args);
+    }
+  };
+
+  const menu = (
+    <Menu
+      className="libro-run-menu-container"
+      onClick={handleChange}
+      items={[
+        {
+          key: 'runCell',
+          label: (
+            <>
+              <span className="libro-run-menu-label">{l10n.t('运行当前Cell')}</span>
+              <span className="libro-run-menu-keybind">Cmd + Enter</span>
+            </>
+          ),
+
+          disabled: !isRunVisible,
+        },
+        {
+          key: 'runAllCell',
+          label: (
+            <>
+              <span className="libro-run-menu-label">{l10n.t('运行全部')}</span>
+              <span className="libro-run-menu-keybind" />
+            </>
+          ),
+        },
+        {
+          key: 'runAllAbove',
+          label: (
+            <>
+              <span className="libro-run-menu-label">{l10n.t('运行之前所有cell')}</span>
+              <span className="libro-run-menu-keybind">Cmd + F8</span>
+            </>
+          ),
+        },
+        {
+          key: 'runAllBelow',
+          label: (
+            <>
+              <span className="libro-run-menu-label">
+                {l10n.t('运行当前及之后cell')}
+              </span>
+              <span className="libro-run-menu-keybind">Cmd + F10</span>
+            </>
+          ),
+        },
+      ]}
+    />
+  );
+
+  if (isKernelIdle) {
+    return (
+      <Dropdown overlay={menu} placement="bottomLeft">
+        <PlayCircleOutlined />
+      </Dropdown>
+    );
+  }
+
+  return (
+    <Tooltip
+      overlayClassName="libro-tooltip-placement-bottom"
+      placement="bottom"
+      title={l10n.t('kernel准备中，无法执行')}
+    >
+      <PlayCircleOutlined />
+    </Tooltip>
+  );
+};

package/src/toolbar/save-file-error-contribution.ts

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { SaveFileErrorModal } from './save-file-error.js';
+
+@singleton({ contrib: ModalContribution })
+export class SaveFileErrorContribution implements ModalContribution {
+  registerModal() {
+    return SaveFileErrorModal;
+  }
+}

package/src/toolbar/save-file-error.tsx

@@ -0,0 +1,35 @@
+import type { LibroView } from '@difizen/libro-core';
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import { Modal } from 'antd';
+
+import type { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+export const SaveFileModalComponent: React.FC<ModalItemProps<void>> = ({
+  visible,
+  close,
+}: ModalItemProps<void>) => {
+  const libroView = useInject<LibroView>(ViewInstance);
+
+  return (
+    <Modal
+      title="File Save Error"
+      open={visible}
+      onOk={() => close()}
+      onCancel={() => close()}
+      width={'400px'}
+      centered={true}
+    >
+      <p>{`File Save Error for: "${
+        libroView && libroView.model
+          ? (libroView.model as LibroJupyterModel).currentFileContents.name
+          : ''
+      }"`}</p>
+    </Modal>
+  );
+};
+
+export const SaveFileErrorModal: ModalItem = {
+  id: 'save-file-error',
+  component: SaveFileModalComponent,
+};

package/src/toolbar/side-toolbar-run-selector.tsx

@@ -0,0 +1,77 @@
+import { PlayCircleOutlined } from '@ant-design/icons';
+import type { LibroSideToolbarMenuItemType, LibroView } from '@difizen/libro-core';
+import { NotebookCommands, LibroSideToolbarMenu } from '@difizen/libro-core';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Popover, Tooltip } from 'antd';
+
+import type { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+const items: LibroSideToolbarMenuItemType[] = [
+  {
+    id: NotebookCommands['RunCell'].id,
+    label: (
+      <>
+        <span className="libro-menu-item-label">{l10n.t('运行 Cell')}</span>
+        <span className="libro-menu-item-keybind">Cmd + Enter</span>
+      </>
+    ),
+
+    group: 'runCell1',
+  },
+  {
+    id: NotebookCommands['RunAllAbove'].id,
+    label: (
+      <>
+        <span className="libro-menu-item-label">{l10n.t('运行上方所有 Cell')}</span>
+        <span className="libro-menu-item-keybind">Cmd + F8</span>
+      </>
+    ),
+
+    group: 'runCell2',
+  },
+  {
+    id: NotebookCommands['RunAllBelow'].id,
+    label: (
+      <>
+        <span className="libro-menu-item-label">
+          {l10n.t('运行当前及下方所有 Cell')}
+        </span>
+        <span className="libro-menu-item-keybind">Cmd + F10</span>
+      </>
+    ),
+
+    group: 'runCell2',
+  },
+];
+
+export const SideToolbarRunSelector: React.FC = () => {
+  const libroView = useInject<LibroView>(ViewInstance);
+  const libroModel = libroView ? libroView.model : undefined;
+  const isKernelIdle = libroModel
+    ? (libroModel as LibroJupyterModel).isKernelIdle
+    : false;
+
+  if (isKernelIdle) {
+    return (
+      <Popover
+        placement="leftTop"
+        content={<LibroSideToolbarMenu items={items} />}
+        trigger="hover"
+        overlayClassName="libro-popover-side-toolbar-menu libro-side-toolbar-run-select-menu"
+      >
+        <PlayCircleOutlined />
+      </Popover>
+    );
+  }
+
+  return (
+    <Tooltip
+      overlayClassName="libro-tooltip-placement-right"
+      placement="right"
+      title={l10n.t('kernel准备中，无法执行')}
+    >
+      <PlayCircleOutlined />
+    </Tooltip>
+  );
+};

package/src/toolbar/toolbar-contribution.tsx

@@ -0,0 +1,62 @@
+import { KernelCommands, NotebookCommands } from '@difizen/libro-core';
+import type { ToolbarRegistry } from '@difizen/mana-app';
+import { singleton, inject, ToolbarContribution } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import { Location } from '../components/icons.js';
+import { KernelStatusAndSelectorProvider } from '../libro-jupyter-protocol.js';
+
+import { RunSelector } from './run-selector.js';
+import { SideToolbarRunSelector } from './side-toolbar-run-selector.js';
+
+@singleton({ contrib: ToolbarContribution })
+export class LibroJupyterToolbarContribution implements ToolbarContribution {
+  kernelStatusAndSelector: KernelStatusAndSelectorProvider;
+
+  constructor(
+    @inject(KernelStatusAndSelectorProvider)
+    kernelStatusAndSelector: KernelStatusAndSelectorProvider,
+  ) {
+    this.kernelStatusAndSelector = kernelStatusAndSelector;
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry): void {
+    registry.registerItem({
+      id: KernelCommands['ShowKernelStatusAndSelector'].id,
+      icon: this.kernelStatusAndSelector,
+      command: KernelCommands['ShowKernelStatusAndSelector'].id,
+      order: 'o',
+    });
+
+    registry.registerItem({
+      id: NotebookCommands['SideToolbarRunSelect'].id,
+      command: NotebookCommands['SideToolbarRunSelect'].id,
+      icon: SideToolbarRunSelector,
+      showLabelInline: true,
+      group: ['sidetoolbar1'],
+      order: 'a',
+    });
+
+    registry.registerItem({
+      id: NotebookCommands['TopToolbarRunSelect'].id,
+      command: NotebookCommands['TopToolbarRunSelect'].id,
+      icon: RunSelector,
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'a',
+    });
+
+    registry.registerItem({
+      id: NotebookCommands['SelectLastRunCell'].id,
+      icon: Location,
+      command: NotebookCommands['SelectLastRunCell'].id,
+      group: ['group2'],
+      order: 'b',
+      tooltip: (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('定位正在执行的Cell')}</span>
+        </div>
+      ),
+    });
+  }
+}

package/src/typings/index.d.ts

@@ -0,0 +1,31 @@
+declare module '*.less';
+
+declare module 'plotly.js' {
+  export type Frame = Record<string, any>;
+  export function addFrames(root: Plotly.Root, frames: Frame[]): Promise<void>;
+  export function animate(root: Plotly.Root): void;
+  export type Data = any;
+  export type Layout = any;
+
+  type PlotlyEvent =
+    | 'plotly_webglcontextlost'
+    | 'plotly_restyle'
+    | 'plotly_relayout'
+    | 'plotly_update'
+    | 'plotly_click'
+    | 'plotly_hover'
+    | 'plotly_unhover'
+    | 'plotly_selected'
+    | 'plotly_deselect'
+    | 'plotly_doubleclick';
+
+  export interface PlotlyHTMLElement extends HTMLElement {
+    _fullData: Data;
+    _fullLayout: Layout;
+    data: Data;
+    layout: Layout;
+    on(event: PlotlyEvent, callback: (update: any) => void): void;
+  }
+  export function react(node: HTMLElement, data: any, layout: any, config: any): void;
+  export function toImage(...args: any[]): Promise<string>;
+}

package/src/utils/index.ts

@@ -0,0 +1,65 @@
+import type { CellModel } from '@difizen/libro-core';
+import { duration } from 'moment';
+
+import type { LibroJupyterModel } from '../libro-jupyter-model.js';
+import type { ExecutedWithKernelCellModel } from '../libro-jupyter-protocol.js';
+
+export const EXECUTE_INPUT = 'to_execute'; // 用户点击执行按钮的时间
+export const EXECUTE_REPLY_START = 'shell.execute_reply.started'; // Kernel 开始执行任务时间在 metadata 中的 key
+export const EXECUTE_REPLY_REPLY = 'shell.execute_reply.end'; // Kernel 结束执行任务时间在 metadata 中的 key
+
+export function getDefaultKernel(): string {
+  return 'Python 3';
+}
+
+export const isWaitingExecute = (model: CellModel) => {
+  const { executing, kernelExecuting } =
+    model as unknown as ExecutedWithKernelCellModel;
+  return !kernelExecuting && executing;
+};
+
+export function formatTime(value: number): string {
+  const time = duration(value);
+  const hours = time.hours();
+  const minutes = time.minutes();
+  const seconds = time.seconds();
+  const milliseconds = ('000' + time.milliseconds()).substr(-3);
+
+  if (hours >= 1) {
+    return hours + 'h ' + minutes + 'min ' + seconds + 's ' + milliseconds + 'ms';
+  } else if (minutes >= 1) {
+    return minutes + 'min ' + seconds + 's ' + milliseconds + 'ms';
+  } else if (seconds >= 1) {
+    return seconds + 's ' + milliseconds + 'ms';
+  } else {
+    return milliseconds + 'ms';
+  }
+}
+
+export function parseExecutionInfoFromModel(
+  model: CellModel,
+): Record<string, string> | undefined {
+  const executionInfo: Record<string, string> = model.metadata['execution'] as Record<
+    string,
+    string
+  >;
+  if (executionInfo) {
+    const toExecuteTime = executionInfo[EXECUTE_INPUT]; // 用户点击执行按钮的时间
+    const executeStartTime = executionInfo[EXECUTE_REPLY_START]; // Kernel 开始执行任务时间
+    const executeFinishTime = executionInfo[EXECUTE_REPLY_REPLY]; // Kernel 结束执行任务时间
+    return {
+      toExecuteTime,
+      executeStartTime,
+      executeFinishTime,
+    };
+  }
+  return;
+}
+
+export function isKernelIdle(libroModel?: LibroJupyterModel): boolean {
+  return !!(
+    libroModel &&
+    libroModel.kernelConnection &&
+    libroModel.kernelConnection.status === 'idle'
+  );
+}