@opensumi/ide-notebook 3.7.1 → 3.7.2-next-1739848467.0

package/src/browser/libro/diff-view/components/libro-diff-changed-cell-components.tsx

@@ -0,0 +1,88 @@
+import { useInject } from '@difizen/mana-app';
+import React, { memo, useEffect, useRef, useState } from 'react';
+
+import { IDiffEditor } from '@opensumi/ide-monaco';
+
+import { getLibroCellType, getSource } from '../libro-diff-protocol';
+import { LibroVersionManager } from '../libro-version-manager';
+
+import { useEditorLayout } from './hooks';
+
+import type { DiffEditorProps } from '../libro-diff-protocol';
+
+import './index.less';
+
+const getEditorLanguage = (libroCellType: string) => {
+  if (libroCellType === 'sql') {
+    return 'sql-odps';
+  } else if (libroCellType === 'markdown' || libroCellType === 'raw') {
+    return 'markdown';
+  } else {
+    return 'python';
+  }
+};
+
+export const LibroDiffChangedCellComponent: React.FC<DiffEditorProps> = memo(({ diffCellResultItem }) => {
+  const editorDiffRef = useRef<HTMLDivElement>(null);
+  const editorContainerRef = useRef<HTMLDivElement>(null);
+  const [diffEditor, setDiffEditor] = useState<IDiffEditor | undefined>();
+  const versionManager = useInject(LibroVersionManager);
+  useEffect(() => {
+    if (!editorDiffRef.current) {
+      return;
+    }
+    const language = diffCellResultItem.origin.metadata.libroCellType
+      ? getEditorLanguage(diffCellResultItem.origin.metadata.libroCellType.toString())
+      : getEditorLanguage(diffCellResultItem.origin.cell_type);
+    const diffEditor = versionManager.createDiffEditor(
+      getSource(diffCellResultItem.origin),
+      getSource(diffCellResultItem.target),
+      language,
+      editorDiffRef.current,
+    );
+    setDiffEditor(diffEditor);
+    return () => {
+      diffEditor?.dispose();
+    };
+  }, [editorDiffRef]);
+
+  useEditorLayout(diffEditor, editorDiffRef, editorContainerRef);
+
+  const type = diffCellResultItem.diffType === 'changed' ? 'changed' : 'unchanged';
+
+  return (
+    <div className='libro-diff-cell-container' ref={editorContainerRef}>
+      <div className={`libro-diff-cell-${type}-container`}>
+        <div className={`libro-diff-cell-${type}-origin-header ${diffCellResultItem.diffType}`}>
+          <span className='libro-diff-cell-header-text'>{getLibroCellType(diffCellResultItem.origin)}</span>
+          <span
+            className='libro-diff-cell-header-origin-execute-count'
+            style={{
+              display: diffCellResultItem.origin.cell_type !== 'markdown' ? 'block' : 'none',
+            }}
+          >
+            {diffCellResultItem.origin.execution_count
+              ? '[' + diffCellResultItem.origin.execution_count?.toString() + ']'
+              : '[ ]'}
+          </span>
+        </div>
+        <div className={`libro-diff-cell-${type}-target-header ${diffCellResultItem.diffType}`}>
+          <span className='libro-diff-cell-header-text'>{getLibroCellType(diffCellResultItem.target)}</span>
+          <span
+            className='libro-diff-cell-header-target-execute-count'
+            style={{
+              display: diffCellResultItem.target.cell_type !== 'markdown' ? 'block' : 'none',
+            }}
+          >
+            {diffCellResultItem.target.execution_count
+              ? '[' + diffCellResultItem.target.execution_count?.toString() + ']'
+              : '[ ]'}
+          </span>
+        </div>
+        <div className={`libro-diff-cell-${type}-content`} ref={editorDiffRef} />
+        <div className={`libro-diff-cell-${type}-origin-border`} />
+        <div className={`libro-diff-cell-${type}-target-border`} />
+      </div>
+    </div>
+  );
+});

package/src/browser/libro/diff-view/components/libro-diff-side-cell-components.tsx

