From f332c3cab0e5aa2429289946f2f9fd787a369340 Mon Sep 17 00:00:00 2001
From: Kwon Seo Jin <97675977+B0XERCAT@users.noreply.github.com>
Date: Sat, 16 Nov 2024 23:11:33 +0900
Subject: [PATCH] fix(fe): truncate huge size output (#2213)

* chore(fe): distinguish sample and user in TestSummary

* fix(fe): fix sample testcase resize bug

* fix(fe): truncate output

* fix(fe): add condition for highlighting white space

* chore(fe): add notes
---
 .../TestcasePanel/AddUserTestcaseDialog.tsx   |  2 +-
 .../TestcasePanel/TestcasePanel.tsx           | 39 ++++++++++++++-----
 .../_components/WhitespaceVisualizer.tsx      | 13 +++++--
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/AddUserTestcaseDialog.tsx b/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/AddUserTestcaseDialog.tsx
index 3868a86cec..249031b023 100644
--- a/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/AddUserTestcaseDialog.tsx
+++ b/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/AddUserTestcaseDialog.tsx
@@ -154,7 +154,7 @@ function SampleTestcaseItem({
   return (
     <div
       className={cn(
-        'flex h-[80px] w-full rounded-md border border-[#313744] bg-[#222939] font-mono shadow-sm'
+        'flex min-h-[80px] w-full rounded-md border border-[#313744] bg-[#222939] font-mono shadow-sm'
       )}
     >
       <div className="relative flex-1">
diff --git a/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/TestcasePanel.tsx b/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/TestcasePanel.tsx
index 716441d451..9f9705a571 100644
--- a/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/TestcasePanel.tsx
+++ b/apps/frontend/app/(client)/(code-editor)/_components/TestcasePanel/TestcasePanel.tsx
@@ -35,7 +35,20 @@ export default function TestcasePanel() {
     }
   }
 
+  const MAX_OUTPUT_LENGTH = 100000
   const testResults = useTestResults()
+  const processedData = testResults.map((testcase) => ({
+    ...testcase,
+    output:
+      testcase.output.length > MAX_OUTPUT_LENGTH
+        ? testcase.output.slice(0, MAX_OUTPUT_LENGTH)
+        : testcase.output
+  }))
+  const summaryData = processedData.map(({ id, result, isUserTestcase }) => ({
+    id,
+    result,
+    isUserTestcase
+  }))
 
   return (
     <>
@@ -96,15 +109,15 @@ export default function TestcasePanel() {
       <ScrollArea className="h-full">
         {currentTab === 0 ? (
           <div className="flex flex-col gap-6 p-5 pb-14">
-            <TestSummary data={testResults} />
+            <TestSummary data={summaryData} />
             <TestcaseTable
-              data={testResults}
+              data={processedData}
               moveToDetailTab={moveToDetailTab}
             />
           </div>
         ) : (
           <TestResultDetail
-            data={testResults.find((item) => item.id === currentTab)}
+            data={processedData.find((item) => item.id === currentTab)}
           />
         )}
       </ScrollArea>
@@ -175,15 +188,23 @@ function TestcaseTab({
   )
 }
 
-function TestSummary({ data }: { data: TestResultDetail[] }) {
+function TestSummary({
+  data
+}: {
+  data: { id: number; result: string; isUserTestcase: boolean }[]
+}) {
   const acceptedCount = data.filter(
     (testcase) => testcase.result === 'Accepted'
   ).length
 
   const total = data.length
 
-  const notAcceptedIndexes = data
-    .map((testcase, index) => (testcase.result !== 'Accepted' ? index : -1))
+  const notAcceptedTestcases = data
+    .map((testcase, index) =>
+      testcase.result !== 'Accepted'
+        ? `${testcase.isUserTestcase ? 'User' : 'Sample'} #${index + 1}`
+        : -1
+    )
     .filter((index) => index !== -1)
 
   return (
@@ -195,15 +216,13 @@ function TestSummary({ data }: { data: TestResultDetail[] }) {
             {acceptedCount}/{total}
           </td>
         </tr>
-        {notAcceptedIndexes.length > 0 && (
+        {notAcceptedTestcases.length > 0 && (
           <tr>
             <td className="w-52 py-1 align-top text-slate-400">
               Wrong Testcase Number:
             </td>
             <td className="py-1 text-white">
-              {notAcceptedIndexes
-                .map((index) => `Sample #${index + 1}`)
-                .join(', ')}
+              {notAcceptedTestcases.join(', ')}
             </td>
           </tr>
         )}
diff --git a/apps/frontend/app/(client)/(code-editor)/_components/WhitespaceVisualizer.tsx b/apps/frontend/app/(client)/(code-editor)/_components/WhitespaceVisualizer.tsx
index aa1896f1e4..9866e91a17 100644
--- a/apps/frontend/app/(client)/(code-editor)/_components/WhitespaceVisualizer.tsx
+++ b/apps/frontend/app/(client)/(code-editor)/_components/WhitespaceVisualizer.tsx
@@ -12,10 +12,15 @@ export function WhitespaceVisualizer({
 }) {
   const whitespaceStyle =
     'color: rgb(53, 129, 250); min-width: 0.5em; display: inline-block;'
-  const highlightedWhitespaceText = text
-    .replaceAll(/ /g, `<span style="${whitespaceStyle}">␣</span>`)
-    .replaceAll(/\n/g, `<span style="${whitespaceStyle}">↵</span>\n`)
-    .replaceAll(/\t/g, `<span style="${whitespaceStyle}">↹</span>`)
+
+  // NOTE: Skip highlighting if text exceeds 100,000 characters to avoid performance issues.
+  const highlightedWhitespaceText =
+    text.length >= 100000
+      ? text
+      : text
+          .replaceAll(/ /g, `<span style="${whitespaceStyle}">␣</span>`)
+          .replaceAll(/\n/g, `<span style="${whitespaceStyle}">↵</span>\n`)
+          .replaceAll(/\t/g, `<span style="${whitespaceStyle}">↹</span>`)
 
   const lines = highlightedWhitespaceText.split('\n')
   const visibleLines = lines.slice(0, 3).join('\n')