qlib/frontend/web/app/experiments/page.tsx

"use client";

import { useEffect, useState } from "react";
import { apiGet, apiPost } from "@/lib/api";
import type { BacktestResult } from "@/lib/types";

interface ExperimentMeta {
  id: string;
  kind: string;
  factors: string[];
  period?: [string, string] | null;
  rebalance?: string;
  top_n?: number | null;
  summary_text?: string | null;
  code_version?: string | null;
  created_at?: string;
}

interface ExperimentDetail extends ExperimentMeta {
  spec: { universe?: Record<string, unknown> };
  result: BacktestResult | null;
}

export default function ExperimentsPage() {
  const [exps, setExps] = useState<ExperimentMeta[]>([]);
  const [detail, setDetail] = useState<ExperimentDetail | null>(null);
  const [jobId, setJobId] = useState("");
  const [jobStatus, setJobStatus] = useState("");
  const [error, setError] = useState("");

  function load() {
    apiGet<ExperimentMeta[]>("/experiments")
      .then(setExps)
      .catch((e: Error) => setError(e.message));
  }

  useEffect(load, []);

  function open(id: string) {
    apiGet<ExperimentDetail>(`/experiments/${id}`)
      .then(setDetail)
      .catch((e: Error) => setError(e.message));
  }

  function rerun(exp: ExperimentMeta) {
    setError("");
    setJobId("");
    setJobStatus("submitting");
    apiPost<{ job_id: string; status: string }>(`/experiments/${exp.id}/rerun`, {})
      .then((r) => {
        setJobId(r.job_id);
        setJobStatus(r.status);
        poll(r.job_id);
      })
      .catch((e: Error) => setError(e.message));
  }

  function poll(id: string) {
    let tries = 0;
    const timer = window.setInterval(() => {
      tries += 1;
      apiGet<{ status: string }>(`/jobs/${id}`)
        .then((j) => {
          setJobStatus(j.status);
          if (j.status === "success" || j.status === "failed" || tries > 60) {
            window.clearInterval(timer);
            load();
          }
        })
        .catch(() => window.clearInterval(timer));
    }, 1000);
  }

  const s = detail?.result?.summary;

  return (
    <>
      <h1>实验归档（Experiment · 可复现）</h1>
      {error && <div className="error">{error}</div>}
      {jobId && (
        <div className="card">
          复跑 Job <b>{jobId}</b> → 状态：<b>{jobStatus}</b>
        </div>
      )}
      <div className="card">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>类型</th>
              <th>因子</th>
              <th>区间</th>
              <th>摘要</th>
              <th>代码版本</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {exps.map((e) => (
              <tr key={e.id}>
                <td>{e.id}</td>
                <td>{e.kind}</td>
                <td>{e.factors.join(", ")}</td>
                <td>
                  {e.period ? `${e.period[0]} ~ ${e.period[1]}` : "—"}
                </td>
                <td>{e.summary_text ?? "—"}</td>
                <td>{e.code_version ?? "—"}</td>
                <td>
                  <button onClick={() => open(e.id)}>详情</button>
                  <button className="primary" onClick={() => rerun(e)}>
                    复跑
                  </button>
                </td>
              </tr>
            ))}
            {exps.length === 0 && (
              <tr>
                <td colSpan={7} className="muted">
                  暂无实验。先在「回测」或「因子研究」中运行一次，即会自动归档。
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {detail && s && (
        <div className="card">
          <h2>
            {detail.id} · {detail.factors.join(", ")} · {detail.period?.[0]}~{detail.period?.[1]}
          </h2>
          <div className="stat-grid">
            <div className="stat">
              <div className="label">总收益</div>
              <div className="value">{s.total_return_pct.toFixed(2)}%</div>
            </div>
            <div className="stat">
              <div className="label">年化</div>
              <div className="value">{s.annual_return_pct.toFixed(2)}%</div>
            </div>
            <div className="stat">
              <div className="label">Sharpe</div>
              <div className="value">{s.sharpe.toFixed(2)}</div>
            </div>
            <div className="stat">
              <div className="label">最大回撤</div>
              <div className="value bad">{s.max_drawdown_pct.toFixed(2)}%</div>
            </div>
          </div>
          <div className="muted" style={{ marginTop: 8 }}>
            spec（可复现输入）：{JSON.stringify(detail.spec).slice(0, 400)}…
          </div>
        </div>
      )}
    </>
  );
}