Add lightweight self-contained summary report

.github/workflows/docs.yml

@@ -22,32 +22,29 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
       - name: Install uv and Python
         uses: astral-sh/setup-uv@v5
         with:
           python-version: '3.11'
-
       - name: Set up Quarto
         uses: quarto-dev/quarto-actions/setup@v2
-
       - name: Install project and docs dependencies
         run: uv sync --group docs
-
       - name: Build Great Docs site
         run: uv run great-docs build
-
       - name: Export Great Tables performance table demo
         run: uv run marimo export html --no-include-code examples/performance_table_demo.py -o great-docs/_site/performance-table-demo.html
-
       - name: Export Reactable performance table demo
         run: |
           uv run quarto render examples/performance_table_reactable.qmd --output performance-table-reactable.html
           grep -q '.Reactable {' performance-table-reactable.html
           grep -q 'Real Positive' performance-table-reactable.html
           mv performance-table-reactable.html great-docs/_site/performance-table-reactable.html
           cp -R examples/performance_table_reactable_files great-docs/_site/performance_table_reactable_files
-
+      - name: Generate summary report demo
+        run: |
+          uv run python examples/summary_report_demo.py
+          mv summary-report-demo.html great-docs/_site/summary-report-demo.html
       - name: Publish documentation
         uses: JamesIves/github-pages-deploy-action@v4
         with:
@@ -63,29 +60,23 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
       - name: Install uv and Python
         if: github.event.action != 'closed'
         uses: astral-sh/setup-uv@v5
         with:
           python-version: '3.11'
-
       - name: Set up Quarto
         if: github.event.action != 'closed'
         uses: quarto-dev/quarto-actions/setup@v2
-
       - name: Install project and docs dependencies
         if: github.event.action != 'closed'
         run: uv sync --group docs
-
       - name: Build Great Docs preview
         if: github.event.action != 'closed'
         run: uv run great-docs build
-
       - name: Export Great Tables performance table demo
         if: github.event.action != 'closed'
         run: uv run marimo export html --no-include-code examples/performance_table_demo.py -o great-docs/_site/performance-table-demo.html
-
       - name: Export Reactable performance table demo
         if: github.event.action != 'closed'
         run: |
@@ -94,11 +85,66 @@ jobs:
           grep -q 'Real Positive' performance-table-reactable.html
           mv performance-table-reactable.html great-docs/_site/performance-table-reactable.html
           cp -R examples/performance_table_reactable_files great-docs/_site/performance_table_reactable_files
-
+      - name: Generate Python summary report demo
+        if: github.event.action != 'closed'
+        run: |
+          uv run python examples/summary_report_demo.py
+          test -s summary-report-demo.html
+          test -s summary-report-reference-data.csv
+          mv summary-report-demo.html great-docs/_site/summary-report-demo.html
+      - name: Set up R for reference report
+        if: github.event.action != 'closed'
+        uses: r-lib/actions/setup-r@v2
+      - name: Install R reference report dependencies
+        if: github.event.action != 'closed'
+        uses: r-lib/actions/setup-r-dependencies@v2
+        with:
+          packages: |
+            any::rmarkdown
+            any::knitr
+            github::uriahf/rtichoke
+      - name: Set up Pandoc for R Markdown
+        if: github.event.action != 'closed'
+        uses: r-lib/actions/setup-pandoc@v2
+      - name: Render canonical R summary report
+        if: github.event.action != 'closed'
+        env:
+          GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }}
+        shell: Rscript {0}
+        run: |
+          dat <- read.csv("summary-report-reference-data.csv", check.names = FALSE)
+          reals <- dat[["reals"]]
+          probs <- list(
+            "Model A" = dat[["Model A"]],
+            "Model B" = dat[["Model B"]]
+          )
+          rtichoke::create_summary_report(
+            probs = probs,
+            reals = list(reals),
+            output_file = "summary-report-r-reference.html",
+            output_dir = file.path(getwd(), "great-docs", "_site")
+          )
+          stopifnot(file.info(file.path("great-docs", "_site", "summary-report-r-reference.html"))$size > 0)
+      - name: Record report sizes
+        if: github.event.action != 'closed'
+        run: |
+          wc -c great-docs/_site/summary-report-demo.html great-docs/_site/summary-report-r-reference.html | tee great-docs/_site/summary-report-sizes.txt
       - name: Deploy PR preview
         uses: rossjrw/pr-preview-action@v1
         with:
           source-dir: great-docs/_site
           preview-branch: gh-pages
           umbrella-dir: pr-preview
           action: auto
