feat: P1 — toasts, LTTB downsampling, IndexedDB, parse progress, shared metric helpers

- Add ToastProvider/useToast and replace silent console.warn for parse errors,
  storage quota, and clipboard outcomes
- Add LTTB downsampling for chart performance with UI toggle + threshold
  (default on, 2000 pts)
- Migrate file persistence to IndexedDB with auto-migration from legacy
  localStorage; falls back to localStorage when IDB is unavailable
- Worker emits PARSE_PROGRESS between metrics; FileList renders per-file
  progress bar while parsing
- Extract MATCH_MODES/MODE_CONFIG/getMetricTitle to src/utils/metricHelpers,
  removing duplication across RegexControls, FileConfigModal, ChartContainer
- Tests: +26 cases covering downsample, fileStorage, ToastContext, FileList
  progress, and worker progress messages

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: JavaZeroo

public/locales/en/translation.json

@@ -56,6 +56,10 @@
   "display.options": "🎛️ Display Options",
   "display.chart": "📊 Chart Display",
   "display.chartDesc": "Automatically shows charts for all configured metrics after upload",
+  "display.performance": "Performance",
+  "display.downsample": "Downsample large datasets",
+  "display.downsampleDesc": "Uses LTTB to keep visual shape while reducing rendered points. Disable to see every data point.",
+  "display.downsampleThreshold": "Max points per series",
   "display.baseline": "Baseline Settings",
   "display.relativeBaseline": "Relative error baseline",
   "display.relativeBaselineDesc": "Set baseline value for relative error comparison",
@@ -134,5 +138,10 @@
   "configModal.example2": "Start: 50, End: empty → shows data points 51-end",
   "configModal.example3": "Start: 0, End: empty → shows all data points (default)",
   "configModal.cancel": "Cancel",
-  "configModal.save": "Save Config"
+  "configModal.save": "Save Config",
+  "toast.parseError": "Failed to parse {{name}}: {{error}}",
+  "toast.parseComplete": "Parsed {{name}}",
+  "toast.storageQuotaExceeded": "Storage limit reached. File persistence has been disabled for this session.",
+  "toast.copyImageSuccess": "Image copied to clipboard",
+  "toast.copyImageError": "Failed to copy image"
 }

public/locales/zh/translation.json

@@ -56,6 +56,10 @@
   "display.options": "🎛️ 显示选项",
   "display.chart": "📊 图表显示",
   "display.chartDesc": "上传文件后自动展示所有已配置的指标图表",
+  "display.performance": "性能",
+  "display.downsample": "对大数据集启用降采样",
+  "display.downsampleDesc": "使用 LTTB 算法在保留曲线形态的前提下减少绘制点数。关闭以查看完整数据点。",
+  "display.downsampleThreshold": "每条曲线最大点数",
   "display.baseline": "基准线设置",
   "display.relativeBaseline": "相对误差 Baseline",
   "display.relativeBaselineDesc": "设置相对误差对比的基准线数值",
@@ -134,5 +138,10 @@
   "configModal.example2": "起始: 50, 结束: 留空 → 显示第51个数据点到结尾",
   "configModal.example3": "起始: 0, 结束: 留空 → 显示全部数据点（默认）",
   "configModal.cancel": "取消",
-  "configModal.save": "保存配置"
+  "configModal.save": "保存配置",
+  "toast.parseError": "解析 {{name}} 失败：{{error}}",
+  "toast.parseComplete": "已解析 {{name}}",
+  "toast.storageQuotaExceeded": "存储空间已满，本次会话将不再持久化文件。",
+  "toast.copyImageSuccess": "图片已复制到剪贴板",
+  "toast.copyImageError": "复制图片失败"
 }

src/App.jsx

@@ -10,6 +10,8 @@ import { ThemeToggle } from './components/ThemeToggle';
 import { Header } from './components/Header';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { mergeFilesWithReplacement } from './utils/mergeFiles.js';
+import { useToast } from './components/ToastContext.jsx';
+import { loadFiles as loadFilesFromStorage, saveFiles as saveFilesToStorage, clearFiles as clearFilesInStorage } from './utils/fileStorage.js';
 
 // Threshold for "large file" - files above this won't have content persisted
 const LARGE_FILE_THRESHOLD = 5 * 1024 * 1024; // 5MB of content
@@ -34,34 +36,58 @@ export const DEFAULT_GLOBAL_PARSING_CONFIG = {
   stepKeyword: 'step:'
 };
 
