feat: P2 viz + sidebar UX — log axis, smoothing, stats, chart types, combined view, annotations

Visualization (P2):
- Log Y axis: register LogarithmicScale; UI toggle (linear/log); buildYScale
  helper handles both branches and respects manual yRange (positive only on log)
- Smoothing: utils/smoothing.js with trailing moving average and EMA
  (alpha = 2/(N+1)); UI selects method + window size; applied before downsampling
- Statistics panel: utils/stats.js computes min/max/mean/std/last/count;
  per-curve table rendered below charts when enabled
- Multi chart types: line/scatter/bar via <ReactChart type=>; registered Bar +
  Line + Scatter controllers
- Combined view: single chart overlays all metrics with dual Y axis
  (first metric → left, rest → right with dashed border); default height 720px
- Annotations: chartjs-plugin-annotation integration + AnnotationsPanel sidebar
  UI to add/remove vertical event markers; rendered across all charts

Sidebar UX:
- useCollapsedSection hook persists each card's open/closed state to localStorage
- CollapsibleCardHeader component shared across RegexControls / FileList /
  AnnotationsPanel / ComparisonControls (collapseId prop is opt-in, backward
  compatible with existing tests)
- Display Options card refactored into 5 tabs (Chart / Smoothing / Stats /
  Performance / Baseline); active tab persisted

Tests: +16 new cases (smoothing, stats); chart.js + react-chartjs-2 mocks
updated for new Chart.js scale/controller imports and annotation plugin.

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

Author: JavaZeroo

package-lock.json

@@ -17,6 +17,7 @@
     "@tailwindcss/forms": "^0.5.10",
     "autoprefixer": "^10.4.21",
     "chart.js": "^4.5.0",
+    "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-zoom": "^2.2.0",
     "i18next": "^25.4.2",
     "lucide-react": "^0.522.0",

package.json

@@ -56,11 +56,46 @@
   "display.options": "🎛️ Display Options",
   "display.chart": "📊 Chart Display",
   "display.chartDesc": "Automatically shows charts for all configured metrics after upload",
+  "display.tabChart": "Chart",
+  "display.tabSmoothing": "Smoothing",
+  "display.tabStats": "Stats",
+  "display.tabPerformance": "Performance",
+  "display.tabBaseline": "Baseline",
   "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.chartType": "Chart",
+  "display.chartTypeLabel": "Type",
+  "display.chartTypeLine": "Line",
+  "display.chartTypeScatter": "Scatter",
+  "display.chartTypeBar": "Bar",
+  "display.yAxisType": "Y axis",
+  "display.yAxisLinear": "Linear",
+  "display.yAxisLog": "Logarithmic",
+  "display.combinedView": "Combined view (dual Y axis)",
+  "display.smoothing": "Smoothing",
+  "display.smoothingNone": "None",
+  "display.smoothingMA": "Moving average",
+  "display.smoothingEMA": "Exponential moving average",
+  "display.smoothingWindow": "Window: {{value}}",
+  "display.showStats": "Show statistics panel",
   "display.baseline": "Baseline Settings",
+  "chart.combinedTitle": "📊 Combined view",
+  "chart.summaryStats": "Summary statistics",
+  "chart.stats.file": "File",
+  "chart.stats.min": "Min",
+  "chart.stats.max": "Max",
+  "chart.stats.mean": "Mean",
+  "chart.stats.std": "Std",
+  "chart.stats.last": "Last",
+  "chart.stats.count": "n",
+  "annotations.title": "📍 Annotations",
+  "annotations.xPlaceholder": "x",
+  "annotations.labelPlaceholder": "Label (optional)",
+  "annotations.add": "Add annotation",
+  "annotations.remove": "Remove annotation at x={{x}}",
+  "annotations.empty": "No annotations. Add a step to mark events (e.g. checkpoint saved, LR decay).",
   "display.relativeBaseline": "Relative error baseline",
   "display.relativeBaselineDesc": "Set baseline value for relative error comparison",
   "display.absoluteBaseline": "Absolute error baseline",

public/locales/en/translation.json

@@ -56,11 +56,46 @@
   "display.options": "🎛️ 显示选项",
   "display.chart": "📊 图表显示",
   "display.chartDesc": "上传文件后自动展示所有已配置的指标图表",
+  "display.tabChart": "图表",
+  "display.tabSmoothing": "平滑",
+  "display.tabStats": "统计",
+  "display.tabPerformance": "性能",
+  "display.tabBaseline": "基准",
   "display.performance": "性能",
   "display.downsample": "对大数据集启用降采样",
   "display.downsampleDesc": "使用 LTTB 算法在保留曲线形态的前提下减少绘制点数。关闭以查看完整数据点。",
   "display.downsampleThreshold": "每条曲线最大点数",
+  "display.chartType": "图表",
+  "display.chartTypeLabel": "类型",
+  "display.chartTypeLine": "折线",
+  "display.chartTypeScatter": "散点",
+  "display.chartTypeBar": "柱状",
+  "display.yAxisType": "Y 轴",
+  "display.yAxisLinear": "线性",
+  "display.yAxisLog": "对数",
+  "display.combinedView": "合并视图（双 Y 轴）",
+  "display.smoothing": "平滑",
+  "display.smoothingNone": "关闭",
+  "display.smoothingMA": "移动平均",
+  "display.smoothingEMA": "指数移动平均",
+  "display.smoothingWindow": "窗口: {{value}}",
+  "display.showStats": "显示统计面板",
   "display.baseline": "基准线设置",
+  "chart.combinedTitle": "📊 合并视图",
+  "chart.summaryStats": "曲线统计",
+  "chart.stats.file": "文件",
+  "chart.stats.min": "最小",
+  "chart.stats.max": "最大",
+  "chart.stats.mean": "均值",
+  "chart.stats.std": "标准差",
+  "chart.stats.last": "末值",
+  "chart.stats.count": "n",
+  "annotations.title": "📍 事件标注",
+  "annotations.xPlaceholder": "x",
+  "annotations.labelPlaceholder": "标签（可选）",
+  "annotations.add": "添加标注",
+  "annotations.remove": "删除 x={{x}} 处的标注",
+  "annotations.empty": "暂无标注。添加 step 值以标记事件（如 checkpoint saved、LR decay）。",
   "display.relativeBaseline": "相对误差 Baseline",
   "display.relativeBaselineDesc": "设置相对误差对比的基准线数值",
   "display.absoluteBaseline": "绝对误差 Baseline",