niceeval 0.11.4-canary.21 → 0.12.0

package/src/report/definition/primitives/chart.tsx

@@ -1,10 +1,15 @@
 // Chart 原语:消费 Dataset,用 x/y 与 <Series> 映射坐标与 mark(docs/feature/reports/components/charts/README.md)。
 
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { AttemptLocator } from "../../../record/locator.ts";
+import {
+  SeriesPatternDefs,
+  seriesClassFromColorVar,
+  seriesClassesFromFill,
+} from "../../assets/series-encoding.tsx";
 import { defineComponent, type ReportNode, type TextContext, type WebContext } from "../tree.ts";
 import type { ReportTarget } from "../report.ts";
-import type { DimensionDeclarations } from "../../presentation.ts";
+import type { DimensionDeclarations, DimensionPresentation } from "../../presentation.ts";
 import type { Dataset, DatasetField } from "../../model/types.ts";
 import type { ReportLocale } from "../../model/locale.ts";
 import { countText, localeText, resolveLocalizedText, type ReportLocale as RL } from "../../model/locale.ts";
@@ -155,12 +160,13 @@ function chartFieldLabel(field: string, meta: DatasetField, locale: RL): string
   return meta.unit ? `${base}(${meta.unit})` : base;
 }
 
-function seriesClass(
+/** 解析点所属 series 句柄与下标;单系列隐式图不声明视觉身份。 */
+function seriesPresentationOf(
   mapped: MappedSeries[],
   series: MappedSeries,
   point: MappedSeries["points"][number],
   ctx: WebContext,
-): string {
+): DimensionPresentation | undefined {
   let handle: string;
   let index: number;
   if (series.byField !== undefined && point.seriesValue !== undefined) {
@@ -168,12 +174,161 @@ function seriesClass(
     index = seriesDimensionValues(mapped, series.byField).indexOf(point.seriesValue);
   } else {
     const ids = mapped.filter((item) => !item.hidden && item.byField === undefined).map((item) => item.id);
-    if (ids.length < 2) return "niceeval-series-none";
+    if (ids.length < 2) return undefined;
     handle = IMPLICIT_SERIES_HANDLE;
     index = ids.indexOf(series.id);
   }
-  const colorIndex = ctx.dimension(handle).at(index).colorIndex;
-  return colorIndex === undefined ? "niceeval-series-none" : `niceeval-series-c${colorIndex - 1}`;
+  if (index < 0) return undefined;
+  return ctx.dimension(handle).at(index);
+}
+
+/** SVG 路径:只挂 series-cN 设 --series;pattern 由 fill 属性 / style 承载。 */
+function seriesColorClass(presentation: DimensionPresentation | undefined): string {
+  if (!presentation) return "niceeval-series-none";
+  if (presentation.kind === "color") return seriesClassFromColorVar(presentation.color);
+  if (presentation.kind !== "series") return "niceeval-series-none";
+  // switch 按 mark 收窄;Fill 的 mark 是 "bar"|"area" 联合,if/|| 在部分 TS 版本下剔不干净。
+  switch (presentation.mark) {
+    case "bar":
+    case "area": {
+      // 只要色类,不要 HTML 专用的 fill-vN(SVG 用 url(#pattern))。
+      const classes = seriesClassesFromFill(presentation.fill).split(" ");
+      return classes.find((c) => c.startsWith("niceeval-series-c") || c === "niceeval-series-none") ?? "niceeval-series-none";
+    }
+    case "line":
+      return seriesClassFromColorVar(presentation.stroke);
+    case "scatter":
+      return seriesClassFromColorVar(presentation.marker.fill);
+  }
+}
+
+/** HTML 横向柱:色类 + fill-vN 图案类(CSS repeating-linear-gradient 等效 SVG pattern)。 */
+function seriesHtmlBarClass(presentation: DimensionPresentation | undefined): string {
+  if (!presentation) return "niceeval-series-none";
+  if (presentation.kind === "series" && (presentation.mark === "bar" || presentation.mark === "area")) {
+    return seriesClassesFromFill(presentation.fill);
+  }
+  return seriesColorClass(presentation);
+}
+
+/**
+ * 作者在 `<Series line>` 上显式声明的 dashed/dotted **优先于** 页级 variant 的 strokeDasharray。
+ * 未声明时消费 LineSeriesPresentation / FillSeriesPresentation 的 strokeDasharray(空串 = 实线)。
+ */
+function resolveStrokeDasharray(
+  series: MappedSeries,
+  presentation: DimensionPresentation | undefined,
+): string | undefined {
+  if (series.line !== undefined) return lineDash(series.line);
+  if (presentation?.kind === "series" && "strokeDasharray" in presentation) {
+    return presentation.strokeDasharray || undefined;
+  }
+  return undefined;
+}
+
+/** SVG 柱/面:pattern fill 必须用 style 压过 `.niceeval-chart-bar { fill: var(--series) }`。 */
+function seriesSvgFillStyle(presentation: DimensionPresentation | undefined): CSSProperties | undefined {
+  if (presentation?.kind !== "series") return undefined;
+  if (presentation.mark !== "bar" && presentation.mark !== "area") return undefined;
+  if (!presentation.fill.startsWith("url(")) return undefined;
+  return { fill: presentation.fill };
+}
+
+function renderMarkerShape(
+  presentation: DimensionPresentation | undefined,
+  px: number,
+  py: number,
+  colorClass: string,
+  title: ReactNode,
+): ReactNode {
+  const marker =
+    presentation?.kind === "series" && (presentation.mark === "scatter" || presentation.mark === "line")
+      ? presentation.marker
+      : undefined;
+  if (!marker) {
+    return (
+      <circle className={cx("niceeval-chart-dot", colorClass)} cx={px} cy={py} r={4.5}>
+        {title}
+      </circle>
+    );
+  }
+  // path 在 0..12 viewBox;缩放到 ~9px 并居中到 (px, py)。
+  return (
+    <path
+      className={cx("niceeval-chart-dot", colorClass)}
+      d={marker.path}
+      transform={`translate(${px} ${py}) scale(0.75) translate(-6 -6)`}
+      fill={marker.fill}
+      stroke="var(--panel)"
+      strokeWidth={1.6}
+    >
+      {title}
+    </path>
+  );
+}
+
+function legendSwatch(presentation: DimensionPresentation | undefined, mark: MappedSeries["mark"]): ReactNode {
+  if (!presentation || presentation.kind !== "series") {
+    return <span className={cx("niceeval-chart-legend-swatch", "niceeval-series-none")} />;
+  }
+  // 图例方块跟 series mark 取义:柱/面用填充图案,线用 dash+marker,散点用 marker 形状。
+  if (mark === "bar" || mark === "area") {
+    const fillClass =
+      presentation.mark === "bar" || presentation.mark === "area"
+        ? seriesClassesFromFill(presentation.fill)
+        : seriesColorClass(presentation);
+    return <span className={cx("niceeval-chart-legend-swatch", fillClass)} />;
+  }
+  if (mark === "line") {
+    // 线系图例需要 stroke + marker;presentation 可能是 line 或 scatter(by 切分后 mark 对齐)。
+    if (presentation.mark === "line") {
+      return (
+        <svg className="niceeval-chart-legend-swatch-svg" width="16" height="10" aria-hidden="true">
+          <line
+            x1="0"
+            y1="5"
+            x2="16"
+            y2="5"
+            stroke={presentation.stroke}
+            strokeWidth={2}
+            strokeDasharray={presentation.strokeDasharray || undefined}
+          />
+          <path
+            d={presentation.marker.path}
+            transform="translate(8 5) scale(0.55) translate(-6 -6)"
+            fill={presentation.marker.fill}
+          />
+        </svg>
+      );
+    }
+    if (presentation.mark === "scatter") {
+      return (
+        <svg className="niceeval-chart-legend-swatch-svg" width="16" height="10" aria-hidden="true">
+          <line x1="0" y1="5" x2="16" y2="5" stroke={presentation.marker.fill} strokeWidth={2} />
+          <path
+            d={presentation.marker.path}
+            transform="translate(8 5) scale(0.55) translate(-6 -6)"
+            fill={presentation.marker.fill}
+          />
+        </svg>
+      );
+    }
+    // fill presentation 配 line mark 的退化:只画色块。
+    return <span className={cx("niceeval-chart-legend-swatch", seriesColorClass(presentation))} />;
+  }
+  // mark === "scatter"
+  if (presentation.mark === "scatter" || presentation.mark === "line") {
+    return (
+      <svg className="niceeval-chart-legend-swatch-svg" width="10" height="10" aria-hidden="true">
+        <path
+          d={presentation.marker.path}
+          transform="translate(5 5) scale(0.7) translate(-6 -6)"
+          fill={presentation.marker.fill}
+        />
+      </svg>
+    );
+  }
+  return <span className={cx("niceeval-chart-legend-swatch", seriesColorClass(presentation))} />;
 }
 
 function metricDisplay(
@@ -210,15 +365,9 @@ function renderLegend(
             : implicitIds.indexOf(series.id);
           const presentation = handle ? ctx.dimension(handle).at(index) : undefined;
           const label = presentation?.label ?? (series.label ? resolveLocalizedText(series.label, locale) : series.id);
-          const colorClass =
-            presentation?.colorIndex === undefined
-              ? "niceeval-series-none"
-              : `niceeval-series-c${presentation.colorIndex - 1}`;
           return (
-            <li
-              key={`${series.id}:${value}`}
-              className={cx("niceeval-chart-legend-item", colorClass)}
-            >
+            <li key={`${series.id}:${value}`} className="niceeval-chart-legend-item">
+              {legendSwatch(presentation, series.mark)}
               {label}
             </li>
           );
@@ -251,6 +400,8 @@ function renderHorizontalBarsWeb(
         options.className,
       )}
     >
+      {/* 横向 HTML 柱不引用 pattern,但同页可能另有 SVG 图;defs 全局一份无害。 */}
+      <SeriesPatternDefs />
       <div className="niceeval-chart-bars-heading">
         {chartFieldLabel(axes.yField, axes.yMeta, locale)}
       </div>
@@ -260,7 +411,8 @@ function renderHorizontalBarsWeb(
           const label = labels.get(rawLabel) ?? rawLabel;
           const display = metricDisplay(point, "y", axes.yMeta, locale);
           const href = pointHref(point, ctx, options.pointTarget);
-          const colorClass = seriesClass(mapped, series, point, ctx);
+          const presentation = seriesPresentationOf(mapped, series, point, ctx);
+          const colorClass = seriesHtmlBarClass(presentation);
           const ratio = max > 0 ? Math.max(0, Math.min(1, point.y / max)) : 0;
           const value = (
             <span className="niceeval-chart-bar-value">
@@ -374,14 +526,18 @@ function renderChartWeb(
   const yLabel = chartFieldLabel(axes.yField, axes.yMeta, locale);
 
   const drawable = visible.flatMap((series) =>
-    series.points.map((point) => ({
-      ...point,
-      sourceSeriesId: series.id,
-      label: labelByKey.get(point.pointLabel) ?? point.pointLabel,
-      px: xScale.scale(point.x),
-      py: yScale.scale(point.y),
-      seriesClass: seriesClass(mapped, series, point, ctx),
-    })),
+    series.points.map((point) => {
+      const presentation = seriesPresentationOf(mapped, series, point, ctx);
+      return {
+        ...point,
+        sourceSeriesId: series.id,
+        label: labelByKey.get(point.pointLabel) ?? point.pointLabel,
+        px: xScale.scale(point.x),
+        py: yScale.scale(point.y),
+        presentation,
+        seriesClass: seriesColorClass(presentation),
+      };
+    }),
   );
 
   const labels = placePointLabels(
@@ -391,6 +547,7 @@ function renderChartWeb(
 
   return (
     <figure className={cx("niceeval-report", "niceeval-chart", "niceeval-chart--scatter", options.className)}>
+      <SeriesPatternDefs />
       <svg className="niceeval-chart-svg" viewBox={`0 0 ${WIDTH} ${HEIGHT}`} role="img" aria-label={`${axes.xField} × ${axes.yField}`}>
         {options.grid !== false ? (
           <g className="niceeval-chart-grid">
@@ -457,7 +614,8 @@ function renderChartWeb(
                 (series.byField === undefined || p.seriesValue === value),
             );
             const ordered = series.connect ? [...seriesPoints].sort((a, b) => a.x - b.x) : seriesPoints;
-            const seriesClass = ordered[0]?.seriesClass ?? "niceeval-series-none";
+            const seriesClassName = ordered[0]?.seriesClass ?? "niceeval-series-none";
+            const seriesPresentation = ordered[0]?.presentation;
             const baseline = yScale.scale(0);
             const barGroups = [...new Set(
               visible
@@ -468,15 +626,18 @@ function renderChartWeb(
             const groupIndex = Math.max(0, barGroups.indexOf(barGroup));
             const totalBarWidth = Math.max(8, Math.min(48, PLOT_W / Math.max(1, allPoints.length)));
             const barWidth = totalBarWidth / Math.max(1, barGroups.length);
+            const dash = resolveStrokeDasharray(series, seriesPresentation);
+            const areaFillStyle = seriesSvgFillStyle(seriesPresentation);
             return (
               <g
                 key={`${series.id}:${value}`}
-                className={cx("niceeval-chart-series", seriesClass)}
+                className={cx("niceeval-chart-series", seriesClassName)}
                 data-series={`${series.id}:${value}`}
               >
               {series.mark === "area" && ordered.length > 1 ? (
                 <polygon
                   className="niceeval-chart-area"
+                  style={areaFillStyle}
                   points={[
                     `${ordered[0]!.px},${baseline}`,
                     ...ordered.map((point) => `${point.px},${point.py}`),
@@ -488,7 +649,7 @@ function renderChartWeb(
                 <polyline
                   className="niceeval-chart-line"
                   points={ordered.map((p) => `${p.px},${p.py}`).join(" ")}
-                  strokeDasharray={lineDash(series.line)}
+                  strokeDasharray={dash}
                 />
               ) : null}
               {ordered.map((p) => {
@@ -502,6 +663,7 @@ function renderChartWeb(
                   shape = (
                     <rect
                       className={cx("niceeval-chart-bar", p.seriesClass)}
+                      style={seriesSvgFillStyle(p.presentation)}
                       x={p.px - totalBarWidth / 2 + groupIndex * barWidth}
                       y={Math.min(topY, baseY)}
                       width={barWidth}
@@ -511,10 +673,12 @@ function renderChartWeb(
                     </rect>
                   );
                 } else {
-                  shape = (
-                  <circle className={cx("niceeval-chart-dot", p.seriesClass)} cx={p.px} cy={p.py} r={4.5}>
-                    <title>{`${p.pointLabel}\n${axes.xField}: ${metricDisplay(p, "x", axes.xMeta, locale)}\n${axes.yField}: ${metricDisplay(p, "y", axes.yMeta, locale)}`}</title>
-                  </circle>
+                  shape = renderMarkerShape(
+                    p.presentation,
+                    p.px,
+                    p.py,
+                    p.seriesClass,
+                    <title>{`${p.pointLabel}\n${axes.xField}: ${metricDisplay(p, "x", axes.xMeta, locale)}\n${axes.yField}: ${metricDisplay(p, "y", axes.yMeta, locale)}`}</title>,
                   );
                 }
                 return (
@@ -798,7 +962,8 @@ export const Chart = defineComponent<ChartProps>({
       if (values.length === 0) continue;
       decls[spec.by] = {
         dimension: spec.by,
-        encoding: { kind: "series", mark: spec.mark === "area" ? "line" : spec.mark },
+        // area 是 FillSeriesPresentation(填充图案),不再折叠成 line。
+        encoding: { kind: "series", mark: spec.mark },
         values,
       };
     }

package/src/report/definition/primitives.tsx

@@ -870,11 +870,16 @@ function renderCellWeb(
         );
       }
       const verdict = cell.verdict ?? "skipped";
+      const stale = cell.staleSinceMs !== undefined;
       // 判定符走 verdictMark 单源,与 locator 格同一张表(errored 是 `!`,不并到 `✗`)。
       return (
-        <span className={`niceeval-verdict niceeval-verdict-${verdict}`}>
-          {verdictMark(verdict === "skipped" ? "skipped" : verdict)}{" "}
-          {localeText(ctx.locale, `verdict.${verdict === "skipped" ? "skipped" : verdict}`)}
+        <span
+          className={cx("niceeval-verdict", `niceeval-verdict-${verdict}`, stale ? "niceeval-stale" : undefined)}
+          title={stale ? localeText(ctx.locale, "experimentList.historicalTooltip") : undefined}
+        >
+          {verdictMark(verdict === "skipped" ? "skipped" : verdict)}
+          {!cell.bare ? <>{" "}{localeText(ctx.locale, `verdict.${verdict === "skipped" ? "skipped" : verdict}`)}</> : null}
+          {stale ? <span className="niceeval-stale-distance">{formatTimeDistance(cell.staleSinceMs!, ctx.locale)}</span> : null}
         </span>
       );
     }

package/src/report/definition/tree.ts

@@ -136,8 +136,9 @@ export interface WebContext {
   /** chrome 文案的 locale;官方组件渲染面经上下文读取,宿主外默认 "en"。 */
   locale: ReportLocale;
   /**
-   * 取本组件 `dimensions()` 声明的某个句柄在这一页的呈现面(含 `seriesSlot` / 色板下标 /
-   * 形状变体)。查别的组件的句柄或没声明的句柄抛 `UndeclaredDimensionValueError`。
+   * 取本组件 `dimensions()` 声明的某个句柄在这一页的呈现面(label / color / series 的
+   * fill·stroke·marker 等可直接使用的值)。查别的组件的句柄或没声明的句柄抛
+   * `UndeclaredDimensionValueError`。
    */
   dimension(handle: string): PresentedDimension;
 }
@@ -203,6 +204,8 @@ export type ReportComponent<P extends object> = ((props: P) => ReactNode) & {
  */
 export interface PageDimensions {
   dimension(props: object, handle: string): PresentedDimension;
+  /** 维度 name → 值 → seriesSlot；测试与调试观察槽位分配，组件渲染不读槽号。 */
+  readonly slotsByDimension: ReadonlyMap<string, ReadonlyMap<string, number>>;
 }
 
 /** 渲染上下文上挂当前页分配结果的内部键;不是契约字段,只在宿主与渲染遍历之间传递。 */
@@ -331,6 +334,7 @@ export function collectPageDimensions(
 
   const plan = allocatePageDimensions(handles, pins, { face });
   return {
+    slotsByDimension: plan.slotsByDimension,
     dimension(props: object, handle: string): PresentedDimension {
       const entry = byProps.get(props);
       const key = entry?.keys.get(handle);

package/src/report/index.ts

@@ -69,7 +69,17 @@ export {
   toTraceNodes,
 } from "./model/conversions.ts";
 export { presentDimension, shortestUniqueLabels } from "./presentation.ts";
-export type { DimensionDeclaration, DimensionEncoding, PresentedDimension } from "./presentation.ts";
+export type {
+  ColorPresentation,
+  DimensionDeclaration,
+  DimensionEncoding,
+  DimensionPresentation,
+  FillSeriesPresentation,
+  LabelPresentation,
+  LineSeriesPresentation,
+  PresentedDimension,
+  ScatterSeriesPresentation,
+} from "./presentation.ts";
 export { flag, label, numericFlag, numericLabel, numericRunConfig, runConfig } from "./model/flag.ts";
 export { evaluationKindComposition } from "./model/evaluation-kind.ts";
 

package/src/report/model/aggregate.ts

@@ -19,6 +19,7 @@ import type {
   NumericAxis,
   ReportInput,
   SeriesInput,
+  StaleConclusionReference,
 } from "./types.ts";
 import { flagValueOf, labelValueOf, runConfigValueOf } from "./flag.ts";
 import { metricDisplay } from "./format.ts";
@@ -92,6 +93,31 @@ export function historicalOf(item: Item): boolean {
   return item.attempt.carried || item.run.startedAt < item.watermark.startedAt;
 }
 
+/** 一个 ISO 时刻距渲染时刻(`Date.now()`)的毫秒数,恒不小于 0。 */
+export function msSince(iso: string): number {
+  return Math.max(0, Date.now() - Date.parse(iso));
+}
+
+/**
+ * 覆盖缺口 / 对照矩阵缺席格的「过期结论」参考(docs/feature/reports/components/summaries/
+ * experiment-table.md「覆盖缺口的两档占位行」、show/compare.md 同一套口径):候选已经是与
+ * 当前基准 configHash 不可比的那些,取其中最近一条;两个消费方(entity-lists 的占位行、
+ * DeltaTable 的缺席格)共用同一份「取最新」判据,不各自实现一遍。
+ */
+export function staleReferenceOf(candidates: readonly AttemptHandle[]): StaleConclusionReference | undefined {
+  if (candidates.length === 0) return undefined;
+  const newest = candidates.reduce((a, b) => ((a.result.startedAt ?? "") >= (b.result.startedAt ?? "") ? a : b));
+  const startedAt = newest.result.startedAt;
+  if (!startedAt) return undefined; // 无时刻的 legacy 落盘算不出时距,不伪造参考
+  return {
+    locator:
+      newest.locator ??
+      encodeAttemptLocator({ runId: newest.run.runId, evalId: newest.evalId, attempt: newest.result.attempt }),
+    verdict: newest.result.verdict,
+    staleSinceMs: msSince(startedAt),
+  };
+}
+
 /** 快照键:"<experimentId> @ <startedAt>"("run" 维度与手挑快照数组的对比用)。 */
 export function snapshotKeyOf(run: Run): string {
   return `${run.experimentId} @ ${run.startedAt}`;

package/src/report/model/locale.ts

@@ -98,7 +98,6 @@ const en = {
   "experimentList.cost": "Cost",
   "experimentList.result": "Record",
   "experimentList.status": "Status",
-  "experimentList.coverage": "Coverage",
   "experimentList.evalAttempt": "Eval / Attempt",
   "experimentList.duration": "Duration",
   "experimentList.filterPlaceholder": "Filter experiments…",
@@ -306,7 +305,6 @@ const zhCN: globalThis.Record<ReportMessageKey, string> = {
   "experimentList.cost": "成本",
   "experimentList.result": "结果",
   "experimentList.status": "状态",
-  "experimentList.coverage": "覆盖构成",
   "experimentList.evalAttempt": "题目 / Attempt",
   "experimentList.duration": "耗时",
   "experimentList.filterPlaceholder": "筛选实验…",

package/src/report/model/types.ts

@@ -275,6 +275,8 @@ export interface DeltaCell {
   totalCostUSD?: number;
   /** true 时该格来自跨快照携带的历史执行(时效标注见 experiment-table.md「时效不写字」)。 */
   historical: boolean;
+  /** `historical` 为 true 时,距今的毫秒数(渲染时刻起算);新执行时省略,不伪造 0。 */
+  staleSinceMs?: number;
 }
 
 export interface DeltaData {
@@ -292,6 +294,12 @@ export interface DeltaData {
     cells: globalThis.Record<string, DeltaCell>;
     /** 键是非基准条件值;任一侧缺数据时无键——delta 不把缺失当 0。 */
     delta?: globalThis.Record<string, { score?: number; tokens?: number; costUSD?: number }>;
+    /**
+     * 键是条件值,只在该条件缺席这道题(`cells` 无键)且记录里存在不可比历史判定时才有条目
+     * (docs/feature/reports/show/compare.md「— ✓ 12d」);它不进 `totals`、`delta` 与配对覆盖的
+     * 任何一个数,只提供 locator 下钻。
+     */
+    references?: globalThis.Record<string, StaleConclusionReference>;
   }>;
   /** 各条件自身覆盖面的描述,分母是该条件有结果的 eval 数;不用于跨条件直接归因。 */
   totals: globalThis.Record<