§{num}
);
}
/* ====================================================================
Image overlay with drag handles
==================================================================== */
function ImageOverlay({
imgSrc, imgW, imgH, lanes, setLanes, laneWidth, bands, setBands, roi,
toolMode, onCropCommit, onEmsaCommit,
excludeRegions, onExcludeCommit,
}) {
const wrapRef = useRef(null);
const [drag, setDrag] = useState(null);
const [boxW, setBoxW] = useState(800);
// Tool-mode drawing state — separate from `drag` so it never affects the existing handlers
const [drawing, setDrawing] = useState(null); // { x0, y0, x1, y1 }
useEffect(() => {
if (!wrapRef.current) return;
const ro = new ResizeObserver((es) => {
for (const e of es) setBoxW(Math.floor(e.contentRect.width));
});
ro.observe(wrapRef.current);
return () => ro.disconnect();
}, []);
const scale = imgW > 0 ? boxW / imgW : 1;
const boxH = imgH * scale;
function clientToImg(e) {
const r = wrapRef.current.getBoundingClientRect();
return { x: (e.clientX - r.left) / scale, y: (e.clientY - r.top) / scale };
}
const onDown = (kind, idx) => (e) => {
e.preventDefault();
e.stopPropagation();
setDrag({ kind, idx });
};
const onMove = (e) => {
if (!drag) return;
const p = clientToImg(e);
if (drag.kind === "lane") {
setLanes((ls) => {
const out = ls.slice();
out[drag.idx] = { ...out[drag.idx], x: Math.max(0, Math.min(imgW, p.x)) };
return out;
});
} else if (drag.kind === "bandY") {
setBands((b) => ({ ...b, [drag.idx]: Math.max(0, Math.min(imgH, p.y)) }));
}
};
const onUp = () => setDrag(null);
// Keep a handle drag alive even when the cursor leaves the image bounds (e.g. moving a
// lane far up/down or a band boundary far left/right). Listeners live on window only
// while a drag is active, and releasing anywhere ends it.
useEffect(() => {
if (!drag) return;
const move = (e) => onMove(e);
const up = () => onUp();
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
return () => {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
};
}, [drag]);
const onDoubleClick = (e) => {
if (drag) return;
const p = clientToImg(e);
setLanes((ls) =>
[...ls, { x: p.x, label: `L${ls.length + 1}` }]
.sort((a, b) => a.x - b.x)
.map((l, i) => ({ ...l, label: `L${i + 1}` }))
);
};
// ----- Tool-mode drawing (crop / bg) — completely separate from handle dragging -----
// These handlers are attached to a transparent SVG {title}
{subtitle && — {subtitle}}
{/* Masthead */}
{/* ---------- Upload ---------- */}
{!imgSrc && (
)}
{/* ---------- Image + region editor ---------- */}
{imgSrc && (
<>
{/* ---------- Concentrations ---------- */}
{lanes.length > 0 && (
)}
{/* ---------- Quantification + Fit ---------- */}
{quant && (
{
if (zeroPlot && Math.abs(v - zeroPlot.pseudoX) <= zeroPlot.pseudoX * 1e-6) return "0";
if (v >= 1000) return `${v / 1000}k`;
if (v < 0.01) return v.toExponential(0);
return String(v);
}}
label={{
value: `[Protein] (${concUnit})`,
position: "insideBottom",
offset: -22,
style: { fontFamily: "Instrument Serif", fontStyle: "italic", fontSize: 14, fill: "var(--ink)" },
}}
/>
v.toFixed(1)}
tick={{ fontFamily: "JetBrains Mono", fontSize: 11, fill: "var(--ink-2)" }}
stroke="var(--ink)"
label={{
value: normFit ? "Specific binding (norm.)" : "Fraction bound",
angle: -90,
position: "insideLeft",
style: { fontFamily: "Instrument Serif", fontStyle: "italic", fontSize: 14, fill: "var(--ink)", textAnchor: "middle" },
}}
/>
[Number.isFinite(v) ? v.toFixed(4) : v, name === "fit" ? "model" : "f bound"]}
labelFormatter={(v) => (zeroPlot && Math.abs(v - zeroPlot.pseudoX) <= zeroPlot.pseudoX * 1e-6) ? `[P] = 0 ${concUnit}` : `[P] = ${Number.isFinite(v) ? v.toPrecision(3) : v} ${concUnit}`}
/>
{
const { cx, cy } = props;
if (!Number.isFinite(cx) || !Number.isFinite(cy)) return null;
return (
)}
)}
)}
electrophoretic mobility shift assay · vol. i
Bound & Free
a binding-curve workbench
v1.16
Kd by least-squares
1 Upload
fileInputRef.current?.click()}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => { e.preventDefault(); if (e.dataTransfer.files[0]) onFile(e.dataTransfer.files[0]); }}
>
{loadError && (
Drop your gel image here
JPEG · PNG — bands should appear dark on a light background
onFile(e.target.files?.[0])}
/>
⚠ {loadError}
)}
{[
["01", "We invert luminance", "so dark bands become positive signal. 16-bit TIFF is read at full depth for the cleanest faint-band quantification."],
["02", "Crop, then place by hand", "rotate first if lanes are tilted, draw the crop region, then add lanes by hand (buttons or double-click). Nothing is placed for you on upload."],
["03", "Per-lane background", "a smooth ALS baseline is fit under each lane and subtracted before integrating density. f bound = bound / (bound + free)."],
].map(([n, t, d]) => (
))}
¶{n}
{t}
{d}
unit
[DNA] substrate
setDnaConc(e.target.value)}
title="Total probe/DNA concentration (experiment-wide). Required for the tight-binding fit; reliable Kd needs [DNA] ≤ Kd/10 for the hyperbolic model."
/>
{concUnit}
{lanes.map((l, i) => (
))}
{l.label}
{
const v = e.target.value;
setConcs((cs) => {
const out = cs.slice();
while (out.length < lanes.length) out.push("");
out[i] = v;
return out;
});
}}
/>
{concUnit}
{bands && (
complex label
{labelOffsetBound !== 0 && (
)}
)}
| lane | [P] {concUnit} | bound | free | fbound |
|---|---|---|---|---|
| {q.label} | {concs[i] === "" || concs[i] == null ? "—" : concs[i]} | {fmt(q.bound, 2)} | {fmt(q.free, 2)} | {fmt(q.fbound, 3)} |
{[["hill", "Hill"], ["hyperbolic", "Hyperbolic"], ["quadratic", "Tight-binding"]].map(([v, lab]) => (
))}
{fitModel === "quadratic" && !(parseFloat(dnaConc) > 0)
? "Tight-binding needs the [DNA] substrate concentration — enter it in §03 above."
: "Provide at least 3 lanes with numeric concentrations to fit a binding curve."}
)}
{fit && (
Kd
{fmt(fit.Kd, 3)}{concUnit}
Kd 95% CI · fit, single gel
{ciStatus === "computing" &&
Bmax (top)
{fmt(fit.Bmax, 3)}{fit.Bmax >= 0.999 && capped}
baseline
{fmt(fit.bottom, 3)}
Hill n
{fmt(fit.n, 2)}
goodness of fit · R²
{fmt(fit.r2, 4)}
{fit.r2 > 0.95 ? "excellent" : fit.r2 > 0.85 ? "good" : "weak"}
⚠ Kd is poorly constrained{lowSat ? ` — top point (${fmt(maxX, 2)} ${concUnit}) is below ~10×Kd, so saturation isn't reached` : " — the bootstrap CI is wider than Kd itself"}. The Kd/plateau trade-off means this value is uncertain; extend the titration to higher [protein] for a reliable fit.
);
})()}
Binding isotherm
fraction bound vs. [protein]
n = {chartPoints.filter((d) => Number.isFinite(d.x) && d.x > 0).length} points
{normFit
? `Normalised specific binding (f − baseline)/(top − baseline) · baseline = ${fmt(fit.bottom, 3)}, top = ${fmt(fit.Bmax, 3)} · Kd unaffected by normalisation`
: `Raw fraction bound · fitted baseline = ${fmt(fit.bottom, 3)} at [P]=0 · top constrained ≤ 1`}
{" · "}Nelder–Mead fit · log X · zero-protein control shown at left (0), included in fit
EMSA Overlay
Overlay multiple EMSA titrations on one normalised axis. Each curve is Hill-fit and scaled between its own fitted baseline (0) and plateau (1). Use “Add to overlay” on the analysis tab, or drop exported CSVs below.
inputRef.current?.click()}
onDragOver={(e) => { e.preventDefault(); setHot(true); }}
onDragLeave={() => setHot(false)}
onDrop={(e) => { e.preventDefault(); setHot(false); ingestFiles(e.dataTransfer.files); }}
>
Drop EMSA quantification CSVs here, or click to choose
ingestFiles(e.target.files)}
/>
{err && {err}
}
{curves.length > 0 && (
Curves
{curves.map((c) => (
rename(c.id, e.target.value)} />
Kd {fmtKd(c.fit.Kd)} nM
))}
{curves.length} curve{curves.length > 1 ? "s" : ""}