feat: enhance regex controls with multiple matching modes and improved configuration options

Author: JavaZeroo

src/App.jsx

@@ -9,8 +9,8 @@ import { FileConfigModal } from './components/FileConfigModal';
 
 function App() {
   const [uploadedFiles, setUploadedFiles] = useState([]);
-  const [lossRegex, setLossRegex] = useState('loss:\\s*([\\d.]+)');
-  const [gradNormRegex, setGradNormRegex] = useState('grad norm:\\s*([\\d.]+)');
+  const [lossRegex, setLossRegex] = useState('loss:\\s*([\\d.eE+-]+)');
+  const [gradNormRegex, setGradNormRegex] = useState('grad[\\s_]norm:\\s*([\\d.eE+-]+)');
   const [showDataPoints, setShowDataPoints] = useState(true);
   const [compareMode, setCompareMode] = useState('normal');
   const [relativeBaseline, setRelativeBaseline] = useState(0.002);
@@ -27,8 +27,8 @@ function App() {
       ...file,
       enabled: true,
       config: {
-        lossRegex: 'loss:\\s*([\\d.]+)',
-        gradNormRegex: 'grad norm:\\s*([\\d.]+)',
+        lossRegex: 'loss:\\s*([\\d.eE+-]+)',
+        gradNormRegex: 'grad[\\s_]norm:\\s*([\\d.eE+-]+)',
         dataRange: {
           start: '',
           end: '',
@@ -229,6 +229,7 @@ function App() {
               lossRegex={lossRegex}
               gradNormRegex={gradNormRegex}
               onRegexChange={handleRegexChange}
+              uploadedFiles={uploadedFiles}
             />
 
             <FileList
@@ -238,7 +239,7 @@ function App() {
               onFileConfig={handleFileConfig}
             />
 
-            {uploadedFiles.length === 2 && (
+            {uploadedFiles.filter(file => file.enabled).length === 2 && (
               <ComparisonControls
                 compareMode={compareMode}
                 onCompareModeChange={setCompareMode}

src/components/ChartContainer.jsx

@@ -392,10 +392,11 @@ export default function ChartContainer({
   const gradNormDataArray = parsedData.map(file => file.gradNormData).filter(data => data && data.length > 0);
 
   // 计算显示的图表数量来决定布局
+  const enabledFiles = files.filter(file => file.enabled !== false);
   const showingLossCharts = showLoss && lossDataArray.length > 0;
   const showingGradNormCharts = showGradNorm && gradNormDataArray.length > 0;
-  const showingLossComparison = showLoss && lossDataArray.length === 2;
-  const showingGradNormComparison = showGradNorm && gradNormDataArray.length === 2;
+  const showingLossComparison = showLoss && enabledFiles.length === 2 && lossDataArray.length === 2;
+  const showingGradNormComparison = showGradNorm && enabledFiles.length === 2 && gradNormDataArray.length === 2;
 
   // 计算实际显示的图表列数（不是图表总数）
   const showingLossColumn = showingLossCharts || showingLossComparison;
@@ -509,7 +510,7 @@ export default function ChartContainer({
       )}
 
       {/* Statistics for comparison - spans all columns when showing both types */}
-      {parsedData.length === 2 && (showingLossComparison || showingGradNormComparison) && (
+      {enabledFiles.length === 2 && (showingLossComparison || showingGradNormComparison) && (
         <div className={`${useFullWidth ? '' : 'lg:col-span-2'} bg-white rounded-lg shadow-md p-3`}>
           <h3 className="text-base font-semibold text-gray-800 mb-2">差值分析统计</h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">