+      - name: Verify report is in deployed documentation preview
+        if: github.event.action != 'closed'
+        env:
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          set -euo pipefail
+          git fetch origin gh-pages
+          REPORT_PATH="pr-preview/pr-${PR_NUMBER}/summary-report-demo.html"
+          git cat-file -e "origin/gh-pages:${REPORT_PATH}"
+          echo "Verified ${REPORT_PATH} on gh-pages"
+          echo "### Summary report preview" >> "$GITHUB_STEP_SUMMARY"
+          echo "https://${GITHUB_REPOSITORY_OWNER}.github.io/${GITHUB_REPOSITORY#*/}/${REPORT_PATH}" >> "$GITHUB_STEP_SUMMARY"

SUMMARY_REPORT_POC.md

@@ -0,0 +1,5 @@
+# D3 summary report proof of concept
+
+This branch replaces the old R-backend `create_summary_report()` stub with a native Python binary report. It prepares the Polars performance table once and serializes only the columns needed by five D3 panels. The PR preview workflow publishes the generated example as `summary-report-demo.html`.
+
+The first preview deliberately uses the D3 CDN so the architecture and interaction can be reviewed before vendoring D3 into the package. A production version should bundle D3 to make the output genuinely self-contained.

benchmarks/README.md

@@ -0,0 +1,9 @@
+# Benchmarks
+
+Run the summary-report preparation benchmark with:
+
+```bash
+uv run python benchmarks/benchmark_summary_report.py
+```
+
+It compares the current repeated preparation pattern for five report panels with preparing the shared performance table once.

benchmarks/benchmark_summary_report.py

@@ -0,0 +1,30 @@
+"""Small local benchmark for repeated vs shared performance preparation."""
+
+from time import perf_counter
+
+import numpy as np
+
+from rtichoke import prepare_performance_data
+
+
+def run(n: int = 100_000, repeats: int = 5) -> None:
+    rng = np.random.default_rng(2026)
+    reals = rng.binomial(1, 0.25, n)
+    probs = {"model": np.clip(0.1 + 0.65 * reals + rng.normal(0, 0.18, n), 0, 1)}
+
+    start = perf_counter()
+    for _ in range(repeats):
+        prepare_performance_data(probs, reals)
+    repeated = perf_counter() - start
+
+    start = perf_counter()
+    performance_data = prepare_performance_data(probs, reals)
+    for _ in range(repeats):
+        _ = performance_data
+    shared = perf_counter() - start
+
+    print(f"n={n:,}; repeated={repeated:.3f}s; shared={shared:.3f}s; ratio={repeated/shared:.2f}x")
+
+
+if __name__ == "__main__":
+    run()

examples/summary_report_demo.py

@@ -0,0 +1,26 @@
+"""Generate the summary-report proof of concept used by PR previews."""
+
+import csv
+
+import numpy as np
+
+from rtichoke import create_summary_report
+
+rng = np.random.default_rng(2026)
+n = 800
+signal = rng.normal(size=n)
+reals = rng.binomial(1, 1 / (1 + np.exp(-signal)))
+
+probs = {
+    "Model A": np.clip(1 / (1 + np.exp(-(0.9 * signal + rng.normal(0, 0.55, n)))), 0.001, 0.999),
+    "Model B": np.clip(1 / (1 + np.exp(-(0.6 * signal + rng.normal(0, 0.85, n)))), 0.001, 0.999),
+}
+
+# The PR preview renders the canonical R report from this exact dataset.  Using
+# one serialized dataset avoids NumPy/R RNG differences obscuring visual parity.
+with open("summary-report-reference-data.csv", "w", newline="", encoding="utf-8") as f:
+    writer = csv.writer(f)
+    writer.writerow(["reals", "Model A", "Model B"])
+    writer.writerows(zip(reals, probs["Model A"], probs["Model B"], strict=True))
+
+create_summary_report(probs, reals, output_file="summary-report-demo.html")

