feat: support dynamic metric configs

Author: JavaZeroo

src/App.jsx

@@ -21,7 +21,8 @@ function App() {
       mode: 'keyword', // 'keyword' | 'regex'
       keyword: 'norm:',
       regex: 'grad[\\s_]norm:\\s*([\\d.eE+-]+)'
-    }
+    },
+    others: [] // 其他自定义指标解析配置
   });
 
   // 兼容旧版本的正则表达式状态（供ChartContainer使用）
@@ -48,6 +49,7 @@ function App() {
         // 使用全局解析配置作为默认值
         loss: { ...globalParsingConfig.loss },
         gradNorm: { ...globalParsingConfig.gradNorm },
+        others: globalParsingConfig.others.map(o => ({ ...o })),
         dataRange: {
           start: 0,        // 默认从第一个数据点开始
           end: undefined,  // 默认到最后一个数据点
@@ -129,7 +131,8 @@ function App() {
       config: {
         ...file.config,
         loss: { ...newConfig.loss },
-        gradNorm: { ...newConfig.gradNorm }
+        gradNorm: { ...newConfig.gradNorm },
+        others: newConfig.others.map(o => ({ ...o }))
       }
     })));
   }, []);
@@ -440,6 +443,7 @@ function App() {
               files={uploadedFiles}
               lossRegex={lossRegex}
               gradNormRegex={gradNormRegex}
+              otherConfigs={globalParsingConfig.others}
               compareMode={compareMode}
               relativeBaseline={relativeBaseline}
               absoluteBaseline={absoluteBaseline}

src/components/ChartContainer.jsx

@@ -78,9 +78,10 @@ const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover })
 };
 
 export default function ChartContainer({ 
-  files, 
-  lossRegex, 
-  gradNormRegex, 
+  files,
+  lossRegex,
+  gradNormRegex,
+  otherConfigs = [],
   compareMode,
   relativeBaseline = 0.002,
   absoluteBaseline = 0.005,
@@ -138,13 +139,35 @@ export default function ChartContainer({
     const enabledFiles = files.filter(file => file.enabled !== false);
 
     return enabledFiles.map(file => {
-      if (!file.content) return { ...file, lossData: [], gradNormData: [] };
+      if (!file.content) return { ...file, lossData: [], gradNormData: [], othersData: {} };
 
       const lines = file.content.split('\n');
       const lossData = [];
       const gradNormData = [];
+      const otherMetricData = {};
 
       try {
+        // 公用关键词匹配函数
+        const extractByKeyword = (content, keyword) => {
+          const results = [];
+          const lines = content.split('\n');
+          const numberRegex = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/;
+          lines.forEach((line) => {
+            const keywordIndex = line.toLowerCase().indexOf(keyword.toLowerCase());
+            if (keywordIndex !== -1) {
+              const afterKeyword = line.substring(keywordIndex + keyword.length);
+              const numberMatch = afterKeyword.match(numberRegex);
+              if (numberMatch) {
+                const value = parseFloat(numberMatch[0]);
+                if (!isNaN(value)) {
+                  results.push(value);
+                }
+              }
+            }
+          });
+          return results;
+        };
+
         // 使用新的配置格式，同时保持向后兼容
         let fileLossConfig, fileGradNormConfig;
 
@@ -265,6 +288,29 @@ export default function ChartContainer({
             }
           });
         }
+
+        // 处理其他自定义指标
+        if (Array.isArray(file.config?.others)) {
+          file.config.others.forEach(metric => {
+            let values = [];
+            if (metric.mode === 'keyword') {
+              values = extractByKeyword(file.content, metric.keyword);
+            } else {
+              const regexObj = new RegExp(metric.regex);
+              lines.forEach(line => {
+                regexObj.lastIndex = 0;
+                const match = regexObj.exec(line);
+                if (match && match[1]) {
+                  const value = parseFloat(match[1]);
+                  if (!isNaN(value)) {
+                    values.push(value);
+                  }
+                }
+              });
+            }
+            otherMetricData[metric.name || metric.keyword] = values.map((v, i) => ({ x: i, y: v }));
+          });
+        }
       } catch (error) {
         console.error('Regex error:', error);
       }
@@ -291,28 +337,34 @@ export default function ChartContainer({
           return slicedData;
         };
 
+        const reindexData = (data) => data.map((point, index) => ({ x: index, y: point.y }));
+
         const filteredLossData = applyRangeFilter(lossData);
         const filteredGradNormData = applyRangeFilter(gradNormData);
+        const filteredOthers = {};
+        Object.entries(otherMetricData).forEach(([key, data]) => {
+          filteredOthers[key] = reindexData(applyRangeFilter(data));
+        });
 
-        // 重新索引数据点
-        const reindexData = (data) => data.map((point, index) => ({ x: index, y: point.y }));
-        
-        return { 
-          ...file, 
-          lossData: reindexData(filteredLossData), 
-          gradNormData: reindexData(filteredGradNormData) 
+        return {
+          ...file,
+          lossData: reindexData(filteredLossData),
+          gradNormData: reindexData(filteredGradNormData),
+          othersData: filteredOthers
         };
       }
 
-      return { ...file, lossData, gradNormData };
+      return { ...file, lossData, gradNormData, othersData: otherMetricData };
     });
-  }, [files, lossRegex, gradNormRegex]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [files, lossRegex, gradNormRegex, otherConfigs]);
 
   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);
