feat: Add X-axis range selection and pan/zoom functionality

Author: JavaZeroo

package-lock.json

@@ -15,6 +15,7 @@
     "@tailwindcss/forms": "^0.5.10",
     "autoprefixer": "^10.4.21",
     "chart.js": "^4.5.0",
+    "chartjs-plugin-zoom": "^2.2.0",
     "lucide-react": "^0.522.0",
     "postcss": "^8.5.6",
     "react": "^19.1.0",

package.json

@@ -37,6 +37,8 @@ function App() {
   const [configFile, setConfigFile] = useState(null);
   const [globalDragOver, setGlobalDragOver] = useState(false);
   const [dragCounter, setDragCounter] = useState(0);
+  const [xRange, setXRange] = useState({ min: undefined, max: undefined });
+  const [maxStep, setMaxStep] = useState(0);
 
   const handleFilesUploaded = useCallback((files) => {
     const filesWithDefaults = files.map(file => ({
@@ -305,6 +307,9 @@ function App() {
               gradNormRegex={gradNormRegex}
               onRegexChange={handleRegexChange}
               uploadedFiles={uploadedFiles}
+              xRange={xRange}
+              onXRangeChange={setXRange}
+              maxStep={maxStep}
             />
 
             <FileList
@@ -440,6 +445,9 @@ function App() {
               absoluteBaseline={absoluteBaseline}
               showLoss={showLoss}
               showGradNorm={showGradNorm}
+              xRange={xRange}
+              onXRangeChange={setXRange}
+              onMaxStepChange={setMaxStep}
             />
           </section>
         </main>

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useCallback } from 'react';
+import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
 import { Line } from 'react-chartjs-2';
 import { ResizablePanel } from './ResizablePanel';
 import {
@@ -12,6 +12,7 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
 ChartJS.register(
   CategoryScale,
@@ -20,7 +21,8 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
+  zoomPlugin
 );
 
 // Chart wrapper component with error boundary
@@ -83,7 +85,10 @@ export default function ChartContainer({
   relativeBaseline = 0.002,
   absoluteBaseline = 0.005,
   showLoss = true,
-  showGradNorm = false
+  showGradNorm = false,
+  xRange = { min: undefined, max: undefined },
+  onXRangeChange,
+  onMaxStepChange
 }) {
   // 同步hover状态管理
   const [syncHoverStep, setSyncHoverStep] = useState(null);
@@ -306,6 +311,15 @@ export default function ChartContainer({
     });
   }, [files, lossRegex, gradNormRegex]);
 
+  useEffect(() => {
+    const maxStep = parsedData.reduce((max, file) => {
+        const maxLoss = file.lossData.length > 0 ? file.lossData[file.lossData.length - 1].x : 0;
+        const maxGrad = file.gradNormData.length > 0 ? file.gradNormData[file.gradNormData.length - 1].x : 0;
+        return Math.max(max, maxLoss, maxGrad);
+    }, 0);
+    onMaxStepChange(maxStep);
+  }, [parsedData, onMaxStepChange]);
+
   const movingAverage = (data, windowSize = 10) => {
     return data.map((point, index) => {
       const start = Math.max(0, index - windowSize + 1);
@@ -365,6 +379,36 @@ export default function ChartContainer({
       intersect: false,
     },
     plugins: {
+      zoom: {
+        pan: {
+          enabled: true,
+          mode: 'x',
+          onPanComplete: ({chart}) => {
+            const {min, max} = chart.scales.x;
+            onXRangeChange({min: Math.round(min), max: Math.round(max)});
+          }
+        },
+        zoom: {
+          drag: {
+            enabled: true,
+            borderColor: 'rgba(225,225,225,0.2)',
+            borderWidth: 1,
+            backgroundColor: 'rgba(225,225,225,0.2)',
+            modifierKey: 'shift',
+          },
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true
+          },
+          mode: 'x',
+          onZoomComplete: ({chart}) => {
+            const {min, max} = chart.scales.x;
+            onXRangeChange({min: Math.round(min), max: Math.round(max)});
+          }
+        }
+      },
       legend: {
         position: 'top',
         labels: {
@@ -449,7 +493,8 @@ export default function ChartContainer({
           display: true,
           text: 'Step',
         },
-        min: 0,
+        min: xRange.min,
+        max: xRange.max,
         bounds: 'data'
       },
       y: {

src/components/ChartContainer.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { BarChart2 } from 'lucide-react';
 
-export function ComparisonControls({ compareMode, onCompareModeChange }) {
+export function ComparisonControls({ 
+  compareMode, 
+  onCompareModeChange
+}) {
   const modes = [
     { value: 'normal', label: '📊 Normal', description: '原始差值' },
     { value: 'absolute', label: '📈 Absolute', description: '绝对差值' },

src/components/ComparisonControls.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Settings, Zap, Eye, ChevronDown, ChevronUp, Target, Code } from 'lucide-react';
+import { Settings, Zap, Eye, ChevronDown, ChevronUp, Target, Code, ZoomIn } from 'lucide-react';
 
 // 匹配模式枚举
 const MATCH_MODES = {
@@ -190,7 +190,10 @@ export function RegexControls({
   lossRegex, 
   gradNormRegex, 
   onRegexChange, 
-  uploadedFiles = [] 
+  uploadedFiles = [],
+  xRange,
+  onXRangeChange,
+  maxStep
 }) {
   const [showPreview, setShowPreview] = useState(false);
   const [previewResults, setPreviewResults] = useState({ loss: [], gradNorm: [] });
@@ -329,6 +332,12 @@ export function RegexControls({
 
     onGlobalParsingConfigChange(newConfig);
   };
+
+  const handleXRangeChange = (field, value) => {
+    const newRange = { ...xRange, [field]: value === '' ? undefined : Number(value) };
+    onXRangeChange(newRange);
+  };
+
   // 渲染配置项的函数
   const renderConfigPanel = (type, config, onConfigChange) => {
     const ModeIcon = MODE_CONFIG[config.mode].icon;
@@ -453,6 +462,45 @@ export function RegexControls({
           {renderConfigPanel('gradnorm', globalParsingConfig.gradNorm, (field, value) => handleConfigChange('gradNorm', field, value))}
         </div>
 
+        <div className="border rounded-lg p-3">
+            <div className="flex items-center gap-2 mb-2">
+                <ZoomIn 
+                    size={16} 
+                    className="text-gray-600" 
+                    aria-hidden="true"
+                />
+                <h4 className="text-base font-semibold text-gray-800">
+                    X轴范围
+                </h4>
+            </div>
+            <div className="flex items-center gap-2">
+                <input
+                    type="number"
+                    placeholder="Min"
+                    value={xRange.min === undefined ? 0 : xRange.min}
+                    onChange={(e) => handleXRangeChange('min', e.target.value)}
+                    className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                />
+                <span className="text-gray-500">-</span>
+                <input
+                    type="number"
+                    placeholder={xRange.max === undefined && maxStep !== undefined ? `${maxStep}` : 'Max'}
+                    value={xRange.max === undefined ? maxStep : xRange.max}
+                    onChange={(e) => handleXRangeChange('max', e.target.value)}
+                    className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                />
+                <button
+                    onClick={() => onXRangeChange({ min: undefined, max: undefined })}
+                    className="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 whitespace-nowrap"
+                >
+                    复位
+                </button>
+            </div>
+            <p className="text-xs text-gray-500 mt-1">
+                在图表上按住 <kbd>Shift</kbd> 键并拖动鼠标可选择范围，或直接输入数值。
+            </p>
+        </div>
+
         {/* 预览结果 */}
         {showPreview && uploadedFiles.length > 0 && (
           <div className="mt-3 p-3 bg-blue-50 rounded border border-blue-200">