feat: refine comparison controls and stats

JavaZeroo · JavaZeroo · commit 8f935e65ff67 · 2025-08-28T19:45:50.000+08:00
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -12,19 +12,19 @@
   "fileList.disabled": "Disabled",
   "fileList.config": "Configure file {{name}}",
   "fileList.delete": "Remove file {{name}}",
-  "comparison.title": "⚖️ Compare Mode",
+  "comparison.title": "Compare Mode",
   "comparison.select": "Select comparison mode",
   "comparison.multiFileMode": "Multi-file comparison mode",
   "comparison.modeBaseline": "Baseline vs others",
   "comparison.modePairwise": "Pairwise comparisons",
   "comparison.baselineFile": "Baseline file",
-  "comparison.normal": "📊 Mean Error (normal)",
+  "comparison.normal": "Mean Error (normal)",
   "comparison.normalDesc": "Mean error without absolute value",
-  "comparison.absolute": "📈 Mean Error (absolute)",
+  "comparison.absolute": "Mean Error (absolute)",
   "comparison.absoluteDesc": "Mean of absolute differences",
-  "comparison.relativeNormal": "📉 Relative Error (normal)",
+  "comparison.relativeNormal": "Relative Error (normal)",
   "comparison.relativeNormalDesc": "Relative error without absolute value",
-  "comparison.relative": "📊 Mean Relative Error (absolute)",
+  "comparison.relative": "Mean Relative Error (absolute)",
   "comparison.relativeDesc": "Mean of absolute relative error",
   "themeToggle.aria": "Toggle theme",
   "chart.noData": "📊 No data",
@@ -65,11 +65,18 @@
   "chart.area": "Chart display area",
   "chart.actions": "Chart action buttons",
   "chart.diffLabel": "{{title}} difference",
-  "comparison.panelTitle": "⚖️ {{key}} comparison ({{mode}})",
+  "comparison.panelTitle": "{{key}} comparison ({{mode}})",
   "comparison.meanNormal": "Mean error (normal): {{value}}",
   "comparison.meanAbsolute": "Mean error (absolute): {{value}}",
   "comparison.relativeError": "Relative error (normal): {{value}}",
   "comparison.meanRelative": "Mean relative error (absolute): {{value}}",
+  "comparison.pair": "Pair",
+  "comparison.meanNormalLabel": "Mean error (normal)",
+  "comparison.meanAbsoluteLabel": "Mean error (absolute)",
+  "comparison.relativeErrorLabel": "Relative error (normal)",
+  "comparison.meanRelativeLabel": "Mean relative error (absolute)",
+  "comparison.maxAbsoluteLabel": "Max absolute error",
+  "comparison.maxRelativeLabel": "Max relative error",
   "regex.preset": "Preset",
   "regex.selectPreset": "Select preset",
   "regex.mode": "Match Mode",
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -12,19 +12,19 @@
   "fileList.disabled": "已禁用",
   "fileList.config": "配置文件 {{name}}",
   "fileList.delete": "删除文件 {{name}}",
-  "comparison.title": "⚖️ 对比模式",
+  "comparison.title": "对比模式",
   "comparison.select": "选择数据对比模式",
   "comparison.multiFileMode": "多文件对比模式",
   "comparison.modeBaseline": "基准文件对比",
   "comparison.modePairwise": "成对比较",
   "comparison.baselineFile": "基准文件",
-  "comparison.normal": "📊 平均误差 (normal)",
+  "comparison.normal": "平均误差 (normal)",
   "comparison.normalDesc": "未取绝对值的平均误差",
-  "comparison.absolute": "📈 平均误差 (absolute)",
+  "comparison.absolute": "平均误差 (absolute)",
   "comparison.absoluteDesc": "绝对值差值的平均",
-  "comparison.relativeNormal": "📉 相对误差 (normal)",
+  "comparison.relativeNormal": "相对误差 (normal)",
   "comparison.relativeNormalDesc": "不取绝对值的相对误差",
-  "comparison.relative": "📊 平均相对误差 (absolute)",
+  "comparison.relative": "平均相对误差 (absolute)",
   "comparison.relativeDesc": "绝对相对误差的平均",
   "themeToggle.aria": "切换主题",
   "chart.noData": "📊 暂无数据",
@@ -65,11 +65,18 @@
   "chart.area": "图表显示区域",
   "chart.actions": "图表操作按钮",
   "chart.diffLabel": "{{title}} 差值",
