refactor(web): dataset evaluation

web/app/components/evaluation/components/layout/pipeline-evaluation.tsx

@@ -1,190 +1,19 @@
 'use client'
 
-import type { EvaluationResourceProps, MetricOption } from '../../types'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import type { EvaluationResourceProps } from '../../types'
+import { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
-import Checkbox from '@/app/components/base/checkbox'
-import Input from '@/app/components/base/input'
 import { toast } from '@/app/components/base/ui/toast'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useDocLink } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import JudgeModelSelector from '../judge-model-selector'
+import PipelineHistoryTable from '../pipeline/pipeline-history-table'
+import PipelineMetricItem from '../pipeline/pipeline-metric-item'
+import PipelineResultsPanel from '../pipeline/pipeline-results-panel'
 import SectionHeader, { InlineSectionHeader } from '../section-header'
 
-type PipelineMetricItemProps = {
-  metric: MetricOption
-  selected: boolean
-  onToggle: () => void
-  disabledCondition: boolean
-}
-
-const PipelineMetricItem = ({
-  metric,
-  selected,
-  onToggle,
-  disabledCondition,
-}: PipelineMetricItemProps) => {
-  return (
-    <div className="flex items-center justify-between gap-3 px-1 py-1">
-      <button
-        type="button"
-        className="flex min-w-0 items-center gap-2 text-left"
-        onClick={onToggle}
-      >
-        <Checkbox checked={selected} />
-        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
-        <Tooltip>
-          <TooltipTrigger
-            render={(
-              <span className="flex h-4 w-4 items-center justify-center text-text-quaternary">
-                <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
-              </span>
-            )}
-          />
-          <TooltipContent>
-            {metric.description}
-          </TooltipContent>
-        </Tooltip>
-      </button>
-
-      <button
-        type="button"
-        disabled={disabledCondition}
-        className={cn(
-          'system-xs-medium text-text-tertiary',
-          disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
-        )}
-      >
-        + Condition
-      </button>
-    </div>
-  )
-}
-
-const PipelineHistoryTable = ({
-  resourceType,
-  resourceId,
-}: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const [query, setQuery] = useState('')
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
-
-  const filteredRecords = useMemo(() => {
-    const keyword = query.trim().toLowerCase()
-    if (!keyword)
-      return resource.batchRecords
-
-    return resource.batchRecords.filter(record =>
-      record.fileName.toLowerCase().includes(keyword)
-      || record.summary.toLowerCase().includes(keyword),
-    )
-  }, [query, resource.batchRecords])
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex items-center justify-between gap-3 px-6 pt-4 pb-2">
-        <div className="system-xl-semibold text-text-primary">{t('history.title')}</div>
-        <div className="w-[160px] shrink-0 sm:w-[200px]">
-          <Input
-            value={query}
-            showLeftIcon
-            placeholder={t('history.searchPlaceholder')}
-            onChange={event => setQuery(event.target.value)}
-          />
-        </div>
-      </div>
-
-      <div className="min-h-0 flex-1 px-4 pb-4">
-        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-effects-highlight bg-background-default">
-          <div className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] rounded-t-lg bg-background-section px-2 py-1">
-            <div className="flex items-center gap-1 px-2 system-xs-medium-uppercase text-text-tertiary">
-              <span>{t('history.columns.time')}</span>
-              <span aria-hidden="true" className="i-ri-arrow-down-line h-3 w-3" />
-            </div>
-            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</div>
-            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</div>
-            <div className="px-2 text-center system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</div>
-            <div />
-          </div>
-
-          <div className="min-h-0 flex-1 overflow-y-auto">
-            {filteredRecords.length > 0 && (
-              <div className="divide-y divide-divider-subtle">
-                {filteredRecords.map(record => (
-                  <div
-                    key={record.id}
-                    className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] items-center px-2 py-2"
-                  >
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{record.startedAt}</div>
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.creatorYou')}</div>
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.latestVersion')}</div>
-                    <div className="flex justify-center px-2">
-                      <Badge
-                        className={cn(
-                          record.status === 'failed' && 'badge-warning',
-                          record.status === 'success' && 'badge-accent',
-                        )}
-                      >
-                        {record.status === 'running'
-                          ? (
-                              <span className="flex items-center gap-1">
-                                <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
-                                {statusLabels.running}
-                              </span>
-                            )
-                          : statusLabels[record.status]}
-                      </Badge>
-                    </div>
-                    <div className="flex justify-center">
-                      <button
-                        type="button"
-                        className="flex h-6 w-6 items-center justify-center rounded-md text-text-quaternary hover:bg-state-base-hover"
-                        aria-label={record.summary}
-                      >
-                        <span aria-hidden="true" className="i-ri-more-2-line h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {filteredRecords.length === 0 && (
-              <div className="flex h-full min-h-[321px] flex-col items-center justify-center gap-2 px-4 text-center">
-                <span aria-hidden="true" className="i-ri-history-line h-5 w-5 text-text-quaternary" />
-                <div className="system-sm-medium text-text-quaternary">{t('history.empty')}</div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const PipelineResultsPanel = () => {
-  const { t } = useTranslation('evaluation')
-
-  return (
-    <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
-      <div className="flex flex-col items-center gap-4 px-4 text-center">
-        <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
-        <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
-      </div>
-    </div>
-  )
-}
-
 const PipelineEvaluation = ({
   resourceType,
   resourceId,

web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Input from '@/app/components/base/input'
+import { cn } from '@/utils/classnames'
+import { useEvaluationResource } from '../../store'
+
+const PipelineHistoryTable = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const [query, setQuery] = useState('')
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+
+  const filteredRecords = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+    if (!keyword)
+      return resource.batchRecords
+
+    return resource.batchRecords.filter(record =>
+      record.fileName.toLowerCase().includes(keyword)
+      || record.summary.toLowerCase().includes(keyword),
+    )
+  }, [query, resource.batchRecords])
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center justify-between gap-3 px-6 pt-4 pb-2">
+        <div className="system-xl-semibold text-text-primary">{t('history.title')}</div>
+        <div className="w-[160px] shrink-0 sm:w-[200px]">
+          <Input
+            value={query}
+            showLeftIcon
+            placeholder={t('history.searchPlaceholder')}
+            onChange={event => setQuery(event.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 px-4 pb-4">
+        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-effects-highlight bg-background-default">
+          <div className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] rounded-t-lg bg-background-section px-2 py-1">
+            <div className="flex items-center gap-1 px-2 system-xs-medium-uppercase text-text-tertiary">
+              <span>{t('history.columns.time')}</span>
+              <span aria-hidden="true" className="i-ri-arrow-down-line h-3 w-3" />
+            </div>
+            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</div>
+            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</div>
+            <div className="px-2 text-center system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</div>
+            <div />
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {filteredRecords.length > 0 && (
+              <div className="divide-y divide-divider-subtle">
+                {filteredRecords.map(record => (
+                  <div
+                    key={record.id}
+                    className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] items-center px-2 py-2"
+                  >
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{record.startedAt}</div>
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.creatorYou')}</div>
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.latestVersion')}</div>
+                    <div className="flex justify-center px-2">
+                      <Badge
+                        className={cn(
+                          record.status === 'failed' && 'badge-warning',
+                          record.status === 'success' && 'badge-accent',
+                        )}
+                      >
+                        {record.status === 'running'
+                          ? (
+                              <span className="flex items-center gap-1">
+                                <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
+                                {statusLabels.running}
+                              </span>
+                            )
+                          : statusLabels[record.status]}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-center">
+                      <button
+                        type="button"
+                        className="flex h-6 w-6 items-center justify-center rounded-md text-text-quaternary hover:bg-state-base-hover"
+                        aria-label={record.summary}
+                      >
+                        <span aria-hidden="true" className="i-ri-more-2-line h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {filteredRecords.length === 0 && (
+              <div className="flex h-full min-h-[321px] flex-col items-center justify-center gap-2 px-4 text-center">
+                <span aria-hidden="true" className="i-ri-history-line h-5 w-5 text-text-quaternary" />
+                <div className="system-sm-medium text-text-quaternary">{t('history.empty')}</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PipelineHistoryTable

web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import type { MetricOption } from '../../types'
+import Checkbox from '@/app/components/base/checkbox'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { cn } from '@/utils/classnames'
+
+type PipelineMetricItemProps = {
+  metric: MetricOption
+  selected: boolean
+  onToggle: () => void
+  disabledCondition: boolean
+}
+
+const PipelineMetricItem = ({
+  metric,
+  selected,
+  onToggle,
+  disabledCondition,
+}: PipelineMetricItemProps) => {
+  return (
+    <div className="flex items-center justify-between gap-3 px-1 py-1">
+      <button
+        type="button"
+        className="flex min-w-0 items-center gap-2 text-left"
+        onClick={onToggle}
+      >
+        <Checkbox checked={selected} />
+        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <span className="flex h-4 w-4 items-center justify-center text-text-quaternary">
+                <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
+              </span>
+            )}
+          />
+          <TooltipContent>
+            {metric.description}
+          </TooltipContent>
+        </Tooltip>
+      </button>
+
+      <button
+        type="button"
+        disabled={disabledCondition}
+        className={cn(
+          'system-xs-medium text-text-tertiary',
+          disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+        )}
+      >
+        + Condition
+      </button>
+    </div>
+  )
+}
+
+export default PipelineMetricItem

web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+const PipelineResultsPanel = () => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
+      <div className="flex flex-col items-center gap-4 px-4 text-center">
+        <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
+        <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
+      </div>
+    </div>
+  )
+}
+
+export default PipelineResultsPanel