@difizen/libro-jupyter 0.0.2-alpha.0

package/src/theme/color-registry.ts

@@ -0,0 +1,301 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color, ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class LibroJupyterColorContribution implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    // common
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.add.between.divider.color',
+        defaults: { dark: '#467DB0', light: '#BFE0FF' },
+        description: '',
+      },
+      {
+        id: 'libro.add.between.icon.color',
+        defaults: { dark: '#467DB0', light: '#6982A9' },
+        description: '',
+      },
+      {
+        id: 'libro.add.between.icon.hover.color',
+        defaults: { dark: '#588DBE', light: '#1890ff' },
+        description: '',
+      },
+      {
+        id: 'libro.add.between.popover.background.color',
+        defaults: { dark: '#2f3032', light: '#ffffff' },
+        description: '',
+      },
+      {
+        id: 'libro.add.between.menu.label.color',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 0, 0, 0.65) },
+        description: '',
+      },
+      {
+        id: 'libro.add.between.hover.color',
+        defaults: { dark: '#515359', light: '#EBF6FF' },
+        description: '',
+      },
+      {
+        id: 'libro.drawer.close.color',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.45),
+          light: Color.rgba(0, 0, 0, 0.45),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.drawer.title.color',
+        defaults: { dark: '#EDEEEF', light: Color.rgba(0, 0, 0, 0.85) },
+        description: '',
+      },
+      {
+        id: 'libro.table.title.color',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 10, 26, 0.89) },
+        description: '',
+      },
+      {
+        id: 'libro.filtered.background.color',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.1),
+          light: Color.rgba(0, 10, 26, 0.04),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.filtered.text.color',
+        defaults: { dark: '#878C93', light: Color.rgba(0, 10, 26, 0.26) },
+        description: '',
+      },
+      {
+        id: 'libro.filtered.border.color',
+        defaults: { dark: '#2F3032', light: '#f0f0f0' },
+        description: '',
+      },
+      {
+        id: 'libro.table.border.color',
+        defaults: { dark: Color.rgba(255, 255, 255, 0.04), light: '#f0f0f0' },
+        description: '',
+      },
+      {
+        id: 'libro.btn.hover.color',
+        defaults: { dark: '#515359', light: '#fff' },
+        description: '',
+      },
+      {
+        id: 'libro.keybind.tag.background.color',
+        defaults: { dark: Color.rgba(245, 245, 245, 0.2), light: '#f5f5f5' },
+        description: '',
+      },
+      {
+        id: 'libro.keybind.tag.text.color',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 0, 0, 0.65) },
+        description: '',
+      },
+      {
+        id: 'libro.search.match.background.color',
+        defaults: { dark: '#BCCEFF', light: '#B9D1FF' },
+        description: '',
+      },
+      {
+        id: 'libro.vis.button.border',
+        defaults: { dark: '#505559', light: Color.rgba(0, 10, 26, 0.1) },
+        description: '',
+      },
+      {
+        id: 'libro.vis.button.background',
+        defaults: { dark: '#2F3032', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.vis.button.text.color',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+      {
+        id: 'libro.llm.response.output.text.color',
+        defaults: { dark: '#878C93', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+    );
+
+    //
+    colors.register(
+      {
+        id: 'libro.kernel.text',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 10, 26, 0.89) },
+        description: '',
+      },
+      {
+        id: 'libro.kernel.select.text',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+      {
+        id: 'libro.kernel.status.text',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 10, 26, 0.47) },
+        description: '',
+      },
+      {
+        id: 'libro.kernel.badge.border.color',
+        defaults: { dark: '#E3E4E6', light: '#ffffff' },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.background.color',
+        defaults: { dark: '#2F3032', light: '#ffffff' },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.active.step.title.color',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 0, 0, 0.85) },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.title.color',
+        defaults: { dark: '#878C93', light: Color.rgba(0, 0, 0, 0.45) },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.menu.color',
+        defaults: { dark: '#e3e4e6', light: Color.rgba(0, 0, 0, 0.65) },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.step.description.color',
+        defaults: { dark: '#D6D8DA', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.step.active.background.color',
+        defaults: { dark: '#2A97FD', light: '#1890FF' },
+        description: '',
+      },
+      {
+        id: 'libro.jupyter.kernel.status.step.active.secondary.color',
+        defaults: { dark: '#FFFFFF', light: '#ffffff' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.cell.header.execution.color',
+        defaults: { dark: '#6A83AA', light: '#6A83AA' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.unchanged.cell.header.color',
+        defaults: { dark: Color.rgba(255, 255, 255, 0.06), light: '#EAECF2' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.container.color',
+        defaults: { dark: '#1f2022', light: '#ffffff' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.input.background.color',
+        defaults: { dark: '#19191B', light: '#F4F6FB' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.background.color',
+        defaults: { dark: '#1F2022', light: '#ffffff' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.cell.border.color',
+        defaults: { dark: '#3B3C42', light: '#D7DBE7' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.removed.color',
+        defaults: { dark: '#4F2726', light: '#FAF0F0' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.added.color',
+        defaults: { dark: '#334126', light: '#ECF4E3' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.line.insert.color',
+        defaults: {
+          dark: Color.rgba(83, 104, 48, 0.45),
+          light: Color.rgba(189, 214, 151, 0.25),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.line.delete.color',
+        defaults: {
+          dark: Color.rgba(126, 50, 45, 0.45),
+          light: Color.rgba(241, 212, 216, 0.35),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.char.insert.color',
+        defaults: {
+          dark: Color.rgba(16, 22, 3, 0.7),
+          light: Color.rgba(67, 151, 36, 0.25),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.char.delete.color',
+        defaults: {
+          dark: Color.rgba(53, 15, 14, 0.7),
+          light: Color.rgba(255, 0, 0, 0.2),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.diff.fold.background.color',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.08),
+          light: Color.rgba(0, 10, 26, 0.02),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.diff.fold.hover.background.color',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.1),
+          light: Color.rgba(0, 10, 26, 0.04),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.diff.fold.text.color',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 10, 26, 0.47) },
+        description: '',
+      },
+      {
+        id: 'libro.diff.content.same.text.color',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+      {
+        id: 'libro.diff.select.background.color',
+        defaults: { dark: '#BCCEFF', light: '#e5ebf1' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.select.highlight.background.color',
+        defaults: { dark: '#C8D1E7', light: '#DDE6FF' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.editor.gutter.number.color',
+        defaults: { dark: '#a8aebf', light: '#A4AECB' },
+        description: '',
+      },
+      {
+        id: 'libro.copilot.editor.placeholder.color',
+        defaults: { dark: '#878C93', light: Color.rgba(0, 10, 26, 0.26) },
+        description: '',
+      },
+    );
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from './color-registry.js';

package/src/toolbar/index.less

@@ -0,0 +1,194 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
+/* stylelint-disable color-function-notation */
+// The prefix to use on all css classes from ant.
+@ant-prefix: ant;
+
+.kernel-status {
+  width: 140px;
+
+  .ant-badge-status-dot {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+.container-and-service-status-step {
+  > div:first-child {
+    height: 70px;
+  }
+
+  .libro-kernel-badge :first-child {
+    width: 9px;
+    height: 9px;
+    border: 1px solid var(--mana-libro-kernel-badge-border-color);
+  }
+}
+
+.libro-tooltip-placement-bottom,
+.libro-tooltip-placement-right {
+  opacity: 0.9;
+
+  > div {
+    > div:nth-child(2) {
+      padding: 8px 10px;
+      color: #fff;
+      text-align: left;
+      text-decoration: none;
+      background-color: #373737;
+      border-radius: 6px;
+      box-shadow: 0 0 4px rgb(0 0 0 / 17%);
+      min-height: 34px;
+    }
+  }
+}
+
+.libro-kernel-and-container-status {
+  font-family: PingFangSC, 'Helvetica Neue', helvetica, arial, sans-serif;
+
+  .libro-kernel-status-and-selector {
+    .kernel {
+      color: var(--mana-libro-kernel-text);
+    }
+
+    .@{ant-prefix}-space-item {
+      color: var(--mana-libro-kernel-select-text);
+
+      > span {
+        transform: translate(-5px, 2px);
+        color: var(--mana-libro-dropdown-icon-color);
+      }
+    }
+
+    .libro-kernel-badge {
+      :first-child {
+        width: 9px;
+        height: 9px;
+        border: 1px solid var(--mana-libro-kernel-badge-border-color);
+      }
+
+      padding-left: 8px;
+
+      :nth-child(2) {
+        color: var(--mana-libro-kernel-status-text);
+        opacity: var(--mana-libro-kernel-text-opacity);
+      }
+    }
+  }
+
+  .libro-container-and-service-status {
+    .loading-icon {
+      color: rgba(24, 144, 255, 100%);
+    }
+
+    .failed-icon {
+      color: rgba(255, 77, 79, 100%);
+    }
+
+    .kernel-prepare-failed {
+      padding: 0 16px 0 10px;
+    }
+
+    .container-log-view-slot {
+      display: inline;
+
+      > div:first-child {
+        display: inline;
+      }
+    }
+
+    .no-kernel {
+      padding: 0 16px 0 10px;
+      color: var(--mana-libro-kernel-text);
+    }
+
+    .status-category {
+      padding-right: 8px;
+    }
+  }
+}
+
+.libro-popover-kernel-status {
+  .@{ant-prefix}-popover-inner {
+    background-color: var(--mana-libro-jupyter-kernel-status-background-color);
+  }
+  .@{ant-prefix}-popover-arrow-content::before {
+    background: var(--mana-libro-jupyter-kernel-status-background-color);
+  }
+  .@{ant-prefix}-steps-item-title {
+    color: var(--mana-libro-jupyter-kernel-status-title-color) !important;
+  }
+  .@{ant-prefix}-steps-item-icon {
+    background-color: transparent !important;
+  }
+  .@{ant-prefix}-steps-item-description {
+    .@{ant-prefix}-badge-status-text {
+      color: var(--mana-libro-jupyter-kernel-status-step-description-color) !important;
+    }
+  }
+
+  .@{ant-prefix}-steps-item-active {
+    .@{ant-prefix}-steps-item-title {
+      color: var(--mana-libro-jupyter-kernel-status-active-step-title-color) !important;
+    }
+    .@{ant-prefix}-steps-item-icon {
+      background-color: var(
+        --mana-libro-jupyter-kernel-status-step-active-background-color
+      ) !important;
+
+      span {
+        color: white !important;
+      }
+    }
+  }
+}
+
+.libro-run-menu-container {
+  width: 220px;
+  background-color: var(--mana-libro-popover-background-color) !important;
+  .@{ant-prefix}-dropdown-menu-item:hover {
+    background-color: var(--mana-libro-menu-hover-color) !important;
+  }
+
+  > li {
+    > span {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .libro-run-menu-label {
+        font-family: PingFangSC;
+        font-weight: 400;
+        font-size: 14px;
+        color: var(--mana-libro-toolbar-menu-label-color);
+      }
+
+      .libro-run-menu-keybind {
+        margin-left: auto;
+        font-family: PingFangSC;
+        font-weight: 400;
+        font-size: 12px;
+        color: var(--mana-libro-toolbar-menu-keybind-color);
+        text-align: right;
+        line-height: 18px;
+      }
+    }
+  }
+}
+
+.libro-kernel-dropdown {
+  .@{ant-prefix}-dropdown-menu {
+    background-color: var(--mana-libro-popover-background-color);
+  }
+
+  .@{ant-prefix}-dropdown-menu-item-group-title {
+    color: var(--mana-libro-jupyter-kernel-status-title-color) !important;
+  }
+
+  .@{ant-prefix}-dropdown-menu-title-content {
+    color: var(--mana-libro-jupyter-kernel-status-menu-color);
+  }
+
+  .@{ant-prefix}-dropdown-menu-item:hover {
+    background-color: var(--mana-libro-menu-hover-color);
+  }
+}

package/src/toolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './toolbar-contribution.js';
+export * from './save-file-error-contribution.js';
+export * from './kernel-selector-dropdown.js';
+export * from './kernel-status-and-selector.js';
+export * from './save-file-error.js';

package/src/toolbar/kernel-selector-dropdown.tsx

@@ -0,0 +1,204 @@
+import { CaretDownOutlined } from '@ant-design/icons';
+import type { LibroView } from '@difizen/libro-core';
+import { LibroKernelConnectionManager, KernelSpecManager } from '@difizen/libro-kernel';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import { Dropdown, Space } from 'antd';
+import { useCallback } from 'react';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+import './index.less';
+
+export interface PreferredSessionKernelListElem {
+  name: string;
+  id: string;
+  fileName: string;
+}
+
+export interface OtherKernelListElem {
+  name: string;
+  display_name: string;
+}
+
+function getKernelList(
+  kernelConnectionManager: LibroKernelConnectionManager,
+  kernelSpecManager: KernelSpecManager,
+): [PreferredSessionKernelListElem[], OtherKernelListElem[]] {
+  const preferredSessionKernelList = [];
+  for (const [fileName, kc] of kernelConnectionManager.getAllKernelConnections()) {
+    preferredSessionKernelList.push({
+      fileName: fileName,
+      name: kc.name,
+      id: kc.id,
+    });
+  }
+
+  const otherKernelList = [];
+  if (
+    kernelSpecManager.specs &&
+    kernelSpecManager.specs.kernelspecs &&
+    !(Object.keys(kernelSpecManager.specs.kernelspecs).length === 0)
+  ) {
+    const kernelspecs = kernelSpecManager.specs.kernelspecs;
+
+    for (const key in kernelspecs) {
+      otherKernelList.push({
+        name: kernelspecs[key]?.name ?? '',
+        display_name: kernelspecs[key]?.display_name ?? '',
+      });
+    }
+  }
+
+  return [preferredSessionKernelList, otherKernelList];
+}
+
+function getKernelListItems(
+  preferredSessionKernelList: PreferredSessionKernelListElem[],
+  otherKernelList: OtherKernelListElem[],
+) {
+  return [
+    {
+      key: 'StartPreferredKernel',
+      type: 'group',
+      label: 'Start Preferred Kernel',
+      children: otherKernelList.map((item) => {
+        return {
+          key: item.name,
+          label: item.display_name,
+        };
+      }),
+    },
+    {
+      key: 'UseNoKernel',
+      type: 'group',
+      label: 'Use No Kernel',
+      children: [
+        {
+          key: 'No Kernel',
+          label: 'No Kernel',
+        },
+      ],
+    },
+    {
+      key: 'UseKernelFromPreferredSession',
+      type: 'group',
+      label: 'Use Kernel from Preferred Session',
+      children: preferredSessionKernelList.map((item) => {
+        return {
+          key: item.fileName,
+          label: item.fileName,
+        };
+      }),
+    },
+    {
+      key: 'divider1',
+      type: 'divider', // Must have
+    },
+    {
+      key: 'ShutDownKernel',
+      label: 'Shut Down the Kernel',
+    },
+  ];
+}
+
+export const KernelSelector: React.FC = () => {
+  const libroView = useInject<LibroView>(ViewInstance);
+
+  const libroModel = libroView ? libroView.model : undefined;
+
+  const kernelConnectionManager = useInject(LibroKernelConnectionManager);
+  const kernelSpecManager = useInject(KernelSpecManager);
+
+  const [preferredSessionKernelList, otherKernelList] = getKernelList(
+    kernelConnectionManager,
+    kernelSpecManager,
+  );
+
+  // 处理change kernel
+  const handleChange = useCallback(
+    (key: string) => {
+      const selectValue = key;
+      if (!libroView || !(libroView.model instanceof LibroJupyterModel)) {
+        return null;
+      }
+
+      libroView.model.kernelConnecting = true;
+
+      if (selectValue === 'No Kernel' || selectValue === 'ShutDownKernel') {
+        libroView.model.kernelConnecting = false;
+        if (libroView.model.shutdown) {
+          libroView.model.shutdown();
+        }
+      }
+
+      const kernelInfoFromOtherKernelList = otherKernelList.filter(
+        (k) => k.name === selectValue,
+      );
+
+      if (kernelInfoFromOtherKernelList.length !== 0) {
+        libroView.model.currentFileContents.content.metadata.kernelspec =
+          kernelInfoFromOtherKernelList[0];
+
+        kernelConnectionManager
+          .changeKernel(libroView.model.currentFileContents, {
+            name: kernelInfoFromOtherKernelList[0].name,
+          })
+          .then((kernelConnection) => {
+            if (!kernelConnection) {
+              return;
+            }
+            (libroView.model as LibroJupyterModel).kernelConnection = kernelConnection;
+            (libroView.model as LibroJupyterModel).kernelConnecting = false;
+            return;
+          })
+          .catch(() => {
+            //
+          });
+
+        return;
+      }
+
+      const kernelInfoFromPreferredSessionKernelList =
+        preferredSessionKernelList.filter((k) => k.fileName === selectValue);
+      if (kernelInfoFromPreferredSessionKernelList.length !== 0) {
+        kernelConnectionManager
+          .changeKernel(libroView.model.currentFileContents, {
+            id: kernelInfoFromPreferredSessionKernelList[0].id,
+            name: kernelInfoFromPreferredSessionKernelList[0].name,
+          })
+          .then((kernelConnection) => {
+            if (!kernelConnection) {
+              return;
+            }
+            (libroView.model as LibroJupyterModel).kernelConnection = kernelConnection;
+            (libroView.model as LibroJupyterModel).kernelConnecting = false;
+            return;
+          })
+          .catch(() => {
+            //
+          });
+      }
+
+      libroView.model.kernelConnecting = false;
+      return;
+    },
+    [libroView, otherKernelList, preferredSessionKernelList, kernelConnectionManager],
+  );
+
+  return (
+    <Dropdown
+      overlayClassName="libro-kernel-dropdown"
+      menu={{
+        items: getKernelListItems(preferredSessionKernelList, otherKernelList),
+        onClick: ({ key }) => handleChange(key),
+      }}
+      trigger={['click']}
+    >
+      <Space>
+        {(libroModel as LibroJupyterModel)?.kernelConnection?.isDisposed
+          ? 'no kernel'
+          : (libroModel as LibroJupyterModel)?.kernelConnection?.name || 'no kernel'}
+        <CaretDownOutlined />
+      </Space>
+    </Dropdown>
+  );
+};