-  "comparison.panelTitle": "⚖️ {{key}} 对比分析 ({{mode}})",
+  "comparison.panelTitle": "{{key}} 对比分析 ({{mode}})",
   "comparison.meanNormal": "平均误差 (normal): {{value}}",
   "comparison.meanAbsolute": "平均误差 (absolute): {{value}}",
   "comparison.relativeError": "相对误差 (normal): {{value}}",
   "comparison.meanRelative": "平均相对误差 (absolute): {{value}}",
+  "comparison.pair": "文件对",
+  "comparison.meanNormalLabel": "平均误差 (normal)",
+  "comparison.meanAbsoluteLabel": "平均误差 (absolute)",
+  "comparison.relativeErrorLabel": "相对误差 (normal)",
+  "comparison.meanRelativeLabel": "平均相对误差 (absolute)",
+  "comparison.maxAbsoluteLabel": "最大绝对误差",
+  "comparison.maxRelativeLabel": "最大相对误差",
   "regex.preset": "预设",
   "regex.selectPreset": "选择预设",
   "regex.mode": "匹配模式",
diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
@@ -569,12 +569,15 @@ export default function ChartContainer({
       const relNormalDiff = getComparisonData(base.data, target.data, 'relative-normal');
       const relDiff = getComparisonData(base.data, target.data, 'relative');
       const mean = arr => (arr.reduce((s, p) => s + p.y, 0) / arr.length) || 0;
+      const max = arr => arr.reduce((m, p) => (p.y > m ? p.y : m), 0);
       stats.push({
         label: `${target.name} vs ${base.name}`,
         meanNormal: mean(normalDiff),
         meanAbsolute: mean(absDiff),
         relativeError: mean(relNormalDiff),
-        meanRelative: mean(relDiff)
+        meanRelative: mean(relDiff),
+        maxAbsolute: max(absDiff),
+        maxRelative: max(relDiff)
       });
     };
 
@@ -777,19 +780,32 @@ export default function ChartContainer({
         </ResizablePanel>
         {comparisonChart}
         {stats && (
-          <div className="card">
-            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{key} {t('chart.diffStats')}</h4>
-            <div className="space-y-2 text-xs">
-              {stats.map(s => (
-                <div key={s.label} className="space-y-1">
-                  <p className="font-medium">{s.label}</p>
-                  <p>{t('comparison.meanNormal', { value: s.meanNormal.toFixed(6) })}</p>
-                  <p>{t('comparison.meanAbsolute', { value: s.meanAbsolute.toFixed(6) })}</p>
-                  <p>{t('comparison.relativeError', { value: s.relativeError.toFixed(6) })}</p>
-                  <p>{t('comparison.meanRelative', { value: s.meanRelative.toFixed(6) })}</p>
-                </div>
-              ))}
-            </div>
+          <div className="card overflow-x-auto">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{key} {t('chart.diffStats')}</h4>
+            <table className="min-w-full text-xs">
+              <thead>
+                <tr className="text-left">
+                  <th className="pr-2">{t('comparison.pair')}</th>
+                  <th className="text-right">{t('comparison.meanNormalLabel')}</th>
+                  <th className="text-right">{t('comparison.meanAbsoluteLabel')}</th>
+                  <th className="text-right">{t('comparison.maxAbsoluteLabel')}</th>
+                  <th className="text-right">{t('comparison.meanRelativeLabel')}</th>
+                  <th className="text-right">{t('comparison.maxRelativeLabel')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {stats.map(s => (
+                  <tr key={s.label} className="border-t border-gray-200 dark:border-gray-700">
+                    <td className="pr-2 py-1">{s.label}</td>
+                    <td className="text-right py-1">{s.meanNormal.toFixed(6)}</td>
+                    <td className="text-right py-1">{s.meanAbsolute.toFixed(6)}</td>
+                    <td className="text-right py-1">{s.maxAbsolute.toFixed(6)}</td>
+                    <td className="text-right py-1">{s.meanRelative.toFixed(6)}</td>
+                    <td className="text-right py-1">{s.maxRelative.toFixed(6)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
         )}
       </div>
diff --git a/src/components/ComparisonControls.jsx b/src/components/ComparisonControls.jsx
@@ -37,41 +37,64 @@ export function ComparisonControls({
 
       <div className="space-y-4">
         <div>
-          <label
-            htmlFor="multi-file-mode"
-            className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
-          >
+          <span className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
             {t('comparison.multiFileMode')}
-          </label>
-          <select
-            id="multi-file-mode"
-            value={multiFileMode}
-            onChange={(e) => onMultiFileModeChange?.(e.target.value)}
-            className="select"
+          </span>
+          <div
+            role="group"
+            aria-label={t('comparison.multiFileMode')}
+            className="inline-flex rounded-md border overflow-hidden"
           >
-            <option value="baseline">{t('comparison.modeBaseline')}</option>
-            <option value="pairwise">{t('comparison.modePairwise')}</option>
-          </select>
+            <button
+              type="button"
+              onClick={() => onMultiFileModeChange?.('baseline')}
+              aria-pressed={multiFileMode === 'baseline'}
+              className={`px-2 py-1 text-xs font-medium focus:outline-none ${
+                multiFileMode === 'baseline'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+              }`}
+            >
+              {t('comparison.modeBaseline')}
+            </button>
+            <button
+              type="button"
+              onClick={() => onMultiFileModeChange?.('pairwise')}
+              aria-pressed={multiFileMode === 'pairwise'}
+              className={`px-2 py-1 text-xs font-medium border-l focus:outline-none ${
+                multiFileMode === 'pairwise'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+              }`}
+            >
+              {t('comparison.modePairwise')}
+            </button>
+          </div>
         </div>
 
         {multiFileMode === 'baseline' && files.length > 1 && (
           <div>
-            <label
-              htmlFor="baseline-file"
-              className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
+            <span className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
               {t('comparison.baselineFile')}
-            </label>
-            <select
-              id="baseline-file"
-              value={baseline || (files[0]?.name ?? '')}
-              onChange={(e) => onBaselineChange?.(e.target.value)}
-              className="select"
-            >
+            </span>
+            <div className="space-y-1">
               {files.map(f => (
-                <option key={f.name} value={f.name}>{f.name}</option>
+                <label
+                  key={f.name}
+                  className="flex items-center gap-2 cursor-pointer text-xs"
+                >
+                  <input
+                    type="radio"
+                    name="baseline-file"
+                    value={f.name}
+                    checked={(baseline || files[0]?.name) === f.name}
+                    onChange={(e) => onBaselineChange?.(e.target.value)}
+                    className="radio"
+                  />
+                  <span className="text-gray-700 dark:text-gray-300">{f.name}</span>
+                </label>
               ))}
-            </select>
+            </div>
           </div>
         )}
 
@@ -80,24 +103,28 @@ export function ComparisonControls({
           {modes.map(mode => (
             <label
               key={mode.value}
-              className="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-1 rounded"
+              className={`flex items-start gap-2 rounded border p-2 cursor-pointer text-xs ${
+                compareMode === mode.value
+                  ? 'border-blue-500 bg-blue-50 dark:bg-gray-700'
+                  : 'border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
+              }`}
             >
               <input
                 type="radio"
                 name="compareMode"
                 value={mode.value}
                 checked={compareMode === mode.value}
                 onChange={(e) => onCompareModeChange(e.target.value)}
-                className="radio"
+                className="radio mt-0.5"
                 aria-describedby={`mode-${mode.value}-description`}
               />
-              <div className="ml-2">
-                <div className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              <div>
+                <div className="font-medium text-gray-700 dark:text-gray-300">
                   {mode.label}
                 </div>
                 <div
                   id={`mode-${mode.value}-description`}
-                  className="text-xs text-gray-500 dark:text-gray-400"
+                  className="text-gray-500 dark:text-gray-400"
                 >
                   {mode.description}
                 </div>
diff --git a/src/components/__tests__/ComparisonControls.test.jsx b/src/components/__tests__/ComparisonControls.test.jsx
@@ -28,12 +28,12 @@ describe('ComparisonControls', () => {
     await user.click(absoluteOption);
     expect(handleMode).toHaveBeenCalledWith('absolute');
 
-    const strategySelect = screen.getByLabelText(i18n.t('comparison.multiFileMode'));
-    await user.selectOptions(strategySelect, 'pairwise');
+    const pairwiseButton = screen.getByRole('button', { name: i18n.t('comparison.modePairwise') });
+    await user.click(pairwiseButton);
     expect(handleStrategy).toHaveBeenCalledWith('pairwise');
 
-    const baselineSelect = screen.getByLabelText(i18n.t('comparison.baselineFile'));
-    await user.selectOptions(baselineSelect, 'b.log');
+    const baselineRadio = screen.getByLabelText('b.log');
+    await user.click(baselineRadio);
     expect(handleBaseline).toHaveBeenCalledWith('b.log');
   });
 });
