app/components/lab.tsx

Functions

Imports

It imports app/kb/registry/align.mjs, app/kb/registry/catalog.mjs, app/kb/registry/kinds.mjs. Imported by app/routes/lab.kind.tsx, app/routes/lab.tsx.

Source

1import { Catalog } from "capsomer/react/catalog";
2import type { CatalogResult } from "capsomer/behaviour/catalog";
3
4import {
5  INVENTORY,
6  EQUIPMENT_CATALOG,
7  PRIMERS,
8  REAGENTS,
9  STRAINS,
10  kindLabel,
11  mateOf,
12  pairProduct,
13  phageYearsText,
14  productSpanText,
15  productText,
16  siteText,
17  reagentLabel,
18  reagentSource,
19  tmNote,
20  type EquipmentRow,
21  type InventoryRow,
22  type PrimerListRow,
23  type PrimerRow,
24  type ReagentRow,
25  type StrainRow,
26} from "~/kb/registry/catalog.mjs";
27import { MAX_MISMATCHES } from "~/kb/registry/align.mjs";
28import { KINDS } from "~/kb/registry/kinds.mjs";
29
30/**
31 * The registry's pages (docs/REGISTRY.md): the master inventory, a kind's own catalog and one item. Each reads the same
32 * rows the markdown twin does, and each fact it prints is the record's or is computed from it, so no page types a
33 * number the record could contradict.
34 */
35
36/** One sentence under the inventory's title: how many of what, counted from the rows. */
37function inventorySentence(rows: InventoryRow[]) {
38  if (rows.length === 0) return "Nothing is recorded yet.";
39  const counts = new Map<string, number>();
40  for (const row of rows) counts.set(row.kind, (counts.get(row.kind) ?? 0) + 1);
41  // A kind's plural is the registry's own (equipment has none other than itself); a phage's is its name and an s.
42  const parts = [...counts].map(([kind, n]) => `${n} ${n === 1 ? kindLabel(kind).toLowerCase() : (KINDS[kind]?.plural ?? `${kindLabel(kind).toLowerCase()}s`)}`);
43  return `${parts.join(", ")}.`;
44}
45
46export function LabInventory({ rows, result }: { rows: InventoryRow[]; result: CatalogResult<InventoryRow> }) {
47  return (
48    <>
49      <p className="registry-lede">
50        The lab&rsquo;s reference catalog: its primers, the bacterial strains its phages grow on, the reagents and the equipment its protocols use, with the phages it has isolated. It records what a thing is,
51        never how much of it the lab has or where it sits. {inventorySentence(rows)}
52      </p>
53      <div className="registry site-catalog site-catalog-wide">
54        <Catalog
55          definition={INVENTORY}
56          result={result}
57          labelledBy="registry-title"
58          title={(row) => (
59            <a className="cap-table-open" href={row.path}>
60              {row.name}
61            </a>
62          )}
63        />
64      </div>
65    </>
66  );
67}
68
69const sequenceCell = (p: PrimerListRow) => (p.sequence ? <code className="registry-seq">{p.sequence}</code> : "");
70
71export function LabPrimers({ result }: { result: CatalogResult<PrimerListRow> }) {
72  const note = tmNote();
73  return (
74    <>
75      <p className="registry-lede">
76        The primers the lab&rsquo;s protocols use, with each sequence as stored. Length, GC content and melting temperature are
77        computed from the sequence, and a pair&rsquo;s product is computed from where its primers bind a reference sequence.
78      </p>
79      <div className="registry site-catalog site-catalog-wide">
80        <Catalog
81          definition={PRIMERS}
82          result={result}
83          labelledBy="registry-title"
84          title={(p) => (
85            <a className="cap-table-open" href={p.path}>
86              {p.name}
87            </a>
88          )}
89          cells={{ sequence: sequenceCell, product: (p) => productText(p.product) ?? "" }}
90        />
91      </div>
92      <p className="registry-note">
93        {note.statement} The Tm estimate is not an annealing temperature. For the annealing temperature of a particular polymerase, use the{" "}
94        <a href={note.calculator.url}>{note.calculator.name}</a>.
95      </p>
96    </>
97  );
98}
99
100function Fact({ term, children }: { term: string; children: React.ReactNode }) {
101  return (
102    <>
103      <dt>{term}</dt>
104      <dd>{children}</dd>
105    </>
106  );
107}
108
109/** A fact that could not be found, with the reason it could not, so it is listed rather than left out. */
110function NotFound({ reason }: { reason: string | null }) {
111  return <span className="registry-missing">Not found: {reason ?? "not recorded"}</span>;
112}
113
114/** The size a paper states, compared with the one computed, only where the paper states an exact size. */
115function publishedVersusComputed(published: string, computed: Array<{ length: number }>) {
116  const exact = /^([0-9]+) bp$/.exec(published);
117  const sizes = [...new Set(computed.map((p) => p.length))];
118  if (!exact || sizes.length !== 1) return null;
119  return Number(exact[1]) === sizes[0] ? "equal to the computed size" : `different from the computed size, ${sizes[0]} bp`;
120}
121
122export function LabPrimer({
123  primer,
124  primers,
125  usedBy,
126}: {
127  primer: PrimerRow;
128  primers: PrimerRow[];
129  usedBy: Array<{ path: string; title: string }>;
130}) {
131  const mate = mateOf(primer, primers);
132  const pair = pairProduct(primer, primers);
133  const note = tmNote();
134  return (
135    <>
136      <dl className="registry-facts">
137        {primer.sequence ? (
138          <Fact term="Sequence (5′ to 3′)">
139            <code className="registry-seq">{primer.sequence}</code>
140          </Fact>
141        ) : null}
142        {primer.reverseComplement ? (
143          <Fact term="Reverse complement (5′ to 3′)">
144            <code className="registry-seq">{primer.reverseComplement}</code>
145          </Fact>
146        ) : null}
147        {primer.direction ? <Fact term="Direction">{primer.direction}</Fact> : null}
148        {primer.target ? <Fact term="Target">{primer.target}</Fact> : null}
149        {primer.set ? <Fact term="Set">{primer.set}</Fact> : null}
150        {mate ? (
151          <Fact term="Pairs with">
152            <a href={mate.path}>{mate.name}</a>
153          </Fact>
154        ) : null}
155        {primer.length ? <Fact term="Length">{primer.length} nt</Fact> : null}
156        {primer.gcPercent !== null ? <Fact term="GC content">{primer.gcPercent}%</Fact> : null}
157        {primer.tm !== null ? <Fact term="Melting temperature estimate (Tm)">{primer.tm} °C</Fact> : null}
158        <Fact term="Annealing temperature">
159          Depends on the polymerase: <a href={note.calculator.url}>{note.calculator.name}</a>
160        </Fact>
161        {usedBy.length > 0 ? (
162          <Fact term={usedBy.length === 1 ? "Used in" : "Used in these protocols"}>
163            <ul className="registry-used">
164              {usedBy.map((protocol) => (
165                <li key={protocol.path}>
166                  <a href={protocol.path}>{protocol.title}</a>
167                </li>
168              ))}
169            </ul>
170          </Fact>
171        ) : null}
172      </dl>
173      {primer.tm !== null ? (
174        <p className="registry-note">
175          {note.statement} The Tm estimate is not an annealing temperature. For the annealing temperature of a particular polymerase, use the{" "}
176          <a href={note.calculator.url}>{note.calculator.name}</a>.
177        </p>
178      ) : null}
179
180      <h2 id="literature">In the literature</h2>
181      <dl className="registry-facts">
182        <Fact term="Published in">
183          {primer.publishedIn ? (
184            primer.publishedDoi ? (
185              <a href={`https://doi.org/${primer.publishedDoi}`}>{primer.publishedIn}</a>
186            ) : primer.publishedUrl ? (
187              <a href={primer.publishedUrl}>{primer.publishedIn}</a>
188            ) : (
189              primer.publishedIn
190            )
191          ) : (
192            <NotFound reason={primer.publishedInMissing} />
193          )}
194        </Fact>
195        <Fact term="Name in the paper">{primer.publishedName ?? <NotFound reason={primer.publishedNameMissing} />}</Fact>
196        <Fact term="Sequence in the paper">
197          {primer.publishedSequence ? (
198            <>
199              <code className="registry-seq">{primer.publishedSequence}</code>{" "}
200              {primer.matchesPublished ? (
201                <span>Identical to the stored sequence.</span>
202              ) : (
203                <strong className="registry-differs">Differs from the stored sequence.</strong>
204              )}
205            </>
206          ) : (
207            <NotFound reason={primer.publishedSequenceMissing} />
208          )}
209        </Fact>
210        {primer.publishedProduct || primer.direction === "forward" ? (
211          <Fact term="Product in the paper">
212            {primer.publishedProduct ? (
213              <>
214                {primer.publishedProduct}
215                {pair && publishedVersusComputed(primer.publishedProduct, pair.products)
216                  ? `, ${publishedVersusComputed(primer.publishedProduct, pair.products)}`
217                  : null}
218              </>
219            ) : (
220              <NotFound reason={primer.publishedProductMissing} />
221            )}
222          </Fact>
223        ) : null}
224      </dl>
225
226      <h2 id="reference">On the reference</h2>
227      <dl className="registry-facts">
228        {primer.placement ? (
229          <>
230            <Fact term="Reference">
231              <a href={`https://www.ncbi.nlm.nih.gov/nuccore/${primer.placement.reference.accession}`}>{primer.placement.reference.id}</a>:{" "}
232              {primer.placement.reference.description}
233            </Fact>
234            <Fact term={primer.placement.sites.length === 1 ? "Position" : "Positions"}>
235              <ul className="registry-used">
236                {primer.placement.sites.map((site) => (
237                  <li key={`${site.start}-${site.strand}`}>{siteText(site)}</li>
238                ))}
239              </ul>
240            </Fact>
241          </>
242        ) : (
243          <Fact term="Reference">
244            {primer.reference
245              ? `${primer.reference}: the primer binds it nowhere within ${MAX_MISMATCHES} mismatches.`
246              : "None recorded."}
247          </Fact>
248        )}
249        {pair ? (
250          <Fact term={`Product with ${mate?.name ?? "its pair"}`}>
251            <ul className="registry-used">
252              {pair.products.map((product) => (
253                <li key={product.start}>{productSpanText(product)}</li>
254              ))}
255            </ul>
256          </Fact>
257        ) : null}
258      </dl>
259      <p className="registry-note">
260        Positions and product sizes are computed from the sequence and the reference by the site&rsquo;s own tested primer code, in
261        the accession&rsquo;s own coordinates, and are not copied from a paper. A primer is looked for exactly first, then with
262        more mismatches up to {MAX_MISMATCHES}, and any mismatch is shown.
263      </p>
264    </>
265  );
266}
267
268export function LabStrains({ result }: { result: CatalogResult<StrainRow> }) {
269  return (
270    <>
271      <p className="registry-lede">
272        The bacterial hosts the lab&rsquo;s phages are isolated on. Each strain&rsquo;s phages are counted from the phages table,
273        so a phage added there is counted here with no edit to the strain.
274      </p>
275      <div className="registry site-catalog site-catalog-wide">
276        <Catalog
277          definition={STRAINS}
278          result={result}
279          labelledBy="registry-title"
280          title={(s) => (
281            <a className="cap-table-open" href={s.path}>
282              {s.name}
283            </a>
284          )}
285        />
286      </div>
287    </>
288  );
289}
290
291export function LabStrain({ strain, usedBy }: { strain: StrainRow; usedBy: Array<{ path: string; title: string }> }) {
292  const years = phageYearsText(strain);
293  return (
294    <>
295      <dl className="registry-facts">
296        {strain.organism ? <Fact term="Organism">{strain.organism}</Fact> : null}
297        {strain.strain ? <Fact term="Strain">{strain.strain}</Fact> : null}
298        {strain.collection && strain.collectionNumber ? (
299          <Fact term="Culture collection">
300            {strain.collection} {strain.collectionNumber}
301          </Fact>
302        ) : null}
303        {strain.guideUrl ? (
304          <Fact term="SEA-PHAGES Guide page">
305            <a href={strain.guideUrl}>{strain.guideUrl.replace(/^https:\/\//, "")}</a>
306          </Fact>
307        ) : null}
308        <Fact term="Biosafety level">{strain.biosafetyLevel ?? <NotFound reason={strain.biosafetyLevelMissing} />}</Fact>
309        {usedBy.length > 0 ? (
310          <Fact term={usedBy.length === 1 ? "Used in" : "Used in these protocols"}>
311            <ul className="registry-used">
312              {usedBy.map((protocol) => (
313                <li key={protocol.path}>
314                  <a href={protocol.path}>{protocol.title}</a>
315                </li>
316              ))}
317            </ul>
318          </Fact>
319        ) : null}
320      </dl>
321
322      <h2 id="phages">Phages isolated on it</h2>
323      {strain.phages.length === 0 ? (
324        <p>No phage in the lab&rsquo;s table names this host.</p>
325      ) : (
326        <>
327          <p>
328            {strain.phages.length} phage{strain.phages.length === 1 ? "" : "s"}, found {years}, counted from the phages table.
329          </p>
330          <ul className="registry-used registry-phages">
331            {strain.phages.map((phage) => (
332              <li key={phage.name}>
333                <a href={phage.path}>{phage.name}</a>, {phage.year}
334              </li>
335            ))}
336          </ul>
337        </>
338      )}
339    </>
340  );
341}
342
343export function LabReagents({ result }: { result: CatalogResult<ReagentRow> }) {
344  return (
345    <>
346      <p className="registry-lede">
347        The substances the lab&rsquo;s protocols use, apart from the samples they work on, in one table. A reagent is bought (a supplier
348        and a catalog number, where a record in the repository states them) or prepared in the lab (a link to its recipe). Each row
349        lists the protocols that use it, and each protocol&rsquo;s own table has its amount, stock and final concentration.
350      </p>
351      <div className="registry site-catalog site-catalog-wide">
352        <Catalog
353          definition={REAGENTS}
354          result={result}
355          labelledBy="registry-title"
356          title={(r) => (
357            <a className="cap-table-open" href={r.path}>
358              {reagentLabel(r)}
359            </a>
360          )}
361          cells={{
362            supplier: (r) => (reagentSource(r) ?? <NotFound reason={r.supplierMissing} />),
363            number: (r) => (r.preparedInLab ? "" : (r.catalogNumber ?? <NotFound reason={r.catalogNumberMissing} />)),
364            link: (r) =>
365              r.productUrl ? (
366                <a href={r.productUrl}>Product page</a>
367              ) : r.recipePath ? (
368                <a href={r.recipePath}>Recipe</a>
369              ) : r.preparedInLab ? (
370                <NotFound reason={r.recipeMissing} />
371              ) : (
372                ""
373              ),
374            protocols: (r) => (
375              <>
376                {r.uses.map((u, i) => (
377                  <span key={u.path}>
378                    {i > 0 ? "; " : null}
379                    <a href={u.path}>{u.title}</a>
380                  </span>
381                ))}
382              </>
383            ),
384          }}
385        />
386      </div>
387    </>
388  );
389}
390
391export function LabEquipment({ result }: { result: CatalogResult<EquipmentRow> }) {
392  return (
393    <>
394      <p className="registry-lede">
395        The instruments and labware the lab&rsquo;s protocols list under Equipment, in one table. A manufacturer appears where a record in
396        the repository states it, and a centrifuge&rsquo;s rotor is recorded as a gap until Dustin names it. Each row lists the protocols
397        that use it, and each protocol&rsquo;s own table has its words and settings for the item.
398      </p>
399      <div className="registry site-catalog site-catalog-wide">
400        <Catalog
401          definition={EQUIPMENT_CATALOG}
402          result={result}
403          labelledBy="registry-title"
404          title={(e) => (
405            <a className="cap-table-open" href={e.path}>
406              {e.name}
407            </a>
408          )}
409          cells={{
410            manufacturer: (e) => e.manufacturer ?? <NotFound reason={e.manufacturerMissing} />,
411            rotor: (e) => (e.rotor ?? (e.rotorMissing ? <NotFound reason={e.rotorMissing} /> : "")),
412            protocols: (e) => (
413              <>
414                {e.uses.map((u, i) => (
415                  <span key={u.path}>
416                    {i > 0 ? "; " : null}
417                    <a href={u.path}>{u.title}</a>
418                  </span>
419                ))}
420              </>
421            ),
422          }}
423        />
424      </div>
425    </>
426  );
427}
428
429/** The protocols that use an item, each linked: computed from the protocols that name it, never stored on the item. */
430function UsedIn({ uses }: { uses: Array<{ path: string; title: string }> }) {
431  if (uses.length === 0) return <Fact term="Used in">No published protocol names it yet.</Fact>;
432  return (
433    <Fact term={uses.length === 1 ? "Used in" : "Used in these protocols"}>
434      <ul className="registry-used">
435        {uses.map((protocol) => (
436          <li key={protocol.path}>
437            <a href={protocol.path}>{protocol.title}</a>
438          </li>
439        ))}
440      </ul>
441    </Fact>
442  );
443}
444
445/**
446 * One reagent (docs/KNOWLEDGE-BASE.md, A1): what it is, where it comes from (a supplier and a catalog number, or the lab's recipe),
447 * every gap with its reason, and the protocols that use it. Each protocol's own table has its amount, stock and final.
448 */
449export function LabReagent({ reagent: r }: { reagent: ReagentRow }) {
450  return (
451    <dl className="registry-facts">
452      {r.abbreviation ? <Fact term="Abbreviation">{r.abbreviation}</Fact> : null}
453      {r.contents ? <Fact term="Contents">{r.contents}</Fact> : null}
454      {r.preparedInLab ? (
455        <Fact term="Source">
456          Prepared in the lab{r.recipePath ? <>, from its <a href={r.recipePath}>recipe</a></> : <>; <NotFound reason={r.recipeMissing} /></>}
457        </Fact>
458      ) : (
459        <>
460          <Fact term="Supplier">{r.supplier ?? <NotFound reason={r.supplierMissing} />}</Fact>
461          <Fact term="Catalog number">{r.catalogNumber ?? <NotFound reason={r.catalogNumberMissing} />}</Fact>
462        </>
463      )}
464      {r.productUrl ? (
465        <Fact term="Product page">
466          <a href={r.productUrl}>{r.productUrl.replace(/^https:\/\//, "")}</a>
467        </Fact>
468      ) : null}
469      <UsedIn uses={r.uses} />
470    </dl>
471  );
472}
473
474/**
475 * One item of equipment (docs/KNOWLEDGE-BASE.md, A1): who makes it, a centrifuge's rotor, every gap with its reason, and the
476 * protocols that use it. Each protocol's own table has its words and settings for the item.
477 */
478export function LabEquipmentItem({ equipment: e }: { equipment: EquipmentRow }) {
479  return (
480    <dl className="registry-facts">
481      <Fact term="Manufacturer">{e.manufacturer ?? <NotFound reason={e.manufacturerMissing} />}</Fact>
482      {e.rotor || e.rotorMissing ? <Fact term="Rotor">{e.rotor ?? <NotFound reason={e.rotorMissing} />}</Fact> : null}
483      <UsedIn uses={e.uses} />
484    </dl>
485  );
486}