scripts/reactable_embed_spike.py

@@ -0,0 +1,56 @@
+"""Spike: export rtichoke's real Reactable performance table to standalone HTML.
+
+This deliberately avoids Quarto/Jupyter as report assemblers. It uses the
+ipywidgets static embed protocol and the existing rtichoke Reactable renderer.
+"""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+import numpy as np
+from ipywidgets.embed import dependency_state, embed_data
+
+from rtichoke.performance_data.performance_data import prepare_performance_data
+from rtichoke.performance_table_reactable import render_performance_table_reactable
+
+
+def main() -> None:
+    reals = np.array([0, 0, 0, 0, 1, 1, 1, 1, 1, 1])
+    probs = {
+        "Model A": np.array([0.05, 0.10, 0.15, 0.25, 0.35, 0.50, 0.60, 0.72, 0.82, 0.93]),
+        "Model B": np.array([0.10, 0.20, 0.30, 0.35, 0.40, 0.45, 0.55, 0.65, 0.75, 0.85]),
+    }
+    performance_data = prepare_performance_data(
+        probs=probs,
+        reals=reals,
+        stratified_by=("probability_threshold",),
+        by=0.05,
+    )
+    table = render_performance_table_reactable(
+        performance_data=performance_data,
+        probs=probs,
+        reals=reals,
+        stratified_by="probability_threshold",
+    )
+    widget = table.to_widget()
+    data = embed_data(views=[widget], state=dependency_state([widget]))
+
+    html = f"""<!doctype html>
+<html><head><meta charset='utf-8'><title>Reactable standalone spike</title>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js'></script>
+<script data-jupyter-widgets-cdn='https://cdn.jsdelivr.net/npm/' src='https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@*/dist/embed-amd.js'></script>
+<script type='application/vnd.jupyter.widget-state+json'>{json.dumps(data['manager_state'])}</script>
+</head><body>
+<h1>rtichoke Reactable standalone spike</h1>
+<p>No Quarto or running Jupyter kernel is used to view this page.</p>
+<script type='application/vnd.jupyter.widget-view+json'>{json.dumps(data['view_specs'][0])}</script>
+</body></html>"""
+    out = Path("reactable-standalone-spike.html")
+    out.write_text(html, encoding="utf-8")
+    print(f"Wrote {out} ({out.stat().st_size / 1024:.1f} KiB HTML payload)")
+
+
+if __name__ == "__main__":
+    main()

src/rtichoke/__init__.py

@@ -57,7 +57,7 @@
     render_performance_table as render_performance_table,
 )
 