+export const DEFAULT_CHART_CONFIG = {
+  downsampleEnabled: true,
+  downsampleThreshold: 2000
+};
+
+function restoreFile(file) {
+  return {
+    ...file,
+    enabled: file.enabled ?? true,
+    isParsing: false,
+    metricsData: file.metricsData || {},
+    needsReupload: file.isLargeFile && !file.content
+  };
+}
+
 function App() {
   const { t } = useTranslation();
+  const toast = useToast();
+  const toastRef = useRef(toast);
+  const tRef = useRef(t);
+  useEffect(() => { toastRef.current = toast; }, [toast]);
+  useEffect(() => { tRef.current = t; }, [t]);
+  // Sync init from legacy localStorage so the first paint matches prior behavior;
+  // an async IndexedDB load below will replace this state if richer data is present.
   const [uploadedFiles, setUploadedFiles] = useState(() => {
     const stored = localStorage.getItem('uploadedFiles');
     if (!stored) return [];
     try {
       const parsed = JSON.parse(stored);
-      // Restore files with proper defaults for large files that have metricsData
-      return parsed.map(file => ({
-        ...file,
-        enabled: file.enabled ?? true,
-        isParsing: false,
-        // For large files, metricsData is already stored; for small files it will be re-parsed
-        metricsData: file.metricsData || {},
-        // Mark large files that need re-upload for re-parsing
-        needsReupload: file.isLargeFile && !file.content
-      }));
+      return parsed.map(restoreFile);
     } catch {
       return [];
     }
   });
+  const initialLoadDoneRef = useRef(false);
 
   // Global parsing configuration state
   const [globalParsingConfig, setGlobalParsingConfig] = useState(() => {
     const stored = localStorage.getItem('globalParsingConfig');
     return stored ? JSON.parse(stored) : JSON.parse(JSON.stringify(DEFAULT_GLOBAL_PARSING_CONFIG));
   });
 
+  const [chartConfig, setChartConfig] = useState(() => {
+    const stored = localStorage.getItem('chartConfig');
+    if (!stored) return { ...DEFAULT_CHART_CONFIG };
+    try {
+      return { ...DEFAULT_CHART_CONFIG, ...JSON.parse(stored) };
+    } catch {
+      return { ...DEFAULT_CHART_CONFIG };
+    }
+  });
+
   const [compareMode, setCompareMode] = useState('normal');
   const [multiFileMode, setMultiFileMode] = useState('baseline');
   const [baselineFile, setBaselineFile] = useState('');
@@ -85,29 +111,46 @@ function App() {
 
     workerRef.current.onmessage = (e) => {
       const { type, payload } = e.data;
-      if (type === 'PARSE_COMPLETE') {
+      if (type === 'PARSE_PROGRESS') {
         setUploadedFiles(prev => prev.map(file => {
           if (file.id === payload.fileId) {
-            return {
-              ...file,
-              metricsData: payload.metricsData,
-              isParsing: false
-            };
+            return { ...file, progress: payload.progress };
           }
           return file;
         }));
-      } else if (type === 'PARSE_ERROR') {
-        console.error('Worker parsing error:', payload.error);
+      } else if (type === 'PARSE_COMPLETE') {
         setUploadedFiles(prev => prev.map(file => {
           if (file.id === payload.fileId) {
             return {
               ...file,
+              metricsData: payload.metricsData,
               isParsing: false,
-              error: payload.error
+              progress: 1
             };
           }
           return file;
         }));
+      } else if (type === 'PARSE_ERROR') {
+        console.error('Worker parsing error:', payload.error);
+        setUploadedFiles(prev => {
+          const target = prev.find(f => f.id === payload.fileId);
+          if (target) {
+            toastRef.current.error(
+              tRef.current('toast.parseError', { name: target.name, error: payload.error })
+            );
+          }
+          return prev.map(file => {
+            if (file.id === payload.fileId) {
+              return {
+                ...file,
+                isParsing: false,
+                progress: undefined,
+                error: payload.error
+              };
+            }
+            return file;
+          });
+        });
       }
     };
 
@@ -128,6 +171,26 @@ function App() {
     }
   }, [enabledFiles, baselineFile]);
 
+  // Async load from IndexedDB on mount. Overrides the sync localStorage init
+  // if richer data is present (e.g. after migration or in IDB-capable browsers).
+  useEffect(() => {
+    let cancelled = false;
+    loadFilesFromStorage().then(files => {
+      if (cancelled) return;
+      initialLoadDoneRef.current = true;
+      if (Array.isArray(files) && files.length > 0) {
+        setUploadedFiles(prev => {
+          // Avoid overwriting if user already added files during async load
+          if (prev.length > 0) return prev;
+          return files.map(restoreFile);
+        });
+      }
+    }).catch(() => {
+      initialLoadDoneRef.current = true;
+    });
+    return () => { cancelled = true; };
+  }, []);
+
   // Persist configuration to localStorage
   useEffect(() => {
     if (savingDisabledRef.current) return;
@@ -136,53 +199,43 @@ function App() {
 
   useEffect(() => {
     if (savingDisabledRef.current) return;
-    try {
-      // Smart serialization: for large files, only store metricsData (not raw content)
-      // This allows the app to still display charts after refresh, but re-parsing will need re-upload
-      const serialized = uploadedFiles.map(({ id, name, enabled, content, config, metricsData }) => {
-        const isLargeFile = content && content.length > LARGE_FILE_THRESHOLD;
-        return {
-          id,
-          name,
-          enabled,
-          // For large files, don't store content to save memory/storage
-          content: isLargeFile ? null : content,
-          config,
-          // Store metricsData for large files so charts still work after refresh
-          metricsData: isLargeFile ? metricsData : undefined,
-          // Flag to indicate this file needs re-upload for re-parsing
-          isLargeFile
-        };
-      });
-      if (serialized.length > 0) {
-        const json = JSON.stringify(serialized);
-        // Avoid filling localStorage with very large data
-        if (json.length > 5 * 1024 * 1024) {
-          savingDisabledRef.current = true;
-          console.warn('Uploaded files exceed storage limit; persistence disabled.');
-          return;
-        }
-        localStorage.setItem('uploadedFiles', json);
-      } else {
-        localStorage.removeItem('uploadedFiles');
-      }
-    } catch (err) {
-      if (err instanceof DOMException && err.name === 'QuotaExceededError') {
+    localStorage.setItem('chartConfig', JSON.stringify(chartConfig));
+  }, [chartConfig]);
+
+  useEffect(() => {
+    if (savingDisabledRef.current) return;
+    // Smart serialization: for large files, only store metricsData (not raw content).
+    // Charts still render after refresh, but re-parsing requires re-upload.
+    const serialized = uploadedFiles.map(({ id, name, enabled, content, config, metricsData }) => {
+      const isLargeFile = content && content.length > LARGE_FILE_THRESHOLD;
+      return {
+        id,
+        name,
+        enabled,
+        content: isLargeFile ? null : content,
+        config,
+        metricsData: isLargeFile ? metricsData : undefined,
+        isLargeFile
+      };
+    });
+    saveFilesToStorage(serialized).catch(err => {
+      if (err && (err.name === 'QuotaExceededError' || err.code === 22)) {
         savingDisabledRef.current = true;
-        console.warn('LocalStorage quota exceeded; uploaded files will not be persisted.');
-        localStorage.removeItem('uploadedFiles');
+        console.warn('Storage quota exceeded; uploaded files will not be persisted.');
+        toastRef.current.warning(t('toast.storageQuotaExceeded'));
       } else {
-        throw err;
+        console.warn('Failed to persist uploaded files', err);
       }
-    }
-  }, [uploadedFiles]);
+    });
+  }, [uploadedFiles, t]);
 
   const handleFilesUploaded = useCallback((files) => {
     const filesWithDefaults = files.map(file => ({
       ...file,
       enabled: true,
       metricsData: {}, // Initialize empty
       isParsing: true, // Mark as parsing
+      progress: 0,
       config: {
         // Use global parsing config as default values
         metrics: globalParsingConfig.metrics.map(m => ({ ...m })),
@@ -273,7 +326,7 @@ function App() {
             }
           });
         }
-        return { ...file, config, isParsing: true };
+        return { ...file, config, isParsing: true, progress: 0 };
       }
       return file;
     }));
@@ -320,7 +373,8 @@ function App() {
           return {
             ...file,
             config: newFileConfig,
-            isParsing: true
+            isParsing: true,
+            progress: 0
           };
         }
         return file;
@@ -333,8 +387,10 @@ function App() {
   const handleResetConfig = useCallback(() => {
     savingDisabledRef.current = true;
     localStorage.removeItem('globalParsingConfig');
-    localStorage.removeItem('uploadedFiles');
+    localStorage.removeItem('chartConfig');
+    clearFilesInStorage();
     setGlobalParsingConfig(JSON.parse(JSON.stringify(DEFAULT_GLOBAL_PARSING_CONFIG)));
+    setChartConfig({ ...DEFAULT_CHART_CONFIG });
     setUploadedFiles([]);
     setTimeout(() => {
       savingDisabledRef.current = false;
@@ -573,6 +629,44 @@ function App() {
                     <p className="text-xs text-gray-500 dark:text-gray-400">{t('display.chartDesc')}</p>
                   </div>
 
+                  <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
+                    <h4 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">{t('display.performance')}</h4>
+                    <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mb-2">
+                      <input
+                        type="checkbox"
+                        className="mr-2 checkbox"
+                        checked={chartConfig.downsampleEnabled}
+                        onChange={(e) => setChartConfig(prev => ({ ...prev, downsampleEnabled: e.target.checked }))}
+                      />
+                      {t('display.downsample')}
+                    </label>
+                    {chartConfig.downsampleEnabled && (
+                      <div>
+                        <label
+                          htmlFor="downsample-threshold"
+                          className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
+                        >
+                          {t('display.downsampleThreshold')}
+                        </label>
+                        <input
+                          id="downsample-threshold"
+                          type="number"
+                          min="100"
+                          step="100"
+                          value={chartConfig.downsampleThreshold}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (Number.isFinite(v) && v >= 100) {
+                              setChartConfig(prev => ({ ...prev, downsampleThreshold: v }));
+                            }
+                          }}
+                          className="input-field"
+                        />
+                      </div>
+                    )}
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('display.downsampleDesc')}</p>
+                  </div>
+
                   <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
                     <h4 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">{t('display.baseline')}</h4>
                     <div className="space-y-3">
@@ -649,6 +743,8 @@ function App() {
               onXRangeChange={setXRange}
               yRange={yRange}
               onMaxStepChange={setMaxStep}
+              downsampleEnabled={chartConfig.downsampleEnabled}
+              downsampleThreshold={chartConfig.downsampleThreshold}
             />
           </section>
         </main>