Revert "feat: update diff editor"

This reverts commit d11c5fa.

Author: travzhang

packages/canyon-backend/src/app.module.ts

@@ -18,7 +18,6 @@ import { TypeOrmModule } from "@nestjs/typeorm";
 import { CollectModule } from "./apps/collect/collect.module";
 import { CoveragediskEntity } from "./apps/collect/entity/coveragedisk.entity";
 import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default';
-import {CodeModule} from "./code/code.module";
 
 
 @Module({
@@ -38,7 +37,6 @@ import {CodeModule} from "./code/code.module";
     CoverageModule,
     CodechangeModule,
     SourcecodeModule,
-    CodeModule,
     ServeStaticModule.forRoot({
       rootPath: join(__dirname, "../../canyon-platform", "dist"),
       exclude: ["/graphql"], // 这样就不会触发 path-to-regexp 解析错误

packages/canyon-backend/src/code/code.controller.ts

@@ -91,7 +91,6 @@ const Sha = () => {
                 fileContent: res.fileContent,
                 fileCoverage: res.fileCoverage,
                 fileCodeChange: res.fileCodeChange,
-                fileCodeChangeContent: res.fileCodeChangeContent,
               };
             });
           }}

packages/canyon-backend/src/code/code.module.ts

@@ -15,7 +15,7 @@ export function handleSelectFile({
   reportID,
 }: HandleSelectFile) {
   const fileContentRequest = axios
-    .get(`/api/code`, {
+    .get(`/api/sourcecode`, {
       params: {
         projectID: projectID,
         sha: sha,
@@ -52,7 +52,6 @@ export function handleSelectFile({
       fileContent: getDecode(fileContent.content),
       fileCoverage: fileCoverage,
       fileCodeChange: fileCodeChange.additions || [],
-      fileCodeChangeContent: getDecode(fileContent.oldContent),
     };
   });
 }

packages/canyon-backend/src/code/code.service.ts

@@ -15,7 +15,6 @@ const onSelectDefault = () => {
     fileContent: "",
     fileCoverage: emptyFileCoverageData,
     fileCodeChange: [],
-    fileCodeChangeContent: "",
   });
 };
 
@@ -39,7 +38,6 @@ const Report: FC<ReportProps> = ({
     b: {},
   });
   const [fileContent, setFileContent] = useState<string>("");
-  const [fileCodeChangeContent, setFileCodeChangeContent] = useState<string>("");
   const [fileCodeChange, setFileCodeChange] = useState<number[]>([]);
   const [onlyChange, setOnlyChange] = useState(Boolean(defaultOnlyShowChanged));
 
@@ -48,7 +46,6 @@ const Report: FC<ReportProps> = ({
     setFileContent(res.fileContent);
     setFileCoverage(res.fileCoverage);
     setFileCodeChange(res.fileCodeChange);
-    setFileCodeChangeContent(res.fileCodeChangeContent);
     return res;
   }
 
@@ -146,7 +143,6 @@ const Report: FC<ReportProps> = ({
         Object.keys(fileCoverage).length > 0 &&
         Object.keys(fileContent).length > 0 && (
           <FileCoverageDetail
-            fileCodeChangeContent={fileCodeChangeContent}
             fileContent={fileContent}
             fileCodeChange={fileCodeChange}
             fileCoverage={fileCoverage}

packages/canyon-backend/src/code/codechange2.service.ts

@@ -8,7 +8,6 @@ export interface ReportProps {
     fileCoverage: FileCoverageData;
     fileContent: string;
     fileCodeChange: number[];
-    fileCodeChangeContent: string;
   }>;
   defaultOnlyShowChanged: boolean;
 }

packages/canyon-platform/src/pages/index/projects/[id]/commits/[sha]/[...filepath].tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useMemo, useRef, useState } from "react";
-import { DiffEditor, Editor } from "@monaco-editor/react";
+import { Editor } from "@monaco-editor/react";
 
 // import * as monaco from "monaco-editor";
 import {
@@ -14,21 +14,20 @@ const { useToken } = theme;
 const FileCoverageDetail: FC<{
   fileContent: string;
   fileCodeChange: number[];
-  fileCodeChangeContent: string;
   fileCoverage: any;
-}> = ({ fileContent, fileCoverage, fileCodeChange, fileCodeChangeContent }) => {
+}> = ({ fileContent, fileCoverage, fileCodeChange }) => {
   const { token } = useToken();
   const { lines } = coreFn(fileCoverage, fileContent);
 
   const linesState = useMemo(() => {
     return lines.map((line, index) => {
       return {
         lineNumber: index + 1,
-        change: false,
+        change: fileCodeChange.includes(index + 1),
         hit: line.executionNumber,
       };
     });
-  }, [lines]);
+  }, [lines, fileCodeChange]);
 
   const lineNumbersMinChars = useMemo(() => {
     const maxHit = Math.max(...linesState.map((line) => line.hit));
@@ -63,20 +62,7 @@ const FileCoverageDetail: FC<{
   }
   useEffect(() => {
     if (editor) {
-      let needDeltaDecorationsEditor = null;
-
-      if (fileCodeChangeContent) {
-        const originalEditor = editor.getOriginalEditor();
-        originalEditor.updateOptions({
-          lineNumbers: false,
-        });
-        const modifiedEditor = editor.getModifiedEditor();
-        needDeltaDecorationsEditor = modifiedEditor;
-      } else {
-        needDeltaDecorationsEditor = editor;
-      }
-
-      needDeltaDecorationsEditor?.deltaDecorations?.(
+      editor?.deltaDecorations?.(
         [], // oldDecorations 每次清空上次标记的
         decorations.map(
           ({ inlineClassName, startLine, startCol, endLine, endCol }) => ({
@@ -105,70 +91,36 @@ const FileCoverageDetail: FC<{
         // border: "1px solid " + token.colorBorder,
       }}
     >
-      {fileCodeChangeContent ? (
-        <DiffEditor
-          original={fileCodeChangeContent}
-          modified={fileContent}
-          // theme={"vs-dark"}
-          height={"calc(100vh - 200px)"}
-          // height={`${18 * (lineCount + 1)}px`}
-          language={"javascript"}
-          onMount={handleEditorDidMount}
-          options={{
-            lineHeight: 18,
-            lineNumbers: (lineNumber) => {
-              return lineNumbers(
-                lineNumber,
-                linesState,
-                token.colorBgBase === "#000",
-              );
-            },
-            lineNumbersMinChars: lineNumbersMinChars,
-            readOnly: true,
-            folding: false,
-            minimap: { enabled: false },
-            scrollBeyondLastLine: false,
-            showUnused: false,
-            fontSize: 12,
-            fontFamily: "IBMPlexMono",
-            scrollbar: {
-              // handleMouseWheel: false,
-            },
-            contextmenu: false,
-          }}
-        />
-      ) : (
-        <Editor
-          value={fileContent}
-          theme={token.colorBgBase === "#000" ? "nightOwl" : "vs"}
-          height={"calc(100vh - 200px)"}
-          // height={`${18 * (lineCount + 1)}px`}
-          language={"javascript"}
-          onMount={handleEditorDidMount}
-          options={{
-            lineHeight: 18,
-            lineNumbers: (lineNumber) => {
-              return lineNumbers(
-                lineNumber,
-                linesState,
-                token.colorBgBase === "#000",
-              );
-            },
-            lineNumbersMinChars: lineNumbersMinChars,
-            readOnly: true,
-            folding: false,
-            minimap: { enabled: false },
-            scrollBeyondLastLine: false,
-            showUnused: false,
-            fontSize: 12,
-            fontFamily: "IBMPlexMono",
-            scrollbar: {
-              // handleMouseWheel: false,
-            },
-            contextmenu: false,
-          }}
-        />
-      )}
+      <Editor
+        value={fileContent}
+        theme={token.colorBgBase === "#000" ? "nightOwl" : "vs"}
+        height={"calc(100vh - 200px)"}
+        // height={`${18 * (lineCount + 1)}px`}
+        language={"javascript"}
+        onMount={handleEditorDidMount}
+        options={{
+          lineHeight: 18,
+          lineNumbers: (lineNumber) => {
+            return lineNumbers(
+              lineNumber,
+              linesState,
+              token.colorBgBase === "#000",
+            );
+          },
+          lineNumbersMinChars: lineNumbersMinChars,
+          readOnly: true,
+          folding: false,
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          showUnused: false,
+          fontSize: 12,
+          fontFamily: "IBMPlexMono",
+          scrollbar: {
+            // handleMouseWheel: false,
+          },
+          contextmenu: false,
+        }}
+      />
     </div>
   );
 };