@@ -0,0 +1,84 @@
+import { Container } from '@difizen/mana-app';
+import React, { memo, useEffect, useRef, useState } from 'react';
+
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { ICodeEditor } from '@opensumi/ide-monaco';
+
+import { ManaContainer } from '../../../mana';
+import { getLibroCellType } from '../libro-diff-protocol';
+import { LibroVersionManager } from '../libro-version-manager';
+
+import { useEditorLayout } from './hooks';
+
+import type { DiffEditorProps } from '../libro-diff-protocol';
+
+import './index.less';
+
+const getEditorLanguage = (libroCellType: string) => {
+  if (libroCellType === 'sql') {
+    return 'sql-odps';
+  } else if (libroCellType === 'markdown' || libroCellType === 'raw') {
+    return 'markdown';
+  } else {
+    return 'python';
+  }
+};
+
+export const LibroDiffSideCellComponent: React.FC<DiffEditorProps> = memo(({ diffCellResultItem }) => {
+  const manaContainer = useInjectable<Container>(ManaContainer);
+  const libroVersionManager = manaContainer.get(LibroVersionManager);
+  const editorTargetRef = useRef<HTMLDivElement>(null);
+  const editorContainerRef = useRef<HTMLDivElement>(null);
+  const language = diffCellResultItem.origin.metadata.libroCellType
+    ? getEditorLanguage(diffCellResultItem.origin.metadata.libroCellType.toString())
+    : getEditorLanguage(diffCellResultItem.origin.cell_type);
+
+  const [editor, setEditor] = useState<ICodeEditor | undefined>();
+
+  const createEditor = () => {
+    // 这里其实已经拿到content了，但是 opensumi editor 需要uri，理论上有优化空间
+    const content =
+      diffCellResultItem.diffType === 'removed' ? diffCellResultItem.origin.source : diffCellResultItem.target.source;
+    const previewedEditor = libroVersionManager.createPreviewEditor(
+      content.toString(),
+      language,
+      editorTargetRef.current!,
+      diffCellResultItem.diffType,
+    );
+    setEditor(previewedEditor);
+    return previewedEditor;
+  };
+
+  useEditorLayout(editor, editorTargetRef, editorContainerRef);
+
+  useEffect(() => {
+    if (!editorTargetRef.current) {
+      return;
+    }
+    const previewedEditor = createEditor();
+    return () => {
+      previewedEditor?.dispose();
+    };
+  }, [editorTargetRef.current]);
+  const type = diffCellResultItem.diffType === 'removed' ? 'origin' : 'target';
+  return (
+    <div className='libro-diff-cell-container' ref={editorContainerRef}>
+      <div className={`libro-diff-cell-${type}-container`}>
+        <div className={`libro-diff-cell-${type}-header`}>
+          <span className='libro-diff-cell-header-text'>{getLibroCellType(diffCellResultItem.origin)}</span>
+          <span
+            className={`libro-diff-cell-header-${type}-execute-count`}
+            style={{
+              display: diffCellResultItem.target.cell_type !== 'markdown' ? 'block' : 'none',
+            }}
+          >
+            {diffCellResultItem.target.execution_count
+              ? '[' + diffCellResultItem.target.execution_count?.toString() + ']'
+              : '[ ]'}
+          </span>
+        </div>
+        <div className={`libro-diff-cell-${type}-content`} ref={editorTargetRef} />
+      </div>
+    </div>
+  );
+});

package/src/browser/libro/diff-view/index.less

@@ -0,0 +1,47 @@
+.libro-diff-content-container, .libro-diff-content-loading-container, .libro-diff-content-same-container {
+  background-color: var(--mana-libro-diff-container-color);
+}
+.libro-diff-content-container {
+  height: 100%;
+  padding: 24px 36px;
+}
+.libro-diff-content-loading-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.libro-diff-fold-container {
+  padding: 8px 0;
+}
+.libro-diff-fold {
+  display: flex;
+  padding: 6px 0;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+  background: var(--mana-libro-diff-fold-background-color);
+  color: var(--mana-libro-diff-fold-text-color);
+  &:hover {
+    cursor: pointer;
+    background: var(--mana-libro-diff-fold-hover-background-color);
+  }
+  .libro-diff-fold-text {
+    padding-left: 6px;
+  }
+}
+.libro-diff-content-same-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.libro-diff-content-same-text {
+  margin-top: 15px;
+  font-size: 16px;
+  color: var(--mana-libro-diff-content-same-text-color);
+}
+
+

package/src/browser/libro/diff-view/index.ts

@@ -0,0 +1,4 @@
+export * from './libro-diff-component';
+export * from './libro-diff-protocol';
+export * from './libro-diff-view';
+export * from './module';

package/src/browser/libro/diff-view/libro-diff-color-registry.ts

@@ -0,0 +1,132 @@
+import { Color, ColorContribution, singleton } from '@difizen/mana-app';
+
+import type { ColorRegistry } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class LibroDiffColorRegistry implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.diff.added.cell.header.color',
+        defaults: { dark: '#404C34', light: '#E4EADC' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.removed.cell.header.color',
+        defaults: { dark: '#5A3433', light: '#F2E7EA' },
+        description: '',
+      },
+      {
+        id: 'libro.diff.cell.header.text.color',
+        defaults: { dark: '#e3e4e6', light: Color.rgba(0, 10, 26, 0.47) },
+        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.diff.editor.intent.color',
+        defaults: { dark: '#565C6D', light: '#A4AECB' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.cursor.color',
+        defaults: { dark: '#ffffff', light: '#000000' },
+        description: '',
+      },
+    );
+  }
+}