+        const otherMax = Object.values(file.othersData || {}).reduce((m, data) => Math.max(m, data.length > 0 ? data[data.length - 1].x : 0), 0);
+        return Math.max(max, maxLoss, maxGrad, otherMax);
     }, 0);
     onMaxStepChange(maxStep);
   }, [parsedData, onMaxStepChange]);
@@ -655,6 +707,14 @@ export default function ChartContainer({
     .filter(file => file.gradNormData && file.gradNormData.length > 0)
     .map(file => ({ name: file.name, data: file.gradNormData }));
 
+  const otherMetricKeys = otherConfigs.map(c => c.name || c.keyword);
+  const otherDataArrays = {};
+  otherMetricKeys.forEach(key => {
+    otherDataArrays[key] = parsedData
+      .filter(file => file.othersData && file.othersData[key] && file.othersData[key].length > 0)
+      .map(file => ({ name: file.name, data: file.othersData[key] }));
+  });
+
   // 计算显示的图表数量来决定布局
   const enabledFiles = files.filter(file => file.enabled !== false);
   const showingLossCharts = showLoss && lossDataArray.length > 0;
@@ -837,6 +897,25 @@ export default function ChartContainer({
           </div>
         </div>
       )}
+      {otherMetricKeys.length > 0 && (
+        <div className="col-span-full overflow-x-auto">
+          <div className="flex gap-3 w-max">
+            {otherMetricKeys.map((key, idx) => (
+              <div key={key} className="w-96">
+                <ResizablePanel title={key} initialHeight={440}>
+                  <ChartWrapper
+                    chartId={`other-${idx}`}
+                    onRegisterChart={registerChart}
+                    onSyncHover={syncHoverToAllCharts}
+                    data={createChartData(otherDataArrays[key])}
+                    options={chartOptions}
+                  />
+                </ResizablePanel>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/components/RegexControls.jsx

@@ -210,7 +210,7 @@ export function RegexControls({
 
   // 预览匹配结果
   const previewMatches = useCallback(() => {
-    const results = { loss: [], gradNorm: [] };
+    const results = { loss: [], gradNorm: [], others: {} };
 
     uploadedFiles.forEach(file => {
       if (file.content) {
@@ -247,6 +247,17 @@ export function RegexControls({
             format: m.format
           }))
         });
+
+        globalParsingConfig.others.forEach((cfg, idx) => {
+          const matches = extractValues(
+            file.content,
+            cfg.mode,
+            cfg
+          );
+          const key = cfg.name || `metric${idx+1}`;
+          if (!results.others[key]) results.others[key] = [];
+          results.others[key].push({ fileName: file.name, count: matches.length });
+        });
       }
     });
 
@@ -329,6 +340,28 @@ export function RegexControls({
     onGlobalParsingConfigChange(newConfig);
   };
 
+  const handleOtherConfigChange = (index, field, value) => {
+    const newOthers = [...globalParsingConfig.others];
+    newOthers[index] = { ...newOthers[index], [field]: value };
+    const newConfig = { ...globalParsingConfig, others: newOthers };
+    onGlobalParsingConfigChange(newConfig);
+  };
+
+  const addMetric = () => {
+    const newOthers = [...globalParsingConfig.others, {
+      name: `metric${globalParsingConfig.others.length + 1}`,
+      mode: 'keyword',
+      keyword: '',
+      regex: ''
+    }];
+    onGlobalParsingConfigChange({ ...globalParsingConfig, others: newOthers });
+  };
+
+  const removeMetric = (index) => {
+    const newOthers = globalParsingConfig.others.filter((_, i) => i !== index);
+    onGlobalParsingConfigChange({ ...globalParsingConfig, others: newOthers });
+  };
+
   const handleXRangeChange = (field, value) => {
     const newRange = { ...xRange, [field]: value === '' ? undefined : Number(value) };
     onXRangeChange(newRange);
@@ -337,9 +370,20 @@ export function RegexControls({
   // 渲染配置项的函数
   const renderConfigPanel = (type, config, onConfigChange) => {
     const ModeIcon = MODE_CONFIG[config.mode].icon;
-    
+
     return (
       <div className="space-y-2">
+        {type.startsWith('other') && (
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">指标名称</label>
+            <input
+              type="text"
+              value={config.name}
+              onChange={(e) => onConfigChange('name', e.target.value)}
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+            />
+          </div>
+        )}
         {/* 模式选择 */}
         <div>
           <label className="block text-xs font-medium text-gray-700 mb-1">
@@ -458,6 +502,29 @@ export function RegexControls({
           {renderConfigPanel('gradnorm', globalParsingConfig.gradNorm, (field, value) => handleConfigChange('gradNorm', field, value))}
         </div>
 
+        {globalParsingConfig.others.map((cfg, idx) => (
+          <div key={idx} className="border rounded-lg p-3 relative">
+            <button
+              onClick={() => removeMetric(idx)}
+              className="absolute top-1 right-1 text-red-500"
+              title="删除配置"
+            >
+              ×
+            </button>
+            <h4 className="text-sm font-medium text-gray-800 mb-2 flex items-center gap-1">
+              <span className="w-3 h-3 bg-blue-500 rounded-full"></span>
+              {cfg.name || `Metric ${idx+1}`} 解析配置
+            </h4>
+            {renderConfigPanel(`other-${idx}`, cfg, (field, value) => handleOtherConfigChange(idx, field, value))}
+          </div>
+        ))}
+        <button
+          onClick={addMetric}
+          className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
+        >
+          + 添加指标
+        </button>
+
         <div className="border rounded-lg p-3">
             <div className="flex items-center gap-2 mb-2">
                 <ZoomIn