update for ragas

webapp/static/js/report.js

@@ -283,7 +283,7 @@ const Report = {
       const detail = document.createElement("div");
       detail.className = "lowest-detail";
       detail.hidden = true;
-      detail.innerHTML = Report._detailHtml(sample);
+      detail.innerHTML = Report._detailHtml(sample, metrics);
 
       row.addEventListener("click", () => {
         detail.hidden = !detail.hidden;
@@ -293,8 +293,8 @@ const Report = {
     });
   },
 
-  // 单条样本的展开详情：question / contexts / answer / ground_truth。
-  _detailHtml(sample) {
+  // 单条样本的展开详情：question / contexts / answer / ground_truth / 历史评分。
+  _detailHtml(sample, metrics) {
     const contexts = (sample.contexts || [])
       .map((c, i) => `<div class="ctx-item">[${i + 1}] ${App.escape(c)}</div>`)
       .join("");
@@ -320,6 +320,63 @@ const Report = {
           <div class="detail-gt">${App.escape(sample.ground_truth || "—")}</div>
         </div>
         ${errorBlock}
+        ${Report._historyHtml(sample, metrics || [])}
+      </div>
+    `;
+  },
+
+  // 同一问题的历史评分小表格：本次 + 历次（按时间倒序），逐行标注较更早一次的涨跌。
+  _historyHtml(sample, metrics) {
+    const history = sample.history || [];
+    if (!history.length) return "";
+
+    // 只展示当前样本与历史中实际出现过的指标列，避免空列。
+    const cols = metrics.filter(
+      (m) =>
+        (sample.metrics && sample.metrics[m] !== undefined && sample.metrics[m] !== null) ||
+        history.some((h) => h.metrics && h.metrics[m] !== undefined && h.metrics[m] !== null),
+    );
+    if (!cols.length) return "";
+
+    // 组合行：[本次, 历次...]，相邻两行做涨跌对比（行 r 对比更早的行 r+1）。
+    const rows = [
+      { label: "本次", sub: "", metrics: sample.metrics || {}, current: true },
+      ...history.map((h) => ({
+        label: App.escape(h.scenario_name || h.run_id || "历史"),
+        sub: App.escape(App.shortTime(h.finished_at)),
+        metrics: h.metrics || {},
+        current: false,
+      })),
+    ];
+
+    let head = "<tr><th>评测</th>";
+    cols.forEach((m) => (head += `<th>${App.escape(App.shortMetric(m))}</th>`));
+    head += "</tr>";
+
+    let body = "";
+    rows.forEach((row, r) => {
+      const older = rows[r + 1];
+      body += `<tr class="${row.current ? "hist-current" : ""}">`;
+      body += `<td class="hist-when"><span class="hist-label">${row.label}</span>${row.sub ? `<span class="hist-sub">${row.sub}</span>` : ""}</td>`;
+      cols.forEach((m) => {
+        const v = row.metrics ? row.metrics[m] : null;
+        const cls = App.scoreClass(m, v);
+        const text = v === null || v === undefined ? "—" : Number(v).toFixed(2);
+        let deltaHtml = "";
+        const baseline = older && older.metrics ? older.metrics[m] : undefined;
+        const d = MetricPresenter.deltaInfo(m, v, baseline);
+        if (d.hasData && d.delta !== 0) {
+          deltaHtml = ` <span class="hist-delta ${d.cls}">${d.arrow}${d.magnitude}</span>`;
+        }
+        body += `<td><span class="score-badge ${cls}">${text}</span>${deltaHtml}</td>`;
+      });
+      body += "</tr>";
+    });
+
+    return `
+      <div class="detail-field">
+        <div class="detail-label">历史评分 history（同一问题，最近 ${history.length} 次，含本次对比）</div>
+        <table class="history-table">${head}${body}</table>
       </div>
     `;
   },