package/src/browser/libro/diff-view/libro-diff-component.tsx

@@ -0,0 +1,25 @@
+import { ViewManager, ViewRender, useInject } from '@difizen/mana-app';
+import React, { useEffect, useState } from 'react';
+
+import { libroDiffViewFactoryId } from './libro-diff-protocol';
+
+import type { DiffOption } from './libro-diff-protocol';
+import type { LibroDiffView } from './libro-diff-view';
+
+export function LibroDiffComponent(props: { options: DiffOption }) {
+  const [libroDiffView, setLibroDiffView] = useState<LibroDiffView | undefined>(undefined);
+  const viewManager = useInject(ViewManager);
+  useEffect(() => {
+    viewManager
+      .getOrCreateView<LibroDiffView>(libroDiffViewFactoryId, {
+        ...(props.options || {}),
+      })
+      .then((view) => {
+        setLibroDiffView(view);
+      });
+  }, []);
+  if (!libroDiffView || !libroDiffView.view) {
+    return null;
+  }
+  return <ViewRender view={libroDiffView} />;
+}

package/src/browser/libro/diff-view/libro-diff-protocol.ts

@@ -0,0 +1,94 @@
+import { concatMultilineString } from '@difizen/libro-common';
+
+import type { ICell, INotebookContent } from '@difizen/libro-common';
+import type { URI, View } from '@difizen/mana-app';
+
+export const libroDiffViewFactoryId = 'libro-diff-view-factory';
+
+export const getLibroCellType = (cell: ICell) => {
+  const cellType = (cell.metadata?.libroCellType as string) ?? cell.cell_type;
+  if (cellType === 'sql') {
+    return 'SQL';
+  }
+  return cellType.charAt(0).toUpperCase() + cellType.slice(1);
+};
+
+export const getSource = (cell: ICell) => {
+  let codeValue = concatMultilineString(cell.source);
+  if (getLibroCellType(cell) === 'SQL' && codeValue.includes(',tmp_table:')) {
+    codeValue = decodeURIComponent(escape(atob(codeValue.split(',tmp_table:')[0].substring(6))));
+  }
+  if (getLibroCellType(cell) === 'SQL' && codeValue.includes(',variable:')) {
+    codeValue = decodeURIComponent(escape(atob(codeValue.split(',variable:')[0].substring(6))));
+  }
+  return codeValue;
+};
+
+export type DiffCellItemResult = DiffCellItem | DiffCellUnchangedItems;
+export interface DiffView extends View {
+  diffCellsResult: DiffCellItemResult[];
+  originContent: IDiffNotebookContent;
+  targetContent: IDiffNotebookContent;
+  diffUnchangedCellsRenderStatus: 'all' | 'part' | 'none';
+  options?: Record<string, any>;
+}
+export interface IDiffNotebookContent {
+  content: INotebookContent;
+  diffTag: string;
+}
+
+export type DiffType = 'added' | 'removed' | 'changed' | 'unchanged';
+export interface DiffCellItem {
+  diffType: DiffType;
+  origin: ICell;
+  target: ICell;
+}
+
+export const DiffCellItem = {
+  is: (arg: Record<any, any>): arg is DiffCellItem =>
+    !!arg &&
+    'diffType' in arg &&
+    typeof (arg as any).diffType === 'string' &&
+    'origin' in arg &&
+    typeof (arg as any).origin === 'object' &&
+    'target' in arg &&
+    typeof (arg as any).target === 'object',
+};
+
+export interface DiffCellUnchangedItems {
+  isShown: boolean;
+  unchangedResultItems: DiffCellItem[];
+}
+
+export const DiffCellUnchangedItems = {
+  is: (arg: Record<any, any>): arg is DiffCellUnchangedItems =>
+    !!arg &&
+    'isShown' in arg &&
+    typeof (arg as any).isShown === 'boolean' &&
+    'unchangedResultItems' in arg &&
+    typeof (arg as any).unchangedResultItems === 'object',
+};
+
+export interface DiffArrayItem {
+  count: number;
+  added?: undefined | string;
+  removed?: undefined | string;
+  value: ICell[];
+}
+
+export interface DiffEditorProps {
+  diffCellResultItem: DiffCellItem & { originFilePath?: string; targetFilePath?: string };
+}
+
+export const DiffOption = Symbol('DiffOption');
+/**
+ * LibroDiff 创建参数
+ * 默认可 json 序列化
+ */
+export interface DiffOption {
+  loadType: string;
+  id?: string;
+  origin: URI;
+  target: URI;
+  [key: string]: any;
+}