From 0903c300601e9d9dd3fa80c66c684bcaa09cec95 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 29 Apr 2026 15:10:51 +0800
Subject: [PATCH] fix(web): metric icon & tooltips

---
 .../components/metric-selector/utils.ts       | 10 ++---
 .../evaluation/default-metric-descriptions.ts | 40 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index 8d9dd76436..515a989964 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -49,9 +49,9 @@ export const getDefaultMetricNodeInfoMap = (defaultMetrics: EvaluationDefaultMet
 }
 
 export const getMetricVisual = (metricId: string): { icon: string, tone: MetricVisualTone } => {
-  if (['context-precision', 'context-recall'].includes(metricId)) {
+  if (['context_precision', 'context_recall'].includes(metricId)) {
     return {
-      icon: metricId === 'context-recall' ? 'i-ri-arrow-go-back-line' : 'i-ri-focus-2-line',
+      icon: metricId === 'context_recall' ? 'i-ri-arrow-go-back-line' : 'i-ri-focus-2-line',
       tone: 'green',
     }
   }
@@ -59,13 +59,13 @@ export const getMetricVisual = (metricId: string): { icon: string, tone: MetricV
   if (metricId === 'faithfulness')
     return { icon: 'i-ri-anchor-line', tone: 'indigo' }
 
-  if (metricId === 'tool-correctness')
+  if (metricId === 'tool_correctness')
     return { icon: 'i-ri-tools-line', tone: 'indigo' }
 
-  if (metricId === 'task-completion')
+  if (metricId === 'task_completion')
     return { icon: 'i-ri-task-line', tone: 'indigo' }
 
-  if (metricId === 'argument-correctness')
+  if (metricId === 'argument_correctness')
     return { icon: 'i-ri-scales-3-line', tone: 'indigo' }
 
   return { icon: 'i-ri-checkbox-circle-line', tone: 'indigo' }
diff --git a/web/app/components/evaluation/default-metric-descriptions.ts b/web/app/components/evaluation/default-metric-descriptions.ts
index c989a45d62..b2189b52c2 100644
--- a/web/app/components/evaluation/default-metric-descriptions.ts
+++ b/web/app/components/evaluation/default-metric-descriptions.ts
@@ -29,29 +29,29 @@ const DEFAULT_METRIC_DESCRIPTION_KEYS = {
 type DefaultMetricDescriptionKey = typeof DEFAULT_METRIC_DESCRIPTION_KEYS[keyof typeof DEFAULT_METRIC_DESCRIPTION_KEYS]
 
 const DEFAULT_METRIC_DESCRIPTIONS: Record<string, DefaultMetricDescription> = {
-  'faithfulness': DEFAULT_METRIC_DESCRIPTION.FAITHFULNESS,
-  'answer-relevancy': DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
-  'answer-correctness': DEFAULT_METRIC_DESCRIPTION.ANSWER_CORRECTNESS,
-  'semantic-similarity': DEFAULT_METRIC_DESCRIPTION.SEMANTIC_SIMILARITY,
-  'context-precision': DEFAULT_METRIC_DESCRIPTION.CONTEXT_PRECISION,
-  'context-recall': DEFAULT_METRIC_DESCRIPTION.CONTEXT_RECALL,
-  'context-relevance': DEFAULT_METRIC_DESCRIPTION.CONTEXT_RELEVANCE,
-  'tool-correctness': DEFAULT_METRIC_DESCRIPTION.TOOL_CORRECTNESS,
-  'task-completion': DEFAULT_METRIC_DESCRIPTION.TASK_COMPLETION,
-  'relevance': DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
+  faithfulness: DEFAULT_METRIC_DESCRIPTION.FAITHFULNESS,
+  answer_relevancy: DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
+  answer_correctness: DEFAULT_METRIC_DESCRIPTION.ANSWER_CORRECTNESS,
+  semantic_similarity: DEFAULT_METRIC_DESCRIPTION.SEMANTIC_SIMILARITY,
+  context_precision: DEFAULT_METRIC_DESCRIPTION.CONTEXT_PRECISION,
+  context_recall: DEFAULT_METRIC_DESCRIPTION.CONTEXT_RECALL,
+  context_relevance: DEFAULT_METRIC_DESCRIPTION.CONTEXT_RELEVANCE,
+  tool_correctness: DEFAULT_METRIC_DESCRIPTION.TOOL_CORRECTNESS,
+  task_completion: DEFAULT_METRIC_DESCRIPTION.TASK_COMPLETION,
+  relevance: DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
 }
 
 const DEFAULT_METRIC_DESCRIPTION_I18N_KEYS: Record<string, DefaultMetricDescriptionKey> = {
-  'faithfulness': DEFAULT_METRIC_DESCRIPTION_KEYS.FAITHFULNESS,
-  'answer-relevancy': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
-  'answer-correctness': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_CORRECTNESS,
-  'semantic-similarity': DEFAULT_METRIC_DESCRIPTION_KEYS.SEMANTIC_SIMILARITY,
-  'context-precision': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_PRECISION,
-  'context-recall': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RECALL,
-  'context-relevance': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RELEVANCE,
-  'tool-correctness': DEFAULT_METRIC_DESCRIPTION_KEYS.TOOL_CORRECTNESS,
-  'task-completion': DEFAULT_METRIC_DESCRIPTION_KEYS.TASK_COMPLETION,
-  'relevance': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
+  faithfulness: DEFAULT_METRIC_DESCRIPTION_KEYS.FAITHFULNESS,
+  answer_relevancy: DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
+  answer_correctness: DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_CORRECTNESS,
+  semantic_similarity: DEFAULT_METRIC_DESCRIPTION_KEYS.SEMANTIC_SIMILARITY,
+  context_precision: DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_PRECISION,
+  context_recall: DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RECALL,
+  context_relevance: DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RELEVANCE,
+  tool_correctness: DEFAULT_METRIC_DESCRIPTION_KEYS.TOOL_CORRECTNESS,
+  task_completion: DEFAULT_METRIC_DESCRIPTION_KEYS.TASK_COMPLETION,
+  relevance: DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
 }
 
 const normalizeMetricId = (metricId: string) => metricId.trim().toLowerCase().replace(/_/g, '-')