@difizen/libro-jupyter 0.2.0 → 0.2.2

package/src/keybind-instructions/index.less

@@ -7,6 +7,13 @@
   .@{ant-prefix}-input-group-wrapper {
     background-color: var(--mana-libro-filtered-background-color) !important;
     border-radius: 6px;
+    .@{ant-prefix}-input {
+      color: var(--mana-libro-drawer-title-color);
+
+      &::placeholder {
+        color: var(--mana-libro-keybind-tag-text-color);
+      }
+    }
   }
 
   .@{ant-prefix}-input-group-addon {
@@ -19,6 +26,7 @@
 }
 
 .libro-keybind-instructions-drawer {
+  background: var(--mana-libro-popover-background-color) !important;
   .@{ant-prefix}-drawer-content-wrapper {
     box-shadow:
       0 0 16px -8px rgba(0, 0, 0, 8%),
@@ -34,17 +42,9 @@
   .@{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);
   }
@@ -135,6 +135,7 @@
 .libro-magic-table {
   .@{ant-prefix}-table-thead > tr > th {
     background: var(--mana-libro-popover-background-color);
+    color: var(--mana-libro-table-title-color);
   }
 
   .@{ant-prefix}-table-tbody > tr.@{ant-prefix}-table-row:hover > td {
@@ -148,7 +149,6 @@
 
   thead tr th {
     height: 30px;
-    color: var(--mana-libro-table-title-color);
     font-weight: 600;
     font-size: 14px;
     font-family: PingFangSC;

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

@@ -1,10 +1,10 @@
-import { LirboContextKey } from '@difizen/libro-core';
-import { inject, singleton } from '@difizen/mana-app';
+import { LibroContextKey } from '@difizen/libro-core';
+import { inject, singleton, ThemeService } 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 { Input, Drawer, Table, Segmented, ConfigProvider, theme } from 'antd';
 import { forwardRef, useCallback, useState } from 'react';
 
 import type { DataType } from './keybind-instructions-items.js';
@@ -49,7 +49,7 @@ const getSearchResult = (
 
 @singleton()
 export class KeybindInstrutionsService implements Disposable {
-  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroContextKey) contextKey: LibroContextKey;
   isKeybindInstructionsMask = false;
   @prop() searchCommandModeData: DataType[] = [];
   @prop() searchEditModeData: DataType[] = [];
@@ -132,6 +132,7 @@ export const KeybindInstrutionsComponent = forwardRef<
   const keybindInstrutionsService = useInject<KeybindInstrutionsService>(
     KeybindInstrutionsService,
   );
+  const themeService = useInject(ThemeService);
   const libroKeybindItems = useInject(LibroKeybindItems);
   const handleClose = useCallback(() => {
     close();
@@ -166,70 +167,79 @@ export const KeybindInstrutionsComponent = forwardRef<
   );
 
   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"
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
+    >
+      <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' },
+              ]}
             />
-          </div>
-        )}
-        {segment === 'keybind' && (
-          <>
-            <div className="libro-keybind-instructions-command-search">
-              <Search
-                placeholder={l10n.t('搜索功能关键字')}
-                allowClear
-                bordered={false}
-                size="middle"
-                onSearch={handleSearch}
+          }
+          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>
-            <div className="libro-keybind-instructions-table">
-              <div className="libro-command-mode-keybind-instructions-table">
-                <Table
-                  rowKey="key"
-                  columns={libroKeybindItems.commandModeActionColumns}
-                  dataSource={commandModeDataSource}
-                  pagination={false}
+          )}
+          {segment === 'keybind' && (
+            <>
+              <div className="libro-keybind-instructions-command-search">
+                <Search
+                  placeholder={l10n.t('搜索功能关键字')}
+                  allowClear
+                  bordered={false}
+                  size="middle"
+                  onSearch={handleSearch}
                 />
               </div>
-              <div className="libro-edit-mode-keybind-instructions-table">
-                <Table
-                  rowKey="key"
-                  columns={libroKeybindItems.editModeActionColumns}
-                  dataSource={editModeDataSource}
-                  pagination={false}
-                />
+              <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>
-            </div>
-          </>
-        )}
-      </Drawer>
-    </div>
+            </>
+          )}
+        </Drawer>
+      </div>
+    </ConfigProvider>
   );
 });
 

package/src/libro-jupyter-model.ts

@@ -2,13 +2,12 @@ import type { VirtualizedManager } from '@difizen/libro-core';
 import { LibroModel, VirtualizedManagerHelper } from '@difizen/libro-core';
 import {
   ContentsManager,
-  ExecutableNotebookModel,
   isDisplayDataMsg,
   LibroKernelConnectionManager,
   ServerConnection,
   ServerManager,
 } from '@difizen/libro-kernel';
