From 5116f0d4f1eaac3027da3e567334e56d266d533f Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 18:04:58 +0800
Subject: [PATCH 1/5] feat: add sidebar toggle

---
 src/App.jsx | 49 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6f3a265..7384d59 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import ChartContainer from './components/ChartContainer';
 import { ComparisonControls } from './components/ComparisonControls';
 import { Header } from './components/Header';
 import { FileConfigModal } from './components/FileConfigModal';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 
 function App() {
   const [uploadedFiles, setUploadedFiles] = useState([]);
@@ -37,6 +38,7 @@ function App() {
   const [, setDragCounter] = useState(0);
   const [xRange, setXRange] = useState({ min: undefined, max: undefined });
   const [maxStep, setMaxStep] = useState(0);
+  const [sidebarVisible, setSidebarVisible] = useState(true);
 
   const handleFilesUploaded = useCallback((files) => {
     const filesWithDefaults = files.map(file => ({
@@ -188,7 +190,7 @@ function App() {
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative">
       {/* 全页面拖拽覆盖层 */}
       {globalDragOver && (
-        <div 
+        <div
           className="fixed inset-0 bg-blue-600 bg-opacity-95 z-50 flex items-center justify-center backdrop-blur-sm drag-overlay-fade-in"
         >
           <div 
@@ -230,20 +232,31 @@ function App() {
         </div>
       )}
 
+      {!sidebarVisible && (
+        <button
+          onClick={() => setSidebarVisible(true)}
+          className="fixed top-3 left-3 z-40 p-2 bg-white rounded-full shadow-md text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-label="显示工具栏"
+        >
+          <PanelLeftOpen size={20} aria-hidden="true" />
+        </button>
+      )}
+
       <div className="w-full px-3 py-3">
-        
-        <main 
+
+        <main
           id="main-content"
-          className="grid grid-cols-1 xl:grid-cols-5 gap-3" 
+          className="grid grid-cols-1 xl:grid-cols-5 gap-3"
           role="main"
         >
-          <aside 
-            className="xl:col-span-1 space-y-3"
-            role="complementary"
-            aria-label="控制面板"
-          >
-            {/* 标题信息 */}
-            <div className="bg-white rounded-lg shadow-md p-3">
+          {sidebarVisible && (
+            <aside
+              className="xl:col-span-1 space-y-3"
+              role="complementary"
+              aria-label="控制面板"
+            >
+              {/* 标题信息 */}
+              <div className="bg-white rounded-lg shadow-md p-3">
               <div className="flex items-center gap-2 mb-2">
                 <div className="p-2 bg-blue-100 rounded-lg">
                   <svg className="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -253,6 +266,13 @@ function App() {
                 <h1 className="text-lg font-bold text-gray-800">
                   Log Analyzer
                 </h1>
+                <button
+                  onClick={() => setSidebarVisible(false)}
+                  className="ml-auto p-1 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
+                  aria-label="隐藏工具栏"
+                >
+                  <PanelLeftClose size={16} aria-hidden="true" />
+                </button>
               </div>
               <p className="text-sm text-gray-600 mb-3">
                 📊 分析和可视化大模型训练日志中的损失函数和梯度范数数据
@@ -375,10 +395,11 @@ function App() {
                   </div>
                 </div>
               </div>
-            </section>
-          </aside>
+              </section>
+            </aside>
+          )}
 
-          <section 
+          <section
             className="xl:col-span-4"
             role="region"
             aria-label="图表显示区域"

From bfb3ebc02dca6bc00bed73bee9ac0363a5a1db51 Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 18:49:48 +0800
Subject: [PATCH 2/5] Expand chart area when sidebar hidden

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7384d59..d105d5e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -400,7 +400,7 @@ function App() {
           )}
 
           <section
-            className="xl:col-span-4"
+            className={sidebarVisible ? 'xl:col-span-4' : 'xl:col-span-5'}
             role="region"
             aria-label="图表显示区域"
           >

From 8feff9b6171ebe901e57120429b162afccd530d9 Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 20:19:57 +0800
Subject: [PATCH 3/5] Limit y-axis padding

---
 src/components/ChartContainer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index 495c99f..4b0ac55 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -326,7 +326,7 @@ export default function ChartContainer({
         display: true,
         title: { display: true, text: 'Value' },
         bounds: 'data',
-        grace: '20%',
+        grace: '5%',
         ticks: {
           callback: function (value) {
             return Number(value.toPrecision(2));

From c1d565251b58a99bf4c3a50a9e385e67f637e047 Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 20:20:03 +0800
Subject: [PATCH 4/5] Adjust y-axis range

---
 src/components/ChartContainer.jsx | 67 +++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index 4b0ac55..9c6038e 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -214,6 +214,25 @@ export default function ChartContainer({
     return result;
   };
 
+  const calculateYRange = useCallback((dataArray) => {
+    let min = Infinity;
+    let max = -Infinity;
+    dataArray.forEach(item => {
+      item.data.forEach(point => {
+        if (point.y < min) min = point.y;
+        if (point.y > max) max = point.y;
+      });
+    });
+    if (min === Infinity || max === -Infinity) {
+      return { min: 0, max: 1 };
+    }
+    if (min === max) {
+      return { min: min - 1, max: max + 1 };
+    }
+    const pad = (max - min) * 0.05;
+    return { min: min - pad, max: max + pad };
+  }, []);
+
   const chartOptions = useMemo(() => ({
     responsive: true,
     maintainAspectRatio: false,
@@ -326,7 +345,6 @@ export default function ChartContainer({
         display: true,
         title: { display: true, text: 'Value' },
         bounds: 'data',
-        grace: '5%',
         ticks: {
           callback: function (value) {
             return Number(value.toPrecision(2));
@@ -429,6 +447,15 @@ export default function ChartContainer({
     const dataArray = metricDataArrays[key] || [];
     const showComparison = dataArray.length === 2;
 
+    const yRange = calculateYRange(dataArray);
+    const options = {
+      ...chartOptions,
+      scales: {
+        ...chartOptions.scales,
+        y: { ...chartOptions.scales.y, min: yRange.min, max: yRange.max }
+      }
+    };
+
     let stats = null;
     if (showComparison) {
       const normalDiff = getComparisonData(dataArray[0].data, dataArray[1].data, 'normal');
@@ -442,6 +469,30 @@ export default function ChartContainer({
       };
     }
 
+    let comparisonChart = null;
+    if (showComparison) {
+      const compData = createComparisonChartData(dataArray[0], dataArray[1], key);
+      const compRange = calculateYRange(compData.datasets);
+      const compOptions = {
+        ...chartOptions,
+        scales: {
+          ...chartOptions.scales,
+          y: { ...chartOptions.scales.y, min: compRange.min, max: compRange.max }
+        }
+      };
+      comparisonChart = (
+        <ResizablePanel title={`⚖️ ${key} 对比分析 (${compareMode})`} initialHeight={440}>
+          <ChartWrapper
+            chartId={`metric-comp-${idx}`}
+            onRegisterChart={registerChart}
+            onSyncHover={syncHoverToAllCharts}
+            data={compData}
+            options={compOptions}
+          />
+        </ResizablePanel>
+      );
+    }
+
     return (
       <div key={key} className="flex flex-col gap-3">
         <ResizablePanel title={key} initialHeight={440}>
@@ -450,20 +501,10 @@ export default function ChartContainer({
             onRegisterChart={registerChart}
             onSyncHover={syncHoverToAllCharts}
             data={createChartData(dataArray)}
-            options={chartOptions}
+            options={options}
           />
         </ResizablePanel>
-        {showComparison && (
-          <ResizablePanel title={`⚖️ ${key} 对比分析 (${compareMode})`} initialHeight={440}>
-            <ChartWrapper
-              chartId={`metric-comp-${idx}`}
-              onRegisterChart={registerChart}
-              onSyncHover={syncHoverToAllCharts}
-              data={createComparisonChartData(dataArray[0], dataArray[1], key)}
-              options={chartOptions}
-            />
-          </ResizablePanel>
-        )}
+        {comparisonChart}
         {stats && (
           <div className="bg-white rounded-lg shadow-md p-3">
             <h4 className="text-sm font-medium text-gray-700 mb-1">{key} 差值统计</h4>

From 0534e2aec2c077e26e219c9d45151e9308db1537 Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 20:26:22 +0800
Subject: [PATCH 5/5] Adjust y-axis range based on visible x-range

---
 src/components/ChartContainer.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index 9c6038e..aa316e3 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -219,8 +219,13 @@ export default function ChartContainer({
     let max = -Infinity;
     dataArray.forEach(item => {
       item.data.forEach(point => {
-        if (point.y < min) min = point.y;
-        if (point.y > max) max = point.y;
+        const inRange =
+          (xRange.min === undefined || point.x >= xRange.min) &&
+          (xRange.max === undefined || point.x <= xRange.max);
+        if (inRange) {
+          if (point.y < min) min = point.y;
+          if (point.y > max) max = point.y;
+        }
       });
     });
     if (min === Infinity || max === -Infinity) {
@@ -231,7 +236,7 @@ export default function ChartContainer({
     }
     const pad = (max - min) * 0.05;
     return { min: min - pad, max: max + pad };
-  }, []);
+  }, [xRange]);
 
   const chartOptions = useMemo(() => ({
     responsive: true,