-from rtichoke.summary_report.summary_report import (
+from rtichoke.summary_report.summary_report_plotly import (
     create_summary_report as create_summary_report,
 )
 

src/rtichoke/summary_report/calibration_renderer.README.md

@@ -0,0 +1,7 @@
+# Calibration renderer
+
+`calibration_renderer.js` is the isolated D3 implementation used for calibration-parity work against the R `create_summary_report()` reference.
+
+The extraction keeps calibration geometry, histogram behavior, axes, legend, and hover behavior reviewable without mixing changes into discrimination, utility, or performance-table rendering.
+
+The next wiring step is to inject `calibration_renderer_source()` into the generated self-contained HTML in place of the inline `calibration()` implementation. Once wired, hover and visual parity changes should be made only in this renderer.

src/rtichoke/summary_report/calibration_renderer.js

@@ -0,0 +1,107 @@
+/* Calibration-only D3 renderer for the lightweight summary report.
+ * Mirrors the actual R Plotly calibration composition: a 550px figure,
+ * 80/20 shared-x subplot, markers+lines for discrete calibration, line-only
+ * smooth calibration, overlaid 0.01-wide histogram bars and horizontal legend.
+ */
+function calibration(type, sel) {
+  const c = R.calibration;
+  const card = d3.select(sel);
+  card.selectAll("*").remove();
+
+  const W = 550, H = 550;
+  const X0 = 60, X1 = 540;
+  const MAIN_TOP = 55, MAIN_BOTTOM = 409.9;
+  const HIST_TOP = 428.1, HIST_BOTTOM = 510;
+  const x = d3.scaleLinear().domain(c.ranges.xaxis).range([X0, X1]);
+  const y = d3.scaleLinear().domain(c.ranges.yaxis).range([MAIN_BOTTOM, MAIN_TOP]);
+  const histMax = d3.max(c.histogram, d => +d.counts) || 1;
+  const yHist = d3.scaleLinear().domain([0, histMax]).nice().range([HIST_BOTTOM, HIST_TOP]);
+  const svg = card.append("svg").attr("viewBox", `0 0 ${W} ${H}`);
+
+  const contrastText = color => {
+    const hex = String(color || "#333").replace("#", "");
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return "white";
+    const r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) > 170 ? "#222" : "white";
+  };
+  const showTip = (ev, html, color) => {
+    const bg = color || "#333";
+    tip.style("opacity", 1).style("left", (ev.clientX + 10) + "px").style("top", (ev.clientY + 10) + "px")
+      .style("background", bg).style("border", "1px solid " + bg).style("border-radius", "2px")
+      .style("box-shadow", "none").style("padding", "6px 8px")
+      .style("font-family", "Open Sans, verdana, arial, sans-serif").style("font-size", "12px")
+      .style("line-height", "15px").style("color", contrastText(bg)).html(String(html || ""));
+  };
+  const hideTip = () => tip.style("opacity", 0);
+  const groupOf = d => String(d.reference_group || "");
+  const hoverColor = d => groupOf(d) === "reference_line" ? "#bebebe" : (c.colors[groupOf(d)] || "#777");
+
+  const defs = svg.append("defs");
+  defs.append("clipPath").attr("id", `main-${type}`).append("rect").attr("x", X0).attr("y", MAIN_TOP).attr("width", X1-X0).attr("height", MAIN_BOTTOM-MAIN_TOP);
+  defs.append("clipPath").attr("id", `hist-${type}`).append("rect").attr("x", X0).attr("y", HIST_TOP).attr("width", X1-X0).attr("height", HIST_BOTTOM-HIST_TOP);
+
+  // Plotly puts the calibration legend horizontally above the main panel and
+  // suppresses it entirely for a single model.
+  if (c.groups.length > 1) {
+    const lg = svg.append("g").attr("font-family", "Open Sans, verdana, arial, sans-serif").attr("font-size", 12);
+    const itemW = Math.max(82, 46 + d3.max(c.groups, g => String(g).length) * 7);
+    const total = itemW * c.groups.length, start = W/2-total/2;
+    c.groups.forEach((g,i) => {
+      const q=lg.append("g").attr("transform",`translate(${start+i*itemW},24)`);
+      q.append("line").attr("x1",5).attr("x2",35).attr("stroke",c.colors[g]).attr("stroke-width",2);
+      if(type === "discrete") q.append("circle").attr("cx",20).attr("cy",0).attr("r",5).attr("fill",c.colors[g]).attr("stroke-width",0);
+      q.append("text").attr("x",40).attr("y",4).attr("fill","#444").text(g);
+    });
+  }
+
+  const styleAxis = axis => {
+    axis.attr("font-family","Open Sans, verdana, arial, sans-serif").attr("font-size",12).attr("color","#444");
+    axis.select(".domain").attr("stroke","#444");
+    axis.selectAll(".tick line").attr("stroke","#444");
+  };
+  const ay=svg.append("g").attr("class","axis").attr("transform",`translate(${X0},0)`).call(d3.axisLeft(y).ticks(5));
+  const ah=svg.append("g").attr("class","axis").attr("transform",`translate(${X0},0)`).call(d3.axisLeft(yHist).ticks(4));
+  const ax=svg.append("g").attr("class","axis").attr("transform",`translate(0,${HIST_BOTTOM})`).call(d3.axisBottom(x).ticks(5));
+  styleAxis(ay); styleAxis(ah); styleAxis(ax);
+  svg.append("text").attr("class","axis-label").attr("x",(X0+X1)/2).attr("y",548).attr("text-anchor","middle").text("Predicted");
+  svg.append("text").attr("class","axis-label").attr("transform","rotate(-90)").attr("x",-(MAIN_TOP+MAIN_BOTTOM)/2).attr("y",18).attr("text-anchor","middle").text("Observed");
+
+  const line=d3.line().defined(d=>isFinite(+d.x)&&isFinite(+d.y)).x(d=>x(+d.x)).y(d=>y(+d.y));
+  const main=svg.append("g").attr("clip-path",`url(#main-${type})`);
+  // Plotly's dash="dot" is visually closer to a short round dot pattern than
+  // the earlier equal 3/3 dash pattern.
+  main.append("path").datum(c.reference).attr("fill","none").attr("stroke","#bebebe").attr("stroke-width",2)
+    .attr("stroke-dasharray","2,4").attr("stroke-linecap","round").attr("d",line);
+
+  const dat=type === "smooth" ? c.smooth : c.deciles;
+  c.groups.forEach(g => {
+    const a=dat.filter(d=>String(d.reference_group)===g);
+    main.append("path").datum(a).attr("fill","none").attr("stroke",c.colors[g]).attr("stroke-width",2)
+      .attr("stroke-linejoin","round").attr("stroke-linecap","round").attr("d",line);
+    if(type === "discrete") main.selectAll(null).data(a).enter().append("circle")
+      .attr("cx",d=>x(+d.x)).attr("cy",d=>y(+d.y)).attr("r",5)
+      .attr("fill",c.colors[g]).attr("stroke",c.colors[g]).attr("stroke-width",0)
+      .attr("shape-rendering","geometricPrecision");
+  });
+
+  // R uses plotly::add_bars(width=.01, barmode="overlay") with opacity
+  // 1/n_groups. Use the exact bin edges rather than a hand-tuned pixel width.
+  const hist=svg.append("g").attr("clip-path",`url(#hist-${type})`), opacity=1/Math.max(1,c.groups.length);
+  c.histogram.forEach(d => {
+    const mid=+d.mids,left=x(mid-.005),right=x(mid+.005);
+    hist.append("rect").attr("x",left).attr("width",Math.max(0,right-left)).attr("y",yHist(+d.counts)).attr("height",HIST_BOTTOM-yHist(+d.counts))
+      .attr("fill",c.colors[String(d.reference_group)]||"#777").attr("opacity",opacity).attr("stroke","none")
+      .on("mousemove",ev=>showTip(ev,d.text,hoverColor(d))).on("mouseleave",hideTip);
+  });
+
+  // Plotly scatter hover is point based. Keep the nearest-point interaction,
+  // but use a smaller capture radius so the tooltip does not jump to a remote
+  // calibration point while moving through empty plot space.
+  const hoverData=dat.concat(c.reference);
+  svg.append("rect").attr("x",X0).attr("y",MAIN_TOP).attr("width",X1-X0).attr("height",MAIN_BOTTOM-MAIN_TOP).attr("fill","transparent")
+    .on("mousemove",ev=>{
+      const [mx,my]=d3.pointer(ev);let best=null,dist=Infinity;
+      hoverData.forEach(d=>{if(!isFinite(+d.x)||!isFinite(+d.y))return;const dd=(x(+d.x)-mx)**2+(y(+d.y)-my)**2;if(dd<dist){dist=dd;best=d}});
+      if(best&&dist<225)showTip(ev,best.text,hoverColor(best));else hideTip();
+    }).on("mouseleave",hideTip);
+}