-import type { IKernelConnection } from '@difizen/libro-kernel';
+import type { IKernelConnection, ExecutableNotebookModel } from '@difizen/libro-kernel';
 import type { IContentsCheckpointModel, IContentsModel } from '@difizen/libro-kernel';
 import { getOrigin, ModalService, prop } from '@difizen/mana-app';
 import { Deferred } from '@difizen/mana-app';
@@ -20,23 +19,11 @@ import {
   libroArgsMimetype,
   LibroFileService,
 } 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 {
-  static is = (arg: Record<any, any> | undefined): arg is LibroJupyterModel => {
-    return (
-      !!arg &&
-      ExecutableNotebookModel.is(arg) &&
-      'kernelConnection' in arg &&
-      typeof (arg as any).kernelConnection === 'object' &&
-      'lspEnabled' in arg &&
-      typeof (arg as any).lspEnabled === 'boolean'
-    );
-  };
-
   protected libroFileService: LibroFileService;
   protected virtualizedManager: VirtualizedManager;
 
@@ -187,61 +174,6 @@ export class LibroJupyterModel extends LibroModel implements ExecutableNotebookM
       .catch(console.error);
   }
 
-  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 还没有建立'));

package/src/libro-jupyter-workspace.ts

@@ -0,0 +1,49 @@
+import { URL } from '@difizen/libro-common';
+import { BaseWorkspaceService, ILibroWorkspaceService } from '@difizen/libro-core';
+import { ServerConnection, ServerManager } from '@difizen/libro-kernel';
+import { ApplicationContribution } from '@difizen/mana-app';
+import { URI } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+
+interface JupyterWorkspaceData {
+  rootUri: string;
+}
+
+@singleton({ contrib: [ILibroWorkspaceService, ApplicationContribution] })
+export class JupyterWorkspaceService
+  extends BaseWorkspaceService
+  implements ILibroWorkspaceService, ApplicationContribution
+{
+  @inject(ServerConnection) serverConnection: ServerConnection;
+  @inject(ServerManager) serverManager: ServerManager;
+
+  protected workspaceData: JupyterWorkspaceData;
+
+  onViewStart() {
+    this.serverManager.ready
+      .then(() => {
+        const settings = { ...this.serverConnection.settings };
+        const url = URL.join(settings.baseUrl, '/libro/api/workspace');
+        return this.serverConnection.makeRequest(url, {});
+      })
+      .then(async (res) => {
+        const data = await res.json();
+        this.workspaceData = data;
+        this.deferred.resolve();
+        return;
+      })
+      .catch(() => {
+        return;
+      });
+  }
+
+  override get workspaceRoot() {
+    return new URI(this.workspaceData.rootUri);
+  }
+  override get notebooks() {
+    return [];
+  }
+  override get files() {
+    return [];
+  }
+}

package/src/module.ts

@@ -39,6 +39,7 @@ import {
   LibroJupyterSettingContribution,
 } from './config/index.js';
 import { LibroJupyterContentContribution } from './contents/index.js';
+import { LibroJupyterContentSaveContribution } from './contents/save-content-contribution.js';
 import { LibroJupyterFileModule } from './file/index.js';
 import { KeybindInstructionsModule } from './keybind-instructions/index.js';
 import { LibroJupyterFileService } from './libro-jupyter-file-service.js';
@@ -46,6 +47,7 @@ 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 { JupyterWorkspaceService } from './libro-jupyter-workspace.js';
 import { LibroJupyterOutputArea } from './output/index.js';
 import { PlotlyModule } from './rendermime/index.js';
 import { LibroJupyterColorContribution } from './theme/index.js';
@@ -54,9 +56,11 @@ import {
   LibroJupyterToolbarContribution,
   SaveFileErrorContribution,
 } from './toolbar/index.js';
+import { WidgetModule } from './widget/index.js';
 
 export const LibroJupyterModule = ManaModule.create()
   .register(
+    JupyterWorkspaceService,
     LibroJupyterFileService,
     LibroJupyterCommandContribution,
     LibroJupyterKeybindingContribution,
@@ -65,6 +69,7 @@ export const LibroJupyterModule = ManaModule.create()
     SaveFileErrorContribution,
     LibroKeybindRegistry,
     LibroJupyterContentContribution,
+    LibroJupyterContentSaveContribution,
     LibroJupyterOutputArea,
     LibroJupyterColorContribution,
     LibroJupyterSettingContribution,
@@ -110,4 +115,5 @@ export const LibroJupyterModule = ManaModule.create()
     PlotlyModule,
     LibroJupyterFileModule,
     LibroLanguageClientModule,
+    WidgetModule,
   );

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

