app/components/procedure-primers.tsx

Functions

Imports

It imports app/kb/procedures/render.mjs, app/kb/registry/align.mjs, app/kb/registry/primer.mjs, app/kb/registry/tm.mjs. Imported by app/components/procedure.tsx.

Source

1import { productsForRows } from "~/kb/registry/align.mjs";
2import { primerFacts } from "~/kb/registry/primer.mjs";
3import { NEB_TM_CALCULATOR, tmStatement } from "~/kb/registry/tm.mjs";
4import type { ProcedureRecord } from "~/kb/procedures/render.mjs";
5
6/**
7 * The primers a protocol uses, drawn from the record, which carries the lab registry's facts about each (docs/REGISTRY.md):
8 * the sequence is stored once, in the registry, and every page of the protocol prints that one. Each primer is also a page of
9 * its own under /research/lab/primers, with the reverse complement and the facts computed from the sequence. The bench
10 * sheet prints the same table without the estimate and its note, since it is for working from.
11 *
12 * The Tm is an estimate for comparing primers, never an annealing temperature, and the note
13 * says where an annealing temperature for a polymerase comes from.
14 */
15export function ProcedurePrimers({ record, brief = false }: { record: ProcedureRecord; brief?: boolean }) {
16  if (record.primers.length === 0) return null;
17  const rows = record.primers.map((p) => ({ ...p, facts: p.sequence ? primerFacts(p.sequence) : null }));
18  // A pair's product is computed from where its primers bind the reference they share (docs/REGISTRY.md), never typed.
19  const products = productsForRows(record.primers);
20  const productOf = (id: string) => {
21    const pair = products.get(id);
22    if (!pair) return "";
23    const sizes = [...new Set(pair.products.map((p) => p.length))].map((n) => `${n} bp`).join(" or ");
24    return pair.products.length > 1 && new Set(pair.products.map((p) => p.length)).size === 1 ? `${sizes} at ${pair.products.length} sites` : sizes;
25  };
26  const references = [...new Set([...products.values()].map((pair) => pair.reference))];
27  const showProduct = products.size > 0;
28  const showSet = rows.some((p) => p.set);
29  const showTm = !brief && rows.some((p) => p.facts?.tm != null);
30  return (
31    <>
32      <div className="table-scroll">
33        <table className="procedure-primers">
34          <thead>
35            <tr>
36              <th scope="col">Primer</th>
37              {showSet ? <th scope="col">Set</th> : null}
38              <th scope="col">Direction</th>
39              <th scope="col">Sequence (5′ to 3′)</th>
40              {brief ? null : <th scope="col">Length (nt)</th>}
41              {showTm ? <th scope="col">Tm estimate (°C)</th> : null}
42              {showProduct ? <th scope="col">Product (computed)</th> : null}
43            </tr>
44          </thead>
45          <tbody>
46            {rows.map((p) => (
47              <tr key={p.id}>
48                <th scope="row">{brief ? p.name : <a href={`/research/lab/primers/${p.id}`}>{p.name}</a>}</th>
49                {showSet ? <td>{p.set ?? ""}</td> : null}
50                <td>{p.direction ?? ""}</td>
51                <td>{p.sequence ? <code className="registry-seq">{p.sequence}</code> : ""}</td>
52                {brief ? null : <td>{p.facts?.length ?? ""}</td>}
53                {showTm ? <td>{p.facts?.tm ?? ""}</td> : null}
54                {showProduct ? <td>{productOf(p.id)}</td> : null}
55              </tr>
56            ))}
57          </tbody>
58        </table>
59      </div>
60      {references.length > 0 ? (
61        <p className="procedure-primers-note">
62          Product sizes are computed from where the primers bind{" "}
63          {references.map((reference, i) => (
64            <span key={reference.id}>
65              {i > 0 ? ", " : ""}
66              <a href={`https://www.ncbi.nlm.nih.gov/nuccore/${reference.accession}`}>{reference.id}</a>
67            </span>
68          ))}{" "}
69          ({references.map((reference) => reference.description).join("; ")}), in the accession&rsquo;s own coordinates.
70        </p>
71      ) : null}
72      {brief ? null : (
73        <p className="procedure-primers-note">
74          {tmStatement()} The Tm estimate is not an annealing temperature. For the annealing temperature of a particular polymerase,
75          use the <a href={NEB_TM_CALCULATOR.url}>{NEB_TM_CALCULATOR.name}</a>.
76        </p>
77      )}
78    </>
79  );
80}