@@ -6,8 +6,10 @@ import type {
 } from '@difizen/libro-core';
 import { LibroOutputArea } from '@difizen/libro-core';
 import {
+  isClearOutputMsg,
   isDisplayDataMsg,
   isErrorMsg,
+  isExecuteInputMsg,
   isExecuteReplyMsg,
   isExecuteResultMsg,
   isStreamMsg,
@@ -31,58 +33,61 @@ export class LibroJupyterOutputArea extends LibroOutputArea {
     cellModel.msgChangeEmitter.event((msg) => {
       const transientMsg = (msg.content.transient || {}) as nbformat.JSONObject;
       const displayId = transientMsg['display_id'] as string;
-      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);
-        }
-        if (isUpdateDisplayDataMsg(msg)) {
-          const output = { ...msg.content, output_type: 'display_data' };
-          const targets = this.displayIdMap.get(displayId);
-          if (targets) {
-            for (const index of targets) {
-              this.set(index, output);
-            }
+      if (isExecuteInputMsg(msg)) {
+        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);
+      }
+      if (isUpdateDisplayDataMsg(msg)) {
+        const output = { ...msg.content, output_type: 'display_data' };
+        const targets = this.displayIdMap.get(displayId);
+        if (targets) {
+          for (const index of targets) {
+            this.set(index, output);
           }
         }
-        if (displayId && isDisplayDataMsg(msg)) {
-          const targets = this.displayIdMap.get(displayId) || [];
-          targets.push(this.outputs.length);
-          this.displayIdMap.set(displayId, targets);
+      }
+      if (displayId && isDisplayDataMsg(msg)) {
+        const targets = this.displayIdMap.get(displayId) || [];
+        targets.push(this.outputs.length);
+        this.displayIdMap.set(displayId, targets);
+      }
+      //Handle an execute reply message.
+      if (isExecuteReplyMsg(msg)) {
+        const content = msg.content;
+        if (content.status !== 'ok') {
+          return;
         }
-        //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);
+        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);
+      }
+
+      if (isClearOutputMsg(msg)) {
+        const wait = msg.content.wait;
+        this.clear(wait);
       }
     });
   }
@@ -94,6 +99,8 @@ export class LibroJupyterOutputArea extends LibroOutputArea {
 
   override clear(wait?: boolean | undefined): void {
     super.clear(wait);
-    this.displayIdMap.clear();
+    if (!wait) {
+      this.displayIdMap.clear();
+    }
   }
 }

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

@@ -1,7 +1,8 @@
 import type { LibroView } from '@difizen/libro-core';
 import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { ThemeService } from '@difizen/mana-app';
 import { useInject, ViewInstance } from '@difizen/mana-app';
-import { Modal } from 'antd';
+import { ConfigProvider, Modal, theme } from 'antd';
 
 import type { LibroJupyterModel } from '../libro-jupyter-model.js';
 
@@ -10,22 +11,31 @@ export const SaveFileModalComponent: React.FC<ModalItemProps<void>> = ({
   close,
 }: ModalItemProps<void>) => {
   const libroView = useInject<LibroView>(ViewInstance);
-
+  const themeService = useInject(ThemeService);
   return (
-    <Modal
-      title="File Save Error"
-      open={visible}
-      onOk={() => close()}
-      onCancel={() => close()}
-      width={'400px'}
-      centered={true}
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
     >
-      <p>{`File Save Error for: "${
-        libroView && libroView.model
-          ? (libroView.model as LibroJupyterModel).currentFileContents.name
-          : ''
-      }"`}</p>
-    </Modal>
+      <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>
+    </ConfigProvider>
   );
 };
 

package/src/widget/box/contribution.ts

@@ -0,0 +1,29 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../protocol.js';
+import { WidgetViewContribution } from '../protocol.js';
+
+import { VBoxWidget } from './view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class VBoxWidgetContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (attributes._model_name === 'VBoxModel') {
+      return 100;
+    }
+    if (attributes.__view_name === 'VBoxView') {
+      return 100;
+    }
+    if (attributes._model_name === 'HBoxModel') {
+      return 100;
+    }
+    if (attributes.__view_name === 'HBoxView') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(VBoxWidget, props);
+  }
+}

package/src/widget/box/index.less

@@ -0,0 +1,3 @@
+.libro-widget-hbox {
+  display: flex;
+}

package/src/widget/box/index.ts

@@ -0,0 +1,2 @@
+export * from './contribution.js';
+export * from './view.js';